Add Scheme vars

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

@@ -27,7 +27,7 @@ export const CustomizerContext = createContext({
 function App() {
   const initialContext = {
     cssvars: {},
-    currentPage: "colors",
+    currentPage: "scheme",
     getVar: (id) => {
       return context.cssvars[id];
     },
@@ -78,14 +78,17 @@ function App() {
 
     const cssvars = {};
     const allKeys = PAGE_IDS.map((pageId) => CSSVAR_KEYS[pageId]).flat();
+    const allKeyIds = allKeys.map((i) => i.id);
 
-    allKeys.map((key) => {
+    allKeyIds.map((key) => {
       const original = rootStyle.getPropertyValue(`--bulma-${key}`);
       const suffix = Object.keys(SUFFIX_TO_KIND).find((kind) =>
         key.endsWith(kind),
       );
       const unit = UNITS.find((unit) => original.endsWith(unit)) || "";
       const value = unit !== "" ? original.split(unit)[0] : original;
+      const description =
+        allKeys.find((el) => el.id === key)?.description || "None";
 
       cssvars[key] = {
         id: key,
@@ -94,6 +97,7 @@ function App() {
         unit,
         current: Number(value),
         start: Number(value),
+        description,
       };
     });
 
@@ -105,6 +109,8 @@ 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

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

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

@@ -8,44 +8,95 @@ export const SUFFIX_TO_KIND = {
 
 export const CSSVAR_KEYS = {
   scheme: [
-    "scheme-h",
-    "scheme-s",
-    "light-l",
-    "light-invert-l",
-    "dark-l",
-    "dark-invert-l",
-    "soft-l",
-    "bold-l",
-    "soft-invert-l",
-    "bold-invert-l",
-    "hover-background-l-delta",
-    "active-background-l-delta",
-    "hover-border-l-delta",
-    "active-border-l-delta",
-    "hover-color-l-delta",
-    "active-color-l-delta",
-    "hover-shadow-a-delta",
-    "active-shadow-a-delta",
+    {
+      id: "scheme-h",
+      description:
+        "Defines the Scheme's Hue, that is used for backgrounds, borders, and text, in both Light and Dark modes",
+    },
+    {
+      id: "scheme-s",
+      description:
+        "Defines the Scheme's Saturation, that is used for backgrounds, borders, and text, in both Light and Dark modes",
+    },
+    { id: "light-l", description: "Defines the lightness of backgrounds" },
+    {
+      id: "light-invert-l",
+      description: "Defines the lightness of backgrounds' invert color",
+    },
+    { id: "dark-l", description: "Defines the lightness of dark backgrounds" },
+    {
+      id: "dark-invert-l",
+      description: "Defines the lightness of dark backgrounds' invert color",
+    },
+    { id: "soft-l", description: "Defines the lightness of soft colors" },
+    { id: "bold-l", description: "Defines the lightness of bold colors" },
+    {
+      id: "soft-invert-l",
+      description: "Defines the lightness of soft color's invert color",
+    },
+    {
+      id: "bold-invert-l",
+      description: "Defines the lightness of bold color's invert color",
+    },
+    {
+      id: "hover-background-l-delta",
+      description:
+        "Defines how much the lightness will change when a background is hovered",
+    },
+    {
+      id: "active-background-l-delta",
+      description:
+        "Defines how much the lightness will change when a background is active",
+    },
+    {
+      id: "hover-border-l-delta",
+      description:
+        "Defines how much the lightness will change when a border is hovered",
+    },
+    {
+      id: "active-border-l-delta",
+      description:
+        "Defines how much the lightness will change when a border is active",
+    },
+    {
+      id: "hover-color-l-delta",
+      description:
+        "Defines how much the lightness will change when a color is hovered",
+    },
+    {
+      id: "active-color-l-delta",
+      description:
+        "Defines how much the lightness will change when a color is active",
+    },
+    {
+      id: "hover-shadow-a-delta",
+      description:
+        "Defines how much the lightness will change when a shadow is hovered",
+    },
+    {
+      id: "active-shadow-a-delta",
+      description:
+        "Defines how much the lightness will change when a shadow is active",
+    },
   ],
   colors: [
-    "primary-h",
-    "primary-s",
-    "primary-l",
-    "link-h",
-    "link-s",
-    "link-l",
-    "info-h",
-    "info-s",
-    "info-l",
-    "success-h",
-    "success-s",
-    "success-l",
-    "warning-h",
-    "warning-s",
-    "warning-l",
-    "danger-h",
-    "danger-s",
-    "danger-l",
-    "skeleton-lines-gap",
+    { id: "primary-h", description: "Defines the Primary color's hue" },
+    { id: "primary-s", description: "Defines the Primary color's saturation" },
+    { id: "primary-l", description: "Defines the Primary color's lightness" },
+    { id: "link-h", description: "Defines the Link color's hue" },
+    { id: "link-s", description: "Defines the Link color's saturation" },
+    { id: "link-l", description: "Defines the Link color's lightness" },
+    { id: "info-h", description: "Defines the Info color's hue" },
+    { id: "info-s", description: "Defines the Info color's saturation" },
+    { id: "info-l", description: "Defines the Info color's lightness" },
+    { id: "success-h", description: "Defines the Success color's hue" },
+    { id: "success-s", description: "Defines the Success color's saturation" },
+    { id: "success-l", description: "Defines the Success color's lightness" },
+    { id: "warning-h", description: "Defines the Warning color's hue" },
+    { id: "warning-s", description: "Defines the Warning color's saturation" },
+    { id: "warning-l", description: "Defines the Warning color's lightness" },
+    { id: "danger-h", description: "Defines the Danger color's hue" },
+    { id: "danger-s", description: "Defines the Danger color's saturation" },
+    { id: "danger-l", description: "Defines the Danger color's lightness" },
   ],
 };

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

@@ -1,13 +1,13 @@
-import Slider from "../components/Slider";
+import VarItem from "../components/VarItem";
 import { CSSVAR_KEYS } from "../constants";
 
 function Scheme() {
-  const schemeIds = CSSVAR_KEYS.scheme;
+  const schemeIds = CSSVAR_KEYS.scheme.map((i) => i.id);
 
   return (
     <div>
       {schemeIds.map((schemeId) => {
-        return <Slider key={schemeId} id={schemeId} />;
+        return <VarItem key={schemeId} id={schemeId} />;
       })}
     </div>
   );