@gitlab/ui 136.3.0 → 136.3.2

package/src/tokens/build/css/tokens.css

@@ -651,9 +651,6 @@
   --gl-spinner-track-color-light: var(--gl-color-neutral-800); /** Used for the static track (background) of a loading spinner on a dark background. */
   --gl-spinner-segment-color-default: var(--gl-color-neutral-700); /** Used for the animated segment of a loading spinner. */
   --gl-spinner-segment-color-light: var(--gl-color-neutral-200); /** Used for the animated segment of a loading spinner on a dark background. */
-  --gl-toggle-switch-track-color-checked-default: var(--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: var(--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: var(--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: var(--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: var(--gl-color-neutral-100); /** Used for the token background color. */
   --gl-tooltip-text-color-subtle: var(--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. */
@@ -733,6 +730,7 @@
   --gl-action-selected-background-color-default: var(--gl-color-neutral-800); /** Used for the background of a selected action in the default state. */
   --gl-action-selected-background-color-hover: var(--gl-color-neutral-950); /** Used for the background of a selected action in the hover state. */
   --gl-action-selected-background-color-active: var(--gl-color-neutral-1000); /** Used for the background of a selected action in the active state. */
+  --gl-action-selected-background-color-disabled: var(--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: var(--gl-color-neutral-900); /** Used for the foreground of a neutral action in the default state. */
   --gl-action-neutral-background-color-default: var(--gl-color-alpha-0); /** Used for the background of a neutral action in the default state. */
   --gl-action-neutral-background-color-hover: var(--gl-color-alpha-dark-6); /** Used for the background of a neutral action in the hover state. */
@@ -1022,17 +1020,25 @@
   --gl-progress-bar-indicator-color-danger: var(--gl-status-danger-icon-color); /** Used for the indicator color for the danger progress-bar variant. */
   --gl-table-row-background-color-hover: var(--gl-highlight-target-background-color); /** Used for the background of a table row in hover state. */
   --gl-table-sorting-icon-color: var(--gl-text-color-heading); /** Used for the color of the sorting icons in the column headers. */
-  --gl-toggle-switch-track-color-unchecked-default: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--gl-control-background-color-default); /** Used for the track color of a disabled unchecked toggle switch. */
+  --gl-toggle-switch-track-color-checked-default: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--gl-action-disabled-border-color); /** Used for the track border color of a disabled unchecked toggle switch. */
+  --gl-toggle-switch-background-color-unchecked-default: var(--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: var(--gl-action-disabled-foreground-color); /** Used for the background color of the disabled unchecked toggle switch thumb. */
+  --gl-toggle-switch-background-color-checked-default: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--gl-action-disabled-background-color); /** Used for the icon color of a disabled toggle switch. */
   --gl-token-foreground-color: var(--gl-text-color-default); /** Used for the token foreground color. */
   --gl-action-border-radius: var(--gl-border-radius-lg); /** Used for the border radius of an action. */
@@ -1229,13 +1235,21 @@
   --gl-nav-item-selected-foreground-color-focus: var(--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: var(--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: var(--gl-action-selected-border-color-active); /** Used for the selected indicator of a tab. */
-  --gl-toggle-switch-track-color-unchecked-hover: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--gl-toggle-switch-background-color-unchecked-disabled); /** Use toggle.switch.background.color.unchecked.disabled instead. */
+  --gl-toggle-switch-icon-color-unchecked-hover: var(--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: var(--gl-action-selected-background-color-focus); /** Used for the icon color of a checked toggle switch in the focus state. */
   --gl-token-border-radius: var(--gl-border-radius-default); /** Used for token border radius. */
   --gl-action-selected-foreground-color-focus: var(--gl-action-selected-foreground-color-hover); /** Used for the foreground of a selected action in the focus state. */
   --gl-action-selected-border-color-focus: var(--gl-action-selected-background-color-focus); /** Used for the border of a selected action in the focus state. */
@@ -1246,13 +1260,16 @@
   --gl-control-border-color-selected-focus: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--gl-action-selected-foreground-color-active); /** Used for the icon color of an unchecked toggle switch in the active state. */
 }

package/src/tokens/build/css/tokens.dark.css

@@ -669,9 +669,6 @@
   --gl-spinner-track-color-light: var(--gl-color-neutral-800); /** Used for the static track (background) of a loading spinner on a dark background. */
   --gl-spinner-segment-color-default: var(--gl-color-neutral-100); /** Used for the animated segment of a loading spinner. */
   --gl-spinner-segment-color-light: var(--gl-color-neutral-200); /** Used for the animated segment of a loading spinner on a dark background. */
-  --gl-toggle-switch-track-color-checked-default: var(--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: var(--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: var(--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: var(--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: var(--gl-color-neutral-800); /** Used for the token background color. */
   --gl-tooltip-text-color-subtle: var(--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. */
@@ -747,6 +744,7 @@
   --gl-action-selected-background-color-default: var(--gl-color-neutral-50); /** Used for the background of a selected action in the default state. */
   --gl-action-selected-background-color-hover: var(--gl-color-neutral-10); /** Used for the background of a selected action in the hover state. */
   --gl-action-selected-background-color-active: var(--gl-color-neutral-0); /** Used for the background of a selected action in the active state. */
+  --gl-action-selected-background-color-disabled: var(--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: var(--gl-color-neutral-50); /** Used for the foreground of a neutral action in the default state. */
   --gl-action-neutral-background-color-default: var(--gl-color-alpha-0); /** Used for the background of a neutral action in the default state. */
   --gl-action-neutral-background-color-hover: var(--gl-color-alpha-light-16); /** Used for the background of a neutral action in the hover state. */
@@ -1029,17 +1027,25 @@
   --gl-progress-bar-indicator-color-danger: var(--gl-status-danger-icon-color); /** Used for the indicator color for the danger progress-bar variant. */
   --gl-table-row-background-color-hover: var(--gl-highlight-target-background-color); /** Used for the background of a table row in hover state. */
   --gl-table-sorting-icon-color: var(--gl-text-color-heading); /** Used for the color of the sorting icons in the column headers. */
-  --gl-toggle-switch-track-color-unchecked-default: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--gl-control-background-color-default); /** Used for the track color of a disabled unchecked toggle switch. */
+  --gl-toggle-switch-track-color-checked-default: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--gl-action-disabled-border-color); /** Used for the track border color of a disabled unchecked toggle switch. */
+  --gl-toggle-switch-background-color-unchecked-default: var(--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: var(--gl-action-disabled-foreground-color); /** Used for the background color of the disabled unchecked toggle switch thumb. */
+  --gl-toggle-switch-background-color-checked-default: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--gl-action-disabled-background-color); /** Used for the icon color of a disabled toggle switch. */
   --gl-token-foreground-color: var(--gl-text-color-default); /** Used for the token foreground color. */
   --gl-action-border-radius: var(--gl-border-radius-lg); /** Used for the border radius of an action. */
@@ -1231,13 +1237,21 @@
   --gl-nav-item-selected-foreground-color-focus: var(--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: var(--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: var(--gl-action-selected-border-color-active); /** Used for the selected indicator of a tab. */
-  --gl-toggle-switch-track-color-unchecked-hover: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--gl-toggle-switch-background-color-unchecked-disabled); /** Use toggle.switch.background.color.unchecked.disabled instead. */
+  --gl-toggle-switch-icon-color-unchecked-hover: var(--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: var(--gl-action-selected-background-color-focus); /** Used for the icon color of a checked toggle switch in the focus state. */
   --gl-token-border-radius: var(--gl-border-radius-default); /** Used for token border radius. */
   --gl-action-selected-foreground-color-focus: var(--gl-action-selected-foreground-color-hover); /** Used for the foreground of a selected action in the focus state. */
   --gl-action-selected-border-color-focus: var(--gl-action-selected-background-color-focus); /** Used for the border of a selected action in the focus state. */
@@ -1247,12 +1261,15 @@
   --gl-control-border-color-selected-focus: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--gl-action-selected-foreground-color-active); /** Used for the icon color of an unchecked toggle switch in the active state. */
 }

package/src/tokens/build/figma/mode.dark.json

@@ -5131,7 +5131,7 @@
     }
   },
   "🔒/toggle-switch-track-color-unchecked-default": {
-    "$value": "{control-border-color-default}",
+    "$value": "{control-background-color-default}",
     "$type": "color",
     "$description": "Used for the track color of an unchecked toggle switch in the default state.",
     "$extensions": {
@@ -5144,7 +5144,7 @@
   "🔒/toggle-switch-track-color-unchecked-hover": {
     "$value": "{🔒/toggle-switch-track-color-unchecked-default}",
     "$type": "color",
-    "$description": "Used for the track color of an unchecked toggle switch in the hover state.",
+    "$description": "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.",
     "$extensions": {
       "com.figma.scopes": [
         "SHAPE_FILL",
@@ -5155,7 +5155,7 @@
   "🔒/toggle-switch-track-color-unchecked-focus": {
     "$value": "{🔒/toggle-switch-track-color-unchecked-hover}",
     "$type": "color",
-    "$description": "Used for the track color of an unchecked toggle switch in the focus state.",
+    "$description": "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.",
     "$extensions": {
       "com.figma.scopes": [
         "SHAPE_FILL",
@@ -5164,7 +5164,7 @@
     }
   },
   "🔒/toggle-switch-track-color-unchecked-active": {
-    "$value": "{🔒/toggle-switch-track-color-unchecked-focus}",
+    "$value": "{action-neutral-background-color-active}",
     "$type": "color",
     "$description": "Used for the track color of an unchecked toggle switch in the active state.",
     "$extensions": {
@@ -5174,8 +5174,19 @@
       ]
     }
   },
+  "🔒/toggle-switch-track-color-unchecked-disabled": {
+    "$value": "{control-background-color-default}",
+    "$type": "color",
+    "$description": "Used for the track color of a disabled unchecked toggle switch.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "SHAPE_FILL",
+        "FRAME_FILL"
+      ]
+    }
+  },
   "🔒/toggle-switch-track-color-checked-default": {
-    "$value": "{color-neutral-50}",
+    "$value": "{action-selected-background-color-default}",
     "$type": "color",
     "$description": "Used for the track color of a checked toggle switch in the default state.",
     "$extensions": {
@@ -5186,7 +5197,7 @@
     }
   },
   "🔒/toggle-switch-track-color-checked-hover": {
-    "$value": "{color-neutral-10}",
+    "$value": "{action-selected-background-color-hover}",
     "$type": "color",
     "$description": "Used for the track color of a checked toggle switch in the hover state.",
     "$extensions": {
@@ -5197,7 +5208,7 @@
     }
   },
   "🔒/toggle-switch-track-color-checked-focus": {
-    "$value": "{🔒/toggle-switch-track-color-checked-hover}",
+    "$value": "{action-selected-background-color-focus}",
     "$type": "color",
     "$description": "Used for the track color of a checked toggle switch in the focus state.",
     "$extensions": {
@@ -5208,7 +5219,7 @@
     }
   },
   "🔒/toggle-switch-track-color-checked-active": {
-    "$value": "{color-neutral-0}",
+    "$value": "{action-selected-background-color-active}",
     "$type": "color",
     "$description": "Used for the track color of a checked toggle switch in the active state.",
     "$extensions": {
@@ -5218,8 +5229,140 @@
       ]
     }
   },
+  "🔒/toggle-switch-track-color-checked-disabled": {
+    "$value": "{action-selected-background-color-disabled}",
+    "$type": "color",
+    "$description": "Used for the track color of a disabled checked toggle switch, which stays filled so the checked state remains legible.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "SHAPE_FILL",
+        "FRAME_FILL"
+      ]
+    }
+  },
+  "🔒/toggle-switch-track-color-loading": {
+    "$value": "{action-disabled-background-color}",
+    "$type": "color",
+    "$description": "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.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "SHAPE_FILL",
+        "FRAME_FILL"
+      ]
+    }
+  },
+  "🔒/toggle-switch-track-border-color-unchecked-default": {
+    "$value": "{control-border-color-default}",
+    "$type": "color",
+    "$description": "Used for the track border color of an unchecked toggle switch in the default state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "STROKE_COLOR"
+      ]
+    }
+  },
+  "🔒/toggle-switch-track-border-color-unchecked-hover": {
+    "$value": "{control-border-color-hover}",
+    "$type": "color",
+    "$description": "Used for the track border color of an unchecked toggle switch in the hover state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "STROKE_COLOR"
+      ]
+    }
+  },
+  "🔒/toggle-switch-track-border-color-unchecked-focus": {
+    "$value": "{🔒/toggle-switch-track-border-color-unchecked-hover}",
+    "$type": "color",
+    "$description": "Used for the track border color of an unchecked toggle switch in the focus state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "STROKE_COLOR"
+      ]
+    }
+  },
+  "🔒/toggle-switch-track-border-color-unchecked-active": {
+    "$value": "{🔒/toggle-switch-track-border-color-unchecked-focus}",
+    "$type": "color",
+    "$description": "Used for the track border color of an unchecked toggle switch in the active state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "STROKE_COLOR"
+      ]
+    }
+  },
+  "🔒/toggle-switch-track-border-color-unchecked-disabled": {
+    "$value": "{action-disabled-border-color}",
+    "$type": "color",
+    "$description": "Used for the track border color of a disabled unchecked toggle switch.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "STROKE_COLOR"
+      ]
+    }
+  },
+  "🔒/toggle-switch-track-border-color-checked-default": {
+    "$value": "{action-selected-border-color-default}",
+    "$type": "color",
+    "$description": "Used for the track border color of a checked toggle switch in the default state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "STROKE_COLOR"
+      ]
+    }
+  },
+  "🔒/toggle-switch-track-border-color-checked-hover": {
+    "$value": "{action-selected-border-color-hover}",
+    "$type": "color",
+    "$description": "Used for the track border color of a checked toggle switch in the hover state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "STROKE_COLOR"
+      ]
+    }
+  },
+  "🔒/toggle-switch-track-border-color-checked-focus": {
+    "$value": "{action-selected-border-color-focus}",
+    "$type": "color",
+    "$description": "Used for the track border color of a checked toggle switch in the focus state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "STROKE_COLOR"
+      ]
+    }
+  },
+  "🔒/toggle-switch-track-border-color-checked-active": {
+    "$value": "{action-selected-border-color-active}",
+    "$type": "color",
+    "$description": "Used for the track border color of a checked toggle switch in the active state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "STROKE_COLOR"
+      ]
+    }
+  },
+  "🔒/toggle-switch-track-border-color-checked-disabled": {
+    "$value": "{🔒/toggle-switch-track-color-checked-disabled}",
+    "$type": "color",
+    "$description": "Used for the track border color of a disabled checked toggle switch, which matches the track color.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "STROKE_COLOR"
+      ]
+    }
+  },
+  "🔒/toggle-switch-track-border-color-loading": {
+    "$value": "{🔒/toggle-switch-track-color-loading}",
+    "$type": "color",
+    "$description": "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.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "STROKE_COLOR"
+      ]
+    }
+  },
   "🔒/toggle-switch-background-color-unchecked-default": {
-    "$value": "{control-indicator-color-selected}",
+    "$value": "{action-selected-background-color-default}",
     "$type": "color",
     "$description": "Used for the background color of the unchecked toggle switch thumb in the default state.",
     "$extensions": {
@@ -5262,8 +5405,19 @@
       ]
     }
   },
