From: Jeremy Thomas Date: Tue, 25 Jun 2024 23:49:42 +0000 (+0100) Subject: Add Generic vars X-Git-Tag: 1.0.2~5^2~15 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=fd13432ccccd7531078ce68d78500632e43d6bf7;p=thirdparty%2Fbulma.git Add Generic vars --- diff --git a/docs/_react/bulma-customizer/src/App.jsx b/docs/_react/bulma-customizer/src/App.jsx index daba53cb..807a0810 100644 --- a/docs/_react/bulma-customizer/src/App.jsx +++ b/docs/_react/bulma-customizer/src/App.jsx @@ -2,20 +2,31 @@ import { createContext, useEffect, useState } from "react"; import classNames from "classnames"; import "../../../../css/bulma.css"; -import { CSSVAR_KEYS, SUFFIX_TO_KIND } from "./constants"; +import { CSSVAR_KEYS } from "./constants"; import { unslug } from "./utils"; import Colors from "./pages/Colors"; import Scheme from "./pages/Scheme"; import Typography from "./pages/Typography"; - -const UNITS = ["deg", "rem", "em", "%"]; +import Other from "./pages/Other"; +import Generic from "./pages/Generic"; + +const SUFFIX_TO_KIND = { + "-h": "hue", + "-s": "saturation", + "-l": "lightness", + "-delta": "delta", + "-color": "color", +}; +const UNITS = ["deg", "%"]; const PAGE_TO_COMPONENT = { colors: , scheme: , typography: , + other: , + generic: , }; -const PAGE_IDS = ["colors", "scheme", "typography"]; +const PAGE_IDS = ["colors", "scheme", "typography", "other", "generic"]; export const CustomizerContext = createContext({ cssvars: {}, @@ -28,7 +39,7 @@ export const CustomizerContext = createContext({ function App() { const initialContext = { cssvars: {}, - currentPage: "typography", + currentPage: "generic", getVar: (id) => { return context.cssvars[id]; }, @@ -110,8 +121,6 @@ function App() { }); }, []); - console.log("ZLOG context.cssvars", context.cssvars); - return (
diff --git a/docs/_react/bulma-customizer/src/components/Slider.jsx b/docs/_react/bulma-customizer/src/components/Slider.jsx index a00aa0f8..05fa1e69 100644 --- a/docs/_react/bulma-customizer/src/components/Slider.jsx +++ b/docs/_react/bulma-customizer/src/components/Slider.jsx @@ -42,7 +42,7 @@ function Slider({ id, color }) { const slider = sliderRef.current; const sliderRect = slider.getBoundingClientRect(); const target = event.clientX - sliderRect.left; - setX(target); + setX(Math.round(target)); }; const docMouseLeave = () => { @@ -75,7 +75,7 @@ function Slider({ id, color }) { useEffect(() => { const newX = valueToX(current, 360, min, max); - setX(newX); + setX(Math.round(newX)); }, [min, max, current]); useEffect(() => { @@ -94,7 +94,7 @@ function Slider({ id, color }) { target = sliderRect.width; } - setX(target); + setX(Math.round(target)); }; window.addEventListener("mousemove", docMouseMove); diff --git a/docs/_react/bulma-customizer/src/components/Slider.module.css b/docs/_react/bulma-customizer/src/components/Slider.module.css index fdf0bddd..828d1cfd 100644 --- a/docs/_react/bulma-customizer/src/components/Slider.module.css +++ b/docs/_react/bulma-customizer/src/components/Slider.module.css @@ -1,6 +1,7 @@ .main { position: relative; width: 360px; + flex-shrink: 0; padding: 0.375rem 0; cursor: grab; } diff --git a/docs/_react/bulma-customizer/src/components/VarItem.jsx b/docs/_react/bulma-customizer/src/components/VarItem.jsx index 6c9b2587..83e53086 100644 --- a/docs/_react/bulma-customizer/src/components/VarItem.jsx +++ b/docs/_react/bulma-customizer/src/components/VarItem.jsx @@ -27,6 +27,42 @@ function VarItem({ id }) { const isDisabled = cssvar.current == cssvar.start; + let control; + + switch (cssvar.kind) { + case "hue": + case "saturation": + case "lightness": + case "delta": + control = ( + <> + + +

+ handleInputChange(e, cssvar)} + size="3" + /> + {cssvar.unit} +

+ + ); + break; + default: + control = ( + handleInputChange(e, cssvar)} + /> + ); + break; + } + return (
@@ -45,31 +81,7 @@ function VarItem({ id }) {
-
- {cssvar.kind === "any" ? ( - handleInputChange(e, cssvar)} - /> - ) : ( - <> - - -

- handleInputChange(e, cssvar)} - size="3" - /> - {cssvar.unit} -

- - )} -
+
{control}
{cssvar.description}
diff --git a/docs/_react/bulma-customizer/src/components/VarItem.module.css b/docs/_react/bulma-customizer/src/components/VarItem.module.css index 4a07355d..d52a62f9 100644 --- a/docs/_react/bulma-customizer/src/components/VarItem.module.css +++ b/docs/_react/bulma-customizer/src/components/VarItem.module.css @@ -30,7 +30,7 @@ display: flex; gap: 1.5rem; padding: 2px 0; - width: 28rem; + width: 30rem; flex-shrink: 0; } diff --git a/docs/_react/bulma-customizer/src/constants.js b/docs/_react/bulma-customizer/src/constants.js index e750c956..cbe7c012 100644 --- a/docs/_react/bulma-customizer/src/constants.js +++ b/docs/_react/bulma-customizer/src/constants.js @@ -1,11 +1,3 @@ -export const SUFFIX_TO_KIND = { - "-h": "hue", - "-s": "saturation", - "-l": "lightness", - "-gap": "gap", - "-delta": "delta", -}; - export const CSSVAR_KEYS = { scheme: [ { @@ -120,4 +112,95 @@ export const CSSVAR_KEYS = { description: "Defines the Extrabold font weight", }, ], + other: [ + { + id: "block-spacing", + description: "Defines the space below Block elements", + }, + { + id: "duration", + description: "Defines the duration of Transitions and Animations", + }, + { + id: "easing", + description: "Defines the timing function of Transitions and Animations", + }, + { id: "radius-small", description: "Defines the Small border radius" }, + { id: "radius", description: "Defines the Normal border radius" }, + { id: "radius-medium", description: "Defines the Medium border radius" }, + { id: "radius-large", description: "Defines the Large border radius" }, + { id: "radius-rounded", description: "Defines the Rounded border radius" }, + { id: "speed", description: "" }, + { + id: "arrow-color", + description: "Defines the arrow color use for Select dropdowns", + }, + { + id: "loading-color", + description: "Defines the color of the loading spinner", + }, + { + id: "burger-h", + description: "Defines the Hue of the burger element lines", + }, + { + id: "burger-s", + description: "Defines the Saturation of the burger element lines", + }, + { + id: "burger-l", + description: "Defines the Lightness of the burger element lines", + }, + { + id: "burger-border-radius", + description: "Defines the border radius of the burger element", + }, + { id: "burger-gap", description: "Defines the gap of the burger element" }, + { + id: "burger-item-height", + description: "Defines the height of the burger element", + }, + { + id: "burger-item-width", + description: "Defines the width of the burger element", + }, + ], + generic: [ + { id: "body-background-color", description: "The page's background color" }, + { id: "body-size", description: "The page's font size" }, + { id: "body-min-width", description: "The page's minimum width" }, + { id: "body-rendering", description: "The page's text rendering type" }, + { id: "body-family", description: "The page's font family" }, + { + id: "body-overflow-x", + description: "The page's horizontal overflow behavior", + }, + { + id: "body-overflow-y", + description: "The page's vertical overflow behavior", + }, + { id: "body-color", description: "The page's text color" }, + { id: "body-font-size", description: "The body's font size" }, + { id: "body-weight", description: "The body's font weight" }, + { id: "body-line-height", description: "The body's line height" }, + { id: "code-family", description: "The code elements font family" }, + { id: "code-padding", description: "The code elements padding" }, + { id: "code-weight", description: "The code elements font weight" }, + { id: "code-size", description: "The code elements font size" }, + { id: "small-font-size", description: "The small elements font size" }, + { + id: "hr-background-color", + description: "The horizontal rules background color", + }, + { id: "hr-height", description: "The horizontal rules height" }, + { id: "hr-margin", description: "The horizontal rules margin" }, + { id: "strong-color", description: "The strong elements text color" }, + { id: "strong-weight", description: "The strong elements font weight" }, + { id: "pre-font-size", description: "The pre elements font size" }, + { id: "pre-padding", description: "The pre elements padding" }, + { + id: "pre-code-font-size", + description: "The code elements inside pre ones font size", + }, + ], }; diff --git a/docs/_react/bulma-customizer/src/pages/Generic.jsx b/docs/_react/bulma-customizer/src/pages/Generic.jsx new file mode 100644 index 00000000..35649714 --- /dev/null +++ b/docs/_react/bulma-customizer/src/pages/Generic.jsx @@ -0,0 +1,16 @@ +import VarItem from "../components/VarItem"; +import { CSSVAR_KEYS } from "../constants"; + +function Generic() { + const ids = CSSVAR_KEYS.generic.map((i) => i.id); + + return ( +
+ {ids.map((id) => { + return ; + })} +
+ ); +} + +export default Generic; diff --git a/docs/_react/bulma-customizer/src/pages/Other.jsx b/docs/_react/bulma-customizer/src/pages/Other.jsx new file mode 100644 index 00000000..8f2bf00f --- /dev/null +++ b/docs/_react/bulma-customizer/src/pages/Other.jsx @@ -0,0 +1,16 @@ +import VarItem from "../components/VarItem"; +import { CSSVAR_KEYS } from "../constants"; + +function Other() { + const ids = CSSVAR_KEYS.other.map((i) => i.id); + + return ( +
+ {ids.map((id) => { + return ; + })} +
+ ); +} + +export default Other;