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

feat(05-01): edit design tokens and add CSS overrides in index.css

Browse Source 
- Set --radius: 0 for sharp-cornered design system cascade
- Warm background chroma from 0.005 to 0.01
- Delete --color-chart-1 through --color-chart-5 (redundant with fill vars)
- Raise fill chroma to 0.22+ for vibrant pastel category colors
- Add .recharts-rectangle and [data-sonner-toast] radius overrides
This commit is contained in:
Jean-Luc Makiola
2026-04-20 17:11:12 +02:00
parent e5637511d7
commit 99b5b5f8e4
1 changed files with 18 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/index.css
View File

@@ -4,7 +4,7 @@
@theme inline { @theme inline {
/* Pastel OKLCH Color System */ /* Pastel OKLCH Color System */
--color-background: oklch(0.98 0.005 260); --color-background: oklch(0.98 0.01 260);
--color-foreground: oklch(0.25 0.02 260); --color-foreground: oklch(0.25 0.02 260);
--color-card: oklch(1 0 0); --color-card: oklch(1 0 0);
@@ -49,27 +49,20 @@
--color-saving: oklch(0.55 0.16 220); --color-saving: oklch(0.55 0.16 220);
--color-investment: oklch(0.55 0.16 285); --color-investment: oklch(0.55 0.16 285);
/* Chart Colors */
--color-chart-1: oklch(0.72 0.14 155);
--color-chart-2: oklch(0.7 0.14 25);
--color-chart-3: oklch(0.72 0.14 50);
--color-chart-4: oklch(0.65 0.16 355);
--color-chart-5: oklch(0.72 0.14 220);
/* Semantic Status Tokens */ /* Semantic Status Tokens */
--color-over-budget: oklch(0.55 0.20 25); --color-over-budget: oklch(0.55 0.20 25);
--color-on-budget: oklch(0.50 0.17 155); --color-on-budget: oklch(0.50 0.17 155);
--color-budget-bar-bg: oklch(0.92 0.01 260); --color-budget-bar-bg: oklch(0.92 0.01 260);
/* Chart Fill Variants */ /* Chart Fill Variants */
--color-income-fill: oklch(0.68 0.19 155); --color-income-fill: oklch(0.72 0.22 155);
--color-bill-fill: oklch(0.65 0.19 25); --color-bill-fill: oklch(0.70 0.22 25);
--color-variable-expense-fill: oklch(0.70 0.18 50); --color-variable-expense-fill: oklch(0.74 0.22 50);
--color-debt-fill: oklch(0.60 0.20 355); --color-debt-fill: oklch(0.66 0.23 355);
--color-saving-fill: oklch(0.68 0.18 220); --color-saving-fill: oklch(0.72 0.22 220);
--color-investment-fill: oklch(0.65 0.18 285); --color-investment-fill: oklch(0.68 0.22 285);
--radius: 0.625rem; --radius: 0;
/* Collapsible animation */ /* Collapsible animation */
--animate-collapsible-open: collapsible-open 200ms ease-out; --animate-collapsible-open: collapsible-open 200ms ease-out;
@@ -97,3 +90,13 @@
font-feature-settings: "rlig" 1, "calt" 1; font-feature-settings: "rlig" 1, "calt" 1;
} }
} }
/* Third-party radius overrides */
.recharts-rectangle {
rx: 0;
ry: 0;
}
[data-sonner-toast] {
border-radius: 0 !important;
}