@primer/primitives 7.11.0 → 7.11.1

package/dist/json/colors/light_high_contrast.json

@@ -339,24 +339,36 @@
     }
   },
   "switchTrack": {
-    "bg": "#ffffff",
-    "border": "#20252c",
+    "bg": "#66707b",
+    "hoverBg": "hsla(211,9%,47%,1)",
+    "activeBg": "hsla(211,9%,49%,1)",
+    "disabledBg": "#88929d",
+    "fg": "#ffffff",
+    "disabledFg": "#ffffff",
+    "border": "rgba(0,0,0,0)",
     "checked": {
-      "bg": "#dff7ff",
-      "hoverBg": "#9cd7ff",
-      "activeBg": "#67b3fd",
-      "border": "#0349b4"
+      "bg": "#0349b4",
+      "hoverBg": "#0860CA",
+      "activeBg": "#0757BA",
+      "fg": "#ffffff",
+      "disabledFg": "#ffffff",
+      "border": "rgba(0,0,0,0)"
     }
   },
   "switchKnob": {
+    "bg": "#ffffff",
+    "disabledBg": "#e7ecf0",
+    "border": "#20252c",
     "checked": {
-      "bg": "#0349b4",
-      "disabledBg": "#66707b"
+      "bg": "#ffffff",
+      "disabledBg": "#e7ecf0",
+      "border": "#0349b4"
     }
   },
   "segmentedControl": {
     "bg": "#e7ecf0",
     "button": {
+      "bg": "#ffffff",
       "hover": {
         "bg": "rgba(172,182,192,0.2)"
       },
@@ -364,7 +376,7 @@
         "bg": "rgba(172,182,192,0.4)"
       },
       "selected": {
-        "border": "#66707b"
+        "border": "#88929d"
       }
     }
   },

package/dist/json/colors/light_tritanopia.json

@@ -340,23 +340,35 @@
   },
   "switchTrack": {
     "bg": "#eaeef2",
-    "border": "#afb8c1",
+    "hoverBg": "hsla(210,24%,90%,1)",
+    "activeBg": "hsla(210,24%,88%,1)",
+    "disabledBg": "#8c959f",
+    "fg": "#57606a",
+    "disabledFg": "#ffffff",
+    "border": "rgba(0,0,0,0)",
     "checked": {
-      "bg": "#ddf4ff",
-      "hoverBg": "#b6e3ff",
-      "activeBg": "#80ccff",
-      "border": "#54aeff"
+      "bg": "#0969da",
+      "hoverBg": "#0860CA",
+      "activeBg": "#0757BA",
+      "fg": "#ffffff",
+      "disabledFg": "#ffffff",
+      "border": "rgba(0,0,0,0)"
     }
   },
   "switchKnob": {
+    "bg": "#ffffff",
+    "disabledBg": "#f6f8fa",
+    "border": "#858F99",
     "checked": {
-      "bg": "#0969da",
-      "disabledBg": "#6e7781"
+      "bg": "#ffffff",
+      "disabledBg": "#f6f8fa",
+      "border": "#0969da"
     }
   },
   "segmentedControl": {
     "bg": "#eaeef2",
     "button": {
+      "bg": "#ffffff",
       "hover": {
         "bg": "rgba(175,184,193,0.2)"
       },
@@ -364,7 +376,7 @@
         "bg": "rgba(175,184,193,0.4)"
       },
       "selected": {
-        "border": "#6e7781"
+        "border": "#8c959f"
       }
     }
   },

package/dist/scss/colors/_dark.scss

@@ -259,15 +259,27 @@
     --color-action-list-item-danger-hover-bg: rgba(248,81,73,0.16);
     --color-action-list-item-danger-active-bg: rgba(248,81,73,0.24);
     --color-action-list-item-danger-hover-text: #ff7b72;
-    --color-switch-track-bg: #010409;
-    --color-switch-track-border: #6e7681;
+    --color-switch-track-bg: rgba(110,118,129,0.1);
+    --color-switch-track-hover-bg: hsla(215,8%,72%,0.1);
+    --color-switch-track-active-bg: rgba(110,118,129,0.4);
+    --color-switch-track-disabled-bg: #21262d;
+    --color-switch-track-fg: #8b949e;
+    --color-switch-track-disabled-fg: #010409;
+    --color-switch-track-border: rgba(0,0,0,0);
     --color-switch-track-checked-bg: rgba(31,111,235,0.35);
     --color-switch-track-checked-hover-bg: rgba(31,111,235,0.5);
     --color-switch-track-checked-active-bg: rgba(31,111,235,0.65);
