Colors
There are few types of colors with various areas of use. Colors are defined in Theme.
Common
--color-primary
#3b82f6
color.blue.500
--color-light
#fff
color.white
--color-dark
#171717
color.neutral.900
Main
--color-main
#171717
color.neutral.900
--color-main-primary
#171717
color.neutral.900
--color-main-secondary
75% of --color-main
--color-main-tertiary
50% of --color-main
Body
--color-body
--color-body-primary
--color-body-secondary
75% of --color-body
--color-body-tertiary
50% of --color-body
State
--color-success
#16a34a
color.green.600
--color-error
#dc2626
color.red.600
--color-warning
#eab308
color.yellow.500
--color-info
#0ea5e9
color.sky.500
Foreground
Each color has also it's foreground variant with -foreground
postfix. So you can use foreground colors when needed, eg. --color-primary-foreground
.
Accent
The idea is that you should be able to set accent color via accent-color
CSS property. It is discussed that you should have access to the color value of this property, e.g. via AccentColor
or AccentColorText
.
Most of the components are using this idea via --color-accent
and --color-accent-foreground
as an alternative for their accent color.
html
<div class="accent-error">
<button class="x-button">Button</button>
<button class="x-button rounded-full">Button</button>
</div>
For example, this way you don't have to change background-color property for each component color variant, you just change the accent color.