/* global React, ReactDOM, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakSelect */ const { useEffect } = React; const FixMyBcpTweakDefaults = /*EDITMODE-BEGIN*/{ "theme": "warm", "voice": "editorial", "density": "standard" }/*EDITMODE-END*/; const PALETTES = [ { id: "warm", label: "Civic Warm", swatch: ["#faf6ec","#0d1f3c","#c75d3c"] }, { id: "slate", label: "Council Slate", swatch: ["#eef1f6","#0e1726","#2a5fa3"] }, { id: "forest", label: "Community Green", swatch: ["#f1efe2","#122418","#2a8d6a"] }, { id: "ink", label: "Editorial Ink", swatch: ["#f5f0e4","#0a0a0a","#c75d3c"] } ]; function FixMyBcpTweaks() { const [t, set] = useTweaks(FixMyBcpTweakDefaults); // Apply tweaks to as data-* attributes useEffect(() => { document.body.setAttribute("data-theme", t.theme); document.body.setAttribute("data-voice", t.voice); document.body.setAttribute("data-density", t.density); }, [t.theme, t.voice, t.density]); return (

{PALETTES.map(p => { const selected = t.theme === p.id; return ( ); })}

set("voice", v)} options={[ { value: "editorial", label: "Editorial" }, { value: "grotesk", label: "Grotesk" }, { value: "monumental", label: "Monumental" } ]} /> set("density", v)} options={[ { value: "compact", label: "Compact" }, { value: "standard", label: "Standard" }, { value: "roomy", label: "Roomy" } ]} /> ); } const fmbTweaksRoot = document.getElementById("tweaks-root"); if (fmbTweaksRoot) { ReactDOM.createRoot(fmbTweaksRoot).render(); }