Use `bgColor-default` for `overlay` background in dark themes #1220

langermank · 2025-05-20T01:39:01Z

Use bgColor-default for dark overlays. I'm really not sure how I feel about this solution as we rely on a slightly lighter shade to show dimension for dark mode where shadows aren't very useful. But we're lacking the ability to layer inside overlays by using muted as the background.

Closes https://github.com/github/primer/issues/4175

Before

After

changeset-bot · 2025-05-20T01:39:04Z

🦋 Changeset detected

Latest commit: 3551710

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	Minor

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 · 2025-05-20T01:41:06Z

Design Token Diff (CSS)

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-colorblind.css	2025-05-20 01:55:22.443345785 +0000
@@ -572,7 +572,7 @@
 --fgColor-white: #ffffff;
 --focus-outlineColor: var(--borderColor-accent-emphasis);
 --header-fgColor-default: #ffffffb3;
-  --overlay-bgColor: var(--bgColor-muted);
+  --overlay-bgColor: #010409;
 --page-header-bgColor: var(--bgColor-default);
 --reactionButton-selected-fgColor-rest: var(--fgColor-link);
 --selectMenu-borderColor: var(--borderColor-default);
@@ -1210,7 +1210,7 @@
   --fgColor-white: #ffffff;
   --focus-outlineColor: var(--borderColor-accent-emphasis);
   --header-fgColor-default: #ffffffb3;
-    --overlay-bgColor: var(--bgColor-muted);
+    --overlay-bgColor: #010409;
   --page-header-bgColor: var(--bgColor-default);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --selectMenu-borderColor: var(--borderColor-default);

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-high-contrast.css	2025-05-20 01:55:23.958347894 +0000
@@ -554,7 +554,7 @@
 --fgColor-white: #ffffff;
 --focus-outlineColor: var(--borderColor-accent-emphasis);
 --header-fgColor-default: #ffffffb3;
-  --overlay-bgColor: var(--bgColor-muted);
+  --overlay-bgColor: #010409;
 --overlay-borderColor: var(--borderColor-default);
 --reactionButton-selected-fgColor-rest: var(--fgColor-link);
 --selectMenu-borderColor: var(--borderColor-default);
@@ -1192,7 +1192,7 @@
   --fgColor-white: #ffffff;
   --focus-outlineColor: var(--borderColor-accent-emphasis);
   --header-fgColor-default: #ffffffb3;
-    --overlay-bgColor: var(--bgColor-muted);
+    --overlay-bgColor: #010409;
   --overlay-borderColor: var(--borderColor-default);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --selectMenu-borderColor: var(--borderColor-default);

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-tritanopia.css	2025-05-20 01:55:20.932343685 +0000
@@ -573,7 +573,7 @@
 --fgColor-white: #ffffff;
 --focus-outlineColor: var(--borderColor-accent-emphasis);
 --header-fgColor-default: #ffffffb3;
-  --overlay-bgColor: var(--bgColor-muted);
+  --overlay-bgColor: #010409;
 --page-header-bgColor: var(--bgColor-default);
 --reactionButton-selected-fgColor-rest: var(--fgColor-link);
 --selectMenu-borderColor: var(--borderColor-default);
@@ -1211,7 +1211,7 @@
   --fgColor-white: #ffffff;
   --focus-outlineColor: var(--borderColor-accent-emphasis);
   --header-fgColor-default: #ffffffb3;
-    --overlay-bgColor: var(--bgColor-muted);
+    --overlay-bgColor: #010409;
   --page-header-bgColor: var(--bgColor-default);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --selectMenu-borderColor: var(--borderColor-default);

/css/functional/themes/dark.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark.css	2025-05-20 01:55:17.826339414 +0000
@@ -572,7 +572,7 @@
 --fgColor-white: #ffffff;
 --focus-outlineColor: var(--borderColor-accent-emphasis);
 --header-fgColor-default: #ffffffb3;
