@gitlab/ui 136.2.0 → 136.3.1

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 (28) hide show
  1. package/dist/components/base/filtered_search/filtered_search_term.js +1 -1
  2. package/dist/components/base/form/form_date/form_date.js +9 -1
  3. package/dist/components/base/sorting/sorting.js +2 -2
  4. package/dist/components/base/toggle/toggle.js +1 -0
  5. package/dist/index.css +2 -2
  6. package/dist/index.css.map +1 -1
  7. package/dist/tokens/build/js/tokens.dark.js +35 -17
  8. package/dist/tokens/build/js/tokens.js +35 -17
  9. package/package.json +1 -1
  10. package/src/components/base/filtered_search/filtered_search_term.vue +0 -1
  11. package/src/components/base/form/form_date/form_date.vue +9 -0
  12. package/src/components/base/sorting/sorting.vue +3 -2
  13. package/src/components/base/toggle/toggle.scss +90 -22
  14. package/src/components/base/toggle/toggle.vue +1 -0
  15. package/src/tokens/build/css/tokens.css +40 -22
  16. package/src/tokens/build/css/tokens.dark.css +40 -22
  17. package/src/tokens/build/figma/mode.dark.json +200 -24
  18. package/src/tokens/build/figma/mode.json +200 -24
  19. package/src/tokens/build/js/tokens.dark.js +34 -16
  20. package/src/tokens/build/js/tokens.js +34 -16
  21. package/src/tokens/build/json/tokens.dark.json +687 -42
  22. package/src/tokens/build/json/tokens.json +687 -42
  23. package/src/tokens/build/scss/_tokens.dark.scss +40 -22
  24. package/src/tokens/build/scss/_tokens.scss +40 -22
  25. package/src/tokens/build/scss/_tokens_custom_properties.scss +18 -0
  26. package/src/tokens/contextual/application-chrome.tokens.json +20 -0
  27. package/src/tokens/contextual/toggle.tokens.json +198 -33
  28. package/src/tokens/semantic/action.tokens.json +14 -0
package/src/tokens/build/scss/_tokens.dark.scss CHANGED
@@ -447,6 +447,7 @@ $gl-alert-warning-border-bottom-color: $gl-color-alpha-0; // Used for the border
447
447
  $gl-alert-danger-title-color: $gl-color-red-300; // Used for the title color of a danger alert.
448
448
  $gl-alert-danger-border-top-color: $gl-color-red-400; // Used for the border color of a danger alert.
449
449
  $gl-alert-danger-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a danger alert.
450
+ $gl-application-chrome-background-color: $gl-color-neutral-1000; // Used for the application chrome background, the lowest layer of the interface that sits beneath panels and contains global navigation, user actions, application navigation, and AI navigation.
450
451
  $gl-avatar-border-color-default: $gl-color-alpha-light-8; // Used to define the edge of an avatar.
451
452
  $gl-avatar-border-color-hover: $gl-color-alpha-light-24; // Used to increase the edge definition of an avatar in the hover state.
452
453
  $gl-avatar-circle-border-radius-default: $gl-border-radius-full; // Border radius for cirlce avatars at all sizes.
@@ -666,9 +667,6 @@ $gl-spinner-track-color-default: $gl-color-neutral-600; // Used for the static t
666
667
  $gl-spinner-track-color-light: $gl-color-neutral-800; // Used for the static track (background) of a loading spinner on a dark background.
667
668
  $gl-spinner-segment-color-default: $gl-color-neutral-100; // Used for the animated segment of a loading spinner.
668
669
  $gl-spinner-segment-color-light: $gl-color-neutral-200; // Used for the animated segment of a loading spinner on a dark background.
669
- $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.
670
- $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.
671
- $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.
672
670
  $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.
673
671
  $gl-token-background-color: $gl-color-neutral-800; // Used for the token background color.
674
672
  $gl-tooltip-text-color-subtle: $gl-color-neutral-200; // Used for supplemental tooltip text that is less prominent than the default text and remains the same color regardless of mode.
@@ -744,6 +742,7 @@ $gl-action-selected-foreground-color-default: $gl-color-neutral-950; // Used for
744
742
  $gl-action-selected-background-color-default: $gl-color-neutral-50; // Used for the background of a selected action in the default state.
745
743
  $gl-action-selected-background-color-hover: $gl-color-neutral-10; // Used for the background of a selected action in the hover state.
746
744
  $gl-action-selected-background-color-active: $gl-color-neutral-0; // Used for the background of a selected action in the active state.
