npm - @gitlab/ui - Versions diffs - 136.3.0 → 136.3.2 - Mend

@gitlab/ui 136.3.0 → 136.3.2

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 (47) hide show

package/dist/components/base/collapse/collapse.js +3 -4
package/dist/components/base/filtered_search/filtered_search.js +4 -5
package/dist/components/base/filtered_search/filtered_search_token.js +8 -9
package/dist/components/base/filtered_search/filtered_search_token_segment.js +13 -14
package/dist/components/base/form/form_checkbox/form_checkbox.js +14 -15
package/dist/components/base/form/form_input/form_input.js +9 -11
package/dist/components/base/form/form_radio/form_radio.js +14 -15
package/dist/components/base/form/form_textarea/form_textarea.js +13 -16
package/dist/components/base/infinite_scroll/infinite_scroll.js +17 -19
package/dist/components/base/new_dropdowns/listbox/listbox.js +17 -19
package/dist/components/base/sorting/sorting.js +2 -2
package/dist/components/base/tabs/tabs/scrollable_tabs.js +6 -8
package/dist/components/base/toggle/toggle.js +1 -0
package/dist/components/base/token_selector/token_selector.js +13 -15
package/dist/index.css +2 -2
package/dist/index.css.map +1 -1
package/dist/tokens/build/js/tokens.dark.js +34 -17
package/dist/tokens/build/js/tokens.js +34 -17
package/package.json +4 -4
package/src/components/base/collapse/collapse.vue +3 -4
package/src/components/base/filtered_search/filtered_search.vue +4 -5
package/src/components/base/filtered_search/filtered_search_token.vue +8 -9
package/src/components/base/filtered_search/filtered_search_token_segment.vue +10 -11
package/src/components/base/form/form_checkbox/form_checkbox.vue +14 -15
package/src/components/base/form/form_input/form_input.vue +9 -11
package/src/components/base/form/form_radio/form_radio.vue +14 -15
package/src/components/base/form/form_textarea/form_textarea.vue +13 -16
package/src/components/base/infinite_scroll/infinite_scroll.vue +16 -18
package/src/components/base/new_dropdowns/listbox/listbox.vue +17 -19
package/src/components/base/sorting/sorting.vue +3 -2
package/src/components/base/tabs/tabs/scrollable_tabs.vue +7 -9
package/src/components/base/toggle/toggle.scss +90 -22
package/src/components/base/toggle/toggle.vue +1 -0
package/src/components/base/token_selector/token_selector.vue +12 -14
package/src/tokens/build/css/tokens.css +39 -22
package/src/tokens/build/css/tokens.dark.css +39 -22
package/src/tokens/build/figma/mode.dark.json +189 -24
package/src/tokens/build/figma/mode.json +189 -24
package/src/tokens/build/js/tokens.dark.js +33 -16
package/src/tokens/build/js/tokens.js +33 -16
package/src/tokens/build/json/tokens.dark.json +650 -42
package/src/tokens/build/json/tokens.json +650 -42
package/src/tokens/build/scss/_tokens.dark.scss +39 -22
package/src/tokens/build/scss/_tokens.scss +39 -22
package/src/tokens/build/scss/_tokens_custom_properties.scss +17 -0
package/src/tokens/contextual/toggle.tokens.json +198 -33
package/src/tokens/semantic/action.tokens.json +14 -0

package/src/tokens/build/scss/_tokens.dark.scss CHANGED Viewed

@@ -667,9 +667,6 @@ $gl-spinner-track-color-default: $gl-color-neutral-600; // Used for the static t
 $gl-spinner-track-color-light: $gl-color-neutral-800; // Used for the static track (background) of a loading spinner on a dark background.
 $gl-spinner-segment-color-default: $gl-color-neutral-100; // Used for the animated segment of a loading spinner.
 $gl-spinner-segment-color-light: $gl-color-neutral-200; // Used for the animated segment of a loading spinner on a dark background.
-$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.
-$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.
-$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.
 $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.
 $gl-token-background-color: $gl-color-neutral-800; // Used for the token background color.
 $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.
