Skip to content

A11y update to fix contrast issue with primary green - #514

Merged
lukasoppermann merged 2 commits into
mainfrom
a11y/primary-green
Mar 29, 2023
Merged

lukasoppermann merged 2 commits into
mainfrom
a11y/primary-green

Conversation

@lukasoppermann

Copy link
Copy Markdown
Collaborator

Summary

This PR fixes the failing contrast between the white text and green button background as part of https://github.com/github/primer/issues/1648.

It addresses both the current (old) implementation as well as the new v3 tokens.

@lukasoppermann
lukasoppermann requested a review from a team as a code owner March 14, 2023 13:26
@lukasoppermann
lukasoppermann requested review from a team, josepmartins and tobiasahlin March 14, 2023 13:26
@changeset-bot

changeset-bot Bot commented Mar 14, 2023 •

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: a6dcf3c

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

@github-actions

github-actions Bot commented Mar 14, 2023 •

Copy link
Copy Markdown
Contributor
Variables changed
--- base/dist/scss/colors/_light.scss	2023-03-29 07:38:45.551777692 +0000
+++ dist/scss/colors/_light.scss	2023-03-29 07:37:39.419164623 +0000
@@ -21,3 +21,3 @@
     --color-diffstat-addition-border: rgba(31,35,40,0.15);
-    --color-diffstat-addition-bg: #2da44e;
+    --color-diffstat-addition-bg: #1f883d;
     --color-search-keyword-hl: #fff8c5;
@@ -88,3 +88,3 @@
     --color-checks-donut-pending: #bf8700;
-    --color-checks-donut-success: #2da44e;
+    --color-checks-donut-success: #1f883d;
     --color-checks-donut-neutral: #afb8c1;
@@ -205,3 +205,3 @@
     --color-btn-primary-text: #ffffff;
-    --color-btn-primary-bg: #2da44e;
+    --color-btn-primary-bg: #1f883d;
     --color-btn-primary-border: rgba(31,35,40,0.15);
@@ -209,5 +209,5 @@
     --color-btn-primary-inset-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
-    --color-btn-primary-hover-bg: #2c974b;
+    --color-btn-primary-hover-bg: #1a7f37;
     --color-btn-primary-hover-border: rgba(31,35,40,0.15);
-    --color-btn-primary-selected-bg: hsla(137,55%,36%,1);
+    --color-btn-primary-selected-bg: hsla(137,66%,28%,1);
     --color-btn-primary-selected-shadow: inset 0 1px 0 rgba(0,45,17,0.2);
@@ -311,3 +311,3 @@
     --color-success-fg: #1a7f37;
-    --color-success-emphasis: #2da44e;
+    --color-success-emphasis: #1f883d;
     --color-success-muted: rgba(74,194,107,0.4);
@@ -327,3 +327,3 @@
     --color-open-fg: #1a7f37;
-    --color-open-emphasis: #2da44e;
+    --color-open-emphasis: #1f883d;
     --color-open-muted: rgba(74,194,107,0.4);
--- base/dist/scss/colors/_light_colorblind.scss	2023-03-29 07:38:45.567777840 +0000
+++ dist/scss/colors/_light_colorblind.scss	2023-03-29 07:37:39.435164785 +0000
@@ -21,3 +21,3 @@
     --color-diffstat-addition-border: rgba(27,31,36,0.15);
-    --color-diffstat-addition-bg: #218bff;
+    --color-diffstat-addition-bg: #1f883d;
     --color-search-keyword-hl: #fff8c5;
@@ -88,3 +88,3 @@
     --color-checks-donut-pending: #bf8700;
-    --color-checks-donut-success: #218bff;
+    --color-checks-donut-success: #1f883d;
     --color-checks-donut-neutral: #afb8c1;
@@ -205,3 +205,3 @@
     --color-btn-primary-text: #ffffff;