+  "🔒/toggle-switch-background-color-unchecked-disabled": {
+    "$value": "{action-disabled-foreground-color}",
+    "$type": "color",
+    "$description": "Used for the background color of the disabled unchecked toggle switch thumb.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "SHAPE_FILL",
+        "FRAME_FILL"
+      ]
+    }
+  },
   "🔒/toggle-switch-background-color-checked-default": {
-    "$value": "{action-strong-confirm-foreground-color-default}",
+    "$value": "{action-selected-foreground-color-default}",
     "$type": "color",
     "$description": "Used for the background color of the checked toggle switch thumb in the default state.",
     "$extensions": {
@@ -5274,7 +5428,7 @@
     }
   },
   "🔒/toggle-switch-background-color-checked-hover": {
-    "$value": "{action-strong-confirm-foreground-color-hover}",
+    "$value": "{action-selected-foreground-color-hover}",
     "$type": "color",
     "$description": "Used for the background color of the checked toggle switch thumb in the hover state.",
     "$extensions": {
@@ -5285,7 +5439,7 @@
     }
   },
   "🔒/toggle-switch-background-color-checked-focus": {
-    "$value": "{action-strong-confirm-foreground-color-focus}",
+    "$value": "{action-selected-foreground-color-focus}",
     "$type": "color",
     "$description": "Used for the background color of the checked toggle switch thumb in the focus state.",
     "$extensions": {
@@ -5296,7 +5450,7 @@
     }
   },
   "🔒/toggle-switch-background-color-checked-active": {
-    "$value": "{action-strong-confirm-foreground-color-active}",
+    "$value": "{action-selected-foreground-color-active}",
     "$type": "color",
     "$description": "Used for the background color of the checked toggle switch thumb in the active state.",
     "$extensions": {
@@ -5306,10 +5460,10 @@
       ]
     }
   },
