Init Customizer

docs/_react/bulma-customizer/src/App.jsx

@@ -0,0 +1,64 @@
+import { useEffect, useState } from "react";
+import "../../../../css/bulma.css";
+import "./App.css";
+import Slider from "./components/Slider";
+
+const KEYS = ["scheme-h", "primary-h", "primary-s", "primary-l"];
+const UNITS = ["deg", "rem", "em", "%"];
+
+function App() {
+  const [vars, setVars] = useState([]);
+
+  useEffect(() => {
+    const rootStyle = window.getComputedStyle(document.documentElement);
+
+    const cssvars = KEYS.map((key) => {
+      const original = rootStyle.getPropertyValue(`--bulma-${key}`);
+      const unit = UNITS.find((unit) => original.endsWith(unit)) || "";
+      const value = unit !== "" ? original.split(unit)[0] : original;
+
+      return {
+        id: key,
+        original,
+        unit,
+        start: Number(value),
+      };
+    });
+
+    setVars(cssvars);
+  }, []);
+
+  console.log("ZLOG vars", vars);
+
+  return (
+    <section className="section">
+      <div className="card">
+        <div className="card-content">
+          {vars.map((v) => {
+            const { id, original, unit, start } = v;
+
+            return (
+              <div key={id} className="block">
+                <Slider id={id} original={original} start={start} unit={unit} />
+              </div>
+            );
+          })}
+
+          <div className="buttons">
+            <button className="button">Button</button>
+
+            <button className="button is-primary">Primary</button>
+            <button className="button is-link">Link</button>
+
+            <button className="button is-info">Info</button>
+            <button className="button is-success">Success</button>
+            <button className="button is-warning">Warning</button>
+            <button className="button is-danger">Danger</button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default App;

docs/_react/bulma-customizer/src/components/Slider.jsx

@@ -0,0 +1,70 @@
+import { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+
+const RANGES = {
+  deg: [0, 360, 1],
+  "%": [0, 100, 1],
+};
+
+function Slider({ id, start, unit }) {
+  const [value, setValue] = useState(start);
+
+  let min = 0;
+  let max = 360;
+  let step = 1;
+
+  if (unit in RANGES) {
+    [min, max, step] = RANGES[unit];
+  }
+
+  const handleChange = (event) => {
+    setValue(event.target.value);
+  };
+
+  const handleReset = () => {
+    setValue(start);
+  };
+
+  useEffect(() => {
+    const computedValue = `${value}${unit}`;
+
+    if (value === start) {
+      document.documentElement.style.removeProperty(`--bulma-${id}`);
+    } else {
+      document.documentElement.style.setProperty(
+        `--bulma-${id}`,
+        computedValue,
+      );
+    }
+  }, [id, start, unit, value]);
+
+  return (
+    <div>
+      <code>{id}</code>
+      <input
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={handleChange}
+      />
+      <code>
+        {value}
+        {unit}
+      </code>
+      <button className="button is-small" onClick={handleReset}>
+        Reset
+      </button>
+    </div>
+  );
+}
+
+Slider.propTypes = {
+  id: PropTypes.string,
+  original: PropTypes.string,
+  start: PropTypes.number,
+  unit: PropTypes.string,
+};
+
+export default Slider;

docs/_react/bulma-customizer/src/index.css

@@ -0,0 +1,68 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

docs/_react/bulma-customizer/src/main.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.jsx";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);