From: Jeremy Thomas Date: Tue, 25 Jun 2024 22:12:07 +0000 (+0100) Subject: Add Scheme vars X-Git-Tag: 1.0.2~5^2~17 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=c638115ef215f43776cddc6a137408e8301d2786;p=thirdparty%2Fbulma.git Add Scheme vars --- diff --git a/docs/_react/bulma-customizer/src/App.jsx b/docs/_react/bulma-customizer/src/App.jsx index 959f9081..203a8ce3 100644 --- a/docs/_react/bulma-customizer/src/App.jsx +++ b/docs/_react/bulma-customizer/src/App.jsx @@ -27,7 +27,7 @@ export const CustomizerContext = createContext({ function App() { const initialContext = { cssvars: {}, - currentPage: "colors", + currentPage: "scheme", getVar: (id) => { return context.cssvars[id]; }, @@ -78,14 +78,17 @@ function App() { const cssvars = {}; const allKeys = PAGE_IDS.map((pageId) => CSSVAR_KEYS[pageId]).flat(); + const allKeyIds = allKeys.map((i) => i.id); - allKeys.map((key) => { + allKeyIds.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; + const description = + allKeys.find((el) => el.id === key)?.description || "None"; cssvars[key] = { id: key, @@ -94,6 +97,7 @@ function App() { unit, current: Number(value), start: Number(value), + description, }; }); @@ -105,6 +109,8 @@ 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 15792b6a..dc8e6c05 100644 --- a/docs/_react/bulma-customizer/src/components/Slider.jsx +++ b/docs/_react/bulma-customizer/src/components/Slider.jsx @@ -26,9 +26,9 @@ const valueToX = (value, width, min, max) => { return Math.round(newValue); }; -function Slider({ id, color, kind }) { +function Slider({ id, color }) { const { cssvars, updateVar } = useContext(CustomizerContext); - const { start, current } = cssvars[id]; + const { start, current, kind } = cssvars[id]; const [min, max] = kind ? RANGES[kind] : RANGES.any; const sliderRef = useRef(null); diff --git a/docs/_react/bulma-customizer/src/components/Slider.module.css b/docs/_react/bulma-customizer/src/components/Slider.module.css index 4e7433d5..fdf0bddd 100644 --- a/docs/_react/bulma-customizer/src/components/Slider.module.css +++ b/docs/_react/bulma-customizer/src/components/Slider.module.css @@ -31,7 +31,7 @@ .background { border-radius: 0.25rem; - background-color: white; + background-color: var(--bulma-background); height: 0.5rem; } diff --git a/docs/_react/bulma-customizer/src/components/VarItem.jsx b/docs/_react/bulma-customizer/src/components/VarItem.jsx new file mode 100644 index 00000000..2cc4b491 --- /dev/null +++ b/docs/_react/bulma-customizer/src/components/VarItem.jsx @@ -0,0 +1,71 @@ +import { useContext } from "react"; +import PropTypes from "prop-types"; + +import Slider from "./Slider"; +import { CustomizerContext } from "../App"; + +import cn from "./VarItem.module.css"; + +function VarItem({ id }) { + const { cssvars, updateVar } = useContext(CustomizerContext); + + const cssvar = cssvars[id]; + + if (!cssvar) { + return; + } + + const handleReset = (event) => { + event.preventDefault(); + updateVar(cssvar.id, cssvar.start); + }; + + const handleInputChange = (event, cssvar) => { + let value = event.target.value; + updateVar(cssvar.id, value); + }; + + const isDisabled = cssvar.current === cssvar.start; + + return ( +
+
+
+ {cssvar.id} +
+ +
+ +
+
+ +
+ +

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

+
+ +
{cssvar.description}
+
+ ); +} + +VarItem.propTypes = { + id: PropTypes.string, +}; + +export default VarItem; diff --git a/docs/_react/bulma-customizer/src/components/VarItem.module.css b/docs/_react/bulma-customizer/src/components/VarItem.module.css new file mode 100644 index 00000000..4a07355d --- /dev/null +++ b/docs/_react/bulma-customizer/src/components/VarItem.module.css @@ -0,0 +1,61 @@ +.main { + align-items: start; + display: flex; + gap: 1.5rem; + border-bottom: 1px solid var(--bulma-border); + padding: 1.25rem 0; +} + +.side { + flex-shrink: 0; + width: 15rem; +} + +.name { + gap: 1rem; + display: flex; + align-items: center; + margin-bottom: 0.5rem; +} + +.name code { + font-size: 1.25em; + font-weight: 600; + padding: 0; + background: none; +} + +.slider { + align-items: center; + display: flex; + gap: 1.5rem; + padding: 2px 0; + width: 28rem; + flex-shrink: 0; +} + +.form { + display: flex; + align-items: center; + font-family: var(--bulma-family-code); + gap: 0.25em; +} + +.form input { + font-family: inherit; + font-size: inherit; + padding: 0.25em; + height: auto; + border-radius: 0.25em; + width: 3em; + padding: 0 0.25em; +} + +.form span { + opacity: 0.5; +} + +.description { + flex-shrink: 1; + flex-grow: 1; +} diff --git a/docs/_react/bulma-customizer/src/constants.js b/docs/_react/bulma-customizer/src/constants.js index 2a54100f..5e40ac9e 100644 --- a/docs/_react/bulma-customizer/src/constants.js +++ b/docs/_react/bulma-customizer/src/constants.js @@ -8,44 +8,95 @@ export const SUFFIX_TO_KIND = { export const CSSVAR_KEYS = { scheme: [ - "scheme-h", - "scheme-s", - "light-l", - "light-invert-l", - "dark-l", - "dark-invert-l", - "soft-l", - "bold-l", - "soft-invert-l", - "bold-invert-l", - "hover-background-l-delta", - "active-background-l-delta", - "hover-border-l-delta", - "active-border-l-delta", - "hover-color-l-delta", - "active-color-l-delta", - "hover-shadow-a-delta", - "active-shadow-a-delta", + { + id: "scheme-h", + description: + "Defines the Scheme's Hue, that is used for backgrounds, borders, and text, in both Light and Dark modes", + }, + { + id: "scheme-s", + description: + "Defines the Scheme's Saturation, that is used for backgrounds, borders, and text, in both Light and Dark modes", + }, + { id: "light-l", description: "Defines the lightness of backgrounds" }, + { + id: "light-invert-l", + description: "Defines the lightness of backgrounds' invert color", + }, + { id: "dark-l", description: "Defines the lightness of dark backgrounds" }, + { + id: "dark-invert-l", + description: "Defines the lightness of dark backgrounds' invert color", + }, + { id: "soft-l", description: "Defines the lightness of soft colors" }, + { id: "bold-l", description: "Defines the lightness of bold colors" }, + { + id: "soft-invert-l", + description: "Defines the lightness of soft color's invert color", + }, + { + id: "bold-invert-l", + description: "Defines the lightness of bold color's invert color", + }, + { + id: "hover-background-l-delta", + description: + "Defines how much the lightness will change when a background is hovered", + }, + { + id: "active-background-l-delta", + description: + "Defines how much the lightness will change when a background is active", + }, + { + id: "hover-border-l-delta", + description: + "Defines how much the lightness will change when a border is hovered", + }, + { + id: "active-border-l-delta", + description: + "Defines how much the lightness will change when a border is active", + }, + { + id: "hover-color-l-delta", + description: + "Defines how much the lightness will change when a color is hovered", + }, + { + id: "active-color-l-delta", + description: + "Defines how much the lightness will change when a color is active", + }, + { + id: "hover-shadow-a-delta", + description: + "Defines how much the lightness will change when a shadow is hovered", + }, + { + id: "active-shadow-a-delta", + description: + "Defines how much the lightness will change when a shadow is active", + }, ], colors: [ - "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", + { id: "primary-h", description: "Defines the Primary color's hue" }, + { id: "primary-s", description: "Defines the Primary color's saturation" }, + { id: "primary-l", description: "Defines the Primary color's lightness" }, + { id: "link-h", description: "Defines the Link color's hue" }, + { id: "link-s", description: "Defines the Link color's saturation" }, + { id: "link-l", description: "Defines the Link color's lightness" }, + { id: "info-h", description: "Defines the Info color's hue" }, + { id: "info-s", description: "Defines the Info color's saturation" }, + { id: "info-l", description: "Defines the Info color's lightness" }, + { id: "success-h", description: "Defines the Success color's hue" }, + { id: "success-s", description: "Defines the Success color's saturation" }, + { id: "success-l", description: "Defines the Success color's lightness" }, + { id: "warning-h", description: "Defines the Warning color's hue" }, + { id: "warning-s", description: "Defines the Warning color's saturation" }, + { id: "warning-l", description: "Defines the Warning color's lightness" }, + { id: "danger-h", description: "Defines the Danger color's hue" }, + { id: "danger-s", description: "Defines the Danger color's saturation" }, + { id: "danger-l", description: "Defines the Danger color's lightness" }, ], }; diff --git a/docs/_react/bulma-customizer/src/pages/Scheme.jsx b/docs/_react/bulma-customizer/src/pages/Scheme.jsx index b284ad49..d91008b3 100644 --- a/docs/_react/bulma-customizer/src/pages/Scheme.jsx +++ b/docs/_react/bulma-customizer/src/pages/Scheme.jsx @@ -1,13 +1,13 @@ -import Slider from "../components/Slider"; +import VarItem from "../components/VarItem"; import { CSSVAR_KEYS } from "../constants"; function Scheme() { - const schemeIds = CSSVAR_KEYS.scheme; + const schemeIds = CSSVAR_KEYS.scheme.map((i) => i.id); return (
{schemeIds.map((schemeId) => { - return ; + return ; })}
);