@gitlab/ui 134.6.0 → 134.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 (33) hide show
  1. package/dist/components/dashboards/dashboard_panel/dashboard_panel.js +5 -3
  2. package/dist/index.css +2 -2
  3. package/dist/index.css.map +1 -1
  4. package/dist/tokens/build/js/tokens.dark.js +86 -68
  5. package/dist/tokens/build/js/tokens.js +93 -75
  6. package/package.json +5 -5
  7. package/src/components/base/toggle/toggle.scss +75 -51
  8. package/src/components/dashboards/dashboard_panel/dashboard_panel.vue +4 -1
  9. package/src/scss/bootstrap_no_utils.scss +33 -0
  10. package/src/scss/gitlab_ui_no_utils.scss +24 -0
  11. package/src/scss/themes.scss +10 -5
  12. package/src/tokens/build/css/tokens.css +76 -58
  13. package/src/tokens/build/css/tokens.dark.css +74 -56
  14. package/src/tokens/build/docs/tokens-tailwind-docs.dark.json +145 -0
  15. package/src/tokens/build/docs/tokens-tailwind-docs.json +145 -0
  16. package/src/tokens/build/figma/constants.dark.json +2 -2
  17. package/src/tokens/build/figma/constants.json +2 -2
  18. package/src/tokens/build/figma/mode.dark.json +206 -108
  19. package/src/tokens/build/figma/mode.json +209 -87
  20. package/src/tokens/build/js/tokens.dark.js +85 -67
  21. package/src/tokens/build/js/tokens.js +92 -74
  22. package/src/tokens/build/json/tokens.dark.json +846 -225
  23. package/src/tokens/build/json/tokens.json +850 -229
  24. package/src/tokens/build/scss/_tokens.dark.scss +74 -56
  25. package/src/tokens/build/scss/_tokens.scss +76 -58
  26. package/src/tokens/build/scss/_tokens_custom_properties.scss +18 -0
  27. package/src/tokens/build/tailwind/tokens.cjs +1 -0
  28. package/src/tokens/constant/color.alpha.tokens.json +16 -0
  29. package/src/tokens/contextual/button.tokens.json +34 -58
  30. package/src/tokens/contextual/tabs.tokens.json +2 -8
  31. package/src/tokens/contextual/toggle.tokens.json +195 -0
  32. package/src/tokens/semantic/action.tokens.json +22 -124
  33. package/src/tokens/semantic/control.tokens.json +9 -21
package/src/tokens/build/scss/_tokens.dark.scss CHANGED
@@ -17,6 +17,7 @@ $gl-color-alpha-light-8: rgba(255, 255, 255, 0.08);
17
17
  $gl-color-alpha-light-16: rgba(255, 255, 255, 0.16);
18
18
  $gl-color-alpha-light-24: rgba(255, 255, 255, 0.24);
19
19
  $gl-color-alpha-light-36: rgba(255, 255, 255, 0.36);
20
+ $gl-color-alpha-light-40: rgba(255, 255, 255, 0.4);
20
21
  $gl-color-blue-50: #e9f3fc;
21
22
  $gl-color-blue-100: #cbe2f9;
22
23
  $gl-color-blue-200: #9dc7f1;
@@ -266,9 +267,6 @@ $gl-broadcast-banner-border-color-red: #580d02; // Used for the border for the r
266
267
  $gl-button-default-primary-background-color-default: rgba(137, 136, 141, 0.4); // Used for the background of an default primary button in the default state.
267
268
  $gl-button-default-primary-background-color-hover: rgba(137, 136, 141, 0.64); // Used for the background of an default primary button in the hover state.
268
269
  $gl-button-default-primary-background-color-active: rgba(137, 136, 141, 0.32); // Used for the background of an default primary button in the active state.
269
- $gl-button-confirm-secondary-background-color-default: rgba(66, 143, 220, 0.4); // Used for the background of an outlined confirm (positive) button in the default state.
270
- $gl-button-confirm-secondary-background-color-hover: rgba(66, 143, 220, 0.64); // Used for the background of an outlined confirm (positive) button in the hover state.
271
- $gl-button-confirm-secondary-background-color-active: rgba(66, 143, 220, 0.32); // Used for the background of an outlined confirm (positive) button in the active state.
272
270
  $gl-button-danger-secondary-background-color-default: rgba(236, 89, 65, 0.4); // Used for the background of an outlined danger (destructive) button in the default state.
273
271
  $gl-button-danger-secondary-background-color-hover: rgba(236, 89, 65, 0.64); // Used for the background of an outlined danger (destructive) button in the hover state.
274
272
  $gl-button-danger-secondary-background-color-active: rgba(236, 89, 65, 0.32); // Used for the background of an outlined danger (destructive) button in the active state.
@@ -390,12 +388,6 @@ $t-white-a-02: rgba(255, 255, 255, 0.02) !default; // Use color.alpha.light.2 in
390
388
  $t-white-a-04: rgba(255, 255, 255, 0.04) !default; // Use color.alpha.light.4 instead.
391
389
  $t-white-a-06: rgba(255, 255, 255, 0.06) !default; // Use color.alpha.light.6 instead.
392
390
  $t-white-a-08: rgba(255, 255, 255, 0.08) !default; // Use color.alpha.light.8 instead.
