[Feature]: chats accept hexadecimal colors too on colors prop

[grsantos2215]

What problem does this feature solve?

I have one array with more categories than colors and this return error to me when i trying to render Scatter Chart on my application, to get around it I create a function to create x hexadecimal colors based on size of my array, this resolve the problem to me, but create another, all colors is transformed on gray or undefined

What does the proposed API look like?

To resolve that, I propose to colors array accept string, as it is today and hexadecimal, enabling a wider range of colors

[severinlandolt]

Hey there! This might be interesting for you: https://www.tremor.so/docs/getting-started/theming#custom-charts-colors

Let me know if that helped, thanks!

[grsantos2215]

...[/^[(?:"[#0-9a-fA-F]{7}",?)*"[#0-9a-fA-F]{7}"]$/].flatMap((customColor: any) => [bg-${customColor}, border-${customColor}, hover:bg-${customColor}, hover:border-${customColor}, hover:text-${customColor}, !fill-${customColor}, ring-${customColor}, !stroke-${customColor}, text-${customColor}, ui-selected:bg-${customColor}, ui-selected:border-${customColor}, ui-selected:text-${customColor}]),

I can do something like this?

[severinlandolt]

Phuu, have you tried? 🤔 Looks ok-ish too me, but hard to predict, let me know if it works :)

[grsantos2215]

I tried, but not works. I changed the Regex to this: /^!\w+-\[#(?:[a-fA-F0-9]{6}|[a-fA-F0-9]{3})\]$/, but I think he expects a class or color with this informations ☹️.

I tried too, to change fill pattern, including this Regex on the middle of the original Regex, but doesn't work too.

/^(fill-(?:\[(#[a-fA-F0-9]{6}|#[a-fA-F0-9]{3})\]|(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950)))$/

[severinlandolt]

Alright, had a look at it as well. You have to use it like mentinoned on our website. You can pass hex values, but you have to add them to the safelist, no short cut possible.

[grsantos2215]

Oh, ok ☹️. Thanks.

This issue will be a future feature on Tremor?

I really like this project

[severinlandolt]

Currently this is not a priority, sorry! But we are working on a new set of charts, which will be copy and paste. There you have much more control over the styles/colors you will be passing. We haven't released the charts yet, but you can take a look here: https://raw.tremor.so/

[alexburner]

I just wanted to second this, trying to use d3-interpolate to generate my colors and ran into the same wall. Will Tremor Raw be the only path for fine-grained color control in the future, or will this be added to the Tremor component lib as well?