Token Reference

Every visual decision in VhyxUI is a CSS custom property. Override any token in :root to retheme the entire library. No JavaScript. No configuration object. Just CSS.

your-theme.css

:root {
  /* Override accent to your brand blue */
  --vhyx-color-accent:       #2563eb;
  --vhyx-color-accent-hover: #1d4ed8;

  /* Tighter radius everywhere */
  --vhyx-radius-sm: 2px;
  --vhyx-radius-md: 4px;
  --vhyx-radius-lg: 6px;
}

Color Tokens

Semantic color tokens are what components use. They reference primitive values internally. Overriding a semantic token updates every component that uses it — you never touch the component itself.

Dark mode is handled by redefining the same semantic tokens under [data-theme="dark"]. You only override the semantic layer — primitive values stay constant.

Background

Token	Light	Dark	Usage
`--vhyx-color-bg`	`#f8fafc`	`#020617`	Page background
`--vhyx-color-bg-subtle`	`#f1f5f9`	`#0f172a`	Subtle section backgrounds
`--vhyx-color-bg-muted`	`#e2e8f0`	`#1e293b`	Muted backgrounds, skeleton
`--vhyx-color-bg-inverse`	`#0f172a`	`#f8fafc`	Inverse backgrounds

Surface

Token	Light	Dark	Usage
`--vhyx-color-surface`	`#ffffff`	`#0f172a`	Card, Panel surfaces
`--vhyx-color-surface-raised`	`#ffffff`	`#1e293b`	Elevated surfaces, popovers
`--vhyx-color-surface-overlay`	`#ffffff`	`#1e293b`	Dialog, Drawer backgrounds

Border

Token	Light	Dark	Usage
`--vhyx-color-border`	`#e2e8f0`	`#1e293b`	Default borders
`--vhyx-color-border-strong`	`#cbd5e1`	`#334155`	Emphasis borders
`--vhyx-color-border-focus`	`#6366f1`	`#818cf8`	Focus ring color

Text

Token	Light	Dark	Usage
`--vhyx-color-text`	`#0f172a`	`#f8fafc`	Primary text
`--vhyx-color-text-subtle`	`#64748b`	`#94a3b8`	Secondary labels, hints
`--vhyx-color-text-muted`	`#94a3b8`	`#64748b`	Placeholder, disabled labels
`--vhyx-color-text-disabled`	`#cbd5e1`	`#475569`	Disabled state text
`--vhyx-color-text-inverse`	`#f8fafc`	`#0f172a`	Text on dark backgrounds
`--vhyx-color-text-on-accent`	`#ffffff`	`#ffffff`	Text on accent-colored elements

Accent

Token	Light	Dark	Usage
`--vhyx-color-accent`	`#6366f1`	`#6366f1`	Primary interactive color
`--vhyx-color-accent-hover`	`#4f46e5`	`#4f46e5`	Accent hover state
`--vhyx-color-accent-active`	`#4338ca`	`#4338ca`	Accent pressed state
`--vhyx-color-accent-subtle`	`#eef2ff`	`#1e1b4b`	Accent tint backgrounds
`--vhyx-color-accent-muted`	`#e0e7ff`	`#312e81`	Accent muted backgrounds

Semantic — Success · Danger · Warning · Info

