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.

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

Addressing a few lingering bugs with v8 #789

Merged
merged 5 commits into from
Dec 5, 2023

Conversation

langermank
Copy link
Contributor

  • Fix foreground color for ToggleSwitch in dark high contrast
  • Bring borderColor-muted closer to the existing color

@langermank langermank requested a review from a team as a code owner December 5, 2023 01:25
Copy link

changeset-bot bot commented Dec 5, 2023

🦋 Changeset detected

Latest commit: d4803b0

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

Copy link
Contributor

github-actions bot commented Dec 5, 2023

Variables changed
No variables changed

@langermank langermank added the update snapshots Update visual regression test snapshots label Dec 5, 2023
Copy link
Contributor

github-actions bot commented Dec 5, 2023

Design Token Diff

/css/functional/themes/dark-colorblind.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-colorblind.css	2023-12-05 08:18:03.341659221 +0000
@@ -41,7 +41,7 @@
 --headerSearch-bgColor: #0d1117;
 --headerSearch-borderColor: #30363d;
 --avatar-bgColor: #ffffff1a;
-  --avatar-borderColor: #30363d66;
+  --avatar-borderColor: #30363d80;
 --avatar-shadow: 0px 0px 0px 2px #0d1117;
 --avatarStack-fade-bgColor-default: #30363d;
 --avatarStack-fade-bgColor-muted: #21262d;
@@ -244,7 +244,7 @@
 --bgColor-sponsors-muted: #db61a21a;
 --bgColor-sponsors-emphasis: #bf4b8a;
 --borderColor-default: #30363d;
-  --borderColor-muted: #30363d66;
+  --borderColor-muted: #30363d80;
 --borderColor-emphasis: #484f58;
 --borderColor-disabled: #161b22;
 --borderColor-transparent: #00000000;
@@ -461,7 +461,7 @@
   --headerSearch-bgColor: #0d1117;
   --headerSearch-borderColor: #30363d;
   --avatar-bgColor: #ffffff1a;
-    --avatar-borderColor: #30363d66;
+    --avatar-borderColor: #30363d80;
   --avatar-shadow: 0px 0px 0px 2px #0d1117;
   --avatarStack-fade-bgColor-default: #30363d;
   --avatarStack-fade-bgColor-muted: #21262d;
@@ -664,7 +664,7 @@
   --bgColor-sponsors-muted: #db61a21a;
   --bgColor-sponsors-emphasis: #bf4b8a;
   --borderColor-default: #30363d;
-    --borderColor-muted: #30363d66;
+    --borderColor-muted: #30363d80;
   --borderColor-emphasis: #484f58;
   --borderColor-disabled: #161b22;
   --borderColor-transparent: #00000000;

/css/functional/themes/dark-dimmed.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-dimmed.css	2023-12-05 08:18:02.721653621 +0000
@@ -41,7 +41,7 @@
 --headerSearch-bgColor: #22272e;
 --headerSearch-borderColor: #444c56;
 --avatar-bgColor: #cdd9e51a;
-  --avatar-borderColor: #444c5666;
+  --avatar-borderColor: #444c5680;
 --avatar-shadow: 0px 0px 0px 2px #22272e;
 --avatarStack-fade-bgColor-default: #444c56;
 --avatarStack-fade-bgColor-muted: #373e47;
@@ -244,7 +244,7 @@
 --bgColor-sponsors-muted: #c961981a;
 --bgColor-sponsors-emphasis: #ae4c82;
 --borderColor-default: #444c56;
-  --borderColor-muted: #444c5666;
+  --borderColor-muted: #444c5680;
 --borderColor-emphasis: #545d68;
 --borderColor-disabled: #2d333b;
 --borderColor-transparent: #00000000;
@@ -461,7 +461,7 @@
   --headerSearch-bgColor: #22272e;
   --headerSearch-borderColor: #444c56;
   --avatar-bgColor: #cdd9e51a;
-    --avatar-borderColor: #444c5666;
+    --avatar-borderColor: #444c5680;
   --avatar-shadow: 0px 0px 0px 2px #22272e;
   --avatarStack-fade-bgColor-default: #444c56;
   --avatarStack-fade-bgColor-muted: #373e47;
@@ -664,7 +664,7 @@
   --bgColor-sponsors-muted: #c961981a;
   --bgColor-sponsors-emphasis: #ae4c82;
   --borderColor-default: #444c56;
-    --borderColor-muted: #444c5666;
+    --borderColor-muted: #444c5680;
   --borderColor-emphasis: #545d68;
   --borderColor-disabled: #2d333b;
   --borderColor-transparent: #00000000;

