Theme:

Theme Colors

Complete color palette with automatic light/dark theme support

Semantic Colors

Primary

Main brand color, primary actions

var(--color-primary)

Hover (90% + 10% black):

Secondary

Supporting actions, secondary buttons

var(--color-secondary)

Hover (90% + 10% black):

Success

Success states, positive feedback

var(--color-success)

Hover (90% + 10% black):

Warning

Warning states, caution messages

var(--color-warning)

Hover (90% + 10% black):

Danger

Error states, destructive actions

var(--color-danger)

Hover (90% + 10% black):

Info

Informational messages, tips

var(--color-info)

Hover (90% + 10% black):

System Colors

Background

Main page background

var(--color-background)

Page Text

Primary text color

var(--color-text)

Color Combinations

Button Variants

Alert Messages

Success Message

This is a success message with green accent.

Warning Message

This is a warning message with amber accent.

Error Message

This is an error message with red accent.

Info Message

This is an informational message with blue accent.

CSS Variables Reference

Use these CSS variables in your components:

Semantic Colors:

var(--color-primary)
var(--color-secondary)
var(--color-success)
var(--color-warning)
var(--color-danger)
var(--color-info)

System Colors:

var(--color-background)
var(--color-text)

Hover Colors (calculated automatically):

color-mix(in srgb, var(--color-primary) 90%, black)