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

Add Overlay backdrop tokens to old build #667

Merged
merged 3 commits into from
Jun 28, 2023
Merged

Add Overlay backdrop tokens to old build #667

merged 3 commits into from
Jun 28, 2023

Conversation

langermank
Copy link
Contributor

@langermank langermank commented Jun 27, 2023 •
edited
Loading

Adds the new Overlay backdrop color tokens to the old build, and also adjusts the dark theme value to look more subtle and dimmed.

Before After
image image

To test this in dotcom, open a new global nav sidebar and replace the background color of the backdrop with #161b2266

@langermank langermank requested a review from a team as a code owner June 27, 2023 21:17
@changeset-bot
Copy link

changeset-bot bot commented Jun 27, 2023 •
edited
Loading

🦋 Changeset detected

Latest commit: c4f041e

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

github-actions bot commented Jun 27, 2023 •
edited
Loading

Variables changed 
--- base/dist/scss/colors/_dark.scss	2023-06-27 21:43:20.962571769 +0000
+++ dist/scss/colors/_dark.scss	2023-06-27 21:43:03.106510361 +0000
@@ -166,2 +166,3 @@
     --color-overlay-shadow: 0 0 0 1px #30363d, 0 16px 32px rgba(1,4,9,0.85);
+    --color-overlay-backdrop: rgba(22,27,34,0.4);
     --color-header-text: rgba(255,255,255,0.7);
--- base/dist/scss/colors/_dark_colorblind.scss	2023-06-27 21:43:20.978571813 +0000
+++ dist/scss/colors/_dark_colorblind.scss	2023-06-27 21:43:03.122510439 +0000
@@ -166,2 +166,3 @@
     --color-overlay-shadow: 0 0 0 1px #30363d, 0 16px 32px rgba(1,4,9,0.85);
+    --color-overlay-backdrop: rgba(22,27,34,0.4);
     --color-header-text: rgba(255,255,255,0.7);
--- base/dist/scss/colors/_dark_dimmed.scss	2023-06-27 21:43:20.966571780 +0000
+++ dist/scss/colors/_dark_dimmed.scss	2023-06-27 21:43:03.114510400 +0000
@@ -166,2 +166,3 @@
     --color-overlay-shadow: 0 0 0 1px #444c56, 0 16px 32px rgba(28,33,40,0.85);
+    --color-overlay-backdrop: rgba(45,51,59,0.4);
     --color-header-text: rgba(205,217,229,0.7);
--- base/dist/scss/colors/_dark_high_contrast.scss	2023-06-27 21:43:20.974571802 +0000
+++ dist/scss/colors/_dark_high_contrast.scss	2023-06-27 21:43:03.118510420 +0000
@@ -166,2 +166,3 @@
     --color-overlay-shadow: 0 0 0 1px #525964, 0 16px 32px rgba(1,4,9,0.85);
+    --color-overlay-backdrop: rgba(39,43,51,0.4);
     --color-header-text: rgba(255,255,255,0.7);
--- base/dist/scss/colors/_dark_tritanopia.scss	2023-06-27 21:43:20.994571856 +0000
+++ dist/scss/colors/_dark_tritanopia.scss	2023-06-27 21:43:03.130510479 +0000
@@ -166,2 +166,3 @@
     --color-overlay-shadow: 0 0 0 1px #30363d, 0 16px 32px rgba(1,4,9,0.85);
+    --color-overlay-backdrop: rgba(22,27,34,0.4);
     --color-header-text: rgba(255,255,255,0.7);
--- base/dist/scss/colors/_light.scss	2023-06-27 21:43:20.906571618 +0000
+++ dist/scss/colors/_light.scss	2023-06-27 21:43:03.070510185 +0000
@@ -166,2 +166,3 @@
     --color-overlay-shadow: 0 1px 3px rgba(31,35,40,0.12), 0 8px 24px rgba(66,74,83,0.12);
+    --color-overlay-backdrop: rgba(140,149,159,0.2);
     --color-header-text: rgba(255,255,255,0.7);
--- base/dist/scss/colors/_light_colorblind.scss	2023-06-27 21:43:20.946571726 +0000
+++ dist/scss/colors/_light_colorblind.scss	2023-06-27 21:43:03.098510322 +0000
@@ -166,2 +166,3 @@
     --color-overlay-shadow: 0 1px 3px rgba(27,31,36,0.12), 0 8px 24px rgba(66,74,83,0.12);
