updating default and muted text in light mode by lukasoppermann · Pull Request #515 · primer/primitives

lukasoppermann · 2023-03-14T15:17:27Z

Summary

This PR fixes the failing contrast between the default text and muted as part of https://github.com/github/primer/issues/1648.

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

changeset-bot · 2023-03-14T15:17:31Z

⚠️ No Changeset found

Latest commit: c9cccba

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 · 2023-03-14T15:17:58Z

Variables changed

--- base/dist/scss/colors/_light.scss	2023-03-29 07:23:55.134543114 +0000
+++ dist/scss/colors/_light.scss	2023-03-29 07:22:48.385367277 +0000
@@ -6,4 +6,4 @@
     --color-marketing-icon-secondary: #54aeff;
-    --color-diff-blob-addition-num-text: #24292f;
-    --color-diff-blob-addition-fg: #24292f;
+    --color-diff-blob-addition-num-text: #1F2328;
+    --color-diff-blob-addition-fg: #1F2328;
     --color-diff-blob-addition-num-bg: #ccffd8;
@@ -11,4 +11,4 @@
     --color-diff-blob-addition-word-bg: #abf2bc;
-    --color-diff-blob-deletion-num-text: #24292f;
-    --color-diff-blob-deletion-fg: #24292f;
+    --color-diff-blob-deletion-num-text: #1F2328;
+    --color-diff-blob-deletion-fg: #1F2328;
     --color-diff-blob-deletion-num-bg: #ffd7d5;
@@ -17,6 +17,6 @@
     --color-diff-blob-hunk-num-bg: rgba(84,174,255,0.4);
-    --color-diff-blob-expander-icon: #57606a;
+    --color-diff-blob-expander-icon: #656d76;
     --color-diff-blob-selected-line-highlight-mix-blend-mode: multiply;
-    --color-diffstat-deletion-border: rgba(27,31,36,0.15);
-    --color-diffstat-addition-border: rgba(27,31,36,0.15);
+    --color-diffstat-deletion-border: rgba(31,35,40,0.15);
+    --color-diffstat-addition-border: rgba(31,35,40,0.15);
     --color-diffstat-addition-bg: #2da44e;
@@ -53,3 +53,3 @@
     --color-prettylights-syntax-constant-other-reference-link: #0a3069;
-    --color-codemirror-text: #24292f;
+    --color-codemirror-text: #1F2328;
     --color-codemirror-bg: #ffffff;
@@ -58,7 +58,7 @@
     --color-codemirror-guttermarker-subtle-text: #6e7781;
-    --color-codemirror-linenumber-text: #57606a;
-    --color-codemirror-cursor: #24292f;
+    --color-codemirror-linenumber-text: #656d76;
+    --color-codemirror-cursor: #1F2328;
     --color-codemirror-selection-bg: rgba(84,174,255,0.4);
     --color-codemirror-activeline-bg: rgba(234,238,242,0.5);
-    --color-codemirror-matchingbracket-text: #24292f;
+    --color-codemirror-matchingbracket-text: #1F2328;
     --color-codemirror-lines-bg: #ffffff;
@@ -93,3 +93,3 @@
     --color-checks-dropdown-border: #424a53;
-    --color-checks-dropdown-shadow: rgba(27,31,36,0.3);
+    --color-checks-dropdown-shadow: rgba(31,35,40,0.3);
     --color-checks-dropdown-hover-text: #f6f8fa;
@@ -156,3 +156,3 @@
     --color-avatar-bg: #ffffff;
-    --color-avatar-border: rgba(27,31,36,0.15);
+    --color-avatar-border: rgba(31,35,40,0.15);
     --color-avatar-stack-fade: #afb8c1;
@@ -165,3 +165,3 @@
     --color-select-menu-tap-focus-bg: #b6e3ff;
-    --color-overlay-shadow: 0 1px 3px rgba(27,31,36,0.12), 0 8px 24px rgba(66,74,83,0.12);
+    --color-overlay-shadow: 0 1px 3px rgba(31,35,40,0.12), 0 8px 24px rgba(66,74,83,0.12);
     --color-header-text: rgba(255,255,255,0.7);
