diff --git a/docs/_react/bulma-customizer/package-lock.json b/docs/_react/bulma-customizer/package-lock.json index e7a29ba2..e08452a6 100644 --- a/docs/_react/bulma-customizer/package-lock.json +++ b/docs/_react/bulma-customizer/package-lock.json @@ -8,6 +8,7 @@ "name": "bulma-customizer", "version": "0.0.0", "dependencies": { + "classnames": "^2.5.1", "react": "^18.3.1", "react-dom": "^18.3.1" }, @@ -1560,6 +1561,11 @@ "node": ">=4" } }, + "node_modules/classnames": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" + }, "node_modules/color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", diff --git a/docs/_react/bulma-customizer/package.json b/docs/_react/bulma-customizer/package.json index 0148e725..c585933a 100644 --- a/docs/_react/bulma-customizer/package.json +++ b/docs/_react/bulma-customizer/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "classnames": "^2.5.1", "react": "^18.3.1", "react-dom": "^18.3.1" }, diff --git a/docs/_react/bulma-customizer/src/App.jsx b/docs/_react/bulma-customizer/src/App.jsx index 676da3cf..e25db1c3 100644 --- a/docs/_react/bulma-customizer/src/App.jsx +++ b/docs/_react/bulma-customizer/src/App.jsx @@ -3,8 +3,22 @@ import "../../../../css/bulma.css"; import "./App.css"; import Slider from "./components/Slider"; -const KEYS = ["scheme-h", "primary-h", "primary-s", "primary-l"]; +// const COLORS = ["primary", "link", "info", "success", "warning", "danger"]; + +const KEYS = [ + "scheme-h", + "primary-h", + "primary-s", + "primary-l", + "skeleton-lines-gap", +]; const UNITS = ["deg", "rem", "em", "%"]; +const SUFFIX_TO_KIND = { + "-h": "hue", + "-s": "saturation", + "-l": "lightness", + "-gap": "gap", +}; function App() { const [vars, setVars] = useState([]); @@ -14,11 +28,15 @@ function App() { 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 { id: key, + kind: SUFFIX_TO_KIND[suffix] || "any", original, unit, start: Number(value), @@ -35,11 +53,18 @@ function App() {
{id}
+ {id}
+
+
+
+ {value}
+ {unit}
+
+
+ {id}
-
-
- {value}
- {unit}
-
-
+ Use the HTML5 doctype
- {% highlight html %} - - {% endhighlight %} + {%- highlight html -%} + + {%- endhighlight -%}