Skip to content

Fix overlay bg color for dark dimmed high contrast #1265

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
Merged
langermank merged 6 commits into from
Oct 30, 2025
Merged

Fix overlay bg color for dark dimmed high contrast #1265

langermank merged 6 commits into from
Oct 30, 2025

Conversation

@langermank
Copy link
Contributor

@langermank langermank commented Oct 23, 2025 •
edited
Loading

@langermank langermank requested a review from a team as a code owner October 23, 2025 20:50
Copilot AI review requested due to automatic review settings October 23, 2025 20:50
@langermank langermank requested a review from a team as a code owner October 23, 2025 20:50
@langermank langermank requested a review from jonrohan October 23, 2025 20:50
@changeset-bot
Copy link

changeset-bot bot commented Oct 23, 2025 •
edited
Loading

🦋 Changeset detected

Latest commit: 5efd77f

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

Copilot AI reviewed Oct 23, 2025
View reviewed changes
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull Request Overview

This PR fixes the overlay background color for the dark dimmed high contrast theme by adding a specific color token override and correcting a typo in the configuration file.

Key Changes:

  • Added dark-dimmed-high-contrast color override for overlay background
  • Fixed a typo in the dark-dimmed configuration line

Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.

src/tokens/component/overlay.json5 Outdated
$value: '{borderColor.muted}',
},
'dark-dimmed': {
'dark-dimmed': {y
Copy link

Copilot AI Oct 23, 2025

Choose a reason for hiding this comment

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

Corrected extraneous character 'y' appended to 'dark-dimmed' line.

Suggested change
'dark-dimmed': {y
'dark-dimmed': {

Copilot uses AI. Check for mistakes.
@langermank
Fix overlay background color for dark high contrast
2608452 
Fixes the background color of the overlay in dark mode for high contrast settings.
@langermank
oops
57616d3
@langermank
Merge branch 'fix-dark-dimmed-hc-overlay' of https://github.com/prime…
abf05e7 
…r/primitives into fix-dark-dimmed-hc-overlay
@github-actions
Copy link
Contributor

github-actions bot commented Oct 24, 2025 •
edited
Loading

Design Token Diff (CSS)

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

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-dimmed-high-contrast.css	2025-10-30 00:27:27.876310150 +0000
@@ -631,6 +631,7 @@
 --label-yellow-fgColor-rest: #d3910d;
 --menu-bgColor-active: #151b23;
 --overlay-backdrop-bgColor: #9198a166;
+  --overlay-bgColor: #262c36;
 --progressBar-bgColor-neutral: #656c76;
 --reactionButton-selected-bgColor-rest: #4184e433;
 --reactionButton-selected-fgColor-hover: #6cb6ff;
@@ -791,7 +792,6 @@
 --label-red-borderColor: var(--label-red-fgColor-rest);
 --label-teal-borderColor: var(--label-teal-fgColor-rest);
 --label-yellow-borderColor: var(--label-yellow-fgColor-rest);
-  --overlay-bgColor: #010409;
 --overlay-borderColor: var(--borderColor-default);
 --page-header-bgColor: var(--bgColor-default);
 --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
@@ -1494,6 +1494,7 @@
   --label-yellow-fgColor-rest: #d3910d;
   --menu-bgColor-active: #151b23;
   --overlay-backdrop-bgColor: #9198a166;
+    --overlay-bgColor: #262c36;
   --progressBar-bgColor-neutral: #656c76;
   --reactionButton-selected-bgColor-rest: #4184e433;
   --reactionButton-selected-fgColor-hover: #6cb6ff;
@@ -1654,7 +1655,6 @@
   --label-red-borderColor: var(--label-red-fgColor-rest);
   --label-teal-borderColor: var(--label-teal-fgColor-rest);
   --label-yellow-borderColor: var(--label-yellow-fgColor-rest);
-    --overlay-bgColor: #010409;
   --overlay-borderColor: var(--borderColor-default);
   --page-header-bgColor: var(--bgColor-default);
   --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);

@github-actions
Copy link
Contributor

github-actions bot commented Oct 24, 2025 •
edited
Loading

Design Token Diff (StyleLint)

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

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json	2025-10-30 00:27:33.903358455 +0000
@@ -44371,7 +44371,8 @@
       "scopes": ["bgColor"]
     },
     "org.primer.overrides": {
-        "dark-dimmed": "#2a313c"
+        "dark-dimmed": "#2a313c",
+        "dark-dimmed-high-contrast": "#262c36"
     }
   },
   "filePath": "src/tokens/component/overlay.json5",
@@ -44386,7 +44387,8 @@
         "scopes": ["bgColor"]
       },
       "org.primer.overrides": {
-          "dark-dimmed": "{base.color.neutral.5}"
+          "dark-dimmed": "{base.color.neutral.5}",
+          "dark-dimmed-high-contrast": "{base.color.neutral.4}"
       }
     },
     "key": "{overlay.bgColor}"

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

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark-colorblind.json	2025-10-30 00:27:32.418346579 +0000
@@ -44367,7 +44367,8 @@
       "scopes": ["bgColor"]
     },
     "org.primer.overrides": {
-        "dark-dimmed": "#2a313c"
+        "dark-dimmed": "#2a313c",
+        "dark-dimmed-high-contrast": "#262c36"
     }
   },
   "filePath": "src/tokens/component/overlay.json5",