@@ -195,18 +195,18 @@
     --color-btn-bg: #f6f8fa;
-    --color-btn-border: rgba(27,31,36,0.15);
-    --color-btn-shadow: 0 1px 0 rgba(27,31,36,0.04);
+    --color-btn-border: rgba(31,35,40,0.15);
+    --color-btn-shadow: 0 1px 0 rgba(31,35,40,0.04);
     --color-btn-inset-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
     --color-btn-hover-bg: #f3f4f6;
-    --color-btn-hover-border: rgba(27,31,36,0.15);
+    --color-btn-hover-border: rgba(31,35,40,0.15);
     --color-btn-active-bg: hsla(220,14%,93%,1);
-    --color-btn-active-border: rgba(27,31,36,0.15);
+    --color-btn-active-border: rgba(31,35,40,0.15);
     --color-btn-selected-bg: hsla(220,14%,94%,1);
-    --color-btn-counter-bg: rgba(27,31,36,0.08);
+    --color-btn-counter-bg: rgba(31,35,40,0.08);
     --color-btn-primary-text: #ffffff;
     --color-btn-primary-bg: #2da44e;
-    --color-btn-primary-border: rgba(27,31,36,0.15);
-    --color-btn-primary-shadow: 0 1px 0 rgba(27,31,36,0.1);
+    --color-btn-primary-border: rgba(31,35,40,0.15);
+    --color-btn-primary-shadow: 0 1px 0 rgba(31,35,40,0.1);
     --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-border: rgba(27,31,36,0.15);
+    --color-btn-primary-hover-border: rgba(31,35,40,0.15);
     --color-btn-primary-selected-bg: hsla(137,55%,36%,1);
@@ -215,3 +215,3 @@
     --color-btn-primary-disabled-bg: #94d3a2;
-    --color-btn-primary-disabled-border: rgba(27,31,36,0.15);
+    --color-btn-primary-disabled-border: rgba(31,35,40,0.15);
     --color-btn-primary-icon: rgba(255,255,255,0.8);
@@ -221,4 +221,4 @@
     --color-btn-outline-hover-bg: #0969da;
-    --color-btn-outline-hover-border: rgba(27,31,36,0.15);
-    --color-btn-outline-hover-shadow: 0 1px 0 rgba(27,31,36,0.1);
+    --color-btn-outline-hover-border: rgba(31,35,40,0.15);
+    --color-btn-outline-hover-shadow: 0 1px 0 rgba(31,35,40,0.1);
     --color-btn-outline-hover-inset-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
@@ -227,3 +227,3 @@
     --color-btn-outline-selected-bg: hsla(212,92%,42%,1);
-    --color-btn-outline-selected-border: rgba(27,31,36,0.15);
+    --color-btn-outline-selected-border: rgba(31,35,40,0.15);
     --color-btn-outline-selected-shadow: inset 0 1px 0 rgba(0,33,85,0.2);
@@ -236,4 +236,4 @@
     --color-btn-danger-hover-bg: #a40e26;
-    --color-btn-danger-hover-border: rgba(27,31,36,0.15);
-    --color-btn-danger-hover-shadow: 0 1px 0 rgba(27,31,36,0.1);
+    --color-btn-danger-hover-border: rgba(31,35,40,0.15);
+    --color-btn-danger-hover-shadow: 0 1px 0 rgba(31,35,40,0.1);
     --color-btn-danger-hover-inset-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
@@ -242,3 +242,3 @@
     --color-btn-danger-selected-bg: hsla(356,72%,44%,1);
-    --color-btn-danger-selected-border: rgba(27,31,36,0.15);
+    --color-btn-danger-selected-border: rgba(31,35,40,0.15);
     --color-btn-danger-selected-shadow: inset 0 1px 0 rgba(76,0,20,0.2);
@@ -265,3 +265,3 @@
     --color-switch-track-disabled-bg: #8c959f;
