@gitlab/ui 134.5.0 → 134.7.0

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

@@ -66,15 +66,19 @@ $toggle-height: 2.5 * $grid-size;
   @apply gl-border-0;
   @apply gl-cursor-pointer;
   color: var(--gl-toggle-switch-icon-color-unchecked-default);
-  background-color: var(--gl-action-strong-neutral-background-color-default);
+  background-color: var(--gl-toggle-switch-track-color-unchecked-default);
   position: relative;
   width: $toggle-width;
   height: $toggle-height;
   user-select: none;
-  box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-strong-neutral-border-color-default);
+  box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-neutral-border-color-default);
   @apply gl-rounded-pill;
-  @apply gl-duration-slow;
   @apply gl-leading-normal;
+  transition:
+    color $gl-transition-duration-medium $gl-easing-out-cubic,
+    background-color $gl-transition-duration-medium $gl-easing-out-cubic,
+    box-shadow $gl-transition-duration-medium $gl-easing-out-cubic;
+  @include gl-prefers-reduced-motion-transition;
 
   @media (forced-colors: active) {
     border: 1px solid;
@@ -88,23 +92,24 @@ $toggle-height: 2.5 * $grid-size;
 
   &:hover {
     color: var(--gl-toggle-switch-icon-color-unchecked-hover);
-    background-color: var(--gl-action-strong-neutral-background-color-hover);
-    box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-strong-neutral-border-color-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);
+    }
   }
 
   &:focus {
     color: var(--gl-toggle-switch-icon-color-unchecked-focus);
-    background-color: var(--gl-action-strong-neutral-background-color-focus);
-    @include gl-focus($color: var(--gl-action-strong-neutral-border-color-focus), $important: true);
+    background-color: var(--gl-toggle-switch-track-color-unchecked-focus);
+    @include gl-focus($color: var(--gl-action-neutral-border-color-focus), $important: true);
   }
 
   &:active {
     color: var(--gl-toggle-switch-icon-color-unchecked-active);
-    background-color: var(--gl-action-strong-neutral-background-color-active);
-    @include gl-focus(
-      $color: var(--gl-action-strong-neutral-border-color-active),
-      $important: true
-    );
+    background-color: var(--gl-toggle-switch-track-color-unchecked-active);
+    @include gl-focus($color: var(--gl-action-neutral-border-color-active), $important: true);
   }
 
   .toggle-loading {
@@ -112,69 +117,76 @@ $toggle-height: 2.5 * $grid-size;
   }
 
   .toggle-icon {
-    @apply gl-rounded-full;
-    position: absolute;
-    @apply gl-inline-flex;
-    @apply gl-items-center;
-    left: $gl-spacing-scale-1;
-    top: $gl-spacing-scale-1;
-    @apply gl-transition-all;
-    @apply gl-justify-center;
-    @apply gl-p-1;
-    background-color: var(--gl-action-strong-neutral-foreground-color-default);
-
-    &:hover {
-      background-color: var(--gl-action-strong-neutral-foreground-color-hover);
-    }
-
-    &:focus {
-      background-color: var(--gl-action-strong-neutral-foreground-color-focus);
-    }
-
-    &:active {
-      background-color: var(--gl-action-strong-neutral-foreground-color-active);
+    @apply gl-absolute;
+    @apply gl-w-5;
+    @apply gl-h-5;
+    @apply gl-left-1;
+    @apply gl-top-1;
+    transition: transform $gl-transition-duration-medium $gl-easing-out-cubic;
+    @include gl-prefers-reduced-motion-transition;
+
+    &::before {
+      content: "";
+      @apply gl-absolute;
+      @apply gl-inset-0;
+      @apply gl-rounded-full;
+      background-color: var(--gl-toggle-switch-background-color-unchecked-default);
+      transform: scale(0.75);
+      transition:
+        transform $gl-transition-duration-medium $gl-easing-out-cubic,
+        background-color $gl-transition-duration-medium $gl-easing-out-cubic;
+      @include gl-prefers-reduced-motion-transition;
     }
 
     > svg {
+      @apply gl-absolute;
       @apply gl-w-4;
       @apply gl-h-4;
-      @apply gl-align-baseline;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      // Check/close icons are only rendered in Windows high contrast
+      // (forced-colors) mode so the toggle state remains distinguishable
+      // when background colors are overridden by the user agent.
+      display: none;
+
+      @media (forced-colors: active) {
+        display: block;
+      }
     }
   }
 
   &.is-checked {
     color: var(--gl-toggle-switch-icon-color-checked-default);
-    background-color: var(--gl-action-strong-confirm-background-color-default);
-    box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-strong-confirm-border-color-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);
 
     &:hover {
       color: var(--gl-toggle-switch-icon-color-checked-hover);
-      background-color: var(--gl-action-strong-confirm-background-color-hover);
-      box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-strong-confirm-border-color-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);
     }
 
     &:focus {
       color: var(--gl-toggle-switch-icon-color-checked-focus);
-      background-color: var(--gl-action-strong-confirm-background-color-focus);
-      @include gl-focus(
-        $color: var(--gl-action-strong-confirm-border-color-focus),
-        $important: true
-      );
+      background-color: var(--gl-toggle-switch-track-color-checked-focus);
+      @include gl-focus($color: var(--gl-action-neutral-border-color-focus), $important: true);
     }
 
     &:active {
       color: var(--gl-toggle-switch-icon-color-checked-active);
-      background-color: var(--gl-action-strong-confirm-background-color-active);
-      @include gl-focus(
-        $color: var(--gl-action-strong-confirm-border-color-active),
-        $important: true
-      );
+      background-color: var(--gl-toggle-switch-track-color-checked-active);
+      @include gl-focus($color: var(--gl-action-neutral-border-color-active), $important: true);
     }
 
     .toggle-icon {
-      background-color: var(--gl-action-strong-confirm-foreground-color-default);
       transform: translateX($toggle-translate-width);
     }
