Colors

There are few types of colors with various areas of use. Colors are defined in Theme.

Common

--color-primary#3b82f6color.blue.500

--color-light#fffcolor.white

--color-dark#171717color.neutral.900

Main

--color-main#171717color.neutral.900

--color-main-primary#171717color.neutral.900

--color-main-secondary75% of --color-main

--color-main-tertiary50% of --color-main

Body

--color-body

--color-body-primary

--color-body-secondary75% of --color-body

--color-body-tertiary50% of --color-body

State

--color-success#16a34acolor.green.600

--color-error#dc2626color.red.600

--color-warning#eab308color.yellow.500

--color-info#0ea5e9color.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.

<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.