.gitlab/issue_templates/Component.md

@@ -43,4 +43,4 @@ Make sure the following are completed before closing the issue:
 [adding-components]: https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/doc/contributing/adding_components.md
 [adding-css]: https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/doc/contributing/adding_css.md
 [breaking-changes]: https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/doc/contributing/breaking_changes_to_components.md
-[eng-week-in-review-doc]: https://docs.google.com/document/d/1GQbnOP_lr9KVMVaBQx19WwKITCmh7H3YlgO-XqVwv0M/edit
+[eng-week-in-review-doc]: https://docs.google.com/document/d/1JBdCl3MAOSdlgq3kzzRmtzTsFWsTIQ9iQg0RHhMht6E/edit

CHANGELOG.md

+# [95.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v95.3.0...v95.4.0) (2024-10-09)
+
+
+### Features
+
+* **design-tokens:** Add new design tokens for GlToggle ([fd32020](https://gitlab.com/gitlab-org/gitlab-ui/commit/fd320201ccae9d467b6990609d398c886b9c03de))
+
 # [95.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v95.2.1...v95.3.0) (2024-10-08)
 
 

package.json

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

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."
             },

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. */

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. */

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.

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.

src/tokens/build/json/tokens.dark.json

@@ -1307,13 +1307,16 @@
         "foreground": {
           "color": {
             "default": {
-              "value": "#fff",
+              "value": "#18171d",
               "$type": "color",
               "comment": "Used for the foreground of a strong confirm action in the default state.",
               "filePath": "src/tokens/action.tokens.json",
               "isSource": true,
               "original": {
-                "value": "{color.neutral.0}",
+                "value": {
+                  "default": "{color.neutral.0}",
+                  "dark": "{color.neutral.950}"
+                },
                 "$type": "color",
                 "comment": "Used for the foreground of a strong confirm action in the default state."
               },
@@ -1329,7 +1332,7 @@
               ]
             },
             "hover": {
-              "value": "#fff",
+              "value": "#18171d",
               "$type": "color",
               "comment": "Used for the foreground of a strong confirm action in the hover state.",
               "filePath": "src/tokens/action.tokens.json",
@@ -1351,7 +1354,7 @@
               ]
             },
             "focus": {
-              "value": "#fff",
+              "value": "#18171d",
               "$type": "color",
               "comment": "Used for the foreground of a strong confirm action in the focus state.",
               "filePath": "src/tokens/action.tokens.json",
@@ -1373,7 +1376,7 @@
               ]
             },
             "active": {
-              "value": "#fff",
+              "value": "#18171d",
               "$type": "color",
               "comment": "Used for the foreground of a strong confirm action in the active state.",
               "filePath": "src/tokens/action.tokens.json",
@@ -1493,7 +1496,7 @@
         "background": {
           "color": {
             "default": {
-              "value": "#a4a3a8",
+              "value": "#4c4b51",
               "$type": "color",
               "comment": "Used for the background of a strong neutral action in the default state.",
               "filePath": "src/tokens/action.tokens.json",
@@ -1501,7 +1504,7 @@
               "original": {
                 "value": {
                   "default": "{color.neutral.600}",
-                  "dark": "{color.neutral.300}"
+                  "dark": "{color.neutral.700}"
                 },
                 "$type": "color",
                 "comment": "Used for the background of a strong neutral action in the default state."
@@ -1518,7 +1521,7 @@
               ]
             },
             "hover": {
-              "value": "#bfbfc3",
+              "value": "#626168",
               "$type": "color",
               "comment": "Used for the background of a strong neutral action in the hover state.",
               "filePath": "src/tokens/action.tokens.json",
@@ -1526,7 +1529,7 @@
               "original": {
                 "value": {
                   "default": "{color.neutral.700}",
-                  "dark": "{color.neutral.200}"
+                  "dark": "{color.neutral.600}"
                 },
                 "$type": "color",
                 "comment": "Used for the background of a strong neutral action in the hover state."
@@ -1543,7 +1546,7 @@
               ]
             },
             "focus": {
-              "value": "#bfbfc3",
+              "value": "#626168",
               "$type": "color",
               "comment": "Used for the background of a strong neutral action in the focus state.",
               "filePath": "src/tokens/action.tokens.json",
@@ -1565,7 +1568,7 @@
               ]
             },
             "active": {
-              "value": "#dcdcde",
+              "value": "#737278",
               "$type": "color",
               "comment": "Used for the background of a strong neutral action in the active state.",
               "filePath": "src/tokens/action.tokens.json",
@@ -1573,7 +1576,7 @@
               "original": {
                 "value": {
                   "default": "{color.neutral.800}",
-                  "dark": "{color.neutral.100}"
+                  "dark": "{color.neutral.500}"
                 },
                 "$type": "color",
                 "comment": "Used for the background of a strong neutral action in the active state."
@@ -1594,13 +1597,16 @@
         "foreground": {
           "color": {
             "default": {
-              "value": "#fff",
+              "value": "#ececef",
               "$type": "color",
               "comment": "Used for the foreground of a strong neutral action in the default state.",
               "filePath": "src/tokens/action.tokens.json",
               "isSource": true,
               "original": {
-                "value": "{color.neutral.0}",
+                "value": {
+                  "default": "{color.neutral.0}",
+                  "dark": "{color.neutral.50}"
+                },
                 "$type": "color",
                 "comment": "Used for the foreground of a strong neutral action in the default state."
               },
@@ -1616,7 +1622,7 @@
               ]
             },
             "hover": {
-              "value": "#fff",
+              "value": "#ececef",
               "$type": "color",
               "comment": "Used for the foreground of a strong neutral action in the hover state.",
               "filePath": "src/tokens/action.tokens.json",
@@ -1638,7 +1644,7 @@
               ]
             },
             "focus": {
-              "value": "#fff",
+              "value": "#ececef",
               "$type": "color",
               "comment": "Used for the foreground of a strong neutral action in the focus state.",
               "filePath": "src/tokens/action.tokens.json",
@@ -1660,7 +1666,7 @@
               ]
             },
             "active": {
-              "value": "#fff",
+              "value": "#ececef",
               "$type": "color",
               "comment": "Used for the foreground of a strong neutral action in the active state.",
               "filePath": "src/tokens/action.tokens.json",
@@ -11405,7 +11411,7 @@
         "foreground": {
           "color": {
             "default": {
-              "value": "#fff",
+              "value": "#18171d",
               "$type": "color",
               "comment": "Used for the foreground of a confirm (positive) primary button in the default state.",
               "filePath": "src/tokens/contextual/button.tokens.json",
@@ -11427,7 +11433,7 @@
               ]
             },
             "hover": {
-              "value": "#fff",
+              "value": "#18171d",
               "$type": "color",
               "comment": "Used for the foreground of a confirm (positive) primary button in the hover state.",
               "filePath": "src/tokens/contextual/button.tokens.json",
@@ -11449,7 +11455,7 @@
               ]
             },
             "focus": {
-              "value": "#fff",
+              "value": "#18171d",
               "$type": "color",
               "comment": "Used for the foreground of a confirm (positive) primary button in the focus state.",
               "filePath": "src/tokens/contextual/button.tokens.json",
@@ -11471,7 +11477,7 @@
               ]
             },
             "active": {
-              "value": "#fff",
+              "value": "#18171d",
               "$type": "color",
               "comment": "Used for the foreground of a confirm (positive) primary button in the active state.",
               "filePath": "src/tokens/contextual/button.tokens.json",
@@ -15134,6 +15140,215 @@
       }
     }
   },
+  "toggle": {
+    "switch": {
+      "icon": {
+        "color": {
+          "unchecked": {
+            "default": {
+              "value": "#4c4b51",
+              "$type": "color",
+              "comment": "Used for the icon color of an unchecked toggle switch in the default state.",
+              "filePath": "src/tokens/contextual/toggle.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{action.strong.neutral.background.color.default}",
+                "$type": "color",
+                "comment": "Used for the icon color of an unchecked toggle switch in the default state."
+              },
+              "name": "TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_DEFAULT",
+              "attributes": {},
+              "path": [
+                "toggle",
+                "switch",
+                "icon",
+                "color",
+                "unchecked",
+                "default"
+              ]
+            },
+            "hover": {
+              "value": "#626168",
+              "$type": "color",
+              "comment": "Used for the icon color of an unchecked toggle switch in the hover state.",
+              "filePath": "src/tokens/contextual/toggle.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{action.strong.neutral.background.color.hover}",
+                "$type": "color",
+                "comment": "Used for the icon color of an unchecked toggle switch in the hover state."
+              },
+              "name": "TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_HOVER",
+              "attributes": {},
+              "path": [
+                "toggle",
+                "switch",
+                "icon",
+                "color",
+                "unchecked",
+                "hover"
+              ]
+            },
+            "focus": {
+              "value": "#626168",
+              "$type": "color",
+              "comment": "Used for the icon color of an unchecked toggle switch in the focus state.",
+              "filePath": "src/tokens/contextual/toggle.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{action.strong.neutral.background.color.focus}",
+                "$type": "color",
+                "comment": "Used for the icon color of an unchecked toggle switch in the focus state."
+              },
+              "name": "TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_FOCUS",
+              "attributes": {},
+              "path": [
+                "toggle",
+                "switch",
+                "icon",
+                "color",
+                "unchecked",
+                "focus"
+              ]
+            },
+            "active": {
+              "value": "#737278",
+              "$type": "color",
+              "comment": "Used for the icon color of an unchecked toggle switch in the active state.",
+              "filePath": "src/tokens/contextual/toggle.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{action.strong.neutral.background.color.active}",
+                "$type": "color",
+                "comment": "Used for the icon color of an unchecked toggle switch in the active state."
+              },
+              "name": "TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_ACTIVE",
+              "attributes": {},
+              "path": [
+                "toggle",
+                "switch",
+                "icon",
+                "color",
+                "unchecked",
+                "active"
+              ]
+            }
+          },
+          "checked": {
+            "default": {
+              "value": "#428fdc",
+              "$type": "color",
+              "comment": "Used for the icon color of a checked toggle switch in the default state.",
+              "filePath": "src/tokens/contextual/toggle.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{action.strong.confirm.background.color.default}",
+                "$type": "color",
+                "comment": "Used for the icon color of a checked toggle switch in the default state."
+              },
+              "name": "TOGGLE_SWITCH_ICON_COLOR_CHECKED_DEFAULT",
+              "attributes": {},
+              "path": [
+                "toggle",
+                "switch",
+                "icon",
+                "color",
+                "checked",
+                "default"
+              ]
+            },
+            "hover": {
+              "value": "#63a6e9",
+              "$type": "color",
+              "comment": "Used for the icon color of a checked toggle switch in the hover state.",
+              "filePath": "src/tokens/contextual/toggle.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{action.strong.confirm.background.color.hover}",
+                "$type": "color",
+                "comment": "Used for the icon color of a checked toggle switch in the hover state."
+              },
+              "name": "TOGGLE_SWITCH_ICON_COLOR_CHECKED_HOVER",
+              "attributes": {},
+              "path": [
+                "toggle",
+                "switch",
+                "icon",
+                "color",
+                "checked",
+                "hover"
+              ]
+            },
+            "focus": {
+              "value": "#63a6e9",
+              "$type": "color",
+              "comment": "Used for the icon color of a checked toggle switch in the focus state.",
+              "filePath": "src/tokens/contextual/toggle.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{action.strong.confirm.background.color.focus}",
+                "$type": "color",
+                "comment": "Used for the icon color of a checked toggle switch in the focus state."
+              },
+              "name": "TOGGLE_SWITCH_ICON_COLOR_CHECKED_FOCUS",
+              "attributes": {},
+              "path": [
+                "toggle",
+                "switch",
+                "icon",
+                "color",
+                "checked",
+                "focus"
+              ]
+            },
+            "active": {
+              "value": "#9dc7f1",
+              "$type": "color",
+              "comment": "Used for the icon color of a checked toggle switch in the active state.",
+              "filePath": "src/tokens/contextual/toggle.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{action.strong.confirm.background.color.active}",
+                "$type": "color",
+                "comment": "Used for the icon color of a checked toggle switch in the active state."
+              },
+              "name": "TOGGLE_SWITCH_ICON_COLOR_CHECKED_ACTIVE",
+              "attributes": {},
+              "path": [
+                "toggle",
+                "switch",
+                "icon",
+                "color",
+                "checked",
+                "active"
+              ]
+            }
+          },
+          "disabled": {
+            "value": "#28272d",
+            "$type": "color",
+            "comment": "Used for the icon color of a disabled toggle switch.",
+            "filePath": "src/tokens/contextual/toggle.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "{action.disabled.background.color}",
+              "$type": "color",
+              "comment": "Used for the icon color of a disabled toggle switch."
+            },
+            "name": "TOGGLE_SWITCH_ICON_COLOR_DISABLED",
+            "attributes": {},
+            "path": [
+              "toggle",
+              "switch",
+              "icon",
+              "color",
+              "disabled"
+            ]
+          }
+        }
+      }
+    }
+  },
   "token": {
     "foreground": {
       "color": {

src/tokens/build/json/tokens.json

@@ -1313,7 +1313,10 @@
               "filePath": "src/tokens/action.tokens.json",
               "isSource": true,
               "original": {
-                "value": "{color.neutral.0}",
+                "value": {
+                  "default": "{color.neutral.0}",
+                  "dark": "{color.neutral.950}"
+                },
                 "$type": "color",
                 "comment": "Used for the foreground of a strong confirm action in the default state."
               },
@@ -1501,7 +1504,7 @@
               "original": {
                 "value": {
                   "default": "{color.neutral.600}",
-                  "dark": "{color.neutral.300}"
+                  "dark": "{color.neutral.700}"
                 },
                 "$type": "color",
                 "comment": "Used for the background of a strong neutral action in the default state."
@@ -1526,7 +1529,7 @@
               "original": {
                 "value": {
                   "default": "{color.neutral.700}",
-                  "dark": "{color.neutral.200}"
+                  "dark": "{color.neutral.600}"
                 },
                 "$type": "color",
                 "comment": "Used for the background of a strong neutral action in the hover state."
@@ -1573,7 +1576,7 @@
               "original": {
                 "value": {
                   "default": "{color.neutral.800}",
-                  "dark": "{color.neutral.100}"
+                  "dark": "{color.neutral.500}"
                 },
                 "$type": "color",
                 "comment": "Used for the background of a strong neutral action in the active state."
@@ -1600,7 +1603,10 @@
               "filePath": "src/tokens/action.tokens.json",
               "isSource": true,
               "original": {
-                "value": "{color.neutral.0}",
+                "value": {
+                  "default": "{color.neutral.0}",
+                  "dark": "{color.neutral.50}"
+                },
                 "$type": "color",
                 "comment": "Used for the foreground of a strong neutral action in the default state."
               },
@@ -15134,6 +15140,215 @@
       }
     }
   },
+  "toggle": {
+    "switch": {
+      "icon": {
+        "color": {
+          "unchecked": {
+            "default": {
+              "value": "#626168",
+              "$type": "color",
+              "comment": "Used for the icon color of an unchecked toggle switch in the default state.",
+              "filePath": "src/tokens/contextual/toggle.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{action.strong.neutral.background.color.default}",
+                "$type": "color",
+                "comment": "Used for the icon color of an unchecked toggle switch in the default state."
+              },
+              "name": "TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_DEFAULT",
+              "attributes": {},
+              "path": [
+                "toggle",
+                "switch",
+                "icon",
+                "color",
+                "unchecked",
+                "default"
+              ]
+            },
+            "hover": {
+              "value": "#4c4b51",
+              "$type": "color",
+              "comment": "Used for the icon color of an unchecked toggle switch in the hover state.",
+              "filePath": "src/tokens/contextual/toggle.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{action.strong.neutral.background.color.hover}",
+                "$type": "color",
+                "comment": "Used for the icon color of an unchecked toggle switch in the hover state."
+              },
+              "name": "TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_HOVER",
+              "attributes": {},
+              "path": [
+                "toggle",
+                "switch",
+                "icon",
+                "color",
+                "unchecked",
+                "hover"
+              ]
+            },
+            "focus": {
+              "value": "#4c4b51",
+              "$type": "color",
+              "comment": "Used for the icon color of an unchecked toggle switch in the focus state.",
+              "filePath": "src/tokens/contextual/toggle.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{action.strong.neutral.background.color.focus}",
+                "$type": "color",
+                "comment": "Used for the icon color of an unchecked toggle switch in the focus state."
+              },
+              "name": "TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_FOCUS",
+              "attributes": {},
+              "path": [
+                "toggle",
+                "switch",
+                "icon",
+                "color",
+                "unchecked",
+                "focus"
+              ]
+            },
+            "active": {
+              "value": "#3a383f",
+              "$type": "color",
+              "comment": "Used for the icon color of an unchecked toggle switch in the active state.",
+              "filePath": "src/tokens/contextual/toggle.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{action.strong.neutral.background.color.active}",
+                "$type": "color",
+                "comment": "Used for the icon color of an unchecked toggle switch in the active state."
+              },
+              "name": "TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_ACTIVE",
+              "attributes": {},
+              "path": [
+                "toggle",
+                "switch",
+                "icon",
+                "color",
+                "unchecked",
+                "active"
+              ]
+            }
+          },
+          "checked": {
+            "default": {
+              "value": "#1f75cb",
+              "$type": "color",
+              "comment": "Used for the icon color of a checked toggle switch in the default state.",
+              "filePath": "src/tokens/contextual/toggle.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{action.strong.confirm.background.color.default}",
+                "$type": "color",
+                "comment": "Used for the icon color of a checked toggle switch in the default state."
+              },
+              "name": "TOGGLE_SWITCH_ICON_COLOR_CHECKED_DEFAULT",
+              "attributes": {},
+              "path": [
+                "toggle",
+                "switch",
+                "icon",
+                "color",
+                "checked",
+                "default"
+              ]
+            },
+            "hover": {
+              "value": "#1068bf",
+              "$type": "color",
+              "comment": "Used for the icon color of a checked toggle switch in the hover state.",
+              "filePath": "src/tokens/contextual/toggle.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{action.strong.confirm.background.color.hover}",
+                "$type": "color",
+                "comment": "Used for the icon color of a checked toggle switch in the hover state."
+              },
+              "name": "TOGGLE_SWITCH_ICON_COLOR_CHECKED_HOVER",
+              "attributes": {},
+              "path": [
+                "toggle",
+                "switch",
+                "icon",
+                "color",
+                "checked",
+                "hover"
+              ]
+            },
+            "focus": {
+              "value": "#1068bf",
+              "$type": "color",
+              "comment": "Used for the icon color of a checked toggle switch in the focus state.",
+              "filePath": "src/tokens/contextual/toggle.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{action.strong.confirm.background.color.focus}",
+                "$type": "color",
+                "comment": "Used for the icon color of a checked toggle switch in the focus state."
+              },
+              "name": "TOGGLE_SWITCH_ICON_COLOR_CHECKED_FOCUS",
+              "attributes": {},
+              "path": [
+                "toggle",
+                "switch",
+                "icon",
+                "color",
+                "checked",
+                "focus"
+              ]
+            },
+            "active": {
+              "value": "#0b5cad",
+              "$type": "color",
+              "comment": "Used for the icon color of a checked toggle switch in the active state.",
+              "filePath": "src/tokens/contextual/toggle.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{action.strong.confirm.background.color.active}",
+                "$type": "color",
+                "comment": "Used for the icon color of a checked toggle switch in the active state."
+              },
+              "name": "TOGGLE_SWITCH_ICON_COLOR_CHECKED_ACTIVE",
+              "attributes": {},
+              "path": [
+                "toggle",
+                "switch",
+                "icon",
+                "color",
+                "checked",
+                "active"
+              ]
+            }
+          },
+          "disabled": {
+            "value": "#ececef",
+            "$type": "color",
+            "comment": "Used for the icon color of a disabled toggle switch.",
+            "filePath": "src/tokens/contextual/toggle.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "{action.disabled.background.color}",
+              "$type": "color",
+              "comment": "Used for the icon color of a disabled toggle switch."
+            },
+            "name": "TOGGLE_SWITCH_ICON_COLOR_DISABLED",
+            "attributes": {},
+            "path": [
+              "toggle",
+              "switch",
+              "icon",
+              "color",
+              "disabled"
+            ]
+          }
+        }
+      }
+    }
+  },
   "token": {
     "foreground": {
       "color": {

src/tokens/build/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.

src/tokens/build/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.

src/tokens/build/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);

src/tokens/contextual/toggle.tokens.json

+{
+  "toggle": {
+    "switch": {
+      "icon": {
+        "color": {
+          "unchecked": {
+            "default": {
+              "$value": "{action.strong.neutral.background.color.default}",
+              "$type": "color",
+              "$description": "Used for the icon color of an unchecked toggle switch in the default state."
+            },
+            "hover": {
+              "$value": "{action.strong.neutral.background.color.hover}",
+              "$type": "color",
+              "$description": "Used for the icon color of an unchecked toggle switch in the hover state."
+            },
+            "focus": {
+              "$value": "{action.strong.neutral.background.color.focus}",
+              "$type": "color",
+              "$description": "Used for the icon color of an unchecked toggle switch in the focus state."
+            },
+            "active": {
+              "$value": "{action.strong.neutral.background.color.active}",
+              "$type": "color",
+              "$description": "Used for the icon color of an unchecked toggle switch in the active state."
+            }
+          },
+          "checked": {
+            "default": {
+              "$value": "{action.strong.confirm.background.color.default}",
+              "$type": "color",
+              "$description": "Used for the icon color of a checked toggle switch in the default state."
+            },
+            "hover": {
+              "$value": "{action.strong.confirm.background.color.hover}",
+              "$type": "color",
+              "$description": "Used for the icon color of a checked toggle switch in the hover state."
+            },
+            "focus": {
+              "$value": "{action.strong.confirm.background.color.focus}",
+              "$type": "color",
+              "$description": "Used for the icon color of a checked toggle switch in the focus state."
+            },
+            "active": {
+              "$value": "{action.strong.confirm.background.color.active}",
+              "$type": "color",
+              "$description": "Used for the icon color of a checked toggle switch in the active state."
+            }
+          },
+          "disabled": {
+            "$value": "{action.disabled.background.color}",
+            "$type": "color",
+            "$description": "Used for the icon color of a disabled toggle switch."
+          }
+        }
+      }
+    }
+  }
+}