@primer/primitives 7.5.2-rc.2ae21e0 → 7.6.0-rc.8feb85c

package/CHANGELOG.md

@@ -1,6 +1,10 @@
 # @primer/primitives
 
-## 7.5.2
+## 7.6.0
+
+### Minor Changes
+
+- [#309](https://github.com/primer/primitives/pull/309) [`4588342`](https://github.com/primer/primitives/commit/45883423f029e7dee067fe4dd9636bebb11adbbe) Thanks [@mperrotti](https://github.com/mperrotti)! - adds primitives for toggle switch component
 
 ### Patch Changes
 

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

@@ -345,6 +345,22 @@ declare const _default: {
             hoverText: string;
         };
     };
+    switchTrack: {
+        bg: string;
+        border: string;
+        checked: {
+            bg: string;
+            hoverBg: string;
+            activeBg: string;
+            border: string;
+        };
+    };
+    switchKnob: {
+        checked: {
+            bg: string;
+            disabledBg: string;
+        };
+    };
     fg: {
         default: string;
         muted: string;

package/dist/js/colors/dark.js

@@ -347,6 +347,22 @@ exports.default = {
             "hoverText": "#ff7b72"
         }
     },
+    "switchTrack": {
+        "bg": "#010409",
+        "border": "#6e7681",
+        "checked": {
+            "bg": "rgba(31,111,235,0.35)",
+            "hoverBg": "rgba(31,111,235,0.5)",
+            "activeBg": "rgba(31,111,235,0.65)",
+            "border": "#58a6ff"
+        }
+    },
+    "switchKnob": {
+        "checked": {
+            "bg": "#1f6feb",
+            "disabledBg": "#484f58"
+        }
+    },
     "fg": {
         "default": "#c9d1d9",
         "muted": "#8b949e",

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

@@ -345,6 +345,22 @@ declare const _default: {
             hoverText: string;
         };
     };
+    switchTrack: {
+        bg: string;
+        border: string;
+        checked: {
+            bg: string;
+            hoverBg: string;
+            activeBg: string;
+            border: string;
+        };
+    };
+    switchKnob: {
+        checked: {
+            bg: string;
+            disabledBg: string;
+        };
+    };
     fg: {
         default: string;
         muted: string;

package/dist/js/colors/dark_colorblind.js

@@ -347,6 +347,22 @@ exports.default = {
             "hoverText": "#ec8e2c"
         }
     },
+    "switchTrack": {
+        "bg": "#010409",
+        "border": "#6e7681",
+        "checked": {
+            "bg": "rgba(31,111,235,0.35)",
+            "hoverBg": "rgba(31,111,235,0.5)",
+            "activeBg": "rgba(31,111,235,0.65)",
+            "border": "#58a6ff"
+        }
+    },
+    "switchKnob": {
+        "checked": {
+            "bg": "#1f6feb",
+            "disabledBg": "#484f58"
+        }
+    },
     "fg": {
         "default": "#c9d1d9",
         "muted": "#8b949e",

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

@@ -345,6 +345,22 @@ declare const _default: {
             hoverText: string;
         };
     };
+    switchTrack: {
+        bg: string;
+        border: string;
+        checked: {
+            bg: string;
+            hoverBg: string;
+            activeBg: string;
+            border: string;
+        };
+    };
+    switchKnob: {
+        checked: {
+            bg: string;
+            disabledBg: string;
+        };
+    };
     fg: {
         default: string;
         muted: string;

package/dist/js/colors/dark_dimmed.js

@@ -347,6 +347,22 @@ exports.default = {
             "hoverText": "#f47067"
         }
     },
+    "switchTrack": {
+        "bg": "#1c2128",
+        "border": "#636e7b",
+        "checked": {
+            "bg": "rgba(49,109,202,0.35)",
+            "hoverBg": "rgba(49,109,202,0.5)",
+            "activeBg": "rgba(49,109,202,0.65)",
+            "border": "#539bf5"
+        }
+    },
+    "switchKnob": {
+        "checked": {
+            "bg": "#316dca",
+            "disabledBg": "#545d68"
+        }
+    },
     "fg": {
         "default": "#adbac7",
         "muted": "#768390",

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

@@ -345,6 +345,22 @@ declare const _default: {
             hoverText: string;
         };
     };
