@gitlab/ui 95.3.0 → 95.5.0

package/dist/tokens/scss/_tokens.dark.scss

@@ -744,12 +744,12 @@ $gl-background-color-strong: $gl-color-neutral-800; // Used to make the backgrou
 $gl-background-color-subtle: $gl-color-neutral-900; // Used to slightly differentiate the background from the default.
 $gl-background-color-default: $gl-color-neutral-950; // Used for the default background color.
 $gl-action-strong-neutral-border-color-default: $gl-color-alpha-0; // Used for the border of a strong neutral action in the default state.
-$gl-action-strong-neutral-foreground-color-default: $gl-color-neutral-0; // Used for the foreground of a strong neutral action in the default state.
-$gl-action-strong-neutral-background-color-active: $gl-color-neutral-100; // Used for the background of a strong neutral action in the active state.
-$gl-action-strong-neutral-background-color-hover: $gl-color-neutral-200; // Used for the background of a strong neutral action in the hover state.
-$gl-action-strong-neutral-background-color-default: $gl-color-neutral-300; // Used for the background of a strong neutral action in the default state.
+$gl-action-strong-neutral-foreground-color-default: $gl-color-neutral-50; // Used for the foreground of a strong neutral action in the default state.
+$gl-action-strong-neutral-background-color-active: $gl-color-neutral-500; // Used for the background of a strong neutral action in the active state.
+$gl-action-strong-neutral-background-color-hover: $gl-color-neutral-600; // Used for the background of a strong neutral action in the hover state.
+$gl-action-strong-neutral-background-color-default: $gl-color-neutral-700; // Used for the background of a strong neutral action in the default state.
 $gl-action-strong-confirm-border-color-default: $gl-color-alpha-0; // Used for the border of a strong confirm action in the default state.
-$gl-action-strong-confirm-foreground-color-default: $gl-color-neutral-0; // Used for the foreground of a strong confirm action in the default state.
+$gl-action-strong-confirm-foreground-color-default: $gl-color-neutral-950; // Used for the foreground of a strong confirm action in the default state.
 $gl-action-strong-confirm-background-color-active: $gl-color-blue-200; // Used for the background of a strong confirm action in the active state.
 $gl-action-strong-confirm-background-color-hover: $gl-color-blue-300; // Used for the background of a strong confirm action in the hover state.
 $gl-action-strong-confirm-background-color-default: $gl-color-blue-400; // Used for the background of a strong confirm action in the default state.
@@ -778,6 +778,13 @@ $gl-control-placeholder-color: $gl-text-color-disabled; // Used for placeholder
 $gl-control-text-color-valid: $gl-text-color-success; // Used for the helper text when the input is valid.
 $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text when the input is invalid.
 $gl-token-foreground-color: $gl-text-color-default; // Used for the token foreground color.
+$gl-toggle-switch-icon-color-disabled: $gl-action-disabled-background-color; // Used for the icon color of a disabled toggle switch.
+$gl-toggle-switch-icon-color-checked-active: $gl-action-strong-confirm-background-color-active; // Used for the icon color of a checked toggle switch in the active state.
+$gl-toggle-switch-icon-color-checked-hover: $gl-action-strong-confirm-background-color-hover; // Used for the icon color of a checked toggle switch in the hover state.
+$gl-toggle-switch-icon-color-checked-default: $gl-action-strong-confirm-background-color-default; // Used for the icon color of a checked toggle switch in the default state.
+$gl-toggle-switch-icon-color-unchecked-active: $gl-action-strong-neutral-background-color-active; // Used for the icon color of an unchecked toggle switch in the active state.
+$gl-toggle-switch-icon-color-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-default: $gl-action-strong-neutral-background-color-default; // Used for the icon color of an unchecked toggle switch in the default state.
 $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
 $gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover state.
 $gl-progress-bar-indicator-color-danger: $gl-status-danger-icon-color; // Used for the indicator color for the danger progress-bar variant.
