fix(client): light theme stuck on old gold palette
[data-theme=light] block in globals.css still defined --color-primary as #8E7547 with gold gradient buttons and gold focus rings. Dark mode was correctly on the brand violet #7B6BE3 since the Iris overhaul, but the moment a user switched to (or was OS-defaulted to) light theme they got the legacy gold mark on login button, focus ring, sidebar active state, shadow-button-primary, etc. Rewrote the light override to mirror the dark brand palette: - --color-primary #7B6BE3, primary-container #5B4FB8, fixed #9A8DEC - --color-secondary #6B7CE0 (was slate #5A6B82) - --gradient-btn-primary 3-stop violet→blue (matches dark mode + Manager) - --gradient-brand-wordmark also added in light scope (was inheriting but explicit avoids cascade surprises) - All rgba(142,117,71,*) shadows / borders rewritten to rgba(123,107,227,*) Code-syntax / diff highlight golds left alone (those tint code text, not brand UI). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -323,13 +323,18 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* ─── Optional Light Theme Override ─────────────────────────────── */
|
/* ─── Optional Light Theme Override ─────────────────────────────── */
|
||||||
|
/* The dark theme above is the brand-correct violet (#7B6BE3) set. This
|
||||||
|
* light override previously kept the old gold palette (#8E7547 …) — that
|
||||||
|
* is what produced gold buttons / gold focus rings when the user picked
|
||||||
|
* light mode. Re-tuned to mirror the same brand violet so the login
|
||||||
|
* page, primary CTAs and focus state stay on-brand in both themes. */
|
||||||
[data-theme="light"] {
|
[data-theme="light"] {
|
||||||
color-scheme: light;
|
color-scheme: light;
|
||||||
|
|
||||||
--color-primary: #8E7547;
|
--color-primary: #7B6BE3;
|
||||||
--color-primary-container: #6F5A35;
|
--color-primary-container: #5B4FB8;
|
||||||
--color-primary-fixed: #E0C896;
|
--color-primary-fixed: #9A8DEC;
|
||||||
--color-primary-fixed-dim: #C5A572;
|
--color-primary-fixed-dim: #7B6BE3;
|
||||||
|
|
||||||
--color-on-primary: #FFFFFF;
|
--color-on-primary: #FFFFFF;
|
||||||
--color-on-surface: #1B1B1F;
|
--color-on-surface: #1B1B1F;
|
||||||
@@ -349,10 +354,10 @@
|
|||||||
--color-outline: #8B8B92;
|
--color-outline: #8B8B92;
|
||||||
--color-outline-variant: rgba(0, 0, 0, 0.08);
|
--color-outline-variant: rgba(0, 0, 0, 0.08);
|
||||||
|
|
||||||
--color-secondary: #5A6B82;
|
--color-secondary: #6B7CE0;
|
||||||
--color-secondary-container: #DDE3EC;
|
--color-secondary-container: #DDE3EC;
|
||||||
--color-tertiary: #8E7547;
|
--color-tertiary: #9A8DEC;
|
||||||
--color-tertiary-container: #F0E5D0;
|
--color-tertiary-container: #E8E3FA;
|
||||||
|
|
||||||
--color-error: #C92A30;
|
--color-error: #C92A30;
|
||||||
--color-error-container: #FCD9DA;
|
--color-error-container: #FCD9DA;
|
||||||
@@ -360,7 +365,7 @@
|
|||||||
|
|
||||||
--color-inverse-surface: #1B1B1F;
|
--color-inverse-surface: #1B1B1F;
|
||||||
--color-inverse-on-surface: #FAFAFB;
|
--color-inverse-on-surface: #FAFAFB;
|
||||||
--color-inverse-primary: #C5A572;
|
--color-inverse-primary: #5B4FB8;
|
||||||
|
|
||||||
--color-success: #2E9F69;
|
--color-success: #2E9F69;
|
||||||
--color-warning: #C9881F;
|
--color-warning: #C9881F;
|
||||||
@@ -368,16 +373,16 @@
|
|||||||
--color-surface-sidebar: #F4F4F6;
|
--color-surface-sidebar: #F4F4F6;
|
||||||
--color-surface-hover: var(--color-surface-container-high);
|
--color-surface-hover: var(--color-surface-container-high);
|
||||||
--color-surface-selected: var(--color-surface-container);
|
--color-surface-selected: var(--color-surface-container);
|
||||||
--color-model-option-selected-bg: rgba(142, 117, 71, 0.10);
|
--color-model-option-selected-bg: rgba(123, 107, 227, 0.10);
|
||||||
--color-model-option-selected-border: rgba(142, 117, 71, 0.28);
|
--color-model-option-selected-border: rgba(123, 107, 227, 0.28);
|
||||||
--color-sidebar-filter-bg: transparent;
|
--color-sidebar-filter-bg: transparent;
|
||||||
--color-sidebar-filter-border: rgba(0, 0, 0, 0.08);
|
--color-sidebar-filter-border: rgba(0, 0, 0, 0.08);
|
||||||
--color-sidebar-filter-icon-bg: transparent;
|
--color-sidebar-filter-icon-bg: transparent;
|
||||||
--color-sidebar-search-bg: rgba(255, 255, 255, 0.85);
|
--color-sidebar-search-bg: rgba(255, 255, 255, 0.85);
|
||||||
--color-sidebar-search-border: rgba(0, 0, 0, 0.08);
|
--color-sidebar-search-border: rgba(0, 0, 0, 0.08);
|
||||||
--color-sidebar-item-hover: rgba(0, 0, 0, 0.03);
|
--color-sidebar-item-hover: rgba(0, 0, 0, 0.03);
|
||||||
--color-sidebar-item-active: rgba(0, 0, 0, 0.05);
|
--color-sidebar-item-active: rgba(123, 107, 227, 0.05);
|
||||||
--color-sidebar-item-active-border: rgba(142, 117, 71, 0.16);
|
--color-sidebar-item-active-border: rgba(123, 107, 227, 0.18);
|
||||||
--sidebar-panel-bg-image: none;
|
--sidebar-panel-bg-image: none;
|
||||||
|
|
||||||
--color-border: rgba(0, 0, 0, 0.08);
|
--color-border: rgba(0, 0, 0, 0.08);
|
||||||
@@ -391,17 +396,21 @@
|
|||||||
|
|
||||||
--color-surface-info: var(--color-surface-container-low);
|
--color-surface-info: var(--color-surface-container-low);
|
||||||
--color-brand: var(--color-primary);
|
--color-brand: var(--color-primary);
|
||||||
--color-text-accent: var(--color-secondary);
|
--color-text-accent: var(--color-primary);
|
||||||
|
|
||||||
--shadow-dropdown: 0 4px 20px rgba(0, 0, 0, 0.04), 0 12px 40px rgba(0, 0, 0, 0.08);
|
--shadow-dropdown: 0 4px 20px rgba(0, 0, 0, 0.04), 0 12px 40px rgba(0, 0, 0, 0.08);
|
||||||
--shadow-sidebar-filter: none;
|
--shadow-sidebar-filter: none;
|
||||||
--shadow-focus-ring: 0 0 0 1px rgba(142, 117, 71, 0.28);
|
--shadow-focus-ring: 0 0 0 1px rgba(123, 107, 227, 0.28);
|
||||||
--shadow-error-ring: 0 0 0 1px rgba(201, 42, 48, 0.20);
|
--shadow-error-ring: 0 0 0 1px rgba(201, 42, 48, 0.20);
|
||||||
--shadow-button-primary: 0 6px 20px rgba(142, 117, 71, 0.20);
|
--shadow-button-primary: 0 6px 20px rgba(123, 107, 227, 0.22);
|
||||||
|
|
||||||
--color-btn-primary-fg: var(--color-on-primary);
|
--color-btn-primary-fg: var(--color-on-primary);
|
||||||
--gradient-btn-primary: linear-gradient(180deg, var(--color-primary), var(--color-primary-container));
|
--gradient-btn-primary:
|
||||||
--gradient-btn-primary-hover: linear-gradient(180deg, var(--color-primary-fixed-dim), var(--color-primary));
|
linear-gradient(135deg, var(--color-primary-fixed) 0%, var(--color-primary) 50%, var(--color-secondary) 100%);
|
||||||
|
--gradient-btn-primary-hover:
|
||||||
|
linear-gradient(135deg, #B0A4F2 0%, var(--color-primary-fixed) 50%, #8595E5 100%);
|
||||||
|
--gradient-brand-wordmark:
|
||||||
|
linear-gradient(135deg, #B888E5 0%, #6B7CE0 100%);
|
||||||
|
|
||||||
--color-surface-user-msg: var(--color-surface-container);
|
--color-surface-user-msg: var(--color-surface-container);
|
||||||
--color-overlay-scrim: rgba(20, 20, 24, 0.50);
|
--color-overlay-scrim: rgba(20, 20, 24, 0.50);
|
||||||
|
|||||||
Reference in New Issue
Block a user