Semantic Colors
Role-based color tokens that adapt across themes, brands, and light/dark modes. Use these instead of primitives in component and layout code.
Interactive surfaces
Primary action colors that change per brand. Tokens marked * shift when switching brands.
--uds-color-surface-interactive-nonetransparent--uds-color-surface-interactive-neutralneutral bg--uds-color-surface-interactive-defaultprimary action bg *--uds-color-surface-interactive-hoverhover *--uds-color-surface-interactive-activepressed *--uds-color-surface-interactive-subtleghost bg *--uds-color-surface-interactive-subtle-hoverghost hover *--uds-color-surface-interactive-subtle-activeghost pressed *--uds-color-surface-interactive-disabled--uds-color-surface-interactive-reddanger action bg--uds-color-surface-interactive-red-hoverdanger hover--uds-color-surface-interactive-red-activedanger pressed--uds-color-surface-interactive-red-subtledanger ghost bg--uds-color-surface-interactive-red-subtle-hoverdanger ghost hover--uds-color-surface-interactive-red-subtle-activedanger ghost pressedStatus surfaces
--uds-color-surface-info--uds-color-surface-info-subtle--uds-color-surface-error--uds-color-surface-error-subtle--uds-color-surface-warning--uds-color-surface-warning-subtle--uds-color-surface-success--uds-color-surface-success-subtlePage surfaces
--uds-color-surface-page-main--uds-color-surface-page-subtle--uds-color-surface-page-alt--uds-color-surface-page-bold--uds-color-surface-page-inverseComponent surfaces (neutral scale)
--uds-color-surface-nonetransparent--uds-color-surface-main--uds-color-surface-subtle--uds-color-surface-alt--uds-color-surface-bold--uds-color-surface-xbold--uds-color-surface-xxbold--uds-color-surface-inverse--uds-color-surface-white--uds-color-surface-blackText
--uds-color-text-brandchanges per brand *--uds-color-text-primary--uds-color-text-inverse--uds-color-text-secondary--uds-color-text-disabled--uds-color-text-disabled-bold--uds-color-text-interactive--uds-color-text-interactive-hover--uds-color-text-interactive-active--uds-color-text-interactive-neutral--uds-color-text-info--uds-color-text-success--uds-color-text-error--uds-color-text-warningBorder
--uds-color-border-nonetransparent--uds-color-border-brandchanges per brand *--uds-color-border-primary--uds-color-border-secondary--uds-color-border-tertiary--uds-color-border-inverse--uds-color-border-disabled--uds-color-border-interactive*--uds-color-border-interactive-hover*--uds-color-border-interactive-active*--uds-color-border-subtle-interactive*--uds-color-border-subtle-interactive-hover*--uds-color-border-subtle-interactive-active*--uds-color-border-info--uds-color-border-success--uds-color-border-error--uds-color-border-warningOutline (focus / interaction rings)
--uds-color-border-outline-hover--uds-color-border-outline-active--uds-color-border-outline-focus-visibleBrand surfaces
Brand colors for logos and brand marks. Static tokens stay the same across all modes.
--uds-color-surface-brand-dynamic-boldactive brand accent *--uds-color-surface-brand-resman-bold--uds-color-surface-brand-resman-static--uds-color-surface-brand-anyonehome-bold--uds-color-surface-brand-anyonehome-static--uds-color-surface-brand-inhabit-bold--uds-color-surface-brand-inhabit-staticIcon
--uds-color-icon-nonetransparent--uds-color-icon-brandchanges per brand *--uds-color-icon-primary--uds-color-icon-inverse--uds-color-icon-secondary--uds-color-icon-disabled--uds-color-icon-disabled-bold--uds-color-icon-interactive*--uds-color-icon-interactive-hover*--uds-color-icon-interactive-active*--uds-color-icon-info--uds-color-icon-success--uds-color-icon-error--uds-color-icon-warningImport
@import url('./tokens/semantic.css');Base Semantic Color Tokens (full source)
The complete semantic.css source. Includes :root defaults plus dark mode, brand, font, scale, and density overrides via [data-*] attribute selectors.
/* ==========================================================================
UDS Semantic Tokens — semantic.css
Source: Figma variable collections exported as JSON
Collections: uds-color (94), uds-font (37), uds-font-scale (33),
uds-space (30), uds-border (11)
Theming data attributes:
data-color-scheme="dark"
data-theme="resman | anyonehome | inhabit"
data-font="poppins | roboto | lexend"
data-font-scale="smaller | larger"
data-density="comfortable"
========================================================================== */
:root {
/* ================================================================
FONT SCALE — uds-font-scale: default mode
Intermediate layer between primitives and font tokens.
================================================================ */
/* ---- Scale: Size ---- */
--uds-font-scale-size-xs: var(--uds-primitive-font-size-xxs); /* 10px */
--uds-font-scale-size-sm: var(--uds-primitive-font-size-xs); /* 12px */
--uds-font-scale-size-base: var(--uds-primitive-font-size-sm); /* 14px */
--uds-font-scale-size-md: var(--uds-primitive-font-size-base); /* 16px */
--uds-font-scale-size-lg: var(--uds-primitive-font-size-md); /* 18px */
--uds-font-scale-size-xl: var(--uds-primitive-font-size-lg); /* 20px */
--uds-font-scale-size-2xl: var(--uds-primitive-font-size-xl); /* 24px */
--uds-font-scale-size-3xl: var(--uds-primitive-font-size-2xl); /* 28px */
--uds-font-scale-size-4xl: var(--uds-primitive-font-size-3xl); /* 32px */
--uds-font-scale-size-5xl: var(--uds-primitive-font-size-4xl); /* 36px */
--uds-font-scale-size-6xl: var(--uds-primitive-font-size-5xl); /* 40px */
--uds-font-scale-size-7xl: var(--uds-primitive-font-size-6xl); /* 44px */
--uds-font-scale-size-8xl: var(--uds-primitive-font-size-7xl); /* 48px */
--uds-font-scale-size-9xl: var(--uds-primitive-font-size-8xl); /* 52px */
--uds-font-scale-size-10xl: var(--uds-primitive-font-size-9xl); /* 56px */
/* ---- Scale: Line Height ---- */
--uds-font-scale-line-height-200: var(--uds-primitive-font-line-height-150); /* 12px */
--uds-font-scale-line-height-250: var(--uds-primitive-font-line-height-200); /* 16px */
--uds-font-scale-line-height-base: var(--uds-primitive-font-line-height-250); /* 20px */
--uds-font-scale-line-height-325: var(--uds-primitive-font-line-height-300); /* 24px */
--uds-font-scale-line-height-350: var(--uds-primitive-font-line-height-325); /* 26px */
--uds-font-scale-line-height-400: var(--uds-primitive-font-line-height-350); /* 28px */
--uds-font-scale-line-height-450: var(--uds-primitive-font-line-height-400); /* 32px */
--uds-font-scale-line-height-500: var(--uds-primitive-font-line-height-450); /* 36px */
--uds-font-scale-line-height-550: var(--uds-primitive-font-line-height-500); /* 40px */
--uds-font-scale-line-height-600: var(--uds-primitive-font-line-height-550); /* 44px */
--uds-font-scale-line-height-650: var(--uds-primitive-font-line-height-600); /* 48px */
--uds-font-scale-line-height-700: var(--uds-primitive-font-line-height-650); /* 52px */
--uds-font-scale-line-height-750: var(--uds-primitive-font-line-height-700); /* 56px */
--uds-font-scale-line-height-800: var(--uds-primitive-font-line-height-750); /* 60px */
--uds-font-scale-line-height-850: var(--uds-primitive-font-line-height-800); /* 64px */
--uds-font-scale-line-height-900: var(--uds-primitive-font-line-height-850); /* 68px */
--uds-font-scale-line-height-950: var(--uds-primitive-font-line-height-900); /* 72px */
--uds-font-scale-line-height-1000: var(--uds-primitive-font-line-height-950); /* 76px */
/* ================================================================
FONT — uds-font: Inter mode (default)
References font-scale for size/line-height, primitives for family/weight.
================================================================ */
/* ---- Font Family ---- */
--uds-font-family: var(--uds-primitive-font-family-inter);
/* ---- Font Size ---- */
--uds-font-size-xs: var(--uds-font-scale-size-xs); /* 10px */
--uds-font-size-sm: var(--uds-font-scale-size-sm); /* 12px */
--uds-font-size-base: var(--uds-font-scale-size-base); /* 14px */
--uds-font-size-md: var(--uds-font-scale-size-md); /* 16px */
--uds-font-size-lg: var(--uds-font-scale-size-lg); /* 18px */
--uds-font-size-xl: var(--uds-font-scale-size-xl); /* 20px */
--uds-font-size-2xl: var(--uds-font-scale-size-2xl); /* 24px */
--uds-font-size-3xl: var(--uds-font-scale-size-3xl); /* 28px */
--uds-font-size-4xl: var(--uds-font-scale-size-4xl); /* 32px */
--uds-font-size-5xl: var(--uds-font-scale-size-5xl); /* 36px */
--uds-font-size-6xl: var(--uds-font-scale-size-6xl); /* 40px */
--uds-font-size-7xl: var(--uds-font-scale-size-7xl); /* 44px */
--uds-font-size-8xl: var(--uds-font-scale-size-8xl); /* 48px */
--uds-font-size-9xl: var(--uds-font-scale-size-9xl); /* 52px */
--uds-font-size-10xl: var(--uds-font-scale-size-10xl); /* 56px */
/* ---- Font Line Height ---- */
--uds-font-line-height-200: var(--uds-font-scale-line-height-200); /* 12px */
--uds-font-line-height-250: var(--uds-font-scale-line-height-250); /* 16px */
--uds-font-line-height-base: var(--uds-font-scale-line-height-base); /* 20px */
--uds-font-line-height-325: var(--uds-font-scale-line-height-325); /* 24px */
--uds-font-line-height-350: var(--uds-font-scale-line-height-350); /* 26px */
--uds-font-line-height-400: var(--uds-font-scale-line-height-400); /* 28px */
--uds-font-line-height-450: var(--uds-font-scale-line-height-450); /* 32px */
--uds-font-line-height-500: var(--uds-font-scale-line-height-500); /* 36px */
--uds-font-line-height-550: var(--uds-font-scale-line-height-550); /* 40px */
--uds-font-line-height-600: var(--uds-font-scale-line-height-600); /* 44px */
--uds-font-line-height-650: var(--uds-font-scale-line-height-650); /* 48px */
--uds-font-line-height-700: var(--uds-font-scale-line-height-700); /* 52px */
--uds-font-line-height-750: var(--uds-font-scale-line-height-750); /* 56px */
--uds-font-line-height-800: var(--uds-font-scale-line-height-800); /* 60px */
--uds-font-line-height-850: var(--uds-font-scale-line-height-850); /* 64px */
--uds-font-line-height-900: var(--uds-font-scale-line-height-900); /* 68px */
--uds-font-line-height-950: var(--uds-font-scale-line-height-950); /* 72px */
--uds-font-line-height-1000: var(--uds-font-scale-line-height-1000); /* 76px */
/* ---- Font Weight ---- */
--uds-font-weight-400: var(--uds-primitive-font-weight-inter-regular);
--uds-font-weight-500: var(--uds-primitive-font-weight-inter-medium);
--uds-font-weight-700: var(--uds-primitive-font-weight-inter-bold);
/* Friendly weight aliases */
--uds-font-weight-regular: var(--uds-font-weight-400);
--uds-font-weight-medium: var(--uds-font-weight-500);
--uds-font-weight-bold: var(--uds-font-weight-700);
/* Backward-compatible line-height aliases (t-shirt → numeric step) */
--uds-font-line-height-xs: var(--uds-font-line-height-200);
--uds-font-line-height-sm: var(--uds-font-line-height-250);
--uds-font-line-height-md: var(--uds-font-line-height-325);
--uds-font-line-height-lg: var(--uds-font-line-height-350);
--uds-font-line-height-xl: var(--uds-font-line-height-400);
--uds-font-line-height-2xl: var(--uds-font-line-height-450);
--uds-font-line-height-3xl: var(--uds-font-line-height-500);
--uds-font-line-height-4xl: var(--uds-font-line-height-550);
--uds-font-line-height-5xl: var(--uds-font-line-height-600);
--uds-font-line-height-6xl: var(--uds-font-line-height-650);
--uds-font-line-height-7xl: var(--uds-font-line-height-700);
--uds-font-line-height-8xl: var(--uds-font-line-height-750);
--uds-font-line-height-9xl: var(--uds-font-line-height-800);
--uds-font-line-height-10xl: var(--uds-font-line-height-850);
/* ================================================================
COLOR — uds-color: base (light)
================================================================ */
/* ---- Surface: page ---- */
--uds-color-surface-page-main: var(--uds-primitive-color-neutral-10);
--uds-color-surface-page-inverse: var(--uds-primitive-color-neutral-110);
--uds-color-surface-page-subtle: var(--uds-primitive-color-neutral-20);
--uds-color-surface-page-alt: var(--uds-primitive-color-neutral-30);
--uds-color-surface-page-bold: var(--uds-primitive-color-neutral-50);
/* ---- Surface: neutral ---- */
--uds-color-surface-none: var(--uds-primitive-color-special-none);
--uds-color-surface-main: var(--uds-primitive-color-neutral-10);
--uds-color-surface-inverse: var(--uds-primitive-color-neutral-110);
--uds-color-surface-subtle: var(--uds-primitive-color-neutral-20);
--uds-color-surface-alt: var(--uds-primitive-color-neutral-30);
--uds-color-surface-bold: var(--uds-primitive-color-neutral-40);
--uds-color-surface-xbold: var(--uds-primitive-color-neutral-50);
--uds-color-surface-xxbold: var(--uds-primitive-color-neutral-60-M);
--uds-color-surface-white: var(--uds-primitive-color-special-white);
--uds-color-surface-black: var(--uds-primitive-color-special-black);
/* ---- Surface: status ---- */
--uds-color-surface-info: var(--uds-primitive-color-blue-70);
--uds-color-surface-info-subtle: var(--uds-primitive-color-blue-20);
--uds-color-surface-success: var(--uds-primitive-color-green-70);
--uds-color-surface-success-subtle: var(--uds-primitive-color-green-20);
--uds-color-surface-error: var(--uds-primitive-color-red-70);
--uds-color-surface-error-subtle: var(--uds-primitive-color-red-20);
--uds-color-surface-warning: var(--uds-primitive-color-orange-70);
--uds-color-surface-warning-subtle: var(--uds-primitive-color-orange-20);
/* ---- Surface: interactive ---- */
--uds-color-surface-interactive-none: var(--uds-primitive-color-special-none);
--uds-color-surface-interactive-neutral: var(--uds-primitive-color-neutral-10);
--uds-color-surface-interactive-default: var(--uds-primitive-color-blue-70); /* experimental */
--uds-color-surface-interactive-hover: var(--uds-primitive-color-blue-60-M); /* experimental */
--uds-color-surface-interactive-active: var(--uds-primitive-color-blue-80); /* experimental */
--uds-color-surface-interactive-disabled: var(--uds-primitive-color-neutral-30);
--uds-color-surface-interactive-subtle: var(--uds-primitive-color-blue-10); /* experimental */
--uds-color-surface-interactive-subtle-hover: var(--uds-primitive-color-blue-20); /* experimental */
--uds-color-surface-interactive-subtle-active: var(--uds-primitive-color-blue-30); /* experimental */
--uds-color-surface-interactive-red: var(--uds-primitive-color-red-70);
--uds-color-surface-interactive-red-hover: var(--uds-primitive-color-red-60-M);
--uds-color-surface-interactive-red-active: var(--uds-primitive-color-red-80);
--uds-color-surface-interactive-red-subtle: var(--uds-primitive-color-red-10);
--uds-color-surface-interactive-red-subtle-hover: var(--uds-primitive-color-red-20);
--uds-color-surface-interactive-red-subtle-active: var(--uds-primitive-color-red-30);
/* ---- Surface: brand ---- */
--uds-color-surface-brand-dynamic-bold: var(--uds-primitive-color-blue-100); /* experimental */
--uds-color-surface-brand-anyonehome-bold: var(--uds-primitive-color-lime-70);
--uds-color-surface-brand-anyonehome-static: var(--uds-primitive-color-lime-70);
--uds-color-surface-brand-inhabit-bold: var(--uds-primitive-color-amber-70);
--uds-color-surface-brand-inhabit-static: var(--uds-primitive-color-amber-70);
--uds-color-surface-brand-resman-bold: var(--uds-primitive-color-cyan-90);
--uds-color-surface-brand-resman-static: var(--uds-primitive-color-cyan-90);
/* ---- Text ---- */
--uds-color-text-brand: var(--uds-primitive-color-blue-70); /* experimental */
--uds-color-text-primary: var(--uds-primitive-color-neutral-100);
--uds-color-text-inverse: var(--uds-primitive-color-neutral-20);
--uds-color-text-secondary: var(--uds-primitive-color-neutral-50);
--uds-color-text-disabled: var(--uds-primitive-color-neutral-40);
--uds-color-text-disabled-bold: var(--uds-primitive-color-neutral-50);
--uds-color-text-interactive: var(--uds-primitive-color-blue-70);
--uds-color-text-interactive-hover: var(--uds-primitive-color-blue-60-M);
--uds-color-text-interactive-active: var(--uds-primitive-color-blue-80);
--uds-color-text-interactive-neutral: var(--uds-primitive-color-neutral-100);
--uds-color-text-info: var(--uds-primitive-color-blue-70);
--uds-color-text-success: var(--uds-primitive-color-green-70);
--uds-color-text-error: var(--uds-primitive-color-red-70);
--uds-color-text-warning: var(--uds-primitive-color-orange-70);
/* ---- Icon ---- */
--uds-color-icon-none: var(--uds-primitive-color-special-none);
--uds-color-icon-brand: var(--uds-primitive-color-blue-70); /* experimental */
--uds-color-icon-primary: var(--uds-primitive-color-neutral-100);
--uds-color-icon-inverse: var(--uds-primitive-color-neutral-20);
--uds-color-icon-secondary: var(--uds-primitive-color-neutral-50);
--uds-color-icon-disabled: var(--uds-primitive-color-neutral-40);
--uds-color-icon-disabled-bold: var(--uds-primitive-color-neutral-50);
--uds-color-icon-interactive: var(--uds-primitive-color-blue-70); /* experimental */
--uds-color-icon-interactive-hover: var(--uds-primitive-color-blue-60-M); /* experimental */
--uds-color-icon-interactive-active: var(--uds-primitive-color-blue-80); /* experimental */
--uds-color-icon-destructive: var(--uds-primitive-color-red-70);
--uds-color-icon-info: var(--uds-primitive-color-blue-70);
--uds-color-icon-success: var(--uds-primitive-color-green-70);
--uds-color-icon-error: var(--uds-primitive-color-red-70);
--uds-color-icon-warning: var(--uds-primitive-color-orange-70);
/* ---- Border ---- */
--uds-color-border-none: var(--uds-primitive-color-special-none);
--uds-color-border-brand: var(--uds-primitive-color-blue-70); /* experimental */
--uds-color-border-primary: var(--uds-primitive-color-neutral-50);
--uds-color-border-secondary: var(--uds-primitive-color-neutral-40);
--uds-color-border-tertiary: var(--uds-primitive-color-neutral-30);
--uds-color-border-inverse: var(--uds-primitive-color-neutral-70);
--uds-color-border-disabled: var(--uds-primitive-color-neutral-40);
--uds-color-border-interactive: var(--uds-primitive-color-blue-70); /* experimental */
--uds-color-border-interactive-hover: var(--uds-primitive-color-blue-60-M); /* experimental */
--uds-color-border-interactive-active: var(--uds-primitive-color-blue-80); /* experimental */
--uds-color-border-subtle-interactive: var(--uds-primitive-color-blue-20); /* experimental */
--uds-color-border-subtle-interactive-hover: var(--uds-primitive-color-blue-30); /* experimental */
--uds-color-border-subtle-interactive-active: var(--uds-primitive-color-blue-40); /* experimental */
--uds-color-border-info: var(--uds-primitive-color-blue-70);
--uds-color-border-success: var(--uds-primitive-color-green-70);
--uds-color-border-error: var(--uds-primitive-color-red-70);
--uds-color-border-warning: var(--uds-primitive-color-orange-70);
--uds-color-border-outline-hover: var(--uds-primitive-color-blue-80);
--uds-color-border-outline-active: var(--uds-primitive-color-blue-90);
--uds-color-border-outline-focus-visible: var(--uds-primitive-color-blue-60-M);
/* ================================================================
SPACE — uds-space: default mode
================================================================ */
--uds-space-0: var(--uds-primitive-space-0); /* 0px */
--uds-space-025: var(--uds-primitive-space-025); /* 2px */
--uds-space-050: var(--uds-primitive-space-050); /* 4px */
--uds-space-075: var(--uds-primitive-space-075); /* 6px */
--uds-space-100: var(--uds-primitive-space-100); /* 8px */
--uds-space-125: var(--uds-primitive-space-125); /* 10px */
--uds-space-150: var(--uds-primitive-space-150); /* 12px */
--uds-space-175: var(--uds-primitive-space-175); /* 14px */
--uds-space-200: var(--uds-primitive-space-200); /* 16px */
--uds-space-250: var(--uds-primitive-space-250); /* 20px */
--uds-space-300: var(--uds-primitive-space-300); /* 24px */
--uds-space-350: var(--uds-primitive-space-350); /* 28px */
--uds-space-400: var(--uds-primitive-space-400); /* 32px */
--uds-space-450: var(--uds-primitive-space-450); /* 36px */
--uds-space-500: var(--uds-primitive-space-500); /* 40px */
--uds-space-550: var(--uds-primitive-space-550); /* 44px */
--uds-space-600: var(--uds-primitive-space-600); /* 48px */
--uds-space-650: var(--uds-primitive-space-650); /* 52px */
--uds-space-700: var(--uds-primitive-space-700); /* 56px */
--uds-space-750: var(--uds-primitive-space-750); /* 60px */
--uds-space-800: var(--uds-primitive-space-800); /* 64px */
--uds-space-850: var(--uds-primitive-space-850); /* 68px */
--uds-space-900: var(--uds-primitive-space-900); /* 72px */
--uds-space-950: var(--uds-primitive-space-950); /* 76px */
--uds-space-1000: var(--uds-primitive-space-1000); /* 80px */
--uds-space-1050: var(--uds-primitive-space-1050); /* 84px */
--uds-space-1100: var(--uds-primitive-space-1100); /* 88px */
--uds-space-1150: var(--uds-primitive-space-1150); /* 92px */
--uds-space-1200: var(--uds-primitive-space-1200); /* 96px */
--uds-space-1250: var(--uds-primitive-space-1250); /* 100px */
/* ================================================================
BORDER — uds-border: Mode 1
================================================================ */
/* ---- Border Radius ---- */
--uds-border-radius-container-sm: var(--uds-primitive-border-radius-050); /* 4px */
--uds-border-radius-container: var(--uds-primitive-border-radius-100); /* 8px */
--uds-border-radius-container-md: var(--uds-primitive-border-radius-150); /* 12px */
--uds-border-radius-container-lg: var(--uds-primitive-border-radius-200); /* 16px */
--uds-border-radius-container-xl: var(--uds-primitive-border-radius-300); /* 24px */
--uds-border-radius-container-full: var(--uds-primitive-border-radius-full); /* 9999px */
--uds-border-radius-input: var(--uds-primitive-border-radius-100); /* 8px */
--uds-border-radius-input-selected: var(--uds-primitive-border-radius-150); /* 12px */
--uds-border-radius-input-full: var(--uds-primitive-border-radius-full); /* 9999px */
--uds-border-radius-input-full-selected: var(--uds-primitive-border-radius-full); /* 9999px */
/* ---- Border Width ---- */
--uds-border-width-input-selected: var(--uds-primitive-border-width-050); /* 4px */
/* Backward-compatible border radius raw-step aliases */
--uds-border-radius-0: 0;
--uds-border-radius-025: var(--uds-primitive-border-radius-025);
--uds-border-radius-050: var(--uds-primitive-border-radius-050);
--uds-border-radius-075: var(--uds-primitive-border-radius-075);
--uds-border-radius-100: var(--uds-primitive-border-radius-100);
--uds-border-radius-150: var(--uds-primitive-border-radius-150);
--uds-border-radius-200: var(--uds-primitive-border-radius-200);
--uds-border-radius-300: var(--uds-primitive-border-radius-300);
--uds-border-radius-400: var(--uds-primitive-border-radius-400);
--uds-border-radius-600: var(--uds-primitive-border-radius-600);
--uds-border-radius-full: var(--uds-primitive-border-radius-full);
/* ==================================================================
Elevation / Shadow
================================================================== */
--uds-shadow-depth-100: 0 2px 8px rgba(0, 0, 0, 0.1);
--uds-shadow-depth-300: 0 4px 12px rgba(0, 0, 0, 0.08);
--uds-shadow-depth-500: 0 10px 20px 2px rgba(0, 0, 0, 0.2);
--uds-shadow-bento: 0 6px 16px 1px rgba(0, 0, 0, 0.16);
--uds-overlay-backdrop: rgba(0, 0, 0, 0.45);
}
/* ==========================================================================
DARK MODE — uds-color: base (dark)
========================================================================== */
[data-color-scheme="dark"] {
/* ---- Surface ---- */
--uds-color-surface-page-main: var(--uds-primitive-color-neutral-110);
--uds-color-surface-page-inverse: var(--uds-primitive-color-neutral-10);
--uds-color-surface-page-subtle: var(--uds-primitive-color-neutral-100);
--uds-color-surface-page-alt: var(--uds-primitive-color-neutral-90);
--uds-color-surface-page-bold: var(--uds-primitive-color-neutral-70);
--uds-color-surface-main: var(--uds-primitive-color-neutral-110);
--uds-color-surface-inverse: var(--uds-primitive-color-neutral-10);
--uds-color-surface-subtle: var(--uds-primitive-color-neutral-100);
--uds-color-surface-alt: var(--uds-primitive-color-neutral-90);
--uds-color-surface-bold: var(--uds-primitive-color-neutral-80);
--uds-color-surface-xbold: var(--uds-primitive-color-neutral-70);
--uds-color-surface-info: var(--uds-primitive-color-blue-50);
--uds-color-surface-info-subtle: var(--uds-primitive-color-blue-100);
--uds-color-surface-success: var(--uds-primitive-color-green-50);
--uds-color-surface-success-subtle: var(--uds-primitive-color-green-100);
--uds-color-surface-error: var(--uds-primitive-color-red-50);
--uds-color-surface-error-subtle: var(--uds-primitive-color-red-100);
--uds-color-surface-warning: var(--uds-primitive-color-orange-50);
--uds-color-surface-warning-subtle: var(--uds-primitive-color-orange-100);
--uds-color-surface-interactive-neutral: var(--uds-primitive-color-neutral-110);
--uds-color-surface-interactive-default: var(--uds-primitive-color-blue-50);
--uds-color-surface-interactive-hover: var(--uds-primitive-color-blue-40);
--uds-color-surface-interactive-active: var(--uds-primitive-color-blue-60-M);
--uds-color-surface-interactive-subtle: var(--uds-primitive-color-blue-110);
--uds-color-surface-interactive-subtle-hover: var(--uds-primitive-color-blue-100);
--uds-color-surface-interactive-subtle-active: var(--uds-primitive-color-blue-90);
--uds-color-surface-interactive-disabled: var(--uds-primitive-color-neutral-90);
--uds-color-surface-interactive-red: var(--uds-primitive-color-red-50);
--uds-color-surface-interactive-red-hover: var(--uds-primitive-color-red-40);
--uds-color-surface-interactive-red-active: var(--uds-primitive-color-red-60-M);
--uds-color-surface-interactive-red-subtle: var(--uds-primitive-color-red-110);
--uds-color-surface-interactive-red-subtle-hover: var(--uds-primitive-color-red-100);
--uds-color-surface-interactive-red-subtle-active: var(--uds-primitive-color-red-90);
--uds-color-surface-brand-dynamic-bold: var(--uds-primitive-color-blue-80);
--uds-color-surface-brand-anyonehome-bold: var(--uds-primitive-color-lime-50);
--uds-color-surface-brand-inhabit-bold: var(--uds-primitive-color-amber-50);
--uds-color-surface-brand-resman-bold: var(--uds-primitive-color-cyan-70);
/* ---- Text ---- */
--uds-color-text-brand: var(--uds-primitive-color-blue-50);
--uds-color-text-primary: var(--uds-primitive-color-neutral-20);
--uds-color-text-inverse: var(--uds-primitive-color-neutral-100);
--uds-color-text-secondary: var(--uds-primitive-color-neutral-60-M);
--uds-color-text-disabled: var(--uds-primitive-color-neutral-80);
--uds-color-text-disabled-bold: var(--uds-primitive-color-neutral-70);
--uds-color-text-interactive: var(--uds-primitive-color-blue-50);
--uds-color-text-interactive-hover: var(--uds-primitive-color-blue-40);
--uds-color-text-interactive-active: var(--uds-primitive-color-blue-60-M);
--uds-color-text-interactive-neutral: var(--uds-primitive-color-neutral-20);
--uds-color-text-info: var(--uds-primitive-color-blue-50);
--uds-color-text-success: var(--uds-primitive-color-green-50);
--uds-color-text-error: var(--uds-primitive-color-red-50);
--uds-color-text-warning: var(--uds-primitive-color-orange-50);
/* ---- Icon ---- */
--uds-color-icon-brand: var(--uds-primitive-color-blue-50);
--uds-color-icon-primary: var(--uds-primitive-color-neutral-20);
--uds-color-icon-inverse: var(--uds-primitive-color-neutral-100);
--uds-color-icon-secondary: var(--uds-primitive-color-neutral-70);
--uds-color-icon-disabled: var(--uds-primitive-color-neutral-80);
--uds-color-icon-disabled-bold: var(--uds-primitive-color-neutral-70);
--uds-color-icon-interactive: var(--uds-primitive-color-blue-50);
--uds-color-icon-interactive-hover: var(--uds-primitive-color-blue-40);
--uds-color-icon-interactive-active: var(--uds-primitive-color-blue-60-M);
--uds-color-icon-destructive: var(--uds-primitive-color-red-50);
--uds-color-icon-info: var(--uds-primitive-color-blue-50);
--uds-color-icon-success: var(--uds-primitive-color-green-50);
--uds-color-icon-error: var(--uds-primitive-color-red-50);
--uds-color-icon-warning: var(--uds-primitive-color-orange-50);
/* ---- Border ---- */
--uds-color-border-brand: var(--uds-primitive-color-blue-50);
--uds-color-border-primary: var(--uds-primitive-color-neutral-70);
--uds-color-border-secondary: var(--uds-primitive-color-neutral-80);
--uds-color-border-tertiary: var(--uds-primitive-color-neutral-90);
--uds-color-border-inverse: var(--uds-primitive-color-neutral-50);
--uds-color-border-disabled: var(--uds-primitive-color-neutral-80);
--uds-color-border-interactive: var(--uds-primitive-color-blue-50);
--uds-color-border-interactive-hover: var(--uds-primitive-color-blue-40);
--uds-color-border-interactive-active: var(--uds-primitive-color-blue-60-M);
--uds-color-border-subtle-interactive: var(--uds-primitive-color-blue-110);
--uds-color-border-subtle-interactive-hover: var(--uds-primitive-color-blue-100);
--uds-color-border-subtle-interactive-active: var(--uds-primitive-color-blue-90);
--uds-color-border-info: var(--uds-primitive-color-blue-50);
--uds-color-border-success: var(--uds-primitive-color-green-50);
--uds-color-border-error: var(--uds-primitive-color-red-50);
--uds-color-border-warning: var(--uds-primitive-color-orange-50);
--uds-color-border-outline-hover: var(--uds-primitive-color-blue-40);
--uds-color-border-outline-active: var(--uds-primitive-color-blue-30);
}
/* ---- ResMan — 3 subtle border overrides; dark = base dark ---- */
[data-theme="resman"] {
--uds-color-border-subtle-interactive: var(--uds-primitive-color-blue-10);
--uds-color-border-subtle-interactive-hover: var(--uds-primitive-color-blue-20);
--uds-color-border-subtle-interactive-active: var(--uds-primitive-color-blue-30);
}
/* ---- AnyoneHome — interactive accent: emerald ---- */
[data-theme="anyonehome"] {
--uds-color-surface-interactive-default: var(--uds-primitive-color-emerald-70);
--uds-color-surface-interactive-hover: var(--uds-primitive-color-emerald-60-M);
--uds-color-surface-interactive-active: var(--uds-primitive-color-emerald-80);
--uds-color-surface-interactive-subtle: var(--uds-primitive-color-emerald-10);
--uds-color-surface-interactive-subtle-hover: var(--uds-primitive-color-emerald-20);
--uds-color-surface-interactive-subtle-active: var(--uds-primitive-color-emerald-30);
--uds-color-surface-brand-dynamic-bold: var(--uds-primitive-color-emerald-100);
--uds-color-text-brand: var(--uds-primitive-color-emerald-70);
--uds-color-icon-brand: var(--uds-primitive-color-emerald-70);
--uds-color-icon-interactive: var(--uds-primitive-color-emerald-70);
--uds-color-icon-interactive-hover: var(--uds-primitive-color-emerald-60-M);
--uds-color-icon-interactive-active: var(--uds-primitive-color-emerald-80);
--uds-color-border-brand: var(--uds-primitive-color-emerald-70);
--uds-color-border-interactive: var(--uds-primitive-color-emerald-70);
--uds-color-border-interactive-hover: var(--uds-primitive-color-emerald-60-M);
--uds-color-border-interactive-active: var(--uds-primitive-color-emerald-80);
--uds-color-border-subtle-interactive: var(--uds-primitive-color-emerald-10);
--uds-color-border-subtle-interactive-hover: var(--uds-primitive-color-emerald-20);
--uds-color-border-subtle-interactive-active: var(--uds-primitive-color-emerald-30);
}
/* ---- Inhabit — interactive accent: amber ---- */
[data-theme="inhabit"] {
--uds-color-surface-interactive-default: var(--uds-primitive-color-amber-70);
--uds-color-surface-interactive-hover: var(--uds-primitive-color-amber-60-M);
--uds-color-surface-interactive-active: var(--uds-primitive-color-amber-80);
--uds-color-surface-interactive-subtle: var(--uds-primitive-color-amber-10);
--uds-color-surface-interactive-subtle-hover: var(--uds-primitive-color-amber-20);
--uds-color-surface-interactive-subtle-active: var(--uds-primitive-color-amber-30);
--uds-color-surface-brand-dynamic-bold: var(--uds-primitive-color-amber-100);
--uds-color-text-brand: var(--uds-primitive-color-amber-70);
--uds-color-icon-brand: var(--uds-primitive-color-amber-70);
--uds-color-icon-interactive: var(--uds-primitive-color-amber-70);
--uds-color-icon-interactive-hover: var(--uds-primitive-color-amber-60-M);
--uds-color-icon-interactive-active: var(--uds-primitive-color-amber-80);
--uds-color-border-brand: var(--uds-primitive-color-amber-70);
--uds-color-border-interactive: var(--uds-primitive-color-amber-70);
--uds-color-border-interactive-hover: var(--uds-primitive-color-amber-60-M);
--uds-color-border-interactive-active: var(--uds-primitive-color-amber-80);
--uds-color-border-subtle-interactive: var(--uds-primitive-color-amber-10);
--uds-color-border-subtle-interactive-hover: var(--uds-primitive-color-amber-20);
--uds-color-border-subtle-interactive-active: var(--uds-primitive-color-amber-30);
}
/* ==========================================================================
FONT FAMILY MODES
========================================================================== */
[data-font="poppins"] { --uds-font-family: var(--uds-primitive-font-family-poppins); }
[data-font="roboto"] { --uds-font-family: var(--uds-primitive-font-family-roboto); }
[data-font="lexend"] { --uds-font-family: var(--uds-primitive-font-family-lexend); }
/* ---- Font scale: smaller ---- */
[data-font-scale="smaller"] {
/* Size */
--uds-font-scale-size-xs: var(--uds-primitive-font-size-xxxs); /* 8px */
--uds-font-scale-size-sm: var(--uds-primitive-font-size-xxs); /* 10px */
--uds-font-scale-size-base: var(--uds-primitive-font-size-xs); /* 12px */
--uds-font-scale-size-md: var(--uds-primitive-font-size-sm); /* 14px */
--uds-font-scale-size-lg: var(--uds-primitive-font-size-base); /* 16px */
--uds-font-scale-size-xl: var(--uds-primitive-font-size-md); /* 18px */
--uds-font-scale-size-2xl: var(--uds-primitive-font-size-lg); /* 20px */
--uds-font-scale-size-3xl: var(--uds-primitive-font-size-xl); /* 24px */
--uds-font-scale-size-4xl: var(--uds-primitive-font-size-2xl); /* 28px */
--uds-font-scale-size-5xl: var(--uds-primitive-font-size-3xl); /* 32px */
--uds-font-scale-size-6xl: var(--uds-primitive-font-size-4xl); /* 36px */
--uds-font-scale-size-7xl: var(--uds-primitive-font-size-5xl); /* 40px */
--uds-font-scale-size-8xl: var(--uds-primitive-font-size-6xl); /* 44px */
--uds-font-scale-size-9xl: var(--uds-primitive-font-size-7xl); /* 48px */
--uds-font-scale-size-10xl: var(--uds-primitive-font-size-8xl); /* 52px */
/* Line Height */
--uds-font-scale-line-height-200: var(--uds-primitive-font-line-height-100); /* 8px */
--uds-font-scale-line-height-250: var(--uds-primitive-font-line-height-150); /* 12px */
--uds-font-scale-line-height-base: var(--uds-primitive-font-line-height-200); /* 16px */
--uds-font-scale-line-height-325: var(--uds-primitive-font-line-height-250); /* 20px */
--uds-font-scale-line-height-350: var(--uds-primitive-font-line-height-300); /* 24px */
--uds-font-scale-line-height-400: var(--uds-primitive-font-line-height-325); /* 26px */
--uds-font-scale-line-height-450: var(--uds-primitive-font-line-height-350); /* 28px */
--uds-font-scale-line-height-500: var(--uds-primitive-font-line-height-400); /* 32px */
--uds-font-scale-line-height-550: var(--uds-primitive-font-line-height-450); /* 36px */
--uds-font-scale-line-height-600: var(--uds-primitive-font-line-height-500); /* 40px */
--uds-font-scale-line-height-650: var(--uds-primitive-font-line-height-550); /* 44px */
--uds-font-scale-line-height-700: var(--uds-primitive-font-line-height-600); /* 48px */
--uds-font-scale-line-height-750: var(--uds-primitive-font-line-height-650); /* 52px */
--uds-font-scale-line-height-800: var(--uds-primitive-font-line-height-700); /* 56px */
--uds-font-scale-line-height-850: var(--uds-primitive-font-line-height-750); /* 60px */
--uds-font-scale-line-height-900: var(--uds-primitive-font-line-height-800); /* 64px */
--uds-font-scale-line-height-950: var(--uds-primitive-font-line-height-850); /* 68px */
--uds-font-scale-line-height-1000: var(--uds-primitive-font-line-height-900); /* 72px */
}
/* ---- Font scale: larger ---- */
[data-font-scale="larger"] {
/* Size */
--uds-font-scale-size-xs: var(--uds-primitive-font-size-xs); /* 12px */
--uds-font-scale-size-sm: var(--uds-primitive-font-size-sm); /* 14px */
--uds-font-scale-size-base: var(--uds-primitive-font-size-base); /* 16px */
--uds-font-scale-size-md: var(--uds-primitive-font-size-md); /* 18px */
--uds-font-scale-size-lg: var(--uds-primitive-font-size-lg); /* 20px */
--uds-font-scale-size-xl: var(--uds-primitive-font-size-xl); /* 24px */
--uds-font-scale-size-2xl: var(--uds-primitive-font-size-2xl); /* 28px */
--uds-font-scale-size-3xl: var(--uds-primitive-font-size-3xl); /* 32px */
--uds-font-scale-size-4xl: var(--uds-primitive-font-size-4xl); /* 36px */
--uds-font-scale-size-5xl: var(--uds-primitive-font-size-5xl); /* 40px */
--uds-font-scale-size-6xl: var(--uds-primitive-font-size-6xl); /* 44px */
--uds-font-scale-size-7xl: var(--uds-primitive-font-size-7xl); /* 48px */
--uds-font-scale-size-8xl: var(--uds-primitive-font-size-8xl); /* 52px */
--uds-font-scale-size-9xl: var(--uds-primitive-font-size-9xl); /* 56px */
--uds-font-scale-size-10xl: var(--uds-primitive-font-size-10xl); /* 60px */
/* Line Height */
--uds-font-scale-line-height-200: var(--uds-primitive-font-line-height-200); /* 16px */
--uds-font-scale-line-height-250: var(--uds-primitive-font-line-height-250); /* 20px */
--uds-font-scale-line-height-base: var(--uds-primitive-font-line-height-300); /* 24px */
--uds-font-scale-line-height-325: var(--uds-primitive-font-line-height-325); /* 26px */
--uds-font-scale-line-height-350: var(--uds-primitive-font-line-height-350); /* 28px */
--uds-font-scale-line-height-400: var(--uds-primitive-font-line-height-400); /* 32px */
--uds-font-scale-line-height-450: var(--uds-primitive-font-line-height-450); /* 36px */
--uds-font-scale-line-height-500: var(--uds-primitive-font-line-height-500); /* 40px */
--uds-font-scale-line-height-550: var(--uds-primitive-font-line-height-550); /* 44px */
--uds-font-scale-line-height-600: var(--uds-primitive-font-line-height-600); /* 48px */
--uds-font-scale-line-height-650: var(--uds-primitive-font-line-height-650); /* 52px */
--uds-font-scale-line-height-700: var(--uds-primitive-font-line-height-700); /* 56px */
--uds-font-scale-line-height-750: var(--uds-primitive-font-line-height-750); /* 60px */
--uds-font-scale-line-height-800: var(--uds-primitive-font-line-height-800); /* 64px */
--uds-font-scale-line-height-850: var(--uds-primitive-font-line-height-850); /* 68px */
--uds-font-scale-line-height-900: var(--uds-primitive-font-line-height-900); /* 72px */
--uds-font-scale-line-height-950: var(--uds-primitive-font-line-height-950); /* 76px */
--uds-font-scale-line-height-1000: var(--uds-primitive-font-line-height-1000); /* 80px */
}
/* ==========================================================================
DENSITY — uds-space: comfortable
========================================================================== */
[data-density="comfortable"] {
--uds-space-025: var(--uds-primitive-space-075); /* 6px */
--uds-space-050: var(--uds-primitive-space-100); /* 8px */
--uds-space-075: var(--uds-primitive-space-125); /* 10px */
--uds-space-100: var(--uds-primitive-space-150); /* 12px */
--uds-space-125: var(--uds-primitive-space-175); /* 14px */
--uds-space-150: var(--uds-primitive-space-200); /* 16px */
--uds-space-175: var(--uds-primitive-space-250); /* 20px */
--uds-space-200: var(--uds-primitive-space-300); /* 24px */
--uds-space-250: var(--uds-primitive-space-350); /* 28px */
--uds-space-300: var(--uds-primitive-space-400); /* 32px */
--uds-space-350: var(--uds-primitive-space-450); /* 36px */
--uds-space-400: var(--uds-primitive-space-500); /* 40px */
--uds-space-450: var(--uds-primitive-space-550); /* 44px */
--uds-space-500: var(--uds-primitive-space-600); /* 48px */
--uds-space-550: var(--uds-primitive-space-650); /* 52px */
--uds-space-600: var(--uds-primitive-space-700); /* 56px */
--uds-space-650: var(--uds-primitive-space-750); /* 60px */
--uds-space-700: var(--uds-primitive-space-800); /* 64px */
--uds-space-750: var(--uds-primitive-space-850); /* 68px */
--uds-space-800: var(--uds-primitive-space-900); /* 72px */
--uds-space-850: var(--uds-primitive-space-950); /* 76px */
--uds-space-900: var(--uds-primitive-space-1000); /* 80px */
--uds-space-950: var(--uds-primitive-space-1050); /* 84px */
--uds-space-1000: var(--uds-primitive-space-1100); /* 88px */
--uds-space-1050: var(--uds-primitive-space-1150); /* 92px */
--uds-space-1100: var(--uds-primitive-space-1200); /* 96px */
--uds-space-1150: var(--uds-primitive-space-1250); /* 100px */
--uds-space-1200: var(--uds-primitive-space-1250); /* 100px */
}