Adjust `prettylights` comment fg color by langermank · Pull Request #781 · primer/primitives

langermank · 2023-11-21T22:17:59Z

Use the next step in the gray scale to achieve proper contrast over the muted background color

Closes https://github.com/github/accessibility-audits/issues/5949

changeset-bot · 2023-11-21T22:18:03Z

🦋 Changeset detected

Latest commit: 2335f17

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 · 2023-11-21T22:18:21Z

Variables changed

--- base/dist/scss/colors/_light.scss	2023-11-22 15:54:51.408766543 +0000
+++ dist/scss/colors/_light.scss	2023-11-22 15:54:38.008802242 +0000
@@ -23,3 +23,3 @@
     --color-search-keyword-hl: #fff8c5;
-    --color-prettylights-syntax-comment: #6e7781;
+    --color-prettylights-syntax-comment: #57606a;
     --color-prettylights-syntax-constant: #0550ae;
--- base/dist/scss/colors/_light_colorblind.scss	2023-11-22 15:54:51.424766501 +0000
+++ dist/scss/colors/_light_colorblind.scss	2023-11-22 15:54:38.024802218 +0000
@@ -23,3 +23,3 @@
     --color-search-keyword-hl: #fff8c5;
-    --color-prettylights-syntax-comment: #6e7781;
+    --color-prettylights-syntax-comment: #57606a;
     --color-prettylights-syntax-constant: #0550ae;
--- base/dist/scss/colors/_light_high_contrast.scss	2023-11-22 15:54:51.416766523 +0000
+++ dist/scss/colors/_light_high_contrast.scss	2023-11-22 15:54:38.016802230 +0000
@@ -23,3 +23,3 @@
     --color-search-keyword-hl: #fcf7be;
-    --color-prettylights-syntax-comment: #66707b;
+    --color-prettylights-syntax-comment: #4b535d;
     --color-prettylights-syntax-constant: #023b95;
--- base/dist/scss/colors/_light_tritanopia.scss	2023-11-22 15:54:51.428766490 +0000
+++ dist/scss/colors/_light_tritanopia.scss	2023-11-22 15:54:38.032802205 +0000
@@ -23,3 +23,3 @@
     --color-search-keyword-hl: #fff8c5;
-    --color-prettylights-syntax-comment: #6e7781;
+    --color-prettylights-syntax-comment: #57606a;
     --color-prettylights-syntax-constant: #0550ae;

github-actions · 2023-11-21T22:18:55Z

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

github-actions · 2023-11-21T22:19:14Z

Design Token Diff

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

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-colorblind.css	2023-11-22 15:54:29.913040124 +0000
@@ -286,7 +286,7 @@
 --color-ansi-magenta-bright: #a475f9;
 --color-ansi-cyan: #1b7c83;
 --color-ansi-cyan-bright: #3192aa;
-  --color-prettylights-syntax-comment: #6e7781;
+  --color-prettylights-syntax-comment: #57606a;
 --color-prettylights-syntax-constant: #0550ae;
 --color-prettylights-syntax-constant-other-reference-link: #0a3069;
 --color-prettylights-syntax-entity: #6639ba;
@@ -706,7 +706,7 @@
   --color-ansi-magenta-bright: #a475f9;
   --color-ansi-cyan: #1b7c83;
   --color-ansi-cyan-bright: #3192aa;
-    --color-prettylights-syntax-comment: #6e7781;
+    --color-prettylights-syntax-comment: #57606a;
   --color-prettylights-syntax-constant: #0550ae;
   --color-prettylights-syntax-constant-other-reference-link: #0a3069;
   --color-prettylights-syntax-entity: #6639ba;

/css/functional/themes/light-high-contrast.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-high-contrast.css	2023-11-22 15:54:30.245040934 +0000
@@ -286,7 +286,7 @@
 --color-ansi-magenta-bright: #844ae7;
 --color-ansi-cyan: #1b7c83;
 --color-ansi-cyan-bright: #3192aa;
-  --color-prettylights-syntax-comment: #66707b;
+  --color-prettylights-syntax-comment: #4b535d;
 --color-prettylights-syntax-constant: #023b95;
 --color-prettylights-syntax-constant-other-reference-link: #032563;
 --color-prettylights-syntax-entity: #512598;
@@ -706,7 +706,7 @@
   --color-ansi-magenta-bright: #844ae7;
   --color-ansi-cyan: #1b7c83;
   --color-ansi-cyan-bright: #3192aa;
-    --color-prettylights-syntax-comment: #66707b;
+    --color-prettylights-syntax-comment: #4b535d;
   --color-prettylights-syntax-constant: #023b95;
   --color-prettylights-syntax-constant-other-reference-link: #032563;
   --color-prettylights-syntax-entity: #512598;

/css/functional/themes/light-tritanopia.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-tritanopia.css	2023-11-22 15:54:29.529039186 +0000
@@ -286,7 +286,7 @@
 --color-ansi-magenta-bright: #a475f9;
 --color-ansi-cyan: #1b7c83;
 --color-ansi-cyan-bright: #3192aa;
