@gitlab/ui 134.6.0 → 134.7.0

package/src/tokens/build/css/tokens.dark.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;
@@ -268,9 +269,6 @@
   --gl-button-default-primary-background-color-default: rgba(137, 136, 141, 0.4); /** Used for the background of an default primary button in the default state. */
   --gl-button-default-primary-background-color-hover: rgba(137, 136, 141, 0.64); /** Used for the background of an default primary button in the hover state. */
   --gl-button-default-primary-background-color-active: rgba(137, 136, 141, 0.32); /** Used for the background of an default primary button in the active state. */
-  --gl-button-confirm-secondary-background-color-default: rgba(66, 143, 220, 0.4); /** Used for the background of an outlined confirm (positive) button in the default state. */
-  --gl-button-confirm-secondary-background-color-hover: rgba(66, 143, 220, 0.64); /** Used for the background of an outlined confirm (positive) button in the hover state. */
-  --gl-button-confirm-secondary-background-color-active: rgba(66, 143, 220, 0.32); /** Used for the background of an outlined confirm (positive) button in the active state. */
   --gl-button-danger-secondary-background-color-default: rgba(236, 89, 65, 0.4); /** Used for the background of an outlined danger (destructive) button in the default state. */
   --gl-button-danger-secondary-background-color-hover: rgba(236, 89, 65, 0.64); /** Used for the background of an outlined danger (destructive) button in the hover state. */
   --gl-button-danger-secondary-background-color-active: rgba(236, 89, 65, 0.32); /** Used for the background of an outlined danger (destructive) button in the active state. */
@@ -392,12 +390,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(137, 136, 141, 0); /** Used for the background of a neutral action in the default state. */
-  --gl-action-neutral-background-color-hover: rgba(137, 136, 141, 0.4); /** Used for the background of a neutral action in the hover state. */
-  --gl-action-neutral-background-color-active: rgba(137, 136, 141, 0.16); /** Used for the background of a neutral action in the active state. */
-  --gl-action-confirm-background-color-default: rgba(66, 143, 220, 0); /** Used for the background of a confirm (positive) action in the default state. */
-  --gl-action-confirm-background-color-hover: rgba(66, 143, 220, 0.4); /** Used for the background of a confirm (positive) action in the hover state. */
-  --gl-action-confirm-background-color-active: rgba(66, 143, 220, 0.16); /** Used for the background of a confirm (positive) action in the active state. */
   --gl-action-danger-background-color-default: rgba(236, 89, 65, 0); /** Used for the background of a danger (destructive) action in the default state. */
   --gl-action-danger-background-color-hover: rgba(236, 89, 65, 0.4); /** Used for the background of a danger (destructive) action in the hover state. */
   --gl-action-danger-background-color-active: rgba(236, 89, 65, 0.16); /** Used for the background of a danger (destructive) action in the active state. */
@@ -583,23 +575,20 @@
   --gl-button-default-primary-border-color-default: var(--gl-color-alpha-0); /** Used for the border of an default primary button in the default state. */
   --gl-button-default-primary-border-color-hover: var(--gl-color-alpha-0); /** Used for the border of an default primary button in the hover state. */
   --gl-button-default-primary-border-color-active: var(--gl-color-alpha-0); /** 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-950); /** Used for the foreground of a confirm (positive) primary button in the default state. */