393
- $gl-action-neutral-background-color-default: rgba(137, 136, 141, 0); // Used for the background of a neutral action in the default state.
394
- $gl-action-neutral-background-color-hover: rgba(137, 136, 141, 0.4); // Used for the background of a neutral action in the hover state.
395
- $gl-action-neutral-background-color-active: rgba(137, 136, 141, 0.16); // Used for the background of a neutral action in the active state.
396
- $gl-action-confirm-background-color-default: rgba(66, 143, 220, 0); // Used for the background of a confirm (positive) action in the default state.
397
- $gl-action-confirm-background-color-hover: rgba(66, 143, 220, 0.4); // Used for the background of a confirm (positive) action in the hover state.
398
- $gl-action-confirm-background-color-active: rgba(66, 143, 220, 0.16); // Used for the background of a confirm (positive) action in the active state.
399
391
  $gl-action-danger-background-color-default: rgba(236, 89, 65, 0); // Used for the background of a danger (destructive) action in the default state.
400
392
  $gl-action-danger-background-color-hover: rgba(236, 89, 65, 0.4); // Used for the background of a danger (destructive) action in the hover state.
401
393
  $gl-action-danger-background-color-active: rgba(236, 89, 65, 0.16); // Used for the background of a danger (destructive) action in the active state.
@@ -581,23 +573,20 @@ $gl-button-default-primary-background-color-focus: $gl-button-default-primary-ba
581
573
  $gl-button-default-primary-border-color-default: $gl-color-alpha-0; // Used for the border of an default primary button in the default state.
582
574
  $gl-button-default-primary-border-color-hover: $gl-color-alpha-0; // Used for the border of an default primary button in the hover state.
583
575
  $gl-button-default-primary-border-color-active: $gl-color-alpha-0; // Used for the border of an default primary button in the active state.
584
- $gl-button-default-tertiary-background-color-default: $gl-action-neutral-background-color-default; // Used for the background of a default borderless, tertiary button in the default state.
585
- $gl-button-default-tertiary-background-color-hover: $gl-action-neutral-background-color-hover; // Used for the background of a default borderless, tertiary button in the hover state.
586
- $gl-button-default-tertiary-background-color-active: $gl-action-neutral-background-color-active; // Used for the background of a default borderless, tertiary button in the active state.
587
576
  $gl-button-confirm-primary-foreground-color-default: $gl-color-neutral-950; // Used for the foreground of a confirm (positive) primary button in the default state.
577
+ $gl-button-confirm-primary-background-color-default: $gl-color-neutral-50; // Used for the background of a confirm (positive) primary button in the default state.
578
+ $gl-button-confirm-primary-background-color-hover: $gl-color-neutral-10; // Used for the background of a confirm (positive) primary button in the hover state.
579
+ $gl-button-confirm-primary-background-color-active: $gl-color-neutral-100; // Used for the background of a confirm (positive) primary button in the active state.
588
580
  $gl-button-confirm-primary-border-color-default: $gl-color-alpha-0; // Used for the border of a confirm (positive) primary button in the default state.
589
- $gl-button-confirm-primary-border-color-hover: $gl-color-alpha-0; // Used for the border of a confirm (positive) primary button in the hover state.
590
- $gl-button-confirm-primary-border-color-active: $gl-color-alpha-0; // Used for the border of a confirm (positive) primary button in the active state.
591
- $gl-button-confirm-secondary-foreground-color-default: $gl-color-blue-100; // Used for the foreground of a confirm (positive) button in the default state.
592
- $gl-button-confirm-secondary-foreground-color-hover: $gl-color-blue-100; // Used for the foreground of a confirm (positive) button in the hover state.
593
- $gl-button-confirm-secondary-foreground-color-active: $gl-color-blue-100; // Used for the foreground of a confirm (positive) button in the active state.
594
- $gl-button-confirm-secondary-background-color-focus: $gl-button-confirm-secondary-background-color-hover; // Used for the background of an outlined confirm (positive) button in the focus state.
581
+ $gl-button-confirm-secondary-foreground-color-default: $gl-color-neutral-50; // Used for the foreground of a confirm (positive) button in the default state.
582
+ $gl-button-confirm-secondary-foreground-color-hover: $gl-color-neutral-10; // Used for the foreground of a confirm (positive) button in the hover state.
583
+ $gl-button-confirm-secondary-foreground-color-active: $gl-color-neutral-0; // Used for the foreground of a confirm (positive) button in the active state.
584
+ $gl-button-confirm-secondary-background-color-default: $gl-color-alpha-light-24; // Used for the background of an outlined confirm (positive) button in the default state.
585
+ $gl-button-confirm-secondary-background-color-hover: $gl-color-alpha-light-40; // Used for the background of an outlined confirm (positive) button in the hover state.
586
+ $gl-button-confirm-secondary-background-color-active: $gl-color-alpha-light-16; // Used for the background of an outlined confirm (positive) button in the active state.
595
587
  $gl-button-confirm-secondary-border-color-default: $gl-color-alpha-0; // Used for the border of an outlined confirm (positive) button in the default state.
596
588
  $gl-button-confirm-secondary-border-color-hover: $gl-color-alpha-0; // Used for the border of an outlined confirm (positive) button in the hover state.
597
589
  $gl-button-confirm-secondary-border-color-active: $gl-color-alpha-0; // Used for the border of an outlined confirm (positive) button in the active state.
598
- $gl-button-confirm-tertiary-background-color-default: $gl-action-confirm-background-color-default; // Used for the background of a borderless, tertiary confirm (positive) button in the default state.
599
- $gl-button-confirm-tertiary-background-color-hover: $gl-action-confirm-background-color-hover; // Used for the background of a borderless, tertiary confirm (positive) button in the hover state.
600
- $gl-button-confirm-tertiary-background-color-active: $gl-action-confirm-background-color-active; // Used for the background of a borderless, tertiary confirm (positive) button in the active state.
601
590
  $gl-button-danger-primary-foreground-color-default: $gl-color-neutral-950; // Used for the foreground of a danger (destructive) primary button in the default state.
