CSS Variables Reference

Kiso defines semantic CSS custom properties that components resolve through. Override any of them in your Tailwind stylesheet to customize the framework without touching component code.

@import "tailwindcss";
@import "../builds/tailwind/kiso";

@theme {
  --color-primary: var(--color-violet-600);
  --color-primary-foreground: var(--color-white);
  --kiso-radius: 0.375rem;
}

Structural

Framework-level layout and geometry tokens. Defined in engine.css.

Radius Scale

Computed from --kiso-radius using multipliers. Changing the base shifts every rounded-* utility proportionally. At the default 0.25rem, values match Tailwind’s built-in defaults.

@theme {
  --kiso-radius: 0.375rem;  /* rounder — 1.5× default */
  --kiso-radius: 0;         /* sharp — no rounding */
}

Typography

Font family tokens. Defined in engine.css.

@theme inline {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
}

Semantic Colors

Purpose-named color tokens that flip automatically in dark mode. Components use bg-primary, text-foreground, etc. — never raw palette shades.

Brand Colors

Each has a -foreground companion for accessible text on that background.

Surface Colors

Border & Ring

Customizing brand colors

Two approaches — override the semantic token directly, or define a full shade scale and let Kiso auto-wire it:

/* Approach 1: Direct override */
@theme {
  --color-primary: oklch(0.55 0.10 237);
  --color-primary-foreground: white;
}

/* Approach 2: Define shade scale (Kiso auto-wires 500/400/50/950) */
@theme {
  --color-primary-50:  oklch(...);
  --color-primary-400: oklch(...);
  --color-primary-500: oklch(...);
  --color-primary-950: oklch(...);
}

Dashboard Layout

Defined in dashboard.css. Only present when dashboard layout components are used.

Geometry

Sidebar Surface

@theme {
  --sidebar-width: 18rem;
  --topbar-height: 4rem;
  --sidebar-background: var(--color-zinc-900);
  --sidebar-foreground: var(--color-zinc-100);
}