Design Tokens

How to Override CSS Variables

You can override any Katlux UI design token globally within a preset, or locally for a specific component instance.

1. Global Preset Override

Redefine variables under the `[data-preset="preset-name"]` selector in your preset's `assets/scss/css-variables.scss`:

SCSS

/* presets/modern/assets/scss/css-variables.scss */
[data-preset="modern"] {
  --primary-500: #8b5cf6;       // Custom primary brand color
  --border-radius-md: 12px;     // Custom card corner rounding
  --input-bg: #f1f5f9;         // Custom form field background
}

2. Component-Level Override

Scoped overrides can be applied directly to a CSS selector or component wrapper:

SCSS

/* Scoped component override */
.custom-hero-card {
  --panel-bg-default: #1e293b;
  --font-color-primary: #ffffff;
  --button-bg-primary: #ec4899;
}

Primary Colors

--primary-100

Lightest primary shade

var(--primary-100)

--primary-300

Light primary shade

var(--primary-300)

--primary-500

Main primary color

var(--primary-500)

--primary-700

Dark primary shade

var(--primary-700)

--primary-900

Darkest primary shade

var(--primary-900)

Accent Colors

--accent-100

Lightest accent shade

var(--accent-100)

--accent-300

Light accent shade

var(--accent-300)

--accent-500

Main accent color

var(--accent-500)

--accent-700

Dark accent shade

var(--accent-700)

--accent-900

Darkest accent shade

var(--accent-900)

Neutral Colors

--neutral-50

Near-white neutral

var(--neutral-50)

--neutral-100

Lightest neutral border/bg

var(--neutral-100)

--neutral-200

Light neutral background

var(--neutral-200)

--neutral-300

Light-mid neutral

var(--neutral-300)

--neutral-400

Mid neutral

var(--neutral-400)

--neutral-500

Muted neutral text/border

var(--neutral-500)

--neutral-600

Dark-mid neutral

var(--neutral-600)

--neutral-700

Dark neutral

var(--neutral-700)

--neutral-800

Darker neutral background

var(--neutral-800)

--neutral-900

Near-black neutral

var(--neutral-900)

Extended Color Palettes

--yellow-100

Yellow shade 100

var(--yellow-100)

--yellow-300

Yellow shade 300

var(--yellow-300)

--yellow-500

Yellow shade 500

var(--yellow-500)

--yellow-700

Yellow shade 700

var(--yellow-700)

--yellow-900

Yellow shade 900

var(--yellow-900)

--red-100

Red shade 100

var(--red-100)

--red-300

Red shade 300

var(--red-300)

--red-500

Red shade 500

var(--red-500)

--red-700

Red shade 700

var(--red-700)

--red-900

Red shade 900

var(--red-900)

--blue-100

Blue shade 100

var(--blue-100)

--blue-300

Blue shade 300

var(--blue-300)

--blue-500

Blue shade 500

var(--blue-500)

--blue-700

Blue shade 700

var(--blue-700)

--blue-900

Blue shade 900

var(--blue-900)

--pink-100

Pink shade 100

var(--pink-100)

--pink-300

Pink shade 300

var(--pink-300)

--pink-500

Pink shade 500

var(--pink-500)

--pink-700

Pink shade 700

var(--pink-700)

--pink-900

Pink shade 900

var(--pink-900)

--cyan-100

Cyan shade 100

var(--cyan-100)

--cyan-300

Cyan shade 300

var(--cyan-300)

--cyan-500

Cyan shade 500

var(--cyan-500)

--cyan-700

Cyan shade 700

var(--cyan-700)

--cyan-900

Cyan shade 900

var(--cyan-900)

--green-100

Green shade 100

var(--green-100)

--green-300

Green shade 300

var(--green-300)

--green-500

Green shade 500

var(--green-500)

--green-700

Green shade 700

var(--green-700)

--green-900

Green shade 900

var(--green-900)

Semantic Status Colors

--success-color

Status: Success main

var(--success-color)

--success-color-light

Status: Success light

var(--success-color-light)

--warning-color

Status: Warning main

var(--warning-color)

--warning-color-light

Status: Warning light

var(--warning-color-light)

--error-color

Status: Error main

var(--error-color)

--error-color-light

Status: Error light

var(--error-color-light)

--info-color

Status: Info main

var(--info-color)

--info-color-light

Status: Info light

var(--info-color-light)

Font & Surface Colors

--font-color-primary

Main text color

var(--font-color-primary)

--font-color-secondary

Muted text color

var(--font-color-secondary)

--font-color-heading

Title / Heading color

var(--font-color-heading)

--font-color-light

Inverse light text color

var(--font-color-light)

--background-color

App root background

var(--background-color)

--background-color-light

Light surface background

var(--background-color-light)

--background-color-medium

Medium surface background

var(--background-color-medium)

--background-color-dark

Dark surface background

var(--background-color-dark)

--border-color-light

Light border color

var(--border-color-light)

--border-color-medium

Medium border color

var(--border-color-medium)

--border-color-dark

Dark border color

var(--border-color-dark)

Typography & Spacing

--font-family

Primary font stack

var(--font-family)

--font-family-mono

Monospace font stack

