Add HSL sliders

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

@@ -3,13 +3,28 @@ import "../../../../css/bulma.css";
 import "./App.css";
 import Slider from "./components/Slider";
 
-// const COLORS = ["primary", "link", "info", "success", "warning", "danger"];
+const COLORS = ["primary", "link", "info", "success", "warning", "danger"];
 
 const KEYS = [
   "scheme-h",
   "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",
 ];
 const UNITS = ["deg", "rem", "em", "%"];
@@ -21,12 +36,14 @@ const SUFFIX_TO_KIND = {
 };
 
 function App() {
-  const [vars, setVars] = useState([]);
+  const [vars, setVars] = useState({});
 
   useEffect(() => {
     const rootStyle = window.getComputedStyle(document.documentElement);
 
-    const cssvars = KEYS.map((key) => {
+    const cssvars = {};
+
+    KEYS.map((key) => {
       const original = rootStyle.getPropertyValue(`--bulma-${key}`);
       const suffix = Object.keys(SUFFIX_TO_KIND).find((kind) =>
         key.endsWith(kind),
@@ -34,7 +51,7 @@ function App() {
       const unit = UNITS.find((unit) => original.endsWith(unit)) || "";
       const value = unit !== "" ? original.split(unit)[0] : original;
 
-      return {
+      cssvars[key] = {
         id: key,
         kind: SUFFIX_TO_KIND[suffix] || "any",
         original,
@@ -46,13 +63,55 @@ function App() {
     setVars(cssvars);
   }, []);
 
-  console.log("ZLOG vars", vars);
-
   return (
     <section className="section">
       <div className="card">
         <div className="card-content">
-          {vars.map((v) => {
+          {COLORS.map((color) => {
+            const h = `${color}-h`;
+
+            if (!(h in vars)) {
+              return;
+            }
+
+            const s = `${color}-s`;
+            const l = `${color}-l`;
+
+            return (
+              <div key={color} className="block">
+                <code>{color}</code>
+
+                <Slider
+                  id={h}
+                  kind="hue"
+                  color={color}
+                  original={vars[h].original}
+                  start={vars[h].start}
+                  unit={vars[h].unit}
+                />
+
+                <Slider
+                  id={s}
+                  kind="saturation"
+                  color={color}
+                  original={vars[s].original}
+                  start={vars[s].start}
+                  unit={vars[s].unit}
+                />
+
+                <Slider
+                  id={l}
+                  kind="lightness"
+                  color={color}
+                  original={vars[l].original}
+                  start={vars[l].start}
+                  unit={vars[l].unit}
+                />
+              </div>
+            );
+          })}
+
+          {/* {vars.map((v) => {
             const { id, kind, original, unit, start } = v;
 
             return (
@@ -67,14 +126,12 @@ function App() {
                 />
               </div>
             );
-          })}
+          })} */}
 
           <div className="buttons">
             <button className="button">Button</button>
-
             <button className="button is-primary">Primary</button>
             <button className="button is-link">Link</button>
-
             <button className="button is-info">Info</button>
             <button className="button is-success">Success</button>
             <button className="button is-warning">Warning</button>