diff --git a/docs/_react/bulma-customizer/index.html b/docs/_react/bulma-customizer/index.html index 0c589ecc..3ba36b87 100644 --- a/docs/_react/bulma-customizer/index.html +++ b/docs/_react/bulma-customizer/index.html @@ -8,6 +8,7 @@
+
Box
diff --git a/docs/_react/bulma-customizer/src/App.jsx b/docs/_react/bulma-customizer/src/App.jsx index 807a0810..7027930d 100644 --- a/docs/_react/bulma-customizer/src/App.jsx +++ b/docs/_react/bulma-customizer/src/App.jsx @@ -10,6 +10,8 @@ import Scheme from "./pages/Scheme"; import Typography from "./pages/Typography"; import Other from "./pages/Other"; import Generic from "./pages/Generic"; +import Skeleton from "./pages/Skeleton"; +import Box from "./pages/Box"; const SUFFIX_TO_KIND = { "-h": "hue", @@ -25,8 +27,18 @@ const PAGE_TO_COMPONENT = { typography: , other: , generic: , + skeleton: , + box: , }; -const PAGE_IDS = ["colors", "scheme", "typography", "other", "generic"]; +const PAGE_IDS = [ + "colors", + "scheme", + "typography", + "other", + "generic", + "skeleton", + "box", +]; export const CustomizerContext = createContext({ cssvars: {}, @@ -39,7 +51,7 @@ export const CustomizerContext = createContext({ function App() { const initialContext = { cssvars: {}, - currentPage: "generic", + currentPage: "box", getVar: (id) => { return context.cssvars[id]; }, @@ -53,16 +65,14 @@ function App() { }, updateVar: (id, newValue) => { setContext((context) => { - const { start, unit } = context.cssvars[id]; + const { start, unit, scope } = context.cssvars[id]; const computedValue = `${newValue}${unit}`; + const el = document.querySelector(scope); if (start === newValue) { - document.documentElement.style.removeProperty(`--bulma-${id}`); + el.style.removeProperty(`--bulma-${id}`); } else { - document.documentElement.style.setProperty( - `--bulma-${id}`, - computedValue, - ); + el.style.setProperty(`--bulma-${id}`, computedValue); } return { @@ -86,14 +96,31 @@ function App() { }; useEffect(() => { - const rootStyle = window.getComputedStyle(document.documentElement); + // const elements = document.querySelectorAll("html, .box"); + // const allStyles = Array.from(elements).map((element) => + // getComputedStyle(element), + // ); + + const styles = { + root: window.getComputedStyle(document.documentElement), + box: window.getComputedStyle(document.querySelector(".box")), + }; const cssvars = {}; const allKeys = PAGE_IDS.map((pageId) => CSSVAR_KEYS[pageId]).flat(); const allKeyIds = allKeys.map((i) => i.id); allKeyIds.map((key) => { - const original = rootStyle.getPropertyValue(`--bulma-${key}`); + let original; + let scope = ":root"; + + if (key.startsWith("box")) { + scope = ".box"; + original = styles.box.getPropertyValue(`--bulma-${key}`); + } else { + original = styles.root.getPropertyValue(`--bulma-${key}`); + } + const suffix = Object.keys(SUFFIX_TO_KIND).find((kind) => key.endsWith(kind), ); @@ -110,6 +137,7 @@ function App() { current: value, start: value, description, + scope, }; }); diff --git a/docs/_react/bulma-customizer/src/components/VarItem.module.css b/docs/_react/bulma-customizer/src/components/VarItem.module.css index d52a62f9..6ec5afa7 100644 --- a/docs/_react/bulma-customizer/src/components/VarItem.module.css +++ b/docs/_react/bulma-customizer/src/components/VarItem.module.css @@ -3,7 +3,13 @@ display: flex; gap: 1.5rem; border-bottom: 1px solid var(--bulma-border); - padding: 1.25rem 0; + padding: 1.25rem; + transition-property: background-color; + transition-duration: var(--bulma-duration); +} + +.main:hover { + background-color: var(--bulma-background); } .side { diff --git a/docs/_react/bulma-customizer/src/constants.js b/docs/_react/bulma-customizer/src/constants.js index cbe7c012..c7899b51 100644 --- a/docs/_react/bulma-customizer/src/constants.js +++ b/docs/_react/bulma-customizer/src/constants.js @@ -15,7 +15,10 @@ export const CSSVAR_KEYS = { id: "light-invert-l", description: "Defines the lightness of backgrounds' invert color", }, - { id: "dark-l", description: "Defines the lightness of dark backgrounds" }, + { + id: "dark-l", + description: "Defines the lightness of dark backgrounds", + }, { id: "dark-invert-l", description: "Defines the lightness of dark backgrounds' invert color", @@ -73,7 +76,10 @@ export const CSSVAR_KEYS = { ], colors: [ { id: "primary-h", description: "Defines the Primary color's hue" }, - { id: "primary-s", description: "Defines the Primary color's saturation" }, + { + 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" }, @@ -82,10 +88,16 @@ export const CSSVAR_KEYS = { { 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-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-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" }, @@ -105,7 +117,10 @@ export const CSSVAR_KEYS = { { 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-semibold", + description: "Defines the Semibold font weight", + }, { id: "weight-bold", description: "Defines the Bold font weight" }, { id: "weight-extrabold", @@ -129,7 +144,10 @@ export const CSSVAR_KEYS = { { 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: "radius-rounded", + description: "Defines the Rounded border radius", + }, { id: "speed", description: "" }, { id: "arrow-color", @@ -155,7 +173,10 @@ export const CSSVAR_KEYS = { 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-gap", + description: "Defines the gap of the burger element", + }, { id: "burger-item-height", description: "Defines the height of the burger element", @@ -166,7 +187,10 @@ export const CSSVAR_KEYS = { }, ], generic: [ - { id: "body-background-color", description: "The page's background color" }, + { + 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" }, @@ -203,4 +227,38 @@ export const CSSVAR_KEYS = { description: "The code elements inside pre ones font size", }, ], + skeleton: [ + { + id: "skeleton-background", + description: "The skeleton background color", + }, + { id: "skeleton-radius", description: "The skeleton border radius" }, + { + id: "skeleton-block-min-height", + description: "The minimum height of skeleton blocks", + }, + { + id: "skeleton-lines-gap", + description: "The gap between skeleton lines", + }, + { + id: "skeleton-line-height", + description: "The height of each skeleton line", + }, + ], + box: [ + { id: "box-background-color", description: "The box background color" }, + { id: "box-color", description: "The box text color" }, + { id: "box-radius", description: "The box border radius" }, + { id: "box-shadow", description: "The box box shadow" }, + { id: "box-padding", description: "The box padding" }, + { + id: "box-link-hover-shadow", + description: "The box link shadow when hovered", + }, + { + id: "box-link-active-shadow", + description: "The box link shadow when active", + }, + ], }; diff --git a/docs/_react/bulma-customizer/src/pages/Box.jsx b/docs/_react/bulma-customizer/src/pages/Box.jsx new file mode 100644 index 00000000..d3eb732a --- /dev/null +++ b/docs/_react/bulma-customizer/src/pages/Box.jsx @@ -0,0 +1,18 @@ +import VarItem from "../components/VarItem"; +import { CSSVAR_KEYS } from "../constants"; + +function Box() { + const ids = CSSVAR_KEYS.box.map((i) => i.id); + + return ( +
+
I am in a box
+ + {ids.map((id) => { + return ; + })} +
+ ); +} + +export default Box; diff --git a/docs/_react/bulma-customizer/src/pages/Skeleton.jsx b/docs/_react/bulma-customizer/src/pages/Skeleton.jsx new file mode 100644 index 00000000..91122838 --- /dev/null +++ b/docs/_react/bulma-customizer/src/pages/Skeleton.jsx @@ -0,0 +1,16 @@ +import VarItem from "../components/VarItem"; +import { CSSVAR_KEYS } from "../constants"; + +function Skeleton() { + const ids = CSSVAR_KEYS.skeleton.map((i) => i.id); + + return ( +
+ {ids.map((id) => { + return ; + })} +
+ ); +} + +export default Skeleton;