Colors

The application uses a LiftKit-inspired color system with CSS custom properties. The default theme is light, with dark theme colors defined as alternatives.

Light Theme Colors (LKV)

Brand Colors

--color-light-primary-lkv

var(--color-light-primary-lkv)

--color-light-onprimary-lkv

var(--color-light-onprimary-lkv) (Text Color)

--color-light-primary-container-lkv

var(--color-light-primary-container-lkv) (Text Color)

--color-light-onprimary-container-lkv

var(--color-light-onprimary-container-lkv) (Text Color)

--color-light-secondary-lkv

var(--color-light-secondary-lkv) (Text Color)

--color-light-onsecondary-lkv

var(--color-light-onsecondary-lkv) (Text Color)

--color-light-tertiary-lkv

var(--color-light-tertiary-lkv)

--color-light-ontertiary-lkv

var(--color-light-ontertiary-lkv) (Text Color)

Semantic Colors

--color-light-error-lkv

var(--color-light-error-lkv)

--color-light-onerror-lkv

var(--color-light-onerror-lkv) (Text Color)

--color-light-warning-lkv

var(--color-light-warning-lkv)

--color-light-onwarning-lkv

var(--color-light-onwarning-lkv) (Text Color)

--color-light-success-lkv

var(--color-light-success-lkv)

--color-light-onsuccess-lkv

var(--color-light-onsuccess-lkv) (Text Color)

--color-light-info-lkv

var(--color-light-info-lkv)

--color-light-oninfo-lkv

var(--color-light-oninfo-lkv) (Text Color)

Surface Colors

--color-light-background-lkv

var(--color-light-background-lkv)

--color-light-onbackground-lkv

var(--color-light-onbackground-lkv) (Text Color)

--color-light-surface-lkv

var(--color-light-surface-lkv)

--color-light-onsurface-lkv

var(--color-light-onsurface-lkv) (Text Color)

--color-light-surface-container-lkv

var(--color-light-surface-container-lkv) (Text Color)

--color-light-outline-lkv

var(--color-light-outline-lkv)

Dark Theme Colors (LKV)

Brand Colors

--color-dark-primary-lkv

var(--color-dark-primary-lkv)

--color-dark-onprimary-lkv

var(--color-dark-onprimary-lkv) (Text Color)

--color-dark-primary-container-lkv

var(--color-dark-primary-container-lkv) (Text Color)

--color-dark-onprimary-container-lkv

var(--color-dark-onprimary-container-lkv) (Text Color)

--color-dark-secondary-lkv

var(--color-dark-secondary-lkv) (Text Color)

--color-dark-onsecondary-lkv

var(--color-dark-onsecondary-lkv) (Text Color)

--color-dark-tertiary-lkv

var(--color-dark-tertiary-lkv)

--color-dark-ontertiary-lkv

var(--color-dark-ontertiary-lkv) (Text Color)

Semantic Colors

--color-dark-error-lkv

var(--color-dark-error-lkv)

--color-dark-onerror-lkv

var(--color-dark-onerror-lkv) (Text Color)

--color-dark-warning-lkv

var(--color-dark-warning-lkv)

--color-dark-onwarning-lkv

var(--color-dark-onwarning-lkv) (Text Color)

--color-dark-success-lkv

var(--color-dark-success-lkv)

--color-dark-onsuccess-lkv

var(--color-dark-onsuccess-lkv) (Text Color)

--color-dark-info-lkv

var(--color-dark-info-lkv)

--color-dark-oninfo-lkv

var(--color-dark-oninfo-lkv) (Text Color)

Surface Colors

--color-dark-surface-lkv

var(--color-dark-surface-lkv)

--color-dark-onsurface-lkv

var(--color-dark-onsurface-lkv) (Text Color)

--color-dark-onsurface-lkv-muted

var(--color-dark-onsurface-lkv-muted) (Text Color)

--color-dark-background-lkv

var(--color-dark-background-lkv)

--color-dark-onbackground-lkv

var(--color-dark-onbackground-lkv) (Text Color)

--color-dark-surface-container-lkv

var(--color-dark-surface-container-lkv) (Text Color)

--color-dark-surface-container-low-lkv

var(--color-dark-surface-container-low-lkv) (Text Color)

--color-dark-surface-container-high-lkv

var(--color-dark-surface-container-high-lkv) (Text Color)

--color-dark-outline-lkv

var(--color-dark-outline-lkv)

--color-dark-outline-variant-lkv

var(--color-dark-outline-variant-lkv)

Usage Guidelines

Primary colors are used for main actions, key UI elements, and brand expression.

Surface colors define the background hierarchy and container relationships.

Semantic colors communicate status, feedback, and system states.

"On" colors are specifically designed for text and icons that appear on their corresponding surface colors.