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

update role subtle colors #518

Merged
merged 1 commit into from
Mar 29, 2023
Merged

update role subtle colors #518

merged 1 commit into from
Mar 29, 2023

Conversation

lukasoppermann
Copy link
Contributor

Summary

This PR fixes the failing contrast between some subtle role colors and the respective [role].fg in dark mode 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 16:34
@lukasoppermann lukasoppermann self-assigned this Mar 14, 2023
@lukasoppermann lukasoppermann requested a review from a team March 14, 2023 16:34
@changeset-bot
Copy link

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

⚠️ No Changeset found

Latest commit: a2699e4

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/_dark.scss	2023-03-29 07:04:19.956649674 +0000
+++ dist/scss/colors/_dark.scss	2023-03-29 07:02:47.299749817 +0000
@@ -14,3 +14,3 @@
     --color-diff-blob-deletion-num-bg: rgba(248,81,73,0.3);
-    --color-diff-blob-deletion-line-bg: rgba(248,81,73,0.15);
+    --color-diff-blob-deletion-line-bg: rgba(248,81,73,0.1);
     --color-diff-blob-deletion-word-bg: rgba(248,81,73,0.4);
@@ -122,3 +122,3 @@
     --color-checks-logline-error-num-text: #6e7681;
-    --color-checks-logline-error-bg: rgba(248,81,73,0.15);
+    --color-checks-logline-error-bg: rgba(248,81,73,0.1);
     --color-checks-logline-warning-text: #8b949e;
@@ -321,3 +321,3 @@
     --color-severe-muted: rgba(219,109,40,0.4);
-    --color-severe-subtle: rgba(219,109,40,0.15);
+    --color-severe-subtle: rgba(219,109,40,0.1);
     --color-danger-fg: #f85149;
@@ -325,3 +325,3 @@
     --color-danger-muted: rgba(248,81,73,0.4);
-    --color-danger-subtle: rgba(248,81,73,0.15);
+    --color-danger-subtle: rgba(248,81,73,0.1);
     --color-open-fg: #3fb950;
@@ -337,3 +337,3 @@
     --color-done-muted: rgba(163,113,247,0.4);
-    --color-done-subtle: rgba(163,113,247,0.15);
+    --color-done-subtle: rgba(163,113,247,0.1);
     --color-sponsors-fg: #db61a2;
@@ -341,3 +341,3 @@
     --color-sponsors-muted: rgba(219,97,162,0.4);
-    --color-sponsors-subtle: rgba(219,97,162,0.15);
+    --color-sponsors-subtle: rgba(219,97,162,0.1);
     --color-primer-fg-disabled: #484f58;
--- base/dist/scss/colors/_dark_colorblind.scss	2023-03-29 07:04:19.980649902 +0000
+++ dist/scss/colors/_dark_colorblind.scss	2023-03-29 07:02:47.319750032 +0000
@@ -14,3 +14,3 @@
     --color-diff-blob-deletion-num-bg: rgba(212,118,22,0.3);
-    --color-diff-blob-deletion-line-bg: rgba(212,118,22,0.15);
+    --color-diff-blob-deletion-line-bg: rgba(212,118,22,0.1);
     --color-diff-blob-deletion-word-bg: rgba(212,118,22,0.4);
@@ -122,3 +122,3 @@
     --color-checks-logline-error-num-text: #6e7681;
-    --color-checks-logline-error-bg: rgba(212,118,22,0.15);
+    --color-checks-logline-error-bg: rgba(212,118,22,0.1);
     --color-checks-logline-warning-text: #8b949e;
@@ -321,3 +321,3 @@
     --color-severe-muted: rgba(212,118,22,0.4);
-    --color-severe-subtle: rgba(212,118,22,0.15);
+    --color-severe-subtle: rgba(212,118,22,0.1);
     --color-danger-fg: #d47616;
@@ -325,3 +325,3 @@
     --color-danger-muted: rgba(212,118,22,0.4);
-    --color-danger-subtle: rgba(212,118,22,0.15);
+    --color-danger-subtle: rgba(212,118,22,0.1);
     --color-open-fg: #ec8e2c;
@@ -337,3 +337,3 @@
     --color-done-muted: rgba(163,113,247,0.4);
-    --color-done-subtle: rgba(163,113,247,0.15);
+    --color-done-subtle: rgba(163,113,247,0.1);
     --color-sponsors-fg: #db61a2;
@@ -341,3 +341,3 @@
     --color-sponsors-muted: rgba(219,97,162,0.4);
-    --color-sponsors-subtle: rgba(219,97,162,0.15);
+    --color-sponsors-subtle: rgba(219,97,162,0.1);
     --color-primer-fg-disabled: #484f58;
--- base/dist/scss/colors/_dark_dimmed.scss	2023-03-29 07:04:19.968649788 +0000
+++ dist/scss/colors/_dark_dimmed.scss	2023-03-29 07:02:47.307749903 +0000
@@ -14,3 +14,3 @@
     --color-diff-blob-deletion-num-bg: rgba(229,83,75,0.3);
-    --color-diff-blob-deletion-line-bg: rgba(229,83,75,0.15);
+    --color-diff-blob-deletion-line-bg: rgba(229,83,75,0.1);
     --color-diff-blob-deletion-word-bg: rgba(229,83,75,0.4);
@@ -122,3 +122,3 @@
     --color-checks-logline-error-num-text: #636e7b;
-    --color-checks-logline-error-bg: rgba(229,83,75,0.15);
+    --color-checks-logline-error-bg: rgba(229,83,75,0.1);
     --color-checks-logline-warning-text: #768390;
@@ -321,3 +321,3 @@
     --color-severe-muted: rgba(204,107,44,0.4);
