@gitlab/ui 95.2.1 → 95.4.0

package/src/components/base/pagination/pagination.vue

@@ -110,6 +110,14 @@ export default {
       required: false,
       default: '…',
     },
+    /**
+     * aria-label for the nav
+     */
+    labelNav: {
+      type: String,
+      required: false,
+      default: translate('GlPagination.nav', 'Pagination'),
+    },
     /**
      * aria-label for the first page item
      */
@@ -197,13 +205,13 @@ export default {
     wrapperClasses() {
       const classes = [];
       if (this.align === alignOptions.center) {
-        classes.push('justify-content-center');
+        classes.push('gl-justify-center');
       }
       if (this.align === alignOptions.right) {
-        classes.push('justify-content-end');
+        classes.push('gl-justify-end');
       }
       if (this.isFillAlign) {
-        classes.push('text-center');
+        classes.push('gl-text-center');
       }
       return classes;
     },
@@ -388,21 +396,21 @@ export default {
 </script>
 
 <template>
-  <nav v-if="isVisible" class="gl-pagination text-nowrap" aria-label="Pagination">
-    <ul class="pagination" :class="wrapperClasses">
+  <nav v-if="isVisible" class="gl-pagination" :aria-label="labelNav">
+    <ul :class="wrapperClasses">
       <li
-        class="page-item"
-        data-testid="page-item"
+        :aria-disabled="prevPageIsDisabled"
+        :aria-hidden="prevPageIsDisabled"
         :class="{
           disabled: prevPageIsDisabled,
-          'flex-fill': isFillAlign,
+          'gl-flex-auto': isFillAlign,
         }"
-        :aria-hidden="prevPageIsDisabled"
+        data-testid="gl-pagination-li"
       >
         <component
           :is="prevPageIsDisabled ? 'span' : 'a'"
-          data-testid="page-link"
-          class="gl-link page-link prev-page-item gl-flex"
+          data-testid="gl-pagination-prev"
+          class="gl-pagination-item"
           :aria-label="prevPageAriaLabel"
           :href="prevPageHref"
           @click="handlePrevious($event, value - 1)"
@@ -415,26 +423,25 @@ export default {
             -->
           <slot name="previous" v-bind="{ page: value - 1, disabled: prevPageIsDisabled }">
             <gl-icon name="chevron-left" />
-            <span>{{ prevText }}</span>
+            <span class="gl-hidden sm:gl-block">{{ prevText }}</span>
           </slot>
         </component>
       </li>
       <li
         v-for="item in visibleItems"
         :key="item.key"
-        class="page-item"
-        data-testid="page-item"
         :class="{
           disabled: item.disabled,
-          'flex-fill': isFillAlign,
+          'gl-flex-auto': isFillAlign,
         }"
+        data-testid="gl-pagination-li"
       >
         <component
           :is="item.component"
-          data-testid="page-link"
+          data-testid="gl-pagination-item"
           size="md"
           :aria-disabled="item.disabled"
-          class="page-link"
+          class="gl-pagination-item"
           v-bind="item.attrs"
           v-on="item.listeners"
         >
@@ -458,18 +465,18 @@ export default {
       </li>
 
       <li
-        class="page-item"
-        data-testid="page-item"
+        :aria-disabled="nextPageIsDisabled"
+        :aria-hidden="nextPageIsDisabled"
         :class="{
           disabled: nextPageIsDisabled,
-          'flex-fill': isFillAlign,
+          'gl-flex-auto': isFillAlign,
         }"
-        :aria-hidden="nextPageIsDisabled"
+        data-testid="gl-pagination-li"
       >
         <component
           :is="nextPageIsDisabled ? 'span' : 'a'"
-          data-testid="page-link"
-          class="gl-link page-link next-page-item gl-flex"
+          data-testid="gl-pagination-next"
+          class="gl-pagination-item"
           :aria-label="nextPageAriaLabel"
           :href="nextPageHref"
           @click="handleNext($event, value + 1)"
@@ -481,7 +488,7 @@ export default {
             @binding {number} number
             -->
           <slot name="next" v-bind="{ page: value + 1, disabled: nextPageIsDisabled }">
-            <span>{{ nextText }}</span>
+            <span class="gl-hidden sm:gl-block">{{ nextText }}</span>
             <gl-icon name="chevron-right" />
           </slot>
         </component>

package/src/scss/mixins.scss

@@ -236,3 +236,27 @@
     animation-delay: 0ms !important;
   }
 }
+
+@mixin gl-action-selected-colors {
+  color: var(--gl-action-selected-foreground-color-default);
+  background-color: var(--gl-action-selected-background-color-default);
+  border-color: var(--gl-action-selected-border-color-default);
+
+  &:hover {
+    color: var(--gl-action-selected-foreground-color-hover);
+    background-color: var(--gl-action-selected-background-color-hover);
+    border-color: var(--gl-action-selected-border-color-hover);
+  }
+
+  &:focus {
+    color: var(--gl-action-selected-foreground-color-focus);
+    background-color: var(--gl-action-selected-background-color-focus);
+    border-color: var(--gl-action-selected-border-color-focus);
+  }
+
+  &:active {
+    color: var(--gl-action-selected-foreground-color-active);
+    background-color: var(--gl-action-selected-background-color-active);
+    border-color: var(--gl-action-selected-border-color-active);
+  }
+}

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."
             },
@@ -557,4 +563,4 @@
       }
     }
   }
-}
+}

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.