Add Color module

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

@@ -202,9 +202,19 @@ function Color({ color }) {
           <p>{name}</p>
         </div>
 
-        <button className="button is-small" onClick={handleHexInput}>
-          Enter a Hex code
-        </button>
+        <div className="buttons are-small">
+          <button className="button" onClick={handleHexInput}>
+            Enter a Hex code
+          </button>
+
+          <button
+            className="button"
+            onClick={handleReset}
+            disabled={isDisabled}
+          >
+            Reset
+          </button>
+        </div>
 
         <div className="is-hidden field has-addons">
           <p className="control">
@@ -273,9 +283,6 @@ function Color({ color }) {
 
       <div className={cn.side}>
         <button className={`button is-${color}`}>{name}</button>
-        <button className="button" onClick={handleReset} disabled={isDisabled}>
-          Reset
-        </button>
       </div>
     </div>
   );

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

@@ -3,7 +3,7 @@
   flex-wrap: wrap;
   gap: 1.5rem;
   border-bottom: 1px solid var(--bulma-border);
-  padding: 1.25rem;
+  padding: 1.25rem 0;
 }
 
 .side {

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

@@ -10,6 +10,7 @@ const RANGES = {
   saturation: [0, 100, 1],
   lightness: [0, 100, 1],
   gap: [0, 100, 1],
+  delta: [0, 100, 1],
   any: [0, 100, 1],
 };
 
@@ -28,7 +29,7 @@ const valueToX = (value, width, min, max) => {
 function Slider({ id, color, kind }) {
   const { cssvars, updateVar } = useContext(CustomizerContext);
   const { start, current } = cssvars[id];
-  const [min, max] = RANGES[kind];
+  const [min, max] = kind ? RANGES[kind] : RANGES.any;
 
   const sliderRef = useRef(null);
   const handleRef = useRef(null);
@@ -129,11 +130,13 @@ function Slider({ id, color, kind }) {
     [cn[kind]]: true,
   });
 
-  const mainStyle = {
-    "--h": `var(--bulma-${color}-h)`,
-    "--s": `var(--bulma-${color}-s)`,
-    "--l": `var(--bulma-${color}-l)`,
-  };
+  const mainStyle = color
+    ? {
+        "--h": `var(--bulma-${color}-h)`,
+        "--s": `var(--bulma-${color}-s)`,
+        "--l": `var(--bulma-${color}-l)`,
+      }
+    : {};
 
   const handleStyle = {
     transform: `translateX(${x}px)`,