Addressing a few lingering bugs with v8 by langermank · Pull Request #789 · primer/primitives

langermank · 2023-12-05T01:25:26Z

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

changeset-bot · 2023-12-05T01:25:29Z

🦋 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

github-actions · 2023-12-05T01:25:50Z

Variables changed

No variables changed

github-actions · 2023-12-05T01:26:55Z

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;

Just added a commit to hopefully get the actions to run

lukasoppermann · 2023-12-05T08:18:40Z

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

lukasoppermann

Great. Just added one comment.

langermank · 2023-12-05T16:42:50Z

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 added 2 commits December 4, 2023 17:08

fix toggleswitch

c1818b4

slightly darken muted border

d1782e8

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

langermank requested review from a team, lukasoppermann and siddharthkp December 5, 2023 01:25

Create ten-impalas-unite.md

fa61518

langermank added the update snapshots Update visual regression test snapshots label Dec 5, 2023

langermank temporarily deployed to github-pages December 5, 2023 01:28 — with GitHub Actions Inactive

github-actions Bot temporarily deployed to storybook-preview December 5, 2023 01:28 Inactive

github-actions Bot temporarily deployed to storybook-preview December 5, 2023 01:29 Inactive

github-actions[bot] Regenerated snapshots

b43b5ec

github-actions Bot removed the update snapshots Update visual regression test snapshots label Dec 5, 2023

Update ten-impalas-unite.md

d4803b0

Just added a commit to hopefully get the actions to run

lukasoppermann temporarily deployed to github-pages December 5, 2023 08:18 — with GitHub Actions Inactive

github-actions Bot temporarily deployed to storybook-preview December 5, 2023 08:19 Inactive

lukasoppermann approved these changes Dec 5, 2023

View reviewed changes

langermank merged commit 0f97174 into main Dec 5, 2023

langermank deleted the toggleswitch-contrast-fgcolor branch December 5, 2023 16:42

primer Bot mentioned this pull request Nov 23, 2023

Release Tracking #786

Merged

Navigation Menu

Repository navigation

Addressing a few lingering bugs with v8 - #789

Addressing a few lingering bugs with v8#789
langermank merged 5 commits into
mainfrom
toggleswitch-contrast-fgcolor

langermank commented Dec 5, 2023

Uh oh!

changeset-bot Bot commented Dec 5, 2023 •

edited

Loading

Uh oh!

github-actions Bot commented Dec 5, 2023 •

edited

Loading

Uh oh!

github-actions Bot commented Dec 5, 2023 •

edited

Loading

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

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

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

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

/css/functional/themes/dark.css

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

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

/css/functional/themes/light.css

Uh oh!

lukasoppermann commented Dec 5, 2023

Uh oh!

lukasoppermann left a comment

Uh oh!

langermank commented Dec 5, 2023

Uh oh!

This branch was previously deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

langermank commented Dec 5, 2023

Uh oh!

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

Uh oh!

🦋 Changeset detected

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Design Token Diff

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

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

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

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

/css/functional/themes/dark.css

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

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

/css/functional/themes/light.css

Uh oh!

lukasoppermann commented Dec 5, 2023

Uh oh!

lukasoppermann left a comment

Choose a reason for hiding this comment

Uh oh!

langermank commented Dec 5, 2023

Uh oh!

This branch was previously deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

changeset-bot Bot commented Dec 5, 2023 •

edited

Loading

github-actions Bot commented Dec 5, 2023 •

edited

Loading

github-actions Bot commented Dec 5, 2023 •

edited

Loading