Add Scheme vars

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

@@ -26,9 +26,9 @@ const valueToX = (value, width, min, max) => {
   return Math.round(newValue);
 };
 
-function Slider({ id, color, kind }) {
+function Slider({ id, color }) {
   const { cssvars, updateVar } = useContext(CustomizerContext);
-  const { start, current } = cssvars[id];
+  const { start, current, kind } = cssvars[id];
   const [min, max] = kind ? RANGES[kind] : RANGES.any;
 
   const sliderRef = useRef(null);

docs/_react/bulma-customizer/src/components/Slider.module.css

@@ -31,7 +31,7 @@
 
 .background {
   border-radius: 0.25rem;
-  background-color: white;
+  background-color: var(--bulma-background);
   height: 0.5rem;
 }
 

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

@@ -0,0 +1,71 @@
+import { useContext } from "react";
+import PropTypes from "prop-types";
+
+import Slider from "./Slider";
+import { CustomizerContext } from "../App";
+
+import cn from "./VarItem.module.css";
+
+function VarItem({ id }) {
+  const { cssvars, updateVar } = useContext(CustomizerContext);
+
+  const cssvar = cssvars[id];
+
+  if (!cssvar) {
+    return;
+  }
+
+  const handleReset = (event) => {
+    event.preventDefault();
+    updateVar(cssvar.id, cssvar.start);
+  };
+
+  const handleInputChange = (event, cssvar) => {
+    let value = event.target.value;
+    updateVar(cssvar.id, value);
+  };
+
+  const isDisabled = cssvar.current === cssvar.start;
+
+  return (
+    <div className={cn.main}>
+      <div className={cn.side}>
+        <div className={cn.name}>
+          <code>{cssvar.id}</code>
+        </div>
+
+        <div className="buttons are-small">
+          <button
+            className="button"
+            onClick={handleReset}
+            disabled={isDisabled}
+          >
+            Reset
+          </button>
+        </div>
+      </div>
+
+      <div className={cn.slider}>
+        <Slider id={cssvar.id} />
+        <p className={cn.form}>
+          <input
+            type="text"
+            className="input"
+            value={cssvar.current}
+            onChange={(e) => handleInputChange(e, cssvar)}
+            size="3"
+          />
+          <span>{cssvar.unit}</span>
+        </p>
+      </div>
+
+      <div className={cn.description}>{cssvar.description}</div>
+    </div>
+  );
+}
+
+VarItem.propTypes = {
+  id: PropTypes.string,
+};
+
+export default VarItem;

docs/_react/bulma-customizer/src/components/VarItem.module.css

@@ -0,0 +1,61 @@
+.main {
+  align-items: start;
+  display: flex;
+  gap: 1.5rem;
+  border-bottom: 1px solid var(--bulma-border);
+  padding: 1.25rem 0;
+}
+
+.side {
+  flex-shrink: 0;
+  width: 15rem;
+}
+
+.name {
+  gap: 1rem;
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.name code {
+  font-size: 1.25em;
+  font-weight: 600;
+  padding: 0;
+  background: none;
+}
+
+.slider {
+  align-items: center;
+  display: flex;
+  gap: 1.5rem;
+  padding: 2px 0;
+  width: 28rem;
+  flex-shrink: 0;
+}
+
+.form {
+  display: flex;
+  align-items: center;
+  font-family: var(--bulma-family-code);
+  gap: 0.25em;
+}
+
+.form input {
+  font-family: inherit;
+  font-size: inherit;
+  padding: 0.25em;
+  height: auto;
+  border-radius: 0.25em;
+  width: 3em;
+  padding: 0 0.25em;
+}
+
+.form span {
+  opacity: 0.5;
+}
+
+.description {
+  flex-shrink: 1;
+  flex-grow: 1;
+}