@@ -891,6 +898,8 @@ $gl-action-selected-border-color-hover: $gl-action-selected-background-color-hov
 $gl-action-selected-border-color-default: $gl-action-selected-background-color-default; // Used for the border of a selected action in the default state.
 $gl-action-selected-background-color-focus: $gl-action-selected-background-color-hover; // Used for the background of a selected action in the focus state.
 $gl-action-selected-foreground-color-hover: $gl-action-selected-foreground-color-default; // Used for the foreground of a selected action in the hover 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-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-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-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-hover: $gl-action-neutral-foreground-color-hover; // Used for the text of a dropdown option in the hover state.

package/dist/tokens/scss/_tokens.scss

@@ -778,6 +778,13 @@ $gl-control-placeholder-color: $gl-text-color-disabled; // Used for placeholder
 $gl-control-text-color-valid: $gl-text-color-success; // Used for the helper text when the input is valid.
 $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text when the input is invalid.
 $gl-token-foreground-color: $gl-text-color-default; // Used for the token foreground color.
+$gl-toggle-switch-icon-color-disabled: $gl-action-disabled-background-color; // Used for the icon color of a disabled toggle switch.
+$gl-toggle-switch-icon-color-checked-active: $gl-action-strong-confirm-background-color-active; // Used for the icon color of a checked toggle switch in the active state.
+$gl-toggle-switch-icon-color-checked-hover: $gl-action-strong-confirm-background-color-hover; // Used for the icon color of a checked toggle switch in the hover state.
+$gl-toggle-switch-icon-color-checked-default: $gl-action-strong-confirm-background-color-default; // Used for the icon color of a checked toggle switch in the default state.
+$gl-toggle-switch-icon-color-unchecked-active: $gl-action-strong-neutral-background-color-active; // Used for the icon color of an unchecked toggle switch in the active state.
+$gl-toggle-switch-icon-color-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-default: $gl-action-strong-neutral-background-color-default; // Used for the icon color of an unchecked toggle switch in the default state.
 $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
 $gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover state.
 $gl-progress-bar-indicator-color-danger: $gl-status-danger-icon-color; // Used for the indicator color for the danger progress-bar variant.
@@ -891,6 +898,8 @@ $gl-action-selected-border-color-hover: $gl-action-selected-background-color-hov
 $gl-action-selected-border-color-default: $gl-action-selected-background-color-default; // Used for the border of a selected action in the default state.
 $gl-action-selected-background-color-focus: $gl-action-selected-background-color-hover; // Used for the background of a selected action in the focus state.
 $gl-action-selected-foreground-color-hover: $gl-action-selected-foreground-color-default; // Used for the foreground of a selected action in the hover 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-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-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-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-hover: $gl-action-neutral-foreground-color-hover; // Used for the text of a dropdown option in the hover state.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -682,6 +682,15 @@ $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-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);
+$gl-toggle-switch-icon-color-unchecked-active: var(--gl-toggle-switch-icon-color-unchecked-active);
+$gl-toggle-switch-icon-color-checked-default: var(--gl-toggle-switch-icon-color-checked-default);
+$gl-toggle-switch-icon-color-checked-hover: var(--gl-toggle-switch-icon-color-checked-hover);
+$gl-toggle-switch-icon-color-checked-focus: var(--gl-toggle-switch-icon-color-checked-focus);
+$gl-toggle-switch-icon-color-checked-active: var(--gl-toggle-switch-icon-color-checked-active);
+$gl-toggle-switch-icon-color-disabled: var(--gl-toggle-switch-icon-color-disabled);
 $gl-token-foreground-color: var(--gl-token-foreground-color);
 $gl-token-background-color: var(--gl-token-background-color);
 $gl-control-background-color-default: var(--gl-control-background-color-default);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "95.3.0",
+  "version": "95.5.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -2,7 +2,6 @@ $gl-search-box-by-type-search-icon-size: 16px;
 $gl-search-box-by-type-input-padding: 3.5 * $grid-size;
 
 .gl-search-box-by-type-search-icon {
-  @apply gl-text-gray-500;
   @apply gl-w-5;
   position: absolute;
   left: $gl-spacing-scale-3;
@@ -15,7 +14,7 @@ $gl-search-box-by-type-input-padding: 3.5 * $grid-size;
 }
 
 .gl-search-box-by-type-loading-icon {
-  @apply gl-text-gray-500;
+  @apply gl-fill-icon-subtle;
   @apply gl-w-5;
   @apply gl-mr-2;
 }