745
+ $gl-action-selected-background-color-disabled: $gl-color-neutral-500; // Used for the background of a disabled action that stays selected. Sits between the disabled background and the enabled selected background so the selected state keeps 3:1 contrast against the page while still reading as disabled.
747
746
  $gl-action-neutral-foreground-color-default: $gl-color-neutral-50; // Used for the foreground of a neutral action in the default state.
748
747
  $gl-action-neutral-background-color-default: $gl-color-alpha-0; // Used for the background of a neutral action in the default state.
749
748
  $gl-action-neutral-background-color-hover: $gl-color-alpha-light-16; // Used for the background of a neutral action in the hover state.
@@ -1026,17 +1025,25 @@ $gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used
1026
1025
  $gl-progress-bar-indicator-color-danger: $gl-status-danger-icon-color; // Used for the indicator color for the danger progress-bar variant.
1027
1026
  $gl-table-row-background-color-hover: $gl-highlight-target-background-color; // Used for the background of a table row in hover state.
1028
1027
  $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
1029
- $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.
1030
- $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.
1031
- $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.
1032
- $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.
1033
- $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.
1034
- $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.
1035
- $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.
1036
- $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.
1037
- $gl-toggle-switch-icon-color-checked-default: $gl-action-strong-confirm-background-color-default; // Used for the icon color of a checked toggle switch in the default state.
1038
- $gl-toggle-switch-icon-color-checked-hover: $gl-action-strong-confirm-background-color-hover; // Used for the icon color of a checked toggle switch in the hover state.
1039
- $gl-toggle-switch-icon-color-checked-active: $gl-action-strong-confirm-background-color-active; // Used for the icon color of a checked toggle switch in the active state.
1028
+ $gl-toggle-switch-track-color-unchecked-default: $gl-control-background-color-default; // Used for the track color of an unchecked toggle switch in the default state.
1029
+ $gl-toggle-switch-track-color-unchecked-active: $gl-action-neutral-background-color-active; // Used for the track color of an unchecked toggle switch in the active state.
1030
+ $gl-toggle-switch-track-color-unchecked-disabled: $gl-control-background-color-default; // Used for the track color of a disabled unchecked toggle switch.
1031
+ $gl-toggle-switch-track-color-checked-default: $gl-action-selected-background-color-default; // Used for the track color of a checked toggle switch in the default state.
1032
+ $gl-toggle-switch-track-color-checked-hover: $gl-action-selected-background-color-hover; // Used for the track color of a checked toggle switch in the hover state.
1033
+ $gl-toggle-switch-track-color-checked-active: $gl-action-selected-background-color-active; // Used for the track color of a checked toggle switch in the active state.
1034
+ $gl-toggle-switch-track-color-checked-disabled: $gl-action-selected-background-color-disabled; // Used for the track color of a disabled checked toggle switch, which stays filled so the checked state remains legible.
1035
+ $gl-toggle-switch-track-color-loading: $gl-action-disabled-background-color; // Used for the track color of a loading toggle switch. A loading toggle renders no thumb and its value is still in flight, so the track carries no checked state.
1036
+ $gl-toggle-switch-track-border-color-unchecked-default: $gl-control-border-color-default; // Used for the track border color of an unchecked toggle switch in the default state.
1037
+ $gl-toggle-switch-track-border-color-unchecked-hover: $gl-control-border-color-hover; // Used for the track border color of an unchecked toggle switch in the hover state.
1038
+ $gl-toggle-switch-track-border-color-unchecked-disabled: $gl-action-disabled-border-color; // Used for the track border color of a disabled unchecked toggle switch.
1039
+ $gl-toggle-switch-background-color-unchecked-default: $gl-action-selected-background-color-default; // Used for the background color of the unchecked toggle switch thumb in the default state.
1040
+ $gl-toggle-switch-background-color-unchecked-disabled: $gl-action-disabled-foreground-color; // Used for the background color of the disabled unchecked toggle switch thumb.
1041
+ $gl-toggle-switch-background-color-checked-default: $gl-action-selected-foreground-color-default; // Used for the background color of the checked toggle switch thumb in the default state.
1042
+ $gl-toggle-switch-background-color-checked-disabled: $gl-action-selected-foreground-color-default; // Used for the background color of the disabled checked toggle switch thumb.
1043
+ $gl-toggle-switch-icon-color-unchecked-default: $gl-action-selected-foreground-color-default; // Used for the icon color of an unchecked toggle switch in the default state.
1044
+ $gl-toggle-switch-icon-color-checked-default: $gl-action-selected-background-color-default; // Used for the icon color of a checked toggle switch in the default state.
1045
+ $gl-toggle-switch-icon-color-checked-hover: $gl-action-selected-background-color-hover; // Used for the icon color of a checked toggle switch in the hover state.
1046
+ $gl-toggle-switch-icon-color-checked-active: $gl-action-selected-background-color-active; // Used for the icon color of a checked toggle switch in the active state.
1040
1047
  $gl-toggle-switch-icon-color-disabled: $gl-action-disabled-background-color; // Used for the icon color of a disabled toggle switch.
