@atlassian/aui 9.6.1 → 9.7.0

package/src/less/imports/aui-theme/core/colors.less

@@ -166,7 +166,6 @@
         --aui-form-select-bg-color: @ak-color-N30;
         --aui-form-select-border-color: @ak-color-N30;
         --aui-form-select-hover-bg-color: @ak-color-N40;
-        --aui-form-checkbox-radio-hover-bg-color: @ak-color-B300;
         --aui-form-checkbox-radio-active-bg-color: @ak-color-B50;
         --aui-form-optgroup-text-color: @ak-color-N100;
         --aui-form-optgroup-bg-color: @ak-color-N20;
@@ -187,8 +186,6 @@
         --aui-form-checkbox-active-icon-color: @ak-color-B400;
         --aui-form-radio-unchecked-bg-color: @ak-color-N10;
         --aui-form-radio-unchecked-border-color: @ak-color-N40;
-        --aui-form-radio-unchecked-hover-bg-color: @ak-color-N30;
-        --aui-form-radio-unchecked-hover-border-color: @ak-color-N40;
 
         --aui-toggle-default-bg-color: @ak-color-N200;
         --aui-toggle-default-bg-hover-color: @ak-color-N70;
@@ -203,9 +200,11 @@
         --aui-form-notification-error-color: var(--aui-message-error-icon-color);
         --aui-form-notification-success-color: var(--aui-message-success-icon-color);
 
-        // Progress bars and spinners
+        // Progress bar
         --aui-progressbar-color: @ak-color-N500;
         --aui-progressbar-track-color: @ak-color-N40A;
+
+        // Spinner
         --aui-spinner-color: @ak-color-N500;
 
         // Navigation
@@ -243,8 +242,6 @@
         --aui-tabs-tab-active-text-color: @ak-color-B400;
 
         // Multi-step wizard
-        --aui-progress-tracker-step-border-color: @ak-color-N20;
-        --aui-progress-tracker-container-color: @ak-color-N20;
         --aui-progress-tracker-current-step-color: @ak-color-B300;
         --aui-progress-tracker-current-step-text-color: var(--aui-progress-tracker-visited-step-text-color);
         --aui-progress-tracker-visited-step-text-color: @ak-color-N800;
@@ -488,7 +485,6 @@
         --aui-form-select-bg-color: @ak-color-N70;
         --aui-form-select-border-color: @ak-color-N70;
         --aui-form-select-hover-bg-color: @ak-color-N40;
-        --aui-form-checkbox-radio-hover-bg-color: @ak-color-B300;
         --aui-form-checkbox-radio-active-bg-color: @ak-color-B100;
         --aui-form-optgroup-text-color: @ak-color-N100;
         --aui-form-optgroup-bg-color: @ak-color-N20;
@@ -509,8 +505,6 @@
         --aui-form-checkbox-active-icon-color: @ak-color-B200;
         --aui-form-radio-unchecked-bg-color: @ak-color-N10;
         --aui-form-radio-unchecked-border-color: @ak-color-N70;
-        --aui-form-radio-unchecked-hover-bg-color: @ak-color-N30;
-        --aui-form-radio-unchecked-hover-border-color: @ak-color-N70;
 
         --aui-toggle-default-bg-color: @ak-color-N90;
         --aui-toggle-default-bg-hover-color: @ak-color-N100;
@@ -525,9 +519,11 @@
         --aui-form-notification-error-color: @ak-color-R300;
         --aui-form-notification-success-color: @ak-color-G300;
 
-        // Progress bars and spinners
+        // Progress bar
         --aui-progressbar-color: @ak-color-N800;
         --aui-progressbar-track-color: @ak-color-N400A;
+
+        // Spinner
         --aui-spinner-color: @ak-color-N800;
 
         // Navigation
@@ -565,8 +561,6 @@
         --aui-tabs-tab-active-text-color: @ak-color-B100;
 
         // Multi-step wizard
