Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(styled-system): create gradients theme key #7370

Merged
merged 5 commits into from
Mar 23, 2023

Conversation

TylerAPfledderer
Copy link
Collaborator

@TylerAPfledderer TylerAPfledderer commented Feb 16, 2023

Add the gradient theme key to be able to create tokens for gradient styles.

Applies to the bgGradient, bgImg, bgImage, and backgroundImage style props.

Due to the current setup under the hood of the Background Gradient API, I do not believe it is worth the investment to make the logic work in a theme config. There are probably easier and cheaper ways to acquire the color theme tokens;

  • CSS Variables explicitly:
lightLinearGradient: 'linear-gradient(to right, var(--chakra-colors-gray-200), var(--chakra-colors-blue-500))'
  • Importing the colors object and use interpolation:
lightLinearGradient: `linear-gradient(to right, ${colors.gray.200}, ${colors.blue.500})`

@changeset-bot
Copy link

changeset-bot bot commented Feb 16, 2023

🦋 Changeset detected

Latest commit: a6e0d87

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 7 packages
Name Type
@chakra-ui/styled-system Minor
@chakra-ui/react Patch
@chakra-ui/toast Patch
@chakra-ui/system Patch
@chakra-ui/theme-utils Patch
@chakra-ui/provider Patch
@chakra-ui/test-utils Patch

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

@vercel
Copy link

vercel bot commented Feb 16, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
chakra-ui-storybook ✅ Ready (Inspect) Visit Preview Mar 19, 2023 at 3:33AM (UTC)

@TylerAPfledderer
Copy link
Collaborator Author

@segunadebayo made the updates as requested.

@segunadebayo segunadebayo merged commit c7ad1bf into main Mar 23, 2023
@segunadebayo segunadebayo deleted the feat/create-gradients-theme-key branch March 23, 2023 20:28
@github-actions github-actions bot mentioned this pull request Mar 23, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants