Refactor color palette code
This commit is contained in:
parent
c3838bae6a
commit
3da727667b
1 changed files with 38 additions and 66 deletions
|
@ -15,15 +15,6 @@
|
|||
<h2>Primary</h2>
|
||||
<!-- Only override values here for slight tweaking -->
|
||||
<colour-palette style="--hue: var(--base-hue);">
|
||||
<button style="--lightness: 05%"></button>
|
||||
<button style="--lightness: 15%"></button>
|
||||
<button style="--lightness: 30%"></button>
|
||||
<button style="--lightness: 40%"></button>
|
||||
<button style="--lightness: 50%"></button>
|
||||
<button style="--lightness: 60%"></button>
|
||||
<button style="--lightness: 70%"></button>
|
||||
<button style="--lightness: 80%"></button>
|
||||
<button style="--lightness: 95%"></button>
|
||||
</colour-palette>
|
||||
|
||||
<section class="hint box">
|
||||
|
@ -32,17 +23,7 @@
|
|||
</section>
|
||||
|
||||
<h2>Secondary</h2>
|
||||
<colour-palette style="--hue: calc(var(--base-hue) + var(--offset));">
|
||||
<button style="--lightness: 05%"></button>
|
||||
<button style="--lightness: 15%"></button>
|
||||
<button style="--lightness: 30%"></button>
|
||||
<button style="--lightness: 40%"></button>
|
||||
<button style="--lightness: 50%"></button>
|
||||
<button style="--lightness: 60%"></button>
|
||||
<button style="--lightness: 70%"></button>
|
||||
<button style="--lightness: 80%"></button>
|
||||
<button style="--lightness: 95%"></button>
|
||||
</colour-palette>
|
||||
<colour-palette style="--hue: calc(var(--base-hue) + var(--offset));"></colour-palette>
|
||||
|
||||
<section class="hint box">
|
||||
You can copy any colour to the clipboard by just clicking on its box.
|
||||
|
@ -51,17 +32,7 @@
|
|||
</section>
|
||||
|
||||
<h2>Tertiary</h2>
|
||||
<colour-palette style="--hue: calc(var(--base-hue) - var(--offset));">
|
||||
<button style="--lightness: 05%"></button>
|
||||
<button style="--lightness: 15%"></button>
|
||||
<button style="--lightness: 30%"></button>
|
||||
<button style="--lightness: 40%"></button>
|
||||
<button style="--lightness: 50%"></button>
|
||||
<button style="--lightness: 60%"></button>
|
||||
<button style="--lightness: 70%"></button>
|
||||
<button style="--lightness: 80%"></button>
|
||||
<button style="--lightness: 95%"></button>
|
||||
</colour-palette>
|
||||
<colour-palette style="--hue: calc(var(--base-hue) - var(--offset));"></colour-palette>
|
||||
|
||||
<section class="hint box">
|
||||
By making use of <code>calc</code> and <code>var</code>, most of the colour palette can be automated.
|
||||
|
@ -69,17 +40,7 @@
|
|||
</section>
|
||||
|
||||
<h2>Neutral</h2>
|
||||
<colour-palette style="--hue: 210deg; --saturation: 5%;">
|
||||
<button style="--lightness: 05%"></button>
|
||||
<button style="--lightness: 15%"></button>
|
||||
<button style="--lightness: 30%"></button>
|
||||
<button style="--lightness: 40%"></button>
|
||||
<button style="--lightness: 50%"></button>
|
||||
<button style="--lightness: 60%"></button>
|
||||
<button style="--lightness: 70%"></button>
|
||||
<button style="--lightness: 80%"></button>
|
||||
<button style="--lightness: 95%"></button>
|
||||
</colour-palette>
|
||||
<colour-palette style="--hue: 210deg; --saturation: 5%;"></colour-palette>
|
||||
|
||||
<section class="hint box">
|
||||
By making use of <code>calc</code> and <code>var</code>, most of the colour palette can be automated.
|
||||
|
@ -176,13 +137,6 @@
|
|||
|
||||
/* === Popup notification shenanigans === */
|
||||
|
||||
@keyframes fade {
|
||||
0% { opacity: 0; transform: translate(-50%, -10%)}
|
||||
20% { opacity: 1;}
|
||||
50% { opacity: 1;}
|
||||
100% { opacity: 0; transform: translate(-50%, -150%)}
|
||||
}
|
||||
|
||||
div.notification {
|
||||
top: 0em;
|
||||
border: 1px solid currentcolor;
|
||||
|
@ -263,26 +217,17 @@
|
|||
|
||||
document.querySelector("body").appendChild(box);
|
||||
|
||||
box.style.setProperty('animation', 'fade 1s');
|
||||
box.style.setProperty('animation-fill-mode', 'forwards');
|
||||
box.animate([
|
||||
{ offset: 0, opacity: 1, transform: "translate(-50%, -10%)"},
|
||||
{ offset: .3, opacity: 1 },
|
||||
{ offset: 1, opacity: 0, transform: "translate(-50%, -200%)"},
|
||||
], {
|
||||
duration: 1e3
|
||||
}).finished.then(() => box.remove())
|
||||
|
||||
box.style.setProperty('color', color);
|
||||
|
||||
box.addEventListener("animationend", ({box: target}) => box.parentElement.removeChild(box))
|
||||
}
|
||||
|
||||
document.querySelectorAll('colour-palette button').forEach(button => {
|
||||
button.addEventListener('click', event => {
|
||||
const prop = name => getComputedStyle(button)
|
||||
.getPropertyValue(name)
|
||||
.replace(/^ *| *$/g, "")
|
||||
const colour = `hsl(${prop("--hue")}, ${prop("--saturation")}, ${prop("--lightness")})`
|
||||
navigator.clipboard.writeText(colour).then(() => {
|
||||
const box = button.getBoundingClientRect()
|
||||
showMessage(`Copied to Clipboard:<br>${colour}`, colour, box.x+box.width/2, box.y+box.height/2);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
const register = (type, name, initial=undefined) => CSS.registerProperty({
|
||||
name: `--${name}`,
|
||||
syntax: `<${type}>`,
|
||||
|
@ -295,6 +240,7 @@
|
|||
register("percentage", "lightness", "50%")
|
||||
|
||||
const backgroundColourButton = document.getElementById("background-color")
|
||||
|
||||
backgroundColourButton.addEventListener("input", event => {
|
||||
const rgb = backgroundColourButton.value
|
||||
document.body.style.background = rgb
|
||||
|
@ -317,6 +263,32 @@
|
|||
.map(colour => colour.match(/\d+/g))
|
||||
.map(match => `${match[0]} ${match[1]} ${match[2]}`)
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<button style="--lightness: 05%"></button>
|
||||
<button style="--lightness: 15%"></button>
|
||||
<button style="--lightness: 30%"></button>
|
||||
<button style="--lightness: 40%"></button>
|
||||
<button style="--lightness: 50%"></button>
|
||||
<button style="--lightness: 60%"></button>
|
||||
<button style="--lightness: 70%"></button>
|
||||
<button style="--lightness: 80%"></button>
|
||||
<button style="--lightness: 95%"></button>
|
||||
`
|
||||
this.querySelectorAll('button').forEach(button => {
|
||||
button.addEventListener('click', event => {
|
||||
const prop = name => getComputedStyle(button)
|
||||
.getPropertyValue(name)
|
||||
.replace(/^ *| *$/g, "")
|
||||
const colour = `hsl(${prop("--hue")}, ${prop("--saturation")}, ${prop("--lightness")})`
|
||||
navigator.clipboard.writeText(colour).then(() => {
|
||||
const box = button.getBoundingClientRect()
|
||||
showMessage(`Copied to Clipboard:<br>${colour}`, colour, box.x+box.width/2, box.y+box.height/2);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
|
Loading…
Reference in a new issue