/css/functional/themes/dark-high-contrast.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-high-contrast.css	2023-12-05 08:18:03.649662004 +0000
@@ -87,7 +87,7 @@
 --controlTrack-bgColor-hover: #383c45;
 --controlTrack-bgColor-active: #484e57;
 --controlTrack-bgColor-disabled: #bdc4cc;
-  --controlTrack-fgColor-rest: #0a0c10;
+  --controlTrack-fgColor-rest: #fbfcfd;
 --controlTrack-fgColor-disabled: #0a0c10;
 --controlTrack-borderColor-rest: #00000000;
 --controlTrack-borderColor-disabled: #bdc4cc;
@@ -507,7 +507,7 @@
   --controlTrack-bgColor-hover: #383c45;
   --controlTrack-bgColor-active: #484e57;
   --controlTrack-bgColor-disabled: #bdc4cc;
-    --controlTrack-fgColor-rest: #0a0c10;
+    --controlTrack-fgColor-rest: #fbfcfd;
   --controlTrack-fgColor-disabled: #0a0c10;
   --controlTrack-borderColor-rest: #00000000;
   --controlTrack-borderColor-disabled: #bdc4cc;

/css/functional/themes/dark-tritanopia.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-tritanopia.css	2023-12-05 08:18:03.017656294 +0000
@@ -41,7 +41,7 @@
 --headerSearch-bgColor: #0d1117;
 --headerSearch-borderColor: #30363d;
 --avatar-bgColor: #ffffff1a;
-  --avatar-borderColor: #30363d66;
+  --avatar-borderColor: #30363d80;
 --avatar-shadow: 0px 0px 0px 2px #0d1117;
 --avatarStack-fade-bgColor-default: #30363d;
 --avatarStack-fade-bgColor-muted: #21262d;
@@ -244,7 +244,7 @@
 --bgColor-sponsors-muted: #db61a21a;
 --bgColor-sponsors-emphasis: #bf4b8a;
 --borderColor-default: #30363d;
-  --borderColor-muted: #30363d66;
+  --borderColor-muted: #30363d80;
 --borderColor-emphasis: #484f58;
 --borderColor-disabled: #161b22;
 --borderColor-transparent: #00000000;
@@ -461,7 +461,7 @@
   --headerSearch-bgColor: #0d1117;
   --headerSearch-borderColor: #30363d;
   --avatar-bgColor: #ffffff1a;
-    --avatar-borderColor: #30363d66;
+    --avatar-borderColor: #30363d80;
   --avatar-shadow: 0px 0px 0px 2px #0d1117;
   --avatarStack-fade-bgColor-default: #30363d;
   --avatarStack-fade-bgColor-muted: #21262d;
@@ -664,7 +664,7 @@
   --bgColor-sponsors-muted: #db61a21a;
   --bgColor-sponsors-emphasis: #bf4b8a;
   --borderColor-default: #30363d;
-    --borderColor-muted: #30363d66;
+    --borderColor-muted: #30363d80;
   --borderColor-emphasis: #484f58;
   --borderColor-disabled: #161b22;
   --borderColor-transparent: #00000000;

/css/functional/themes/dark.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark.css	2023-12-05 08:18:02.325650042 +0000
@@ -41,7 +41,7 @@
 --headerSearch-bgColor: #0d1117;
 --headerSearch-borderColor: #30363d;
 --avatar-bgColor: #ffffff1a;
-  --avatar-borderColor: #30363d66;
+  --avatar-borderColor: #30363d80;
 --avatar-shadow: 0px 0px 0px 2px #0d1117;
 --avatarStack-fade-bgColor-default: #30363d;
 --avatarStack-fade-bgColor-muted: #21262d;
@@ -244,7 +244,7 @@
 --bgColor-sponsors-muted: #db61a21a;
 --bgColor-sponsors-emphasis: #bf4b8a;
 --borderColor-default: #30363d;
-  --borderColor-muted: #30363d66;
+  --borderColor-muted: #30363d80;
 --borderColor-emphasis: #484f58;
 --borderColor-disabled: #161b22;
 --borderColor-transparent: #00000000;
@@ -461,7 +461,7 @@
   --headerSearch-bgColor: #0d1117;
   --headerSearch-borderColor: #30363d;
   --avatar-bgColor: #ffffff1a;
