@gitlab/ui 136.3.0 → 136.3.2

package/src/tokens/build/figma/mode.json

@@ -5075,7 +5075,7 @@
     }
   },
   "🔒/toggle-switch-track-color-unchecked-default": {
-    "$value": "{control-border-color-default}",
+    "$value": "{control-background-color-default}",
     "$type": "color",
     "$description": "Used for the track color of an unchecked toggle switch in the default state.",
     "$extensions": {
@@ -5088,7 +5088,7 @@
   "🔒/toggle-switch-track-color-unchecked-hover": {
     "$value": "{🔒/toggle-switch-track-color-unchecked-default}",
     "$type": "color",
-    "$description": "Used for the track color of an unchecked toggle switch in the hover state.",
+    "$description": "Used for the track color of an unchecked toggle switch in the hover state. The track is deliberately unchanged from the default state; hover is carried by the track border and the thumb size.",
     "$extensions": {
       "com.figma.scopes": [
         "SHAPE_FILL",
@@ -5099,7 +5099,7 @@
   "🔒/toggle-switch-track-color-unchecked-focus": {
     "$value": "{🔒/toggle-switch-track-color-unchecked-hover}",
     "$type": "color",
-    "$description": "Used for the track color of an unchecked toggle switch in the focus state.",
+    "$description": "Used for the track color of an unchecked toggle switch in the focus state. The track is deliberately unchanged from the default state; focus is carried by the focus ring, the track border and the thumb size.",
     "$extensions": {
       "com.figma.scopes": [
         "SHAPE_FILL",
@@ -5108,7 +5108,7 @@
     }
   },
   "🔒/toggle-switch-track-color-unchecked-active": {
-    "$value": "{🔒/toggle-switch-track-color-unchecked-focus}",
+    "$value": "{action-neutral-background-color-active}",
     "$type": "color",
     "$description": "Used for the track color of an unchecked toggle switch in the active state.",
     "$extensions": {
@@ -5118,8 +5118,19 @@
       ]
     }
   },
+  "🔒/toggle-switch-track-color-unchecked-disabled": {
+    "$value": "{control-background-color-default}",
+    "$type": "color",
+    "$description": "Used for the track color of a disabled unchecked toggle switch.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "SHAPE_FILL",
+        "FRAME_FILL"
+      ]
+    }
+  },
   "🔒/toggle-switch-track-color-checked-default": {
-    "$value": "{color-neutral-800}",
+    "$value": "{action-selected-background-color-default}",
     "$type": "color",
     "$description": "Used for the track color of a checked toggle switch in the default state.",
     "$extensions": {
@@ -5130,7 +5141,7 @@
     }
   },
   "🔒/toggle-switch-track-color-checked-hover": {
-    "$value": "{color-neutral-950}",
+    "$value": "{action-selected-background-color-hover}",
     "$type": "color",
     "$description": "Used for the track color of a checked toggle switch in the hover state.",
     "$extensions": {
@@ -5141,7 +5152,7 @@
     }
   },
   "🔒/toggle-switch-track-color-checked-focus": {
-    "$value": "{🔒/toggle-switch-track-color-checked-hover}",
+    "$value": "{action-selected-background-color-focus}",
     "$type": "color",
     "$description": "Used for the track color of a checked toggle switch in the focus state.",
     "$extensions": {
@@ -5152,7 +5163,7 @@
     }
   },
   "🔒/toggle-switch-track-color-checked-active": {
-    "$value": "{color-neutral-1000}",
+    "$value": "{action-selected-background-color-active}",
     "$type": "color",
     "$description": "Used for the track color of a checked toggle switch in the active state.",
     "$extensions": {
@@ -5162,8 +5173,140 @@
       ]
     }
   },
+  "🔒/toggle-switch-track-color-checked-disabled": {
+    "$value": "{action-selected-background-color-disabled}",
+    "$type": "color",
+    "$description": "Used for the track color of a disabled checked toggle switch, which stays filled so the checked state remains legible.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "SHAPE_FILL",
+        "FRAME_FILL"
+      ]
+    }
+  },
+  "🔒/toggle-switch-track-color-loading": {
+    "$value": "{action-disabled-background-color}",
+    "$type": "color",
+    "$description": "Used for the track color of a loading toggle switch. A loading toggle renders no thumb and its value is still in flight, so the track carries no checked state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "SHAPE_FILL",
+        "FRAME_FILL"
+      ]
+    }
+  },
+  "🔒/toggle-switch-track-border-color-unchecked-default": {
+    "$value": "{control-border-color-default}",
+    "$type": "color",
+    "$description": "Used for the track border color of an unchecked toggle switch in the default state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "STROKE_COLOR"
+      ]
+    }
+  },
+  "🔒/toggle-switch-track-border-color-unchecked-hover": {
+    "$value": "{control-border-color-hover}",
+    "$type": "color",
+    "$description": "Used for the track border color of an unchecked toggle switch in the hover state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "STROKE_COLOR"
+      ]
+    }
+  },
+  "🔒/toggle-switch-track-border-color-unchecked-focus": {
+    "$value": "{🔒/toggle-switch-track-border-color-unchecked-hover}",
+    "$type": "color",
+    "$description": "Used for the track border color of an unchecked toggle switch in the focus state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "STROKE_COLOR"
+      ]
+    }
+  },
+  "🔒/toggle-switch-track-border-color-unchecked-active": {
+    "$value": "{🔒/toggle-switch-track-border-color-unchecked-focus}",
+    "$type": "color",
+    "$description": "Used for the track border color of an unchecked toggle switch in the active state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "STROKE_COLOR"
+      ]
+    }
+  },
+  "🔒/toggle-switch-track-border-color-unchecked-disabled": {
+    "$value": "{action-disabled-border-color}",
+    "$type": "color",
+    "$description": "Used for the track border color of a disabled unchecked toggle switch.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "STROKE_COLOR"
+      ]
+    }
+  },
+  "🔒/toggle-switch-track-border-color-checked-default": {
+    "$value": "{action-selected-border-color-default}",
+    "$type": "color",
+    "$description": "Used for the track border color of a checked toggle switch in the default state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "STROKE_COLOR"
+      ]
+    }
+  },
+  "🔒/toggle-switch-track-border-color-checked-hover": {
+    "$value": "{action-selected-border-color-hover}",
+    "$type": "color",
+    "$description": "Used for the track border color of a checked toggle switch in the hover state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "STROKE_COLOR"
+      ]
+    }
+  },
+  "🔒/toggle-switch-track-border-color-checked-focus": {
+    "$value": "{action-selected-border-color-focus}",
+    "$type": "color",
+    "$description": "Used for the track border color of a checked toggle switch in the focus state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "STROKE_COLOR"
+      ]
+    }
+  },
+  "🔒/toggle-switch-track-border-color-checked-active": {
+    "$value": "{action-selected-border-color-active}",
+    "$type": "color",
+    "$description": "Used for the track border color of a checked toggle switch in the active state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "STROKE_COLOR"
+      ]
+    }
+  },
+  "🔒/toggle-switch-track-border-color-checked-disabled": {
+    "$value": "{🔒/toggle-switch-track-color-checked-disabled}",
+    "$type": "color",
+    "$description": "Used for the track border color of a disabled checked toggle switch, which matches the track color.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "STROKE_COLOR"
+      ]
+    }
+  },
+  "🔒/toggle-switch-track-border-color-loading": {
+    "$value": "{🔒/toggle-switch-track-color-loading}",
+    "$type": "color",
+    "$description": "Used for the track border color of a loading toggle switch, which matches the track color so the track reads as a single flat fill.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "STROKE_COLOR"
+      ]
+    }
+  },
   "🔒/toggle-switch-background-color-unchecked-default": {
-    "$value": "{control-indicator-color-selected}",
+    "$value": "{action-selected-background-color-default}",
     "$type": "color",
     "$description": "Used for the background color of the unchecked toggle switch thumb in the default state.",
     "$extensions": {
@@ -5206,8 +5349,19 @@
       ]
     }
   },
