Using Juris as utility with ObjectToHTML

You can use Juris as a simple utility, which can play with whatever library you use.

Look how ObjectToHtml operates, a gem :)

Here I integrate bss with Juris ObjectToHtmlDemoAndBss ;

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);