-    --color-btn-primary-bg: #218bff;
+    --color-btn-primary-bg: #1f883d;
     --color-btn-primary-border: rgba(27,31,36,0.15);
@@ -311,3 +311,3 @@
     --color-success-fg: #0969da;
-    --color-success-emphasis: #218bff;
+    --color-success-emphasis: #1f883d;
     --color-success-muted: rgba(84,174,255,0.4);
--- base/dist/scss/colors/_light_high_contrast.scss	2023-03-29 07:38:45.559777766 +0000
+++ dist/scss/colors/_light_high_contrast.scss	2023-03-29 07:37:39.427164704 +0000
@@ -21,3 +21,3 @@
     --color-diffstat-addition-border: rgba(1,4,9,0.8);
-    --color-diffstat-addition-bg: #117f32;
+    --color-diffstat-addition-bg: #055d20;
     --color-search-keyword-hl: #fcf7be;
@@ -88,3 +88,3 @@
     --color-checks-donut-pending: #956400;
-    --color-checks-donut-success: #117f32;
+    --color-checks-donut-success: #055d20;
     --color-checks-donut-neutral: #acb6c0;
@@ -327,3 +327,3 @@
     --color-open-fg: #055d20;
-    --color-open-emphasis: #117f32;
+    --color-open-emphasis: #055d20;
     --color-open-muted: rgba(38,161,72,0.4);
--- base/dist/scss/colors/_light_tritanopia.scss	2023-03-29 07:38:45.575777914 +0000
+++ dist/scss/colors/_light_tritanopia.scss	2023-03-29 07:37:39.443164866 +0000
@@ -21,3 +21,3 @@
     --color-diffstat-addition-border: rgba(27,31,36,0.15);
-    --color-diffstat-addition-bg: #218bff;
+    --color-diffstat-addition-bg: #1f883d;
     --color-search-keyword-hl: #fff8c5;
@@ -88,3 +88,3 @@
     --color-checks-donut-pending: #bf8700;
-    --color-checks-donut-success: #218bff;
+    --color-checks-donut-success: #1f883d;
     --color-checks-donut-neutral: #afb8c1;
@@ -205,3 +205,3 @@
     --color-btn-primary-text: #ffffff;
-    --color-btn-primary-bg: #218bff;
+    --color-btn-primary-bg: #1f883d;
     --color-btn-primary-border: rgba(27,31,36,0.15);
@@ -311,3 +311,3 @@
     --color-success-fg: #0969da;
-    --color-success-emphasis: #218bff;
+    --color-success-emphasis: #1f883d;
     --color-success-muted: rgba(84,174,255,0.4);

@github-actions

github-actions Bot commented Mar 14, 2023 •

Copy link
Copy Markdown
Contributor

🟢 No design token changes found

@lukasoppermann
lukasoppermann temporarily deployed to github-pages March 14, 2023 13:31 — with GitHub Actions Inactive
@github-actions
github-actions Bot temporarily deployed to storybook-preview March 14, 2023 13:31 Inactive
@lukasoppermann
lukasoppermann requested review from langermank and simurai and removed request for josepmartins and tobiasahlin March 14, 2023 15:16
@lukasoppermann lukasoppermann self-assigned this Mar 14, 2023
Comment thread data/colors/vars/global_light.ts Resolved
@github-actions
github-actions Bot temporarily deployed to storybook-preview March 29, 2023 07:36 Inactive
@github-actions
github-actions Bot temporarily deployed to storybook-preview March 29, 2023 07:42 Inactive
@lukasoppermann
lukasoppermann merged commit bf3231f into main Mar 29, 2023
@lukasoppermann
lukasoppermann deleted the a11y/primary-green branch March 29, 2023 07:42

This branch was previously deployed

2 inactive deployments
storybook-preview — a6dcf3c5 Deployed Mar 29, 2023 by github-actions[bot]
github-pages — a6dcf3c5 Deployed Mar 29, 2023 by lukasoppermann
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.

2 participants