-  "🔒/toggle-switch-background-color-disabled": {
-    "$value": "{action-disabled-foreground-color}",
+  "🔒/toggle-switch-background-color-checked-disabled": {
+    "$value": "{action-selected-foreground-color-default}",
     "$type": "color",
-    "$description": "Used for the background color of the toggle switch thumb in the disabled state.",
+    "$description": "Used for the background color of the disabled checked toggle switch thumb.",
     "$extensions": {
       "com.figma.scopes": [
         "SHAPE_FILL",
@@ -5318,7 +5472,7 @@
     }
   },
   "🔒/toggle-switch-icon-color-unchecked-default": {
-    "$value": "{action-strong-neutral-background-color-default}",
+    "$value": "{action-selected-foreground-color-default}",
     "$type": "color",
     "$description": "Used for the icon color of an unchecked toggle switch in the default state.",
     "$extensions": {
@@ -5328,7 +5482,7 @@
     }
   },
   "🔒/toggle-switch-icon-color-unchecked-hover": {
-    "$value": "{action-strong-neutral-background-color-hover}",
+    "$value": "{action-selected-foreground-color-hover}",
     "$type": "color",
     "$description": "Used for the icon color of an unchecked toggle switch in the hover state.",
     "$extensions": {
@@ -5338,7 +5492,7 @@
     }
   },
   "🔒/toggle-switch-icon-color-unchecked-focus": {
-    "$value": "{action-strong-neutral-background-color-focus}",
+    "$value": "{action-selected-foreground-color-focus}",
     "$type": "color",
     "$description": "Used for the icon color of an unchecked toggle switch in the focus state.",
     "$extensions": {
@@ -5348,7 +5502,7 @@
     }
   },
   "🔒/toggle-switch-icon-color-unchecked-active": {
-    "$value": "{action-strong-neutral-background-color-active}",
+    "$value": "{action-selected-foreground-color-active}",
     "$type": "color",
     "$description": "Used for the icon color of an unchecked toggle switch in the active state.",
     "$extensions": {
@@ -5358,7 +5512,7 @@
     }
   },
   "🔒/toggle-switch-icon-color-checked-default": {
-    "$value": "{action-strong-confirm-background-color-default}",
+    "$value": "{action-selected-background-color-default}",
     "$type": "color",
     "$description": "Used for the icon color of a checked toggle switch in the default state.",
     "$extensions": {
@@ -5368,7 +5522,7 @@
     }
   },
   "🔒/toggle-switch-icon-color-checked-hover": {
-    "$value": "{action-strong-confirm-background-color-hover}",
+    "$value": "{action-selected-background-color-hover}",
     "$type": "color",
     "$description": "Used for the icon color of a checked toggle switch in the hover state.",
     "$extensions": {
@@ -5378,7 +5532,7 @@
     }
   },
   "🔒/toggle-switch-icon-color-checked-focus": {
-    "$value": "{action-strong-confirm-background-color-focus}",
+    "$value": "{action-selected-background-color-focus}",
     "$type": "color",
     "$description": "Used for the icon color of a checked toggle switch in the focus state.",
     "$extensions": {
@@ -5388,7 +5542,7 @@
     }
   },
   "🔒/toggle-switch-icon-color-checked-active": {
-    "$value": "{action-strong-confirm-background-color-active}",
+    "$value": "{action-selected-background-color-active}",
     "$type": "color",
     "$description": "Used for the icon color of a checked toggle switch in the active state.",
     "$extensions": {
@@ -5590,6 +5744,17 @@
       ]
     }
   },
+  "action-selected-background-color-disabled": {
+    "$value": "{color-neutral-500}",
+    "$type": "color",
+    "$description": "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.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "FRAME_FILL",
+        "SHAPE_FILL"
+      ]
+    }
+  },
   "action-selected-border-color-default": {
     "$value": "{action-selected-background-color-default}",
     "$type": "color",