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

package/dist/js/index.d.ts

@@ -2,6 +2,7 @@ declare const _default: {
     colors: {
         light: {
             canvasDefaultTransparent: string;
+            pageHeaderBg: string;
             marketingIcon: {
                 primary: string;
                 secondary: string;
@@ -212,6 +213,7 @@ declare const _default: {
             header: {
                 text: string;
                 bg: string;
+                divider: string;
                 logo: string;
             };
             headerSearch: {
@@ -334,7 +336,9 @@ declare const _default: {
                 inlineDivider: string;
                 default: {
                     hoverBg: string;
+                    hoverBorder: string;
                     activeBg: string;
+                    activeBorder: string;
                     selectedBg: string;
                 };
                 danger: {
@@ -448,6 +452,7 @@ declare const _default: {
         };
         light_high_contrast: {
             canvasDefaultTransparent: string;
+            pageHeaderBg: string;
             marketingIcon: {
                 primary: string;
                 secondary: string;
@@ -658,6 +663,7 @@ declare const _default: {
             header: {
                 text: string;
                 bg: string;
+                divider: string;
                 logo: string;
             };
             headerSearch: {
@@ -780,7 +786,9 @@ declare const _default: {
                 inlineDivider: string;
                 default: {
                     hoverBg: string;
+                    hoverBorder: string;
                     activeBg: string;
+                    activeBorder: string;
                     selectedBg: string;
                 };
                 danger: {
@@ -894,6 +902,7 @@ declare const _default: {
         };
         light_colorblind: {
             canvasDefaultTransparent: string;
+            pageHeaderBg: string;
             marketingIcon: {
                 primary: string;
                 secondary: string;
@@ -1104,6 +1113,7 @@ declare const _default: {
             header: {
                 text: string;
                 bg: string;
+                divider: string;
                 logo: string;
             };
             headerSearch: {
@@ -1226,7 +1236,9 @@ declare const _default: {
                 inlineDivider: string;
                 default: {
                     hoverBg: string;
+                    hoverBorder: string;
                     activeBg: string;
+                    activeBorder: string;
                     selectedBg: string;
                 };
                 danger: {
@@ -1340,6 +1352,7 @@ declare const _default: {
         };
         dark: {
             canvasDefaultTransparent: string;
+            pageHeaderBg: string;
             marketingIcon: {
                 primary: string;
                 secondary: string;
@@ -1550,6 +1563,7 @@ declare const _default: {
             header: {
                 text: string;
                 bg: string;
+                divider: string;
                 logo: string;
             };
             headerSearch: {
@@ -1672,7 +1686,9 @@ declare const _default: {
                 inlineDivider: string;
                 default: {
                     hoverBg: string;
+                    hoverBorder: string;
                     activeBg: string;
+                    activeBorder: string;
                     selectedBg: string;
                 };
                 danger: {
@@ -1786,6 +1802,7 @@ declare const _default: {
         };
         dark_dimmed: {
             canvasDefaultTransparent: string;
+            pageHeaderBg: string;
             marketingIcon: {
                 primary: string;
                 secondary: string;
@@ -1996,6 +2013,7 @@ declare const _default: {
             header: {
                 text: string;
                 bg: string;
+                divider: string;
                 logo: string;
             };
             headerSearch: {
@@ -2118,7 +2136,9 @@ declare const _default: {
                 inlineDivider: string;
                 default: {
                     hoverBg: string;
+                    hoverBorder: string;
                     activeBg: string;
+                    activeBorder: string;
                     selectedBg: string;
                 };
                 danger: {
@@ -2232,6 +2252,7 @@ declare const _default: {
         };
         dark_high_contrast: {
             canvasDefaultTransparent: string;
+            pageHeaderBg: string;
             marketingIcon: {
                 primary: string;
                 secondary: string;
@@ -2442,6 +2463,7 @@ declare const _default: {
             header: {
                 text: string;
                 bg: string;
+                divider: string;
                 logo: string;
             };
             headerSearch: {
@@ -2564,7 +2586,9 @@ declare const _default: {
                 inlineDivider: string;
                 default: {
                     hoverBg: string;
+                    hoverBorder: string;
                     activeBg: string;
+                    activeBorder: string;
                     selectedBg: string;
                 };
                 danger: {
@@ -2678,6 +2702,7 @@ declare const _default: {
         };
         dark_colorblind: {
             canvasDefaultTransparent: string;
+            pageHeaderBg: string;
             marketingIcon: {
                 primary: string;
                 secondary: string;
@@ -2888,6 +2913,7 @@ declare const _default: {
             header: {
                 text: string;
                 bg: string;
+                divider: string;
                 logo: string;
             };
             headerSearch: {
@@ -3010,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"
@@ -210,6 +211,7 @@
   "header": {
     "text": "rgba(240,246,252,0.7)",
     "bg": "#161b22",
+    "divider": "#8b949e",
     "logo": "#f0f6fc"
   },
   "headerSearch": {
@@ -332,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"
@@ -210,6 +211,7 @@
   "header": {
     "text": "rgba(240,246,252,0.7)",
     "bg": "#161b22",
+    "divider": "#8b949e",
     "logo": "#f0f6fc"
   },
   "headerSearch": {
@@ -332,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"
@@ -210,6 +211,7 @@
   "header": {
     "text": "rgba(205,217,229,0.7)",
     "bg": "#2d333b",
+    "divider": "#768390",
     "logo": "#cdd9e5"
   },
   "headerSearch": {
@@ -332,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"
@@ -23,7 +24,7 @@
       "numBg": "rgba(64,158,255,0.4)"
     },
     "expander": {
-      "icon": "#0a0c10"
+      "icon": "#f0f3f6"
     },
     "selectedLineHighlightMixBlendMode": "screen"
   },
@@ -210,6 +211,7 @@
   "header": {
     "text": "rgba(255,255,255,0.7)",
     "bg": "#272b33",
+    "divider": "#bdc4cc",
     "logo": "#ffffff"
   },
   "headerSearch": {
@@ -331,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"
@@ -210,6 +211,7 @@
   "header": {
     "text": "rgba(255,255,255,0.7)",
     "bg": "#24292f",
+    "divider": "#57606a",
     "logo": "#ffffff"
   },
   "headerSearch": {
@@ -332,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"
@@ -210,6 +211,7 @@
   "header": {
     "text": "rgba(255,255,255,0.7)",
     "bg": "#24292f",
+    "divider": "#57606a",
     "logo": "#ffffff"
   },
   "headerSearch": {
@@ -332,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"
@@ -23,7 +24,7 @@
       "numBg": "#9cd7ff"
     },
     "expander": {
-      "icon": "#ffffff"
+      "icon": "#0E1116"
     },
     "selectedLineHighlightMixBlendMode": "multiply"
   },
@@ -210,6 +211,7 @@
   "header": {
     "text": "rgba(255,255,255,0.7)",
     "bg": "#0E1116",
+    "divider": "#ACB6C0",
     "logo": "#ffffff"
   },
   "headerSearch": {
@@ -329,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;
@@ -164,6 +165,7 @@
     --color-overlay-shadow: 0 0 0 1px #30363d, 0 16px 32px rgba(1,4,9,0.85);
     --color-header-text: rgba(240,246,252,0.7);
     --color-header-bg: #161b22;
+    --color-header-divider: #8b949e;
     --color-header-logo: #f0f6fc;
     --color-header-search-bg: #0d1117;
     --color-header-search-border: #30363d;
@@ -261,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;
@@ -164,6 +165,7 @@
     --color-overlay-shadow: 0 0 0 1px #30363d, 0 16px 32px rgba(1,4,9,0.85);
     --color-header-text: rgba(240,246,252,0.7);
     --color-header-bg: #161b22;
+    --color-header-divider: #8b949e;
     --color-header-logo: #f0f6fc;
     --color-header-search-bg: #0d1117;
     --color-header-search-border: #30363d;
@@ -261,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;
@@ -164,6 +165,7 @@
     --color-overlay-shadow: 0 0 0 1px #444c56, 0 16px 32px rgba(28,33,40,0.85);
     --color-header-text: rgba(205,217,229,0.7);
     --color-header-bg: #2d333b;
+    --color-header-divider: #768390;
     --color-header-logo: #cdd9e5;
     --color-header-search-bg: #22272e;
     --color-header-search-border: #444c56;
@@ -261,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;
@@ -14,7 +15,7 @@
     --color-diff-blob-deletion-line-bg: rgba(255,106,105,0.15);
     --color-diff-blob-deletion-word-bg: #ff6a69;
     --color-diff-blob-hunk-num-bg: rgba(64,158,255,0.4);
-    --color-diff-blob-expander-icon: #0a0c10;
+    --color-diff-blob-expander-icon: #f0f3f6;
     --color-diff-blob-selected-line-highlight-mix-blend-mode: screen;
     --color-diffstat-deletion-border: #ffb1af;
     --color-diffstat-addition-border: #4ae168;
@@ -164,6 +165,7 @@
     --color-overlay-shadow: 0 0 0 1px #525964, 0 16px 32px rgba(1,4,9,0.85);
     --color-header-text: rgba(255,255,255,0.7);
     --color-header-bg: #272b33;
+    --color-header-divider: #bdc4cc;
     --color-header-logo: #ffffff;
     --color-header-search-bg: #0a0c10;
     --color-header-search-border: #525964;
@@ -260,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;
@@ -164,6 +165,7 @@
     --color-overlay-shadow: 0 1px 3px rgba(27,31,36,0.12), 0 8px 24px rgba(66,74,83,0.12);
     --color-header-text: rgba(255,255,255,0.7);
     --color-header-bg: #24292f;
+    --color-header-divider: #57606a;
     --color-header-logo: #ffffff;
     --color-header-search-bg: #24292f;
     --color-header-search-border: #57606a;
@@ -261,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;
@@ -164,6 +165,7 @@
     --color-overlay-shadow: 0 1px 3px rgba(27,31,36,0.12), 0 8px 24px rgba(66,74,83,0.12);
     --color-header-text: rgba(255,255,255,0.7);
     --color-header-bg: #24292f;
+    --color-header-divider: #57606a;
     --color-header-logo: #ffffff;
     --color-header-search-bg: #24292f;
     --color-header-search-border: #57606a;
@@ -261,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;
@@ -14,7 +15,7 @@
     --color-diff-blob-deletion-line-bg: #fff0ee;
     --color-diff-blob-deletion-word-bg: #a0111f;
     --color-diff-blob-hunk-num-bg: #9cd7ff;
-    --color-diff-blob-expander-icon: #ffffff;
+    --color-diff-blob-expander-icon: #0E1116;
     --color-diff-blob-selected-line-highlight-mix-blend-mode: multiply;
     --color-diffstat-deletion-border: rgba(1,4,9,0.8);
     --color-diffstat-addition-border: rgba(1,4,9,0.8);
@@ -164,6 +165,7 @@
     --color-overlay-shadow: 0 1px 3px rgba(1,4,9,0.12), 0 8px 24px rgba(52,59,67,0.12);
     --color-header-text: rgba(255,255,255,0.7);
     --color-header-bg: #0E1116;
+    --color-header-divider: #ACB6C0;
     --color-header-logo: #ffffff;
     --color-header-search-bg: #0E1116;
     --color-header-search-border: #4B535D;
@@ -259,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"
@@ -210,6 +211,7 @@ export default {
   "header": {
     "text": "rgba(240,246,252,0.7)",
     "bg": "#161b22",
+    "divider": "#8b949e",
     "logo": "#f0f6fc"
   },
   "headerSearch": {
@@ -332,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"
@@ -210,6 +211,7 @@ export default {
   "header": {
     "text": "rgba(240,246,252,0.7)",
     "bg": "#161b22",
+    "divider": "#8b949e",
     "logo": "#f0f6fc"
   },
   "headerSearch": {
@@ -332,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": {