{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "aurora-tokens", "title": "Aurora Design System Tokens", "author": "jmagar ", "description": "Aurora CSS custom property token definitions for the full Aurora color, typography, shadow, and radius system.", "dependencies": [], "files": [ { "path": "registry/aurora/styles/aurora.css", "content": "/* Aurora Design System — token definitions\n Import this once at the app root. All Aurora components depend on these vars. */\n\n/* ─── Dark (default) ───────────────────────────────────────────────────── */\n:root,\n.dark {\n /* Surfaces — navy lift tiers */\n --aurora-page-bg: #07131c;\n --aurora-bg: var(--aurora-page-bg);\n --aurora-nav-bg: #07111a;\n --aurora-panel-medium: #102330;\n --aurora-panel-medium-top: rgba(20, 44, 60, 0.18);\n --aurora-panel-strong: #13293a;\n --aurora-panel-strong-top: #173245;\n --aurora-control-surface: #0c1a24;\n --aurora-hover-bg: #17364b;\n --aurora-surface-raised: linear-gradient(180deg, rgba(18, 40, 56, 0.96), rgba(12, 27, 38, 0.98));\n\n /* Borders */\n --aurora-border-default: #1d3d4e;\n --aurora-border-strong: #24536c;\n\n /* Text */\n --aurora-text-primary: #e6f4fb;\n --aurora-text-muted: #a7bcc9;\n\n /* Primary accent — Aurora cyan */\n --aurora-accent-primary: #29b6f6;\n --aurora-accent-strong: #67cbfa;\n --aurora-accent-deep: #1c7fac;\n --aurora-accent-lift: #4dc8fa;\n --aurora-accent-button: #1da8e6;\n --aurora-accent-foreground: #051520;\n --aurora-accent-gradient: linear-gradient(180deg, var(--aurora-accent-lift) 0%, var(--aurora-accent-button) 100%);\n\n /* Secondary accent — Aurora rose */\n --aurora-accent-pink: #f9a8c4;\n --aurora-accent-pink-strong: #fbc4d6;\n --aurora-accent-pink-deep: #c46b88;\n --aurora-accent-pink-button: #e879a0;\n --aurora-accent-pink-foreground: #fdeaf1;\n --aurora-rose-gradient: linear-gradient(180deg, var(--aurora-accent-pink) 0%, var(--aurora-accent-pink-button) 100%);\n\n /* Violet removed — AI/automation identity uses --axon-orange. */\n\n /* Expressive surface tokens — rose (extends existing rose family) */\n --aurora-accent-pink-surface: color-mix(in srgb, var(--aurora-accent-pink) 12%, var(--aurora-panel-medium));\n --aurora-accent-pink-border: color-mix(in srgb, var(--aurora-accent-pink) 32%, transparent);\n\n /* Expressive surface tokens — cyan (primary). Mirror the rose family so the\n cyan tone tracks the theme instead of hand-mixing colors in the component. */\n --aurora-accent-primary-surface: color-mix(in srgb, var(--aurora-accent-primary) 12%, var(--aurora-panel-medium));\n --aurora-accent-primary-border: color-mix(in srgb, var(--aurora-accent-primary) 34%, transparent);\n --aurora-accent-primary-foreground: color-mix(in srgb, var(--aurora-accent-primary) 88%, white);\n\n /* Status — muted, never neon */\n --aurora-success: #7dd3c7;\n --aurora-warn: #c6a36b;\n --aurora-error: #c78490;\n --aurora-error-lift: #d9909a;\n --aurora-error-gradient: linear-gradient(180deg, var(--aurora-error-lift) 0%, var(--aurora-error) 100%);\n /* Semantic state families — surface / border / foreground per state */\n --aurora-info: #72c8f5;\n --aurora-info-surface: color-mix(in srgb, var(--aurora-info) 12%, var(--aurora-panel-medium));\n --aurora-info-border: color-mix(in srgb, var(--aurora-info) 34%, transparent);\n --aurora-info-foreground: #dff5ff;\n\n --aurora-success-surface: color-mix(in srgb, var(--aurora-success) 12%, var(--aurora-panel-medium));\n --aurora-success-border: color-mix(in srgb, var(--aurora-success) 34%, transparent);\n --aurora-success-foreground: #dcfbf6;\n\n --aurora-warn-surface: color-mix(in srgb, var(--aurora-warn) 12%, var(--aurora-panel-medium));\n --aurora-warn-border: color-mix(in srgb, var(--aurora-warn) 34%, transparent);\n --aurora-warn-foreground: #f8ead0;\n\n --aurora-error-surface: color-mix(in srgb, var(--aurora-error) 12%, var(--aurora-panel-medium));\n --aurora-error-border: color-mix(in srgb, var(--aurora-error) 34%, transparent);\n --aurora-error-foreground: #fde6eb;\n\n --aurora-neutral: #91a8b6;\n --aurora-neutral-surface: color-mix(in srgb, var(--aurora-neutral) 10%, var(--aurora-panel-medium));\n --aurora-neutral-border: color-mix(in srgb, var(--aurora-neutral) 28%, transparent);\n --aurora-neutral-foreground: #d7e3ea;\n\n /* Interaction + system */\n --aurora-overlay: rgba(4, 10, 14, 0.72);\n --aurora-disabled-text: color-mix(in srgb, var(--aurora-text-muted) 72%, var(--aurora-border-strong));\n --aurora-disabled-surface: color-mix(in srgb, var(--aurora-control-surface) 88%, var(--aurora-border-default));\n --aurora-subtle-bg: color-mix(in srgb, var(--aurora-hover-bg) 52%, transparent);\n --aurora-selected-bg: color-mix(in srgb, var(--aurora-accent-primary) 14%, transparent);\n --aurora-pressed-bg: color-mix(in srgb, var(--aurora-accent-primary) 20%, transparent);\n --aurora-focus-ring-strong: color-mix(in srgb, var(--aurora-accent-primary) 52%, transparent);\n\n /* --aurora-status-offline is deprecated; alias to --aurora-neutral. Remove after all consumers migrate. */\n --aurora-status-offline: var(--aurora-neutral);\n\n /* Code accents */\n --aurora-code-type: #b8d9f5;\n --aurora-code-function: var(--aurora-accent-strong);\n\n /* Control internals */\n --aurora-switch-thumb-gradient: linear-gradient(180deg, #ffffff 0%, #daedf7 100%);\n\n /* Shadows & glows */\n --aurora-shadow-medium: 0 12px 24px rgba(0, 0, 0, 0.18);\n --aurora-shadow-strong: 0 20px 38px rgba(0, 0, 0, 0.26);\n --aurora-highlight-medium: inset 0 1px 0 rgba(255, 255, 255, 0.035);\n --aurora-highlight-strong: inset 0 1px 0 rgba(255, 255, 255, 0.055);\n --aurora-active-glow: 0 0 0 1px color-mix(in srgb, #29b6f6 28%, transparent),\n 0 2px 8px color-mix(in srgb, #29b6f6 18%, transparent);\n --aurora-focus-ring: color-mix(in srgb, #29b6f6 30%, transparent);\n\n /* Radii */\n --aurora-radius-1: 14px;\n --aurora-radius-2: 18px;\n --aurora-radius-3: 22px;\n\n /* Motion — Aurora easing (matches Claude Design source) */\n --motion-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);\n --motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n --motion-duration-instant: 100ms;\n --motion-duration-fast: 160ms;\n --motion-duration-medium: 240ms;\n --motion-duration-slow: 360ms;\n\n /* AI / automation accent — Axon orange. Replaces violet. */\n --axon-orange: #ff9645;\n --axon-orange-strong: #ffb474;\n --axon-orange-deep: #c96a1c;\n --axon-orange-button: #f5801f;\n --axon-orange-surface: color-mix(in srgb, var(--axon-orange) 14%, var(--aurora-control-surface));\n --axon-orange-border: color-mix(in srgb, var(--axon-orange) 36%, transparent);\n\n /* Raised control-surface top stop (Claude Design parity) */\n --aurora-control-surface-top: rgba(18, 40, 56, 0.96);\n\n /* Tints — named alpha scale */\n --aurora-tint-subtle: 12%;\n --aurora-tint-soft: 18%;\n --aurora-tint-medium: 30%;\n --aurora-tint-strong: 40%;\n\n /* Spacing scale */\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 10px;\n --space-4: 12px;\n --space-5: 16px;\n --space-6: 20px;\n --space-7: 24px;\n\n /* Z-index layers */\n --z-sidebar: 30;\n --z-popover: 40;\n --z-modal: 50;\n --z-toast: 60;\n\n /* Line heights (Claude Design token names) */\n --lh-display-tight: 1.04;\n --lh-display: 1.16;\n --lh-body: 1.55;\n --lh-dense: 1.40;\n\n /* Unprefixed radius aliases — Claude Design components reference these */\n --radius-1: var(--aurora-radius-1);\n --radius-2: var(--aurora-radius-2);\n --radius-3: var(--aurora-radius-3);\n --radius-pill: 999px;\n\n /* Unprefixed font aliases — Claude Design components reference these.\n --font-mono intentionally resolves to the repo's JetBrains Mono stack. */\n --font-display: var(--aurora-font-display);\n --font-sans: var(--aurora-font-sans);\n --font-mono: var(--aurora-font-mono);\n\n /* Live-preview palette — restricted scope (exposure-policy editor) */\n --aurora-preview-allowed: #00e676;\n --aurora-preview-unmatched: #ff9100;\n --aurora-preview-highlight: #ffea00;\n\n /* Typography */\n --aurora-font-display: 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;\n --aurora-font-sans: 'Inter', 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;\n --aurora-font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;\n --aurora-type-body: 14px;\n --aurora-type-body-sm: 13px;\n --aurora-type-control: 13px;\n --aurora-type-table: 13px;\n --aurora-type-label: 12px;\n --aurora-type-caption: 11px;\n --aurora-type-micro: 10.5px;\n --aurora-line-body: 1.58;\n --aurora-line-ui: 1.35;\n --aurora-line-dense: 1.28;\n --aurora-letter-ui: 0.005em;\n --aurora-letter-label: 0.012em;\n --aurora-letter-meta: 0.018em;\n --aurora-letter-eyebrow: 0.095em;\n --aurora-weight-body: 480;\n --aurora-weight-ui: 560;\n --aurora-weight-label: 650;\n --aurora-weight-heading: 760;\n\n /* Page shell — the two-radial aurora wash */\n --aurora-shell-bg: radial-gradient(circle at 12% 0%, rgba(41, 182, 246, 0.09), transparent 28%),\n radial-gradient(circle at 88% 0%, rgba(28, 127, 172, 0.10), transparent 24%),\n var(--aurora-page-bg);\n\n /* shadcn token bridge — dark */\n --background: var(--aurora-page-bg);\n --foreground: var(--aurora-text-primary);\n --card: var(--aurora-panel-medium);\n --card-foreground: var(--aurora-text-primary);\n --popover: var(--aurora-panel-strong);\n --popover-foreground: var(--aurora-text-primary);\n --primary: var(--aurora-accent-primary);\n --primary-foreground: var(--aurora-accent-foreground);\n --secondary: var(--aurora-panel-medium);\n --secondary-foreground: var(--aurora-text-primary);\n --muted: var(--aurora-control-surface);\n --muted-foreground: var(--aurora-text-muted);\n --accent: var(--aurora-hover-bg);\n --accent-foreground: var(--aurora-text-primary);\n --destructive: var(--aurora-error);\n --destructive-foreground: var(--aurora-text-primary);\n --border: var(--aurora-border-default);\n --input: var(--aurora-control-surface);\n --ring: var(--aurora-focus-ring);\n --radius: 14px;\n --sidebar: var(--aurora-nav-bg);\n --sidebar-foreground: var(--aurora-text-primary);\n --sidebar-primary: var(--aurora-accent-primary);\n --sidebar-primary-foreground: var(--aurora-accent-foreground);\n --sidebar-accent: var(--aurora-hover-bg);\n --sidebar-accent-foreground: var(--aurora-text-primary);\n --sidebar-border: var(--aurora-border-default);\n --sidebar-ring: var(--aurora-focus-ring);\n}\n\n/* ─── Light ─────────────────────────────────────────────────────────────── */\n.light {\n --aurora-page-bg: #f0f6f8;\n --aurora-bg: var(--aurora-page-bg);\n --aurora-nav-bg: #e4f0f5;\n --aurora-panel-medium: #ffffff;\n --aurora-panel-medium-top: rgba(255, 255, 255, 0.5);\n --aurora-panel-strong: #f8fbfc;\n --aurora-panel-strong-top: #ffffff;\n --aurora-control-surface: #edf5f8;\n --aurora-control-surface-top: rgba(215, 232, 239, 0.96);\n --axon-orange: #e0731a;\n --axon-orange-strong: #c25f10;\n --axon-orange-deep: #a8540e;\n --axon-orange-button: #cc640f;\n --axon-orange-surface: color-mix(in srgb, var(--axon-orange) 10%, var(--aurora-panel-medium));\n --axon-orange-border: color-mix(in srgb, var(--axon-orange) 28%, transparent);\n --aurora-hover-bg: #dceef4;\n --aurora-surface-raised: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(237, 245, 248, 0.98));\n --aurora-border-default: #b8d0da;\n --aurora-border-strong: #8fb4c4;\n --aurora-text-primary: #07131c;\n --aurora-text-muted: #3d6070;\n --aurora-accent-primary: #0288d1;\n --aurora-accent-strong: #0277bd;\n --aurora-accent-deep: #01579b;\n --aurora-accent-lift: #1aa6e8;\n --aurora-accent-button: #0277bd;\n --aurora-accent-foreground: #ffffff;\n --aurora-accent-pink: #d63a6f;\n --aurora-accent-pink-strong: #e0527f;\n --aurora-accent-pink-deep: #a0284f;\n --aurora-accent-pink-button: #b82f60;\n --aurora-accent-pink-foreground: #6f1636;\n\n /* Violet removed — AI/automation identity uses --axon-orange. */\n\n /* Rose surfaces (light) */\n --aurora-accent-pink-surface: color-mix(in srgb, var(--aurora-accent-pink) 10%, var(--aurora-panel-medium));\n --aurora-accent-pink-border: color-mix(in srgb, var(--aurora-accent-pink) 26%, transparent);\n\n /* Cyan (primary) surfaces (light) — foreground darkens for contrast on the\n light tinted surface (the dark-theme 88%-white mix would be illegible here). */\n --aurora-accent-primary-surface: color-mix(in srgb, var(--aurora-accent-primary) 10%, var(--aurora-panel-medium));\n --aurora-accent-primary-border: color-mix(in srgb, var(--aurora-accent-primary) 30%, transparent);\n --aurora-accent-primary-foreground: color-mix(in srgb, var(--aurora-accent-primary) 45%, #07131c);\n\n --aurora-success: #2d7d6e;\n --aurora-warn: #8a6914;\n --aurora-error: #9c3545;\n --aurora-error-lift: #b84a5b;\n\n /* Semantic families (light) */\n --aurora-info: #0f7db8;\n --aurora-info-surface: color-mix(in srgb, var(--aurora-info) 10%, var(--aurora-panel-medium));\n --aurora-info-border: color-mix(in srgb, var(--aurora-info) 26%, transparent);\n --aurora-info-foreground: #0a4f74;\n\n --aurora-success-surface: color-mix(in srgb, var(--aurora-success) 12%, var(--aurora-panel-medium));\n --aurora-success-border: color-mix(in srgb, var(--aurora-success) 24%, transparent);\n --aurora-success-foreground: #184b43;\n\n --aurora-warn-surface: color-mix(in srgb, var(--aurora-warn) 12%, var(--aurora-panel-medium));\n --aurora-warn-border: color-mix(in srgb, var(--aurora-warn) 24%, transparent);\n --aurora-warn-foreground: #5c450c;\n\n --aurora-error-surface: color-mix(in srgb, var(--aurora-error) 10%, var(--aurora-panel-medium));\n --aurora-error-border: color-mix(in srgb, var(--aurora-error) 24%, transparent);\n --aurora-error-foreground: #6f2330;\n\n --aurora-neutral: #6f8793;\n --aurora-neutral-surface: color-mix(in srgb, var(--aurora-neutral) 12%, var(--aurora-panel-medium));\n --aurora-neutral-border: color-mix(in srgb, var(--aurora-neutral) 24%, transparent);\n --aurora-neutral-foreground: #334e5d;\n\n /* Interaction (light) */\n --aurora-overlay: rgba(7, 19, 28, 0.18);\n --aurora-disabled-text: color-mix(in srgb, var(--aurora-text-muted) 66%, var(--aurora-border-strong));\n --aurora-disabled-surface: color-mix(in srgb, var(--aurora-control-surface) 78%, var(--aurora-panel-medium));\n --aurora-subtle-bg: color-mix(in srgb, var(--aurora-hover-bg) 66%, transparent);\n --aurora-selected-bg: color-mix(in srgb, var(--aurora-accent-primary) 10%, var(--aurora-panel-medium));\n --aurora-pressed-bg: color-mix(in srgb, var(--aurora-accent-primary) 16%, var(--aurora-panel-medium));\n --aurora-focus-ring-strong: color-mix(in srgb, var(--aurora-accent-primary) 40%, transparent);\n\n /* --aurora-status-offline is deprecated; alias to --aurora-neutral. Remove after all consumers migrate. */\n --aurora-status-offline: var(--aurora-neutral);\n --aurora-code-type: #24536c;\n --aurora-code-function: #01579b;\n --aurora-switch-thumb-gradient: linear-gradient(180deg, #ffffff 0%, #d8edf6 100%);\n --aurora-shadow-medium: 0 4px 12px rgba(7, 19, 28, 0.08);\n --aurora-shadow-strong: 0 8px 24px rgba(7, 19, 28, 0.12);\n --aurora-shell-bg: radial-gradient(circle at 12% 0%, rgba(2, 136, 209, 0.06), transparent 28%),\n radial-gradient(circle at 88% 0%, rgba(1, 87, 155, 0.05), transparent 24%),\n var(--aurora-page-bg);\n\n --background: var(--aurora-page-bg);\n --foreground: var(--aurora-text-primary);\n --card: var(--aurora-panel-medium);\n --card-foreground: var(--aurora-text-primary);\n --popover: var(--aurora-panel-strong);\n --popover-foreground: var(--aurora-text-primary);\n --primary: var(--aurora-accent-primary);\n --primary-foreground: var(--aurora-accent-foreground);\n --secondary: var(--aurora-control-surface);\n --secondary-foreground: var(--aurora-text-primary);\n --muted: var(--aurora-control-surface);\n --muted-foreground: var(--aurora-text-muted);\n --accent: var(--aurora-hover-bg);\n --accent-foreground: var(--aurora-text-primary);\n --destructive: var(--aurora-error);\n --border: var(--aurora-border-default);\n --input: var(--aurora-control-surface);\n --ring: var(--aurora-focus-ring);\n --sidebar: var(--aurora-nav-bg);\n --sidebar-border: var(--aurora-border-default);\n}\n\n/* ─── Page shell utility ─────────────────────────────────────────────────── */\n.aurora-page-shell {\n min-height: 100vh;\n background: var(--aurora-shell-bg);\n color: var(--aurora-text-primary);\n font-family: var(--aurora-font-sans);\n font-feature-settings: \"kern\" 1, \"liga\" 1, \"cv05\" 1, \"cv10\" 1, \"tnum\" 0;\n font-size: var(--aurora-type-body);\n font-synthesis-weight: none;\n letter-spacing: 0;\n line-height: var(--aurora-line-body);\n text-rendering: geometricPrecision;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\n.aurora-nav-shell {\n background: var(--aurora-nav-bg);\n border-right: 1px solid var(--aurora-border-default);\n}\n\n.aurora-text-body {\n color: var(--aurora-text-primary);\n font-family: var(--aurora-font-sans);\n font-size: var(--aurora-type-body);\n font-weight: var(--aurora-weight-body);\n letter-spacing: 0;\n line-height: var(--aurora-line-body);\n}\n\n.aurora-text-body-sm {\n color: var(--aurora-text-primary);\n font-family: var(--aurora-font-sans);\n font-size: var(--aurora-type-body-sm);\n font-weight: var(--aurora-weight-body);\n letter-spacing: var(--aurora-letter-ui);\n line-height: 1.5;\n}\n\n.aurora-text-ui {\n font-family: var(--aurora-font-sans);\n font-size: var(--aurora-type-body-sm);\n font-weight: var(--aurora-weight-ui);\n letter-spacing: var(--aurora-letter-ui);\n line-height: var(--aurora-line-ui);\n}\n\n.aurora-text-caption {\n font-family: var(--aurora-font-sans);\n font-size: var(--aurora-type-caption);\n font-weight: var(--aurora-weight-ui);\n letter-spacing: var(--aurora-letter-label);\n line-height: 1.35;\n}\n\n.aurora-text-eyebrow {\n font-family: var(--aurora-font-sans);\n font-size: var(--aurora-type-caption);\n font-weight: var(--aurora-weight-label);\n letter-spacing: var(--aurora-letter-eyebrow);\n line-height: 1.15;\n text-transform: uppercase;\n}\n\n.aurora-text-label {\n color: var(--aurora-text-primary);\n font-family: var(--aurora-font-sans);\n font-size: var(--aurora-type-label);\n font-weight: var(--aurora-weight-label);\n letter-spacing: var(--aurora-letter-label);\n line-height: var(--aurora-line-ui);\n}\n\n.aurora-text-control {\n font-family: var(--aurora-font-sans);\n font-size: var(--aurora-type-control);\n font-weight: var(--aurora-weight-ui);\n letter-spacing: var(--aurora-letter-ui);\n line-height: var(--aurora-line-dense);\n}\n\n.aurora-text-table {\n font-family: var(--aurora-font-sans);\n font-size: var(--aurora-type-table);\n font-weight: var(--aurora-weight-body);\n letter-spacing: var(--aurora-letter-ui);\n line-height: 1.42;\n}\n\n.aurora-text-meta {\n color: var(--aurora-text-muted);\n font-family: var(--aurora-font-sans);\n font-size: var(--aurora-type-caption);\n font-weight: var(--aurora-weight-ui);\n letter-spacing: var(--aurora-letter-meta);\n line-height: 1.35;\n}\n\n.aurora-text-code {\n font-family: var(--aurora-font-mono);\n font-size: 0.93em;\n font-weight: 520;\n letter-spacing: 0;\n}\n\n.aurora-text-section {\n color: var(--aurora-text-primary);\n font-family: var(--aurora-font-display);\n font-size: 18px;\n font-weight: var(--aurora-weight-heading);\n letter-spacing: -0.015em;\n line-height: 1.2;\n}\n\n.aurora-text-display-1 {\n color: var(--aurora-text-primary);\n font-family: var(--aurora-font-display);\n font-size: clamp(24px, 5vw, 34px);\n font-weight: 800;\n letter-spacing: -0.045em;\n line-height: 1.1;\n}\n\n.aurora-text-display-2 {\n color: var(--aurora-text-primary);\n font-family: var(--aurora-font-display);\n font-size: clamp(17px, 3vw, 19px);\n font-weight: 700;\n letter-spacing: -0.015em;\n line-height: 1.25;\n}\n\n/* Marketing scale — site landing/section heroes only. A scaled display-1:\n same Manrope face, same -0.045em tracking, larger optical size. Not for\n in-app/operator surfaces (use display-1/-2 there). */\n.aurora-text-display-hero {\n color: var(--aurora-text-primary);\n font-family: var(--aurora-font-display);\n font-size: clamp(40px, 7vw, 76px);\n font-weight: 800;\n letter-spacing: -0.045em;\n line-height: 0.98;\n}\n\n.aurora-text-lead {\n color: var(--aurora-text-muted);\n font-family: var(--aurora-font-sans);\n font-size: clamp(15px, 2.2vw, 18px);\n font-weight: var(--aurora-weight-body);\n letter-spacing: 0;\n line-height: 1.5;\n}\n\n.aurora-slider::-webkit-slider-runnable-track {\n height: 6px;\n border-radius: 999px;\n background:\n linear-gradient(\n 90deg,\n var(--aurora-accent-primary) 0%,\n var(--aurora-accent-primary) var(--aurora-slider-value, 0%),\n var(--aurora-control-surface) var(--aurora-slider-value, 0%),\n var(--aurora-control-surface) 100%\n );\n border: 1px solid var(--aurora-border-strong);\n}\n\n.aurora-slider::-webkit-slider-thumb {\n appearance: none;\n width: 16px;\n height: 16px;\n margin-top: -6px;\n border-radius: 999px;\n background: var(--aurora-accent-primary);\n border: 2px solid var(--aurora-panel-strong);\n box-shadow:\n 0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 45%, transparent),\n 0 0 12px color-mix(in srgb, var(--aurora-accent-primary) 35%, transparent);\n}\n\n.aurora-slider::-moz-range-track {\n height: 6px;\n border-radius: 999px;\n background: var(--aurora-control-surface);\n border: 1px solid var(--aurora-border-strong);\n}\n\n.aurora-slider::-moz-range-progress {\n height: 6px;\n border-radius: 999px;\n background: var(--aurora-accent-primary);\n}\n\n.aurora-slider::-moz-range-thumb {\n width: 14px;\n height: 14px;\n border-radius: 999px;\n background: var(--aurora-accent-primary);\n border: 2px solid var(--aurora-panel-strong);\n box-shadow:\n 0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 45%, transparent),\n 0 0 12px color-mix(in srgb, var(--aurora-accent-primary) 35%, transparent);\n}\n\n/* ─── Scrollbars ───────────────────────────────────────────────────────── */\n* {\n scrollbar-width: thin;\n scrollbar-color: color-mix(in srgb, var(--aurora-border-strong) 82%, var(--aurora-accent-primary))\n color-mix(in srgb, var(--aurora-control-surface) 72%, transparent);\n}\n\n*::-webkit-scrollbar {\n width: 10px;\n height: 10px;\n}\n\n*::-webkit-scrollbar-track {\n background: color-mix(in srgb, var(--aurora-control-surface) 72%, transparent);\n border-radius: 999px;\n}\n\n*::-webkit-scrollbar-thumb {\n background: linear-gradient(\n 180deg,\n color-mix(in srgb, var(--aurora-border-strong) 82%, var(--aurora-accent-primary)) 0%,\n color-mix(in srgb, var(--aurora-border-strong) 70%, var(--aurora-accent-deep)) 100%\n );\n border: 2px solid color-mix(in srgb, var(--aurora-control-surface) 80%, transparent);\n border-radius: 999px;\n}\n\n*::-webkit-scrollbar-thumb:hover {\n background: linear-gradient(\n 180deg,\n var(--aurora-accent-strong) 0%,\n var(--aurora-accent-primary) 100%\n );\n}\n\n*::-webkit-scrollbar-corner {\n background: transparent;\n}\n\n@media (prefers-reduced-motion: reduce) {\n :where(.aurora-page-shell, [class^=\"aurora-\"], [class*=\" aurora-\"]) *,\n :where(.aurora-page-shell, [class^=\"aurora-\"], [class*=\" aurora-\"]) {\n animation-duration: 1ms !important;\n animation-iteration-count: 1 !important;\n scroll-behavior: auto !important;\n transition-duration: 1ms !important;\n }\n}\n\n/* Badge live-dot pulse. Lives here (not injected at runtime by the component)\n so it is SSR-safe, CSP-safe, and present on first paint. The dot sets\n --badge-dot-color inline; this one keyframe works across every tone. */\n@keyframes aurora-badge-pulse {\n 0%, 100% {\n box-shadow:\n 0 0 0 0 color-mix(in srgb, var(--badge-dot-color) 40%, transparent),\n 0 0 4px var(--badge-dot-color);\n }\n 50% {\n box-shadow:\n 0 0 0 4px transparent,\n 0 0 6px var(--badge-dot-color);\n }\n}\n\n.aurora-badge-dot--pulse {\n animation: aurora-badge-pulse 1.6s ease-in-out infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .aurora-badge-dot--pulse {\n animation: none;\n }\n}\n", "type": "registry:style" } ], "cssVars": { "theme": { "font-aurora-display": "'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif", "font-aurora-sans": "'Inter', 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif", "font-aurora-mono": "'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace", "radius-aurora-1": "14px", "radius-aurora-2": "18px", "radius-aurora-3": "22px" }, "light": { "aurora-page-bg": "#f0f6f8", "aurora-bg": "var(--aurora-page-bg)", "aurora-nav-bg": "#e4f0f5", "aurora-panel-medium": "#ffffff", "aurora-panel-strong": "#f8fbfc", "aurora-control-surface": "#edf5f8", "aurora-hover-bg": "#dceef4", "aurora-surface-raised": "linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(237, 245, 248, 0.98))", "aurora-border-default": "#b8d0da", "aurora-border-strong": "#8fb4c4", "aurora-text-primary": "#07131c", "aurora-text-muted": "#3d6070", "aurora-accent-primary": "#0288d1", "aurora-accent-strong": "#0277bd", "aurora-accent-deep": "#01579b", "aurora-accent-lift": "#1aa6e8", "aurora-accent-button": "#0277bd", "aurora-accent-foreground": "#ffffff", "aurora-accent-pink": "#d63a6f", "aurora-accent-pink-strong": "#e0527f", "aurora-accent-pink-deep": "#a0284f", "aurora-accent-pink-button": "#b82f60", "aurora-success": "#2d7d6e", "aurora-warn": "#8a6914", "aurora-error": "#9c3545", "aurora-error-lift": "#b84a5b", "aurora-status-offline": "#6f8793", "aurora-code-type": "#24536c", "aurora-code-function": "#01579b", "aurora-switch-thumb-gradient": "linear-gradient(180deg, #ffffff 0%, #d8edf6 100%)", "aurora-shadow-medium": "0 4px 12px rgba(7, 19, 28, 0.08)", "aurora-shadow-strong": "0 8px 24px rgba(7, 19, 28, 0.12)", "aurora-shell-bg": "radial-gradient(circle at 12% 0%, rgba(2, 136, 209, 0.06), transparent 28%), radial-gradient(circle at 88% 0%, rgba(1, 87, 155, 0.05), transparent 24%), var(--aurora-page-bg)", "background": "var(--aurora-page-bg)", "foreground": "var(--aurora-text-primary)", "card": "var(--aurora-panel-medium)", "card-foreground": "var(--aurora-text-primary)", "popover": "var(--aurora-panel-strong)", "popover-foreground": "var(--aurora-text-primary)", "primary": "var(--aurora-accent-primary)", "primary-foreground": "var(--aurora-accent-foreground)", "secondary": "var(--aurora-control-surface)", "secondary-foreground": "var(--aurora-text-primary)", "muted": "var(--aurora-control-surface)", "muted-foreground": "var(--aurora-text-muted)", "accent": "var(--aurora-hover-bg)", "accent-foreground": "var(--aurora-text-primary)", "destructive": "var(--aurora-error)", "border": "var(--aurora-border-default)", "input": "var(--aurora-control-surface)", "ring": "var(--aurora-focus-ring)", "sidebar": "var(--aurora-nav-bg)", "sidebar-border": "var(--aurora-border-default)" }, "dark": { "aurora-page-bg": "#07131c", "aurora-bg": "var(--aurora-page-bg)", "aurora-nav-bg": "#07111a", "aurora-panel-medium": "#102330", "aurora-panel-strong": "#13293a", "aurora-control-surface": "#0c1a24", "aurora-hover-bg": "#17364b", "aurora-surface-raised": "linear-gradient(180deg, rgba(18, 40, 56, 0.96), rgba(12, 27, 38, 0.98))", "aurora-border-default": "#1d3d4e", "aurora-border-strong": "#24536c", "aurora-text-primary": "#e6f4fb", "aurora-text-muted": "#a7bcc9", "aurora-accent-primary": "#29b6f6", "aurora-accent-strong": "#67cbfa", "aurora-accent-deep": "#1c7fac", "aurora-accent-lift": "#4dc8fa", "aurora-accent-button": "#1da8e6", "aurora-accent-foreground": "#051520", "aurora-accent-gradient": "linear-gradient(180deg, var(--aurora-accent-lift) 0%, var(--aurora-accent-button) 100%)", "aurora-accent-pink": "#f9a8c4", "aurora-accent-pink-strong": "#fbc4d6", "aurora-accent-pink-deep": "#c46b88", "aurora-accent-pink-button": "#e879a0", "aurora-rose-gradient": "linear-gradient(180deg, var(--aurora-accent-pink) 0%, var(--aurora-accent-pink-button) 100%)", "aurora-success": "#7dd3c7", "aurora-warn": "#c6a36b", "aurora-error": "#c78490", "aurora-error-lift": "#d9909a", "aurora-error-gradient": "linear-gradient(180deg, var(--aurora-error-lift) 0%, var(--aurora-error) 100%)", "aurora-status-offline": "#3a5568", "aurora-code-type": "#b8d9f5", "aurora-code-function": "var(--aurora-accent-strong)", "aurora-switch-thumb-gradient": "linear-gradient(180deg, #ffffff 0%, #daedf7 100%)", "aurora-shadow-medium": "0 12px 24px rgba(0, 0, 0, 0.18)", "aurora-shadow-strong": "0 20px 38px rgba(0, 0, 0, 0.26)", "aurora-highlight-medium": "inset 0 1px 0 rgba(255, 255, 255, 0.035)", "aurora-highlight-strong": "inset 0 1px 0 rgba(255, 255, 255, 0.055)", "aurora-active-glow": "0 0 0 1px color-mix(in srgb, #29b6f6 28%, transparent), 0 2px 8px color-mix(in srgb, #29b6f6 18%, transparent)", "aurora-focus-ring": "color-mix(in srgb, #29b6f6 30%, transparent)", "aurora-radius-1": "14px", "aurora-radius-2": "18px", "aurora-radius-3": "22px", "aurora-font-display": "'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif", "aurora-font-sans": "'Inter', 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif", "aurora-font-mono": "'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace", "aurora-type-body": "14px", "aurora-type-body-sm": "13px", "aurora-type-control": "13px", "aurora-type-table": "13px", "aurora-type-label": "12px", "aurora-type-caption": "11px", "aurora-type-micro": "10.5px", "aurora-line-body": "1.58", "aurora-line-ui": "1.35", "aurora-line-dense": "1.28", "aurora-letter-ui": "0.005em", "aurora-letter-label": "0.012em", "aurora-letter-meta": "0.018em", "aurora-letter-eyebrow": "0.095em", "aurora-weight-body": "480", "aurora-weight-ui": "560", "aurora-weight-label": "650", "aurora-weight-heading": "760", "aurora-shell-bg": "radial-gradient(circle at 12% 0%, rgba(41, 182, 246, 0.09), transparent 28%), radial-gradient(circle at 88% 0%, rgba(28, 127, 172, 0.10), transparent 24%), var(--aurora-page-bg)", "background": "var(--aurora-page-bg)", "foreground": "var(--aurora-text-primary)", "card": "var(--aurora-panel-medium)", "card-foreground": "var(--aurora-text-primary)", "popover": "var(--aurora-panel-strong)", "popover-foreground": "var(--aurora-text-primary)", "primary": "var(--aurora-accent-primary)", "primary-foreground": "var(--aurora-accent-foreground)", "secondary": "var(--aurora-panel-medium)", "secondary-foreground": "var(--aurora-text-primary)", "muted": "var(--aurora-control-surface)", "muted-foreground": "var(--aurora-text-muted)", "accent": "var(--aurora-hover-bg)", "accent-foreground": "var(--aurora-text-primary)", "destructive": "var(--aurora-error)", "destructive-foreground": "var(--aurora-text-primary)", "border": "var(--aurora-border-default)", "input": "var(--aurora-control-surface)", "ring": "var(--aurora-focus-ring)", "radius": "14px", "sidebar": "var(--aurora-nav-bg)", "sidebar-foreground": "var(--aurora-text-primary)", "sidebar-primary": "var(--aurora-accent-primary)", "sidebar-primary-foreground": "var(--aurora-accent-foreground)", "sidebar-accent": "var(--aurora-hover-bg)", "sidebar-accent-foreground": "var(--aurora-text-primary)", "sidebar-border": "var(--aurora-border-default)", "sidebar-ring": "var(--aurora-focus-ring)" } }, "css": { "@layer base": { ":root": { "color-scheme": "dark" }, ".dark": { "color-scheme": "dark" }, ".light": { "color-scheme": "light" }, "body": { "background": "var(--aurora-shell-bg)", "color": "var(--aurora-text-primary)", "font-family": "var(--aurora-font-sans)" } } }, "meta": { "namespace": "@aurora", "style": "aurora", "family": "style", "requiresTokens": false, "sourcePath": "registry/aurora/styles/aurora.css" }, "docs": "Install this first.\n\nIt provides the Aurora token layer, shadcn token bridge, and base theme helpers used by the rest of the registry.\n\nImport the generated stylesheet once at your app root before installing Aurora UI or block items.\n\nRegistry dependencies: none.", "categories": [ "aurora", "style", "theme" ], "type": "registry:style" }