diff --git a/templates/palette.html b/templates/palette.html
index 9c0ce3e..f33e3af 100644
--- a/templates/palette.html
+++ b/templates/palette.html
@@ -14,8 +14,7 @@
Primary
-
-
+
Modify as needed by changing the --hue
attribute in the inlined CSS.
@@ -23,7 +22,7 @@
Secondary
-
+
You can copy any colour to the clipboard by just clicking on its box.
@@ -32,7 +31,7 @@
Tertiary
-
+
By making use of calc
and var
, most of the colour palette can be automated.
@@ -40,7 +39,7 @@
Neutral
-
+
By making use of calc
and var
, most of the colour palette can be automated.
@@ -261,7 +260,7 @@
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]}`)
+ .map((match, index) => `${match[0]} ${match[1]} ${match[2]} ${this.name}-${index+1}`)
}
connectedCallback() {
@@ -289,13 +288,16 @@
});
});
}
+ get name() {
+ return this.getAttribute("name") || "Unnamed"
+ }
})
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 template = `GIMP Palette\nName: Palette\nColumns: ${colours.length}\n#\n${colours.map(c => c.join("\n")).join("\n#\n")}`
const link = document.createElement("a")
link.href = `data:text/plain;base64,${btoa(template)}`
link.download = "palette.gpl"