@gitlab/ui 134.8.0 → 135.0.0

package/src/tokens/build/json/tokens.json

@@ -23818,7 +23818,8 @@
               "$description": "Used for the track color of an unchecked toggle switch in the default state.",
               "$extensions": {
                 "com.figma.scopes": [
-                  "SHAPE_FILL"
+                  "SHAPE_FILL",
+                  "FRAME_FILL"
                 ]
               },
               "filePath": "src/tokens/contextual/toggle.tokens.json",
@@ -23829,7 +23830,8 @@
                 "$description": "Used for the track color of an unchecked toggle switch in the default state.",
                 "$extensions": {
                   "com.figma.scopes": [
-                    "SHAPE_FILL"
+                    "SHAPE_FILL",
+                    "FRAME_FILL"
                   ]
                 },
                 "key": "{toggle.switch.track.color.unchecked.default}"
@@ -23847,23 +23849,25 @@
             },
             "hover": {
               "key": "{toggle.switch.track.color.unchecked.hover}",
-              "$value": "#626168",
+              "$value": "#89888d",
               "$type": "color",
               "$description": "Used for the track color of an unchecked toggle switch in the hover state.",
               "$extensions": {
                 "com.figma.scopes": [
-                  "SHAPE_FILL"
+                  "SHAPE_FILL",
+                  "FRAME_FILL"
                 ]
               },
               "filePath": "src/tokens/contextual/toggle.tokens.json",
               "isSource": true,
               "original": {
-                "$value": "{control.border.color.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.",
                 "$extensions": {
                   "com.figma.scopes": [
-                    "SHAPE_FILL"
+                    "SHAPE_FILL",
+                    "FRAME_FILL"
                   ]
                 },
                 "key": "{toggle.switch.track.color.unchecked.hover}"
@@ -23881,23 +23885,25 @@
             },
             "focus": {
               "key": "{toggle.switch.track.color.unchecked.focus}",
-              "$value": "#28272d",
+              "$value": "#89888d",
               "$type": "color",
               "$description": "Used for the track color of an unchecked toggle switch in the focus state.",
               "$extensions": {
                 "com.figma.scopes": [
-                  "SHAPE_FILL"
+                  "SHAPE_FILL",
+                  "FRAME_FILL"
                 ]
               },
               "filePath": "src/tokens/contextual/toggle.tokens.json",
               "isSource": true,
               "original": {
-                "$value": "{control.border.color.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.",
                 "$extensions": {
                   "com.figma.scopes": [
-                    "SHAPE_FILL"
+                    "SHAPE_FILL",
+                    "FRAME_FILL"
                   ]
                 },
                 "key": "{toggle.switch.track.color.unchecked.focus}"
@@ -23915,23 +23921,25 @@
             },
             "active": {
               "key": "{toggle.switch.track.color.unchecked.active}",
-              "$value": "#28272d",
+              "$value": "#89888d",
               "$type": "color",
               "$description": "Used for the track color of an unchecked toggle switch in the active state.",
               "$extensions": {
                 "com.figma.scopes": [
-                  "SHAPE_FILL"
+                  "SHAPE_FILL",
+                  "FRAME_FILL"
                 ]
               },
               "filePath": "src/tokens/contextual/toggle.tokens.json",
               "isSource": true,
               "original": {
-                "$value": "{control.border.color.focus}",
+                "$value": "{toggle.switch.track.color.unchecked.focus}",
                 "$type": "color",
                 "$description": "Used for the track color of an unchecked toggle switch in the active state.",
                 "$extensions": {
                   "com.figma.scopes": [
-                    "SHAPE_FILL"
+                    "SHAPE_FILL",
+                    "FRAME_FILL"
                   ]
                 },
                 "key": "{toggle.switch.track.color.unchecked.active}"
@@ -23956,7 +23964,8 @@
               "$description": "Used for the track color of a checked toggle switch in the default state.",
               "$extensions": {
                 "com.figma.scopes": [
-                  "SHAPE_FILL"
+                  "SHAPE_FILL",
+                  "FRAME_FILL"
                 ]
               },
               "filePath": "src/tokens/contextual/toggle.tokens.json",
@@ -23967,7 +23976,8 @@
                 "$description": "Used for the track color of a checked toggle switch in the default state.",
                 "$extensions": {
                   "com.figma.scopes": [
-                    "SHAPE_FILL"
+                    "SHAPE_FILL",
+                    "FRAME_FILL"
                   ]
                 },
                 "key": "{toggle.switch.track.color.checked.default}"
@@ -23990,7 +24000,8 @@
               "$description": "Used for the track color of a checked toggle switch in the hover state.",
               "$extensions": {
                 "com.figma.scopes": [
-                  "SHAPE_FILL"
+                  "SHAPE_FILL",
+                  "FRAME_FILL"
                 ]
               },
               "filePath": "src/tokens/contextual/toggle.tokens.json",
@@ -24001,7 +24012,8 @@
                 "$description": "Used for the track color of a checked toggle switch in the hover state.",
                 "$extensions": {
                   "com.figma.scopes": [
-                    "SHAPE_FILL"
+                    "SHAPE_FILL",
+                    "FRAME_FILL"
                   ]
                 },
                 "key": "{toggle.switch.track.color.checked.hover}"
@@ -24024,7 +24036,8 @@
               "$description": "Used for the track color of a checked toggle switch in the focus state.",
               "$extensions": {
                 "com.figma.scopes": [
-                  "SHAPE_FILL"
+                  "SHAPE_FILL",
+                  "FRAME_FILL"
                 ]
               },
               "filePath": "src/tokens/contextual/toggle.tokens.json",
@@ -24035,7 +24048,8 @@
                 "$description": "Used for the track color of a checked toggle switch in the focus state.",
                 "$extensions": {
                   "com.figma.scopes": [
-                    "SHAPE_FILL"
+                    "SHAPE_FILL",
+                    "FRAME_FILL"
                   ]
                 },
                 "key": "{toggle.switch.track.color.checked.focus}"
@@ -24058,7 +24072,8 @@
               "$description": "Used for the track color of a checked toggle switch in the active state.",
               "$extensions": {
                 "com.figma.scopes": [
-                  "SHAPE_FILL"
+                  "SHAPE_FILL",
+                  "FRAME_FILL"
                 ]
               },
               "filePath": "src/tokens/contextual/toggle.tokens.json",
@@ -24069,7 +24084,8 @@
                 "$description": "Used for the track color of a checked toggle switch in the active state.",
                 "$extensions": {
                   "com.figma.scopes": [
-                    "SHAPE_FILL"
+                    "SHAPE_FILL",
+                    "FRAME_FILL"
                   ]
                 },
                 "key": "{toggle.switch.track.color.checked.active}"
@@ -24098,7 +24114,8 @@
               "$description": "Used for the background color of the unchecked toggle switch thumb in the default state.",
               "$extensions": {
                 "com.figma.scopes": [
-                  "SHAPE_FILL"
+                  "SHAPE_FILL",
+                  "FRAME_FILL"
                 ]
               },
               "filePath": "src/tokens/contextual/toggle.tokens.json",
@@ -24109,7 +24126,8 @@
                 "$description": "Used for the background color of the unchecked toggle switch thumb in the default state.",
                 "$extensions": {
                   "com.figma.scopes": [
-                    "SHAPE_FILL"
+                    "SHAPE_FILL",
+                    "FRAME_FILL"
                   ]
                 },
                 "key": "{toggle.switch.background.color.unchecked.default}"
@@ -24132,7 +24150,8 @@
               "$description": "Used for the background color of the unchecked toggle switch thumb in the hover state.",
               "$extensions": {
                 "com.figma.scopes": [
-                  "SHAPE_FILL"
+                  "SHAPE_FILL",
+                  "FRAME_FILL"
                 ]
               },
               "filePath": "src/tokens/contextual/toggle.tokens.json",
@@ -24143,7 +24162,8 @@
                 "$description": "Used for the background color of the unchecked toggle switch thumb in the hover state.",
                 "$extensions": {
                   "com.figma.scopes": [
-                    "SHAPE_FILL"
+                    "SHAPE_FILL",
+                    "FRAME_FILL"
                   ]
                 },
                 "key": "{toggle.switch.background.color.unchecked.hover}"
@@ -24166,7 +24186,8 @@
               "$description": "Used for the background color of the unchecked toggle switch thumb in the focus state.",
               "$extensions": {
                 "com.figma.scopes": [
-                  "SHAPE_FILL"
+                  "SHAPE_FILL",
+                  "FRAME_FILL"
                 ]
               },
               "filePath": "src/tokens/contextual/toggle.tokens.json",
@@ -24177,7 +24198,8 @@
                 "$description": "Used for the background color of the unchecked toggle switch thumb in the focus state.",
                 "$extensions": {
                   "com.figma.scopes": [
-                    "SHAPE_FILL"
+                    "SHAPE_FILL",
+                    "FRAME_FILL"
                   ]
                 },
                 "key": "{toggle.switch.background.color.unchecked.focus}"
@@ -24200,7 +24222,8 @@
               "$description": "Used for the background color of the unchecked toggle switch thumb in the active state.",
               "$extensions": {
                 "com.figma.scopes": [
-                  "SHAPE_FILL"
+                  "SHAPE_FILL",
+                  "FRAME_FILL"
                 ]
               },
               "filePath": "src/tokens/contextual/toggle.tokens.json",
@@ -24211,7 +24234,8 @@
                 "$description": "Used for the background color of the unchecked toggle switch thumb in the active state.",
                 "$extensions": {
                   "com.figma.scopes": [
-                    "SHAPE_FILL"
+                    "SHAPE_FILL",
+                    "FRAME_FILL"
                   ]
                 },
                 "key": "{toggle.switch.background.color.unchecked.active}"
@@ -24236,7 +24260,8 @@
               "$description": "Used for the background color of the checked toggle switch thumb in the default state.",
               "$extensions": {
                 "com.figma.scopes": [
-                  "SHAPE_FILL"
+                  "SHAPE_FILL",
+                  "FRAME_FILL"
                 ]
               },
               "filePath": "src/tokens/contextual/toggle.tokens.json",
@@ -24247,7 +24272,8 @@
                 "$description": "Used for the background color of the checked toggle switch thumb in the default state.",
                 "$extensions": {
                   "com.figma.scopes": [
-                    "SHAPE_FILL"
+                    "SHAPE_FILL",
+                    "FRAME_FILL"
                   ]
                 },
                 "key": "{toggle.switch.background.color.checked.default}"
@@ -24270,7 +24296,8 @@
               "$description": "Used for the background color of the checked toggle switch thumb in the hover state.",
               "$extensions": {
                 "com.figma.scopes": [
-                  "SHAPE_FILL"
+                  "SHAPE_FILL",
+                  "FRAME_FILL"
                 ]
               },
               "filePath": "src/tokens/contextual/toggle.tokens.json",
@@ -24281,7 +24308,8 @@
                 "$description": "Used for the background color of the checked toggle switch thumb in the hover state.",
                 "$extensions": {
                   "com.figma.scopes": [
-                    "SHAPE_FILL"
+                    "SHAPE_FILL",
+                    "FRAME_FILL"
                   ]
                 },
                 "key": "{toggle.switch.background.color.checked.hover}"
@@ -24304,7 +24332,8 @@
               "$description": "Used for the background color of the checked toggle switch thumb in the focus state.",
               "$extensions": {
                 "com.figma.scopes": [
-                  "SHAPE_FILL"
+                  "SHAPE_FILL",
+                  "FRAME_FILL"
                 ]
               },
               "filePath": "src/tokens/contextual/toggle.tokens.json",
@@ -24315,7 +24344,8 @@
                 "$description": "Used for the background color of the checked toggle switch thumb in the focus state.",
                 "$extensions": {
                   "com.figma.scopes": [
-                    "SHAPE_FILL"
+                    "SHAPE_FILL",
+                    "FRAME_FILL"
                   ]
                 },
                 "key": "{toggle.switch.background.color.checked.focus}"
@@ -24338,7 +24368,8 @@
               "$description": "Used for the background color of the checked toggle switch thumb in the active state.",
               "$extensions": {
                 "com.figma.scopes": [
-                  "SHAPE_FILL"
+                  "SHAPE_FILL",
+                  "FRAME_FILL"
                 ]
               },
               "filePath": "src/tokens/contextual/toggle.tokens.json",
@@ -24349,7 +24380,8 @@
                 "$description": "Used for the background color of the checked toggle switch thumb in the active state.",
                 "$extensions": {
                   "com.figma.scopes": [
-                    "SHAPE_FILL"
+                    "SHAPE_FILL",
+                    "FRAME_FILL"
                   ]
                 },
                 "key": "{toggle.switch.background.color.checked.active}"
@@ -24373,7 +24405,8 @@
             "$description": "Used for the background color of the toggle switch thumb in the disabled state.",
             "$extensions": {
               "com.figma.scopes": [
-                "SHAPE_FILL"
+                "SHAPE_FILL",
+                "FRAME_FILL"
               ]
             },
             "filePath": "src/tokens/contextual/toggle.tokens.json",
@@ -24384,7 +24417,8 @@
               "$description": "Used for the background color of the toggle switch thumb in the disabled state.",
               "$extensions": {
                 "com.figma.scopes": [
-                  "SHAPE_FILL"
+                  "SHAPE_FILL",
+                  "FRAME_FILL"
                 ]
               },
               "key": "{toggle.switch.background.color.disabled}"

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

@@ -1021,9 +1021,6 @@ $gl-progress-bar-indicator-color-danger: $gl-status-danger-icon-color; // Used f
 $gl-table-row-background-color-hover: $gl-highlight-target-background-color; // Used for the background of a table row in hover state.
 $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
 $gl-toggle-switch-track-color-unchecked-default: $gl-control-border-color-default; // Used for the track color of an unchecked toggle switch in the default state.
-$gl-toggle-switch-track-color-unchecked-hover: $gl-control-border-color-hover; // Used for the track color of an unchecked toggle switch in the hover state.
-$gl-toggle-switch-track-color-unchecked-focus: $gl-control-border-color-focus; // Used for the track color of an unchecked toggle switch in the focus state.
-$gl-toggle-switch-track-color-unchecked-active: $gl-control-border-color-focus; // Used for the track color of an unchecked toggle switch in the active state.
 $gl-toggle-switch-track-color-checked-focus: $gl-toggle-switch-track-color-checked-hover; // Used for the track color of a checked toggle switch in the focus state.
 $gl-toggle-switch-background-color-unchecked-default: $gl-control-indicator-color-selected; // Used for the background color of the unchecked toggle switch thumb in the default state.
 $gl-toggle-switch-background-color-checked-default: $gl-action-strong-confirm-foreground-color-default; // Used for the background color of the checked toggle switch thumb in the default state.
@@ -1228,6 +1225,7 @@ $gl-nav-item-background-color-focus: $gl-action-neutral-background-color-focus;
 $gl-nav-item-selected-foreground-color-hover: $gl-action-selected-foreground-color-hover; // Used for the foreground of a selected navigation item in the hover state.
 $gl-nav-item-selected-background-color-focus: $gl-action-selected-background-color-focus; // Used for the background of a selected navigation item in the focus state.
 $gl-tab-selected-indicator-color-default: $gl-action-selected-border-color-active; // Used for the selected indicator of a tab.
+$gl-toggle-switch-track-color-unchecked-hover: $gl-toggle-switch-track-color-unchecked-default; // Used for the track color of an unchecked toggle switch in the hover state.
 $gl-toggle-switch-background-color-unchecked-hover: $gl-toggle-switch-background-color-unchecked-default; // Used for the background color of the unchecked toggle switch thumb in the hover state.
 $gl-toggle-switch-background-color-unchecked-focus: $gl-toggle-switch-background-color-unchecked-default; // Used for the background color of the unchecked toggle switch thumb in the focus state.
 $gl-toggle-switch-background-color-unchecked-active: $gl-toggle-switch-background-color-unchecked-default; // Used for the background color of the unchecked toggle switch thumb in the active state.
@@ -1243,10 +1241,12 @@ $gl-action-strong-neutral-border-color-focus: $gl-action-strong-neutral-border-c
 $gl-control-border-color-selected-focus: $gl-control-background-color-selected-focus; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
 $gl-button-confirm-primary-foreground-color-active: $gl-button-confirm-primary-foreground-color-focus; // Used for the foreground of a confirm (positive) primary button in the active state.
 $gl-nav-item-selected-foreground-color-focus: $gl-action-selected-foreground-color-focus; // Used for the foreground of a selected navigation item in the focus state.
+$gl-toggle-switch-track-color-unchecked-focus: $gl-toggle-switch-track-color-unchecked-hover; // Used for the track color of an unchecked toggle switch in the focus state.
 $gl-toggle-switch-background-color-checked-focus: $gl-action-strong-confirm-foreground-color-focus; // Used for the background color of the checked toggle switch thumb in the focus state.
 $gl-action-selected-foreground-color-active: $gl-action-selected-foreground-color-focus; // Used for the foreground of a selected action in the active state.
 $gl-action-strong-confirm-foreground-color-active: $gl-action-strong-confirm-foreground-color-focus; // Used for the foreground of a strong confirm action in the active state.
 $gl-action-strong-confirm-border-color-active: $gl-action-strong-confirm-border-color-focus; // Used for the border of a strong confirm action in the active state.
 $gl-action-strong-neutral-border-color-active: $gl-action-strong-neutral-border-color-focus; // Used for the border of a strong neutral action in the active state.
 $gl-nav-item-selected-foreground-color-active: $gl-action-selected-foreground-color-active; // Used for the foreground of a selected navigation item in the active state.
+$gl-toggle-switch-track-color-unchecked-active: $gl-toggle-switch-track-color-unchecked-focus; // Used for the track color of an unchecked toggle switch in the active state.
 $gl-toggle-switch-background-color-checked-active: $gl-action-strong-confirm-foreground-color-active; // Used for the background color of the checked toggle switch thumb in the active state.

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

@@ -1014,9 +1014,6 @@ $gl-progress-bar-indicator-color-danger: $gl-status-danger-icon-color; // Used f
 $gl-table-row-background-color-hover: $gl-highlight-target-background-color; // Used for the background of a table row in hover state.
 $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
 $gl-toggle-switch-track-color-unchecked-default: $gl-control-border-color-default; // Used for the track color of an unchecked toggle switch in the default state.
-$gl-toggle-switch-track-color-unchecked-hover: $gl-control-border-color-hover; // Used for the track color of an unchecked toggle switch in the hover state.
-$gl-toggle-switch-track-color-unchecked-focus: $gl-control-border-color-focus; // Used for the track color of an unchecked toggle switch in the focus state.
-$gl-toggle-switch-track-color-unchecked-active: $gl-control-border-color-focus; // Used for the track color of an unchecked toggle switch in the active state.
 $gl-toggle-switch-track-color-checked-focus: $gl-toggle-switch-track-color-checked-hover; // Used for the track color of a checked toggle switch in the focus state.
 $gl-toggle-switch-background-color-unchecked-default: $gl-control-indicator-color-selected; // Used for the background color of the unchecked toggle switch thumb in the default state.
 $gl-toggle-switch-background-color-checked-default: $gl-action-strong-confirm-foreground-color-default; // Used for the background color of the checked toggle switch thumb in the default state.
@@ -1226,6 +1223,7 @@ $gl-nav-item-background-color-focus: $gl-action-neutral-background-color-focus;
 $gl-nav-item-selected-foreground-color-hover: $gl-action-selected-foreground-color-hover; // Used for the foreground of a selected navigation item in the hover state.
 $gl-nav-item-selected-background-color-focus: $gl-action-selected-background-color-focus; // Used for the background of a selected navigation item in the focus state.
 $gl-tab-selected-indicator-color-default: $gl-action-selected-border-color-active; // Used for the selected indicator of a tab.
+$gl-toggle-switch-track-color-unchecked-hover: $gl-toggle-switch-track-color-unchecked-default; // Used for the track color of an unchecked toggle switch in the hover state.
 $gl-toggle-switch-background-color-unchecked-hover: $gl-toggle-switch-background-color-unchecked-default; // Used for the background color of the unchecked toggle switch thumb in the hover state.
 $gl-toggle-switch-background-color-unchecked-focus: $gl-toggle-switch-background-color-unchecked-default; // Used for the background color of the unchecked toggle switch thumb in the focus state.
 $gl-toggle-switch-background-color-unchecked-active: $gl-toggle-switch-background-color-unchecked-default; // Used for the background color of the unchecked toggle switch thumb in the active state.
@@ -1242,6 +1240,7 @@ $gl-action-strong-neutral-border-color-focus: $gl-action-strong-neutral-border-c
 $gl-control-border-color-selected-focus: $gl-control-background-color-selected-focus; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
 $gl-button-confirm-primary-foreground-color-active: $gl-button-confirm-primary-foreground-color-focus; // Used for the foreground of a confirm (positive) primary button in the active state.
 $gl-nav-item-selected-foreground-color-focus: $gl-action-selected-foreground-color-focus; // Used for the foreground of a selected navigation item in the focus state.
+$gl-toggle-switch-track-color-unchecked-focus: $gl-toggle-switch-track-color-unchecked-hover; // Used for the track color of an unchecked toggle switch in the focus state.
 $gl-toggle-switch-background-color-checked-focus: $gl-action-strong-confirm-foreground-color-focus; // Used for the background color of the checked toggle switch thumb in the focus state.
 $gl-action-selected-foreground-color-active: $gl-action-selected-foreground-color-focus; // Used for the foreground of a selected action in the active state.
 $gl-action-strong-confirm-foreground-color-active: $gl-action-strong-confirm-foreground-color-focus; // Used for the foreground of a strong confirm action in the active state.
@@ -1249,4 +1248,5 @@ $gl-action-strong-confirm-border-color-active: $gl-action-strong-confirm-border-
 $gl-action-strong-neutral-foreground-color-active: $gl-action-strong-neutral-foreground-color-focus; // Used for the foreground of a strong neutral action in the active state.
 $gl-action-strong-neutral-border-color-active: $gl-action-strong-neutral-border-color-focus; // Used for the border of a strong neutral action in the active state.
 $gl-nav-item-selected-foreground-color-active: $gl-action-selected-foreground-color-active; // Used for the foreground of a selected navigation item in the active state.
+$gl-toggle-switch-track-color-unchecked-active: $gl-toggle-switch-track-color-unchecked-focus; // Used for the track color of an unchecked toggle switch in the active state.
 $gl-toggle-switch-background-color-checked-active: $gl-action-strong-confirm-foreground-color-active; // Used for the background color of the checked toggle switch thumb in the active state.

package/src/tokens/contextual/toggle.tokens.json

@@ -10,37 +10,41 @@
               "$description": "Used for the track color of an unchecked toggle switch in the default state.",
               "$extensions": {
                 "com.figma.scopes": [
-                  "SHAPE_FILL"
+                  "SHAPE_FILL",
+                  "FRAME_FILL"
                 ]
               }
             },
             "hover": {
-              "$value": "{control.border.color.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.",
               "$extensions": {
                 "com.figma.scopes": [
-                  "SHAPE_FILL"
+                  "SHAPE_FILL",
+                  "FRAME_FILL"
                 ]
               }
             },
             "focus": {
-              "$value": "{control.border.color.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.",
               "$extensions": {
                 "com.figma.scopes": [
-                  "SHAPE_FILL"
+                  "SHAPE_FILL",
+                  "FRAME_FILL"
                 ]
               }
             },
             "active": {
-              "$value": "{control.border.color.focus}",
+              "$value": "{toggle.switch.track.color.unchecked.focus}",
               "$type": "color",
               "$description": "Used for the track color of an unchecked toggle switch in the active state.",
               "$extensions": {
                 "com.figma.scopes": [
-                  "SHAPE_FILL"
+                  "SHAPE_FILL",
+                  "FRAME_FILL"
                 ]
               }
             }
@@ -55,7 +59,8 @@
               "$description": "Used for the track color of a checked toggle switch in the default state.",
               "$extensions": {
                 "com.figma.scopes": [
-                  "SHAPE_FILL"
+                  "SHAPE_FILL",
+                  "FRAME_FILL"
                 ]
               }
             },
@@ -68,7 +73,8 @@
               "$description": "Used for the track color of a checked toggle switch in the hover state.",
               "$extensions": {
                 "com.figma.scopes": [
-                  "SHAPE_FILL"
+                  "SHAPE_FILL",
+                  "FRAME_FILL"
                 ]
               }
             },
@@ -78,7 +84,8 @@
               "$description": "Used for the track color of a checked toggle switch in the focus state.",
               "$extensions": {
                 "com.figma.scopes": [
-                  "SHAPE_FILL"
+                  "SHAPE_FILL",
+                  "FRAME_FILL"
                 ]
               }
             },
