chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: migrate index.css to design system v6 color tokens

Browse Source 
Accent: orange (#f97316) → blue (#60a5fa)
Surfaces: deeper charcoal range (#16181f page, #1e2028 card)
Warning: yellow (#eab308) → amber (#fbbf24)
Info: new cyan (#67e8f9) token added
All Tailwind semantic mappings updated to match.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-03-29 16:19:21 +00:00
parent 98d50ff31a
commit 3e52708253
1 changed files with 33 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
frontend/src/index.css
View File

@@ -8,14 +8,15 @@
@import '@xyflow/react/dist/style.css';
@theme {
/* ── Surface colors (Charcoal — sidebar darkest) ─ */
--color-bg-page: #1a1c23;
--color-bg-sidebar: #10121a;
--color-bg-card: #22252e;
--color-bg-card-hover: #282b35;
--color-bg-input: #282b35;
--color-bg-code: #14161e;
--color-bg-elevated: #2e3140;
/* ── Surface colors (Deep Charcoal — sidebar darkest) ─ */
--color-bg-page: #16181f;
--color-bg-sidebar: #0e1016;
--color-bg-card: #1e2028;
--color-bg-card-hover: #252830;
--color-bg-input: #252830;
--color-bg-code: #12141a;
--color-bg-elevated: #2a2d38;
--color-bg-raised: #303442;
/* ── Text colors ───────────────────────────────── */
--color-text-heading: #f0f2f5;
@@ -25,43 +26,45 @@
--color-text-rail-label: #e2e5eb;
/* ── Border colors ─────────────────────────────── */
--color-border-default: #2e3240;
--color-border-default: #2a2e3a;
--color-border-hover: #3d4252;
/* ── Accent (ember orange) ─────────────────────── */
--color-accent: #f97316;
--color-accent-hover: #ea580c;
--color-accent-dim: rgba(249,115,22,0.10);
--color-accent-text: #fdba74;
/* ── Accent (electric blue) ───────────────────────── */
--color-accent: #60a5fa;
--color-accent-hover: #3b82f6;
--color-accent-dim: rgba(96,165,250,0.10);
--color-accent-text: #93c5fd;
/* ── Semantic colors ───────────────────────────── */
--color-success: #34d399;
--color-success-dim: rgba(52,211,153,0.10);
--color-warning: #eab308;
--color-warning-dim: rgba(234,179,8,0.10);
--color-warning: #fbbf24;
--color-warning-dim: rgba(251,191,36,0.10);
--color-danger: #f87171;
--color-danger-dim: rgba(248,113,113,0.10);
--color-info: #67e8f9;
--color-info-dim: rgba(103,232,249,0.10);
/* ── Tailwind semantic mappings ─────────────────── */
--color-background: #1a1c23;
--color-background: #16181f;
--color-foreground: #e2e5eb;
--color-card: #22252e;
--color-card: #1e2028;
--color-card-foreground: #e2e5eb;
--color-popover: #22252e;
--color-popover: #1e2028;
--color-popover-foreground: #e2e5eb;
--color-primary: #f97316;
--color-primary: #60a5fa;
--color-primary-foreground: #ffffff;
--color-secondary: #2e3140;
--color-secondary: #2a2d38;
--color-secondary-foreground: #e2e5eb;
--color-muted: #2e3140;
--color-muted: #2a2d38;
--color-muted-foreground: #848b9b;
--color-accent-tw: #2e3140;
--color-accent-tw: #2a2d38;
--color-accent-foreground: #e2e5eb;
--color-destructive: #f87171;
--color-destructive-foreground: #ffffff;
--color-border: #2e3240;
--color-input: #282b35;
--color-ring: #f97316;
--color-border: #2a2e3a;
--color-input: #252830;
--color-ring: #60a5fa;
/* ── Radii ─────────────────────────────────────── */
--radius-sm: 5px;
@@ -191,11 +194,11 @@
transition: filter 150ms ease, box-shadow 150ms ease, transform 150ms ease;
&:hover {
filter: brightness(1.1);
box-shadow: 0 2px 10px rgba(249, 115, 22, 0.2);
box-shadow: 0 2px 10px rgba(96, 165, 250, 0.2);
transform: translateY(-1px);
}
&:active {
box-shadow: 0 0 4px rgba(249, 115, 22, 0.1);
box-shadow: 0 0 4px rgba(96, 165, 250, 0.1);
transform: translateY(0);
}
}
@@ -226,7 +229,7 @@
/* Tab/toggle group: active item gets elevated surface + faint accent glow */
@utility tab-active-shadow {
background: var(--color-bg-elevated);
box-shadow: 0 1px 4px rgba(249, 115, 22, 0.08);
box-shadow: 0 1px 4px rgba(96, 165, 250, 0.08);
}
/* Card hover lift — brighter border + subtle accent glow */
@@ -234,7 +237,7 @@
transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
&:hover {
border-color: var(--color-border-hover);
box-shadow: 0 2px 8px rgba(249, 115, 22, 0.06);
box-shadow: 0 2px 8px rgba(96, 165, 250, 0.06);
transform: translateY(-2px);
}
&:active {