@primer/primitives 7.11.8-rc.f8fce74 → 7.11.8

package/dist/scss/colors/_dark_colorblind.scss

@@ -215,14 +215,14 @@
     --color-btn-primary-disabled-bg: rgba(31,111,235,0.6);
     --color-btn-primary-disabled-border: rgba(240,246,252,0.1);
     --color-btn-primary-icon: #ffffff;
-    --color-btn-primary-counter-bg: rgba(255,255,255,0.2);
-    --color-btn-outline-text: #58a6ff;
+    --color-btn-primary-counter-bg: rgba(5,29,77,0.2);
+    --color-btn-outline-text: #388bfd;
     --color-btn-outline-hover-text: #58a6ff;
     --color-btn-outline-hover-bg: #30363d;
     --color-btn-outline-hover-border: rgba(240,246,252,0.1);
     --color-btn-outline-hover-shadow: 0 1px 0 rgba(1,4,9,0.1);
     --color-btn-outline-hover-inset-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
-    --color-btn-outline-hover-counter-bg: rgba(255,255,255,0.2);
+    --color-btn-outline-hover-counter-bg: rgba(5,29,77,0.2);
     --color-btn-outline-selected-text: #ffffff;
     --color-btn-outline-selected-bg: #0d419d;
     --color-btn-outline-selected-border: rgba(240,246,252,0.1);
@@ -230,7 +230,10 @@
     --color-btn-outline-disabled-text: rgba(88,166,255,0.5);
     --color-btn-outline-disabled-bg: #0d1117;
     --color-btn-outline-disabled-counter-bg: rgba(31,111,235,0.05);
-    --color-btn-outline-counter-bg: rgba(31,111,235,0.1);
+    --color-btn-outline-counter-bg: rgba(5,29,77,0.2);
+    --color-btn-outline-hover-counter-fg: #58a6ff;
+    --color-btn-outline-disabled-counter-fg: rgba(88,166,255,0.5);
+    --color-btn-outline-counter-fg: #388bfd;
     --color-btn-danger-text: #d47616;
     --color-btn-danger-hover-text: #ffffff;
     --color-btn-danger-hover-bg: #b76100;
@@ -246,8 +249,11 @@
     --color-btn-danger-disabled-text: rgba(212,118,22,0.5);
     --color-btn-danger-disabled-bg: #0d1117;
     --color-btn-danger-disabled-counter-bg: rgba(183,97,0,0.05);
-    --color-btn-danger-counter-bg: rgba(183,97,0,0.1);
+    --color-btn-danger-counter-bg: rgba(51,28,4,0.2);
     --color-btn-danger-icon: #d47616;
+    --color-btn-danger-counter-fg: #d47616;
+    --color-btn-danger-disabled-counter-fg: rgba(212,118,22,0.5);
+    --color-btn-danger-hover-counter-fg: #ffffff;
     --color-underlinenav-icon: #6e7681;
     --color-underlinenav-border-hover: rgba(110,118,129,0.4);
     --color-action-list-item-inline-divider: rgba(48,54,61,0.48);

package/dist/scss/colors/_dark_dimmed.scss

@@ -215,14 +215,14 @@
     --color-btn-primary-disabled-bg: rgba(52,125,57,0.6);
     --color-btn-primary-disabled-border: rgba(205,217,229,0.1);
     --color-btn-primary-icon: #cdd9e5;
-    --color-btn-primary-counter-bg: rgba(205,217,229,0.2);
-    --color-btn-outline-text: #539bf5;
+    --color-btn-primary-counter-bg: rgba(17,52,23,0.2);
+    --color-btn-outline-text: #4184e4;
     --color-btn-outline-hover-text: #539bf5;
     --color-btn-outline-hover-bg: #444c56;
     --color-btn-outline-hover-border: rgba(205,217,229,0.1);
     --color-btn-outline-hover-shadow: 0 1px 0 rgba(28,33,40,0.1);
     --color-btn-outline-hover-inset-shadow: inset 0 1px 0 rgba(205,217,229,0.03);
-    --color-btn-outline-hover-counter-bg: rgba(205,217,229,0.2);
+    --color-btn-outline-hover-counter-bg: rgba(15,45,92,0.2);
     --color-btn-outline-selected-text: #cdd9e5;
     --color-btn-outline-selected-bg: #1b4b91;
     --color-btn-outline-selected-border: rgba(205,217,229,0.1);
