Updates white in dark.ts to the actual white color by edokoa · Pull Request #304 · primer/primitives

edokoa · 2022-03-04T11:00:19Z

This is required to make fg-on-emphasis work on emphasis-plus [Tooltips need this to pass AA contrast]

This is required to make `fg-on-emphasis` work on `emphasis-plus` [Tooltips need this to pass AA contrast]

changeset-bot · 2022-03-04T11:00:21Z

🦋 Changeset detected

Latest commit: ed1f32b

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-04T11:00: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/3NijDyEPm6rg6j9KWCBki7VNPEZa
✅ Preview: https://primitives-git-edokoa-white-patch-for-dark-modes-primer.vercel.app

github-actions · 2022-03-04T11:00:36Z

Variables changed

--- base/dist/scss/colors/_dark.scss	2022-03-04 11:10:07.241219690 +0000
+++ dist/scss/colors/_dark.scss	2022-03-04 11:09:56.429073202 +0000
@@ -109,3 +109,3 @@
     --color-checks-line-selected-num-text: #58a6ff;
-    --color-checks-line-dt-fm-text: #f0f6fc;
+    --color-checks-line-dt-fm-text: #ffffff;
     --color-checks-line-dt-fm-bg: #9e6a03;
@@ -154,3 +154,3 @@
     --color-mktg-btn-shadow-hover-muted: rgb(255 255 255) 0 0 0 2px inset;
-    --color-avatar-bg: rgba(240,246,252,0.1);
+    --color-avatar-bg: rgba(255,255,255,0.1);
     --color-avatar-border: rgba(240,246,252,0.1);
@@ -165,3 +165,3 @@
     --color-overlay-shadow: 0 0 0 1px #30363d, 0 16px 32px rgba(1,4,9,0.85);
-    --color-header-text: rgba(240,246,252,0.7);
+    --color-header-text: rgba(255,255,255,0.7);
     --color-header-bg: #161b22;
@@ -178,3 +178,3 @@
     --color-ansi-white: #b1bac4;
-    --color-ansi-white-bright: #f0f6fc;
+    --color-ansi-white-bright: #ffffff;
     --color-ansi-gray: #6e7681;
@@ -217,3 +217,3 @@
     --color-btn-primary-selected-shadow: 0 0 transparent;
-    --color-btn-primary-disabled-text: rgba(240,246,252,0.5);
+    --color-btn-primary-disabled-text: rgba(255,255,255,0.5);
     --color-btn-primary-disabled-bg: rgba(35,134,54,0.6);
@@ -223,4 +223,4 @@
     --color-btn-primary-focus-shadow: 0 0 0 3px rgba(46,164,79,0.4);
-    --color-btn-primary-icon: #f0f6fc;
-    --color-btn-primary-counter-bg: rgba(240,246,252,0.2);
+    --color-btn-primary-icon: #ffffff;
+    --color-btn-primary-counter-bg: rgba(255,255,255,0.2);
     --color-btn-outline-text: #58a6ff;
@@ -230,5 +230,5 @@
     --color-btn-outline-hover-shadow: 0 1px 0 rgba(1,4,9,0.1);
-    --color-btn-outline-hover-inset-shadow: inset 0 1px 0 rgba(240,246,252,0.03);
-    --color-btn-outline-hover-counter-bg: rgba(240,246,252,0.2);
-    --color-btn-outline-selected-text: #f0f6fc;
+    --color-btn-outline-hover-inset-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
+    --color-btn-outline-hover-counter-bg: rgba(255,255,255,0.2);
+    --color-btn-outline-selected-text: #ffffff;
     --color-btn-outline-selected-bg: #0d419d;
@@ -243,3 +243,3 @@
     --color-btn-danger-text: #f85149;
-    --color-btn-danger-hover-text: #f0f6fc;
+    --color-btn-danger-hover-text: #ffffff;
     --color-btn-danger-hover-bg: #da3633;
@@ -248,3 +248,3 @@
     --color-btn-danger-hover-inset-shadow: 0 0 transparent;