+    switchTrack: {
+        bg: string;
+        border: string;
+        checked: {
+            bg: string;
+            hoverBg: string;
+            activeBg: string;
+            border: string;
+        };
+    };
+    switchKnob: {
+        checked: {
+            bg: string;
+            disabledBg: string;
+        };
+    };
     fg: {
         default: string;
         muted: string;

package/dist/js/colors/dark_high_contrast.js

@@ -347,6 +347,22 @@ exports.default = {
             "hoverText": "#0a0c10"
         }
     },
+    "switchTrack": {
+        "bg": "#010409",
+        "border": "#7a828e",
+        "checked": {
+            "bg": "rgba(64,158,255,0.35)",
+            "hoverBg": "rgba(64,158,255,0.5)",
+            "activeBg": "rgba(64,158,255,0.65)",
+            "border": "#409eff"
+        }
+    },
+    "switchKnob": {
+        "checked": {
+            "bg": "#409eff",
+            "disabledBg": "#7a828e"
+        }
+    },
     "fg": {
         "default": "#f0f3f6",
         "muted": "#f0f3f6",

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

@@ -346,6 +346,22 @@ declare const _default: {
                 hoverText: string;
             };
         };
+        switchTrack: {
+            bg: string;
+            border: string;
+            checked: {
+                bg: string;
+                hoverBg: string;
+                activeBg: string;
+                border: string;
+            };
+        };
+        switchKnob: {
+            checked: {
+                bg: string;
+                disabledBg: string;
+            };
+        };
         fg: {
             default: string;
             muted: string;
@@ -808,6 +824,22 @@ declare const _default: {
                 hoverText: string;
             };
         };
+        switchTrack: {
+            bg: string;
+            border: string;
+            checked: {
+                bg: string;
+                hoverBg: string;
+                activeBg: string;
+                border: string;
+            };
+        };
+        switchKnob: {
+            checked: {
+                bg: string;
+                disabledBg: string;
+            };
+        };
         fg: {
             default: string;
             muted: string;
@@ -1270,6 +1302,22 @@ declare const _default: {
                 hoverText: string;
             };
         };
+        switchTrack: {
+            bg: string;
+            border: string;
+            checked: {
+                bg: string;
+                hoverBg: string;
+                activeBg: string;
+                border: string;
+            };
+        };
+        switchKnob: {
+            checked: {
+                bg: string;
+                disabledBg: string;
+            };
+        };
         fg: {
             default: string;
             muted: string;
@@ -1732,6 +1780,22 @@ declare const _default: {
                 hoverText: string;
             };
         };
+        switchTrack: {
+            bg: string;
+            border: string;
+            checked: {
+                bg: string;
+                hoverBg: string;
+                activeBg: string;
+                border: string;
+            };
+        };
+        switchKnob: {
+            checked: {
+                bg: string;
+                disabledBg: string;
+            };
+        };
         fg: {
             default: string;
             muted: string;
@@ -2194,6 +2258,22 @@ declare const _default: {
                 hoverText: string;
             };
         };
+        switchTrack: {
+            bg: string;
+            border: string;
+            checked: {
+                bg: string;
+                hoverBg: string;
+                activeBg: string;
+                border: string;
+            };
+        };
+        switchKnob: {
+            checked: {
+                bg: string;
+                disabledBg: string;
+            };
+        };
         fg: {
             default: string;
             muted: string;
@@ -2656,6 +2736,22 @@ declare const _default: {
                 hoverText: string;
             };
         };
+        switchTrack: {
+            bg: string;
+            border: string;
+            checked: {
+                bg: string;
+                hoverBg: string;
+                activeBg: string;
+                border: string;
+            };
+        };
+        switchKnob: {
+            checked: {
+                bg: string;
+                disabledBg: string;
+            };
+        };
         fg: {
             default: string;
             muted: string;
@@ -3118,6 +3214,22 @@ declare const _default: {
                 hoverText: string;
             };
         };
+        switchTrack: {
+            bg: string;
+            border: string;
+            checked: {
+                bg: string;
+                hoverBg: string;
+                activeBg: string;
+                border: string;
+            };
+        };
+        switchKnob: {
+            checked: {
+                bg: string;
+                disabledBg: string;
+            };
+        };
         fg: {
             default: string;
             muted: string;

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

@@ -345,6 +345,22 @@ declare const _default: {
             hoverText: string;
         };
     };
+    switchTrack: {
+        bg: string;
+        border: string;
+        checked: {
+            bg: string;
+            hoverBg: string;
+            activeBg: string;
+            border: string;
+        };
+    };
+    switchKnob: {
+        checked: {
+            bg: string;
+            disabledBg: string;
+        };
+    };
     fg: {
         default: string;
         muted: string;

package/dist/js/colors/light.js

@@ -347,6 +347,22 @@ exports.default = {
             "hoverText": "#cf222e"
         }
     },