-        --aui-progress-tracker-step-border-color: @ak-color-N20;
-        --aui-progress-tracker-container-color: @ak-color-N20;
         --aui-progress-tracker-current-step-color: @ak-color-B300;
         --aui-progress-tracker-current-step-text-color: var(--aui-progress-tracker-visited-step-text-color);
         --aui-progress-tracker-visited-step-text-color: @ak-color-N800;
@@ -650,4 +644,335 @@
         --aui-datepicker-disabled-text-color: @ak-color-N100;
         --aui-datepicker-hint-text-color: @ak-color-N400;
     }
+
+    .design-tokens() {
+        @import (reference) '../adg/adg-colors';
+        @import (reference) '../adg/adg-neutral-light';
+
+        // Actual theme
+
+        --aui-shadow1: var(--ds-border);
+        --aui-shadow2: var(--ds-background-neutral-pressed);
+        --aui-blanket: var(--ds-blanket);
+
+        // Page
+        --aui-body-text: var(--ds-text);
+        --aui-lesser-body-text: var(--ds-text-subtlest);
+        --aui-lesser-header-text: var(--ds-text-subtlest);
+        --aui-body-background: var(--ds-surface);
+        --aui-page-background: var(--ds-surface);
+        --aui-page-border: var(--ds-border);
+        --aui-border: var(--ds-border);
+        --aui-border-strong: var(--ds-border-accent-gray);
+        --aui-focus: var(--ds-border-focused);
+        --aui-link-color: var(--ds-link);
+        --aui-link-decoration: none;
+        --aui-link-hover-color: var(--ds-link);
+        --aui-link-active-color: var(--ds-link-pressed);
+        --aui-link-hover-decoration: underline;
+        --aui-link-visited-color: var(--ds-link-pressed);
+
+        // "Item" pattern - used for navigation, buttons, dropdown options, pagination, and similar.
+        --aui-itemheading-text: var(--ds-text-subtle);
+        --aui-item-bg: transparent;
+        --aui-item-text: var(--ds-text-subtlest);
+        --aui-item-focus-bg: var(--ds-background-accent-gray-subtler);
+        --aui-item-focus-text: var(--ds-text-subtle);
+        --aui-item-active-text: var(--ds-text-subtle);
+        --aui-item-active-bg: var(--ds-background-selected);
+        --aui-item-selected-bg: var(--aui-item-focus-bg);
+        --aui-item-selected-text: var(--aui-item-focus-text);
+        --aui-item-disabled-bg: transparent;
+        --aui-item-disabled-text: var(--ds-text-disabled);
+
+        // Tooltips
+        --aui-tooltip-bg-color: var(--ds-background-neutral-bold);
+        --aui-tooltip-border-color: var(--ds-background-neutral-bold);
+        --aui-tooltip-content-text-color: var(--ds-text-inverse);
+        --aui-tooltip-title-text-color: var(--ds-text-inverse);
+
+        // Help text and onboarding messaging
+        --aui-help-color: var(--ds-border-discovery);
+
+        // Badges
+        --aui-badge-bg-color: var(--ds-background-accent-gray-subtler);
+        --aui-badge-text-color: var(--ds-text-accent-gray);
+        --aui-badge-primary-bg-color: var(--ds-background-information-bold);
+        --aui-badge-primary-text-color: var(--ds-text-inverse);
+        --aui-badge-added-bg-color: var(--ds-background-accent-green-subtlest);
+        --aui-badge-addded-text-color: var(--ds-text-accent-green);
+        --aui-badge-removed-bg-color: var(--ds-background-accent-red-subtlest);
+        --aui-badge-removed-text-color: var(--ds-text-accent-red);
+        --aui-badge-important-bg-color: var(--ds-background-accent-red-bolder);
+        --aui-badge-important-text-color: var(--ds-text-inverse);
+        --aui-badge-on-blue-text-color: var(--ds-text-inverse);
+        --aui-badge-on-blue-bg-color: var(--ds-background-accent-blue-subtler);
+
+        // Avatars
+        --aui-avatar-outline: var(--ds-border-inverse);
+        --aui-avatar-text: var(--ds-text-inverse);
+
+        // Lozenges
+        --aui-lozenge-bg-color: var(--ds-background-accent-gray-bolder);
+        --aui-lozenge-text-color: var(--ds-text-inverse);
+        --aui-lozenge-subtle-bg-color: var(--ds-background-accent-gray-subtler);
+        --aui-lozenge-subtle-text-color: var(--ds-text-inverse);
+        --aui-lozenge-success-bg-color: var(--ds-background-success-bold);
+        --aui-lozenge-success-text-color: var(--ds-text-inverse);
+        --aui-lozenge-success-subtle-bg-color: var(--ds-background-success);
+        --aui-lozenge-success-subtle-text-color: var(--ds-text-success);
+        --aui-lozenge-current-bg-color: var(--ds-background-information-bold);
+        --aui-lozenge-current-text-color: var(--ds-text-inverse);
+        --aui-lozenge-current-subtle-bg-color: var(--ds-background-information);
+        --aui-lozenge-current-subtle-text-color: var(--ds-text-information);
+        --aui-lozenge-moved-bg-color: var(--ds-background-warning-bold);
+        --aui-lozenge-moved-text-color: var(--ds-text-inverse);
+        --aui-lozenge-moved-subtle-bg-color: var(--ds-background-warning);
+        --aui-lozenge-moved-subtle-text-color: var(--ds-text-warning);
+        --aui-lozenge-error-bg-color: var(--ds-background-danger-bold);
+        --aui-lozenge-error-text-color: var(--ds-text-inverse);
+        --aui-lozenge-error-subtle-bg-color: var(--ds-background-danger);
+        --aui-lozenge-error-subtle-text-color: var(--ds-text-danger);
+        --aui-lozenge-new-bg-color: var(--ds-background-discovery-bold);
+        --aui-lozenge-new-text-color: var(--ds-text-inverse);
+        --aui-lozenge-new-subtle-bg-color: var(--ds-background-discovery);
+        --aui-lozenge-new-subtle-text-color: var(--ds-text-discovery);
+
+        // Messages
+        --aui-message-info-bg-color: var(--ds-background-information);
+        --aui-message-info-icon-color: var(--ds-icon-information);
+        --aui-message-info-text-color: var(--ds-text);
+        --aui-message-success-bg-color: var(--ds-background-success);
+        --aui-message-success-icon-color: var(--ds-icon-success);
+        --aui-message-success-text-color: var(--ds-text);
+        --aui-message-warning-bg-color: var(--ds-background-warning);
+        --aui-message-warning-icon-color: var(--ds-icon-warning);
+        --aui-message-warning-text-color: var(--ds-text);
+        --aui-message-error-bg-color: var(--ds-background-danger);
+        --aui-message-error-icon-color: var(--ds-icon-danger);
+        --aui-message-error-text-color: var(--ds-text);
+        --aui-message-change-bg-color: var(--ds-background-discovery);
+        --aui-message-change-icon-color: var(--ds-icon-discovery);
+        --aui-message-change-text-color: var(--ds-text);
+
+        // Banners
+        --aui-banner-error-bg-color: var(--ds-background-danger-bold);
+        --aui-banner-error-text-color: var(--ds-text-inverse);
+
+        // Flags
+        --aui-flag-bg-color: var(--aui-dropdown-bg-color);
+        --aui-flag-info-color: var(--ds-icon-information);
+        --aui-flag-success-color: var(--ds-icon-success);
+        --aui-flag-warning-color: var(--ds-icon-warning);
+        --aui-flag-error-color: var(--ds-icon-danger);
+
+        // Buttons
+        --aui-button-default-bg-color: var(--ds-background-neutral);
+        --aui-button-default-text-color: var(--ds-text);
+        --aui-button-default-hover-bg-color: var(--ds-background-neutral-hovered);
+        --aui-button-default-active-bg-color: var(--ds-background-selected);
+        --aui-button-default-active-text-color: var(--ds-text-selected);
+        --aui-button-default-selected-bg-color: var(--ds-background-selected-bold-pressed);
+        --aui-button-default-selected-text-color: var(--ds-text-inverse);
+        --aui-button-default-disabled-bg-color: var(--ds-background-disabled);
+        --aui-button-default-disabled-text-color: var(--ds-text-disabled);
+        --aui-button-primary-bg-color: var(--ds-background-brand-bold);
+        --aui-button-primary-text-color: var(--ds-text-inverse);
+        --aui-button-primary-hover-bg-color: var(--ds-background-brand-bold-hovered);
+        --aui-button-primary-active-bg-color: var(--ds-background-selected-bold-pressed);
+        --aui-button-primary-active-text-color: var(--ds-text-inverse);
+        --aui-button-primary-disabled-bg-color: var(--aui-button-default-disabled-bg-color);
+        --aui-button-primary-disabled-text-color: var(--aui-button-default-disabled-text-color);
+        --aui-button-light-bg-color: var(--ds-background-input);
+        --aui-button-subtle-text-color: var(--ds-text);
+
+        // "Labels" (e.g., page tags, selected values in components, etc.)
+        --aui-label-text-color: var(--ds-text);
+        --aui-label-link-color: var(--ds-link);
+        --aui-label-bg-color: var(--ds-background-neutral);
+        --aui-label-hover-bg-color: var(--ds-background-neutral);
+        --aui-label-close-hover-bg-color: var(--ds-background-accent-red-subtle);
+        --aui-label-close-hover-text-color: var(--ds-icon-accent-gray);
+
+        // Forms
+        --aui-form-placeholder-text-color: var(--ds-text-subtlest);
+        --aui-form-placeholder-disabled-text-color: var(--ds-text-disabled);
+        --aui-form-label-text-color: var(--ds-text-subtle);
+        --aui-form-error-text-color: var(--ds-text-danger);
+        --aui-form-description-text-color: var(--ds-text-subtlest);
+        --aui-form-disabled-field-bg-color: var(--ds-text-disabled);
+        --aui-form-disabled-field-text-color: var(--ds-text-subtlest);
+        --aui-form-disabled-field-label-color: var(--ds-text-subtle);
+        --aui-form-field-border-color: var(--ds-border-input);
+        --aui-form-field-hover-border-color: var(--ds-border-focused);
+        --aui-form-field-default-text-color: var(--ds-text);
+        --aui-form-field-default-bg-color: var(--ds-background-input);
+        --aui-form-field-hover-text-color: var(--ds-text);
+        --aui-form-field-hover-bg-color: var(--ds-background-input-hovered);
+        --aui-form-field-focus-bg-color: var(--ds-background-input);
+        --aui-form-select-bg-color: var(--ds-background-input);
+        --aui-form-select-border-color: var(--ds-border-input);
+        --aui-form-select-hover-bg-color: var(--ds-border-input);
+        --aui-form-checkbox-radio-active-bg-color: var(--ds-background-accent-blue-subtler);
+        --aui-form-optgroup-text-color: var(--ds-text-subtlest);
+        --aui-form-optgroup-bg-color: var(--ds-background-neutral);
+        --aui-form-option-bg-color: var(--ds-background-input);
+        --aui-form-pre-bg-color: var(--ds-background-neutral);
+
+        --aui-form-field-autofilled-bg-color: var(--ds-background-discovery);
+        --aui-form-field-autofilled-border-color: var(--ds-border-discovery);
+        --aui-form-field-autofilled-text-color: var(--ds-text-discovery);
+
+        --aui-form-glyph-disabled-icon-color: var(--ds-icon-disabled);
+        --aui-form-glyph-disabled-fill-color: var(--ds-background-disabled);
+        --aui-form-glyph-icon-color: var(--ds-icon-inverse);
+        --aui-form-glyph-fill-color: var(--ds-icon-accent-blue);
+
+        --aui-form-checkbox-active-bg-color: var(--ds-background-accent-blue-subtler);
+        --aui-form-checkbox-active-border-color: var(--ds-border-accent-blue);
+        --aui-form-checkbox-active-icon-color: var(--ds-icon-information);
+
+        --aui-form-radio-unchecked-bg-color: var(--ds-background-input);
+        --aui-form-radio-unchecked-border-color: var(--ds-border-input);
+
+        // Toggle
+        --aui-toggle-default-bg-color: var(--ds-background-neutral-bold);
+        --aui-toggle-default-bg-hover-color: var(--ds-background-neutral-bold-hovered);
+        --aui-toggle-button-color: var(--ds-icon-inverse);
+        --aui-toggle-on-color: var(--ds-background-success-bold);
+        --aui-toggle-on-hover-color: var(--ds-background-success-bold-hovered);
+        --aui-toggle-disabled-overlay-color: var(--ds-background-neutral-subtle);
+        --aui-toggle-tick-color: var(--ds-icon-inverse);
+        --aui-toggle-cross-color: var(--ds-icon-inverse);
+
+        // Form notification
+        --aui-form-notification-info-color: var(--ds-icon-subtle);
+        --aui-form-notification-error-color: var(--aui-message-error-icon-color);
+        --aui-form-notification-success-color: var(--aui-message-success-icon-color);
+
+        // Progress bars
+        --aui-progressbar-color: var(--ds-background-neutral-bold);
+        --aui-progressbar-track-color: var(--ds-background-neutral);
+
+        // Spinner
+        --aui-spinner-color: var(--ds-icon-subtle);
+
+        // Navigation
+        --aui-nav-pagination-text-color: var(--ds-text);
+        --aui-nav-pagination-active-text-color: var(--ds-text-subtlest);
+
+        // Application header
+        --aui-appheader-bg-color: var(--ds-surface);
+        --aui-appheader-text-color: var(--ds-text);
+        --aui-appheader-item-focus-bg-color: var(--ds-background-neutral-hovered);
+        --aui-appheader-item-focus-text-color: var(--ds-text);
+        --aui-appheader-item-active-bg-color: var(--ds-background-neutral-subtle-pressed);
+        --aui-appheader-item-active-text-color: var(--ds-text);
+        --aui-appheader-quicksearch-bg-color: var(--ds-border-input);
+        --aui-appheader-quicksearch-border-color: var(--ds-border-input);
+        --aui-appheader-quicksearch-text-color: var(--ds-text-subtlest);
+        --aui-appheader-quicksearch-placeholder-text-color: var(--ds-text);
+        --aui-appheader-quicksearch-focus-bg-color: var(--aui-appheader-quicksearch-bg-color);
+        --aui-appheader-quicksearch-focus-text-color: var(--ds-text-subtlest);
+
+        --aui-sidebar-icon-color: var(--ds-icon);
+        --aui-sidebar-toggle-icon-color: var(--ds-icon);
+        --aui-sidebar-bg-color: var(--ds-surface-sunken);
+        --aui-sidebar-dropdown-arrow-color: var(--ds-icon);
+        --aui-sidebar-tooltip-bg-color: var(--ds-icon);
+        --aui-sidebar-badge-bg-color: var(--ds-background-accent-gray-subtler);
+        --aui-sidebar-badge-text-color: var(--ds-text);
+
+        // Tabs
+        --aui-tabs-tab-border-color: var(--ds-border);
+        --aui-tabs-tab-text-color: var(--ds-text-selected);
+        --aui-tabs-tab-hover-text-color: var(--ds-text-selected);
+        --aui-tabs-tab-active-border-color: var(--ds-border-accent-blue);
+        --aui-tabs-tab-active-text-color: var(--ds-text-selected);
+
+        // Multi-step wizard
+        --aui-progress-tracker-current-step-color: var(--ds-background-brand-bold);
+        --aui-progress-tracker-current-step-text-color: var(--aui-progress-tracker-visited-step-text-color);
+        --aui-progress-tracker-visited-step-text-color: var(--ds-text);
+        --aui-progress-tracker-visited-step-hover-text-color: var(--ds-link);
+        --aui-progress-tracker-visited-step-active-text-color: var(--ds-link);
+        --aui-progress-tracker-future-step-color: var(--ds-icon-subtle);
+        --aui-progress-tracker-future-step-text-color: var(--ds-text-subtle);
+
+        // Tables
+        --aui-table-row-bg-color: var(--ds-background-neutral-subtle);
+        --aui-table-row-text-color: var(--ds-text);
+        --aui-table-header-bg-color: var(--ds-background-neutral-subtle);
+        --aui-table-heading-text-color: var(--ds-text-subtle);
+        --aui-table-border-color: var(--ds-border);
+        --aui-table-caption-bg-color: var(--ds-background-accent-gray-subtlest);
+        --aui-table-caption-text-color: var(--ds-text-subtle);
+        --aui-table-list-row-hover-color: var(--ds-background-neutral-subtle-hovered);
+        --aui-table-list-row-subtle-color: var(--ds-background-neutral-subtle-hovered);
+        --aui-table-sortable-hover-bg-color: var(--ds-background-neutral-subtle-hovered);
+        --aui-table-sortable-active-bg-color: var(--ds-background-accent-blue-subtler);
+        --aui-table-sortable-active-border-color: var(--ds-border-accent-blue);
+        --aui-table-sortable-active-text-color: var(--ds-text-accent-blue);
+        --aui-table-sortable-selected-bg-color: var(--ds-background-neutral-subtle);
+        --aui-table-sortable-selected-border-color: var(--ds-border-accent-gray);
+        --aui-table-sortable-selected-text-color: var(--ds-text);
+
+        // Dynamic tables
+        --aui-restfultable-row-focused-border-color: var(--ds-border);
+        --aui-restfultable-row-create-border-color: var(--ds-border-disabled);
+        --aui-restfultable-row-editable-hover-bg-color: var(--aui-form-field-hover-bg-color);
+        --aui-restfultable-error-text-color: var(--aui-form-notification-error-color);
+        --aui-restfultable-header-row-bg-color: var(--ds-surface);
+        --aui-restfultable-header-row-text-color: var(--ds-text-subtlest);
+        --aui-restfultable-row-moving-bg-color: var(--ds-surface-raised);
+        --aui-restfultable-editable-em-text-color: var(--ds-text-subtlest);
+        --aui-restfultable-row-active-bg-color: var(--ds-background-neutral-subtle-pressed);
+        --aui-restfultable-row-hover-bg-color: var(--ds-background-input-hovered);
+
+        // Dropdowns
+        --aui-dropdown-bg-color: var(--ds-surface);
+        --aui-dropdown-border-color: var(--ds-border);
+
+        // Selects
+        --aui-select2-placeholder-text-color: var(--ds-text-subtlest);
+        --aui-select2-chosen-bg-color: var(--ds-background-neutral);
+        --aui-select2-chosen-text-color: var(--ds-text);
+        --aui-select2-chosen-hover-bg-color: var(--ds-background-neutral-hovered);
+        --aui-select2-chosen-hover-text-color: var(--ds-text);
+        --aui-select2-active-chosen-bg-color: var(--ds-background-neutral);
+        --aui-select2-active-chosen-text-color: var(--ds-text);
+        --aui-select2-field-default-bg-color: var(--ds-background-input);
+        --aui-select2-field-border-color: var(--ds-border-input);
+        --aui-select2-field-hover-bg-color: var(--ds-border-focused);
+        --aui-select2-drop-bg-color: var(--ds-surface);
+
+        // Dialogs
+        --aui-dialog-bg-color: var(--ds-surface-overlay);
+        --aui-dialog-border-color: var(--ds-border);
+        --aui-dialog-header-bg-color: var(--aui-dialog-bg-color);
+        --aui-dialog-header-warning-bg-color: var(--ds-background-danger-bold);
+        --aui-dialog-header-warning-text-color: var(--ds-text-inverse);
+        --aui-dialog-button-hover-border-color: var(--ds-border);
+        --aui-dialog-footer-hint-text-color: var(--ds-text-subtlest);
+        --aui-inline-dialog-bg-color: var(--aui-dropdown-bg-color); // shared this way because both inline dialogs and dropdowns need to layer well on top of modals
+        --aui-inline-dialog-border-color: var(--aui-dropdown-border-color);
+
+        // Date pickers
+        --aui-datepicker-panel-bg-color: var(--ds-background-input);
+        --aui-datepicker-panel-divider-color: var(--ds-border);
+        --aui-datepicker-heading-bg-color: var(--ds-background-information);
+        --aui-datepicker-heading-text-color: var(--ds-text);
+        --aui-datepicker-heading-weekdays-text-color: var(--ds-text-subtle);
+        --aui-datepicker-option-bg-color: var(--ds-background-neutral-subtle);
+        --aui-datepicker-option-text-color: var(--ds-text-selected);
+        --aui-datepicker-option-focus-bg-color: var(--ds-background-neutral-subtle-hovered);
+        --aui-datepicker-option-focus-text-color: var(--ds-text-accent-blue);
+        --aui-datepicker-option-selected-bg-color: var(--ds-background-selected-bold);
+        --aui-datepicker-option-selected-text-color: var(--ds-text-inverse);
+        --aui-datepicker-option-unselectable-bg-color: var(--ds-background-disabled);
+        --aui-datepicker-option-unselectable-text-color: var(--ds-text-disabled);
+        --aui-datepicker-disabled-text-color: var(--ds-text-disabled);
+        --aui-datepicker-hint-text-color: var(--ds-text-subtlest);
+    }
+
 }

