Skip to content

Theme Tokens

All 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: oklch(60% 0.25 30);
  --bambi-radius-md: 0.5rem;
}

[data-theme='dark'], .dark {
  --bambi-primary: oklch(70% 0.25 30);
}

Colors

Colors use the OKLCH color space. Light mode values are defined in :root, dark mode overrides in [data-theme='dark'], .dark.

Brand

Token	Light	Dark
`--bambi-primary`	`oklch(55% 0.220 271)`	`oklch(65% 0.220 271)`
`--bambi-primary-foreground`	`oklch(100% 0 0)`	`oklch(9% 0 0)`
`--bambi-secondary`	`oklch(95% 0.008 271)`	`oklch(26% 0.016 271)`
`--bambi-secondary-foreground`	`oklch(9% 0 0)`	`oklch(98% 0 0)`
`--bambi-accent`	`oklch(94% 0.008 271)`	`oklch(27% 0.016 271)`
`--bambi-accent-foreground`	`oklch(9% 0 0)`	`oklch(98% 0 0)`

State

Token	Light	Dark
`--bambi-danger`	`oklch(65% 0.233 28)`	`oklch(59% 0.197 27)`
`--bambi-danger-foreground`	`oklch(100% 0 0)`	`oklch(98% 0 0)`
`--bambi-success`	`oklch(73% 0.194 153)`	`oklch(73% 0.194 153)`
`--bambi-success-foreground`	`oklch(9% 0 0)`	`oklch(9% 0 0)`
`--bambi-warning`	`oklch(78% 0.159 74)`	`oklch(82% 0.139 78)`
`--bambi-warning-foreground`	`oklch(9% 0 0)`	`oklch(9% 0 0)`
`--bambi-muted`	`oklch(94% 0.008 271)`	`oklch(27% 0.010 271)`
`--bambi-muted-foreground`	`oklch(55% 0.021 271)`	`oklch(71% 0.021 271)`

Surface

Token	Light	Dark
`--bambi-background`	`oklch(97% 0.010 271)`	`oklch(12% 0.010 271)`
`--bambi-foreground`	`oklch(9% 0 0)`	`oklch(98% 0 0)`
`--bambi-card`	`oklch(100% 0 0)`	`oklch(21% 0.021 271)`
`--bambi-card-foreground`	`oklch(9% 0 0)`	`oklch(98% 0 0)`
`--bambi-popover`	`oklch(100% 0 0)`	`oklch(21% 0.021 271)`
`--bambi-popover-foreground`	`oklch(9% 0 0)`	`oklch(98% 0 0)`

Utility

Token	Light	Dark
`--bambi-border`	`oklch(90% 0.010 271)`	`oklch(28% 0.010 271)`
`--bambi-input`	`oklch(90% 0.010 271)`	`oklch(28% 0.010 271)`
`--bambi-input-background`	`oklch(100% 0 0)`	`oklch(21% 0.021 271)`
`--bambi-input-foreground`	`oklch(9% 0 0)`	`oklch(98% 0 0)`
`--bambi-input-placeholder`	`oklch(55% 0.021 271)`	`oklch(71% 0.021 271)`
`--bambi-ring`	`var(--bambi-primary)`	`var(--bambi-primary)`
`--bambi-separator`	`oklch(92% 0.010 271)`	`oklch(25% 0.010 271)`

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`	`oklch(49% 0.230 271)` / `oklch(72% 0.200 271)` 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`	`oklch(58% 0.220 28)`
`--bambi-intent-success-bg`	`var(--bambi-success)`
`--bambi-intent-success-fg`	`var(--bambi-success-foreground)`
`--bambi-intent-success-hover-bg`	`oklch(64% 0.180 153)`
`--bambi-intent-warning-bg`	`var(--bambi-warning)`
`--bambi-intent-warning-fg`	`var(--bambi-warning-foreground)`
`--bambi-intent-warning-hover-bg`	`oklch(69% 0.150 74)`

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.