Gradient Color Specimen

[janwaechter]

It would be great, if the Color Specimen would be extended to also support the display and specification of simple color gradients. For example:

Ideally, the label can also be displayed within the color swatch — similarly to how it's currently implemented in the Color Palette specimen.

The following props could be added to support customizing the gradient:

Style

• Linear
• Radial

Direction

• Top
• Top right
• Right
• Bottom right
• Bottom
• Bottom left
• Left
• Top left

Colors

• Color 1
• Color 2

[bldng]

Thanks for the input!

I just checked, for swatches something like

span: 2
name: "Gradient name"
value: "linear-gradient(to bottom, #da22ff, rebeccapurple)"

seems to work fine because the string is passed directly. For color-palette it fails, because there is some contrast calculation for the label going on. Which leads to the question how this should work / look like with an inline label to ensure legibility.

If the swatch would be sufficient, it is only a matter of documentation. If not, it gets a bit complicated because then I think we should introduce something that handles svg gradients and patterns nicely.

[dlewand691]

Agree, would be great to have available in color-palette as well.

[craigwoollard]

As a work around, I used the HTML specimen to show the gradient.