Skip to content

Colors

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

Common

--color-primary#3b82f6color.blue.500
--color-light#fffcolor.white
--color-dark#171717color.neutral.900

Base

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

You can easily change accent color of any UI component. Because components in Winduum use --color-accent property as their color, rather than --color-primary.

So you still use primary color when needed and change accent only for elements you want.

Accent color consist of two css properties:

  • --color-accent - color of the accent
  • --color-accent-foreground - foreground color of the accent
html
<div class="accent-error">
    <button class="ui-btn">Button</button>
    <button class="ui-btn rounded-full">Button</button>
</div>

Released under the MIT License.