-    --color-severe-subtle: rgba(204,107,44,0.15);
+    --color-severe-subtle: rgba(204,107,44,0.1);
     --color-danger-fg: #e5534b;
@@ -325,3 +325,3 @@
     --color-danger-muted: rgba(229,83,75,0.4);
-    --color-danger-subtle: rgba(229,83,75,0.15);
+    --color-danger-subtle: rgba(229,83,75,0.1);
     --color-open-fg: #57ab5a;
@@ -337,3 +337,3 @@
     --color-done-muted: rgba(152,110,226,0.4);
-    --color-done-subtle: rgba(152,110,226,0.15);
+    --color-done-subtle: rgba(152,110,226,0.1);
     --color-sponsors-fg: #c96198;
@@ -341,3 +341,3 @@
     --color-sponsors-muted: rgba(201,97,152,0.4);
-    --color-sponsors-subtle: rgba(201,97,152,0.15);
+    --color-sponsors-subtle: rgba(201,97,152,0.1);
     --color-primer-fg-disabled: #545d68;
--- base/dist/scss/colors/_dark_high_contrast.scss	2023-03-29 07:04:19.972649826 +0000
+++ dist/scss/colors/_dark_high_contrast.scss	2023-03-29 07:02:47.315749989 +0000
@@ -14,3 +14,3 @@
     --color-diff-blob-deletion-num-bg: rgba(255,106,105,0.3);
-    --color-diff-blob-deletion-line-bg: rgba(255,106,105,0.15);
+    --color-diff-blob-deletion-line-bg: rgba(255,106,105,0.1);
     --color-diff-blob-deletion-word-bg: #ff6a69;
@@ -122,3 +122,3 @@
     --color-checks-logline-error-num-text: #9ea7b3;
-    --color-checks-logline-error-bg: rgba(255,106,105,0.15);
+    --color-checks-logline-error-bg: rgba(255,106,105,0.1);
     --color-checks-logline-warning-text: #f0f3f6;
@@ -321,3 +321,3 @@
     --color-severe-muted: #e7811d;
-    --color-severe-subtle: rgba(231,129,29,0.15);
+    --color-severe-subtle: rgba(231,129,29,0.1);
     --color-danger-fg: #ff6a69;
@@ -325,3 +325,3 @@
     --color-danger-muted: #ff6a69;
-    --color-danger-subtle: rgba(255,106,105,0.15);
+    --color-danger-subtle: rgba(255,106,105,0.1);
     --color-open-fg: #26cd4d;
@@ -337,3 +337,3 @@
     --color-done-muted: #b780ff;
-    --color-done-subtle: rgba(183,128,255,0.15);
+    --color-done-subtle: rgba(183,128,255,0.1);
     --color-sponsors-fg: #ef6eb1;
@@ -341,3 +341,3 @@
     --color-sponsors-muted: #ef6eb1;
-    --color-sponsors-subtle: rgba(239,110,177,0.15);
+    --color-sponsors-subtle: rgba(239,110,177,0.1);
     --color-primer-fg-disabled: #7a828e;
--- base/dist/scss/colors/_dark_tritanopia.scss	2023-03-29 07:04:19.984649940 +0000
+++ dist/scss/colors/_dark_tritanopia.scss	2023-03-29 07:02:47.323750074 +0000
@@ -14,3 +14,3 @@
     --color-diff-blob-deletion-num-bg: rgba(248,81,73,0.3);
-    --color-diff-blob-deletion-line-bg: rgba(248,81,73,0.15);
+    --color-diff-blob-deletion-line-bg: rgba(248,81,73,0.1);
     --color-diff-blob-deletion-word-bg: rgba(248,81,73,0.4);
@@ -122,3 +122,3 @@
     --color-checks-logline-error-num-text: #6e7681;
-    --color-checks-logline-error-bg: rgba(248,81,73,0.15);
+    --color-checks-logline-error-bg: rgba(248,81,73,0.1);
     --color-checks-logline-warning-text: #8b949e;
@@ -321,3 +321,3 @@
     --color-severe-muted: rgba(248,81,73,0.4);
-    --color-severe-subtle: rgba(248,81,73,0.15);
+    --color-severe-subtle: rgba(248,81,73,0.1);
     --color-danger-fg: #f85149;
@@ -325,3 +325,3 @@
     --color-danger-muted: rgba(248,81,73,0.4);
-    --color-danger-subtle: rgba(248,81,73,0.15);
+    --color-danger-subtle: rgba(248,81,73,0.1);
     --color-open-fg: #ff7b72;
@@ -337,3 +337,3 @@
     --color-done-muted: rgba(163,113,247,0.4);
-    --color-done-subtle: rgba(163,113,247,0.15);
+    --color-done-subtle: rgba(163,113,247,0.1);
     --color-sponsors-fg: #db61a2;
@@ -341,3 +341,3 @@
     --color-sponsors-muted: rgba(219,97,162,0.4);
-    --color-sponsors-subtle: rgba(219,97,162,0.15);
+    --color-sponsors-subtle: rgba(219,97,162,0.1);
     --color-primer-fg-disabled: #484f58;

@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 16:41 — with GitHub Actions Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview March 14, 2023 16:42 Inactive
@lukasoppermann lukasoppermann force-pushed the a11y/darkmode-role-subtle branch from 2c23377 to a2699e4 Compare March 29, 2023 07:00
@github-actions github-actions bot temporarily deployed to storybook-preview March 29, 2023 07:06 Inactive
@lukasoppermann lukasoppermann merged commit de44471 into main Mar 29, 2023
@lukasoppermann lukasoppermann deleted the a11y/darkmode-role-subtle branch March 29, 2023 07:34
@lukasoppermann lukasoppermann mentioned this pull request Mar 29, 2023
Merged
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