Tokens

moduix styles are built from CSS custom properties. Start with semantic color tokens for the surface, text, borders, rings, and overlays, then tune spacing, radius, size, typography, motion, shadow, and layering tokens when the product system needs a different rhythm.

Common override variables sit above individual components. For example, --backdrop-bg controls the default backdrop color for dialogs, drawers, selects, comboboxes, and other layered components until a component-specific variable overrides it.

Token architecture:root

14color pairs15spacing steps26shared overrides

Semantic aliases--color-primary: var(--primary)

Components read semantic variables while themes override the raw palette.

Shared fallbacks--dialog-backdrop-bg -> --backdrop-bg -> --color-overlay

Global decisions stay global, and component-level variables can still opt out.

Scoped themes.billing-flow { --size-lg: 36px; }

Any parent scope can change density, motion, or color for a focused area.

Colors

Light and dark theme values plus semantic aliases.

Light theme:root

PreviewDialog surface

Text, muted copy, border, action, and backdrop tokens in one compact layout.

CancelApply

Dark theme.dark

PreviewDialog surface

Text, muted copy, border, action, and backdrop tokens in one compact layout.

CancelApply

Canvas--background

Lightoklch(1 0 0)

Darkoklch(0.145 0 0)

Text--foreground

Lightoklch(0.145 0 0)

Darkoklch(0.985 0 0)

Raised surface--card

Lightoklch(1 0 0)

Darkoklch(0.205 0 0)

Layer surface--popover

Lightoklch(1 0 0)

Darkoklch(0.205 0 0)

Primary action--primary

Lightoklch(0.205 0 0)

Darkoklch(0.922 0 0)

Secondary fill--secondary

Lightoklch(0.97 0 0)

Darkoklch(0.269 0 0)

Subtle fill--muted

Lightoklch(0.97 0 0)

Darkoklch(0.269 0 0)

Hover fill--accent

Lightoklch(0.97 0 0)

Darkoklch(0.269 0 0)

Danger--destructive

Lightoklch(0.577 0.245 27.325)

Darkoklch(0.704 0.191 22.216)

Borders--border

Lightoklch(0.922 0 0)

Darkoklch(1 0 0 / 10%)

Input border--input

Lightoklch(0.922 0 0)

Darkoklch(1 0 0 / 15%)

Focus ring--ring

Lightoklch(0.708 0 0)

Darkoklch(0.556 0 0)

Backdrop base--overlay

Lightoklch(0.205 0 0 / 0.14)

Darkoklch(0.205 0 0 / 0.14)

Soft overlay--overlay-foreground

Lightoklch(0.205 0 0 / 0.04)

Darkoklch(0.205 0 0 / 0.04)

Chart 1--chart-1

Lightoklch(0.646 0.222 41.116)

Darkoklch(0.488 0.243 264.376)

Chart 2--chart-2

Lightoklch(0.6 0.118 184.704)

Darkoklch(0.696 0.17 162.48)

Chart 3--chart-3

Lightoklch(0.398 0.07 227.392)

Darkoklch(0.769 0.188 70.08)

Chart 4--chart-4

Lightoklch(0.828 0.189 84.429)

Darkoklch(0.627 0.265 303.9)

Chart 5--chart-5

Lightoklch(0.769 0.188 70.08)

Darkoklch(0.645 0.246 16.439)

Spacing & Size

Primitive steps, semantic spacing, and control heights.

Primitive spacing

--spacing-00px

--spacing-14px

--spacing-28px

--spacing-312px

--spacing-416px

--spacing-520px

--spacing-624px

--spacing-832px

--spacing-1040px

Semantic spacing

--spacing-xsvar(--spacing-1) / 4px

--spacing-smvar(--spacing-2) / 8px

--spacing-mdvar(--spacing-3) / 12px

--spacing-lgvar(--spacing-4) / 16px

--spacing-xlvar(--spacing-5) / 20px

--spacing-2xlvar(--spacing-6) / 24px

Control size

--size-xs24px

--size-sm32px

--size-md36px

--size-lg40px

--size-xl48px

Shape & Borders

Radius derives from one root value; borders stay simple.

Radius

--radius0.625rem

--radius-none0

--radius-xscalc(var(--radius) * 0.4)

--radius-smcalc(var(--radius) * 0.6)

--radius-mdcalc(var(--radius) * 0.8)

--radius-lgvar(--radius)

--radius-xlcalc(var(--radius) * 1.2)

--radius-full9999px

Border widths

--border-width-sm1px

--border-width-md2px

--border-width-lg4px

Opacity

--opacity-disabled0.5

--opacity-loading0.85

--opacity-hover0.9

Typography

Font sizes, line heights, weights, and tracking tokens.

--text-xs11px / 14px

--line-height-text-xs

--text-sm14px / 22px

--line-height-text-sm

