styling system

Tailwind CSS v4, CSS variables, theme tokens, and how components consume them.

Related: Theme System, Base UI Components.

Presets → CSS variables → @theme inline → utilities → JSX className.

index.css:

@import "tailwindcss";
@plugin 'tailwindcss-animate';
@custom-variant dark (&:is(.dark *));

No tailwind.config.js. PostCSS uses @tailwindcss/postcss.

@theme inline maps --color-background: var(--background) so bg-background tracks the preset.

:root holds fallbacks (HSL/hex). Zustand overwrites them at runtime.

Dynamic theme application#

flowchart TD
  Select["applyThemePreset"] --> Store["themeState.styles"]
  Store --> Apply["documentElement.setProperty"]
  Apply --> Util["bg-primary rounded-lg font-sans"]

Switching to Violet Bloom updates --primary, --radius, --font-sans.

Semantic names: background, card, primary, muted, accent, destructive, border, input, ring.

Charts: --chart-1 … --chart-5.

JPortal extras: --grade-aa … --grade-f, --marks-outstanding / good / average / poor.

AttendanceCard calendar styling#

flowchart TD
  Status["getDayStatus booleans"] --> Mod["presentSingle absentSingle mixedDouble mixedTriple"]
  Mod --> Mix["color-mix chart-3 chart-5"]

Mixed two-class days use a 90deg split gradient. Triple mixed days use a conic gradient. Snap classes in index.css keep the sheet sections aligned.