@primer/primitives 7.2.0-rc.a7c862d → 7.4.0-rc.4670d6c

package/CHANGELOG.md

@@ -1,15 +1,33 @@
 # @primer/primitives
 
+## 7.4.0
+
+### Minor Changes
+
+- [#283](https://github.com/primer/primitives/pull/283) [`1bcb44f`](https://github.com/primer/primitives/commit/1bcb44f51bbf612302e9204cf4e1dc187ec6be94) Thanks [@Juliusschaeper](https://github.com/Juliusschaeper)! - Background adjustments for High Contrast theme.
+
+## 7.3.0
+
+### Minor Changes
+
+- [#284](https://github.com/primer/primitives/pull/284) [`fc76170`](https://github.com/primer/primitives/commit/fc76170cc8e6ee59011d70857698867093f94d81) Thanks [@simurai](https://github.com/simurai)! - Add `pageHeaderBg` primitive
+
 ## 7.2.0
 
 ### Minor Changes
 
-- [#279](https://github.com/primer/primitives/pull/279) [`3729355`](https://github.com/primer/primitives/commit/3729355a30bd361f2be5da379cc85357f474d9a1) Thanks [@Juliusschaeper](https://github.com/Juliusschaeper)! - Add border to topic-tag and counters
+- [#282](https://github.com/primer/primitives/pull/282) [`71f5486`](https://github.com/primer/primitives/commit/71f548663a247c3ff347657ebaaceae7d1c458f5) Thanks [@simurai](https://github.com/simurai)! - Add `header.divider`
+
+* [#279](https://github.com/primer/primitives/pull/279) [`3729355`](https://github.com/primer/primitives/commit/3729355a30bd361f2be5da379cc85357f474d9a1) Thanks [@Juliusschaeper](https://github.com/Juliusschaeper)! - Add border to topic-tag and counters
 
 ### Patch Changes
 
 - [#277](https://github.com/primer/primitives/pull/277) [`3fda2d3`](https://github.com/primer/primitives/commit/3fda2d3eb43662331c1b93876267592bf7b9fcc3) Thanks [@Juliusschaeper](https://github.com/Juliusschaeper)! - Increased contrast in Light HC shades
 
+* [#281](https://github.com/primer/primitives/pull/281) [`8da4db2`](https://github.com/primer/primitives/commit/8da4db27af11bb011c2efcbe2e5eb736a09cbc55) Thanks [@simurai](https://github.com/simurai)! - Improve diff-blob-expander-icon (follow-up)
+
+- [#281](https://github.com/primer/primitives/pull/281) [`8da4db2`](https://github.com/primer/primitives/commit/8da4db27af11bb011c2efcbe2e5eb736a09cbc55) Thanks [@simurai](https://github.com/simurai)! - Improve diff-blob-expander
+
 * [#280](https://github.com/primer/primitives/pull/280) [`46d2c1e`](https://github.com/primer/primitives/commit/46d2c1eb5727ad6d68ba1ef8fc4c8f5241c2d857) Thanks [@simurai](https://github.com/simurai)! - Improve diff-blob-expander-icon
 
 ## 7.1.1

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

@@ -1,5 +1,6 @@
 declare const _default: {
     canvasDefaultTransparent: string;
+    pageHeaderBg: string;
     marketingIcon: {
         primary: string;
         secondary: string;
@@ -210,6 +211,7 @@ declare const _default: {
     header: {
         text: string;
         bg: string;
+        divider: string;
         logo: string;
     };
     headerSearch: {
@@ -332,7 +334,9 @@ declare const _default: {
         inlineDivider: string;
         default: {
             hoverBg: string;
+            hoverBorder: string;
             activeBg: string;
+            activeBorder: string;
             selectedBg: string;
         };
         danger: {

package/dist/js/colors/dark.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
     "canvasDefaultTransparent": "rgba(13,17,23,0)",
+    "pageHeaderBg": "#0d1117",
     "marketingIcon": {
         "primary": "#79c0ff",
         "secondary": "#1f6feb"
@@ -212,6 +213,7 @@ exports.default = {
     "header": {
         "text": "rgba(240,246,252,0.7)",
         "bg": "#161b22",
+        "divider": "#8b949e",
         "logo": "#f0f6fc"
     },
     "headerSearch": {
@@ -334,7 +336,9 @@ exports.default = {
         "inlineDivider": "rgba(48,54,61,0.48)",
         "default": {
             "hoverBg": "rgba(177,186,196,0.12)",
+            "hoverBorder": "rgba(0,0,0,0)",
             "activeBg": "rgba(177,186,196,0.2)",
+            "activeBorder": "rgba(0,0,0,0)",
             "selectedBg": "rgba(177,186,196,0.08)"
         },
         "danger": {

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

@@ -1,5 +1,6 @@
 declare const _default: {
     canvasDefaultTransparent: string;
+    pageHeaderBg: string;
     marketingIcon: {
         primary: string;
         secondary: string;
@@ -210,6 +211,7 @@ declare const _default: {
     header: {
         text: string;
         bg: string;
+        divider: string;
         logo: string;
     };
     headerSearch: {
@@ -332,7 +334,9 @@ declare const _default: {
         inlineDivider: string;
         default: {
             hoverBg: string;
+            hoverBorder: string;
             activeBg: string;
+            activeBorder: string;
             selectedBg: string;
         };
         danger: {

package/dist/js/colors/dark_colorblind.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
     "canvasDefaultTransparent": "rgba(13,17,23,0)",
+    "pageHeaderBg": "#0d1117",
     "marketingIcon": {
         "primary": "#79c0ff",
         "secondary": "#1f6feb"
@@ -212,6 +213,7 @@ exports.default = {
     "header": {
         "text": "rgba(240,246,252,0.7)",
         "bg": "#161b22",
+        "divider": "#8b949e",
         "logo": "#f0f6fc"
     },
     "headerSearch": {
@@ -334,7 +336,9 @@ exports.default = {
         "inlineDivider": "rgba(48,54,61,0.48)",
         "default": {
             "hoverBg": "rgba(177,186,196,0.12)",
+            "hoverBorder": "rgba(0,0,0,0)",
             "activeBg": "rgba(177,186,196,0.2)",
+            "activeBorder": "rgba(0,0,0,0)",
             "selectedBg": "rgba(177,186,196,0.08)"
         },
         "danger": {

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

@@ -1,5 +1,6 @@
 declare const _default: {
     canvasDefaultTransparent: string;
+    pageHeaderBg: string;
     marketingIcon: {
         primary: string;
         secondary: string;
@@ -210,6 +211,7 @@ declare const _default: {
     header: {
         text: string;
         bg: string;
+        divider: string;
         logo: string;
     };
     headerSearch: {
@@ -332,7 +334,9 @@ declare const _default: {
         inlineDivider: string;
         default: {
             hoverBg: string;
+            hoverBorder: string;
             activeBg: string;
+            activeBorder: string;
             selectedBg: string;
         };
         danger: {

package/dist/js/colors/dark_dimmed.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
     "canvasDefaultTransparent": "rgba(34,39,46,0)",
+    "pageHeaderBg": "#22272e",
     "marketingIcon": {
         "primary": "#6cb6ff",
         "secondary": "#316dca"
@@ -212,6 +213,7 @@ exports.default = {
     "header": {
         "text": "rgba(205,217,229,0.7)",
         "bg": "#2d333b",
+        "divider": "#768390",
         "logo": "#cdd9e5"
     },
     "headerSearch": {
@@ -334,7 +336,9 @@ exports.default = {
         "inlineDivider": "rgba(68,76,86,0.48)",
         "default": {
             "hoverBg": "rgba(144,157,171,0.12)",
+            "hoverBorder": "rgba(0,0,0,0)",
             "activeBg": "rgba(144,157,171,0.2)",
+            "activeBorder": "rgba(0,0,0,0)",
             "selectedBg": "rgba(144,157,171,0.08)"
         },
         "danger": {

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

@@ -1,5 +1,6 @@
 declare const _default: {
     canvasDefaultTransparent: string;
+    pageHeaderBg: string;
     marketingIcon: {
         primary: string;
         secondary: string;
@@ -210,6 +211,7 @@ declare const _default: {
     header: {
         text: string;
         bg: string;
+        divider: string;
         logo: string;
     };
     headerSearch: {
@@ -332,7 +334,9 @@ declare const _default: {
         inlineDivider: string;
         default: {
             hoverBg: string;
+            hoverBorder: string;
             activeBg: string;
+            activeBorder: string;
             selectedBg: string;
         };
         danger: {

package/dist/js/colors/dark_high_contrast.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
     "canvasDefaultTransparent": "rgba(10,12,16,0)",
+    "pageHeaderBg": "#0a0c10",
     "marketingIcon": {
         "primary": "#91cbff",
         "secondary": "#409eff"
@@ -25,7 +26,7 @@ exports.default = {
             "numBg": "rgba(64,158,255,0.4)"
         },
         "expander": {
-            "icon": "#0a0c10"
+            "icon": "#f0f3f6"
         },
         "selectedLineHighlightMixBlendMode": "screen"
     },
@@ -212,6 +213,7 @@ exports.default = {
     "header": {
         "text": "rgba(255,255,255,0.7)",
         "bg": "#272b33",
+        "divider": "#bdc4cc",
         "logo": "#ffffff"
     },
     "headerSearch": {
@@ -333,9 +335,11 @@ exports.default = {
     "actionListItem": {
         "inlineDivider": "#7a828e",
         "default": {
-            "hoverBg": "rgba(217,222,227,0.12)",
-            "activeBg": "rgba(217,222,227,0.24)",
-            "selectedBg": "rgba(217,222,227,0.08)"
+            "hoverBg": "#272b33",
+            "hoverBorder": "#7a828e",
+            "activeBg": "#525964",
+            "activeBorder": "#9ea7b3",
+            "selectedBg": "#525964"
         },
         "danger": {
             "hoverBg": "#ff6a69",

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

@@ -1,6 +1,7 @@
 declare const _default: {
     light: {
         canvasDefaultTransparent: string;
+        pageHeaderBg: string;
         marketingIcon: {
             primary: string;
             secondary: string;
@@ -211,6 +212,7 @@ declare const _default: {
         header: {
             text: string;
             bg: string;
+            divider: string;
             logo: string;
         };
         headerSearch: {
@@ -333,7 +335,9 @@ declare const _default: {
             inlineDivider: string;
             default: {
                 hoverBg: string;
+                hoverBorder: string;
                 activeBg: string;
+                activeBorder: string;
                 selectedBg: string;
             };
             danger: {
@@ -447,6 +451,7 @@ declare const _default: {
     };
     light_high_contrast: {
         canvasDefaultTransparent: string;
+        pageHeaderBg: string;
         marketingIcon: {
             primary: string;
             secondary: string;
@@ -657,6 +662,7 @@ declare const _default: {
         header: {
             text: string;
             bg: string;
+            divider: string;
             logo: string;
         };
         headerSearch: {
@@ -779,7 +785,9 @@ declare const _default: {
             inlineDivider: string;
             default: {
                 hoverBg: string;
+                hoverBorder: string;
                 activeBg: string;
+                activeBorder: string;
                 selectedBg: string;
             };
             danger: {
@@ -893,6 +901,7 @@ declare const _default: {
     };
     light_colorblind: {
         canvasDefaultTransparent: string;
+        pageHeaderBg: string;
         marketingIcon: {
             primary: string;
             secondary: string;
@@ -1103,6 +1112,7 @@ declare const _default: {
         header: {
             text: string;
             bg: string;
+            divider: string;
             logo: string;
         };
         headerSearch: {
@@ -1225,7 +1235,9 @@ declare const _default: {
             inlineDivider: string;
             default: {
                 hoverBg: string;
+                hoverBorder: string;
                 activeBg: string;
+                activeBorder: string;
                 selectedBg: string;
             };
             danger: {
@@ -1339,6 +1351,7 @@ declare const _default: {
     };
     dark: {
         canvasDefaultTransparent: string;
+        pageHeaderBg: string;
         marketingIcon: {
             primary: string;
             secondary: string;
@@ -1549,6 +1562,7 @@ declare const _default: {
         header: {
             text: string;
             bg: string;
+            divider: string;
             logo: string;
         };
         headerSearch: {
@@ -1671,7 +1685,9 @@ declare const _default: {
             inlineDivider: string;
             default: {
                 hoverBg: string;
+                hoverBorder: string;
                 activeBg: string;
+                activeBorder: string;
                 selectedBg: string;
             };
             danger: {
@@ -1785,6 +1801,7 @@ declare const _default: {
     };
     dark_dimmed: {
         canvasDefaultTransparent: string;
+        pageHeaderBg: string;
         marketingIcon: {
             primary: string;
             secondary: string;
@@ -1995,6 +2012,7 @@ declare const _default: {
         header: {
             text: string;
             bg: string;
+            divider: string;
             logo: string;
         };
         headerSearch: {
@@ -2117,7 +2135,9 @@ declare const _default: {
             inlineDivider: string;
             default: {
                 hoverBg: string;
+                hoverBorder: string;
                 activeBg: string;
+                activeBorder: string;
                 selectedBg: string;
             };
             danger: {
@@ -2231,6 +2251,7 @@ declare const _default: {
     };
     dark_high_contrast: {
         canvasDefaultTransparent: string;
+        pageHeaderBg: string;
         marketingIcon: {
             primary: string;
             secondary: string;
@@ -2441,6 +2462,7 @@ declare const _default: {
         header: {
             text: string;
             bg: string;
+            divider: string;
             logo: string;
         };
         headerSearch: {
@@ -2563,7 +2585,9 @@ declare const _default: {
             inlineDivider: string;
             default: {
                 hoverBg: string;
+                hoverBorder: string;
                 activeBg: string;
+                activeBorder: string;
                 selectedBg: string;
             };
             danger: {
@@ -2677,6 +2701,7 @@ declare const _default: {
     };
     dark_colorblind: {
         canvasDefaultTransparent: string;
+        pageHeaderBg: string;
         marketingIcon: {
             primary: string;
             secondary: string;
@@ -2887,6 +2912,7 @@ declare const _default: {
         header: {
             text: string;
             bg: string;
+            divider: string;
             logo: string;
         };
         headerSearch: {
@@ -3009,7 +3035,9 @@ declare const _default: {
             inlineDivider: string;
             default: {
                 hoverBg: string;
+                hoverBorder: string;
                 activeBg: string;
+                activeBorder: string;
                 selectedBg: string;
             };
             danger: {

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

@@ -1,5 +1,6 @@
 declare const _default: {
     canvasDefaultTransparent: string;
+    pageHeaderBg: string;
     marketingIcon: {
         primary: string;
         secondary: string;
@@ -210,6 +211,7 @@ declare const _default: {
     header: {
         text: string;
         bg: string;
+        divider: string;
         logo: string;
     };
     headerSearch: {
@@ -332,7 +334,9 @@ declare const _default: {
         inlineDivider: string;
         default: {
             hoverBg: string;
+            hoverBorder: string;
             activeBg: string;
+            activeBorder: string;
             selectedBg: string;
         };
         danger: {

package/dist/js/colors/light.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
     "canvasDefaultTransparent": "rgba(255,255,255,0)",
+    "pageHeaderBg": "#f6f8fa",
     "marketingIcon": {
         "primary": "#218bff",
         "secondary": "#54aeff"
@@ -212,6 +213,7 @@ exports.default = {
     "header": {
         "text": "rgba(255,255,255,0.7)",
         "bg": "#24292f",
+        "divider": "#57606a",
         "logo": "#ffffff"
     },
     "headerSearch": {
@@ -334,7 +336,9 @@ exports.default = {
         "inlineDivider": "rgba(208,215,222,0.48)",
         "default": {
             "hoverBg": "rgba(208,215,222,0.32)",
+            "hoverBorder": "rgba(0,0,0,0)",
             "activeBg": "rgba(208,215,222,0.48)",
+            "activeBorder": "rgba(0,0,0,0)",
             "selectedBg": "rgba(208,215,222,0.24)"
         },
         "danger": {

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

@@ -1,5 +1,6 @@
 declare const _default: {
     canvasDefaultTransparent: string;
+    pageHeaderBg: string;
     marketingIcon: {
         primary: string;
         secondary: string;
@@ -210,6 +211,7 @@ declare const _default: {
     header: {
         text: string;
         bg: string;
+        divider: string;
         logo: string;
     };
     headerSearch: {
@@ -332,7 +334,9 @@ declare const _default: {
         inlineDivider: string;
         default: {
             hoverBg: string;
+            hoverBorder: string;
             activeBg: string;
+            activeBorder: string;
             selectedBg: string;
         };
         danger: {

package/dist/js/colors/light_colorblind.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
     "canvasDefaultTransparent": "rgba(255,255,255,0)",
+    "pageHeaderBg": "#f6f8fa",
     "marketingIcon": {
         "primary": "#218bff",
         "secondary": "#54aeff"
@@ -212,6 +213,7 @@ exports.default = {
     "header": {
         "text": "rgba(255,255,255,0.7)",
         "bg": "#24292f",
+        "divider": "#57606a",
         "logo": "#ffffff"
     },
     "headerSearch": {
@@ -334,7 +336,9 @@ exports.default = {
         "inlineDivider": "rgba(208,215,222,0.48)",
         "default": {
             "hoverBg": "rgba(208,215,222,0.32)",
+            "hoverBorder": "rgba(0,0,0,0)",
             "activeBg": "rgba(208,215,222,0.48)",
+            "activeBorder": "rgba(0,0,0,0)",
             "selectedBg": "rgba(208,215,222,0.24)"
         },
         "danger": {

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

@@ -1,5 +1,6 @@
 declare const _default: {
     canvasDefaultTransparent: string;
+    pageHeaderBg: string;
     marketingIcon: {
         primary: string;
         secondary: string;
@@ -210,6 +211,7 @@ declare const _default: {
     header: {
         text: string;
         bg: string;
+        divider: string;
         logo: string;
     };
     headerSearch: {
@@ -332,7 +334,9 @@ declare const _default: {
         inlineDivider: string;
         default: {
             hoverBg: string;
+            hoverBorder: string;
             activeBg: string;
+            activeBorder: string;
             selectedBg: string;
         };
         danger: {

package/dist/js/colors/light_high_contrast.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
     "canvasDefaultTransparent": "rgba(255,255,255,0)",
+    "pageHeaderBg": "#ffffff",
     "marketingIcon": {
         "primary": "#1168e3",
         "secondary": "#368cf9"
@@ -25,7 +26,7 @@ exports.default = {
             "numBg": "#9cd7ff"
         },
         "expander": {
-            "icon": "#ffffff"
+            "icon": "#0E1116"
         },
         "selectedLineHighlightMixBlendMode": "multiply"
     },
@@ -212,6 +213,7 @@ exports.default = {
     "header": {
         "text": "rgba(255,255,255,0.7)",
         "bg": "#0E1116",
+        "divider": "#ACB6C0",
         "logo": "#ffffff"
     },
     "headerSearch": {
@@ -331,16 +333,18 @@ exports.default = {
         "borderHover": "rgba(172,182,192,0.2)"
     },
     "actionListItem": {
-        "inlineDivider": "rgba(32,37,44,0.48)",
+        "inlineDivider": "#88929D",
         "default": {
-            "hoverBg": "rgba(206,213,220,0.32)",
-            "activeBg": "rgba(206,213,220,0.48)",
-            "selectedBg": "rgba(206,213,220,0.24)"
+            "hoverBg": "#E7ECF0",
+            "hoverBorder": "#88929D",
+            "activeBg": "#CED5DC",
+            "activeBorder": "#20252C",
+            "selectedBg": "#CED5DC"
         },
         "danger": {
-            "hoverBg": "rgba(255,240,238,0.64)",
-            "activeBg": "#fff0ee",
-            "hoverText": "#a0111f"
+            "hoverBg": "#a0111f",
+            "activeBg": "#6e011a",
+            "hoverText": "#ffffff"
         }
     },
     "fg": {