@@ -53,7 +52,7 @@ $gl-search-box-by-type-input-padding: 3.5 * $grid-size;
   }
 
   &::placeholder {
-    @apply gl-text-gray-400;
+    color: var(--gl-control-placeholder-color);
   }
 
   &::-webkit-search-cancel-button {

package/src/components/base/search_box_by_type/search_box_by_type.vue

@@ -130,7 +130,7 @@ export default {
 
 <template>
   <div class="gl-search-box-by-type">
-    <gl-icon name="search" class="gl-search-box-by-type-search-icon" />
+    <gl-icon name="search" class="gl-search-box-by-type-search-icon" variant="subtle" />
     <gl-form-input
       ref="input"
       :value="value"

package/src/tokens/action.tokens.json

@@ -426,7 +426,10 @@
         "foreground": {
           "color": {
             "default": {
-              "$value": "{color.neutral.0}",
+              "$value": {
+                "default": "{color.neutral.0}",
+                "dark": "{color.neutral.950}"
+              },
               "$type": "color",
               "$description": "Used for the foreground of a strong confirm action in the default state."
             },
@@ -478,7 +481,7 @@
             "default": {
               "$value": {
                 "default": "{color.neutral.600}",
-                "dark": "{color.neutral.300}"
+                "dark": "{color.neutral.700}"
               },
               "$type": "color",
               "$description": "Used for the background of a strong neutral action in the default state."
@@ -486,7 +489,7 @@
             "hover": {
               "$value": {
                 "default": "{color.neutral.700}",
-                "dark": "{color.neutral.200}"
+                "dark": "{color.neutral.600}"
               },
               "$type": "color",
               "$description": "Used for the background of a strong neutral action in the hover state."
@@ -499,7 +502,7 @@
             "active": {
               "$value": {
                 "default": "{color.neutral.800}",
-                "dark": "{color.neutral.100}"
+                "dark": "{color.neutral.500}"
               },
               "$type": "color",
               "$description": "Used for the background of a strong neutral action in the active state."
@@ -509,7 +512,10 @@
         "foreground": {
           "color": {
             "default": {
-              "$value": "{color.neutral.0}",
+              "$value": {
+                "default": "{color.neutral.0}",
+                "dark": "{color.neutral.50}"
+              },
               "$type": "color",
               "$description": "Used for the foreground of a strong neutral action in the default state."
             },

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

@@ -780,6 +780,13 @@
   --gl-control-text-color-valid: var(--gl-text-color-success); /* Used for the helper text when the input is valid. */
   --gl-control-text-color-error: var(--gl-text-color-danger); /* Used for the helper text when the input is invalid. */
   --gl-token-foreground-color: var(--gl-text-color-default); /* Used for the token foreground color. */
+  --gl-toggle-switch-icon-color-disabled: var(--gl-action-disabled-background-color); /* Used for the icon color of a disabled toggle switch. */
+  --gl-toggle-switch-icon-color-checked-active: var(--gl-action-strong-confirm-background-color-active); /* Used for the icon color of a checked toggle switch in the active state. */
+  --gl-toggle-switch-icon-color-checked-hover: var(--gl-action-strong-confirm-background-color-hover); /* Used for the icon color of a checked toggle switch in the hover state. */
+  --gl-toggle-switch-icon-color-checked-default: var(--gl-action-strong-confirm-background-color-default); /* Used for the icon color of a checked toggle switch in the default state. */
+  --gl-toggle-switch-icon-color-unchecked-active: var(--gl-action-strong-neutral-background-color-active); /* Used for the icon color of an unchecked toggle switch in the active state. */
+  --gl-toggle-switch-icon-color-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-default: var(--gl-action-strong-neutral-background-color-default); /* Used for the icon color of an unchecked toggle switch in the default state. */
   --gl-table-sorting-icon-color: var(--gl-text-color-heading); /* Used for the color of the sorting icons in the column headers. */
   --gl-table-row-background-color-hover: var(--gl-background-color-subtle); /* Used for the background of a table row in hover state. */
   --gl-progress-bar-indicator-color-danger: var(--gl-status-danger-icon-color); /* Used for the indicator color for the danger progress-bar variant. */
@@ -893,6 +900,8 @@
   --gl-action-selected-border-color-default: var(--gl-action-selected-background-color-default); /* Used for the border of a selected action in the default state. */
   --gl-action-selected-background-color-focus: var(--gl-action-selected-background-color-hover); /* Used for the background of a selected action in the focus state. */
   --gl-action-selected-foreground-color-hover: var(--gl-action-selected-foreground-color-default); /* Used for the foreground of a selected action in the hover state. */
+  --gl-toggle-switch-icon-color-checked-focus: var(--gl-action-strong-confirm-background-color-focus); /* Used for the icon color of a checked toggle switch in the focus state. */
+  --gl-toggle-switch-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-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-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-hover: var(--gl-action-neutral-foreground-color-hover); /* Used for the text of a dropdown option in the hover state. */

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

@@ -746,12 +746,12 @@
   --gl-background-color-subtle: var(--gl-color-neutral-900); /* Used to slightly differentiate the background from the default. */
   --gl-background-color-default: var(--gl-color-neutral-950); /* Used for the default background color. */
   --gl-action-strong-neutral-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a strong neutral action in the default state. */
-  --gl-action-strong-neutral-foreground-color-default: var(--gl-color-neutral-0); /* Used for the foreground of a strong neutral action in the default state. */
-  --gl-action-strong-neutral-background-color-active: var(--gl-color-neutral-100); /* Used for the background of a strong neutral action in the active state. */
-  --gl-action-strong-neutral-background-color-hover: var(--gl-color-neutral-200); /* Used for the background of a strong neutral action in the hover state. */
-  --gl-action-strong-neutral-background-color-default: var(--gl-color-neutral-300); /* Used for the background of a strong neutral action in the default state. */
+  --gl-action-strong-neutral-foreground-color-default: var(--gl-color-neutral-50); /* Used for the foreground of a strong neutral action in the default state. */
+  --gl-action-strong-neutral-background-color-active: var(--gl-color-neutral-500); /* Used for the background of a strong neutral action in the active state. */
+  --gl-action-strong-neutral-background-color-hover: var(--gl-color-neutral-600); /* Used for the background of a strong neutral action in the hover state. */
+  --gl-action-strong-neutral-background-color-default: var(--gl-color-neutral-700); /* Used for the background of a strong neutral action in the default state. */
   --gl-action-strong-confirm-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a strong confirm action in the default state. */
-  --gl-action-strong-confirm-foreground-color-default: var(--gl-color-neutral-0); /* Used for the foreground of a strong confirm action in the default state. */
+  --gl-action-strong-confirm-foreground-color-default: var(--gl-color-neutral-950); /* Used for the foreground of a strong confirm action in the default state. */
   --gl-action-strong-confirm-background-color-active: var(--gl-color-blue-200); /* Used for the background of a strong confirm action in the active state. */
   --gl-action-strong-confirm-background-color-hover: var(--gl-color-blue-300); /* Used for the background of a strong confirm action in the hover state. */
   --gl-action-strong-confirm-background-color-default: var(--gl-color-blue-400); /* Used for the background of a strong confirm action in the default state. */
@@ -780,6 +780,13 @@
   --gl-control-text-color-valid: var(--gl-text-color-success); /* Used for the helper text when the input is valid. */
   --gl-control-text-color-error: var(--gl-text-color-danger); /* Used for the helper text when the input is invalid. */
   --gl-token-foreground-color: var(--gl-text-color-default); /* Used for the token foreground color. */
+  --gl-toggle-switch-icon-color-disabled: var(--gl-action-disabled-background-color); /* Used for the icon color of a disabled toggle switch. */
+  --gl-toggle-switch-icon-color-checked-active: var(--gl-action-strong-confirm-background-color-active); /* Used for the icon color of a checked toggle switch in the active state. */
+  --gl-toggle-switch-icon-color-checked-hover: var(--gl-action-strong-confirm-background-color-hover); /* Used for the icon color of a checked toggle switch in the hover state. */
+  --gl-toggle-switch-icon-color-checked-default: var(--gl-action-strong-confirm-background-color-default); /* Used for the icon color of a checked toggle switch in the default state. */
+  --gl-toggle-switch-icon-color-unchecked-active: var(--gl-action-strong-neutral-background-color-active); /* Used for the icon color of an unchecked toggle switch in the active state. */
+  --gl-toggle-switch-icon-color-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-default: var(--gl-action-strong-neutral-background-color-default); /* Used for the icon color of an unchecked toggle switch in the default state. */
   --gl-table-sorting-icon-color: var(--gl-text-color-heading); /* Used for the color of the sorting icons in the column headers. */
   --gl-table-row-background-color-hover: var(--gl-background-color-subtle); /* Used for the background of a table row in hover state. */
   --gl-progress-bar-indicator-color-danger: var(--gl-status-danger-icon-color); /* Used for the indicator color for the danger progress-bar variant. */
@@ -893,6 +900,8 @@
   --gl-action-selected-border-color-default: var(--gl-action-selected-background-color-default); /* Used for the border of a selected action in the default state. */
   --gl-action-selected-background-color-focus: var(--gl-action-selected-background-color-hover); /* Used for the background of a selected action in the focus state. */
   --gl-action-selected-foreground-color-hover: var(--gl-action-selected-foreground-color-default); /* Used for the foreground of a selected action in the hover state. */
+  --gl-toggle-switch-icon-color-checked-focus: var(--gl-action-strong-confirm-background-color-focus); /* Used for the icon color of a checked toggle switch in the focus state. */
+  --gl-toggle-switch-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-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-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-hover: var(--gl-action-neutral-foreground-color-hover); /* Used for the text of a dropdown option in the hover state. */

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

@@ -58,22 +58,22 @@ export const GL_ACTION_STRONG_CONFIRM_BACKGROUND_COLOR_DEFAULT = '#428fdc'; // U
 export const GL_ACTION_STRONG_CONFIRM_BACKGROUND_COLOR_HOVER = '#63a6e9'; // Used for the background of a strong confirm action in the hover state.
 export const GL_ACTION_STRONG_CONFIRM_BACKGROUND_COLOR_FOCUS = '#63a6e9'; // Used for the background of a strong confirm action in the focus state.
 export const GL_ACTION_STRONG_CONFIRM_BACKGROUND_COLOR_ACTIVE = '#9dc7f1'; // Used for the background of a strong confirm action in the active state.
-export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_DEFAULT = '#fff'; // Used for the foreground of a strong confirm action in the default state.
-export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_HOVER = '#fff'; // Used for the foreground of a strong confirm action in the hover state.
-export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_FOCUS = '#fff'; // Used for the foreground of a strong confirm action in the focus state.
-export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_ACTIVE = '#fff'; // Used for the foreground of a strong confirm action in the active state.
+export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_DEFAULT = '#18171d'; // Used for the foreground of a strong confirm action in the default state.
+export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_HOVER = '#18171d'; // Used for the foreground of a strong confirm action in the hover state.
+export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_FOCUS = '#18171d'; // Used for the foreground of a strong confirm action in the focus state.
+export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_ACTIVE = '#18171d'; // Used for the foreground of a strong confirm action in the active state.
 export const GL_ACTION_STRONG_CONFIRM_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a strong confirm action in the default state.
 export const GL_ACTION_STRONG_CONFIRM_BORDER_COLOR_HOVER = 'transparent'; // Used for the border of a strong confirm action in the hover state.
 export const GL_ACTION_STRONG_CONFIRM_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a strong confirm action in the focus state.
 export const GL_ACTION_STRONG_CONFIRM_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a strong confirm action in the active state.
-export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_DEFAULT = '#a4a3a8'; // Used for the background of a strong neutral action in the default state.
-export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_HOVER = '#bfbfc3'; // Used for the background of a strong neutral action in the hover state.
-export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_FOCUS = '#bfbfc3'; // Used for the background of a strong neutral action in the focus state.
-export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_ACTIVE = '#dcdcde'; // Used for the background of a strong neutral action in the active state.
-export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_DEFAULT = '#fff'; // Used for the foreground of a strong neutral action in the default state.
-export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_HOVER = '#fff'; // Used for the foreground of a strong neutral action in the hover state.
-export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_FOCUS = '#fff'; // Used for the foreground of a strong neutral action in the focus state.
-export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_ACTIVE = '#fff'; // Used for the foreground of a strong neutral action in the active state.
+export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_DEFAULT = '#4c4b51'; // Used for the background of a strong neutral action in the default state.
+export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_HOVER = '#626168'; // Used for the background of a strong neutral action in the hover state.
+export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_FOCUS = '#626168'; // Used for the background of a strong neutral action in the focus state.
+export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_ACTIVE = '#737278'; // Used for the background of a strong neutral action in the active state.
+export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_DEFAULT = '#ececef'; // Used for the foreground of a strong neutral action in the default state.
+export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_HOVER = '#ececef'; // Used for the foreground of a strong neutral action in the hover state.
+export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_FOCUS = '#ececef'; // Used for the foreground of a strong neutral action in the focus state.
+export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_ACTIVE = '#ececef'; // Used for the foreground of a strong neutral action in the active state.
 export const GL_ACTION_STRONG_NEUTRAL_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a strong neutral action in the default state.
 export const GL_ACTION_STRONG_NEUTRAL_BORDER_COLOR_HOVER = 'transparent'; // Used for the border of a strong neutral action in the hover state.
 export const GL_ACTION_STRONG_NEUTRAL_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a strong neutral action in the focus state.
@@ -530,10 +530,10 @@ export const GL_BUTTON_DEFAULT_TERTIARY_BORDER_COLOR_DEFAULT = 'transparent'; //
 export const GL_BUTTON_DEFAULT_TERTIARY_BORDER_COLOR_HOVER = 'transparent'; // Used for the border of a default borderless, tertiary button in the hover state.
 export const GL_BUTTON_DEFAULT_TERTIARY_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a default borderless, tertiary button in the focus state.
 export const GL_BUTTON_DEFAULT_TERTIARY_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a default borderless, tertiary button in the active state.
-export const GL_BUTTON_CONFIRM_PRIMARY_FOREGROUND_COLOR_DEFAULT = '#fff'; // Used for the foreground of a confirm (positive) primary button in the default state.
-export const GL_BUTTON_CONFIRM_PRIMARY_FOREGROUND_COLOR_HOVER = '#fff'; // Used for the foreground of a confirm (positive) primary button in the hover state.
-export const GL_BUTTON_CONFIRM_PRIMARY_FOREGROUND_COLOR_FOCUS = '#fff'; // Used for the foreground of a confirm (positive) primary button in the focus state.
-export const GL_BUTTON_CONFIRM_PRIMARY_FOREGROUND_COLOR_ACTIVE = '#fff'; // Used for the foreground of a confirm (positive) primary button in the active state.
+export const GL_BUTTON_CONFIRM_PRIMARY_FOREGROUND_COLOR_DEFAULT = '#18171d'; // Used for the foreground of a confirm (positive) primary button in the default state.
+export const GL_BUTTON_CONFIRM_PRIMARY_FOREGROUND_COLOR_HOVER = '#18171d'; // Used for the foreground of a confirm (positive) primary button in the hover state.
+export const GL_BUTTON_CONFIRM_PRIMARY_FOREGROUND_COLOR_FOCUS = '#18171d'; // Used for the foreground of a confirm (positive) primary button in the focus state.
+export const GL_BUTTON_CONFIRM_PRIMARY_FOREGROUND_COLOR_ACTIVE = '#18171d'; // Used for the foreground of a confirm (positive) primary button in the active state.
 export const GL_BUTTON_CONFIRM_PRIMARY_BACKGROUND_COLOR_DEFAULT = '#428fdc'; // Used for the background of a confirm (positive) primary button in the default state.
 export const GL_BUTTON_CONFIRM_PRIMARY_BACKGROUND_COLOR_HOVER = '#63a6e9'; // Used for the background of a confirm (positive) primary button in the hover state.
 export const GL_BUTTON_CONFIRM_PRIMARY_BACKGROUND_COLOR_FOCUS = '#63a6e9'; // Used for the background of a confirm (positive) primary button in the focus state.
@@ -682,6 +682,15 @@ export const GL_SPINNER_SEGMENT_COLOR_LIGHT = '#bfbfc3'; // Used for the animate
 export const GL_TABLE_ROW_BACKGROUND_COLOR_HOVER = '#28272d'; // Used for the background of a table row in hover state.
 export const GL_TABLE_SORTING_ICON_COLOR = '#fff'; // Used for the color of the sorting icons in the column headers.
 export const GL_TAB_SELECTED_INDICATOR_COLOR_DEFAULT = '#428fdc'; // Used for the selected indicator of a tab.
+export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_DEFAULT = '#4c4b51'; // Used for the icon color of an unchecked toggle switch in the default state.
+export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_HOVER = '#626168'; // Used for the icon color of an unchecked toggle switch in the hover state.
+export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_FOCUS = '#626168'; // Used for the icon color of an unchecked toggle switch in the focus state.
+export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_ACTIVE = '#737278'; // Used for the icon color of an unchecked toggle switch in the active state.
+export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_DEFAULT = '#428fdc'; // Used for the icon color of a checked toggle switch in the default state.
+export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_HOVER = '#63a6e9'; // Used for the icon color of a checked toggle switch in the hover state.
+export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_FOCUS = '#63a6e9'; // Used for the icon color of a checked toggle switch in the focus state.
+export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_ACTIVE = '#9dc7f1'; // Used for the icon color of a checked toggle switch in the active state.
+export const GL_TOGGLE_SWITCH_ICON_COLOR_DISABLED = '#28272d'; // Used for the icon color of a disabled toggle switch.
 export const GL_TOKEN_FOREGROUND_COLOR = '#ececef'; // Used for the token foreground color.
 export const GL_TOKEN_BACKGROUND_COLOR = '#3a383f'; // Used for the token background color.
 export const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.4)'; // Used for form control (input, radio button, checkbox, textarea) default background.

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

@@ -682,6 +682,15 @@ export const GL_SPINNER_SEGMENT_COLOR_LIGHT = '#bfbfc3'; // Used for the animate
 export const GL_TABLE_ROW_BACKGROUND_COLOR_HOVER = '#fbfafd'; // Used for the background of a table row in hover state.
 export const GL_TABLE_SORTING_ICON_COLOR = '#18171d'; // Used for the color of the sorting icons in the column headers.
 export const GL_TAB_SELECTED_INDICATOR_COLOR_DEFAULT = '#1f75cb'; // Used for the selected indicator of a tab.
+export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_DEFAULT = '#626168'; // Used for the icon color of an unchecked toggle switch in the default state.
+export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_HOVER = '#4c4b51'; // Used for the icon color of an unchecked toggle switch in the hover state.
+export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_FOCUS = '#4c4b51'; // Used for the icon color of an unchecked toggle switch in the focus state.
+export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_ACTIVE = '#3a383f'; // Used for the icon color of an unchecked toggle switch in the active state.
+export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_DEFAULT = '#1f75cb'; // Used for the icon color of a checked toggle switch in the default state.
+export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_HOVER = '#1068bf'; // Used for the icon color of a checked toggle switch in the hover state.
+export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_FOCUS = '#1068bf'; // Used for the icon color of a checked toggle switch in the focus state.
+export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_ACTIVE = '#0b5cad'; // Used for the icon color of a checked toggle switch in the active state.
+export const GL_TOGGLE_SWITCH_ICON_COLOR_DISABLED = '#ececef'; // Used for the icon color of a disabled toggle switch.
 export const GL_TOKEN_FOREGROUND_COLOR = '#3a383f'; // Used for the token foreground color.
 export const GL_TOKEN_BACKGROUND_COLOR = '#dcdcde'; // Used for the token background color.
 export const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for form control (input, radio button, checkbox, textarea) default background.