+    "switchTrack": {
+        "bg": "#eaeef2",
+        "border": "#afb8c1",
+        "checked": {
+            "bg": "#ddf4ff",
+            "hoverBg": "#b6e3ff",
+            "activeBg": "#80ccff",
+            "border": "#54aeff"
+        }
+    },
+    "switchKnob": {
+        "checked": {
+            "bg": "#0969da",
+            "disabledBg": "#6e7781"
+        }
+    },
     "fg": {
         "default": "#24292f",
         "muted": "#57606a",

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

@@ -345,6 +345,22 @@ declare const _default: {
             hoverText: string;
         };
     };
+    switchTrack: {
+        bg: string;
+        border: string;
+        checked: {
+            bg: string;
+            hoverBg: string;
+            activeBg: string;
+            border: string;
+        };
+    };
+    switchKnob: {
+        checked: {
+            bg: string;
+            disabledBg: string;
+        };
+    };
     fg: {
         default: string;
         muted: string;

package/dist/js/colors/light_colorblind.js

@@ -347,6 +347,22 @@ exports.default = {
             "hoverText": "#b35900"
         }
     },
+    "switchTrack": {
+        "bg": "#eaeef2",
+        "border": "#afb8c1",
+        "checked": {
+            "bg": "#ddf4ff",
+            "hoverBg": "#b6e3ff",
+            "activeBg": "#80ccff",
+            "border": "#54aeff"
+        }
+    },
+    "switchKnob": {
+        "checked": {
+            "bg": "#0969da",
+            "disabledBg": "#6e7781"
+        }
+    },
     "fg": {
         "default": "#24292f",
         "muted": "#57606a",

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

@@ -345,6 +345,22 @@ declare const _default: {
             hoverText: string;
         };
     };
+    switchTrack: {
+        bg: string;
+        border: string;
+        checked: {
+            bg: string;
+            hoverBg: string;
+            activeBg: string;
+            border: string;
+        };
+    };
+    switchKnob: {
+        checked: {
+            bg: string;
+            disabledBg: string;
+        };
+    };
     fg: {
         default: string;
         muted: string;

package/dist/js/colors/light_high_contrast.js

@@ -347,6 +347,22 @@ exports.default = {
             "hoverText": "#ffffff"
         }
     },
+    "switchTrack": {
+        "bg": "#ffffff",
+        "border": "#20252C",
+        "checked": {
+            "bg": "#dff7ff",
+            "hoverBg": "#9cd7ff",
+            "activeBg": "#67b3fd",
+            "border": "#0349b4"
+        }
+    },
+    "switchKnob": {
+        "checked": {
+            "bg": "#0349b4",
+            "disabledBg": "#66707B"
+        }
+    },
     "fg": {
         "default": "#0E1116",
         "muted": "#0E1116",

package/dist/js/index.d.ts

@@ -347,6 +347,22 @@ declare const _default: {
                     hoverText: string;
                 };
             };
+            switchTrack: {
+                bg: string;
+                border: string;
+                checked: {
+                    bg: string;
+                    hoverBg: string;
+                    activeBg: string;
+                    border: string;
+                };
+            };
+            switchKnob: {
+                checked: {
+                    bg: string;
+                    disabledBg: string;
+                };
+            };
             fg: {
                 default: string;
                 muted: string;
@@ -809,6 +825,22 @@ declare const _default: {
                     hoverText: string;
                 };
             };
+            switchTrack: {
+                bg: string;
+                border: string;
+                checked: {
+                    bg: string;
+                    hoverBg: string;
+                    activeBg: string;
+                    border: string;
+                };
+            };
+            switchKnob: {
+                checked: {
+                    bg: string;
+                    disabledBg: string;
+                };
+            };
             fg: {
                 default: string;
                 muted: string;
@@ -1271,6 +1303,22 @@ declare const _default: {
                     hoverText: string;
                 };
             };
+            switchTrack: {
+                bg: string;
+                border: string;
+                checked: {
+                    bg: string;
+                    hoverBg: string;
+                    activeBg: string;
+                    border: string;
+                };
+            };
+            switchKnob: {
+                checked: {
+                    bg: string;
+                    disabledBg: string;
+                };
+            };
             fg: {
                 default: string;
                 muted: string;
@@ -1733,6 +1781,22 @@ declare const _default: {
                     hoverText: string;
                 };
             };
