From 6f2340cc7e17a90b9cb09722ec791d82f4f71329 Mon Sep 17 00:00:00 2001
From: Katie Langerman <18661030+langermank@users.noreply.github.com>
Date: Wed, 10 May 2023 15:55:15 -0700
Subject: [PATCH] Button counter contrast fixes (#3270)
* bump primies
* update counter colors
* Create breezy-fireants-tickle.md
* bump again
* snaps
* add story to e2e
* bump
* snippy snaps
---
.changeset/breezy-fireants-tickle.md | 5 +
package-lock.json | 30 +---
package.json | 2 +-
script/generate-e2e-tests.js | 4 +
src/Button/Button.features.stories.tsx | 48 +++++++
src/Button/styles.ts | 12 +-
.../__snapshots__/Button.test.tsx.snap | 6 +-
.../__snapshots__/themePreval.test.ts.snap | 134 ++++++++++++------
8 files changed, 168 insertions(+), 73 deletions(-)
create mode 100644 .changeset/breezy-fireants-tickle.md
diff --git a/.changeset/breezy-fireants-tickle.md b/.changeset/breezy-fireants-tickle.md
new file mode 100644
index 00000000000..1c2135d5a76
--- /dev/null
+++ b/.changeset/breezy-fireants-tickle.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Button counter contrast fixes
diff --git a/package-lock.json b/package-lock.json
index 9b64a7cdd5c..109c6c8ed7f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,7 @@
"@lit-labs/react": "1.1.1",
"@primer/behaviors": "1.3.3",
"@primer/octicons-react": "^18.0.0",
- "@primer/primitives": "7.11.7",
+ "@primer/primitives": "7.11.10",
"@react-aria/ssr": "^3.1.0",
"@styled-system/css": "^5.1.5",
"@styled-system/props": "^5.1.5",
@@ -6980,12 +6980,9 @@
}
},
"node_modules/@primer/primitives": {
- "version": "7.11.7",
- "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.7.tgz",
- "integrity": "sha512-8PDEn3yj8oE/9B7o5hwjD0LSy7xz9xZ3gGTPWi/u0MxHZJ/fxERgxnBG21eCLKZ19KjhIb5AsmSQyFbGR5urYQ==",
- "dependencies": {
- "markdown-table-ts": "^1.0.3"
- }
+ "version": "7.11.10",
+ "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.10.tgz",
+ "integrity": "sha512-KwChxyp4qbLojZx5Nz8RUElM9K+ObzZWvzkYEu76TC4qEsqb9wW7n78jyov5WhUh5+qj2Qac1iCsPfeTQG5YBw=="
},
"node_modules/@primer/view-components": {
"version": "0.1.7",
@@ -47457,11 +47454,6 @@
"url": "https://github.com/fb55/entities?sponsor=1"
}
},
- "node_modules/markdown-table-ts": {
- "version": "1.0.3",
- "resolved": "https://registry.npmjs.org/markdown-table-ts/-/markdown-table-ts-1.0.3.tgz",
- "integrity": "sha512-lYrp7FXmBqpmGmsEF92WnSukdgYvLm15FPIODZOx9+3nobkxJxjBYcszqZf5VqTjBtISPSNC7zjU9o3zwpL6AQ=="
- },
"node_modules/markdownlint": {
"version": "0.28.2",
"resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.28.2.tgz",
@@ -63578,12 +63570,9 @@
"requires": {}
},
"@primer/primitives": {
- "version": "7.11.7",
- "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.7.tgz",
- "integrity": "sha512-8PDEn3yj8oE/9B7o5hwjD0LSy7xz9xZ3gGTPWi/u0MxHZJ/fxERgxnBG21eCLKZ19KjhIb5AsmSQyFbGR5urYQ==",
- "requires": {
- "markdown-table-ts": "^1.0.3"
- }
+ "version": "7.11.10",
+ "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.10.tgz",
+ "integrity": "sha512-KwChxyp4qbLojZx5Nz8RUElM9K+ObzZWvzkYEu76TC4qEsqb9wW7n78jyov5WhUh5+qj2Qac1iCsPfeTQG5YBw=="
},
"@primer/view-components": {
"version": "0.1.7",
@@ -94160,11 +94149,6 @@
}
}
},
- "markdown-table-ts": {
- "version": "1.0.3",
- "resolved": "https://registry.npmjs.org/markdown-table-ts/-/markdown-table-ts-1.0.3.tgz",
- "integrity": "sha512-lYrp7FXmBqpmGmsEF92WnSukdgYvLm15FPIODZOx9+3nobkxJxjBYcszqZf5VqTjBtISPSNC7zjU9o3zwpL6AQ=="
- },
"markdownlint": {
"version": "0.28.2",
"resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.28.2.tgz",
diff --git a/package.json b/package.json
index 1a0637bbe64..f72f49470c1 100644
--- a/package.json
+++ b/package.json
@@ -96,7 +96,7 @@
"@lit-labs/react": "1.1.1",
"@primer/behaviors": "1.3.3",
"@primer/octicons-react": "^18.0.0",
- "@primer/primitives": "7.11.7",
+ "@primer/primitives": "7.11.10",
"@react-aria/ssr": "^3.1.0",
"@styled-system/css": "^5.1.5",
"@styled-system/props": "^5.1.5",
diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js
index 8111ce98f38..dc4d2cd852b 100644
--- a/script/generate-e2e-tests.js
+++ b/script/generate-e2e-tests.js
@@ -242,6 +242,10 @@ const components = new Map([
id: 'components-button-features--trailing-visual',
name: 'Trailing Visual',
},
+ {
+ id: 'components-button-features--trailing-counter-all-variants',
+ name: 'Trailing Counter All Variants',
+ },
],
},
],
diff --git a/src/Button/Button.features.stories.tsx b/src/Button/Button.features.stories.tsx
index 9689b6aa3a0..c92ffa956d9 100644
--- a/src/Button/Button.features.stories.tsx
+++ b/src/Button/Button.features.stories.tsx
@@ -28,6 +28,54 @@ export const TrailingCounter = () => {
)
}
+export const TrailingCounterAllVariants = () => {
+ const [count, setCount] = useState(0)
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
export const TrailingAction = () =>
export const Block = () =>
diff --git a/src/Button/styles.ts b/src/Button/styles.ts
index 1371a428779..4602e7fa250 100644
--- a/src/Button/styles.ts
+++ b/src/Button/styles.ts
@@ -72,7 +72,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
boxShadow: `${theme?.shadows.btn.danger.hoverShadow}`,
'[data-component=ButtonCounter]': {
backgroundColor: 'btn.danger.hoverCounterBg',
- color: 'btn.danger.hoverText',
+ color: 'btn.danger.hoverCounterFg',
},
},
'&:active:not([disabled])': {
@@ -86,12 +86,12 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
backgroundColor: 'btn.danger.disabledBg',
borderColor: 'btn.danger.disabledBorder',
'[data-component=ButtonCounter]': {
- color: 'inherit',
+ color: 'btn.danger.disabledCounterFg',
backgroundColor: 'btn.danger.disabledCounterBg',
},
},
'[data-component=ButtonCounter]': {
- color: 'btn.danger.text',
+ color: 'btn.danger.counterFg',
backgroundColor: 'btn.danger.counterBg',
},
'&[aria-expanded=true]': {
@@ -156,7 +156,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
boxShadow: `${theme?.shadows.btn.outline.hoverShadow}`,
'[data-component=ButtonCounter]': {
backgroundColor: 'btn.outline.hoverCounterBg',
- color: 'inherit',
+ color: 'btn.outline.hoverCounterFg',
},
},
'&:active:not([disabled])': {
@@ -172,12 +172,12 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
borderColor: 'btn.border',
'[data-component=ButtonCounter]': {
backgroundColor: 'btn.outline.disabledCounterBg',
- color: 'inherit',
+ color: 'btn.outline.disabledCounterFg',
},
},
'[data-component=ButtonCounter]': {
backgroundColor: 'btn.outline.counterBg',
- color: 'btn.outline.text',
+ color: 'btn.outline.counterFg',
},
'&[aria-expanded=true]': {
color: 'btn.outline.selectedText',
diff --git a/src/__tests__/__snapshots__/Button.test.tsx.snap b/src/__tests__/__snapshots__/Button.test.tsx.snap
index 58a254a85f8..772130612d6 100644
--- a/src/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Button.test.tsx.snap
@@ -1258,13 +1258,13 @@ exports[`Button styles danger button appropriately 1`] = `
}
.c0:disabled [data-component=ButtonCounter] {
- color: inherit;
+ color: btn.danger.disabledCounterFg;
background-color: btn.danger.disabledCounterBg;
}
.c0 [data-component=ButtonCounter] {
font-size: 14px;
- color: btn.danger.text;
+ color: btn.danger.counterFg;
background-color: btn.danger.counterBg;
}
@@ -1366,7 +1366,7 @@ exports[`Button styles danger button appropriately 1`] = `
.c0:hover:not([disabled]) [data-component=ButtonCounter] {
background-color: btn.danger.hoverCounterBg;
- color: btn.danger.hoverText;
+ color: btn.danger.hoverCounterFg;
}
.c0:active:not([disabled]) {
diff --git a/src/__tests__/__snapshots__/themePreval.test.ts.snap b/src/__tests__/__snapshots__/themePreval.test.ts.snap
index d489068d9d5..49ee661f04e 100644
--- a/src/__tests__/__snapshots__/themePreval.test.ts.snap
+++ b/src/__tests__/__snapshots__/themePreval.test.ts.snap
@@ -303,7 +303,7 @@ var themePreval = {
"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",
@@ -317,7 +317,10 @@ var themePreval = {
"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",
@@ -333,7 +336,10 @@ var themePreval = {
"disabledCounterBg": "rgba(207,34,46,0.05)",
"counterBg": "rgba(207,34,46,0.1)",
"icon": "#cf222e",
- "hoverIcon": "#ffffff"
+ "hoverIcon": "#ffffff",
+ "counterFg": "#a40e26",
+ "hoverCounterFg": "#ffffff",
+ "disabledCounterFg": "rgba(207,34,46,0.5)"
}
},
"underlinenav": {
@@ -810,7 +816,7 @@ var themePreval = {
"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",
@@ -824,7 +830,10 @@ var themePreval = {
"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",
@@ -840,7 +849,10 @@ var themePreval = {
"disabledCounterBg": "rgba(160,17,31,0.05)",
"counterBg": "rgba(160,17,31,0.1)",
"icon": "#86061d",
- "hoverIcon": "#ffffff"
+ "hoverIcon": "#ffffff",
+ "counterFg": "#86061d",
+ "hoverCounterFg": "#ffffff",
+ "disabledCounterFg": "rgba(160,17,31,0.5)"
}
},
"underlinenav": {
@@ -1317,7 +1329,7 @@ var themePreval = {
"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",
@@ -1331,7 +1343,10 @@ var themePreval = {
"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",
@@ -1347,7 +1362,10 @@ var themePreval = {
"disabledCounterBg": "rgba(179,89,0,0.05)",
"counterBg": "rgba(179,89,0,0.1)",
"icon": "#b35900",
- "hoverIcon": "#ffffff"
+ "hoverIcon": "#ffffff",
+ "counterFg": "#8a4600",
+ "hoverCounterFg": "#ffffff",
+ "disabledCounterFg": "rgba(179,89,0,0.5)"
}
},
"underlinenav": {
@@ -1824,7 +1842,7 @@ var themePreval = {
"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",
@@ -1838,7 +1856,10 @@ var themePreval = {
"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",
@@ -1854,7 +1875,10 @@ var themePreval = {
"disabledCounterBg": "rgba(207,34,46,0.05)",
"counterBg": "rgba(207,34,46,0.1)",
"icon": "#cf222e",
- "hoverIcon": "#ffffff"
+ "hoverIcon": "#ffffff",
+ "counterFg": "#a40e26",
+ "hoverCounterFg": "#ffffff",
+ "disabledCounterFg": "rgba(207,34,46,0.5)"
}
},
"underlinenav": {
@@ -2331,21 +2355,24 @@ var themePreval = {
"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)",
- "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)",
"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",
@@ -2360,8 +2387,11 @@ var themePreval = {
"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": {
@@ -2841,21 +2871,24 @@ var themePreval = {
"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)",
- "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)",
"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",
@@ -2870,8 +2903,11 @@ var themePreval = {
"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": {
@@ -3354,18 +3390,21 @@ var themePreval = {
"counterBg": "rgba(1,4,9,0.15)"
},
"outline": {
- "text": "#71b7ff",
+ "text": "#409eff",
"hoverText": "#71b7ff",
"hoverBg": "#525964",
"hoverBorder": "#7a828e",
- "hoverCounterBg": "rgba(255,255,255,0.2)",
+ "hoverCounterBg": "rgba(25,79,177,0.2)",
"selectedText": "#ffffff",
"selectedBg": "#2672f3",
"selectedBorder": "#7a828e",
"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",
@@ -3381,7 +3420,10 @@ var themePreval = {
"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": {
@@ -3861,21 +3903,24 @@ var themePreval = {
"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)",
- "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)",
"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",
@@ -3890,8 +3935,11 @@ var themePreval = {
"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": {
@@ -4371,21 +4419,24 @@ var themePreval = {
"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)",
- "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)",
"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",
@@ -4400,8 +4451,11 @@ var themePreval = {
"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": {