Token	Light	Dark	Usage
`--vhyx-color-success`	`#22c55e`	`#22c55e`	Success state
`--vhyx-color-success-hover`	`#16a34a`	`#16a34a`	Success hover
`--vhyx-color-success-subtle`	`#f0fdf4`	`#052e16`	Success tint background
`--vhyx-color-success-text`	`#15803d`	`#15803d`	Success text on subtle bg
`--vhyx-color-danger`	`#ef4444`	`#ef4444`	Danger / destructive state
`--vhyx-color-danger-hover`	`#dc2626`	`#dc2626`	Danger hover
`--vhyx-color-danger-subtle`	`#fef2f2`	`#450a0a`	Danger tint background
`--vhyx-color-danger-text`	`#b91c1c`	`#b91c1c`	Danger text on subtle bg
`--vhyx-color-warning`	`#f59e0b`	`#f59e0b`	Warning state
`--vhyx-color-warning-hover`	`#d97706`	`#d97706`	Warning hover
`--vhyx-color-warning-subtle`	`#fffbeb`	`#431407`	Warning tint background
`--vhyx-color-warning-text`	`#d97706`	`#d97706`	Warning text on subtle bg
`--vhyx-color-info`	`#3b82f6`	`#3b82f6`	Info state
`--vhyx-color-info-hover`	`#2563eb`	`#2563eb`	Info hover
`--vhyx-color-info-subtle`	`#eff6ff`	`#0c1a45`	Info tint background
`--vhyx-color-info-text`	`#2563eb`	`#2563eb`	Info text on subtle bg

Spacing Tokens

All spacing values follow a 4px base grid. Every token is a multiple of 4px, keeping your layout consistent without manual arithmetic.

Token	Value	Notes
`--vhyx-space-px`	`1px`	—
`--vhyx-space-0`	`0`	—
`--vhyx-space-0-5`	`0.125rem — 2px`	—
`--vhyx-space-1`	`0.25rem — 4px`	—
`--vhyx-space-1-5`	`0.375rem — 6px`	—
`--vhyx-space-2`	`0.5rem — 8px`	—
`--vhyx-space-2-5`	`0.625rem — 10px`	—
`--vhyx-space-3`	`0.75rem — 12px`	—
`--vhyx-space-3-5`	`0.875rem — 14px`	—
`--vhyx-space-4`	`1rem — 16px`	—
`--vhyx-space-5`	`1.25rem — 20px`	—
`--vhyx-space-6`	`1.5rem — 24px`	—
`--vhyx-space-7`	`1.75rem — 28px`	—
`--vhyx-space-8`	`2rem — 32px`	—
`--vhyx-space-10`	`2.5rem — 40px`	—
`--vhyx-space-12`	`3rem — 48px`	—
`--vhyx-space-16`	`4rem — 64px`	—
`--vhyx-space-20`	`5rem — 80px`	—
`--vhyx-space-24`	`6rem — 96px`	—
`--vhyx-space-32`	`8rem — 128px`	—

Typography Tokens

Font families, sizes, weights, line heights, and letter spacing are all token-driven. Override --vhyx-font-sans once and every component picks up your custom typeface.

Font sizes

Token	Value	Notes
`--vhyx-text-2xs`	`0.625rem — 10px`	—
`--vhyx-text-xs`	`0.75rem — 12px`	—
`--vhyx-text-sm`	`0.875rem — 14px`	—
`--vhyx-text-md`	`1rem — 16px`	body default
`--vhyx-text-lg`	`1.125rem — 18px`	—
`--vhyx-text-xl`	`1.25rem — 20px`	—
`--vhyx-text-2xl`	`1.5rem — 24px`	—
`--vhyx-text-3xl`	`1.875rem — 30px`	—
`--vhyx-text-4xl`	`2.25rem — 36px`	—

Font weights

Token	Value	Notes
`--vhyx-weight-light`	`300`	—
`--vhyx-weight-normal`	`400`	default
`--vhyx-weight-medium`	`500`	—
`--vhyx-weight-semibold`	`600`	—
`--vhyx-weight-bold`	`700`	—
`--vhyx-weight-extrabold`	`800`	—

Line height

Token	Value	Notes
`--vhyx-leading-none`	`1`	—
`--vhyx-leading-tight`	`1.25`	—
`--vhyx-leading-snug`	`1.375`	—
`--vhyx-leading-normal`	`1.5`	default
`--vhyx-leading-relaxed`	`1.625`	—
`--vhyx-leading-loose`	`2`	—

Letter spacing

