/* * AUTO-GENERATED — do not edit this file directly. * Source: apps/public-api/src/lib/scalar-theme.ts * Run: pnpm --filter @repo/public-api theme:export */ /* ------------------------------------------------------------------ */ /* Tokens — both modes */ /* ------------------------------------------------------------------ */ :root { /* Brand body font is Inter on marketing surfaces and Mulish on product surfaces. Docs sit between the two; we use Inter (which matches the brand spec for body copy and is what the rest of cardnexus.com uses) and let Scalar fall back to system stack. */ --scalar-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --scalar-font-code: "JetBrains Mono", ui-monospace, "Cascadia Mono", "Roboto Mono", "Source Code Pro", monospace; /* Brand spacing/radius scale: 6 on controls, 12 on panels/dialogs. */ --scalar-radius: 6px; --scalar-radius-lg: 12px; --scalar-radius-xl: 12px; } /* ------------------------------------------------------------------ */ /* Dark mode — Product palette (lifted) */ /* (twilight base + gold primary + foil-rose secondary) */ /* */ /* The brand's literal product colors (#030212 / #0F0C30 / #17143D) */ /* read as deep indigo when applied to Scalar's full-screen content */ /* surface — too saturated and too dark for a docs page. We keep the */ /* family but lift each step ~15-20% in luminance and pull saturation */ /* down so the gold + foil-rose accents stay the focal points. */ /* ------------------------------------------------------------------ */ .dark-mode { color-scheme: dark; /* Surfaces — lifted from Product spec, less saturated indigo */ --scalar-background-1: #1B1825; /* Page — was #030212 */ --scalar-background-2: #252233; /* Elevated panel / sidebar — was #0F0C30 */ --scalar-background-3: #2F2C40; /* Inset / code blocks — was #17143D */ --scalar-background-accent: rgba(231, 177, 74, 0.12); /* Gold @ 12% */ /* Text */ --scalar-color-1: #FFFFFF; /* Primary text */ --scalar-color-2: #C8C2D6; /* Secondary text — slightly desaturated */ --scalar-color-3: #8B83A2; /* Muted — lighter than brand Twilight for readability */ /* Brand accent — Gold (Primary) */ --scalar-color-accent: #E7B14A; /* Borders — desaturated mid-tone */ --scalar-border-color: #3F3A52; /* was Stroke #413D6A */ /* Buttons — gold pill on dark */ --scalar-button-1: #E7B14A; --scalar-button-1-hover: #F1D092; --scalar-button-1-color: #030212; /* UI states (validation/issue/info/teal) — straight from the brand spec */ --scalar-color-green: #10B981; /* Validation */ --scalar-color-red: #EF4444; /* Issue */ --scalar-color-yellow: #F5C716; /* Signal Yellow */ --scalar-color-blue: #6062D0; /* Info */ --scalar-color-orange: #FF5216; /* Orange */ --scalar-color-purple: #DD558B; /* Foil Rose — secondary brand accent */ /* Links — gold so endpoint references stand out */ --scalar-link-color: #E7B14A; --scalar-link-color-hover: #F1D092; /* Scrollbars + shadows */ --scalar-scrollbar-color: rgba(186, 178, 214, 0.18); --scalar-scrollbar-color-active: rgba(231, 177, 74, 0.4); --scalar-shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.4); --scalar-shadow-2: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 24px 60px rgba(0, 0, 0, 0.5); /* Sidebar — matches the lifted surfaces */ --scalar-sidebar-background-1: #252233; --scalar-sidebar-color-1: #FFFFFF; --scalar-sidebar-color-2: #C8C2D6; --scalar-sidebar-border-color: #3F3A52; --scalar-sidebar-item-hover-background: #322E45; /* between bg-2 and bg-3 */ --scalar-sidebar-item-hover-color: #FFFFFF; --scalar-sidebar-item-active-background: #2F2C40; --scalar-sidebar-color-active: #E7B14A; /* Gold */ --scalar-sidebar-search-background: #2F2C40; --scalar-sidebar-search-color: #C8C2D6; --scalar-sidebar-search-border-color: #3F3A52; } /* ------------------------------------------------------------------ */ /* Light mode — Brandbook / Marketing palette */ /* (white base + Night text + Indigo primary + Magenta secondary) */ /* ------------------------------------------------------------------ */ .light-mode { color-scheme: light; /* Surfaces */ --scalar-background-1: #FFFFFF; --scalar-background-2: #EBECFF; /* Lilac Tint */ --scalar-background-3: #D8DAFF; /* between Lilac Tint and Indigo Soft */ --scalar-background-accent: rgba(79, 76, 255, 0.10); /* Indigo @ 10% */ /* Text */ --scalar-color-1: #0D0A2B; /* Night Deep */ --scalar-color-2: #191353; /* Night */ --scalar-color-3: #3527AE; /* Indigo 3 — used for muted captions */ /* Brand accent — Indigo */ --scalar-color-accent: #4F4CFF; /* Borders */ --scalar-border-color: #EBECFF; /* Buttons — Night with white text (deep, confident) */ --scalar-button-1: #191353; --scalar-button-1-hover: #0D0A2B; --scalar-button-1-color: #FFFFFF; /* UI states */ --scalar-color-green: #10B981; --scalar-color-red: #EF4444; --scalar-color-yellow: #F5C716; --scalar-color-blue: #4F4CFF; /* Indigo */ --scalar-color-orange: #FF5216; --scalar-color-purple: #FF4DFF; /* Magenta */ /* Links */ --scalar-link-color: #4F4CFF; --scalar-link-color-hover: #3F2FD0; /* Indigo 2 */ /* Scrollbars + shadows — using brand card-shadow palette */ --scalar-scrollbar-color: rgba(25, 19, 83, 0.18); --scalar-scrollbar-color-active: rgba(79, 76, 255, 0.36); --scalar-shadow-1: 0 1px 2px rgba(25, 19, 83, 0.06); --scalar-shadow-2: 0 1px 2px rgba(25, 19, 83, 0.06), 0 8px 24px rgba(25, 19, 83, 0.08); /* Sidebar */ --scalar-sidebar-background-1: #FFFFFF; --scalar-sidebar-color-1: #0D0A2B; --scalar-sidebar-color-2: #191353; --scalar-sidebar-border-color: #EBECFF; --scalar-sidebar-item-hover-background: #EBECFF; --scalar-sidebar-item-hover-color: #0D0A2B; --scalar-sidebar-item-active-background: #EBECFF; --scalar-sidebar-color-active: #4F4CFF; /* Indigo */ --scalar-sidebar-search-background: #EBECFF; --scalar-sidebar-search-color: #3527AE; --scalar-sidebar-search-border-color: #ADB3FF; /* Indigo Soft */ }