Tokens: Adding Theme VR Web/Semantic Tokens #3559
Closed
Conversation
This file contains 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
rlingineni
commented
May 9, 2024
| ['light', 'dark'].forEach((mode) => { | ||
| if (theme === 'main-theme') { | ||
| if (theme !== 'vrweb-theme') { |
There was a problem hiding this comment.
generates all the themes, except vrweb-theme
✅ Deploy Preview for gestalt ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
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 PR adds a set of tokens under each theme.
The outputs are non-breaking, but a few things have been re-organized.
main-themeto aclassicfolderalias-dark/lightModefiles have been renamed tosema-light/darkMode(this is just a file name change)vrweb/variable.cssinstead ofvrweb_variables.css). Classic will still output directly, so nothing should breakThings to note in the VR Theme:
Base and Semantic Token Clashes
Data-Visualizationnaming is used in both base and semantic token (this causes a clash). Maybe we should just define these at the semantic level. So the semantic tokens are renamed todata-vizto avoid this.Missing Line Heights
Line Heights have not been added to the font tokens. There are some pending comments.
Rounding Circle Clash
rounding-circlesimilar to data-viz tokens is both a base and sema token. So ideally, the base token would be named differently.Elevations values are incorrect
This was a direct copy from the spread-sheet, but the values for Elevation may be incorrect and may have to be updated. The names should be as expected.
We may need to format like this to make elevation values more cross platform compatible.
Missing Negative spacing values
Once negative spacing values are added, they will have to be added to the VR themes
Next steps to figure out:
How to prefix a token with Base, Sema, Comp.. (each token set is already in a file called
sema.jsonorbase.json). I think we can do it with a transformGroup.Any missing component token stuff as needed
Double check the expected values are correct (e.g elevation values)
Links
Checklist