--text-md16px / 24px

--line-height-text-md

--text-lg18px / 28px

--line-height-text-lg

--text-xl20px / 32px

--line-height-text-xl

--text-2xl24px / 32px

--line-height-text-2xl

--text-3xl30px / 36px

--line-height-text-3xl

--weight-regular400--weight-medium500--weight-semibold600--weight-bold700--tracking-text-sm-0.01em--tracking-text-xs-0.016em

Motion

Durations, easing, transition shorthands, and reusable animations.

Transition tokens

--duration-fast100ms

--duration-normal200ms

--duration-slow300ms

--duration-slower500ms

--ease-incubic-bezier(0.4, 0, 1, 1)

--ease-outcubic-bezier(0, 0, 0.2, 1)

--ease-in-outcubic-bezier(0.4, 0, 0.2, 1)

--ease-springcubic-bezier(0.32, 0.72, 0, 1)

--transition-defaultvar(--duration-normal) var(--ease-in-out)

--transition-fastvar(--duration-fast) var(--ease-in-out)

--transition-slowvar(--duration-slow) var(--ease-in-out)

--transition-slowervar(--duration-slower) var(--ease-in-out)

Animation tokens

--animation-pulsepulse 2s ease-in-out infinite

--animation-fade-infade-in var(--duration-normal) var(--ease-out)

--animation-fade-outfade-out var(--duration-normal) var(--ease-in)

--animation-slide-upslide-up var(--duration-normal) var(--ease-out)

--animation-slide-downslide-down var(--duration-normal) var(--ease-out)

--animation-spinspin 0.75s linear infinite

Elevation & Layers

Shadows, transforms, and z-index tokens for overlays.

--shadow-sm0 2px 4px 0 #0000001a, 0 1px 2px -1px #0000001a

--shadow-md0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a

--shadow-lg0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a

Transforms

--scale-popup0.9Dialog, popover, tooltip, menu, preview card, toast, nav menu

--scale-dropdown0.95Select, combobox, autocomplete, context menu root

Z-index

--z-default1

--z-xs5

--z-sm10

--z-md20

--z-lg30

--z-xl40

--z-backdrop40

--z-modal50

--z-popup60

--z-toast70

Shared Component Variables

Global overrides used by multiple components.

Layered UI--backdrop-bg

Backdrop variables

--backdrop-bgvar(--color-overlay)Global backdrop color fallback

--alert-dialog-backdrop-bgvar(--backdrop-bg, var(--color-overlay))AlertDialog

--autocomplete-backdrop-bgvar(--backdrop-bg, var(--color-overlay))Autocomplete

--combobox-backdrop-bgvar(--backdrop-bg, var(--color-overlay))Combobox

--dialog-backdrop-bgvar(--backdrop-bg, var(--color-overlay))Dialog

--drawer-backdrop-bgvar(--backdrop-bg, var(--color-overlay))Drawer

--select-backdrop-bgvar(--backdrop-bg, var(--color-overlay))Select

--menu-backdrop-bgvar(--backdrop-bg, transparent)Menu

--menubar-backdrop-bgvar(--backdrop-bg, transparent)Menubar

--navigation-menu-backdrop-bgvar(--backdrop-bg, transparent)NavigationMenu

--popover-backdrop-bgvar(--backdrop-bg, transparent)Popover

--preview-card-backdrop-bgvar(--backdrop-bg, transparent)PreviewCard

Popup menu variables

--popup-item-min-height2rem

--popup-item-padding-y0.5rem

--popup-item-padding-x-start1rem

--popup-item-padding-x-end1rem

--popup-item-font-sizevar(--text-sm)

--popup-item-line-heightvar(--line-height-text-sm)

--popup-highlight-inset-xvar(--spacing-1)

--popup-highlight-radiusvar(--radius-sm)

--popup-list-padding-y0.25rem

--popup-group-label-font-sizevar(--text-xs)

--popup-group-label-padding-y0.35rem

--popup-check-gap0.5rem

--popup-check-indicator-size0.75rem

--popup-separator-margin-y0.375rem

Override Scope

Set tokens globally in :root, inside .dark, or on any parent container that wraps moduix components.

:root {
  --primary: oklch(0.52 0.18 145);
  --radius: 0.75rem;
  --backdrop-bg: oklch(0.12 0.03 250 / 0.34);
}

.dense-panel {
  --spacing-md: 8px;
  --size-lg: 36px;
  --popup-item-min-height: 1.75rem;
}

Tokens

Tokens

Colors

Spacing & Size

Primitive spacing

Semantic spacing

Control size

Shape & Borders

Radius

Border widths

Opacity

Typography

Motion

Transition tokens

Animation tokens

Elevation & Layers

Transforms

Z-index

Shared Component Variables

Backdrop variables

Popup menu variables

Override Scope

On this page