Add Typography

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

@@ -192,7 +192,9 @@ function Color({ color }) {
   }
 
   const isDisabled =
-    h.current === h.start && s.current === s.start && l.current === l.start;
+    Number(h.current) === Number(h.start) &&
+    Number(s.current) === Number(s.start) &&
+    Number(l.current) === Number(l.start);
 
   return (
     <div className={cn.main} style={mainStyle}>
@@ -242,7 +244,7 @@ function Color({ color }) {
             <input
               type="text"
               className="input"
-              value={h.current}
+              value={Number(h.current)}
               onChange={(e) => handleInputChange(e, h)}
               size="3"
             />
@@ -257,7 +259,7 @@ function Color({ color }) {
             <input
               type="text"
               className="input"
-              value={s.current}
+              value={Number(s.current)}
               onChange={(e) => handleInputChange(e, s)}
               size="3"
             />
@@ -272,7 +274,7 @@ function Color({ color }) {
             <input
               type="text"
               className="input"
-              value={l.current}
+              value={Number(l.current)}
               onChange={(e) => handleInputChange(e, l)}
               size="3"
             />

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

@@ -21,7 +21,7 @@ const xToValue = (x, width, min, max) => {
 };
 
 const valueToX = (value, width, min, max) => {
-  const decimal = value / (max - min);
+  const decimal = Number(value) / (max - min);
   const newValue = decimal * width;
   return Math.round(newValue);
 };
@@ -158,12 +158,7 @@ function Slider({ id, color }) {
 
 Slider.propTypes = {
   id: PropTypes.string,
-  kind: PropTypes.string,
   color: PropTypes.string,
-  original: PropTypes.string,
-  start: PropTypes.number,
-  unit: PropTypes.string,
-  getValue: PropTypes.func,
 };
 
 export default Slider;

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

@@ -0,0 +1,3 @@
+function VarInput() {}
+
+export default VarInput;

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

@@ -25,7 +25,7 @@ function VarItem({ id }) {
     updateVar(cssvar.id, value);
   };
 
-  const isDisabled = cssvar.current === cssvar.start;
+  const isDisabled = cssvar.current == cssvar.start;
 
   return (
     <div className={cn.main}>
@@ -46,17 +46,29 @@ function VarItem({ id }) {
       </div>
 
       <div className={cn.slider}>
-        <Slider id={cssvar.id} />
-        <p className={cn.form}>
+        {cssvar.kind === "any" ? (
           <input
-            type="text"
             className="input"
+            type="text"
             value={cssvar.current}
             onChange={(e) => handleInputChange(e, cssvar)}
-            size="3"
           />
-          <span>{cssvar.unit}</span>
-        </p>
+        ) : (
+          <>
+            <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>