+    --color-overlay-backdrop: rgba(140,149,159,0.2);
     --color-header-text: rgba(255,255,255,0.7);
--- base/dist/scss/colors/_light_high_contrast.scss	2023-06-27 21:43:20.934571694 +0000
+++ dist/scss/colors/_light_high_contrast.scss	2023-06-27 21:43:03.078510224 +0000
@@ -166,2 +166,3 @@
     --color-overlay-shadow: 0 1px 3px rgba(1,4,9,0.12), 0 8px 24px rgba(52,59,67,0.12);
+    --color-overlay-backdrop: rgba(136,146,157,0.2);
     --color-header-text: rgba(255,255,255,0.7);
--- base/dist/scss/colors/_light_tritanopia.scss	2023-06-27 21:43:20.950571737 +0000
+++ dist/scss/colors/_light_tritanopia.scss	2023-06-27 21:43:03.102510342 +0000
@@ -166,2 +166,3 @@
     --color-overlay-shadow: 0 1px 3px rgba(27,31,36,0.12), 0 8px 24px rgba(66,74,83,0.12);
+    --color-overlay-backdrop: rgba(140,149,159,0.2);
     --color-header-text: rgba(255,255,255,0.7);

@github-actions
Copy link
Contributor

github-actions bot commented Jun 27, 2023 •
edited
Loading

Design Token Contrast Check

light: ✅ all checks passed