@@ -230,7 +230,10 @@
     --color-btn-outline-disabled-text: rgba(83,155,245,0.5);
     --color-btn-outline-disabled-bg: #22272e;
     --color-btn-outline-disabled-counter-bg: rgba(49,109,202,0.05);
-    --color-btn-outline-counter-bg: rgba(49,109,202,0.1);
+    --color-btn-outline-counter-bg: rgba(15,45,92,0.2);
+    --color-btn-outline-hover-counter-fg: #539bf5;
+    --color-btn-outline-disabled-counter-fg: rgba(83,155,245,0.5);
+    --color-btn-outline-counter-fg: #4184e4;
     --color-btn-danger-text: #e5534b;
     --color-btn-danger-hover-text: #cdd9e5;
     --color-btn-danger-hover-bg: #c93c37;
@@ -246,8 +249,11 @@
     --color-btn-danger-disabled-text: rgba(229,83,75,0.5);
     --color-btn-danger-disabled-bg: #22272e;
     --color-btn-danger-disabled-counter-bg: rgba(201,60,55,0.05);
-    --color-btn-danger-counter-bg: rgba(201,60,55,0.1);
+    --color-btn-danger-counter-bg: rgba(93,15,18,0.2);
     --color-btn-danger-icon: #e5534b;
+    --color-btn-danger-counter-fg: #e5534b;
+    --color-btn-danger-disabled-counter-fg: rgba(229,83,75,0.5);
+    --color-btn-danger-hover-counter-fg: #cdd9e5;
     --color-underlinenav-icon: #636e7b;
     --color-underlinenav-border-hover: rgba(99,110,123,0.4);
     --color-action-list-item-inline-divider: rgba(68,76,86,0.48);

package/dist/scss/colors/_dark_high_contrast.scss

@@ -216,13 +216,13 @@
     --color-btn-primary-disabled-border: rgba(74,225,104,0.4);
     --color-btn-primary-icon: #0a0c10;
     --color-btn-primary-counter-bg: rgba(1,4,9,0.15);
-    --color-btn-outline-text: #71b7ff;
+    --color-btn-outline-text: #409eff;
     --color-btn-outline-hover-text: #71b7ff;
     --color-btn-outline-hover-bg: #525964;
     --color-btn-outline-hover-border: #7a828e;
     --color-btn-outline-hover-shadow: 0 1px 0 rgba(1,4,9,0.1);
     --color-btn-outline-hover-inset-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
-    --color-btn-outline-hover-counter-bg: rgba(255,255,255,0.2);
+    --color-btn-outline-hover-counter-bg: rgba(25,79,177,0.2);
     --color-btn-outline-selected-text: #ffffff;
     --color-btn-outline-selected-bg: #2672f3;
     --color-btn-outline-selected-border: #7a828e;
@@ -230,7 +230,10 @@
     --color-btn-outline-disabled-text: rgba(113,183,255,0.5);
     --color-btn-outline-disabled-bg: #0a0c10;
     --color-btn-outline-disabled-counter-bg: rgba(64,158,255,0.05);
-    --color-btn-outline-counter-bg: rgba(64,158,255,0.1);
+    --color-btn-outline-counter-bg: rgba(25,79,177,0.2);
+    --color-btn-outline-hover-counter-fg: #71b7ff;
+    --color-btn-outline-disabled-counter-fg: rgba(113,183,255,0.5);
+    --color-btn-outline-counter-fg: #409eff;
     --color-btn-danger-text: #ff6a69;
     --color-btn-danger-hover-text: #0a0c10;
     --color-btn-danger-hover-bg: #ff6a69;
@@ -248,6 +251,9 @@
     --color-btn-danger-disabled-counter-bg: rgba(255,106,105,0.05);
     --color-btn-danger-counter-bg: rgba(1,4,9,0.15);
     --color-btn-danger-icon: #ff6a69;
+    --color-btn-danger-counter-fg: #ff6a69;
+    --color-btn-danger-disabled-counter-fg: rgba(255,106,105,0.5);
+    --color-btn-danger-hover-counter-fg: #ffffff;
     --color-underlinenav-icon: #f0f3f6;
     --color-underlinenav-border-hover: #bdc4cc;
     --color-action-list-item-inline-divider: #7a828e;

package/dist/scss/colors/_dark_tritanopia.scss

@@ -215,14 +215,14 @@
     --color-btn-primary-disabled-bg: rgba(31,111,235,0.6);
     --color-btn-primary-disabled-border: rgba(240,246,252,0.1);
     --color-btn-primary-icon: #ffffff;