-    --color-switch-track-checked-border: #58a6ff;
-    --color-switch-knob-checked-bg: #1f6feb;
-    --color-switch-knob-checked-disabled-bg: #484f58;
-    --color-segmented-control-bg: #161b22;
+    --color-switch-track-checked-fg: #ffffff;
+    --color-switch-track-checked-disabled-fg: #010409;
+    --color-switch-track-checked-border: rgba(0,0,0,0);
+    --color-switch-knob-bg: #0d1117;
+    --color-switch-knob-border: #606771;
+    --color-switch-knob-disabled-bg: #161b22;
+    --color-switch-knob-checked-bg: #0d1117;
+    --color-switch-knob-checked-disabled-bg: #161b22;
+    --color-switch-knob-checked-border: rgba(31,111,235,0.35);
+    --color-segmented-control-bg: rgba(110,118,129,0.1);
+    --color-segmented-control-button-bg: #0d1117;
     --color-segmented-control-button-hover-bg: #30363d;
     --color-segmented-control-button-active-bg: #21262d;
     --color-segmented-control-button-selected-border: #6e7681;

package/dist/scss/colors/_dark_colorblind.scss

@@ -259,15 +259,27 @@
     --color-action-list-item-danger-hover-bg: rgba(212,118,22,0.16);
     --color-action-list-item-danger-active-bg: rgba(212,118,22,0.24);
     --color-action-list-item-danger-hover-text: #ec8e2c;
-    --color-switch-track-bg: #010409;
-    --color-switch-track-border: #6e7681;
+    --color-switch-track-bg: rgba(110,118,129,0.1);
+    --color-switch-track-hover-bg: hsla(215,8%,72%,0.1);
+    --color-switch-track-active-bg: rgba(110,118,129,0.4);
+    --color-switch-track-disabled-bg: #21262d;
+    --color-switch-track-fg: #8b949e;
+    --color-switch-track-disabled-fg: #010409;
+    --color-switch-track-border: rgba(0,0,0,0);
     --color-switch-track-checked-bg: rgba(31,111,235,0.35);
     --color-switch-track-checked-hover-bg: rgba(31,111,235,0.5);
     --color-switch-track-checked-active-bg: rgba(31,111,235,0.65);
-    --color-switch-track-checked-border: #58a6ff;
-    --color-switch-knob-checked-bg: #1f6feb;
-    --color-switch-knob-checked-disabled-bg: #484f58;
-    --color-segmented-control-bg: #161b22;
+    --color-switch-track-checked-fg: #ffffff;
+    --color-switch-track-checked-disabled-fg: #010409;
+    --color-switch-track-checked-border: rgba(0,0,0,0);
+    --color-switch-knob-bg: #0d1117;
+    --color-switch-knob-border: #606771;
+    --color-switch-knob-disabled-bg: #161b22;
+    --color-switch-knob-checked-bg: #0d1117;
+    --color-switch-knob-checked-disabled-bg: #161b22;
+    --color-switch-knob-checked-border: rgba(31,111,235,0.35);
+    --color-segmented-control-bg: rgba(110,118,129,0.1);
+    --color-segmented-control-button-bg: #0d1117;
     --color-segmented-control-button-hover-bg: #30363d;
     --color-segmented-control-button-active-bg: #21262d;
     --color-segmented-control-button-selected-border: #6e7681;

package/dist/scss/colors/_dark_dimmed.scss

@@ -259,15 +259,27 @@
     --color-action-list-item-danger-hover-bg: rgba(229,83,75,0.16);
     --color-action-list-item-danger-active-bg: rgba(229,83,75,0.24);
     --color-action-list-item-danger-hover-text: #f47067;
-    --color-switch-track-bg: #1c2128;
-    --color-switch-track-border: #636e7b;
+    --color-switch-track-bg: rgba(99,110,123,0.1);
+    --color-switch-track-hover-bg: hsla(213,11%,69%,0.1);
+    --color-switch-track-active-bg: rgba(99,110,123,0.4);
+    --color-switch-track-disabled-bg: #373e47;
+    --color-switch-track-fg: #768390;
+    --color-switch-track-disabled-fg: #1c2128;
+    --color-switch-track-border: rgba(0,0,0,0);
     --color-switch-track-checked-bg: rgba(49,109,202,0.35);
     --color-switch-track-checked-hover-bg: rgba(49,109,202,0.5);
     --color-switch-track-checked-active-bg: rgba(49,109,202,0.65);
