From b81278195d8184e77fe778c325a74aa865562792 Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Tue, 29 Oct 2024 21:40:25 +0100 Subject: Fully colored power action buttons. --- tools/gencolors.js | 76 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 tools/gencolors.js (limited to 'tools/gencolors.js') 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)") -- cgit v1.2.3