Increase contrast for dark `fg.subtle` by simurai · Pull Request #307 · primer/primitives

simurai · 2022-03-11T07:59:19Z

This is part of https://github.com/github/primer/issues/766 and increases contrast for fg.subtle in the dark theme.

Before	After

With a 4.11 contrast ratio it still doesn't pass accessibility guidelines, but comes closer:

Here in dark_high_contrast:

Before	After

where it passes accessibility guidelines:

changeset-bot · 2022-03-11T07:59:21Z

🦋 Changeset detected

Latest commit: 9bacb75

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

vercel · 2022-03-11T07:59:22Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/primer/primitives/2ViWxhchZt8WjrVNHbaBA7bA7Jko
✅ Preview: https://primitives-git-update-fg-subtle-primer.vercel.app

github-actions · 2022-03-11T07:59:33Z

Variables changed

--- base/dist/scss/colors/_dark.scss	2022-03-11 08:10:28.755384281 +0000
+++ dist/scss/colors/_dark.scss	2022-03-11 08:10:18.527286563 +0000
@@ -57,3 +57,3 @@
     --color-codemirror-guttermarker-text: #0d1117;
-    --color-codemirror-guttermarker-subtle-text: #484f58;
+    --color-codemirror-guttermarker-subtle-text: #6e7681;
     --color-codemirror-linenumber-text: #8b949e;
@@ -82,3 +82,3 @@
     --color-checks-input-text: #8b949e;
-    --color-checks-input-placeholder-text: #484f58;
+    --color-checks-input-placeholder-text: #6e7681;
     --color-checks-input-focus-text: #c9d1d9;
@@ -104,4 +104,4 @@
     --color-checks-line-text: #8b949e;
-    --color-checks-line-num-text: #484f58;
-    --color-checks-line-timestamp-text: #484f58;
+    --color-checks-line-num-text: #6e7681;
+    --color-checks-line-timestamp-text: #6e7681;
     --color-checks-line-hover-bg: rgba(110,118,129,0.1);
@@ -118,6 +118,6 @@
     --color-checks-logline-text: #8b949e;
-    --color-checks-logline-num-text: #484f58;
+    --color-checks-logline-num-text: #6e7681;
     --color-checks-logline-debug-text: #a371f7;
     --color-checks-logline-error-text: #8b949e;
-    --color-checks-logline-error-num-text: #484f58;
+    --color-checks-logline-error-num-text: #6e7681;
     --color-checks-logline-error-bg: rgba(248,81,73,0.15);
@@ -261,3 +261,3 @@
     --color-btn-danger-icon: #f85149;
-    --color-underlinenav-icon: #484f58;
+    --color-underlinenav-icon: #6e7681;
     --color-underlinenav-border-hover: rgba(110,118,129,0.4);
@@ -274,3 +274,3 @@
     --color-fg-muted: #8b949e;
-    --color-fg-subtle: #484f58;
+    --color-fg-subtle: #6e7681;
     --color-fg-on-emphasis: #ffffff;
--- base/dist/scss/colors/_dark_colorblind.scss	2022-03-11 08:10:28.767384378 +0000
+++ dist/scss/colors/_dark_colorblind.scss	2022-03-11 08:10:18.543286682 +0000
@@ -57,3 +57,3 @@
     --color-codemirror-guttermarker-text: #0d1117;
-    --color-codemirror-guttermarker-subtle-text: #484f58;
+    --color-codemirror-guttermarker-subtle-text: #6e7681;
     --color-codemirror-linenumber-text: #8b949e;
@@ -82,3 +82,3 @@
     --color-checks-input-text: #8b949e;
-    --color-checks-input-placeholder-text: #484f58;
+    --color-checks-input-placeholder-text: #6e7681;
     --color-checks-input-focus-text: #c9d1d9;
@@ -104,4 +104,4 @@
     --color-checks-line-text: #8b949e;
-    --color-checks-line-num-text: #484f58;
-    --color-checks-line-timestamp-text: #484f58;
+    --color-checks-line-num-text: #6e7681;
+    --color-checks-line-timestamp-text: #6e7681;
     --color-checks-line-hover-bg: rgba(110,118,129,0.1);
@@ -118,6 +118,6 @@
     --color-checks-logline-text: #8b949e;
-    --color-checks-logline-num-text: #484f58;
+    --color-checks-logline-num-text: #6e7681;
     --color-checks-logline-debug-text: #a371f7;
     --color-checks-logline-error-text: #8b949e;
-    --color-checks-logline-error-num-text: #484f58;
+    --color-checks-logline-error-num-text: #6e7681;
     --color-checks-logline-error-bg: rgba(212,118,22,0.15);
@@ -261,3 +261,3 @@
     --color-btn-danger-icon: #d47616;
-    --color-underlinenav-icon: #484f58;
+    --color-underlinenav-icon: #6e7681;
     --color-underlinenav-border-hover: rgba(110,118,129,0.4);
@@ -274,3 +274,3 @@
     --color-fg-muted: #8b949e;
-    --color-fg-subtle: #484f58;
+    --color-fg-subtle: #6e7681;
     --color-fg-on-emphasis: #ffffff;
--- base/dist/scss/colors/_dark_dimmed.scss	2022-03-11 08:10:28.759384314 +0000
+++ dist/scss/colors/_dark_dimmed.scss	2022-03-11 08:10:18.531286593 +0000
@@ -57,3 +57,3 @@
     --color-codemirror-guttermarker-text: #22272e;