-    --color-switch-track-checked-border: #539bf5;
-    --color-switch-knob-checked-bg: #316dca;
-    --color-switch-knob-checked-disabled-bg: #545d68;
-    --color-segmented-control-bg: #2d333b;
+    --color-switch-track-checked-fg: #cdd9e5;
+    --color-switch-track-checked-disabled-fg: #1c2128;
+    --color-switch-track-checked-border: rgba(0,0,0,0);
+    --color-switch-knob-bg: #22272e;
+    --color-switch-knob-border: #606771;
+    --color-switch-knob-disabled-bg: #2d333b;
+    --color-switch-knob-checked-bg: #22272e;
+    --color-switch-knob-checked-disabled-bg: #2d333b;
+    --color-switch-knob-checked-border: rgba(49,109,202,0.35);
+    --color-segmented-control-bg: rgba(99,110,123,0.1);
+    --color-segmented-control-button-bg: #22272e;
     --color-segmented-control-button-hover-bg: #444c56;
     --color-segmented-control-button-active-bg: #373e47;
     --color-segmented-control-button-selected-border: #636e7b;

package/dist/scss/colors/_dark_high_contrast.scss

@@ -259,15 +259,27 @@
     --color-action-list-item-danger-hover-bg: #ff6a69;
     --color-action-list-item-danger-active-bg: #ff4445;
     --color-action-list-item-danger-hover-text: #0a0c10;
-    --color-switch-track-bg: #010409;
-    --color-switch-track-border: #7a828e;
-    --color-switch-track-checked-bg: rgba(64,158,255,0.35);
+    --color-switch-track-bg: #9ea7b3;
+    --color-switch-track-hover-bg: hsla(214,12%,61%,1);
+    --color-switch-track-active-bg: hsla(214,12%,58%,1);
+    --color-switch-track-disabled-bg: #272b33;
+    --color-switch-track-fg: #0a0c10;
+    --color-switch-track-disabled-fg: #010409;
+    --color-switch-track-border: rgba(0,0,0,0);
+    --color-switch-track-checked-bg: #409eff;
     --color-switch-track-checked-hover-bg: rgba(64,158,255,0.5);
     --color-switch-track-checked-active-bg: rgba(64,158,255,0.65);
-    --color-switch-track-checked-border: #409eff;
-    --color-switch-knob-checked-bg: #409eff;
-    --color-switch-knob-checked-disabled-bg: #7a828e;
-    --color-segmented-control-bg: #272b33;
+    --color-switch-track-checked-fg: #0a0c10;
+    --color-switch-track-checked-disabled-fg: #010409;
+    --color-switch-track-checked-border: rgba(0,0,0,0);
+    --color-switch-knob-bg: #0a0c10;
+    --color-switch-knob-border: #9ea7b3;
+    --color-switch-knob-disabled-bg: #272b33;
+    --color-switch-knob-checked-bg: #0a0c10;
+    --color-switch-knob-checked-disabled-bg: #272b33;
+    --color-switch-knob-checked-border: #409eff;
+    --color-segmented-control-bg: rgba(158,167,179,0.1);
+    --color-segmented-control-button-bg: #0a0c10;
     --color-segmented-control-button-hover-bg: #525964;
     --color-segmented-control-button-active-bg: #272b33;
     --color-segmented-control-button-selected-border: #9ea7b3;

package/dist/scss/colors/_dark_tritanopia.scss

@@ -259,15 +259,27 @@
     --color-action-list-item-danger-hover-bg: rgba(248,81,73,0.16);
     --color-action-list-item-danger-active-bg: rgba(248,81,73,0.24);
     --color-action-list-item-danger-hover-text: #ff7b72;