Show results table for theme: light
contrastPair pass contrastRatio minimumContrastRatio
fg.default vs. canvas.default ✅ 15.79:1 4.5:1
fg.muted vs. canvas.default ✅ 5.24:1 4.5:1
fg.subtle vs. canvas.default ✅ 4.54:1 4.5:1
fg.default vs. canvas.subtle ✅ 14.83:1 4.5:1
fg.muted vs. canvas.subtle ✅ 4.92:1 4.5:1
fg.default vs. canvas.inset ✅ 14.83:1 4.5:1
fg.muted vs. canvas.inset ✅ 4.92:1 4.5:1
fg.default vs. accent.fg ✅ 3.04:1 3:1
fg.default vs. fg.muted ✅ 3.01:1 3:1
fg.default vs. accent.subtle ✅ 13.88:1 4.5:1
fg.default vs. success.subtle ✅ 14.19:1 4.5:1
fg.default vs. open.subtle ✅ 14.19:1 4.5:1
fg.default vs. danger.subtle ✅ 13.77:1 4.5:1
fg.default vs. closed.subtle ✅ 13.77:1 4.5:1
fg.default vs. attention.subtle ✅ 14.65:1 4.5:1
fg.default vs. severe.subtle ✅ 14.26:1 4.5:1
fg.default vs. done.subtle ✅ 14.21:1 4.5:1
fg.default vs. sponsors.subtle ✅ 14.24:1 4.5:1
accent.fg vs. canvas.default ✅ 5.19:1 4.5:1
accent.fg vs. canvas.subtle ✅ 4.87:1 4.5:1
accent.fg vs. canvas.inset ✅ 4.87:1 4.5:1
success.fg vs. canvas.default ✅ 5.07:1 4.5:1
success.fg vs. canvas.subtle ✅ 4.77:1 4.5:1
success.fg vs. canvas.inset ✅ 4.77:1 4.5:1
open.fg vs. canvas.default ✅ 5.07:1 4.5:1
open.fg vs. canvas.subtle ✅ 4.77:1 4.5:1
open.fg vs. canvas.inset ✅ 4.77:1 4.5:1
danger.fg vs. canvas.default ✅ 5.24:1 4.5:1
danger.fg vs. canvas.subtle ✅ 4.92:1 4.5:1
danger.fg vs. canvas.inset ✅ 4.92:1 4.5:1
closed.fg vs. canvas.default ✅ 5.24:1 4.5:1
closed.fg vs. canvas.subtle ✅ 4.92:1 4.5:1
closed.fg vs. canvas.inset ✅ 4.92:1 4.5:1
attention.fg vs. canvas.default ✅ 4.86:1 4.5:1
attention.fg vs. canvas.subtle ✅ 4.57:1 4.5:1
attention.fg vs. canvas.inset ✅ 4.57:1 4.5:1
severe.fg vs. canvas.default ✅ 5.03:1 4.5:1
severe.fg vs. canvas.subtle ✅ 4.72:1 4.5:1
severe.fg vs. canvas.inset ✅ 4.72:1 4.5:1
done.fg vs. canvas.default ✅ 5.04:1 4.5:1
done.fg vs. canvas.subtle ✅ 4.73:1 4.5:1
done.fg vs. canvas.inset ✅ 4.73:1 4.5:1
sponsors.fg vs. canvas.default ✅ 5.04:1 4.5:1
sponsors.fg vs. canvas.subtle ✅ 4.73:1 4.5:1
sponsors.fg vs. canvas.inset ✅ 4.73:1 4.5:1
accent.fg vs. accent.subtle ✅ 4.56:1 4.5:1
success.fg vs. success.subtle ✅ 4.56:1 4.5:1
open.fg vs. open.subtle ✅ 4.56:1 4.5:1
danger.fg vs. danger.subtle ✅ 4.57:1 4.5:1
closed.fg vs. closed.subtle ✅ 4.57:1 4.5:1
attention.fg vs. attention.subtle ✅ 4.51:1 4.5:1
severe.fg vs. severe.subtle ✅ 4.54:1 4.5:1
done.fg vs. done.subtle ✅ 4.53:1 4.5:1
sponsors.fg vs. sponsors.subtle ✅ 4.55:1 4.5:1
accent.fg vs. fg.default ✅ 3.04:1 3:1
success.fg vs. fg.default ✅ 3.11:1 3:1
open.fg vs. fg.default ✅ 3.11:1 3:1
danger.fg vs. fg.default ✅ 3.01:1 3:1
closed.fg vs. fg.default ✅ 3.01:1 3:1
attention.fg vs. fg.default ✅ 3.24:1 3:1
severe.fg vs. fg.default ✅ 3.13:1 3:1
done.fg vs. fg.default ✅ 3.13:1 3:1
sponsors.fg vs. fg.default ✅ 3.13:1 3:1
fg.onEmphasis vs. neutral.emphasis ✅ 4.54:1 4.5:1
fg.onEmphasis vs. neutral.emphasisPlus ✅ 14.65:1 4.5:1
fg.onEmphasis vs. accent.emphasis ✅ 5.19:1 4.5:1
fg.onEmphasis vs. success.emphasis ✅ 4.51:1 4.5:1
fg.onEmphasis vs. open.emphasis ✅ 4.51:1 4.5:1
fg.onEmphasis vs. danger.emphasis ✅ 5.35:1 4.5:1
fg.onEmphasis vs. closed.emphasis ✅ 5.35:1 4.5:1
fg.onEmphasis vs. attention.emphasis ✅ 4.86:1 4.5:1
fg.onEmphasis vs. severe.emphasis ✅ 5.03:1 4.5:1
fg.onEmphasis vs. done.emphasis ✅ 5.04:1 4.5:1
fg.onEmphasis vs. sponsors.emphasis ✅ 5.04:1 4.5:1
control.borderColor.emphasis vs. canvas.default ✅ 3.28:1 3:1
control.borderColor.emphasis vs. canvas.subtle ✅ 3.08:1 3:1

dark: ❌ 9 checks failed

