Add GIMP palette exporter for palette

This commit is contained in:
Talia 2022-10-10 22:15:42 +02:00
parent c73df51221
commit c3838bae6a
Signed by: darkwiiplayer
GPG key ID: 7808674088232B3E

View file

@ -14,7 +14,7 @@
<section style="--base-hue: 280deg; --saturation: 50%; --offset: calc(360deg / 6)"> <section style="--base-hue: 280deg; --saturation: 50%; --offset: calc(360deg / 6)">
<h2>Primary</h2> <h2>Primary</h2>
<!-- Only override values here for slight tweaking --> <!-- Only override values here for slight tweaking -->
<div class="colors" style="--hue: var(--base-hue);"> <colour-palette style="--hue: var(--base-hue);">
<button style="--lightness: 05%"></button> <button style="--lightness: 05%"></button>
<button style="--lightness: 15%"></button> <button style="--lightness: 15%"></button>
<button style="--lightness: 30%"></button> <button style="--lightness: 30%"></button>
@ -24,7 +24,7 @@
<button style="--lightness: 70%"></button> <button style="--lightness: 70%"></button>
<button style="--lightness: 80%"></button> <button style="--lightness: 80%"></button>
<button style="--lightness: 95%"></button> <button style="--lightness: 95%"></button>
</div> </colour-palette>
<section class="hint box"> <section class="hint box">
Modify as needed by changing the <code>--hue</code> attribute in the inlined CSS.<br> Modify as needed by changing the <code>--hue</code> attribute in the inlined CSS.<br>
@ -32,7 +32,7 @@
</section> </section>
<h2>Secondary</h2> <h2>Secondary</h2>
<div class="colors" style="--hue: calc(var(--base-hue) + var(--offset));"> <colour-palette style="--hue: calc(var(--base-hue) + var(--offset));">
<button style="--lightness: 05%"></button> <button style="--lightness: 05%"></button>
<button style="--lightness: 15%"></button> <button style="--lightness: 15%"></button>
<button style="--lightness: 30%"></button> <button style="--lightness: 30%"></button>
@ -42,7 +42,7 @@
<button style="--lightness: 70%"></button> <button style="--lightness: 70%"></button>
<button style="--lightness: 80%"></button> <button style="--lightness: 80%"></button>
<button style="--lightness: 95%"></button> <button style="--lightness: 95%"></button>
</div> </colour-palette>
<section class="hint box"> <section class="hint box">
You can copy any colour to the clipboard by just clicking on its box. You can copy any colour to the clipboard by just clicking on its box.
@ -51,7 +51,7 @@
</section> </section>
<h2>Tertiary</h2> <h2>Tertiary</h2>
<div class="colors" style="--hue: calc(var(--base-hue) - var(--offset));"> <colour-palette style="--hue: calc(var(--base-hue) - var(--offset));">
<button style="--lightness: 05%"></button> <button style="--lightness: 05%"></button>
<button style="--lightness: 15%"></button> <button style="--lightness: 15%"></button>
<button style="--lightness: 30%"></button> <button style="--lightness: 30%"></button>
@ -61,7 +61,7 @@
<button style="--lightness: 70%"></button> <button style="--lightness: 70%"></button>
<button style="--lightness: 80%"></button> <button style="--lightness: 80%"></button>
<button style="--lightness: 95%"></button> <button style="--lightness: 95%"></button>
</div> </colour-palette>
<section class="hint box"> <section class="hint box">
By making use of <code>calc</code> and <code>var</code>, most of the colour palette can be automated. By making use of <code>calc</code> and <code>var</code>, most of the colour palette can be automated.
@ -69,7 +69,7 @@
</section> </section>
<h2>Neutral</h2> <h2>Neutral</h2>
<div class="colors" style="--hue: 210deg; --saturation: 5%;"> <colour-palette style="--hue: 210deg; --saturation: 5%;">
<button style="--lightness: 05%"></button> <button style="--lightness: 05%"></button>
<button style="--lightness: 15%"></button> <button style="--lightness: 15%"></button>
<button style="--lightness: 30%"></button> <button style="--lightness: 30%"></button>
@ -79,7 +79,7 @@
<button style="--lightness: 70%"></button> <button style="--lightness: 70%"></button>
<button style="--lightness: 80%"></button> <button style="--lightness: 80%"></button>
<button style="--lightness: 95%"></button> <button style="--lightness: 95%"></button>
</div> </colour-palette>
<section class="hint box"> <section class="hint box">
By making use of <code>calc</code> and <code>var</code>, most of the colour palette can be automated. By making use of <code>calc</code> and <code>var</code>, most of the colour palette can be automated.
@ -87,6 +87,8 @@
</section> </section>
</section> </section>
<button id="export">Export as GIMP Palette</button>
<!-- ======================================== --> <!-- ======================================== -->
<!-- ===== STYLES AND APPLICATION LOGIC ===== --> <!-- ===== STYLES AND APPLICATION LOGIC ===== -->
<!-- ======================================== --> <!-- ======================================== -->
@ -136,21 +138,22 @@
font-size: 2em; font-size: 2em;
} }
div.colors { colour-palette {
--separation2: .6em; /* Halved separation */ --separation2: .6em; /* Halved separation */
display: flex; display: flex;
/* padding: var(--separation2); */ /* padding: var(--separation2); */
} }
div.colors button { colour-palette button {
--radius: 50%; --radius: 50%;
all: unset; all: unset;
margin: var(--separation2); margin: var(--separation2);
background: hsl(var(--hue), var(--saturation, 50%), var(--lightness, 50%));
cursor: pointer; cursor: pointer;
border-radius: var(--radius); border-radius: var(--radius);
overflow: hidden; overflow: hidden;
transition: box-shadow 0.3s; transition: box-shadow 0.3s;
} div.colors button::before { } colour-palette button::before {
content: ''; content: '';
border-radius: var(--radius); border-radius: var(--radius);
background: hsl(var(--hue), var(--saturation, 50%), var(--lightness, 50%)); background: hsl(var(--hue), var(--saturation, 50%), var(--lightness, 50%));
@ -161,13 +164,13 @@
transition: box-shadow 0.3s; transition: box-shadow 0.3s;
} }
div.colors button:hover { colour-palette button:hover {
box-shadow: .4em .4em .6em #0004; box-shadow: .4em .4em .6em #0004;
} }
div.colors button:hover::before { colour-palette button:hover::before {
box-shadow: none; box-shadow: none;
} }
body.dark div.colors button:hover { body.dark colour-palette button:hover {
box-shadow: .0em .0em .6em hsla(var(--hue), calc(var(--saturation) + 30%), 80%, 60%); box-shadow: .0em .0em .6em hsla(var(--hue), calc(var(--saturation) + 30%), 80%, 60%);
} }
@ -232,6 +235,18 @@
font-weight: bold; font-weight: bold;
} }
#export {
all: unset;
font-size: 1.2em;
cursor: pointer;
padding: .4em 1.2em;
border-radius: 1.8em;
font-weight: bold;
background-color: hsl(340deg, 50%, 40%);
color: hsl(210deg, 5%, 95%);
margin: .4em;
}
/* === Utility === */ /* === Utility === */
[center] { text-align: center; } [center] { text-align: center; }
@ -255,7 +270,7 @@
box.addEventListener("animationend", ({box: target}) => box.parentElement.removeChild(box)) box.addEventListener("animationend", ({box: target}) => box.parentElement.removeChild(box))
} }
document.querySelectorAll('div.colors button').forEach(button => { document.querySelectorAll('colour-palette button').forEach(button => {
button.addEventListener('click', event => { button.addEventListener('click', event => {
const prop = name => getComputedStyle(button) const prop = name => getComputedStyle(button)
.getPropertyValue(name) .getPropertyValue(name)
@ -294,4 +309,24 @@
document.body.classList.remove("dark") document.body.classList.remove("dark")
} }
}) })
customElements.define("colour-palette", class extends HTMLElement {
get colours() {
return Array.from(this.querySelectorAll("button"))
.map(button => getComputedStyle(button).backgroundColor)
.map(colour => colour.match(/\d+/g))
.map(match => `${match[0]} ${match[1]} ${match[2]}`)
}
})
const exportButton = document.querySelector("#export")
exportButton.addEventListener("click", event => {
const colours = Array.from(document.querySelectorAll("colour-palette")).map(palette => palette.colours)
const template = `GIMP Palette\nName: Palette\nColumns: 1\n#\n${colours.map(c => c.join("\n")).join("\n")}`
const link = document.createElement("a")
link.href = `data:text/plain;base64,${btoa(template)}`
link.download = "palette.gpl"
link.click()
})
</script> </script>