-    --avatar-borderColor: #30363d66;
+    --avatar-borderColor: #30363d80;
   --avatar-shadow: 0px 0px 0px 2px #0d1117;
   --avatarStack-fade-bgColor-default: #30363d;
   --avatarStack-fade-bgColor-muted: #21262d;
@@ -664,7 +664,7 @@
   --bgColor-sponsors-muted: #db61a21a;
   --bgColor-sponsors-emphasis: #bf4b8a;
   --borderColor-default: #30363d;
-    --borderColor-muted: #30363d66;
+    --borderColor-muted: #30363d80;
   --borderColor-emphasis: #484f58;
   --borderColor-disabled: #161b22;
   --borderColor-transparent: #00000000;

/css/functional/themes/light-colorblind.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-colorblind.css	2023-12-05 08:18:01.677644188 +0000
@@ -245,7 +245,7 @@
 --bgColor-sponsors-muted: #ffeff7;
 --bgColor-sponsors-emphasis: #bf3989;
 --borderColor-default: #d0d7de;
-  --borderColor-muted: #d0d7de66;
+  --borderColor-muted: #d0d7de80;
 --borderColor-emphasis: #6e7781;
 --borderColor-disabled: #f6f8fa;
 --borderColor-transparent: #ffffff00;
@@ -665,7 +665,7 @@
   --bgColor-sponsors-muted: #ffeff7;
   --bgColor-sponsors-emphasis: #bf3989;
   --borderColor-default: #d0d7de;
-    --borderColor-muted: #d0d7de66;
+    --borderColor-muted: #d0d7de80;
   --borderColor-emphasis: #6e7781;
   --borderColor-disabled: #f6f8fa;
   --borderColor-transparent: #ffffff00;

/css/functional/themes/light-tritanopia.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-tritanopia.css	2023-12-05 08:18:01.285640646 +0000
@@ -245,7 +245,7 @@
 --bgColor-sponsors-muted: #ffeff7;
 --bgColor-sponsors-emphasis: #bf3989;
 --borderColor-default: #d0d7de;
-  --borderColor-muted: #d0d7de66;
+  --borderColor-muted: #d0d7de80;
 --borderColor-emphasis: #6e7781;
 --borderColor-disabled: #f6f8fa;
 --borderColor-transparent: #ffffff00;
@@ -665,7 +665,7 @@
   --bgColor-sponsors-muted: #ffeff7;
   --bgColor-sponsors-emphasis: #bf3989;
   --borderColor-default: #d0d7de;
-    --borderColor-muted: #d0d7de66;
+    --borderColor-muted: #d0d7de80;
   --borderColor-emphasis: #6e7781;
   --borderColor-disabled: #f6f8fa;
   --borderColor-transparent: #ffffff00;

/css/functional/themes/light.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light.css	2023-12-05 08:18:00.853636743 +0000
@@ -245,7 +245,7 @@
 --bgColor-sponsors-muted: #ffeff7;
 --bgColor-sponsors-emphasis: #bf3989;
 --borderColor-default: #d0d7de;
-  --borderColor-muted: #d0d7de66;
+  --borderColor-muted: #d0d7de80;
 --borderColor-emphasis: #6e7781;
 --borderColor-disabled: #f6f8fa;
 --borderColor-transparent: #ffffff00;
@@ -665,7 +665,7 @@
   --bgColor-sponsors-muted: #ffeff7;
   --bgColor-sponsors-emphasis: #bf3989;
   --borderColor-default: #d0d7de;
-    --borderColor-muted: #d0d7de66;
+    --borderColor-muted: #d0d7de80;
   --borderColor-emphasis: #6e7781;
   --borderColor-disabled: #f6f8fa;
   --borderColor-transparent: #ffffff00;

@github-actions github-actions bot removed the update snapshots Update visual regression test snapshots label Dec 5, 2023
Just added a commit to hopefully get the actions to run
@lukasoppermann
Copy link
Contributor

Just noticed the off state in Dark-HC on bgColor-muted. Do we mind or is this fine?

CleanShot 2023-12-05 at 09 18 08@2x

Copy link
Contributor

@lukasoppermann lukasoppermann left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great. Just added one comment.

@langermank
Copy link
Contributor Author

Today we learned scale gray 7 and 8 are the same color in dark high contrast, causing that toggleswitch bug. I'm merging this PR as is but we'll followup with a more global fix for that.

@langermank langermank merged commit 0f97174 into main Dec 5, 2023
26 checks passed
@langermank langermank deleted the toggleswitch-contrast-fgcolor branch December 5, 2023 16:42
@primer primer bot mentioned this pull request Nov 23, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants