Add HSL sliders

This commit is contained in:
Jeremy Thomas 2024-06-24 04:10:08 +01:00
parent 681592e689
commit 34029baa2c
3 changed files with 103 additions and 16 deletions

View File

@ -3,13 +3,28 @@ import "../../../../css/bulma.css";
import "./App.css";
import Slider from "./components/Slider";
// const COLORS = ["primary", "link", "info", "success", "warning", "danger"];
const COLORS = ["primary", "link", "info", "success", "warning", "danger"];
const KEYS = [
"scheme-h",
"primary-h",
"primary-s",
"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",
];
const UNITS = ["deg", "rem", "em", "%"];
@ -21,12 +36,14 @@ const SUFFIX_TO_KIND = {
};
function App() {
const [vars, setVars] = useState([]);
const [vars, setVars] = useState({});
useEffect(() => {
const rootStyle = window.getComputedStyle(document.documentElement);
const cssvars = KEYS.map((key) => {
const cssvars = {};
KEYS.map((key) => {
const original = rootStyle.getPropertyValue(`--bulma-${key}`);
const suffix = Object.keys(SUFFIX_TO_KIND).find((kind) =>
key.endsWith(kind),
@ -34,7 +51,7 @@ function App() {
const unit = UNITS.find((unit) => original.endsWith(unit)) || "";
const value = unit !== "" ? original.split(unit)[0] : original;
return {
cssvars[key] = {
id: key,
kind: SUFFIX_TO_KIND[suffix] || "any",
original,
@ -46,13 +63,55 @@ function App() {
setVars(cssvars);
}, []);
console.log("ZLOG vars", vars);
return (
<section className="section">
<div className="card">
<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;
return (
@ -67,14 +126,12 @@ function App() {
/>
</div>
);
})}
})} */}
<div className="buttons">
<button className="button">Button</button>
<button className="button is-primary">Primary</button>
<button className="button is-link">Link</button>
<button className="button is-info">Info</button>
<button className="button is-success">Success</button>
<button className="button is-warning">Warning</button>

View File

@ -24,14 +24,15 @@ const valueToX = (value, width, min, max) => {
return Math.round(newValue);
};
function Slider({ id, kind, start, unit }) {
function Slider({ id, color, kind, start, unit }) {
const [min, max] = RANGES[kind];
const sliderRef = useRef(null);
const handleRef = useRef(null);
const [value, setValue] = useState(start);
const [isMoving, setMoving] = useState(false);
const [x, setX] = useState(valueToX(start, 240, min, max));
const sliderRef = useRef(null);
const handleRef = useRef(null);
const handleMouseDown = (event) => {
setMoving(true);
@ -121,12 +122,23 @@ function Slider({ id, kind, start, unit }) {
[cn[kind]]: true,
});
const mainStyle = {
"--h": `var(--bulma-${color}-h)`,
"--s": `var(--bulma-${color}-s)`,
"--l": `var(--bulma-${color}-l)`,
};
const handleStyle = {
transform: `translateX(${x}px)`,
};
return (
<div className={mainCN} ref={sliderRef} onMouseDown={handleMouseDown}>
<div
className={mainCN}
ref={sliderRef}
style={mainStyle}
onMouseDown={handleMouseDown}
>
<div className={backgroundCN}>
<span ref={handleRef} className={cn.handle} style={handleStyle} />
</div>
@ -137,6 +149,7 @@ function Slider({ id, kind, start, unit }) {
Slider.propTypes = {
id: PropTypes.string,
kind: PropTypes.string,
color: PropTypes.string,
original: PropTypes.string,
start: PropTypes.number,
unit: PropTypes.string,

View File

@ -2,7 +2,6 @@
position: relative;
width: 15rem;
padding: 0.375rem 0;
box-shadow: 0 0 0 1px green;
cursor: grab;
}
@ -31,7 +30,7 @@
}
.background {
border-radius: 0.125rem;
border-radius: 0.25rem;
background-color: white;
height: 0.5rem;
}
@ -48,3 +47,21 @@
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%)
);
}