// Design tokens and primitives shared by every page: palette, radii, shadows, icons, buttons. const FONT_PAIRS = { 'Bricolage + Onest': { display: "'Bricolage Grotesque', sans-serif", body: "'Onest', sans-serif" }, 'Onest only': { display: "'Onest', sans-serif", body: "'Onest', sans-serif" }, 'Schibsted + Nunito': { display: "'Schibsted Grotesk', sans-serif", body: "'Nunito Sans', sans-serif" }, 'Gabarito + Figtree': { display: "'Gabarito', sans-serif", body: "'Figtree', sans-serif" }, 'Source Serif + Onest':{ display: "'Source Serif 4', serif", body: "'Onest', sans-serif" }, }; function makeTheme(t) { const pair = FONT_PAIRS[t.fonts] || FONT_PAIRS['Bricolage + Onest']; const a = t.accent; return { isDark: false, accent: a, accentUI: a, // controls (buttons, active tab), dims in dark mode deep: `color-mix(in oklab, ${a} 76%, #0c1620)`, // darker accent (pressed / dark surfaces) heroA: (t.hero === 'Deep') ? `color-mix(in oklab, ${a} 76%, #0c1620)` : a, // hero start, Flat/Gradient: accent, Deep: dark heroDeep: (t.hero === 'Flat') ? a : `color-mix(in oklab, ${a} 76%, #0c1620)`, // hero end, Flat: accent (solid), else dark paper: '#FFFFFF', glass: 'rgba(255,255,255,0.92)', onAccent: '#FFFFFF', // secondary colors, bright, sun-lit family that matches the airy accent amber: '#F5B73F', amberInk: '#A87C0A', amberSoft: '#FEF3D9', red: '#E8655C', redInk: '#C2453D', redSoft: '#FDEEED', green: '#3DB47E', greenInk: '#1F7A50', greenSoft: '#E4F6EC', // neutrals carry a whisper of the accent hue so the whole UI re-tints together ink: `color-mix(in oklab, ${a} 14%, #1f2729)`, mut: `color-mix(in oklab, ${a} 16%, #64716f)`, faint: `color-mix(in oklab, ${a} 12%, #9aa6a4)`, bg: `color-mix(in oklab, ${a} ${t.bgTint ?? 4.5}%, #f7f8f8)`, card: '#FFFFFF', line: `color-mix(in oklab, ${a} 8%, #e9eceb)`, tint: (p, base = '#FFFFFF') => `color-mix(in oklab, ${a} ${p}%, ${base})`, tabMode: t.tabBar || 'Floating', premiumTone: t.premium || 'Gold', df: pair.display, bf: pair.body, }; } // Dark variant, same token names, night values. deep becomes a LIGHT accent // (it's used as accent-strong text); heroDeep keeps gradients dark. // Dark variant, same token names, night values. deep becomes a LIGHT accent // (it's used as accent-strong text); heroDeep keeps gradients dark. function makeDarkTheme(t) { const pair = FONT_PAIRS[t.fonts] || FONT_PAIRS['Bricolage + Onest']; const a = t.accent; const base = '#121A1F'; return { isDark: true, accent: a, accentUI: `color-mix(in oklab, ${a} 72%, #101a21)`, deep: `color-mix(in oklab, ${a} 50%, #E5EEF3)`, heroA: (t.hero === 'Flat') ? `color-mix(in oklab, ${a} 72%, #101a21)` : (t.hero === 'Deep') ? `color-mix(in oklab, ${a} 28%, #0a1115)` : `color-mix(in oklab, ${a} 58%, #0e161c)`, heroDeep: (t.hero === 'Flat') ? `color-mix(in oklab, ${a} 72%, #101a21)` : `color-mix(in oklab, ${a} 28%, #0a1115)`, paper: '#10171B', glass: 'rgba(18,25,29,0.92)', onAccent: '#FFFFFF', amber: '#F5B73F', amberInk: '#F2CC85', amberSoft: `color-mix(in oklab, #F5B73F 17%, ${base})`, red: '#E8655C', redInk: '#F49B94', redSoft: `color-mix(in oklab, #E8655C 16%, ${base})`, green: '#3DB47E', greenInk: '#8BDDB4', greenSoft: `color-mix(in oklab, #3DB47E 16%, ${base})`, ink: '#ECF2F5', mut: '#9FB1BB', faint: '#697A85', bg: `color-mix(in oklab, ${a} ${(t.bgTint ?? 4.5) + 1.5}%, #0D1317)`, card: '#171F25', line: 'rgba(255,255,255,0.09)', // tint wells sit on the #171F25 card, so mix over a base LIGHTER than the card // (the old #121A1F base sank every low-tint chip into the card surface) tint: (p, base2) => `color-mix(in oklab, ${a} ${Math.min(p + 7, 100)}%, ${base2 || '#27323A'})`, tabMode: t.tabBar || 'Floating', premiumTone: t.premium || 'Gold', df: pair.display, bf: pair.body, }; } // ── Tweak-driven helpers: corner-radius scale + shadow depth ─ // App sets window.__radScale / window.__shadowMode from Tweaks before render. // ── Tweak-driven helpers: corner-radius scale + shadow depth ─ // App sets window.__radScale / window.__shadowMode from Tweaks before render. function RAD(n) { const s = window.__radScale || 1; return s === 1 ? n : Math.round(n * s * 10) / 10; } function SH(v) { const m = window.__shadowMode || 'Soft'; if (m === 'Soft' || !v || v === 'none') return v; if (m === 'Flat') return 'none'; return v + ', 0 24px 48px rgba(8, 18, 26, 0.16)'; } // Icon-well stroke gate. App sets window.__iconStroke from the Tweaks toggle. // When off, every well border collapses to 'none'. // Icon-well stroke gate. App sets window.__iconStroke from the Tweaks toggle. // When off, every well border collapses to 'none'. function WSTROKE(border) { return (window.__iconStroke === false) ? 'none' : border; } // Icon-container (well) size scale. App sets window.__icWellScale from the // Tweaks slider (1 = default). Wrap a well's width/height numbers with IW(). // Icon-container (well) size scale. App sets window.__icWellScale from the // Tweaks slider (1 = default). Wrap a well's width/height numbers with IW(). function IW(px) { const k = window.__icWellScale || 1; return k === 1 ? px : Math.round(px * k); } // ── Density helpers ─ App sets window.__denScale (1 = comfortable, 0.85 = compact). // DEN scales numeric gaps/margins/spacers; PADS scales the vertical values // inside a padding shorthand string ('14px 16px' → vertical 14px only). // ── Density helpers ─ App sets window.__denScale (1 = comfortable, 0.85 = compact). // DEN scales numeric gaps/margins/spacers; PADS scales the vertical values // inside a padding shorthand string ('14px 16px' → vertical 14px only). function DEN(n) { const k = window.__denScale || 1; return k === 1 ? n : Math.round(n * k * 10) / 10; } function PADS(s) { const k = window.__denScale || 1; if (k === 1 || typeof s !== 'string') return s; const parts = s.split(' '); return parts.map((p, i) => { const m = /^(\d*\.?\d+)px$/.exec(p); if (!m || i % 2 !== 0) return p; return Math.round(parseFloat(m[1]) * k * 10) / 10 + 'px'; }).join(' '); } // ── Minimal stroke icon set ────────────────────────────────── // ── Minimal stroke icon set ────────────────────────────────── const IC_PATHS = { check: , x: , chevR: , chevD: , arrowR: <>, download: <>, phone: <>, lock: <>, flame: , cal: <>, pin: <>, target: <>, chart: , book: <>, home: , user: <>, crown: , clock: <>, leaf: <>, search: <>, shield: , refresh: <>, spark: , bookmark: , flag: <>, bell: <>, timer: <>, info: <>, }; function Ic({ name, size = 20, c = 'currentColor', w = 1.8, style }) { const sz = Math.round(size * (window.__icSizeScale || 1)); return ( {IC_PATHS[name]} ); } // ── Striped illustration placeholder ───────────────────────── // ── Striped illustration placeholder ───────────────────────── function Stripes({ label, h = 220, T, dark = false, radius = 28, style }) { const c1 = dark ? 'rgba(255,255,255,0.05)' : T.tint(7); const c2 = dark ? 'rgba(255,255,255,0.09)' : T.tint(13); return (
{label}
); } // ── Buttons ────────────────────────────────────────────────── // ── Buttons ────────────────────────────────────────────────── function Btn({ children, T, kind = 'primary', h = 56, fs = 17, icon, loading = false, style, onClick }) { const acc = T.accentUI || T.accent; const kinds = { primary: { background: acc, color: '#fff', boxShadow: SH(T.isDark ? `0 8px 20px rgba(0,0,0,0.35)` : `0 8px 20px color-mix(in oklab, ${T.accent} 28%, transparent)`), border: T.isDark ? `1px solid color-mix(in oklab, ${T.accent} 32%, transparent)` : 'none', }, dark: { background: '#fff', color: '#1C2B29', boxShadow: SH('0 8px 24px rgba(0,0,0,0.25)') }, soft: { background: T.tint(9), color: T.deep }, ghost: { background: 'transparent', color: T.mut }, amber: (T.premiumTone === 'Quiet') ? { background: T.isDark ? 'rgba(245,183,63,0.13)' : '#26323A', color: T.isDark ? '#F2CC85' : '#F5C766', border: '1px solid rgba(245,183,63,0.30)', boxShadow: 'none' } : T.isDark ? { background: `linear-gradient(180deg, color-mix(in oklab, ${T.amber} 78%, #18110a) 0%, color-mix(in oklab, ${T.amber} 60%, #18110a) 100%)`, color: '#fff', border: `1px solid color-mix(in oklab, ${T.amber} 30%, transparent)` } : { background: T.amber, color: '#3A2A08' }, }; return (
{loading ? ( <> {typeof children === 'string' ? children : 'Please wait…'} ) : ( <> {children} {icon && } )}
); } // ── Small label chip ───────────────────────────────────────── // ── Small label chip ───────────────────────────────────────── function Tag({ children, T, color, bg, icon, style }) { return (
{icon && } {children}
); } Object.assign(window, { makeTheme, makeDarkTheme, RAD, SH, WSTROKE, IW, DEN, PADS, Ic, Stripes, Btn, Tag, FONT_PAIRS });