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

package/dist/js/colors/light_high_contrast.js

@@ -189,6 +189,11 @@ exports.default = {
             }
         }
     },
+    "control": {
+        "borderColor": {
+            "emphasis": "#20252c"
+        }
+    },
     "avatar": {
         "bg": "#ffffff",
         "border": "rgba(1,4,9,0.8)",
@@ -336,24 +341,36 @@ exports.default = {
         }
     },
     "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)"
             },
@@ -361,7 +378,7 @@ exports.default = {
                 "bg": "rgba(172,182,192,0.4)"
             },
             "selected": {
-                "border": "#66707b"
+                "border": "#88929d"
             }
         }
     },

package/dist/js/colors/light_tritanopia.d.ts

@@ -187,6 +187,11 @@ declare const _default: {
             };
         };
     };
+    control: {
+        borderColor: {
+            emphasis: string;
+        };
+    };
     avatar: {
         bg: string;
         border: string;
@@ -335,23 +340,35 @@ declare const _default: {
     };
     switchTrack: {
         bg: string;
+        hoverBg: string;
+        activeBg: string;
+        disabledBg: string;
+        fg: string;
+        disabledFg: string;
         border: string;
         checked: {
             bg: string;
             hoverBg: string;
             activeBg: string;
+            fg: string;
+            disabledFg: string;
             border: string;
         };
     };
     switchKnob: {
+        bg: string;
+        disabledBg: string;
+        border: string;
         checked: {
             bg: string;
             disabledBg: string;
+            border: string;
         };
     };
     segmentedControl: {
         bg: string;
         button: {
+            bg: string;
             hover: {
                 bg: string;
             };

package/dist/js/colors/light_tritanopia.js

@@ -189,6 +189,11 @@ exports.default = {
             }
         }
     },
+    "control": {
+        "borderColor": {
+            "emphasis": "#858F99"
+        }
+    },
     "avatar": {
         "bg": "#ffffff",
         "border": "rgba(27,31,36,0.15)",
@@ -337,23 +342,35 @@ exports.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)"
             },
@@ -361,7 +378,7 @@ exports.default = {
                 "bg": "rgba(175,184,193,0.4)"
             },
             "selected": {
-                "border": "#6e7781"
+                "border": "#8c959f"
             }
         }
     },

package/dist/js/index.d.ts

@@ -189,6 +189,11 @@ declare const _default: {
                     };
                 };
             };
