Skip to content

Commit c638115

Browse files
jgthmsjgthms
committed
Add Scheme vars
1 parent 0014fc4 commit c638115

File tree

7 files changed

+234
-45
lines changed

7 files changed

+234
-45
lines changed

‎docs/_react/bulma-customizer/src/App.jsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const CustomizerContext = createContext({
2727
function App() {
2828
const initialContext = {
2929
cssvars: {},
30-
currentPage: "colors",
30+
currentPage: "scheme",
3131
getVar: (id) => {
3232
return context.cssvars[id];
3333
},
@@ -78,14 +78,17 @@ function App() {
7878

7979
const cssvars = {};
8080
const allKeys = PAGE_IDS.map((pageId) => CSSVAR_KEYS[pageId]).flat();
81+
const allKeyIds = allKeys.map((i) => i.id);
8182

82-
allKeys.map((key) => {
83+
allKeyIds.map((key) => {
8384
const original = rootStyle.getPropertyValue(`--bulma-${key}`);
8485
const suffix = Object.keys(SUFFIX_TO_KIND).find((kind) =>
8586
key.endsWith(kind),
8687
);
8788
const unit = UNITS.find((unit) => original.endsWith(unit)) || "";
8889
const value = unit !== "" ? original.split(unit)[0] : original;
90+
const description =
91+
allKeys.find((el) => el.id === key)?.description || "None";
8992

9093
cssvars[key] = {
9194
id: key,
@@ -94,6 +97,7 @@ function App() {
9497
unit,
9598
current: Number(value),
9699
start: Number(value),
100+
description,
97101
};
98102
});
99103

@@ -105,6 +109,8 @@ function App() {
105109
});
106110
}, []);
107111

112+
console.log("ZLOG context.cssvars", context.cssvars);
113+
108114
return (
109115
<CustomizerContext.Provider value={context}>
110116
<section className="section">

‎docs/_react/bulma-customizer/src/components/Slider.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@ const valueToX = (value, width, min, max) => {
2626
return Math.round(newValue);
2727
};
2828

29-
function Slider({ id, color, kind }) {
29+
function Slider({ id, color }) {
3030
const { cssvars, updateVar } = useContext(CustomizerContext);
31-
const { start, current } = cssvars[id];
31+
const { start, current, kind } = cssvars[id];
3232
const [min, max] = kind ? RANGES[kind] : RANGES.any;
3333

3434
const sliderRef = useRef(null);

‎docs/_react/bulma-customizer/src/components/Slider.module.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131

3232
.background {
3333
border-radius: 0.25rem;
34-
background-color: white;
34+
background-color: var(--bulma-background);
3535
height: 0.5rem;
3636
}
3737

‎docs/_react/bulma-customizer/src/components/VarItem.jsx

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import { useContext } from "react";
2+
import PropTypes from "prop-types";
3+
4+
import Slider from "./Slider";
5+
import { CustomizerContext } from "../App";
6+
7+
import cn from "./VarItem.module.css";
8+
9+
function VarItem({ id }) {
10+
const { cssvars, updateVar } = useContext(CustomizerContext);
11+
12+
const cssvar = cssvars[id];
13+
14+
if (!cssvar) {
15+
return;
16+
}
17+
18+
const handleReset = (event) => {
19+
event.preventDefault();
20+
updateVar(cssvar.id, cssvar.start);
21+
};
22+
23+
const handleInputChange = (event, cssvar) => {
24+
let value = event.target.value;
25+
updateVar(cssvar.id, value);
26+
};
27+
28+
const isDisabled = cssvar.current === cssvar.start;
29+
30+
return (
31+
<div className={cn.main}>
32+
<div className={cn.side}>
33+
<div className={cn.name}>
34+
<code>{cssvar.id}</code>
35+
</div>
36+
37+
<div className="buttons are-small">
38+
<button
39+
className="button"
40+
onClick={handleReset}
41+
disabled={isDisabled}
42+
>
43+
Reset
44+
</button>
45+
</div>
46+
</div>
47+
48+
<div className={cn.slider}>
49+
<Slider id={cssvar.id} />
50+
<p className={cn.form}>
51+
<input
52+
type="text"
53+
className="input"
54+
value={cssvar.current}
55+
onChange={(e) => handleInputChange(e, cssvar)}
56+
size="3"
57+
/>
58+
<span>{cssvar.unit}</span>
59+
</p>
60+
</div>
61+
62+
<div className={cn.description}>{cssvar.description}</div>
63+
</div>
64+
);
65+
}
66+
67+
VarItem.propTypes = {
68+
id: PropTypes.string,
69+
};
70+
71+
export default VarItem;

‎docs/_react/bulma-customizer/src/components/VarItem.module.css

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
.main {
2+
align-items: start;
3+
display: flex;
4+
gap: 1.5rem;
5+
border-bottom: 1px solid var(--bulma-border);
6+
padding: 1.25rem 0;
7+
}
8+
9+
.side {
10+
flex-shrink: 0;
11+
width: 15rem;
12+
}
13+
14+
.name {
15+
gap: 1rem;
16+
display: flex;
17+
align-items: center;
18+
margin-bottom: 0.5rem;
19+
}
20+
21+
.name code {
22+
font-size: 1.25em;
23+
font-weight: 600;
24+
padding: 0;
25+
background: none;
26+
}
27+
28+
.slider {
29+
align-items: center;
30+
display: flex;
31+
gap: 1.5rem;
32+
padding: 2px 0;
33+
width: 28rem;
34+
flex-shrink: 0;
35+
}
36+
37+
.form {
38+
display: flex;
39+
align-items: center;
40+
font-family: var(--bulma-family-code);
41+
gap: 0.25em;
42+
}
43+
44+
.form input {
45+
font-family: inherit;
46+
font-size: inherit;
47+
padding: 0.25em;
48+
height: auto;
49+
border-radius: 0.25em;
50+
width: 3em;
51+
padding: 0 0.25em;
52+
}
53+
54+
.form span {
55+
opacity: 0.5;
56+
}
57+
58+
.description {
59+
flex-shrink: 1;
60+
flex-grow: 1;
61+
}

‎docs/_react/bulma-customizer/src/constants.js

Lines changed: 88 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -8,44 +8,95 @@ export const SUFFIX_TO_KIND = {
88

99
export const CSSVAR_KEYS = {
1010
scheme: [
11-
"scheme-h",
12-
"scheme-s",
13-
"light-l",
14-
"light-invert-l",
15-
"dark-l",
16-
"dark-invert-l",
17-
"soft-l",
18-
"bold-l",
19-
"soft-invert-l",
20-
"bold-invert-l",
21-
"hover-background-l-delta",
22-
"active-background-l-delta",
23-
"hover-border-l-delta",
24-
"active-border-l-delta",
25-
"hover-color-l-delta",
26-
"active-color-l-delta",
27-
"hover-shadow-a-delta",
28-
"active-shadow-a-delta",
11+
{
12+
id: "scheme-h",
13+
description:
14+
"Defines the Scheme's Hue, that is used for backgrounds, borders, and text, in both Light and Dark modes",
15+
},
16+
{
17+
id: "scheme-s",
18+
description:
19+
"Defines the Scheme's Saturation, that is used for backgrounds, borders, and text, in both Light and Dark modes",
20+
},
21+
{ id: "light-l", description: "Defines the lightness of backgrounds" },
22+
{
23+
id: "light-invert-l",
24+
description: "Defines the lightness of backgrounds' invert color",
25+
},
26+
{ id: "dark-l", description: "Defines the lightness of dark backgrounds" },
27+
{
28+
id: "dark-invert-l",
29+
description: "Defines the lightness of dark backgrounds' invert color",
30+
},
31+
{ id: "soft-l", description: "Defines the lightness of soft colors" },
32+
{ id: "bold-l", description: "Defines the lightness of bold colors" },
33+
{
34+
id: "soft-invert-l",
35+
description: "Defines the lightness of soft color's invert color",
36+
},
37+
{
38+
id: "bold-invert-l",
39+
description: "Defines the lightness of bold color's invert color",
40+
},
41+
{
42+
id: "hover-background-l-delta",
43+
description:
44+
"Defines how much the lightness will change when a background is hovered",
45+
},
46+
{
47+
id: "active-background-l-delta",
48+
description:
49+
"Defines how much the lightness will change when a background is active",
50+
},
51+
{
52+
id: "hover-border-l-delta",
53+
description:
54+
"Defines how much the lightness will change when a border is hovered",
55+
},
56+
{
57+
id: "active-border-l-delta",
58+
description:
59+
"Defines how much the lightness will change when a border is active",
60+
},
61+
{
62+
id: "hover-color-l-delta",
63+
description:
64+
"Defines how much the lightness will change when a color is hovered",
65+
},
66+
{
67+
id: "active-color-l-delta",
68+
description:
69+
"Defines how much the lightness will change when a color is active",
70+
},
71+
{
72+
id: "hover-shadow-a-delta",
73+
description:
74+
"Defines how much the lightness will change when a shadow is hovered",
75+
},
76+
{
77+
id: "active-shadow-a-delta",
78+
description:
79+
"Defines how much the lightness will change when a shadow is active",
80+
},
2981
],
3082
colors: [
31-
"primary-h",
32-
"primary-s",
33-
"primary-l",
34-
"link-h",
35-
"link-s",
36-
"link-l",
37-
"info-h",
38-
"info-s",
39-
"info-l",
40-
"success-h",
41-
"success-s",
42-
"success-l",
43-
"warning-h",
44-
"warning-s",
45-
"warning-l",
46-
"danger-h",
47-
"danger-s",
48-
"danger-l",
49-
"skeleton-lines-gap",
83+
{ id: "primary-h", description: "Defines the Primary color's hue" },
84+
{ id: "primary-s", description: "Defines the Primary color's saturation" },
85+
{ id: "primary-l", description: "Defines the Primary color's lightness" },
86+
{ id: "link-h", description: "Defines the Link color's hue" },
87+
{ id: "link-s", description: "Defines the Link color's saturation" },
88+
{ id: "link-l", description: "Defines the Link color's lightness" },
89+
{ id: "info-h", description: "Defines the Info color's hue" },
90+
{ id: "info-s", description: "Defines the Info color's saturation" },
91+
{ id: "info-l", description: "Defines the Info color's lightness" },
92+
{ id: "success-h", description: "Defines the Success color's hue" },
93+
{ id: "success-s", description: "Defines the Success color's saturation" },
94+
{ id: "success-l", description: "Defines the Success color's lightness" },
95+
{ id: "warning-h", description: "Defines the Warning color's hue" },
96+
{ id: "warning-s", description: "Defines the Warning color's saturation" },
97+
{ id: "warning-l", description: "Defines the Warning color's lightness" },
98+
{ id: "danger-h", description: "Defines the Danger color's hue" },
99+
{ id: "danger-s", description: "Defines the Danger color's saturation" },
100+
{ id: "danger-l", description: "Defines the Danger color's lightness" },
50101
],
51102
};

‎docs/_react/bulma-customizer/src/pages/Scheme.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import Slider from "../components/Slider";
1+
import VarItem from "../components/VarItem";
22
import { CSSVAR_KEYS } from "../constants";
33

44
function Scheme() {
5-
const schemeIds = CSSVAR_KEYS.scheme;
5+
const schemeIds = CSSVAR_KEYS.scheme.map((i) => i.id);
66

77
return (
88
<div>
99
{schemeIds.map((schemeId) => {
10-
return <Slider key={schemeId} id={schemeId} />;
10+
return <VarItem key={schemeId} id={schemeId} />;
1111
})}
1212
</div>
1313
);

0 commit comments

Comments
 (0)