+  --gl-button-confirm-primary-background-color-default: var(--gl-color-neutral-50); /** 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-10); /** 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-100); /** 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-primary-border-color-hover: var(--gl-color-alpha-0); /** Used for the border of a confirm (positive) primary button in the hover state. */
-  --gl-button-confirm-primary-border-color-active: var(--gl-color-alpha-0); /** 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-100); /** Used for the foreground of a confirm (positive) button in the default state. */
-  --gl-button-confirm-secondary-foreground-color-hover: var(--gl-color-blue-100); /** Used for the foreground of a confirm (positive) button in the hover state. */
-  --gl-button-confirm-secondary-foreground-color-active: var(--gl-color-blue-100); /** Used for the foreground of a confirm (positive) button in the active 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-foreground-color-default: var(--gl-color-neutral-50); /** Used for the foreground of a confirm (positive) button in the default state. */
+  --gl-button-confirm-secondary-foreground-color-hover: var(--gl-color-neutral-10); /** Used for the foreground of a confirm (positive) button in the hover state. */
+  --gl-button-confirm-secondary-foreground-color-active: var(--gl-color-neutral-0); /** Used for the foreground of a confirm (positive) button in the active state. */
+  --gl-button-confirm-secondary-background-color-default: var(--gl-color-alpha-light-24); /** Used for the background of an outlined confirm (positive) button in the default state. */
+  --gl-button-confirm-secondary-background-color-hover: var(--gl-color-alpha-light-40); /** Used for the background of an outlined confirm (positive) button in the hover state. */
+  --gl-button-confirm-secondary-background-color-active: var(--gl-color-alpha-light-16); /** Used for the background of an outlined confirm (positive) button in the active state. */
   --gl-button-confirm-secondary-border-color-default: var(--gl-color-alpha-0); /** Used for the border of an outlined confirm (positive) button in the default state. */
   --gl-button-confirm-secondary-border-color-hover: var(--gl-color-alpha-0); /** Used for the border of an outlined confirm (positive) button in the hover state. */
   --gl-button-confirm-secondary-border-color-active: var(--gl-color-alpha-0); /** 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-danger-primary-foreground-color-default: var(--gl-color-neutral-950); /** 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-300); /** 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-200); /** Used for the background of a danger (destructive) primary button in the hover state. */
@@ -637,9 +626,6 @@
   --gl-chart-threshold-line-color: var(--gl-color-red-600); /** Used in charts to divide a threshold area in a chart from other data. */
   --gl-chart-zoom-filler-color: var(--gl-color-alpha-light-16); /** Used in charts for the overlay color when zooming in on a specific area of data. */
   --gl-datepicker-background-color: var(--gl-color-neutral-900); /** 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-800); /** Used for the background of a selected dropdown option in the default state. */
   --gl-dropdown-option-background-color-selected-hover: var(--gl-color-neutral-700); /** Used for the background of a selected dropdown option in the hover state. */
   --gl-dropdown-option-background-color-selected-active: var(--gl-color-neutral-900); /** Used for the background of a selected dropdown option in the active state. */
@@ -667,9 +653,6 @@
   --gl-link-mention-background-color-default: var(--gl-color-blue-800); /** Used for the mention link default background. */
   --gl-link-mention-background-color-current: var(--gl-color-orange-800); /** 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-700); /** Used for the track color for all progress-bar variants. */
   --gl-skeleton-loader-background-color: var(--gl-color-neutral-800); /** Used for the skeleton loader background color. */
   --gl-skeleton-loader-shimmer-color: var(--gl-color-neutral-700); /** Used for the animated shimmer effect in a skeleton loader. */
@@ -677,7 +660,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-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-tab-selected-indicator-color-default: var(--gl-color-blue-400); /** Used for the selected indicator of a tab. */
+  --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. */
   --black: var(--gl-color-neutral-0);
@@ -749,16 +734,20 @@
   --gl-action-disabled-background-color: var(--gl-color-neutral-900); /** Used for the background of a disabled action. */
   --gl-action-disabled-border-color: var(--gl-color-neutral-800); /** Used for the border of a disabled action. */
   --gl-action-selected-foreground-color-default: var(--gl-color-neutral-950); /** Used for the foreground of a selected action in the default state. */
