Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

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

Improve gradient documentation (bgGradient, gradientViaPosition...) #2613

Closed
top-kat opened this issue May 20, 2024 · 0 comments
Closed

Improve gradient documentation (bgGradient, gradientViaPosition...) #2613

top-kat opened this issue May 20, 2024 · 0 comments

Comments

@top-kat
Copy link

top-kat commented May 20, 2024

Subject

Gradients

Description

I have very hard times doing a simple gradient. Here is my css equivalent:

const style = {
  backgroundImage: `linear-gradient(350deg,${palette.neutral[7]} 0%, ${palette.primary[9]} 21%, black)`,
}

What I tried with panda so far:

const pandaStyle = {
  bgGradient: '350deg', // doesn't work
  gradientFrom: 'p.7',
  gradientVia: 'p.9', // discovered by intuition / autocomplete, not referenced in the doc, what if we need more than 3 stops ?
  gradientViaPosition: '30%',
  gradientTo: 'black',
}

The overall background gradient feature may gain a lot to be better documented.

I also saw that you can add gradients in the panda config, but I am less interrested in that since I am actually using this gradient in just one component.

Thanks a lot for all that great work

@chakra-ui chakra-ui locked and limited conversation to collaborators May 20, 2024
@segunadebayo segunadebayo converted this issue into discussion #2614 May 20, 2024

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant