// KAORIBA Tweaks — three expressive mood controls
const { useEffect } = React;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"season": "deep",
"tone": "serene",
"rhythm": "balanced"
}/*EDITMODE-END*/;
function TweaksApp() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
// Apply tweaks as data-attrs on — CSS handles the rest
useEffect(() => {
const root = document.documentElement;
root.setAttribute('data-season', t.season);
root.setAttribute('data-tone', t.tone);
root.setAttribute('data-rhythm', t.rhythm);
}, [t.season, t.tone, t.rhythm]);
return (
setTweak('season', v)}
/>
setTweak('tone', v)}
/>
setTweak('rhythm', v)}
/>
);
}
const tweaksRoot = document.createElement('div');
document.body.appendChild(tweaksRoot);
ReactDOM.createRoot(tweaksRoot).render();