602
591
  $gl-button-danger-primary-background-color-default: $gl-color-red-300; // Used for the background of a danger (destructive) primary button in the default state.
603
592
  $gl-button-danger-primary-background-color-hover: $gl-color-red-200; // Used for the background of a danger (destructive) primary button in the hover state.
@@ -635,9 +624,6 @@ $gl-chart-axis-line-color: $gl-color-neutral-700; // Used in charts for axis lin
635
624
  $gl-chart-threshold-line-color: $gl-color-red-600; // Used in charts to divide a threshold area in a chart from other data.
636
625
  $gl-chart-zoom-filler-color: $gl-color-alpha-light-16; // Used in charts for the overlay color when zooming in on a specific area of data.
637
626
  $gl-datepicker-background-color: $gl-color-neutral-900; // Used for the background color of datepicker.
638
- $gl-dropdown-option-background-color-unselected-default: $gl-action-neutral-background-color-default; // Used for the background of an unselected dropdown option in the default state.
639
- $gl-dropdown-option-background-color-unselected-hover: $gl-action-neutral-background-color-hover; // Used for the background of an unselected dropdown option in the hover state.
640
- $gl-dropdown-option-background-color-unselected-active: $gl-action-neutral-background-color-active; // Used for the background of an unselected dropdown option in the active state.
641
627
  $gl-dropdown-option-background-color-selected-default: $gl-color-neutral-800; // Used for the background of a selected dropdown option in the default state.
642
628
  $gl-dropdown-option-background-color-selected-hover: $gl-color-neutral-700; // Used for the background of a selected dropdown option in the hover state.
643
629
  $gl-dropdown-option-background-color-selected-active: $gl-color-neutral-900; // Used for the background of a selected dropdown option in the active state.
@@ -665,9 +651,6 @@ $gl-link-mention-text-color-current: $gl-color-orange-100; // Used for the menti
665
651
  $gl-link-mention-background-color-default: $gl-color-blue-800; // Used for the mention link default background.
666
652
  $gl-link-mention-background-color-current: $gl-color-orange-800; // Used for the mention link background when referencing the current user.
667
653
  $gl-nav-item-font-size: $gl-font-size-300; // Used for the font size of a navigation item
668
- $gl-nav-item-background-color-default: $gl-action-neutral-background-color-default; // Used for the background of a default navigation item in the default state.
669
- $gl-nav-item-background-color-hover: $gl-action-neutral-background-color-hover; // Used for the background of a default navigation item in the hover state.
670
- $gl-nav-item-background-color-active: $gl-action-neutral-background-color-active; // Used for the background of a default navigation item in the active state.
671
654
  $gl-progress-bar-track-color: $gl-color-neutral-700; // Used for the track color for all progress-bar variants.
672
655
  $gl-skeleton-loader-background-color: $gl-color-neutral-800; // Used for the skeleton loader background color.
673
656
  $gl-skeleton-loader-shimmer-color: $gl-color-neutral-700; // Used for the animated shimmer effect in a skeleton loader.
@@ -675,7 +658,9 @@ $gl-spinner-track-color-default: $gl-color-neutral-600; // Used for the static t
675
658
  $gl-spinner-track-color-light: $gl-color-neutral-800; // Used for the static track (background) of a loading spinner on a dark background.
676
659
  $gl-spinner-segment-color-default: $gl-color-neutral-100; // Used for the animated segment of a loading spinner.
677
660
  $gl-spinner-segment-color-light: $gl-color-neutral-200; // Used for the animated segment of a loading spinner on a dark background.
678
- $gl-tab-selected-indicator-color-default: $gl-color-blue-400; // Used for the selected indicator of a tab.
661
+ $gl-toggle-switch-track-color-checked-default: $gl-color-neutral-50; // Used for the track color of a checked toggle switch in the default state.
662
+ $gl-toggle-switch-track-color-checked-hover: $gl-color-neutral-10; // Used for the track color of a checked toggle switch in the hover state.
663
+ $gl-toggle-switch-track-color-checked-active: $gl-color-neutral-0; // Used for the track color of a checked toggle switch in the active state.
679
664
  $gl-token-selector-token-container-token-background-color-focus: $gl-color-neutral-600; // Used for the background color of a token in a token-selector when it's token-container is in the focus state.
680
665
  $gl-token-background-color: $gl-color-neutral-800; // Used for the token background color.
681
666
  $black: $gl-color-neutral-0 !default;
@@ -747,16 +732,20 @@ $gl-action-disabled-foreground-color: $gl-color-neutral-500; // Used for the for
747
732
  $gl-action-disabled-background-color: $gl-color-neutral-900; // Used for the background of a disabled action.
748
733
  $gl-action-disabled-border-color: $gl-color-neutral-800; // Used for the border of a disabled action.
749
734
  $gl-action-selected-foreground-color-default: $gl-color-neutral-950; // Used for the foreground of a selected action in the default state.
