feat(theme): add option to use css variables #4264
Merged
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
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
|
🦋 Changeset detectedLatest commit: 1cd640e The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
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 |
dosubot
bot
added
the
size:L
github-actions
bot
added
Type: Documentation
|
View your CI Pipeline Execution ↗ for commit 1cd640e.
☁️ Nx Cloud last updated this comment at |
Paste
|
||||||||||||||||||||||||||||
| Project |
Paste
|
| Branch Review |
add-css-vars-to-theme-proivder
|
| Run status |
|
| Run duration | 04m 46s |
| Commit |
|
| Committer | Kristian Antrobus |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
0
|
Pending
|
0
|
Skipped
|
0
|
Passing
|
67
|
| View all changes introduced in this branch ↗︎ | |
|
Size Change: +295 B (0%) Total Size: 1.12 MB
ℹ️ View Unchanged
|
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 1cd640e:
|
krisantrobus
added
🚀 merge it!
🕵🏻♀️ Run website visual regression
Paste
|
||||||||||||||||||||||||||||
| Project |
Paste
|
| Branch Review |
add-css-vars-to-theme-proivder
|
| Run status |
|
| Run duration | 06m 49s |
| Commit |
|
| Committer | krisantrobus |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
|
Failures
|
0
|
|
Flaky
|
0
|
|
Pending
|
0
|
|
Skipped
|
0
|
|
Passing
|
125
|
| View all changes introduced in this branch ↗︎ | |
PixeledCode
reviewed
Mar 11, 2025
| const convertToCSSVariables = ( | ||
| tokens: GenerateThemeFromTokensArgs | object, | ||
| ): Partial<Record<keyof GenerateThemeFromTokensArgs, string | object>> => { | ||
| const cssVariables: Partial<Record<keyof GenerateThemeFromTokensArgs, string | object>> = {}; |
PixeledCode
previously approved these changes
Mar 11, 2025
nkrantz
reviewed
Mar 12, 2025
nkrantz
reviewed
Mar 12, 2025
| "@twilio-paste/design-tokens": minor | ||
| --- | ||
|
|
||
| [Design Tokens] added a new build script to generate a CSS file that applies variables for individual themes using the body[data-theme] attribute. |
There was a problem hiding this comment.
question: does the gulp task require a changeset?
There was a problem hiding this comment.
It didn't kick one off but I think it would be good to include a changeset for this, something we should be communicating I feel.
nkrantz
previously approved these changes
Mar 12, 2025
Co-authored-by: Nora Krantz <[email protected]>
PixeledCode
approved these changes
Mar 13, 2025
nkrantz
approved these changes
Mar 13, 2025
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 pull request introduces several changes to the
@twilio-pastepackages, focusing on adding support for CSS variables and enhancing theme management. The key updates include a new build script for generating CSS files with theme variables, modifications to thegulpfile.tsto support the new build process, and updates to the theme provider to handle CSS variables.Key Changes:
Theme Management Enhancements:
New Build Script for CSS Variables:
tokens:data-themetask ingulpfile.tsto handle the transformation and renaming of theme tokens. (packages/paste-design-tokens/gulpfile.ts) [1] [2]CSS Variables Theme Support:
CSSVariablesThemeinpackages/paste-theme/src/themes/css-variables/index.tsto convert tokens to CSS variables and generate a theme.ThemeProviderto support a new propuseCSSVariablesfor applying CSS variables theme. (packages/paste-theme/src/themeProvider.tsx) [1] [2] [3] [4] [5]Testing and Documentation:
packages/paste-theme/__tests__/__snapshots__/themes.spec.ts.snap,packages/paste-theme/__tests__/themes.spec.ts) [1] [2] [3]