-  --gl-action-selected-background-color-default: var(--gl-color-blue-300); /** Used for the background of a selected action in the default state. */
-  --gl-action-selected-background-color-hover: var(--gl-color-blue-200); /** Used for the background of a selected action in the hover state. */
-  --gl-action-selected-background-color-active: var(--gl-color-blue-100); /** Used for the background of a selected action in the active state. */
+  --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-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-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-light-16); /** Used for the background of a neutral action in the hover state. */
+  --gl-action-neutral-background-color-active: var(--gl-color-alpha-light-8); /** 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-200); /** Used for the foreground of a confirm (positive) action in the default state. */
-  --gl-action-confirm-foreground-color-hover: var(--gl-color-blue-100); /** Used for the foreground of a confirm (positive) action in the hover state. */
-  --gl-action-confirm-foreground-color-active: var(--gl-color-blue-100); /** 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-50); /** Used for the foreground of a confirm (positive) action in the default state. */
+  --gl-action-confirm-foreground-color-hover: var(--gl-color-neutral-10); /** Used for the foreground of a confirm (positive) action in the hover state. */
+  --gl-action-confirm-foreground-color-active: var(--gl-color-neutral-0); /** 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-light-16); /** Used for the background of a confirm (positive) action in the hover state. */
+  --gl-action-confirm-background-color-active: var(--gl-color-alpha-light-8); /** 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-200); /** Used for the foreground of a danger (destructive) action in the default state. */
   --gl-action-danger-foreground-color-hover: var(--gl-color-red-100); /** Used for the foreground of a danger (destructive) action in the hover state. */
@@ -788,16 +777,12 @@
   --gl-control-background-color-disabled: var(--gl-color-alpha-light-4); /** Used for disabled form control (checkbox, input, radio button, textarea) background. */
   --gl-control-background-color-concatenation: var(--gl-color-alpha-light-4); /** Used for the background of static content that prepends or appends a text input. */
   --gl-control-background-color-readonly: var(--gl-color-alpha-light-8); /** Used for the background of static content that prepends or appends a text input. */
-  --gl-control-background-color-selected-default: var(--gl-color-blue-300); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) background. */
-  --gl-control-background-color-selected-hover: var(--gl-color-blue-200); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover. */
-  --gl-control-background-color-selected-focus: var(--gl-color-blue-200); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover. */
+  --gl-control-background-color-selected-default: var(--gl-color-neutral-50); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) background. */
+  --gl-control-background-color-selected-hover: var(--gl-color-neutral-10); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover. */
   --gl-control-border-color-default: var(--gl-color-neutral-500); /** Used for form control (input, radio button, checkbox, textarea) default border. */
   --gl-control-border-color-hover: var(--gl-color-neutral-300); /** Used for form control (input, radio button, checkbox, textarea) border on hover. */
   --gl-control-border-color-focus: var(--gl-color-neutral-50); /** Used for form control (input, radio button, checkbox, textarea) border on focus. */
   --gl-control-border-color-disabled: var(--gl-color-neutral-800); /** Used for disabled form control (input, radio button, checkbox, textarea) border. */
-  --gl-control-border-color-selected-default: var(--gl-color-blue-400); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border. */
-  --gl-control-border-color-selected-hover: var(--gl-color-blue-200); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover. */
-  --gl-control-border-color-selected-focus: var(--gl-color-blue-200); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus. */
   --gl-control-placeholder-color: var(--gl-color-neutral-400); /** Used for placeholder text within inputs. */
   --gl-control-indicator-color-selected: var(--gl-color-neutral-950); /** Used for checkbox and radio button state indicators. */
   --gl-control-indicator-color-disabled: var(--gl-color-neutral-400); /** Used for disabled checkbox and radio button state indicators. */
@@ -970,18 +955,24 @@
   --gl-button-default-primary-foreground-color-active: var(--gl-button-default-primary-foreground-color-default); /** Used for the foreground of a default primary button in the active 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. */
