Skip to content

Bug fix: danger counter fg - #648

Merged
langermank merged 2 commits into
mainfrom
counter-fg-bug-fix
May 10, 2023
Merged

langermank merged 2 commits into
mainfrom
counter-fg-bug-fix

Conversation

@langermank

Copy link
Copy Markdown
Contributor

Using a scale color to respect color blind themes

@langermank
langermank requested a review from a team as a code owner May 10, 2023 17:45
@langermank
langermank requested review from a team, mperrotti and rezrah May 10, 2023 17:45
@changeset-bot

changeset-bot Bot commented May 10, 2023 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 0e0a09d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/primitives Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions

github-actions Bot commented May 10, 2023 •

Copy link
Copy Markdown
Contributor
Variables changed
--- base/dist/scss/colors/_light.scss	2023-05-10 17:48:11.290014337 +0000
+++ dist/scss/colors/_light.scss	2023-05-10 17:47:51.641757564 +0000
@@ -253,3 +253,3 @@
     --color-btn-danger-hover-icon: #ffffff;
-    --color-btn-danger-counter-fg: #c21c2c;
+    --color-btn-danger-counter-fg: #a40e26;
     --color-btn-danger-hover-counter-fg: #ffffff;
--- base/dist/scss/colors/_light_colorblind.scss	2023-05-10 17:48:11.318014694 +0000
+++ dist/scss/colors/_light_colorblind.scss	2023-05-10 17:47:51.669757925 +0000
@@ -253,3 +253,3 @@
     --color-btn-danger-hover-icon: #ffffff;
-    --color-btn-danger-counter-fg: #c21c2c;
+    --color-btn-danger-counter-fg: #8a4600;
     --color-btn-danger-hover-counter-fg: #ffffff;
--- base/dist/scss/colors/_light_high_contrast.scss	2023-05-10 17:48:11.306014541 +0000
+++ dist/scss/colors/_light_high_contrast.scss	2023-05-10 17:47:51.657757770 +0000
@@ -253,3 +253,3 @@
     --color-btn-danger-hover-icon: #ffffff;
-    --color-btn-danger-counter-fg: #c21c2c;
+    --color-btn-danger-counter-fg: #86061d;
     --color-btn-danger-hover-counter-fg: #ffffff;
--- base/dist/scss/colors/_light_tritanopia.scss	2023-05-10 17:48:11.322014745 +0000
+++ dist/scss/colors/_light_tritanopia.scss	2023-05-10 17:47:51.673757976 +0000
@@ -253,3 +253,3 @@
     --color-btn-danger-hover-icon: #ffffff;
-    --color-btn-danger-counter-fg: #c21c2c;
+    --color-btn-danger-counter-fg: #a40e26;
     --color-btn-danger-hover-counter-fg: #ffffff;

@github-actions

Copy link
Copy Markdown
Contributor

Design Token Contrast Check

light: ✅ all checks passed