-    --color-btn-danger-hover-icon: #f0f6fc;
+    --color-btn-danger-hover-icon: #ffffff;
     --color-btn-danger-hover-counter-bg: rgba(255,255,255,0.2);
@@ -275,3 +275,3 @@
     --color-fg-subtle: #484f58;
-    --color-fg-on-emphasis: #f0f6fc;
+    --color-fg-on-emphasis: #ffffff;
     --color-canvas-default: #0d1117;
@@ -331,3 +331,3 @@
     --color-primer-border-active: #F78166;
-    --color-primer-border-contrast: rgba(240,246,252,0.2);
+    --color-primer-border-contrast: rgba(255,255,255,0.2);
     --color-primer-shadow-highlight: 0 0 transparent;
@@ -336,3 +336,3 @@
     --color-scale-black: #010409;
-    --color-scale-white: #f0f6fc;
+    --color-scale-white: #ffffff;
     --color-scale-gray-0: #f0f6fc;
--- base/dist/scss/colors/_dark_colorblind.scss	2022-03-04 11:10:07.257219923 +0000
+++ dist/scss/colors/_dark_colorblind.scss	2022-03-04 11:09:56.441073382 +0000
@@ -109,3 +109,3 @@
     --color-checks-line-selected-num-text: #58a6ff;
-    --color-checks-line-dt-fm-text: #f0f6fc;
+    --color-checks-line-dt-fm-text: #ffffff;
     --color-checks-line-dt-fm-bg: #9e6a03;
@@ -154,3 +154,3 @@
     --color-mktg-btn-shadow-hover-muted: rgb(255 255 255) 0 0 0 2px inset;
-    --color-avatar-bg: rgba(240,246,252,0.1);
+    --color-avatar-bg: rgba(255,255,255,0.1);
     --color-avatar-border: rgba(240,246,252,0.1);
@@ -165,3 +165,3 @@
     --color-overlay-shadow: 0 0 0 1px #30363d, 0 16px 32px rgba(1,4,9,0.85);
-    --color-header-text: rgba(240,246,252,0.7);
+    --color-header-text: rgba(255,255,255,0.7);
     --color-header-bg: #161b22;
@@ -178,3 +178,3 @@
     --color-ansi-white: #b1bac4;
-    --color-ansi-white-bright: #f0f6fc;
+    --color-ansi-white-bright: #ffffff;
     --color-ansi-gray: #6e7681;
@@ -217,3 +217,3 @@
     --color-btn-primary-selected-shadow: 0 0 transparent;
-    --color-btn-primary-disabled-text: rgba(240,246,252,0.5);
+    --color-btn-primary-disabled-text: rgba(255,255,255,0.5);
     --color-btn-primary-disabled-bg: rgba(29,105,224,0.6);
@@ -223,4 +223,4 @@
     --color-btn-primary-focus-shadow: 0 0 0 3px rgba(46,164,79,0.4);
-    --color-btn-primary-icon: #f0f6fc;
-    --color-btn-primary-counter-bg: rgba(240,246,252,0.2);
+    --color-btn-primary-icon: #ffffff;
+    --color-btn-primary-counter-bg: rgba(255,255,255,0.2);
     --color-btn-outline-text: #58a6ff;
@@ -230,5 +230,5 @@
     --color-btn-outline-hover-shadow: 0 1px 0 rgba(1,4,9,0.1);
-    --color-btn-outline-hover-inset-shadow: inset 0 1px 0 rgba(240,246,252,0.03);
-    --color-btn-outline-hover-counter-bg: rgba(240,246,252,0.2);
-    --color-btn-outline-selected-text: #f0f6fc;
+    --color-btn-outline-hover-inset-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
+    --color-btn-outline-hover-counter-bg: rgba(255,255,255,0.2);
+    --color-btn-outline-selected-text: #ffffff;
     --color-btn-outline-selected-bg: #0d419d;
@@ -243,3 +243,3 @@
     --color-btn-danger-text: #c38000;
