Jean-Luc Makiola
4f74c79fda
- Darken 6 category color tokens for WCAG 4.5:1 text contrast - Add semantic status tokens: over-budget, on-budget, budget-bar-bg - Add 6 chart fill variants for lighter non-text fills - Add 6 new dashboard i18n keys (carryover, vsBudget, overBudget, underBudget, onTrack, loading) to en.json and de.json at parity Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
86 lines
2.6 KiB
CSS
86 lines
2.6 KiB
CSS
@import "tailwindcss";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
@theme inline {
|
|
/* Pastel OKLCH Color System */
|
|
--color-background: oklch(0.98 0.005 260);
|
|
--color-foreground: oklch(0.25 0.02 260);
|
|
|
|
--color-card: oklch(1 0 0);
|
|
--color-card-foreground: oklch(0.25 0.02 260);
|
|
|
|
--color-popover: oklch(1 0 0);
|
|
--color-popover-foreground: oklch(0.25 0.02 260);
|
|
|
|
--color-primary: oklch(0.55 0.15 260);
|
|
--color-primary-foreground: oklch(0.98 0.005 260);
|
|
|
|
--color-secondary: oklch(0.93 0.02 260);
|
|
--color-secondary-foreground: oklch(0.35 0.03 260);
|
|
|
|
--color-muted: oklch(0.95 0.01 260);
|
|
--color-muted-foreground: oklch(0.55 0.02 260);
|
|
|
|
--color-accent: oklch(0.93 0.02 260);
|
|
--color-accent-foreground: oklch(0.35 0.03 260);
|
|
|
|
--color-destructive: oklch(0.6 0.2 25);
|
|
--color-destructive-foreground: oklch(0.98 0.005 260);
|
|
|
|
--color-border: oklch(0.88 0.01 260);
|
|
--color-input: oklch(0.88 0.01 260);
|
|
--color-ring: oklch(0.55 0.15 260);
|
|
|
|
--color-sidebar: oklch(0.97 0.008 260);
|
|
--color-sidebar-foreground: oklch(0.25 0.02 260);
|
|
--color-sidebar-primary: oklch(0.55 0.15 260);
|
|
--color-sidebar-primary-foreground: oklch(0.98 0.005 260);
|
|
--color-sidebar-accent: oklch(0.93 0.02 260);
|
|
--color-sidebar-accent-foreground: oklch(0.35 0.03 260);
|
|
--color-sidebar-border: oklch(0.88 0.01 260);
|
|
--color-sidebar-ring: oklch(0.55 0.15 260);
|
|
|
|
/* Category Colors (WCAG 4.5:1 text contrast against white) */
|
|
--color-income: oklch(0.55 0.17 155);
|
|
--color-bill: oklch(0.55 0.17 25);
|
|
--color-variable-expense: oklch(0.58 0.16 50);
|
|
--color-debt: oklch(0.52 0.18 355);
|
|
--color-saving: oklch(0.55 0.16 220);
|
|
--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 */
|
|
--color-over-budget: oklch(0.55 0.20 25);
|
|
--color-on-budget: oklch(0.50 0.17 155);
|
|
--color-budget-bar-bg: oklch(0.92 0.01 260);
|
|
|
|
/* Chart Fill Variants */
|
|
--color-income-fill: oklch(0.68 0.19 155);
|
|
--color-bill-fill: oklch(0.65 0.19 25);
|
|
--color-variable-expense-fill: oklch(0.70 0.18 50);
|
|
--color-debt-fill: oklch(0.60 0.20 355);
|
|
--color-saving-fill: oklch(0.68 0.18 220);
|
|
--color-investment-fill: oklch(0.65 0.18 285);
|
|
|
|
--radius: 0.625rem;
|
|
|
|
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
font-feature-settings: "rlig" 1, "calt" 1;
|
|
}
|
|
}
|