-    --color-switch-track-fg: #57606a;
+    --color-switch-track-fg: #656d76;
     --color-switch-track-disabled-fg: #ffffff;
@@ -287,4 +287,4 @@
     --color-tree-view-item-directory-fill: #54aeff;
-    --color-fg-default: #24292f;
-    --color-fg-muted: #57606a;
+    --color-fg-default: #1F2328;
+    --color-fg-muted: #656d76;
     --color-fg-subtle: #6e7781;
@@ -297,4 +297,4 @@
     --color-border-muted: hsla(210,18%,87%,1);
-    --color-border-subtle: rgba(27,31,36,0.15);
-    --color-shadow-small: 0 1px 0 rgba(27,31,36,0.04);
+    --color-border-subtle: rgba(31,35,40,0.15);
+    --color-shadow-small: 0 1px 0 rgba(31,35,40,0.04);
     --color-shadow-medium: 0 3px 6px rgba(140,149,159,0.15);
@@ -343,9 +343,9 @@
     --color-primer-fg-disabled: #8c959f;
-    --color-primer-canvas-backdrop: rgba(27,31,36,0.5);
+    --color-primer-canvas-backdrop: rgba(31,35,40,0.5);
     --color-primer-canvas-sticky: rgba(255,255,255,0.95);
     --color-primer-border-active: #fd8c73;
-    --color-primer-border-contrast: rgba(27,31,36,0.1);
+    --color-primer-border-contrast: rgba(31,35,40,0.1);
     --color-primer-shadow-highlight: inset 0 1px 0 rgba(255,255,255,0.25);
     --color-primer-shadow-inset: inset 0 1px 0 rgba(208,215,222,0.2);
-    --color-scale-black: #1b1f24;
+    --color-scale-black: #1F2328;
     --color-scale-white: #ffffff;
--- base/dist/scss/colors/_light_colorblind.scss	2023-03-29 07:23:55.158543540 +0000
+++ dist/scss/colors/_light_colorblind.scss	2023-03-29 07:22:48.409367696 +0000
@@ -6,4 +6,4 @@
     --color-marketing-icon-secondary: #54aeff;
-    --color-diff-blob-addition-num-text: #24292f;
-    --color-diff-blob-addition-fg: #24292f;
+    --color-diff-blob-addition-num-text: #1b1f24;
+    --color-diff-blob-addition-fg: #1b1f24;
     --color-diff-blob-addition-num-bg: rgba(84,174,255,0.4);
@@ -11,4 +11,4 @@
     --color-diff-blob-addition-word-bg: rgba(84,174,255,0.4);
-    --color-diff-blob-deletion-num-text: #24292f;
-    --color-diff-blob-deletion-fg: #24292f;
+    --color-diff-blob-deletion-num-text: #1b1f24;
+    --color-diff-blob-deletion-fg: #1b1f24;
     --color-diff-blob-deletion-num-bg: rgba(247,153,57,0.4);
@@ -17,3 +17,3 @@
     --color-diff-blob-hunk-num-bg: rgba(84,174,255,0.4);
-    --color-diff-blob-expander-icon: #57606a;
+    --color-diff-blob-expander-icon: #656d76;
     --color-diff-blob-selected-line-highlight-mix-blend-mode: multiply;
@@ -53,3 +53,3 @@
     --color-prettylights-syntax-constant-other-reference-link: #0a3069;
-    --color-codemirror-text: #24292f;
+    --color-codemirror-text: #1b1f24;
     --color-codemirror-bg: #ffffff;
@@ -58,7 +58,7 @@
     --color-codemirror-guttermarker-subtle-text: #6e7781;
-    --color-codemirror-linenumber-text: #57606a;
-    --color-codemirror-cursor: #24292f;
+    --color-codemirror-linenumber-text: #656d76;
+    --color-codemirror-cursor: #1b1f24;
     --color-codemirror-selection-bg: rgba(84,174,255,0.4);
     --color-codemirror-activeline-bg: rgba(234,238,242,0.5);
