Improve gradient documentation (bgGradient, gradientViaPosition...)

[topkat]

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

[astahmer]

you could also use the string token fn (or curly braces just like in semanticTokens), mostly useful for these cases (composite values)

css({ 
  border: `linear-gradient(350deg, {colors.neutral.7} 0%, {colors.primary.9} 21%, black)` 
})

[topkat]

Oh, yes @astahmer this was a real life saver! Thank you, not sure why but it wasn't obvious for me, nor intuitive.

I had looked also in https://panda-css.com/docs/guides/dynamic-styling maybe this pattern should appear in the end section #what-you-can-do ?

I guess seing this pattern also appearing on the gradient documentation can be good since this is one of the main use case for it.

[astahmer]

makes sense, would you like to send a PR for that ?

[topkat]

Yes sure, I'll try to do it when possible ;)