package/src/less/imports/aui-theme/theme.less

@@ -2,14 +2,29 @@
 @import (reference) 'component-variables';
 
 #aui-themes {
+    // The mixins are intended to apply certain styles only when the light or
+    // dark color mode is on.  They support both the classic approach to the
+    // themes and the new recommended design-tokens one.  `data-color-mode`
+    // corresponds to the value set by `setGlobalTheme` in
+    // atlassian-frontend/packages/design-system/tokens
     .when-light(@rules) {
-        @rules();
+        & {
+            @rules();
+        }
+
+        html[data-color-mode="light"] body.aui-theme-design-tokens & {
+            @rules();
+        }
     }
 
     .when-dark(@rules) {
         body.aui-theme-dark & {
             @rules();
         }
+
+        html[data-color-mode="dark"] body.aui-theme-design-tokens & {
+            @rules();
+        }
     }
 
     .switch-light-dark(@lightRules; @darkRules) {

package/src/less/messages.less

@@ -100,10 +100,9 @@ aui-message, .aui-message {
 // Better interop of links and focus styles
 // for non-flag messages
 :not(.aui-flag) > .aui-message {
-    // AUI-5192: currentColor is quoted to work around Edge 18 bug.
-    --aui-link-color: 'currentColor';
-    --aui-link-hover-color: 'currentColor';
-    --aui-link-active-color: 'currentColor';
+    --aui-link-color: currentcolor;
+    --aui-link-hover-color: currentcolor;
+    --aui-link-active-color: currentcolor;
     --aui-link-decoration: underline;
     --aui-link-hover-decoration: double underline;
     --aui-focus: currentcolor;

package/src/less/themes/design-tokens.aui-theme.less

@@ -0,0 +1,5 @@
+@import (reference) '../imports/global';
+
+body.aui-theme-design-tokens {
+    #aui-themes.design-tokens();
+};

package/src/less/themes/themes.less

@@ -0,0 +1,2 @@
+@import "dark.aui-theme";
+@import "design-tokens.aui-theme";