Hire UsGet CoreUI PRO all-access →

CSS variables

MarkdownChatGPTClaude

Use CoreUI for Bootstrap's CSS custom properties for fast and forward-looking design and development.

On this page

CoreUI for Bootstrap declares several hundred CSS custom properties (variables) in its compiled CSS — on :root for global values, and on each component’s base class for the rest. They give you the theme colors, spacing, typography and component internals as live values you can read in your browser’s inspector and override without recompiling Sass.

All our custom properties are prefixed with cui- to avoid conflicts with third party CSS.

Root variables

Here are the variables we include (note that the :root, :host selector is required) that can be accessed anywhere CoreUI for Bootstrap’s CSS is loaded. They’re located in our _root.scss file and included in our compiled dist files. Most of them pick their light and dark value in a single declaration through the CSS light-dark() function, so one declaration covers both color modes.

:host is there so the tokens also land when our CSS is loaded inside a shadow root — :root matches the document, never a shadow tree, so without it every global token would be unset in a web component.

css
:root,
  :host {
    --cui-primary-025: color-mix(in oklch, var(--cui-white) 94%, var(--cui-primary-500));
    --cui-primary-050: color-mix(in oklch, var(--cui-white) 90%, var(--cui-primary-500));
    --cui-primary-100: color-mix(in oklch, var(--cui-white) 80%, var(--cui-primary-500));
    --cui-primary-200: color-mix(in oklch, var(--cui-white) 60%, var(--cui-primary-500));
    --cui-primary-300: color-mix(in oklch, var(--cui-white) 40%, var(--cui-primary-500));
    --cui-primary-400: color-mix(in oklch, var(--cui-white) 20%, var(--cui-primary-500));
    --cui-primary-500: oklch(52.945% 0.19103 278.34deg);
    --cui-primary-600: color-mix(in oklch, var(--cui-black) 16%, var(--cui-primary-500));
    --cui-primary-700: color-mix(in oklch, var(--cui-black) 32%, var(--cui-primary-500));
    --cui-primary-800: color-mix(in oklch, var(--cui-black) 48%, var(--cui-primary-500));
    --cui-primary-900: color-mix(in oklch, var(--cui-black) 64%, var(--cui-primary-500));
    --cui-primary-950: color-mix(in oklch, var(--cui-black) 70%, var(--cui-primary-500));
    --cui-primary-975: color-mix(in oklch, var(--cui-black) 76%, var(--cui-primary-500));
    --cui-success-025: color-mix(in oklch, var(--cui-white) 94%, var(--cui-success-500));
    --cui-success-050: color-mix(in oklch, var(--cui-white) 90%, var(--cui-success-500));
    --cui-success-100: color-mix(in oklch, var(--cui-white) 80%, var(--cui-success-500));
    --cui-success-200: color-mix(in oklch, var(--cui-white) 60%, var(--cui-success-500));
    --cui-success-300: color-mix(in oklch, var(--cui-white) 40%, var(--cui-success-500));
    --cui-success-400: color-mix(in oklch, var(--cui-white) 20%, var(--cui-success-500));
    --cui-success-500: oklch(55.1% 0.173 145deg);
    --cui-success-600: color-mix(in oklch, var(--cui-black) 16%, var(--cui-success-500));
    --cui-success-700: color-mix(in oklch, var(--cui-black) 32%, var(--cui-success-500));
    --cui-success-800: color-mix(in oklch, var(--cui-black) 48%, var(--cui-success-500));
    --cui-success-900: color-mix(in oklch, var(--cui-black) 64%, var(--cui-success-500));
    --cui-success-950: color-mix(in oklch, var(--cui-black) 70%, var(--cui-success-500));
    --cui-success-975: color-mix(in oklch, var(--cui-black) 76%, var(--cui-success-500));
    --cui-info-025: color-mix(in oklch, var(--cui-white) 94%, var(--cui-info-500));
    --cui-info-050: color-mix(in oklch, var(--cui-white) 90%, var(--cui-info-500));
    --cui-info-100: color-mix(in oklch, var(--cui-white) 80%, var(--cui-info-500));
    --cui-info-200: color-mix(in oklch, var(--cui-white) 60%, var(--cui-info-500));
    --cui-info-300: color-mix(in oklch, var(--cui-white) 40%, var(--cui-info-500));
    --cui-info-400: color-mix(in oklch, var(--cui-white) 20%, var(--cui-info-500));
    --cui-info-500: oklch(57.4% 0.196 256deg);
    --cui-info-600: color-mix(in oklch, var(--cui-black) 16%, var(--cui-info-500));
    --cui-info-700: color-mix(in oklch, var(--cui-black) 32%, var(--cui-info-500));
    --cui-info-800: color-mix(in oklch, var(--cui-black) 48%, var(--cui-info-500));
    --cui-info-900: color-mix(in oklch, var(--cui-black) 64%, var(--cui-info-500));
    --cui-info-950: color-mix(in oklch, var(--cui-black) 70%, var(--cui-info-500));
    --cui-info-975: color-mix(in oklch, var(--cui-black) 76%, var(--cui-info-500));
    --cui-warning-025: color-mix(in oklch, var(--cui-white) 94%, var(--cui-warning-500));
    --cui-warning-050: color-mix(in oklch, var(--cui-white) 90%, var(--cui-warning-500));
    --cui-warning-100: color-mix(in oklch, var(--cui-white) 80%, var(--cui-warning-500));
    --cui-warning-200: color-mix(in oklch, var(--cui-white) 60%, var(--cui-warning-500));
    --cui-warning-300: color-mix(in oklch, var(--cui-white) 40%, var(--cui-warning-500));
    --cui-warning-400: color-mix(in oklch, var(--cui-white) 20%, var(--cui-warning-500));
    --cui-warning-500: oklch(84% 0.172 85deg);
    --cui-warning-600: color-mix(in oklch, var(--cui-black) 16%, var(--cui-warning-500));
    --cui-warning-700: color-mix(in oklch, var(--cui-black) 32%, var(--cui-warning-500));
    --cui-warning-800: color-mix(in oklch, var(--cui-black) 48%, var(--cui-warning-500));
    --cui-warning-900: color-mix(in oklch, var(--cui-black) 64%, var(--cui-warning-500));
    --cui-warning-950: color-mix(in oklch, var(--cui-black) 70%, var(--cui-warning-500));
    --cui-warning-975: color-mix(in oklch, var(--cui-black) 76%, var(--cui-warning-500));
    --cui-danger-025: color-mix(in oklch, var(--cui-white) 94%, var(--cui-danger-500));
    --cui-danger-050: color-mix(in oklch, var(--cui-white) 90%, var(--cui-danger-500));
    --cui-danger-100: color-mix(in oklch, var(--cui-white) 80%, var(--cui-danger-500));
    --cui-danger-200: color-mix(in oklch, var(--cui-white) 60%, var(--cui-danger-500));
    --cui-danger-300: color-mix(in oklch, var(--cui-white) 40%, var(--cui-danger-500));
    --cui-danger-400: color-mix(in oklch, var(--cui-white) 20%, var(--cui-danger-500));
    --cui-danger-500: oklch(58.7% 0.237 23.81deg);
    --cui-danger-600: color-mix(in oklch, var(--cui-black) 16%, var(--cui-danger-500));
    --cui-danger-700: color-mix(in oklch, var(--cui-black) 32%, var(--cui-danger-500));
    --cui-danger-800: color-mix(in oklch, var(--cui-black) 48%, var(--cui-danger-500));
    --cui-danger-900: color-mix(in oklch, var(--cui-black) 64%, var(--cui-danger-500));
    --cui-danger-950: color-mix(in oklch, var(--cui-black) 70%, var(--cui-danger-500));
    --cui-danger-975: color-mix(in oklch, var(--cui-black) 76%, var(--cui-danger-500));
    --cui-gray-025: color-mix(in oklch, var(--cui-white) 94%, var(--cui-gray-500));
    --cui-gray-050: color-mix(in oklch, var(--cui-white) 90%, var(--cui-gray-500));
    --cui-gray-100: color-mix(in oklch, var(--cui-white) 80%, var(--cui-gray-500));
    --cui-gray-200: color-mix(in oklch, var(--cui-white) 60%, var(--cui-gray-500));
    --cui-gray-300: color-mix(in oklch, var(--cui-white) 40%, var(--cui-gray-500));
    --cui-gray-400: color-mix(in oklch, var(--cui-white) 20%, var(--cui-gray-500));
    --cui-gray-500: oklch(60% 0.03948 265.02deg);
    --cui-gray-600: color-mix(in oklch, var(--cui-black) 16%, var(--cui-gray-500));
    --cui-gray-700: color-mix(in oklch, var(--cui-black) 32%, var(--cui-gray-500));
    --cui-gray-800: color-mix(in oklch, var(--cui-black) 48%, var(--cui-gray-500));
    --cui-gray-900: color-mix(in oklch, var(--cui-black) 64%, var(--cui-gray-500));
    --cui-gray-950: color-mix(in oklch, var(--cui-black) 70%, var(--cui-gray-500));
    --cui-gray-975: color-mix(in oklch, var(--cui-black) 76%, var(--cui-gray-500));
  }

