298135459a15

light theme v3 — warm toasted linen palette (bg-base #C9A882, hsl 29 28% 77%); update all surface, text, border, btn tokens in vars.css and popup.css glass + override blocks; ghost-opacity 0.11; all three builds clean

time
2026-05-18 05:55 UTC · 5 months ago
machine
koh2
parent
d012f0061108
2 files src/popup/styles/popup.css+13 −13src/popup/styles/vars.css+16 −15
src/popup/styles/popup.css+13 −13
@@ -3519,7 +3519,7 @@35193519 35203520 .light .peach-glass,35213521 [data-theme="light"] .peach-glass {3522-  background: rgba(205, 191, 164, 0.70);3522+  background: rgba(201, 168, 130, 0.70);35233523   border: 1px solid rgba(26, 18, 8, 0.10);35243524   backdrop-filter: blur(12px) saturate(1.2);35253525   -webkit-backdrop-filter: blur(12px) saturate(1.2);@@ -3528,7 +3528,7 @@35283528 @supports not (backdrop-filter: blur(1px)) {35293529   .light .peach-glass,35303530   [data-theme="light"] .peach-glass {3531-    background: rgba(205, 191, 164, 0.95);3531+    background: rgba(201, 168, 130, 0.95);35323532     border: 1px solid rgba(26, 18, 8, 0.12);35333533   }35343534 }@@ -3545,7 +3545,7 @@35453545 35463546 .light .peach-lock-panel.peach-glass,35473547 [data-theme="light"] .peach-lock-panel.peach-glass {3548-  background: rgba(200, 185, 154, 0.78);3548+  background: rgba(188, 155, 114, 0.78);35493549   border: 1px solid rgba(26, 18, 8, 0.12);35503550   box-shadow:35513551     inset 0 1px 0 rgba(255, 255, 255, 0.4),@@ -3561,7 +3561,7 @@35613561   }35623562   .light .peach-lock-panel.peach-glass,35633563   [data-theme="light"] .peach-lock-panel.peach-glass {3564-    background: rgba(200, 185, 154, 0.97);3564+    background: rgba(188, 155, 114, 0.97);35653565   }35663566 }35673567 @@ -8672,14 +8672,14 @@86728672    Tokens that cannot be expressed as variable substitutions — hardcoded86738673    context-specific values that need separate light-mode rules. */86748674 8675-/* Settings section headers: use text-label (#5C4C38) for more presence8675+/* Settings section headers: use text-label (#5C4228) for more presence86768676    than --t2 alone — gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY86778677    the dark anchor they need against the warmer background. */86788678 .light .peach-settings-sub-label,86798679 [data-theme="light"] .peach-settings-sub-label,86808680 .light .peach-settings-nav-label,86818681 [data-theme="light"] .peach-settings-nav-label {8682-  color: #5C4C38;8682+  color: #5C4228;86838683 }86848684 86858685 /* Secondary action buttons (ghost / subtle): filled with the sunken surface@@ -8687,27 +8687,27 @@86878687    rather than floating. Values track --s3 (bg-sunken) and border-default. */86888688 .light .peach-btn--ghost,86898689 [data-theme="light"] .peach-btn--ghost {8690-  background: #DED8CE;8691-  border-color: #B4A898;8690+  background: #BC9B72;8691+  border-color: #96724C;86928692   color: #1A1208;86938693 }86948694 .light .peach-btn--subtle,86958695 [data-theme="light"] .peach-btn--subtle {8696-  background: #DED8CE;8697-  border-color: #B4A898;8696+  background: #BC9B72;8697+  border-color: #96724C;86988698 }86998699 87008700 /* Wide secondary action button on the lock screen — override the87018701    hardcoded dark-mode rgba values with warm-surface equivalents. */87028702 .light .peach-lock-secondary,87038703 [data-theme="light"] .peach-lock-secondary {8704-  background: #DED8CE;8705-  border-color: #B4A898;8704+  background: #BC9B72;8705+  border-color: #96724C;87068706   color: #1A1208;87078707 }87088708 .light .peach-lock-secondary:hover,87098709 [data-theme="light"] .peach-lock-secondary:hover {8710-  background: #E4DED5;8710+  background: #C3A27A;87118711 }87128712 87138713 /* Entry row hover: replace the near-invisible light-on-light rgba value. */

view file

src/popup/styles/vars.css+16 −15
@@ -162,30 +162,31 @@162162 }163163 164164 .light {165-  /* v2: cool linen surfaces — hsl(30°, 10–12%, 84–92%)166-     Lower saturation than v1; neutral enough for peach accent to read warm by contrast. */167-  --bg: #E8E2D9;168-  --s1: #EDE8E0;169-  --s2: #F0EBE4;170-  --s3: #DED8CE;165+  /* v3: warm toasted linen — hsl(29°, 26–28%, 72–84%)166+     User-selected base: hsl(29, 28%, 77%). Elevated surfaces step +4–7%,167+     sunken surfaces step −5%. Peach accent reads vibrant against this base. */168+  --bg: #C9A882;169+  --s1: #D2B48C;170+  --s2: #D9BF98;171+  --s3: #BC9B72;171172   --bg-1: var(--s1);172173   --bg-2: var(--s2);173174   --bg-3: var(--s3);174175   --t0: #1A1208;175-  --t1: #3D2E18;176-  --t2: #6B5A42;177-  --t3: #C8C0B4;176+  --t1: #2E2010;177+  --t2: #6B4E30;178+  --t3: rgba(168, 132, 94, 0.4);178179   --t4: rgba(26, 18, 8, 0.06);179180   --surface-card: rgba(26, 18, 8, 0.03);180-  --surface-elevated: rgba(237, 232, 224, 0.97);181-  --shell-top-solid: rgba(232, 226, 217, 0.98);182-  --shell-top-fade: rgba(237, 232, 224, 0.96);181+  --surface-elevated: rgba(210, 180, 140, 0.97);182+  --shell-top-solid: rgba(201, 168, 130, 0.98);183+  --shell-top-fade: rgba(210, 180, 140, 0.96);183184   --shell-accent-a: color-mix(in srgb, var(--peach-accent) 6%, transparent);184185   --shell-accent-b: color-mix(in srgb, var(--peach-accent) 3%, transparent);185-  --copy-shadow: 0 2px 8px rgba(80, 56, 32, 0.12), 0 14px 48px rgba(80, 56, 32, 0.12), 0 0 0 1px rgba(26, 18, 8, 0.06);186+  --copy-shadow: 0 2px 8px rgba(80, 56, 32, 0.15), 0 14px 48px rgba(80, 56, 32, 0.15), 0 0 0 1px rgba(26, 18, 8, 0.06);186187   --peach-rune-idle: rgba(26, 18, 8, 0.16);187-  /* lighter surfaces make the watermark more visible at the same opacity — step down slightly */188-  --peach-ghost-opacity: 0.13;188+  /* darker base: watermark stays subtle at slightly lower opacity than v2 */189+  --peach-ghost-opacity: 0.11;189190 }190191 191192 /* ─── Text size scaling ────────────────────────────────────────────────

view file