// Tweaks island for Faro landing — mutates data attributes + CSS vars on .
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"theme": "light",
"accent": "blue",
"heroLayout": "phone-right"
}/*EDITMODE-END*/;
const ACCENT_HEX = {
blue: "#3A6385",
amber: "#C8A030",
warm: "#81553B",
violet: "#5C5B85",
};
const ACCENT_HEX_DARK = {
blue: "#85B9FF",
amber: "#FFD567",
warm: "#FFB3B1",
violet: "#C9C7F8",
};
function applyTweaks(t) {
const body = document.body;
body.setAttribute('data-theme', t.theme);
body.setAttribute('data-accent', t.accent);
body.setAttribute('data-hero-layout', t.heroLayout);
const root = document.documentElement;
const map = t.theme === 'dark' ? ACCENT_HEX_DARK : ACCENT_HEX;
root.style.setProperty('--accent', map[t.accent] || map.blue);
}
function FaroTweaks() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
React.useEffect(() => { applyTweaks(t); }, [t.theme, t.accent, t.heroLayout]);
return (
setTweak('theme', v)}
/>
o.color)}
onChange={(hex) => {
const name = Object.entries(ACCENT_HEX).find(([k,v]) => v === hex)?.[0] || 'blue';
setTweak('accent', name);
}}
/>
setTweak('heroLayout', v)}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('tweaks-root'));
root.render();