Add HSL sliders

Author: jgthms

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,20 +36,22 @@ 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),
       );
       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>

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

@@ -24,14 +24,15 @@ const valueToX = (value, width, min, max) => {
   return Math.round(newValue);
 };
 
-function Slider({ id, kind, start, unit }) {
+function Slider({ id, color, kind, start, unit }) {
   const [min, max] = RANGES[kind];
 
+  const sliderRef = useRef(null);
+  const handleRef = useRef(null);
+
   const [value, setValue] = useState(start);
   const [isMoving, setMoving] = useState(false);
   const [x, setX] = useState(valueToX(start, 240, min, max));
-  const sliderRef = useRef(null);
-  const handleRef = useRef(null);
 
   const handleMouseDown = (event) => {
     setMoving(true);
@@ -121,12 +122,23 @@ function Slider({ id, kind, start, unit }) {
     [cn[kind]]: true,
   });
 
+  const mainStyle = {
+    "--h": `var(--bulma-${color}-h)`,
+    "--s": `var(--bulma-${color}-s)`,
+    "--l": `var(--bulma-${color}-l)`,
+  };
+
   const handleStyle = {
     transform: `translateX(${x}px)`,
   };
 
   return (
-    <div className={mainCN} ref={sliderRef} onMouseDown={handleMouseDown}>
+    <div
+      className={mainCN}
+      ref={sliderRef}
+      style={mainStyle}
+      onMouseDown={handleMouseDown}
+    >
       <div className={backgroundCN}>
         <span ref={handleRef} className={cn.handle} style={handleStyle} />
       </div>
@@ -137,6 +149,7 @@ function Slider({ id, kind, start, unit }) {
 Slider.propTypes = {
   id: PropTypes.string,
   kind: PropTypes.string,
+  color: PropTypes.string,
   original: PropTypes.string,
   start: PropTypes.number,
   unit: PropTypes.string,

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

@@ -2,7 +2,6 @@
   position: relative;
   width: 15rem;
   padding: 0.375rem 0;
-  box-shadow: 0 0 0 1px green;
   cursor: grab;
 }
 
@@ -31,7 +30,7 @@
 }
 
 .background {
-  border-radius: 0.125rem;
+  border-radius: 0.25rem;
   background-color: white;
   height: 0.5rem;
 }
@@ -48,3 +47,21 @@
     rgb(255, 0, 0)
   );
 }
+
+.saturation {
+  background-image: linear-gradient(
+    to right,
+    hsl(var(--h), 0%, var(--l)),
+    hsl(var(--h), var(--s), var(--l)),
+    hsl(var(--h), 100%, var(--l))
+  );
+}
+
+.lightness {
+  background-image: linear-gradient(
+    to right,
+    hsl(var(--h), var(--s), 0%),
+    hsl(var(--h), var(--s), 50%),
+    hsl(var(--h), var(--s), 100%)
+  );
+}