Using Juris as utility with ObjectToHTML

import b from 'bss' b.css({ body : { 'font-family' : "Segoe UI" } }) const LightButton = b` bc tomato c white p 12 24 fs 16 tt uppercase border none br 3 min-width 120 cursor pointer transition 0.3s transform, 0.3s opacity bs 0 1 2 rgba(0,0,0,.35) -webkit-font-smoothing antialiased `.$hover` transform translateY(-1px) filter brightness(130%) bs 0 1 5 rgba(0,0,0,.35) `.$active` filter brightness(100%) transform translateY(0) bs 0 1 0 rgba(0,0,0,.35) ` const DarkButton = LightButton .bc('black') .mr('1rem') const juris = new Juris(); juris.setState('appstarted', false); juris.setState('theme', 'light'); juris.setState('greet', 'Test Juris Reactivity by clicking below'); // Consolidated theme function const getThemeStyle = () => { const baseStyle = { padding: "3rem", color: "white", fontSize: "2rem" }; const isLight = juris.getState("theme") === "light"; const isStarted = juris.getState("appstarted"); baseStyle.background = isStarted ? (isLight ? "tomato" : "black") : "grey"; return baseStyle; }; const handleThemeChange = (theme, message) => { juris.setState('theme', theme); juris.setState('greet', message); if (!juris.getState("appstarted")) { juris.setState("appstarted", true); } }; const element = juris.objectToHtml({ div: { style : { textAlign: 'center' }, children: [ { h1: { style: getThemeStyle, text: () => juris.getState("greet") } }, { button: { className: DarkButton, text: "Dark Theme", onClick: () => handleThemeChange('dark', 'Hello darkness my best friend') } }, { button: { className : LightButton, text: "Light Theme", onClick: () => handleThemeChange('light', 'Let the light illuminate your spirit') } } ] } }); document.body.append(element);