@@ -44382,7 +44383,8 @@
         "scopes": ["bgColor"]
       },
       "org.primer.overrides": {
-          "dark-dimmed": "{base.color.neutral.5}"
+          "dark-dimmed": "{base.color.neutral.5}",
+          "dark-dimmed-high-contrast": "{base.color.neutral.4}"
       }
     },
     "key": "{overlay.bgColor}"

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

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json	2025-10-30 00:27:27.878310168 +0000
@@ -44352,7 +44352,7 @@
 },
 "overlay-bgColor": {
   "key": "{overlay.bgColor}",
-    "$value": "#010409",
+    "$value": "#262c36",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -44361,13 +44361,14 @@
       "scopes": ["bgColor"]
     },
     "org.primer.overrides": {
-        "dark-dimmed": "#2a313c"
+        "dark-dimmed": "#2a313c",
+        "dark-dimmed-high-contrast": "#262c36"
     }
   },
   "filePath": "src/tokens/component/overlay.json5",
   "isSource": true,
   "original": {
-      "$value": "{base.color.neutral.0}",
+      "$value": "{base.color.neutral.4}",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -44376,7 +44377,8 @@
         "scopes": ["bgColor"]
       },
       "org.primer.overrides": {
-          "dark-dimmed": "{base.color.neutral.5}"
+          "dark-dimmed": "{base.color.neutral.5}",
+          "dark-dimmed-high-contrast": "{base.color.neutral.4}"
       }
     },
     "key": "{overlay.bgColor}"

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

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark-dimmed.json	2025-10-30 00:27:26.302295578 +0000
@@ -44357,7 +44357,8 @@
       "scopes": ["bgColor"]
     },
     "org.primer.overrides": {
-        "dark-dimmed": "#2a313c"
+        "dark-dimmed": "#2a313c",
+        "dark-dimmed-high-contrast": "#262c36"
     }
   },
   "filePath": "src/tokens/component/overlay.json5",
@@ -44372,7 +44373,8 @@
         "scopes": ["bgColor"]
       },
       "org.primer.overrides": {
-          "dark-dimmed": "{base.color.neutral.5}"
+          "dark-dimmed": "{base.color.neutral.5}",
+          "dark-dimmed-high-contrast": "{base.color.neutral.4}"
       }
     },
     "key": "{overlay.bgColor}"

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

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark-high-contrast.json	2025-10-30 00:27:35.363370132 +0000
@@ -44367,7 +44367,8 @@
       "scopes": ["bgColor"]
     },
     "org.primer.overrides": {
-        "dark-dimmed": "#2a313c"
+        "dark-dimmed": "#2a313c",
+        "dark-dimmed-high-contrast": "#262c36"
     }
   },
   "filePath": "src/tokens/component/overlay.json5",