:root,
  :host,
  [data-coreui-theme=light] {
    --cui-black: #000;
    --cui-white: #fff;
    --cui-gradient: linear-gradient(180deg, color-mix(in oklch, var(--cui-white) 15%, transparent), color-mix(in oklch, var(--cui-white) 0%, transparent));
    --cui-body-font-family: var(--cui-font-sans-serif);
    --cui-body-font-size: 1rem;
    --cui-body-font-weight: var(--cui-font-weight-normal);
    --cui-body-line-height: 1.5;
    --cui-small-font-size: 0.875em;
    --cui-body-color: var(--cui-fg-body);
    --cui-body-bg: var(--cui-bg-body);
    --cui-secondary-color: var(--cui-fg-2);
    --cui-tertiary-color: var(--cui-fg-3);
    --cui-tertiary-bg: var(--cui-bg-2);
    --cui-emphasis-color: light-dark(#000, #fff);
    --cui-icon-size-base: 1rem;
    --cui-heading-color: inherit;
    --cui-hr-border-color: var(--cui-border-color);
    --cui-link-color: light-dark(var(--cui-primary-base), var(--cui-primary-fg));
    --cui-link-decoration: underline;
    --cui-link-underline-offset: 0.2em;
    --cui-link-hover-color: color-mix(in oklch, var(--cui-link-color) 90%, var(--cui-black));
    --cui-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --cui-font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --cui-code-color: light-dark(oklch(59.56% 0.20859 355.48deg), oklch(75.736% 0.12515 355.48deg));
    --cui-border-width: 1px;
    --cui-border-style: solid;
    --cui-border-color: light-dark(var(--cui-gray-200), var(--cui-gray-700));
    --cui-border-color-translucent: color-mix(in oklch, var(--cui-fg-body) 15%, transparent);
    --cui-shadow-color: #000;
    --cui-shadow-strength: 1;
    --cui-transition-timing-overlay: cubic-bezier(0.22, 1, 0.36, 1);
    --cui-focus-ring-width: 0.25rem;
    --cui-focus-ring-opacity: 0.25;
    --cui-focus-ring-offset: 0;
    --cui-focus-ring-color: var(--cui-primary-focus-ring);
    --cui-focus-ring: var(--cui-focus-ring-width) solid var(--cui-focus-ring-color);
    --cui-theme-hover-lightness: 0.85;
    --cui-theme-hover-chroma: 1.1;
    --cui-theme-active-lightness: 0.8;
    --cui-theme-active-chroma: 1.15;
    --cui-backdrop-color: var(--cui-black);
    --cui-backdrop-opacity: 50%;
    --cui-backdrop-blur: 8px;
    --cui-translucent-opacity: 80%;
    --cui-translucent-backdrop-filter: blur(5px) saturate(180%);
    --cui-control-size: 1em;
    --cui-control-checked-bg: var(--cui-primary-base);
    --cui-control-checked-border-color: var(--cui-primary-base);
    --cui-control-indeterminate-bg: var(--cui-primary-base);
    --cui-control-indeterminate-border-color: var(--cui-primary-base);
    --cui-control-active-filter: brightness(90%);
    --cui-control-focus-border-color: var(--cui-btn-input-focus-border-color);
    --cui-control-disabled-bg: var(--cui-bg-3);
    --cui-control-disabled-opacity: 0.5;
    --cui-control-label-disabled-opacity: 0.5;
    --cui-control-transition-duration: 0.15s;
    --cui-control-transition-timing: cubic-bezier(0.34, 1.56, 0.64, 1);
    --cui-btn-input-fg: var(--cui-fg-body);
    --cui-btn-input-bg: var(--cui-bg-body);
    --cui-btn-input-font-weight: var(--cui-body-font-weight);
    --cui-btn-input-gap: 0.375rem;
    --cui-btn-input-min-height: calc(var(--cui-btn-input-line-height) * 1em + var(--cui-btn-input-padding-y) * 2 + var(--cui-btn-input-border-width) * 2);
    --cui-btn-input-padding-y: 0.375rem;
    --cui-btn-input-padding-x: 0.75rem;
    --cui-btn-input-font-size: var(--cui-body-font-size);
    --cui-btn-input-line-height: var(--cui-body-line-height);
    --cui-btn-input-border-width: var(--cui-border-width);
    --cui-btn-input-border-color: var(--cui-border-color);
    --cui-btn-input-border-radius: var(--cui-radius-5);
    --cui-btn-input-box-shadow: var(--cui-box-shadow-inset);
    --cui-btn-input-focus-color: var(--cui-btn-input-fg);
    --cui-btn-input-focus-bg: var(--cui-btn-input-bg);
    --cui-btn-input-focus-border-color: color-mix(in oklch, var(--cui-primary-base) 50%, var(--cui-bg-body));
    --cui-btn-input-transition-property: border-color, box-shadow;
    --cui-btn-input-action-transition-property: color, background-color, border-color, box-shadow;
    --cui-btn-input-transition-duration: 0.15s;
    --cui-btn-input-transition-timing: ease-in-out;
    --cui-btn-input-disabled-opacity: 0.65;
    --cui-btn-input-xs-gap: 0.25rem;
    --cui-btn-input-xs-min-height: calc(var(--cui-btn-input-xs-line-height) * 1em + var(--cui-btn-input-xs-padding-y) * 2 + var(--cui-btn-input-border-width) * 2);
    --cui-btn-input-xs-padding-y: 0.125rem;
    --cui-btn-input-xs-padding-x: 0.5rem;
    --cui-btn-input-xs-font-size: var(--cui-font-size-xs);
    --cui-btn-input-xs-line-height: 1.125;
    --cui-btn-input-xs-border-radius: var(--cui-radius-5);
    --cui-btn-input-sm-gap: 0.375rem;
    --cui-btn-input-sm-min-height: calc(var(--cui-btn-input-sm-line-height) * 1em + var(--cui-btn-input-sm-padding-y) * 2 + var(--cui-btn-input-border-width) * 2);
    --cui-btn-input-sm-padding-y: 0.25rem;
    --cui-btn-input-sm-padding-x: 0.5rem;
    --cui-btn-input-sm-font-size: var(--cui-font-size-sm);
    --cui-btn-input-sm-line-height: var(--cui-line-height-sm);
    --cui-btn-input-sm-border-radius: var(--cui-radius-5);
    --cui-btn-input-lg-gap: 0.375rem;
    --cui-btn-input-lg-min-height: calc(var(--cui-btn-input-lg-line-height) * 1em + var(--cui-btn-input-lg-padding-y) * 2 + var(--cui-btn-input-border-width) * 2);
    --cui-btn-input-lg-padding-y: 0.5rem;
    --cui-btn-input-lg-padding-x: 1rem;
    --cui-btn-input-lg-font-size: var(--cui-font-size-lg);
    --cui-btn-input-lg-line-height: var(--cui-line-height-md);
    --cui-btn-input-lg-border-radius: var(--cui-radius-7);
    --cui-font-size-xs: calc(var(--cui-body-font-size) * 0.75);
    --cui-line-height-xs: 1.25;
    --cui-font-size-sm: calc(var(--cui-body-font-size) * 0.875);
    --cui-line-height-sm: var(--cui-body-line-height);
    --cui-font-size-md: var(--cui-body-font-size);
    --cui-line-height-md: var(--cui-body-line-height);
    --cui-font-size-lg: calc(var(--cui-body-font-size) * 1.25);
    --cui-line-height-lg: var(--cui-body-line-height);
    --cui-font-size-xl: clamp(1.275rem, 1.275rem + 0.3vw, 1.5rem);
    --cui-line-height-xl: 1.4285714286;
    --cui-font-size-2xl: clamp(1.3rem, 1.3rem + 0.6vw, 1.75rem);
    --cui-line-height-2xl: 1.3333333333;
    --cui-font-size-3xl: clamp(1.325rem, 1.325rem + 0.9vw, 2rem);
    --cui-line-height-3xl: 1.2;
    --cui-font-size-4xl: clamp(1.375rem, 1.375rem + 1.5vw, 2.5rem);
    --cui-line-height-4xl: 1.1;
    --cui-font-size-5xl: clamp(1.425rem, 1.425rem + 2.1vw, 3rem);
    --cui-line-height-5xl: 1.1;
    --cui-font-size-6xl: clamp(1.475rem, 1.475rem + 2.7vw, 3.5rem);
    --cui-line-height-6xl: 1;
    --cui-font-weight-lighter: lighter;
    --cui-font-weight-light: 300;
    --cui-font-weight-normal: 400;
    --cui-font-weight-medium: 500;
    --cui-font-weight-semibold: 600;
    --cui-font-weight-bold: 700;
    --cui-font-weight-bolder: bolder;
    --cui-primary-base: var(--cui-primary-500);
    --cui-primary-fg: light-dark(var(--cui-primary-600), var(--cui-primary-400));
    --cui-primary-fg-emphasis: light-dark(var(--cui-primary-800), var(--cui-primary-200));
    --cui-primary-bg: var(--cui-primary-500);
    --cui-primary-bg-subtle: light-dark(var(--cui-primary-100), var(--cui-primary-900));
    --cui-primary-bg-muted: light-dark(var(--cui-primary-200), var(--cui-primary-800));
    --cui-primary-border: light-dark(var(--cui-primary-300), var(--cui-primary-600));
    --cui-primary-focus-ring: color-mix(in oklch, var(--cui-primary-base) calc(var(--cui-focus-ring-opacity) * 100%), transparent);
    --cui-primary-contrast: var(--cui-white);
    --cui-secondary-base: var(--cui-gray-200);
    --cui-secondary-fg: light-dark(var(--cui-gray-600), var(--cui-gray-400));
    --cui-secondary-fg-emphasis: light-dark(var(--cui-gray-800), var(--cui-gray-200));
    --cui-secondary-bg: light-dark(var(--cui-gray-100), var(--cui-gray-600));
    --cui-secondary-bg-subtle: light-dark(var(--cui-gray-025), var(--cui-gray-800));
    --cui-secondary-bg-muted: light-dark(var(--cui-gray-050), var(--cui-gray-700));
    --cui-secondary-border: light-dark(var(--cui-gray-300), var(--cui-gray-600));
    --cui-secondary-focus-ring: color-mix(in oklch, light-dark(var(--cui-gray-500), var(--cui-gray-300)) calc(var(--cui-focus-ring-opacity) * 100%), transparent);
    --cui-secondary-contrast: light-dark(var(--cui-gray-900), var(--cui-white));
    --cui-success-base: var(--cui-success-500);
    --cui-success-fg: light-dark(var(--cui-success-600), var(--cui-success-400));
    --cui-success-fg-emphasis: light-dark(var(--cui-success-800), var(--cui-success-200));
    --cui-success-bg: var(--cui-success-500);
    --cui-success-bg-subtle: light-dark(var(--cui-success-100), var(--cui-success-900));
    --cui-success-bg-muted: light-dark(var(--cui-success-200), var(--cui-success-800));
    --cui-success-border: light-dark(var(--cui-success-300), var(--cui-success-600));
    --cui-success-focus-ring: color-mix(in oklch, var(--cui-success-base) calc(var(--cui-focus-ring-opacity) * 100%), transparent);
    --cui-success-contrast: var(--cui-white);
    --cui-info-base: var(--cui-info-500);
    --cui-info-fg: light-dark(var(--cui-info-700), var(--cui-info-300));
    --cui-info-fg-emphasis: light-dark(var(--cui-info-800), var(--cui-info-200));
    --cui-info-bg: var(--cui-info-500);
    --cui-info-bg-subtle: light-dark(var(--cui-info-100), var(--cui-info-900));
    --cui-info-bg-muted: light-dark(var(--cui-info-200), var(--cui-info-800));
    --cui-info-border: light-dark(var(--cui-info-300), var(--cui-info-600));
    --cui-info-focus-ring: color-mix(in oklch, var(--cui-info-base) calc(var(--cui-focus-ring-opacity) * 100%), transparent);
    --cui-info-contrast: var(--cui-white);
    --cui-warning-base: var(--cui-warning-500);
    --cui-warning-fg: light-dark(var(--cui-warning-700), var(--cui-warning-300));
    --cui-warning-fg-emphasis: light-dark(var(--cui-warning-800), var(--cui-warning-200));
    --cui-warning-bg: var(--cui-warning-500);
    --cui-warning-bg-subtle: light-dark(var(--cui-warning-100), var(--cui-warning-900));
    --cui-warning-bg-muted: light-dark(var(--cui-warning-200), var(--cui-warning-800));
    --cui-warning-border: light-dark(var(--cui-warning-300), var(--cui-warning-600));
    --cui-warning-focus-ring: color-mix(in oklch, var(--cui-warning-base) calc(var(--cui-focus-ring-opacity) * 100%), transparent);
    --cui-warning-contrast: var(--cui-black);
    --cui-danger-base: var(--cui-danger-500);
    --cui-danger-fg: light-dark(var(--cui-danger-600), var(--cui-danger-400));
    --cui-danger-fg-emphasis: light-dark(var(--cui-danger-800), var(--cui-danger-200));
    --cui-danger-bg: var(--cui-danger-500);
    --cui-danger-bg-subtle: light-dark(var(--cui-danger-100), var(--cui-danger-900));
    --cui-danger-bg-muted: light-dark(var(--cui-danger-200), var(--cui-danger-800));
    --cui-danger-border: light-dark(var(--cui-danger-300), var(--cui-danger-600));
    --cui-danger-focus-ring: color-mix(in oklch, var(--cui-danger-base) calc(var(--cui-focus-ring-opacity) * 100%), transparent);
    --cui-danger-contrast: var(--cui-white);
    --cui-inverse-base: var(--cui-gray-900);
    --cui-inverse-fg: light-dark(var(--cui-gray-900), var(--cui-gray-200));
    --cui-inverse-fg-emphasis: light-dark(var(--cui-black), var(--cui-white));
    --cui-inverse-bg: light-dark(var(--cui-gray-900), var(--cui-gray-100));
    --cui-inverse-bg-subtle: light-dark(var(--cui-gray-100), var(--cui-gray-900));
    --cui-inverse-bg-muted: light-dark(var(--cui-gray-200), var(--cui-gray-700));
    --cui-inverse-border: light-dark(var(--cui-gray-400), var(--cui-gray-600));
    --cui-inverse-focus-ring: color-mix(in oklch, light-dark(var(--cui-gray-900), var(--cui-gray-100)) calc(var(--cui-focus-ring-opacity) * 100%), transparent);
    --cui-inverse-contrast: light-dark(var(--cui-white), var(--cui-gray-900));
    --cui-bg-body: light-dark(var(--cui-white), var(--cui-gray-975));
    --cui-bg-1: light-dark(var(--cui-gray-025), var(--cui-gray-950));
    --cui-bg-2: light-dark(var(--cui-gray-050), var(--cui-gray-900));
    --cui-bg-3: light-dark(var(--cui-gray-100), var(--cui-gray-800));
    --cui-bg-4: light-dark(var(--cui-gray-200), var(--cui-gray-700));
    --cui-bg-fg: var(--cui-fg-body);
    --cui-bg-white: var(--cui-white);
    --cui-bg-black: var(--cui-black);
    --cui-bg-transparent: transparent;
    --cui-bg-inherit: inherit;
    --cui-fg-body: light-dark(var(--cui-gray-900), var(--cui-gray-050));
    --cui-fg-1: light-dark(var(--cui-gray-800), var(--cui-gray-200));
    --cui-fg-2: light-dark(var(--cui-gray-700), var(--cui-gray-300));
    --cui-fg-3: light-dark(var(--cui-gray-600), var(--cui-gray-500));
    --cui-fg-4: light-dark(var(--cui-gray-500), var(--cui-gray-600));
    --cui-fg-bg: var(--cui-bg-body);
    --cui-fg-white: var(--cui-white);
    --cui-fg-black: var(--cui-black);
    --cui-fg-inherit: inherit;
    --cui-border-bg: var(--cui-bg-body);
    --cui-border-body: light-dark(var(--cui-gray-300), var(--cui-gray-800));
    --cui-border-muted: light-dark(var(--cui-gray-200), var(--cui-gray-800));
    --cui-border-subtle: light-dark(color-mix(in oklch, var(--cui-gray-100), var(--cui-gray-200)), color-mix(in oklch, var(--cui-gray-800), var(--cui-gray-900)));
    --cui-border-emphasized: light-dark(var(--cui-gray-400), var(--cui-gray-600));
    --cui-border-white: var(--cui-white);
    --cui-border-black: var(--cui-black);
    --cui-radius: 0.5rem;
    --cui-radius-0: 0;
    --cui-radius-1: calc(var(--cui-radius) * 0.25);
    --cui-radius-2: calc(var(--cui-radius) * 0.375);
    --cui-radius-3: calc(var(--cui-radius) * 0.5);
    --cui-radius-4: calc(var(--cui-radius) * 0.75);
    --cui-radius-5: var(--cui-radius);
    --cui-radius-6: calc(var(--cui-radius) * 1.25);
    --cui-radius-7: calc(var(--cui-radius) * 1.5);
    --cui-radius-8: calc(var(--cui-radius) * 1.75);
    --cui-radius-9: calc(var(--cui-radius) * 2);
    --cui-radius-pill: 50rem;
    --cui-border-width-keyline: calc(var(--cui-border-width) * 0.5);
    --cui-border-width-1: var(--cui-border-width);
    --cui-border-width-2: calc(var(--cui-border-width) * 2);
    --cui-border-width-3: calc(var(--cui-border-width) * 3);
    --cui-border-width-4: calc(var(--cui-border-width) * 4);
    --cui-border-width-5: calc(var(--cui-border-width) * 5);
    --cui-box-shadow: 0 .125rem .25rem -.0625rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(4% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent), 0 .375rem .75rem -.125rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(5% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent), 0 .75rem 1.5rem -.25rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(6% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent);
    --cui-box-shadow-xs: 0 0.0625rem 0.125rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(4% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent);
    --cui-box-shadow-sm: 0 .0625rem .125rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(4% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent), 0 .125rem .375rem -.0625rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(5% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent);
    --cui-box-shadow-lg: 0 .125rem .375rem -.0625rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(5% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent), 0 .375rem 1rem -.1875rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(6% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent), 0 .75rem 2rem -.375rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(7% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent), 0 1.5rem 3.5rem -.75rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(8% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent);
    --cui-box-shadow-xl: 0 .1875rem .5rem -.0625rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(5% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent), 0 .5rem 1.25rem -.1875rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(6% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent), 0 1rem 2.5rem -.375rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(7% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent), 0 2rem 5rem -.75rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(9% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent);
    --cui-box-shadow-inset: inset 0 1px 2px light-dark(color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(8% * var(--cui-shadow-opacity, 1)), transparent), color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(26% * var(--cui-shadow-opacity, 1)), transparent));
    --cui-z-n1: -1;
    --cui-z-0: 0;
    --cui-z-1: 1;
    --cui-z-2: 2;
    --cui-z-3: 3;
    --cui-z-dropdown: 1000;
    --cui-z-menu: 1000;
    --cui-z-sticky: 1020;
    --cui-z-fixed: 1030;
    --cui-z-sidebar-backdrop: 1034;
    --cui-z-sidebar: 1035;
    --cui-z-offcanvas: 1045;
    --cui-z-drawer: 1045;
    --cui-z-modal: 1055;
    --cui-z-dialog: 1055;
    --cui-z-popover: 1070;
    --cui-z-tooltip: 1080;
    --cui-z-toast: 1090;
    color-scheme: light;
  }

