Global Theme Variables

Boreal UI uses a comprehensive set of CSS variables to maintain design consistency and make customization easier. These tokens form the foundation for colors, typography, spacing, elevation, borders, and interaction states across the library.

Pro Tip

Modify these variables in your root stylesheet to quickly shift the entire application’s visual system without rewriting individual component styles.

Variable Registry

173 of 173 active system tokens

Global theme variable registry
Variable	Group	Usage
`--primary-color`	Colors	Main brand color for primary buttons, highlights, and accents
`--primary-color-hover`	Colors	Hover color for primary surfaces
`--primary-color-light`	Colors	Lighter primary color for subtle accents
`--secondary-color`	Colors	Secondary brand color for supporting actions and accents
`--secondary-color-hover`	Colors	Hover color for secondary surfaces
`--secondary-color-light`	Colors	Lighter secondary color for subtle accents
`--text-color-primary`	Colors	Text color used on primary surfaces
`--text-color-primary-contrast`	Colors	Contrast text token paired with primary surfaces

Showing 8 of 173 variables

Implementation Example

tokens.css

:root {
  --primary-color: #006a6a;
  --surface-container: #eceeee;
  --font-family-heading: "Space Grotesk", sans-serif;
  --border-radius-lg: 0.75rem;
}

.card {
  background-color: var(--surface-container);
  border-radius: var(--border-radius-lg);
  font-family: var(--font-family-heading);
}

Scale & Spacing

Boreal UI spacing tokens are designed around predictable rhythm. Prefer shared variables like --spacing-md and --spacing-lg over one-off spacing values whenever a layout should feel consistent across pages.

Fast Theming

Change the active color scheme with the ThemeProvider, then customize structural variables in your global stylesheet.