750
- $gl-action-selected-background-color-default: $gl-color-blue-300; // Used for the background of a selected action in the default state.
751
- $gl-action-selected-background-color-hover: $gl-color-blue-200; // Used for the background of a selected action in the hover state.
752
- $gl-action-selected-background-color-active: $gl-color-blue-100; // Used for the background of a selected action in the active state.
735
+ $gl-action-selected-background-color-default: $gl-color-neutral-50; // Used for the background of a selected action in the default state.
736
+ $gl-action-selected-background-color-hover: $gl-color-neutral-10; // Used for the background of a selected action in the hover state.
737
+ $gl-action-selected-background-color-active: $gl-color-neutral-0; // Used for the background of a selected action in the active state.
753
738
  $gl-action-neutral-foreground-color-default: $gl-color-neutral-50; // Used for the foreground of a neutral action in the default state.
754
- $gl-action-neutral-background-color-focus: $gl-action-neutral-background-color-hover; // Used for the background of a neutral action in the focus state.
739
+ $gl-action-neutral-background-color-default: $gl-color-alpha-0; // Used for the background of a neutral action in the default state.
740
+ $gl-action-neutral-background-color-hover: $gl-color-alpha-light-16; // Used for the background of a neutral action in the hover state.
741
+ $gl-action-neutral-background-color-active: $gl-color-alpha-light-8; // Used for the background of a neutral action in the active state.
755
742
  $gl-action-neutral-border-color-default: $gl-color-alpha-0; // Used for the border of a neutral action in the default state.
756
- $gl-action-confirm-foreground-color-default: $gl-color-blue-200; // Used for the foreground of a confirm (positive) action in the default state.
757
- $gl-action-confirm-foreground-color-hover: $gl-color-blue-100; // Used for the foreground of a confirm (positive) action in the hover state.
758
- $gl-action-confirm-foreground-color-active: $gl-color-blue-100; // Used for the foreground of a confirm (positive) action in the active state.
759
- $gl-action-confirm-background-color-focus: $gl-action-confirm-background-color-hover; // Used for the background of a confirm (positive) action in the focus state.
743
+ $gl-action-confirm-foreground-color-default: $gl-color-neutral-50; // Used for the foreground of a confirm (positive) action in the default state.
744
+ $gl-action-confirm-foreground-color-hover: $gl-color-neutral-10; // Used for the foreground of a confirm (positive) action in the hover state.
745
+ $gl-action-confirm-foreground-color-active: $gl-color-neutral-0; // Used for the foreground of a confirm (positive) action in the active state.
746
+ $gl-action-confirm-background-color-default: $gl-color-alpha-0; // Used for the background of a confirm (positive) action in the default state.
747
+ $gl-action-confirm-background-color-hover: $gl-color-alpha-light-16; // Used for the background of a confirm (positive) action in the hover state.
748
+ $gl-action-confirm-background-color-active: $gl-color-alpha-light-8; // Used for the background of a confirm (positive) action in the active state.
760
749
  $gl-action-confirm-border-color-default: $gl-color-alpha-0; // Used for the border of a confirm action in the default state.
761
750
  $gl-action-danger-foreground-color-default: $gl-color-red-200; // Used for the foreground of a danger (destructive) action in the default state.
762
751
  $gl-action-danger-foreground-color-hover: $gl-color-red-100; // Used for the foreground of a danger (destructive) action in the hover state.
@@ -786,16 +775,12 @@ $gl-control-background-color-default: $gl-color-alpha-dark-40; // Used for form
786
775
  $gl-control-background-color-disabled: $gl-color-alpha-light-4; // Used for disabled form control (checkbox, input, radio button, textarea) background.
787
776
  $gl-control-background-color-concatenation: $gl-color-alpha-light-4; // Used for the background of static content that prepends or appends a text input.
788
777
  $gl-control-background-color-readonly: $gl-color-alpha-light-8; // Used for the background of static content that prepends or appends a text input.
789
- $gl-control-background-color-selected-default: $gl-color-blue-300; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
790
- $gl-control-background-color-selected-hover: $gl-color-blue-200; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
791
- $gl-control-background-color-selected-focus: $gl-color-blue-200; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
778
+ $gl-control-background-color-selected-default: $gl-color-neutral-50; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
779
+ $gl-control-background-color-selected-hover: $gl-color-neutral-10; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
792
780
  $gl-control-border-color-default: $gl-color-neutral-500; // Used for form control (input, radio button, checkbox, textarea) default border.
793
781
  $gl-control-border-color-hover: $gl-color-neutral-300; // Used for form control (input, radio button, checkbox, textarea) border on hover.
794
782
  $gl-control-border-color-focus: $gl-color-neutral-50; // Used for form control (input, radio button, checkbox, textarea) border on focus.
795
783
  $gl-control-border-color-disabled: $gl-color-neutral-800; // Used for disabled form control (input, radio button, checkbox, textarea) border.
796
- $gl-control-border-color-selected-default: $gl-color-blue-400; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border.
797
- $gl-control-border-color-selected-hover: $gl-color-blue-200; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.
798
- $gl-control-border-color-selected-focus: $gl-color-blue-200; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
799
784
  $gl-control-placeholder-color: $gl-color-neutral-400; // Used for placeholder text within inputs.
800
785
  $gl-control-indicator-color-selected: $gl-color-neutral-950; // Used for checkbox and radio button state indicators.
801
786
  $gl-control-indicator-color-disabled: $gl-color-neutral-400; // Used for disabled checkbox and radio button state indicators.
@@ -968,18 +953,24 @@ $gl-button-default-primary-foreground-color-focus: $gl-button-default-primary-fo
968
953
  $gl-button-default-primary-foreground-color-active: $gl-button-default-primary-foreground-color-default; // Used for the foreground of a default primary button in the active state.
969
954
  $gl-button-default-primary-border-color-focus: $gl-button-default-primary-border-color-hover; // Used for the border of an default primary button in the focus state.
