From c3838bae6af090950fa078d54e1362e5444efca2 Mon Sep 17 00:00:00 2001 From: DarkWiiPlayer Date: Mon, 10 Oct 2022 22:15:42 +0200 Subject: [PATCH] Add GIMP palette exporter for palette --- templates/palette.html | 65 ++++++++++++++++++++++++++++++++---------- 1 file changed, 50 insertions(+), 15 deletions(-) diff --git a/templates/palette.html b/templates/palette.html index decc90c..beb476d 100644 --- a/templates/palette.html +++ b/templates/palette.html @@ -14,7 +14,7 @@

Primary

-
+ @@ -24,7 +24,7 @@ -
+
Modify as needed by changing the --hue attribute in the inlined CSS.
@@ -32,7 +32,7 @@

Secondary

-
+ @@ -42,7 +42,7 @@ -
+
You can copy any colour to the clipboard by just clicking on its box. @@ -51,7 +51,7 @@

Tertiary

-
+ @@ -61,7 +61,7 @@ -
+
By making use of calc and var, most of the colour palette can be automated. @@ -69,7 +69,7 @@

Neutral

-
+ @@ -79,7 +79,7 @@ -
+
By making use of calc and var, most of the colour palette can be automated. @@ -87,6 +87,8 @@
+ + @@ -136,21 +138,22 @@ font-size: 2em; } - div.colors { + colour-palette { --separation2: .6em; /* Halved separation */ display: flex; /* padding: var(--separation2); */ } - div.colors button { + colour-palette button { --radius: 50%; all: unset; margin: var(--separation2); + background: hsl(var(--hue), var(--saturation, 50%), var(--lightness, 50%)); cursor: pointer; border-radius: var(--radius); overflow: hidden; transition: box-shadow 0.3s; - } div.colors button::before { + } colour-palette button::before { content: ''; border-radius: var(--radius); background: hsl(var(--hue), var(--saturation, 50%), var(--lightness, 50%)); @@ -161,13 +164,13 @@ transition: box-shadow 0.3s; } - div.colors button:hover { + colour-palette button:hover { box-shadow: .4em .4em .6em #0004; } - div.colors button:hover::before { + colour-palette button:hover::before { 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%); } @@ -232,6 +235,18 @@ 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 === */ [center] { text-align: center; } @@ -255,7 +270,7 @@ 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 => { const prop = name => getComputedStyle(button) .getPropertyValue(name) @@ -294,4 +309,24 @@ 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() + })