-    --color-btn-primary-counter-bg: rgba(255,255,255,0.2);
-    --color-btn-outline-text: #58a6ff;
+    --color-btn-primary-counter-bg: rgba(5,29,77,0.2);
+    --color-btn-outline-text: #388bfd;
     --color-btn-outline-hover-text: #58a6ff;
     --color-btn-outline-hover-bg: #30363d;
     --color-btn-outline-hover-border: rgba(240,246,252,0.1);
     --color-btn-outline-hover-shadow: 0 1px 0 rgba(1,4,9,0.1);
     --color-btn-outline-hover-inset-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
-    --color-btn-outline-hover-counter-bg: rgba(255,255,255,0.2);
+    --color-btn-outline-hover-counter-bg: rgba(5,29,77,0.2);
     --color-btn-outline-selected-text: #ffffff;
     --color-btn-outline-selected-bg: #0d419d;
     --color-btn-outline-selected-border: rgba(240,246,252,0.1);
@@ -230,7 +230,10 @@
     --color-btn-outline-disabled-text: rgba(88,166,255,0.5);
     --color-btn-outline-disabled-bg: #0d1117;
     --color-btn-outline-disabled-counter-bg: rgba(31,111,235,0.05);
-    --color-btn-outline-counter-bg: rgba(31,111,235,0.1);
+    --color-btn-outline-counter-bg: rgba(5,29,77,0.2);
+    --color-btn-outline-hover-counter-fg: #58a6ff;
+    --color-btn-outline-disabled-counter-fg: rgba(88,166,255,0.5);
+    --color-btn-outline-counter-fg: #388bfd;
     --color-btn-danger-text: #f85149;
     --color-btn-danger-hover-text: #ffffff;
     --color-btn-danger-hover-bg: #da3633;
@@ -246,8 +249,11 @@
     --color-btn-danger-disabled-text: rgba(248,81,73,0.5);
     --color-btn-danger-disabled-bg: #0d1117;
     --color-btn-danger-disabled-counter-bg: rgba(218,54,51,0.05);
-    --color-btn-danger-counter-bg: rgba(218,54,51,0.1);
+    --color-btn-danger-counter-bg: rgba(73,2,2,0.2);
     --color-btn-danger-icon: #f85149;
+    --color-btn-danger-counter-fg: #f85149;
+    --color-btn-danger-disabled-counter-fg: rgba(248,81,73,0.5);
+    --color-btn-danger-hover-counter-fg: #ffffff;
     --color-underlinenav-icon: #6e7681;
     --color-underlinenav-border-hover: rgba(110,118,129,0.4);
     --color-action-list-item-inline-divider: rgba(48,54,61,0.48);

package/dist/scss/colors/_light.scss

@@ -215,7 +215,7 @@
     --color-btn-primary-disabled-bg: #94d3a2;
     --color-btn-primary-disabled-border: rgba(31,35,40,0.15);
     --color-btn-primary-icon: rgba(255,255,255,0.8);
-    --color-btn-primary-counter-bg: rgba(255,255,255,0.2);
+    --color-btn-primary-counter-bg: rgba(0,45,17,0.2);
     --color-btn-outline-text: #0969da;
     --color-btn-outline-hover-text: #ffffff;
     --color-btn-outline-hover-bg: #0969da;
@@ -230,7 +230,10 @@
     --color-btn-outline-disabled-text: rgba(9,105,218,0.5);
     --color-btn-outline-disabled-bg: #f6f8fa;
     --color-btn-outline-disabled-counter-bg: rgba(9,105,218,0.05);
-    --color-btn-outline-counter-bg: rgba(9,105,218,0.1);
+    --color-btn-outline-counter-bg: #0969da1a;
+    --color-btn-outline-counter-fg: #0550ae;
+    --color-btn-outline-hover-counter-fg: #ffffff;
+    --color-btn-outline-disabled-counter-fg: rgba(9,105,218,0.5);
     --color-btn-danger-text: #cf222e;
     --color-btn-danger-hover-text: #ffffff;
     --color-btn-danger-hover-bg: #a40e26;
@@ -248,6 +251,9 @@
     --color-btn-danger-counter-bg: rgba(207,34,46,0.1);
     --color-btn-danger-icon: #cf222e;
     --color-btn-danger-hover-icon: #ffffff;
+    --color-btn-danger-counter-fg: #c21c2c;
+    --color-btn-danger-hover-counter-fg: #ffffff;
+    --color-btn-danger-disabled-counter-fg: rgba(207,34,46,0.5);
     --color-underlinenav-icon: #6e7781;
     --color-underlinenav-border-hover: rgba(175,184,193,0.2);
     --color-action-list-item-inline-divider: rgba(208,215,222,0.48);