1041
1048
  $gl-token-foreground-color: $gl-text-color-default; // Used for the token foreground color.
1042
1049
  $gl-action-border-radius: $gl-border-radius-lg; // Used for the border radius of an action.
@@ -1228,13 +1235,21 @@ $gl-nav-item-foreground-color-active: $gl-nav-item-foreground-color-focus; // Us
1228
1235
  $gl-nav-item-selected-foreground-color-focus: $gl-nav-item-foreground-color-focus; // Used for the foreground of a selected navigation item in the focus state.
1229
1236
  $gl-nav-item-selected-background-color-focus: $gl-nav-item-background-color-focus; // Used for the background of a selected navigation item in the focus state.
1230
1237
  $gl-tab-selected-indicator-color-default: $gl-action-selected-border-color-active; // Used for the selected indicator of a tab.
1231
- $gl-toggle-switch-track-color-unchecked-hover: $gl-toggle-switch-track-color-unchecked-default; // Used for the track color of an unchecked toggle switch in the hover state.
1238
+ $gl-toggle-switch-track-color-unchecked-hover: $gl-toggle-switch-track-color-unchecked-default; // Used for the track color of an unchecked toggle switch in the hover state. The track is deliberately unchanged from the default state; hover is carried by the track border and the thumb size.
1239
+ $gl-toggle-switch-track-color-checked-focus: $gl-action-selected-background-color-focus; // Used for the track color of a checked toggle switch in the focus state.
1240
+ $gl-toggle-switch-track-border-color-unchecked-focus: $gl-toggle-switch-track-border-color-unchecked-hover; // Used for the track border color of an unchecked toggle switch in the focus state.
1241
+ $gl-toggle-switch-track-border-color-checked-default: $gl-action-selected-border-color-default; // Used for the track border color of a checked toggle switch in the default state.
1242
+ $gl-toggle-switch-track-border-color-checked-hover: $gl-action-selected-border-color-hover; // Used for the track border color of a checked toggle switch in the hover state.
1243
+ $gl-toggle-switch-track-border-color-checked-active: $gl-action-selected-border-color-active; // Used for the track border color of a checked toggle switch in the active state.
1244
+ $gl-toggle-switch-track-border-color-checked-disabled: $gl-toggle-switch-track-color-checked-disabled; // Used for the track border color of a disabled checked toggle switch, which matches the track color.
1245
+ $gl-toggle-switch-track-border-color-loading: $gl-toggle-switch-track-color-loading; // Used for the track border color of a loading toggle switch, which matches the track color so the track reads as a single flat fill.
1232
1246
  $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.
1233
1247
  $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.
1234
1248
  $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.
1235
- $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.
1236
- $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.
1237
- $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.
1249
+ $gl-toggle-switch-background-color-checked-hover: $gl-action-selected-foreground-color-hover; // Used for the background color of the checked toggle switch thumb in the hover state.
1250
+ $gl-toggle-switch-background-color-disabled: $gl-toggle-switch-background-color-unchecked-disabled; // Use toggle.switch.background.color.unchecked.disabled instead.
1251
+ $gl-toggle-switch-icon-color-unchecked-hover: $gl-action-selected-foreground-color-hover; // Used for the icon color of an unchecked toggle switch in the hover state.
1252
+ $gl-toggle-switch-icon-color-checked-focus: $gl-action-selected-background-color-focus; // Used for the icon color of a checked toggle switch in the focus state.
1238
1253
  $gl-token-border-radius: $gl-border-radius-default; // Used for token border radius.
1239
1254
  $gl-action-selected-foreground-color-focus: $gl-action-selected-foreground-color-hover; // Used for the foreground of a selected action in the focus state.
1240
1255
  $gl-action-selected-border-color-focus: $gl-action-selected-background-color-focus; // Used for the border of a selected action in the focus state.
@@ -1244,11 +1259,14 @@ $gl-action-strong-neutral-border-color-focus: $gl-action-strong-neutral-border-c
1244
1259
  $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.
1245
1260
  $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.
1246
1261
  $gl-nav-item-selected-foreground-color-active: $gl-nav-item-foreground-color-active; // Used for the foreground of a selected navigation item in the active state.
