Improve gradient documentation (bgGradient, gradientViaPosition...)

[top-kat]

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