Component color changes not re-rendering

[latent thunder]

I'm trying to control the color of a <Text> component via state. This works for the initial render, but changes to the state are not triggering a color change. My color state is set up pretty simply:

const [color, setColor] = useState<string>("gray-5")

A useEffect is triggering based on data changes, and is calling setColor with new values. I've confirmed via console logs that the value of color is actually changing as a result, but passing the value to the <Text> component doesn't actually change the rendered color:

<Text c={color}>text here</Text>

Only if I manually refresh the page does the new color render.

[high panther]

gray-5 is not valid color value

[latent thunder]

I could've sworn that I saw in some example code somewhere that using syntax like gray-5 for the c property was the equivalent of the Mantine CSS variable var(--mantine-color-gray-5). Of course now that I’m searching for it, I can't find it. However, after more searching I think I found my point of confusion. If I use gray.5 instead, that works.

[latent thunder]

By the way, where's the page in the docs that shows examples of all available colors? Every so often I stumble across it, but when searching for it just now, I couldn't find it. I know that the main page about color in Mantine references open-color and links to it, but I know I've seen a page in the Mangine docs that also shows them.

[high panther]

The page is called "Colors", you can easily find it with search

[latent thunder]

Drat. I thought that I'd checked that page, but I didn't scroll alllllll the way to the bottom. My bad.