-    --color-switch-track-bg: #010409;
-    --color-switch-track-border: #6e7681;
+    --color-switch-track-bg: rgba(110,118,129,0.1);
+    --color-switch-track-hover-bg: hsla(215,8%,72%,0.1);
+    --color-switch-track-active-bg: rgba(110,118,129,0.4);
+    --color-switch-track-disabled-bg: #21262d;
+    --color-switch-track-fg: #8b949e;
+    --color-switch-track-disabled-fg: #010409;
+    --color-switch-track-border: rgba(0,0,0,0);
     --color-switch-track-checked-bg: rgba(31,111,235,0.35);
     --color-switch-track-checked-hover-bg: rgba(31,111,235,0.5);
     --color-switch-track-checked-active-bg: rgba(31,111,235,0.65);
-    --color-switch-track-checked-border: #58a6ff;
-    --color-switch-knob-checked-bg: #1f6feb;
-    --color-switch-knob-checked-disabled-bg: #484f58;
-    --color-segmented-control-bg: #161b22;
+    --color-switch-track-checked-fg: #ffffff;
+    --color-switch-track-checked-disabled-fg: #010409;
+    --color-switch-track-checked-border: rgba(0,0,0,0);
+    --color-switch-knob-bg: #0d1117;
+    --color-switch-knob-border: #606771;
+    --color-switch-knob-disabled-bg: #161b22;
+    --color-switch-knob-checked-bg: #0d1117;
+    --color-switch-knob-checked-disabled-bg: #161b22;
+    --color-switch-knob-checked-border: rgba(31,111,235,0.35);
+    --color-segmented-control-bg: rgba(110,118,129,0.1);
+    --color-segmented-control-button-bg: #0d1117;
     --color-segmented-control-button-hover-bg: #30363d;
     --color-segmented-control-button-active-bg: #21262d;
     --color-segmented-control-button-selected-border: #6e7681;

package/dist/scss/colors/_light.scss

@@ -260,17 +260,29 @@
     --color-action-list-item-danger-active-bg: #ffebe9;
     --color-action-list-item-danger-hover-text: #cf222e;
     --color-switch-track-bg: #eaeef2;
-    --color-switch-track-border: #afb8c1;
-    --color-switch-track-checked-bg: #ddf4ff;
-    --color-switch-track-checked-hover-bg: #b6e3ff;
-    --color-switch-track-checked-active-bg: #80ccff;
-    --color-switch-track-checked-border: #54aeff;
-    --color-switch-knob-checked-bg: #0969da;
-    --color-switch-knob-checked-disabled-bg: #6e7781;
+    --color-switch-track-hover-bg: hsla(210,24%,90%,1);
+    --color-switch-track-active-bg: hsla(210,24%,88%,1);
+    --color-switch-track-disabled-bg: #8c959f;
+    --color-switch-track-fg: #57606a;
+    --color-switch-track-disabled-fg: #ffffff;
+    --color-switch-track-border: rgba(0,0,0,0);
+    --color-switch-track-checked-bg: #0969da;
+    --color-switch-track-checked-hover-bg: #0860CA;
+    --color-switch-track-checked-active-bg: #0757BA;
+    --color-switch-track-checked-fg: #ffffff;
+    --color-switch-track-checked-disabled-fg: #ffffff;
+    --color-switch-track-checked-border: rgba(0,0,0,0);
+    --color-switch-knob-bg: #ffffff;
+    --color-switch-knob-disabled-bg: #f6f8fa;
+    --color-switch-knob-border: #858F99;
+    --color-switch-knob-checked-bg: #ffffff;
+    --color-switch-knob-checked-disabled-bg: #f6f8fa;
+    --color-switch-knob-checked-border: #0969da;
     --color-segmented-control-bg: #eaeef2;
+    --color-segmented-control-button-bg: #ffffff;
     --color-segmented-control-button-hover-bg: rgba(175,184,193,0.2);
     --color-segmented-control-button-active-bg: rgba(175,184,193,0.4);
-    --color-segmented-control-button-selected-border: #6e7781;
+    --color-segmented-control-button-selected-border: #8c959f;
     --color-tree-view-item-chevron-hover-bg: rgba(208,215,222,0.32);
     --color-tree-view-item-directory-fill: #54aeff;
     --color-fg-default: #24292f;

package/dist/scss/colors/_light_colorblind.scss

@@ -260,17 +260,29 @@
     --color-action-list-item-danger-active-bg: #fff5e8;
     --color-action-list-item-danger-hover-text: #b35900;
     --color-switch-track-bg: #eaeef2;
