@gitlab/ui 134.6.0 → 134.8.0

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

@@ -17,6 +17,7 @@ $gl-color-alpha-light-8: rgba(255, 255, 255, 0.08);
 $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;
@@ -376,12 +377,6 @@ $t-white-a-02: rgba(255, 255, 255, 0.02) !default; // Use color.alpha.light.2 in
 $t-white-a-04: rgba(255, 255, 255, 0.04) !default; // Use color.alpha.light.4 instead.
 $t-white-a-06: rgba(255, 255, 255, 0.06) !default; // Use color.alpha.light.6 instead.
 $t-white-a-08: rgba(255, 255, 255, 0.08) !default; // 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.
@@ -564,25 +559,20 @@ $gl-button-default-primary-background-color-active: $gl-color-neutral-100; // Us
 $gl-button-default-primary-border-color-default: $gl-color-neutral-200; // Used for the border of an default primary button in the default state.
 $gl-button-default-primary-border-color-hover: $gl-color-neutral-400; // Used for the border of an default primary button in the hover state.
 $gl-button-default-primary-border-color-active: $gl-color-neutral-600; // Used for the border of an default primary button in the active state.
-$gl-button-default-tertiary-background-color-default: $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: $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: $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: $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: $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: $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: $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: $gl-color-blue-500; // Used for the foreground of a confirm (positive) button in the default state.
-$gl-button-confirm-secondary-foreground-color-hover: $gl-color-blue-700; // Used for the foreground of a confirm (positive) button in the hover state.
-$gl-button-confirm-secondary-foreground-color-active: $gl-color-blue-900; // Used for the foreground of a confirm (positive) button in the active state.
+$gl-button-confirm-primary-background-color-default: $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: $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: $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: $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: $gl-color-neutral-800; // Used for the foreground of a confirm (positive) button in the default state.
+$gl-button-confirm-secondary-foreground-color-hover: $gl-color-neutral-950; // Used for the foreground of a confirm (positive) button in the hover state.
+$gl-button-confirm-secondary-foreground-color-active: $gl-color-neutral-1000; // Used for the foreground of a confirm (positive) button in the active state.
 $gl-button-confirm-secondary-background-color-default: $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: $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: $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: $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: $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: $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: $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: $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: $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: $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: $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: $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: $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: $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: $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: $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: $gl-color-red-600; // Used for the background of a danger (destructive) primary button in the hover state.
@@ -616,9 +606,6 @@ $gl-chart-axis-line-color: $gl-color-neutral-200; // Used in charts for axis lin
 $gl-chart-threshold-line-color: $gl-color-red-500; // Used in charts to divide a threshold area in a chart from other data.
 $gl-chart-zoom-filler-color: $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: $gl-color-neutral-0; // Used for the background color of datepicker.
-$gl-dropdown-option-background-color-unselected-default: $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: $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: $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: $gl-color-neutral-50; // Used for the background of a selected dropdown option in the default state.
 $gl-dropdown-option-background-color-selected-hover: $gl-color-neutral-100; // Used for the background of a selected dropdown option in the hover state.
 $gl-dropdown-option-background-color-selected-active: $gl-color-neutral-200; // Used for the background of a selected dropdown option in the active state.
@@ -646,9 +633,6 @@ $gl-link-mention-text-color-current: $gl-color-orange-800; // Used for the menti
 $gl-link-mention-background-color-default: $gl-color-blue-100; // Used for the mention link default background.
 $gl-link-mention-background-color-current: $gl-color-orange-100; // Used for the mention link background when referencing the current user.
 $gl-nav-item-font-size: $gl-font-size-300; // Used for the font size of a navigation item
-$gl-nav-item-background-color-default: $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: $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: $gl-action-neutral-background-color-active; // Used for the background of a default navigation item in the active state.
 $gl-progress-bar-track-color: $gl-color-neutral-200; // Used for the track color for all progress-bar variants.
 $gl-skeleton-loader-background-color: $gl-color-neutral-100; // Used for the skeleton loader background color.
 $gl-skeleton-loader-shimmer-color: $gl-color-neutral-50; // Used for the animated shimmer effect in a skeleton loader.
