enable colorblind mode in contrast check #1066

lukasoppermann · 2024-09-24T14:59:59Z

Summary

List of notable changes:

What should reviewers focus on?

Steps to test:

changeset-bot · 2024-09-24T15:00:03Z

🦋 Changeset detected

Latest commit: 5d72c65

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 · 2024-09-24T15:08:42Z

Design Token Diff

/css/functional/themes/dark-colorblind.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-colorblind.css	2024-09-25 07:23:34.611744673 +0000
@@ -186,7 +186,7 @@
 --control-transparent-borderColor-rest: #00000000;
 --control-transparent-borderColor-hover: #00000000;
 --control-transparent-borderColor-active: #00000000;
-  --control-danger-fgColor-rest: #db6d28;
+  --control-danger-fgColor-rest: #f0883e;
 --control-danger-fgColor-hover: #f0883e;
 --control-danger-bgColor-hover: #db6d281a;
 --control-danger-bgColor-active: #db6d2866;
@@ -264,11 +264,11 @@
 --button-outline-borderColor-hover: #3d444d;
 --button-outline-borderColor-selected: #3d444d;
 --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-  --button-danger-fgColor-rest: #db6d28;
+  --button-danger-fgColor-rest: #f0883e;
 --button-danger-fgColor-hover: #ffffff;
 --button-danger-fgColor-active: #ffffff;
-  --button-danger-fgColor-disabled: #db6d2880;
-  --button-danger-iconColor-rest: #db6d28;
+  --button-danger-fgColor-disabled: #f0883e80;
+  --button-danger-iconColor-rest: #f0883e;
 --button-danger-iconColor-hover: #ffffff;
 --button-danger-bgColor-rest: #212830;
 --button-danger-bgColor-hover: #9b4215;
@@ -293,9 +293,9 @@
 --buttonCounter-danger-bgColor-hover: #ffffff33;
 --buttonCounter-danger-bgColor-disabled: #bd561d0d;
 --buttonCounter-danger-bgColor-rest: #49020233;
-  --buttonCounter-danger-fgColor-rest: #db6d28;
+  --buttonCounter-danger-fgColor-rest: #f0883e;
 --buttonCounter-danger-fgColor-hover: #ffffff;
-  --buttonCounter-danger-fgColor-disabled: #db6d2880;
+  --buttonCounter-danger-fgColor-disabled: #f0883e80;
 --reactionButton-selected-bgColor-rest: #388bfd33;
 --reactionButton-selected-bgColor-hover: #3a8cfd5c;
 --reactionButton-selected-fgColor-rest: #4493f8;
@@ -446,7 +446,7 @@
 --fgColor-open: #f0883e;
 --fgColor-attention: #d29922;
 --fgColor-severe: #db6d28;
-  --fgColor-danger: #db6d28;
+  --fgColor-danger: #f0883e;
 --fgColor-closed: #9198a1;
 --fgColor-done: #ab7df8;
 --fgColor-upsell: #ab7df8;
@@ -466,7 +466,7 @@
 --bgColor-accent-emphasis: #1f6feb;
 --bgColor-success-muted: #388bfd26;
 --bgColor-success-emphasis: #1f6feb;
-  --bgColor-open-muted: #db6d2866;
+  --bgColor-open-muted: #db6d2833;
 --bgColor-open-emphasis: #bd561d;
 --bgColor-attention-muted: #bb800926;
 --bgColor-attention-emphasis: #9e6a03;
@@ -755,7 +755,7 @@
   --control-transparent-borderColor-rest: #00000000;
   --control-transparent-borderColor-hover: #00000000;
   --control-transparent-borderColor-active: #00000000;
-    --control-danger-fgColor-rest: #db6d28;
+    --control-danger-fgColor-rest: #f0883e;
   --control-danger-fgColor-hover: #f0883e;
   --control-danger-bgColor-hover: #db6d281a;
   --control-danger-bgColor-active: #db6d2866;
@@ -833,11 +833,11 @@
   --button-outline-borderColor-hover: #3d444d;
   --button-outline-borderColor-selected: #3d444d;
   --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-    --button-danger-fgColor-rest: #db6d28;
+    --button-danger-fgColor-rest: #f0883e;
   --button-danger-fgColor-hover: #ffffff;
   --button-danger-fgColor-active: #ffffff;