:root {
    --cui-paragraph-margin-bottom: var(--cui-spacer);
    --cui-heading-margin-bottom: var(--cui-spacer-3);
    --cui-heading-font-family: inherit;
    --cui-heading-font-style: inherit;
    --cui-heading-font-weight: var(--cui-font-weight-medium);
    --cui-heading-line-height: 1.2;
    --cui-sub-sup-font-size: 0.75em;
    --cui-hr-margin-y: var(--cui-spacer);
    --cui-hr-color: inherit;
    --cui-hr-border-width: var(--cui-border-width);
    --cui-hr-opacity: 0.25;
    --cui-legend-margin-bottom: var(--cui-spacer-3);
    --cui-legend-font-size: clamp(1.275rem, 1.275rem + 0.3vw, 1.5rem);
    --cui-legend-font-weight: inherit;
    --cui-list-padding-x: 2rem;
    --cui-dt-font-weight: var(--cui-font-weight-bold);
    --cui-initialism-font-size: var(--cui-small-font-size);
    --cui-code-font-size: var(--cui-small-font-size);
    --cui-pre-color: inherit;
    accent-color: var(--cui-primary-base);
  }

:root {
      scroll-behavior: smooth;
    }

:root {
    --cui-breakpoint-xs: 0;
    --cui-breakpoint-sm: 576px;
    --cui-breakpoint-md: 768px;
    --cui-breakpoint-lg: 1024px;
    --cui-breakpoint-xl: 1280px;
    --cui-breakpoint-2xl: 1536px;
    --cui-spacer: 1rem;
    --cui-spacer-0: 0;
    --cui-spacer-1: calc(var(--cui-spacer) * 0.25);
    --cui-spacer-2: calc(var(--cui-spacer) * 0.375);
    --cui-spacer-3: calc(var(--cui-spacer) * 0.5);
    --cui-spacer-4: calc(var(--cui-spacer) * 0.75);
    --cui-spacer-5: var(--cui-spacer);
    --cui-spacer-6: calc(var(--cui-spacer) * 1.25);
    --cui-spacer-7: calc(var(--cui-spacer) * 1.5);
    --cui-spacer-8: calc(var(--cui-spacer) * 1.75);
    --cui-spacer-9: calc(var(--cui-spacer) * 2);
    --cui-spacer-10: calc(var(--cui-spacer) * 2.25);
    --cui-spacer-11: calc(var(--cui-spacer) * 2.5);
    --cui-spacer-12: calc(var(--cui-spacer) * 3);
  }

