AUI colors
Summary
AUI defines a color palette as a set of CSS variables, and all AUI components depend on these values.
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 (last column) and avoiding referencing the AUI variables (first column).
Initially these variables were introduced to support the first iteration of the dark
mode. For reference, the table below lists the values for old color
modes: both light and dark (note that in the neutral palette –
@ak-color-N<...> – any given variable has different
values between old light and old dark mode).
The last column is for the design tokens mode, which is the current approach to support themes. Consult Design tokens for all available tokens. The previews are only for the currently-selected theme: use the switcher in the top-right corner to see the difference.
Note: some of the values defined here are not colors, but for historical reasons they are batched inside these definitions.
| CSS variable | Old light mode | Old dark mode | Design tokens CSS variable |
|---|---|---|---|
| Shadows and backgrounds | |||
| --aui-shadow1 |
@ak-color-N40A
|
@ak-color-N70A
|
var(--ds-border)
|
| --aui-shadow2 |
@ak-color-N50A
|
@ak-color-N90A
|
var(--ds-background-neutral-pressed)
|
| --aui-blanket |
rgba(@ak-color-N800, 0.45)
|
@ak-color-N100A
|
var(--ds-blanket)
|
| Page | |||
| --aui-body-text |
@ak-color-N800
|
@ak-color-N800
|
var(--ds-text)
|
| --aui-lesser-body-text |
@ak-color-N300
|
@ak-color-N200
|
var(--ds-text-subtlest)
|
| --aui-lesser-header-text |
@ak-color-N200
|
@ak-color-N200
|
var(--ds-text-subtlest)
|
| --aui-body-background |
@ak-color-N20
|
@ak-color-N30
|
var(--ds-surface)
|
| --aui-page-background |
@ak-color-N0
|
@ak-color-N30
|
var(--ds-surface)
|
| --aui-page-border |
@ak-color-N40
|
@ak-color-N30
|
var(--ds-border)
|
| --aui-border |
@ak-color-N40
|
@ak-color-N50
|
var(--ds-border)
|
| --aui-border-strong |
@ak-color-N100
|
@ak-color-N100
|
var(--ds-border-accent-gray)
|
| --aui-focus |
@ak-color-B200
|
@ak-color-B100
|
var(--ds-border-focused)
|
| --aui-link-color |
@ak-color-B400
|
@ak-color-B100
|
var(--ds-link)
|
| --aui-link-decoration |
none
|
none
|
none
|
| --aui-link-hover-color |
@ak-color-B300
|
@ak-color-B75
|
var(--ds-link)
|
| --aui-link-active-color |
@ak-color-B500
|
@ak-color-B200
|
var(--ds-link-pressed)
|
| --aui-link-hover-decoration |
underline
|
underline
|
underline
|
| --aui-link-visited-color |
@ak-color-P500
|
@ak-color-P100
|
var(--ds-link-pressed)
|
| "Item" pattern - used for navigation, buttons, dropdown options, pagination, and similar. | |||
| --aui-itemheading-text |
@ak-color-N300
|
@ak-color-N300
|
var(--ds-text-subtle)
|
| --aui-item-bg |
transparent
|
transparent
|
transparent
|
| --aui-item-text |
@ak-color-N500
|
@ak-color-N600
|
var(--ds-text-subtlest)
|
| --aui-item-focus-bg |
@ak-color-N30A
|
rgba(@ak-color-N200, 0.3)
|
var(--ds-background-accent-gray-subtler)
|
| --aui-item-focus-text |
@ak-color-N500
|
@ak-color-N600
|
var(--ds-text-subtle)
|
| --aui-item-active-text |
@ak-color-B400
|
@ak-color-B400
|
var(--ds-text-subtle)
|
| --aui-item-active-bg |
@ak-color-B50
|
@ak-color-B75
|
var(--ds-background-selected)
|
| --aui-item-selected-bg |
(internal reference)
var(--aui-item-focus-bg)
|
(internal reference)
var(--aui-item-focus-bg)
|
(internal reference)
var(--aui-item-focus-bg)
|
| --aui-item-selected-text |
(internal reference)
var(--aui-item-focus-text)
|
(internal reference)
var(--aui-item-focus-text)
|
(internal reference)
var(--aui-item-focus-text)
|
| --aui-item-disabled-bg |
transparent
|
transparent
|
transparent
|
| --aui-item-disabled-text |
@ak-color-N100
|
@ak-color-N100
|
var(--ds-text-disabled)
|
| Tooltips | |||
| --aui-tooltip-bg-color |
@ak-color-N800
|
@ak-color-N900
|
var(--ds-background-neutral-bold)
|
| --aui-tooltip-border-color |
@ak-color-N800
|
@ak-color-N900
|
var(--ds-background-neutral-bold)
|
| --aui-tooltip-content-text-color |
@ak-color-N0
|
@ak-color-N40
|
var(--ds-text-inverse)
|
| --aui-tooltip-title-text-color |
@ak-color-N0
|
@ak-color-N10
|
var(--ds-text-inverse)
|
| Help text and onboarding messaging | |||
| --aui-help-color |
@ak-color-P400
|
@ak-color-P300
|
var(--ds-border-discovery)
|
| Badges | |||
| --aui-badge-bg-color |
@ak-color-N40A
|
@ak-color-N70
|
var(--ds-background-accent-gray-subtler)
|
| --aui-badge-text-color |
@ak-color-N800
|
@ak-color-N900
|
var(--ds-text-accent-gray)
|
| --aui-badge-primary-bg-color |
@ak-color-B400
|
@ak-color-B100
|
var(--ds-background-information-bold)
|
| --aui-badge-primary-text-color |
@ak-color-N0
|
@ak-color-N0
|
var(--ds-text-inverse)
|
| --aui-badge-added-bg-color |
@ak-color-G50
|
rgba(0, 102, 68, 0.33)
|
var(--ds-background-accent-green-subtlest)
|
| --aui-badge-added-text-color |
@ak-color-G500
|
@ak-color-G75
|
var(--ds-text-accent-green)
|
| --aui-badge-removed-bg-color |
@ak-color-R50
|
rgba(191, 38, 0, 0.33)
|
var(--ds-background-accent-red-subtlest)
|
| --aui-badge-removed-text-color |
@ak-color-R500
|
@ak-color-R75
|
var(--ds-text-accent-red)
|
| --aui-badge-important-bg-color |
@ak-color-R400
|
@ak-color-R300
|
var(--ds-background-accent-red-bolder)
|
| --aui-badge-important-text-color |
@ak-color-N0
|
@ak-color-N0
|
var(--ds-text-inverse)
|
| --aui-badge-on-blue-text-color |
@ak-color-N0
|
@ak-color-N0
|
var(--ds-text-inverse)
|
| --aui-badge-on-blue-bg-color |
rgba(@ak-color-N0, 0.25)
|
rgba(@ak-color-N0, 0.25)
|
var(--ds-background-accent-blue-subtler)
|
| Avatars | |||
| --aui-avatar-outline |
@ak-color-N0
|
@ak-color-N0
|
var(--ds-border-inverse)
|
| --aui-avatar-text |
@ak-color-N100
|
@ak-color-N100
|
var(--ds-text-inverse)
|
| Lozenges | |||
| --aui-lozenge-bg-color |
@ak-color-N500
|
@ak-color-N500
|
var(--ds-background-accent-gray-bolder)
|
| --aui-lozenge-text-color |
@ak-color-N0
|
@ak-color-N0
|
var(--ds-text-inverse)
|
| --aui-lozenge-subtle-bg-color |
@ak-color-N40
|
@ak-color-N50
|
var(--ds-background-accent-gray-subtler)
|
| --aui-lozenge-subtle-text-color |
@ak-color-N500
|
@ak-color-N600
|
var(--ds-text-inverse)
|
| --aui-lozenge-success-bg-color |
@ak-color-G400
|
@ak-color-G200
|
var(--ds-background-success-bold)
|
| --aui-lozenge-success-text-color |
@ak-color-N0
|
@ak-color-N0
|
var(--ds-text-inverse)
|
| --aui-lozenge-success-subtle-bg-color |
@ak-color-G50
|
rgba(0, 102, 68, 0.33)
|
var(--ds-background-success)
|
| --aui-lozenge-success-subtle-text-color |
@ak-color-G500
|
@ak-color-G75
|
var(--ds-text-success)
|
| --aui-lozenge-current-bg-color |
@ak-color-B400
|
@ak-color-B200
|
var(--ds-background-information-bold)
|
| --aui-lozenge-current-text-color |
@ak-color-N0
|
@ak-color-N0
|
var(--ds-text-inverse)
|
| --aui-lozenge-current-subtle-bg-color |
@ak-color-B50
|
rgba(7, 71, 166, 0.33)
|
var(--ds-background-information)
|
| --aui-lozenge-current-subtle-text-color |
@ak-color-B500
|
@ak-color-B75
|
var(--ds-text-information)
|
| --aui-lozenge-moved-bg-color |
@ak-color-Y400
|
@ak-color-Y300
|
var(--ds-background-warning-bold)
|
| --aui-lozenge-moved-text-color |
@ak-color-N800
|
@ak-color-N0
|
var(--ds-text-inverse)
|
| --aui-lozenge-moved-subtle-bg-color |
@ak-color-Y75
|
rgba(255, 139, 0, 0.22)
|
var(--ds-background-warning)
|
| --aui-lozenge-moved-subtle-text-color |
@ak-color-N800
|
@ak-color-Y75
|
var(--ds-text-warning)
|
| --aui-lozenge-error-bg-color |
@ak-color-R500
|
@ak-color-R300
|
var(--ds-background-danger-bold)
|
| --aui-lozenge-error-text-color |
@ak-color-N0
|
@ak-color-N0
|
var(--ds-text-inverse)
|
| --aui-lozenge-error-subtle-bg-color |
@ak-color-R50
|
rgba(191, 38, 0, 0.33)
|
var(--ds-background-danger)
|
| --aui-lozenge-error-subtle-text-color |
@ak-color-R500
|
@ak-color-R75
|
var(--ds-text-danger)
|
| --aui-lozenge-new-bg-color |
@ak-color-P400
|
@ak-color-P200
|
var(--ds-background-discovery-bold)
|
| --aui-lozenge-new-text-color |
@ak-color-N0
|
@ak-color-N0
|
var(--ds-text-inverse)
|
| --aui-lozenge-new-subtle-bg-color |
@ak-color-P50
|
rgba(64, 50, 148, 0.33)
|
var(--ds-background-discovery)
|
| --aui-lozenge-new-subtle-text-color |
@ak-color-P500
|
@ak-color-P75
|
var(--ds-text-discovery)
|
| Messages | |||
| --aui-message-info-bg-color |
@ak-color-B50
|
@ak-color-B500
|
var(--ds-background-information)
|
| --aui-message-info-icon-color |
@ak-color-B400
|
initial
|
var(--ds-icon-information)
|
| --aui-message-info-text-color |
@ak-color-N600
|
@ak-color-N1K
|
var(--ds-text)
|
| --aui-message-success-bg-color |
@ak-color-G50
|
@ak-color-G500
|
var(--ds-background-success)
|
| --aui-message-success-icon-color |
@ak-color-G400
|
initial
|
var(--ds-icon-success)
|
| --aui-message-success-text-color |
@ak-color-N600
|
@ak-color-N1K
|
var(--ds-text)
|
| --aui-message-warning-bg-color |
@ak-color-Y50
|
@ak-color-Y400
|
var(--ds-background-warning)
|
| --aui-message-warning-icon-color |
@ak-color-Y400
|
initial
|
var(--ds-icon-warning)
|
| --aui-message-warning-text-color |
@ak-color-N600
|
@ak-color-N20
|
var(--ds-text)
|
| --aui-message-error-bg-color |
@ak-color-R50
|
@ak-color-R500
|
var(--ds-background-danger)
|
| --aui-message-error-icon-color |
@ak-color-R400
|
initial
|
var(--ds-icon-danger)
|
| --aui-message-error-text-color |
@ak-color-N600
|
@ak-color-N1K
|
var(--ds-text)
|
| --aui-message-change-bg-color |
@ak-color-P50
|
@ak-color-P400
|
var(--ds-background-discovery)
|
| --aui-message-change-icon-color |
@ak-color-P400
|
initial
|
var(--ds-icon-discovery)
|
| --aui-message-change-text-color |
@ak-color-N600
|
@ak-color-N1K
|
var(--ds-text)
|
| Banners | |||
| --aui-banner-error-bg-color |
@ak-color-R400
|
@ak-color-R400
|
var(--ds-background-danger-bold)
|
| --aui-banner-error-text-color |
@ak-color-N0
|
@ak-color-N2K
|
var(--ds-text-inverse)
|
| Flags | |||
| --aui-flag-bg-color |
(internal reference)
var(--aui-dropdown-bg-color)
|
(internal reference)
var(--aui-dropdown-bg-color)
|
(internal reference)
var(--aui-dropdown-bg-color)
|
| --aui-flag-info-color |
@ak-color-B400
|
@ak-color-B200
|
var(--ds-icon-information)
|
| --aui-flag-success-color |
@ak-color-G300
|
@ak-color-G300
|
var(--ds-icon-success)
|
| --aui-flag-warning-color |
@ak-color-Y300
|
@ak-color-Y300
|
var(--ds-icon-warning)
|
| --aui-flag-error-color |
@ak-color-R300
|
@ak-color-R300
|
var(--ds-icon-danger)
|
| Buttons | |||
| --aui-button-default-bg-color |
@ak-color-N30A
|
@ak-color-N60
|
var(--ds-background-neutral)
|
| --aui-button-default-text-color |
@ak-color-N600
|
@ak-color-N800
|
var(--ds-text)
|
| --aui-button-default-hover-bg-color |
@ak-color-N40A
|
@ak-color-N90
|
var(--ds-background-neutral-hovered)
|
| --aui-button-default-active-bg-color |
@ak-color-B50
|
@ak-color-B75
|
var(--ds-background-selected)
|
| --aui-button-default-active-text-color |
@ak-color-B400
|
@ak-color-N800
|
var(--ds-text-selected)
|
| --aui-button-default-selected-bg-color |
@ak-color-N600
|
@ak-color-N400
|
var(--ds-background-selected-bold-pressed)
|
| --aui-button-default-selected-text-color |
@ak-color-N0
|
@ak-color-N800
|
var(--ds-text-inverse)
|
| --aui-button-default-disabled-bg-color |
@ak-color-N20A
|
@ak-color-N70
|
var(--ds-background-disabled)
|
| --aui-button-default-disabled-text-color |
@ak-color-N70
|
@ak-color-N30
|
var(--ds-text-disabled)
|
| --aui-button-primary-bg-color |
@ak-color-B400
|
@ak-color-B100
|
var(--ds-background-brand-bold)
|
| --aui-button-primary-text-color |
@ak-color-N0
|
@ak-color-N30
|
var(--ds-text-inverse)
|
| --aui-button-primary-hover-bg-color |
@ak-color-B300
|
@ak-color-B75
|
var(--ds-background-brand-bold-hovered)
|
| --aui-button-primary-active-bg-color |
@ak-color-B400
|
@ak-color-B200
|
var(--ds-background-selected-bold-pressed)
|
| --aui-button-primary-active-text-color |
@ak-color-N0
|
@ak-color-N0
|
var(--ds-text-inverse)
|
| --aui-button-primary-disabled-bg-color |
(internal reference)
var(--aui-button-default-disabled-bg-color)
|
(internal reference)
var(--aui-button-default-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)
|
(internal reference)
var(--aui-button-default-disabled-text-color)
|
(internal reference)
var(--aui-button-default-disabled-text-color)
|
| --aui-button-light-bg-color |
@ak-color-N0
|
transparent
|
var(--ds-background-input)
|
| --aui-button-subtle-text-color |
@ak-color-N600
|
@ak-color-N600
|
var(--ds-text)
|
| "Labels" (e.g., page tags, selected values in components, etc.) | |||
| --aui-label-text-color |
inherit
|
@ak-color-N800
|
var(--ds-text)
|
| --aui-label-link-color |
inherit
|
@ak-color-N800
|
var(--ds-link)
|
| --aui-label-bg-color |
@ak-color-N20
|
@ak-color-N70
|
var(--ds-background-neutral)
|
| --aui-label-hover-bg-color |
@ak-color-N20
|
@ak-color-N80
|
var(--ds-background-neutral)
|
| --aui-label-close-hover-bg-color |
@ak-color-R75
|
@ak-color-R400
|
var(--ds-background-accent-red-subtle)
|
| --aui-label-close-hover-text-color |
@ak-color-N800
|
@ak-color-N30
|
var(--ds-icon-accent-gray)
|
| Forms | |||
| --aui-form-placeholder-text-color |
@ak-color-N300
|
@ak-color-N200
|
var(--ds-text-subtlest)
|
| --aui-form-placeholder-disabled-text-color |
@ak-color-N70
|
@ak-color-N70
|
var(--ds-text-disabled)
|
| --aui-form-label-text-color |
@ak-color-N200
|
@ak-color-N400
|
var(--ds-text-subtle)
|
| --aui-form-error-text-color |
@ak-color-R400
|
@ak-color-R500
|
var(--ds-text-danger)
|
| --aui-form-description-text-color |
@ak-color-N200
|
@ak-color-N400
|
var(--ds-text-subtlest)
|
| --aui-form-disabled-field-bg-color |
@ak-color-N20
|
@ak-color-N30
|
var(--ds-text-disabled)
|
| --aui-form-disabled-field-text-color |
@ak-color-N80
|
@ak-color-N80
|
var(--ds-text-subtlest)
|
| --aui-form-disabled-field-label-color |
@ak-color-N80
|
@ak-color-N80
|
var(--ds-text-subtle)
|
| --aui-form-field-border-color |
@ak-color-N40
|
@ak-color-N80
|
var(--ds-border-input)
|
| --aui-form-field-hover-border-color |
@ak-color-N40
|
@ak-color-N80
|
var(--ds-border-focused)
|
| --aui-form-field-default-text-color |
@ak-color-N800
|
@ak-color-N800
|
var(--ds-text)
|
| --aui-form-field-default-bg-color |
@ak-color-N10
|
@ak-color-N40
|
var(--ds-background-input)
|
| --aui-form-field-hover-text-color |
(internal reference)
var(--aui-form-field-default-text-color)
|
(internal reference)
var(--aui-form-field-default-text-color)
|
var(--ds-text)
|
| --aui-form-field-hover-bg-color |
@ak-color-N30
|
@ak-color-N30
|
var(--ds-background-input-hovered)
|
| --aui-form-field-focus-bg-color |
@ak-color-N0
|
@ak-color-N0
|
var(--ds-background-input)
|
| --aui-form-select-bg-color |
@ak-color-N30
|
@ak-color-N70
|
var(--ds-background-input)
|
| --aui-form-select-border-color |
@ak-color-N30
|
@ak-color-N70
|
var(--ds-border-input)
|
| --aui-form-select-hover-bg-color |
@ak-color-N40
|
@ak-color-N40
|
var(--ds-border-input)
|
| --aui-form-checkbox-radio-active-bg-color |
@ak-color-B50
|
@ak-color-B100
|
var(--ds-background-accent-blue-subtler)
|
| --aui-form-optgroup-text-color |
@ak-color-N100
|
@ak-color-N100
|
var(--ds-text-subtlest)
|
| --aui-form-optgroup-bg-color |
@ak-color-N20
|
@ak-color-N20
|
var(--ds-background-neutral)
|
| --aui-form-option-bg-color |
@ak-color-N0
|
@ak-color-N0
|
var(--ds-background-input)
|
| --aui-form-pre-bg-color |
@ak-color-N20
|
@ak-color-N20
|
var(--ds-background-neutral)
|
| More form fields | |||
| --aui-form-field-autofilled-bg-color |
@ak-color-P50
|
@ak-color-P500
|
var(--ds-background-discovery)
|
| --aui-form-field-autofilled-border-color |
@ak-color-P300
|
@ak-color-P100
|
var(--ds-border-discovery)
|
| --aui-form-field-autofilled-text-color |
@ak-color-P500
|
@ak-color-P75
|
var(--ds-text-discovery)
|
| Form glyphs | |||
| --aui-form-glyph-disabled-icon-color |
@ak-color-N70
|
@ak-color-N200
|
var(--ds-icon-disabled)
|
| --aui-form-glyph-disabled-fill-color |
@ak-color-N20A
|
@ak-color-N70
|
var(--ds-background-disabled)
|
| --aui-form-glyph-icon-color |
@ak-color-N0
|
@ak-color-N900
|
var(--ds-icon-inverse)
|
| --aui-form-glyph-fill-color |
@ak-color-B400
|
@ak-color-B400
|
var(--ds-icon-accent-blue)
|
| Form checkboxes and radio buttons | |||
| --aui-form-checkbox-active-bg-color |
@ak-color-B50
|
@ak-color-B50
|
var(--ds-background-accent-blue-subtler)
|
| --aui-form-checkbox-active-border-color |
@ak-color-B50
|
@ak-color-B50
|
var(--ds-border-accent-blue)
|
| --aui-form-checkbox-active-icon-color |
@ak-color-B400
|
@ak-color-B200
|
var(--ds-icon-information)
|
| --aui-form-radio-unchecked-bg-color |
@ak-color-N10
|
@ak-color-N10
|
var(--ds-background-input)
|
| --aui-form-radio-unchecked-border-color |
@ak-color-N40
|
@ak-color-N70
|
var(--ds-border-input)
|
| Toggle | |||
| --aui-toggle-default-bg-color |
@ak-color-N200
|
@ak-color-N90
|
var(--ds-background-neutral-bold)
|
| --aui-toggle-default-bg-hover-color |
@ak-color-N70
|
@ak-color-N100
|
var(--ds-background-neutral-bold-hovered)
|
| --aui-toggle-button-color |
@ak-color-N0
|
@ak-color-N30
|
var(--ds-icon-inverse)
|
| --aui-toggle-on-color |
@ak-color-G400
|
@ak-color-G300
|
var(--ds-background-success-bold)
|
| --aui-toggle-on-hover-color |
@ak-color-G300
|
@ak-color-G200
|
var(--ds-background-success-bold-hovered)
|
| --aui-toggle-disabled-overlay-color |
rgba(@ak-color-N0, 0.5)
|
rgba(@ak-color-N30, 0.5)
|
var(--ds-background-neutral-subtle)
|
| --aui-toggle-tick-color |
@ak-color-N0
|
@ak-color-N30
|
var(--ds-icon-inverse)
|
| --aui-toggle-cross-color |
@ak-color-N0
|
@ak-color-N30
|
var(--ds-icon-inverse)
|
| Form notification | |||
| --aui-form-notification-info-color |
@ak-color-N80
|
@ak-color-N80
|
var(--ds-icon-subtle)
|
| --aui-form-notification-error-color |
(internal reference)
var(--aui-message-error-icon-color)
|
@ak-color-R300
|
(internal reference)
var(--aui-message-error-icon-color)
|
| --aui-form-notification-success-color |
(internal reference)
var(--aui-message-success-icon-color)
|
@ak-color-G300
|
(internal reference)
var(--aui-message-success-icon-color)
|
| Progress bar | |||
| --aui-progressbar-color |
@ak-color-N500
|
@ak-color-N800
|
var(--ds-background-neutral-bold)
|
| --aui-progressbar-track-color |
@ak-color-N40A
|
@ak-color-N400A
|
var(--ds-background-neutral)
|
| Spinner | |||
| --aui-spinner-color |
@ak-color-N500
|
@ak-color-N800
|
var(--ds-icon-subtle)
|
| Navigation | |||
| --aui-nav-pagination-text-color |
@ak-color-N800
|
@ak-color-N800
|
var(--ds-text)
|
| --aui-nav-pagination-active-text-color |
@ak-color-N80
|
@ak-color-N80
|
var(--ds-text-subtlest)
|
| Application header | |||
| --aui-appheader-bg-color |
@ak-color-B500
|
@ak-color-B500
|
var(--ds-surface)
|
| --aui-appheader-text-color |
@ak-color-B50
|
@ak-color-B50
|
var(--ds-text)
|
| --aui-appheader-item-focus-bg-color |
@ak-color-N90A
|
@ak-color-N50A
|
var(--ds-background-neutral-hovered)
|
| --aui-appheader-item-focus-text-color |
@ak-color-B50
|
@ak-color-B50
|
var(--ds-text)
|
| --aui-appheader-item-active-bg-color |
@ak-color-N90A
|
@ak-color-N90A
|
var(--ds-background-neutral-subtle-pressed)
|
| --aui-appheader-item-active-text-color |
@ak-color-B50
|
@ak-color-B50
|
var(--ds-text)
|
| --aui-appheader-quicksearch-bg-color |
@ak-color-N90A
|
@ak-color-N90A
|
var(--ds-border-input)
|
| --aui-appheader-quicksearch-border-color |
transparent
|
transparent
|
var(--ds-border-input)
|
| --aui-appheader-quicksearch-text-color |
@ak-color-B50
|
@ak-color-B50
|
var(--ds-text-subtlest)
|
| --aui-appheader-quicksearch-placeholder-text-color |
@ak-color-N80
|
@ak-color-N400
|
var(--ds-text)
|
| --aui-appheader-quicksearch-focus-bg-color |
(internal reference)
var(--aui-appheader-quicksearch-bg-color)
|
(internal reference)
var(--aui-appheader-quicksearch-bg-color)
|
(internal reference)
var(--aui-appheader-quicksearch-bg-color)
|
| --aui-appheader-quicksearch-focus-text-color |
@ak-color-B50
|
@ak-color-B50
|
var(--ds-text-subtlest)
|
| Sidebar | |||
| --aui-sidebar-icon-color |
@ak-color-N400
|
@ak-color-N400
|
var(--ds-icon)
|
| --aui-sidebar-toggle-icon-color |
@ak-color-N400
|
@ak-color-N400
|
var(--ds-icon)
|
| --aui-sidebar-bg-color |
@ak-color-N20
|
@ak-color-N20
|
var(--ds-surface-sunken)
|
| --aui-sidebar-dropdown-arrow-color |
@ak-color-N400
|
@ak-color-N400
|
var(--ds-icon)
|
| --aui-sidebar-tooltip-bg-color |
@ak-color-N800A
|
@ak-color-N800A
|
var(--ds-icon)
|
| --aui-sidebar-badge-bg-color |
@ak-color-N50
|
rgba(@ak-color-N2K, 0.19)
|
var(--ds-background-accent-gray-subtler)
|
| --aui-sidebar-badge-text-color |
inherit
|
inherit
|
var(--ds-text)
|
| Tabs | |||
| --aui-tabs-tab-border-color |
@ak-color-N30
|
@ak-color-N60
|
var(--ds-border)
|
| --aui-tabs-tab-text-color |
@ak-color-N500
|
@ak-color-N400
|
var(--ds-text-selected)
|
| --aui-tabs-tab-hover-text-color |
@ak-color-B100
|
@ak-color-B100
|
var(--ds-text-selected)
|
| --aui-tabs-tab-active-border-color |
@ak-color-B400
|
@ak-color-B100
|
var(--ds-border-accent-blue)
|
| --aui-tabs-tab-active-text-color |
@ak-color-B400
|
@ak-color-B100
|
var(--ds-text-selected)
|
| Multi-step wizard | |||
| --aui-progress-tracker-current-step-color |
@ak-color-B300
|
@ak-color-B300
|
var(--ds-background-brand-bold)
|
| --aui-progress-tracker-current-step-text-color |
(internal reference)
var(--aui-progress-tracker-visited-step-text-color)
|
(internal reference)
var(--aui-progress-tracker-visited-step-text-color)
|
(internal reference)
var(--aui-progress-tracker-visited-step-text-color)
|
| --aui-progress-tracker-visited-step-text-color |
@ak-color-N800
|
@ak-color-N800
|
var(--ds-text)
|
| --aui-progress-tracker-visited-step-hover-text-color |
@ak-color-B400
|
(internal reference)
var(--aui-link-hover-color)
|
var(--ds-link)
|
| --aui-progress-tracker-visited-step-active-text-color |
@ak-color-B500
|
(internal reference)
var(--aui-link-active-color)
|
var(--ds-link)
|
| --aui-progress-tracker-future-step-color |
@ak-color-N70
|
@ak-color-N70
|
var(--ds-icon-subtle)
|
| --aui-progress-tracker-future-step-text-color |
@ak-color-N300
|
@ak-color-N300
|
var(--ds-text-subtle)
|
| Tables | |||
| --aui-table-row-bg-color |
transparent
|
transparent
|
var(--ds-background-neutral-subtle)
|
| --aui-table-row-text-color |
@ak-color-N800
|
@ak-color-N800
|
var(--ds-text)
|
| --aui-table-header-bg-color |
transparent
|
transparent
|
var(--ds-background-neutral-subtle)
|
| --aui-table-heading-text-color |
@ak-color-N200
|
@ak-color-N400
|
var(--ds-text-subtle)
|
| --aui-table-border-color |
@ak-color-N40
|
@ak-color-N50
|
var(--ds-border)
|
| --aui-table-caption-bg-color |
@ak-color-N20
|
@ak-color-N20
|
var(--ds-background-accent-gray-subtlest)
|
| --aui-table-caption-text-color |
@ak-color-N100
|
@ak-color-N100
|
var(--ds-text-subtle)
|
| --aui-table-list-row-hover-color |
@ak-color-N30A
|
@ak-color-N40
|
var(--ds-background-neutral-subtle-hovered)
|
| --aui-table-list-row-subtle-color |
@ak-color-N60
|
@ak-color-N60
|
var(--ds-background-neutral-subtle-hovered)
|
| --aui-table-sortable-hover-bg-color |
@ak-color-N30A
|
@ak-color-N30A
|
var(--ds-background-neutral-subtle-hovered)
|
| --aui-table-sortable-active-bg-color |
@ak-color-B50
|
@ak-color-B50
|
var(--ds-background-accent-blue-subtler)
|
| --aui-table-sortable-active-border-color |
@ak-color-B500
|
@ak-color-B200
|
var(--ds-border-accent-blue)
|
| --aui-table-sortable-active-text-color |
@ak-color-B500
|
@ak-color-B200
|
var(--ds-text-accent-blue)
|
| --aui-table-sortable-selected-bg-color |
transparent
|
transparent
|
var(--ds-background-neutral-subtle)
|
| --aui-table-sortable-selected-border-color |
@ak-color-N100
|
@ak-color-N400
|
var(--ds-border-accent-gray)
|
| --aui-table-sortable-selected-text-color |
@ak-color-N400
|
@ak-color-N800
|
var(--ds-text)
|
| Dynamic tables | |||
| --aui-restfultable-row-focused-border-color |
@ak-color-N60
|
@ak-color-N60
|
var(--ds-border)
|
| --aui-restfultable-row-create-border-color |
@ak-color-N40
|
@ak-color-N40
|
var(--ds-border-disabled)
|
| --aui-restfultable-row-editable-hover-bg-color |
(internal reference)
var(--aui-form-field-hover-bg-color)
|
(internal reference)
var(--aui-form-field-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)
|
(internal reference)
var(--aui-form-notification-error-color)
|
(internal reference)
var(--aui-form-notification-error-color)
|
| --aui-restfultable-header-row-bg-color |
@ak-color-N0
|
@ak-color-N0
|
var(--ds-surface)
|
| --aui-restfultable-header-row-text-color |
@ak-color-N200
|
@ak-color-N200
|
var(--ds-text-subtlest)
|
| --aui-restfultable-row-moving-bg-color |
@ak-color-N20
|
@ak-color-N20
|
var(--ds-surface-raised)
|
| --aui-restfultable-editable-em-text-color |
@ak-color-N80
|
@ak-color-N80
|
var(--ds-text-subtlest)
|
| --aui-restfultable-row-active-bg-color |
@ak-color-N20
|
@ak-color-N20
|
var(--ds-background-neutral-subtle-pressed)
|
| --aui-restfultable-row-hover-bg-color |
@ak-color-N20
|
@ak-color-N20
|
var(--ds-background-input-hovered)
|
| Dropdowns | |||
| --aui-dropdown-bg-color |
@ak-color-N0
|
@ak-color-N50
|
var(--ds-surface)
|
| --aui-dropdown-border-color |
@ak-color-N40
|
@ak-color-N70
|
var(--ds-border)
|
| Selects | |||
| --aui-select2-placeholder-text-color |
@ak-color-N100
|
@ak-color-N100
|
var(--ds-text-subtlest)
|
| --aui-select2-chosen-bg-color |
@ak-color-N0
|
@ak-color-N30
|
var(--ds-background-neutral)
|
| --aui-select2-chosen-text-color |
@ak-color-N800
|
@ak-color-N800
|
var(--ds-text)
|
| --aui-select2-chosen-hover-bg-color |
@ak-color-N0
|
@ak-color-N80
|
var(--ds-background-neutral-hovered)
|
| --aui-select2-chosen-hover-text-color |
@ak-color-N800
|
@ak-color-N800
|
var(--ds-text)
|
| --aui-select2-active-chosen-bg-color |
@ak-color-N40
|
@ak-color-N80
|
var(--ds-background-neutral)
|
| --aui-select2-active-chosen-text-color |
@ak-color-N800
|
@ak-color-N800
|
var(--ds-text)
|
| --aui-select2-field-default-bg-color |
(internal reference)
var(--aui-form-select-bg-color)
|
(internal reference)
var(--aui-form-select-bg-color)
|
var(--ds-background-input)
|
| --aui-select2-field-border-color |
(internal reference)
var(--aui-form-select-border-color)
|
(internal reference)
var(--aui-form-select-border-color)
|
var(--ds-border-input)
|
| --aui-select2-field-hover-bg-color |
(internal reference)
var(--aui-form-select-hover-bg-color)
|
(internal reference)
var(--aui-form-select-hover-bg-color)
|
var(--ds-border-focused)
|
| --aui-select2-drop-bg-color |
(internal reference)
var(--aui-dropdown-bg-color)
|
(internal reference)
var(--aui-dropdown-bg-color)
|
var(--ds-surface)
|
| Dialogs | |||
| --aui-dialog-bg-color |
@ak-color-N0
|
@ak-color-N40
|
var(--ds-surface-overlay)
|
| --aui-dialog-border-color |
@ak-color-N30
|
@ak-color-N40
|
var(--ds-border)
|
| --aui-dialog-header-bg-color |
(internal reference)
var(--aui-dialog-bg-color)
|
(internal reference)
var(--aui-dialog-bg-color)
|
(internal reference)
var(--aui-dialog-bg-color)
|
| --aui-dialog-header-warning-bg-color |
@ak-color-R400
|
@ak-color-R200
|
var(--ds-background-danger-bold)
|
| --aui-dialog-header-warning-text-color |
@ak-color-N0
|
@ak-color-N0
|
var(--ds-text-inverse)
|
| --aui-dialog-button-hover-border-color |
@ak-color-N80
|
@ak-color-N80
|
var(--ds-border)
|
| --aui-dialog-footer-hint-text-color |
@ak-color-N400
|
@ak-color-N400
|
var(--ds-text-subtlest)
|
| --aui-inline-dialog-bg-color |
(internal reference)
var(--aui-dropdown-bg-color)
|
(internal reference)
var(--aui-dropdown-bg-color)
|
(internal reference)
var(--aui-dropdown-bg-color)
|
| --aui-inline-dialog-border-color |
(internal reference)
var(--aui-dropdown-border-color)
|
(internal reference)
var(--aui-dropdown-border-color)
|
(internal reference)
var(--aui-dropdown-border-color)
|
| Date pickers | |||
| --aui-datepicker-panel-bg-color |
@ak-color-N0
|
@ak-color-N50
|
var(--ds-background-input)
|
| --aui-datepicker-panel-divider-color |
@ak-color-N40
|
@ak-color-N50
|
var(--ds-border)
|
| --aui-datepicker-heading-bg-color |
@ak-color-N20
|
@ak-color-N50
|
var(--ds-background-information)
|
| --aui-datepicker-heading-text-color |
@ak-color-N600
|
@ak-color-N600
|
var(--ds-text)
|
| --aui-datepicker-heading-weekdays-text-color |
@ak-color-N300
|
@ak-color-N300
|
var(--ds-text-subtle)
|
| --aui-datepicker-option-bg-color |
transparent
|
transparent
|
var(--ds-background-neutral-subtle)
|
| --aui-datepicker-option-text-color |
@ak-color-B400
|
@ak-color-N600
|
var(--ds-text-selected)
|
| --aui-datepicker-option-focus-bg-color |
@ak-color-N20
|
@ak-color-N70
|
var(--ds-background-neutral-subtle-hovered)
|
| --aui-datepicker-option-focus-text-color |
@ak-color-B400
|
@ak-color-N600
|
var(--ds-text-accent-blue)
|
| --aui-datepicker-option-selected-bg-color |
@ak-color-B400
|
@ak-color-N0
|
var(--ds-background-selected-bold)
|
| --aui-datepicker-option-selected-text-color |
@ak-color-N0
|
@ak-color-B200
|
var(--ds-text-inverse)
|
| --aui-datepicker-option-unselectable-bg-color |
@ak-color-N20
|
transparent
|
var(--ds-background-disabled)
|
| --aui-datepicker-option-unselectable-text-color |
@ak-color-N100
|
@ak-color-N100
|
var(--ds-text-disabled)
|
| --aui-datepicker-disabled-text-color |
@ak-color-N100
|
@ak-color-N100
|
var(--ds-text-disabled)
|
| --aui-datepicker-hint-text-color |
@ak-color-N400
|
@ak-color-N400
|
var(--ds-text-subtlest)
|