-    --color-switch-track-border: #afb8c1;
-    --color-switch-track-checked-bg: #ddf4ff;
-    --color-switch-track-checked-hover-bg: #b6e3ff;
-    --color-switch-track-checked-active-bg: #80ccff;
-    --color-switch-track-checked-border: #54aeff;
-    --color-switch-knob-checked-bg: #0969da;
-    --color-switch-knob-checked-disabled-bg: #6e7781;
+    --color-switch-track-hover-bg: hsla(210,24%,90%,1);
+    --color-switch-track-active-bg: hsla(210,24%,88%,1);
+    --color-switch-track-disabled-bg: #8c959f;
+    --color-switch-track-fg: #57606a;
+    --color-switch-track-disabled-fg: #ffffff;
+    --color-switch-track-border: rgba(0,0,0,0);
+    --color-switch-track-checked-bg: #0969da;
+    --color-switch-track-checked-hover-bg: #0860CA;
+    --color-switch-track-checked-active-bg: #0757BA;
+    --color-switch-track-checked-fg: #ffffff;
+    --color-switch-track-checked-disabled-fg: #ffffff;
+    --color-switch-track-checked-border: rgba(0,0,0,0);
+    --color-switch-knob-bg: #ffffff;
+    --color-switch-knob-disabled-bg: #f6f8fa;
+    --color-switch-knob-border: #858F99;
+    --color-switch-knob-checked-bg: #ffffff;
+    --color-switch-knob-checked-disabled-bg: #f6f8fa;
+    --color-switch-knob-checked-border: #0969da;
     --color-segmented-control-bg: #eaeef2;
+    --color-segmented-control-button-bg: #ffffff;
     --color-segmented-control-button-hover-bg: rgba(175,184,193,0.2);
     --color-segmented-control-button-active-bg: rgba(175,184,193,0.4);
-    --color-segmented-control-button-selected-border: #6e7781;
+    --color-segmented-control-button-selected-border: #8c959f;
     --color-tree-view-item-chevron-hover-bg: rgba(208,215,222,0.32);
     --color-tree-view-item-directory-fill: #54aeff;
     --color-fg-default: #24292f;

package/dist/scss/colors/_light_high_contrast.scss

@@ -259,18 +259,30 @@
     --color-action-list-item-danger-hover-bg: #a0111f;
     --color-action-list-item-danger-active-bg: #6e011a;
     --color-action-list-item-danger-hover-text: #ffffff;
-    --color-switch-track-bg: #ffffff;
-    --color-switch-track-border: #20252c;
-    --color-switch-track-checked-bg: #dff7ff;
-    --color-switch-track-checked-hover-bg: #9cd7ff;
-    --color-switch-track-checked-active-bg: #67b3fd;
-    --color-switch-track-checked-border: #0349b4;
-    --color-switch-knob-checked-bg: #0349b4;
-    --color-switch-knob-checked-disabled-bg: #66707b;
+    --color-switch-track-bg: #66707b;
+    --color-switch-track-hover-bg: hsla(211,9%,47%,1);
+    --color-switch-track-active-bg: hsla(211,9%,49%,1);
+    --color-switch-track-disabled-bg: #88929d;
+    --color-switch-track-fg: #ffffff;
+    --color-switch-track-disabled-fg: #ffffff;
+    --color-switch-track-border: rgba(0,0,0,0);
+    --color-switch-track-checked-bg: #0349b4;
+    --color-switch-track-checked-hover-bg: #0860CA;
+    --color-switch-track-checked-active-bg: #0757BA;
+    --color-switch-track-checked-fg: #ffffff;
+    --color-switch-track-checked-disabled-fg: #ffffff;
+    --color-switch-track-checked-border: rgba(0,0,0,0);
+    --color-switch-knob-bg: #ffffff;
+    --color-switch-knob-disabled-bg: #e7ecf0;
+    --color-switch-knob-border: #20252c;
+    --color-switch-knob-checked-bg: #ffffff;
+    --color-switch-knob-checked-disabled-bg: #e7ecf0;
+    --color-switch-knob-checked-border: #0349b4;
     --color-segmented-control-bg: #e7ecf0;
+    --color-segmented-control-button-bg: #ffffff;
     --color-segmented-control-button-hover-bg: rgba(172,182,192,0.2);
     --color-segmented-control-button-active-bg: rgba(172,182,192,0.4);