Token	Value	Notes
`--vhyx-tracking-tight`	`-0.025em`	—
`--vhyx-tracking-normal`	`0em`	—
`--vhyx-tracking-wide`	`0.025em`	—
`--vhyx-tracking-wider`	`0.05em`	—
`--vhyx-tracking-widest`	`0.1em`	—

Motion Tokens

All animations and transitions are driven by duration and easing tokens. When a user has prefers-reduced-motion: reduce set, all duration tokens automatically collapse to 0ms — zero JavaScript required.

Durations

Token	Value	Notes
`--vhyx-duration-instant`	`50ms`	micro-feedback, active states
`--vhyx-duration-fast`	`100ms`	tooltips, simple show/hide
`--vhyx-duration-normal`	`200ms`	most transitions
`--vhyx-duration-slow`	`350ms`	dialog, drawer entry
`--vhyx-duration-glacial`	`500ms`	large layout shifts

Easing curves

Token	Value	Notes
`--vhyx-easing-linear`	`linear`	—
`--vhyx-easing-standard`	`cubic-bezier(0.4, 0, 0.2, 1)`	general purpose
`--vhyx-easing-decelerate`	`cubic-bezier(0, 0, 0.2, 1)`	elements entering the screen
`--vhyx-easing-accelerate`	`cubic-bezier(0.4, 0, 1, 1)`	elements leaving the screen
`--vhyx-easing-spring`	`cubic-bezier(0.34, 1.56, 0.64, 1)`	switch, popover, toast
`--vhyx-easing-bounce`	`cubic-bezier(0.68, -0.55, 0.265, 1.55)`	playful overshoot
`--vhyx-easing-smooth`	`cubic-bezier(0.25, 0.46, 0.45, 0.94)`	smooth deceleration

Component Sizes

Interactive element heights are locked to the size scale. Every component that accepts a size prop maps to one of these tokens, keeping your UI visually consistent across Button, Input, Select, and every other form control.

Height scale

Token	Value	Notes
`--vhyx-size-xs`	`1.5rem — 24px`	xs components
`--vhyx-size-sm`	`2rem — 32px`	sm components
`--vhyx-size-md`	`2.5rem — 40px`	md components (default)
`--vhyx-size-lg`	`3rem — 48px`	lg components
`--vhyx-size-xl`	`3.5rem — 56px`	xl components

Border radius

Token	Value	Notes
`--vhyx-radius-none`	`0`	—
`--vhyx-radius-xs`	`2px`	—
`--vhyx-radius-sm`	`4px`	small inputs, badges
`--vhyx-radius-md`	`6px`	buttons, inputs (default)
`--vhyx-radius-lg`	`8px`	cards
`--vhyx-radius-xl`	`12px`	dialogs, drawers
`--vhyx-radius-2xl`	`16px`	—
`--vhyx-radius-3xl`	`24px`	—
`--vhyx-radius-full`	`9999px`	pills, switches

Z-Index Scale

Every layering decision uses a named token. Nothing in VhyxUI uses a magic number like z-index: 9999. If you need a custom layer, use the nearest token and build relative to it.

Token	Value	Notes
`--vhyx-z-hide`	`-1`	visually hidden but in flow
`--vhyx-z-base`	`0`	default stacking context
`--vhyx-z-raised`	`10`	elevated cards
`--vhyx-z-dropdown`	`100`	Select, Dropdown menus
`--vhyx-z-sticky`	`200`	sticky headers, sidebars
`--vhyx-z-banner`	`250`	announcement banners
`--vhyx-z-overlay`	`300`	Dialog and Drawer overlays
`--vhyx-z-modal`	`400`	Dialog and Drawer content
`--vhyx-z-popover`	`450`	Popover, Tooltip
`--vhyx-z-toast`	`500`	Toast notifications
`--vhyx-z-tooltip`	`550`	Tooltips (above everything)
`--vhyx-z-top`	`999`	Emergency override