+
+    .toggle-icon::before {
+      background-color: var(--gl-toggle-switch-background-color-checked-default);
+      transform: scale(1);
+    }
   }
 
   &.is-disabled,
@@ -185,8 +197,20 @@ $toggle-height: 2.5 * $grid-size;
     box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-disabled-border-color);
 
     .toggle-icon {
-      color: var(--gl-action-disabled-background-color);
-      background-color: var(--gl-action-disabled-foreground-color);
+      color: var(--gl-toggle-switch-icon-color-disabled);
+    }
+
+    .toggle-icon::before {
+      background-color: var(--gl-toggle-switch-background-color-disabled);
+    }
+
+    &:hover .toggle-icon::before {
+      transform: scale(0.75);
+    }
+
+    &.is-checked .toggle-icon::before,
+    &.is-checked:hover .toggle-icon::before {
+      transform: scale(1);
     }
 
     &:active,

package/src/components/dashboards/dashboard_panel/dashboard_panel.vue

@@ -7,6 +7,7 @@ import GlPopover from '../../base/popover/popover.vue';
 import GlSprintf from '../../utilities/sprintf/sprintf.vue';
 import GlLink from '../../base/link/link.vue';
 import GlTruncate from '../../utilities/truncate/truncate.vue';
+import GlSkeletonLoader from '../../base/skeleton_loader/skeleton_loader.vue';
 
 export default {
   name: 'GlDashboardPanel',
@@ -18,6 +19,7 @@ export default {
     GlSprintf,
     GlLink,
     GlTruncate,
+    GlSkeletonLoader,
   },
   props: {
     /**
@@ -205,7 +207,8 @@ export default {
   >
     <div class="gl-flex gl-h-full gl-flex-col">
       <div class="gl-mb-3 gl-flex gl-items-start gl-justify-between" data-testid="panel-title">
-        <div class="gl-flex gl-items-center gl-gap-2 gl-overflow-hidden">
+        <gl-skeleton-loader v-if="loading" :lines="1" />
+        <div v-else class="gl-flex gl-items-center gl-gap-2 gl-overflow-hidden">
           <gl-icon
             v-if="hasTitleIcon"
             :class="titleIconClass"

package/src/scss/bootstrap_no_utils.scss

@@ -0,0 +1,33 @@
+@import "variables";
+@import "../vendor/bootstrap/scss/functions";
+@import "../vendor/bootstrap/scss/variables";
+@import "../vendor/bootstrap/scss/mixins";
+@import "../vendor/bootstrap/scss/root";
+@import "../vendor/bootstrap/scss/reboot";
+@import "../vendor/bootstrap/scss/type";
+@import "../vendor/bootstrap/scss/images";
+@import "../vendor/bootstrap/scss/code";
+@import "../vendor/bootstrap/scss/grid";
+@import "../vendor/bootstrap/scss/tables";
+@import "../vendor/bootstrap/scss/forms";
+@import "../vendor/bootstrap/scss/buttons";
+@import "../vendor/bootstrap/scss/transitions";
+@import "../vendor/bootstrap/scss/dropdown";
+@import "../vendor/bootstrap/scss/button-group";
+@import "../vendor/bootstrap/scss/input-group";
+@import "../vendor/bootstrap/scss/custom-forms";
+@import "../vendor/bootstrap/scss/nav";
+@import "../vendor/bootstrap/scss/navbar";
+@import "../vendor/bootstrap/scss/card";
+@import "../vendor/bootstrap/scss/breadcrumb";
+@import "../vendor/bootstrap/scss/pagination";
+@import "../vendor/bootstrap/scss/badge";
+@import "../vendor/bootstrap/scss/alert";
+@import "../vendor/bootstrap/scss/progress";
+@import "../vendor/bootstrap/scss/media";
+@import "../vendor/bootstrap/scss/list-group";
+@import "../vendor/bootstrap/scss/close";
+@import "../vendor/bootstrap/scss/modal";
+@import "../vendor/bootstrap/scss/tooltip";
+@import "../vendor/bootstrap/scss/popover";
+@import "../vendor/bootstrap/scss/print";

package/src/scss/gitlab_ui_no_utils.scss

@@ -0,0 +1,24 @@
+@import "mixins";
+
+@import "bootstrap_no_utils";
+@import "bootstrap_vue";
+
+// Design Tokens
+@import "tokens";
+
+// Settings
+@import "functions";
+@import "variables";
+@import "typescale/index";
+
+// Body
+@import "body";
+
+// Typography
+@import "typography";
+
+// Components
+@import "components";
+
+// Themes
+@import "themes";

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

@@ -19,6 +19,7 @@
   --gl-color-alpha-light-16: rgba(255, 255, 255, 0.16);
   --gl-color-alpha-light-24: rgba(255, 255, 255, 0.24);
   --gl-color-alpha-light-36: rgba(255, 255, 255, 0.36);
+  --gl-color-alpha-light-40: rgba(255, 255, 255, 0.4);
   --gl-color-blue-50: #e9f3fc;
   --gl-color-blue-100: #cbe2f9;
   --gl-color-blue-200: #9dc7f1;
@@ -378,12 +379,6 @@
   --t-white-a-04: rgba(255, 255, 255, 0.04); /** Use color.alpha.light.4 instead. */
   --t-white-a-06: rgba(255, 255, 255, 0.06); /** Use color.alpha.light.6 instead. */
   --t-white-a-08: rgba(255, 255, 255, 0.08); /** Use color.alpha.light.8 instead. */
-  --gl-action-neutral-background-color-default: rgba(164, 163, 168, 0); /** Used for the background of a neutral action in the default state. */
-  --gl-action-neutral-background-color-hover: rgba(164, 163, 168, 0.16); /** Used for the background of a neutral action in the hover state. */
-  --gl-action-neutral-background-color-active: rgba(83, 81, 88, 0.24); /** Used for the background of a neutral action in the active state. */
-  --gl-action-confirm-background-color-default: rgba(99, 166, 233, 0); /** Used for the background of a confirm (positive) action in the default state. */
-  --gl-action-confirm-background-color-hover: rgba(99, 166, 233, 0.16); /** Used for the background of a confirm (positive) action in the hover state. */
-  --gl-action-confirm-background-color-active: rgba(11, 92, 173, 0.24); /** Used for the background of a confirm (positive) action in the active state. */
   --gl-action-danger-background-color-default: rgba(245, 127, 108, 0); /** Used for the background of a danger (destructive) action in the default state. */
   --gl-action-danger-background-color-hover: rgba(245, 127, 108, 0.16); /** Used for the background of a danger (destructive) action in the hover state. */
   --gl-action-danger-background-color-active: rgba(174, 24, 0, 0.24); /** Used for the background of a danger (destructive) action in the active state. */
@@ -566,25 +561,20 @@
   --gl-button-default-primary-border-color-default: var(--gl-color-neutral-200); /** Used for the border of an default primary button in the default state. */
   --gl-button-default-primary-border-color-hover: var(--gl-color-neutral-400); /** Used for the border of an default primary button in the hover state. */
   --gl-button-default-primary-border-color-active: var(--gl-color-neutral-600); /** Used for the border of an default primary button in the active state. */
-  --gl-button-default-tertiary-background-color-default: var(--gl-action-neutral-background-color-default); /** Used for the background of a default borderless, tertiary button in the default state. */
-  --gl-button-default-tertiary-background-color-hover: var(--gl-action-neutral-background-color-hover); /** Used for the background of a default borderless, tertiary button in the hover state. */
-  --gl-button-default-tertiary-background-color-active: var(--gl-action-neutral-background-color-active); /** Used for the background of a default borderless, tertiary button in the active state. */
   --gl-button-confirm-primary-foreground-color-default: var(--gl-color-neutral-0); /** Used for the foreground of a confirm (positive) primary button in the default state. */
-  --gl-button-confirm-primary-border-color-default: var(--gl-color-blue-600); /** Used for the border of a confirm (positive) primary button in the default state. */
-  --gl-button-confirm-primary-border-color-hover: var(--gl-color-blue-800); /** Used for the border of a confirm (positive) primary button in the hover state. */
-  --gl-button-confirm-primary-border-color-active: var(--gl-color-blue-900); /** Used for the border of a confirm (positive) primary button in the active state. */
-  --gl-button-confirm-secondary-foreground-color-default: var(--gl-color-blue-500); /** Used for the foreground of a confirm (positive) button in the default state. */
-  --gl-button-confirm-secondary-foreground-color-hover: var(--gl-color-blue-700); /** Used for the foreground of a confirm (positive) button in the hover state. */
-  --gl-button-confirm-secondary-foreground-color-active: var(--gl-color-blue-900); /** Used for the foreground of a confirm (positive) button in the active state. */
+  --gl-button-confirm-primary-background-color-default: var(--gl-color-neutral-800); /** Used for the background of a confirm (positive) primary button in the default state. */
+  --gl-button-confirm-primary-background-color-hover: var(--gl-color-neutral-950); /** Used for the background of a confirm (positive) primary button in the hover state. */
+  --gl-button-confirm-primary-background-color-active: var(--gl-color-neutral-1000); /** Used for the background of a confirm (positive) primary button in the active state. */
+  --gl-button-confirm-primary-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a confirm (positive) primary button in the default state. */
+  --gl-button-confirm-secondary-foreground-color-default: var(--gl-color-neutral-800); /** Used for the foreground of a confirm (positive) button in the default state. */
+  --gl-button-confirm-secondary-foreground-color-hover: var(--gl-color-neutral-950); /** Used for the foreground of a confirm (positive) button in the hover state. */
+  --gl-button-confirm-secondary-foreground-color-active: var(--gl-color-neutral-1000); /** Used for the foreground of a confirm (positive) button in the active state. */
   --gl-button-confirm-secondary-background-color-default: var(--gl-color-neutral-0); /** Used for the background of an outlined confirm (positive) button in the default state. */
-  --gl-button-confirm-secondary-background-color-hover: var(--gl-color-blue-50); /** Used for the background of an outlined confirm (positive) button in the hover state. */
-  --gl-button-confirm-secondary-background-color-active: var(--gl-color-blue-100); /** Used for the background of an outlined confirm (positive) button in the active state. */
-  --gl-button-confirm-secondary-border-color-default: var(--gl-color-blue-500); /** Used for the border of an outlined confirm (positive) button in the default state. */
-  --gl-button-confirm-secondary-border-color-hover: var(--gl-color-blue-700); /** Used for the border of an outlined confirm (positive) button in the hover state. */
-  --gl-button-confirm-secondary-border-color-active: var(--gl-color-blue-900); /** Used for the border of an outlined confirm (positive) button in the active state. */
-  --gl-button-confirm-tertiary-background-color-default: var(--gl-action-confirm-background-color-default); /** Used for the background of a borderless, tertiary confirm (positive) button in the default state. */
-  --gl-button-confirm-tertiary-background-color-hover: var(--gl-action-confirm-background-color-hover); /** Used for the background of a borderless, tertiary confirm (positive) button in the hover state. */
-  --gl-button-confirm-tertiary-background-color-active: var(--gl-action-confirm-background-color-active); /** Used for the background of a borderless, tertiary confirm (positive) button in the active state. */
+  --gl-button-confirm-secondary-background-color-hover: var(--gl-color-neutral-50); /** Used for the background of an outlined confirm (positive) button in the hover state. */
+  --gl-button-confirm-secondary-background-color-active: var(--gl-color-neutral-100); /** Used for the background of an outlined confirm (positive) button in the active state. */
+  --gl-button-confirm-secondary-border-color-default: var(--gl-color-neutral-800); /** Used for the border of an outlined confirm (positive) button in the default state. */
+  --gl-button-confirm-secondary-border-color-hover: var(--gl-color-neutral-950); /** Used for the border of an outlined confirm (positive) button in the hover state. */
+  --gl-button-confirm-secondary-border-color-active: var(--gl-color-neutral-1000); /** Used for the border of an outlined confirm (positive) button in the active state. */
   --gl-button-danger-primary-foreground-color-default: var(--gl-color-neutral-0); /** Used for the foreground of a danger (destructive) primary button in the default state. */
   --gl-button-danger-primary-background-color-default: var(--gl-color-red-500); /** Used for the background of a danger (destructive) primary button in the default state. */
   --gl-button-danger-primary-background-color-hover: var(--gl-color-red-600); /** Used for the background of a danger (destructive) primary button in the hover state. */
@@ -618,9 +608,6 @@
   --gl-chart-threshold-line-color: var(--gl-color-red-500); /** Used in charts to divide a threshold area in a chart from other data. */
   --gl-chart-zoom-filler-color: var(--gl-color-alpha-dark-8); /** Used in charts for the overlay color when zooming in on a specific area of data. */
   --gl-datepicker-background-color: var(--gl-color-neutral-0); /** Used for the background color of datepicker. */
-  --gl-dropdown-option-background-color-unselected-default: var(--gl-action-neutral-background-color-default); /** Used for the background of an unselected dropdown option in the default state. */
-  --gl-dropdown-option-background-color-unselected-hover: var(--gl-action-neutral-background-color-hover); /** Used for the background of an unselected dropdown option in the hover state. */
-  --gl-dropdown-option-background-color-unselected-active: var(--gl-action-neutral-background-color-active); /** Used for the background of an unselected dropdown option in the active state. */
   --gl-dropdown-option-background-color-selected-default: var(--gl-color-neutral-50); /** Used for the background of a selected dropdown option in the default state. */
   --gl-dropdown-option-background-color-selected-hover: var(--gl-color-neutral-100); /** Used for the background of a selected dropdown option in the hover state. */
   --gl-dropdown-option-background-color-selected-active: var(--gl-color-neutral-200); /** Used for the background of a selected dropdown option in the active state. */
@@ -648,9 +635,6 @@
   --gl-link-mention-background-color-default: var(--gl-color-blue-100); /** Used for the mention link default background. */
   --gl-link-mention-background-color-current: var(--gl-color-orange-100); /** Used for the mention link background when referencing the current user. */
   --gl-nav-item-font-size: var(--gl-font-size-300); /** Used for the font size of a navigation item */
-  --gl-nav-item-background-color-default: var(--gl-action-neutral-background-color-default); /** Used for the background of a default navigation item in the default state. */
-  --gl-nav-item-background-color-hover: var(--gl-action-neutral-background-color-hover); /** Used for the background of a default navigation item in the hover state. */
-  --gl-nav-item-background-color-active: var(--gl-action-neutral-background-color-active); /** Used for the background of a default navigation item in the active state. */
   --gl-progress-bar-track-color: var(--gl-color-neutral-200); /** Used for the track color for all progress-bar variants. */
   --gl-skeleton-loader-background-color: var(--gl-color-neutral-100); /** Used for the skeleton loader background color. */
   --gl-skeleton-loader-shimmer-color: var(--gl-color-neutral-50); /** Used for the animated shimmer effect in a skeleton loader. */
@@ -658,7 +642,9 @@
   --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-tab-selected-indicator-color-default: var(--gl-color-blue-500); /** Used for the selected indicator of a tab. */
+  --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. */
   --black: var(--gl-color-neutral-1000);
@@ -734,16 +720,20 @@
   --gl-action-disabled-background-color: var(--gl-color-neutral-50); /** Used for the background of a disabled action. */
   --gl-action-disabled-border-color: var(--gl-color-neutral-100); /** Used for the border of a disabled action. */
   --gl-action-selected-foreground-color-default: var(--gl-color-neutral-0); /** Used for the foreground of a selected action in the default state. */
-  --gl-action-selected-background-color-default: var(--gl-color-blue-500); /** Used for the background of a selected action in the default state. */
-  --gl-action-selected-background-color-hover: var(--gl-color-blue-700); /** Used for the background of a selected action in the hover state. */
-  --gl-action-selected-background-color-active: var(--gl-color-blue-800); /** Used for the background of a selected action in the active state. */
+  --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-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-focus: var(--gl-action-neutral-background-color-hover); /** Used for the background of a neutral action in the focus 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. */
+  --gl-action-neutral-background-color-active: var(--gl-color-alpha-dark-16); /** Used for the background of a neutral action in the active state. */
   --gl-action-neutral-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a neutral action in the default state. */
-  --gl-action-confirm-foreground-color-default: var(--gl-color-blue-500); /** Used for the foreground of a confirm (positive) action in the default state. */
-  --gl-action-confirm-foreground-color-hover: var(--gl-color-blue-700); /** Used for the foreground of a confirm (positive) action in the hover state. */
-  --gl-action-confirm-foreground-color-active: var(--gl-color-blue-900); /** Used for the foreground of a confirm (positive) action in the active state. */
-  --gl-action-confirm-background-color-focus: var(--gl-action-confirm-background-color-hover); /** Used for the background of a confirm (positive) action in the focus state. */
+  --gl-action-confirm-foreground-color-default: var(--gl-color-neutral-800); /** Used for the foreground of a confirm (positive) action in the default state. */
+  --gl-action-confirm-foreground-color-hover: var(--gl-color-neutral-950); /** Used for the foreground of a confirm (positive) action in the hover state. */
+  --gl-action-confirm-foreground-color-active: var(--gl-color-neutral-1000); /** Used for the foreground of a confirm (positive) action in the active state. */
+  --gl-action-confirm-background-color-default: var(--gl-color-alpha-0); /** Used for the background of a confirm (positive) action in the default state. */
+  --gl-action-confirm-background-color-hover: var(--gl-color-alpha-dark-6); /** Used for the background of a confirm (positive) action in the hover state. */
+  --gl-action-confirm-background-color-active: var(--gl-color-alpha-dark-16); /** Used for the background of a confirm (positive) action in the active state. */
   --gl-action-confirm-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a confirm action in the default state. */
   --gl-action-danger-foreground-color-default: var(--gl-color-red-500); /** Used for the foreground of a danger (destructive) action in the default state. */
   --gl-action-danger-foreground-color-hover: var(--gl-color-red-700); /** Used for the foreground of a danger (destructive) action in the hover state. */
@@ -771,16 +761,12 @@
   --gl-control-background-color-disabled: var(--gl-color-neutral-10); /** Used for disabled form control (checkbox, input, radio button, textarea) background. */
   --gl-control-background-color-concatenation: var(--gl-color-neutral-10); /** Used for the background of static content that prepends or appends a text input. */
   --gl-control-background-color-readonly: var(--gl-color-alpha-dark-2); /** Used for the background of static content that prepends or appends a text input. */
-  --gl-control-background-color-selected-default: var(--gl-color-blue-500); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) background. */
-  --gl-control-background-color-selected-hover: var(--gl-color-blue-700); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover. */
-  --gl-control-background-color-selected-focus: var(--gl-color-blue-700); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover. */
+  --gl-control-background-color-selected-default: var(--gl-color-neutral-800); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) background. */
+  --gl-control-background-color-selected-hover: var(--gl-color-neutral-950); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover. */
   --gl-control-border-color-default: var(--gl-color-neutral-400); /** Used for form control (input, radio button, checkbox, textarea) default border. */
   --gl-control-border-color-hover: var(--gl-color-neutral-600); /** Used for form control (input, radio button, checkbox, textarea) border on hover. */
   --gl-control-border-color-focus: var(--gl-color-neutral-900); /** Used for form control (input, radio button, checkbox, textarea) border on focus. */
   --gl-control-border-color-disabled: var(--gl-color-neutral-100); /** Used for disabled form control (input, radio button, checkbox, textarea) border. */
