From a6f6af8a6c52bada1f9f0d62baaae6d2b3278869 Mon Sep 17 00:00:00 2001
From: Daniel Hiller <daniel@hiller.email>
Date: Sat, 8 Aug 2026 00:15:34 +0200
Subject: [PATCH] fix: Replace Pro theme tokens with literal colors

The two-factor stylesheets were carried over from the Pro edition and
referenced CSS custom properties from its theme system, which this
edition does not define. They silently fell back to browser defaults.
---
 .../common/Login/TotpChallengeModal.module.scss      |  2 +-
 .../SecurityPane/RecoveryCodesView.module.scss       |  4 ++--
 .../SecurityPane/SecurityPane.module.scss            |  4 ++--
 .../SecurityPane/TotpSetupWizard.module.scss         | 12 ++++++------
 .../SecurityPane/TrustedDevicesSection.module.scss   |  6 +++---
 5 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/client/src/components/common/Login/TotpChallengeModal.module.scss b/client/src/components/common/Login/TotpChallengeModal.module.scss
index 0440fefa..950f48b5 100644
--- a/client/src/components/common/Login/TotpChallengeModal.module.scss
+++ b/client/src/components/common/Login/TotpChallengeModal.module.scss
@@ -5,7 +5,7 @@
 
 :global(#app) {
   .intro {
-    color: var(--text-secondary);
+    color: #444444;
     margin-bottom: 16px;
   }
 
diff --git a/client/src/components/users/UserSettingsModal/SecurityPane/RecoveryCodesView.module.scss b/client/src/components/users/UserSettingsModal/SecurityPane/RecoveryCodesView.module.scss
index e4d904da..7e01514f 100644
--- a/client/src/components/users/UserSettingsModal/SecurityPane/RecoveryCodesView.module.scss
+++ b/client/src/components/users/UserSettingsModal/SecurityPane/RecoveryCodesView.module.scss
@@ -5,8 +5,8 @@
 
 :global(#app) {
   .wrapper {
-    background: var(--surface-raised);
-    border: 1px solid var(--grey-e0e0e0);
+    background: #fafafa;
+    border: 1px solid #e0e0e0;
     border-radius: 6px;
     padding: 12px;
   }
diff --git a/client/src/components/users/UserSettingsModal/SecurityPane/SecurityPane.module.scss b/client/src/components/users/UserSettingsModal/SecurityPane/SecurityPane.module.scss
index b7f414b1..78b2a475 100644
--- a/client/src/components/users/UserSettingsModal/SecurityPane/SecurityPane.module.scss
+++ b/client/src/components/users/UserSettingsModal/SecurityPane/SecurityPane.module.scss
@@ -10,12 +10,12 @@
   }
 
   .intro {
-    color: var(--text-secondary);
+    color: #444444;
     margin-bottom: 16px;
   }
 
   .enabledMeta {
-    color: var(--text-secondary);
+    color: #444444;
     font-weight: normal;
   }
 
diff --git a/client/src/components/users/UserSettingsModal/SecurityPane/TotpSetupWizard.module.scss b/client/src/components/users/UserSettingsModal/SecurityPane/TotpSetupWizard.module.scss
index b7b62990..b42559c3 100644
--- a/client/src/components/users/UserSettingsModal/SecurityPane/TotpSetupWizard.module.scss
+++ b/client/src/components/users/UserSettingsModal/SecurityPane/TotpSetupWizard.module.scss
@@ -5,7 +5,7 @@
 
 :global(#app) {
   .intro {
-    color: var(--text-secondary);
+    color: #444444;
     margin-bottom: 12px;
   }
 
@@ -14,8 +14,8 @@
   }
 
   .qrWrapper {
-    background: var(--surface-card);
-    border: 1px solid var(--grey-dddddd);
+    background: #ffffff;
+    border: 1px solid #dddddd;
     border-radius: 8px;
     display: inline-block;
     margin: 16px 0;
@@ -23,14 +23,14 @@
   }
 
   .secretLabel {
-    color: var(--text-secondary);
+    color: #444444;
     font-size: 13px;
     margin-bottom: 6px;
   }
 
   .secret {
-    background: var(--surface-subtle);
-    border: 1px solid var(--grey-dddddd);
+    background: #f8f8f8;
+    border: 1px solid #dddddd;
     border-radius: 4px;
     display: inline-block;
     font-family: 'JetBrains Mono', 'Menlo', 'Courier New', monospace;
diff --git a/client/src/components/users/UserSettingsModal/SecurityPane/TrustedDevicesSection.module.scss b/client/src/components/users/UserSettingsModal/SecurityPane/TrustedDevicesSection.module.scss
index 096a3931..785ce9ef 100644
--- a/client/src/components/users/UserSettingsModal/SecurityPane/TrustedDevicesSection.module.scss
+++ b/client/src/components/users/UserSettingsModal/SecurityPane/TrustedDevicesSection.module.scss
@@ -13,7 +13,7 @@
   }
 
   .hint {
-    color: var(--text-tertiary);
+    color: #666666;
     margin-bottom: 12px;
   }
 
@@ -32,13 +32,13 @@
   }
 
   .deviceSecondary {
-    color: var(--text-secondary) !important;
+    color: #444444 !important;
     font-size: 13px;
     margin-top: 2px !important;
   }
 
   .meta {
-    color: var(--text-tertiary) !important;
+    color: #666666 !important;
     font-size: 12px;
     margin-top: 4px;
   }