Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-22 05:04:28 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add scopes

Browse Source
This commit is contained in:
Jeremy Thomas
2024-06-26 01:49:55 +01:00
parent fd13432ccc
commit 5b9f3a0d2a
6 changed files with 146 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/_react/bulma-customizer/index.html
View File

@@ -8,6 +8,7 @@
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<div class="box">Box</div>
<script type="module" src="/src/main.jsx"></script> <script type="module" src="/src/main.jsx"></script>
</body> </body>
</html> </html>

48
docs/_react/bulma-customizer/src/App.jsx
View File

@@ -10,6 +10,8 @@ import Scheme from "./pages/Scheme";
import Typography from "./pages/Typography"; import Typography from "./pages/Typography";
import Other from "./pages/Other"; import Other from "./pages/Other";
import Generic from "./pages/Generic"; import Generic from "./pages/Generic";
import Skeleton from "./pages/Skeleton";
import Box from "./pages/Box";
const SUFFIX_TO_KIND = { const SUFFIX_TO_KIND = {
"-h": "hue", "-h": "hue",
@@ -25,8 +27,18 @@ const PAGE_TO_COMPONENT = {
typography: <Typography />, typography: <Typography />,
other: <Other />, other: <Other />,
generic: <Generic />, generic: <Generic />,
skeleton: <Skeleton />,
box: <Box />,
}; };
const PAGE_IDS = ["colors", "scheme", "typography", "other", "generic"]; const PAGE_IDS = [
"colors",
"scheme",
"typography",
"other",
"generic",
"skeleton",
"box",
];
export const CustomizerContext = createContext({ export const CustomizerContext = createContext({
cssvars: {}, cssvars: {},
@@ -39,7 +51,7 @@ export const CustomizerContext = createContext({
function App() { function App() {
const initialContext = { const initialContext = {
cssvars: {}, cssvars: {},
currentPage: "generic", currentPage: "box",
getVar: (id) => { getVar: (id) => {
return context.cssvars[id]; return context.cssvars[id];
}, },
@@ -53,16 +65,14 @@ function App() {
}, },
updateVar: (id, newValue) => { updateVar: (id, newValue) => {
setContext((context) => { setContext((context) => {
const { start, unit } = context.cssvars[id]; const { start, unit, scope } = context.cssvars[id];
const computedValue = `${newValue}${unit}`; const computedValue = `${newValue}${unit}`;
const el = document.querySelector(scope);
if (start === newValue) { if (start === newValue) {
document.documentElement.style.removeProperty(`--bulma-${id}`); el.style.removeProperty(`--bulma-${id}`);
} else { } else {
document.documentElement.style.setProperty( el.style.setProperty(`--bulma-${id}`, computedValue);
`--bulma-${id}`,
computedValue,
);
} }
return { return {
@@ -86,14 +96,31 @@ function App() {
}; };
useEffect(() => { 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 cssvars = {};
const allKeys = PAGE_IDS.map((pageId) => CSSVAR_KEYS[pageId]).flat(); const allKeys = PAGE_IDS.map((pageId) => CSSVAR_KEYS[pageId]).flat();
const allKeyIds = allKeys.map((i) => i.id); const allKeyIds = allKeys.map((i) => i.id);
allKeyIds.map((key) => { 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) => const suffix = Object.keys(SUFFIX_TO_KIND).find((kind) =>
key.endsWith(kind), key.endsWith(kind),
); );
@@ -110,6 +137,7 @@ function App() {
current: value, current: value,
start: value, start: value,
description, description,
scope,
}; };
}); });

8
docs/_react/bulma-customizer/src/components/VarItem.module.css
View File

@@ -3,7 +3,13 @@
display: flex; display: flex;
gap: 1.5rem; gap: 1.5rem;
border-bottom: 1px solid var(--bulma-border); 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 { .side {

74
docs/_react/bulma-customizer/src/constants.js
View File

@@ -15,7 +15,10 @@ export const CSSVAR_KEYS = {
id: "light-invert-l", id: "light-invert-l",
description: "Defines the lightness of backgrounds' invert color", 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", id: "dark-invert-l",
description: "Defines the lightness of dark backgrounds' invert color", description: "Defines the lightness of dark backgrounds' invert color",
@@ -73,7 +76,10 @@ export const CSSVAR_KEYS = {
], ],
colors: [ colors: [
{ id: "primary-h", description: "Defines the Primary color's hue" }, { 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: "primary-l", description: "Defines the Primary color's lightness" },
{ id: "link-h", description: "Defines the Link color's hue" }, { id: "link-h", description: "Defines the Link color's hue" },
{ id: "link-s", description: "Defines the Link color's saturation" }, { 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-s", description: "Defines the Info color's saturation" },
{ id: "info-l", description: "Defines the Info color's lightness" }, { id: "info-l", description: "Defines the Info color's lightness" },
{ id: "success-h", description: "Defines the Success color's hue" }, { 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: "success-l", description: "Defines the Success color's lightness" },
{ id: "warning-h", description: "Defines the Warning color's hue" }, { 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: "warning-l", description: "Defines the Warning color's lightness" },
{ id: "danger-h", description: "Defines the Danger color's hue" }, { id: "danger-h", description: "Defines the Danger color's hue" },
{ id: "danger-s", description: "Defines the Danger color's saturation" }, { 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-light", description: "Defines the Light font weight" },
{ id: "weight-normal", description: "Defines the Normal font weight" }, { id: "weight-normal", description: "Defines the Normal font weight" },
{ id: "weight-medium", description: "Defines the Medium 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-bold", description: "Defines the Bold font weight" },
{ {
id: "weight-extrabold", id: "weight-extrabold",
@@ -129,7 +144,10 @@ export const CSSVAR_KEYS = {
{ id: "radius", description: "Defines the Normal border radius" }, { id: "radius", description: "Defines the Normal border radius" },
{ id: "radius-medium", description: "Defines the Medium border radius" }, { id: "radius-medium", description: "Defines the Medium border radius" },
{ id: "radius-large", description: "Defines the Large 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: "speed", description: "" },
{ {
id: "arrow-color", id: "arrow-color",
@@ -155,7 +173,10 @@ export const CSSVAR_KEYS = {
id: "burger-border-radius", id: "burger-border-radius",
description: "Defines the border radius of the burger element", 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", id: "burger-item-height",
description: "Defines the height of the burger element", description: "Defines the height of the burger element",
@@ -166,7 +187,10 @@ export const CSSVAR_KEYS = {
}, },
], ],
generic: [ 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-size", description: "The page's font size" },
{ id: "body-min-width", description: "The page's minimum width" }, { id: "body-min-width", description: "The page's minimum width" },
{ id: "body-rendering", description: "The page's text rendering type" }, { 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", 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",
},
],
}; };

18
docs/_react/bulma-customizer/src/pages/Box.jsx Normal file
View File

@@ -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 (
<div>
<div className="box">I am in a box</div>
{ids.map((id) => {
return <VarItem key={id} id={id} />;
})}
</div>
);
}
export default Box;

16
docs/_react/bulma-customizer/src/pages/Skeleton.jsx Normal file
View File

@@ -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 (
<div>
{ids.map((id) => {
return <VarItem key={id} id={id} />;
})}
</div>
);
}
export default Skeleton;