1247
- $gl-toggle-switch-track-color-unchecked-focus: $gl-toggle-switch-track-color-unchecked-hover; // Used for the track color of an unchecked toggle switch in the focus state.
1248
- $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.
1262
+ $gl-toggle-switch-track-color-unchecked-focus: $gl-toggle-switch-track-color-unchecked-hover; // Used for the track color of an unchecked toggle switch in the focus state. The track is deliberately unchanged from the default state; focus is carried by the focus ring, the track border and the thumb size.
1263
+ $gl-toggle-switch-track-border-color-unchecked-active: $gl-toggle-switch-track-border-color-unchecked-focus; // Used for the track border color of an unchecked toggle switch in the active state.
1264
+ $gl-toggle-switch-track-border-color-checked-focus: $gl-action-selected-border-color-focus; // Used for the track border color of a checked toggle switch in the focus state.
1265
+ $gl-toggle-switch-background-color-checked-focus: $gl-action-selected-foreground-color-focus; // Used for the background color of the checked toggle switch thumb in the focus state.
1266
+ $gl-toggle-switch-icon-color-unchecked-focus: $gl-action-selected-foreground-color-focus; // Used for the icon color of an unchecked toggle switch in the focus state.
1249
1267
  $gl-action-selected-foreground-color-active: $gl-action-selected-foreground-color-focus; // Used for the foreground of a selected action in the active state.
1250
1268
  $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.
1251
1269
  $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.
1252
1270
  $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.
1253
- $gl-toggle-switch-track-color-unchecked-active: $gl-toggle-switch-track-color-unchecked-focus; // Used for the track color of an unchecked toggle switch in the active state.
1254
- $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.
1271
+ $gl-toggle-switch-background-color-checked-active: $gl-action-selected-foreground-color-active; // Used for the background color of the checked toggle switch thumb in the active state.
1272
+ $gl-toggle-switch-icon-color-unchecked-active: $gl-action-selected-foreground-color-active; // Used for the icon color of an unchecked toggle switch in the active state.
package/src/tokens/build/scss/_tokens.scss CHANGED
@@ -431,6 +431,7 @@ $gl-alert-warning-border-top-color: $gl-color-alpha-0; // Used for the border co
431
431
  $gl-alert-warning-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a warning alert.
432
432
  $gl-alert-danger-border-top-color: $gl-color-alpha-0; // Used for the border color of a danger alert.
433
433
  $gl-alert-danger-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a danger alert.
434
+ $gl-application-chrome-background-color: $gl-color-neutral-50; // Used for the application chrome background, the lowest layer of the interface that sits beneath panels and contains global navigation, user actions, application navigation, and AI navigation.
434
435
  $gl-avatar-border-color-default: $gl-color-alpha-dark-8; // Used to define the edge of an avatar.
435
436
  $gl-avatar-border-color-hover: $gl-color-alpha-dark-24; // Used to increase the edge definition of an avatar in the hover state.
436
437
  $gl-avatar-circle-border-radius-default: $gl-border-radius-full; // Border radius for cirlce avatars at all sizes.
@@ -648,9 +649,6 @@ $gl-spinner-track-color-default: $gl-color-neutral-100; // Used for the static t
648
649
  $gl-spinner-track-color-light: $gl-color-neutral-800; // Used for the static track (background) of a loading spinner on a dark background.
649
650
  $gl-spinner-segment-color-default: $gl-color-neutral-700; // Used for the animated segment of a loading spinner.
650
651
  $gl-spinner-segment-color-light: $gl-color-neutral-200; // Used for the animated segment of a loading spinner on a dark background.
651
- $gl-toggle-switch-track-color-checked-default: $gl-color-neutral-800; // Used for the track color of a checked toggle switch in the default state.
652
- $gl-toggle-switch-track-color-checked-hover: $gl-color-neutral-950; // Used for the track color of a checked toggle switch in the hover state.
653
- $gl-toggle-switch-track-color-checked-active: $gl-color-neutral-1000; // Used for the track color of a checked toggle switch in the active state.
654
652
  $gl-token-selector-token-container-token-background-color-focus: $gl-color-neutral-300; // Used for the background color of a token in a token-selector when it's token-container is in the focus state.
655
653
  $gl-token-background-color: $gl-color-neutral-100; // Used for the token background color.
656
654
  $gl-tooltip-text-color-subtle: $gl-color-neutral-200; // Used for supplemental tooltip text that is less prominent than the default text and remains the same color regardless of mode.
@@ -730,6 +728,7 @@ $gl-action-selected-foreground-color-default: $gl-color-neutral-0; // Used for t
730
728
  $gl-action-selected-background-color-default: $gl-color-neutral-800; // Used for the background of a selected action in the default state.
731
729
  $gl-action-selected-background-color-hover: $gl-color-neutral-950; // Used for the background of a selected action in the hover state.