Show results table for theme: dark
contrastPair pass contrastRatio minimumContrastRatio
fg.default vs. canvas.default ✅ 16.01:1 4.5:1
fg.muted vs. canvas.default ✅ 5.07:1 4.5:1
fg.subtle vs. canvas.default ❌ 4.11:1 4.5:1
fg.default vs. canvas.subtle ✅ 14.63:1 4.5:1
fg.muted vs. canvas.subtle ✅ 4.63:1 4.5:1
fg.default vs. canvas.inset ✅ 17.37:1 4.5:1
fg.muted vs. canvas.inset ✅ 5.5:1 4.5:1
fg.default vs. accent.fg ✅ 3.17:1 3:1
fg.default vs. fg.muted ✅ 3.15:1 3:1
fg.default vs. accent.subtle on canvas.default ✅ 14.34:1 4.5:1
fg.default vs. accent.subtle on canvas.subtle ✅ 12.91:1 4.5:1
fg.default vs. success.subtle on canvas.default ✅ 13.44:1 4.5:1
fg.default vs. success.subtle on canvas.subtle ✅ 12:1 4.5:1
fg.default vs. open.subtle on canvas.default ✅ 13.44:1 4.5:1
fg.default vs. open.subtle on canvas.subtle ✅ 12:1 4.5:1
fg.default vs. danger.subtle on canvas.default ✅ 14.59:1 4.5:1
fg.default vs. danger.subtle on canvas.subtle ✅ 13.2:1 4.5:1
fg.default vs. closed.subtle on canvas.default ✅ 13.64:1 4.5:1
fg.default vs. closed.subtle on canvas.subtle ✅ 12.34:1 4.5:1
fg.default vs. attention.subtle on canvas.default ✅ 13.4:1 4.5:1
fg.default vs. attention.subtle on canvas.subtle ✅ 12.08:1 4.5:1
fg.default vs. severe.subtle on canvas.default ✅ 14.45:1 4.5:1
fg.default vs. severe.subtle on canvas.subtle ✅ 13.03:1 4.5:1
fg.default vs. done.subtle on canvas.default ✅ 14.28:1 4.5:1
fg.default vs. done.subtle on canvas.subtle ✅ 12.85:1 4.5:1
fg.default vs. sponsors.subtle on canvas.default ✅ 14.4:1 4.5:1
fg.default vs. sponsors.subtle on canvas.subtle ✅ 12.98:1 4.5:1
accent.fg vs. canvas.default ✅ 5.05:1 4.5:1
accent.fg vs. canvas.subtle ✅ 4.61:1 4.5:1
accent.fg vs. canvas.inset ✅ 5.48:1 4.5:1
success.fg vs. canvas.default ✅ 7.44:1 4.5:1
success.fg vs. canvas.subtle ✅ 6.8:1 4.5:1
success.fg vs. canvas.inset ✅ 8.08:1 4.5:1
open.fg vs. canvas.default ✅ 7.44:1 4.5:1
open.fg vs. canvas.subtle ✅ 6.8:1 4.5:1
open.fg vs. canvas.inset ✅ 8.08:1 4.5:1
danger.fg vs. canvas.default ✅ 5.64:1 4.5:1
danger.fg vs. canvas.subtle ✅ 5.16:1 4.5:1
danger.fg vs. canvas.inset ✅ 6.12:1 4.5:1
closed.fg vs. canvas.default ✅ 5.64:1 4.5:1
closed.fg vs. canvas.subtle ✅ 5.16:1 4.5:1
closed.fg vs. canvas.inset ✅ 6.12:1 4.5:1
attention.fg vs. canvas.default ✅ 7.49:1 4.5:1
attention.fg vs. canvas.subtle ✅ 6.85:1 4.5:1
attention.fg vs. canvas.inset ✅ 8.13:1 4.5:1
severe.fg vs. canvas.default ✅ 5.61:1 4.5:1
severe.fg vs. canvas.subtle ✅ 5.13:1 4.5:1
severe.fg vs. canvas.inset ✅ 6.09:1 4.5:1
done.fg vs. canvas.default ✅ 5.64:1 4.5:1
done.fg vs. canvas.subtle ✅ 5.15:1 4.5:1
done.fg vs. canvas.inset ✅ 6.12:1 4.5:1
sponsors.fg vs. canvas.default ✅ 5.62:1 4.5:1
sponsors.fg vs. canvas.subtle ✅ 5.14:1 4.5:1
sponsors.fg vs. canvas.inset ✅ 6.1:1 4.5:1
accent.fg vs. accent.subtle on canvas.default ✅ 4.52:1 4.5:1
success.fg vs. success.subtle on canvas.default ✅ 6.25:1 4.5:1
success.fg vs. success.subtle on canvas.subtle ✅ 5.58:1 4.5:1
open.fg vs. open.subtle on canvas.default ✅ 6.25:1 4.5:1
open.fg vs. open.subtle on canvas.subtle ✅ 5.58:1 4.5:1
danger.fg vs. danger.subtle on canvas.default ✅ 5.14:1 4.5:1
danger.fg vs. danger.subtle on canvas.subtle ✅ 4.65:1 4.5:1
closed.fg vs. closed.subtle on canvas.default ✅ 4.81:1 4.5:1
attention.fg vs. attention.subtle on canvas.default ✅ 6.27:1 4.5:1
attention.fg vs. attention.subtle on canvas.subtle ✅ 5.65:1 4.5:1
severe.fg vs. severe.subtle on canvas.default ✅ 5.06:1 4.5:1
severe.fg vs. severe.subtle on canvas.subtle ✅ 4.57:1 4.5:1
done.fg vs. done.subtle on canvas.default ✅ 5.03:1 4.5:1
done.fg vs. done.subtle on canvas.subtle ✅ 4.52:1 4.5:1
sponsors.fg vs. sponsors.subtle on canvas.default ✅ 5.06:1 4.5:1
sponsors.fg vs. sponsors.subtle on canvas.subtle ✅ 4.56:1 4.5:1
accent.fg vs. fg.default ✅ 3.17:1 3:1
success.fg vs. fg.default ❌ 2.14:1 3:1
open.fg vs. fg.default ❌ 2.14:1 3:1
danger.fg vs. fg.default ❌ 2.83:1 3:1
closed.fg vs. fg.default ❌ 2.83:1 3:1
attention.fg vs. fg.default ❌ 2.13:1 3:1
severe.fg vs. fg.default ❌ 2.85:1 3:1
done.fg vs. fg.default ❌ 2.83:1 3:1
sponsors.fg vs. fg.default ❌ 2.84:1 3:1
fg.onEmphasis vs. neutral.emphasis ✅ 4.59:1 4.5:1
fg.onEmphasis vs. neutral.emphasisPlus ✅ 4.59:1 4.5:1
fg.onEmphasis vs. accent.emphasis ✅ 4.63:1 4.5:1
fg.onEmphasis vs. success.emphasis ✅ 4.63:1 4.5:1
fg.onEmphasis vs. open.emphasis ✅ 4.63:1 4.5:1
fg.onEmphasis vs. danger.emphasis ✅ 4.6:1 4.5:1
fg.onEmphasis vs. closed.emphasis ✅ 4.6:1 4.5:1
fg.onEmphasis vs. attention.emphasis ✅ 4.64:1 4.5:1
fg.onEmphasis vs. severe.emphasis ✅ 4.65:1 4.5:1
fg.onEmphasis vs. done.emphasis ✅ 4.6:1 4.5:1
fg.onEmphasis vs. sponsors.emphasis ✅ 4.57:1 4.5:1
control.borderColor.emphasis vs. canvas.default ✅ 3.31:1 3:1
control.borderColor.emphasis vs. canvas.subtle ✅ 3.02:1 3:1