Show results table for theme: light
contrastPair pass contrastRatio minimumContrastRatio
fg.default vs. canvas.default ✅ 15.79:1 4.5:1
fg.muted vs. canvas.default ✅ 5.24:1 4.5:1
fg.subtle vs. canvas.default ✅ 4.54:1 4.5:1
fg.default vs. canvas.subtle ✅ 14.83:1 4.5:1
fg.muted vs. canvas.subtle ✅ 4.92:1 4.5:1
fg.default vs. canvas.inset ✅ 14.83:1 4.5:1
fg.muted vs. canvas.inset ✅ 4.92:1 4.5:1
fg.default vs. accent.fg ✅ 3.04:1 3:1
fg.default vs. fg.muted ✅ 3.01:1 3:1
fg.default vs. accent.subtle ✅ 13.88:1 4.5:1
fg.default vs. success.subtle ✅ 14.19:1 4.5:1
fg.default vs. open.subtle ✅ 14.19:1 4.5:1
fg.default vs. danger.subtle ✅ 13.77:1 4.5:1
fg.default vs. closed.subtle ✅ 13.77:1 4.5:1
fg.default vs. attention.subtle ✅ 14.65:1 4.5:1
fg.default vs. severe.subtle ✅ 14.26:1 4.5:1
fg.default vs. done.subtle ✅ 14.21:1 4.5:1
fg.default vs. sponsors.subtle ✅ 14.24:1 4.5:1
accent.fg vs. canvas.default ✅ 5.19:1 4.5:1
accent.fg vs. canvas.subtle ✅ 4.87:1 4.5:1
accent.fg vs. canvas.inset ✅ 4.87:1 4.5:1
success.fg vs. canvas.default ✅ 5.07:1 4.5:1
success.fg vs. canvas.subtle ✅ 4.77:1 4.5:1
success.fg vs. canvas.inset ✅ 4.77:1 4.5:1
open.fg vs. canvas.default ✅ 5.07:1 4.5:1
open.fg vs. canvas.subtle ✅ 4.77:1 4.5:1
open.fg vs. canvas.inset ✅ 4.77:1 4.5:1
danger.fg vs. canvas.default ✅ 5.24:1 4.5:1
danger.fg vs. canvas.subtle ✅ 4.92:1 4.5:1
danger.fg vs. canvas.inset ✅ 4.92:1 4.5:1
closed.fg vs. canvas.default ✅ 5.24:1 4.5:1
closed.fg vs. canvas.subtle ✅ 4.92:1 4.5:1
closed.fg vs. canvas.inset ✅ 4.92:1 4.5:1
attention.fg vs. canvas.default ✅ 4.86:1 4.5:1
attention.fg vs. canvas.subtle ✅ 4.57:1 4.5:1
attention.fg vs. canvas.inset ✅ 4.57:1 4.5:1
severe.fg vs. canvas.default ✅ 5.03:1 4.5:1
severe.fg vs. canvas.subtle ✅ 4.72:1 4.5:1
severe.fg vs. canvas.inset ✅ 4.72:1 4.5:1
done.fg vs. canvas.default ✅ 5.04:1 4.5:1
done.fg vs. canvas.subtle ✅ 4.73:1 4.5:1
done.fg vs. canvas.inset ✅ 4.73:1 4.5:1
sponsors.fg vs. canvas.default ✅ 5.04:1 4.5:1
sponsors.fg vs. canvas.subtle ✅ 4.73:1 4.5:1
sponsors.fg vs. canvas.inset ✅ 4.73:1 4.5:1
accent.fg vs. accent.subtle ✅ 4.56:1 4.5:1
success.fg vs. success.subtle ✅ 4.56:1 4.5:1
open.fg vs. open.subtle ✅ 4.56:1 4.5:1
danger.fg vs. danger.subtle ✅ 4.57:1 4.5:1
closed.fg vs. closed.subtle ✅ 4.57:1 4.5:1
attention.fg vs. attention.subtle ✅ 4.51:1 4.5:1
severe.fg vs. severe.subtle ✅ 4.54:1 4.5:1
done.fg vs. done.subtle ✅ 4.53:1 4.5:1
sponsors.fg vs. sponsors.subtle ✅ 4.55:1 4.5:1
accent.fg vs. fg.default ✅ 3.04:1 3:1
success.fg vs. fg.default ✅ 3.11:1 3:1
open.fg vs. fg.default ✅ 3.11:1 3:1
danger.fg vs. fg.default ✅ 3.01:1 3:1
closed.fg vs. fg.default ✅ 3.01:1 3:1
attention.fg vs. fg.default ✅ 3.24:1 3:1
severe.fg vs. fg.default ✅ 3.13:1 3:1
done.fg vs. fg.default ✅ 3.13:1 3:1
sponsors.fg vs. fg.default ✅ 3.13:1 3:1
fg.onEmphasis vs. neutral.emphasis ✅ 4.54:1 4.5:1
fg.onEmphasis vs. neutral.emphasisPlus ✅ 14.65:1 4.5:1
fg.onEmphasis vs. accent.emphasis ✅ 5.19:1 4.5:1
fg.onEmphasis vs. success.emphasis ✅ 4.51:1 4.5:1
fg.onEmphasis vs. open.emphasis ✅ 4.51:1 4.5:1
fg.onEmphasis vs. danger.emphasis ✅ 5.35:1 4.5:1
fg.onEmphasis vs. closed.emphasis ✅ 5.35:1 4.5:1
fg.onEmphasis vs. attention.emphasis ✅ 4.86:1 4.5:1
fg.onEmphasis vs. severe.emphasis ✅ 5.03:1 4.5:1
fg.onEmphasis vs. done.emphasis ✅ 5.04:1 4.5:1
fg.onEmphasis vs. sponsors.emphasis ✅ 5.04:1 4.5:1
control.borderColor.emphasis vs. canvas.default ✅ 3.28:1 3:1
control.borderColor.emphasis vs. canvas.subtle ✅ 3.08:1 3:1