732
730
  $gl-action-selected-background-color-active: $gl-color-neutral-1000; // Used for the background of a selected action in the active state.
731
+ $gl-action-selected-background-color-disabled: $gl-color-neutral-400; // Used for the background of a disabled action that stays selected. Sits between the disabled background and the enabled selected background so the selected state keeps 3:1 contrast against the page while still reading as disabled.
733
732
  $gl-action-neutral-foreground-color-default: $gl-color-neutral-900; // Used for the foreground of a neutral action in the default state.
734
733
  $gl-action-neutral-background-color-default: $gl-color-alpha-0; // Used for the background of a neutral action in the default state.
735
734
  $gl-action-neutral-background-color-hover: $gl-color-alpha-dark-6; // Used for the background of a neutral action in the hover state.
@@ -1019,17 +1018,25 @@ $gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used
1019
1018
  $gl-progress-bar-indicator-color-danger: $gl-status-danger-icon-color; // Used for the indicator color for the danger progress-bar variant.
1020
1019
  $gl-table-row-background-color-hover: $gl-highlight-target-background-color; // Used for the background of a table row in hover state.
1021
1020
  $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
1022
- $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.
1023
- $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.
1024
- $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.
1025
- $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.
1026
- $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.
1027
- $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.
1028
- $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.
1029
- $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.
1030
- $gl-toggle-switch-icon-color-checked-default: $gl-action-strong-confirm-background-color-default; // Used for the icon color of a checked toggle switch in the default state.
1031
- $gl-toggle-switch-icon-color-checked-hover: $gl-action-strong-confirm-background-color-hover; // Used for the icon color of a checked toggle switch in the hover state.
1032
- $gl-toggle-switch-icon-color-checked-active: $gl-action-strong-confirm-background-color-active; // Used for the icon color of a checked toggle switch in the active state.
1021
+ $gl-toggle-switch-track-color-unchecked-default: $gl-control-background-color-default; // Used for the track color of an unchecked toggle switch in the default state.
1022
+ $gl-toggle-switch-track-color-unchecked-active: $gl-action-neutral-background-color-active; // Used for the track color of an unchecked toggle switch in the active state.
1023
+ $gl-toggle-switch-track-color-unchecked-disabled: $gl-control-background-color-default; // Used for the track color of a disabled unchecked toggle switch.
1024
+ $gl-toggle-switch-track-color-checked-default: $gl-action-selected-background-color-default; // Used for the track color of a checked toggle switch in the default state.
1025
+ $gl-toggle-switch-track-color-checked-hover: $gl-action-selected-background-color-hover; // Used for the track color of a checked toggle switch in the hover state.
1026
+ $gl-toggle-switch-track-color-checked-active: $gl-action-selected-background-color-active; // Used for the track color of a checked toggle switch in the active state.
1027
+ $gl-toggle-switch-track-color-checked-disabled: $gl-action-selected-background-color-disabled; // Used for the track color of a disabled checked toggle switch, which stays filled so the checked state remains legible.
1028
+ $gl-toggle-switch-track-color-loading: $gl-action-disabled-background-color; // Used for the track color of a loading toggle switch. A loading toggle renders no thumb and its value is still in flight, so the track carries no checked state.
1029
+ $gl-toggle-switch-track-border-color-unchecked-default: $gl-control-border-color-default; // Used for the track border color of an unchecked toggle switch in the default state.
1030
+ $gl-toggle-switch-track-border-color-unchecked-hover: $gl-control-border-color-hover; // Used for the track border color of an unchecked toggle switch in the hover state.
1031
+ $gl-toggle-switch-track-border-color-unchecked-disabled: $gl-action-disabled-border-color; // Used for the track border color of a disabled unchecked toggle switch.
1032
+ $gl-toggle-switch-background-color-unchecked-default: $gl-action-selected-background-color-default; // Used for the background color of the unchecked toggle switch thumb in the default state.
1033
+ $gl-toggle-switch-background-color-unchecked-disabled: $gl-action-disabled-foreground-color; // Used for the background color of the disabled unchecked toggle switch thumb.
1034
+ $gl-toggle-switch-background-color-checked-default: $gl-action-selected-foreground-color-default; // Used for the background color of the checked toggle switch thumb in the default state.
1035
+ $gl-toggle-switch-background-color-checked-disabled: $gl-action-selected-foreground-color-default; // Used for the background color of the disabled checked toggle switch thumb.
1036
+ $gl-toggle-switch-icon-color-unchecked-default: $gl-action-selected-foreground-color-default; // Used for the icon color of an unchecked toggle switch in the default state.
1037
+ $gl-toggle-switch-icon-color-checked-default: $gl-action-selected-background-color-default; // Used for the icon color of a checked toggle switch in the default state.
1038
+ $gl-toggle-switch-icon-color-checked-hover: $gl-action-selected-background-color-hover; // Used for the icon color of a checked toggle switch in the hover state.
1039
+ $gl-toggle-switch-icon-color-checked-active: $gl-action-selected-background-color-active; // Used for the icon color of a checked toggle switch in the active state.
1033
1040
  $gl-toggle-switch-icon-color-disabled: $gl-action-disabled-background-color; // Used for the icon color of a disabled toggle switch.