-  --gl-control-border-color-selected-default: var(--gl-color-blue-500); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border. */
-  --gl-control-border-color-selected-hover: var(--gl-color-blue-700); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover. */
-  --gl-control-border-color-selected-focus: var(--gl-color-blue-700); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus. */
   --gl-control-placeholder-color: var(--gl-color-neutral-500); /** Used for placeholder text within inputs. */
   --gl-control-indicator-color-selected: var(--gl-color-neutral-0); /** Used for checkbox and radio button state indicators. */
   --gl-control-indicator-color-disabled: var(--gl-color-neutral-500); /** Used for disabled checkbox and radio button state indicators. */
@@ -958,19 +944,24 @@
   --gl-button-default-primary-background-color-focus: var(--gl-button-default-primary-background-color-hover); /** Used for the background of an default primary button in the focus state. */
   --gl-button-default-primary-border-color-focus: var(--gl-button-default-primary-border-color-hover); /** Used for the border of an default primary button in the focus state. */
   --gl-button-default-tertiary-foreground-color-default: var(--gl-action-neutral-foreground-color-default); /** Used for the foreground of a default borderless, tertiary button in the default state. */
-  --gl-button-default-tertiary-background-color-focus: var(--gl-action-neutral-background-color-focus); /** Used for the background of a default borderless, tertiary button in the focus state. */
+  --gl-button-default-tertiary-background-color-default: var(--gl-action-neutral-background-color-default); /** Used for the background of a default borderless, tertiary button in the default state. */
+  --gl-button-default-tertiary-background-color-hover: var(--gl-action-neutral-background-color-hover); /** Used for the background of a default borderless, tertiary button in the hover state. */
+  --gl-button-default-tertiary-background-color-active: var(--gl-action-neutral-background-color-active); /** Used for the background of a default borderless, tertiary button in the active state. */
   --gl-button-default-tertiary-border-color-default: var(--gl-action-neutral-border-color-default); /** Used for the border of a default borderless, tertiary button in the default state. */