@@ -656,7 +640,9 @@ $gl-spinner-track-color-default: $gl-color-neutral-100; // Used for the static t
 $gl-spinner-track-color-light: $gl-color-neutral-800; // Used for the static track (background) of a loading spinner on a dark background.
 $gl-spinner-segment-color-default: $gl-color-neutral-700; // Used for the animated segment of a loading spinner.
 $gl-spinner-segment-color-light: $gl-color-neutral-200; // Used for the animated segment of a loading spinner on a dark background.
-$gl-tab-selected-indicator-color-default: $gl-color-blue-500; // Used for the selected indicator of a tab.
+$gl-toggle-switch-track-color-checked-default: $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: $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: $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: $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: $gl-color-neutral-100; // Used for the token background color.
 $black: $gl-color-neutral-1000 !default;
@@ -732,16 +718,20 @@ $gl-action-disabled-foreground-color: $gl-color-neutral-400; // Used for the for
 $gl-action-disabled-background-color: $gl-color-neutral-50; // Used for the background of a disabled action.
 $gl-action-disabled-border-color: $gl-color-neutral-100; // Used for the border of a disabled action.
 $gl-action-selected-foreground-color-default: $gl-color-neutral-0; // Used for the foreground of a selected action in the default state.
-$gl-action-selected-background-color-default: $gl-color-blue-500; // Used for the background of a selected action in the default state.
-$gl-action-selected-background-color-hover: $gl-color-blue-700; // Used for the background of a selected action in the hover state.
-$gl-action-selected-background-color-active: $gl-color-blue-800; // Used for the background of a selected action in the active state.
+$gl-action-selected-background-color-default: $gl-color-neutral-800; // Used for the background of a selected action in the default state.
+$gl-action-selected-background-color-hover: $gl-color-neutral-950; // Used for the background of a selected action in the hover state.
+$gl-action-selected-background-color-active: $gl-color-neutral-1000; // Used for the background of a selected action in the active state.
 $gl-action-neutral-foreground-color-default: $gl-color-neutral-900; // Used for the foreground of a neutral action in the default state.
-$gl-action-neutral-background-color-focus: $gl-action-neutral-background-color-hover; // Used for the background of a neutral action in the focus state.
+$gl-action-neutral-background-color-default: $gl-color-alpha-0; // Used for the background of a neutral action in the default state.
+$gl-action-neutral-background-color-hover: $gl-color-alpha-dark-6; // Used for the background of a neutral action in the hover state.
+$gl-action-neutral-background-color-active: $gl-color-alpha-dark-16; // Used for the background of a neutral action in the active state.
 $gl-action-neutral-border-color-default: $gl-color-alpha-0; // Used for the border of a neutral action in the default state.
-$gl-action-confirm-foreground-color-default: $gl-color-blue-500; // Used for the foreground of a confirm (positive) action in the default state.
-$gl-action-confirm-foreground-color-hover: $gl-color-blue-700; // Used for the foreground of a confirm (positive) action in the hover state.
-$gl-action-confirm-foreground-color-active: $gl-color-blue-900; // Used for the foreground of a confirm (positive) action in the active state.
-$gl-action-confirm-background-color-focus: $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: $gl-color-neutral-800; // Used for the foreground of a confirm (positive) action in the default state.
+$gl-action-confirm-foreground-color-hover: $gl-color-neutral-950; // Used for the foreground of a confirm (positive) action in the hover state.
+$gl-action-confirm-foreground-color-active: $gl-color-neutral-1000; // Used for the foreground of a confirm (positive) action in the active state.
+$gl-action-confirm-background-color-default: $gl-color-alpha-0; // Used for the background of a confirm (positive) action in the default state.
+$gl-action-confirm-background-color-hover: $gl-color-alpha-dark-6; // Used for the background of a confirm (positive) action in the hover state.
+$gl-action-confirm-background-color-active: $gl-color-alpha-dark-16; // Used for the background of a confirm (positive) action in the active state.
 $gl-action-confirm-border-color-default: $gl-color-alpha-0; // Used for the border of a confirm action in the default state.
 $gl-action-danger-foreground-color-default: $gl-color-red-500; // Used for the foreground of a danger (destructive) action in the default state.
 $gl-action-danger-foreground-color-hover: $gl-color-red-700; // Used for the foreground of a danger (destructive) action in the hover state.
