From 043d9564ba11a3aa3e3b9e25482cdc77fdea6385 Mon Sep 17 00:00:00 2001 From: Jason Staack Date: Sat, 21 Mar 2026 11:45:27 -0500 Subject: [PATCH] feat(ui): replace Deep Space tokens with Warm Precision v3.1 Co-Authored-By: Claude Opus 4.6 (1M context) --- frontend/src/index.css | 166 ++++++++++++++++++++--------------------- 1 file changed, 83 insertions(+), 83 deletions(-) diff --git a/frontend/src/index.css b/frontend/src/index.css index b683c09..90eb620 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -26,121 +26,118 @@ @tailwind components; @tailwind utilities; -@keyframes shimmer { - 0% { - background-position: -200% 0; - } - 100% { - background-position: 200% 0; - } -} - @layer base { :root { - /* ── Deep Space Light Mode ── */ - --background: 240 20% 99%; - --surface: 0 0% 100%; - --elevated: 240 33% 96%; - --border: 0 0% 0% / 0.08; - --border-bright: 240 14% 88%; + /* ── Warm Precision Light Mode ── */ + --background: 39 21% 89%; /* #eae7de */ + --sidebar: 36 16% 85%; /* #e0dcd2 */ + --panel: 40 24% 95%; /* #f6f4ec */ + --elevated: 39 22% 92%; /* #f0ede4 */ - --text-primary: 240 7% 7%; - --text-secondary: 249 14% 37%; - --text-muted: 249 11% 57%; + --border-subtle: 30 18% 13% / 0.06; + --border-default: 30 18% 13% / 0.12; - --accent: 239 76% 62%; - --accent-hover: 244 75% 58%; - --accent-muted: 239 76% 62% / 0.1; - --ring: 239 76% 62%; + --text-primary: 43 27% 8%; /* #1a1810 */ + --text-secondary: 40 10% 33%; /* #5e5a4e */ + --text-muted: 36 7% 50%; /* #8a8578 */ - --success: 142 71% 35%; - --warning: 32 95% 44%; - --error: 0 72% 51%; + --accent: 43 32% 40%; /* #8a7a48 */ + --accent-soft: 43 32% 40% / 0.10; + --ring: 43 32% 40%; + + --text-label: 36 7% 50%; /* same as text-muted in light */ + + --success: 140 35% 35%; /* #3a7a4a */ + --warning: 43 66% 36%; /* #9a7a20 */ + --error: 11 48% 44%; /* #a85040 */ --info: 217 91% 50%; - --online: 142 71% 35%; - --offline: 0 72% 51%; - --unknown: 249 11% 57%; + --online: 140 35% 35%; + --offline: 11 48% 44%; + --unknown: 36 7% 50%; - --chart-1: 239 76% 62%; - --chart-2: 142 71% 35%; - --chart-3: 32 95% 44%; - --chart-4: 0 72% 51%; - --chart-5: 280 68% 50%; - --chart-6: 217 91% 50%; + --alert-badge: 43 78% 30%; /* #8a6a10 */ - /* Sidebar */ - --sidebar: 210 40% 98%; + --chart-1: 43 32% 40%; + --chart-2: 140 35% 35%; + --chart-3: 43 66% 36%; + --chart-4: 11 48% 44%; + --chart-5: 280 30% 45%; + --chart-6: 217 50% 45%; - /* Functional tokens mapped to Tailwind names */ + /* Functional mappings */ --foreground: var(--text-primary); - --card: var(--surface); + --card: var(--panel); --card-foreground: var(--text-primary); - --popover: var(--surface); + --popover: var(--panel); --popover-foreground: var(--text-primary); --primary: var(--accent); - --primary-foreground: 0 0% 100%; + --primary-foreground: 40 24% 95%; --secondary: var(--elevated); --secondary-foreground: var(--text-primary); --muted: var(--elevated); --muted-foreground: var(--text-secondary); - --input: var(--border); + --input: var(--border-default); --destructive: var(--error); + --border: var(--border-default); - /* Border radius */ - --radius: 0.5rem; - - /* Content width */ + --radius: 0.125rem; + --radius-control: 0.25rem; --content-max: 1312px; - --sidebar-width: 13.5rem; + --sidebar-width: 172px; } .dark { - /* ── Deep Space Dark Mode ── */ - --background: 240 7% 7%; - --surface: 240 22% 10%; - --elevated: 240 28% 14%; - --border: 0 0% 100% / 0.06; - --border-bright: 240 24% 19%; + /* ── Warm Precision Dark Mode ── */ + --background: 40 14% 4%; /* #0c0b09 */ + --sidebar: 40 10% 7%; /* #141310 */ + --panel: 40 8% 9%; /* #1a1916 */ + --elevated: 40 7% 11%; /* #1e1d1a */ - --text-primary: 240 14% 91%; - --text-secondary: 249 9% 59%; - --text-muted: 249 13% 44%; + --border-subtle: 36 10% 65% / 0.06; + --border-default: 36 10% 65% / 0.10; - --accent: 235 91% 74%; - --accent-hover: 239 84% 67%; - --accent-muted: 239 84% 67% / 0.15; - --ring: 235 91% 74%; + --text-primary: 39 16% 78%; /* #d4ccb8 */ + --text-secondary: 36 7% 54%; /* #948e80 */ + --text-muted: 40 8% 33%; /* #5e5a50 */ - --success: 142 69% 58%; - --warning: 38 92% 50%; - --error: 0 84% 60%; - --info: 217 91% 60%; + --accent: 43 28% 47%; /* #9a8a58 */ + --accent-soft: 43 28% 47% / 0.10; + --ring: 43 28% 47%; - --online: 142 69% 58%; - --offline: 0 84% 60%; - --unknown: 249 9% 59%; + --text-label: 40 8% 27%; /* #4a4840 — section labels only */ - --chart-1: 235 91% 74%; - --chart-2: 142 69% 58%; - --chart-3: 38 92% 50%; - --chart-4: 0 84% 60%; - --chart-5: 280 68% 68%; - --chart-6: 217 91% 60%; + --success: 133 22% 45%; /* #5a8a62 */ + --warning: 38 54% 50%; /* #c49a3a */ + --error: 8 42% 53%; /* #c06050 */ + --info: 217 60% 60%; + + --online: 133 22% 45%; + --offline: 8 42% 53%; + --unknown: 36 7% 54%; + + --alert-badge: 43 56% 53%; /* #d4a43a */ + + --chart-1: 43 28% 47%; + --chart-2: 133 22% 45%; + --chart-3: 38 54% 50%; + --chart-4: 8 42% 53%; + --chart-5: 280 30% 55%; + --chart-6: 217 50% 55%; --foreground: var(--text-primary); - --card: var(--surface); + --card: var(--panel); --card-foreground: var(--text-primary); - --popover: var(--surface); + --popover: var(--panel); --popover-foreground: var(--text-primary); --primary: var(--accent); - --primary-foreground: 222 47% 11%; + --primary-foreground: 40 14% 4%; --secondary: var(--elevated); --secondary-foreground: var(--text-primary); - --muted: 217 33% 17% / 0.5; + --muted: var(--elevated); --muted-foreground: var(--text-secondary); - --input: var(--border); - --sidebar: 222 47% 11%; + --input: var(--border-default); + --border: var(--border-default); } @media (prefers-reduced-motion: reduce) { @@ -184,12 +181,15 @@ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: hsl(var(--elevated)); border-radius: 3px; } - ::-webkit-scrollbar-thumb:hover { background: hsl(var(--border-bright)); } + ::-webkit-scrollbar-thumb:hover { background: hsl(var(--text-muted)); } + + :root { + transition: background-color 100ms linear, color 100ms linear; + } - /* ── Deep Space transitions ── */ button, a, input, select, textarea, [role="button"], [role="tab"], [role="menuitem"] { - transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, opacity 150ms ease; + transition: background-color 50ms linear, border-color 50ms linear, color 50ms linear; } [data-sidebar] { @@ -197,10 +197,10 @@ } [data-radix-dialog-overlay] { - transition: opacity 150ms ease; + transition: none; } [data-radix-dialog-content] { - transition: opacity 150ms ease, transform 150ms ease; + transition: none; } .font-mono, [class*="font-mono"] {