+            switchTrack: {
+                bg: string;
+                border: string;
+                checked: {
+                    bg: string;
+                    hoverBg: string;
+                    activeBg: string;
+                    border: string;
+                };
+            };
+            switchKnob: {
+                checked: {
+                    bg: string;
+                    disabledBg: string;
+                };
+            };
             fg: {
                 default: string;
                 muted: string;
@@ -2195,6 +2259,22 @@ declare const _default: {
                     hoverText: string;
                 };
             };
+            switchTrack: {
+                bg: string;
+                border: string;
+                checked: {
+                    bg: string;
+                    hoverBg: string;
+                    activeBg: string;
+                    border: string;
+                };
+            };
+            switchKnob: {
+                checked: {
+                    bg: string;
+                    disabledBg: string;
+                };
+            };
             fg: {
                 default: string;
                 muted: string;
@@ -2657,6 +2737,22 @@ declare const _default: {
                     hoverText: string;
                 };
             };
+            switchTrack: {
+                bg: string;
+                border: string;
+                checked: {
+                    bg: string;
+                    hoverBg: string;
+                    activeBg: string;
+                    border: string;
+                };
+            };
+            switchKnob: {
+                checked: {
+                    bg: string;
+                    disabledBg: string;
+                };
+            };
             fg: {
                 default: string;
                 muted: string;
@@ -3119,6 +3215,22 @@ declare const _default: {
                     hoverText: string;
                 };
             };
+            switchTrack: {
+                bg: string;
+                border: string;
+                checked: {
+                    bg: string;
+                    hoverBg: string;
+                    activeBg: string;
+                    border: string;
+                };
+            };
+            switchKnob: {
+                checked: {
+                    bg: string;
+                    disabledBg: string;
+                };
+            };
             fg: {
                 default: string;
                 muted: string;

package/dist/json/colors/dark.json

@@ -345,6 +345,22 @@
       "hoverText": "#ff7b72"
     }
   },
+  "switchTrack": {
+    "bg": "#010409",
+    "border": "#6e7681",
+    "checked": {
+      "bg": "rgba(31,111,235,0.35)",
+      "hoverBg": "rgba(31,111,235,0.5)",
+      "activeBg": "rgba(31,111,235,0.65)",
+      "border": "#58a6ff"
+    }
+  },
+  "switchKnob": {
+    "checked": {
+      "bg": "#1f6feb",
+      "disabledBg": "#484f58"
+    }
+  },
   "fg": {
     "default": "#c9d1d9",
     "muted": "#8b949e",

package/dist/json/colors/dark_colorblind.json

@@ -345,6 +345,22 @@
       "hoverText": "#ec8e2c"
     }
   },
+  "switchTrack": {
+    "bg": "#010409",
+    "border": "#6e7681",
+    "checked": {
+      "bg": "rgba(31,111,235,0.35)",
+      "hoverBg": "rgba(31,111,235,0.5)",
+      "activeBg": "rgba(31,111,235,0.65)",
+      "border": "#58a6ff"
+    }
+  },
+  "switchKnob": {
+    "checked": {
+      "bg": "#1f6feb",
+      "disabledBg": "#484f58"
+    }
+  },
   "fg": {
     "default": "#c9d1d9",
     "muted": "#8b949e",

package/dist/json/colors/dark_dimmed.json

@@ -345,6 +345,22 @@
       "hoverText": "#f47067"
     }
   },
+  "switchTrack": {
+    "bg": "#1c2128",
+    "border": "#636e7b",
+    "checked": {
+      "bg": "rgba(49,109,202,0.35)",
+      "hoverBg": "rgba(49,109,202,0.5)",
+      "activeBg": "rgba(49,109,202,0.65)",
+      "border": "#539bf5"
+    }
+  },
+  "switchKnob": {
+    "checked": {
+      "bg": "#316dca",
+      "disabledBg": "#545d68"
+    }
+  },
   "fg": {
     "default": "#adbac7",
     "muted": "#768390",

package/dist/json/colors/dark_high_contrast.json

@@ -345,6 +345,22 @@
       "hoverText": "#0a0c10"
     }
   },
+  "switchTrack": {
+    "bg": "#010409",
+    "border": "#7a828e",
+    "checked": {
+      "bg": "rgba(64,158,255,0.35)",
+      "hoverBg": "rgba(64,158,255,0.5)",
+      "activeBg": "rgba(64,158,255,0.65)",
+      "border": "#409eff"
+    }
+  },
+  "switchKnob": {
+    "checked": {
+      "bg": "#409eff",
+      "disabledBg": "#7a828e"
+    }
+  },
   "fg": {
     "default": "#f0f3f6",
     "muted": "#f0f3f6",

package/dist/json/colors/light.json

@@ -345,6 +345,22 @@
       "hoverText": "#cf222e"
     }
   },
