@gitlab/ui 134.7.0 → 134.9.0

package/src/components/base/nav_item/nav_item.scss

@@ -11,7 +11,7 @@
   @apply gl-border-none;
   @apply gl-cursor-pointer;
   @apply gl-appearance-none;
-  @apply focus:gl-focus-inset;
+  @apply focus-visible:gl-focus-inset;
   min-height: 1.75rem;
   min-width: 1.75rem;
   border-radius: var(--gl-nav-item-border-radius);
@@ -38,13 +38,13 @@
     background-color: var(--gl-nav-item-background-color-hover);
   }
 
-  &:focus {
+  &:focus-visible {
     color: var(--gl-nav-item-foreground-color-focus);
     background-color: var(--gl-nav-item-background-color-focus);
   }
 
   &:active,
-  &:focus:active {
+  &:focus-visible:active {
     color: var(--gl-nav-item-foreground-color-active);
     background-color: var(--gl-nav-item-background-color-active);
   }
@@ -58,13 +58,13 @@
       background-color: var(--gl-nav-item-selected-background-color-hover);
     }
 
-    &:focus {
+    &:focus-visible {
       color: var(--gl-nav-item-selected-foreground-color-focus);
       background-color: var(--gl-nav-item-selected-background-color-focus);
     }
 
     &:active,
-    &:focus:active {
+    &:focus-visible:active {
       color: var(--gl-nav-item-selected-foreground-color-active);
       background-color: var(--gl-nav-item-selected-background-color-active);
     }

package/src/components/base/new_dropdowns/dropdown.scss

@@ -8,7 +8,7 @@
         @apply gl-cursor-pointer;
       }
 
-      &:focus {
+      &:focus-visible {
         @apply gl-focus;
       }
     }
@@ -254,7 +254,7 @@
   }
 
   .gl-new-dropdown {
-    .gl-new-dropdown-toggle:focus,
+    .gl-new-dropdown-toggle:focus-visible,
     .gl-new-dropdown-toggle:active {
       @apply gl-z-1;
     }

package/src/components/base/new_dropdowns/dropdown_item.scss

@@ -23,7 +23,7 @@
     }
   }
 