-  --color-prettylights-syntax-comment: #6e7781;
+  --color-prettylights-syntax-comment: #57606a;
 --color-prettylights-syntax-constant: #0550ae;
 --color-prettylights-syntax-constant-other-reference-link: #0a3069;
 --color-prettylights-syntax-entity: #6639ba;
@@ -706,7 +706,7 @@
   --color-ansi-magenta-bright: #a475f9;
   --color-ansi-cyan: #1b7c83;
   --color-ansi-cyan-bright: #3192aa;
-    --color-prettylights-syntax-comment: #6e7781;
+    --color-prettylights-syntax-comment: #57606a;
   --color-prettylights-syntax-constant: #0550ae;
   --color-prettylights-syntax-constant-other-reference-link: #0a3069;
   --color-prettylights-syntax-entity: #6639ba;

/css/functional/themes/light.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light.css	2023-11-22 15:54:29.093038123 +0000
@@ -286,7 +286,7 @@
 --color-ansi-magenta-bright: #a475f9;
 --color-ansi-cyan: #1b7c83;
 --color-ansi-cyan-bright: #3192aa;
-  --color-prettylights-syntax-comment: #6e7781;
+  --color-prettylights-syntax-comment: #57606a;
 --color-prettylights-syntax-constant: #0550ae;
 --color-prettylights-syntax-constant-other-reference-link: #0a3069;
 --color-prettylights-syntax-entity: #6639ba;
@@ -706,7 +706,7 @@
   --color-ansi-magenta-bright: #a475f9;
   --color-ansi-cyan: #1b7c83;
   --color-ansi-cyan-bright: #3192aa;
-    --color-prettylights-syntax-comment: #6e7781;
+    --color-prettylights-syntax-comment: #57606a;
   --color-prettylights-syntax-constant: #0550ae;
   --color-prettylights-syntax-constant-other-reference-link: #0a3069;
   --color-prettylights-syntax-entity: #6639ba;

adjust scale color

a997d0f

langermank requested a review from a team as a code owner November 21, 2023 22:18

langermank requested review from a team, jonrohan and mperrotti November 21, 2023 22:18

Create cyan-jobs-cheer.md

d3365f1

langermank temporarily deployed to github-pages November 21, 2023 22:19 — with GitHub Actions Inactive

github-actions Bot temporarily deployed to storybook-preview November 21, 2023 22:20 Inactive

jonrohan approved these changes Nov 21, 2023

View reviewed changes

langermank added the update snapshots Update visual regression test snapshots label Nov 21, 2023

github-actions[bot] Regenerated snapshots

06342a1

github-actions Bot removed the update snapshots Update visual regression test snapshots label Nov 21, 2023

Update cyan-jobs-cheer.md

2335f17

langermank temporarily deployed to github-pages November 22, 2023 15:55 — with GitHub Actions Inactive

github-actions Bot temporarily deployed to storybook-preview November 22, 2023 15:55 Inactive

langermank merged commit 8ba7d6b into main Nov 22, 2023

langermank deleted the prettylights-contrast-fix branch November 22, 2023 17:11

primer Bot mentioned this pull request Nov 22, 2023

Release Tracking #784

Merged

Navigation Menu

Repository navigation

Adjust `prettylights` comment fg color - #781

Adjust `prettylights` comment fg color#781
langermank merged 4 commits into
mainfrom
prettylights-contrast-fix

langermank commented Nov 21, 2023

Uh oh!

changeset-bot Bot commented Nov 21, 2023 •

edited

Loading

Uh oh!

github-actions Bot commented Nov 21, 2023 •

edited

Loading

Uh oh!

github-actions Bot commented Nov 21, 2023 •

edited

Loading

Uh oh!

github-actions Bot commented Nov 21, 2023 •

edited

Loading

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

/css/functional/themes/light-high-contrast.css

/css/functional/themes/light-tritanopia.css

/css/functional/themes/light.css

Uh oh!

This branch was previously deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

langermank commented Nov 21, 2023

Uh oh!

changeset-bot Bot commented Nov 21, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Nov 21, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Nov 21, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Design Token Contrast Check

light: ✅ all checks passed

dark: ❌ 9 checks failed

Uh oh!

github-actions Bot commented Nov 21, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Design Token Diff

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

/css/functional/themes/light-high-contrast.css

/css/functional/themes/light-tritanopia.css

/css/functional/themes/light.css

Uh oh!

This branch was previously deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

changeset-bot Bot commented Nov 21, 2023 •

edited

Loading

github-actions Bot commented Nov 21, 2023 •

edited

Loading

github-actions Bot commented Nov 21, 2023 •

edited

Loading

`light`: ✅ all checks passed

`dark`: ❌ 9 checks failed

github-actions Bot commented Nov 21, 2023 •

edited

Loading