-    --button-danger-fgColor-disabled: #db6d2880;
-    --button-danger-iconColor-rest: #db6d28;
+    --button-danger-fgColor-disabled: #f0883e80;
+    --button-danger-iconColor-rest: #f0883e;
   --button-danger-iconColor-hover: #ffffff;
   --button-danger-bgColor-rest: #212830;
   --button-danger-bgColor-hover: #9b4215;
@@ -862,9 +862,9 @@
   --buttonCounter-danger-bgColor-hover: #ffffff33;
   --buttonCounter-danger-bgColor-disabled: #bd561d0d;
   --buttonCounter-danger-bgColor-rest: #49020233;
-    --buttonCounter-danger-fgColor-rest: #db6d28;
+    --buttonCounter-danger-fgColor-rest: #f0883e;
   --buttonCounter-danger-fgColor-hover: #ffffff;
-    --buttonCounter-danger-fgColor-disabled: #db6d2880;
+    --buttonCounter-danger-fgColor-disabled: #f0883e80;
   --reactionButton-selected-bgColor-rest: #388bfd33;
   --reactionButton-selected-bgColor-hover: #3a8cfd5c;
   --reactionButton-selected-fgColor-rest: #4493f8;
@@ -1015,7 +1015,7 @@
   --fgColor-open: #f0883e;
   --fgColor-attention: #d29922;
   --fgColor-severe: #db6d28;
-    --fgColor-danger: #db6d28;
+    --fgColor-danger: #f0883e;
   --fgColor-closed: #9198a1;
   --fgColor-done: #ab7df8;
   --fgColor-upsell: #ab7df8;
@@ -1035,7 +1035,7 @@
   --bgColor-accent-emphasis: #1f6feb;
   --bgColor-success-muted: #388bfd26;
   --bgColor-success-emphasis: #1f6feb;
-    --bgColor-open-muted: #db6d2866;
+    --bgColor-open-muted: #db6d2833;
   --bgColor-open-emphasis: #bd561d;
   --bgColor-attention-muted: #bb800926;
   --bgColor-attention-emphasis: #9e6a03;

/css/functional/themes/dark-tritanopia.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-tritanopia.css	2024-09-25 07:23:33.730742946 +0000
@@ -466,7 +466,7 @@
 --bgColor-accent-emphasis: #1f6feb;
 --bgColor-success-muted: #388bfd26;
 --bgColor-success-emphasis: #1f6feb;
-  --bgColor-open-muted: #f8514926;
+  --bgColor-open-muted: #f851491a;
 --bgColor-open-emphasis: #da3633;
 --bgColor-attention-muted: #bb800926;
 --bgColor-attention-emphasis: #9e6a03;
@@ -1035,7 +1035,7 @@
   --bgColor-accent-emphasis: #1f6feb;
   --bgColor-success-muted: #388bfd26;
   --bgColor-success-emphasis: #1f6feb;
-    --bgColor-open-muted: #f8514926;
+    --bgColor-open-muted: #f851491a;
   --bgColor-open-emphasis: #da3633;
   --bgColor-attention-muted: #bb800926;
   --bgColor-attention-emphasis: #9e6a03;

/css/functional/themes/light-colorblind.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-colorblind.css	2024-09-25 07:23:30.218736058 +0000
@@ -186,8 +186,8 @@
 --control-transparent-borderColor-rest: #ffffff00;
 --control-transparent-borderColor-hover: #ffffff00;
 --control-transparent-borderColor-active: #ffffff00;
-  --control-danger-fgColor-rest: #be4e02;
-  --control-danger-fgColor-hover: #be4e02;
+  --control-danger-fgColor-rest: #bc4c00;
+  --control-danger-fgColor-hover: #bc4c00;
 --control-danger-bgColor-hover: #fff1e5;
 --control-danger-bgColor-active: #fff1e566;
 --control-checked-bgColor-rest: #0969da;
@@ -264,11 +264,11 @@
 --button-outline-borderColor-hover: #1f232826;
 --button-outline-borderColor-active: #1f232826;
 --button-outline-shadow-selected: inset 0px 1px 0px 0px #00215533;
