@primer/primitives 7.5.1 → 7.6.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @primer/primitives
 
+## 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
+
+- [#307](https://github.com/primer/primitives/pull/307) [`da4ffd3`](https://github.com/primer/primitives/commit/da4ffd338a41bb1f653e096c8b886db4834b3715) Thanks [@simurai](https://github.com/simurai)! - Increase contrast for dark `fg.subtle`
+
 ## 7.5.1
 
 ### 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

@@ -77,7 +77,7 @@ exports.default = {
         "bg": "#0d1117",
         "guttersBg": "#0d1117",
         "guttermarkerText": "#0d1117",
-        "guttermarkerSubtleText": "#484f58",
+        "guttermarkerSubtleText": "#6e7681",
         "linenumberText": "#8b949e",
         "cursor": "#c9d1d9",
         "selectionBg": "rgba(56,139,253,0.4)",
@@ -106,7 +106,7 @@ exports.default = {
         "btnHoverIcon": "#c9d1d9",
         "btnHoverBg": "rgba(110,118,129,0.1)",
         "inputText": "#8b949e",
-        "inputPlaceholderText": "#484f58",
+        "inputPlaceholderText": "#6e7681",
         "inputFocusText": "#c9d1d9",
         "inputBg": "#161b22",
         "inputShadow": "0 0 0 1px (obj) => get_1.default(obj, path)",
@@ -128,8 +128,8 @@ exports.default = {
         "headerBorder": "#21262d",
         "headerIcon": "#8b949e",
         "lineText": "#8b949e",
-        "lineNumText": "#484f58",
-        "lineTimestampText": "#484f58",
+        "lineNumText": "#6e7681",
+        "lineTimestampText": "#6e7681",
         "lineHoverBg": "rgba(110,118,129,0.1)",
         "lineSelectedBg": "rgba(56,139,253,0.15)",
         "lineSelectedNumText": "#58a6ff",
@@ -142,10 +142,10 @@ exports.default = {
         "stepErrorText": "#f85149",
         "stepWarningText": "#d29922",
         "loglineText": "#8b949e",
-        "loglineNumText": "#484f58",
+        "loglineNumText": "#6e7681",
         "loglineDebugText": "#a371f7",
         "loglineErrorText": "#8b949e",
-        "loglineErrorNumText": "#484f58",
+        "loglineErrorNumText": "#6e7681",
         "loglineErrorBg": "rgba(248,81,73,0.15)",
         "loglineWarningText": "#8b949e",
         "loglineWarningNumText": "#d29922",
@@ -329,7 +329,7 @@ exports.default = {
         }
     },
     "underlinenav": {
-        "icon": "#484f58",
+        "icon": "#6e7681",
         "borderHover": "rgba(110,118,129,0.4)"
     },
     "actionListItem": {
@@ -347,10 +347,26 @@ 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",
-        "subtle": "#484f58",
+        "subtle": "#6e7681",
         "onEmphasis": "#ffffff"
     },
     "canvas": {

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

@@ -77,7 +77,7 @@ exports.default = {
         "bg": "#0d1117",
         "guttersBg": "#0d1117",
         "guttermarkerText": "#0d1117",
-        "guttermarkerSubtleText": "#484f58",
+        "guttermarkerSubtleText": "#6e7681",
         "linenumberText": "#8b949e",
         "cursor": "#c9d1d9",
         "selectionBg": "rgba(56,139,253,0.4)",
@@ -106,7 +106,7 @@ exports.default = {
         "btnHoverIcon": "#c9d1d9",
         "btnHoverBg": "rgba(110,118,129,0.1)",
         "inputText": "#8b949e",
-        "inputPlaceholderText": "#484f58",
+        "inputPlaceholderText": "#6e7681",
         "inputFocusText": "#c9d1d9",
         "inputBg": "#161b22",
         "inputShadow": "0 0 0 1px (obj) => get_1.default(obj, path)",
@@ -128,8 +128,8 @@ exports.default = {
         "headerBorder": "#21262d",
         "headerIcon": "#8b949e",
         "lineText": "#8b949e",
-        "lineNumText": "#484f58",
-        "lineTimestampText": "#484f58",
+        "lineNumText": "#6e7681",
+        "lineTimestampText": "#6e7681",
         "lineHoverBg": "rgba(110,118,129,0.1)",
         "lineSelectedBg": "rgba(56,139,253,0.15)",
         "lineSelectedNumText": "#58a6ff",
@@ -142,10 +142,10 @@ exports.default = {
         "stepErrorText": "#d47616",
         "stepWarningText": "#d29922",
         "loglineText": "#8b949e",
-        "loglineNumText": "#484f58",
+        "loglineNumText": "#6e7681",
         "loglineDebugText": "#a371f7",
         "loglineErrorText": "#8b949e",
-        "loglineErrorNumText": "#484f58",
+        "loglineErrorNumText": "#6e7681",
         "loglineErrorBg": "rgba(212,118,22,0.15)",
         "loglineWarningText": "#8b949e",
         "loglineWarningNumText": "#d29922",
@@ -329,7 +329,7 @@ exports.default = {
         }
     },
     "underlinenav": {
-        "icon": "#484f58",
+        "icon": "#6e7681",
         "borderHover": "rgba(110,118,129,0.4)"
     },
     "actionListItem": {
@@ -347,10 +347,26 @@ 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",
-        "subtle": "#484f58",
+        "subtle": "#6e7681",
         "onEmphasis": "#ffffff"
     },
     "canvas": {

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

@@ -77,7 +77,7 @@ exports.default = {
         "bg": "#22272e",
         "guttersBg": "#22272e",
         "guttermarkerText": "#22272e",
-        "guttermarkerSubtleText": "#545d68",
+        "guttermarkerSubtleText": "#636e7b",
         "linenumberText": "#768390",
         "cursor": "#adbac7",
         "selectionBg": "rgba(65,132,228,0.4)",
@@ -106,7 +106,7 @@ exports.default = {
         "btnHoverIcon": "#adbac7",
         "btnHoverBg": "rgba(99,110,123,0.1)",
         "inputText": "#768390",
-        "inputPlaceholderText": "#545d68",
+        "inputPlaceholderText": "#636e7b",
         "inputFocusText": "#adbac7",
         "inputBg": "#2d333b",
         "inputShadow": "0 0 0 1px (obj) => get_1.default(obj, path)",
@@ -128,8 +128,8 @@ exports.default = {
         "headerBorder": "#373e47",
         "headerIcon": "#768390",
         "lineText": "#768390",
-        "lineNumText": "#545d68",
-        "lineTimestampText": "#545d68",
+        "lineNumText": "#636e7b",
+        "lineTimestampText": "#636e7b",
         "lineHoverBg": "rgba(99,110,123,0.1)",
         "lineSelectedBg": "rgba(65,132,228,0.15)",
         "lineSelectedNumText": "#539bf5",
@@ -142,10 +142,10 @@ exports.default = {
         "stepErrorText": "#e5534b",
         "stepWarningText": "#c69026",
         "loglineText": "#768390",
-        "loglineNumText": "#545d68",
+        "loglineNumText": "#636e7b",
         "loglineDebugText": "#986ee2",
         "loglineErrorText": "#768390",
-        "loglineErrorNumText": "#545d68",
+        "loglineErrorNumText": "#636e7b",
         "loglineErrorBg": "rgba(229,83,75,0.15)",
         "loglineWarningText": "#768390",
         "loglineWarningNumText": "#c69026",
@@ -329,7 +329,7 @@ exports.default = {
         }
     },
     "underlinenav": {
-        "icon": "#545d68",
+        "icon": "#636e7b",
         "borderHover": "rgba(99,110,123,0.4)"
     },
     "actionListItem": {
@@ -347,10 +347,26 @@ 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",
-        "subtle": "#545d68",
+        "subtle": "#636e7b",
         "onEmphasis": "#cdd9e5"
     },
     "canvas": {

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

@@ -77,7 +77,7 @@ exports.default = {
         "bg": "#0a0c10",
         "guttersBg": "#0a0c10",
         "guttermarkerText": "#0a0c10",
-        "guttermarkerSubtleText": "#7a828e",
+        "guttermarkerSubtleText": "#9ea7b3",
         "linenumberText": "#f0f3f6",
         "cursor": "#f0f3f6",
         "selectionBg": "rgba(64,158,255,0.4)",
@@ -106,7 +106,7 @@ exports.default = {
         "btnHoverIcon": "#f0f3f6",
         "btnHoverBg": "rgba(158,167,179,0.1)",
         "inputText": "#f0f3f6",
-        "inputPlaceholderText": "#7a828e",
+        "inputPlaceholderText": "#9ea7b3",
         "inputFocusText": "#f0f3f6",
         "inputBg": "#272b33",
         "inputShadow": "0 0 0 1px (obj) => get_1.default(obj, path)",
@@ -128,8 +128,8 @@ exports.default = {
         "headerBorder": "#7a828e",
         "headerIcon": "#f0f3f6",
         "lineText": "#f0f3f6",
-        "lineNumText": "#7a828e",
-        "lineTimestampText": "#7a828e",
+        "lineNumText": "#9ea7b3",
+        "lineTimestampText": "#9ea7b3",
         "lineHoverBg": "rgba(158,167,179,0.1)",
         "lineSelectedBg": "rgba(64,158,255,0.15)",
         "lineSelectedNumText": "#71b7ff",
@@ -142,10 +142,10 @@ exports.default = {
         "stepErrorText": "#ff6a69",
         "stepWarningText": "#f0b72f",
         "loglineText": "#f0f3f6",
-        "loglineNumText": "#7a828e",
+        "loglineNumText": "#9ea7b3",
         "loglineDebugText": "#b780ff",
         "loglineErrorText": "#f0f3f6",
-        "loglineErrorNumText": "#7a828e",
+        "loglineErrorNumText": "#9ea7b3",
         "loglineErrorBg": "rgba(255,106,105,0.15)",
         "loglineWarningText": "#f0f3f6",
         "loglineWarningNumText": "#f0b72f",
@@ -347,10 +347,26 @@ 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",
-        "subtle": "#7a828e",
+        "subtle": "#9ea7b3",
         "onEmphasis": "#0a0c10"
     },
     "canvas": {

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",