@@ -769,16 +759,12 @@ $gl-control-background-color-default: $gl-color-neutral-0; // Used for form cont
 $gl-control-background-color-disabled: $gl-color-neutral-10; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 $gl-control-background-color-concatenation: $gl-color-neutral-10; // Used for the background of static content that prepends or appends a text input.
 $gl-control-background-color-readonly: $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: $gl-color-blue-500; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
-$gl-control-background-color-selected-hover: $gl-color-blue-700; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
-$gl-control-background-color-selected-focus: $gl-color-blue-700; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
+$gl-control-background-color-selected-default: $gl-color-neutral-800; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
+$gl-control-background-color-selected-hover: $gl-color-neutral-950; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
 $gl-control-border-color-default: $gl-color-neutral-400; // Used for form control (input, radio button, checkbox, textarea) default border.
 $gl-control-border-color-hover: $gl-color-neutral-600; // Used for form control (input, radio button, checkbox, textarea) border on hover.
 $gl-control-border-color-focus: $gl-color-neutral-900; // Used for form control (input, radio button, checkbox, textarea) border on focus.
 $gl-control-border-color-disabled: $gl-color-neutral-100; // Used for disabled form control (input, radio button, checkbox, textarea) border.
-$gl-control-border-color-selected-default: $gl-color-blue-500; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border.
-$gl-control-border-color-selected-hover: $gl-color-blue-700; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.
-$gl-control-border-color-selected-focus: $gl-color-blue-700; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
 $gl-control-placeholder-color: $gl-color-neutral-500; // Used for placeholder text within inputs.
 $gl-control-indicator-color-selected: $gl-color-neutral-0; // Used for checkbox and radio button state indicators.
 $gl-control-indicator-color-disabled: $gl-color-neutral-500; // Used for disabled checkbox and radio button state indicators.
@@ -956,19 +942,24 @@ $gl-button-default-primary-foreground-color-active: $gl-button-default-primary-f
 $gl-button-default-primary-background-color-focus: $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: $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: $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: $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: $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: $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: $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: $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: $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: $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: $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: $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: $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: $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: $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: $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: $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: $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: $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: $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: $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: $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: $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: $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: $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: $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: $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: $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: $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: $gl-button-danger-primary-foreground-color-default; // Used for the foreground of a danger (destructive) primary button in the focus state.
@@ -1003,13 +994,15 @@ $gl-dropdown-option-text-color-default: $gl-action-neutral-foreground-color-defa
 $gl-dropdown-option-text-color-disabled: $gl-action-disabled-foreground-color; // Used for the text of a dropdown option in the disabled state.
 $gl-dropdown-option-indicator-color-selected-default: $gl-control-background-color-selected-default; // Used for the dropdown selected option indicator in the default state.
 $gl-dropdown-option-indicator-color-selected-hover: $gl-control-background-color-selected-hover; // Used for the dropdown selected option indicator in the hover state.
-$gl-dropdown-option-indicator-color-selected-focus: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the focus state.
-$gl-dropdown-option-indicator-color-selected-active: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the active state.
-$gl-dropdown-option-background-color-unselected-focus: $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: $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: $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: $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: $gl-dropdown-option-background-color-selected-hover; // Used for the background of a selected dropdown option in the focus state.
 $gl-modal-border-radius: $gl-border-radius-2xl; // Used for modal border radius.
 $gl-nav-item-foreground-color-default: $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: $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: $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: $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: $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: $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: $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: $gl-action-selected-background-color-hover; // Used for the background of a selected navigation item in the hover state.
