@primer/primitives 7.11.0-rc.f7ccc99 → 7.11.1-rc.5dc24db

package/dist/scss/colors/_dark_tritanopia.scss

@@ -152,6 +152,7 @@
     --color-mktg-btn-shadow-focus: rgb(255 255 255 / 25%) 0 0 0 4px;
     --color-mktg-btn-shadow-hover: 0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07);
     --color-mktg-btn-shadow-hover-muted: rgb(255 255 255) 0 0 0 2px inset;
+    --color-control-border-color-emphasis: #606771;
     --color-avatar-bg: rgba(255,255,255,0.1);
     --color-avatar-border: rgba(240,246,252,0.1);
     --color-avatar-stack-fade: #30363d;
@@ -258,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

@@ -152,6 +152,7 @@
     --color-mktg-btn-shadow-focus: rgb(0 0 0 / 15%) 0 0 0 4px;
     --color-mktg-btn-shadow-hover: 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02);
     --color-mktg-btn-shadow-hover-muted: rgb(0 0 0 / 70%) 0 0 0 2px inset;
+    --color-control-border-color-emphasis: #858F99;
     --color-avatar-bg: #ffffff;
     --color-avatar-border: rgba(27,31,36,0.15);
     --color-avatar-stack-fade: #afb8c1;
@@ -259,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

@@ -152,6 +152,7 @@
     --color-mktg-btn-shadow-focus: rgb(0 0 0 / 15%) 0 0 0 4px;
     --color-mktg-btn-shadow-hover: 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02);
     --color-mktg-btn-shadow-hover-muted: rgb(0 0 0 / 70%) 0 0 0 2px inset;
+    --color-control-border-color-emphasis: #858F99;
     --color-avatar-bg: #ffffff;
     --color-avatar-border: rgba(27,31,36,0.15);
     --color-avatar-stack-fade: #afb8c1;
@@ -259,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

@@ -152,6 +152,7 @@
     --color-mktg-btn-shadow-focus: rgb(0 0 0 / 15%) 0 0 0 4px;
     --color-mktg-btn-shadow-hover: 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02);
     --color-mktg-btn-shadow-hover-muted: rgb(0 0 0 / 70%) 0 0 0 2px inset;
+    --color-control-border-color-emphasis: #20252c;
     --color-avatar-bg: #ffffff;
     --color-avatar-border: rgba(1,4,9,0.8);
     --color-avatar-stack-fade: #acb6c0;
@@ -258,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

@@ -152,6 +152,7 @@
     --color-mktg-btn-shadow-focus: rgb(0 0 0 / 15%) 0 0 0 4px;
     --color-mktg-btn-shadow-hover: 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02);
     --color-mktg-btn-shadow-hover-muted: rgb(0 0 0 / 70%) 0 0 0 2px inset;
+    --color-control-border-color-emphasis: #858F99;
     --color-avatar-bg: #ffffff;
     --color-avatar-border: rgba(27,31,36,0.15);
     --color-avatar-stack-fade: #afb8c1;
@@ -259,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

@@ -187,6 +187,11 @@ export default {
       }
     }
   },
+  "control": {
+    "borderColor": {
+      "emphasis": "#606771"
+    }
+  },
   "avatar": {
     "bg": "rgba(255,255,255,0.1)",
     "border": "rgba(240,246,252,0.1)",
@@ -334,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

@@ -187,6 +187,11 @@ export default {
       }
     }
   },
+  "control": {
+    "borderColor": {
+      "emphasis": "#606771"
+    }
+  },
   "avatar": {
     "bg": "rgba(255,255,255,0.1)",
     "border": "rgba(240,246,252,0.1)",
@@ -334,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

@@ -187,6 +187,11 @@ export default {
       }
     }
   },
+  "control": {
+    "borderColor": {
+      "emphasis": "#606771"
+    }
+  },
   "avatar": {
     "bg": "rgba(205,217,229,0.1)",
     "border": "rgba(205,217,229,0.1)",
@@ -334,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

@@ -187,6 +187,11 @@ export default {
       }
     }
   },
+  "control": {
+    "borderColor": {
+      "emphasis": "#9ea7b3"
+    }
+  },
   "avatar": {
     "bg": "rgba(255,255,255,0.1)",
     "border": "rgba(255,255,255,0.9)",
@@ -334,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"
       },

package/dist/ts/colors/dark_tritanopia.ts

@@ -187,6 +187,11 @@ export default {
       }
     }
   },
+  "control": {
+    "borderColor": {
+      "emphasis": "#606771"
+    }
+  },
   "avatar": {
     "bg": "rgba(255,255,255,0.1)",
     "border": "rgba(240,246,252,0.1)",
@@ -334,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/light.ts

@@ -187,6 +187,11 @@ export default {
       }
     }
   },
+  "control": {
+    "borderColor": {
+      "emphasis": "#858F99"
+    }
+  },
   "avatar": {
     "bg": "#ffffff",
     "border": "rgba(27,31,36,0.15)",
@@ -335,23 +340,35 @@ export default {
   },
   "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)"
       },
@@ -359,7 +376,7 @@ export default {
         "bg": "rgba(175,184,193,0.4)"
       },
       "selected": {
-        "border": "#6e7781"
+        "border": "#8c959f"
       }
     }
   },

package/dist/ts/colors/light_colorblind.ts

@@ -187,6 +187,11 @@ export default {
       }
     }
   },
+  "control": {
+    "borderColor": {
+      "emphasis": "#858F99"
+    }
+  },
   "avatar": {
     "bg": "#ffffff",
     "border": "rgba(27,31,36,0.15)",
@@ -335,23 +340,35 @@ export default {
   },
   "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)"
       },
@@ -359,7 +376,7 @@ export default {
         "bg": "rgba(175,184,193,0.4)"
       },
       "selected": {
-        "border": "#6e7781"
+        "border": "#8c959f"
       }
     }
   },