-  --gl-button-confirm-primary-background-color-default: var(--gl-action-strong-confirm-background-color-default); /** Used for the background of a confirm (positive) primary button in the default state. */
-  --gl-button-confirm-primary-background-color-hover: var(--gl-action-strong-confirm-background-color-hover); /** Used for the background of a confirm (positive) primary button in the hover state. */
-  --gl-button-confirm-primary-background-color-active: var(--gl-action-strong-confirm-background-color-active); /** Used for the background of a confirm (positive) primary button in the active state. */
-  --gl-button-confirm-primary-border-color-focus: var(--gl-button-confirm-primary-border-color-hover); /** Used for the border of a confirm (positive) primary button in the focus state. */
+  --gl-button-confirm-primary-foreground-color-hover: var(--gl-button-confirm-primary-foreground-color-default); /** Used for the foreground of a confirm (positive) primary button in the hover state. */
+  --gl-button-confirm-primary-background-color-focus: var(--gl-button-confirm-primary-background-color-hover); /** Used for the background of a confirm (positive) primary button in the focus state. */
+  --gl-button-confirm-primary-border-color-hover: var(--gl-button-confirm-primary-border-color-default); /** Used for the border of a confirm (positive) primary button in the hover state. */
+  --gl-button-confirm-primary-border-color-focus: var(--gl-button-confirm-primary-border-color-default); /** Used for the border of a confirm (positive) primary button in the focus state. */
+  --gl-button-confirm-primary-border-color-active: var(--gl-button-confirm-primary-border-color-default); /** Used for the border of a confirm (positive) primary button in the active state. */
   --gl-button-confirm-secondary-foreground-color-focus: var(--gl-button-confirm-secondary-foreground-color-hover); /** Used for the foreground of a confirm (positive) button in the focus state. */
   --gl-button-confirm-secondary-background-color-focus: var(--gl-button-confirm-secondary-background-color-hover); /** Used for the background of an outlined confirm (positive) button in the focus state. */
   --gl-button-confirm-secondary-border-color-focus: var(--gl-button-confirm-secondary-border-color-hover); /** Used for the border of an outlined confirm (positive) button in the focus state. */
   --gl-button-confirm-tertiary-foreground-color-default: var(--gl-action-confirm-foreground-color-default); /** Used for the foreground of a borderless, tertiary confirm (positive) button in the default state. */
   --gl-button-confirm-tertiary-foreground-color-hover: var(--gl-action-confirm-foreground-color-hover); /** Used for the foreground of a borderless, tertiary confirm (positive) button in the hover state. */
   --gl-button-confirm-tertiary-foreground-color-active: var(--gl-action-confirm-foreground-color-active); /** Used for the foreground of a borderless, tertiary confirm (positive) button in the active state. */