@@ -1012,13 +1003,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. */
@@ -1029,6 +1022,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. */
@@ -1046,10 +1047,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. */
@@ -1062,7 +1065,10 @@
   --gl-action-strong-confirm-border-color-hover: var(--gl-action-strong-confirm-border-color-default); /** Used for the border of a strong confirm action in the hover state. */
   --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-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. */
@@ -1191,12 +1197,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. */
@@ -1212,12 +1219,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. */
@@ -1226,12 +1242,14 @@
   --gl-action-strong-confirm-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-hover); /** Used for the foreground of a strong confirm action in the focus state. */
   --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-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-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. */
 }

package/src/tokens/build/docs/tokens-tailwind-docs.dark.json

@@ -168,6 +168,7 @@
           "key": "{color.alpha.light.36}",
           "$value": "rgba(255, 255, 255, 0.36)",
           "$type": "color",
+          "$deprecated": true,
           "$extensions": {
             "com.figma.scopes": []
           },
@@ -176,6 +177,7 @@
           "original": {
             "$value": "rgba(255, 255, 255, 0.36)",
             "$type": "color",
+            "$deprecated": true,
             "$extensions": {
               "com.figma.scopes": []
             },
@@ -190,6 +192,33 @@
             "36"
           ],
           "cssWithValue": "var(--gl-color-alpha-light-36)"