dark: ❌ 9 checks failed

Show results table for theme: dark
contrastPair pass contrastRatio minimumContrastRatio
fg.default vs. canvas.default ✅ 16.01:1 4.5:1
fg.muted vs. canvas.default ✅ 5.07:1 4.5:1
fg.subtle vs. canvas.default ❌ 4.11:1 4.5:1
fg.default vs. canvas.subtle ✅ 14.63:1 4.5:1
fg.muted vs. canvas.subtle ✅ 4.63:1 4.5:1
fg.default vs. canvas.inset ✅ 17.37:1 4.5:1
fg.muted vs. canvas.inset ✅ 5.5:1 4.5:1
fg.default vs. accent.fg ✅ 3.17:1 3:1
fg.default vs. fg.muted ✅ 3.15:1 3:1
fg.default vs. accent.subtle on canvas.default ✅ 14.34:1 4.5:1
fg.default vs. accent.subtle on canvas.subtle ✅ 12.91:1 4.5:1
fg.default vs. success.subtle on canvas.default ✅ 13.44:1 4.5:1
fg.default vs. success.subtle on canvas.subtle ✅ 12:1 4.5:1
fg.default vs. open.subtle on canvas.default ✅ 13.44:1 4.5:1
fg.default vs. open.subtle on canvas.subtle ✅ 12:1 4.5:1
fg.default vs. danger.subtle on canvas.default ✅ 14.59:1 4.5:1
fg.default vs. danger.subtle on canvas.subtle ✅ 13.2:1 4.5:1
fg.default vs. closed.subtle on canvas.default ✅ 13.64:1 4.5:1
fg.default vs. closed.subtle on canvas.subtle ✅ 12.34:1 4.5:1
fg.default vs. attention.subtle on canvas.default ✅ 13.4:1 4.5:1
fg.default vs. attention.subtle on canvas.subtle ✅ 12.08:1 4.5:1
fg.default vs. severe.subtle on canvas.default ✅ 14.45:1 4.5:1
fg.default vs. severe.subtle on canvas.subtle ✅ 13.03:1 4.5:1
fg.default vs. done.subtle on canvas.default ✅ 14.28:1 4.5:1
fg.default vs. done.subtle on canvas.subtle ✅ 12.85:1 4.5:1
fg.default vs. sponsors.subtle on canvas.default ✅ 14.4:1 4.5:1
fg.default vs. sponsors.subtle on canvas.subtle ✅ 12.98:1 4.5:1
accent.fg vs. canvas.default ✅ 5.05:1 4.5:1
accent.fg vs. canvas.subtle ✅ 4.61:1 4.5:1
accent.fg vs. canvas.inset ✅ 5.48:1 4.5:1
success.fg vs. canvas.default ✅ 7.44:1 4.5:1
success.fg vs. canvas.subtle ✅ 6.8:1 4.5:1
success.fg vs. canvas.inset ✅ 8.08:1 4.5:1
open.fg vs. canvas.default ✅ 7.44:1 4.5:1
open.fg vs. canvas.subtle ✅ 6.8:1 4.5:1
open.fg vs. canvas.inset ✅ 8.08:1 4.5:1
danger.fg vs. canvas.default ✅ 5.64:1 4.5:1
danger.fg vs. canvas.subtle ✅ 5.16:1 4.5:1
danger.fg vs. canvas.inset ✅ 6.12:1 4.5:1
closed.fg vs. canvas.default ✅ 5.64:1 4.5:1
closed.fg vs. canvas.subtle ✅ 5.16:1 4.5:1
closed.fg vs. canvas.inset ✅ 6.12:1 4.5:1
attention.fg vs. canvas.default ✅ 7.49:1 4.5:1
attention.fg vs. canvas.subtle ✅ 6.85:1 4.5:1
attention.fg vs. canvas.inset ✅ 8.13:1 4.5:1
severe.fg vs. canvas.default ✅ 5.61:1 4.5:1
severe.fg vs. canvas.subtle ✅ 5.13:1 4.5:1
severe.fg vs. canvas.inset ✅ 6.09:1 4.5:1
done.fg vs. canvas.default ✅ 5.64:1 4.5:1
done.fg vs. canvas.subtle ✅ 5.15:1 4.5:1
done.fg vs. canvas.inset ✅ 6.12:1 4.5:1
sponsors.fg vs. canvas.default ✅ 5.62:1 4.5:1
sponsors.fg vs. canvas.subtle ✅ 5.14:1 4.5:1
sponsors.fg vs. canvas.inset ✅ 6.1:1 4.5:1
accent.fg vs. accent.subtle on canvas.default ✅ 4.52:1 4.5:1
success.fg vs. success.subtle on canvas.default ✅ 6.25:1 4.5:1
success.fg vs. success.subtle on canvas.subtle ✅ 5.58:1 4.5:1
open.fg vs. open.subtle on canvas.default ✅ 6.25:1 4.5:1
open.fg vs. open.subtle on canvas.subtle ✅ 5.58:1 4.5:1
danger.fg vs. danger.subtle on canvas.default ✅ 5.14:1 4.5:1
danger.fg vs. danger.subtle on canvas.subtle ✅ 4.65:1 4.5:1
closed.fg vs. closed.subtle on canvas.default ✅ 4.81:1 4.5:1
attention.fg vs. attention.subtle on canvas.default ✅ 6.27:1 4.5:1
attention.fg vs. attention.subtle on canvas.subtle ✅ 5.65:1 4.5:1
severe.fg vs. severe.subtle on canvas.default ✅ 5.06:1 4.5:1
severe.fg vs. severe.subtle on canvas.subtle ✅ 4.57:1 4.5:1
done.fg vs. done.subtle on canvas.default ✅ 5.03:1 4.5:1
done.fg vs. done.subtle on canvas.subtle ✅ 4.52:1 4.5:1
sponsors.fg vs. sponsors.subtle on canvas.default ✅ 5.06:1 4.5:1
sponsors.fg vs. sponsors.subtle on canvas.subtle ✅ 4.56:1 4.5:1
accent.fg vs. fg.default ✅ 3.17:1 3:1
success.fg vs. fg.default ❌ 2.14:1 3:1
open.fg vs. fg.default ❌ 2.14:1 3:1
danger.fg vs. fg.default ❌ 2.83:1 3:1
closed.fg vs. fg.default ❌ 2.83:1 3:1
attention.fg vs. fg.default ❌ 2.13:1 3:1
severe.fg vs. fg.default ❌ 2.85:1 3:1
done.fg vs. fg.default ❌ 2.83:1 3:1
sponsors.fg vs. fg.default ❌ 2.84:1 3:1
fg.onEmphasis vs. neutral.emphasis ✅ 4.59:1 4.5:1
fg.onEmphasis vs. neutral.emphasisPlus ✅ 4.59:1 4.5:1
fg.onEmphasis vs. accent.emphasis ✅ 4.63:1 4.5:1
fg.onEmphasis vs. success.emphasis ✅ 4.63:1 4.5:1
fg.onEmphasis vs. open.emphasis ✅ 4.63:1 4.5:1
fg.onEmphasis vs. danger.emphasis ✅ 4.6:1 4.5:1
fg.onEmphasis vs. closed.emphasis ✅ 4.6:1 4.5:1
fg.onEmphasis vs. attention.emphasis ✅ 4.64:1 4.5:1
fg.onEmphasis vs. severe.emphasis ✅ 4.65:1 4.5:1
fg.onEmphasis vs. done.emphasis ✅ 4.6:1 4.5:1
fg.onEmphasis vs. sponsors.emphasis ✅ 4.57:1 4.5:1
control.borderColor.emphasis vs. canvas.default ✅ 3.31:1 3:1
control.borderColor.emphasis vs. canvas.subtle ✅ 3.02:1 3:1

@langermank
langermank merged commit f559ad6 into main May 10, 2023
@langermank
langermank deleted the counter-fg-bug-fix branch May 10, 2023 18:10
@primer-css primer-css mentioned this pull request May 10, 2023
langermank added a commit that referenced this pull request Jun 1, 2023
* use scale color

* Create fresh-baboons-drop.md
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant