Jean-Luc Makiola
21ce6d8230
- Add collapsible-open/close keyframes and CSS animation tokens to index.css - Add dashboard.sections and dashboard.carryoverIncludes keys to en.json and de.json - Add optional subtitle/subtitleClassName props to StatCard - Extend SummaryStrip balance prop with carryoverSubtitle/carryoverIsNegative - Compute and pass carryover subtitle from DashboardContent to SummaryStrip
100 lines
3.0 KiB
CSS
100 lines
3.0 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;
|
|
|
|
/* Collapsible animation */
|
|
--animate-collapsible-open: collapsible-open 200ms ease-out;
|
|
--animate-collapsible-close: collapsible-close 200ms ease-out;
|
|
|
|
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
|
|
@keyframes collapsible-open {
|
|
from { height: 0; overflow: hidden; }
|
|
to { height: var(--radix-collapsible-content-height); overflow: hidden; }
|
|
}
|
|
|
|
@keyframes collapsible-close {
|
|
from { height: var(--radix-collapsible-content-height); overflow: hidden; }
|
|
to { height: 0; overflow: hidden; }
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
font-feature-settings: "rlig" 1, "calt" 1;
|
|
}
|
|
}
|