var(--font-family-mono)

--font-size-xs

Extra small text size

var(--font-size-xs)

--font-size-sm

Small text size

var(--font-size-sm)

--font-size-md

Medium / Body font size

var(--font-size-md)

--font-size-lg

Large font size

var(--font-size-lg)

--font-size-xl

Extra large font size

var(--font-size-xl)

--font-weight-normal

Normal font weight

var(--font-weight-normal)

--font-weight-medium

Medium font weight

var(--font-weight-medium)

--font-weight-semibold

Semibold font weight

var(--font-weight-semibold)

--font-weight-bold

Bold font weight

var(--font-weight-bold)

--gap-sm

Small gap spacing

var(--gap-sm)

--gap-md

Medium gap spacing

var(--gap-md)

--gap-lg

Large gap spacing

var(--gap-lg)

--gap-xl

Extra large gap spacing

var(--gap-xl)

--grid-gap

Grid layout gap

var(--grid-gap)

--component-gap

Internal component gap

var(--component-gap)

Radii & Elevation Shadows

--border-radius-sm

Small border radius

var(--border-radius-sm)

--border-radius-md

Medium border radius

var(--border-radius-md)

--border-radius-lg

Large border radius

var(--border-radius-lg)

--border-radius-xl

Extra large border radius

var(--border-radius-xl)

--border-radius-full

Full circular radius

var(--border-radius-full)

--shadow-sm

Small elevation shadow

var(--shadow-sm)

--shadow-md

Medium elevation shadow

var(--shadow-md)

--shadow-lg

Large elevation shadow

var(--shadow-lg)

--shadow-xl

Extra large elevation shadow

var(--shadow-xl)

Buttons & Controls

--button-bg-default

Default button background

var(--button-bg-default)

--button-text-default

Default button text

var(--button-text-default)

--button-hover-bg-default

Default button hover background

var(--button-hover-bg-default)

--button-bg-primary

Primary button background

var(--button-bg-primary)

--button-text-primary

Primary button text

var(--button-text-primary)

--button-hover-bg-primary

Primary button hover background

var(--button-hover-bg-primary)

--button-bg-success

Success button background

var(--button-bg-success)

--button-text-success

Success button text

var(--button-text-success)

--button-bg-warning

Warning button background

var(--button-bg-warning)

--button-text-warning

Warning button text

var(--button-text-warning)

--button-bg-danger

Danger button background

var(--button-bg-danger)

--button-text-danger

Danger button text

var(--button-text-danger)

--button-bg-info

Info button background

var(--button-bg-info)

--button-text-info

Info button text

var(--button-text-info)

--button-bg-light

Light button background

var(--button-bg-light)

--button-text-light

Light button text

var(--button-text-light)

--button-bg-dark

Dark button background

var(--button-bg-dark)

--button-text-dark

Dark button text

var(--button-text-dark)

Panels & Modals

--panel-bg-default

Default panel container bg

var(--panel-bg-default)

--panel-header-bg-default

Default panel header bg

var(--panel-header-bg-default)

--panel-footer-bg-default

Default panel footer bg

var(--panel-footer-bg-default)

--panel-bg-primary

Primary panel bg

var(--panel-bg-primary)

--panel-bg-success

Success panel bg

var(--panel-bg-success)

--panel-bg-warning

Warning panel bg

var(--panel-bg-warning)

--panel-bg-danger

Danger panel bg

var(--panel-bg-danger)

--panel-bg-info

Info panel bg

var(--panel-bg-info)

--modal-overlay-bg

Modal backdrop overlay bg

var(--modal-overlay-bg)

Inputs & Form Elements

--input-bg

Form input background

var(--input-bg)

--input-border-color

Input border color

var(--input-border-color)

--input-hover-border-color

Input hover border color

var(--input-hover-border-color)

--input-focus-border-color

Input focus border color

var(--input-focus-border-color)

--input-height

Standard input height

var(--input-height)

--input-button-bg

Input action button bg

var(--input-button-bg)

--checkbox-bg

Unchecked checkbox bg

var(--checkbox-bg)

--checkbox-checked-bg

Checked checkbox bg

var(--checkbox-checked-bg)

--checkbox-border-color

Checkbox border color

var(--checkbox-border-color)

Tables

--table-border-color

Table border separator color

var(--table-border-color)

--table-header-bg

Table header row bg

var(--table-header-bg)

--table-header-color

Table header text color

var(--table-header-color)

--table-row-bg

Table row background

var(--table-row-bg)

--table-row-alt-bg

Alternating table row bg

var(--table-row-alt-bg)

--table-row-hover-bg

Table row hover background

var(--table-row-hover-bg)

--table-row-selected-bg

Selected table row bg

var(--table-row-selected-bg)

--table-row-text-color

Table row text color

var(--table-row-text-color)

Layout Structure

--layout-header-height

Global header height

var(--layout-header-height)

--layout-header-bg

Global header background

var(--layout-header-bg)

--layout-sidebar-width

Sidebar navigation width

var(--layout-sidebar-width)

--layout-sidebar-bg

Sidebar navigation bg

var(--layout-sidebar-bg)

--layout-content-bg

Main content area bg

var(--layout-content-bg)