CSS variables

Summary

AUI defines a color palette as a set of CSS variables, this predates Atlassian Design System Tokens

If you create a component with similar semantics to one of the AUI components, you can reuse these variables. Alternately, if you develop something new, we recommend using the design tokens variables directly and avoiding referencing the AUI variables.

Mappings may change

The exact design token used in the AUI CSS variable may change, do not rely on some AUI CSS variable being a particular color or design token
AUI CSS variable Design tokens CSS variable
Page
--aui-body-text
--ds-text
--aui-lesser-body-text
--ds-text-subtlest
--aui-lesser-header-text
--ds-text-subtlest
--aui-body-background
--ds-surface
--aui-page-background
--ds-surface
--aui-page-border
--ds-border
--aui-border
--ds-border
--aui-border-strong
--ds-border-accent-gray
--aui-focus
--ds-border-focused
--aui-link-color
--ds-link
--aui-link-decoration
--aui-link-hover-color
--ds-link
--aui-link-active-color
--ds-link-pressed
--aui-link-hover-decoration
--aui-link-visited-color
--ds-link-pressed
"Item" pattern - used for navigation, buttons, dropdown options, pagination, and similar.
--aui-itemheading-text
--ds-text-subtle
--aui-item-bg
--aui-item-text
--ds-text-subtle
--aui-item-focus-bg
--ds-background-neutral-subtle-hovered
--aui-item-focus-text
--ds-text-subtle
--aui-item-active-text
--ds-text-subtle
--aui-item-active-bg
--ds-background-selected
--aui-item-selected-bg
--ds-background-selected
--aui-item-selected-text
--ds-text-selected
--aui-item-disabled-bg
--aui-item-disabled-text
--ds-text-disabled
Tooltips
--aui-tooltip-bg-color
--ds-background-neutral-bold
--aui-tooltip-border-color
--ds-background-neutral-bold
--aui-tooltip-content-text-color
--ds-text-inverse
--aui-tooltip-title-text-color
--ds-text-inverse
Help text and onboarding messaging
--aui-help-color
--ds-border-discovery
Badges
--aui-badge-bg-color
--ds-background-accent-gray-subtler
--aui-badge-text-color
--ds-text
--aui-badge-primary-bg-color
--ds-background-accent-blue-subtler
--aui-badge-primary-text-color
--ds-text
--aui-badge-added-bg-color
--ds-background-success-subtler
--aui-badge-added-text-color
--ds-text
--aui-badge-removed-bg-color
--ds-background-danger
--aui-badge-removed-text-color
--ds-text
--aui-badge-important-bg-color
--ds-background-accent-red-subtler
--aui-badge-important-text-color
--ds-text
--aui-badge-on-blue-text-color
--ds-text-brand
--aui-badge-on-blue-bg-color
--ds-surface
Avatars
--aui-avatar-outline
--ds-border-inverse
--aui-avatar-text (internal reference)
var(--aui-button-default-text-color)
--aui-avatar-background (internal reference)
var(--aui-button-default-bg-color)
Lozenges
--aui-lozenge-bg-color
--ds-background-neutral
--aui-lozenge-border-color (internal reference)
oklch(from var(--ds-border-bold) calc(l * var(--aui-lozenge-border-l-factor)) c h)
--aui-lozenge-text-color
--ds-text
--aui-lozenge-subtle-bg-color (internal reference)
var(--aui-lozenge-bg-color)
--aui-lozenge-subtle-border-color (internal reference)
var(--aui-lozenge-border-color)
--aui-lozenge-subtle-text-color (internal reference)
var(--aui-lozenge-text-color)
--aui-lozenge-success-bg-color
--ds-background-success-subtler
--aui-lozenge-success-border-color (internal reference)
oklch(from var(--ds-border-success) calc(l * var(--aui-lozenge-border-l-factor)) c h)
--aui-lozenge-success-text-color
--ds-text-success-bolder
--aui-lozenge-success-subtle-bg-color (internal reference)
var(--aui-lozenge-success-bg-color)
--aui-lozenge-success-subtle-border-color (internal reference)
var(--aui-lozenge-success-border-color)
--aui-lozenge-success-subtle-text-color (internal reference)
var(--aui-lozenge-success-text-color)
--aui-lozenge-current-bg-color
--ds-background-information-subtler
--aui-lozenge-current-border-color (internal reference)
oklch(from var(--ds-border-information) calc(l * var(--aui-lozenge-border-l-factor)) c h)
--aui-lozenge-current-text-color
--ds-text-information-bolder
--aui-lozenge-current-subtle-bg-color (internal reference)
var(--aui-lozenge-current-bg-color)
--aui-lozenge-current-subtle-border-color (internal reference)
var(--aui-lozenge-current-border-color)
--aui-lozenge-current-subtle-text-color (internal reference)
var(--aui-lozenge-current-text-color)
--aui-lozenge-moved-bg-color
--ds-background-warning-subtler
--aui-lozenge-moved-border-color (internal reference)
oklch(from var(--ds-border-warning) calc(l * var(--aui-lozenge-border-l-factor)) c h)
--aui-lozenge-moved-text-color
--ds-text-warning-bolder
--aui-lozenge-moved-subtle-bg-color (internal reference)
var(--aui-lozenge-moved-bg-color)
--aui-lozenge-moved-subtle-border-color (internal reference)
var(--aui-lozenge-moved-border-color)
--aui-lozenge-moved-subtle-text-color (internal reference)
var(--aui-lozenge-moved-text-color)
--aui-lozenge-error-bg-color
--ds-background-danger-subtler
--aui-lozenge-error-border-color (internal reference)
oklch(from var(--ds-border-danger) calc(l * var(--aui-lozenge-border-l-factor)) c h)
--aui-lozenge-error-text-color
--ds-text-danger-bolder
--aui-lozenge-error-subtle-bg-color (internal reference)
var(--aui-lozenge-error-bg-color)
--aui-lozenge-error-subtle-border-color (internal reference)
var(--aui-lozenge-error-border-color)
--aui-lozenge-error-subtle-text-color (internal reference)
var(--aui-lozenge-error-text-color)
--aui-lozenge-new-bg-color
--ds-background-discovery-subtler
--aui-lozenge-new-border-color (internal reference)
oklch(from var(--ds-border-discovery) calc(l * var(--aui-lozenge-border-l-factor)) c h)
--aui-lozenge-new-text-color
--ds-text-discovery-bolder
--aui-lozenge-new-subtle-bg-color (internal reference)
var(--aui-lozenge-new-bg-color)
--aui-lozenge-new-subtle-border-color (internal reference)
var(--aui-lozenge-new-border-color)
--aui-lozenge-new-subtle-text-color (internal reference)
var(--aui-lozenge-new-text-color)
Messages
--aui-message-info-bg-color
--ds-background-information
--aui-message-info-icon-color
--ds-icon-information
--aui-message-info-text-color
--ds-text
--aui-message-success-bg-color
--ds-background-success
--aui-message-success-icon-color
--ds-icon-success
--aui-message-success-text-color
--ds-text
--aui-message-warning-bg-color
--ds-background-warning
--aui-message-warning-icon-color
--ds-icon-warning
--aui-message-warning-text-color
--ds-text
--aui-message-error-bg-color
--ds-background-danger
--aui-message-error-icon-color
--ds-icon-danger
--aui-message-error-text-color
--ds-text
--aui-message-change-bg-color
--ds-background-discovery
--aui-message-change-icon-color
--ds-icon-discovery
--aui-message-change-text-color
--ds-text
Banners
--aui-banner-error-bg-color
--ds-background-danger-bold
--aui-banner-error-text-color
--ds-text-inverse
--aui-banner-warning-bg-color
--ds-background-warning-bold
--aui-banner-warning-text-color
--ds-text-warning-inverse
--aui-banner-announcement-bg-color
--ds-background-neutral-bold
--aui-banner-announcement-text-color
--ds-text-inverse
Flags
--aui-flag-bg-color
--ds-surface-overlay
--aui-flag-info-color
--ds-icon-information
--aui-flag-success-color
--ds-icon-success
--aui-flag-warning-color
--ds-icon-warning
--aui-flag-error-color
--ds-icon-danger
Buttons
--aui-button-default-bg-color
--ds-background-neutral
--aui-button-default-text-color
--ds-text
--aui-button-default-hover-bg-color
--ds-background-neutral-hovered
--aui-button-default-active-bg-color
--ds-background-neutral-pressed
--aui-button-default-active-text-color
--ds-text
--aui-button-default-selected-bg-color
--ds-background-selected
--aui-button-default-selected-text-color
--ds-text-selected
--aui-button-default-disabled-bg-color
--ds-background-disabled
--aui-button-default-disabled-text-color
--ds-text-disabled
--aui-button-primary-bg-color
--ds-background-brand-bold
--aui-button-primary-text-color
--ds-text-inverse
--aui-button-primary-hover-bg-color
--ds-background-brand-bold-hovered
--aui-button-primary-active-bg-color
--ds-background-selected-bold-pressed
--aui-button-primary-active-text-color
--ds-text-inverse
--aui-button-primary-disabled-bg-color (internal reference)
var(--aui-button-default-disabled-bg-color)
--aui-button-primary-disabled-text-color (internal reference)
var(--aui-button-default-disabled-text-color)
--aui-button-warning-bg-color
--ds-background-warning-bold
--aui-button-warning-text-color
--ds-text-warning-inverse
--aui-button-warning-hover-bg-color
--ds-background-warning-bold-hovered
--aui-button-warning-active-bg-color
--ds-background-warning-bold-pressed
--aui-button-warning-active-text-color
--ds-text-warning-inverse
--aui-button-warning-selected-bg-color
--ds-background-warning-bold-hovered
--aui-button-warning-selected-text-color
--ds-text-warning-inverse
--aui-button-danger-bg-color
--ds-background-danger-bold
--aui-button-danger-text-color
--ds-text-inverse
--aui-button-danger-hover-bg-color
--ds-background-danger-bold-hovered
--aui-button-danger-active-bg-color
--ds-background-danger-bold-pressed
--aui-button-danger-active-text-color
--ds-text-inverse
--aui-button-danger-selected-bg-color
--ds-background-danger-bold-hovered
--aui-button-danger-selected-text-color
--ds-text-inverse
--aui-button-light-bg-color
--ds-background-input
--aui-button-subtle-text-color
--ds-text
"Labels" (e.g., page tags, selected values in components, etc.)
--aui-label-text-color
--ds-text
--aui-label-link-color
--ds-link
--aui-label-bg-color
--ds-background-neutral
--aui-label-hover-bg-color
--ds-background-neutral
--aui-label-close-hover-bg-color
--ds-background-danger
--aui-label-close-hover-text-color
--ds-text-danger
Forms
--aui-form-placeholder-text-color
--ds-text-subtlest
--aui-form-placeholder-disabled-text-color
--ds-text-disabled
--aui-form-label-text-color
--ds-text-subtle
--aui-form-error-text-color
--ds-text-danger
--aui-form-description-text-color
--ds-text-subtlest
--aui-form-disabled-field-bg-color
--ds-background-disabled
--aui-form-disabled-field-text-color
--ds-text-disabled
--aui-form-disabled-field-label-color
--ds-text-disabled
--aui-form-field-border-color
--ds-border-input
--aui-form-field-hover-border-color
--ds-border-input
--aui-form-field-default-text-color
--ds-text
--aui-form-field-default-bg-color
--ds-background-input
--aui-form-field-hover-text-color
--ds-text
--aui-form-field-hover-bg-color
--ds-background-input-hovered
--aui-form-field-focus-bg-color
--ds-background-input
--aui-form-select-bg-color
--ds-background-input
--aui-form-select-border-color
--ds-border-input
--aui-form-select-hover-bg-color
--ds-background-input-hovered
--aui-form-checkbox-radio-active-bg-color
--ds-background-accent-blue-subtler
--aui-form-optgroup-text-color
--ds-text-subtlest
--aui-form-optgroup-bg-color
--ds-background-neutral
--aui-form-option-bg-color
--ds-background-input
--aui-form-pre-bg-color
--ds-background-neutral
More form fields
--aui-form-field-autofilled-bg-color
--ds-background-discovery
--aui-form-field-autofilled-border-color
--ds-border-discovery
--aui-form-field-autofilled-text-color
--ds-text-discovery
Form glyphs
--aui-form-glyph-disabled-icon-color
--ds-icon-disabled
--aui-form-glyph-disabled-fill-color
--ds-background-disabled
--aui-form-glyph-icon-color
--ds-icon-inverse
--aui-form-glyph-fill-color
--ds-icon-accent-blue
Form checkboxes and radio buttons
--aui-form-checkbox-active-bg-color
--ds-background-accent-blue-subtler
--aui-form-checkbox-active-border-color
--ds-border-accent-blue
--aui-form-checkbox-active-icon-color
--ds-icon-information
--aui-form-radio-unchecked-bg-color
--ds-background-input
--aui-form-radio-unchecked-border-color
--ds-border-bold
Toggle
--aui-toggle-default-bg-color
--ds-background-neutral-bold
--aui-toggle-default-bg-hover-color
--ds-background-neutral-bold-hovered
--aui-toggle-button-color
--ds-icon-inverse
--aui-toggle-on-color
--ds-background-success-bold
--aui-toggle-on-hover-color
--ds-background-success-bold-hovered
--aui-toggle-disabled-overlay-color
--ds-background-neutral-subtle
--aui-toggle-tick-color
--ds-icon-inverse
--aui-toggle-cross-color
--ds-icon-inverse
Form notification
--aui-form-notification-info-color
--ds-icon-subtle
--aui-form-notification-error-color (internal reference)
var(--aui-message-error-icon-color)
--aui-form-notification-success-color (internal reference)
var(--aui-message-success-icon-color)
Progress bar
--aui-progressbar-color
--ds-background-neutral-bold
--aui-progressbar-track-color
--ds-background-neutral
Spinner
--aui-spinner-color
--ds-icon-subtle
Navigation
--aui-nav-pagination-text-color
--ds-text
--aui-nav-pagination-active-text-color
--ds-text-subtlest
Application header
--aui-appheader-bg-color
--ds-surface
--aui-appheader-text-color
--ds-text
--aui-appheader-item-focus-bg-color
--ds-background-neutral-hovered
--aui-appheader-item-focus-text-color
--ds-text
--aui-appheader-item-active-bg-color
--ds-background-neutral-subtle-pressed
--aui-appheader-item-active-text-color
--ds-text
--aui-appheader-quicksearch-bg-color
--ds-background-input
--aui-appheader-quicksearch-border-color
--ds-border-input
--aui-appheader-quicksearch-text-color
--ds-text-subtlest
--aui-appheader-quicksearch-placeholder-text-color
--ds-text-subtlest
--aui-appheader-quicksearch-focus-bg-color (internal reference)
var(--aui-appheader-quicksearch-bg-color)
--aui-appheader-quicksearch-focus-text-color
--ds-text
Sidebar
--aui-sidebar-icon-color
--ds-icon
--aui-sidebar-toggle-icon-color
--ds-icon
--aui-sidebar-bg-color
--ds-surface
--aui-sidebar-dropdown-arrow-color
--ds-icon
--aui-sidebar-tooltip-bg-color
--ds-icon
--aui-sidebar-badge-bg-color
--ds-background-accent-gray-subtler
--aui-sidebar-badge-text-color
--ds-text
Tabs
--aui-tabs-tab-border-color
--ds-border
--aui-tabs-tab-text-color
--ds-text-subtle
--aui-tabs-tab-hover-text-color
--ds-text-selected
--aui-tabs-tab-active-border-color
--ds-border-accent-blue
--aui-tabs-tab-active-text-color
--ds-text-selected
Multi-step wizard
--aui-progress-tracker-current-step-color
--ds-background-brand-bold
--aui-progress-tracker-current-step-text-color (internal reference)
var(--aui-progress-tracker-visited-step-text-color)
--aui-progress-tracker-visited-step-text-color
--ds-text
--aui-progress-tracker-visited-step-hover-text-color
--ds-link
--aui-progress-tracker-visited-step-active-text-color
--ds-link
--aui-progress-tracker-future-step-color
--ds-icon-subtle
--aui-progress-tracker-future-step-text-color
--ds-text-subtle
Tables
--aui-table-row-bg-color
--ds-background-neutral-subtle
--aui-table-row-text-color
--ds-text
--aui-table-header-bg-color
--ds-background-neutral-subtle
--aui-table-heading-text-color
--ds-text-subtle
--aui-table-border-color
--ds-border
--aui-table-caption-bg-color
--ds-background-accent-gray-subtlest
--aui-table-caption-text-color
--ds-text-subtle
--aui-table-list-row-hover-color
--ds-background-neutral-subtle-hovered
--aui-table-list-row-subtle-color
--ds-background-neutral-subtle-hovered
--aui-table-sortable-hover-bg-color
--ds-background-neutral-subtle-hovered
--aui-table-sortable-active-bg-color
--ds-background-accent-blue-subtler
--aui-table-sortable-active-border-color
--ds-border-accent-blue
--aui-table-sortable-active-text-color
--ds-text-accent-blue
--aui-table-sortable-selected-bg-color
--ds-background-neutral-subtle
--aui-table-sortable-selected-border-color
--ds-border-accent-gray
--aui-table-sortable-selected-text-color
--ds-text
Dynamic tables
--aui-restfultable-row-focused-border-color
--ds-border
--aui-restfultable-row-create-border-color
--ds-border-disabled
--aui-restfultable-row-editable-hover-bg-color (internal reference)
var(--aui-form-field-hover-bg-color)
--aui-restfultable-error-text-color (internal reference)
var(--aui-form-notification-error-color)
--aui-restfultable-header-row-bg-color
--ds-surface
--aui-restfultable-header-row-text-color
--ds-text-subtlest
--aui-restfultable-row-moving-bg-color
--ds-surface-raised
--aui-restfultable-editable-em-text-color
--ds-text-subtlest
--aui-restfultable-row-active-bg-color
--ds-background-neutral-subtle-pressed
--aui-restfultable-row-hover-bg-color
--ds-background-input-hovered
Dropdowns
--aui-dropdown-bg-color
--ds-surface-overlay
--aui-dropdown-border-color
--ds-border
Selects
--aui-select2-placeholder-text-color
--ds-text-subtlest
--aui-select2-chosen-bg-color
--ds-background-neutral
--aui-select2-chosen-text-color
--ds-text
--aui-select2-chosen-hover-bg-color
--ds-background-neutral-hovered
--aui-select2-chosen-hover-text-color
--ds-text
--aui-select2-active-chosen-bg-color
--ds-background-neutral
--aui-select2-active-chosen-text-color
--ds-text
--aui-select2-field-default-bg-color
--ds-background-input
--aui-select2-field-border-color
--ds-border-input
--aui-select2-field-hover-bg-color
--ds-background-input-hovered
--aui-select2-drop-bg-color
--ds-surface-overlay
Dialogs
--aui-dialog-bg-color
--ds-surface-overlay
--aui-dialog-border-color
--ds-border
--aui-dialog-header-bg-color (internal reference)
var(--aui-dialog-bg-color)
--aui-dialog-header-warning-bg-color
--ds-background-danger-bold
--aui-dialog-header-warning-text-color
--ds-text-inverse
--aui-dialog-button-hover-border-color
--ds-border
--aui-dialog-footer-hint-text-color
--ds-text-subtlest
--aui-inline-dialog-bg-color (internal reference)
var(--aui-dropdown-bg-color)
--aui-inline-dialog-border-color (internal reference)
var(--aui-dropdown-border-color)
Date pickers
--aui-datepicker-panel-bg-color
--ds-background-input
--aui-datepicker-panel-divider-color
--ds-border
--aui-datepicker-heading-bg-color
--ds-surface
--aui-datepicker-heading-text-color
--ds-text
--aui-datepicker-heading-weekdays-text-color
--ds-text-subtle
--aui-datepicker-option-bg-color
--ds-background-neutral-subtle
--aui-datepicker-option-text-color
--ds-text-selected
--aui-datepicker-option-focus-bg-color
--ds-background-neutral-subtle-hovered
--aui-datepicker-option-focus-text-color
--ds-text-accent-blue
--aui-datepicker-option-selected-bg-color
--ds-background-selected-bold
--aui-datepicker-option-selected-text-color
--ds-text-inverse
--aui-datepicker-option-unselectable-bg-color
--ds-background-disabled
--aui-datepicker-option-unselectable-text-color
--ds-text-disabled
--aui-datepicker-disabled-text-color
--ds-text-disabled
--aui-datepicker-hint-text-color
--ds-text-subtlest