-    --color-codemirror-guttermarker-subtle-text: #545d68;
+    --color-codemirror-guttermarker-subtle-text: #636e7b;
     --color-codemirror-linenumber-text: #768390;
@@ -82,3 +82,3 @@
     --color-checks-input-text: #768390;
-    --color-checks-input-placeholder-text: #545d68;
+    --color-checks-input-placeholder-text: #636e7b;
     --color-checks-input-focus-text: #adbac7;
@@ -104,4 +104,4 @@
     --color-checks-line-text: #768390;
-    --color-checks-line-num-text: #545d68;
-    --color-checks-line-timestamp-text: #545d68;
+    --color-checks-line-num-text: #636e7b;
+    --color-checks-line-timestamp-text: #636e7b;
     --color-checks-line-hover-bg: rgba(99,110,123,0.1);
@@ -118,6 +118,6 @@
     --color-checks-logline-text: #768390;
-    --color-checks-logline-num-text: #545d68;
+    --color-checks-logline-num-text: #636e7b;
     --color-checks-logline-debug-text: #986ee2;
     --color-checks-logline-error-text: #768390;
-    --color-checks-logline-error-num-text: #545d68;
+    --color-checks-logline-error-num-text: #636e7b;
     --color-checks-logline-error-bg: rgba(229,83,75,0.15);
@@ -261,3 +261,3 @@
     --color-btn-danger-icon: #e5534b;
-    --color-underlinenav-icon: #545d68;
+    --color-underlinenav-icon: #636e7b;
     --color-underlinenav-border-hover: rgba(99,110,123,0.4);
@@ -274,3 +274,3 @@
     --color-fg-muted: #768390;
-    --color-fg-subtle: #545d68;
+    --color-fg-subtle: #636e7b;
     --color-fg-on-emphasis: #cdd9e5;
--- base/dist/scss/colors/_dark_high_contrast.scss	2022-03-11 08:10:28.763384346 +0000
+++ dist/scss/colors/_dark_high_contrast.scss	2022-03-11 08:10:18.535286622 +0000
@@ -57,3 +57,3 @@
     --color-codemirror-guttermarker-text: #0a0c10;
-    --color-codemirror-guttermarker-subtle-text: #7a828e;
+    --color-codemirror-guttermarker-subtle-text: #9ea7b3;
     --color-codemirror-linenumber-text: #f0f3f6;
@@ -82,3 +82,3 @@
     --color-checks-input-text: #f0f3f6;
-    --color-checks-input-placeholder-text: #7a828e;
+    --color-checks-input-placeholder-text: #9ea7b3;
     --color-checks-input-focus-text: #f0f3f6;
@@ -104,4 +104,4 @@
     --color-checks-line-text: #f0f3f6;
-    --color-checks-line-num-text: #7a828e;
-    --color-checks-line-timestamp-text: #7a828e;
+    --color-checks-line-num-text: #9ea7b3;
+    --color-checks-line-timestamp-text: #9ea7b3;
     --color-checks-line-hover-bg: rgba(158,167,179,0.1);
@@ -118,6 +118,6 @@
     --color-checks-logline-text: #f0f3f6;
-    --color-checks-logline-num-text: #7a828e;
+    --color-checks-logline-num-text: #9ea7b3;
     --color-checks-logline-debug-text: #b780ff;
     --color-checks-logline-error-text: #f0f3f6;
-    --color-checks-logline-error-num-text: #7a828e;
+    --color-checks-logline-error-num-text: #9ea7b3;
     --color-checks-logline-error-bg: rgba(255,106,105,0.15);
@@ -274,3 +274,3 @@
     --color-fg-muted: #f0f3f6;
-    --color-fg-subtle: #7a828e;
+    --color-fg-subtle: #9ea7b3;
     --color-fg-on-emphasis: #0a0c10;

Increase contrast for dark fg.subtle

4f9e6cf

Create perfect-carrots-doubt.md

9bacb75

simurai marked this pull request as ready for review March 11, 2022 08:45

simurai requested a review from a team as a code owner March 11, 2022 08:45

simurai requested review from a team, jfuchs and langermank March 11, 2022 08:45

langermank approved these changes Mar 11, 2022

View reviewed changes

simurai merged commit da4ffd3 into main Mar 14, 2022

simurai deleted the update-fg-subtle branch March 14, 2022 04:44

primer-css mentioned this pull request Mar 14, 2022

Release Tracking #308

Merged

Navigation Menu

Repository navigation

Increase contrast for dark `fg.subtle` - #307

Increase contrast for dark `fg.subtle`#307
simurai merged 2 commits into
mainfrom
update-fg-subtle

simurai commented Mar 11, 2022 •

edited

Loading

Uh oh!

changeset-bot Bot commented Mar 11, 2022 •

edited

Loading

Uh oh!

vercel Bot commented Mar 11, 2022 •

edited

Loading

Uh oh!

github-actions Bot commented Mar 11, 2022 •

edited

Loading

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

simurai commented Mar 11, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot Bot commented Mar 11, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

vercel Bot commented Mar 11, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Mar 11, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

simurai commented Mar 11, 2022 •

edited

Loading

changeset-bot Bot commented Mar 11, 2022 •

edited

Loading

vercel Bot commented Mar 11, 2022 •

edited

Loading

github-actions Bot commented Mar 11, 2022 •

edited

Loading