@@ -745,6 +742,7 @@ $gl-action-selected-foreground-color-default: $gl-color-neutral-950; // Used for
 $gl-action-selected-background-color-default: $gl-color-neutral-50; // Used for the background of a selected action in the default state.
 $gl-action-selected-background-color-hover: $gl-color-neutral-10; // Used for the background of a selected action in the hover state.
 $gl-action-selected-background-color-active: $gl-color-neutral-0; // Used for the background of a selected action in the active state.
+$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.
 $gl-action-neutral-foreground-color-default: $gl-color-neutral-50; // Used for the foreground of a neutral action in the default state.
 $gl-action-neutral-background-color-default: $gl-color-alpha-0; // Used for the background of a neutral action in the default state.
 $gl-action-neutral-background-color-hover: $gl-color-alpha-light-16; // Used for the background of a neutral action in the hover state.
@@ -1027,17 +1025,25 @@ $gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used
 $gl-progress-bar-indicator-color-danger: $gl-status-danger-icon-color; // Used for the indicator color for the danger progress-bar variant.
 $gl-table-row-background-color-hover: $gl-highlight-target-background-color; // Used for the background of a table row in hover state.
 $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
-$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.
-$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.
-$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.
-$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.
-$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.
-$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.
-$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.
-$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.
-$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.
-$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.
-$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.
+$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.
+$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.
+$gl-toggle-switch-track-color-unchecked-disabled: $gl-control-background-color-default; // Used for the track color of a disabled unchecked toggle switch.
+$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.
+$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.
+$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.
+$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.
+$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.
+$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.
+$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.
+$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.
+$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.
+$gl-toggle-switch-background-color-unchecked-disabled: $gl-action-disabled-foreground-color; // Used for the background color of the disabled unchecked toggle switch thumb.
+$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.
+$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.
+$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.
+$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.
+$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.
+$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.
 $gl-toggle-switch-icon-color-disabled: $gl-action-disabled-background-color; // Used for the icon color of a disabled toggle switch.
 $gl-token-foreground-color: $gl-text-color-default; // Used for the token foreground color.
 $gl-action-border-radius: $gl-border-radius-lg; // Used for the border radius of an action.
@@ -1229,13 +1235,21 @@ $gl-nav-item-foreground-color-active: $gl-nav-item-foreground-color-focus; // Us
 $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.
 $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.
 $gl-tab-selected-indicator-color-default: $gl-action-selected-border-color-active; // Used for the selected indicator of a tab.
-$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.
+$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.
+$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.
+$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.
+$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.
+$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.
+$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.
+$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.
+$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.
 $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.
 $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.
 $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.
-$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.
-$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.
-$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.
+$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.
+$gl-toggle-switch-background-color-disabled: $gl-toggle-switch-background-color-unchecked-disabled; // Use toggle.switch.background.color.unchecked.disabled instead.
+$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.
+$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.
 $gl-token-border-radius: $gl-border-radius-default; // Used for token border radius.
 $gl-action-selected-foreground-color-focus: $gl-action-selected-foreground-color-hover; // Used for the foreground of a selected action in the focus state.
 $gl-action-selected-border-color-focus: $gl-action-selected-background-color-focus; // Used for the border of a selected action in the focus state.
@@ -1245,11 +1259,14 @@ $gl-action-strong-neutral-border-color-focus: $gl-action-strong-neutral-border-c
 $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.
 $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.
 $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.
-$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.
-$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.
+$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.
+$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.
+$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.
+$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.
+$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.
 $gl-action-selected-foreground-color-active: $gl-action-selected-foreground-color-focus; // Used for the foreground of a selected action in the active state.
 $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.
 $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.
 $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.
-$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.
-$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.
+$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.
+$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 Viewed

@@ -649,9 +649,6 @@ $gl-spinner-track-color-default: $gl-color-neutral-100; // Used for the static t
 $gl-spinner-track-color-light: $gl-color-neutral-800; // Used for the static track (background) of a loading spinner on a dark background.
 $gl-spinner-segment-color-default: $gl-color-neutral-700; // Used for the animated segment of a loading spinner.
 $gl-spinner-segment-color-light: $gl-color-neutral-200; // Used for the animated segment of a loading spinner on a dark background.
-$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.
-$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.
-$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.
 $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.
 $gl-token-background-color: $gl-color-neutral-100; // Used for the token background color.
 $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.
