@primer/primitives 7.2.0 → 7.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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

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

@@ -1,5 +1,6 @@
 declare const _default: {
     canvasDefaultTransparent: string;
+    pageHeaderBg: string;
     marketingIcon: {
         primary: string;
         secondary: string;
@@ -333,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"
@@ -335,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;
@@ -333,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"
@@ -335,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;
@@ -333,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"
@@ -335,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;
@@ -333,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"
@@ -334,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;
@@ -334,7 +335,9 @@ declare const _default: {
             inlineDivider: string;
             default: {
                 hoverBg: string;
+                hoverBorder: string;
                 activeBg: string;
+                activeBorder: string;
                 selectedBg: string;
             };
             danger: {
@@ -448,6 +451,7 @@ declare const _default: {
     };
     light_high_contrast: {
         canvasDefaultTransparent: string;
+        pageHeaderBg: string;
         marketingIcon: {
             primary: string;
             secondary: string;
@@ -781,7 +785,9 @@ declare const _default: {
             inlineDivider: string;
             default: {
                 hoverBg: string;
+                hoverBorder: string;
                 activeBg: string;
+                activeBorder: string;
                 selectedBg: string;
             };
             danger: {
@@ -895,6 +901,7 @@ declare const _default: {
     };
     light_colorblind: {
         canvasDefaultTransparent: string;
+        pageHeaderBg: string;
         marketingIcon: {
             primary: string;
             secondary: string;
@@ -1228,7 +1235,9 @@ declare const _default: {
             inlineDivider: string;
             default: {
                 hoverBg: string;
+                hoverBorder: string;
                 activeBg: string;
+                activeBorder: string;
                 selectedBg: string;
             };
             danger: {
@@ -1342,6 +1351,7 @@ declare const _default: {
     };
     dark: {
         canvasDefaultTransparent: string;
+        pageHeaderBg: string;
         marketingIcon: {
             primary: string;
             secondary: string;
@@ -1675,7 +1685,9 @@ declare const _default: {
             inlineDivider: string;
             default: {
                 hoverBg: string;
+                hoverBorder: string;
                 activeBg: string;
+                activeBorder: string;
                 selectedBg: string;
             };
             danger: {
@@ -1789,6 +1801,7 @@ declare const _default: {
     };
     dark_dimmed: {
         canvasDefaultTransparent: string;
+        pageHeaderBg: string;
         marketingIcon: {
             primary: string;
             secondary: string;
@@ -2122,7 +2135,9 @@ declare const _default: {
             inlineDivider: string;
             default: {
                 hoverBg: string;
+                hoverBorder: string;
                 activeBg: string;
+                activeBorder: string;
                 selectedBg: string;
             };
             danger: {
@@ -2236,6 +2251,7 @@ declare const _default: {
     };
     dark_high_contrast: {
         canvasDefaultTransparent: string;
+        pageHeaderBg: string;
         marketingIcon: {
             primary: string;
             secondary: string;
@@ -2569,7 +2585,9 @@ declare const _default: {
             inlineDivider: string;
             default: {
                 hoverBg: string;
+                hoverBorder: string;
                 activeBg: string;
+                activeBorder: string;
                 selectedBg: string;
             };
             danger: {
@@ -2683,6 +2701,7 @@ declare const _default: {
     };
     dark_colorblind: {
         canvasDefaultTransparent: string;
+        pageHeaderBg: string;
         marketingIcon: {
             primary: string;
             secondary: string;
@@ -3016,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;
@@ -333,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"
@@ -335,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;
@@ -333,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"
@@ -335,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;
@@ -333,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"
@@ -332,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": {

package/dist/js/index.d.ts

@@ -2,6 +2,7 @@ declare const _default: {
     colors: {
         light: {
             canvasDefaultTransparent: string;
+            pageHeaderBg: string;
             marketingIcon: {
                 primary: string;
                 secondary: string;
@@ -335,7 +336,9 @@ declare const _default: {
                 inlineDivider: string;
                 default: {
                     hoverBg: string;
+                    hoverBorder: string;
                     activeBg: string;
+                    activeBorder: string;
                     selectedBg: string;
                 };
                 danger: {
@@ -449,6 +452,7 @@ declare const _default: {
         };
         light_high_contrast: {
             canvasDefaultTransparent: string;
+            pageHeaderBg: string;
             marketingIcon: {
                 primary: string;
                 secondary: string;
@@ -782,7 +786,9 @@ declare const _default: {
                 inlineDivider: string;
                 default: {
                     hoverBg: string;
+                    hoverBorder: string;
                     activeBg: string;
+                    activeBorder: string;
                     selectedBg: string;
                 };
                 danger: {
@@ -896,6 +902,7 @@ declare const _default: {
         };
         light_colorblind: {
             canvasDefaultTransparent: string;
+            pageHeaderBg: string;
             marketingIcon: {
                 primary: string;
                 secondary: string;
@@ -1229,7 +1236,9 @@ declare const _default: {
                 inlineDivider: string;
                 default: {
                     hoverBg: string;
+                    hoverBorder: string;
                     activeBg: string;
+                    activeBorder: string;
                     selectedBg: string;
                 };
                 danger: {
@@ -1343,6 +1352,7 @@ declare const _default: {
         };
         dark: {
             canvasDefaultTransparent: string;
+            pageHeaderBg: string;
             marketingIcon: {
                 primary: string;
                 secondary: string;
@@ -1676,7 +1686,9 @@ declare const _default: {
                 inlineDivider: string;
                 default: {
                     hoverBg: string;
+                    hoverBorder: string;
                     activeBg: string;
+                    activeBorder: string;
                     selectedBg: string;
                 };
                 danger: {
@@ -1790,6 +1802,7 @@ declare const _default: {
         };
         dark_dimmed: {
             canvasDefaultTransparent: string;
+            pageHeaderBg: string;
             marketingIcon: {
                 primary: string;
                 secondary: string;
@@ -2123,7 +2136,9 @@ declare const _default: {
                 inlineDivider: string;
                 default: {
                     hoverBg: string;
+                    hoverBorder: string;
                     activeBg: string;
+                    activeBorder: string;
                     selectedBg: string;
                 };
                 danger: {
@@ -2237,6 +2252,7 @@ declare const _default: {
         };
         dark_high_contrast: {
             canvasDefaultTransparent: string;
+            pageHeaderBg: string;
             marketingIcon: {
                 primary: string;
                 secondary: string;
@@ -2570,7 +2586,9 @@ declare const _default: {
                 inlineDivider: string;
                 default: {
                     hoverBg: string;
+                    hoverBorder: string;
                     activeBg: string;
+                    activeBorder: string;
                     selectedBg: string;
                 };
                 danger: {
@@ -2684,6 +2702,7 @@ declare const _default: {
         };
         dark_colorblind: {
             canvasDefaultTransparent: string;
+            pageHeaderBg: string;
             marketingIcon: {
                 primary: string;
                 secondary: string;
@@ -3017,7 +3036,9 @@ declare const _default: {
                 inlineDivider: string;
                 default: {
                     hoverBg: string;
+                    hoverBorder: string;
                     activeBg: string;
+                    activeBorder: string;
                     selectedBg: string;
                 };
                 danger: {

package/dist/json/colors/dark.json

@@ -1,5 +1,6 @@
 {
   "canvasDefaultTransparent": "rgba(13,17,23,0)",
+  "pageHeaderBg": "#0d1117",
   "marketingIcon": {
     "primary": "#79c0ff",
     "secondary": "#1f6feb"
@@ -333,7 +334,9 @@
     "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/json/colors/dark_colorblind.json

@@ -1,5 +1,6 @@
 {
   "canvasDefaultTransparent": "rgba(13,17,23,0)",
+  "pageHeaderBg": "#0d1117",
   "marketingIcon": {
     "primary": "#79c0ff",
     "secondary": "#1f6feb"
@@ -333,7 +334,9 @@
     "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/json/colors/dark_dimmed.json

@@ -1,5 +1,6 @@
 {
   "canvasDefaultTransparent": "rgba(34,39,46,0)",
+  "pageHeaderBg": "#22272e",
   "marketingIcon": {
     "primary": "#6cb6ff",
     "secondary": "#316dca"
@@ -333,7 +334,9 @@
     "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/json/colors/dark_high_contrast.json

@@ -1,5 +1,6 @@
 {
   "canvasDefaultTransparent": "rgba(10,12,16,0)",
+  "pageHeaderBg": "#0a0c10",
   "marketingIcon": {
     "primary": "#91cbff",
     "secondary": "#409eff"
@@ -332,9 +333,11 @@
   "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/json/colors/light.json

@@ -1,5 +1,6 @@
 {
   "canvasDefaultTransparent": "rgba(255,255,255,0)",
+  "pageHeaderBg": "#f6f8fa",
   "marketingIcon": {
     "primary": "#218bff",
     "secondary": "#54aeff"
@@ -333,7 +334,9 @@
     "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/json/colors/light_colorblind.json

@@ -1,5 +1,6 @@
 {
   "canvasDefaultTransparent": "rgba(255,255,255,0)",
+  "pageHeaderBg": "#f6f8fa",
   "marketingIcon": {
     "primary": "#218bff",
     "secondary": "#54aeff"
@@ -333,7 +334,9 @@
     "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/json/colors/light_high_contrast.json

@@ -1,5 +1,6 @@
 {
   "canvasDefaultTransparent": "rgba(255,255,255,0)",
+  "pageHeaderBg": "#ffffff",
   "marketingIcon": {
     "primary": "#1168e3",
     "secondary": "#368cf9"
@@ -330,16 +331,18 @@
     "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": {

package/dist/scss/colors/_dark.scss

@@ -1,6 +1,7 @@
 @mixin primer-colors-dark {
   & {
     --color-canvas-default-transparent: rgba(13,17,23,0);
+    --color-page-header-bg: #0d1117;
     --color-marketing-icon-primary: #79c0ff;
     --color-marketing-icon-secondary: #1f6feb;
     --color-diff-blob-addition-num-text: #c9d1d9;
@@ -262,7 +263,9 @@
     --color-underlinenav-border-hover: rgba(110,118,129,0.4);
     --color-action-list-item-inline-divider: rgba(48,54,61,0.48);
     --color-action-list-item-default-hover-bg: rgba(177,186,196,0.12);
+    --color-action-list-item-default-hover-border: rgba(0,0,0,0);
     --color-action-list-item-default-active-bg: rgba(177,186,196,0.2);
+    --color-action-list-item-default-active-border: rgba(0,0,0,0);
     --color-action-list-item-default-selected-bg: rgba(177,186,196,0.08);
     --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);

package/dist/scss/colors/_dark_colorblind.scss

@@ -1,6 +1,7 @@
 @mixin primer-colors-dark_colorblind {
   & {
     --color-canvas-default-transparent: rgba(13,17,23,0);
+    --color-page-header-bg: #0d1117;
     --color-marketing-icon-primary: #79c0ff;
     --color-marketing-icon-secondary: #1f6feb;
     --color-diff-blob-addition-num-text: #c9d1d9;
@@ -262,7 +263,9 @@
     --color-underlinenav-border-hover: rgba(110,118,129,0.4);
     --color-action-list-item-inline-divider: rgba(48,54,61,0.48);
     --color-action-list-item-default-hover-bg: rgba(177,186,196,0.12);
+    --color-action-list-item-default-hover-border: rgba(0,0,0,0);
     --color-action-list-item-default-active-bg: rgba(177,186,196,0.2);
+    --color-action-list-item-default-active-border: rgba(0,0,0,0);
     --color-action-list-item-default-selected-bg: rgba(177,186,196,0.08);
     --color-action-list-item-danger-hover-bg: rgba(195,128,0,0.16);
     --color-action-list-item-danger-active-bg: rgba(195,128,0,0.24);

package/dist/scss/colors/_dark_dimmed.scss

@@ -1,6 +1,7 @@
 @mixin primer-colors-dark_dimmed {
   & {
     --color-canvas-default-transparent: rgba(34,39,46,0);
+    --color-page-header-bg: #22272e;
     --color-marketing-icon-primary: #6cb6ff;
     --color-marketing-icon-secondary: #316dca;
     --color-diff-blob-addition-num-text: #adbac7;
@@ -262,7 +263,9 @@
     --color-underlinenav-border-hover: rgba(99,110,123,0.4);
     --color-action-list-item-inline-divider: rgba(68,76,86,0.48);
     --color-action-list-item-default-hover-bg: rgba(144,157,171,0.12);
+    --color-action-list-item-default-hover-border: rgba(0,0,0,0);
     --color-action-list-item-default-active-bg: rgba(144,157,171,0.2);
+    --color-action-list-item-default-active-border: rgba(0,0,0,0);
     --color-action-list-item-default-selected-bg: rgba(144,157,171,0.08);
     --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);

package/dist/scss/colors/_dark_high_contrast.scss

@@ -1,6 +1,7 @@
 @mixin primer-colors-dark_high_contrast {
   & {
     --color-canvas-default-transparent: rgba(10,12,16,0);
+    --color-page-header-bg: #0a0c10;
     --color-marketing-icon-primary: #91cbff;
     --color-marketing-icon-secondary: #409eff;
     --color-diff-blob-addition-num-text: #f0f3f6;
@@ -261,9 +262,11 @@
     --color-underlinenav-icon: #f0f3f6;
     --color-underlinenav-border-hover: #bdc4cc;
     --color-action-list-item-inline-divider: #7a828e;
-    --color-action-list-item-default-hover-bg: rgba(217,222,227,0.12);
-    --color-action-list-item-default-active-bg: rgba(217,222,227,0.24);
-    --color-action-list-item-default-selected-bg: rgba(217,222,227,0.08);
+    --color-action-list-item-default-hover-bg: #272b33;
+    --color-action-list-item-default-hover-border: #7a828e;
+    --color-action-list-item-default-active-bg: #525964;
+    --color-action-list-item-default-active-border: #9ea7b3;
+    --color-action-list-item-default-selected-bg: #525964;
     --color-action-list-item-danger-hover-bg: #ff6a69;
     --color-action-list-item-danger-active-bg: #ff4445;
     --color-action-list-item-danger-hover-text: #0a0c10;

package/dist/scss/colors/_light.scss

@@ -1,6 +1,7 @@
 @mixin primer-colors-light {
   & {
     --color-canvas-default-transparent: rgba(255,255,255,0);
+    --color-page-header-bg: #f6f8fa;
     --color-marketing-icon-primary: #218bff;
     --color-marketing-icon-secondary: #54aeff;
     --color-diff-blob-addition-num-text: #24292f;
@@ -262,7 +263,9 @@
     --color-underlinenav-border-hover: rgba(175,184,193,0.2);
     --color-action-list-item-inline-divider: rgba(208,215,222,0.48);
     --color-action-list-item-default-hover-bg: rgba(208,215,222,0.32);
+    --color-action-list-item-default-hover-border: rgba(0,0,0,0);
     --color-action-list-item-default-active-bg: rgba(208,215,222,0.48);
+    --color-action-list-item-default-active-border: rgba(0,0,0,0);
     --color-action-list-item-default-selected-bg: rgba(208,215,222,0.24);
     --color-action-list-item-danger-hover-bg: rgba(255,235,233,0.64);
     --color-action-list-item-danger-active-bg: #FFEBE9;

package/dist/scss/colors/_light_colorblind.scss

@@ -1,6 +1,7 @@
 @mixin primer-colors-light_colorblind {
   & {
     --color-canvas-default-transparent: rgba(255,255,255,0);
+    --color-page-header-bg: #f6f8fa;
     --color-marketing-icon-primary: #218bff;
     --color-marketing-icon-secondary: #54aeff;
     --color-diff-blob-addition-num-text: #24292f;
@@ -262,7 +263,9 @@
     --color-underlinenav-border-hover: rgba(175,184,193,0.2);
     --color-action-list-item-inline-divider: rgba(208,215,222,0.48);
     --color-action-list-item-default-hover-bg: rgba(208,215,222,0.32);
+    --color-action-list-item-default-hover-border: rgba(0,0,0,0);
     --color-action-list-item-default-active-bg: rgba(208,215,222,0.48);
+    --color-action-list-item-default-active-border: rgba(0,0,0,0);
     --color-action-list-item-default-selected-bg: rgba(208,215,222,0.24);
     --color-action-list-item-danger-hover-bg: rgba(254,254,72,0.64);
     --color-action-list-item-danger-active-bg: #fefe48;

package/dist/scss/colors/_light_high_contrast.scss

@@ -1,6 +1,7 @@
 @mixin primer-colors-light_high_contrast {
   & {
     --color-canvas-default-transparent: rgba(255,255,255,0);
+    --color-page-header-bg: #ffffff;
     --color-marketing-icon-primary: #1168e3;
     --color-marketing-icon-secondary: #368cf9;
     --color-diff-blob-addition-num-text: #0E1116;
@@ -260,13 +261,15 @@
     --color-btn-danger-hover-icon: #ffffff;
     --color-underlinenav-icon: #66707B;
     --color-underlinenav-border-hover: rgba(172,182,192,0.2);
-    --color-action-list-item-inline-divider: rgba(32,37,44,0.48);
-    --color-action-list-item-default-hover-bg: rgba(206,213,220,0.32);
-    --color-action-list-item-default-active-bg: rgba(206,213,220,0.48);
-    --color-action-list-item-default-selected-bg: rgba(206,213,220,0.24);
-    --color-action-list-item-danger-hover-bg: rgba(255,240,238,0.64);
-    --color-action-list-item-danger-active-bg: #fff0ee;
-    --color-action-list-item-danger-hover-text: #a0111f;
+    --color-action-list-item-inline-divider: #88929D;
+    --color-action-list-item-default-hover-bg: #E7ECF0;
+    --color-action-list-item-default-hover-border: #88929D;
+    --color-action-list-item-default-active-bg: #CED5DC;
+    --color-action-list-item-default-active-border: #20252C;
+    --color-action-list-item-default-selected-bg: #CED5DC;
+    --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-fg-default: #0E1116;
     --color-fg-muted: #0E1116;
     --color-fg-subtle: #66707B;

package/dist/ts/colors/dark.ts

@@ -1,5 +1,6 @@
 export default {
   "canvasDefaultTransparent": "rgba(13,17,23,0)",
+  "pageHeaderBg": "#0d1117",
   "marketingIcon": {
     "primary": "#79c0ff",
     "secondary": "#1f6feb"
@@ -333,7 +334,9 @@ export 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/ts/colors/dark_colorblind.ts

@@ -1,5 +1,6 @@
 export default {
   "canvasDefaultTransparent": "rgba(13,17,23,0)",
+  "pageHeaderBg": "#0d1117",
   "marketingIcon": {
     "primary": "#79c0ff",
     "secondary": "#1f6feb"
@@ -333,7 +334,9 @@ export 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/ts/colors/dark_dimmed.ts

@@ -1,5 +1,6 @@
 export default {
   "canvasDefaultTransparent": "rgba(34,39,46,0)",
+  "pageHeaderBg": "#22272e",
   "marketingIcon": {
     "primary": "#6cb6ff",
     "secondary": "#316dca"
@@ -333,7 +334,9 @@ export 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/ts/colors/dark_high_contrast.ts

@@ -1,5 +1,6 @@
 export default {
   "canvasDefaultTransparent": "rgba(10,12,16,0)",
+  "pageHeaderBg": "#0a0c10",
   "marketingIcon": {
     "primary": "#91cbff",
     "secondary": "#409eff"
@@ -332,9 +333,11 @@ export 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/ts/colors/light.ts

@@ -1,5 +1,6 @@
 export default {
   "canvasDefaultTransparent": "rgba(255,255,255,0)",
+  "pageHeaderBg": "#f6f8fa",
   "marketingIcon": {
     "primary": "#218bff",
     "secondary": "#54aeff"
@@ -333,7 +334,9 @@ export 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/ts/colors/light_colorblind.ts

@@ -1,5 +1,6 @@
 export default {
   "canvasDefaultTransparent": "rgba(255,255,255,0)",
+  "pageHeaderBg": "#f6f8fa",
   "marketingIcon": {
     "primary": "#218bff",
     "secondary": "#54aeff"
@@ -333,7 +334,9 @@ export 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/ts/colors/light_high_contrast.ts

@@ -1,5 +1,6 @@
 export default {
   "canvasDefaultTransparent": "rgba(255,255,255,0)",
+  "pageHeaderBg": "#ffffff",
   "marketingIcon": {
     "primary": "#1168e3",
     "secondary": "#368cf9"
@@ -330,16 +331,18 @@ export 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": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "7.2.0",
+  "version": "7.4.0",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "files": ["dist"],
   "main": "dist/js/index.js",