@@ -1020,6 +1013,14 @@ $gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used
 $gl-progress-bar-indicator-color-danger: $gl-status-danger-icon-color; // Used for the indicator color for the danger progress-bar variant.
 $gl-table-row-background-color-hover: $gl-highlight-target-background-color; // Used for the background of a table row in hover state.
 $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
+$gl-toggle-switch-track-color-unchecked-default: $gl-control-border-color-default; // Used for the track color of an unchecked toggle switch in the default state.
+$gl-toggle-switch-track-color-unchecked-hover: $gl-control-border-color-hover; // Used for the track color of an unchecked toggle switch in the hover state.
+$gl-toggle-switch-track-color-unchecked-focus: $gl-control-border-color-focus; // Used for the track color of an unchecked toggle switch in the focus state.
+$gl-toggle-switch-track-color-unchecked-active: $gl-control-border-color-focus; // Used for the track color of an unchecked toggle switch in the active state.
+$gl-toggle-switch-track-color-checked-focus: $gl-toggle-switch-track-color-checked-hover; // Used for the track color of a checked toggle switch in the focus state.
+$gl-toggle-switch-background-color-unchecked-default: $gl-control-indicator-color-selected; // Used for the background color of the unchecked toggle switch thumb in the default state.
+$gl-toggle-switch-background-color-checked-default: $gl-action-strong-confirm-foreground-color-default; // Used for the background color of the checked toggle switch thumb in the default state.
+$gl-toggle-switch-background-color-disabled: $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: $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: $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: $gl-action-strong-neutral-background-color-active; // Used for the icon color of an unchecked toggle switch in the active state.
@@ -1037,10 +1038,12 @@ $gl-action-selected-border-color-active: $gl-action-selected-background-color-ac
 $gl-action-neutral-foreground-color-hover: $gl-action-neutral-foreground-color-default; // Used for the foreground of a neutral action in the hover state.
 $gl-action-neutral-foreground-color-focus: $gl-action-neutral-foreground-color-default; // Used for the foreground of a neutral action in the focus state.
 $gl-action-neutral-foreground-color-active: $gl-action-neutral-foreground-color-default; // Used for the foreground of a neutral action in the active state.
+$gl-action-neutral-background-color-focus: $gl-action-neutral-background-color-hover; // Used for the background of a neutral action in the focus state.
 $gl-action-neutral-border-color-hover: $gl-action-neutral-border-color-default; // Used for the border of a neutral action in the hover state.
 $gl-action-neutral-border-color-focus: $gl-action-neutral-border-color-default; // Used for the border of a neutral action in the focus state.
 $gl-action-neutral-border-color-active: $gl-action-neutral-border-color-default; // Used for the border of a neutral action in the active state.
 $gl-action-confirm-foreground-color-focus: $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: $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: $gl-action-confirm-border-color-default; // Used for the border of a confirm action in the hover state.
 $gl-action-confirm-border-color-focus: $gl-action-confirm-border-color-default; // Used for the border of a confirm action in the focus state.
 $gl-action-confirm-border-color-active: $gl-action-confirm-border-color-default; // Used for the border of a confirm action in the active state.
@@ -1054,7 +1057,10 @@ $gl-action-strong-confirm-border-color-hover: $gl-action-strong-confirm-border-c
 $gl-action-strong-neutral-background-color-focus: $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: $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: $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: $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: $gl-feedback-danger-border-color; // Used for invalid form control (input, textarea) border.
+$gl-control-border-color-selected-default: $gl-control-background-color-selected-default; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border.
+$gl-control-border-color-selected-hover: $gl-control-background-color-selected-hover; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.
 $gl-control-border-radius: $gl-border-radius-lg; // Used for form control (input, radio button, checkbox, textarea) default border radius.
 $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text when the input is invalid.
 $gl-control-text-color-valid: $gl-text-color-success; // Used for the helper text when the input is valid.
