Fully colored power action buttons.

1 files changed, 76 insertions, 0 deletions

diff --git a/tools/gencolors.js b/tools/gencolors.js
new file mode 100644
index 0000000..63b4bf5
--- /dev/null
+++ b/tools/gencolors.js
@@ -0,0 +1,76 @@
+const { parse_hex, format_hex, lrgb_from_any, rgb_from_any, oklab_from_any } = require("./colors.js")
+
+const white = "#ffffff"
+const black = "#000000"
+
+function lerp(a, b, n) {
+	return a + (b - a) * n
+}
+
+function blend(a, b, n) {
+	a = lrgb_from_any(parse_hex(a))
+	b = lrgb_from_any(parse_hex(b))
+	return format_hex({
+		mode: "lrgb",
+		r: lerp(a.r, b.r, n),
+		g: lerp(a.g, b.g, n),
+		b: lerp(a.b, b.b, n)
+	})
+}
+
+function multiply_luminance(hex, m) {
+	let oklab = oklab_from_any(parse_hex(hex))
+	oklab.l = Math.max(0, Math.min(1, oklab.l * m))
+	return format_hex(oklab)
+}
+
+function add_luminance(hex, m) {
+	let oklab = oklab_from_any(parse_hex(hex))
+	oklab.l = Math.max(0, Math.min(1, oklab.l + m))
+	return format_hex(oklab)
+}
+
+function make_3d_colors(base) {
+	return [
+		base,
+		multiply_luminance(base, 0.9),
+		multiply_luminance(base, 0.8),
+		multiply_luminance(base, 0.7),
+		multiply_luminance(base, 0.4)
+	]
+}
+
+function make_2d_colors(base) {
+	return [
+		base,
+		multiply_luminance(base, 1.2),
+		multiply_luminance(base, 0.8),
+		multiply_luminance(base, 0.4)
+	]
+}
+
+function make_2d_colors_add(base) {
+	return [
+		base,
+		add_luminance(base, 0.2),
+		add_luminance(base, -0.2),
+		add_luminance(base, -0.5),
+	]
+}
+
+function print(x) {
+	console.log(x)
+}
+
+function gencss(color, sel) {
+	let [ bg, hi, lo, sh ] = make_2d_colors(color)
+	print(`${sel} { background-color: ${color}; border-color: ${hi} ${lo} ${lo} ${hi}; box-shadow: 0 0 0 1px ${sh}; }`)
+	print(`${sel}:active:hover { border-color: ${lo} ${hi} ${hi} ${lo}; }`)
+}
+
+gencss("#bbbbbb", "button:has(.austria)")
+gencss("#ffc825", "button:has(.bavaria)")
+gencss("#ed1c24", "button:has(.france)")
+gencss("#5f5c5c", "button:has(.pragmatic)")
+gencss("#005988", "button:has(.prussia)")
+gencss("#157d36", "button:has(.saxony)")