Add new token for dashboard background #1261
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: fcaee36 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
langermank
temporarily deployed
to
github-pages
GitHub Actions
Inactive
Contributor
Design Token Diff (CSS)
|
Contributor
Design Token Diff (StyleLint)
|
Contributor
Design Token Diff (Figma)
|
langermank
temporarily deployed
to
github-pages
GitHub Actions
Inactive
Add a new token to the @primer/primitives package.
langermank
temporarily deployed
to
github-pages
GitHub Actions
Inactive
github-actions
bot
removed
the
update snapshots
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR adds a new design token for the dashboard background color to address custom CSS issues in dark themes. The token provides a cleaner, token-based approach for handling the dashboard feed background color across different theme variants.
- Introduces a new
dashboard.bgColortoken with theme-specific overrides - Uses
bgColor.defaultfor light themes andbgColor.insetfor all dark theme variants - Includes proper Primer extensions configuration for Figma integration
Reviewed Changes
Copilot reviewed 2 out of 14 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/tokens/component/dashboard.json5 | Defines the new dashboard background color token with theme overrides |
| .changeset/moody-kings-nail.md | Documents the token addition as a patch-level change |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| "@primer/primitives": patch | ||
| --- | ||
|
|
||
| add token |
There was a problem hiding this comment.
The changeset description is too brief. It should explain what token was added and its purpose, e.g., 'Add dashboard.bgColor token for dashboard background theming'.
Suggested change
| add token | |
| Add <token.name> token for <purpose of token> |
Comment on lines
+16
to
+30
| 'dark-dimmed': { | ||
| $value: '{bgColor.inset}', | ||
| }, | ||
| 'dark-dimmed-high-contrast': { | ||
| $value: '{bgColor.inset}', | ||
| }, | ||
| 'dark-high-contrast': { | ||
| $value: '{bgColor.inset}', | ||
| }, | ||
| 'dark-protanopia-deuteranopia-high-contrast': { | ||
| $value: '{bgColor.inset}', | ||
| }, | ||
| 'dark-tritanopia-high-contrast': { | ||
| $value: '{bgColor.inset}', | ||
| }, |
There was a problem hiding this comment.
All dark theme variants use the same value '{bgColor.inset}'. Consider defining a single dark theme override and letting other variants inherit from it to reduce duplication.
Suggested change
| 'dark-dimmed': { | |
| $value: '{bgColor.inset}', | |
| }, | |
| 'dark-dimmed-high-contrast': { | |
| $value: '{bgColor.inset}', | |
| }, | |
| 'dark-high-contrast': { | |
| $value: '{bgColor.inset}', | |
| }, | |
| 'dark-protanopia-deuteranopia-high-contrast': { | |
| $value: '{bgColor.inset}', | |
| }, | |
| 'dark-tritanopia-high-contrast': { | |
| $value: '{bgColor.inset}', | |
| }, |
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This is a bit of a special snowflake, but the dashboard currently sets custom CSS to change the feed background color for dark themes. It's a bit broken and would be easier to do at the token level, so I'm adding a pattern level token for it.
Closes https://github.com/github/primer/issues/5978