Add Typography

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

@@ -1,20 +1,21 @@
 import { createContext, useEffect, useState } from "react";
 import classNames from "classnames";
-
-import Colors from "./pages/Colors";
+import "../../../../css/bulma.css";
 
 import { CSSVAR_KEYS, SUFFIX_TO_KIND } from "./constants";
 import { unslug } from "./utils";
 
-import "../../../../css/bulma.css";
+import Colors from "./pages/Colors";
 import Scheme from "./pages/Scheme";
+import Typography from "./pages/Typography";
 
 const UNITS = ["deg", "rem", "em", "%"];
 const PAGE_TO_COMPONENT = {
   colors: <Colors />,
   scheme: <Scheme />,
+  typography: <Typography />,
 };
-const PAGE_IDS = ["scheme", "colors"];
+const PAGE_IDS = ["colors", "scheme", "typography"];
 
 export const CustomizerContext = createContext({
   cssvars: {},
@@ -27,7 +28,7 @@ export const CustomizerContext = createContext({
 function App() {
   const initialContext = {
     cssvars: {},
-    currentPage: "scheme",
+    currentPage: "typography",
     getVar: (id) => {
       return context.cssvars[id];
     },
@@ -95,8 +96,8 @@ function App() {
         kind: SUFFIX_TO_KIND[suffix] || "any",
         original,
         unit,
-        current: Number(value),
-        start: Number(value),
+        current: value,
+        start: value,
         description,
       };
     });
@@ -118,6 +119,7 @@ function App() {
           {PAGE_IDS.map((pageId) => {
             const buttonClass = classNames({
               button: true,
+              "is-link": pageId === context.currentPage,
             });
 
             return (

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>

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

@@ -99,4 +99,25 @@ export const CSSVAR_KEYS = {
     { id: "danger-s", description: "Defines the Danger color's saturation" },
     { id: "danger-l", description: "Defines the Danger color's lightness" },
   ],
+  typography: [
+    { id: "family-primary", description: "Defines the Primary font family" },
+    {
+      id: "family-secondary",
+      description: "Defines the Secondary font family",
+    },
+    { id: "family-code", description: "Defines the Code font family" },
+    { id: "size-small", description: "Defines the Small font size" },
+    { id: "size-normal", description: "Defines the Normal font size" },
+    { id: "size-medium", description: "Defines the Medium font size" },
+    { id: "size-large", description: "Defines the Large font size" },
+    { id: "weight-light", description: "Defines the Light font weight" },
+    { id: "weight-normal", description: "Defines the Normal font weight" },
+    { id: "weight-medium", description: "Defines the Medium font weight" },
+    { id: "weight-semibold", description: "Defines the Semibold font weight" },
+    { id: "weight-bold", description: "Defines the Bold font weight" },
+    {
+      id: "weight-extrabold",
+      description: "Defines the Extrabold font weight",
+    },
+  ],
 };

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

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