@@ -44382,7 +44383,8 @@
         "scopes": ["bgColor"]
       },
       "org.primer.overrides": {
-          "dark-dimmed": "{base.color.neutral.5}"
+          "dark-dimmed": "{base.color.neutral.5}",
+          "dark-dimmed-high-contrast": "{base.color.neutral.4}"
       }
     },
     "key": "{overlay.bgColor}"

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

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json	2025-10-30 00:27:30.875334239 +0000
@@ -44367,7 +44367,8 @@
       "scopes": ["bgColor"]
     },
     "org.primer.overrides": {
-        "dark-dimmed": "#2a313c"
+        "dark-dimmed": "#2a313c",
+        "dark-dimmed-high-contrast": "#262c36"
     }
   },
   "filePath": "src/tokens/component/overlay.json5",
@@ -44382,7 +44383,8 @@
         "scopes": ["bgColor"]
       },
       "org.primer.overrides": {
-          "dark-dimmed": "{base.color.neutral.5}"
+          "dark-dimmed": "{base.color.neutral.5}",
+          "dark-dimmed-high-contrast": "{base.color.neutral.4}"
       }
     },
     "key": "{overlay.bgColor}"

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

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark-tritanopia.json	2025-10-30 00:27:29.397322418 +0000
@@ -44365,7 +44365,8 @@
       "scopes": ["bgColor"]
     },
     "org.primer.overrides": {
-        "dark-dimmed": "#2a313c"
+        "dark-dimmed": "#2a313c",
+        "dark-dimmed-high-contrast": "#262c36"
     }
   },
   "filePath": "src/tokens/component/overlay.json5",
@@ -44380,7 +44381,8 @@
         "scopes": ["bgColor"]
       },
       "org.primer.overrides": {
-          "dark-dimmed": "{base.color.neutral.5}"
+          "dark-dimmed": "{base.color.neutral.5}",
+          "dark-dimmed-high-contrast": "{base.color.neutral.4}"
       }
     },
     "key": "{overlay.bgColor}"

/styleLint/functional/themes/dark.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark.json	2025-10-30 00:27:24.865282275 +0000
@@ -44353,7 +44353,8 @@
       "scopes": ["bgColor"]
     },
     "org.primer.overrides": {
-        "dark-dimmed": "#2a313c"
+        "dark-dimmed": "#2a313c",
+        "dark-dimmed-high-contrast": "#262c36"
     }
   },
   "filePath": "src/tokens/component/overlay.json5",
@@ -44368,7 +44369,8 @@
         "scopes": ["bgColor"]
       },
       "org.primer.overrides": {
-          "dark-dimmed": "{base.color.neutral.5}"
+          "dark-dimmed": "{base.color.neutral.5}",
+          "dark-dimmed-high-contrast": "{base.color.neutral.4}"
       }
     },
     "key": "{overlay.bgColor}"

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

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/light-colorblind-high-contrast.json	2025-10-30 00:27:21.810253992 +0000
@@ -44333,7 +44333,8 @@
       "scopes": ["bgColor"]
     },
     "org.primer.overrides": {
-        "dark-dimmed": "#dae0e7"
+        "dark-dimmed": "#dae0e7",
+        "dark-dimmed-high-contrast": "#e0e6eb"
     }
   },
   "filePath": "src/tokens/component/overlay.json5",
@@ -44348,7 +44349,8 @@
         "scopes": ["bgColor"]
       },
       "org.primer.overrides": {
-          "dark-dimmed": "{base.color.neutral.5}"
+          "dark-dimmed": "{base.color.neutral.5}",
+          "dark-dimmed-high-contrast": "{base.color.neutral.4}"
       }
     },
     "key": "{overlay.bgColor}"

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

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/light-colorblind.json	2025-10-30 00:27:20.292240752 +0000
@@ -44331,7 +44331,8 @@
       "scopes": ["bgColor"]
     },
     "org.primer.overrides": {
-        "dark-dimmed": "#dae0e7"
+        "dark-dimmed": "#dae0e7",
+        "dark-dimmed-high-contrast": "#e0e6eb"
     }
   },
   "filePath": "src/tokens/component/overlay.json5",
