feat: Add property for preserving css variables in token resolution #128
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
jkuelz
changed the title
jkuelz
changed the title
jkuelz
force-pushed
the
jkuelz-preserve-css-vars
branch
from
8768a62 to
d1b1682
Compare
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #128 +/- ##
==========================================
+ Coverage 97.43% 98.49% +1.05%
==========================================
Files 45 46 +1
Lines 2186 2326 +140
Branches 417 451 +34
==========================================
+ Hits 2130 2291 +161
+ Misses 56 35 -21 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
jkuelz
force-pushed
the
jkuelz-preserve-css-vars
branch
from
d1b1682 to
7890c73
Compare
jkuelz
requested review from
a team,
Harsh-Anand-Singh and
avinashbot
and removed request for
a team and
Harsh-Anand-Singh
avinashbot
reviewed
Nov 6, 2025
src/shared/theme/utils.ts
Outdated
| return defaults; | ||
| } | ||
|
|
||
| export function generateReferenceTokenName(colorName: string, step: string): string { |
Member
There was a problem hiding this comment.
Perhaps generateReferenceColorTokenName? Or have an argument specifically for "type"? Your tech doc seems to allow for other kinds of reference tokens like border radiuses or spacing, but this PR assumes only color in this file.
Member
Author
There was a problem hiding this comment.
You're right on both parts. It will eventually support more than color, but this PR only focuses on adding color. I made them more generic though since we'd have to do that eventually anyway.
avinashbot
approved these changes
Nov 7, 2025
jkuelz
added a commit
that referenced
this pull request
Dec 3, 2025
feat: Add property for preserving css variables in token resolution chore: Enable useCssVars for testing chore: Add useCssVars support to runtime theming refactor: Make reference helpers more generic than just colors for future
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 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.
Description of changes:
Adds a property to the internal theme builder that uses CSS variables instead of resolved values for better runtime theme swapping. This is part 2 of a series for theming improvements.
In an attempt to not generate duplicated CSS, the current theming setup only overrides tokens that have a different resolved value. That works ok for now, where you can only theme a handful of tokens. But with the introduction of reference tokens, essentially every token can be themed (300+), and would have a different resolved value. Rather than regenerating all 300+ tokens for the wholistic theming that reference tokens provide, this flag makes it so that only the reference tokens (~30) need to be sent, and the rest can be cascade via native CSS variable inheritance.
Next up:
Previous improvements:
[ac9YAbqsd7e6]
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.