Theme Tokens

Global theme tokens are CSS custom properties installed by the CLI into src/styles/bambi.css. Import once at the root of your app:

@import './styles/bambi.css';

Override any token in your own :root block to customise the theme globally:

:root {
  --bambi-primary-500: oklch(60% 0.25 30);
  --bambi-radius-md: 0.5rem;
}

[data-theme='dark'], .dark {
  --bambi-primary: var(--bambi-primary-400);
}

Component-specific token defaults, such as --bambi-button-*, live in component CSS instead of this global token file. Override them on the component selector, a more specific component selector, or inline style.

Colors

Colors use the OKLCH color space. The global token file exposes complete 50 through 950 scales for neutral, primary, danger, success, and warning. Light semantic aliases are defined in :root; dark mode overrides semantic aliases in [data-theme='dark'], .dark.

Scales

Scale	Default semantic alias	Purpose
`--bambi-neutral-50` … `--bambi-neutral-950`	`background`, `foreground`, surfaces, borders	Base UI surfaces and text
`--bambi-primary-50` … `--bambi-primary-950`	`primary`, `ring`, primary intent	Brand and primary actions
`--bambi-danger-50` … `--bambi-danger-950`	`danger`	Destructive actions
`--bambi-success-50` … `--bambi-success-950`	`success`	Positive actions
`--bambi-warning-50` … `--bambi-warning-950`	`warning`	Cautionary actions

By default, light mode maps --bambi-primary to --bambi-primary-500; dark mode maps it to --bambi-primary-400.

Brand

Token	Light	Dark
`--bambi-primary`	`var(--bambi-primary-500)`	`var(--bambi-primary-400)`
`--bambi-primary-foreground`	`oklch(100% 0 0)`	`oklch(9% 0 0)`
`--bambi-secondary`	`var(--bambi-neutral-100)`	`var(--bambi-neutral-800)`
`--bambi-secondary-foreground`	`var(--bambi-neutral-950)`	`var(--bambi-neutral-50)`
`--bambi-accent`	`var(--bambi-neutral-100)`	`var(--bambi-neutral-800)`
`--bambi-accent-foreground`	`var(--bambi-neutral-950)`	`var(--bambi-neutral-50)`

State

Token	Light	Dark
`--bambi-danger`	`var(--bambi-danger-500)`	`var(--bambi-danger-600)`
`--bambi-danger-foreground`	`oklch(100% 0 0)`	`var(--bambi-neutral-50)`
`--bambi-success`	`var(--bambi-success-500)`	`var(--bambi-success-500)`
`--bambi-success-foreground`	`var(--bambi-neutral-950)`	`var(--bambi-neutral-950)`
`--bambi-warning`	`var(--bambi-warning-500)`	`var(--bambi-warning-400)`
`--bambi-warning-foreground`	`var(--bambi-neutral-950)`	`var(--bambi-neutral-950)`
`--bambi-muted`	`var(--bambi-neutral-100)`	`var(--bambi-neutral-800)`
`--bambi-muted-foreground`	`var(--bambi-neutral-500)`	`var(--bambi-neutral-400)`

Surface

Token	Light	Dark
`--bambi-background`	`var(--bambi-neutral-50)`	`var(--bambi-neutral-950)`
`--bambi-foreground`	`var(--bambi-neutral-950)`	`var(--bambi-neutral-50)`
`--bambi-card`	`var(--bambi-color-white)`	`var(--bambi-neutral-900)`
`--bambi-card-foreground`	`var(--bambi-neutral-950)`	`var(--bambi-neutral-50)`
`--bambi-popover`	`var(--bambi-color-white)`	`var(--bambi-neutral-900)`
`--bambi-popover-foreground`	`var(--bambi-neutral-950)`	`var(--bambi-neutral-50)`

Utility

Token	Light	Dark
`--bambi-border`	`var(--bambi-neutral-200)`	`var(--bambi-neutral-800)`
`--bambi-input`	`var(--bambi-neutral-200)`	`var(--bambi-neutral-800)`
`--bambi-input-background`	`var(--bambi-color-white)`	`var(--bambi-neutral-900)`
`--bambi-input-foreground`	`var(--bambi-neutral-950)`	`var(--bambi-neutral-50)`
`--bambi-input-placeholder`	`var(--bambi-neutral-500)`	`var(--bambi-neutral-400)`
`--bambi-ring`	`var(--bambi-primary)`	`var(--bambi-primary)`
`--bambi-separator`	`var(--bambi-neutral-200)`	`var(--bambi-neutral-800)`

Intent (hover backgrounds)

These tokens are used internally by components. Override them to change hover colors without touching the base intent colors.

Token	Default
`--bambi-intent-primary-bg`	`var(--bambi-primary)`
`--bambi-intent-primary-fg`	`var(--bambi-primary-foreground)`
`--bambi-intent-primary-hover-bg`	`var(--bambi-primary-600)` / `var(--bambi-primary-300)` dark
`--bambi-intent-secondary-bg`	`var(--bambi-secondary)`
`--bambi-intent-secondary-fg`	`var(--bambi-secondary-foreground)`
`--bambi-intent-secondary-hover-bg`	`var(--bambi-accent)`
`--bambi-intent-danger-bg`	`var(--bambi-danger)`
`--bambi-intent-danger-fg`	`var(--bambi-danger-foreground)`
`--bambi-intent-danger-hover-bg`	`var(--bambi-danger-600)` / `var(--bambi-danger-400)` dark
`--bambi-intent-success-bg`	`var(--bambi-success)`
`--bambi-intent-success-fg`	`var(--bambi-success-foreground)`
`--bambi-intent-success-hover-bg`	`var(--bambi-success-600)` / `var(--bambi-success-400)` dark
`--bambi-intent-warning-bg`	`var(--bambi-warning)`
`--bambi-intent-warning-fg`	`var(--bambi-warning-foreground)`
`--bambi-intent-warning-hover-bg`	`var(--bambi-warning-600)` / `var(--bambi-warning-300)` dark

Border Radius

Token	Value
`--bambi-radius-sm`	`0.375rem`
`--bambi-radius-md`	`0.5rem`
`--bambi-radius-lg`	`0.75rem`
`--bambi-radius-xl`	`1rem`
`--bambi-radius-full`	`9999px`

Typography

Font Families

Token	Value
`--bambi-font-sans`	`system-ui, sans-serif`
`--bambi-font-mono`	`ui-monospace, monospace`

Font Sizes

Token	Value
`--bambi-text-xs`	`0.75rem`
`--bambi-text-sm`	`0.875rem`
`--bambi-text-base`	`1rem`
`--bambi-text-lg`	`1.125rem`

Font Weights

Token	Value
`--bambi-font-weight-normal`	`400`
`--bambi-font-weight-medium`	`500`
`--bambi-font-weight-semibold`	`600`
`--bambi-font-weight-bold`	`700`

Shadows

Token	Light	Dark
`--bambi-shadow-sm`	`0 1px 2px 0 oklch(0% 0 0 / 0.05)`	`oklch(0% 0 0 / 0.3)`
`--bambi-shadow-md`	`0 4px 6px -1px oklch(0% 0 0 / 0.1), …`	`oklch(0% 0 0 / 0.4), …`
`--bambi-shadow-lg`	`0 10px 15px -3px oklch(0% 0 0 / 0.1), …`	`oklch(0% 0 0 / 0.4), …`

Shadow opacity is higher in dark mode to remain visible on dark surfaces.