@@ -44346,7 +44347,8 @@
         "scopes": ["bgColor"]
       },
       "org.primer.overrides": {
-          "dark-dimmed": "{base.color.neutral.5}"
+          "dark-dimmed": "{base.color.neutral.5}",
+          "dark-dimmed-high-contrast": "{base.color.neutral.4}"
       }
     },
     "key": "{overlay.bgColor}"

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

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/light-high-contrast.json	2025-10-30 00:27:23.401268721 +0000
@@ -44327,7 +44327,8 @@
       "scopes": ["bgColor"]
     },
     "org.primer.overrides": {
-        "dark-dimmed": "#dae0e7"
+        "dark-dimmed": "#dae0e7",
+        "dark-dimmed-high-contrast": "#e0e6eb"
     }
   },
   "filePath": "src/tokens/component/overlay.json5",
@@ -44342,7 +44343,8 @@
         "scopes": ["bgColor"]
       },
       "org.primer.overrides": {
-          "dark-dimmed": "{base.color.neutral.5}"
+          "dark-dimmed": "{base.color.neutral.5}",
+          "dark-dimmed-high-contrast": "{base.color.neutral.4}"
       }
     },
     "key": "{overlay.bgColor}"

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

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json	2025-10-30 00:27:18.556229762 +0000
@@ -44333,7 +44333,8 @@
       "scopes": ["bgColor"]
     },
     "org.primer.overrides": {
-        "dark-dimmed": "#dae0e7"
+        "dark-dimmed": "#dae0e7",
+        "dark-dimmed-high-contrast": "#e0e6eb"
     }
   },
   "filePath": "src/tokens/component/overlay.json5",
@@ -44348,7 +44349,8 @@
         "scopes": ["bgColor"]
       },
       "org.primer.overrides": {
-          "dark-dimmed": "{base.color.neutral.5}"
+          "dark-dimmed": "{base.color.neutral.5}",
+          "dark-dimmed-high-contrast": "{base.color.neutral.4}"
       }
     },
     "key": "{overlay.bgColor}"

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

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/light-tritanopia.json	2025-10-30 00:27:17.010217693 +0000
@@ -44331,7 +44331,8 @@
       "scopes": ["bgColor"]
     },
     "org.primer.overrides": {
-        "dark-dimmed": "#dae0e7"
+        "dark-dimmed": "#dae0e7",
+        "dark-dimmed-high-contrast": "#e0e6eb"
     }
   },
   "filePath": "src/tokens/component/overlay.json5",
@@ -44346,7 +44347,8 @@
         "scopes": ["bgColor"]
       },
       "org.primer.overrides": {
-          "dark-dimmed": "{base.color.neutral.5}"
+          "dark-dimmed": "{base.color.neutral.5}",
+          "dark-dimmed-high-contrast": "{base.color.neutral.4}"
       }
     },
     "key": "{overlay.bgColor}"

/styleLint/functional/themes/light.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/light.json	2025-10-30 00:27:15.280199087 +0000
@@ -44325,7 +44325,8 @@
       "scopes": ["bgColor"]
     },
     "org.primer.overrides": {
-        "dark-dimmed": "#dae0e7"
+        "dark-dimmed": "#dae0e7",
+        "dark-dimmed-high-contrast": "#e0e6eb"
     }
   },
   "filePath": "src/tokens/component/overlay.json5",
@@ -44340,7 +44341,8 @@
         "scopes": ["bgColor"]
       },
       "org.primer.overrides": {
-          "dark-dimmed": "{base.color.neutral.5}"
+          "dark-dimmed": "{base.color.neutral.5}",
+          "dark-dimmed-high-contrast": "{base.color.neutral.4}"
       }
     },
     "key": "{overlay.bgColor}"

@github-actions github-actions bot temporarily deployed to Preview (Storybook) October 24, 2025 17:16 Inactive
@github-actions github-actions bot temporarily deployed to Preview (Storybook) October 29, 2025 22:53 Inactive
@langermank langermank added the update snapshots Update visual regression test snapshots label Oct 29, 2025
@github-actions github-actions bot removed the update snapshots Update visual regression test snapshots label Oct 30, 2025
@primer primer bot temporarily deployed to github-pages October 30, 2025 00:28 Inactive
@github-actions github-actions bot temporarily deployed to Preview (Storybook) October 30, 2025 00:28 Inactive
@langermank langermank merged commit 394d649 into main Oct 30, 2025
27 checks passed
@langermank langermank deleted the fix-dark-dimmed-hc-overlay branch October 30, 2025 16:19
@primer primer bot mentioned this pull request Oct 30, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

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

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