-  --gl-button-confirm-tertiary-background-color-focus: var(--gl-action-confirm-background-color-focus); /** Used for the background of a borderless, tertiary confirm (positive) button in the focus state. */
+  --gl-button-confirm-tertiary-background-color-default: var(--gl-action-confirm-background-color-default); /** Used for the background of a borderless, tertiary confirm (positive) button in the default state. */
+  --gl-button-confirm-tertiary-background-color-hover: var(--gl-action-confirm-background-color-hover); /** Used for the background of a borderless, tertiary confirm (positive) button in the hover state. */
+  --gl-button-confirm-tertiary-background-color-active: var(--gl-action-confirm-background-color-active); /** Used for the background of a borderless, tertiary confirm (positive) button in the active state. */
   --gl-button-confirm-tertiary-border-color-default: var(--gl-action-confirm-border-color-default); /** Used for the border of a borderless, tertiary confirm (positive) button in the default state. */
   --gl-button-danger-primary-foreground-color-hover: var(--gl-button-danger-primary-foreground-color-default); /** Used for the foreground of a danger (destructive) primary button in the hover state. */
   --gl-button-danger-primary-foreground-color-focus: var(--gl-button-danger-primary-foreground-color-default); /** Used for the foreground of a danger (destructive) primary button in the focus state. */
