search

radix-ui / colors

A gorgeous, accessible color system.
https://www.radix-ui.com/colors
MIT License
1.38k stars 62 forks source link

How to specify color shade? #39

Open nemanjam opened 11 months ago

nemanjam commented 11 months ago

I can't just pass a number 1-12 after color name?

<Text color="gray-5">Count: {1000}</Text>

I must use inline styles, so Theme components are limited to a single shade if using color prop?

https://www.radix-ui.com/colors/docs/overview/usage

<Text style={{ color: 'var(--gray-8)' }}>Count: {1000}</Text>
Divyansh0108 commented 10 months ago

To specify a color shade using the Radix UI color system, you can use the var(--color-name-N) syntax, where "color-name" is the base color name, and "N" is a number between 1 and 12 representing the shade.

<Text style={{ color: 'var(--gray-5)' }}>Count: {1000}</Text>