+            control: {
+                borderColor: {
+                    emphasis: string;
+                };
+            };
             avatar: {
                 bg: string;
                 border: string;
@@ -337,23 +342,35 @@ declare const _default: {
             };
             switchTrack: {
                 bg: string;
+                hoverBg: string;
+                activeBg: string;
+                disabledBg: string;
+                fg: string;
+                disabledFg: string;
                 border: string;
                 checked: {
                     bg: string;
                     hoverBg: string;
                     activeBg: string;
+                    fg: string;
+                    disabledFg: string;
                     border: string;
                 };
             };
             switchKnob: {
+                bg: string;
+                disabledBg: string;
+                border: string;
                 checked: {
                     bg: string;
                     disabledBg: string;
+                    border: string;
                 };
             };
             segmentedControl: {
                 bg: string;
                 button: {
+                    bg: string;
                     hover: {
                         bg: string;
                     };
@@ -676,6 +693,11 @@ declare const _default: {
                     };
                 };
             };
+            control: {
+                borderColor: {
+                    emphasis: string;
+                };
+            };
             avatar: {
                 bg: string;
                 border: string;
@@ -824,23 +846,35 @@ declare const _default: {
             };
             switchTrack: {
                 bg: string;
+                hoverBg: string;
+                activeBg: string;
+                disabledBg: string;
+                fg: string;
+                disabledFg: string;
                 border: string;
                 checked: {
                     bg: string;
                     hoverBg: string;
                     activeBg: string;
+                    fg: string;
+                    disabledFg: string;
                     border: string;
                 };
             };
             switchKnob: {
+                bg: string;
+                disabledBg: string;
+                border: string;
                 checked: {
                     bg: string;
                     disabledBg: string;
+                    border: string;
                 };
             };
             segmentedControl: {
                 bg: string;
                 button: {
+                    bg: string;
                     hover: {
                         bg: string;
                     };
@@ -1163,6 +1197,11 @@ declare const _default: {
                     };
                 };
             };
+            control: {
+                borderColor: {
+                    emphasis: string;
+                };
+            };
             avatar: {
                 bg: string;
                 border: string;
@@ -1311,23 +1350,35 @@ declare const _default: {
             };
             switchTrack: {
                 bg: string;
+                hoverBg: string;
+                activeBg: string;
+                disabledBg: string;
+                fg: string;
+                disabledFg: string;
                 border: string;
                 checked: {
                     bg: string;
                     hoverBg: string;
                     activeBg: string;
+                    fg: string;
+                    disabledFg: string;
                     border: string;
                 };
             };
             switchKnob: {
+                bg: string;
+                disabledBg: string;
+                border: string;
                 checked: {
                     bg: string;
                     disabledBg: string;
+                    border: string;
                 };
             };
             segmentedControl: {
                 bg: string;
                 button: {
+                    bg: string;
                     hover: {
                         bg: string;
                     };
@@ -1650,6 +1701,11 @@ declare const _default: {
                     };
                 };
             };
+            control: {
+                borderColor: {
+                    emphasis: string;
+                };
+            };
             avatar: {
                 bg: string;
                 border: string;
@@ -1798,23 +1854,35 @@ declare const _default: {
             };
             switchTrack: {
                 bg: string;
+                hoverBg: string;
+                activeBg: string;
+                disabledBg: string;
+                fg: string;
+                disabledFg: string;
                 border: string;
                 checked: {
                     bg: string;
                     hoverBg: string;
                     activeBg: string;
+                    fg: string;
+                    disabledFg: string;
                     border: string;
                 };
             };
             switchKnob: {
+                bg: string;
+                disabledBg: string;
+                border: string;
                 checked: {
                     bg: string;
                     disabledBg: string;
+                    border: string;
                 };
             };
             segmentedControl: {
                 bg: string;
                 button: {
+                    bg: string;
                     hover: {
                         bg: string;
                     };
@@ -2137,6 +2205,11 @@ declare const _default: {
                     };
                 };
             };
+            control: {
+                borderColor: {
+                    emphasis: string;
+                };
+            };
             avatar: {
                 bg: string;
                 border: string;
@@ -2285,23 +2358,35 @@ declare const _default: {
             };
             switchTrack: {
                 bg: string;
+                hoverBg: string;
+                activeBg: string;
+                disabledBg: string;
+                fg: string;
+                disabledFg: string;
                 border: string;
                 checked: {
                     bg: string;
                     hoverBg: string;
                     activeBg: string;
+                    fg: string;
+                    disabledFg: string;
                     border: string;
                 };
             };
             switchKnob: {
+                bg: string;
+                border: string;
+                disabledBg: string;
                 checked: {
                     bg: string;
                     disabledBg: string;
+                    border: string;
                 };
             };
             segmentedControl: {
                 bg: string;
                 button: {
+                    bg: string;
                     hover: {
                         bg: string;
                     };
@@ -2624,6 +2709,11 @@ declare const _default: {
                     };
                 };
             };
+            control: {
+                borderColor: {
+                    emphasis: string;
+                };
+            };
             avatar: {
                 bg: string;
                 border: string;
@@ -2772,23 +2862,35 @@ declare const _default: {
             };
             switchTrack: {
                 bg: string;
+                hoverBg: string;
+                activeBg: string;
+                disabledBg: string;
+                fg: string;
+                disabledFg: string;
                 border: string;
                 checked: {
                     bg: string;
                     hoverBg: string;
                     activeBg: string;
+                    fg: string;
+                    disabledFg: string;
                     border: string;
                 };
             };
             switchKnob: {
+                bg: string;
+                border: string;
+                disabledBg: string;
                 checked: {
                     bg: string;
                     disabledBg: string;
+                    border: string;
                 };
             };
             segmentedControl: {
                 bg: string;
                 button: {
+                    bg: string;
                     hover: {
                         bg: string;
                     };
@@ -3111,6 +3213,11 @@ declare const _default: {
                     };
                 };
             };
+            control: {
+                borderColor: {
+                    emphasis: string;
+                };
+            };
             avatar: {
                 bg: string;
                 border: string;
@@ -3259,23 +3366,35 @@ declare const _default: {
             };
             switchTrack: {
                 bg: string;
+                hoverBg: string;
+                activeBg: string;
+                disabledBg: string;
+                fg: string;
+                disabledFg: string;
                 border: string;
                 checked: {
                     bg: string;
                     hoverBg: string;
                     activeBg: string;
+                    fg: string;
+                    disabledFg: string;
                     border: string;
                 };
             };
             switchKnob: {
+                bg: string;
+                border: string;
+                disabledBg: string;
                 checked: {
                     bg: string;
                     disabledBg: string;
+                    border: string;
                 };
             };
             segmentedControl: {
                 bg: string;
                 button: {
+                    bg: string;
                     hover: {
                         bg: string;
                     };
@@ -3598,6 +3717,11 @@ declare const _default: {
                     };
                 };
             };
+            control: {
+                borderColor: {
+                    emphasis: string;
+                };
+            };
             avatar: {
                 bg: string;
                 border: string;
@@ -3746,23 +3870,35 @@ declare const _default: {
             };
             switchTrack: {
                 bg: string;
+                hoverBg: string;
+                activeBg: string;
+                disabledBg: string;
+                fg: string;
+                disabledFg: string;
                 border: string;
                 checked: {
                     bg: string;
                     hoverBg: string;
                     activeBg: string;
+                    fg: string;
+                    disabledFg: string;
                     border: string;
                 };
             };
             switchKnob: {
+                bg: string;
+                border: string;
+                disabledBg: string;
                 checked: {
                     bg: string;
                     disabledBg: string;
+                    border: string;
                 };
             };
             segmentedControl: {
                 bg: string;
                 button: {
+                    bg: string;
                     hover: {
                         bg: string;
                     };
@@ -4085,6 +4221,11 @@ declare const _default: {
                     };
                 };
             };
+            control: {
+                borderColor: {
+                    emphasis: string;
+                };
+            };
             avatar: {
                 bg: string;
                 border: string;
@@ -4233,23 +4374,35 @@ declare const _default: {
             };
             switchTrack: {
                 bg: string;
+                hoverBg: string;
+                activeBg: string;
+                disabledBg: string;
+                fg: string;
+                disabledFg: string;
                 border: string;
                 checked: {
                     bg: string;
                     hoverBg: string;
                     activeBg: string;
+                    fg: string;
+                    disabledFg: string;
                     border: string;
                 };
             };
             switchKnob: {
+                bg: string;
+                border: string;
+                disabledBg: string;
                 checked: {
                     bg: string;
                     disabledBg: string;
+                    border: string;
                 };
             };
             segmentedControl: {
                 bg: string;
                 button: {
+                    bg: string;
                     hover: {
                         bg: string;
                     };

package/dist/json/colors/dark.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"
       },