-    --color-segmented-control-button-selected-border: #66707b;
+    --color-segmented-control-button-selected-border: #88929d;
     --color-tree-view-item-chevron-hover-bg: #ced5dc;
     --color-tree-view-item-directory-fill: #368cf9;
     --color-fg-default: #0e1116;

package/dist/scss/colors/_light_tritanopia.scss

@@ -260,17 +260,29 @@
     --color-action-list-item-danger-active-bg: #ffebe9;
     --color-action-list-item-danger-hover-text: #cf222e;
     --color-switch-track-bg: #eaeef2;
-    --color-switch-track-border: #afb8c1;
-    --color-switch-track-checked-bg: #ddf4ff;
-    --color-switch-track-checked-hover-bg: #b6e3ff;
-    --color-switch-track-checked-active-bg: #80ccff;
-    --color-switch-track-checked-border: #54aeff;
-    --color-switch-knob-checked-bg: #0969da;
-    --color-switch-knob-checked-disabled-bg: #6e7781;
+    --color-switch-track-hover-bg: hsla(210,24%,90%,1);
+    --color-switch-track-active-bg: hsla(210,24%,88%,1);
+    --color-switch-track-disabled-bg: #8c959f;
+    --color-switch-track-fg: #57606a;
+    --color-switch-track-disabled-fg: #ffffff;
+    --color-switch-track-border: rgba(0,0,0,0);
+    --color-switch-track-checked-bg: #0969da;
+    --color-switch-track-checked-hover-bg: #0860CA;
+    --color-switch-track-checked-active-bg: #0757BA;
+    --color-switch-track-checked-fg: #ffffff;
+    --color-switch-track-checked-disabled-fg: #ffffff;
+    --color-switch-track-checked-border: rgba(0,0,0,0);
+    --color-switch-knob-bg: #ffffff;
+    --color-switch-knob-disabled-bg: #f6f8fa;
+    --color-switch-knob-border: #858F99;
+    --color-switch-knob-checked-bg: #ffffff;
+    --color-switch-knob-checked-disabled-bg: #f6f8fa;
+    --color-switch-knob-checked-border: #0969da;
     --color-segmented-control-bg: #eaeef2;
+    --color-segmented-control-button-bg: #ffffff;
     --color-segmented-control-button-hover-bg: rgba(175,184,193,0.2);
     --color-segmented-control-button-active-bg: rgba(175,184,193,0.4);
-    --color-segmented-control-button-selected-border: #6e7781;
+    --color-segmented-control-button-selected-border: #8c959f;
     --color-tree-view-item-chevron-hover-bg: rgba(208,215,222,0.32);
     --color-tree-view-item-directory-fill: #54aeff;
     --color-fg-default: #24292f;

package/dist/ts/colors/dark.ts