-  --overlay-bgColor: var(--bgColor-muted);
+  --overlay-bgColor: #010409;
 --page-header-bgColor: var(--bgColor-default);
 --reactionButton-selected-fgColor-rest: var(--fgColor-link);
 --selectMenu-borderColor: var(--borderColor-default);
@@ -1210,7 +1210,7 @@
   --fgColor-white: #ffffff;
   --focus-outlineColor: var(--borderColor-accent-emphasis);
   --header-fgColor-default: #ffffffb3;
-    --overlay-bgColor: var(--bgColor-muted);
+    --overlay-bgColor: #010409;
   --page-header-bgColor: var(--bgColor-default);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --selectMenu-borderColor: var(--borderColor-default);

github-actions · 2025-05-20T01:41:06Z

Design Token Diff (StyleLint)

/styleLint/functional/themes/dark-colorblind.json

+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark-colorblind.json	2025-05-20 01:55:22.444345787 +0000
@@ -28027,7 +28027,7 @@
   "key": "{overlay.backdrop.bgColor}"
 },
 "overlay-bgColor": {
-    "$value": "#151b23",
+    "$value": "#010409",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -28036,14 +28036,13 @@
       "scopes": ["bgColor"]
     },
     "org.primer.overrides": {
-        "dark": "#151b23",
       "dark-dimmed": "#2a313c"
     }
   },
   "filePath": "src/tokens/component/overlay.json5",
   "isSource": true,
   "original": {
-      "$value": "{bgColor.muted}",
+      "$value": "{base.color.neutral.0}",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -28052,7 +28051,6 @@
         "scopes": ["bgColor"]
       },
       "org.primer.overrides": {
-          "dark": "{bgColor.muted}",
         "dark-dimmed": "{base.color.neutral.5}"
       }
     }

/styleLint/functional/themes/dark-dimmed.json

+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark-dimmed.json	2025-05-20 01:55:19.349341508 +0000
@@ -28028,7 +28028,6 @@
       "scopes": ["bgColor"]
     },
     "org.primer.overrides": {
-        "dark": "#262c36",
       "dark-dimmed": "#2a313c"
     }
   },
@@ -28044,7 +28043,6 @@
         "scopes": ["bgColor"]
       },
       "org.primer.overrides": {
-          "dark": "{bgColor.muted}",
         "dark-dimmed": "{base.color.neutral.5}"
       }
     }

/styleLint/functional/themes/dark-high-contrast.json

+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark-high-contrast.json	2025-05-20 01:55:23.959347895 +0000
@@ -28033,7 +28033,7 @@
   "key": "{overlay.backdrop.bgColor}"
 },
 "overlay-bgColor": {
-    "$value": "#151b23",
+    "$value": "#010409",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -28042,14 +28042,13 @@
       "scopes": ["bgColor"]
     },
     "org.primer.overrides": {
-        "dark": "#151b23",
       "dark-dimmed": "#2a313c"
     }
   },
   "filePath": "src/tokens/component/overlay.json5",
   "isSource": true,
   "original": {
-      "$value": "{bgColor.muted}",
+      "$value": "{base.color.neutral.0}",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -28058,7 +28057,6 @@
         "scopes": ["bgColor"]
       },
       "org.primer.overrides": {
-          "dark": "{bgColor.muted}",
         "dark-dimmed": "{base.color.neutral.5}"
       }
     }

/styleLint/functional/themes/dark-tritanopia.json

+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark-tritanopia.json	2025-05-20 01:55:20.933343686 +0000
@@ -28025,7 +28025,7 @@
   "key": "{overlay.backdrop.bgColor}"
 },
 "overlay-bgColor": {
-    "$value": "#151b23",
+    "$value": "#010409",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -28034,14 +28034,13 @@
       "scopes": ["bgColor"]
     },
     "org.primer.overrides": {
-        "dark": "#151b23",
       "dark-dimmed": "#2a313c"
     }
   },
   "filePath": "src/tokens/component/overlay.json5",
   "isSource": true,
   "original": {
-      "$value": "{bgColor.muted}",
+      "$value": "{base.color.neutral.0}",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -28050,7 +28049,6 @@
         "scopes": ["bgColor"]
       },
       "org.primer.overrides": {
-          "dark": "{bgColor.muted}",
         "dark-dimmed": "{base.color.neutral.5}"
       }
     }

