@atlassian/aui 9.7.2 → 9.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/dist/aui/aui-prototyping-browserfocus.css +257 -516
  2. package/dist/aui/aui-prototyping-darkmode.css +5 -267
  3. package/dist/aui/aui-prototyping-design-tokens-api.js +1 -1
  4. package/dist/aui/aui-prototyping.css +9 -9
  5. package/dist/aui/aui-prototyping.css.map +1 -1
  6. package/dist/aui/aui-prototyping.js +6 -6
  7. package/dist/aui/aui-prototyping.js.map +1 -1
  8. package/dist/aui/aui-prototyping.nodeps.css +9 -9
  9. package/dist/aui/aui-prototyping.nodeps.css.map +1 -1
  10. package/dist/aui/aui-prototyping.nodeps.js +2 -2
  11. package/dist/aui/aui-prototyping.nodeps.js.map +1 -1
  12. package/entry/styles/aui.page.reset.js +0 -1
  13. package/package.json +1 -1
  14. package/src/js/aui/avatar-group.js +99 -86
  15. package/src/js/aui/banner.js +41 -33
  16. package/src/js/aui/dialog2.js +2 -2
  17. package/src/js/aui/flag.js +14 -15
  18. package/src/less/aui-appheader.less +1 -1
  19. package/src/less/aui-avatars.less +34 -34
  20. package/src/less/aui-banner.less +24 -16
  21. package/src/less/aui-dark-mode.less +2 -3
  22. package/src/less/aui-reset.less +1 -6
  23. package/src/less/aui-sidebar-navigation.less +10 -4
  24. package/src/less/aui-sidebar-skeleton.less +2 -1
  25. package/src/less/flag.less +28 -19
  26. package/src/less/imports/aui-theme/components/flag.less +3 -1
  27. package/src/less/imports/aui-theme/components/navigation.less +0 -1
  28. package/src/less/imports/aui-theme/components/sidebar.less +0 -1
  29. package/src/less/imports/aui-theme/core/colors.less +251 -237
  30. package/src/less/imports/aui-theme/core/spaces.less +14 -0
  31. package/src/less/imports/aui-theme/core-variables.less +1 -0
  32. package/src/less/imports/aui-theme/theme.less +14 -0
  33. package/src/less/imports/mixins/shadows.less +9 -0
  34. package/entry/styles/aui.page.design-tokens-mode.js +0 -1
  35. package/src/less/themes/themes.less +0 -2
package/src/less/imports/aui-theme/core/colors.less CHANGED
@@ -4,6 +4,7 @@
4
4
  // between themes. When modifying, make sure the docs build works.
5
5
  #aui-themes {
6
6
  .light() {
7
+ color-scheme: light;
7
8
  @import (reference) '../adg/adg-colors';
8
9
  @import (reference) '../adg/adg-neutral-light';
9
10
 
@@ -115,6 +116,10 @@
115
116
  // Banners
116
117
  --aui-banner-error-bg-color: @ak-color-R400;
117
118
  --aui-banner-error-text-color: @ak-color-N0;
119
+ --aui-banner-warning-bg-color: @ak-color-Y300;
120
+ --aui-banner-warning-text-color: @ak-color-N700;
121
+ --aui-banner-announcement-bg-color: @ak-color-N500;
122
+ --aui-banner-announcement-text-color: @ak-color-N0;
118
123
 
119
124
  // Flags
120
125
  --aui-flag-bg-color: var(--aui-dropdown-bg-color); // see also: inline dialogs
@@ -336,6 +341,7 @@
336
341
  }
337
342
 