:root.dialog-open {
    overflow: hidden;
    scrollbar-gutter: stable;
  }

Dark mode

Because light-dark() resolves both modes above, only one value still needs a dark-mode declaration of its own — a shadow reads as depth against the surface behind it, and a dark surface swallows the same alpha, so its strength rises rather than its color changing.

scss
--cui-shadow-strength: 2.4;
--cui-backdrop-opacity: 65%;

Component variables

We use custom properties as local variables for components. This way we reduce our compiled CSS, ensure styles aren’t inherited in places like nested tables, and allow restyling and extending of CoreUI components after Sass compilation.

Every component declares its complete styling surface as custom properties on its base class, so you can override any of them in your own CSS without recompiling Sass:

.alert {
  --cui-alert-padding-x: 1.5rem;
  --cui-alert-padding-y: 1rem;
  --cui-alert-border-radius: var(--cui-radius-5);
}

Have a look at our table documentation for some insight into how we’re using CSS variables. Our navbars also use CSS variables, and we use them across our grids — primarily for gutters and the opt-in CSS grid.

We assign CSS variables at the base component level (e.g., .navbar for navbar and its sub-components). This reduces guessing on where and how to customize, and allows for easy modifications by our team in future updates.

A variable resolves where it is declared, so override it on the element that carries the base class — setting --cui-navbar-padding-y on a wrapper around the navbar will not reach it.

