feat(react-tokens): add dark theme token values #12025
Open
+101
−20
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
Member
|
Seeing some build errors here: |
logonoff
force-pushed
the
11803-dark-theme-tokens
branch
from
4d56fec to
733ca08
Compare
Collaborator
|
Preview: https://pf-react-pr-12025.surge.sh A11y report: https://pf-react-pr-12025-a11y.surge.sh |
Closes patternfly#11803 Enhanced the @patternfly/react-tokens package to include dark theme values in semantic token definitions, making it easier for developers to access both light and dark theme values programmatically. Changes: - Added getDarkThemeDeclarations() to extract dark theme CSS rules - Added getDarkLocalVarsMap() to build dark theme variable mappings - Updated token generation to include darkValue and darkValues properties - Enhanced variable resolution to support dark theme context - Updated legacy token support to include dark values Result: - 1,998 tokens now include dark theme values - Tokens with dark overrides expose darkValue property - Backward compatible with existing code - Enables programmatic theme switching and consistency Implements: patternfly#11803 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
logonoff
force-pushed
the
11803-dark-theme-tokens
branch
from
733ca08 to
9cb59a1
Compare
rebeccaalpert
requested review from
a team,
dlabaj and
nicolethoen
and removed request for
a team
nicolethoen
reviewed
Dec 11, 2025
Contributor
There was a problem hiding this comment.
Thank you for this PR! I looked a bit closer into the implementation and token generation and tested it locally.
When i ran it locally to generate the tokens, i'm only seeing 476 tokens have dark values. I think it should be many more than that.
It's currently only extracting dark values for tokens explicitly overridden in dark theme CSS blocks, but does not resolve dark values through the variable dependency chain.
Example:
The semantic token has a dark value:
// t_global_text_color_regular.js
{
"name": "--pf-t--global--text--color--regular",
"value": "#151515", // Light theme: dark text
"darkValue": "#ffffff" // Dark theme: white text
}
But the component token that references it does not:
// c_content.js
"c_content_Color": {
"name": "--pf-v6-c-content--Color",
"value": "#151515", // Light theme: resolved correctly
"values": [
"--pf-t--global--text--color--regular", // References token with darkValue
"--pf-t--global--text--color--100",
"--pf-t--color--gray--95",
"#151515"
]
// Missing: "darkValue": "#ffffff"
}The implementation needs to recursively resolve dark values through the dependency chain. When getVarsMap() encounters a reference to another token, it should check if that token has a dark override and propagate that through the resolution. This would make the feature significantly more useful for developers trying to programmatically access theme values.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
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.
Closes #11803
Enhanced the @patternfly/react-tokens package to include dark theme values in semantic token definitions, making it easier for developers to access both light and dark theme values programmatically.
Changes:
Result:
Implements: #11803
🤖 Generated with Claude Code