@@ -91,7 +98,8 @@
               "$description": "Used for the track color of a checked toggle switch in the active state.",
               "$extensions": {
                 "com.figma.scopes": [
-                  "SHAPE_FILL"
+                  "SHAPE_FILL",
+                  "FRAME_FILL"
                 ]
               }
             }
@@ -107,7 +115,8 @@
               "$description": "Used for the background color of the unchecked toggle switch thumb in the default state.",
               "$extensions": {
                 "com.figma.scopes": [
-                  "SHAPE_FILL"
+                  "SHAPE_FILL",
+                  "FRAME_FILL"
                 ]
               }
             },
@@ -117,7 +126,8 @@
               "$description": "Used for the background color of the unchecked toggle switch thumb in the hover state.",
               "$extensions": {
                 "com.figma.scopes": [
-                  "SHAPE_FILL"
+                  "SHAPE_FILL",
+                  "FRAME_FILL"
                 ]
               }
             },
@@ -127,7 +137,8 @@
               "$description": "Used for the background color of the unchecked toggle switch thumb in the focus state.",
               "$extensions": {
                 "com.figma.scopes": [
-                  "SHAPE_FILL"
+                  "SHAPE_FILL",
+                  "FRAME_FILL"
                 ]
               }
             },
@@ -137,7 +148,8 @@
               "$description": "Used for the background color of the unchecked toggle switch thumb in the active state.",
               "$extensions": {
                 "com.figma.scopes": [
-                  "SHAPE_FILL"
+                  "SHAPE_FILL",
+                  "FRAME_FILL"
                 ]
               }
             }