1034
1041
  $gl-token-foreground-color: $gl-text-color-default; // Used for the token foreground color.
1035
1042
  $gl-action-border-radius: $gl-border-radius-lg; // Used for the border radius of an action.
@@ -1226,13 +1233,21 @@ $gl-nav-item-foreground-color-active: $gl-nav-item-foreground-color-focus; // Us
1226
1233
  $gl-nav-item-selected-foreground-color-focus: $gl-nav-item-foreground-color-focus; // Used for the foreground of a selected navigation item in the focus state.
1227
1234
  $gl-nav-item-selected-background-color-focus: $gl-nav-item-background-color-focus; // Used for the background of a selected navigation item in the focus state.
1228
1235
  $gl-tab-selected-indicator-color-default: $gl-action-selected-border-color-active; // Used for the selected indicator of a tab.
1229
- $gl-toggle-switch-track-color-unchecked-hover: $gl-toggle-switch-track-color-unchecked-default; // Used for the track color of an unchecked toggle switch in the hover state.
1236
+ $gl-toggle-switch-track-color-unchecked-hover: $gl-toggle-switch-track-color-unchecked-default; // Used for the track color of an unchecked toggle switch in the hover state. The track is deliberately unchanged from the default state; hover is carried by the track border and the thumb size.
1237
+ $gl-toggle-switch-track-color-checked-focus: $gl-action-selected-background-color-focus; // Used for the track color of a checked toggle switch in the focus state.
1238
+ $gl-toggle-switch-track-border-color-unchecked-focus: $gl-toggle-switch-track-border-color-unchecked-hover; // Used for the track border color of an unchecked toggle switch in the focus state.
1239
+ $gl-toggle-switch-track-border-color-checked-default: $gl-action-selected-border-color-default; // Used for the track border color of a checked toggle switch in the default state.
1240
+ $gl-toggle-switch-track-border-color-checked-hover: $gl-action-selected-border-color-hover; // Used for the track border color of a checked toggle switch in the hover state.
1241
+ $gl-toggle-switch-track-border-color-checked-active: $gl-action-selected-border-color-active; // Used for the track border color of a checked toggle switch in the active state.
1242
+ $gl-toggle-switch-track-border-color-checked-disabled: $gl-toggle-switch-track-color-checked-disabled; // Used for the track border color of a disabled checked toggle switch, which matches the track color.
1243
+ $gl-toggle-switch-track-border-color-loading: $gl-toggle-switch-track-color-loading; // Used for the track border color of a loading toggle switch, which matches the track color so the track reads as a single flat fill.
1230
1244
  $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.
1231
1245
  $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.
1232
1246
  $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.
1233
- $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.
1234
- $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.
1235
- $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.
1247
+ $gl-toggle-switch-background-color-checked-hover: $gl-action-selected-foreground-color-hover; // Used for the background color of the checked toggle switch thumb in the hover state.
1248
+ $gl-toggle-switch-background-color-disabled: $gl-toggle-switch-background-color-unchecked-disabled; // Use toggle.switch.background.color.unchecked.disabled instead.
1249
+ $gl-toggle-switch-icon-color-unchecked-hover: $gl-action-selected-foreground-color-hover; // Used for the icon color of an unchecked toggle switch in the hover state.
1250
+ $gl-toggle-switch-icon-color-checked-focus: $gl-action-selected-background-color-focus; // Used for the icon color of a checked toggle switch in the focus state.
1236
1251
  $gl-token-border-radius: $gl-border-radius-default; // Used for token border radius.
1237
1252
  $gl-action-selected-foreground-color-focus: $gl-action-selected-foreground-color-hover; // Used for the foreground of a selected action in the focus state.
1238
1253
  $gl-action-selected-border-color-focus: $gl-action-selected-background-color-focus; // Used for the border of a selected action in the focus state.
@@ -1243,12 +1258,15 @@ $gl-action-strong-neutral-border-color-focus: $gl-action-strong-neutral-border-c
1243
1258
  $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
1259
  $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.
1245
1260
  $gl-nav-item-selected-foreground-color-active: $gl-nav-item-foreground-color-active; // Used for the foreground of a selected navigation item in the active state.