@langermank langermank temporarily deployed to github-pages June 27, 2023 21:20 — with GitHub Actions Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview June 27, 2023 21:20 Inactive
@github-actions
Copy link
Contributor

github-actions bot commented Jun 27, 2023 •
edited
Loading

Design Token Diff

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

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-colorblind.css	2023-06-27 21:43:09.205952171 +0000
@@ -172,7 +172,7 @@
 --focus-outlineColor: #1f6feb;
 --menu-bgColor-active: #161b22;
 --overlay-bgColor: #161b22;
-  --overlay-backdrop-bgColor: #b1bac433;
+  --overlay-backdrop-bgColor: #161b2266;
 --selectMenu-borderColor: #484f58;
 --selectMenu-bgColor-active: #0c2d6b;
 --sideNav-bgColor-selected: #21262d;
@@ -570,7 +570,7 @@
   --focus-outlineColor: #1f6feb;
   --menu-bgColor-active: #161b22;
   --overlay-bgColor: #161b22;
-    --overlay-backdrop-bgColor: #b1bac433;
+    --overlay-backdrop-bgColor: #161b2266;
   --selectMenu-borderColor: #484f58;
   --selectMenu-bgColor-active: #0c2d6b;
   --sideNav-bgColor-selected: #21262d;

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

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-dimmed.css	2023-06-27 21:43:08.125889012 +0000
@@ -172,7 +172,7 @@
 --focus-outlineColor: #316dca;
 --menu-bgColor-active: #2d333b;
 --overlay-bgColor: #2d333b;
-  --overlay-backdrop-bgColor: #909dab33;
+  --overlay-backdrop-bgColor: #2d333b66;
 --selectMenu-borderColor: #545d68;
 --selectMenu-bgColor-active: #143d79;
 --sideNav-bgColor-selected: #373e47;
