@gitlab/ui 136.3.0 → 136.3.1

package/src/components/base/toggle/toggle.scss

@@ -71,7 +71,8 @@ $toggle-height: 2.5 * $grid-size;
   width: $toggle-width;
   height: $toggle-height;
   user-select: none;
-  box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-neutral-border-color-default);
+  box-shadow: inset 0 0 0 $gl-border-size-1
+    var(--gl-toggle-switch-track-border-color-unchecked-default);
   @apply gl-rounded-pill;
   @apply gl-leading-normal;
   transition:
@@ -93,23 +94,33 @@ $toggle-height: 2.5 * $grid-size;
   &:hover {
     color: var(--gl-toggle-switch-icon-color-unchecked-hover);
     background-color: var(--gl-toggle-switch-track-color-unchecked-hover);
-    box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-neutral-border-color-hover);
-
-    .toggle-icon::before {
-      transform: scale(0.875);
-    }
+    box-shadow: inset 0 0 0 $gl-border-size-1
+      var(--gl-toggle-switch-track-border-color-unchecked-hover);
   }
 
   &:focus-visible {
     color: var(--gl-toggle-switch-icon-color-unchecked-focus);
     background-color: var(--gl-toggle-switch-track-color-unchecked-focus);
-    @include gl-focus($color: var(--gl-action-neutral-border-color-focus), $important: true);
+    @include gl-focus(
+      $color: var(--gl-toggle-switch-track-border-color-unchecked-focus),
+      $important: true
+    );
   }
 
   &:active {
     color: var(--gl-toggle-switch-icon-color-unchecked-active);
     background-color: var(--gl-toggle-switch-track-color-unchecked-active);
-    @include gl-focus($color: var(--gl-action-neutral-border-color-active), $important: true);
+    @include gl-focus(
+      $color: var(--gl-toggle-switch-track-border-color-unchecked-active),
+      $important: true
+    );
+  }
+
+  // The thumb grows on hover and focus so the interaction reads on the thumb as
+  // well as on the track.
+  &:hover .toggle-icon::before,
+  &:focus-visible .toggle-icon::before {
+    transform: scale(0.875);
   }
 
   .toggle-loading {
@@ -159,24 +170,32 @@ $toggle-height: 2.5 * $grid-size;
   &.is-checked {
     color: var(--gl-toggle-switch-icon-color-checked-default);
     background-color: var(--gl-toggle-switch-track-color-checked-default);
-    box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-neutral-border-color-default);
+    box-shadow: inset 0 0 0 $gl-border-size-1
+      var(--gl-toggle-switch-track-border-color-checked-default);
 
     &:hover {
       color: var(--gl-toggle-switch-icon-color-checked-hover);
       background-color: var(--gl-toggle-switch-track-color-checked-hover);
-      box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-neutral-border-color-hover);
+      box-shadow: inset 0 0 0 $gl-border-size-1
+        var(--gl-toggle-switch-track-border-color-checked-hover);
     }
 
     &:focus-visible {
       color: var(--gl-toggle-switch-icon-color-checked-focus);
       background-color: var(--gl-toggle-switch-track-color-checked-focus);
-      @include gl-focus($color: var(--gl-action-neutral-border-color-focus), $important: true);
+      @include gl-focus(
+        $color: var(--gl-toggle-switch-track-border-color-checked-focus),
+        $important: true
+      );
     }
 
     &:active {
       color: var(--gl-toggle-switch-icon-color-checked-active);
       background-color: var(--gl-toggle-switch-track-color-checked-active);
-      @include gl-focus($color: var(--gl-action-neutral-border-color-active), $important: true);
+      @include gl-focus(
+        $color: var(--gl-toggle-switch-track-border-color-checked-active),
+        $important: true
+      );
     }
 
     .toggle-icon {
@@ -189,34 +208,83 @@ $toggle-height: 2.5 * $grid-size;
     }
   }
 
-  &.is-disabled,
-  &.is-checked.is-disabled {
+  // Both disabled blocks must stay last. `.gl-toggle.is-checked` and
+  // `.gl-toggle.is-disabled` carry equal specificity, so source order is what
+  // lets the disabled styles win over the checked ones.
+  &.is-disabled {
     @apply gl-cursor-not-allowed;
-    color: var(--gl-action-disabled-background-color);
-    background-color: var(--gl-action-disabled-background-color);
-    box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-disabled-border-color);
+    background-color: var(--gl-toggle-switch-track-color-unchecked-disabled);
+    box-shadow: inset 0 0 0 $gl-border-size-1
+      var(--gl-toggle-switch-track-border-color-unchecked-disabled);
 
     .toggle-icon {
       color: var(--gl-toggle-switch-icon-color-disabled);
     }
 
     .toggle-icon::before {
-      background-color: var(--gl-toggle-switch-background-color-disabled);
+      background-color: var(--gl-toggle-switch-background-color-unchecked-disabled);
     }
 
-    &:hover .toggle-icon::before {
+    &:hover .toggle-icon::before,
+    &:focus-visible .toggle-icon::before {
       transform: scale(0.75);
     }
 
-    &.is-checked .toggle-icon::before,
-    &.is-checked:hover .toggle-icon::before {
+    &:active,
+    &:focus-visible,
+    &:focus-visible:active {
+      @include gl-focus(
+        $color: var(--gl-toggle-switch-track-border-color-unchecked-disabled),
+        $important: true
+      );
+    }
+  }
+
+  &.is-checked.is-disabled {
+    background-color: var(--gl-toggle-switch-track-color-checked-disabled);
+    box-shadow: inset 0 0 0 $gl-border-size-1
+      var(--gl-toggle-switch-track-border-color-checked-disabled);
+
+    .toggle-icon::before {
+      background-color: var(--gl-toggle-switch-background-color-checked-disabled);
+      transform: scale(1);
+    }
+
+    &:hover .toggle-icon::before,
+    &:focus-visible .toggle-icon::before {
       transform: scale(1);
     }
 
     &:active,
     &:focus-visible,
     &:focus-visible:active {
-      @include gl-focus($color: var(--gl-action-disabled-border-color), $important: true);
+      @include gl-focus(
+        $color: var(--gl-toggle-switch-track-border-color-checked-disabled),
+        $important: true
+      );
+    }
+  }
+
+  // A loading toggle renders a spinner in place of the thumb, so the track is
+  // the only thing left to look at and its value is still in flight. It gets a
+  // flat fill that ignores the checked state, which also keeps the spinner
+  // legible in both color modes.
+  //
+  // `.is-loading` is always accompanied by `.is-disabled`, so this block has to
+  // stay after both disabled blocks: the checked pairs tie on specificity and
+  // source order is what settles them.
+  &.is-loading,
+  &.is-checked.is-loading {
+    background-color: var(--gl-toggle-switch-track-color-loading);
+    box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-toggle-switch-track-border-color-loading);
+
+    &:active,
+    &:focus-visible,
+    &:focus-visible:active {
+      @include gl-focus(
+        $color: var(--gl-toggle-switch-track-border-color-loading),
+        $important: true
+      );
     }
   }
 }

package/src/components/base/toggle/toggle.vue

@@ -178,6 +178,7 @@ export default {
       :class="{
         'is-checked': value,
         'is-disabled': disabled || isLoading,
+        'is-loading': isLoading,
       }"
       class="gl-toggle gl-shrink-0"
       type="button"

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. */
 }