1246
- $gl-toggle-switch-track-color-unchecked-focus: $gl-toggle-switch-track-color-unchecked-hover; // Used for the track color of an unchecked toggle switch in the focus state.
1247
- $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.
1261
+ $gl-toggle-switch-track-color-unchecked-focus: $gl-toggle-switch-track-color-unchecked-hover; // Used for the track color of an unchecked toggle switch in the focus state. The track is deliberately unchanged from the default state; focus is carried by the focus ring, the track border and the thumb size.
1262
+ $gl-toggle-switch-track-border-color-unchecked-active: $gl-toggle-switch-track-border-color-unchecked-focus; // Used for the track border color of an unchecked toggle switch in the active state.
1263
+ $gl-toggle-switch-track-border-color-checked-focus: $gl-action-selected-border-color-focus; // Used for the track border color of a checked toggle switch in the focus state.
1264
+ $gl-toggle-switch-background-color-checked-focus: $gl-action-selected-foreground-color-focus; // Used for the background color of the checked toggle switch thumb in the focus state.
1265
+ $gl-toggle-switch-icon-color-unchecked-focus: $gl-action-selected-foreground-color-focus; // Used for the icon color of an unchecked toggle switch in the focus state.
1248
1266
  $gl-action-selected-foreground-color-active: $gl-action-selected-foreground-color-focus; // Used for the foreground of a selected action in the active state.
1249
1267
  $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.
1250
1268
  $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.
1251
1269
  $gl-action-strong-neutral-foreground-color-active: $gl-action-strong-neutral-foreground-color-focus; // Used for the foreground of a strong neutral action in the active state.
1252
1270
  $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.
1253
- $gl-toggle-switch-track-color-unchecked-active: $gl-toggle-switch-track-color-unchecked-focus; // Used for the track color of an unchecked toggle switch in the active state.
1254
- $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.
1271
+ $gl-toggle-switch-background-color-checked-active: $gl-action-selected-foreground-color-active; // Used for the background color of the checked toggle switch thumb in the active state.
1272
+ $gl-toggle-switch-icon-color-unchecked-active: $gl-action-selected-foreground-color-active; // Used for the icon color of an unchecked toggle switch in the active state.
package/src/tokens/build/scss/_tokens_custom_properties.scss CHANGED
@@ -289,6 +289,7 @@ $gl-alert-danger-title-color: var(--gl-alert-danger-title-color);
289
289
  $gl-alert-danger-background-color: var(--gl-alert-danger-background-color);
290
290
  $gl-alert-danger-border-top-color: var(--gl-alert-danger-border-top-color);
291
291
  $gl-alert-danger-border-bottom-color: var(--gl-alert-danger-border-bottom-color);
292
+ $gl-application-chrome-background-color: var(--gl-application-chrome-background-color);
292
293
  $gl-avatar-border-color-default: var(--gl-avatar-border-color-default);
293
294
  $gl-avatar-border-color-hover: var(--gl-avatar-border-color-hover);
294
295
  $gl-avatar-circle-border-radius-default: var(--gl-avatar-circle-border-radius-default);