-  --button-danger-fgColor-rest: #be4e02;
+  --button-danger-fgColor-rest: #bc4c00;
 --button-danger-fgColor-hover: #ffffff;
 --button-danger-fgColor-active: #ffffff;
-  --button-danger-fgColor-disabled: #be4e0280;
-  --button-danger-iconColor-rest: #be4e02;
+  --button-danger-fgColor-disabled: #bc4c0080;
+  --button-danger-iconColor-rest: #bc4c00;
 --button-danger-iconColor-hover: #ffffff;
 --button-danger-bgColor-rest: #f6f8fa;
 --button-danger-bgColor-hover: #953800;
@@ -295,7 +295,7 @@
 --buttonCounter-danger-bgColor-rest: #bc4c001a;
 --buttonCounter-danger-fgColor-rest: #c21c2c;
 --buttonCounter-danger-fgColor-hover: #ffffff;
-  --buttonCounter-danger-fgColor-disabled: #be4e0280;
+  --buttonCounter-danger-fgColor-disabled: #bc4c0080;
 --reactionButton-selected-bgColor-rest: #ddf4ff;
 --reactionButton-selected-bgColor-hover: #caecff;
 --reactionButton-selected-fgColor-rest: #0969da;
@@ -447,7 +447,7 @@
 --fgColor-open: #bc4c00;
 --fgColor-attention: #9a6700;
 --fgColor-severe: #bc4c00;
-  --fgColor-danger: #be4e02;
+  --fgColor-danger: #bc4c00;
 --fgColor-closed: #59636e;
 --fgColor-done: #8250df;
 --fgColor-upsell: #8250df;
@@ -467,8 +467,8 @@
 --bgColor-accent-emphasis: #0969da;
 --bgColor-success-muted: #ddf4ff;
 --bgColor-success-emphasis: #0969da;
-  --bgColor-open-muted: #fb8f4466;
-  --bgColor-open-emphasis: #e16f24;
+  --bgColor-open-muted: #fff1e5;
+  --bgColor-open-emphasis: #bc4c00;
 --bgColor-attention-muted: #fff8c5;
 --bgColor-attention-emphasis: #9a6700;
 --bgColor-severe-muted: #fff1e5;
@@ -755,8 +755,8 @@
   --control-transparent-borderColor-rest: #ffffff00;
   --control-transparent-borderColor-hover: #ffffff00;
   --control-transparent-borderColor-active: #ffffff00;
-    --control-danger-fgColor-rest: #be4e02;
-    --control-danger-fgColor-hover: #be4e02;
+    --control-danger-fgColor-rest: #bc4c00;
+    --control-danger-fgColor-hover: #bc4c00;
   --control-danger-bgColor-hover: #fff1e5;
   --control-danger-bgColor-active: #fff1e566;
   --control-checked-bgColor-rest: #0969da;
@@ -833,11 +833,11 @@
   --button-outline-borderColor-hover: #1f232826;
   --button-outline-borderColor-active: #1f232826;
   --button-outline-shadow-selected: inset 0px 1px 0px 0px #00215533;
-    --button-danger-fgColor-rest: #be4e02;
+    --button-danger-fgColor-rest: #bc4c00;
   --button-danger-fgColor-hover: #ffffff;
   --button-danger-fgColor-active: #ffffff;
-    --button-danger-fgColor-disabled: #be4e0280;
-    --button-danger-iconColor-rest: #be4e02;
+    --button-danger-fgColor-disabled: #bc4c0080;
+    --button-danger-iconColor-rest: #bc4c00;
   --button-danger-iconColor-hover: #ffffff;
   --button-danger-bgColor-rest: #f6f8fa;
   --button-danger-bgColor-hover: #953800;
@@ -864,7 +864,7 @@
   --buttonCounter-danger-bgColor-rest: #bc4c001a;
   --buttonCounter-danger-fgColor-rest: #c21c2c;
   --buttonCounter-danger-fgColor-hover: #ffffff;
-    --buttonCounter-danger-fgColor-disabled: #be4e0280;
+    --buttonCounter-danger-fgColor-disabled: #bc4c0080;
   --reactionButton-selected-bgColor-rest: #ddf4ff;
   --reactionButton-selected-bgColor-hover: #caecff;
   --reactionButton-selected-fgColor-rest: #0969da;
