Add Generic vars

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

@@ -42,7 +42,7 @@ function Slider({ id, color }) {
     const slider = sliderRef.current;
     const sliderRect = slider.getBoundingClientRect();
     const target = event.clientX - sliderRect.left;
-    setX(target);
+    setX(Math.round(target));
   };
 
   const docMouseLeave = () => {
@@ -75,7 +75,7 @@ function Slider({ id, color }) {
 
   useEffect(() => {
     const newX = valueToX(current, 360, min, max);
-    setX(newX);
+    setX(Math.round(newX));
   }, [min, max, current]);
 
   useEffect(() => {
@@ -94,7 +94,7 @@ function Slider({ id, color }) {
         target = sliderRect.width;
       }
 
-      setX(target);
+      setX(Math.round(target));
     };
 
     window.addEventListener("mousemove", docMouseMove);

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

@@ -1,6 +1,7 @@
 .main {
   position: relative;
   width: 360px;
+  flex-shrink: 0;
   padding: 0.375rem 0;
   cursor: grab;
 }

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

@@ -27,6 +27,42 @@ function VarItem({ id }) {
 
   const isDisabled = cssvar.current == cssvar.start;
 
+  let control;
+
+  switch (cssvar.kind) {
+    case "hue":
+    case "saturation":
+    case "lightness":
+    case "delta":
+      control = (
+        <>
+          <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>
+        </>
+      );
+      break;
+    default:
+      control = (
+        <input
+          className="input"
+          type="text"
+          value={cssvar.current}
+          onChange={(e) => handleInputChange(e, cssvar)}
+        />
+      );
+      break;
+  }
+
   return (
     <div className={cn.main}>
       <div className={cn.side}>
@@ -45,31 +81,7 @@ function VarItem({ id }) {
         </div>
       </div>
 
-      <div className={cn.slider}>
-        {cssvar.kind === "any" ? (
-          <input
-            className="input"
-            type="text"
-            value={cssvar.current}
-            onChange={(e) => handleInputChange(e, cssvar)}
-          />
-        ) : (
-          <>
-            <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.slider}>{control}</div>
 
       <div className={cn.description}>{cssvar.description}</div>
     </div>

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

@@ -30,7 +30,7 @@
   display: flex;
   gap: 1.5rem;
   padding: 2px 0;
-  width: 28rem;
+  width: 30rem;
   flex-shrink: 0;
 }