@@ -339,24 +339,36 @@ export default {
     }
   },
   "switchTrack": {
-    "bg": "#010409",
-    "border": "#6e7681",
+    "bg": "rgba(110,118,129,0.1)",
+    "hoverBg": "hsla(215,8%,72%,0.1)",
+    "activeBg": "rgba(110,118,129,0.4)",
+    "disabledBg": "#21262d",
+    "fg": "#8b949e",
+    "disabledFg": "#010409",
+    "border": "rgba(0,0,0,0)",
     "checked": {
       "bg": "rgba(31,111,235,0.35)",
       "hoverBg": "rgba(31,111,235,0.5)",
       "activeBg": "rgba(31,111,235,0.65)",
-      "border": "#58a6ff"
+      "fg": "#ffffff",
+      "disabledFg": "#010409",
+      "border": "rgba(0,0,0,0)"
     }
   },
   "switchKnob": {
+    "bg": "#0d1117",
+    "border": "#606771",
+    "disabledBg": "#161b22",
     "checked": {
-      "bg": "#1f6feb",
-      "disabledBg": "#484f58"
+      "bg": "#0d1117",
+      "disabledBg": "#161b22",
+      "border": "rgba(31,111,235,0.35)"
     }
   },
   "segmentedControl": {
-    "bg": "#161b22",
+    "bg": "rgba(110,118,129,0.1)",
     "button": {
+      "bg": "#0d1117",
       "hover": {
         "bg": "#30363d"
       },

package/dist/ts/colors/dark_colorblind.ts

@@ -339,24 +339,36 @@ export default {
     }
   },
   "switchTrack": {
-    "bg": "#010409",
-    "border": "#6e7681",
+    "bg": "rgba(110,118,129,0.1)",
+    "hoverBg": "hsla(215,8%,72%,0.1)",
+    "activeBg": "rgba(110,118,129,0.4)",
+    "disabledBg": "#21262d",
+    "fg": "#8b949e",
+    "disabledFg": "#010409",
+    "border": "rgba(0,0,0,0)",
     "checked": {
       "bg": "rgba(31,111,235,0.35)",
       "hoverBg": "rgba(31,111,235,0.5)",
       "activeBg": "rgba(31,111,235,0.65)",
-      "border": "#58a6ff"
+      "fg": "#ffffff",
+      "disabledFg": "#010409",
+      "border": "rgba(0,0,0,0)"
     }
   },
   "switchKnob": {
+    "bg": "#0d1117",
+    "border": "#606771",
+    "disabledBg": "#161b22",
     "checked": {
-      "bg": "#1f6feb",
-      "disabledBg": "#484f58"
+      "bg": "#0d1117",
+      "disabledBg": "#161b22",
+      "border": "rgba(31,111,235,0.35)"
     }
   },
   "segmentedControl": {
-    "bg": "#161b22",
+    "bg": "rgba(110,118,129,0.1)",
     "button": {
+      "bg": "#0d1117",
       "hover": {
         "bg": "#30363d"
       },

package/dist/ts/colors/dark_dimmed.ts

@@ -339,24 +339,36 @@ export default {
     }
   },
   "switchTrack": {
-    "bg": "#1c2128",
-    "border": "#636e7b",
+    "bg": "rgba(99,110,123,0.1)",
+    "hoverBg": "hsla(213,11%,69%,0.1)",
+    "activeBg": "rgba(99,110,123,0.4)",
+    "disabledBg": "#373e47",
+    "fg": "#768390",
+    "disabledFg": "#1c2128",
+    "border": "rgba(0,0,0,0)",
     "checked": {
       "bg": "rgba(49,109,202,0.35)",
       "hoverBg": "rgba(49,109,202,0.5)",
       "activeBg": "rgba(49,109,202,0.65)",
-      "border": "#539bf5"
+      "fg": "#cdd9e5",
+      "disabledFg": "#1c2128",
+      "border": "rgba(0,0,0,0)"
     }
   },
   "switchKnob": {
+    "bg": "#22272e",
+    "border": "#606771",
+    "disabledBg": "#2d333b",
     "checked": {
-      "bg": "#316dca",
-      "disabledBg": "#545d68"
+      "bg": "#22272e",
+      "disabledBg": "#2d333b",
+      "border": "rgba(49,109,202,0.35)"
     }
   },
   "segmentedControl": {
-    "bg": "#2d333b",
+    "bg": "rgba(99,110,123,0.1)",
     "button": {
+      "bg": "#22272e",
       "hover": {
         "bg": "#444c56"
       },

package/dist/ts/colors/dark_high_contrast.ts

@@ -339,24 +339,36 @@ export default {
     }
   },
   "switchTrack": {
-    "bg": "#010409",
-    "border": "#7a828e",
+    "bg": "#9ea7b3",
+    "hoverBg": "hsla(214,12%,61%,1)",
+    "activeBg": "hsla(214,12%,58%,1)",
+    "disabledBg": "#272b33",
+    "fg": "#0a0c10",
+    "disabledFg": "#010409",
+    "border": "rgba(0,0,0,0)",
     "checked": {
-      "bg": "rgba(64,158,255,0.35)",
+      "bg": "#409eff",
       "hoverBg": "rgba(64,158,255,0.5)",
       "activeBg": "rgba(64,158,255,0.65)",
-      "border": "#409eff"
+      "fg": "#0a0c10",
+      "disabledFg": "#010409",
+      "border": "rgba(0,0,0,0)"
     }
   },
   "switchKnob": {
+    "bg": "#0a0c10",
+    "border": "#9ea7b3",
+    "disabledBg": "#272b33",
     "checked": {
-      "bg": "#409eff",
-      "disabledBg": "#7a828e"
+      "bg": "#0a0c10",
+      "disabledBg": "#272b33",
+      "border": "#409eff"
     }
   },
   "segmentedControl": {
-    "bg": "#272b33",
+    "bg": "rgba(158,167,179,0.1)",
     "button": {
+      "bg": "#0a0c10",
       "hover": {
         "bg": "#525964"
       },