+  "switchTrack": {
+    "bg": "#eaeef2",
+    "border": "#afb8c1",
+    "checked": {
+      "bg": "#ddf4ff",
+      "hoverBg": "#b6e3ff",
+      "activeBg": "#80ccff",
+      "border": "#54aeff"
+    }
+  },
+  "switchKnob": {
+    "checked": {
+      "bg": "#0969da",
+      "disabledBg": "#6e7781"
+    }
+  },
   "fg": {
     "default": "#24292f",
     "muted": "#57606a",

package/dist/json/colors/light_colorblind.json

@@ -345,6 +345,22 @@
       "hoverText": "#b35900"
     }
   },
+  "switchTrack": {
+    "bg": "#eaeef2",
+    "border": "#afb8c1",
+    "checked": {
+      "bg": "#ddf4ff",
+      "hoverBg": "#b6e3ff",
+      "activeBg": "#80ccff",
+      "border": "#54aeff"
+    }
+  },
+  "switchKnob": {
+    "checked": {
+      "bg": "#0969da",
+      "disabledBg": "#6e7781"
+    }
+  },
   "fg": {
     "default": "#24292f",
     "muted": "#57606a",

package/dist/json/colors/light_high_contrast.json

@@ -345,6 +345,22 @@
       "hoverText": "#ffffff"
     }
   },
+  "switchTrack": {
+    "bg": "#ffffff",
+    "border": "#20252C",
+    "checked": {
+      "bg": "#dff7ff",
+      "hoverBg": "#9cd7ff",
+      "activeBg": "#67b3fd",
+      "border": "#0349b4"
+    }
+  },
+  "switchKnob": {
+    "checked": {
+      "bg": "#0349b4",
+      "disabledBg": "#66707B"
+    }
+  },
   "fg": {
     "default": "#0E1116",
     "muted": "#0E1116",

package/dist/scss/colors/_dark.scss

@@ -270,6 +270,14 @@
     --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-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-fg-default: #c9d1d9;
     --color-fg-muted: #8b949e;
     --color-fg-subtle: #6e7681;

package/dist/scss/colors/_dark_colorblind.scss

@@ -270,6 +270,14 @@
     --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-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-fg-default: #c9d1d9;
     --color-fg-muted: #8b949e;
     --color-fg-subtle: #6e7681;

package/dist/scss/colors/_dark_dimmed.scss

@@ -270,6 +270,14 @@
     --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-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-fg-default: #adbac7;
     --color-fg-muted: #768390;
     --color-fg-subtle: #636e7b;

package/dist/scss/colors/_dark_high_contrast.scss

@@ -270,6 +270,14 @@
     --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-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-fg-default: #f0f3f6;
     --color-fg-muted: #f0f3f6;
     --color-fg-subtle: #9ea7b3;

package/dist/scss/colors/_light.scss

@@ -270,6 +270,14 @@
     --color-action-list-item-danger-hover-bg: rgba(255,235,233,0.64);
     --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-fg-default: #24292f;
     --color-fg-muted: #57606a;
     --color-fg-subtle: #6e7781;

package/dist/scss/colors/_light_colorblind.scss

@@ -270,6 +270,14 @@
     --color-action-list-item-danger-hover-bg: rgba(255,245,232,0.64);
     --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-fg-default: #24292f;
     --color-fg-muted: #57606a;
     --color-fg-subtle: #6e7781;

package/dist/scss/colors/_light_high_contrast.scss

@@ -270,6 +270,14 @@
     --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-fg-default: #0E1116;
     --color-fg-muted: #0E1116;
     --color-fg-subtle: #66707B;

package/dist/ts/colors/dark.ts

@@ -345,6 +345,22 @@ export default {
       "hoverText": "#ff7b72"
     }
   },
+  "switchTrack": {
+    "bg": "#010409",
+    "border": "#6e7681",
+    "checked": {
+      "bg": "rgba(31,111,235,0.35)",
+      "hoverBg": "rgba(31,111,235,0.5)",
+      "activeBg": "rgba(31,111,235,0.65)",
+      "border": "#58a6ff"
+    }
+  },
+  "switchKnob": {
+    "checked": {
+      "bg": "#1f6feb",
+      "disabledBg": "#484f58"
+    }
+  },
   "fg": {
     "default": "#c9d1d9",
     "muted": "#8b949e",

package/dist/ts/colors/dark_colorblind.ts

@@ -345,6 +345,22 @@ export default {
       "hoverText": "#ec8e2c"
     }
   },