@@ -1005,13 +996,15 @@
   --gl-dropdown-option-text-color-disabled: var(--gl-action-disabled-foreground-color); /** Used for the text of a dropdown option in the disabled state. */
   --gl-dropdown-option-indicator-color-selected-default: var(--gl-control-background-color-selected-default); /** Used for the dropdown selected option indicator in the default state. */
   --gl-dropdown-option-indicator-color-selected-hover: var(--gl-control-background-color-selected-hover); /** Used for the dropdown selected option indicator in the hover state. */
-  --gl-dropdown-option-indicator-color-selected-focus: var(--gl-control-background-color-selected-focus); /** Used for the dropdown selected option indicator in the focus state. */
-  --gl-dropdown-option-indicator-color-selected-active: var(--gl-control-background-color-selected-focus); /** Used for the dropdown selected option indicator in the active state. */
-  --gl-dropdown-option-background-color-unselected-focus: var(--gl-action-neutral-background-color-focus); /** Used for the background of an unselected dropdown option in the focus state. */
+  --gl-dropdown-option-background-color-unselected-default: var(--gl-action-neutral-background-color-default); /** Used for the background of an unselected dropdown option in the default state. */
+  --gl-dropdown-option-background-color-unselected-hover: var(--gl-action-neutral-background-color-hover); /** Used for the background of an unselected dropdown option in the hover state. */
+  --gl-dropdown-option-background-color-unselected-active: var(--gl-action-neutral-background-color-active); /** Used for the background of an unselected dropdown option in the active state. */
   --gl-dropdown-option-background-color-selected-focus: var(--gl-dropdown-option-background-color-selected-hover); /** Used for the background of a selected dropdown option in the focus state. */
   --gl-modal-border-radius: var(--gl-border-radius-2xl); /** Used for modal border radius. */
   --gl-nav-item-foreground-color-default: var(--gl-action-neutral-foreground-color-default); /** Used for the foreground of a default navigation item in the default state. */