970
955
  $gl-button-default-tertiary-foreground-color-default: $gl-action-neutral-foreground-color-default; // Used for the foreground of a default borderless, tertiary button in the default state.
971
- $gl-button-default-tertiary-background-color-focus: $gl-action-neutral-background-color-focus; // Used for the background of a default borderless, tertiary button in the focus state.
956
+ $gl-button-default-tertiary-background-color-default: $gl-action-neutral-background-color-default; // Used for the background of a default borderless, tertiary button in the default state.
957
+ $gl-button-default-tertiary-background-color-hover: $gl-action-neutral-background-color-hover; // Used for the background of a default borderless, tertiary button in the hover state.
958
+ $gl-button-default-tertiary-background-color-active: $gl-action-neutral-background-color-active; // Used for the background of a default borderless, tertiary button in the active state.
972
959
  $gl-button-default-tertiary-border-color-default: $gl-action-neutral-border-color-default; // Used for the border of a default borderless, tertiary button in the default state.
973
- $gl-button-confirm-primary-background-color-default: $gl-action-strong-confirm-background-color-default; // Used for the background of a confirm (positive) primary button in the default state.
974
- $gl-button-confirm-primary-background-color-hover: $gl-action-strong-confirm-background-color-hover; // Used for the background of a confirm (positive) primary button in the hover state.
975
- $gl-button-confirm-primary-background-color-active: $gl-action-strong-confirm-background-color-active; // Used for the background of a confirm (positive) primary button in the active state.
976
- $gl-button-confirm-primary-border-color-focus: $gl-button-confirm-primary-border-color-hover; // Used for the border of a confirm (positive) primary button in the focus state.
960
+ $gl-button-confirm-primary-foreground-color-hover: $gl-button-confirm-primary-foreground-color-default; // Used for the foreground of a confirm (positive) primary button in the hover state.
961
+ $gl-button-confirm-primary-background-color-focus: $gl-button-confirm-primary-background-color-hover; // Used for the background of a confirm (positive) primary button in the focus state.
962
+ $gl-button-confirm-primary-border-color-hover: $gl-button-confirm-primary-border-color-default; // Used for the border of a confirm (positive) primary button in the hover state.
963
+ $gl-button-confirm-primary-border-color-focus: $gl-button-confirm-primary-border-color-default; // Used for the border of a confirm (positive) primary button in the focus state.
964
+ $gl-button-confirm-primary-border-color-active: $gl-button-confirm-primary-border-color-default; // Used for the border of a confirm (positive) primary button in the active state.
977
965
  $gl-button-confirm-secondary-foreground-color-focus: $gl-button-confirm-secondary-foreground-color-hover; // Used for the foreground of a confirm (positive) button in the focus state.
966
+ $gl-button-confirm-secondary-background-color-focus: $gl-button-confirm-secondary-background-color-hover; // Used for the background of an outlined confirm (positive) button in the focus state.
978
967
  $gl-button-confirm-secondary-border-color-focus: $gl-button-confirm-secondary-border-color-hover; // Used for the border of an outlined confirm (positive) button in the focus state.
979
968
  $gl-button-confirm-tertiary-foreground-color-default: $gl-action-confirm-foreground-color-default; // Used for the foreground of a borderless, tertiary confirm (positive) button in the default state.
980
969
  $gl-button-confirm-tertiary-foreground-color-hover: $gl-action-confirm-foreground-color-hover; // Used for the foreground of a borderless, tertiary confirm (positive) button in the hover state.
981
970
  $gl-button-confirm-tertiary-foreground-color-active: $gl-action-confirm-foreground-color-active; // Used for the foreground of a borderless, tertiary confirm (positive) button in the active state.
982
- $gl-button-confirm-tertiary-background-color-focus: $gl-action-confirm-background-color-focus; // Used for the background of a borderless, tertiary confirm (positive) button in the focus state.
971
+ $gl-button-confirm-tertiary-background-color-default: $gl-action-confirm-background-color-default; // Used for the background of a borderless, tertiary confirm (positive) button in the default state.
972
+ $gl-button-confirm-tertiary-background-color-hover: $gl-action-confirm-background-color-hover; // Used for the background of a borderless, tertiary confirm (positive) button in the hover state.
973
+ $gl-button-confirm-tertiary-background-color-active: $gl-action-confirm-background-color-active; // Used for the background of a borderless, tertiary confirm (positive) button in the active state.
983
974
  $gl-button-confirm-tertiary-border-color-default: $gl-action-confirm-border-color-default; // Used for the border of a borderless, tertiary confirm (positive) button in the default state.
984
975
  $gl-button-danger-primary-foreground-color-hover: $gl-button-danger-primary-foreground-color-default; // Used for the foreground of a danger (destructive) primary button in the hover state.
985
976
  $gl-button-danger-primary-foreground-color-focus: $gl-button-danger-primary-foreground-color-default; // Used for the foreground of a danger (destructive) primary button in the focus state.
@@ -1010,13 +1001,15 @@ $gl-dropdown-option-text-color-default: $gl-action-neutral-foreground-color-defa
1010
1001
  $gl-dropdown-option-text-color-disabled: $gl-action-disabled-foreground-color; // Used for the text of a dropdown option in the disabled state.
1011
1002
  $gl-dropdown-option-indicator-color-selected-default: $gl-control-background-color-selected-default; // Used for the dropdown selected option indicator in the default state.
1012
1003
  $gl-dropdown-option-indicator-color-selected-hover: $gl-control-background-color-selected-hover; // Used for the dropdown selected option indicator in the hover state.
