/** * Tailwind CSS v4 Theme Tokens * * Two-block layout: * * @theme inline { --color-X: var(--X); } ← color references * @theme { --spacing-N: …; } ← raw values * * `@theme inline` keeps `--color-*` as *references* into `:root` / * `.dark` so Tailwind's opacity modifier (`bg-card/40`, `bg-foreground/5`) * resolves via `color-mix(in oklab, var(--color-X) 40%, transparent)`. * The legacy `@theme { --color-X: hsl(var(--X)); }` shape baked the * value into a global variable and broke every opacity modifier — * consumers had to write inline `style={{ backgroundColor: 'hsl(... / 0.4)' }}` * workarounds. After this refactor, those workarounds are redundant. * * Pairs with `light.css` / `dark.css` where every `--token` is now a * fully-wrapped CSS color (`hsl(0 0% 94%)`, not bare `0 0% 94%`). */ /* Tailwind v4: bind the `dark:` variant to the `.dark` class on any * ancestor (Storybook + ThemeToggle set ``). * Without this, `dark:` defaults to `@media (prefers-color-scheme: dark)` * and every `dark:text-X` utility is a no-op when toggling via class. */ @custom-variant dark (&:where(.dark, .dark *)); @theme inline { /* Base semantic tokens — references into :root / .dark */ --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-divider: var(--divider); --color-overlay: var(--overlay); --color-ring: var(--ring); /* Status surfaces */ --color-warning: var(--warning); --color-warning-background: var(--warning-background); --color-warning-foreground: var(--warning-foreground); --color-warning-border: var(--warning-border); --color-success: var(--success); --color-success-background: var(--success-background); --color-success-foreground: var(--success-foreground); --color-success-border: var(--success-border); --color-destructive-background: var(--destructive-background); --color-destructive-border: var(--destructive-border); --color-info: var(--info); --color-info-background: var(--info-background); --color-info-foreground: var(--info-foreground); --color-info-border: var(--info-border); /* On-fill text/icon — contrast color sitting ON the solid `*` fill * (badges, unread pills, filled chips). Distinct from `*-foreground`, * which is the status tint on the `*-background` banner surface. * Backs `text-on-success` / `bg-on-warning` etc. (+ opacity modifiers). */ --color-on-success: var(--on-success); --color-on-warning: var(--on-warning); --color-on-info: var(--on-info); --color-on-destructive: var(--on-destructive); /* Code surface */ --color-code: var(--code); --color-code-foreground: var(--code-foreground); --color-code-border: var(--code-border); --color-code-inline: var(--code-inline); --color-code-inline-foreground: var(--code-inline-foreground); /* Sidebar */ --color-sidebar-background: var(--sidebar-background); --color-sidebar: var(--sidebar-background); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); /* Charts — categorical series. `--chart-N` are fully-wrapped colors in * light/dark/preset, so this is a plain reference (NOT `hsl(var(...))`). * Backs the `bg-chart-1` / `text-chart-2` / `border-chart-3` utilities and * their opacity modifiers (`bg-chart-1/40`). For Recharts/shadcn `color:` * props pass `var(--chart-N)` directly. */ --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); /* Typography — `font-sans` / `font-mono` utilities read `--font-sans` / * `--font-mono` directly (those live in base.css, retinted per preset), so * no binding is needed for them. Tailwind's text scale reads `--text-*`, * which we bridge to the preset-overridable `--font-size-*` tokens so * `text-xs…text-xl` follow the active preset instead of Tailwind defaults. */ --text-xs: var(--font-size-xs); --text-sm: var(--font-size-sm); --text-base: var(--font-size-base); --text-lg: var(--font-size-lg); --text-xl: var(--font-size-xl); } @theme { /* Static palette anchors — not themed */ --color-black: #000000; --color-white: #ffffff; /* Breakpoints — mobile-first */ --breakpoint-sm: 40rem; /* 640px */ --breakpoint-md: 48rem; /* 768px */ --breakpoint-lg: 64rem; /* 1024px */ --breakpoint-xl: 80rem; /* 1280px */ --breakpoint-2xl: 96rem; /* 1536px */ /* Spacing scale — required for all spacing utilities */ --spacing: 0.25rem; --spacing-0: 0; --spacing-px: 1px; --spacing-0\.5: 0.125rem; --spacing-1: 0.25rem; --spacing-1\.5: 0.375rem; --spacing-2: 0.5rem; --spacing-2\.5: 0.625rem; --spacing-3: 0.75rem; --spacing-3\.5: 0.875rem; --spacing-4: 1rem; --spacing-5: 1.25rem; --spacing-6: 1.5rem; --spacing-7: 1.75rem; --spacing-8: 2rem; --spacing-9: 2.25rem; --spacing-10: 2.5rem; --spacing-11: 2.75rem; --spacing-12: 3rem; --spacing-13: 3.25rem; --spacing-14: 3.5rem; --spacing-16: 4rem; --spacing-20: 5rem; --spacing-24: 6rem; --spacing-28: 7rem; --spacing-32: 8rem; --spacing-36: 9rem; --spacing-40: 10rem; --spacing-44: 11rem; --spacing-48: 12rem; --spacing-52: 13rem; --spacing-56: 14rem; --spacing-60: 15rem; --spacing-64: 16rem; --spacing-72: 18rem; --spacing-80: 20rem; --spacing-96: 24rem; /* Gap utilities */ --gap-9: 2.25rem; --gap-10: 2.5rem; --gap-11: 2.75rem; --gap-12: 3rem; --gap-14: 3.5rem; --gap-16: 4rem; --gap-20: 5rem; --gap-24: 6rem; /* Blur (backdrop-blur-*) */ --blur-xs: 4px; --blur-sm: 8px; --blur-md: 12px; --blur-lg: 16px; --blur-xl: 24px; --blur-2xl: 40px; --blur-3xl: 64px; /* Custom width utilities */ --width-dropdown: 500px; /* Z-index scale * * Overlay tiers, low → high. Each tier must clear the one below it so a * deeper overlay always renders above its trigger surface: * ≤ 40 page content, sticky headers * 100 floating page furniture (chat dock & companions) — below all overlays * 200 sheet (edge drawer) * 500 side-panel / drawer * 600 modal dialog / alert dialog / command palette * 700 anchored overlays (popover, tooltip, select, dropdown, * context-menu, menubar, hover-card) — sit above any dialog * that triggered them * 9999 full-viewport takeovers (e.g. Mermaid fullscreen) * Toasts (Sonner) own the topmost layer via the library's own stacking. */ --z-index-0: 0; --z-index-10: 10; --z-index-20: 20; --z-index-30: 30; --z-index-40: 40; --z-index-50: 50; --z-index-100: 100; --z-index-150: 150; --z-index-200: 200; --z-index-500: 500; --z-index-600: 600; --z-index-9995: 9995; --z-index-9996: 9996; --z-index-9999: 9999; --z-index-auto: auto; /* Floating animations */ --animate-float: float 20s ease-in-out infinite; --animate-float-slow: float 25s ease-in-out infinite; --animate-float-x: float-x 18s ease-in-out infinite; --animate-float-diagonal: float-diagonal 22s ease-in-out infinite; --animate-morph: morph 15s ease-in-out infinite; --animate-gradient-shift: gradient-shift 10s ease-in-out infinite; --animate-blob: blob 10s ease-in-out infinite; }