-  --gl-nav-item-background-color-focus: var(--gl-action-neutral-background-color-focus); /** Used for the background of a default navigation item in the focus state. */
+  --gl-nav-item-background-color-default: var(--gl-action-neutral-background-color-default); /** Used for the background of a default navigation item in the default state. */
+  --gl-nav-item-background-color-hover: var(--gl-action-neutral-background-color-hover); /** Used for the background of a default navigation item in the hover state. */
+  --gl-nav-item-background-color-active: var(--gl-action-neutral-background-color-active); /** Used for the background of a default navigation item in the active state. */
   --gl-nav-item-selected-foreground-color-default: var(--gl-action-selected-foreground-color-default); /** Used for the foreground of a selected navigation item in the default state. */
   --gl-nav-item-selected-background-color-default: var(--gl-action-selected-background-color-default); /** Used for the background of a selected navigation item in the default state. */
   --gl-nav-item-selected-background-color-hover: var(--gl-action-selected-background-color-hover); /** Used for the background of a selected navigation item in the hover state. */
@@ -1022,6 +1015,14 @@
   --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-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. */
+  --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. */
@@ -1039,10 +1040,12 @@
   --gl-action-neutral-foreground-color-hover: var(--gl-action-neutral-foreground-color-default); /** Used for the foreground of a neutral action in the hover state. */
   --gl-action-neutral-foreground-color-focus: var(--gl-action-neutral-foreground-color-default); /** Used for the foreground of a neutral action in the focus state. */
   --gl-action-neutral-foreground-color-active: var(--gl-action-neutral-foreground-color-default); /** Used for the foreground of a neutral action in the active state. */
+  --gl-action-neutral-background-color-focus: var(--gl-action-neutral-background-color-hover); /** Used for the background of a neutral action in the focus state. */
   --gl-action-neutral-border-color-hover: var(--gl-action-neutral-border-color-default); /** Used for the border of a neutral action in the hover state. */
   --gl-action-neutral-border-color-focus: var(--gl-action-neutral-border-color-default); /** Used for the border of a neutral action in the focus state. */
   --gl-action-neutral-border-color-active: var(--gl-action-neutral-border-color-default); /** Used for the border of a neutral action in the active state. */
   --gl-action-confirm-foreground-color-focus: var(--gl-action-confirm-foreground-color-hover); /** Used for the foreground of a confirm (positive) action in the focus state. */
+  --gl-action-confirm-background-color-focus: var(--gl-action-confirm-background-color-hover); /** Used for the background of a confirm (positive) action in the focus state. */
   --gl-action-confirm-border-color-hover: var(--gl-action-confirm-border-color-default); /** Used for the border of a confirm action in the hover state. */
   --gl-action-confirm-border-color-focus: var(--gl-action-confirm-border-color-default); /** Used for the border of a confirm action in the focus state. */
   --gl-action-confirm-border-color-active: var(--gl-action-confirm-border-color-default); /** Used for the border of a confirm action in the active state. */
@@ -1056,7 +1059,10 @@
   --gl-action-strong-neutral-background-color-focus: var(--gl-action-strong-neutral-background-color-hover); /** Used for the background of a strong neutral action in the focus state. */
   --gl-action-strong-neutral-foreground-color-hover: var(--gl-action-strong-neutral-foreground-color-default); /** Used for the foreground of a strong neutral action in the hover state. */
   --gl-action-strong-neutral-border-color-hover: var(--gl-action-strong-neutral-border-color-default); /** Used for the border of a strong neutral action in the hover state. */
+  --gl-control-background-color-selected-focus: var(--gl-control-background-color-selected-hover); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) background on focus. */
   --gl-control-border-color-error: var(--gl-feedback-danger-border-color); /** Used for invalid form control (input, textarea) border. */
+  --gl-control-border-color-selected-default: var(--gl-control-background-color-selected-default); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border. */
+  --gl-control-border-color-selected-hover: var(--gl-control-background-color-selected-hover); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover. */
   --gl-control-border-radius: var(--gl-border-radius-lg); /** Used for form control (input, radio button, checkbox, textarea) default border radius. */
   --gl-control-text-color-error: var(--gl-text-color-danger); /** Used for the helper text when the input is invalid. */
   --gl-control-text-color-valid: var(--gl-text-color-success); /** Used for the helper text when the input is valid. */