1013
- $gl-dropdown-option-indicator-color-selected-focus: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the focus state.
1014
- $gl-dropdown-option-indicator-color-selected-active: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the active state.
1015
- $gl-dropdown-option-background-color-unselected-focus: $gl-action-neutral-background-color-focus; // Used for the background of an unselected dropdown option in the focus state.
1004
+ $gl-dropdown-option-background-color-unselected-default: $gl-action-neutral-background-color-default; // Used for the background of an unselected dropdown option in the default state.
1005
+ $gl-dropdown-option-background-color-unselected-hover: $gl-action-neutral-background-color-hover; // Used for the background of an unselected dropdown option in the hover state.
1006
+ $gl-dropdown-option-background-color-unselected-active: $gl-action-neutral-background-color-active; // Used for the background of an unselected dropdown option in the active state.
1016
1007
  $gl-dropdown-option-background-color-selected-focus: $gl-dropdown-option-background-color-selected-hover; // Used for the background of a selected dropdown option in the focus state.
1017
1008
  $gl-modal-border-radius: $gl-border-radius-2xl; // Used for modal border radius.
1018
1009
  $gl-nav-item-foreground-color-default: $gl-action-neutral-foreground-color-default; // Used for the foreground of a default navigation item in the default state.
1019
- $gl-nav-item-background-color-focus: $gl-action-neutral-background-color-focus; // Used for the background of a default navigation item in the focus state.
1010
+ $gl-nav-item-background-color-default: $gl-action-neutral-background-color-default; // Used for the background of a default navigation item in the default state.
1011
+ $gl-nav-item-background-color-hover: $gl-action-neutral-background-color-hover; // Used for the background of a default navigation item in the hover state.
1012
+ $gl-nav-item-background-color-active: $gl-action-neutral-background-color-active; // Used for the background of a default navigation item in the active state.
1020
1013
  $gl-nav-item-selected-foreground-color-default: $gl-action-selected-foreground-color-default; // Used for the foreground of a selected navigation item in the default state.
1021
1014
  $gl-nav-item-selected-background-color-default: $gl-action-selected-background-color-default; // Used for the background of a selected navigation item in the default state.
1022
1015
  $gl-nav-item-selected-background-color-hover: $gl-action-selected-background-color-hover; // Used for the background of a selected navigation item in the hover state.
@@ -1027,6 +1020,14 @@ $gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used
1027
1020
  $gl-progress-bar-indicator-color-danger: $gl-status-danger-icon-color; // Used for the indicator color for the danger progress-bar variant.
1028
1021
  $gl-table-row-background-color-hover: $gl-highlight-target-background-color; // Used for the background of a table row in hover state.
1029
1022
  $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
1023
+ $gl-toggle-switch-track-color-unchecked-default: $gl-control-border-color-default; // Used for the track color of an unchecked toggle switch in the default state.
1024
+ $gl-toggle-switch-track-color-unchecked-hover: $gl-control-border-color-hover; // Used for the track color of an unchecked toggle switch in the hover state.
1025
+ $gl-toggle-switch-track-color-unchecked-focus: $gl-control-border-color-focus; // Used for the track color of an unchecked toggle switch in the focus state.
1026
+ $gl-toggle-switch-track-color-unchecked-active: $gl-control-border-color-focus; // Used for the track color of an unchecked toggle switch in the active state.
1027
+ $gl-toggle-switch-track-color-checked-focus: $gl-toggle-switch-track-color-checked-hover; // Used for the track color of a checked toggle switch in the focus state.
1028
+ $gl-toggle-switch-background-color-unchecked-default: $gl-control-indicator-color-selected; // Used for the background color of the unchecked toggle switch thumb in the default state.
1029
+ $gl-toggle-switch-background-color-checked-default: $gl-action-strong-confirm-foreground-color-default; // Used for the background color of the checked toggle switch thumb in the default state.
1030
+ $gl-toggle-switch-background-color-disabled: $gl-action-disabled-foreground-color; // Used for the background color of the toggle switch thumb in the disabled state.
1030
1031
  $gl-toggle-switch-icon-color-unchecked-default: $gl-action-strong-neutral-background-color-default; // Used for the icon color of an unchecked toggle switch in the default state.
1031
1032
  $gl-toggle-switch-icon-color-unchecked-hover: $gl-action-strong-neutral-background-color-hover; // Used for the icon color of an unchecked toggle switch in the hover state.
1032
1033
  $gl-toggle-switch-icon-color-unchecked-active: $gl-action-strong-neutral-background-color-active; // Used for the icon color of an unchecked toggle switch in the active state.
@@ -1044,10 +1045,12 @@ $gl-action-selected-border-color-active: $gl-action-selected-background-color-ac
1044
1045
  $gl-action-neutral-foreground-color-hover: $gl-action-neutral-foreground-color-default; // Used for the foreground of a neutral action in the hover state.
1045
1046
  $gl-action-neutral-foreground-color-focus: $gl-action-neutral-foreground-color-default; // Used for the foreground of a neutral action in the focus state.
1046
1047
  $gl-action-neutral-foreground-color-active: $gl-action-neutral-foreground-color-default; // Used for the foreground of a neutral action in the active state.
1048
+ $gl-action-neutral-background-color-focus: $gl-action-neutral-background-color-hover; // Used for the background of a neutral action in the focus state.
1047
1049
  $gl-action-neutral-border-color-hover: $gl-action-neutral-border-color-default; // Used for the border of a neutral action in the hover state.
1048
1050
  $gl-action-neutral-border-color-focus: $gl-action-neutral-border-color-default; // Used for the border of a neutral action in the focus state.
