darkwiiplayer/.profile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add names to colours for palette export

Browse source
This commit is contained in:
Talia 2022-10-11 09:36:12 +02:00
parent 3da727667b
commit 51a998e20b
1 changed files with 9 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
templates/palette.html
View file

@ -14,8 +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 -->
<colour-palette style="--hue: var(--base-hue);"> <colour-palette name="primary" style="--hue: var(--base-hue);"></colour-palette>
</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>
@ -23,7 +22,7 @@
</section> </section>
<h2>Secondary</h2> <h2>Secondary</h2>
<colour-palette style="--hue: calc(var(--base-hue) + var(--offset));"></colour-palette> <colour-palette name="secondary" style="--hue: calc(var(--base-hue) + var(--offset));"></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.
@ -32,7 +31,7 @@
</section> </section>
<h2>Tertiary</h2> <h2>Tertiary</h2>
<colour-palette style="--hue: calc(var(--base-hue) - var(--offset));"></colour-palette> <colour-palette name="tertiary" style="--hue: calc(var(--base-hue) - var(--offset));"></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.
@ -40,7 +39,7 @@
</section> </section>
<h2>Neutral</h2> <h2>Neutral</h2>
<colour-palette style="--hue: 210deg; --saturation: 5%;"></colour-palette> <colour-palette name="neutral" style="--hue: 210deg; --saturation: 5%;"></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.
@ -261,7 +260,7 @@
return Array.from(this.querySelectorAll("button")) return Array.from(this.querySelectorAll("button"))
.map(button => getComputedStyle(button).backgroundColor) .map(button => getComputedStyle(button).backgroundColor)
.map(colour => colour.match(/\d+/g)) .map(colour => colour.match(/\d+/g))
.map(match => `${match[0]} ${match[1]} ${match[2]}`) .map((match, index) => `${match[0]} ${match[1]} ${match[2]} ${this.name}-${index+1}`)
} }
connectedCallback() { connectedCallback() {
@ -289,13 +288,16 @@
}); });
}); });
} }
get name() {
return this.getAttribute("name") || "Unnamed"
}
}) })
const exportButton = document.querySelector("#export") const exportButton = document.querySelector("#export")
exportButton.addEventListener("click", event => { exportButton.addEventListener("click", event => {
const colours = Array.from(document.querySelectorAll("colour-palette")).map(palette => palette.colours) 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 template = `GIMP Palette\nName: Palette\nColumns: ${colours.length}\n#\n${colours.map(c => c.join("\n")).join("\n#\n")}`
const link = document.createElement("a") const link = document.createElement("a")
link.href = `data:text/plain;base64,${btoa(template)}` link.href = `data:text/plain;base64,${btoa(template)}`
link.download = "palette.gpl" link.download = "palette.gpl"