@@ -1016,7 +1016,7 @@
   --fgColor-open: #bc4c00;
   --fgColor-attention: #9a6700;
   --fgColor-severe: #bc4c00;
-    --fgColor-danger: #be4e02;
+    --fgColor-danger: #bc4c00;
   --fgColor-closed: #59636e;
   --fgColor-done: #8250df;
   --fgColor-upsell: #8250df;
@@ -1036,8 +1036,8 @@
   --bgColor-accent-emphasis: #0969da;
   --bgColor-success-muted: #ddf4ff;
   --bgColor-success-emphasis: #0969da;
-    --bgColor-open-muted: #fb8f4466;
-    --bgColor-open-emphasis: #e16f24;
+    --bgColor-open-muted: #fff1e5;
+    --bgColor-open-emphasis: #bc4c00;
   --bgColor-attention-muted: #fff8c5;
   --bgColor-attention-emphasis: #9a6700;
   --bgColor-severe-muted: #fff1e5;

lukasoppermann · 2024-09-25T08:21:23Z

Merging this. As you can see here: https://github.com/primer/primitives/actions/runs/11028269399/job/30628267322?pr=1066 all tests are passing. The issue is that with now 4 added themes to test, the result is too long for the action to post it into a comment.

This has to be addressed in a different way, by reworking how the action reports the results. I will create a separate PR to solve this.

enable colorblind mode in contrast check

e01d4e1

lukasoppermann requested review from a team as code owners September 24, 2024 15:00

lukasoppermann requested a review from jonrohan September 24, 2024 15:00

lukasoppermann temporarily deployed to github-pages September 24, 2024 15:01 — with GitHub Actions Inactive

github-actions bot temporarily deployed to Preview (Storybook) September 24, 2024 15:02 Inactive

lukasoppermann temporarily deployed to github-pages September 24, 2024 15:09 — with GitHub Actions Inactive

github-actions bot temporarily deployed to Preview (Storybook) September 24, 2024 15:09 Inactive

working on fixing colorblind contrast

600d9bd

lukasoppermann force-pushed the add-contrast-checks branch from 3f187c7 to 600d9bd Compare September 25, 2024 07:18

lukasoppermann temporarily deployed to github-pages September 25, 2024 07:20 — with GitHub Actions Inactive

github-actions bot temporarily deployed to Preview (Storybook) September 25, 2024 07:20 Inactive

eable and fix tritanopia

5d72c65

lukasoppermann added the update snapshots Update visual regression test snapshots label Sep 25, 2024

lukasoppermann deployed to github-pages September 25, 2024 07:24 — with GitHub Actions View deployment

github-actions bot temporarily deployed to Preview (Storybook) September 25, 2024 07:24 Inactive

github-actions bot removed the update snapshots Update visual regression test snapshots label Sep 25, 2024

lukasoppermann merged commit 51b0324 into main Sep 25, 2024
27 of 28 checks passed

lukasoppermann deleted the add-contrast-checks branch September 25, 2024 08:21

primer bot mentioned this pull request Sep 25, 2024

Release Tracking #1062

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

enable colorblind mode in contrast check #1066

enable colorblind mode in contrast check #1066

lukasoppermann commented Sep 24, 2024

changeset-bot bot commented Sep 24, 2024 •

edited

Loading

github-actions bot commented Sep 24, 2024 •

edited

Loading

/css/functional/themes/dark-colorblind.css

/css/functional/themes/dark-tritanopia.css

/css/functional/themes/light-colorblind.css

lukasoppermann commented Sep 25, 2024

enable colorblind mode in contrast check #1066

enable colorblind mode in contrast check #1066

Conversation

lukasoppermann commented Sep 24, 2024

Summary

List of notable changes:

What should reviewers focus on?

Steps to test:

changeset-bot bot commented Sep 24, 2024 • edited Loading

🦋 Changeset detected

github-actions bot commented Sep 24, 2024 • edited Loading

Design Token Diff

/css/functional/themes/dark-colorblind.css

/css/functional/themes/dark-tritanopia.css

/css/functional/themes/light-colorblind.css

lukasoppermann commented Sep 25, 2024

changeset-bot bot commented Sep 24, 2024 •

edited

Loading

github-actions bot commented Sep 24, 2024 •

edited

Loading