Add Generic vars

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

@@ -2,20 +2,31 @@ import { createContext, useEffect, useState } from "react";
 import classNames from "classnames";
 import "../../../../css/bulma.css";
 
-import { CSSVAR_KEYS, SUFFIX_TO_KIND } from "./constants";
+import { CSSVAR_KEYS } from "./constants";
 import { unslug } from "./utils";
 
 import Colors from "./pages/Colors";
 import Scheme from "./pages/Scheme";
 import Typography from "./pages/Typography";
+import Other from "./pages/Other";
+import Generic from "./pages/Generic";
 
-const UNITS = ["deg", "rem", "em", "%"];
+const SUFFIX_TO_KIND = {
+  "-h": "hue",
+  "-s": "saturation",
+  "-l": "lightness",
+  "-delta": "delta",
+  "-color": "color",
+};
+const UNITS = ["deg", "%"];
 const PAGE_TO_COMPONENT = {
   colors: <Colors />,
   scheme: <Scheme />,
   typography: <Typography />,
+  other: <Other />,
+  generic: <Generic />,
 };
-const PAGE_IDS = ["colors", "scheme", "typography"];
+const PAGE_IDS = ["colors", "scheme", "typography", "other", "generic"];
 
 export const CustomizerContext = createContext({
   cssvars: {},
@@ -28,7 +39,7 @@ export const CustomizerContext = createContext({
 function App() {
   const initialContext = {
     cssvars: {},
-    currentPage: "typography",
+    currentPage: "generic",
     getVar: (id) => {
       return context.cssvars[id];
     },
@@ -110,8 +121,6 @@ function App() {
     });
   }, []);
 
-  console.log("ZLOG context.cssvars", context.cssvars);
-
   return (
     <CustomizerContext.Provider value={context}>
       <section className="section">

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

docs/_react/bulma-customizer/src/constants.js

@@ -1,11 +1,3 @@
-export const SUFFIX_TO_KIND = {
-  "-h": "hue",
-  "-s": "saturation",
-  "-l": "lightness",
-  "-gap": "gap",
-  "-delta": "delta",
-};
-
 export const CSSVAR_KEYS = {
   scheme: [
     {
@@ -120,4 +112,95 @@ export const CSSVAR_KEYS = {
       description: "Defines the Extrabold font weight",
     },
   ],
+  other: [
+    {
+      id: "block-spacing",
+      description: "Defines the space below Block elements",
+    },
+    {
+      id: "duration",
+      description: "Defines the duration of Transitions and Animations",
+    },
+    {
+      id: "easing",
+      description: "Defines the timing function of Transitions and Animations",
+    },
+    { id: "radius-small", description: "Defines the Small border radius" },
+    { id: "radius", description: "Defines the Normal border radius" },
+    { id: "radius-medium", description: "Defines the Medium border radius" },
+    { id: "radius-large", description: "Defines the Large border radius" },
+    { id: "radius-rounded", description: "Defines the Rounded border radius" },
+    { id: "speed", description: "" },
+    {
+      id: "arrow-color",
+      description: "Defines the arrow color use for Select dropdowns",
+    },
+    {
+      id: "loading-color",
+      description: "Defines the color of the loading spinner",
+    },
+    {
+      id: "burger-h",
+      description: "Defines the Hue of the burger element lines",
+    },
+    {
+      id: "burger-s",
+      description: "Defines the Saturation of the burger element lines",
+    },
+    {
+      id: "burger-l",
+      description: "Defines the Lightness of the burger element lines",
+    },
+    {
+      id: "burger-border-radius",
+      description: "Defines the border radius of the burger element",
+    },
+    { id: "burger-gap", description: "Defines the gap of the burger element" },
+    {
+      id: "burger-item-height",
+      description: "Defines the height of the burger element",
+    },
+    {
+      id: "burger-item-width",
+      description: "Defines the width of the burger element",
+    },
+  ],
+  generic: [
+    { id: "body-background-color", description: "The page's background color" },
+    { id: "body-size", description: "The page's font size" },
+    { id: "body-min-width", description: "The page's minimum width" },
+    { id: "body-rendering", description: "The page's text rendering type" },
+    { id: "body-family", description: "The page's font family" },
+    {
+      id: "body-overflow-x",
+      description: "The page's horizontal overflow behavior",
+    },
+    {
+      id: "body-overflow-y",
+      description: "The page's vertical overflow behavior",
+    },
+    { id: "body-color", description: "The page's text color" },
+    { id: "body-font-size", description: "The body's font size" },
+    { id: "body-weight", description: "The body's font weight" },
+    { id: "body-line-height", description: "The body's line height" },
+    { id: "code-family", description: "The code elements font family" },
+    { id: "code-padding", description: "The code elements padding" },
+    { id: "code-weight", description: "The code elements font weight" },
+    { id: "code-size", description: "The code elements font size" },
+    { id: "small-font-size", description: "The small elements font size" },
+    {
+      id: "hr-background-color",
+      description: "The horizontal rules background color",
+    },
+    { id: "hr-height", description: "The horizontal rules height" },
+    { id: "hr-margin", description: "The horizontal rules margin" },
+    { id: "strong-color", description: "The strong elements text color" },
+    { id: "strong-weight", description: "The strong elements font weight" },
+    { id: "pre-font-size", description: "The pre elements font size" },
+    { id: "pre-padding", description: "The pre elements padding" },
+    {
+      id: "pre-code-font-size",
+      description: "The code elements inside pre ones font size",
+    },
+  ],
 };

docs/_react/bulma-customizer/src/pages/Generic.jsx

@@ -0,0 +1,16 @@
+import VarItem from "../components/VarItem";
+import { CSSVAR_KEYS } from "../constants";
+
+function Generic() {
+  const ids = CSSVAR_KEYS.generic.map((i) => i.id);
+
+  return (
+    <div>
+      {ids.map((id) => {
+        return <VarItem key={id} id={id} />;
+      })}
+    </div>
+  );
+}
+
+export default Generic;

docs/_react/bulma-customizer/src/pages/Other.jsx

@@ -0,0 +1,16 @@
+import VarItem from "../components/VarItem";
+import { CSSVAR_KEYS } from "../constants";
+
+function Other() {
+  const ids = CSSVAR_KEYS.other.map((i) => i.id);
+
+  return (
+    <div>
+      {ids.map((id) => {
+        return <VarItem key={id} id={id} />;
+      })}
+    </div>
+  );
+}
+
+export default Other;