library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-10-17 09:04:18 +00:00
Code Issues Actions 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
Show Stats 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>
<body>
<div id="root"></div>
<div class="box">Box</div>
<script type="module" src="/src/main.jsx"></script>
</body>
</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 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: <Typography />,
other: <Other />,
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({
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,
};
});

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

@ -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 {

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

@ -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",
},
],
};

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;