Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

updating default and muted text in light mode #515

Merged
merged 1 commit into from
Mar 29, 2023
Merged

updating default and muted text in light mode #515

merged 1 commit into from
Mar 29, 2023

Conversation

lukasoppermann
Copy link
Contributor

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.

@lukasoppermann lukasoppermann requested a review from a team as a code owner March 14, 2023 15:17
@lukasoppermann lukasoppermann requested a review from a team March 14, 2023 15:17
@changeset-bot
Copy link

changeset-bot bot commented Mar 14, 2023 •
edited
Loading

⚠️ 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
Copy link
Contributor

github-actions bot commented Mar 14, 2023 •
edited
Loading

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
Copy link
Contributor

github-actions bot commented Mar 14, 2023 •
edited
Loading

🟢 No design token changes found

@lukasoppermann lukasoppermann temporarily deployed to github-pages March 14, 2023 15:23 — with GitHub Actions Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview March 14, 2023 15:24 Inactive
@lukasoppermann lukasoppermann self-assigned this Mar 14, 2023
@github-actions github-actions bot temporarily deployed to storybook-preview March 29, 2023 07:26 Inactive
@lukasoppermann lukasoppermann merged commit 3ff33ca into main Mar 29, 2023
@lukasoppermann lukasoppermann deleted the a11y/lightmode-text branch March 29, 2023 07:34
@lukasoppermann lukasoppermann mentioned this pull request Mar 29, 2023
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@simurai simurai simurai approved these changes

@langermank langermank Awaiting requested review from langermank

Assignees

@lukasoppermann lukasoppermann

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@lukasoppermann @simurai