1049
1051
  $gl-action-neutral-border-color-active: $gl-action-neutral-border-color-default; // Used for the border of a neutral action in the active state.
1050
1052
  $gl-action-confirm-foreground-color-focus: $gl-action-confirm-foreground-color-hover; // Used for the foreground of a confirm (positive) action in the focus state.
1053
+ $gl-action-confirm-background-color-focus: $gl-action-confirm-background-color-hover; // Used for the background of a confirm (positive) action in the focus state.
1051
1054
  $gl-action-confirm-border-color-hover: $gl-action-confirm-border-color-default; // Used for the border of a confirm action in the hover state.
1052
1055
  $gl-action-confirm-border-color-focus: $gl-action-confirm-border-color-default; // Used for the border of a confirm action in the focus state.
1053
1056
  $gl-action-confirm-border-color-active: $gl-action-confirm-border-color-default; // Used for the border of a confirm action in the active state.
@@ -1060,7 +1063,10 @@ $gl-action-strong-confirm-foreground-color-hover: $gl-action-strong-confirm-fore
1060
1063
  $gl-action-strong-confirm-border-color-hover: $gl-action-strong-confirm-border-color-default; // Used for the border of a strong confirm action in the hover state.
1061
1064
  $gl-action-strong-neutral-background-color-focus: $gl-action-strong-neutral-background-color-hover; // Used for the background of a strong neutral action in the focus state.
1062
1065
  $gl-action-strong-neutral-border-color-hover: $gl-action-strong-neutral-border-color-default; // Used for the border of a strong neutral action in the hover state.
1066
+ $gl-control-background-color-selected-focus: $gl-control-background-color-selected-hover; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on focus.
1063
1067
  $gl-control-border-color-error: $gl-feedback-danger-border-color; // Used for invalid form control (input, textarea) border.
1068
+ $gl-control-border-color-selected-default: $gl-control-background-color-selected-default; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border.
1069
+ $gl-control-border-color-selected-hover: $gl-control-background-color-selected-hover; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.
1064
1070
  $gl-control-border-radius: $gl-border-radius-lg; // Used for form control (input, radio button, checkbox, textarea) default border radius.
1065
1071
  $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text when the input is invalid.
1066
1072
  $gl-control-text-color-valid: $gl-text-color-success; // Used for the helper text when the input is valid.
@@ -1189,12 +1195,13 @@ $gl-button-border-radius: $gl-action-border-radius; // Used for button border ra
1189
1195
  $gl-button-default-tertiary-foreground-color-hover: $gl-action-neutral-foreground-color-hover; // Used for the foreground of a default borderless, tertiary button in the hover state.
1190
1196
  $gl-button-default-tertiary-foreground-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the foreground of a default borderless, tertiary button in the focus state.
1191
1197
  $gl-button-default-tertiary-foreground-color-active: $gl-action-neutral-foreground-color-active; // Used for the foreground of a default borderless, tertiary button in the active state.
1198
+ $gl-button-default-tertiary-background-color-focus: $gl-action-neutral-background-color-focus; // Used for the background of a default borderless, tertiary button in the focus state.
1192
1199
  $gl-button-default-tertiary-border-color-hover: $gl-action-neutral-border-color-hover; // Used for the border of a default borderless, tertiary button in the hover state.
1193
1200
  $gl-button-default-tertiary-border-color-focus: $gl-action-neutral-border-color-focus; // Used for the border of a default borderless, tertiary button in the focus state.
1194
1201
  $gl-button-default-tertiary-border-color-active: $gl-action-neutral-border-color-active; // Used for the border of a default borderless, tertiary button in the active state.
1195
- $gl-button-confirm-primary-foreground-color-hover: $gl-action-strong-confirm-foreground-color-hover; // Used for the foreground of a confirm (positive) primary button in the hover state.
1196
- $gl-button-confirm-primary-background-color-focus: $gl-action-strong-confirm-background-color-focus; // Used for the background of a confirm (positive) primary button in the focus state.
1202
+ $gl-button-confirm-primary-foreground-color-focus: $gl-button-confirm-primary-foreground-color-hover; // Used for the foreground of a confirm (positive) primary button in the focus state.
1197
1203
  $gl-button-confirm-tertiary-foreground-color-focus: $gl-action-confirm-foreground-color-focus; // Used for the foreground of a borderless, tertiary confirm (positive) button in the focus state.
1204
+ $gl-button-confirm-tertiary-background-color-focus: $gl-action-confirm-background-color-focus; // Used for the background of a borderless, tertiary confirm (positive) button in the focus state.
1198
1205
  $gl-button-confirm-tertiary-border-color-hover: $gl-action-confirm-border-color-hover; // Used for the border of a borderless, tertiary confirm (positive) button in the hover state.
1199
1206
  $gl-button-confirm-tertiary-border-color-focus: $gl-action-confirm-border-color-focus; // Used for the border of a borderless, tertiary confirm (positive) button in the focus state.
1200
1207
  $gl-button-confirm-tertiary-border-color-active: $gl-action-confirm-border-color-active; // Used for the border of a borderless, tertiary confirm (positive) button in the active state.
@@ -1210,12 +1217,21 @@ $gl-chart-zoom-handle-color: $gl-icon-color-subtle; // Used in charts for the ha
1210
1217
  $gl-dropdown-option-text-color-hover: $gl-action-neutral-foreground-color-hover; // Used for the text of a dropdown option in the hover state.
1211
1218
  $gl-dropdown-option-text-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the text of a dropdown option in the focus state.
