Enable support for sealgen's color palletes

This commit is contained in:
Kuba Orlik 2025-02-09 18:02:12 +01:00
parent 764ead3543
commit a18bda0044
7 changed files with 431 additions and 17 deletions

1
.gitignore vendored
View File

@ -48,3 +48,4 @@ lint-report.json
/src/style-entrypoints/
/meili_data/
!/meili_data/.keepme
/src/colors.html

19
package-lock.json generated
View File

@ -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",

View File

@ -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",

54
src/back/colors.ts Normal file
View File

@ -0,0 +1,54 @@
import { colord } from "colord";
export const colors: Record<string, Record<string, string>> = {
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;
}
}
}
}

View File

@ -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 {

View File

@ -151,7 +151,7 @@ export class AutoscrollingImages extends Component<typeof component_arguments> {
#${radioButtonIdPrefix}-autoscrolling-images__radio-${pageIndex}:checked ~ .autoscrolling-images__dots-container
> label:nth-child(${pageIndex + 1}) {
background-color: #0d4d69;
background-color: var(--color-brand-accent);
}`
)

View File

@ -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;
}