@@ -570,7 +570,7 @@
   --focus-outlineColor: #316dca;
   --menu-bgColor-active: #2d333b;
   --overlay-bgColor: #2d333b;
-    --overlay-backdrop-bgColor: #909dab33;
+    --overlay-backdrop-bgColor: #2d333b66;
   --selectMenu-borderColor: #545d68;
   --selectMenu-bgColor-active: #143d79;
   --sideNav-bgColor-selected: #373e47;

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

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-high-contrast.css	2023-06-27 21:43:09.749983985 +0000
@@ -172,7 +172,7 @@
 --focus-outlineColor: #409eff;
 --menu-bgColor-active: #272b33;
 --overlay-bgColor: #272b33;
-  --overlay-backdrop-bgColor: #d9dee333;
+  --overlay-backdrop-bgColor: #272b3366;
 --selectMenu-borderColor: #7a828e;
 --selectMenu-bgColor-active: #1e60d5;
 --sideNav-bgColor-selected: #272b33;
@@ -570,7 +570,7 @@
   --focus-outlineColor: #409eff;
   --menu-bgColor-active: #272b33;
   --overlay-bgColor: #272b33;
-    --overlay-backdrop-bgColor: #d9dee333;
+    --overlay-backdrop-bgColor: #272b3366;
   --selectMenu-borderColor: #7a828e;
   --selectMenu-bgColor-active: #1e60d5;
   --sideNav-bgColor-selected: #272b33;

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

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-tritanopia.css	2023-06-27 21:43:08.653919890 +0000
@@ -172,7 +172,7 @@
 --focus-outlineColor: #1f6feb;
 --menu-bgColor-active: #161b22;
 --overlay-bgColor: #161b22;
-  --overlay-backdrop-bgColor: #b1bac433;
+  --overlay-backdrop-bgColor: #161b2266;
 --selectMenu-borderColor: #484f58;
 --selectMenu-bgColor-active: #0c2d6b;
 --sideNav-bgColor-selected: #21262d;
@@ -570,7 +570,7 @@
   --focus-outlineColor: #1f6feb;
   --menu-bgColor-active: #161b22;
   --overlay-bgColor: #161b22;
-    --overlay-backdrop-bgColor: #b1bac433;
+    --overlay-backdrop-bgColor: #161b2266;
   --selectMenu-borderColor: #484f58;
   --selectMenu-bgColor-active: #0c2d6b;
   --sideNav-bgColor-selected: #21262d;

/css/functional/themes/dark.css

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark.css	2023-06-27 21:43:07.553855561 +0000
@@ -172,7 +172,7 @@
 --focus-outlineColor: #1f6feb;
 --menu-bgColor-active: #161b22;
 --overlay-bgColor: #161b22;
-  --overlay-backdrop-bgColor: #b1bac433;
+  --overlay-backdrop-bgColor: #161b2266;
 --selectMenu-borderColor: #484f58;
 --selectMenu-bgColor-active: #0c2d6b;
 --sideNav-bgColor-selected: #21262d;
@@ -570,7 +570,7 @@
   --focus-outlineColor: #1f6feb;
   --menu-bgColor-active: #161b22;
   --overlay-bgColor: #161b22;
-    --overlay-backdrop-bgColor: #b1bac433;
+    --overlay-backdrop-bgColor: #161b2266;
   --selectMenu-borderColor: #484f58;
   --selectMenu-bgColor-active: #0c2d6b;
   --sideNav-bgColor-selected: #21262d;

@github-actions github-actions bot temporarily deployed to storybook-preview June 27, 2023 21:43 Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview June 27, 2023 21:44 Inactive
@langermank langermank merged commit f8c7429 into main Jun 28, 2023
@langermank langermank deleted the overlay-backdrop-legacy-tokens branch June 28, 2023 18:01
@primer-css primer-css mentioned this pull request Jun 28, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mperrotti mperrotti mperrotti approved these changes

@lukasoppermann lukasoppermann Awaiting requested review from lukasoppermann lukasoppermann is a code owner automatically assigned from primer/css-reviewers

@broccolinisoup broccolinisoup Awaiting requested review from broccolinisoup

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@langermank @mperrotti