-    --color-btn-danger-hover-text: #f0f6fc;
+    --color-btn-danger-hover-text: #ffffff;
     --color-btn-danger-hover-bg: #a66900;
@@ -248,3 +248,3 @@
     --color-btn-danger-hover-inset-shadow: 0 0 transparent;
-    --color-btn-danger-hover-icon: #f0f6fc;
+    --color-btn-danger-hover-icon: #ffffff;
     --color-btn-danger-hover-counter-bg: rgba(255,255,255,0.2);
@@ -275,3 +275,3 @@
     --color-fg-subtle: #484f58;
-    --color-fg-on-emphasis: #f0f6fc;
+    --color-fg-on-emphasis: #ffffff;
     --color-canvas-default: #0d1117;
@@ -331,3 +331,3 @@
     --color-primer-border-active: #F78166;
-    --color-primer-border-contrast: rgba(240,246,252,0.2);
+    --color-primer-border-contrast: rgba(255,255,255,0.2);
     --color-primer-shadow-highlight: 0 0 transparent;
@@ -336,3 +336,3 @@
     --color-scale-black: #010409;
-    --color-scale-white: #f0f6fc;
+    --color-scale-white: #ffffff;
     --color-scale-gray-0: #f0f6fc;

This is required to make `fg-on-emphasis` work on `emphasis-plus` [Tooltips need this to pass AA contrast]

edokoa · 2022-03-04T11:05:30Z

This comes from this discussion in Special Projects about tooltips and accessibility.

https://github.com/github/github/pull/210475

After talking with @Juliusschaeper about the color scales, we decided to correct white in normal contrast dark themes to #ffffff so the color is displayed correctly in Tooltips and passes AA contrast requirements.

simurai · 2022-03-04T11:16:58Z

That should also improve neutral-emphasis since it's the same as neutral-emphasis-plus:

Updates white in dark.ts to the actual white color

2713eae

This is required to make `fg-on-emphasis` work on `emphasis-plus` [Tooltips need this to pass AA contrast]

edokoa requested a review from a team as a code owner March 4, 2022 11:00

edokoa requested review from a team and jonrohan March 4, 2022 11:00

edokoa requested a review from jfuchs March 4, 2022 11:00

@edokoa Updates white in dark_colorblind.ts to the actual white color

26318c1

This is required to make `fg-on-emphasis` work on `emphasis-plus` [Tooltips need this to pass AA contrast]

edokoa requested a review from simurai March 4, 2022 11:02

Create spotty-seahorses-pay.md

ed1f32b

simurai approved these changes Mar 4, 2022

View reviewed changes

simurai merged commit 94ae707 into main Mar 4, 2022

simurai deleted the edokoa-white-patch-for-dark-modes branch March 4, 2022 11:11

primer-css mentioned this pull request Mar 4, 2022

Release Tracking #305

Merged

Navigation Menu

Repository navigation

Updates white in dark.ts to the actual white color - #304

Updates white in dark.ts to the actual white color#304
simurai merged 3 commits into
mainfrom
edokoa-white-patch-for-dark-modes

edokoa commented Mar 4, 2022

Uh oh!

changeset-bot Bot commented Mar 4, 2022 •

edited

Loading

Uh oh!

vercel Bot commented Mar 4, 2022 •

edited

Loading

Uh oh!

github-actions Bot commented Mar 4, 2022 •

edited

Loading

Uh oh!

edokoa commented Mar 4, 2022 •

edited

Loading

Uh oh!

simurai commented Mar 4, 2022

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

edokoa commented Mar 4, 2022

Uh oh!

changeset-bot Bot commented Mar 4, 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 4, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

simurai commented Mar 4, 2022

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

changeset-bot Bot commented Mar 4, 2022 •

edited

Loading

vercel Bot commented Mar 4, 2022 •

edited

Loading

github-actions Bot commented Mar 4, 2022 •

edited

Loading

edokoa commented Mar 4, 2022 •

edited

Loading