// ============================================================ // Design Switcher — color scheme, typography, section density // Header-integrated. Persists selection in localStorage. // ============================================================ const { useState: useStateDS, useEffect: useEffectDS, useRef: useRefDS } = React; const DS_SCHEMES = { warm: { label: "Solar Warm", hint: "CI · harmonisch", vars: { // Solar Warm CI Manual v1.0 — Stille / Sein / Strahlen / Weite // Funktionale Aliasse für bestehende Komponenten "--paper": "#FFF1D4", // Stille · Honiglicht · Grund 60% "--cream": "#FFF6DF", // Stille-soft · Sandmilch "--cream-deep": "#FFEAC2", // Stille-warm · Sandlicht "--ink": "#12224B", // Sein · Sri-Yantra-Indigo "--accent": "#F48A28", // Strahlen · Fiery Orange "--accent-deep": "#C8561D",// Sunset · CTA "--accent-warm": "#F4B940",// Gold · Highlight "--accent-earth": "#C8DDEA",// Weite · Himmelweite (max 5%) // Direkte CI-Tokens (für neue Komponenten) "--stille": "#FFF1D4", "--sein": "#12224B", "--strahlen": "#F48A28", "--weite": "#C8DDEA", "--sunset": "#C8561D", "--gold": "#F4B940", }, }, dawn: { label: "Morning Dawn", hint: "Weicher · pastelliger", vars: { "--paper": "#FAF4EA", "--cream": "#F2E8D6", "--cream-deep": "#E8D3B4", "--ink": "#3A2E24", "--accent": "#E8B873", "--accent-deep": "#B67438", "--accent-warm": "#D88960", "--accent-earth": "#6A7758", }, }, deep: { label: "Deep Forest", hint: "Geerdet · dunkler", vars: { "--paper": "#EFE9DC", "--cream": "#E5DCC5", "--cream-deep": "#D6C9A8", "--ink": "#1F2620", "--accent": "#C69050", "--accent-deep": "#8A5A26", "--accent-warm": "#B4613E", "--accent-earth": "#4A5540", }, }, ivory: { label: "Ivory", hint: "Minimal · heller", vars: { "--paper": "#FBF8F1", "--cream": "#F3EDDD", "--cream-deep": "#E8DEC3", "--ink": "#221E18", "--accent": "#CFA25B", "--accent-deep": "#9B6326", "--accent-warm": "#BD7246", "--accent-earth": "#60694F", }, }, }; const DS_TYPO = { sourceSerifHelvetica: { label: "Cormorant + DM Sans", hint: "CI · Serif für Sein, Sans für Sagen", serif: "'Cormorant Garamond', 'Platin Pro', 'Iowan Old Style', Garamond, Georgia, serif", sans: "'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif", mono: "'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace", }, cormorantInter: { label: "Cormorant + Inter", hint: "Warm · feminin", serif: "'Cormorant Garamond', Georgia, serif", sans: "'Inter', system-ui, sans-serif", mono: "'JetBrains Mono', monospace", }, libreHelvetica: { label: "Libre Caslon + Helvetica", hint: "Klassisch", serif: "'Libre Caslon Text', 'Libre Caslon', Georgia, serif", sans: "'Helvetica Neue', Helvetica, Arial, sans-serif", mono: "'JetBrains Mono', monospace", }, playfairInter: { label: "Playfair + Inter", hint: "Statement · kontrastreich", serif: "'Playfair Display', Georgia, serif", sans: "'Inter', system-ui, sans-serif", mono: "'JetBrains Mono', monospace", }, }; const DS_DENSITY = { airy: { label: "Luftig", hint: "Viel Weißraum", pyDesktop: "8rem", pyMobile: "4.5rem" }, calm: { label: "Ruhig", hint: "Ausgewogen", pyDesktop: "6rem", pyMobile: "3.75rem" }, compact: { label: "Kompakt", hint: "Dichter", pyDesktop: "4.5rem", pyMobile: "3rem" }, }; const DS_DEFAULTS = { scheme: "warm", typo: "sourceSerifHelvetica", density: "airy" }; // Storage-Key bumpen — invalidert alte localStorage-Werte aus pre-CI Versionen. const DS_STORAGE = "tt-design-prefs-v2-solar"; function dsApply(state) { const root = document.documentElement; const scheme = DS_SCHEMES[state.scheme] || DS_SCHEMES.warm; Object.entries(scheme.vars).forEach(([k, v]) => root.style.setProperty(k, v)); const typo = DS_TYPO[state.typo] || DS_TYPO.sourceSerifHelvetica; root.style.setProperty("--font-serif", typo.serif); root.style.setProperty("--font-sans", typo.sans); root.style.setProperty("--font-mono", typo.mono); const dens = DS_DENSITY[state.density] || DS_DENSITY.airy; const isMobile = window.matchMedia("(max-width: 768px)").matches; root.style.setProperty("--section-py", isMobile ? dens.pyMobile : dens.pyDesktop); } function useDesignPrefs() { const [state, setState] = useStateDS(() => { try { const raw = localStorage.getItem(DS_STORAGE); if (raw) return { ...DS_DEFAULTS, ...JSON.parse(raw) }; } catch (e) {} return DS_DEFAULTS; }); useEffectDS(() => { dsApply(state); try { localStorage.setItem(DS_STORAGE, JSON.stringify(state)); } catch (e) {} }, [state]); useEffectDS(() => { const onResize = () => dsApply(state); window.addEventListener("resize", onResize); return () => window.removeEventListener("resize", onResize); }, [state]); return [state, setState]; } function DesignSwitcher({ prefs, setPrefs, variant = "desktop" }) { const [open, setOpen] = useStateDS(false); const panelRef = useRefDS(null); const btnRef = useRefDS(null); useEffectDS(() => { if (!open) return; const onDocClick = (e) => { if (panelRef.current?.contains(e.target)) return; if (btnRef.current?.contains(e.target)) return; setOpen(false); }; const onKey = (e) => { if (e.key === "Escape") setOpen(false); }; document.addEventListener("mousedown", onDocClick); document.addEventListener("keydown", onKey); return () => { document.removeEventListener("mousedown", onDocClick); document.removeEventListener("keydown", onKey); }; }, [open]); const reset = () => setPrefs(DS_DEFAULTS); const groups = [ { key: "scheme", title: "Farbschema", opts: DS_SCHEMES }, { key: "typo", title: "Typografie", opts: DS_TYPO }, { key: "density", title: "Layout-Dichte", opts: DS_DENSITY }, ]; const btnBase = "font-mono text-[11px] tracking-[0.20em] uppercase transition-colors flex items-center gap-2"; const isInline = variant === "inline"; return (
{open && ( <> {!isInline && (
setOpen(false)} /> )}
Design-Optionen
{groups.map((g) => (
{g.title}
{Object.entries(g.opts).map(([val, v]) => { const active = prefs[g.key] === val; const swatches = g.key === "scheme" ? [ v.vars["--paper"], v.vars["--cream-deep"], v.vars["--accent"], v.vars["--accent-deep"], v.vars["--ink"], ] : null; return ( ); })}
))}
)}
); } Object.assign(window, { useDesignPrefs, DesignSwitcher, DS_SCHEMES, DS_TYPO, DS_DENSITY });