Semantic
Background
var(--bs-color-bg-inverse-high)var(--bs-color-bg-inverse-low)var(--bs-color-bg-primary)var(--bs-color-bg-secondary)var(--bs-color-bg-tertiary)
Surface
var(--bs-color-surface-brand-primary)var(--bs-color-surface-inverse-high)var(--bs-color-surface-inverse-low)var(--bs-color-surface-primary)var(--bs-color-surface-secondary)var(--bs-color-surface-status-accent-emphasized)var(--bs-color-surface-status-accent-muted)var(--bs-color-surface-status-info-emphasized)var(--bs-color-surface-status-info-muted)var(--bs-color-surface-status-negative-emphasized)var(--bs-color-surface-status-negative-muted)var(--bs-color-surface-status-positive-emphasized)var(--bs-color-surface-status-positive-muted)var(--bs-color-surface-status-warning-emphasized)var(--bs-color-surface-status-warning-muted)var(--bs-color-surface-tertiary)
Content
var(--bs-color-content-brand-primary)var(--bs-color-content-default)var(--bs-color-content-disabled)var(--bs-color-content-inverse)var(--bs-color-content-muted)var(--bs-color-content-status-accent)var(--bs-color-content-status-info)var(--bs-color-content-status-negative)var(--bs-color-content-status-positive)var(--bs-color-content-status-warning)
Content on other colors
var(--bs-color-content-on-action-disabled)var(--bs-color-content-on-action-enabled)var(--bs-color-content-on-action-focus)var(--bs-color-content-on-action-highlighted)var(--bs-color-content-on-action-hover)var(--bs-color-content-on-action-loading)var(--bs-color-content-on-action-pressed)var(--bs-color-content-on-action-selected)var(--bs-color-content-on-brand-primary)var(--bs-color-content-on-status-accent-emphasized)var(--bs-color-content-on-status-accent-muted)var(--bs-color-content-on-status-info-emphasized)var(--bs-color-content-on-status-info-muted)var(--bs-color-content-on-status-negative-emphasized)var(--bs-color-content-on-status-negative-muted)var(--bs-color-content-on-status-positive-emphasized)var(--bs-color-content-on-status-positive-muted)var(--bs-color-content-on-status-warning-emphasized)var(--bs-color-content-on-status-warning-muted)
Action
var(--bs-color-action-disabled)var(--bs-color-action-enabled)var(--bs-color-action-focus)var(--bs-color-action-highlighted)var(--bs-color-action-hover)var(--bs-color-action-loading)var(--bs-color-action-negative-enabled)var(--bs-color-action-negative-focus)var(--bs-color-action-negative-hover)var(--bs-color-action-negative-loading)var(--bs-color-action-negative-pressed)var(--bs-color-action-pressed)var(--bs-color-action-read-only-primary)var(--bs-color-action-read-only-secondary)var(--bs-color-action-selected)var(--bs-color-action-support-disabled)var(--bs-color-action-support-enabled)var(--bs-color-action-support-focus)var(--bs-color-action-support-hover)var(--bs-color-action-support-loading)var(--bs-color-action-support-pressed)var(--bs-color-action-visited)
Border
var(--bs-color-border-brand-primary)var(--bs-color-border-default)var(--bs-color-border-emphasized)var(--bs-color-border-focus-inset)var(--bs-color-border-focus)var(--bs-color-border-minimal)var(--bs-color-border-muted)var(--bs-color-border-on-brand-primary)var(--bs-color-border-status-accent)var(--bs-color-border-status-info)var(--bs-color-border-status-negative)var(--bs-color-border-status-positive)var(--bs-color-border-status-warning)
Overlay
var(--bs-color-overlay-drag)var(--bs-color-overlay-dropdown)var(--bs-color-overlay-modal)var(--bs-color-overlay-tooltip)
Opacity
var(--bs-color-opacity-lower)var(--bs-color-opacity-lowest)var(--bs-color-opacity-transparent)
Non semantic
Always
var(--bs-color-always-black)var(--bs-color-always-on-black)var(--bs-color-always-on-white)var(--bs-color-always-white)
Decorative
No tokens generated