+  "🔒/toggle-switch-background-color-unchecked-disabled": {
+    "$value": "{action-disabled-foreground-color}",
+    "$type": "color",
+    "$description": "Used for the background color of the disabled unchecked toggle switch thumb.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "SHAPE_FILL",
+        "FRAME_FILL"
+      ]
+    }
+  },
   "🔒/toggle-switch-background-color-checked-default": {
-    "$value": "{action-strong-confirm-foreground-color-default}",
+    "$value": "{action-selected-foreground-color-default}",
     "$type": "color",
     "$description": "Used for the background color of the checked toggle switch thumb in the default state.",
     "$extensions": {
@@ -5218,7 +5372,7 @@
     }
   },
   "🔒/toggle-switch-background-color-checked-hover": {
-    "$value": "{action-strong-confirm-foreground-color-hover}",
+    "$value": "{action-selected-foreground-color-hover}",
     "$type": "color",
     "$description": "Used for the background color of the checked toggle switch thumb in the hover state.",
     "$extensions": {
@@ -5229,7 +5383,7 @@
     }
   },
   "🔒/toggle-switch-background-color-checked-focus": {
-    "$value": "{action-strong-confirm-foreground-color-focus}",
+    "$value": "{action-selected-foreground-color-focus}",
     "$type": "color",
     "$description": "Used for the background color of the checked toggle switch thumb in the focus state.",
     "$extensions": {
@@ -5240,7 +5394,7 @@
     }
   },
   "🔒/toggle-switch-background-color-checked-active": {
-    "$value": "{action-strong-confirm-foreground-color-active}",
+    "$value": "{action-selected-foreground-color-active}",
     "$type": "color",
     "$description": "Used for the background color of the checked toggle switch thumb in the active state.",
     "$extensions": {
@@ -5250,10 +5404,10 @@
       ]
     }
   },