@@ -731,6 +728,7 @@ $gl-action-selected-foreground-color-default: $gl-color-neutral-0; // Used for t
 $gl-action-selected-background-color-default: $gl-color-neutral-800; // Used for the background of a selected action in the default state.
 $gl-action-selected-background-color-hover: $gl-color-neutral-950; // Used for the background of a selected action in the hover state.
 $gl-action-selected-background-color-active: $gl-color-neutral-1000; // Used for the background of a selected action in the active state.
+$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.
 $gl-action-neutral-foreground-color-default: $gl-color-neutral-900; // Used for the foreground of a neutral action in the default state.
 $gl-action-neutral-background-color-default: $gl-color-alpha-0; // Used for the background of a neutral action in the default state.
 $gl-action-neutral-background-color-hover: $gl-color-alpha-dark-6; // Used for the background of a neutral action in the hover state.
@@ -1020,17 +1018,25 @@ $gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used
 $gl-progress-bar-indicator-color-danger: $gl-status-danger-icon-color; // Used for the indicator color for the danger progress-bar variant.
 $gl-table-row-background-color-hover: $gl-highlight-target-background-color; // Used for the background of a table row in hover state.
 $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
-$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.
-$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.
-$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.
-$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.
-$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.
-$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.
-$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.
-$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.
-$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.
-$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.
-$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.
+$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.
+$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.
+$gl-toggle-switch-track-color-unchecked-disabled: $gl-control-background-color-default; // Used for the track color of a disabled unchecked toggle switch.
+$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.
+$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.
+$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.
+$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.
+$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.
+$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.
+$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.
+$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.
+$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.
+$gl-toggle-switch-background-color-unchecked-disabled: $gl-action-disabled-foreground-color; // Used for the background color of the disabled unchecked toggle switch thumb.
+$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.
+$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.
+$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.
+$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.
+$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.
+$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.
 $gl-toggle-switch-icon-color-disabled: $gl-action-disabled-background-color; // Used for the icon color of a disabled toggle switch.
 $gl-token-foreground-color: $gl-text-color-default; // Used for the token foreground color.
 $gl-action-border-radius: $gl-border-radius-lg; // Used for the border radius of an action.
@@ -1227,13 +1233,21 @@ $gl-nav-item-foreground-color-active: $gl-nav-item-foreground-color-focus; // Us
 $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.
 $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.
 $gl-tab-selected-indicator-color-default: $gl-action-selected-border-color-active; // Used for the selected indicator of a tab.
-$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.
+$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.
+$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.
+$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.
+$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.
+$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.
+$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.
+$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.
+$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.
 $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.
 $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.
 $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.
-$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.
-$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.
-$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.
+$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.
+$gl-toggle-switch-background-color-disabled: $gl-toggle-switch-background-color-unchecked-disabled; // Use toggle.switch.background.color.unchecked.disabled instead.
+$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.
+$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.
 $gl-token-border-radius: $gl-border-radius-default; // Used for token border radius.
 $gl-action-selected-foreground-color-focus: $gl-action-selected-foreground-color-hover; // Used for the foreground of a selected action in the focus state.
 $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,12 +1258,15 @@ $gl-action-strong-neutral-border-color-focus: $gl-action-strong-neutral-border-c
 $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.
 $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.
 $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.
-$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.
-$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.
+$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.
+$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.
+$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.
+$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.
+$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.
 $gl-action-selected-foreground-color-active: $gl-action-selected-foreground-color-focus; // Used for the foreground of a selected action in the active state.
 $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.
 $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.
 $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.
 $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.
-$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.
-$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.
+$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.
+$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 Viewed

