Design tokens
Complete reference for BMates UI CSS variables and exported token objects.
BMates UI exposes its design system as CSS custom properties in
bmates-ui/style.css. Theme-aware semantic tokens change with
html[data-theme='dark']; light and dark scale tokens remain fixed.
Color scales
Every scale below has all ten steps: 50, 100, 200, 300, 400, 500,
600, 700, 800, and 900.
| Token family | Complete tokens | Purpose |
|---|---|---|
| Primary | --primary-50 … --primary-900 | Active neutral brand scale. |
| Gray | --gray-50 … --gray-900 | Neutral UI scale. |
| Success | --success-50 … --success-900 | Green feedback scale. |
| Danger | --danger-50 … --danger-900 | Red feedback scale. |
| Warning | --warning-50 … --warning-900 | Amber feedback scale. |
| Info | --info-50 … --info-900 | Blue feedback scale. |
| Fixed light/dark | --gray-light-*, --gray-dark-*, --primary-light-*, --primary-dark-* | Theme-independent neutral scales. Each supports steps 50–900. |
Semantic colors
Use these in application and component styles instead of choosing a scale step.
Each status family (primary, secondary, success, danger, warning,
info) supports the same suffixes.
| Suffix | Tokens | Use |
|---|---|---|
| Base | --primary, --secondary, --success, --danger, --warning, --info | Main fill or accent. |
| Foreground | --*-fg | Text or icon on the base fill. |
| Hover | --*-hover | Interactive hover fill. |
| Soft | --*-soft, --*-soft-fg, --*-soft-hover | Low-emphasis surface, text, and hover state. |
| Border | --*-border | Border paired with the family. |
The theme-aware structural tokens are:
--background, --white, --black, --surface, --surface-hover,
--surface-active, --elevated, --border, --border-strong, --text,
--text-strong, --muted, --faint, --overlay, --focus-border, and
--focus-shadow.
Surfaces
--background, --surface, --surface-hover, --surface-active, --elevatedContent
--text, --text-strong, --muted, --faintBoundaries
--border, --border-strong, --overlay, --focus-border, --focus-shadow.notice {
color: var(--success-soft-fg);
background: var(--success-soft);
border: 1px solid var(--success-border);
}Spacing, shape, and layout
| Token family | Complete tokens |
|---|---|
| Spacing | --space-0 through --space-24 |
| Radius | --radius-xs, --radius-sm, --radius, --radius-lg, --radius-full |
| Shadows | --shadow-sm, --shadow, --shadow-lg |
| Containers | --container-sm, --container-md, --container-lg, --container-xl |
| Z-index | --z-dropdown, --z-sticky, --z-modal, --z-popover, --z-toast, --z-tooltip |
Typography and motion
| Token family | Complete tokens |
|---|---|
| Fonts | --font-sans, --font-mono |
| Font sizes | --font-size-xs, --font-size-sm, --font-size-md, --font-size-lg, --font-size-xl, --font-size-2xl, --font-size-3xl |
| Line heights | --line-height-tight, --line-height-normal, --line-height-relaxed |
| Motion | --transition, --transition-slow, --transition-bounce, --ease, --ease-in, --ease-out, --ease-in-out |
Breakpoints and TypeScript exports
The CSS breakpoint variables are --breakpoint-sm, --breakpoint-md,
--breakpoint-lg, --breakpoint-xl, and --breakpoint-2xl.
import {
BMateBreakpoints,
BMateColors,
BMateColorsDark,
BMateColorScales,
BMateTokens,
minMedia,
maxMedia,
} from 'bmates-ui';
BMateBreakpoints.lg; // '1024px'
minMedia.lg; // '@media screen and (min-width: 1024px)'
maxMedia.md; // '@media screen and (max-width: 767px)'
BMateColorScales.success[500];
BMateTokens['radius-lg'];