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

package/dist/json/colors/dark_colorblind.json

@@ -187,6 +187,11 @@
       }
     }
   },
+  "control": {
+    "borderColor": {
+      "emphasis": "#606771"
+    }
+  },
   "avatar": {
     "bg": "rgba(255,255,255,0.1)",
     "border": "rgba(240,246,252,0.1)",
@@ -334,24 +339,36 @@
     }
   },
   "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/json/colors/dark_dimmed.json

@@ -187,6 +187,11 @@
       }
     }
   },
+  "control": {
+    "borderColor": {
+      "emphasis": "#606771"
+    }
+  },
   "avatar": {
     "bg": "rgba(205,217,229,0.1)",
     "border": "rgba(205,217,229,0.1)",
@@ -334,24 +339,36 @@
     }
   },
   "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/json/colors/dark_high_contrast.json

@@ -187,6 +187,11 @@
       }
     }
   },
+  "control": {
+    "borderColor": {
+      "emphasis": "#9ea7b3"
+    }
+  },
   "avatar": {
     "bg": "rgba(255,255,255,0.1)",
     "border": "rgba(255,255,255,0.9)",
@@ -334,24 +339,36 @@
     }
   },
   "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/json/colors/dark_tritanopia.json

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

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

package/dist/json/colors/light_colorblind.json

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

package/dist/json/colors/light_high_contrast.json

@@ -187,6 +187,11 @@
       }
     }
   },
+  "control": {
+    "borderColor": {
+      "emphasis": "#20252c"
+    }
+  },
   "avatar": {
     "bg": "#ffffff",
     "border": "rgba(1,4,9,0.8)",
@@ -334,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)"
       },
@@ -359,7 +376,7 @@
         "bg": "rgba(172,182,192,0.4)"
       },
       "selected": {
-        "border": "#66707b"
+        "border": "#88929d"
       }
     }
   },

package/dist/json/colors/light_tritanopia.json

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

package/dist/scss/colors/_dark.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/_dark_colorblind.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(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

@@ -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(205,217,229,0.1);
     --color-avatar-border: rgba(205,217,229,0.1);
     --color-avatar-stack-fade: #444c56;
@@ -258,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

@@ -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: #9ea7b3;
     --color-avatar-bg: rgba(255,255,255,0.1);
     --color-avatar-border: rgba(255,255,255,0.9);
     --color-avatar-stack-fade: #525964;
@@ -258,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;