/* Steid's theme. Started from Topcoat's `neutral` theme and retuned; see plans/ui.md. The theme is a small set of design tokens. Components refer to tokens only, never to raw colors, so the whole product restyles by editing `:root` and `.dark` below. A component that hardcodes a color is a bug — it will not follow a palette change and it will not adapt to the color scheme. --background the page background --surface raised panels: cards, menus, flash messages --foreground text and iconography on the background --muted-foreground secondary text: captions, descriptions, placeholders --primary the emphasis color: primary actions, selection, links --primary-foreground text on a primary-filled surface --success confirmations, and git additions --success-foreground text on a success-filled surface --warning caution, and git modifications --warning-foreground text on a warning-filled surface --destructive destructive actions, errors, and git deletions --destructive-foreground text on a destructive-filled surface --border hairline borders and dividers --ring the focus ring --shadow-xs a subtle shadow for controls: buttons, inputs --shadow-sm a shadow for raised surfaces: cards, menus Interactive states (hover, press) have no tokens of their own: components derive them by applying the fill or foreground color at reduced opacity, which adapts to both color schemes automatically. Steid is dark-first — the layout sets `class="dark"` on . Light mode is supported and secondary. */ @import "tailwindcss"; /* Scan the project's Rust sources for the Tailwind classes they use. This file is installed at the project root, so `./src` is the crate's source. */ @source "./src/**/*.rs"; /* Dark mode is opted into by putting the `dark` class on an ancestor, typically . */ @custom-variant dark (&:is(.dark *)); /* Expose the tokens as Tailwind utilities (`bg-background`, `text-primary`, `border-border`, ...). The indirection through plain variables on `:root` and `.dark` is what lets the values swap when the color scheme changes. */ @theme inline { --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif; /* Paths, commit hashes, branch names, and code. */ --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace; --color-background: var(--background); --color-surface: var(--surface); --color-foreground: var(--foreground); --color-muted-foreground: var(--muted-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-ring: var(--ring); --shadow-xs: var(--shadow-xs); --shadow-sm: var(--shadow-sm); } /* Light mode. Secondary, but it should not look like an afterthought. */ :root { --background: oklch(0.99 0.003 260); --surface: oklch(1 0 0); --foreground: oklch(0.24 0.012 260); --muted-foreground: oklch(0.51 0.014 260); --primary: oklch(0.5 0.18 250); --primary-foreground: oklch(0.99 0.003 260); --success: oklch(0.52 0.15 145); --success-foreground: oklch(0.99 0.01 145); --warning: oklch(0.62 0.14 85); --warning-foreground: oklch(0.99 0.01 85); --destructive: oklch(0.55 0.2 27); --destructive-foreground: oklch(0.99 0.012 27); --border: oklch(0.9 0.008 260); --ring: oklch(0.5 0.18 250); --shadow-xs: 0 1px 2px oklch(0.24 0.02 260 / 12%); --shadow-sm: 0 1px 2px oklch(0.24 0.02 260 / 10%), 0 2px 8px -2px oklch(0.24 0.02 260 / 9%); } /* Dark mode. The primary surface for this product. */ .dark { --background: oklch(0.16 0.02 260); --surface: oklch(0.2 0.02 260); --foreground: oklch(0.9 0.01 260); --muted-foreground: oklch(0.66 0.014 260); --primary: oklch(0.65 0.15 250); --primary-foreground: oklch(0.16 0.02 260); --success: oklch(0.7 0.17 145); --success-foreground: oklch(0.16 0.02 145); --warning: oklch(0.8 0.15 85); --warning-foreground: oklch(0.16 0.02 85); --destructive: oklch(0.65 0.2 25); --destructive-foreground: oklch(0.14 0.02 25); --border: oklch(0.3 0.012 260); --ring: oklch(0.65 0.15 250); /* Light-mode shadows disappear on a dark background, so these are deeper. */ --shadow-xs: 0 1px 2px oklch(0 0 0 / 35%); --shadow-sm: 0 1px 2px oklch(0 0 0 / 35%), 0 2px 8px -2px oklch(0 0 0 / 30%); } @layer base { body { @apply bg-background font-sans text-foreground; } }