/styleLint/functional/themes/dark.json

+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark.json	2025-05-20 01:55:17.827339416 +0000
@@ -28017,7 +28017,7 @@
   "key": "{overlay.backdrop.bgColor}"
 },
 "overlay-bgColor": {
-    "$value": "#151b23",
+    "$value": "#010409",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -28026,14 +28026,13 @@
       "scopes": ["bgColor"]
     },
     "org.primer.overrides": {
-        "dark": "#151b23",
       "dark-dimmed": "#2a313c"
     }
   },
   "filePath": "src/tokens/component/overlay.json5",
   "isSource": true,
   "original": {
-      "$value": "{bgColor.muted}",
+      "$value": "{base.color.neutral.0}",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -28042,7 +28041,6 @@
         "scopes": ["bgColor"]
       },
       "org.primer.overrides": {
-          "dark": "{bgColor.muted}",
         "dark-dimmed": "{base.color.neutral.5}"
       }
     }

/styleLint/functional/themes/light-colorblind.json

+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/light-colorblind.json	2025-05-20 01:55:14.772335215 +0000
@@ -28000,7 +28000,6 @@
       "scopes": ["bgColor"]
     },
     "org.primer.overrides": {
-        "dark": "#f6f8fa",
       "dark-dimmed": "#dae0e7"
     }
   },
@@ -28016,7 +28015,6 @@
         "scopes": ["bgColor"]
       },
       "org.primer.overrides": {
-          "dark": "{bgColor.muted}",
         "dark-dimmed": "{base.color.neutral.5}"
       }
     }

/styleLint/functional/themes/light-high-contrast.json

+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/light-high-contrast.json	2025-05-20 01:55:16.231337221 +0000
@@ -28002,7 +28002,6 @@
       "scopes": ["bgColor"]
     },
     "org.primer.overrides": {
-        "dark": "#e6eaef",
       "dark-dimmed": "#dae0e7"
     }
   },
@@ -28018,7 +28017,6 @@
         "scopes": ["bgColor"]
       },
       "org.primer.overrides": {
-          "dark": "{bgColor.muted}",
         "dark-dimmed": "{base.color.neutral.5}"
       }
     }

/styleLint/functional/themes/light-tritanopia.json

+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/light-tritanopia.json	2025-05-20 01:55:13.245371556 +0000
@@ -28000,7 +28000,6 @@
       "scopes": ["bgColor"]
     },
     "org.primer.overrides": {
-        "dark": "#f6f8fa",
       "dark-dimmed": "#dae0e7"
     }
   },
@@ -28016,7 +28015,6 @@
         "scopes": ["bgColor"]
       },
       "org.primer.overrides": {
-          "dark": "{bgColor.muted}",
         "dark-dimmed": "{base.color.neutral.5}"
       }
     }

/styleLint/functional/themes/light.json

+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/light.json	2025-05-20 01:55:11.652364659 +0000
@@ -27996,7 +27996,6 @@
       "scopes": ["bgColor"]
     },
     "org.primer.overrides": {
-        "dark": "#f6f8fa",
       "dark-dimmed": "#dae0e7"
     }
   },
@@ -28012,7 +28011,6 @@
         "scopes": ["bgColor"]
       },
       "org.primer.overrides": {
-          "dark": "{bgColor.muted}",
         "dark-dimmed": "{base.color.neutral.5}"
       }
     }

github-actions · 2025-05-20T01:41:07Z

Design Token Diff (Figma)

/figma/themes/dark-colorblind.json