package/dist/scss/colors/_light_colorblind.scss

@@ -215,7 +215,7 @@
     --color-btn-primary-disabled-bg: #80ccff;
     --color-btn-primary-disabled-border: rgba(27,31,36,0.15);
     --color-btn-primary-icon: rgba(255,255,255,0.8);
-    --color-btn-primary-counter-bg: rgba(255,255,255,0.2);
+    --color-btn-primary-counter-bg: rgba(0,33,85,0.2);
     --color-btn-outline-text: #0969da;
     --color-btn-outline-hover-text: #ffffff;
     --color-btn-outline-hover-bg: #0969da;
@@ -230,7 +230,10 @@
     --color-btn-outline-disabled-text: rgba(9,105,218,0.5);
     --color-btn-outline-disabled-bg: #f6f8fa;
     --color-btn-outline-disabled-counter-bg: rgba(9,105,218,0.05);
-    --color-btn-outline-counter-bg: rgba(9,105,218,0.1);
+    --color-btn-outline-counter-bg: #0969da1a;
+    --color-btn-outline-counter-fg: #0550ae;
+    --color-btn-outline-hover-counter-fg: #ffffff;
+    --color-btn-outline-disabled-counter-fg: rgba(9,105,218,0.5);
     --color-btn-danger-text: #b35900;
     --color-btn-danger-hover-text: #ffffff;
     --color-btn-danger-hover-bg: #8a4600;
@@ -248,6 +251,9 @@
     --color-btn-danger-counter-bg: rgba(179,89,0,0.1);
     --color-btn-danger-icon: #b35900;
     --color-btn-danger-hover-icon: #ffffff;
+    --color-btn-danger-counter-fg: #c21c2c;
+    --color-btn-danger-hover-counter-fg: #ffffff;
+    --color-btn-danger-disabled-counter-fg: rgba(179,89,0,0.5);
     --color-underlinenav-icon: #6e7781;
     --color-underlinenav-border-hover: rgba(175,184,193,0.2);
     --color-action-list-item-inline-divider: rgba(208,215,222,0.48);

package/dist/scss/colors/_light_high_contrast.scss

@@ -215,7 +215,7 @@
     --color-btn-primary-disabled-bg: #94d3a2;
     --color-btn-primary-disabled-border: rgba(1,4,9,0.8);
     --color-btn-primary-icon: rgba(255,255,255,0.8);
-    --color-btn-primary-counter-bg: rgba(255,255,255,0.2);
+    --color-btn-primary-counter-bg: rgba(0,35,11,0.2);
     --color-btn-outline-text: #023b95;
     --color-btn-outline-hover-text: #ffffff;
     --color-btn-outline-hover-bg: #0349b4;
@@ -230,7 +230,10 @@
     --color-btn-outline-disabled-text: rgba(3,73,180,0.5);
     --color-btn-outline-disabled-bg: #e7ecf0;
     --color-btn-outline-disabled-counter-bg: rgba(3,73,180,0.05);
-    --color-btn-outline-counter-bg: rgba(3,73,180,0.1);
+    --color-btn-outline-counter-bg: #0969da1a;
+    --color-btn-outline-counter-fg: #023b95;
+    --color-btn-outline-hover-counter-fg: #ffffff;
+    --color-btn-outline-disabled-counter-fg: rgba(3,73,180,0.5);
     --color-btn-danger-text: #86061d;
     --color-btn-danger-hover-text: #ffffff;
     --color-btn-danger-hover-bg: #a0111f;
@@ -248,6 +251,9 @@
     --color-btn-danger-counter-bg: rgba(160,17,31,0.1);
     --color-btn-danger-icon: #86061d;
     --color-btn-danger-hover-icon: #ffffff;
+    --color-btn-danger-counter-fg: #c21c2c;
+    --color-btn-danger-hover-counter-fg: #ffffff;
+    --color-btn-danger-disabled-counter-fg: rgba(160,17,31,0.5);
     --color-underlinenav-icon: #66707b;
     --color-underlinenav-border-hover: rgba(172,182,192,0.2);
     --color-action-list-item-inline-divider: #88929d;

package/dist/scss/colors/_light_tritanopia.scss

@@ -215,7 +215,7 @@
     --color-btn-primary-disabled-bg: #80ccff;
     --color-btn-primary-disabled-border: rgba(27,31,36,0.15);
     --color-btn-primary-icon: rgba(255,255,255,0.8);
