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?

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 deployed to github-pages May 20, 2025 01:56 — with GitHub Actions View deployment

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

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!

Uh oh!

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

Are you sure you want to change the base?

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!

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