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.
| 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-accent-gray
|
||
| --aui-badge-primary-bg-color |
--ds-background-information-bold
|
||
| --aui-badge-primary-text-color |
--ds-text-inverse
|
||
| --aui-badge-added-bg-color |
--ds-background-accent-green-subtlest
|
||
| --aui-badge-added-text-color |
--ds-text-accent-green
|
||
| --aui-badge-removed-bg-color |
--ds-background-accent-red-subtlest
|
||
| --aui-badge-removed-text-color |
--ds-text-accent-red
|
||
| --aui-badge-important-bg-color |
--ds-background-accent-red-bolder
|
||
| --aui-badge-important-text-color |
--ds-text-inverse
|
||
| --aui-badge-on-blue-text-color |
--ds-text-inverse
|
||
| --aui-badge-on-blue-bg-color |
--ds-background-accent-blue-subtler
|
||
| 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-bold
|
||
| --aui-lozenge-text-color |
--ds-text-inverse
|
||
| --aui-lozenge-subtle-bg-color |
--ds-background-neutral
|
||
| --aui-lozenge-subtle-text-color |
--ds-text-subtle
|
||
| --aui-lozenge-success-bg-color |
--ds-background-success-bold
|
||
| --aui-lozenge-success-text-color |
--ds-text-inverse
|
||
| --aui-lozenge-success-subtle-bg-color |
--ds-background-success
|
||
| --aui-lozenge-success-subtle-text-color |
--ds-text-success
|
||
| --aui-lozenge-current-bg-color |
--ds-background-information-bold
|
||
| --aui-lozenge-current-text-color |
--ds-text-inverse
|
||
| --aui-lozenge-current-subtle-bg-color |
--ds-background-information
|
||
| --aui-lozenge-current-subtle-text-color |
--ds-text-information
|
||
| --aui-lozenge-moved-bg-color |
--ds-background-warning-bold
|
||
| --aui-lozenge-moved-text-color |
--ds-text-warning-inverse
|
||
| --aui-lozenge-moved-subtle-bg-color |
--ds-background-warning
|
||
| --aui-lozenge-moved-subtle-text-color |
--ds-text-warning
|
||
| --aui-lozenge-error-bg-color |
--ds-background-danger-bold
|
||
| --aui-lozenge-error-text-color |
--ds-text-inverse
|
||
| --aui-lozenge-error-subtle-bg-color |
--ds-background-danger
|
||
| --aui-lozenge-error-subtle-text-color |
--ds-text-danger
|
||
| --aui-lozenge-new-bg-color |
--ds-background-discovery-bold
|
||
| --aui-lozenge-new-text-color |
--ds-text-inverse
|
||
| --aui-lozenge-new-subtle-bg-color |
--ds-background-discovery
|
||
| --aui-lozenge-new-subtle-text-color |
--ds-text-discovery
|
||
| 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
|
||
| --aui-appheader-quicksearch-hover-bg-color |
--ds-background-input-hovered
|
||
| --aui-appheader-quicksearch-focus-bg-color |
(internal reference)
var(--aui-appheader-quicksearch-bg-color)
|
||
| --aui-appheader-quicksearch-focus-text-color |
--ds-text-subtlest
|
||
| Sidebar | |||
| --aui-sidebar-icon-color |
--ds-icon
|
||
| --aui-sidebar-toggle-icon-color |
--ds-icon
|
||
| --aui-sidebar-bg-color |
--ds-surface-sunken
|
||
| --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
|
||