-  "🔒/toggle-switch-background-color-disabled": {
-    "$value": "{action-disabled-foreground-color}",
+  "🔒/toggle-switch-background-color-checked-disabled": {
+    "$value": "{action-selected-foreground-color-default}",
     "$type": "color",
-    "$description": "Used for the background color of the toggle switch thumb in the disabled state.",
+    "$description": "Used for the background color of the disabled checked toggle switch thumb.",
     "$extensions": {
       "com.figma.scopes": [
         "SHAPE_FILL",
@@ -5262,7 +5416,7 @@
     }
   },
   "🔒/toggle-switch-icon-color-unchecked-default": {
-    "$value": "{action-strong-neutral-background-color-default}",
+    "$value": "{action-selected-foreground-color-default}",
     "$type": "color",
     "$description": "Used for the icon color of an unchecked toggle switch in the default state.",
     "$extensions": {
@@ -5272,7 +5426,7 @@
     }
   },
   "🔒/toggle-switch-icon-color-unchecked-hover": {
-    "$value": "{action-strong-neutral-background-color-hover}",
+    "$value": "{action-selected-foreground-color-hover}",
     "$type": "color",
     "$description": "Used for the icon color of an unchecked toggle switch in the hover state.",
     "$extensions": {
@@ -5282,7 +5436,7 @@
     }
   },
   "🔒/toggle-switch-icon-color-unchecked-focus": {
-    "$value": "{action-strong-neutral-background-color-focus}",
+    "$value": "{action-selected-foreground-color-focus}",
     "$type": "color",
     "$description": "Used for the icon color of an unchecked toggle switch in the focus state.",
     "$extensions": {
@@ -5292,7 +5446,7 @@
     }
   },
   "🔒/toggle-switch-icon-color-unchecked-active": {
-    "$value": "{action-strong-neutral-background-color-active}",
+    "$value": "{action-selected-foreground-color-active}",
     "$type": "color",
     "$description": "Used for the icon color of an unchecked toggle switch in the active state.",
     "$extensions": {
@@ -5302,7 +5456,7 @@
     }
   },
   "🔒/toggle-switch-icon-color-checked-default": {
-    "$value": "{action-strong-confirm-background-color-default}",
+    "$value": "{action-selected-background-color-default}",
     "$type": "color",
     "$description": "Used for the icon color of a checked toggle switch in the default state.",
     "$extensions": {
@@ -5312,7 +5466,7 @@
     }
   },
   "🔒/toggle-switch-icon-color-checked-hover": {
-    "$value": "{action-strong-confirm-background-color-hover}",
+    "$value": "{action-selected-background-color-hover}",
     "$type": "color",
     "$description": "Used for the icon color of a checked toggle switch in the hover state.",
     "$extensions": {
@@ -5322,7 +5476,7 @@
     }
   },
   "🔒/toggle-switch-icon-color-checked-focus": {
-    "$value": "{action-strong-confirm-background-color-focus}",
+    "$value": "{action-selected-background-color-focus}",
     "$type": "color",
     "$description": "Used for the icon color of a checked toggle switch in the focus state.",
     "$extensions": {
@@ -5332,7 +5486,7 @@
     }
   },
   "🔒/toggle-switch-icon-color-checked-active": {
-    "$value": "{action-strong-confirm-background-color-active}",
+    "$value": "{action-selected-background-color-active}",
     "$type": "color",
     "$description": "Used for the icon color of a checked toggle switch in the active state.",
     "$extensions": {
@@ -5534,6 +5688,17 @@
       ]
     }
   },
+  "action-selected-background-color-disabled": {
+    "$value": "{color-neutral-400}",
+    "$type": "color",
+    "$description": "Used for the background of a disabled action that stays selected. Sits between the disabled background and the enabled selected background so the selected state keeps 3:1 contrast against the page while still reading as disabled.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "FRAME_FILL",
+        "SHAPE_FILL"
+      ]
+    }
+  },
   "action-selected-border-color-default": {
     "$value": "{action-selected-background-color-default}",
     "$type": "color",

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

@@ -799,31 +799,47 @@ export const GL_SPINNER_SEGMENT_COLOR_LIGHT = '#bfbfc3';
 export const GL_TABLE_ROW_BACKGROUND_COLOR_HOVER = '#1d283e';
 export const GL_TABLE_SORTING_ICON_COLOR = '#fff';
 export const GL_TAB_SELECTED_INDICATOR_COLOR_DEFAULT = '#fff';
-export const GL_TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_DEFAULT = '#737278';
-export const GL_TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_HOVER = '#737278';
-export const GL_TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_FOCUS = '#737278';
-export const GL_TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_ACTIVE = '#737278';
+export const GL_TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_DEFAULT = 'rgba(5, 5, 6, 0.4)';
+export const GL_TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_HOVER = 'rgba(5, 5, 6, 0.4)';
+export const GL_TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_FOCUS = 'rgba(5, 5, 6, 0.4)';
+export const GL_TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_ACTIVE = 'rgba(255, 255, 255, 0.08)';
+export const GL_TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_DISABLED = 'rgba(5, 5, 6, 0.4)';
 export const GL_TOGGLE_SWITCH_TRACK_COLOR_CHECKED_DEFAULT = '#ececef';
 export const GL_TOGGLE_SWITCH_TRACK_COLOR_CHECKED_HOVER = '#fbfafd';
 export const GL_TOGGLE_SWITCH_TRACK_COLOR_CHECKED_FOCUS = '#fbfafd';
 export const GL_TOGGLE_SWITCH_TRACK_COLOR_CHECKED_ACTIVE = '#fff';
-export const GL_TOGGLE_SWITCH_BACKGROUND_COLOR_UNCHECKED_DEFAULT = '#18171d';
-export const GL_TOGGLE_SWITCH_BACKGROUND_COLOR_UNCHECKED_HOVER = '#18171d';
-export const GL_TOGGLE_SWITCH_BACKGROUND_COLOR_UNCHECKED_FOCUS = '#18171d';
-export const GL_TOGGLE_SWITCH_BACKGROUND_COLOR_UNCHECKED_ACTIVE = '#18171d';
+export const GL_TOGGLE_SWITCH_TRACK_COLOR_CHECKED_DISABLED = '#737278';
+export const GL_TOGGLE_SWITCH_TRACK_COLOR_LOADING = '#28272d';
+export const GL_TOGGLE_SWITCH_TRACK_BORDER_COLOR_UNCHECKED_DEFAULT = '#737278';
+export const GL_TOGGLE_SWITCH_TRACK_BORDER_COLOR_UNCHECKED_HOVER = '#a4a3a8';
+export const GL_TOGGLE_SWITCH_TRACK_BORDER_COLOR_UNCHECKED_FOCUS = '#a4a3a8';
+export const GL_TOGGLE_SWITCH_TRACK_BORDER_COLOR_UNCHECKED_ACTIVE = '#a4a3a8';
+export const GL_TOGGLE_SWITCH_TRACK_BORDER_COLOR_UNCHECKED_DISABLED = '#3a383f';
+export const GL_TOGGLE_SWITCH_TRACK_BORDER_COLOR_CHECKED_DEFAULT = '#ececef';
+export const GL_TOGGLE_SWITCH_TRACK_BORDER_COLOR_CHECKED_HOVER = '#fbfafd';
+export const GL_TOGGLE_SWITCH_TRACK_BORDER_COLOR_CHECKED_FOCUS = '#fbfafd';
+export const GL_TOGGLE_SWITCH_TRACK_BORDER_COLOR_CHECKED_ACTIVE = '#fff';
+export const GL_TOGGLE_SWITCH_TRACK_BORDER_COLOR_CHECKED_DISABLED = '#737278';
+export const GL_TOGGLE_SWITCH_TRACK_BORDER_COLOR_LOADING = '#28272d';
+export const GL_TOGGLE_SWITCH_BACKGROUND_COLOR_UNCHECKED_DEFAULT = '#ececef';
+export const GL_TOGGLE_SWITCH_BACKGROUND_COLOR_UNCHECKED_HOVER = '#ececef';
+export const GL_TOGGLE_SWITCH_BACKGROUND_COLOR_UNCHECKED_FOCUS = '#ececef';
+export const GL_TOGGLE_SWITCH_BACKGROUND_COLOR_UNCHECKED_ACTIVE = '#ececef';
+export const GL_TOGGLE_SWITCH_BACKGROUND_COLOR_UNCHECKED_DISABLED = '#737278';
 export const GL_TOGGLE_SWITCH_BACKGROUND_COLOR_CHECKED_DEFAULT = '#18171d';
 export const GL_TOGGLE_SWITCH_BACKGROUND_COLOR_CHECKED_HOVER = '#18171d';
 export const GL_TOGGLE_SWITCH_BACKGROUND_COLOR_CHECKED_FOCUS = '#18171d';
 export const GL_TOGGLE_SWITCH_BACKGROUND_COLOR_CHECKED_ACTIVE = '#18171d';
+export const GL_TOGGLE_SWITCH_BACKGROUND_COLOR_CHECKED_DISABLED = '#18171d';
 export const GL_TOGGLE_SWITCH_BACKGROUND_COLOR_DISABLED = '#737278';
-export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_DEFAULT = '#4c4b51';
-export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_HOVER = '#626168';
-export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_FOCUS = '#626168';
-export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_ACTIVE = '#737278';
-export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_DEFAULT = '#63a6e9';
-export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_HOVER = '#9dc7f1';
-export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_FOCUS = '#9dc7f1';
-export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_ACTIVE = '#428fdc';
+export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_DEFAULT = '#18171d';
+export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_HOVER = '#18171d';
+export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_FOCUS = '#18171d';
+export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_ACTIVE = '#18171d';
+export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_DEFAULT = '#ececef';
+export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_HOVER = '#fbfafd';
+export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_FOCUS = '#fbfafd';
+export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_ACTIVE = '#fff';
 export const GL_TOGGLE_SWITCH_ICON_COLOR_DISABLED = '#28272d';
 export const GL_TOKEN_SELECTOR_TOKEN_CONTAINER_TOKEN_BACKGROUND_COLOR_FOCUS = '#626168';
 export const GL_TOKEN_BORDER_RADIUS = '0.25rem';
@@ -990,6 +1006,7 @@ export const GL_ACTION_SELECTED_BACKGROUND_COLOR_DEFAULT = '#ececef';
 export const GL_ACTION_SELECTED_BACKGROUND_COLOR_HOVER = '#fbfafd';
 export const GL_ACTION_SELECTED_BACKGROUND_COLOR_FOCUS = '#fbfafd';
 export const GL_ACTION_SELECTED_BACKGROUND_COLOR_ACTIVE = '#fff';
+export const GL_ACTION_SELECTED_BACKGROUND_COLOR_DISABLED = '#737278';
 export const GL_ACTION_SELECTED_BORDER_COLOR_DEFAULT = '#ececef';
 export const GL_ACTION_SELECTED_BORDER_COLOR_HOVER = '#fbfafd';
 export const GL_ACTION_SELECTED_BORDER_COLOR_FOCUS = '#fbfafd';

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

@@ -799,31 +799,47 @@ export const GL_SPINNER_SEGMENT_COLOR_LIGHT = '#bfbfc3';
 export const GL_TABLE_ROW_BACKGROUND_COLOR_HOVER = '#e9f3fc';
 export const GL_TABLE_SORTING_ICON_COLOR = '#18171d';
 export const GL_TAB_SELECTED_INDICATOR_COLOR_DEFAULT = '#050506';
-export const GL_TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_DEFAULT = '#89888d';
-export const GL_TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_HOVER = '#89888d';
-export const GL_TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_FOCUS = '#89888d';
-export const GL_TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_ACTIVE = '#89888d';
+export const GL_TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_DEFAULT = '#fff';
+export const GL_TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_HOVER = '#fff';
+export const GL_TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_FOCUS = '#fff';
+export const GL_TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_ACTIVE = 'rgba(5, 5, 6, 0.16)';
+export const GL_TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_DISABLED = '#fff';
 export const GL_TOGGLE_SWITCH_TRACK_COLOR_CHECKED_DEFAULT = '#3a383f';
 export const GL_TOGGLE_SWITCH_TRACK_COLOR_CHECKED_HOVER = '#18171d';
 export const GL_TOGGLE_SWITCH_TRACK_COLOR_CHECKED_FOCUS = '#18171d';
 export const GL_TOGGLE_SWITCH_TRACK_COLOR_CHECKED_ACTIVE = '#050506';
-export const GL_TOGGLE_SWITCH_BACKGROUND_COLOR_UNCHECKED_DEFAULT = '#fff';
-export const GL_TOGGLE_SWITCH_BACKGROUND_COLOR_UNCHECKED_HOVER = '#fff';
-export const GL_TOGGLE_SWITCH_BACKGROUND_COLOR_UNCHECKED_FOCUS = '#fff';
-export const GL_TOGGLE_SWITCH_BACKGROUND_COLOR_UNCHECKED_ACTIVE = '#fff';
+export const GL_TOGGLE_SWITCH_TRACK_COLOR_CHECKED_DISABLED = '#89888d';
+export const GL_TOGGLE_SWITCH_TRACK_COLOR_LOADING = '#ececef';
+export const GL_TOGGLE_SWITCH_TRACK_BORDER_COLOR_UNCHECKED_DEFAULT = '#89888d';
+export const GL_TOGGLE_SWITCH_TRACK_BORDER_COLOR_UNCHECKED_HOVER = '#626168';
+export const GL_TOGGLE_SWITCH_TRACK_BORDER_COLOR_UNCHECKED_FOCUS = '#626168';
+export const GL_TOGGLE_SWITCH_TRACK_BORDER_COLOR_UNCHECKED_ACTIVE = '#626168';
+export const GL_TOGGLE_SWITCH_TRACK_BORDER_COLOR_UNCHECKED_DISABLED = '#dcdcde';
+export const GL_TOGGLE_SWITCH_TRACK_BORDER_COLOR_CHECKED_DEFAULT = '#3a383f';
+export const GL_TOGGLE_SWITCH_TRACK_BORDER_COLOR_CHECKED_HOVER = '#18171d';
+export const GL_TOGGLE_SWITCH_TRACK_BORDER_COLOR_CHECKED_FOCUS = '#18171d';
+export const GL_TOGGLE_SWITCH_TRACK_BORDER_COLOR_CHECKED_ACTIVE = '#050506';
+export const GL_TOGGLE_SWITCH_TRACK_BORDER_COLOR_CHECKED_DISABLED = '#89888d';
+export const GL_TOGGLE_SWITCH_TRACK_BORDER_COLOR_LOADING = '#ececef';
+export const GL_TOGGLE_SWITCH_BACKGROUND_COLOR_UNCHECKED_DEFAULT = '#3a383f';
+export const GL_TOGGLE_SWITCH_BACKGROUND_COLOR_UNCHECKED_HOVER = '#3a383f';
+export const GL_TOGGLE_SWITCH_BACKGROUND_COLOR_UNCHECKED_FOCUS = '#3a383f';
+export const GL_TOGGLE_SWITCH_BACKGROUND_COLOR_UNCHECKED_ACTIVE = '#3a383f';
+export const GL_TOGGLE_SWITCH_BACKGROUND_COLOR_UNCHECKED_DISABLED = '#89888d';
 export const GL_TOGGLE_SWITCH_BACKGROUND_COLOR_CHECKED_DEFAULT = '#fff';
 export const GL_TOGGLE_SWITCH_BACKGROUND_COLOR_CHECKED_HOVER = '#fff';
 export const GL_TOGGLE_SWITCH_BACKGROUND_COLOR_CHECKED_FOCUS = '#fff';
 export const GL_TOGGLE_SWITCH_BACKGROUND_COLOR_CHECKED_ACTIVE = '#fff';
+export const GL_TOGGLE_SWITCH_BACKGROUND_COLOR_CHECKED_DISABLED = '#fff';
 export const GL_TOGGLE_SWITCH_BACKGROUND_COLOR_DISABLED = '#89888d';
-export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_DEFAULT = '#626168';
-export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_HOVER = '#4c4b51';
-export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_FOCUS = '#4c4b51';
-export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_ACTIVE = '#3a383f';
-export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_DEFAULT = '#1f75cb';
-export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_HOVER = '#2f68b4';
-export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_FOCUS = '#2f68b4';
-export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_ACTIVE = '#2f5ca0';
+export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_DEFAULT = '#fff';
+export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_HOVER = '#fff';
+export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_FOCUS = '#fff';
+export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_ACTIVE = '#fff';
+export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_DEFAULT = '#3a383f';
+export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_HOVER = '#18171d';
+export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_FOCUS = '#18171d';
+export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_ACTIVE = '#050506';
 export const GL_TOGGLE_SWITCH_ICON_COLOR_DISABLED = '#ececef';
 export const GL_TOKEN_SELECTOR_TOKEN_CONTAINER_TOKEN_BACKGROUND_COLOR_FOCUS = '#a4a3a8';
 export const GL_TOKEN_BORDER_RADIUS = '0.25rem';
@@ -990,6 +1006,7 @@ export const GL_ACTION_SELECTED_BACKGROUND_COLOR_DEFAULT = '#3a383f';
 export const GL_ACTION_SELECTED_BACKGROUND_COLOR_HOVER = '#18171d';
 export const GL_ACTION_SELECTED_BACKGROUND_COLOR_FOCUS = '#18171d';
 export const GL_ACTION_SELECTED_BACKGROUND_COLOR_ACTIVE = '#050506';
+export const GL_ACTION_SELECTED_BACKGROUND_COLOR_DISABLED = '#89888d';
 export const GL_ACTION_SELECTED_BORDER_COLOR_DEFAULT = '#3a383f';
 export const GL_ACTION_SELECTED_BORDER_COLOR_HOVER = '#18171d';
 export const GL_ACTION_SELECTED_BORDER_COLOR_FOCUS = '#18171d';