/* ================================================================= * themes/nexus-lux/nexus-lux.css * nexus-lux — Generated Token CSS (Step 2 of 6) * * ⚠ GENERATED FILE — DO NOT EDIT DIRECTLY * Source of truth: themes/nexus-lux/DESIGN.md * * To regenerate: * bun run src/lib/nexus/translate.ts \ * themes/nexus-lux/DESIGN.md \ * themes/nexus-lux/nexus-lux.css * * Generated: 2026-04-23 * Token count: 131 * ================================================================= */ /* Theme is activated by setting data-theme="nexus-lux" on . * bootstrap.ts reads the user's stored preference from the OWUI users API * and sets this attribute at init. Components only read var(--nx-*) tokens. */ [data-theme='nexus-lux'], :root { /* ── Breakpoints ────────────────────────────────────── */ --nx-bp-2xl: 1440px; --nx-bp-lg: 1024px; --nx-bp-md: 768px; --nx-bp-sm: 640px; --nx-bp-xl: 1280px; --nx-bp-xs: 375px; /* ── Color: Surfaces ──────────────────────────────── */ --nx-color-surface-1: #f4eee6; --nx-color-surface-2: #efeae2; --nx-color-surface-3: #e9e4dd; --nx-color-surface-bg: #f8f3e9; --nx-color-surface-border: #d8d3cd; --nx-color-surface-border-strong: #bdb6ad; --nx-color-surface-divider: #e4e1db; --nx-color-surface-overlay: #010309; --nx-color-surface-navy: #243547; /* ── Color: Text ───────────────────────────────────── */ --nx-color-text-inverse: #f7f4ef; --nx-color-text-link: #995700; --nx-color-text-link-hover: #7f3500; --nx-color-text-muted: #656e7a; --nx-color-text-primary: #07162a; --nx-color-text-secondary: #364355; /* ── Color: Interactive / Amber Accent ──────────────── */ --nx-color-primary-active: #c07800; --nx-color-primary-base: #f0b429; --nx-color-primary-hover: #d4950a; --nx-color-primary-subtle: #fef3d7; /* ── Color: Semantic States ──────────────────────────── */ --nx-color-semantic-error: #97182f; --nx-color-semantic-error-subtle: #ffe6e6; --nx-color-semantic-success: #27762f; --nx-color-semantic-success-subtle: #e1f0e1; --nx-color-semantic-warning: #ab4321; --nx-color-semantic-warning-subtle: #fee7df; /* ── Color: Action Lifecycle States ──────────────────── */ --nx-action-state-done: var(--nx-color-semantic-success); --nx-action-state-error: var(--nx-color-semantic-error); --nx-action-state-pending: var(--nx-color-text-muted); --nx-action-state-running: var(--nx-color-primary-base); /* ── Color: Action Type Grammar ───────────────────────── */ --nx-action-code: #007459; --nx-action-code-subtle: #dff2ec; --nx-action-code-text: var(--nx-color-text-primary); --nx-action-memory: #2e4282; --nx-action-memory-subtle: #e8edfa; --nx-action-memory-text: var(--nx-color-text-primary); --nx-action-planning: #82396d; --nx-action-planning-subtle: #f8e8f2; --nx-action-planning-text: var(--nx-color-text-primary); --nx-action-plan: #82396d; --nx-action-plan-subtle: #f8e8f2; --nx-action-plan-text: var(--nx-color-text-primary); --nx-action-rag: #5f439c; --nx-action-rag-subtle: #eeebfb; --nx-action-rag-text: var(--nx-color-text-primary); --nx-action-search: #006898; --nx-action-search-subtle: #dff0f9; --nx-action-search-text: var(--nx-color-text-primary); --nx-action-thinking: #866300; --nx-action-thinking-subtle: #f5eddb; --nx-action-thinking-text: var(--nx-color-text-primary); --nx-action-tool-call: #a63931; --nx-action-tool-call-subtle: #ffe7e3; --nx-action-tool-call-text: var(--nx-color-text-primary); --nx-action-web-fetch: #007a8f; --nx-action-web-fetch-subtle: #dff1f5; --nx-action-web-fetch-text: var(--nx-color-text-primary); /* ── Color: Field State ───────────────────────────────── */ --nx-field-arc-active: #3772bb; --nx-field-basin-guan: #006978; --nx-field-basin-wen: #a64450; --nx-field-basin-zhi: #776100; --nx-field-bridge-closed: #938e87; --nx-field-bridge-open: #b97500; --nx-field-bridge-pulse: #ffad00; --nx-field-coherence-emergency: #97182f; --nx-field-coherence-full: #33903c; --nx-field-coherence-high: #5a8325; --nx-field-coherence-low: #ad411c; --nx-field-coherence-mid: #ad7300; /* ── Typography: UI Chrome ────────────────────────────── */ /* Major Third (×1.250), unified base 15px, 375px→1440px */ --nx-type-ui-xs: clamp(10px, calc(10px + 1 * ((100vw - 375px) / 1065)), 11px); --nx-type-ui-sm: clamp(12px, calc(12px + 1 * ((100vw - 375px) / 1065)), 13px); --nx-type-ui-base: clamp(15px, calc(15px + 1 * ((100vw - 375px) / 1065)), 16px); --nx-type-ui-lg: clamp(18px, calc(18px + 1 * ((100vw - 375px) / 1065)), 19px); --nx-type-ui-xl: clamp(22px, calc(22px + 2 * ((100vw - 375px) / 1065)), 24px); /* ── Typography: Font Families ─────────────────────────── */ --nx-font-ui: 'Inter', system-ui, sans-serif; /* ── Typography: Weights ───────────────────────────────── */ --nx-weight-medium: 500; --nx-weight-normal: 400; --nx-weight-semibold: 600; /* ── Typography: Line Heights ──────────────────────────── */ --nx-line-height-base: 1.6; --nx-line-height-tight: 1.2; /* ── Typography: Letter Spacing ────────────────────────── */ --nx-letter-spacing-base: 0; --nx-letter-spacing-tracked: 0.06em; /* ── Typography: Prose Rendering ───────────────────────── */ --nx-prose-blockquote-border: color-mix(in oklch, var(--nx-color-primary-base) 40%, transparent); --nx-prose-citation-color: var(--nx-color-text-muted); --nx-prose-citation-font: var(--nx-font-ui); --nx-prose-code-font-size: 0.875em; --nx-prose-font: 'Merriweather', Georgia, serif; --nx-prose-font-mono: 'JetBrains Mono', 'Menlo', monospace; --nx-prose-h-font-weight: 700; /* Major Third (×1.250), unified base 15px — same spine as UI chrome */ --nx-prose-h-line-height: 1.3; --nx-prose-h1: clamp(28px, calc(28px + 3 * ((100vw - 375px) / 1065)), 31px); --nx-prose-h2: clamp(26px, calc(26px + 2 * ((100vw - 375px) / 1065)), 28px); --nx-prose-h3: clamp(22px, calc(22px + 2 * ((100vw - 375px) / 1065)), 24px); --nx-prose-h4: clamp(18px, calc(18px + 1 * ((100vw - 375px) / 1065)), 19px); --nx-prose-line-height: 1.75; --nx-prose-text-base: clamp(15px, calc(15px + 1 * ((100vw - 375px) / 1065)), 16px); --nx-prose-table-header-bg: var(--nx-color-surface-2); --nx-prose-width: 70ch; /* ── Spacing ───────────────────────────────────────────── */ --nx-space-1: 4px; --nx-space-10: clamp(36px, calc(36px + 4 * ((100vw - 375px) / 1065)), 40px); --nx-space-12: clamp(44px, calc(44px + 4 * ((100vw - 375px) / 1065)), 48px); --nx-space-16: clamp(56px, calc(56px + 8 * ((100vw - 375px) / 1065)), 64px); --nx-space-2: 8px; --nx-space-3: 12px; --nx-space-4: 16px; --nx-space-6: clamp(20px, calc(20px + 4 * ((100vw - 375px) / 1065)), 24px); --nx-space-8: clamp(28px, calc(28px + 4 * ((100vw - 375px) / 1065)), 32px); /* ── Radius ────────────────────────────────────────────── */ --nx-radius-full: 9999px; --nx-radius-lg: 12px; --nx-radius-md: 8px; --nx-radius-sm: 4px; --nx-radius-xl: 16px; /* ── Shadows ──────────────────────────────────────────── */ --nx-shadow-inset: inset 0 1px 3px oklch(0.15 0.012 80 / 0.08); --nx-shadow-lg: 0 12px 32px oklch(0.15 0.012 80 / 0.14); --nx-shadow-md: 0 4px 12px oklch(0.15 0.012 80 / 0.1); --nx-shadow-sm: 0 1px 3px oklch(0.15 0.012 80 / 0.08); /* ── Motion: Duration ──────────────────────────────────── */ --nx-duration-base: 250ms; --nx-duration-fast: 150ms; --nx-duration-instant: 80ms; --nx-duration-slow: 400ms; /* ── Motion: Easing ────────────────────────────────────── */ --nx-easing-enter: cubic-bezier(0, 0, 0.2, 1); --nx-easing-exit: cubic-bezier(0.4, 0, 1, 1); --nx-easing-standard: cubic-bezier(0.16, 1, 0.3, 1); /* ── Component Geometry ────────────────────────────────── */ --nx-geometry-icon-lg: 20px; --nx-geometry-icon-md: 16px; --nx-geometry-icon-sm: 14px; --nx-geometry-input-height: 40px; --nx-geometry-pill-height: 28px; --nx-geometry-pill-height-sm: 22px; --nx-geometry-sidebar-width: 260px; /* ── Token Name Aliases ───────────────────────────────── * Mockup (design source of truth) and all Svelte components reference * shorthand names. translate.ts generated semantic-namespaced names. * These aliases bridge the gap: one value source, dual name resolution. * ── Typography shorthands ── */ --nx-text-ui-xs: var(--nx-type-ui-xs); --nx-text-ui-sm: var(--nx-type-ui-sm); --nx-text-ui-base: var(--nx-type-ui-base); --nx-text-ui-lg: var(--nx-type-ui-lg); --nx-text-ui-xl: var(--nx-type-ui-xl); --nx-prose-base: var(--nx-prose-text-base); --nx-font-prose: var(--nx-prose-font); --nx-font-mono: var(--nx-prose-font-mono); /* ── Geometry shorthands ── */ --nx-sidebar-width: var(--nx-geometry-sidebar-width); --nx-pill-height: var(--nx-geometry-pill-height); --nx-pill-height-sm: var(--nx-geometry-pill-height-sm); --nx-input-height: var(--nx-geometry-input-height); --nx-icon-sm: var(--nx-geometry-icon-sm); --nx-icon-md: var(--nx-geometry-icon-md); --nx-icon-lg: var(--nx-geometry-icon-lg); /* ── Missing color token ── */ --nx-color-text-faint: var(--nx-color-text-muted); /* FieldStatusStrip coherence value */ } /* ================================================================= * Global Base * Not scoped to [data-theme] — targets html/body/elements globally. * Replaces src/app.css (OWUI artifact, deleted in #46). * All var(--nx-*) tokens are defined above and resolve once * data-theme="nexus-lux" is set by the inline script in app.html. * Nexus UI does not use any vanilla OWUI frontend routes. * ================================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* height: 100% anchors html to the viewport so that body's 100dvh * resolves against a concrete ceiling rather than expanding to content. */ html { height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; scroll-padding-top: 4rem; } /* height: 100dvh (was min-height) — hard viewport ceiling so .nexus-shell * and its scroll chain are properly bounded. overflow: hidden prevents body * from scrolling; all scrolling is owned by .nx-message-list inside the shell. */ body { height: 100dvh; overflow: hidden; line-height: var(--nx-line-height-base, 1.6); font-family: var(--nx-font-ui, 'Inter', system-ui, sans-serif); font-size: var(--nx-type-ui-base, 14px); color: var(--nx-color-text-primary, #07162a); background-color: var(--nx-color-surface-bg, #f8f3e9); } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; line-height: 1.15; font-family: var(--nx-font-ui, 'Inter', system-ui, sans-serif); } p:not(.nx-prose *), li:not(.nx-prose *), figcaption:not(.nx-prose *) { text-wrap: pretty; max-width: 72ch; } button { cursor: pointer; background: none; border: none; } table { border-collapse: collapse; width: 100%; } ::selection { background: color-mix(in oklch, var(--nx-color-primary-base, #f0b429) 25%, transparent); color: var(--nx-color-text-primary, #07162a); } :focus-visible { outline: 2px solid var(--nx-color-primary-base, #f0b429); outline-offset: 3px; border-radius: var(--nx-radius-sm, 4px); } a, button, [role="button"], input, textarea, select { transition: color 180ms cubic-bezier(0.16, 1, 0.3, 1), background 180ms cubic-bezier(0.16, 1, 0.3, 1), border-color 180ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1), opacity 180ms cubic-bezier(0.16, 1, 0.3, 1); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* ================================================================= * Prose * Applied via class="nx-prose" on the container div that wraps * {@html parseMarkdown(msg.content)} in MessageBubble.svelte. * * WHY GLOBAL: Svelte scopes component