/* GENERATED: openxp-theme.css — flat bundle for consumers (xpwebsite). DO NOT EDIT. */ /* * theme-engine — font tokens. * * Per DECISIONS.md D-02 (namespace `--xp-*`) and CONTEXT.md §3.1 * (Outfit + Instrument Sans + JetBrains Mono identical across all three surfaces). * * Consumed by: src/tokens/index.css aggregator; consumer presets reference these * families via var(--xp-font-*). */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Instrument+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { --xp-font-heading: 'Outfit', system-ui, -apple-system, sans-serif; --xp-font-body: 'Instrument Sans', system-ui, -apple-system, sans-serif; --xp-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; } /* * theme-engine — generated colour tokens. * * GENERATED FILE. Do not edit. * Source: src/tokens/colors.ts * Generator: scripts/build.mjs * * Per DECISIONS.md D-02 (--xp-* namespace), D-03 (light + dark via [data-theme]). */ :root { --xp-bg-primary: #050507; --xp-bg-surface: #0d0d12; --xp-bg-elevated: #16161d; --xp-border: #1e1e2a; --xp-text-primary: #e8e8ec; --xp-text-secondary: #8e8e9a; --xp-text-subtle: #6b6b76; --xp-accent: #3b82f6; --xp-accent-hover: #2563eb; --xp-success: #22c55e; --xp-warning: #f59e0b; --xp-error: #ef4444; --xp-bg-warm: #1A1614; --xp-border-warm: #2A2420; --xp-text-warm: #B8A898; --xp-moment: #7c3aed; --xp-privacy-transient: #22c55e; --xp-privacy-scoped: #f59e0b; --xp-privacy-retained: #ef4444; } :root[data-theme='light'] { --xp-bg-primary: #f5f4f0; --xp-bg-surface: #ffffff; --xp-bg-elevated: #fafaf7; --xp-border: #e5e5e5; --xp-text-primary: #111; --xp-text-secondary: #555; --xp-text-subtle: #5f5f66; --xp-accent: #2563eb; --xp-accent-hover: #1d4ed8; --xp-success: #16a34a; --xp-warning: #d97706; --xp-error: #dc2626; --xp-bg-warm: #f5efe8; --xp-border-warm: #ede4d8; --xp-text-warm: #5c4a38; --xp-moment: #6d28d9; --xp-privacy-transient: #16a34a; --xp-privacy-scoped: #d97706; --xp-privacy-retained: #dc2626; } /* * theme-engine — extended platform palette tokens (vM2 M-02). * * Eleven --xp-* tokens that sit alongside the 15 core colour tokens in * colors.css: 6 platform hues, 3 colour-name aliases, 2 accent-derived glows. * * Why a hand-authored .css (not generated from a .ts like colors.css): * - The 6 hues + 3 aliases are mode-INVARIANT brand values — identical in * dark and light — so they need none of colors.ts's dark/light palette * machinery, and they are NOT in the Tailwind @theme map (build.mjs * TAILWIND_NAME_MAP) so they need no TS introspection. * - The 2 glows are `color-mix()` over the runtime var(--xp-accent); they * cannot be TS hex constants — they MUST be CSS so they re-resolve when * --xp-accent changes (e.g. [data-theme='light']). * This mirrors the verbatim-CSS precedent of fonts.css / motion.css / radii.css. * (vM2 D-12.) * * Per DECISIONS.md D-02 (--xp-* namespace). The hues map 1:1 to OpenXP * platform Touchpoint Categories (output=purple, integration=cyan, agent=pink, * agent.compositional=violet, perception=orange) — canonical platform-wide, * which is why they belong in the engine and not redeclared per-consumer (D-10). * * Source-of-truth provenance: promoted verbatim from the xpwebsite v1.1 * project-local extension block (assets/styles.css), which flagged these in-code * as "Engine vM2 candidates". xpwiki and xpstudio consume the same set. */ :root { /* Platform hues — match OpenXP Touchpoint Categories. */ --xp-purple: #a855f7; --xp-violet: #8b5cf6; --xp-cyan: #06b6d4; --xp-pink: #ec4899; --xp-emerald: #10b981; --xp-orange: #f97316; /* Colour-name aliases — kept distinct from --xp-success/warning/error * because call sites use them as hues, not status semantics. */ --xp-green: #22c55e; --xp-amber: #f59e0b; --xp-red: #ef4444; /* Accent-derived glows — color-mix() so they auto-track --xp-accent across * themes without a per-mode definition. */ --xp-accent-glow: color-mix(in srgb, var(--xp-accent) 15%, transparent); --xp-accent-glow-strong: color-mix(in srgb, var(--xp-accent) 35%, transparent); } /* * theme-engine — motion tokens (CSS form). * * Mirrors src/tokens/motion.ts. Per CONTEXT.md §3.3, NO keyframes here — * marketing keyframes stay in xpwebsite. Engine ships durations + easings only. */ :root { --xp-duration-fast: 120ms; --xp-duration-base: 200ms; --xp-duration-slow: 320ms; --xp-duration-slower: 480ms; --xp-easing-standard: cubic-bezier(0.2, 0, 0, 1); --xp-easing-enter: cubic-bezier(0, 0, 0, 1); --xp-easing-exit: cubic-bezier(0.3, 0, 1, 1); --xp-easing-emphasized: cubic-bezier(0.3, 0, 0, 1); } /* * theme-engine — radius tokens. * * Per REQUIREMENTS.md 1-A6 + 01-CONTEXT.md (sm, md, lg, pill, circle). * * Values follow common UI-toolkit conventions (Radix Themes / Material / Tailwind): * - sm (4px): fine-grained UI controls (chips, small buttons) * - md (8px): standard cards, dialogs, default radius * - lg (16px): large cards, hero panels, marketing surfaces * - pill (999px): full-pill buttons, tag pills, capsules * - circle (50%): perfectly round (avatars, dots, status indicators) * * Per the no-consumer-tree-dependency build rule (no consumer-tree dependency at build time), these * defaults are committed canonical here. Adoption phase verifies fit; if * consumer surfaces use different values, the consumer shifts to match the engine. */ :root { --xp-radius-sm: 4px; --xp-radius-md: 8px; --xp-radius-lg: 16px; --xp-radius-pill: 999px; --xp-radius-circle: 50%; } /* * theme-engine — shared base reset. * * Per DECISIONS.md D-06 (presets) and 02-CONTEXT.md "Specific Ideas". * Minimal-by-design: box-sizing baseline + body zeroing + font-family * inheritance. Deliberately does NOT use the universal-property-reset * approach (too aggressive — strips legitimate user-agent semantics * like list-style on