@@ -149,7 +161,8 @@
               "$description": "Used for the background color of the checked toggle switch thumb in the default state.",
               "$extensions": {
                 "com.figma.scopes": [
-                  "SHAPE_FILL"
+                  "SHAPE_FILL",
+                  "FRAME_FILL"
                 ]
               }
             },
@@ -159,7 +172,8 @@
               "$description": "Used for the background color of the checked toggle switch thumb in the hover state.",
               "$extensions": {
                 "com.figma.scopes": [
-                  "SHAPE_FILL"
+                  "SHAPE_FILL",
+                  "FRAME_FILL"
                 ]
               }
             },
@@ -169,7 +183,8 @@
               "$description": "Used for the background color of the checked toggle switch thumb in the focus state.",
               "$extensions": {
                 "com.figma.scopes": [
-                  "SHAPE_FILL"
+                  "SHAPE_FILL",
+                  "FRAME_FILL"
                 ]
               }
             },
@@ -179,7 +194,8 @@
               "$description": "Used for the background color of the checked toggle switch thumb in the active state.",
               "$extensions": {
                 "com.figma.scopes": [
-                  "SHAPE_FILL"
+                  "SHAPE_FILL",
+                  "FRAME_FILL"
                 ]
               }
             }
@@ -190,7 +206,8 @@
             "$description": "Used for the background color of the toggle switch thumb in the disabled state.",
             "$extensions": {
               "com.figma.scopes": [
-                "SHAPE_FILL"
+                "SHAPE_FILL",
+                "FRAME_FILL"
               ]
             }
           }

package/src/tokens/tokens_story.vue

@@ -13,6 +13,9 @@ export default {
   },
   inject: ['containerClass'],
   props: {
+    /**
+     * Map of design tokens to display in the story.
+     */
     tokens: {
       type: Object,
       required: false,

package/src/utils/string_utils.js

@@ -26,7 +26,7 @@ export const splitAfterSymbols = (symbols, string) => {
     return [string];
   }
 
-  for (let i = 0; i < string.length; ) {
+  for (let i = 0; i < string.length;) {
     let symbolFound = false;
 
     for (let j = 0; j < symbols.length; j += 1) {

package/src/vendor/bootstrap/scss/_button-group.scss

@@ -16,7 +16,7 @@
     @include hover() {
       z-index: 1;
     }
-    &:focus,
+    &:focus-visible,
     &:active,
     &.active {
       z-index: 1;