Design Tokens

All component styles consume var(--lx-*) tokens exclusively. Your app code should too — it re-themes automatically.

Import: @luxeanor/ui/styles/tokens.css. Two kinds: static tokens (shared by all themes) and semantic tokens (vary with data-theme × data-mode).

Static tokens

Typography

Token	Value	Purpose
--lx-font-family	"Inter", ui-sans-serif, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif	body font stack
--lx-font-display	"Inter", ui-sans-serif, -apple-system, "PingFang SC", sans-serif	display font stack
--lx-text-xs	12px	auxiliary text
--lx-text-sm	13px	secondary text
--lx-text-md	14px	body default
--lx-text-lg	16px	emphasized body
--lx-text-xl	18px	small headings
--lx-text-2xl	24px	headings

Spacing / radius / z-index

Token	Value	Purpose
--lx-space-1 … --lx-space-8	4 / 8 / 12 / 16 / 20 / 24 / 32px	spacing ladder (steps 1,2,3,4,5,6,8)
--lx-radius-sm	8px	small radius (inputs)
--lx-radius-md	12px	medium radius (buttons/cards)
--lx-radius-lg	16px	large radius (panels)
--lx-radius-xl	24px	extra large (feature cards)
--lx-radius-full	999px	pills
--lx-z-dropdown / modal / toast / popover / confirm	1000 / 1100 / 1200 / 1300 / 1400	overlay z-index ladder

Motion

Token	Value	Purpose
--lx-dur	180ms	standard transition
--lx-dur-slow	400ms	slow transition
--lx-dur-entrance	800ms	entrance animation
--lx-ease	cubic-bezier(.16,1,.3,1)	standard easing
--lx-ease-spring	cubic-bezier(.34,1.56,.64,1)	spring easing

Semantic tokens

Values below are examples from the default theme (amethyst × light); the full values of all 8 combinations live in the package's styles/tokens.css.

Primary series (varies with data-theme family)

Token	Default	Purpose
--lx-primary	#6200EE	primary
--lx-primary-hover / -active	#7A2BFF / #4A00B1	interaction states
--lx-primary-soft	rgba(98,0,238,.08)	soft primary background
--lx-primary-container / --lx-on-primary-container	#E8DDFF / #22005D	container / on-container (M3)
--lx-grad-gold	primary gradient	brand gradient (legacy name; all families provide it)
--lx-grad-metal	metal gradient	metal-text effect
--lx-glow-gold / -strong	primary glow	glow shadows
--lx-ring	0 0 0 3px rgba(...,.18)	focus ring

Neutral scales (vary with data-mode)

Token	Default	Purpose
--lx-bg	#FEF7FF	page background
--lx-bg-low / -muted / -hover / -high	#F8F2F9 / #F2ECF3 / #ECE6ED / #E6E1E8	surface ladder (low → high)
--lx-bg-raised	#FFFFFF	raised surfaces (cards/overlays)
--lx-surface / --lx-surface-muted	= raised / muted	semantic aliases
--lx-glass-bg / --lx-glass-border	rgba(255,255,255,.72) / rgba(31,30,27,.10)	glass layer
--lx-text / -secondary / -muted / -invert	#1D1B20 / #494456 / #6E6880 / #FFFFFF	text ladder
--lx-border / --lx-border-strong	#CBC3D9 / #7A7488	borders
--lx-hairline / --lx-hairline-lit	rgba(31,30,27,.08 / .14)	hairlines (lit / unlit)
--lx-shadow-sm / -md / -lg	three levels	elevation shadows
--lx-light-top	inset 0 1px 0 rgba(255,255,255,.6)	top light
--lx-overlay	rgba(29,26,19,.32)	overlay scrim

Status colors

Token	Default (light)	Purpose
--lx-success / --lx-success-soft	#2E7D46 / #DEEDD5	success
--lx-warning / --lx-warning-soft	#A96A00 / #FFE3BB	warning
--lx-danger / --lx-danger-soft	#BA1A1A / #F9DEDC	danger
--lx-info / --lx-info-soft	#2563EB / #DFE8F6	info
--lx-accent / --lx-accent-soft	#6553E0 / rgba(101,83,224,.10)	accent

Access from TS

import { tokens, staticTokens, modeTokens, familyTokens, THEME_FAMILIES } from '@luxeanor/ui'

The token objects are kept literally in sync with the CSS (enforced by tests) — handy for canvas/chart scenarios where CSS variables can't reach.