-    --color-codemirror-matchingbracket-text: #24292f;
+    --color-codemirror-matchingbracket-text: #1b1f24;
     --color-codemirror-lines-bg: #ffffff;
@@ -265,3 +265,3 @@
     --color-switch-track-disabled-bg: #8c959f;
-    --color-switch-track-fg: #57606a;
+    --color-switch-track-fg: #656d76;
     --color-switch-track-disabled-fg: #ffffff;
@@ -287,4 +287,4 @@
     --color-tree-view-item-directory-fill: #54aeff;
-    --color-fg-default: #24292f;
-    --color-fg-muted: #57606a;
+    --color-fg-default: #1b1f24;
+    --color-fg-muted: #656d76;
     --color-fg-subtle: #6e7781;
--- base/dist/scss/colors/_light_high_contrast.scss	2023-03-29 07:23:55.150543398 +0000
+++ dist/scss/colors/_light_high_contrast.scss	2023-03-29 07:22:48.401367556 +0000
@@ -6,3 +6,3 @@
     --color-marketing-icon-secondary: #368cf9;
-    --color-diff-blob-addition-num-text: #0e1116;
+    --color-diff-blob-addition-num-text: #010409;
     --color-diff-blob-addition-fg: #ffffff;
@@ -11,3 +11,3 @@
     --color-diff-blob-addition-word-bg: #055d20;
-    --color-diff-blob-deletion-num-text: #0e1116;
+    --color-diff-blob-deletion-num-text: #010409;
     --color-diff-blob-deletion-fg: #ffffff;
@@ -53,3 +53,3 @@
     --color-prettylights-syntax-constant-other-reference-link: #032563;
-    --color-codemirror-text: #0e1116;
+    --color-codemirror-text: #010409;
     --color-codemirror-bg: #ffffff;
@@ -59,6 +59,6 @@
     --color-codemirror-linenumber-text: #0e1116;
-    --color-codemirror-cursor: #0e1116;
+    --color-codemirror-cursor: #010409;
     --color-codemirror-selection-bg: #368cf9;
     --color-codemirror-activeline-bg: #e7ecf0;
-    --color-codemirror-matchingbracket-text: #0e1116;
+    --color-codemirror-matchingbracket-text: #010409;
     --color-codemirror-lines-bg: #ffffff;
@@ -287,3 +287,3 @@
     --color-tree-view-item-directory-fill: #368cf9;
-    --color-fg-default: #0e1116;
+    --color-fg-default: #010409;
     --color-fg-muted: #0e1116;
--- base/dist/scss/colors/_light_tritanopia.scss	2023-03-29 07:23:55.162543611 +0000
+++ dist/scss/colors/_light_tritanopia.scss	2023-03-29 07:22:48.413367766 +0000
@@ -6,4 +6,4 @@
     --color-marketing-icon-secondary: #54aeff;
-    --color-diff-blob-addition-num-text: #24292f;
-    --color-diff-blob-addition-fg: #24292f;
+    --color-diff-blob-addition-num-text: #1b1f24;
+    --color-diff-blob-addition-fg: #1b1f24;
     --color-diff-blob-addition-num-bg: rgba(84,174,255,0.4);
@@ -11,4 +11,4 @@
     --color-diff-blob-addition-word-bg: rgba(84,174,255,0.4);
-    --color-diff-blob-deletion-num-text: #24292f;
-    --color-diff-blob-deletion-fg: #24292f;
+    --color-diff-blob-deletion-num-text: #1b1f24;
+    --color-diff-blob-deletion-fg: #1b1f24;
     --color-diff-blob-deletion-num-bg: rgba(255,129,130,0.4);
@@ -17,3 +17,3 @@
     --color-diff-blob-hunk-num-bg: rgba(84,174,255,0.4);
-    --color-diff-blob-expander-icon: #57606a;
+    --color-diff-blob-expander-icon: #656d76;
     --color-diff-blob-selected-line-highlight-mix-blend-mode: multiply;
