makiolaj/SimpleFinanceDash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(01-01): replace CSS tokens with pastel oklch values

Browse Source 
- Update all :root tokens with lavender-tinted pastel oklch values
- Map --chart-1 through --chart-5 to category base colors (bill, variable_expense, debt, saving, investment)
- Add --success and --warning semantic tokens with foreground pairs
- Register --color-success and --color-warning in @theme inline for Tailwind utility access
- Preserve --card and --popover as pure white (intentional locked decision)
- Leave .dark block unchanged (out of scope)
This commit is contained in:
Jean-Luc Makiola
2026-03-11 20:51:26 +01:00
parent cbf355273a
commit 3f97d07f4e
1 changed files with 37 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
frontend/src/index.css
View File

@@ -6,38 +6,42 @@
@custom-variant dark (&:is(.dark *)); @custom-variant dark (&:is(.dark *));
:root { :root {
--background: oklch(1 0 0); --background: oklch(0.98 0.005 290);
--foreground: oklch(0.145 0 0); --foreground: oklch(0.145 0.005 290);
--card: oklch(1 0 0); --card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0); --card-foreground: oklch(0.145 0.005 290);
--popover: oklch(1 0 0); --popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0); --popover-foreground: oklch(0.145 0.005 290);
--primary: oklch(0.205 0 0); --primary: oklch(0.50 0.12 260);
--primary-foreground: oklch(0.985 0 0); --primary-foreground: oklch(0.99 0.005 290);
--secondary: oklch(0.97 0 0); --secondary: oklch(0.95 0.015 280);
--secondary-foreground: oklch(0.205 0 0); --secondary-foreground: oklch(0.25 0.01 280);
--muted: oklch(0.97 0 0); --muted: oklch(0.95 0.010 280);
--muted-foreground: oklch(0.556 0 0); --muted-foreground: oklch(0.50 0.01 280);
--accent: oklch(0.97 0 0); --accent: oklch(0.94 0.020 280);
--accent-foreground: oklch(0.205 0 0); --accent-foreground: oklch(0.25 0.01 280);
--destructive: oklch(0.58 0.22 27); --destructive: oklch(0.58 0.22 27);
--border: oklch(0.922 0 0); --border: oklch(0.91 0.008 280);
--input: oklch(0.922 0 0); --input: oklch(0.91 0.008 280);
--ring: oklch(0.708 0 0); --ring: oklch(0.65 0.08 260);
--chart-1: oklch(0.809 0.105 251.813); --chart-1: oklch(0.76 0.12 250);
--chart-2: oklch(0.623 0.214 259.815); --chart-2: oklch(0.80 0.14 85);
--chart-3: oklch(0.546 0.245 262.881); --chart-3: oklch(0.76 0.13 15);
--chart-4: oklch(0.488 0.243 264.376); --chart-4: oklch(0.75 0.13 280);
--chart-5: oklch(0.424 0.199 265.638); --chart-5: oklch(0.76 0.12 320);
--radius: 0.625rem; --radius: 0.625rem;
--sidebar: oklch(0.985 0 0); --sidebar: oklch(0.97 0.012 280);
--sidebar-foreground: oklch(0.145 0 0); --sidebar-foreground: oklch(0.20 0.01 280);
--sidebar-primary: oklch(0.205 0 0); --sidebar-primary: oklch(0.50 0.12 260);
--sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-primary-foreground: oklch(0.99 0.005 290);
--sidebar-accent: oklch(0.97 0 0); --sidebar-accent: oklch(0.93 0.020 280);
--sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-accent-foreground: oklch(0.25 0.01 280);
--sidebar-border: oklch(0.922 0 0); --sidebar-border: oklch(0.90 0.010 280);
--sidebar-ring: oklch(0.708 0 0); --sidebar-ring: oklch(0.65 0.08 260);
--success: oklch(0.55 0.15 145);
--success-foreground: oklch(0.99 0 0);
--warning: oklch(0.70 0.14 75);
--warning-foreground: oklch(0.99 0 0);
} }
.dark { .dark {
@@ -107,6 +111,10 @@
--color-card: var(--card); --color-card: var(--card);
--color-foreground: var(--foreground); --color-foreground: var(--foreground);
--color-background: var(--background); --color-background: var(--background);
--color-success: var(--success);
--color-success-foreground: var(--success-foreground);
--color-warning: var(--warning);
--color-warning-foreground: var(--warning-foreground);
--radius-sm: calc(var(--radius) * 0.6); --radius-sm: calc(var(--radius) * 0.6);
--radius-md: calc(var(--radius) * 0.8); --radius-md: calc(var(--radius) * 0.8);
--radius-lg: var(--radius); --radius-lg: var(--radius);
@@ -126,4 +134,4 @@
html { html {
@apply font-sans; @apply font-sans;
} }
} }