-    --color-btn-primary-counter-bg: rgba(255,255,255,0.2);
+    --color-btn-primary-counter-bg: rgba(0,33,85,0.2);
     --color-btn-outline-text: #0969da;
     --color-btn-outline-hover-text: #ffffff;
     --color-btn-outline-hover-bg: #0969da;
@@ -230,7 +230,10 @@
     --color-btn-outline-disabled-text: rgba(9,105,218,0.5);
     --color-btn-outline-disabled-bg: #f6f8fa;
     --color-btn-outline-disabled-counter-bg: rgba(9,105,218,0.05);
-    --color-btn-outline-counter-bg: rgba(9,105,218,0.1);
+    --color-btn-outline-counter-bg: #0969da1a;
+    --color-btn-outline-counter-fg: #0550ae;
+    --color-btn-outline-hover-counter-fg: #ffffff;
+    --color-btn-outline-disabled-counter-fg: rgba(9,105,218,0.5);
     --color-btn-danger-text: #cf222e;
     --color-btn-danger-hover-text: #ffffff;
     --color-btn-danger-hover-bg: #a40e26;
@@ -248,6 +251,9 @@
     --color-btn-danger-counter-bg: rgba(207,34,46,0.1);
     --color-btn-danger-icon: #cf222e;
     --color-btn-danger-hover-icon: #ffffff;
+    --color-btn-danger-counter-fg: #c21c2c;
+    --color-btn-danger-hover-counter-fg: #ffffff;
+    --color-btn-danger-disabled-counter-fg: rgba(207,34,46,0.5);
     --color-underlinenav-icon: #6e7781;
     --color-underlinenav-border-hover: rgba(175,184,193,0.2);
     --color-action-list-item-inline-divider: rgba(208,215,222,0.48);

package/dist/ts/colors/dark.ts