-  &:not(.disabled):focus {
+  &:not(.disabled):focus-visible {
     .gl-new-dropdown-item-content {
       color: var(--gl-dropdown-option-text-color-focus);
       background-color: var(--gl-dropdown-option-background-color-unselected-focus);
@@ -31,7 +31,7 @@
   }
 
   &:not(.disabled):active,
-  &:not(.disabled):focus:active {
+  &:not(.disabled):focus-visible:active {
     .gl-new-dropdown-item-content {
       color: var(--gl-dropdown-option-text-color-active);
       background-color: var(--gl-dropdown-option-background-color-unselected-active);
@@ -59,7 +59,7 @@
       }
     }
 
-    &:not(.disabled):focus {
+    &:not(.disabled):focus-visible {
       .gl-new-dropdown-item-content {
         background-color: var(--gl-dropdown-option-background-color-selected-focus);
       }
@@ -70,7 +70,7 @@
     }
 
     &:not(.disabled):active,
-    &:not(.disabled):focus:active {
+    &:not(.disabled):focus-visible:active {
       .gl-new-dropdown-item-content {
         background-color: var(--gl-dropdown-option-background-color-selected-active);
       }
@@ -86,14 +86,14 @@
   }
 
   &:not(.disabled):active,
-  &:not(.disabled):focus,
-  &:not(.disabled):focus:active {
+  &:not(.disabled):focus-visible,
+  &:not(.disabled):focus-visible:active {
     .gl-new-dropdown-item-content {
       @include gl-focus($inset: true);
     }
   }
 
-  &:focus {
+  &:focus-visible {
     .gl-new-dropdown-item-content {
       z-index: 1;
     }
@@ -180,7 +180,7 @@
       }
     }
 
-    &:focus {
+    &:focus-visible {
       .gl-new-dropdown-item-content {
         color: var(--gl-action-danger-foreground-color-focus);
         background-color: var(--gl-action-danger-background-color-focus);
@@ -188,7 +188,7 @@
     }
 
     &:active,
-    &:focus:active {
+    &:focus-visible:active {
       .gl-new-dropdown-item-content {
         color: var(--gl-action-danger-foreground-color-active);
         background-color: var(--gl-action-danger-background-color-active);

package/src/components/base/new_dropdowns/listbox/listbox.scss

@@ -17,7 +17,7 @@ $clear-button-size: 24px;
     @apply gl-text-default;
     background-color: var(--gl-dropdown-search-background-color);
 
-    &:focus {
+    &:focus-visible {
       @include gl-focus($inset: true);
     }
 

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -1065,7 +1065,7 @@ export default {
         <gl-button
           v-if="showResetButton"
           category="tertiary"
-          class="!gl-m-0 !gl-w-auto gl-max-w-1/2 gl-flex-shrink-0 gl-text-ellipsis !gl-px-2 !gl-text-sm focus:!gl-focus-inset"
+          class="!gl-m-0 !gl-w-auto gl-max-w-1/2 gl-flex-shrink-0 gl-text-ellipsis !gl-px-2 !gl-text-sm focus-visible:!gl-focus-inset"
           size="small"
           data-testid="listbox-reset-button"
           @click="onResetButtonClicked"
@@ -1075,7 +1075,7 @@ export default {
         <gl-button
           v-if="showSelectAllButton"
           category="tertiary"
-          class="!gl-m-0 !gl-w-auto gl-max-w-1/2 gl-flex-shrink-0 gl-text-ellipsis !gl-px-2 !gl-text-sm focus:!gl-focus-inset"
+          class="!gl-m-0 !gl-w-auto gl-max-w-1/2 gl-flex-shrink-0 gl-text-ellipsis !gl-px-2 !gl-text-sm focus-visible:!gl-focus-inset"
           size="small"
           data-testid="listbox-select-all-button"
           @click="onSelectAllButtonClicked"

package/src/components/base/pagination/pagination.scss

@@ -37,8 +37,8 @@
     @apply gl-no-underline;
   }
 
-  &:focus,
-  &:active:focus {
+  &:focus-visible,
+  &:active:focus-visible {
     @apply gl-no-underline;
     @apply gl-focus;
   }

package/src/components/base/path/path.scss

@@ -91,7 +91,7 @@ $path-chevron-right-margin: px-to-rem(14px);
       color: var(--gl-action-neutral-foreground-color-hover);
     }
 
-    &:focus {
+    &:focus-visible {
       background-color: var(--gl-action-neutral-background-color-focus);
       color: var(--gl-action-neutral-foreground-color-focus);
     }
@@ -102,8 +102,8 @@ $path-chevron-right-margin: px-to-rem(14px);
     }
 
     &:active,
-    &:focus,
-    &:focus:active {
+    &:focus-visible,
+    &:focus-visible:active {
       // Custom focus to account for path shape
       box-shadow:
         5px -3px 0 -2px var(--gl-focus-ring-inner-color),

package/src/components/base/search_box_by_type/search_box_by_type.scss

@@ -47,7 +47,7 @@ $gl-search-box-by-type-input-padding: 3.5 * $grid-size;
   border-radius: 0;
   padding-right: calc(#{$gl-spacing-scale-6} + #{$gl-spacing-scale-2});
 
-  &:not(.form-control-plaintext):focus {
+  &:not(.form-control-plaintext):focus-visible {
     @include gl-focus($inset: true);
   }
 

package/src/components/base/tabs/tabs/tabs.scss

@@ -48,7 +48,7 @@
     translate: 0;
   }
 
-  &:focus {
+  &:focus-visible {
     @apply gl-rounded-default;
   }
 
@@ -80,8 +80,8 @@
   z-index: 1;
 
   &:active,
-  &:focus,
-  &:focus:active {
+  &:focus-visible,
+  &:focus-visible:active {
     @include gl-focus($color: var(--gl-action-neutral-border-color-active));
 
     .gl-scrollable-tabs-nav & {

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

@@ -100,7 +100,7 @@ $toggle-height: 2.5 * $grid-size;
     }
   }
 
-  &:focus {
+  &: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);
@@ -167,7 +167,7 @@ $toggle-height: 2.5 * $grid-size;
       box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-neutral-border-color-hover);
     }
 
-    &:focus {
+    &: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);
@@ -214,8 +214,8 @@ $toggle-height: 2.5 * $grid-size;
     }
 
     &:active,
-    &:focus,
-    &:focus:active {
+    &:focus-visible,
+    &:focus-visible:active {
       @include gl-focus($color: var(--gl-action-disabled-border-color), $important: true);
     }
   }

package/src/components/base/token_selector/token_selector.scss

@@ -14,7 +14,7 @@
   }
 }
 
-.gl-token-selector-token-container:focus .gl-token {
+.gl-token-selector-token-container:focus-visible .gl-token {
   background-color: var(--gl-token-selector-token-container-token-background-color-focus);
   @apply gl-focus;
 }

package/src/components/shared_components/clear_icon_button/clear_icon_button.scss

@@ -3,7 +3,7 @@
   @apply gl-border-none;
   @apply gl-cursor-pointer;
 
-  &:focus {
+  &:focus-visible {
     @apply gl-focus;
   }
 }

package/src/scss/mixins.scss

@@ -269,7 +269,7 @@
     border-color: var(--gl-action-selected-border-color-hover);
   }
 
-  &:focus {
+  &:focus-visible {
     color: var(--gl-action-selected-foreground-color-focus);
     background-color: var(--gl-action-selected-background-color-focus);
     border-color: var(--gl-action-selected-border-color-focus);

package/src/scss/themes.scss

@@ -1,4 +1,5 @@
-:root.tint-neutral-indigo {
+:root.tint-neutral-indigo,
+.ui-indigo-scope {
   --gl-color-neutral-0: #fff;
   --gl-color-neutral-10: #f9f8fa;
   --gl-color-neutral-50: #efebf2;
@@ -15,7 +16,8 @@
   --gl-color-neutral-1000: #0e0017;
 }
 
-:root.tint-neutral-blue {
+:root.tint-neutral-blue,
+.ui-blue-scope {
   --gl-color-neutral-0: #fff;
   --gl-color-neutral-10: #f8f8fa;
   --gl-color-neutral-50: #e9ebf0;
@@ -32,7 +34,8 @@
   --gl-color-neutral-1000: #010415;
 }
 
-:root.tint-neutral-green {
+:root.tint-neutral-green,
+.ui-green-scope {
   --gl-color-neutral-0: #fff;
   --gl-color-neutral-10: #f7f9f8;
   --gl-color-neutral-50: #e6edeb;
@@ -49,7 +52,8 @@
   --gl-color-neutral-1000: #000603;
 }
 
-:root.tint-neutral-red {
+:root.tint-neutral-red,
+.ui-red-scope {
   --gl-color-neutral-0: #fff;
   --gl-color-neutral-10: #fbf7f9;
   --gl-color-neutral-50: #f4eaee;
@@ -66,7 +70,8 @@
   --gl-color-neutral-1000: #100106;
 }
 
-:root.tint-neutral-gray {
+:root.tint-neutral-gray,
+.ui-gray-scope {
   --gl-color-neutral-0: #fff;
   --gl-color-neutral-10: #f8f8f8;
   --gl-color-neutral-50: #ececec;

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

@@ -1016,9 +1016,6 @@
   --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-unchecked-hover: var(--gl-control-border-color-hover); /** Used for the track color of an unchecked toggle switch in the hover state. */
-  --gl-toggle-switch-track-color-unchecked-focus: var(--gl-control-border-color-focus); /** Used for the track color of an unchecked toggle switch in the focus state. */
-  --gl-toggle-switch-track-color-unchecked-active: var(--gl-control-border-color-focus); /** Used for the track color of an unchecked toggle switch in the active 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. */
@@ -1228,6 +1225,7 @@
   --gl-nav-item-selected-foreground-color-hover: var(--gl-action-selected-foreground-color-hover); /** Used for the foreground of a selected navigation item in the hover state. */
   --gl-nav-item-selected-background-color-focus: var(--gl-action-selected-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-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. */
@@ -1244,6 +1242,7 @@
   --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-focus: var(--gl-action-selected-foreground-color-focus); /** Used for the foreground of a selected navigation item 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. */
   --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-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. */
@@ -1251,5 +1250,6 @@
   --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-nav-item-selected-foreground-color-active: var(--gl-action-selected-foreground-color-active); /** Used for the foreground of a selected navigation item 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. */
 }

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

@@ -1023,9 +1023,6 @@
   --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-unchecked-hover: var(--gl-control-border-color-hover); /** Used for the track color of an unchecked toggle switch in the hover state. */
-  --gl-toggle-switch-track-color-unchecked-focus: var(--gl-control-border-color-focus); /** Used for the track color of an unchecked toggle switch in the focus state. */
-  --gl-toggle-switch-track-color-unchecked-active: var(--gl-control-border-color-focus); /** Used for the track color of an unchecked toggle switch in the active 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. */
@@ -1230,6 +1227,7 @@
   --gl-nav-item-selected-foreground-color-hover: var(--gl-action-selected-foreground-color-hover); /** Used for the foreground of a selected navigation item in the hover state. */
   --gl-nav-item-selected-background-color-focus: var(--gl-action-selected-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-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. */
@@ -1245,11 +1243,13 @@
   --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-focus: var(--gl-action-selected-foreground-color-focus); /** Used for the foreground of a selected navigation item 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. */
   --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-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-nav-item-selected-foreground-color-active: var(--gl-action-selected-foreground-color-active); /** Used for the foreground of a selected navigation item 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. */
 }

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

@@ -5120,7 +5120,7 @@
     }
   },
   "🔒/toggle-switch-track-color-unchecked-hover": {
-    "$value": "{control-border-color-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.",
     "$extensions": {
@@ -5130,7 +5130,7 @@
     }
   },
   "🔒/toggle-switch-track-color-unchecked-focus": {
-    "$value": "{control-border-color-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.",
     "$extensions": {
@@ -5140,7 +5140,7 @@
     }
   },
   "🔒/toggle-switch-track-color-unchecked-active": {
-    "$value": "{control-border-color-focus}",
+    "$value": "{🔒/toggle-switch-track-color-unchecked-focus}",
     "$type": "color",
     "$description": "Used for the track color of an unchecked toggle switch in the active state.",
     "$extensions": {

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

@@ -5064,7 +5064,7 @@
     }
   },
   "🔒/toggle-switch-track-color-unchecked-hover": {
-    "$value": "{control-border-color-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.",
     "$extensions": {
@@ -5074,7 +5074,7 @@
     }
   },
   "🔒/toggle-switch-track-color-unchecked-focus": {
-    "$value": "{control-border-color-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.",
     "$extensions": {
@@ -5084,7 +5084,7 @@
     }
   },
   "🔒/toggle-switch-track-color-unchecked-active": {
-    "$value": "{control-border-color-focus}",
+    "$value": "{🔒/toggle-switch-track-color-unchecked-focus}",
     "$type": "color",
     "$description": "Used for the track color of an unchecked toggle switch in the active state.",
     "$extensions": {

package/src/tokens/build/js/tokens.dark.js

@@ -798,9 +798,9 @@ export const GL_TABLE_ROW_BACKGROUND_COLOR_HOVER = '#1d283e';
 export const GL_TABLE_SORTING_ICON_COLOR = '#fff';
 export const GL_TAB_SELECTED_INDICATOR_COLOR_DEFAULT = '#fff';
 export const GL_TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_DEFAULT = '#737278';
-export const GL_TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_HOVER = '#a4a3a8';
-export const GL_TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_FOCUS = '#ececef';
-export const GL_TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_ACTIVE = '#ececef';
+export const GL_TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_HOVER = '#737278';
+export const GL_TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_FOCUS = '#737278';
+export const GL_TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_ACTIVE = '#737278';
 export const GL_TOGGLE_SWITCH_TRACK_COLOR_CHECKED_DEFAULT = '#ececef';
 export const GL_TOGGLE_SWITCH_TRACK_COLOR_CHECKED_HOVER = '#fbfafd';
 export const GL_TOGGLE_SWITCH_TRACK_COLOR_CHECKED_FOCUS = '#fbfafd';

package/src/tokens/build/js/tokens.js

@@ -798,9 +798,9 @@ export const GL_TABLE_ROW_BACKGROUND_COLOR_HOVER = '#e9f3fc';
 export const GL_TABLE_SORTING_ICON_COLOR = '#18171d';
 export const GL_TAB_SELECTED_INDICATOR_COLOR_DEFAULT = '#050506';
 export const GL_TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_DEFAULT = '#89888d';
-export const GL_TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_HOVER = '#626168';
-export const GL_TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_FOCUS = '#28272d';
-export const GL_TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_ACTIVE = '#28272d';
+export const GL_TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_HOVER = '#89888d';
+export const GL_TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_FOCUS = '#89888d';
+export const GL_TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_ACTIVE = '#89888d';
 export const GL_TOGGLE_SWITCH_TRACK_COLOR_CHECKED_DEFAULT = '#3a383f';
 export const GL_TOGGLE_SWITCH_TRACK_COLOR_CHECKED_HOVER = '#18171d';
 export const GL_TOGGLE_SWITCH_TRACK_COLOR_CHECKED_FOCUS = '#18171d';

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

@@ -23847,7 +23847,7 @@
             },
             "hover": {
               "key": "{toggle.switch.track.color.unchecked.hover}",
-              "$value": "#a4a3a8",
+              "$value": "#737278",
               "$type": "color",
               "$description": "Used for the track color of an unchecked toggle switch in the hover state.",
               "$extensions": {
@@ -23858,7 +23858,7 @@
               "filePath": "src/tokens/contextual/toggle.tokens.json",
               "isSource": true,
               "original": {
-                "$value": "{control.border.color.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.",
                 "$extensions": {
@@ -23881,7 +23881,7 @@
             },
             "focus": {
               "key": "{toggle.switch.track.color.unchecked.focus}",
-              "$value": "#ececef",
+              "$value": "#737278",
               "$type": "color",
               "$description": "Used for the track color of an unchecked toggle switch in the focus state.",
               "$extensions": {
@@ -23892,7 +23892,7 @@
               "filePath": "src/tokens/contextual/toggle.tokens.json",
               "isSource": true,
               "original": {
-                "$value": "{control.border.color.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.",
                 "$extensions": {
@@ -23915,7 +23915,7 @@
             },
             "active": {
               "key": "{toggle.switch.track.color.unchecked.active}",
-              "$value": "#ececef",
+              "$value": "#737278",
               "$type": "color",
               "$description": "Used for the track color of an unchecked toggle switch in the active state.",
               "$extensions": {
@@ -23926,7 +23926,7 @@
               "filePath": "src/tokens/contextual/toggle.tokens.json",
               "isSource": true,
               "original": {
-                "$value": "{control.border.color.focus}",
+                "$value": "{toggle.switch.track.color.unchecked.focus}",
                 "$type": "color",
                 "$description": "Used for the track color of an unchecked toggle switch in the active state.",
                 "$extensions": {

package/src/tokens/build/json/tokens.json

@@ -23847,7 +23847,7 @@
             },
             "hover": {
               "key": "{toggle.switch.track.color.unchecked.hover}",
-              "$value": "#626168",
+              "$value": "#89888d",
               "$type": "color",
               "$description": "Used for the track color of an unchecked toggle switch in the hover state.",
               "$extensions": {
@@ -23858,7 +23858,7 @@
               "filePath": "src/tokens/contextual/toggle.tokens.json",
               "isSource": true,
               "original": {
-                "$value": "{control.border.color.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.",
                 "$extensions": {
@@ -23881,7 +23881,7 @@
             },
             "focus": {
               "key": "{toggle.switch.track.color.unchecked.focus}",
-              "$value": "#28272d",
+              "$value": "#89888d",
               "$type": "color",
               "$description": "Used for the track color of an unchecked toggle switch in the focus state.",
               "$extensions": {
@@ -23892,7 +23892,7 @@
               "filePath": "src/tokens/contextual/toggle.tokens.json",
               "isSource": true,
               "original": {
-                "$value": "{control.border.color.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.",
                 "$extensions": {
@@ -23915,7 +23915,7 @@
             },
             "active": {
               "key": "{toggle.switch.track.color.unchecked.active}",
-              "$value": "#28272d",
+              "$value": "#89888d",
               "$type": "color",
               "$description": "Used for the track color of an unchecked toggle switch in the active state.",
               "$extensions": {
@@ -23926,7 +23926,7 @@
               "filePath": "src/tokens/contextual/toggle.tokens.json",
               "isSource": true,
               "original": {
-                "$value": "{control.border.color.focus}",
+                "$value": "{toggle.switch.track.color.unchecked.focus}",
                 "$type": "color",
                 "$description": "Used for the track color of an unchecked toggle switch in the active state.",
                 "$extensions": {

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

@@ -1021,9 +1021,6 @@ $gl-progress-bar-indicator-color-danger: $gl-status-danger-icon-color; // Used f
 $gl-table-row-background-color-hover: $gl-highlight-target-background-color; // Used for the background of a table row in hover state.
 $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
 $gl-toggle-switch-track-color-unchecked-default: $gl-control-border-color-default; // Used for the track color of an unchecked toggle switch in the default state.
-$gl-toggle-switch-track-color-unchecked-hover: $gl-control-border-color-hover; // Used for the track color of an unchecked toggle switch in the hover state.
-$gl-toggle-switch-track-color-unchecked-focus: $gl-control-border-color-focus; // Used for the track color of an unchecked toggle switch in the focus state.
-$gl-toggle-switch-track-color-unchecked-active: $gl-control-border-color-focus; // Used for the track color of an unchecked toggle switch in the active state.
 $gl-toggle-switch-track-color-checked-focus: $gl-toggle-switch-track-color-checked-hover; // Used for the track color of a checked toggle switch in the focus state.
 $gl-toggle-switch-background-color-unchecked-default: $gl-control-indicator-color-selected; // Used for the background color of the unchecked toggle switch thumb in the default state.
 $gl-toggle-switch-background-color-checked-default: $gl-action-strong-confirm-foreground-color-default; // Used for the background color of the checked toggle switch thumb in the default state.
@@ -1228,6 +1225,7 @@ $gl-nav-item-background-color-focus: $gl-action-neutral-background-color-focus;
 $gl-nav-item-selected-foreground-color-hover: $gl-action-selected-foreground-color-hover; // Used for the foreground of a selected navigation item in the hover state.
 $gl-nav-item-selected-background-color-focus: $gl-action-selected-background-color-focus; // Used for the background of a selected navigation item in the focus state.
 $gl-tab-selected-indicator-color-default: $gl-action-selected-border-color-active; // Used for the selected indicator of a tab.
+$gl-toggle-switch-track-color-unchecked-hover: $gl-toggle-switch-track-color-unchecked-default; // Used for the track color of an unchecked toggle switch in the hover state.
 $gl-toggle-switch-background-color-unchecked-hover: $gl-toggle-switch-background-color-unchecked-default; // Used for the background color of the unchecked toggle switch thumb in the hover state.
 $gl-toggle-switch-background-color-unchecked-focus: $gl-toggle-switch-background-color-unchecked-default; // Used for the background color of the unchecked toggle switch thumb in the focus state.
 $gl-toggle-switch-background-color-unchecked-active: $gl-toggle-switch-background-color-unchecked-default; // Used for the background color of the unchecked toggle switch thumb in the active state.
@@ -1243,10 +1241,12 @@ $gl-action-strong-neutral-border-color-focus: $gl-action-strong-neutral-border-c
 $gl-control-border-color-selected-focus: $gl-control-background-color-selected-focus; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
 $gl-button-confirm-primary-foreground-color-active: $gl-button-confirm-primary-foreground-color-focus; // Used for the foreground of a confirm (positive) primary button in the active state.
 $gl-nav-item-selected-foreground-color-focus: $gl-action-selected-foreground-color-focus; // Used for the foreground of a selected navigation item in the focus state.
+$gl-toggle-switch-track-color-unchecked-focus: $gl-toggle-switch-track-color-unchecked-hover; // Used for the track color of an unchecked toggle switch in the focus state.
 $gl-toggle-switch-background-color-checked-focus: $gl-action-strong-confirm-foreground-color-focus; // Used for the background color of the checked toggle switch thumb in the focus state.
 $gl-action-selected-foreground-color-active: $gl-action-selected-foreground-color-focus; // Used for the foreground of a selected action in the active state.
 $gl-action-strong-confirm-foreground-color-active: $gl-action-strong-confirm-foreground-color-focus; // Used for the foreground of a strong confirm action in the active state.
 $gl-action-strong-confirm-border-color-active: $gl-action-strong-confirm-border-color-focus; // Used for the border of a strong confirm action in the active state.
 $gl-action-strong-neutral-border-color-active: $gl-action-strong-neutral-border-color-focus; // Used for the border of a strong neutral action in the active state.
 $gl-nav-item-selected-foreground-color-active: $gl-action-selected-foreground-color-active; // Used for the foreground of a selected navigation item in the active state.
+$gl-toggle-switch-track-color-unchecked-active: $gl-toggle-switch-track-color-unchecked-focus; // Used for the track color of an unchecked toggle switch in the active state.
 $gl-toggle-switch-background-color-checked-active: $gl-action-strong-confirm-foreground-color-active; // Used for the background color of the checked toggle switch thumb in the active state.