Jean-Luc Makiola
eceddcaf4f
Tailwind v4 does not derive --radius-xs through --radius-3xl from --radius. The named scale is independent, so Cards (rounded-xl), Buttons (rounded-md), etc. retained non-zero border-radius despite --radius: 0. Adding all scale tokens as 0 ensures complete sharp-corner cascade. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
110 lines
3.0 KiB
CSS
110 lines
3.0 KiB
CSS
@import "tailwindcss";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
@theme inline {
|
|
/* Pastel OKLCH Color System */
|
|
--color-background: oklch(0.98 0.01 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);
|
|
|
|
/* 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.72 0.22 155);
|
|
--color-bill-fill: oklch(0.70 0.22 25);
|
|
--color-variable-expense-fill: oklch(0.74 0.22 50);
|
|
--color-debt-fill: oklch(0.66 0.23 355);
|
|
--color-saving-fill: oklch(0.72 0.22 220);
|
|
--color-investment-fill: oklch(0.68 0.22 285);
|
|
|
|
--radius: 0;
|
|
--radius-xs: 0;
|
|
--radius-sm: 0;
|
|
--radius-md: 0;
|
|
--radius-lg: 0;
|
|
--radius-xl: 0;
|
|
--radius-2xl: 0;
|
|
--radius-3xl: 0;
|
|
|
|
/* 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;
|
|
}
|
|
}
|
|
|
|
/* Third-party radius overrides */
|
|
.recharts-rectangle {
|
|
rx: 0;
|
|
ry: 0;
|
|
}
|
|
|
|
[data-sonner-toast] {
|
|
border-radius: 0 !important;
|
|
}
|