@@ -711,18 +712,34 @@ $gl-toggle-switch-track-color-unchecked-default: var(--gl-toggle-switch-track-co
711
712
  $gl-toggle-switch-track-color-unchecked-hover: var(--gl-toggle-switch-track-color-unchecked-hover);
712
713
  $gl-toggle-switch-track-color-unchecked-focus: var(--gl-toggle-switch-track-color-unchecked-focus);
713
714
  $gl-toggle-switch-track-color-unchecked-active: var(--gl-toggle-switch-track-color-unchecked-active);
715
+ $gl-toggle-switch-track-color-unchecked-disabled: var(--gl-toggle-switch-track-color-unchecked-disabled);
714
716
  $gl-toggle-switch-track-color-checked-default: var(--gl-toggle-switch-track-color-checked-default);
715
717
  $gl-toggle-switch-track-color-checked-hover: var(--gl-toggle-switch-track-color-checked-hover);
716
718
  $gl-toggle-switch-track-color-checked-focus: var(--gl-toggle-switch-track-color-checked-focus);
717
719
  $gl-toggle-switch-track-color-checked-active: var(--gl-toggle-switch-track-color-checked-active);
720
+ $gl-toggle-switch-track-color-checked-disabled: var(--gl-toggle-switch-track-color-checked-disabled);
721
+ $gl-toggle-switch-track-color-loading: var(--gl-toggle-switch-track-color-loading);
722
+ $gl-toggle-switch-track-border-color-unchecked-default: var(--gl-toggle-switch-track-border-color-unchecked-default);
723
+ $gl-toggle-switch-track-border-color-unchecked-hover: var(--gl-toggle-switch-track-border-color-unchecked-hover);
724
+ $gl-toggle-switch-track-border-color-unchecked-focus: var(--gl-toggle-switch-track-border-color-unchecked-focus);
725
+ $gl-toggle-switch-track-border-color-unchecked-active: var(--gl-toggle-switch-track-border-color-unchecked-active);
726
+ $gl-toggle-switch-track-border-color-unchecked-disabled: var(--gl-toggle-switch-track-border-color-unchecked-disabled);
727
+ $gl-toggle-switch-track-border-color-checked-default: var(--gl-toggle-switch-track-border-color-checked-default);
728
+ $gl-toggle-switch-track-border-color-checked-hover: var(--gl-toggle-switch-track-border-color-checked-hover);
729
+ $gl-toggle-switch-track-border-color-checked-focus: var(--gl-toggle-switch-track-border-color-checked-focus);
730
+ $gl-toggle-switch-track-border-color-checked-active: var(--gl-toggle-switch-track-border-color-checked-active);
731
+ $gl-toggle-switch-track-border-color-checked-disabled: var(--gl-toggle-switch-track-border-color-checked-disabled);
732
+ $gl-toggle-switch-track-border-color-loading: var(--gl-toggle-switch-track-border-color-loading);
718
733
  $gl-toggle-switch-background-color-unchecked-default: var(--gl-toggle-switch-background-color-unchecked-default);
719
734
  $gl-toggle-switch-background-color-unchecked-hover: var(--gl-toggle-switch-background-color-unchecked-hover);
720
735
  $gl-toggle-switch-background-color-unchecked-focus: var(--gl-toggle-switch-background-color-unchecked-focus);
721
736
  $gl-toggle-switch-background-color-unchecked-active: var(--gl-toggle-switch-background-color-unchecked-active);
737
+ $gl-toggle-switch-background-color-unchecked-disabled: var(--gl-toggle-switch-background-color-unchecked-disabled);
722
738
  $gl-toggle-switch-background-color-checked-default: var(--gl-toggle-switch-background-color-checked-default);
723
739
  $gl-toggle-switch-background-color-checked-hover: var(--gl-toggle-switch-background-color-checked-hover);
724
740
  $gl-toggle-switch-background-color-checked-focus: var(--gl-toggle-switch-background-color-checked-focus);
725
741
  $gl-toggle-switch-background-color-checked-active: var(--gl-toggle-switch-background-color-checked-active);
742
+ $gl-toggle-switch-background-color-checked-disabled: var(--gl-toggle-switch-background-color-checked-disabled);
726
743
  $gl-toggle-switch-background-color-disabled: var(--gl-toggle-switch-background-color-disabled);
727
744
  $gl-toggle-switch-icon-color-unchecked-default: var(--gl-toggle-switch-icon-color-unchecked-default);
728
745
  $gl-toggle-switch-icon-color-unchecked-hover: var(--gl-toggle-switch-icon-color-unchecked-hover);
@@ -898,6 +915,7 @@ $gl-action-selected-background-color-default: var(--gl-action-selected-backgroun
898
915
  $gl-action-selected-background-color-hover: var(--gl-action-selected-background-color-hover);
899
916
  $gl-action-selected-background-color-focus: var(--gl-action-selected-background-color-focus);
900
917
  $gl-action-selected-background-color-active: var(--gl-action-selected-background-color-active);
918
+ $gl-action-selected-background-color-disabled: var(--gl-action-selected-background-color-disabled);
901
919
  $gl-action-selected-border-color-default: var(--gl-action-selected-border-color-default);
902
920
  $gl-action-selected-border-color-hover: var(--gl-action-selected-border-color-hover);
903
921
  $gl-action-selected-border-color-focus: var(--gl-action-selected-border-color-focus);
package/src/tokens/contextual/application-chrome.tokens.json ADDED
@@ -0,0 +1,20 @@
1
+ {
2
+ "application-chrome": {
3
+ "background": {
4
+ "color": {
5
+ "$value": {
6
+ "default": "{color.neutral.50}",
7
+ "dark": "{color.neutral.1000}"
8
+ },
9
+ "$type": "color",
10
+ "$description": "Used for the application chrome background, the lowest layer of the interface that sits beneath panels and contains global navigation, user actions, application navigation, and AI navigation.",
11
+ "$extensions": {
12
+ "com.figma.scopes": [
13
+ "FRAME_FILL",
14
+ "SHAPE_FILL"
15
+ ]
16
+ }
17
+ }
18
+ }
19
+ }
20
+ }