338
343
  .dark() {
344
+ color-scheme: dark;
339
345
  @import (reference) '../adg/adg-colors';
340
346
  @import (reference) '../adg/adg-neutral-dark';
341
347
 
@@ -447,6 +453,10 @@
447
453
  // Banners
448
454
  --aui-banner-error-bg-color: @ak-color-R400;
449
455
  --aui-banner-error-text-color: @ak-color-N2K;
456
+ --aui-banner-warning-bg-color: @ak-color-Y300;
457
+ --aui-banner-warning-text-color: @ak-color-N30;
458
+ --aui-banner-announcement-bg-color: @ak-color-N70;
459
+ --aui-banner-announcement-text-color: @ak-color-N2K;
450
460
 
451
461
  // Flags
452
462
  --aui-flag-bg-color: var(--aui-dropdown-bg-color); // see also: inline dialogs
@@ -672,331 +682,335 @@
672
682
  @import (reference) '../adg/adg-neutral-light';
673
683
 
674
684
  // Shadows and backgrounds
675
- --aui-shadow1: var(--ds-border);
676
- --aui-shadow2: var(--ds-background-neutral-pressed);
677
- --aui-blanket: var(--ds-blanket);
685
+ --aui-shadow1: transparent;
686
+ --aui-shadow2: transparent;
687
+ --aui-blanket: var(--ds-blanket, rgba(@ak-color-N800, 0.45));
678
688
 
679
689
  // Page
680
- --aui-body-text: var(--ds-text);
681
- --aui-lesser-body-text: var(--ds-text-subtlest);
682
- --aui-lesser-header-text: var(--ds-text-subtlest);
683
- --aui-body-background: var(--ds-surface);
684
- --aui-page-background: var(--ds-surface);
685
- --aui-page-border: var(--ds-border);
686
- --aui-border: var(--ds-border);
687
- --aui-border-strong: var(--ds-border-accent-gray);
688
- --aui-focus: var(--ds-border-focused);
689
- --aui-link-color: var(--ds-link);
690
+ --aui-body-text: var(--ds-text, @ak-color-N800);
691
+ --aui-lesser-body-text: var(--ds-text-subtlest, @ak-color-N300);
692
+ --aui-lesser-header-text: var(--ds-text-subtlest, @ak-color-N200);
693
+ --aui-body-background: var(--ds-surface, @ak-color-N20);
694
+ --aui-page-background: var(--ds-surface, @ak-color-N0);
695
+ --aui-page-border: var(--ds-border, @ak-color-N40);
696
+ --aui-border: var(--ds-border, @ak-color-N40);
697
+ --aui-border-strong: var(--ds-border-accent-gray, @ak-color-N100);
698
+ --aui-focus: var(--ds-border-focused, @ak-color-B200);
699
+ --aui-link-color: var(--ds-link, @ak-color-B400);
690
700
  --aui-link-decoration: none;
691
- --aui-link-hover-color: var(--ds-link);
692
- --aui-link-active-color: var(--ds-link-pressed);
701
+ --aui-link-hover-color: var(--ds-link, @ak-color-B300);
702
+ --aui-link-active-color: var(--ds-link-pressed, @ak-color-B500);
693
703
  --aui-link-hover-decoration: underline;
694
- --aui-link-visited-color: var(--ds-link-pressed);
704
+ --aui-link-visited-color: var(--ds-link-pressed, @ak-color-P500);
695
705
 
696
706
  // "Item" pattern - used for navigation, buttons, dropdown options, pagination, and similar.
697
- --aui-itemheading-text: var(--ds-text-subtle);
707
+ --aui-itemheading-text: var(--ds-text-subtle, @ak-color-N300);
698
708
  --aui-item-bg: transparent;
699
- --aui-item-text: var(--ds-text-subtlest);
700
- --aui-item-focus-bg: var(--ds-background-accent-gray-subtler);
701
- --aui-item-focus-text: var(--ds-text-subtle);
702
- --aui-item-active-text: var(--ds-text-subtle);
703
- --aui-item-active-bg: var(--ds-background-selected);
704
- --aui-item-selected-bg: var(--aui-item-focus-bg);
705
- --aui-item-selected-text: var(--aui-item-focus-text);
709
+ --aui-item-text: var(--ds-text-subtle, @ak-color-N500);
710
+ --aui-item-focus-bg: var(--ds-background-neutral-subtle-hovered, @ak-color-N30A);
711
+ --aui-item-focus-text: var(--ds-text-subtle, @ak-color-N500);
712
+ --aui-item-active-text: var(--ds-text-subtle, @ak-color-B400);
713
+ --aui-item-active-bg: var(--ds-background-selected, @ak-color-B50);
714
+ --aui-item-selected-bg: var(--ds-background-selected);
715
+ --aui-item-selected-text: var(--ds-text-selected);
706
716
  --aui-item-disabled-bg: transparent;
707
- --aui-item-disabled-text: var(--ds-text-disabled);
717
+ --aui-item-disabled-text: var(--ds-text-disabled, @ak-color-N100);
708
718
 
709
719
  // Tooltips
710
- --aui-tooltip-bg-color: var(--ds-background-neutral-bold);
711
- --aui-tooltip-border-color: var(--ds-background-neutral-bold);
712
- --aui-tooltip-content-text-color: var(--ds-text-inverse);
713
- --aui-tooltip-title-text-color: var(--ds-text-inverse);
720
+ --aui-tooltip-bg-color: var(--ds-background-neutral-bold, @ak-color-N800);
721
+ --aui-tooltip-border-color: var(--ds-background-neutral-bold, @ak-color-N800);
722
+ --aui-tooltip-content-text-color: var(--ds-text-inverse, @ak-color-N0);
723
+ --aui-tooltip-title-text-color: var(--ds-text-inverse, @ak-color-N0);
714
724
 
715
725
  // Help text and onboarding messaging
716
- --aui-help-color: var(--ds-border-discovery);
726
+ --aui-help-color: var(--ds-border-discovery, @ak-color-P400);
717
727
 
718
728
  // Badges
719
- --aui-badge-bg-color: var(--ds-background-accent-gray-subtler);
720
- --aui-badge-text-color: var(--ds-text-accent-gray);
721
- --aui-badge-primary-bg-color: var(--ds-background-information-bold);
722
- --aui-badge-primary-text-color: var(--ds-text-inverse);
723
- --aui-badge-added-bg-color: var(--ds-background-accent-green-subtlest);
724
- --aui-badge-added-text-color: var(--ds-text-accent-green);
725
- --aui-badge-removed-bg-color: var(--ds-background-accent-red-subtlest);
726
- --aui-badge-removed-text-color: var(--ds-text-accent-red);
727
- --aui-badge-important-bg-color: var(--ds-background-accent-red-bolder);
728
- --aui-badge-important-text-color: var(--ds-text-inverse);
729
- --aui-badge-on-blue-text-color: var(--ds-text-inverse);
730
- --aui-badge-on-blue-bg-color: var(--ds-background-accent-blue-subtler);
729
+ --aui-badge-bg-color: var(--ds-background-accent-gray-subtler, @ak-color-N40A);
730
+ --aui-badge-text-color: var(--ds-text-accent-gray, @ak-color-N800);
731
+ --aui-badge-primary-bg-color: var(--ds-background-information-bold, @ak-color-B400);
732
+ --aui-badge-primary-text-color: var(--ds-text-inverse, @ak-color-N0);
733
+ --aui-badge-added-bg-color: var(--ds-background-accent-green-subtlest, @ak-color-G50);
734
+ --aui-badge-added-text-color: var(--ds-text-accent-green, @ak-color-G500);
735
+ --aui-badge-removed-bg-color: var(--ds-background-accent-red-subtlest, @ak-color-R50);
736
+ --aui-badge-removed-text-color: var(--ds-text-accent-red, @ak-color-R500);
737
+ --aui-badge-important-bg-color: var(--ds-background-accent-red-bolder, @ak-color-R400);
738
+ --aui-badge-important-text-color: var(--ds-text-inverse, @ak-color-N0);
739
+ --aui-badge-on-blue-text-color: var(--ds-text-inverse, @ak-color-N0);
740
+ --aui-badge-on-blue-bg-color: var(--ds-background-accent-blue-subtler, rgba(@ak-color-N0, 0.25));
731
741
 
732
742
  // Avatars
733
- --aui-avatar-outline: var(--ds-border-inverse);
734
- --aui-avatar-text: var(--ds-text-inverse);
743
+ --aui-avatar-outline: var(--ds-border-inverse, @ak-color-N0);
744
+ --aui-avatar-text: var(--ds-text-inverse, @ak-color-N100);
735
745
 
736
746
  // Lozenges
737
- --aui-lozenge-bg-color: var(--ds-background-accent-gray-bolder);
738
- --aui-lozenge-text-color: var(--ds-text-inverse);
739
- --aui-lozenge-subtle-bg-color: var(--ds-background-accent-gray-subtler);
740
- --aui-lozenge-subtle-text-color: var(--ds-text-inverse);
741
- --aui-lozenge-success-bg-color: var(--ds-background-success-bold);
742
- --aui-lozenge-success-text-color: var(--ds-text-inverse);
743
- --aui-lozenge-success-subtle-bg-color: var(--ds-background-success);
744
- --aui-lozenge-success-subtle-text-color: var(--ds-text-success);
745
- --aui-lozenge-current-bg-color: var(--ds-background-information-bold);
746
- --aui-lozenge-current-text-color: var(--ds-text-inverse);
747
- --aui-lozenge-current-subtle-bg-color: var(--ds-background-information);
748
- --aui-lozenge-current-subtle-text-color: var(--ds-text-information);
749
- --aui-lozenge-moved-bg-color: var(--ds-background-warning-bold);
750
- --aui-lozenge-moved-text-color: var(--ds-text-inverse);
751
- --aui-lozenge-moved-subtle-bg-color: var(--ds-background-warning);
752
- --aui-lozenge-moved-subtle-text-color: var(--ds-text-warning);
753
- --aui-lozenge-error-bg-color: var(--ds-background-danger-bold);
754
- --aui-lozenge-error-text-color: var(--ds-text-inverse);
755
- --aui-lozenge-error-subtle-bg-color: var(--ds-background-danger);
756
- --aui-lozenge-error-subtle-text-color: var(--ds-text-danger);
757
- --aui-lozenge-new-bg-color: var(--ds-background-discovery-bold);
758
- --aui-lozenge-new-text-color: var(--ds-text-inverse);
759
- --aui-lozenge-new-subtle-bg-color: var(--ds-background-discovery);
760
- --aui-lozenge-new-subtle-text-color: var(--ds-text-discovery);
747
+ --aui-lozenge-bg-color: var(--ds-background-neutral-bold, @ak-color-N500);
748
+ --aui-lozenge-text-color: var(--ds-text-inverse, @ak-color-N0);
749
+ --aui-lozenge-subtle-bg-color: var(--ds-background-neutral, @ak-color-N40);
750
+ --aui-lozenge-subtle-text-color: var(--ds-text-subtle, @ak-color-N500);
751
+ --aui-lozenge-success-bg-color: var(--ds-background-success-bold, @ak-color-G400);
752
+ --aui-lozenge-success-text-color: var(--ds-text-inverse, @ak-color-N0);
753
+ --aui-lozenge-success-subtle-bg-color: var(--ds-background-success, @ak-color-G50);
754
+ --aui-lozenge-success-subtle-text-color: var(--ds-text-success, @ak-color-G500);
755
+ --aui-lozenge-current-bg-color: var(--ds-background-information-bold, @ak-color-B400);
756
+ --aui-lozenge-current-text-color: var(--ds-text-inverse, @ak-color-N0);
757
+ --aui-lozenge-current-subtle-bg-color: var(--ds-background-information, @ak-color-B50);
758
+ --aui-lozenge-current-subtle-text-color: var(--ds-text-information, @ak-color-B500);
759
+ --aui-lozenge-moved-bg-color: var(--ds-background-warning-bold, @ak-color-Y400);
760
+ --aui-lozenge-moved-text-color: var(--ds-text-warning-inverse, @ak-color-N800);
761
+ --aui-lozenge-moved-subtle-bg-color: var(--ds-background-warning, @ak-color-Y75);
762
+ --aui-lozenge-moved-subtle-text-color: var(--ds-text-warning, @ak-color-N800);
763
+ --aui-lozenge-error-bg-color: var(--ds-background-danger-bold, @ak-color-R500);
764
+ --aui-lozenge-error-text-color: var(--ds-text-inverse, @ak-color-N0);
765
+ --aui-lozenge-error-subtle-bg-color: var(--ds-background-danger, @ak-color-R50);
766
+ --aui-lozenge-error-subtle-text-color: var(--ds-text-danger, @ak-color-R500);
767
+ --aui-lozenge-new-bg-color: var(--ds-background-discovery-bold, @ak-color-P400);
768
+ --aui-lozenge-new-text-color: var(--ds-text-inverse, @ak-color-N0);
769
+ --aui-lozenge-new-subtle-bg-color: var(--ds-background-discovery, @ak-color-P50);
770
+ --aui-lozenge-new-subtle-text-color: var(--ds-text-discovery, @ak-color-P500);
761
771
 
762
772
  // Messages
763
- --aui-message-info-bg-color: var(--ds-background-information);
764
- --aui-message-info-icon-color: var(--ds-icon-information);
765
- --aui-message-info-text-color: var(--ds-text);
766
- --aui-message-success-bg-color: var(--ds-background-success);
767
- --aui-message-success-icon-color: var(--ds-icon-success);
768
- --aui-message-success-text-color: var(--ds-text);
769
- --aui-message-warning-bg-color: var(--ds-background-warning);
770
- --aui-message-warning-icon-color: var(--ds-icon-warning);
771
- --aui-message-warning-text-color: var(--ds-text);
772
- --aui-message-error-bg-color: var(--ds-background-danger);
773
- --aui-message-error-icon-color: var(--ds-icon-danger);
774
- --aui-message-error-text-color: var(--ds-text);
775
- --aui-message-change-bg-color: var(--ds-background-discovery);
776
- --aui-message-change-icon-color: var(--ds-icon-discovery);
777
- --aui-message-change-text-color: var(--ds-text);
773
+ --aui-message-info-bg-color: var(--ds-background-information, @ak-color-B50);
774
+ --aui-message-info-icon-color: var(--ds-icon-information, @ak-color-B400);
775
+ --aui-message-info-text-color: var(--ds-text, @ak-color-N600);
776
+ --aui-message-success-bg-color: var(--ds-background-success, @ak-color-G50);
777
+ --aui-message-success-icon-color: var(--ds-icon-success, @ak-color-G400);
778
+ --aui-message-success-text-color: var(--ds-text, @ak-color-N600);
779
+ --aui-message-warning-bg-color: var(--ds-background-warning, @ak-color-Y50);
780
+ --aui-message-warning-icon-color: var(--ds-icon-warning, @ak-color-Y400);
781
+ --aui-message-warning-text-color: var(--ds-text, @ak-color-N600);
782
+ --aui-message-error-bg-color: var(--ds-background-danger, @ak-color-R50);
783
+ --aui-message-error-icon-color: var(--ds-icon-danger, @ak-color-R400);
784
+ --aui-message-error-text-color: var(--ds-text, @ak-color-N600);
785
+ --aui-message-change-bg-color: var(--ds-background-discovery, @ak-color-P50);
786
+ --aui-message-change-icon-color: var(--ds-icon-discovery, @ak-color-P400);
787
+ --aui-message-change-text-color: var(--ds-text, @ak-color-N600);
778
788
 
779
789
  // Banners
780
- --aui-banner-error-bg-color: var(--ds-background-danger-bold);
781
- --aui-banner-error-text-color: var(--ds-text-inverse);
790
+ --aui-banner-error-bg-color: var(--ds-background-danger-bold, @ak-color-R400);
791
+ --aui-banner-error-text-color: var(--ds-text-inverse, @ak-color-N0);
792
+ --aui-banner-warning-bg-color: var(--ds-background-warning-bold, @ak-color-Y300);
793
+ --aui-banner-warning-text-color: var(--ds-text-warning-inverse, @ak-color-N700);
794
+ --aui-banner-announcement-bg-color: var(--ds-background-neutral-bold, @ak-color-N500);
795
+ --aui-banner-announcement-text-color: var(--ds-text-inverse, @ak-color-N0);
782
796
 
783
797
  // Flags
784
- --aui-flag-bg-color: var(--aui-dropdown-bg-color);
785
- --aui-flag-info-color: var(--ds-icon-information);
786
- --aui-flag-success-color: var(--ds-icon-success);
787
- --aui-flag-warning-color: var(--ds-icon-warning);
788
- --aui-flag-error-color: var(--ds-icon-danger);
798
+ --aui-flag-bg-color: var(--ds-surface-overlay);
799
+ --aui-flag-info-color: var(--ds-icon-information, @ak-color-B400);
800
+ --aui-flag-success-color: var(--ds-icon-success, @ak-color-G300);
801
+ --aui-flag-warning-color: var(--ds-icon-warning, @ak-color-Y300);
802
+ --aui-flag-error-color: var(--ds-icon-danger, @ak-color-R300);
789
803
 
790
804
  // Buttons
791
- --aui-button-default-bg-color: var(--ds-background-neutral);
792
- --aui-button-default-text-color: var(--ds-text);
793
- --aui-button-default-hover-bg-color: var(--ds-background-neutral-hovered);
794
- --aui-button-default-active-bg-color: var(--ds-background-selected);
795
- --aui-button-default-active-text-color: var(--ds-text-selected);
796
- --aui-button-default-selected-bg-color: var(--ds-background-selected-bold-pressed);
797
- --aui-button-default-selected-text-color: var(--ds-text-inverse);
798
- --aui-button-default-disabled-bg-color: var(--ds-background-disabled);
799
- --aui-button-default-disabled-text-color: var(--ds-text-disabled);
800
- --aui-button-primary-bg-color: var(--ds-background-brand-bold);
801
- --aui-button-primary-text-color: var(--ds-text-inverse);
802
- --aui-button-primary-hover-bg-color: var(--ds-background-brand-bold-hovered);
803
- --aui-button-primary-active-bg-color: var(--ds-background-selected-bold-pressed);
804
- --aui-button-primary-active-text-color: var(--ds-text-inverse);
805
+ --aui-button-default-bg-color: var(--ds-background-neutral, @ak-color-N30A);
806
+ --aui-button-default-text-color: var(--ds-text, @ak-color-N600);
807
+ --aui-button-default-hover-bg-color: var(--ds-background-neutral-hovered, @ak-color-N40A);
808
+ --aui-button-default-active-bg-color: var(--ds-background-neutral-pressed, @ak-color-B50);
809
+ --aui-button-default-active-text-color: var(--ds-text, @ak-color-B400);
810
+ --aui-button-default-selected-bg-color: var(--ds-background-selected, @ak-color-N600);
811
+ --aui-button-default-selected-text-color: var(--ds-text-selected, @ak-color-N0);
812
+ --aui-button-default-disabled-bg-color: var(--ds-background-disabled, @ak-color-N20A);
813
+ --aui-button-default-disabled-text-color: var(--ds-text-disabled, @ak-color-N70);
814
+ --aui-button-primary-bg-color: var(--ds-background-brand-bold, @ak-color-B400);
815
+ --aui-button-primary-text-color: var(--ds-text-inverse, @ak-color-N0);
816
+ --aui-button-primary-hover-bg-color: var(--ds-background-brand-bold-hovered, @ak-color-B300);
817
+ --aui-button-primary-active-bg-color: var(--ds-background-selected-bold-pressed, @ak-color-B400);
818
+ --aui-button-primary-active-text-color: var(--ds-text-inverse, @ak-color-N0);
805
819
  --aui-button-primary-disabled-bg-color: var(--aui-button-default-disabled-bg-color);
806
820
  --aui-button-primary-disabled-text-color: var(--aui-button-default-disabled-text-color);
807
- --aui-button-light-bg-color: var(--ds-background-input);
808
- --aui-button-subtle-text-color: var(--ds-text);
821
+ --aui-button-light-bg-color: var(--ds-background-input, @ak-color-N0);
822
+ --aui-button-subtle-text-color: var(--ds-text, @ak-color-N600);
809
823
 
810
824
  // "Labels" (e.g., page tags, selected values in components, etc.)
811
825
  --aui-label-text-color: var(--ds-text);
812
826
  --aui-label-link-color: var(--ds-link);
813
- --aui-label-bg-color: var(--ds-background-neutral);
814
- --aui-label-hover-bg-color: var(--ds-background-neutral);
815
- --aui-label-close-hover-bg-color: var(--ds-background-accent-red-subtle);
816
- --aui-label-close-hover-text-color: var(--ds-icon-accent-gray);
827
+ --aui-label-bg-color: var(--ds-background-neutral, @ak-color-N20);
828
+ --aui-label-hover-bg-color: var(--ds-background-neutral, @ak-color-N20);
829
+ --aui-label-close-hover-bg-color: var(--ds-background-accent-red-subtle, @ak-color-R75);
830
+ --aui-label-close-hover-text-color: var(--ds-icon-accent-gray, @ak-color-N800);
817
831
 
818
832
  // Forms
819
- --aui-form-placeholder-text-color: var(--ds-text-subtlest);
820
- --aui-form-placeholder-disabled-text-color: var(--ds-text-disabled);
821
- --aui-form-label-text-color: var(--ds-text-subtle);
822
- --aui-form-error-text-color: var(--ds-text-danger);
823
- --aui-form-description-text-color: var(--ds-text-subtlest);
824
- --aui-form-disabled-field-bg-color: var(--ds-text-disabled);
825
- --aui-form-disabled-field-text-color: var(--ds-text-subtlest);
826
- --aui-form-disabled-field-label-color: var(--ds-text-subtle);
827
- --aui-form-field-border-color: var(--ds-border-input);
828
- --aui-form-field-hover-border-color: var(--ds-border-focused);
829
- --aui-form-field-default-text-color: var(--ds-text);
830
- --aui-form-field-default-bg-color: var(--ds-background-input);
833
+ --aui-form-placeholder-text-color: var(--ds-text-subtlest, @ak-color-N300);
834
+ --aui-form-placeholder-disabled-text-color: var(--ds-text-disabled, @ak-color-N70);
835
+ --aui-form-label-text-color: var(--ds-text-subtle, @ak-color-N200);
836
+ --aui-form-error-text-color: var(--ds-text-danger, @ak-color-R400);
837
+ --aui-form-description-text-color: var(--ds-text-subtlest, @ak-color-N200);
838
+ --aui-form-disabled-field-bg-color: var(--ds-text-disabled, @ak-color-N20);
839
+ --aui-form-disabled-field-text-color: var(--ds-text-subtlest, @ak-color-N80);
840
+ --aui-form-disabled-field-label-color: var(--ds-text-subtle, @ak-color-N80);
841
+ --aui-form-field-border-color: var(--ds-border-input, @ak-color-N40);
842
+ --aui-form-field-hover-border-color: var(--ds-border-focused, @ak-color-N40);
843
+ --aui-form-field-default-text-color: var(--ds-text, @ak-color-N800);
844
+ --aui-form-field-default-bg-color: var(--ds-background-input, @ak-color-N10);
831
845
  --aui-form-field-hover-text-color: var(--ds-text);
832
- --aui-form-field-hover-bg-color: var(--ds-background-input-hovered);
833
- --aui-form-field-focus-bg-color: var(--ds-background-input);
834
- --aui-form-select-bg-color: var(--ds-background-input);
835
- --aui-form-select-border-color: var(--ds-border-input);
836
- --aui-form-select-hover-bg-color: var(--ds-border-input);
837
- --aui-form-checkbox-radio-active-bg-color: var(--ds-background-accent-blue-subtler);
838
- --aui-form-optgroup-text-color: var(--ds-text-subtlest);
839
- --aui-form-optgroup-bg-color: var(--ds-background-neutral);
840
- --aui-form-option-bg-color: var(--ds-background-input);
841
- --aui-form-pre-bg-color: var(--ds-background-neutral);
846
+ --aui-form-field-hover-bg-color: var(--ds-background-input-hovered, @ak-color-N30);
847
+ --aui-form-field-focus-bg-color: var(--ds-background-input, @ak-color-N0);
848
+ --aui-form-select-bg-color: var(--ds-background-input, @ak-color-N30);
849
+ --aui-form-select-border-color: var(--ds-border-input, @ak-color-N30);
850
+ --aui-form-select-hover-bg-color: var(--ds-border-input, @ak-color-N40);
851
+ --aui-form-checkbox-radio-active-bg-color: var(--ds-background-accent-blue-subtler, @ak-color-B50);
852
+ --aui-form-optgroup-text-color: var(--ds-text-subtlest, @ak-color-N100);
853
+ --aui-form-optgroup-bg-color: var(--ds-background-neutral, @ak-color-N20);
854
+ --aui-form-option-bg-color: var(--ds-background-input, @ak-color-N0);
855
+ --aui-form-pre-bg-color: var(--ds-background-neutral, @ak-color-N20);
842
856
 
843
857
  // More form fields
844
- --aui-form-field-autofilled-bg-color: var(--ds-background-discovery);
845
- --aui-form-field-autofilled-border-color: var(--ds-border-discovery);
846
- --aui-form-field-autofilled-text-color: var(--ds-text-discovery);
858
+ --aui-form-field-autofilled-bg-color: var(--ds-background-discovery, @ak-color-P50);
859
+ --aui-form-field-autofilled-border-color: var(--ds-border-discovery, @ak-color-P300);
860
+ --aui-form-field-autofilled-text-color: var(--ds-text-discovery, @ak-color-P500);
847
861
 
848
862
  // Form glyphs
849
- --aui-form-glyph-disabled-icon-color: var(--ds-icon-disabled);
850
- --aui-form-glyph-disabled-fill-color: var(--ds-background-disabled);
851
- --aui-form-glyph-icon-color: var(--ds-icon-inverse);
852
- --aui-form-glyph-fill-color: var(--ds-icon-accent-blue);
863
+ --aui-form-glyph-disabled-icon-color: var(--ds-icon-disabled, @ak-color-N70);
864
+ --aui-form-glyph-disabled-fill-color: var(--ds-background-disabled, @ak-color-N20A);
865
+ --aui-form-glyph-icon-color: var(--ds-icon-inverse, @ak-color-N0);
866
+ --aui-form-glyph-fill-color: var(--ds-icon-accent-blue, @ak-color-B400);
853
867
 
854
868
  // Form checkboxes and radio buttons
855
- --aui-form-checkbox-active-bg-color: var(--ds-background-accent-blue-subtler);
856
- --aui-form-checkbox-active-border-color: var(--ds-border-accent-blue);
857
- --aui-form-checkbox-active-icon-color: var(--ds-icon-information);
858
- --aui-form-radio-unchecked-bg-color: var(--ds-background-input);
859
- --aui-form-radio-unchecked-border-color: var(--ds-border-input);
869
+ --aui-form-checkbox-active-bg-color: var(--ds-background-accent-blue-subtler, @ak-color-B50);
870
+ --aui-form-checkbox-active-border-color: var(--ds-border-accent-blue, @ak-color-B50);
871
+ --aui-form-checkbox-active-icon-color: var(--ds-icon-information, @ak-color-B400);
872
+ --aui-form-radio-unchecked-bg-color: var(--ds-background-input, @ak-color-N10);
873
+ --aui-form-radio-unchecked-border-color: var(--ds-border-input, @ak-color-N40);
860
874
 
861
875
  // Toggle
862
- --aui-toggle-default-bg-color: var(--ds-background-neutral-bold);
863
- --aui-toggle-default-bg-hover-color: var(--ds-background-neutral-bold-hovered);
864
- --aui-toggle-button-color: var(--ds-icon-inverse);
865
- --aui-toggle-on-color: var(--ds-background-success-bold);
866
- --aui-toggle-on-hover-color: var(--ds-background-success-bold-hovered);
867
- --aui-toggle-disabled-overlay-color: var(--ds-background-neutral-subtle);
868
- --aui-toggle-tick-color: var(--ds-icon-inverse);
869
- --aui-toggle-cross-color: var(--ds-icon-inverse);
876
+ --aui-toggle-default-bg-color: var(--ds-background-neutral-bold, @ak-color-N200);
877
+ --aui-toggle-default-bg-hover-color: var(--ds-background-neutral-bold-hovered, @ak-color-N70);
878
+ --aui-toggle-button-color: var(--ds-icon-inverse, @ak-color-N0);
879
+ --aui-toggle-on-color: var(--ds-background-success-bold, @ak-color-G400);
880
+ --aui-toggle-on-hover-color: var(--ds-background-success-bold-hovered, @ak-color-G300);
881
+ --aui-toggle-disabled-overlay-color: var(--ds-background-neutral-subtle, rgba(@ak-color-N0, 0.5));
882
+ --aui-toggle-tick-color: var(--ds-icon-inverse, @ak-color-N0);
883
+ --aui-toggle-cross-color: var(--ds-icon-inverse, @ak-color-N0);
870
884
 
871
885
  // Form notification
872
- --aui-form-notification-info-color: var(--ds-icon-subtle);
886
+ --aui-form-notification-info-color: var(--ds-icon-subtle, @ak-color-N80);
873
887
  --aui-form-notification-error-color: var(--aui-message-error-icon-color);
874
888
  --aui-form-notification-success-color: var(--aui-message-success-icon-color);
875
889
 
876
890
  // Progress bar
877
- --aui-progressbar-color: var(--ds-background-neutral-bold);
878
- --aui-progressbar-track-color: var(--ds-background-neutral);
891
+ --aui-progressbar-color: var(--ds-background-neutral-bold, @ak-color-N500);
892
+ --aui-progressbar-track-color: var(--ds-background-neutral, @ak-color-N40A);
879
893
 
880
894
  // Spinner
881
- --aui-spinner-color: var(--ds-icon-subtle);
895
+ --aui-spinner-color: var(--ds-icon-subtle, @ak-color-N500);
882
896
 
883
897
  // Navigation
884
- --aui-nav-pagination-text-color: var(--ds-text);
885
- --aui-nav-pagination-active-text-color: var(--ds-text-subtlest);
898
+ --aui-nav-pagination-text-color: var(--ds-text, @ak-color-N800);
899
+ --aui-nav-pagination-active-text-color: var(--ds-text-subtlest, @ak-color-N80);
886
900
 
887
901
  // Application header
888
- --aui-appheader-bg-color: var(--ds-surface);
889
- --aui-appheader-text-color: var(--ds-text);
890
- --aui-appheader-item-focus-bg-color: var(--ds-background-neutral-hovered);
891
- --aui-appheader-item-focus-text-color: var(--ds-text);
892
- --aui-appheader-item-active-bg-color: var(--ds-background-neutral-subtle-pressed);
893
- --aui-appheader-item-active-text-color: var(--ds-text);
894
- --aui-appheader-quicksearch-bg-color: var(--ds-border-input);
902
+ --aui-appheader-bg-color: var(--ds-surface, @ak-color-B500);
903
+ --aui-appheader-text-color: var(--ds-text, @ak-color-B50);
904
+ --aui-appheader-item-focus-bg-color: var(--ds-background-neutral-hovered, @ak-color-N90A);
905
+ --aui-appheader-item-focus-text-color: var(--ds-text, @ak-color-B50);
906
+ --aui-appheader-item-active-bg-color: var(--ds-background-neutral-subtle-pressed, @ak-color-N90A);
907
+ --aui-appheader-item-active-text-color: var(--ds-text, @ak-color-B50);
908
+ --aui-appheader-quicksearch-bg-color: var(--ds-background-neutral, @ak-color-N90A);
895
909
  --aui-appheader-quicksearch-border-color: var(--ds-border-input);
896
- --aui-appheader-quicksearch-text-color: var(--ds-text-subtlest);
897
- --aui-appheader-quicksearch-placeholder-text-color: var(--ds-text);
910
+ --aui-appheader-quicksearch-text-color: var(--ds-text-subtlest, @ak-color-B50);
911
+ --aui-appheader-quicksearch-placeholder-text-color: var(--ds-text, @ak-color-N80);
898
912
  --aui-appheader-quicksearch-focus-bg-color: var(--aui-appheader-quicksearch-bg-color);
899
- --aui-appheader-quicksearch-focus-text-color: var(--ds-text-subtlest);
913
+ --aui-appheader-quicksearch-focus-text-color: var(--ds-text-subtlest, @ak-color-B50);
900
914
 
901
915
  // Sidebar
902
- --aui-sidebar-icon-color: var(--ds-icon);
903
- --aui-sidebar-toggle-icon-color: var(--ds-icon);
904
- --aui-sidebar-bg-color: var(--ds-surface-sunken);
905
- --aui-sidebar-dropdown-arrow-color: var(--ds-icon);
906
- --aui-sidebar-tooltip-bg-color: var(--ds-icon);
907
- --aui-sidebar-badge-bg-color: var(--ds-background-accent-gray-subtler);
916
+ --aui-sidebar-icon-color: var(--ds-icon, @ak-color-N400);
917
+ --aui-sidebar-toggle-icon-color: var(--ds-icon, @ak-color-N400);
918
+ --aui-sidebar-bg-color: var(--ds-surface-sunken, @ak-color-N20);
919
+ --aui-sidebar-dropdown-arrow-color: var(--ds-icon, @ak-color-N400);
920
+ --aui-sidebar-tooltip-bg-color: var(--ds-icon, @ak-color-N800A);
921
+ --aui-sidebar-badge-bg-color: var(--ds-background-accent-gray-subtler, @ak-color-N50);
908
922
  --aui-sidebar-badge-text-color: var(--ds-text);
909
923
 
910
924
  // Tabs
911
- --aui-tabs-tab-border-color: var(--ds-border);
912
- --aui-tabs-tab-text-color: var(--ds-text-selected);
913
- --aui-tabs-tab-hover-text-color: var(--ds-text-selected);
914
- --aui-tabs-tab-active-border-color: var(--ds-border-accent-blue);
915
- --aui-tabs-tab-active-text-color: var(--ds-text-selected);
925
+ --aui-tabs-tab-border-color: var(--ds-border, @ak-color-N30);
926
+ --aui-tabs-tab-text-color: var(--ds-text-subtle, @ak-color-N500);
927
+ --aui-tabs-tab-hover-text-color: var(--ds-text-selected, @ak-color-B100);
928
+ --aui-tabs-tab-active-border-color: var(--ds-border-accent-blue, @ak-color-B400);
929
+ --aui-tabs-tab-active-text-color: var(--ds-text-selected, @ak-color-B400);
916
930
 
917
931
  // Multi-step wizard
918
- --aui-progress-tracker-current-step-color: var(--ds-background-brand-bold);
932
+ --aui-progress-tracker-current-step-color: var(--ds-background-brand-bold, @ak-color-B300);
919
933
  --aui-progress-tracker-current-step-text-color: var(--aui-progress-tracker-visited-step-text-color);
920
- --aui-progress-tracker-visited-step-text-color: var(--ds-text);
921
- --aui-progress-tracker-visited-step-hover-text-color: var(--ds-link);
922
- --aui-progress-tracker-visited-step-active-text-color: var(--ds-link);
923
- --aui-progress-tracker-future-step-color: var(--ds-icon-subtle);
924
- --aui-progress-tracker-future-step-text-color: var(--ds-text-subtle);
934
+ --aui-progress-tracker-visited-step-text-color: var(--ds-text, @ak-color-N800);
935
+ --aui-progress-tracker-visited-step-hover-text-color: var(--ds-link, @ak-color-B400);
936
+ --aui-progress-tracker-visited-step-active-text-color: var(--ds-link, @ak-color-B500);
937
+ --aui-progress-tracker-future-step-color: var(--ds-icon-subtle, @ak-color-N70);
938
+ --aui-progress-tracker-future-step-text-color: var(--ds-text-subtle, @ak-color-N300);
925
939
 
926
940
  // Tables
927
941
  --aui-table-row-bg-color: var(--ds-background-neutral-subtle);
928
- --aui-table-row-text-color: var(--ds-text);
942
+ --aui-table-row-text-color: var(--ds-text, @ak-color-N800);
929
943
  --aui-table-header-bg-color: var(--ds-background-neutral-subtle);
930
- --aui-table-heading-text-color: var(--ds-text-subtle);
931
- --aui-table-border-color: var(--ds-border);
932
- --aui-table-caption-bg-color: var(--ds-background-accent-gray-subtlest);
933
- --aui-table-caption-text-color: var(--ds-text-subtle);
934
- --aui-table-list-row-hover-color: var(--ds-background-neutral-subtle-hovered);
935
- --aui-table-list-row-subtle-color: var(--ds-background-neutral-subtle-hovered);
936
- --aui-table-sortable-hover-bg-color: var(--ds-background-neutral-subtle-hovered);
937
- --aui-table-sortable-active-bg-color: var(--ds-background-accent-blue-subtler);
938
- --aui-table-sortable-active-border-color: var(--ds-border-accent-blue);
939
- --aui-table-sortable-active-text-color: var(--ds-text-accent-blue);
944
+ --aui-table-heading-text-color: var(--ds-text-subtle, @ak-color-N200);
945
+ --aui-table-border-color: var(--ds-border, @ak-color-N40);
946
+ --aui-table-caption-bg-color: var(--ds-background-accent-gray-subtlest, @ak-color-N20);
947
+ --aui-table-caption-text-color: var(--ds-text-subtle, @ak-color-N100);
948
+ --aui-table-list-row-hover-color: var(--ds-background-neutral-subtle-hovered, @ak-color-N30A);
949
+ --aui-table-list-row-subtle-color: var(--ds-background-neutral-subtle-hovered, @ak-color-N60);
950
+ --aui-table-sortable-hover-bg-color: var(--ds-background-neutral-subtle-hovered, @ak-color-N30A);
951
+ --aui-table-sortable-active-bg-color: var(--ds-background-accent-blue-subtler, @ak-color-B50);
952
+ --aui-table-sortable-active-border-color: var(--ds-border-accent-blue, @ak-color-B500);
953
+ --aui-table-sortable-active-text-color: var(--ds-text-accent-blue, @ak-color-B500);
940
954
  --aui-table-sortable-selected-bg-color: var(--ds-background-neutral-subtle);
941
- --aui-table-sortable-selected-border-color: var(--ds-border-accent-gray);
942
- --aui-table-sortable-selected-text-color: var(--ds-text);
955
+ --aui-table-sortable-selected-border-color: var(--ds-border-accent-gray, @ak-color-N100);
956
+ --aui-table-sortable-selected-text-color: var(--ds-text, @ak-color-N400);
943
957
 
944
958
  // Dynamic tables
945
- --aui-restfultable-row-focused-border-color: var(--ds-border);
946
- --aui-restfultable-row-create-border-color: var(--ds-border-disabled);
959
+ --aui-restfultable-row-focused-border-color: var(--ds-border, @ak-color-N60);
960
+ --aui-restfultable-row-create-border-color: var(--ds-border-disabled, @ak-color-N40);
947
961
  --aui-restfultable-row-editable-hover-bg-color: var(--aui-form-field-hover-bg-color);
948
962
  --aui-restfultable-error-text-color: var(--aui-form-notification-error-color);
949
- --aui-restfultable-header-row-bg-color: var(--ds-surface);
950
- --aui-restfultable-header-row-text-color: var(--ds-text-subtlest);
951
- --aui-restfultable-row-moving-bg-color: var(--ds-surface-raised);
952
- --aui-restfultable-editable-em-text-color: var(--ds-text-subtlest);
953
- --aui-restfultable-row-active-bg-color: var(--ds-background-neutral-subtle-pressed);
954
- --aui-restfultable-row-hover-bg-color: var(--ds-background-input-hovered);
963
+ --aui-restfultable-header-row-bg-color: var(--ds-surface, @ak-color-N0);
964
+ --aui-restfultable-header-row-text-color: var(--ds-text-subtlest, @ak-color-N200);
965
+ --aui-restfultable-row-moving-bg-color: var(--ds-surface-raised, @ak-color-N20);
966
+ --aui-restfultable-editable-em-text-color: var(--ds-text-subtlest, @ak-color-N80);
967
+ --aui-restfultable-row-active-bg-color: var(--ds-background-neutral-subtle-pressed, @ak-color-N20);
968
+ --aui-restfultable-row-hover-bg-color: var(--ds-background-input-hovered, @ak-color-N20);
955
969
 
956
970
  // Dropdowns
957
- --aui-dropdown-bg-color: var(--ds-surface);
958
- --aui-dropdown-border-color: var(--ds-border);
971
+ --aui-dropdown-bg-color: var(--ds-surface-overlay, @ak-color-N0);
972
+ --aui-dropdown-border-color: var(--ds-border, @ak-color-N40);
959
973
 
960
974
  // Selects
961
- --aui-select2-placeholder-text-color: var(--ds-text-subtlest);
962
- --aui-select2-chosen-bg-color: var(--ds-background-neutral);
963
- --aui-select2-chosen-text-color: var(--ds-text);
964
- --aui-select2-chosen-hover-bg-color: var(--ds-background-neutral-hovered);
965
- --aui-select2-chosen-hover-text-color: var(--ds-text);
966
- --aui-select2-active-chosen-bg-color: var(--ds-background-neutral);
967
- --aui-select2-active-chosen-text-color: var(--ds-text);
975
+ --aui-select2-placeholder-text-color: var(--ds-text-subtlest, @ak-color-N100);
976
+ --aui-select2-chosen-bg-color: var(--ds-background-neutral, @ak-color-N0);
977
+ --aui-select2-chosen-text-color: var(--ds-text, @ak-color-N800);
978
+ --aui-select2-chosen-hover-bg-color: var(--ds-background-neutral-hovered, @ak-color-N0);
979
+ --aui-select2-chosen-hover-text-color: var(--ds-text, @ak-color-N800);
980
+ --aui-select2-active-chosen-bg-color: var(--ds-background-neutral, @ak-color-N40);
981
+ --aui-select2-active-chosen-text-color: var(--ds-text, @ak-color-N800);
968
982
  --aui-select2-field-default-bg-color: var(--ds-background-input);
969
983
  --aui-select2-field-border-color: var(--ds-border-input);
970
- --aui-select2-field-hover-bg-color: var(--ds-border-focused);
971
- --aui-select2-drop-bg-color: var(--ds-surface);
984
+ --aui-select2-field-hover-bg-color: var(--ds-background-input-hovered);
985
+ --aui-select2-drop-bg-color: var(--ds-surface-overlay);
972
986
 
973
987
  // Dialogs
974
- --aui-dialog-bg-color: var(--ds-surface-overlay);
975
- --aui-dialog-border-color: var(--ds-border);
988
+ --aui-dialog-bg-color: var(--ds-surface-overlay, @ak-color-N0);
989
+ --aui-dialog-border-color: var(--ds-border, @ak-color-N30);
976
990
  --aui-dialog-header-bg-color: var(--aui-dialog-bg-color);
977
- --aui-dialog-header-warning-bg-color: var(--ds-background-danger-bold);
978
- --aui-dialog-header-warning-text-color: var(--ds-text-inverse);
979
- --aui-dialog-button-hover-border-color: var(--ds-border);
980
- --aui-dialog-footer-hint-text-color: var(--ds-text-subtlest);
991
+ --aui-dialog-header-warning-bg-color: var(--ds-background-danger-bold, @ak-color-R400);
992
+ --aui-dialog-header-warning-text-color: var(--ds-text-inverse, @ak-color-N0);
993
+ --aui-dialog-button-hover-border-color: var(--ds-border, @ak-color-N80);
994
+ --aui-dialog-footer-hint-text-color: var(--ds-text-subtlest, @ak-color-N400);
981
995
  --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
982
996
  --aui-inline-dialog-border-color: var(--aui-dropdown-border-color);
983
997
 
984
998
  // Date pickers
985
- --aui-datepicker-panel-bg-color: var(--ds-background-input);
986
- --aui-datepicker-panel-divider-color: var(--ds-border);
987
- --aui-datepicker-heading-bg-color: var(--ds-background-information);
988
- --aui-datepicker-heading-text-color: var(--ds-text);
989
- --aui-datepicker-heading-weekdays-text-color: var(--ds-text-subtle);
999
+ --aui-datepicker-panel-bg-color: var(--ds-background-input, @ak-color-N0);
1000
+ --aui-datepicker-panel-divider-color: var(--ds-border, @ak-color-N40);
1001
+ --aui-datepicker-heading-bg-color: var(--ds-background-information, @ak-color-N20);
1002
+ --aui-datepicker-heading-text-color: var(--ds-text, @ak-color-N600);
1003
+ --aui-datepicker-heading-weekdays-text-color: var(--ds-text-subtle, @ak-color-N300);
990
1004
  --aui-datepicker-option-bg-color: var(--ds-background-neutral-subtle);
991
- --aui-datepicker-option-text-color: var(--ds-text-selected);
992
- --aui-datepicker-option-focus-bg-color: var(--ds-background-neutral-subtle-hovered);
993
- --aui-datepicker-option-focus-text-color: var(--ds-text-accent-blue);
994
- --aui-datepicker-option-selected-bg-color: var(--ds-background-selected-bold);
995
- --aui-datepicker-option-selected-text-color: var(--ds-text-inverse);
996
- --aui-datepicker-option-unselectable-bg-color: var(--ds-background-disabled);
997
- --aui-datepicker-option-unselectable-text-color: var(--ds-text-disabled);
998
- --aui-datepicker-disabled-text-color: var(--ds-text-disabled);
999
- --aui-datepicker-hint-text-color: var(--ds-text-subtlest);
1005
+ --aui-datepicker-option-text-color: var(--ds-text-selected, @ak-color-B400);
1006
+ --aui-datepicker-option-focus-bg-color: var(--ds-background-neutral-subtle-hovered, @ak-color-N20);
1007
+ --aui-datepicker-option-focus-text-color: var(--ds-text-accent-blue, @ak-color-B400);
1008
+ --aui-datepicker-option-selected-bg-color: var(--ds-background-selected-bold, @ak-color-B400);
1009
+ --aui-datepicker-option-selected-text-color: var(--ds-text-inverse, @ak-color-N0);
1010
+ --aui-datepicker-option-unselectable-bg-color: var(--ds-background-disabled, @ak-color-N20);
1011
+ --aui-datepicker-option-unselectable-text-color: var(--ds-text-disabled, @ak-color-N100);
1012
+ --aui-datepicker-disabled-text-color: var(--ds-text-disabled, @ak-color-N100);
1013
+ --aui-datepicker-hint-text-color: var(--ds-text-subtlest, @ak-color-N400);
1000
1014
  }
1001
1015
 
1002
1016
  }