1212
1219
  $gl-dropdown-option-text-color-active: $gl-action-neutral-foreground-color-active; // Used for the text of a dropdown option in the active state.
1220
+ $gl-dropdown-option-indicator-color-selected-focus: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the focus state.
1221
+ $gl-dropdown-option-indicator-color-selected-active: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the active state.
1222
+ $gl-dropdown-option-background-color-unselected-focus: $gl-action-neutral-background-color-focus; // Used for the background of an unselected dropdown option in the focus state.
1213
1223
  $gl-nav-item-border-radius: $gl-action-border-radius; // Used for the border radius of a navigation item
1214
1224
  $gl-nav-item-foreground-color-hover: $gl-action-neutral-foreground-color-hover; // Used for the foreground of a default navigation item in the hover state.
1215
1225
  $gl-nav-item-foreground-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the foreground of a default navigation item in the focus state.
1216
1226
  $gl-nav-item-foreground-color-active: $gl-action-neutral-foreground-color-active; // Used for the foreground of a default navigation item in the active state.
1227
+ $gl-nav-item-background-color-focus: $gl-action-neutral-background-color-focus; // Used for the background of a default navigation item in the focus state.
1217
1228
  $gl-nav-item-selected-foreground-color-hover: $gl-action-selected-foreground-color-hover; // Used for the foreground of a selected navigation item in the hover state.
1218
1229
  $gl-nav-item-selected-background-color-focus: $gl-action-selected-background-color-focus; // Used for the background of a selected navigation item in the focus state.
1230
+ $gl-tab-selected-indicator-color-default: $gl-action-selected-border-color-active; // Used for the selected indicator of a tab.
1231
+ $gl-toggle-switch-background-color-unchecked-hover: $gl-toggle-switch-background-color-unchecked-default; // Used for the background color of the unchecked toggle switch thumb in the hover state.
1232
+ $gl-toggle-switch-background-color-unchecked-focus: $gl-toggle-switch-background-color-unchecked-default; // Used for the background color of the unchecked toggle switch thumb in the focus state.
1233
+ $gl-toggle-switch-background-color-unchecked-active: $gl-toggle-switch-background-color-unchecked-default; // Used for the background color of the unchecked toggle switch thumb in the active state.
1234
+ $gl-toggle-switch-background-color-checked-hover: $gl-action-strong-confirm-foreground-color-hover; // Used for the background color of the checked toggle switch thumb in the hover state.
1219
1235
  $gl-toggle-switch-icon-color-unchecked-focus: $gl-action-strong-neutral-background-color-focus; // Used for the icon color of an unchecked toggle switch in the focus state.
1220
1236
  $gl-toggle-switch-icon-color-checked-focus: $gl-action-strong-confirm-background-color-focus; // Used for the icon color of a checked toggle switch in the focus state.
1221
1237
  $gl-token-border-radius: $gl-border-radius-default; // Used for token border radius.
@@ -1224,11 +1240,13 @@ $gl-action-selected-border-color-focus: $gl-action-selected-background-color-foc
1224
1240
  $gl-action-strong-confirm-foreground-color-focus: $gl-action-strong-confirm-foreground-color-hover; // Used for the foreground of a strong confirm action in the focus state.
1225
1241
  $gl-action-strong-confirm-border-color-focus: $gl-action-strong-confirm-border-color-hover; // Used for the border of a strong confirm action in the focus state.
1226
1242
  $gl-action-strong-neutral-border-color-focus: $gl-action-strong-neutral-border-color-hover; // Used for the border of a strong neutral action in the focus state.
1227
- $gl-button-confirm-primary-foreground-color-focus: $gl-action-strong-confirm-foreground-color-focus; // Used for the foreground of a confirm (positive) primary button in the focus state.
1243
+ $gl-control-border-color-selected-focus: $gl-control-background-color-selected-focus; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
1244
+ $gl-button-confirm-primary-foreground-color-active: $gl-button-confirm-primary-foreground-color-focus; // Used for the foreground of a confirm (positive) primary button in the active state.
1228
1245
  $gl-nav-item-selected-foreground-color-focus: $gl-action-selected-foreground-color-focus; // Used for the foreground of a selected navigation item in the focus state.
1246
+ $gl-toggle-switch-background-color-checked-focus: $gl-action-strong-confirm-foreground-color-focus; // Used for the background color of the checked toggle switch thumb in the focus state.
1229
1247
  $gl-action-selected-foreground-color-active: $gl-action-selected-foreground-color-focus; // Used for the foreground of a selected action in the active state.
1230
1248
  $gl-action-strong-confirm-foreground-color-active: $gl-action-strong-confirm-foreground-color-focus; // Used for the foreground of a strong confirm action in the active state.
1231
1249
  $gl-action-strong-confirm-border-color-active: $gl-action-strong-confirm-border-color-focus; // Used for the border of a strong confirm action in the active state.
1232
1250
  $gl-action-strong-neutral-border-color-active: $gl-action-strong-neutral-border-color-focus; // Used for the border of a strong neutral action in the active state.
1233
- $gl-button-confirm-primary-foreground-color-active: $gl-action-strong-confirm-foreground-color-active; // Used for the foreground of a confirm (positive) primary button in the active state.
1234
1251
  $gl-nav-item-selected-foreground-color-active: $gl-action-selected-foreground-color-active; // Used for the foreground of a selected navigation item in the active state.
1252
+ $gl-toggle-switch-background-color-checked-active: $gl-action-strong-confirm-foreground-color-active; // Used for the background color of the checked toggle switch thumb in the active state.