@@ -1183,12 +1189,13 @@ $gl-button-border-radius: $gl-action-border-radius; // Used for button border ra
 $gl-button-default-tertiary-foreground-color-hover: $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: $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: $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: $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: $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: $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: $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: $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: $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: $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: $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: $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: $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: $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: $gl-action-confirm-border-color-active; // Used for the border of a borderless, tertiary confirm (positive) button in the active state.
@@ -1208,12 +1215,21 @@ $gl-chart-zoom-handle-color: $gl-icon-color-subtle; // Used in charts for the ha
 $gl-dropdown-option-text-color-hover: $gl-action-neutral-foreground-color-hover; // Used for the text of a dropdown option in the hover state.
 $gl-dropdown-option-text-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the text of a dropdown option in the focus state.
 $gl-dropdown-option-text-color-active: $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: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the focus state.
+$gl-dropdown-option-indicator-color-selected-active: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the active state.
+$gl-dropdown-option-background-color-unselected-focus: $gl-action-neutral-background-color-focus; // Used for the background of an unselected dropdown option in the focus state.
 $gl-nav-item-border-radius: $gl-action-border-radius; // Used for the border radius of a navigation item
 $gl-nav-item-foreground-color-hover: $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: $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: $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: $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: $gl-action-selected-foreground-color-hover; // Used for the foreground of a selected navigation item in the hover state.
 $gl-nav-item-selected-background-color-focus: $gl-action-selected-background-color-focus; // Used for the background of a selected navigation item in the focus state.
+$gl-tab-selected-indicator-color-default: $gl-action-selected-border-color-active; // Used for the selected indicator of a tab.
+$gl-toggle-switch-background-color-unchecked-hover: $gl-toggle-switch-background-color-unchecked-default; // Used for the background color of the unchecked toggle switch thumb in the hover state.
+$gl-toggle-switch-background-color-unchecked-focus: $gl-toggle-switch-background-color-unchecked-default; // Used for the background color of the unchecked toggle switch thumb in the focus state.
+$gl-toggle-switch-background-color-unchecked-active: $gl-toggle-switch-background-color-unchecked-default; // Used for the background color of the unchecked toggle switch thumb in the active state.
+$gl-toggle-switch-background-color-checked-hover: $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: $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: $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: $gl-border-radius-default; // Used for token border radius.
@@ -1223,12 +1239,14 @@ $gl-action-strong-confirm-foreground-color-focus: $gl-action-strong-confirm-fore
 $gl-action-strong-confirm-border-color-focus: $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: $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: $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: $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: $gl-control-background-color-selected-focus; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
+$gl-button-confirm-primary-foreground-color-active: $gl-button-confirm-primary-foreground-color-focus; // Used for the foreground of a confirm (positive) primary button in the active state.
 $gl-nav-item-selected-foreground-color-focus: $gl-action-selected-foreground-color-focus; // Used for the foreground of a selected navigation item in the focus state.
+$gl-toggle-switch-background-color-checked-focus: $gl-action-strong-confirm-foreground-color-focus; // Used for the background color of the checked toggle switch thumb in the focus state.
 $gl-action-selected-foreground-color-active: $gl-action-selected-foreground-color-focus; // Used for the foreground of a selected action in the active state.
 $gl-action-strong-confirm-foreground-color-active: $gl-action-strong-confirm-foreground-color-focus; // Used for the foreground of a strong confirm action in the active state.
 $gl-action-strong-confirm-border-color-active: $gl-action-strong-confirm-border-color-focus; // Used for the border of a strong confirm action in the active state.
 $gl-action-strong-neutral-foreground-color-active: $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: $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: $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: $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: $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/scss/_tokens_custom_properties.scss

