mirror of
https://github.com/jgthms/bulma.git
synced 2024-10-17 09:04:18 +00:00
Add HSL sliders
This commit is contained in:
parent
681592e689
commit
34029baa2c
@ -3,13 +3,28 @@ import "../../../../css/bulma.css";
|
|||||||
import "./App.css";
|
import "./App.css";
|
||||||
import Slider from "./components/Slider";
|
import Slider from "./components/Slider";
|
||||||
|
|
||||||
// const COLORS = ["primary", "link", "info", "success", "warning", "danger"];
|
const COLORS = ["primary", "link", "info", "success", "warning", "danger"];
|
||||||
|
|
||||||
const KEYS = [
|
const KEYS = [
|
||||||
"scheme-h",
|
"scheme-h",
|
||||||
"primary-h",
|
"primary-h",
|
||||||
"primary-s",
|
"primary-s",
|
||||||
"primary-l",
|
"primary-l",
|
||||||
|
"link-h",
|
||||||
|
"link-s",
|
||||||
|
"link-l",
|
||||||
|
"info-h",
|
||||||
|
"info-s",
|
||||||
|
"info-l",
|
||||||
|
"success-h",
|
||||||
|
"success-s",
|
||||||
|
"success-l",
|
||||||
|
"warning-h",
|
||||||
|
"warning-s",
|
||||||
|
"warning-l",
|
||||||
|
"danger-h",
|
||||||
|
"danger-s",
|
||||||
|
"danger-l",
|
||||||
"skeleton-lines-gap",
|
"skeleton-lines-gap",
|
||||||
];
|
];
|
||||||
const UNITS = ["deg", "rem", "em", "%"];
|
const UNITS = ["deg", "rem", "em", "%"];
|
||||||
@ -21,12 +36,14 @@ const SUFFIX_TO_KIND = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [vars, setVars] = useState([]);
|
const [vars, setVars] = useState({});
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const rootStyle = window.getComputedStyle(document.documentElement);
|
const rootStyle = window.getComputedStyle(document.documentElement);
|
||||||
|
|
||||||
const cssvars = KEYS.map((key) => {
|
const cssvars = {};
|
||||||
|
|
||||||
|
KEYS.map((key) => {
|
||||||
const original = rootStyle.getPropertyValue(`--bulma-${key}`);
|
const original = rootStyle.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),
|
||||||
@ -34,7 +51,7 @@ function App() {
|
|||||||
const unit = UNITS.find((unit) => original.endsWith(unit)) || "";
|
const unit = UNITS.find((unit) => original.endsWith(unit)) || "";
|
||||||
const value = unit !== "" ? original.split(unit)[0] : original;
|
const value = unit !== "" ? original.split(unit)[0] : original;
|
||||||
|
|
||||||
return {
|
cssvars[key] = {
|
||||||
id: key,
|
id: key,
|
||||||
kind: SUFFIX_TO_KIND[suffix] || "any",
|
kind: SUFFIX_TO_KIND[suffix] || "any",
|
||||||
original,
|
original,
|
||||||
@ -46,13 +63,55 @@ function App() {
|
|||||||
setVars(cssvars);
|
setVars(cssvars);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
console.log("ZLOG vars", vars);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="section">
|
<section className="section">
|
||||||
<div className="card">
|
<div className="card">
|
||||||
<div className="card-content">
|
<div className="card-content">
|
||||||
{vars.map((v) => {
|
{COLORS.map((color) => {
|
||||||
|
const h = `${color}-h`;
|
||||||
|
|
||||||
|
if (!(h in vars)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const s = `${color}-s`;
|
||||||
|
const l = `${color}-l`;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={color} className="block">
|
||||||
|
<code>{color}</code>
|
||||||
|
|
||||||
|
<Slider
|
||||||
|
id={h}
|
||||||
|
kind="hue"
|
||||||
|
color={color}
|
||||||
|
original={vars[h].original}
|
||||||
|
start={vars[h].start}
|
||||||
|
unit={vars[h].unit}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Slider
|
||||||
|
id={s}
|
||||||
|
kind="saturation"
|
||||||
|
color={color}
|
||||||
|
original={vars[s].original}
|
||||||
|
start={vars[s].start}
|
||||||
|
unit={vars[s].unit}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Slider
|
||||||
|
id={l}
|
||||||
|
kind="lightness"
|
||||||
|
color={color}
|
||||||
|
original={vars[l].original}
|
||||||
|
start={vars[l].start}
|
||||||
|
unit={vars[l].unit}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
|
{/* {vars.map((v) => {
|
||||||
const { id, kind, original, unit, start } = v;
|
const { id, kind, original, unit, start } = v;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -67,14 +126,12 @@ function App() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
})}
|
})} */}
|
||||||
|
|
||||||
<div className="buttons">
|
<div className="buttons">
|
||||||
<button className="button">Button</button>
|
<button className="button">Button</button>
|
||||||
|
|
||||||
<button className="button is-primary">Primary</button>
|
<button className="button is-primary">Primary</button>
|
||||||
<button className="button is-link">Link</button>
|
<button className="button is-link">Link</button>
|
||||||
|
|
||||||
<button className="button is-info">Info</button>
|
<button className="button is-info">Info</button>
|
||||||
<button className="button is-success">Success</button>
|
<button className="button is-success">Success</button>
|
||||||
<button className="button is-warning">Warning</button>
|
<button className="button is-warning">Warning</button>
|
||||||
|
@ -24,14 +24,15 @@ const valueToX = (value, width, min, max) => {
|
|||||||
return Math.round(newValue);
|
return Math.round(newValue);
|
||||||
};
|
};
|
||||||
|
|
||||||
function Slider({ id, kind, start, unit }) {
|
function Slider({ id, color, kind, start, unit }) {
|
||||||
const [min, max] = RANGES[kind];
|
const [min, max] = RANGES[kind];
|
||||||
|
|
||||||
|
const sliderRef = useRef(null);
|
||||||
|
const handleRef = useRef(null);
|
||||||
|
|
||||||
const [value, setValue] = useState(start);
|
const [value, setValue] = useState(start);
|
||||||
const [isMoving, setMoving] = useState(false);
|
const [isMoving, setMoving] = useState(false);
|
||||||
const [x, setX] = useState(valueToX(start, 240, min, max));
|
const [x, setX] = useState(valueToX(start, 240, min, max));
|
||||||
const sliderRef = useRef(null);
|
|
||||||
const handleRef = useRef(null);
|
|
||||||
|
|
||||||
const handleMouseDown = (event) => {
|
const handleMouseDown = (event) => {
|
||||||
setMoving(true);
|
setMoving(true);
|
||||||
@ -121,12 +122,23 @@ function Slider({ id, kind, start, unit }) {
|
|||||||
[cn[kind]]: true,
|
[cn[kind]]: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const mainStyle = {
|
||||||
|
"--h": `var(--bulma-${color}-h)`,
|
||||||
|
"--s": `var(--bulma-${color}-s)`,
|
||||||
|
"--l": `var(--bulma-${color}-l)`,
|
||||||
|
};
|
||||||
|
|
||||||
const handleStyle = {
|
const handleStyle = {
|
||||||
transform: `translateX(${x}px)`,
|
transform: `translateX(${x}px)`,
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={mainCN} ref={sliderRef} onMouseDown={handleMouseDown}>
|
<div
|
||||||
|
className={mainCN}
|
||||||
|
ref={sliderRef}
|
||||||
|
style={mainStyle}
|
||||||
|
onMouseDown={handleMouseDown}
|
||||||
|
>
|
||||||
<div className={backgroundCN}>
|
<div className={backgroundCN}>
|
||||||
<span ref={handleRef} className={cn.handle} style={handleStyle} />
|
<span ref={handleRef} className={cn.handle} style={handleStyle} />
|
||||||
</div>
|
</div>
|
||||||
@ -137,6 +149,7 @@ function Slider({ id, kind, start, unit }) {
|
|||||||
Slider.propTypes = {
|
Slider.propTypes = {
|
||||||
id: PropTypes.string,
|
id: PropTypes.string,
|
||||||
kind: PropTypes.string,
|
kind: PropTypes.string,
|
||||||
|
color: PropTypes.string,
|
||||||
original: PropTypes.string,
|
original: PropTypes.string,
|
||||||
start: PropTypes.number,
|
start: PropTypes.number,
|
||||||
unit: PropTypes.string,
|
unit: PropTypes.string,
|
||||||
|
@ -2,7 +2,6 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
width: 15rem;
|
width: 15rem;
|
||||||
padding: 0.375rem 0;
|
padding: 0.375rem 0;
|
||||||
box-shadow: 0 0 0 1px green;
|
|
||||||
cursor: grab;
|
cursor: grab;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -31,7 +30,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.background {
|
.background {
|
||||||
border-radius: 0.125rem;
|
border-radius: 0.25rem;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
height: 0.5rem;
|
height: 0.5rem;
|
||||||
}
|
}
|
||||||
@ -48,3 +47,21 @@
|
|||||||
rgb(255, 0, 0)
|
rgb(255, 0, 0)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.saturation {
|
||||||
|
background-image: linear-gradient(
|
||||||
|
to right,
|
||||||
|
hsl(var(--h), 0%, var(--l)),
|
||||||
|
hsl(var(--h), var(--s), var(--l)),
|
||||||
|
hsl(var(--h), 100%, var(--l))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightness {
|
||||||
|
background-image: linear-gradient(
|
||||||
|
to right,
|
||||||
|
hsl(var(--h), var(--s), 0%),
|
||||||
|
hsl(var(--h), var(--s), 50%),
|
||||||
|
hsl(var(--h), var(--s), 100%)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user