Global Theme Variables

This table lists all explicitly defined CSS variables in globals.scss and their purpose.
Variables like colors are managed dynamically by the ThemeProvider, while design tokens such as spacing, border radius, and shadows remain static unless customized in globals.scss.

Sortable data table
VariableUsage
--background-colorDefault background color for the page
--background-color-darkSlightly darker variant of the background color
--background-color-darkerEven darker variant of the background color
--background-color-lightSlightly lighter variant of the background color
--background-color-lighterEven lighter variant of the background color
--border-radius-fullFull rounding for pill or circular shapes
--border-radius-lgLarge border radius for UI elements
--border-radius-mdMedium border radius for UI elements
--border-radius-noneNo rounding for UI elements
--border-radius-smSmall border radius for UI elements
--box-shadow-heavyStrong shadow for prominent elevation
--box-shadow-intenseIntense shadow for deep elevation
--box-shadow-inverted-intenseIntense inverted shadow for dark themes
--box-shadow-inverted-lightLight inverted shadow for dark themes
--box-shadow-inverted-mediumMedium inverted shadow for dark themes
--box-shadow-inverted-noneNo inverted shadow
--box-shadow-inverted-strongStrong inverted shadow for dark themes
--box-shadow-lightLight shadow for subtle elevation
--box-shadow-mediumMedium shadow for moderate elevation
--box-shadow-noneNo shadow
--disabled-colorColor for disabled elements
--divider-colorColor used for dividers and borders
--error-colorColor for error messages or failure states
--focus-outline-colorOutline color for focus states
--font-size-baseDefault font size for most text
--font-size-headingFont size for large headings
--link-colorDefault color for links
--link-hover-colorColor for links when hovered
--link-hover-color-primaryPrimary color for link hover states
--link-hover-color-secondarySecondary color for link hover states
--overlay-colorOverlay color for modals or dropdown backdrops
--primary-colorMain brand color for primary buttons, highlights, and accents
--primary-color-hoverDarker variant of the primary color, used for hover states
--primary-color-lightLighter variant of the primary color, used for hover states or subtle accents
--primary-text-color-contrastText color that contrasts well with the primary color
--quaternary-colorOptional quaternary color used for additional accents
--quaternary-color-hoverDarker variant of the quaternary color
--quaternary-color-lightLighter variant of the quaternary color
--quaternary-text-colorText color that contrasts well with the quaternary color
--secondary-colorSecondary brand color used for secondary buttons and accents
--secondary-color-hoverDarker variant of the secondary color
--secondary-color-lightLighter variant of the secondary color
--secondary-text-colorText color that contrasts well with the secondary color
--spacing-lgLarge spacing token for padding and margins
--spacing-mdMedium spacing token for padding and margins
--spacing-smSmall spacing token for padding and margins
--success-colorColor for success messages or positive states
--tertiary-colorOptional tertiary color used for supporting UI elements
--tertiary-color-hoverDarker variant of the tertiary color
--tertiary-color-lightLighter variant of the tertiary color
--tertiary-text-colorText color that contrasts well with the tertiary color
--text-colorDefault text color for most UI elements
--text-color-lightMuted text color for secondary content
--text-color-lighterFaint text color for subtle or disabled content
--text-color-primaryPrimary text color for high contrast content
--transition-defaultDefault transition duration for hover/focus states
--warning-colorColor for warnings or caution states

Updating Non-Context Variables

Variables such as spacing, typography, border radius, and shadows are not managed by the ThemeProvider and must be updated directly in your global styles. These updates apply across both Boreal UI Core (React) and Boreal UI Next applications.

1. Import Boreal UI Styles

Import the library’s base styles before your custom overrides:

// React (Core) entry file: src/index.tsx
import "boreal-ui/core/boreal-ui.css"; // Boreal UI Core styles

// Next.js entry file: app/layout.tsx
import "boreal-ui/next/boreal-ui.css"; // Boreal UI Next styles

2. Define Variables in globals.scss (React) or globals.css (Next.js)

Add or modify the variables inside :root in your global file:

// globals.scss (or globals.css)
:root {
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 32px;

  --border-radius-sm: 4px;
  --border-radius-lg: 12px;

  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);

  --font-size-base: 16px;
  --font-size-heading: 24px;
}

3. Import Your Global Styles

Finally, import your global file after the Boreal UI styles so that your custom variables override the defaults:

React (Core)

// src/index.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "boreal-ui/core/style.css"; // Boreal UI styles
import "./globals.scss"; // Your global overrides

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

Next.js

// app/layout.tsx (Next.js 13+)
import "boreal-ui/next/style.css"; // Boreal UI styles
import "./globals.css"; // Your global overrides

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Once imported, your custom variables will override Boreal UI defaults and apply across all components automatically.