@@ -32,6 +32,7 @@ $gl-color-alpha-light-8: var(--gl-color-alpha-light-8);
 $gl-color-alpha-light-16: var(--gl-color-alpha-light-16);
 $gl-color-alpha-light-24: var(--gl-color-alpha-light-24);
 $gl-color-alpha-light-36: var(--gl-color-alpha-light-36);
+$gl-color-alpha-light-40: var(--gl-color-alpha-light-40);
 $gl-color-blue-50: var(--gl-color-blue-50);
 $gl-color-blue-100: var(--gl-color-blue-100);
 $gl-color-blue-200: var(--gl-color-blue-200);
@@ -705,6 +706,23 @@ $gl-spinner-segment-color-light: var(--gl-spinner-segment-color-light);
 $gl-table-row-background-color-hover: var(--gl-table-row-background-color-hover);
 $gl-table-sorting-icon-color: var(--gl-table-sorting-icon-color);
 $gl-tab-selected-indicator-color-default: var(--gl-tab-selected-indicator-color-default);
+$gl-toggle-switch-track-color-unchecked-default: var(--gl-toggle-switch-track-color-unchecked-default);
+$gl-toggle-switch-track-color-unchecked-hover: var(--gl-toggle-switch-track-color-unchecked-hover);
+$gl-toggle-switch-track-color-unchecked-focus: var(--gl-toggle-switch-track-color-unchecked-focus);
+$gl-toggle-switch-track-color-unchecked-active: var(--gl-toggle-switch-track-color-unchecked-active);
+$gl-toggle-switch-track-color-checked-default: var(--gl-toggle-switch-track-color-checked-default);
+$gl-toggle-switch-track-color-checked-hover: var(--gl-toggle-switch-track-color-checked-hover);
+$gl-toggle-switch-track-color-checked-focus: var(--gl-toggle-switch-track-color-checked-focus);
+$gl-toggle-switch-track-color-checked-active: var(--gl-toggle-switch-track-color-checked-active);
+$gl-toggle-switch-background-color-unchecked-default: var(--gl-toggle-switch-background-color-unchecked-default);
+$gl-toggle-switch-background-color-unchecked-hover: var(--gl-toggle-switch-background-color-unchecked-hover);
+$gl-toggle-switch-background-color-unchecked-focus: var(--gl-toggle-switch-background-color-unchecked-focus);
+$gl-toggle-switch-background-color-unchecked-active: var(--gl-toggle-switch-background-color-unchecked-active);
+$gl-toggle-switch-background-color-checked-default: var(--gl-toggle-switch-background-color-checked-default);
+$gl-toggle-switch-background-color-checked-hover: var(--gl-toggle-switch-background-color-checked-hover);
+$gl-toggle-switch-background-color-checked-focus: var(--gl-toggle-switch-background-color-checked-focus);
+$gl-toggle-switch-background-color-checked-active: var(--gl-toggle-switch-background-color-checked-active);
+$gl-toggle-switch-background-color-disabled: var(--gl-toggle-switch-background-color-disabled);
 $gl-toggle-switch-icon-color-unchecked-default: var(--gl-toggle-switch-icon-color-unchecked-default);
 $gl-toggle-switch-icon-color-unchecked-hover: var(--gl-toggle-switch-icon-color-unchecked-hover);
 $gl-toggle-switch-icon-color-unchecked-focus: var(--gl-toggle-switch-icon-color-unchecked-focus);

package/src/tokens/build/tailwind/tokens.cjs

@@ -199,6 +199,7 @@ const alphaLightColors = {
   16: 'var(--gl-color-alpha-light-16)',
   24: 'var(--gl-color-alpha-light-24)',
   36: 'var(--gl-color-alpha-light-36)',
+  40: 'var(--gl-color-alpha-light-40)',
 };
 const brandColors = {
   'brand-white': 'var(--gl-color-brand-white)',

package/src/tokens/constant/color.alpha.tokens.json

@@ -225,6 +225,22 @@
             "alpha": 0.36
           },
           "$type": "color",
