Design Tokens

This page lists all the standard CSS variables (Design Tokens) available in KatluxToolkit. These variables should be implemented in your preset's `css-variables.scss` file.

Primary Colors

--primary-100

Lightest primary shade

--primary-300

Light primary shade

--primary-500

Main primary color

--primary-700

Dark primary shade

--primary-900

Darkest primary shade

Accent Colors

--accent-100

Lightest accent shade

--accent-500

Main accent color

--accent-900

Darkest accent shade

Neutral Colors

--neutral-50

Near-white neutral

--neutral-300

Light neutral

--neutral-500

Mid neutral

--neutral-700

Dark neutral

--neutral-900

Near-black neutral

Semantic Colors

--success-color

Status: Success

--warning-color

Status: Warning

--error-color

Status: Error

--info-color

Status: Info

Typography

--font-family

Primary font stack

--font-size-sm

Small text (12px default)

--font-size-md

Body text (14px default)

--font-size-lg

Subtitle text (16px default)

--font-size-xl

Heading text (18px default)

Layout & Spacing

--layout-header-height

Global header height

--layout-sidebar-width

Sidebar menu width

--gap-sm

Small component gap

--gap-md

Standard grid gap

Borders & Shadows

--border-radius-sm

Small radius for inputs

--border-radius-md

Standard radius for cards

--shadow-md

Standard elevation shadow

Inputs

--input-border

Standard input border

--input-border-radius

Input corner rounding

--input-focus-border-color

Border color on focus

--input-button-bg

Background for input-like buttons

Tables

--table-header-bg

Header background

--table-border-color

Row separator color

--table-row-hover

Background on hover

Checkboxes

--checkbox-bg

Unchecked background

--checkbox-checked-bg

Checked background

--checkbox-border-color

Border color