+++ /home/runner/work/primitives/primitives/dist/figma/themes/dark-colorblind.json	2025-05-20 01:55:31.022357520 +0000
@@ -10517,14 +10517,14 @@
 {
   "name": "overlay/bgColor",
   "value": {
-      "r": 0.08235294117647059,
-      "g": 0.10588235294117647,
-      "b": 0.13725490196078433,
+      "r": 0.00392156862745098,
+      "g": 0.01568627450980392,
+      "b": 0.03529411764705882,
     "a": 1
   },
   "type": "COLOR",
   "refId": "mode/overlay/bgColor",
-    "reference": "mode/bgColor/muted",
+    "reference": "base/color/dark/base/color/neutral/0",
   "collection": "mode",
   "mode": "dark protanopia deuteranopia",
   "group": "component (internal)",

/figma/themes/dark-high-contrast.json

+++ /home/runner/work/primitives/primitives/dist/figma/themes/dark-high-contrast.json	2025-05-20 01:55:31.465358089 +0000
@@ -10517,14 +10517,14 @@
 {
   "name": "overlay/bgColor",
   "value": {
-      "r": 0.08235294117647059,
-      "g": 0.10588235294117647,
-      "b": 0.13725490196078433,
+      "r": 0.00392156862745098,
+      "g": 0.01568627450980392,
+      "b": 0.03529411764705882,
     "a": 1
   },
   "type": "COLOR",
   "refId": "mode/overlay/bgColor",
-    "reference": "mode/bgColor/muted",
+    "reference": "base/color/dark/base/color/neutral/0",
   "collection": "mode",
   "mode": "dark high contrast",
   "group": "component (internal)",

/figma/themes/dark-tritanopia.json

+++ /home/runner/work/primitives/primitives/dist/figma/themes/dark-tritanopia.json	2025-05-20 01:55:30.597356973 +0000
@@ -10510,14 +10510,14 @@
 {
   "name": "overlay/bgColor",
   "value": {
-      "r": 0.08235294117647059,
-      "g": 0.10588235294117647,
-      "b": 0.13725490196078433,
+      "r": 0.00392156862745098,
+      "g": 0.01568627450980392,
+      "b": 0.03529411764705882,
     "a": 1
   },
   "type": "COLOR",
   "refId": "mode/overlay/bgColor",
-    "reference": "mode/bgColor/muted",
+    "reference": "base/color/dark/base/color/neutral/0",
   "collection": "mode",
   "mode": "dark tritanopia",
   "group": "component (internal)",

/figma/themes/dark.json

+++ /home/runner/work/primitives/primitives/dist/figma/themes/dark.json	2025-05-20 01:55:29.733355863 +0000
@@ -10510,14 +10510,14 @@
 {
   "name": "overlay/bgColor",
   "value": {
-      "r": 0.08235294117647059,
-      "g": 0.10588235294117647,
-      "b": 0.13725490196078433,
+      "r": 0.00392156862745098,
+      "g": 0.01568627450980392,
+      "b": 0.03529411764705882,
     "a": 1
   },
   "type": "COLOR",
   "refId": "mode/overlay/bgColor",
-    "reference": "mode/bgColor/muted",
+    "reference": "base/color/dark/base/color/neutral/0",
   "collection": "mode",
   "mode": "dark",
   "group": "component (internal)",

lukasoppermann · 2025-05-20T05:26:23Z

Can we make the BG darker so that we still see layers?

Copilot

Pull Request Overview

This PR updates the overlay background in dark themes by removing the muted shade override so that the default background is used, and bumps the primitives package version.

Remove the dark override of bgColor.muted in overlay.json5
Rely on the default background in dark mode
Add a changeset to bump @primer/primitives to a minor version

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
src/tokens/component/overlay.json5	Removed the `dark: '{bgColor.muted}'` override
.changeset/ten-adults-matter.md	Added a changeset to bump version and describe change

Comments suppressed due to low confidence (2)

src/tokens/component/overlay.json5:12

Removing the explicit dark override might lead to ambiguity; consider adding an explicit dark: '{bgColor.default}' entry to make the intended default background clear and guard against future changes.

dark: '{bgColor.muted}',

src/tokens/component/overlay.json5:12

We should add or update a visual regression or snapshot test for the overlay component in dark mode to ensure the background change behaves as expected.

dark: '{bgColor.muted}',

change bg for dark

7bb6dc0

langermank temporarily deployed to github-pages May 20, 2025 01:40 — with GitHub Actions Inactive

github-actions bot temporarily deployed to Preview (Storybook) May 20, 2025 01:41 Inactive

langermank changed the title ~~change bg for dark~~ Use bgColor-default for overlay background in dark themes May 20, 2025

Create ten-adults-matter.md

3551710

langermank temporarily deployed to github-pages May 20, 2025 01:56 — with GitHub Actions Inactive

github-actions bot temporarily deployed to Preview (Storybook) May 20, 2025 01:56 Inactive

langermank marked this pull request as ready for review June 5, 2025 15:41

Copilot AI review requested due to automatic review settings June 5, 2025 15:41

langermank requested review from a team as code owners June 5, 2025 15:41

langermank requested a review from jonrohan June 5, 2025 15:41

Copilot AI reviewed Jun 5, 2025

View reviewed changes

lukasoppermann approved these changes Jun 5, 2025

View reviewed changes

langermank merged commit 078ffd6 into main Jun 5, 2025
27 checks passed

langermank deleted the overlay-bg-change branch June 5, 2025 15:50

primer bot mentioned this pull request Jun 5, 2025

Release Tracking #1226

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Use `bgColor-default` for `overlay` background in dark themes #1220

Use `bgColor-default` for `overlay` background in dark themes #1220

Uh oh!

langermank commented May 20, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented May 20, 2025 •

edited

Loading

Uh oh!

github-actions bot commented May 20, 2025 •

edited

Loading

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

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

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

/css/functional/themes/dark.css

Uh oh!

github-actions bot commented May 20, 2025 •

edited

Loading

/styleLint/functional/themes/dark-colorblind.json

/styleLint/functional/themes/dark-dimmed.json

/styleLint/functional/themes/dark-high-contrast.json

/styleLint/functional/themes/dark-tritanopia.json

/styleLint/functional/themes/dark.json

/styleLint/functional/themes/light-colorblind.json

/styleLint/functional/themes/light-high-contrast.json

/styleLint/functional/themes/light-tritanopia.json

/styleLint/functional/themes/light.json

Uh oh!

github-actions bot commented May 20, 2025 •

edited

Loading

/figma/themes/dark-colorblind.json

/figma/themes/dark-high-contrast.json

/figma/themes/dark-tritanopia.json

/figma/themes/dark.json

Uh oh!

lukasoppermann commented May 20, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Use bgColor-default for overlay background in dark themes #1220

Use bgColor-default for overlay background in dark themes #1220

Uh oh!

Conversation

langermank commented May 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented May 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented May 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Design Token Diff (CSS)

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

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

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

/css/functional/themes/dark.css

Uh oh!

github-actions bot commented May 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Design Token Diff (StyleLint)

/styleLint/functional/themes/dark-colorblind.json

/styleLint/functional/themes/dark-dimmed.json

/styleLint/functional/themes/dark-high-contrast.json

/styleLint/functional/themes/dark-tritanopia.json

/styleLint/functional/themes/dark.json

/styleLint/functional/themes/light-colorblind.json

/styleLint/functional/themes/light-high-contrast.json

/styleLint/functional/themes/light-tritanopia.json

/styleLint/functional/themes/light.json

Uh oh!

github-actions bot commented May 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Design Token Diff (Figma)

/figma/themes/dark-colorblind.json

/figma/themes/dark-high-contrast.json

/figma/themes/dark-tritanopia.json

/figma/themes/dark.json

Uh oh!

lukasoppermann commented May 20, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Use `bgColor-default` for `overlay` background in dark themes #1220

Use `bgColor-default` for `overlay` background in dark themes #1220

langermank commented May 20, 2025 •

edited

Loading

changeset-bot bot commented May 20, 2025 •

edited

Loading

github-actions bot commented May 20, 2025 •

edited

Loading

github-actions bot commented May 20, 2025 •

edited

Loading

github-actions bot commented May 20, 2025 •

edited

Loading