+          "$deprecated": true,
+          "$extensions": {
+            "com.figma.scopes": []
+          }
+        },
+        "40": {
+          "$value": {
+            "colorSpace": "srgb",
+            "components": [
+              1,
+              1,
+              1
+            ],
+            "alpha": 0.4
+          },
+          "$type": "color",
           "$extensions": {
             "com.figma.scopes": []
           }

package/src/tokens/contextual/button.tokens.json

@@ -362,7 +362,7 @@
               }
             },
             "hover": {
-              "$value": "{action.strong.confirm.foreground.color.hover}",
+              "$value": "{button.confirm.primary.foreground.color.default}",
               "$type": "color",
               "$description": "Used for the foreground of a confirm (positive) primary button in the hover state.",
               "$extensions": {
@@ -373,7 +373,7 @@
               }
             },
             "focus": {
-              "$value": "{action.strong.confirm.foreground.color.focus}",
+              "$value": "{button.confirm.primary.foreground.color.hover}",
               "$type": "color",
               "$description": "Used for the foreground of a confirm (positive) primary button in the focus state.",
               "$extensions": {
@@ -384,7 +384,7 @@
               }
             },
             "active": {
-              "$value": "{action.strong.confirm.foreground.color.active}",
+              "$value": "{button.confirm.primary.foreground.color.focus}",
               "$type": "color",
               "$description": "Used for the foreground of a confirm (positive) primary button in the active state.",
               "$extensions": {
@@ -399,7 +399,10 @@
         "background": {
           "color": {
             "default": {
-              "$value": "{action.strong.confirm.background.color.default}",
+              "$value": {
+                "default": "{color.neutral.800}",
+                "dark": "{color.neutral.50}"
+              },
               "$type": "color",
               "$description": "Used for the background of a confirm (positive) primary button in the default state.",
               "$extensions": {
@@ -410,7 +413,10 @@
               }
             },
             "hover": {
-              "$value": "{action.strong.confirm.background.color.hover}",
+              "$value": {
+                "default": "{color.neutral.950}",
+                "dark": "{color.neutral.10}"
+              },
               "$type": "color",
               "$description": "Used for the background of a confirm (positive) primary button in the hover state.",
               "$extensions": {
@@ -421,7 +427,7 @@
               }
             },
             "focus": {
-              "$value": "{action.strong.confirm.background.color.focus}",
+              "$value": "{button.confirm.primary.background.color.hover}",
               "$type": "color",
               "$description": "Used for the background of a confirm (positive) primary button in the focus state.",
               "$extensions": {
@@ -432,7 +438,10 @@
               }
             },
             "active": {
-              "$value": "{action.strong.confirm.background.color.active}",
+              "$value": {
+                "default": "{color.neutral.1000}",
+                "dark": "{color.neutral.100}"
+              },
               "$type": "color",
               "$description": "Used for the background of a confirm (positive) primary button in the active state.",
               "$extensions": {
@@ -447,10 +456,7 @@
         "border": {
           "color": {
             "default": {
-              "$value": {
-                "default": "{color.blue.600}",
-                "dark": "{color.alpha.0}"
-              },
+              "$value": "{color.alpha.0}",
               "$type": "color",
               "$description": "Used for the border of a confirm (positive) primary button in the default state.",
               "$extensions": {
@@ -460,10 +466,7 @@
               }
             },
             "hover": {
-              "$value": {
-                "default": "{color.blue.800}",
-                "dark": "{color.alpha.0}"
-              },
+              "$value": "{button.confirm.primary.border.color.default}",
               "$type": "color",
               "$description": "Used for the border of a confirm (positive) primary button in the hover state.",
               "$extensions": {
@@ -473,7 +476,7 @@
               }
             },
             "focus": {
-              "$value": "{button.confirm.primary.border.color.hover}",
+              "$value": "{button.confirm.primary.border.color.default}",
               "$type": "color",
               "$description": "Used for the border of a confirm (positive) primary button in the focus state.",
               "$extensions": {
@@ -483,10 +486,7 @@
               }
             },
             "active": {
-              "$value": {
-                "default": "{color.blue.900}",
-                "dark": "{color.alpha.0}"
-              },
+              "$value": "{button.confirm.primary.border.color.default}",
               "$type": "color",
               "$description": "Used for the border of a confirm (positive) primary button in the active state.",
               "$extensions": {
@@ -503,8 +503,8 @@
           "color": {
             "default": {
               "$value": {
-                "default": "{color.blue.500}",
-                "dark": "{color.blue.100}"
+                "default": "{color.neutral.800}",
+                "dark": "{color.neutral.50}"
               },
               "$type": "color",
               "$description": "Used for the foreground of a confirm (positive) button in the default state.",
@@ -517,8 +517,8 @@
             },
             "hover": {
               "$value": {
-                "default": "{color.blue.700}",
-                "dark": "{color.blue.100}"
+                "default": "{color.neutral.950}",
+                "dark": "{color.neutral.10}"
               },
               "$type": "color",
               "$description": "Used for the foreground of a confirm (positive) button in the hover state.",
@@ -542,8 +542,8 @@
             },
             "active": {
               "$value": {
-                "default": "{color.blue.900}",
-                "dark": "{color.blue.100}"
+                "default": "{color.neutral.1000}",
+                "dark": "{color.neutral.0}"
               },
               "$type": "color",
               "$description": "Used for the foreground of a confirm (positive) button in the active state.",
@@ -561,15 +561,7 @@
             "default": {
               "$value": {
                 "default": "{color.neutral.0}",
-                "dark": {
-                  "colorSpace": "srgb",
-                  "components": [
-                    0.25882352941176473,
-                    0.5607843137254902,
-                    0.8627450980392157
-                  ],
-                  "alpha": 0.4
-                }
+                "dark": "{color.alpha.light.24}"
               },
               "$type": "color",
               "$description": "Used for the background of an outlined confirm (positive) button in the default state.",
@@ -582,16 +574,8 @@
             },
             "hover": {
               "$value": {
-                "default": "{color.blue.50}",
-                "dark": {
-                  "colorSpace": "srgb",
-                  "components": [
-                    0.25882352941176473,
-                    0.5607843137254902,
-                    0.8627450980392157
-                  ],
-                  "alpha": 0.64
-                }
+                "default": "{color.neutral.50}",
+                "dark": "{color.alpha.light.40}"
               },
               "$type": "color",
               "$description": "Used for the background of an outlined confirm (positive) button in the hover state.",
@@ -615,16 +599,8 @@
             },
             "active": {
               "$value": {
-                "default": "{color.blue.100}",
-                "dark": {
-                  "colorSpace": "srgb",
-                  "components": [
-                    0.25882352941176473,
-                    0.5607843137254902,
-                    0.8627450980392157
-                  ],
-                  "alpha": 0.32
-                }
+                "default": "{color.neutral.100}",
+                "dark": "{color.alpha.light.16}"
               },
               "$type": "color",
               "$description": "Used for the background of an outlined confirm (positive) button in the active state.",
@@ -641,7 +617,7 @@
           "color": {
             "default": {
               "$value": {
-                "default": "{color.blue.500}",
+                "default": "{color.neutral.800}",
                 "dark": "{color.alpha.0}"
               },
               "$type": "color",
@@ -654,7 +630,7 @@
             },
             "hover": {
               "$value": {
-                "default": "{color.blue.700}",
+                "default": "{color.neutral.950}",
                 "dark": "{color.alpha.0}"
               },
               "$type": "color",
@@ -677,7 +653,7 @@
             },
             "active": {
               "$value": {
-                "default": "{color.blue.900}",
+                "default": "{color.neutral.1000}",
                 "dark": "{color.alpha.0}"
               },
               "$type": "color",