From baf722eaeaca96bc48fe203057e7ef56c04c2068 Mon Sep 17 00:00:00 2001 From: Kuba Orlik Date: Mon, 10 Feb 2025 18:15:33 +0100 Subject: [PATCH] More consistent colors using the new palettes. Fix some bugs. --- package-lock.json | 48 +- package.json | 5 +- src/back/colors.ts | 63 +- .../autoscrolling-images.css | 6 +- .../autoscrolling-images.jdd.tsx | 2 +- .../dynamic-grid/dynamic-grid.css | 26 +- .../dynamic-grid/dynamic-grid.jdd.tsx | 2 +- .../faq-component/faq-component.css | 16 +- .../header-with-image/header-with-image.css | 13 +- .../horizontal-gallery/horizontal-gallery.css | 9 +- .../horizontal-gallery.jdd.tsx | 2 +- .../map-with-pins/map-with-pins.css | 10 +- .../map-with-pins/map-with-pins.jdd.tsx | 3 +- .../map-with-pins/map-with-pins.stimulus.ts | 18 +- .../ordered-pictogram-tiles.css | 48 +- .../ordered-pictogram-tiles.jdd.tsx | 2 +- .../text-image-block/text-image-block.css | 58 +- .../horizontal-scroller.css | 2 +- src/colors.css | 597 +++++++----------- 19 files changed, 418 insertions(+), 512 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9828ab0..37ac162 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,11 +12,12 @@ "@babel/core": "^7.12.10", "@hotwired/turbo": "^8.0.2", "@koa/router": "^12.0.1", + "@sealcode/add-to-head": "^1.0.0", "@sealcode/crud-ui": "^0.0.17", "@sealcode/file-manager": "^1.0.2", "@sealcode/jdd": "^0.6.6", - "@sealcode/jdd-editor": "^0.1.6", - "@sealcode/sealgen": "^0.17.8", + "@sealcode/jdd-editor": "^0.1.9", + "@sealcode/sealgen": "^0.17.15", "@sealcode/simplemde": "^1.12.0-beta12", "@sealcode/ts-predicates": "^0.6.2", "@types/kill-port": "^2.0.0", @@ -882,6 +883,12 @@ "node": ">=16" } }, + "node_modules/@sealcode/add-to-head": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@sealcode/add-to-head/-/add-to-head-1.0.0.tgz", + "integrity": "sha512-9nbTXTsD5ndTjMFy1QtFBmItv4rgiYpfFK/5jFNipFcdoQm/mesVpWwsv4t2R6iXlBx58Hr185KlaJTstyd/0A==", + "license": "ISC" + }, "node_modules/@sealcode/ansi-html-stream": { "version": "1.0.3", "dev": true, @@ -954,9 +961,9 @@ } }, "node_modules/@sealcode/jdd-editor": { - "version": "0.1.6", - "resolved": "https://registry.npmjs.org/@sealcode/jdd-editor/-/jdd-editor-0.1.6.tgz", - "integrity": "sha512-JagBzbhXYK6yrGArud9Z40j2AReQYYLv4yq/aRsr2cR7hvvDR4o5jt91ymodVkWmlzLn7haeOXCql8Kl9Qul3A==", + "version": "0.1.9", + "resolved": "https://registry.npmjs.org/@sealcode/jdd-editor/-/jdd-editor-0.1.9.tgz", + "integrity": "sha512-qK4ZFrx4SQppZ5Ba3us3r4Sz3boL9EnYLDjjCc4SIL1pKpIiMJ7YsyLhUGDT3APFVK3F/jZ7NodgTTZEiBmcgQ==", "dependencies": { "@koa/router": "^13.1.0", "@sealcode/jdd": "^0.6.5", @@ -996,26 +1003,29 @@ "integrity": "sha512-pDsGlk2KokQkwzsJDBUWJFDRpEoxxth6TMQGDJyCTmWnd1Vn+cQb5moXDKaf7cXnWb9Y6QtdNX/fPzM/3RH2Cg==" }, "node_modules/@sealcode/sealgen": { - "version": "0.17.8", - "resolved": "https://registry.npmjs.org/@sealcode/sealgen/-/sealgen-0.17.8.tgz", - "integrity": "sha512-bkaSuvmUO7H0nf4xXHCJc5fND/10hL7jaSK9KRJfA8Sx1TNNhTqKVukIlIaWqxWxg/NcjtN2babDHToZX8Lv+g==", + "version": "0.17.15", + "resolved": "https://registry.npmjs.org/@sealcode/sealgen/-/sealgen-0.17.15.tgz", + "integrity": "sha512-wwGbDEKDcjsOVwOvBOz0trChcrjTI4CoCqNd51TYpatsUQP0ZzO2PDhv/4MR8CPBnzfcvEL7uJRWGOEsa2GlPw==", "dependencies": { "@koa/router": "^12.0.1", "@sealcode/file-manager": "^1.0.2", "@sealcode/ts-predicates": "^0.4.3", "chokidar": "^3.6.0", + "colord": "^2.9.3", "deepmerge": "^4.3.1", "esbuild": "^0.20.0", "escape-goat": "^4.0.0", "google-fonts-helper": "^3.4.1", "is-what": "^4.1.16", "js-convert-case": "^4.2.0", + "json5": "^2.2.3", "locreq": "^3.0.0", "md5": "^2.3.0", "merge": "^2.1.1", "prettier": "^2.7.1", "prompts": "^2.4.2", "recursive-readdir": "^2.2.3", + "tempfile": "^5.0.0", "tempstream": "^0.4.4", "tiny-glob": "^0.2.9", "ws": "^8.16.0", @@ -10398,6 +10408,28 @@ "streamx": "^2.15.0" } }, + "node_modules/temp-dir": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-3.0.0.tgz", + "integrity": "sha512-nHc6S/bwIilKHNRgK/3jlhDoIHcp45YgyiwcAk46Tr0LfEqGBVpmiAyuiuxeVE44m3mXnEeVhaipLOEWmH+Njw==", + "engines": { + "node": ">=14.16" + } + }, + "node_modules/tempfile": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/tempfile/-/tempfile-5.0.0.tgz", + "integrity": "sha512-bX655WZI/F7EoTDw9JvQURqAXiPHi8o8+yFxPF2lWYyz1aHnmMRuXWqL6YB6GmeO0o4DIYWHLgGNi/X64T+X4Q==", + "dependencies": { + "temp-dir": "^3.0.0" + }, + "engines": { + "node": ">=14.18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/tempstream": { "version": "0.4.5", "resolved": "https://registry.npmjs.org/tempstream/-/tempstream-0.4.5.tgz", diff --git a/package.json b/package.json index bc2679c..c75443c 100644 --- a/package.json +++ b/package.json @@ -77,11 +77,12 @@ "@babel/core": "^7.12.10", "@hotwired/turbo": "^8.0.2", "@koa/router": "^12.0.1", + "@sealcode/add-to-head": "^1.0.0", "@sealcode/crud-ui": "^0.0.17", "@sealcode/file-manager": "^1.0.2", "@sealcode/jdd": "^0.6.6", - "@sealcode/jdd-editor": "^0.1.6", - "@sealcode/sealgen": "^0.17.8", + "@sealcode/jdd-editor": "^0.1.9", + "@sealcode/sealgen": "^0.17.15", "@sealcode/simplemde": "^1.12.0-beta12", "@sealcode/ts-predicates": "^0.6.2", "@types/kill-port": "^2.0.0", diff --git a/src/back/colors.ts b/src/back/colors.ts index 778b79f..26c38ce 100644 --- a/src/back/colors.ts +++ b/src/back/colors.ts @@ -2,9 +2,7 @@ import { colord } from "colord"; export const colors: Record> = { basic: { - navy: "#001f3f", blue: "#0074D9", - aqua: "#7FDBFF", teal: "#39CCCC", purple: "#B10DC9", fuchsia: "#F012BE", @@ -17,38 +15,53 @@ export const colors: Record> = { lime: "#01ff70", black: "#111111", gray: "#aaaaaa", - silver: "#dddddd", - white: "#ffffff", }, }; colors.brand = {}; -colors.brand["text-bg"] = colors.basic!.white!; +// "canvas" is the main background of the entire page +// "text-bg" is text background for longer paragraphs: +// "text-fg" is text color for longer paragraphs. Usually paired with text-bg +// "accent" is an accent color used for buttons, icons etc +// "accent2" is an alternative accent color, used on secondary elements +// "text-accent" describes what color should the text be when accenting it with color. +// Usually the same as the `accent` color, but you might choose a different +// shade so it looks better on `text-bg`. +// "text-accent2" is same as above, but based on the second accent color +// "text-on-accent" - what color text should be when put on a background colored with accent color +// "text-on-accent2" - what color text should be when put on a background colored with accent2 color +colors.brand["canvas"] = "#fff"; +colors.brand["text-bg"] = "#f6f6f6"; colors.brand["text-fg"] = colors.basic!.black!; -colors.brand["accent"] = colors.basic!.blue!; +colors.brand["accent"] = "#5294A1"; +colors.brand["accent2"] = "#65397C"; colors.brand["text-accent"] = colors.brand.accent!; +colors.brand["text-accent2"] = colors.brand["accent2"]!; +colors.brand["text-on-accent"] = "#fff"; +colors.brand["text-on-accent2"] = "#fff"; -const shade_step = 0.1; -const hue_step = -3; -const saturation_step = 0.05; +// configure hue variance across the shades of the same main color. +const hue_step = -4; -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); +// configure saturation variance across the shades of the same main color. If positive, +// lighter colors will gave more saturation. If negative, darker colors will be more +// saturated +const saturation_step = -0.03; - 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; - } - } +// this function is used by sealgen to generate up to 10 shades for each color. +export function shade(color: string, shade_step: number /* 0-9 */) { + const hsl = colord(color).toHsl(); + const lightness_offset = hsl.l % 10; + const new_l = shade_step * 10 + lightness_offset; + const new_color = { ...hsl, l: new_l }; + const steps = Math.round((shade_step * 10 - hsl.l) / 10); + let shifted = colord(new_color); + + if (shifted.toHsl().s !== 0) { + // don't saturate greys + shifted = shifted.saturate(steps * saturation_step); } + shifted = shifted.rotate(hue_step * steps); + return shifted.toHex(); } diff --git a/src/back/jdd-components/autoscrolling-images/autoscrolling-images.css b/src/back/jdd-components/autoscrolling-images/autoscrolling-images.css index c80c3a9..c463391 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: var(--color-brand-accent); + color: var(--color-brand-text-accent); margin: 0; } @@ -134,14 +134,14 @@ cursor: pointer; height: 12px; width: 12px; - background-color: var(--color-brand-accent-light4); + background-color: var(--color-brand-accent-09); border-radius: 50%; display: inline-block; margin: 4px; } .autoscrolling-images__dots:hover { - background-color: var(--color-brand-accent); + background-color: var(--color-brand-accent-04); } @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 6b4f2fa..7886274 100644 --- a/src/back/jdd-components/autoscrolling-images/autoscrolling-images.jdd.tsx +++ b/src/back/jdd-components/autoscrolling-images/autoscrolling-images.jdd.tsx @@ -25,7 +25,7 @@ images.getExampleCount = () => { const component_arguments = { title: new ComponentArguments.ShortText(), imagesPerPage: new ComponentArguments.ShortText().setExampleValues(["6"]), - speed: new ComponentArguments.ShortText().setExampleValues(["50"]), + speed: new ComponentArguments.ShortText().setExampleValues(["5"]), desktop_interval: new ComponentArguments.ShortText().setExampleValues(["5"]), images, } as const; diff --git a/src/back/jdd-components/dynamic-grid/dynamic-grid.css b/src/back/jdd-components/dynamic-grid/dynamic-grid.css index 4f88b6e..e5d6636 100644 --- a/src/back/jdd-components/dynamic-grid/dynamic-grid.css +++ b/src/back/jdd-components/dynamic-grid/dynamic-grid.css @@ -8,14 +8,14 @@ align-items: stretch; list-style: none; padding: 0; - border-bottom: 1px solid #ccc; + border-bottom: 1px solid var(--color-brand-text-bg-62); margin-bottom: 36px; .tabs-menu-button { display: flex; margin-bottom: -1px; - border: 1px solid #ccc; - background: #eee; - color: #666; + border: 1px solid var(--color-brand-text-fg-07); + background: var(--color-brand-text-fg-08); + color: var(--color-brand-text-fg); font-size: 12px; transition: border 200ms, color 200ms; @@ -25,8 +25,8 @@ } } .tabs-menu-button:hover { - border-top-color: #333; - color: #333; + border-top-color: var(--color-brand-text-fg); + color: var(--color-brand-text-fg); } } @@ -49,13 +49,13 @@ overflow: hidden; a { - color: #000000; + color: var(--color-brand-text-fg); text-decoration: none; } .tile-content { position: absolute; - background-color: #c3c3c3; + background-color: var(--color-brand-text-fg-08); width: 100%; opacity: 0.9; padding: 8px; @@ -168,18 +168,18 @@ display: inline-block; text-align: center; padding: 8px 24px; - border: 1px solid #000000; + border: 1px solid var(--color-brand-text-fg); color: var(--text-color); min-width: 240px; line-height: 23px; font-size: 16px; &.dark { - background-color: #000000; - --text-color: #ffffff; + background-color: var(--color-brand-accent-02); + --text-color: var(--color-brand-accent); } &.bright { - background-color: #ffffff; - --text-color: #000000; + background-color: var(--color-brand-text-bg); + --text-color: var(--color-brand-accent); } } } diff --git a/src/back/jdd-components/dynamic-grid/dynamic-grid.jdd.tsx b/src/back/jdd-components/dynamic-grid/dynamic-grid.jdd.tsx index c64e66f..5a1608b 100644 --- a/src/back/jdd-components/dynamic-grid/dynamic-grid.jdd.tsx +++ b/src/back/jdd-components/dynamic-grid/dynamic-grid.jdd.tsx @@ -144,7 +144,7 @@ export class DynamicGrid extends Component { index, }: ComponentToHTMLArgs, tab_style_when_active = `border-bottom-color: #fff; - border-top-color: #b721ff; + border-top-color: var(--color-brand-accent-04); background: #fff; color: #222;` ): FlatTemplatable { diff --git a/src/back/jdd-components/faq-component/faq-component.css b/src/back/jdd-components/faq-component/faq-component.css index 218f940..bea8264 100644 --- a/src/back/jdd-components/faq-component/faq-component.css +++ b/src/back/jdd-components/faq-component/faq-component.css @@ -16,20 +16,20 @@ .title { font-size: 32px; - color: #0d4d69; + color: var(--color-brand-text-accent); line-height: 38.3px; } .title-container .content p { display: inline; font-size: 16px; - color: #0d4d69; + color: var(--color-brand-text-accent); line-height: 24px; } .title-container strong { white-space: nowrap; - color: #0d4d69; + color: var(--color-brand-text-accent); font-weight: bold; } @@ -40,7 +40,7 @@ .question-container { display: grid; - background-color: #cadae4; + background-color: var(--color-brand-accent); border-radius: 10px; padding: 0 16px; /* padding: 16px; */ @@ -54,7 +54,7 @@ font-size: 16px; font-weight: bold; cursor: pointer; - color: #0d4d69; + color: var(--color-brand-text-on-accent); align-items: center; padding: 16px 0; line-height: 24px; @@ -74,7 +74,7 @@ .answer { font-size: 16px; - color: #0d4d69; + color: var(--color-brand-text-on-accent); line-height: 24px; } @@ -90,8 +90,8 @@ .button { text-align: center; - background-color: #0d4d69; - color: #ffffff; + background-color: var(--color-brand-accent2); + color: var(--color-brand-text-on-accent2); font-size: 16px; text-decoration: none; padding: 8px 24px 8px 24px; diff --git a/src/back/jdd-components/header-with-image/header-with-image.css b/src/back/jdd-components/header-with-image/header-with-image.css index 221dbb7..e94a1c3 100644 --- a/src/back/jdd-components/header-with-image/header-with-image.css +++ b/src/back/jdd-components/header-with-image/header-with-image.css @@ -2,7 +2,7 @@ display: flex; justify-content: center; - color: #0d4d69; + color: var(--color-brand-text-accent-04); * { padding: 0; @@ -27,8 +27,11 @@ grid-column: 1/2; grid-row: 1/4; - img { - border-radius: 10px; + picture { + max-width: 100cqw; + img { + border-radius: 10px; + } } } @@ -64,8 +67,8 @@ } .button { - color: #ffffff; - background-color: #0b456b; + color: var(--color-brand-accent-09); + background-color: var(--color-brand-accent); text-align: center; text-decoration: none; padding: 8px 24px 8px 24px; diff --git a/src/back/jdd-components/horizontal-gallery/horizontal-gallery.css b/src/back/jdd-components/horizontal-gallery/horizontal-gallery.css index 1e78844..8f817e0 100644 --- a/src/back/jdd-components/horizontal-gallery/horizontal-gallery.css +++ b/src/back/jdd-components/horizontal-gallery/horizontal-gallery.css @@ -4,6 +4,7 @@ display: flex; gap: 16px; width: 100%; + margin-bottom: 16px; h2 { font-size: 32px; @@ -11,9 +12,10 @@ font-family: Exotc350DmBdEU, sans-serif; text-transform: uppercase; text-align: center; - color: #0d4d69; + color: var(--color-brand-text-accent); flex-grow: 1; margin-top: 0; + margin-bottom: 0; @container (max-width: 600px) { font-size: 28px; line-height: 34px; @@ -23,10 +25,11 @@ .horizontal-gallery__buttons, &::before { display: flex; - width: 92px; + width: 200px; content: " "; align-items: center; flex-shrink: 0; + justify-content: center; @container (max-width: 600px) { display: none !important; @@ -45,6 +48,8 @@ border: none; background: none; cursor: pointer; + font-size: 40px; + color: var(--color-brand-text-accent2); } } diff --git a/src/back/jdd-components/horizontal-gallery/horizontal-gallery.jdd.tsx b/src/back/jdd-components/horizontal-gallery/horizontal-gallery.jdd.tsx index 1015055..57d0ad9 100644 --- a/src/back/jdd-components/horizontal-gallery/horizontal-gallery.jdd.tsx +++ b/src/back/jdd-components/horizontal-gallery/horizontal-gallery.jdd.tsx @@ -60,7 +60,7 @@ export class HorizontalGallery extends Component { type="button" > - → + ←