@@ -280,16 +280,16 @@ export default {
       "disabledBg": "rgba(35,134,54,0.6)",
       "disabledBorder": "rgba(240,246,252,0.1)",
       "icon": "#ffffff",
-      "counterBg": "rgba(255,255,255,0.2)"
+      "counterBg": "rgba(4,38,15,0.2)"
     },
     "outline": {
-      "text": "#58a6ff",
+      "text": "#388bfd",
       "hoverText": "#58a6ff",
       "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(255,255,255,0.03)",
-      "hoverCounterBg": "rgba(255,255,255,0.2)",
+      "hoverCounterBg": "rgba(5,29,77,0.2)",
       "selectedText": "#ffffff",
       "selectedBg": "#0d419d",
       "selectedBorder": "rgba(240,246,252,0.1)",
@@ -297,7 +297,10 @@ export default {
       "disabledText": "rgba(88,166,255,0.5)",
       "disabledBg": "#0d1117",
       "disabledCounterBg": "rgba(31,111,235,0.05)",
-      "counterBg": "rgba(31,111,235,0.1)"
+      "counterBg": "rgba(5,29,77,0.2)",
+      "hoverCounterFg": "#58a6ff",
+      "disabledCounterFg": "rgba(47,129,247,0.5)",
+      "counterFg": "#388bfd"
     },
     "danger": {
       "text": "#f85149",
@@ -315,8 +318,11 @@ export default {
       "disabledText": "rgba(248,81,73,0.5)",
       "disabledBg": "#0d1117",
       "disabledCounterBg": "rgba(218,54,51,0.05)",
-      "counterBg": "rgba(218,54,51,0.1)",
-      "icon": "#f85149"
+      "counterBg": "rgba(73,2,2,0.2)",
+      "icon": "#f85149",
+      "counterFg": "#f85149",
+      "disabledCounterFg": "rgba(248,81,73,0.5)",
+      "hoverCounterFg": "#ffffff"
     }
   },
   "underlinenav": {

package/dist/ts/colors/dark_colorblind.ts

@@ -280,16 +280,16 @@ export default {
       "disabledBg": "rgba(31,111,235,0.6)",
       "disabledBorder": "rgba(240,246,252,0.1)",
       "icon": "#ffffff",
-      "counterBg": "rgba(255,255,255,0.2)"
+      "counterBg": "rgba(5,29,77,0.2)"
     },
     "outline": {
-      "text": "#58a6ff",
+      "text": "#388bfd",
       "hoverText": "#58a6ff",
       "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(255,255,255,0.03)",
-      "hoverCounterBg": "rgba(255,255,255,0.2)",
+      "hoverCounterBg": "rgba(5,29,77,0.2)",
       "selectedText": "#ffffff",
       "selectedBg": "#0d419d",
       "selectedBorder": "rgba(240,246,252,0.1)",
@@ -297,7 +297,10 @@ export default {
       "disabledText": "rgba(88,166,255,0.5)",
       "disabledBg": "#0d1117",
       "disabledCounterBg": "rgba(31,111,235,0.05)",
-      "counterBg": "rgba(31,111,235,0.1)"
+      "counterBg": "rgba(5,29,77,0.2)",
+      "hoverCounterFg": "#58a6ff",
+      "disabledCounterFg": "rgba(88,166,255,0.5)",
+      "counterFg": "#388bfd"
     },
     "danger": {
       "text": "#d47616",
@@ -315,8 +318,11 @@ export default {
       "disabledText": "rgba(212,118,22,0.5)",
       "disabledBg": "#0d1117",
       "disabledCounterBg": "rgba(183,97,0,0.05)",
-      "counterBg": "rgba(183,97,0,0.1)",
-      "icon": "#d47616"
+      "counterBg": "rgba(51,28,4,0.2)",
+      "icon": "#d47616",
+      "counterFg": "#d47616",
+      "disabledCounterFg": "rgba(212,118,22,0.5)",
+      "hoverCounterFg": "#ffffff"
     }
   },
   "underlinenav": {

package/dist/ts/colors/dark_dimmed.ts

@@ -280,16 +280,16 @@ export default {
       "disabledBg": "rgba(52,125,57,0.6)",
       "disabledBorder": "rgba(205,217,229,0.1)",
       "icon": "#cdd9e5",
-      "counterBg": "rgba(205,217,229,0.2)"
+      "counterBg": "rgba(17,52,23,0.2)"
     },
     "outline": {
-      "text": "#539bf5",
+      "text": "#4184e4",
       "hoverText": "#539bf5",
       "hoverBg": "#444c56",
       "hoverBorder": "rgba(205,217,229,0.1)",
       "hoverShadow": "0 1px 0 rgba(28,33,40,0.1)",
       "hoverInsetShadow": "inset 0 1px 0 rgba(205,217,229,0.03)",
-      "hoverCounterBg": "rgba(205,217,229,0.2)",
+      "hoverCounterBg": "rgba(15,45,92,0.2)",
       "selectedText": "#cdd9e5",
       "selectedBg": "#1b4b91",
       "selectedBorder": "rgba(205,217,229,0.1)",
@@ -297,7 +297,10 @@ export default {
       "disabledText": "rgba(83,155,245,0.5)",
       "disabledBg": "#22272e",
       "disabledCounterBg": "rgba(49,109,202,0.05)",
-      "counterBg": "rgba(49,109,202,0.1)"
+      "counterBg": "rgba(15,45,92,0.2)",
+      "hoverCounterFg": "#539bf5",
+      "disabledCounterFg": "rgba(83,155,245,0.5)",
+      "counterFg": "#4184e4"
     },
     "danger": {
       "text": "#e5534b",
@@ -315,8 +318,11 @@ export default {
       "disabledText": "rgba(229,83,75,0.5)",
       "disabledBg": "#22272e",
       "disabledCounterBg": "rgba(201,60,55,0.05)",
-      "counterBg": "rgba(201,60,55,0.1)",
-      "icon": "#e5534b"
+      "counterBg": "rgba(93,15,18,0.2)",
+      "icon": "#e5534b",
+      "counterFg": "#e5534b",
+      "disabledCounterFg": "rgba(229,83,75,0.5)",
+      "hoverCounterFg": "#cdd9e5"
     }
   },
   "underlinenav": {

package/dist/ts/colors/dark_high_contrast.ts

@@ -283,13 +283,13 @@ export default {
       "counterBg": "rgba(1,4,9,0.15)"
     },
     "outline": {
-      "text": "#71b7ff",
+      "text": "#409eff",
       "hoverText": "#71b7ff",
       "hoverBg": "#525964",
       "hoverBorder": "#7a828e",
       "hoverShadow": "0 1px 0 rgba(1,4,9,0.1)",
       "hoverInsetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
-      "hoverCounterBg": "rgba(255,255,255,0.2)",
+      "hoverCounterBg": "rgba(25,79,177,0.2)",
       "selectedText": "#ffffff",
       "selectedBg": "#2672f3",
       "selectedBorder": "#7a828e",
@@ -297,7 +297,10 @@ export default {
       "disabledText": "rgba(113,183,255,0.5)",
       "disabledBg": "#0a0c10",
       "disabledCounterBg": "rgba(64,158,255,0.05)",
-      "counterBg": "rgba(64,158,255,0.1)"
+      "counterBg": "rgba(25,79,177,0.2)",
+      "hoverCounterFg": "#71b7ff",
+      "disabledCounterFg": "rgba(113,183,255,0.5)",
+      "counterFg": "#409eff"
     },
     "danger": {
       "text": "#ff6a69",
@@ -316,7 +319,10 @@ export default {
       "disabledBg": "#0a0c10",
       "disabledCounterBg": "rgba(255,106,105,0.05)",
       "counterBg": "rgba(1,4,9,0.15)",
-      "icon": "#ff6a69"
+      "icon": "#ff6a69",
+      "counterFg": "#ff6a69",
+      "disabledCounterFg": "rgba(255,106,105,0.5)",
+      "hoverCounterFg": "#ffffff"
     }
   },
   "underlinenav": {

package/dist/ts/colors/dark_tritanopia.ts

@@ -280,16 +280,16 @@ export default {
       "disabledBg": "rgba(31,111,235,0.6)",
       "disabledBorder": "rgba(240,246,252,0.1)",
       "icon": "#ffffff",
-      "counterBg": "rgba(255,255,255,0.2)"
+      "counterBg": "rgba(5,29,77,0.2)"
     },
     "outline": {
-      "text": "#58a6ff",
+      "text": "#388bfd",
       "hoverText": "#58a6ff",
       "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(255,255,255,0.03)",
-      "hoverCounterBg": "rgba(255,255,255,0.2)",
+      "hoverCounterBg": "rgba(5,29,77,0.2)",
       "selectedText": "#ffffff",
       "selectedBg": "#0d419d",
       "selectedBorder": "rgba(240,246,252,0.1)",
@@ -297,7 +297,10 @@ export default {
       "disabledText": "rgba(88,166,255,0.5)",
       "disabledBg": "#0d1117",
       "disabledCounterBg": "rgba(31,111,235,0.05)",
-      "counterBg": "rgba(31,111,235,0.1)"
+      "counterBg": "rgba(5,29,77,0.2)",
+      "hoverCounterFg": "#58a6ff",
+      "disabledCounterFg": "rgba(88,166,255,0.5)",
+      "counterFg": "#388bfd"
     },
     "danger": {
       "text": "#f85149",
@@ -315,8 +318,11 @@ export default {
       "disabledText": "rgba(248,81,73,0.5)",
       "disabledBg": "#0d1117",
       "disabledCounterBg": "rgba(218,54,51,0.05)",
-      "counterBg": "rgba(218,54,51,0.1)",
-      "icon": "#f85149"
+      "counterBg": "rgba(73,2,2,0.2)",
+      "icon": "#f85149",
+      "counterFg": "#f85149",
+      "disabledCounterFg": "rgba(248,81,73,0.5)",
+      "hoverCounterFg": "#ffffff"
     }
   },
   "underlinenav": {

package/dist/ts/colors/light.ts

@@ -280,7 +280,7 @@ export default {
       "disabledBg": "#94d3a2",
       "disabledBorder": "rgba(31,35,40,0.15)",
       "icon": "rgba(255,255,255,0.8)",
-      "counterBg": "rgba(255,255,255,0.2)"
+      "counterBg": "rgba(0,45,17,0.2)"
     },
     "outline": {
       "text": "#0969da",
@@ -297,7 +297,10 @@ export default {
       "disabledText": "rgba(9,105,218,0.5)",
       "disabledBg": "#f6f8fa",
       "disabledCounterBg": "rgba(9,105,218,0.05)",
-      "counterBg": "rgba(9,105,218,0.1)"
+      "counterBg": "#0969da1a",
+      "counterFg": "#0550ae",
+      "hoverCounterFg": "#ffffff",
+      "disabledCounterFg": "rgba(9,105,218,0.5)"
     },
     "danger": {
       "text": "#cf222e",
@@ -316,7 +319,10 @@ export default {
       "disabledCounterBg": "rgba(207,34,46,0.05)",
       "counterBg": "rgba(207,34,46,0.1)",
       "icon": "#cf222e",
-      "hoverIcon": "#ffffff"
+      "hoverIcon": "#ffffff",
+      "counterFg": "#c21c2c",
+      "hoverCounterFg": "#ffffff",
+      "disabledCounterFg": "rgba(207,34,46,0.5)"
     }
   },
   "underlinenav": {

package/dist/ts/colors/light_colorblind.ts

@@ -280,7 +280,7 @@ export default {
       "disabledBg": "#80ccff",
       "disabledBorder": "rgba(27,31,36,0.15)",
       "icon": "rgba(255,255,255,0.8)",
-      "counterBg": "rgba(255,255,255,0.2)"
+      "counterBg": "rgba(0,33,85,0.2)"
     },
     "outline": {
       "text": "#0969da",
@@ -297,7 +297,10 @@ export default {
       "disabledText": "rgba(9,105,218,0.5)",
       "disabledBg": "#f6f8fa",
       "disabledCounterBg": "rgba(9,105,218,0.05)",
-      "counterBg": "rgba(9,105,218,0.1)"
+      "counterBg": "#0969da1a",
+      "counterFg": "#0550ae",
+      "hoverCounterFg": "#ffffff",
+      "disabledCounterFg": "rgba(9,105,218,0.5)"
     },
     "danger": {
       "text": "#b35900",
@@ -316,7 +319,10 @@ export default {
       "disabledCounterBg": "rgba(179,89,0,0.05)",
       "counterBg": "rgba(179,89,0,0.1)",
       "icon": "#b35900",
-      "hoverIcon": "#ffffff"
+      "hoverIcon": "#ffffff",
+      "counterFg": "#c21c2c",
+      "hoverCounterFg": "#ffffff",
+      "disabledCounterFg": "rgba(179,89,0,0.5)"
     }
   },
   "underlinenav": {

package/dist/ts/colors/light_high_contrast.ts

@@ -280,7 +280,7 @@ export default {
       "disabledBg": "#94d3a2",
       "disabledBorder": "rgba(1,4,9,0.8)",
       "icon": "rgba(255,255,255,0.8)",
-      "counterBg": "rgba(255,255,255,0.2)"
+      "counterBg": "rgba(0,35,11,0.2)"
     },
     "outline": {
       "text": "#023b95",
@@ -297,7 +297,10 @@ export default {
       "disabledText": "rgba(3,73,180,0.5)",
       "disabledBg": "#e7ecf0",
       "disabledCounterBg": "rgba(3,73,180,0.05)",
-      "counterBg": "rgba(3,73,180,0.1)"
+      "counterBg": "#0969da1a",
+      "counterFg": "#023b95",
+      "hoverCounterFg": "#ffffff",
+      "disabledCounterFg": "rgba(3,73,180,0.5)"
     },
     "danger": {
       "text": "#86061d",
@@ -316,7 +319,10 @@ export default {
       "disabledCounterBg": "rgba(160,17,31,0.05)",
       "counterBg": "rgba(160,17,31,0.1)",
       "icon": "#86061d",
-      "hoverIcon": "#ffffff"
+      "hoverIcon": "#ffffff",
+      "counterFg": "#c21c2c",
+      "hoverCounterFg": "#ffffff",
+      "disabledCounterFg": "rgba(160,17,31,0.5)"
     }
   },
   "underlinenav": {

package/dist/ts/colors/light_tritanopia.ts

@@ -280,7 +280,7 @@ export default {
       "disabledBg": "#80ccff",
       "disabledBorder": "rgba(27,31,36,0.15)",
       "icon": "rgba(255,255,255,0.8)",
-      "counterBg": "rgba(255,255,255,0.2)"
+      "counterBg": "rgba(0,33,85,0.2)"
     },
     "outline": {
       "text": "#0969da",
@@ -297,7 +297,10 @@ export default {
       "disabledText": "rgba(9,105,218,0.5)",
       "disabledBg": "#f6f8fa",
       "disabledCounterBg": "rgba(9,105,218,0.05)",
-      "counterBg": "rgba(9,105,218,0.1)"
+      "counterBg": "#0969da1a",
+      "counterFg": "#0550ae",
+      "hoverCounterFg": "#ffffff",
+      "disabledCounterFg": "rgba(9,105,218,0.5)"
     },
     "danger": {
       "text": "#cf222e",
@@ -316,7 +319,10 @@ export default {
       "disabledCounterBg": "rgba(207,34,46,0.05)",
       "counterBg": "rgba(207,34,46,0.1)",
       "icon": "#cf222e",
-      "hoverIcon": "#ffffff"
+      "hoverIcon": "#ffffff",
+      "counterFg": "#c21c2c",
+      "hoverCounterFg": "#ffffff",
+      "disabledCounterFg": "rgba(207,34,46,0.5)"
     }
   },
   "underlinenav": {