@@ -53,3 +53,3 @@
     --color-prettylights-syntax-constant-other-reference-link: #0a3069;
-    --color-codemirror-text: #24292f;
+    --color-codemirror-text: #1b1f24;
     --color-codemirror-bg: #ffffff;
@@ -58,7 +58,7 @@
     --color-codemirror-guttermarker-subtle-text: #6e7781;
-    --color-codemirror-linenumber-text: #57606a;
-    --color-codemirror-cursor: #24292f;
+    --color-codemirror-linenumber-text: #656d76;
+    --color-codemirror-cursor: #1b1f24;
     --color-codemirror-selection-bg: rgba(84,174,255,0.4);
     --color-codemirror-activeline-bg: rgba(234,238,242,0.5);
-    --color-codemirror-matchingbracket-text: #24292f;
+    --color-codemirror-matchingbracket-text: #1b1f24;
     --color-codemirror-lines-bg: #ffffff;
@@ -265,3 +265,3 @@
     --color-switch-track-disabled-bg: #8c959f;
-    --color-switch-track-fg: #57606a;
+    --color-switch-track-fg: #656d76;
     --color-switch-track-disabled-fg: #ffffff;
@@ -287,4 +287,4 @@
     --color-tree-view-item-directory-fill: #54aeff;
-    --color-fg-default: #24292f;
-    --color-fg-muted: #57606a;
+    --color-fg-default: #1b1f24;
+    --color-fg-muted: #656d76;
     --color-fg-subtle: #6e7781;

github-actions · 2023-03-14T15:19:54Z

🟢 No design token changes found

cross reference: primer/primitives#515 cross reference: primer/primitives#516

lukasoppermann requested review from langermank and simurai March 14, 2023 15:17

lukasoppermann requested a review from a team as a code owner March 14, 2023 15:17

lukasoppermann requested a review from a team March 14, 2023 15:17

lukasoppermann temporarily deployed to github-pages March 14, 2023 15:23 — with GitHub Actions Inactive

github-actions Bot temporarily deployed to storybook-preview March 14, 2023 15:24 Inactive

lukasoppermann self-assigned this Mar 14, 2023

simurai approved these changes Mar 15, 2023

View reviewed changes

updating default and muted text in light mode

c9cccba

lukasoppermann force-pushed the a11y/lightmode-text branch from db4ee8a to c9cccba Compare March 29, 2023 07:21

lukasoppermann temporarily deployed to github-pages March 29, 2023 07:25 — with GitHub Actions Inactive

github-actions Bot temporarily deployed to storybook-preview March 29, 2023 07:26 Inactive

lukasoppermann merged commit 3ff33ca into main Mar 29, 2023

lukasoppermann deleted the a11y/lightmode-text branch March 29, 2023 07:34

lukasoppermann mentioned this pull request Mar 29, 2023

Add changeset for a11y update #538

Merged

wh0 pushed a commit to wh0/iswas that referenced this pull request Apr 8, 2023

update text colors

eee4bc9

cross reference: primer/primitives#515 cross reference: primer/primitives#516

Navigation Menu

Repository navigation

updating default and muted text in light mode - #515

updating default and muted text in light mode#515
lukasoppermann merged 1 commit into
mainfrom
a11y/lightmode-text

lukasoppermann commented Mar 14, 2023

Uh oh!

changeset-bot Bot commented Mar 14, 2023 •

edited

Loading

Uh oh!

github-actions Bot commented Mar 14, 2023 •

edited

Loading

Uh oh!

github-actions Bot commented Mar 14, 2023 •

edited

Loading

Uh oh!

This branch was previously deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

lukasoppermann commented Mar 14, 2023

Summary

Uh oh!

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

Uh oh!

⚠️ No Changeset found

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

🟢 No design token changes found

Uh oh!

This branch was previously deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

changeset-bot Bot commented Mar 14, 2023 •

edited

Loading

github-actions Bot commented Mar 14, 2023 •

edited

Loading

github-actions Bot commented Mar 14, 2023 •

edited

Loading