From a18bda00449fdfc35d89e0b15b6cd273b46c5539 Mon Sep 17 00:00:00 2001 From: Kuba Orlik Date: Sun, 9 Feb 2025 18:02:12 +0100 Subject: [PATCH] Enable support for sealgen's color palletes --- .gitignore | 3 +- package-lock.json | 19 +- package.json | 1 + src/back/colors.ts | 54 +++ .../autoscrolling-images.css | 8 +- .../autoscrolling-images.jdd.tsx | 2 +- src/colors.css | 361 +++++++++++++++++- 7 files changed, 431 insertions(+), 17 deletions(-) create mode 100644 src/back/colors.ts diff --git a/.gitignore b/.gitignore index fd7485d..52dac74 100644 --- a/.gitignore +++ b/.gitignore @@ -47,4 +47,5 @@ src/includes.css lint-report.json /src/style-entrypoints/ /meili_data/ -!/meili_data/.keepme \ No newline at end of file +!/meili_data/.keepme +/src/colors.html diff --git a/package-lock.json b/package-lock.json index 9d326e9..9828ab0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "@types/leaflet": "^1.9.8", "@types/object-hash": "^3.0.6", "@types/simplemde": "^1.11.11", + "colord": "^2.9.3", "dotenv": "^16.4.5", "escape-goat": "^4.0.0", "get-port": "^7.0.0", @@ -1170,13 +1171,6 @@ "version": "0.1.30", "license": "MIT" }, - "node_modules/@types/color": { - "version": "3.0.6", - "license": "MIT", - "dependencies": { - "@types/color-convert": "*" - } - }, "node_modules/@types/color-convert": { "version": "2.0.3", "license": "MIT", @@ -2714,6 +2708,7 @@ "version": "4.2.3", "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz", "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==", + "license": "MIT", "dependencies": { "color-convert": "^2.0.1", "color-string": "^1.9.0" @@ -2763,7 +2758,6 @@ "version": "2.9.3", "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz", "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==", - "dev": true, "license": "MIT" }, "node_modules/combined-stream": { @@ -9254,6 +9248,15 @@ "version": "0.4.3", "license": "ISC" }, + "node_modules/sealious/node_modules/@types/color": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/@types/color/-/color-3.0.6.tgz", + "integrity": "sha512-NMiNcZFRUAiUUCCf7zkAelY8eV3aKqfbzyFQlXpPIEeoNDbsEHGpb854V3gzTsGKYj830I5zPuOwU/TP5/cW6A==", + "license": "MIT", + "dependencies": { + "@types/color-convert": "*" + } + }, "node_modules/sealious/node_modules/@types/object-hash": { "version": "1.3.4", "resolved": "https://registry.npmjs.org/@types/object-hash/-/object-hash-1.3.4.tgz", diff --git a/package.json b/package.json index 8e49cc8..bc2679c 100644 --- a/package.json +++ b/package.json @@ -88,6 +88,7 @@ "@types/leaflet": "^1.9.8", "@types/object-hash": "^3.0.6", "@types/simplemde": "^1.11.11", + "colord": "^2.9.3", "dotenv": "^16.4.5", "escape-goat": "^4.0.0", "get-port": "^7.0.0", diff --git a/src/back/colors.ts b/src/back/colors.ts new file mode 100644 index 0000000..778b79f --- /dev/null +++ b/src/back/colors.ts @@ -0,0 +1,54 @@ +import { colord } from "colord"; + +export const colors: Record> = { + basic: { + navy: "#001f3f", + blue: "#0074D9", + aqua: "#7FDBFF", + teal: "#39CCCC", + purple: "#B10DC9", + fuchsia: "#F012BE", + maroon: "#85144b", + red: "#ff4136", + orange: "#ff851b", + yellow: "#ffdc00", + olive: "#3d9970", + green: "#2ecc40", + lime: "#01ff70", + black: "#111111", + gray: "#aaaaaa", + silver: "#dddddd", + white: "#ffffff", + }, +}; + +colors.brand = {}; + +colors.brand["text-bg"] = colors.basic!.white!; +colors.brand["text-fg"] = colors.basic!.black!; +colors.brand["accent"] = colors.basic!.blue!; +colors.brand["text-accent"] = colors.brand.accent!; + +const shade_step = 0.1; +const hue_step = -3; +const saturation_step = 0.05; + +for (const [group_name, group] of Object.entries(colors)) { + for (const [color_name, color] of Object.entries(group)) { + for (const shade_variant of ["light", "dark"]) { + for (let i = 1; i <= 8; i++) { + let shifted = colord(color) + .darken((shade_variant == "dark" ? 1 : -1) * i * shade_step) + .rotate((shade_variant == "dark" ? 1 : -1) * i * hue_step); + + if (shifted.toHsl().s !== 0) { + shifted = shifted.saturate( + (shade_variant == "dark" ? 1 : -1) * i * saturation_step + ); + } + const hex = shifted.toHex(); + colors[group_name]![`${color_name}-${shade_variant}${i}`] = hex; + } + } + } +} diff --git a/src/back/jdd-components/autoscrolling-images/autoscrolling-images.css b/src/back/jdd-components/autoscrolling-images/autoscrolling-images.css index ba2bf37..c80c3a9 100644 --- a/src/back/jdd-components/autoscrolling-images/autoscrolling-images.css +++ b/src/back/jdd-components/autoscrolling-images/autoscrolling-images.css @@ -20,7 +20,7 @@ .autoscrolling-images__title { font-family: Exotc350DmBdEU; font-size: 32px; - color: #0d4d69; + color: var(--color-brand-accent); margin: 0; } @@ -103,13 +103,11 @@ } .autoscrolling-images__carousel-page--looping-tail { - /* background-color: red; */ position: absolute; left: 100%; } .autoscrolling-images__carousel-page--looping-head { - /* background-color: green; */ position: absolute; right: 100%; } @@ -136,14 +134,14 @@ cursor: pointer; height: 12px; width: 12px; - background-color: #cadae4; + background-color: var(--color-brand-accent-light4); border-radius: 50%; display: inline-block; margin: 4px; } .autoscrolling-images__dots:hover { - background-color: #0d4d69; + background-color: var(--color-brand-accent); } @keyframes autoscrolling-images-infiniteScroll { diff --git a/src/back/jdd-components/autoscrolling-images/autoscrolling-images.jdd.tsx b/src/back/jdd-components/autoscrolling-images/autoscrolling-images.jdd.tsx index 15a7c3f..6b4f2fa 100644 --- a/src/back/jdd-components/autoscrolling-images/autoscrolling-images.jdd.tsx +++ b/src/back/jdd-components/autoscrolling-images/autoscrolling-images.jdd.tsx @@ -151,7 +151,7 @@ export class AutoscrollingImages extends Component { #${radioButtonIdPrefix}-autoscrolling-images__radio-${pageIndex}:checked ~ .autoscrolling-images__dots-container > label:nth-child(${pageIndex + 1}) { - background-color: #0d4d69; + background-color: var(--color-brand-accent); }` ) diff --git a/src/colors.css b/src/colors.css index 2833291..f94352b 100644 --- a/src/colors.css +++ b/src/colors.css @@ -1,3 +1,360 @@ -html { - --primary-accent-color: #5294a1; +/* DO NOT EDIT! This file is automatically generated by sealgen */ +:root { + --color-basic-aqua: #7fdbff; + --color-basic-aqua-dark1: #4cd5ff; + --color-basic-aqua-dark2: #19d5ff; + --color-basic-aqua-dark3: #00c6e5; + --color-basic-aqua-dark4: #00a3b2; + --color-basic-aqua-dark5: #007b7f; + --color-basic-aqua-dark6: #004c4b; + --color-basic-aqua-dark7: #001917; + --color-basic-aqua-dark8: #000000; + --color-basic-aqua-light1: #b4e5fd; + --color-basic-aqua-light2: #e6f5fe; + --color-basic-aqua-light3: #ffffff; + --color-basic-aqua-light4: #ffffff; + --color-basic-aqua-light5: #ffffff; + --color-basic-aqua-light6: #ffffff; + --color-basic-aqua-light7: #ffffff; + --color-basic-aqua-light8: #ffffff; + --color-basic-black: #111111; + --color-basic-black-dark1: #000000; + --color-basic-black-dark2: #000000; + --color-basic-black-dark3: #000000; + --color-basic-black-dark4: #000000; + --color-basic-black-dark5: #000000; + --color-basic-black-dark6: #000000; + --color-basic-black-dark7: #000000; + --color-basic-black-dark8: #000000; + --color-basic-black-light1: #2b2b2b; + --color-basic-black-light2: #444444; + --color-basic-black-light3: #5e5e5e; + --color-basic-black-light4: #777777; + --color-basic-black-light5: #919191; + --color-basic-black-light6: #aaaaaa; + --color-basic-black-light7: #c4c4c4; + --color-basic-black-light8: #dddddd; + --color-basic-blue: #0074d9; + --color-basic-blue-dark1: #0061a6; + --color-basic-blue-dark2: #004973; + --color-basic-blue-dark3: #002c40; + --color-basic-blue-dark4: #000a0d; + --color-basic-blue-dark5: #000000; + --color-basic-blue-dark6: #000000; + --color-basic-blue-dark7: #000000; + --color-basic-blue-dark8: #000000; + --color-basic-blue-light1: #1382f9; + --color-basic-blue-light2: #4a94f5; + --color-basic-blue-light3: #7dabf4; + --color-basic-blue-light4: #afc7f6; + --color-basic-blue-light5: #dee6fa; + --color-basic-blue-light6: #ffffff; + --color-basic-blue-light7: #ffffff; + --color-basic-blue-light8: #ffffff; + --color-basic-fuchsia: #f012be; + --color-basic-fuchsia-dark1: #c807a5; + --color-basic-fuchsia-dark2: #9b0186; + --color-basic-fuchsia-dark3: #690060; + --color-basic-fuchsia-dark4: #360034; + --color-basic-fuchsia-dark5: #030003; + --color-basic-fuchsia-dark6: #000000; + --color-basic-fuchsia-dark7: #000000; + --color-basic-fuchsia-dark8: #000000; + --color-basic-fuchsia-light1: #ee47bf; + --color-basic-fuchsia-light2: #ef79c8; + --color-basic-fuchsia-light3: #f2a9d6; + --color-basic-fuchsia-light4: #f7d7e9; + --color-basic-fuchsia-light5: #ffffff; + --color-basic-fuchsia-light6: #ffffff; + --color-basic-fuchsia-light7: #ffffff; + --color-basic-fuchsia-light8: #ffffff; + --color-basic-gray: #aaaaaa; + --color-basic-gray-dark1: #909090; + --color-basic-gray-dark2: #777777; + --color-basic-gray-dark3: #5d5d5d; + --color-basic-gray-dark4: #444444; + --color-basic-gray-dark5: #2a2a2a; + --color-basic-gray-dark6: #111111; + --color-basic-gray-dark7: #000000; + --color-basic-gray-dark8: #000000; + --color-basic-gray-light1: #c3c3c3; + --color-basic-gray-light2: #dddddd; + --color-basic-gray-light3: #f6f6f6; + --color-basic-gray-light4: #ffffff; + --color-basic-gray-light5: #ffffff; + --color-basic-gray-light6: #ffffff; + --color-basic-gray-light7: #ffffff; + --color-basic-gray-light8: #ffffff; + --color-basic-green: #2ecc40; + --color-basic-green-dark1: #20a729; + --color-basic-green-dark2: #148016; + --color-basic-green-dark3: #0d560b; + --color-basic-green-dark4: #072a04; + --color-basic-green-dark5: #000000; + --color-basic-green-dark6: #000000; + --color-basic-green-dark7: #000000; + --color-basic-green-dark8: #000000; + --color-basic-green-light1: #5ad36e; + --color-basic-green-light2: #86da98; + --color-basic-green-light3: #b0e3bd; + --color-basic-green-light4: #d7efdf; + --color-basic-green-light5: #fcfdfc; + --color-basic-green-light6: #ffffff; + --color-basic-green-light7: #ffffff; + --color-basic-green-light8: #ffffff; + --color-basic-lime: #01ff70; + --color-basic-lime-dark1: #00cd4f; + --color-basic-lime-dark2: #009a33; + --color-basic-lime-dark3: #00671d; + --color-basic-lime-dark4: #00340c; + --color-basic-lime-dark5: #000100; + --color-basic-lime-dark6: #000000; + --color-basic-lime-dark7: #000000; + --color-basic-lime-dark8: #000000; + --color-basic-lime-light1: #39fa96; + --color-basic-lime-light2: #6ff7b8; + --color-basic-lime-light3: #a2f7d4; + --color-basic-lime-light4: #d2faeb; + --color-basic-lime-light5: #ffffff; + --color-basic-lime-light6: #ffffff; + --color-basic-lime-light7: #ffffff; + --color-basic-lime-light8: #ffffff; + --color-basic-maroon: #85144b; + --color-basic-maroon-dark1: #5b0b36; + --color-basic-maroon-dark2: #2f041d; + --color-basic-maroon-dark3: #000000; + --color-basic-maroon-dark4: #000000; + --color-basic-maroon-dark5: #000000; + --color-basic-maroon-dark6: #000000; + --color-basic-maroon-dark7: #000000; + --color-basic-maroon-dark8: #000000; + --color-basic-maroon-light1: #ac205d; + --color-basic-maroon-light2: #d12e6d; + --color-basic-maroon-light3: #d55d85; + --color-basic-maroon-light4: #dc89a1; + --color-basic-maroon-light5: #e5b3bf; + --color-basic-maroon-light6: #f1dade; + --color-basic-maroon-light7: #ffffff; + --color-basic-maroon-light8: #ffffff; + --color-basic-navy: #001f3f; + --color-basic-navy-dark1: #00070c; + --color-basic-navy-dark2: #000000; + --color-basic-navy-dark3: #000000; + --color-basic-navy-dark4: #000000; + --color-basic-navy-dark5: #000000; + --color-basic-navy-dark6: #000000; + --color-basic-navy-dark7: #000000; + --color-basic-navy-dark8: #000000; + --color-basic-navy-light1: #03346f; + --color-basic-navy-light2: #08449d; + --color-basic-navy-light3: #1050c8; + --color-basic-navy-light4: #245fe7; + --color-basic-navy-light5: #577be7; + --color-basic-navy-light6: #879bea; + --color-basic-navy-light7: #b5beef; + --color-basic-navy-light8: #e0e2f7; + --color-basic-olive: #3d9970; + --color-basic-olive-dark1: #2a7951; + --color-basic-olive-dark2: #1a5635; + --color-basic-olive-dark3: #0d301b; + --color-basic-olive-dark4: #020804; + --color-basic-olive-dark5: #000000; + --color-basic-olive-dark6: #000000; + --color-basic-olive-dark7: #000000; + --color-basic-olive-dark8: #000000; + --color-basic-olive-light1: #56b38e; + --color-basic-olive-light2: #7ebea8; + --color-basic-olive-light3: #a3ccc0; + --color-basic-olive-light4: #c6dcd6; + --color-basic-olive-light5: #e7eeed; + --color-basic-olive-light6: #ffffff; + --color-basic-olive-light7: #ffffff; + --color-basic-olive-light8: #ffffff; + --color-basic-orange: #ff851b; + --color-basic-orange-dark1: #e76000; + --color-basic-orange-dark2: #b44200; + --color-basic-orange-dark3: #812900; + --color-basic-orange-dark4: #4e1500; + --color-basic-orange-dark5: #1b0600; + --color-basic-orange-dark6: #000000; + --color-basic-orange-dark7: #000000; + --color-basic-orange-dark8: #000000; + --color-basic-orange-light1: #fba952; + --color-basic-orange-light2: #f9c887; + --color-basic-orange-light3: #f9e1ba; + --color-basic-orange-light4: #fdf6e9; + --color-basic-orange-light5: #ffffff; + --color-basic-orange-light6: #ffffff; + --color-basic-orange-light7: #ffffff; + --color-basic-orange-light8: #ffffff; + --color-basic-purple: #b10dc9; + --color-basic-purple-dark1: #81069d; + --color-basic-purple-dark2: #55016f; + --color-basic-purple-dark3: #2c003d; + --color-basic-purple-dark4: #07000a; + --color-basic-purple-dark5: #000000; + --color-basic-purple-dark6: #000000; + --color-basic-purple-dark7: #000000; + --color-basic-purple-dark8: #000000; + --color-basic-purple-light1: #d91fea; + --color-basic-purple-light2: #e452ea; + --color-basic-purple-light3: #ec83ea; + --color-basic-purple-light4: #f0b2ec; + --color-basic-purple-light5: #f7def4; + --color-basic-purple-light6: #ffffff; + --color-basic-purple-light7: #ffffff; + --color-basic-purple-light8: #ffffff; + --color-basic-red: #ff4136; + --color-basic-red-dark1: #ff0303; + --color-basic-red-dark2: #cf000a; + --color-basic-red-dark3: #9c0010; + --color-basic-red-dark4: #690010; + --color-basic-red-dark5: #36000b; + --color-basic-red-dark6: #030001; + --color-basic-red-dark7: #000000; + --color-basic-red-dark8: #000000; + --color-basic-red-light1: #fb7b6d; + --color-basic-red-light2: #faaea1; + --color-basic-red-light3: #fbdbd3; + --color-basic-red-light4: #ffffff; + --color-basic-red-light5: #ffffff; + --color-basic-red-light6: #ffffff; + --color-basic-red-light7: #ffffff; + --color-basic-red-light8: #ffffff; + --color-basic-silver: #dddddd; + --color-basic-silver-dark1: #c4c4c4; + --color-basic-silver-dark2: #aaaaaa; + --color-basic-silver-dark3: #919191; + --color-basic-silver-dark4: #777777; + --color-basic-silver-dark5: #5e5e5e; + --color-basic-silver-dark6: #444444; + --color-basic-silver-dark7: #2b2b2b; + --color-basic-silver-dark8: #111111; + --color-basic-silver-light1: #f7f7f7; + --color-basic-silver-light2: #ffffff; + --color-basic-silver-light3: #ffffff; + --color-basic-silver-light4: #ffffff; + --color-basic-silver-light5: #ffffff; + --color-basic-silver-light6: #ffffff; + --color-basic-silver-light7: #ffffff; + --color-basic-silver-light8: #ffffff; + --color-basic-teal: #39cccc; + --color-basic-teal-dark1: #26aca6; + --color-basic-teal-dark2: #19867b; + --color-basic-teal-dark3: #0e5e52; + --color-basic-teal-dark4: #06332a; + --color-basic-teal-dark5: #000604; + --color-basic-teal-dark6: #000000; + --color-basic-teal-dark7: #000000; + --color-basic-teal-dark8: #000000; + --color-basic-teal-light1: #67ccd1; + --color-basic-teal-light2: #91d2da; + --color-basic-teal-light3: #badee4; + --color-basic-teal-light4: #e0eef1; + --color-basic-teal-light5: #ffffff; + --color-basic-teal-light6: #ffffff; + --color-basic-teal-light7: #ffffff; + --color-basic-teal-light8: #ffffff; + --color-basic-white: #ffffff; + --color-basic-white-dark1: #e6e6e6; + --color-basic-white-dark2: #cccccc; + --color-basic-white-dark3: #b3b3b3; + --color-basic-white-dark4: #999999; + --color-basic-white-dark5: #808080; + --color-basic-white-dark6: #666666; + --color-basic-white-dark7: #4d4d4d; + --color-basic-white-dark8: #333333; + --color-basic-white-light1: #ffffff; + --color-basic-white-light2: #ffffff; + --color-basic-white-light3: #ffffff; + --color-basic-white-light4: #ffffff; + --color-basic-white-light5: #ffffff; + --color-basic-white-light6: #ffffff; + --color-basic-white-light7: #ffffff; + --color-basic-white-light8: #ffffff; + --color-basic-yellow: #ffdc00; + --color-basic-yellow-dark1: #cca700; + --color-basic-yellow-dark2: #997500; + --color-basic-yellow-dark3: #664900; + --color-basic-yellow-dark4: #332200; + --color-basic-yellow-dark5: #000000; + --color-basic-yellow-dark6: #000000; + --color-basic-yellow-dark7: #000000; + --color-basic-yellow-dark8: #000000; + --color-basic-yellow-light1: #faea38; + --color-basic-yellow-light2: #f7f36e; + --color-basic-yellow-light3: #f6f7a1; + --color-basic-yellow-light4: #f7fad1; + --color-basic-yellow-light5: #ffffff; + --color-basic-yellow-light6: #ffffff; + --color-basic-yellow-light7: #ffffff; + --color-basic-yellow-light8: #ffffff; + --color-brand-accent: #0074d9; + --color-brand-accent-dark1: #0061a6; + --color-brand-accent-dark2: #004973; + --color-brand-accent-dark3: #002c40; + --color-brand-accent-dark4: #000a0d; + --color-brand-accent-dark5: #000000; + --color-brand-accent-dark6: #000000; + --color-brand-accent-dark7: #000000; + --color-brand-accent-dark8: #000000; + --color-brand-accent-light1: #1382f9; + --color-brand-accent-light2: #4a94f5; + --color-brand-accent-light3: #7dabf4; + --color-brand-accent-light4: #afc7f6; + --color-brand-accent-light5: #dee6fa; + --color-brand-accent-light6: #ffffff; + --color-brand-accent-light7: #ffffff; + --color-brand-accent-light8: #ffffff; + --color-brand-text-accent: #0074d9; + --color-brand-text-accent-dark1: #0061a6; + --color-brand-text-accent-dark2: #004973; + --color-brand-text-accent-dark3: #002c40; + --color-brand-text-accent-dark4: #000a0d; + --color-brand-text-accent-dark5: #000000; + --color-brand-text-accent-dark6: #000000; + --color-brand-text-accent-dark7: #000000; + --color-brand-text-accent-dark8: #000000; + --color-brand-text-accent-light1: #1382f9; + --color-brand-text-accent-light2: #4a94f5; + --color-brand-text-accent-light3: #7dabf4; + --color-brand-text-accent-light4: #afc7f6; + --color-brand-text-accent-light5: #dee6fa; + --color-brand-text-accent-light6: #ffffff; + --color-brand-text-accent-light7: #ffffff; + --color-brand-text-accent-light8: #ffffff; + --color-brand-text-bg: #ffffff; + --color-brand-text-bg-dark1: #e6e6e6; + --color-brand-text-bg-dark2: #cccccc; + --color-brand-text-bg-dark3: #b3b3b3; + --color-brand-text-bg-dark4: #999999; + --color-brand-text-bg-dark5: #808080; + --color-brand-text-bg-dark6: #666666; + --color-brand-text-bg-dark7: #4d4d4d; + --color-brand-text-bg-dark8: #333333; + --color-brand-text-bg-light1: #ffffff; + --color-brand-text-bg-light2: #ffffff; + --color-brand-text-bg-light3: #ffffff; + --color-brand-text-bg-light4: #ffffff; + --color-brand-text-bg-light5: #ffffff; + --color-brand-text-bg-light6: #ffffff; + --color-brand-text-bg-light7: #ffffff; + --color-brand-text-bg-light8: #ffffff; + --color-brand-text-fg: #111111; + --color-brand-text-fg-dark1: #000000; + --color-brand-text-fg-dark2: #000000; + --color-brand-text-fg-dark3: #000000; + --color-brand-text-fg-dark4: #000000; + --color-brand-text-fg-dark5: #000000; + --color-brand-text-fg-dark6: #000000; + --color-brand-text-fg-dark7: #000000; + --color-brand-text-fg-dark8: #000000; + --color-brand-text-fg-light1: #2b2b2b; + --color-brand-text-fg-light2: #444444; + --color-brand-text-fg-light3: #5e5e5e; + --color-brand-text-fg-light4: #777777; + --color-brand-text-fg-light5: #919191; + --color-brand-text-fg-light6: #aaaaaa; + --color-brand-text-fg-light7: #c4c4c4; + --color-brand-text-fg-light8: #dddddd; }