Meter Grommet component doesn't accept linear gradient as color value

[japebo]

Expected Behavior

Meter component should accept linear gradient as color value.

Actual Behavior

Meter component is not accepting linear gradient as color value.

Your Environment

• Grommet version: 2.21.0
• Browser Name and version: Chrome Version 108.0.5359.124 (Official Build) (arm64)
• Operating System and version (desktop or mobile): MacOS Monterey v12.3.1

[ericsoderberghp]

Can you provide an example of how you are wanting to pass the gradient and a visual example of what the design intent is? In other words, what information is the gradient intended to convey?

[japebo]

Can you provide an example of how you are wanting to pass the gradient and a visual example of what the design intent is? In other words, what information is the gradient intended to convey?

Sure, and thanks for the fast reply.

The above image shows the desired result. I have tried to pass a color like this 'linear-gradient(90deg, #0ABB4F 0%, #62E38E 100%)' (Note that it is of type string) to the values Meter prop, but in vain.

[ericsoderberghp]

From this, it appears that the gradient might be purely decorative, that it doesn't convey any particular meaning in itself. Is that right?

[japebo]

From this, it appears that the gradient might be purely decorative, that it doesn't convey any particular meaning in itself. Is that right?

Yes, merely decorative.

[ericsoderberghp]

Since the Meter is rendered via SVG, I'm wondering if and how the desired design can be achieved. SVG gradients appear to be primarily oriented based on the entire graphic and then the stroke or fill acts as a mask to reveal the portions of the gradient where the stroke or fill would be. I don't think the desired graphic can be represented by a linear or radial gradient. But, perhaps I am missing something.

[jcfilben]

Closing due to inactivity but feel free to re-open if you would like to continue discussion on this.