@@ -712,18 +712,34 @@ $gl-toggle-switch-track-color-unchecked-default: var(--gl-toggle-switch-track-co
 $gl-toggle-switch-track-color-unchecked-hover: var(--gl-toggle-switch-track-color-unchecked-hover);
 $gl-toggle-switch-track-color-unchecked-focus: var(--gl-toggle-switch-track-color-unchecked-focus);
 $gl-toggle-switch-track-color-unchecked-active: var(--gl-toggle-switch-track-color-unchecked-active);
+$gl-toggle-switch-track-color-unchecked-disabled: var(--gl-toggle-switch-track-color-unchecked-disabled);
 $gl-toggle-switch-track-color-checked-default: var(--gl-toggle-switch-track-color-checked-default);
 $gl-toggle-switch-track-color-checked-hover: var(--gl-toggle-switch-track-color-checked-hover);
 $gl-toggle-switch-track-color-checked-focus: var(--gl-toggle-switch-track-color-checked-focus);
 $gl-toggle-switch-track-color-checked-active: var(--gl-toggle-switch-track-color-checked-active);
+$gl-toggle-switch-track-color-checked-disabled: var(--gl-toggle-switch-track-color-checked-disabled);
+$gl-toggle-switch-track-color-loading: var(--gl-toggle-switch-track-color-loading);
+$gl-toggle-switch-track-border-color-unchecked-default: var(--gl-toggle-switch-track-border-color-unchecked-default);
+$gl-toggle-switch-track-border-color-unchecked-hover: var(--gl-toggle-switch-track-border-color-unchecked-hover);
+$gl-toggle-switch-track-border-color-unchecked-focus: var(--gl-toggle-switch-track-border-color-unchecked-focus);
+$gl-toggle-switch-track-border-color-unchecked-active: var(--gl-toggle-switch-track-border-color-unchecked-active);
+$gl-toggle-switch-track-border-color-unchecked-disabled: var(--gl-toggle-switch-track-border-color-unchecked-disabled);
+$gl-toggle-switch-track-border-color-checked-default: var(--gl-toggle-switch-track-border-color-checked-default);
+$gl-toggle-switch-track-border-color-checked-hover: var(--gl-toggle-switch-track-border-color-checked-hover);
+$gl-toggle-switch-track-border-color-checked-focus: var(--gl-toggle-switch-track-border-color-checked-focus);
+$gl-toggle-switch-track-border-color-checked-active: var(--gl-toggle-switch-track-border-color-checked-active);
+$gl-toggle-switch-track-border-color-checked-disabled: var(--gl-toggle-switch-track-border-color-checked-disabled);
+$gl-toggle-switch-track-border-color-loading: var(--gl-toggle-switch-track-border-color-loading);
 $gl-toggle-switch-background-color-unchecked-default: var(--gl-toggle-switch-background-color-unchecked-default);
 $gl-toggle-switch-background-color-unchecked-hover: var(--gl-toggle-switch-background-color-unchecked-hover);
 $gl-toggle-switch-background-color-unchecked-focus: var(--gl-toggle-switch-background-color-unchecked-focus);
 $gl-toggle-switch-background-color-unchecked-active: var(--gl-toggle-switch-background-color-unchecked-active);
+$gl-toggle-switch-background-color-unchecked-disabled: var(--gl-toggle-switch-background-color-unchecked-disabled);
 $gl-toggle-switch-background-color-checked-default: var(--gl-toggle-switch-background-color-checked-default);
 $gl-toggle-switch-background-color-checked-hover: var(--gl-toggle-switch-background-color-checked-hover);
 $gl-toggle-switch-background-color-checked-focus: var(--gl-toggle-switch-background-color-checked-focus);
 $gl-toggle-switch-background-color-checked-active: var(--gl-toggle-switch-background-color-checked-active);
+$gl-toggle-switch-background-color-checked-disabled: var(--gl-toggle-switch-background-color-checked-disabled);
 $gl-toggle-switch-background-color-disabled: var(--gl-toggle-switch-background-color-disabled);
 $gl-toggle-switch-icon-color-unchecked-default: var(--gl-toggle-switch-icon-color-unchecked-default);
 $gl-toggle-switch-icon-color-unchecked-hover: var(--gl-toggle-switch-icon-color-unchecked-hover);
@@ -899,6 +915,7 @@ $gl-action-selected-background-color-default: var(--gl-action-selected-backgroun
 $gl-action-selected-background-color-hover: var(--gl-action-selected-background-color-hover);
 $gl-action-selected-background-color-focus: var(--gl-action-selected-background-color-focus);
 $gl-action-selected-background-color-active: var(--gl-action-selected-background-color-active);
+$gl-action-selected-background-color-disabled: var(--gl-action-selected-background-color-disabled);
 $gl-action-selected-border-color-default: var(--gl-action-selected-border-color-default);
 $gl-action-selected-border-color-hover: var(--gl-action-selected-border-color-hover);
 $gl-action-selected-border-color-focus: var(--gl-action-selected-border-color-focus);