@primer/primitives 7.4.2-rc.b62f0f4 → 7.5.1-rc.79a6143

package/CHANGELOG.md

@@ -1,6 +1,16 @@
 # @primer/primitives
 
-## 7.4.2
+## 7.5.1
+
+### Patch Changes
+
+- [#304](https://github.com/primer/primitives/pull/304) [`94ae707`](https://github.com/primer/primitives/commit/94ae70763ac93e17c78bd5c2444d5ebb93fa0a7e) Thanks [@edokoa](https://github.com/edokoa)! - Change `scale.white` in dark mode to `#ffffff`
+
+## 7.5.0
+
+### Minor Changes
+
+- [#296](https://github.com/primer/primitives/pull/296) [`389b08b`](https://github.com/primer/primitives/commit/389b08bd09d965b117516ea5c72da64bc4cb03d9) Thanks [@simurai](https://github.com/simurai)! - Add `open` and `closed` roles
 
 ### Patch Changes
 

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

@@ -404,6 +404,18 @@ declare const _default: {
         muted: string;
         subtle: string;
     };
+    open: {
+        fg: string;
+        emphasis: string;
+        muted: string;
+        subtle: string;
+    };
+    closed: {
+        fg: string;
+        emphasis: string;
+        muted: string;
+        subtle: string;
+    };
     done: {
         fg: string;
         emphasis: string;

package/dist/js/colors/dark.js

@@ -133,7 +133,7 @@ exports.default = {
         "lineHoverBg": "rgba(110,118,129,0.1)",
         "lineSelectedBg": "rgba(56,139,253,0.15)",
         "lineSelectedNumText": "#58a6ff",
-        "lineDtFmText": "#f0f6fc",
+        "lineDtFmText": "#ffffff",
         "lineDtFmBg": "#9e6a03",
         "gateBg": "rgba(187,128,9,0.15)",
         "gateText": "#8b949e",
@@ -190,7 +190,7 @@ exports.default = {
         }
     },
     "avatar": {
-        "bg": "rgba(240,246,252,0.1)",
+        "bg": "rgba(255,255,255,0.1)",
         "border": "rgba(240,246,252,0.1)",
         "stackFade": "#30363d",
         "stackFadeMore": "#21262d",
@@ -211,7 +211,7 @@ exports.default = {
         "shadow": "0 0 0 1px #30363d, 0 16px 32px rgba(1,4,9,0.85)"
     },
     "header": {
-        "text": "rgba(240,246,252,0.7)",
+        "text": "rgba(255,255,255,0.7)",
         "bg": "#161b22",
         "divider": "#8b949e",
         "logo": "#f0f6fc"
@@ -236,7 +236,7 @@ exports.default = {
         "black": "#484f58",
         "blackBright": "#6e7681",
         "white": "#b1bac4",
-        "whiteBright": "#f0f6fc",
+        "whiteBright": "#ffffff",
         "gray": "#6e7681",
         "red": "#ff7b72",
         "redBright": "#ffa198",
@@ -278,14 +278,14 @@ exports.default = {
             "hoverBorder": "rgba(240,246,252,0.1)",
             "selectedBg": "#238636",
             "selectedShadow": "0 0 transparent",
-            "disabledText": "rgba(240,246,252,0.5)",
+            "disabledText": "rgba(255,255,255,0.5)",
             "disabledBg": "rgba(35,134,54,0.6)",
             "disabledBorder": "rgba(240,246,252,0.1)",
             "focusBg": "#238636",
             "focusBorder": "rgba(240,246,252,0.1)",
             "focusShadow": "0 0 0 3px rgba(46,164,79,0.4)",
-            "icon": "#f0f6fc",
-            "counterBg": "rgba(240,246,252,0.2)"
+            "icon": "#ffffff",
+            "counterBg": "rgba(255,255,255,0.2)"
         },
         "outline": {
             "text": "#58a6ff",
@@ -293,9 +293,9 @@ exports.default = {
             "hoverBg": "#30363d",
             "hoverBorder": "rgba(240,246,252,0.1)",
             "hoverShadow": "0 1px 0 rgba(1,4,9,0.1)",
-            "hoverInsetShadow": "inset 0 1px 0 rgba(240,246,252,0.03)",
-            "hoverCounterBg": "rgba(240,246,252,0.2)",
-            "selectedText": "#f0f6fc",
+            "hoverInsetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
+            "hoverCounterBg": "rgba(255,255,255,0.2)",
+            "selectedText": "#ffffff",
             "selectedBg": "#0d419d",
             "selectedBorder": "rgba(240,246,252,0.1)",
             "selectedShadow": "0 0 transparent",
@@ -308,12 +308,12 @@ exports.default = {
         },
         "danger": {
             "text": "#f85149",
-            "hoverText": "#f0f6fc",
+            "hoverText": "#ffffff",
             "hoverBg": "#da3633",
             "hoverBorder": "#f85149",
             "hoverShadow": "0 0 transparent",
             "hoverInsetShadow": "0 0 transparent",
-            "hoverIcon": "#f0f6fc",
+            "hoverIcon": "#ffffff",
             "hoverCounterBg": "rgba(255,255,255,0.2)",
             "selectedText": "#ffffff",
             "selectedBg": "#b62324",
@@ -351,7 +351,7 @@ exports.default = {
         "default": "#c9d1d9",
         "muted": "#8b949e",
         "subtle": "#484f58",
-        "onEmphasis": "#f0f6fc"
+        "onEmphasis": "#ffffff"
     },
     "canvas": {
         "default": "#0d1117",
@@ -406,6 +406,18 @@ exports.default = {
         "muted": "rgba(248,81,73,0.4)",
         "subtle": "rgba(248,81,73,0.15)"
     },
+    "open": {
+        "fg": "#3fb950",
+        "emphasis": "#238636",
+        "muted": "rgba(46,160,67,0.4)",
+        "subtle": "rgba(46,160,67,0.15)"
+    },
+    "closed": {
+        "fg": "#f85149",
+        "emphasis": "#da3633",
+        "muted": "rgba(248,81,73,0.4)",
+        "subtle": "rgba(248,81,73,0.15)"
+    },
     "done": {
         "fg": "#a371f7",
         "emphasis": "#8957e5",
@@ -428,7 +440,7 @@ exports.default = {
         },
         "border": {
             "active": "#F78166",
-            "contrast": "rgba(240,246,252,0.2)"
+            "contrast": "rgba(255,255,255,0.2)"
         },
         "shadow": {
             "highlight": "0 0 transparent",
@@ -438,7 +450,7 @@ exports.default = {
     },
     "scale": {
         "black": "#010409",
-        "white": "#f0f6fc",
+        "white": "#ffffff",
         "gray": [
             "#f0f6fc",
             "#c9d1d9",

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

@@ -404,6 +404,18 @@ declare const _default: {
         muted: string;
         subtle: string;
     };
+    open: {
+        fg: string;
+        emphasis: string;
+        muted: string;
+        subtle: string;
+    };
+    closed: {
+        fg: string;
+        emphasis: string;
+        muted: string;
+        subtle: string;
+    };
     done: {
         fg: string;
         emphasis: string;

package/dist/js/colors/dark_colorblind.js

@@ -133,7 +133,7 @@ exports.default = {
         "lineHoverBg": "rgba(110,118,129,0.1)",
         "lineSelectedBg": "rgba(56,139,253,0.15)",
         "lineSelectedNumText": "#58a6ff",
-        "lineDtFmText": "#f0f6fc",
+        "lineDtFmText": "#ffffff",
         "lineDtFmBg": "#9e6a03",
         "gateBg": "rgba(187,128,9,0.15)",
         "gateText": "#8b949e",
@@ -190,7 +190,7 @@ exports.default = {
         }
     },
     "avatar": {
-        "bg": "rgba(240,246,252,0.1)",
+        "bg": "rgba(255,255,255,0.1)",
         "border": "rgba(240,246,252,0.1)",
         "stackFade": "#30363d",
         "stackFadeMore": "#21262d",
@@ -211,7 +211,7 @@ exports.default = {
         "shadow": "0 0 0 1px #30363d, 0 16px 32px rgba(1,4,9,0.85)"
     },
     "header": {
-        "text": "rgba(240,246,252,0.7)",
+        "text": "rgba(255,255,255,0.7)",
         "bg": "#161b22",
         "divider": "#8b949e",
         "logo": "#f0f6fc"
@@ -236,7 +236,7 @@ exports.default = {
         "black": "#484f58",
         "blackBright": "#6e7681",
         "white": "#b1bac4",
-        "whiteBright": "#f0f6fc",
+        "whiteBright": "#ffffff",
         "gray": "#6e7681",
         "red": "#d69a00",
         "redBright": "#e6b716",
@@ -278,14 +278,14 @@ exports.default = {
             "hoverBorder": "rgba(240,246,252,0.1)",
             "selectedBg": "#1d69e0",
             "selectedShadow": "0 0 transparent",
-            "disabledText": "rgba(240,246,252,0.5)",
+            "disabledText": "rgba(255,255,255,0.5)",
             "disabledBg": "rgba(29,105,224,0.6)",
             "disabledBorder": "rgba(240,246,252,0.1)",
             "focusBg": "#1d69e0",
             "focusBorder": "rgba(240,246,252,0.1)",
             "focusShadow": "0 0 0 3px rgba(46,164,79,0.4)",
-            "icon": "#f0f6fc",
-            "counterBg": "rgba(240,246,252,0.2)"
+            "icon": "#ffffff",
+            "counterBg": "rgba(255,255,255,0.2)"
         },
         "outline": {
             "text": "#58a6ff",
@@ -293,9 +293,9 @@ exports.default = {
             "hoverBg": "#30363d",
             "hoverBorder": "rgba(240,246,252,0.1)",
             "hoverShadow": "0 1px 0 rgba(1,4,9,0.1)",
-            "hoverInsetShadow": "inset 0 1px 0 rgba(240,246,252,0.03)",
-            "hoverCounterBg": "rgba(240,246,252,0.2)",
-            "selectedText": "#f0f6fc",
+            "hoverInsetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
+            "hoverCounterBg": "rgba(255,255,255,0.2)",
+            "selectedText": "#ffffff",
             "selectedBg": "#0d419d",
             "selectedBorder": "rgba(240,246,252,0.1)",
             "selectedShadow": "0 0 transparent",
@@ -308,12 +308,12 @@ exports.default = {
         },
         "danger": {
             "text": "#c38000",
-            "hoverText": "#f0f6fc",
+            "hoverText": "#ffffff",
             "hoverBg": "#a66900",
             "hoverBorder": "#c38000",
             "hoverShadow": "0 0 transparent",
             "hoverInsetShadow": "0 0 transparent",
-            "hoverIcon": "#f0f6fc",
+            "hoverIcon": "#ffffff",
             "hoverCounterBg": "rgba(255,255,255,0.2)",
             "selectedText": "#ffffff",
             "selectedBg": "#865401",
@@ -351,7 +351,7 @@ exports.default = {
         "default": "#c9d1d9",
         "muted": "#8b949e",
         "subtle": "#484f58",
-        "onEmphasis": "#f0f6fc"
+        "onEmphasis": "#ffffff"
     },
     "canvas": {
         "default": "#0d1117",
@@ -406,6 +406,18 @@ exports.default = {
         "muted": "rgba(195,128,0,0.4)",
         "subtle": "rgba(195,128,0,0.15)"
     },
+    "open": {
+        "fg": "#f0883e",
+        "emphasis": "#bd561d",
+        "muted": "rgba(219,109,40,0.4)",
+        "subtle": "rgba(219,109,40,0.15)"
+    },
+    "closed": {
+        "fg": "#6e7681",
+        "emphasis": "#484f58",
+        "muted": "rgba(110,118,129,0.4)",
+        "subtle": "rgba(110,118,129,0.15)"
+    },
     "done": {
         "fg": "#a371f7",
         "emphasis": "#8957e5",
@@ -428,7 +440,7 @@ exports.default = {
         },
         "border": {
             "active": "#F78166",
-            "contrast": "rgba(240,246,252,0.2)"
+            "contrast": "rgba(255,255,255,0.2)"
         },
         "shadow": {
             "highlight": "0 0 transparent",
@@ -438,7 +450,7 @@ exports.default = {
     },
     "scale": {
         "black": "#010409",
-        "white": "#f0f6fc",
+        "white": "#ffffff",
         "gray": [
             "#f0f6fc",
             "#c9d1d9",

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

@@ -404,6 +404,18 @@ declare const _default: {
         muted: string;
         subtle: string;
     };
+    open: {
+        fg: string;
+        emphasis: string;
+        muted: string;
+        subtle: string;
+    };
+    closed: {
+        fg: string;
+        emphasis: string;
+        muted: string;
+        subtle: string;
+    };
     done: {
         fg: string;
         emphasis: string;

package/dist/js/colors/dark_dimmed.js

@@ -406,6 +406,18 @@ exports.default = {
         "muted": "rgba(229,83,75,0.4)",
         "subtle": "rgba(229,83,75,0.15)"
     },
+    "open": {
+        "fg": "#57ab5a",
+        "emphasis": "#347d39",
+        "muted": "rgba(70,149,74,0.4)",
+        "subtle": "rgba(70,149,74,0.15)"
+    },
+    "closed": {
+        "fg": "#e5534b",
+        "emphasis": "#c93c37",
+        "muted": "rgba(229,83,75,0.4)",
+        "subtle": "rgba(229,83,75,0.15)"
+    },
     "done": {
         "fg": "#986ee2",
         "emphasis": "#8256d0",

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

@@ -404,6 +404,18 @@ declare const _default: {
         muted: string;
         subtle: string;
     };
+    open: {
+        fg: string;
+        emphasis: string;
+        muted: string;
+        subtle: string;
+    };
+    closed: {
+        fg: string;
+        emphasis: string;
+        muted: string;
+        subtle: string;
+    };
     done: {
         fg: string;
         emphasis: string;

package/dist/js/colors/dark_high_contrast.js

@@ -406,6 +406,18 @@ exports.default = {
         "muted": "#ff6a69",
         "subtle": "rgba(255,106,105,0.15)"
     },
+    "open": {
+        "fg": "#26cd4d",
+        "emphasis": "#09b43a",
+        "muted": "rgba(9,180,58,0.4)",
+        "subtle": "rgba(9,180,58,0.15)"
+    },
+    "closed": {
+        "fg": "#ff6a69",
+        "emphasis": "#ff6a69",
+        "muted": "rgba(255,106,105,0.4)",
+        "subtle": "rgba(255,106,105,0.15)"
+    },
     "done": {
         "fg": "#b780ff",
         "emphasis": "#b87fff",

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

@@ -405,6 +405,18 @@ declare const _default: {
             muted: string;
             subtle: string;
         };
+        open: {
+            fg: string;
+            emphasis: string;
+            muted: string;
+            subtle: string;
+        };
+        closed: {
+            fg: string;
+            emphasis: string;
+            muted: string;
+            subtle: string;
+        };
         done: {
             fg: string;
             emphasis: string;
@@ -855,6 +867,18 @@ declare const _default: {
             muted: string;
             subtle: string;
         };
+        open: {
+            fg: string;
+            emphasis: string;
+            muted: string;
+            subtle: string;
+        };
+        closed: {
+            fg: string;
+            emphasis: string;
+            muted: string;
+            subtle: string;
+        };
         done: {
             fg: string;
             emphasis: string;
@@ -1305,6 +1329,18 @@ declare const _default: {
             muted: string;
             subtle: string;
         };
+        open: {
+            fg: string;
+            emphasis: string;
+            muted: string;
+            subtle: string;
+        };
+        closed: {
+            fg: string;
+            emphasis: string;
+            muted: string;
+            subtle: string;
+        };
         done: {
             fg: string;
             emphasis: string;
@@ -1755,6 +1791,18 @@ declare const _default: {
             muted: string;
             subtle: string;
         };
+        open: {
+            fg: string;
+            emphasis: string;
+            muted: string;
+            subtle: string;
+        };
+        closed: {
+            fg: string;
+            emphasis: string;
+            muted: string;
+            subtle: string;
+        };
         done: {
             fg: string;
             emphasis: string;
@@ -2205,6 +2253,18 @@ declare const _default: {
             muted: string;
             subtle: string;
         };
+        open: {
+            fg: string;
+            emphasis: string;
+            muted: string;
+            subtle: string;
+        };
+        closed: {
+            fg: string;
+            emphasis: string;
+            muted: string;
+            subtle: string;
+        };
         done: {
             fg: string;
             emphasis: string;
@@ -2655,6 +2715,18 @@ declare const _default: {
             muted: string;
             subtle: string;
         };
+        open: {
+            fg: string;
+            emphasis: string;
+            muted: string;
+            subtle: string;
+        };
+        closed: {
+            fg: string;
+            emphasis: string;
+            muted: string;
+            subtle: string;
+        };
         done: {
             fg: string;
             emphasis: string;
@@ -3105,6 +3177,18 @@ declare const _default: {
             muted: string;
             subtle: string;
         };
+        open: {
+            fg: string;
+            emphasis: string;
+            muted: string;
+            subtle: string;
+        };
+        closed: {
+            fg: string;
+            emphasis: string;
+            muted: string;
+            subtle: string;
+        };
         done: {
             fg: string;
             emphasis: string;

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

@@ -404,6 +404,18 @@ declare const _default: {
         muted: string;
         subtle: string;
     };
+    open: {
+        fg: string;
+        emphasis: string;
+        muted: string;
+        subtle: string;
+    };
+    closed: {
+        fg: string;
+        emphasis: string;
+        muted: string;
+        subtle: string;
+    };
     done: {
         fg: string;
         emphasis: string;

package/dist/js/colors/light.js

@@ -406,6 +406,18 @@ exports.default = {
         "muted": "rgba(255,129,130,0.4)",
         "subtle": "#FFEBE9"
     },
+    "open": {
+        "fg": "#1a7f37",
+        "emphasis": "#2da44e",
+        "muted": "rgba(74,194,107,0.4)",
+        "subtle": "#dafbe1"
+    },
+    "closed": {
+        "fg": "#cf222e",
+        "emphasis": "#cf222e",
+        "muted": "rgba(255,129,130,0.4)",
+        "subtle": "#FFEBE9"
+    },
     "done": {
         "fg": "#8250df",
         "emphasis": "#8250df",

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

@@ -404,6 +404,18 @@ declare const _default: {
         muted: string;
         subtle: string;
     };
+    open: {
+        fg: string;
+        emphasis: string;
+        muted: string;
+        subtle: string;
+    };
+    closed: {
+        fg: string;
+        emphasis: string;
+        muted: string;
+        subtle: string;
+    };
     done: {
         fg: string;
         emphasis: string;

package/dist/js/colors/light_colorblind.js

@@ -406,6 +406,18 @@ exports.default = {
         "muted": "rgba(231,161,0,0.4)",
         "subtle": "#fefe48"
     },
+    "open": {
+        "fg": "#bc4c00",
+        "emphasis": "#e16f24",
+        "muted": "rgba(251,143,68,0.4)",
+        "subtle": "#fff1e5"
+    },
+    "closed": {
+        "fg": "#6e7781",
+        "emphasis": "#6e7781",
+        "muted": "rgba(175,184,193,0.4)",
+        "subtle": "#f6f8fa"
+    },
     "done": {
         "fg": "#8250df",
         "emphasis": "#8250df",

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

@@ -404,6 +404,18 @@ declare const _default: {
         muted: string;
         subtle: string;
     };
+    open: {
+        fg: string;
+        emphasis: string;
+        muted: string;
+        subtle: string;
+    };
+    closed: {
+        fg: string;
+        emphasis: string;
+        muted: string;
+        subtle: string;
+    };
     done: {
         fg: string;
         emphasis: string;

package/dist/js/colors/light_high_contrast.js

@@ -406,6 +406,18 @@ exports.default = {
         "muted": "#ee5a5d",
         "subtle": "#fff0ee"
     },
+    "open": {
+        "fg": "#055d20",
+        "emphasis": "#117f32",
+        "muted": "rgba(38,161,72,0.4)",
+        "subtle": "#d2fedb"
+    },
+    "closed": {
+        "fg": "#a0111f",
+        "emphasis": "#a0111f",
+        "muted": "rgba(238,90,93,0.4)",
+        "subtle": "#fff0ee"
+    },
     "done": {
         "fg": "#622cbc",
         "emphasis": "#622cbc",