/* ========================================================================== UDS Semantic Tokens — semantic.css Source: Figma variable collections exported as JSON Collections: uds-color (93), 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); --uds-color-surface-interactive-hover: var(--uds-primitive-color-blue-60-M); --uds-color-surface-interactive-active: var(--uds-primitive-color-blue-80); --uds-color-surface-interactive-disabled: var(--uds-primitive-color-neutral-30); --uds-color-surface-interactive-subtle: var(--uds-primitive-color-blue-10); --uds-color-surface-interactive-subtle-hover: var(--uds-primitive-color-blue-20); --uds-color-surface-interactive-subtle-active: var(--uds-primitive-color-blue-30); --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); --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); --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); --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); --uds-color-icon-interactive-hover: var(--uds-primitive-color-blue-60-M); --uds-color-icon-interactive-active: var(--uds-primitive-color-blue-80); --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); --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); --uds-color-border-interactive-hover: var(--uds-primitive-color-blue-60-M); --uds-color-border-interactive-active: var(--uds-primitive-color-blue-80); --uds-color-border-subtle-interactive: var(--uds-primitive-color-blue-20); --uds-color-border-subtle-interactive-hover: var(--uds-primitive-color-blue-30); --uds-color-border-subtle-interactive-active: var(--uds-primitive-color-blue-40); --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-70); --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-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 (surfaces/icons/borders) + lime (text) ---- */ [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-lime-70); --uds-color-text-interactive: var(--uds-primitive-color-lime-70); --uds-color-text-interactive-hover: var(--uds-primitive-color-lime-60-M); --uds-color-text-interactive-active: var(--uds-primitive-color-lime-80); --uds-color-icon-brand: var(--uds-primitive-color-lime-70); --uds-color-icon-interactive: var(--uds-primitive-color-lime-70); --uds-color-icon-interactive-hover: var(--uds-primitive-color-lime-60-M); --uds-color-icon-interactive-active: var(--uds-primitive-color-lime-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 */ }