Prefix

Most CSS variables use a prefix to avoid collisions with your own codebase. This prefix is in addition to the -- that’s required on every CSS variable.

Customize the prefix via the $prefix Sass variable. By default, it’s set to cui- (note the trailing dash).

The data-* attributes you write in your markup — data-coreui-theme, data-coreui-target — carry a second knob, $data-infix (-coreui- by default), so a build can rename them: set to -bs-, it reads data-bs-theme. Attributes the JavaScript sets on elements while it runs (data-coreui-popper, data-coreui-placement, data-coreui-validate) are always data-coreui-* and do not follow it.

Examples

CSS variables offer similar flexibility to Sass’s variables, but without the need for compilation before being served to the browser. For example, here we’re resetting our page’s font and link styles with CSS variables.

body {
  font: 1rem/1.5 var(--cui-font-sans-serif);
}
a {
  color: var(--cui-primary-500);
}

Focus variables

Added in v4.3.0

CoreUI provides custom :focus styles using a combination of Sass and CSS variables that can be optionally added to specific components and elements. We do not yet globally override all :focus styles.

The defaults are declared on :root and can be customized in real-time, including options for x and y offsets, which default to their fallback value of 0.

scss
--cui-focus-ring-width: .25rem,
--cui-focus-ring-opacity: .25,
--cui-focus-ring-offset: 0,
--cui-focus-ring-color: var(--cui-primary-focus-ring),
--cui-focus-ring: var(--cui-focus-ring-width) solid var(--cui-focus-ring-color),

Overlay easing

The components that float above the page — dialog, drawer, menu and the popup the field components open — read one easing curve from :root instead of carrying their own.

scss
--cui-transition-timing-overlay: cubic-bezier(.22, 1, .36, 1),

Set it once and all four follow:

:root {
  --cui-transition-timing-overlay: linear;
}

Each component still exposes its own --cui-{component}-transition-timing, so a single overlay can opt out without touching the others.

Grid breakpoints

While we include our grid breakpoints as CSS variables (except for xs), be aware that CSS variables do not work in media queries. This is by design in the CSS spec for variables, but may change in coming years with support for env() variables. Check out this Stack Overflow answer for some helpful links. In the meantime, you can use these variables in other CSS situations, as well as in your JavaScript.