@@ -1185,12 +1191,13 @@
   --gl-button-default-tertiary-foreground-color-hover: var(--gl-action-neutral-foreground-color-hover); /** Used for the foreground of a default borderless, tertiary button in the hover state. */
   --gl-button-default-tertiary-foreground-color-focus: var(--gl-action-neutral-foreground-color-focus); /** Used for the foreground of a default borderless, tertiary button in the focus state. */
   --gl-button-default-tertiary-foreground-color-active: var(--gl-action-neutral-foreground-color-active); /** Used for the foreground of a default borderless, tertiary button in the active state. */
+  --gl-button-default-tertiary-background-color-focus: var(--gl-action-neutral-background-color-focus); /** Used for the background of a default borderless, tertiary button in the focus state. */
   --gl-button-default-tertiary-border-color-hover: var(--gl-action-neutral-border-color-hover); /** Used for the border of a default borderless, tertiary button in the hover state. */
   --gl-button-default-tertiary-border-color-focus: var(--gl-action-neutral-border-color-focus); /** Used for the border of a default borderless, tertiary button in the focus state. */
   --gl-button-default-tertiary-border-color-active: var(--gl-action-neutral-border-color-active); /** Used for the border of a default borderless, tertiary button in the active state. */
-  --gl-button-confirm-primary-foreground-color-hover: var(--gl-action-strong-confirm-foreground-color-hover); /** Used for the foreground of a confirm (positive) primary button in the hover state. */
-  --gl-button-confirm-primary-background-color-focus: var(--gl-action-strong-confirm-background-color-focus); /** Used for the background of a confirm (positive) primary button in the focus state. */
+  --gl-button-confirm-primary-foreground-color-focus: var(--gl-button-confirm-primary-foreground-color-hover); /** Used for the foreground of a confirm (positive) primary button in the focus state. */
   --gl-button-confirm-tertiary-foreground-color-focus: var(--gl-action-confirm-foreground-color-focus); /** Used for the foreground of a borderless, tertiary confirm (positive) button in the focus state. */
+  --gl-button-confirm-tertiary-background-color-focus: var(--gl-action-confirm-background-color-focus); /** Used for the background of a borderless, tertiary confirm (positive) button in the focus state. */
   --gl-button-confirm-tertiary-border-color-hover: var(--gl-action-confirm-border-color-hover); /** Used for the border of a borderless, tertiary confirm (positive) button in the hover state. */
   --gl-button-confirm-tertiary-border-color-focus: var(--gl-action-confirm-border-color-focus); /** Used for the border of a borderless, tertiary confirm (positive) button in the focus state. */
   --gl-button-confirm-tertiary-border-color-active: var(--gl-action-confirm-border-color-active); /** Used for the border of a borderless, tertiary confirm (positive) button in the active state. */
@@ -1210,12 +1217,21 @@
   --gl-dropdown-option-text-color-hover: var(--gl-action-neutral-foreground-color-hover); /** Used for the text of a dropdown option in the hover state. */
   --gl-dropdown-option-text-color-focus: var(--gl-action-neutral-foreground-color-focus); /** Used for the text of a dropdown option in the focus state. */
   --gl-dropdown-option-text-color-active: var(--gl-action-neutral-foreground-color-active); /** Used for the text of a dropdown option in the active state. */
+  --gl-dropdown-option-indicator-color-selected-focus: var(--gl-control-background-color-selected-focus); /** Used for the dropdown selected option indicator in the focus state. */
+  --gl-dropdown-option-indicator-color-selected-active: var(--gl-control-background-color-selected-focus); /** Used for the dropdown selected option indicator in the active state. */
+  --gl-dropdown-option-background-color-unselected-focus: var(--gl-action-neutral-background-color-focus); /** Used for the background of an unselected dropdown option in the focus state. */
   --gl-nav-item-border-radius: var(--gl-action-border-radius); /** Used for the border radius of a navigation item */
   --gl-nav-item-foreground-color-hover: var(--gl-action-neutral-foreground-color-hover); /** Used for the foreground of a default navigation item in the hover state. */
   --gl-nav-item-foreground-color-focus: var(--gl-action-neutral-foreground-color-focus); /** Used for the foreground of a default navigation item in the focus state. */
   --gl-nav-item-foreground-color-active: var(--gl-action-neutral-foreground-color-active); /** Used for the foreground of a default navigation item in the active state. */
+  --gl-nav-item-background-color-focus: var(--gl-action-neutral-background-color-focus); /** Used for the background of a default navigation item in the focus state. */
   --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-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-token-border-radius: var(--gl-border-radius-default); /** Used for token border radius. */
@@ -1225,13 +1241,15 @@
   --gl-action-strong-confirm-border-color-focus: var(--gl-action-strong-confirm-border-color-hover); /** Used for the border of a strong confirm action in the focus state. */
   --gl-action-strong-neutral-foreground-color-focus: var(--gl-action-strong-neutral-foreground-color-hover); /** Used for the foreground of a strong neutral action in the focus state. */
   --gl-action-strong-neutral-border-color-focus: var(--gl-action-strong-neutral-border-color-hover); /** Used for the border of a strong neutral action in the focus state. */
-  --gl-button-confirm-primary-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-focus); /** Used for the foreground of a confirm (positive) primary button in the focus state. */
+  --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-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-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-button-confirm-primary-foreground-color-active: var(--gl-action-strong-confirm-foreground-color-active); /** Used for the foreground of a confirm (positive) primary button 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-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. */
 }