+  "switchTrack": {
+    "bg": "#010409",
+    "border": "#6e7681",
+    "checked": {
+      "bg": "rgba(31,111,235,0.35)",
+      "hoverBg": "rgba(31,111,235,0.5)",
+      "activeBg": "rgba(31,111,235,0.65)",
+      "border": "#58a6ff"
+    }
+  },
+  "switchKnob": {
+    "checked": {
+      "bg": "#1f6feb",
+      "disabledBg": "#484f58"
+    }
+  },
   "fg": {
     "default": "#c9d1d9",
     "muted": "#8b949e",

package/dist/ts/colors/dark_dimmed.ts

@@ -345,6 +345,22 @@ export default {
       "hoverText": "#f47067"
     }
   },
+  "switchTrack": {
+    "bg": "#1c2128",
+    "border": "#636e7b",
+    "checked": {
+      "bg": "rgba(49,109,202,0.35)",
+      "hoverBg": "rgba(49,109,202,0.5)",
+      "activeBg": "rgba(49,109,202,0.65)",
+      "border": "#539bf5"
+    }
+  },
+  "switchKnob": {
+    "checked": {
+      "bg": "#316dca",
+      "disabledBg": "#545d68"
+    }
+  },
   "fg": {
     "default": "#adbac7",
     "muted": "#768390",

package/dist/ts/colors/dark_high_contrast.ts

@@ -345,6 +345,22 @@ export default {
       "hoverText": "#0a0c10"
     }
   },
+  "switchTrack": {
+    "bg": "#010409",
+    "border": "#7a828e",
+    "checked": {
+      "bg": "rgba(64,158,255,0.35)",
+      "hoverBg": "rgba(64,158,255,0.5)",
+      "activeBg": "rgba(64,158,255,0.65)",
+      "border": "#409eff"
+    }
+  },
+  "switchKnob": {
+    "checked": {
+      "bg": "#409eff",
+      "disabledBg": "#7a828e"
+    }
+  },
   "fg": {
     "default": "#f0f3f6",
     "muted": "#f0f3f6",

package/dist/ts/colors/light.ts

@@ -345,6 +345,22 @@ export default {
       "hoverText": "#cf222e"
     }
   },
+  "switchTrack": {
+    "bg": "#eaeef2",
+    "border": "#afb8c1",
+    "checked": {
+      "bg": "#ddf4ff",
+      "hoverBg": "#b6e3ff",
+      "activeBg": "#80ccff",
+      "border": "#54aeff"
+    }
+  },
+  "switchKnob": {
+    "checked": {
+      "bg": "#0969da",
+      "disabledBg": "#6e7781"
+    }
+  },
   "fg": {
     "default": "#24292f",
     "muted": "#57606a",

package/dist/ts/colors/light_colorblind.ts

@@ -345,6 +345,22 @@ export default {
       "hoverText": "#b35900"
     }
   },
+  "switchTrack": {
+    "bg": "#eaeef2",
+    "border": "#afb8c1",
+    "checked": {
+      "bg": "#ddf4ff",
+      "hoverBg": "#b6e3ff",
+      "activeBg": "#80ccff",
+      "border": "#54aeff"
+    }
+  },
+  "switchKnob": {
+    "checked": {
+      "bg": "#0969da",
+      "disabledBg": "#6e7781"
+    }
+  },
   "fg": {
     "default": "#24292f",
     "muted": "#57606a",

package/dist/ts/colors/light_high_contrast.ts

@@ -345,6 +345,22 @@ export default {
       "hoverText": "#ffffff"
     }
   },
+  "switchTrack": {
+    "bg": "#ffffff",
+    "border": "#20252C",
+    "checked": {
+      "bg": "#dff7ff",
+      "hoverBg": "#9cd7ff",
+      "activeBg": "#67b3fd",
+      "border": "#0349b4"
+    }
+  },
+  "switchKnob": {
+    "checked": {
+      "bg": "#0349b4",
+      "disabledBg": "#66707B"
+    }
+  },
   "fg": {
     "default": "#0E1116",
     "muted": "#0E1116",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "7.5.2-rc.2ae21e0",
+  "version": "7.6.0-rc.8feb85c",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "files": [
     "dist"