From fb627f59f0ee6cfc396634b3f1674cc09a22e186 Mon Sep 17 00:00:00 2001
From: Cordero Core <127983572+cdcore09@users.noreply.github.com>
Date: Mon, 10 Aug 2026 04:38:27 -0700
Subject: [PATCH] fix(styles): use theme tokens for hardcoded brand blues
 (#345)

Replace hardcoded #1d4ed8 / #2563eb / #bfdbfe values with their exact
design-token equivalents (--primary, --primary-hover, --primary-strong)
in 17 declarations across auth, dark, management, and vault styles.

Light theme is pixel-identical: every replaced hex equals the token's
light value. In dark theme this fixes spots that dark.css never
overrode and that kept light-theme blues on dark backgrounds:
standalone footer links and version badge, JWT warning inline link,
restore-progress active dot, TOTP countdown ring, and the
authorized-device checkbox accent.

Intentionally left alone: .btn-primary gradients (would lighten dark
buttons under white text), card brand colors (Amex/Maestro/RuPay blues
are brand constants, not theme colors), and light-pill pairings whose
backgrounds have no token (.log-mode-option.active, .log-category-auth,
.log-level-info, .folder-edit-btn:hover, #93c5fd borders).
---
 webapp/src/styles/auth.css       |  8 ++++----
 webapp/src/styles/dark.css       |  2 +-
 webapp/src/styles/management.css | 18 +++++++++---------
 webapp/src/styles/vault.css      |  6 +++---
 4 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/webapp/src/styles/auth.css b/webapp/src/styles/auth.css
index 422170a..558f527 100644
--- a/webapp/src/styles/auth.css
+++ b/webapp/src/styles/auth.css
@@ -369,7 +369,7 @@
 .not-found-code {
   @apply rounded-full px-3 py-1 text-sm font-extrabold;
   background: #eef4ff;
-  color: #1d4ed8;
+  color: var(--primary-hover);
 }
 
 .not-found-copy {
@@ -574,7 +574,7 @@
 
 .jwt-inline-link {
   @apply font-bold no-underline;
-  color: #1d4ed8;
+  color: var(--primary-hover);
 }
 
 .jwt-inline-link:hover {
@@ -613,7 +613,7 @@
 
 .standalone-footer a {
   @apply font-bold no-underline;
-  color: #1d4ed8;
+  color: var(--primary-hover);
 }
 
 .standalone-footer a:hover {
@@ -622,5 +622,5 @@
 
 .standalone-version {
   @apply font-bold;
-  color: #1d4ed8;
+  color: var(--primary-hover);
 }
diff --git a/webapp/src/styles/dark.css b/webapp/src/styles/dark.css
index 3386482..2f70e78 100644
--- a/webapp/src/styles/dark.css
+++ b/webapp/src/styles/dark.css
@@ -220,7 +220,7 @@
 }
 
 :root[data-theme='dark'] .card-brand-icon {
-  color: #bfdbfe;
+  color: var(--primary-strong);
   background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
   border-color: color-mix(in srgb, var(--primary) 30%, var(--line));
 }
diff --git a/webapp/src/styles/management.css b/webapp/src/styles/management.css
index 0c68750..b869f45 100644
--- a/webapp/src/styles/management.css
+++ b/webapp/src/styles/management.css
@@ -99,7 +99,7 @@
   @apply inline-flex h-[22px] w-[22px] shrink-0 cursor-pointer items-center justify-center rounded-full p-0 text-[13px] font-extrabold leading-none;
   border: 1px solid #bfd1f3;
   background: #eef4ff;
-  color: #1d4ed8;
+  color: var(--primary-hover);
 }
 
 .backup-help-trigger:hover,
@@ -194,7 +194,7 @@
 }
 
 .backup-recommendation-step a {
-  color: #1d4ed8;
+  color: var(--primary-hover);
   font-weight: 700;
   text-decoration: underline;
   text-underline-offset: 2px;
@@ -316,14 +316,14 @@
 }
 
 .backup-interval-preset:hover:not(:disabled) {
-  border-color: #2563eb;
-  color: #2563eb;
+  border-color: var(--primary);
+  color: var(--primary);
   background: #eff6ff;
 }
 
 .backup-interval-preset.active {
-  border-color: #2563eb;
-  background: #2563eb;
+  border-color: var(--primary);
+  background: var(--primary);
   color: #fff;
 }
 
@@ -1786,7 +1786,7 @@
 }
 
 .restore-progress-item.active {
-  color: #1d4ed8;
+  color: var(--primary-hover);
 }
 
 .restore-progress-item.done {
@@ -1799,7 +1799,7 @@
 }
 
 .restore-progress-item.active .restore-progress-dot {
-  background: #1d4ed8;
+  background: var(--primary-hover);
 }
 
 .restore-progress-item.done .restore-progress-dot {
@@ -1871,7 +1871,7 @@
 .authorized-device-checkbox {
   width: 16px;
   height: 16px;
-  accent-color: #2563eb;
+  accent-color: var(--primary);
 }
 
 .authorized-devices-table td:first-child {
diff --git a/webapp/src/styles/vault.css b/webapp/src/styles/vault.css
index 5e606df..056fd78 100644
--- a/webapp/src/styles/vault.css
+++ b/webapp/src/styles/vault.css
@@ -47,7 +47,7 @@
 }
 
 .folder-add-btn:hover {
-  color: #1d4ed8;
+  color: var(--primary-hover);
 }
 
 .search-input {
@@ -161,7 +161,7 @@
 }
 
 .folder-sort-btn:hover {
-  color: #1d4ed8;
+  color: var(--primary-hover);
   background: #dbeafe;
   transform: scale(1.06);
 }
@@ -962,7 +962,7 @@ select.input.duplicate-mode-toolbar-select {
 }
 
 .totp-ring-progress {
-  stroke: #2563eb;
+  stroke: var(--primary);
   stroke-linecap: round;
   transition: stroke-dashoffset 260ms linear, stroke 200ms ease;
 }