// app.jsx — Tweaks island for the EcoTech × Soneera landing page.
// Plain HTML/CSS page is driven by CSS variables + a [data-density] attr on .
// This panel only writes those, so toggling never re-renders page content.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"accent": "#1d6fb8",
"headingFont": "Archivo",
"density": "airy"
}/*EDITMODE-END*/;
const ACCENT_OPTIONS = ["#1d6fb8", "#15808d", "#0e7490", "#0891b2"];
// Map a hex accent to the derived teal scale (deep / soft / tint) so the whole
// system stays coherent when the user changes the accent.
function applyAccent(root, hex) {
root.style.setProperty("--teal", hex);
root.style.setProperty("--teal-deep", `color-mix(in oklab, ${hex} 82%, black)`);
root.style.setProperty("--teal-soft", `color-mix(in oklab, ${hex} 12%, white)`);
root.style.setProperty("--teal-tint", `color-mix(in oklab, ${hex} 40%, white)`);
}
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const root = document.documentElement;
React.useEffect(() => { applyAccent(root, t.accent); }, [t.accent]);
React.useEffect(() => {
root.style.setProperty(
"--font-display",
t.headingFont === "Hanken Grotesk"
? '"Hanken Grotesk", system-ui, sans-serif'
: '"' + t.headingFont + '", system-ui, sans-serif'
);
}, [t.headingFont]);
React.useEffect(() => { root.setAttribute("data-density", t.density); }, [t.density]);
return (
setTweak("accent", v)} />
setTweak("headingFont", v)} />
setTweak("density", v)} />
);
}
ReactDOM.createRoot(document.getElementById("tweaks-root")).render();