+        },
+        "40": {
+          "key": "{color.alpha.light.40}",
+          "$value": "rgba(255, 255, 255, 0.4)",
+          "$type": "color",
+          "$extensions": {
+            "com.figma.scopes": []
+          },
+          "filePath": "src/tokens/constant/color.alpha.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "rgba(255, 255, 255, 0.4)",
+            "$type": "color",
+            "$extensions": {
+              "com.figma.scopes": []
+            },
+            "key": "{color.alpha.light.40}"
+          },
+          "name": "COLOR_ALPHA_LIGHT_40",
+          "attributes": {},
+          "path": [
+            "color",
+            "alpha",
+            "light",
+            "40"
+          ],
+          "cssWithValue": "var(--gl-color-alpha-light-40)"
         }
       },
       "dark": {
@@ -6112,6 +6141,7 @@
           "key": "{color.alpha.light.36}",
           "$value": "rgba(255, 255, 255, 0.36)",
           "$type": "color",
+          "$deprecated": true,
           "$extensions": {
             "com.figma.scopes": []
           },
@@ -6120,6 +6150,7 @@
           "original": {
             "$value": "rgba(255, 255, 255, 0.36)",
             "$type": "color",
+            "$deprecated": true,
             "$extensions": {
               "com.figma.scopes": []
             },
@@ -6134,6 +6165,33 @@
             "36"
           ],
           "cssWithValue": "var(--gl-color-alpha-light-36)"
+        },
+        "40": {
+          "key": "{color.alpha.light.40}",
+          "$value": "rgba(255, 255, 255, 0.4)",
+          "$type": "color",
+          "$extensions": {
+            "com.figma.scopes": []
+          },
+          "filePath": "src/tokens/constant/color.alpha.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "rgba(255, 255, 255, 0.4)",
+            "$type": "color",
+            "$extensions": {
+              "com.figma.scopes": []
+            },
+            "key": "{color.alpha.light.40}"
+          },
+          "name": "COLOR_ALPHA_LIGHT_40",
+          "attributes": {},
+          "path": [
+            "color",
+            "alpha",
+            "light",
+            "40"
+          ],
+          "cssWithValue": "var(--gl-color-alpha-light-40)"
         }
       },
       "dark": {
@@ -11747,6 +11805,7 @@
           "key": "{color.alpha.light.36}",
           "$value": "rgba(255, 255, 255, 0.36)",
           "$type": "color",
+          "$deprecated": true,
           "$extensions": {
             "com.figma.scopes": []
           },
@@ -11755,6 +11814,7 @@
           "original": {
             "$value": "rgba(255, 255, 255, 0.36)",
             "$type": "color",
+            "$deprecated": true,
             "$extensions": {
               "com.figma.scopes": []
             },
@@ -11769,6 +11829,33 @@
             "36"
           ],
           "cssWithValue": "var(--gl-color-alpha-light-36)"
+        },
+        "40": {
+          "key": "{color.alpha.light.40}",
+          "$value": "rgba(255, 255, 255, 0.4)",
+          "$type": "color",
+          "$extensions": {
+            "com.figma.scopes": []
+          },
+          "filePath": "src/tokens/constant/color.alpha.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "rgba(255, 255, 255, 0.4)",
+            "$type": "color",
+            "$extensions": {
+              "com.figma.scopes": []
+            },
+            "key": "{color.alpha.light.40}"
+          },
+          "name": "COLOR_ALPHA_LIGHT_40",
+          "attributes": {},
+          "path": [
+            "color",
+            "alpha",
+            "light",
+            "40"
+          ],
+          "cssWithValue": "var(--gl-color-alpha-light-40)"
         }
       },
       "dark": {
@@ -17583,6 +17670,7 @@
           "key": "{color.alpha.light.36}",
           "$value": "rgba(255, 255, 255, 0.36)",
           "$type": "color",
+          "$deprecated": true,
           "$extensions": {
             "com.figma.scopes": []
           },
@@ -17591,6 +17679,7 @@
           "original": {
             "$value": "rgba(255, 255, 255, 0.36)",
             "$type": "color",
+            "$deprecated": true,
             "$extensions": {
               "com.figma.scopes": []
             },
@@ -17605,6 +17694,33 @@
             "36"
           ],
           "cssWithValue": "var(--gl-color-alpha-light-36)"
+        },
+        "40": {
+          "key": "{color.alpha.light.40}",
+          "$value": "rgba(255, 255, 255, 0.4)",
+          "$type": "color",
+          "$extensions": {
+            "com.figma.scopes": []
+          },
+          "filePath": "src/tokens/constant/color.alpha.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "rgba(255, 255, 255, 0.4)",
+            "$type": "color",
+            "$extensions": {
+              "com.figma.scopes": []
+            },
+            "key": "{color.alpha.light.40}"
+          },
+          "name": "COLOR_ALPHA_LIGHT_40",
+          "attributes": {},
+          "path": [
+            "color",
+            "alpha",
+            "light",
+            "40"
+          ],
+          "cssWithValue": "var(--gl-color-alpha-light-40)"
         }
       },
       "dark": {
@@ -23608,6 +23724,7 @@
           "key": "{color.alpha.light.36}",
           "$value": "rgba(255, 255, 255, 0.36)",
           "$type": "color",
+          "$deprecated": true,
           "$extensions": {
             "com.figma.scopes": []
           },
@@ -23616,6 +23733,7 @@
           "original": {
             "$value": "rgba(255, 255, 255, 0.36)",
             "$type": "color",
+            "$deprecated": true,
             "$extensions": {
               "com.figma.scopes": []
             },
@@ -23630,6 +23748,33 @@
             "36"
           ],
           "cssWithValue": "var(--gl-color-alpha-light-36)"
+        },
+        "40": {
+          "key": "{color.alpha.light.40}",
+          "$value": "rgba(255, 255, 255, 0.4)",
+          "$type": "color",
+          "$extensions": {
+            "com.figma.scopes": []
+          },
+          "filePath": "src/tokens/constant/color.alpha.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "rgba(255, 255, 255, 0.4)",
+            "$type": "color",
+            "$extensions": {
+              "com.figma.scopes": []
+            },
+            "key": "{color.alpha.light.40}"
+          },
+          "name": "COLOR_ALPHA_LIGHT_40",
+          "attributes": {},
+          "path": [
+            "color",
+            "alpha",
+            "light",
+            "40"
+          ],
+          "cssWithValue": "var(--gl-color-alpha-light-40)"
         }
       },
       "dark": {