Colors

Components only ever use semantic CSS variables (--bf-color-text-base, --bf-color-bg-elevated, …). Themes redefine them; addons inherit the surface, never the raw palette.

Primary Theme

Primary ramp

50
100
200
300
400
500
600
700
800
900
950

Status surfaces

Success
Warning
Danger
Info

Surfaces

bg-base
bg-subtle
bg-muted
bg-elevated (shadow-md)
canvas-bg
bg-inverse (tooltips)

Custom primary

Set --bf-custom-primary on any container with data-bf-primary="custom". The full 11-stop ramp is derived in CSS.

<html data-bf-primary="custom" style="--bf-custom-primary: #ec4899">