From 7aa2910b129d2cb5606eb9c526c552ca0eac20dd Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 18 Oct 2026 18:54:56 +0000 Subject: [PATCH 1/2] Add light mode that follows the device setting Dark stays the default. A device set to light gets the picks from the light motif board: the Dawn chart sky (dawn wash over faint star chart lines, atlas marks in the hero), deep gold line seals, Midnight, violet and gold dust, the deep gold to teal filament and the morning sky placeholder. Large standalone seals (404, Inquiries, Inquiry sent, the blog's lead) are gold foil in both modes. Co-Authored-By: Claude Opus 5.5 (1M context) Claude-Session: https://claude.ai/code/session_012aSbo2D1qP8cMFQCykf7kx --- docs/components.md | 4 +- packages/ui/scripts/light-motifs.mjs | 65 ++++++++++++++++ .../assets/motifs/foil-light/astrolabe.svg | 2 + .../motifs/foil-light/craft-seal-dice.svg | 2 + .../motifs/foil-light/craft-seal-leather.svg | 2 + .../motifs/foil-light/craft-seal-print.svg | 2 + .../foil-light/filament-transmutation.svg | 2 + .../motifs/foil-light/kepler-nest-seal.svg | 2 + .../assets/motifs/foil-light/layered-seal.svg | 2 + .../motifs/foil-light/squared-circle-seal.svg | 2 + .../transmutation-seal-star-paths.svg | 2 + .../motifs/foil-light/transmutation-seal.svg | 2 + .../foil-light/tria-prima-array-seal.svg | 2 + .../assets/motifs/foil-light/zodiac-seal.svg | 2 + .../ui/src/assets/motifs/foil/astrolabe.svg | 2 + .../assets/motifs/foil/craft-seal-dice.svg | 2 + .../assets/motifs/foil/craft-seal-leather.svg | 2 + .../assets/motifs/foil/craft-seal-print.svg | 2 + .../motifs/foil/filament-transmutation.svg | 2 + .../assets/motifs/foil/kepler-nest-seal.svg | 2 + .../src/assets/motifs/foil/layered-seal.svg | 2 + .../motifs/foil/squared-circle-seal.svg | 2 + .../foil/transmutation-seal-star-paths.svg | 2 + .../assets/motifs/foil/transmutation-seal.svg | 2 + .../motifs/foil/tria-prima-array-seal.svg | 2 + .../ui/src/assets/motifs/foil/zodiac-seal.svg | 2 + .../ui/src/assets/motifs/light/astrolabe.svg | 2 + .../assets/motifs/light/craft-seal-dice.svg | 2 + .../motifs/light/craft-seal-leather.svg | 2 + .../assets/motifs/light/craft-seal-print.svg | 2 + .../assets/motifs/light/filament-banner.svg | 2 + .../motifs/light/filament-transmutation.svg | 2 + .../assets/motifs/light/kepler-nest-seal.svg | 2 + .../src/assets/motifs/light/layered-seal.svg | 2 + .../assets/motifs/light/mini-astrolabe.svg | 1 + .../src/assets/motifs/light/mini-layered.svg | 2 + .../ui/src/assets/motifs/light/mini-tome.svg | 2 + .../motifs/light/mini-transmutation.svg | 2 + .../ui/src/assets/motifs/light/scorpius.svg | 1 + .../motifs/light/seven-metals-dipper.svg | 2 + .../motifs/light/squared-circle-seal.svg | 2 + .../light/transmutation-seal-star-paths.svg | 2 + .../motifs/light/transmutation-seal.svg | 2 + .../motifs/light/tria-prima-array-seal.svg | 2 + .../src/assets/motifs/light/zodiac-seal.svg | 2 + packages/ui/src/components/Divider.astro | 14 ++-- packages/ui/src/components/EdgeSeals.astro | 5 +- packages/ui/src/components/Field.astro | 2 +- packages/ui/src/components/GiltCorners.astro | 6 +- packages/ui/src/components/HeroHorizon.astro | 2 +- packages/ui/src/components/Motif.astro | 16 ++++ packages/ui/src/components/PageShell.astro | 13 ++-- packages/ui/src/components/Seal.astro | 7 +- .../ui/src/components/SectionHeading.astro | 4 +- packages/ui/src/components/SiteHeader.astro | 66 ++++++++++++++-- packages/ui/src/components/Star.astro | 2 +- packages/ui/src/components/StarChartArt.astro | 21 ++++-- packages/ui/src/components/StarPath.astro | 6 +- packages/ui/src/components/TickRing.astro | 4 +- packages/ui/src/components/TickScale.astro | 2 +- packages/ui/src/components/seals.ts | 21 ++++++ packages/ui/src/lib/ornaments.ts | 6 +- packages/ui/src/styles/base.css | 9 ++- packages/ui/src/styles/elements.css | 31 +++++--- packages/ui/src/styles/tokens.css | 75 ++++++++++++++++++- .../site/src/components/blog/FactsStrip.astro | 2 +- .../site/src/components/blog/LeadPost.astro | 36 +++++---- .../site/src/components/blog/PostLayout.astro | 4 +- .../site/src/components/blog/PostList.astro | 4 +- .../site/src/components/blog/PostRow.astro | 2 +- .../site/src/components/blog/PostThumb.astro | 8 +- .../src/components/blog/StarHeading.astro | 4 +- .../site/src/components/home/BlogStrip.astro | 4 +- .../site/src/components/home/DoorLink.astro | 2 +- .../site/src/components/home/Portrait.astro | 4 +- .../site/src/components/home/StatusRow.astro | 8 +- .../components/library/Constellation.astro | 6 +- .../src/components/library/ListHeading.astro | 4 +- .../site/src/components/store/LineCard.astro | 4 +- .../site/src/components/store/OrderForm.astro | 6 +- .../site/src/components/store/Swatches.astro | 4 +- .../site/src/components/store/Terms.astro | 2 +- .../src/components/work/FeaturedStudy.astro | 4 +- .../src/components/world/WorldSection.astro | 4 +- services/site/src/pages/404.astro | 11 ++- services/site/src/pages/about.astro | 9 ++- .../site/src/pages/blog/topic/[topic].astro | 2 +- services/site/src/pages/index.astro | 20 ++--- services/site/src/pages/inquiries/index.astro | 23 ++++-- services/site/src/pages/inquiries/sent.astro | 13 +++- services/site/src/pages/library/index.astro | 2 +- services/site/src/pages/library/shelf.astro | 2 +- services/site/src/pages/now.astro | 5 +- services/site/src/pages/resume.astro | 16 ++-- services/site/src/pages/store/[slug].astro | 4 +- services/site/src/pages/store/index.astro | 4 +- services/site/src/pages/store/order.astro | 2 +- .../site/src/pages/store/order/sent.astro | 2 +- services/site/src/pages/work/index.astro | 4 +- services/site/src/pages/workshop/[slug].astro | 2 +- services/site/src/pages/workshop/index.astro | 4 +- 101 files changed, 541 insertions(+), 161 deletions(-) create mode 100644 packages/ui/scripts/light-motifs.mjs create mode 100644 packages/ui/src/assets/motifs/foil-light/astrolabe.svg create mode 100644 packages/ui/src/assets/motifs/foil-light/craft-seal-dice.svg create mode 100644 packages/ui/src/assets/motifs/foil-light/craft-seal-leather.svg create mode 100644 packages/ui/src/assets/motifs/foil-light/craft-seal-print.svg create mode 100644 packages/ui/src/assets/motifs/foil-light/filament-transmutation.svg create mode 100644 packages/ui/src/assets/motifs/foil-light/kepler-nest-seal.svg create mode 100644 packages/ui/src/assets/motifs/foil-light/layered-seal.svg create mode 100644 packages/ui/src/assets/motifs/foil-light/squared-circle-seal.svg create mode 100644 packages/ui/src/assets/motifs/foil-light/transmutation-seal-star-paths.svg create mode 100644 packages/ui/src/assets/motifs/foil-light/transmutation-seal.svg create mode 100644 packages/ui/src/assets/motifs/foil-light/tria-prima-array-seal.svg create mode 100644 packages/ui/src/assets/motifs/foil-light/zodiac-seal.svg create mode 100644 packages/ui/src/assets/motifs/foil/astrolabe.svg create mode 100644 packages/ui/src/assets/motifs/foil/craft-seal-dice.svg create mode 100644 packages/ui/src/assets/motifs/foil/craft-seal-leather.svg create mode 100644 packages/ui/src/assets/motifs/foil/craft-seal-print.svg create mode 100644 packages/ui/src/assets/motifs/foil/filament-transmutation.svg create mode 100644 packages/ui/src/assets/motifs/foil/kepler-nest-seal.svg create mode 100644 packages/ui/src/assets/motifs/foil/layered-seal.svg create mode 100644 packages/ui/src/assets/motifs/foil/squared-circle-seal.svg create mode 100644 packages/ui/src/assets/motifs/foil/transmutation-seal-star-paths.svg create mode 100644 packages/ui/src/assets/motifs/foil/transmutation-seal.svg create mode 100644 packages/ui/src/assets/motifs/foil/tria-prima-array-seal.svg create mode 100644 packages/ui/src/assets/motifs/foil/zodiac-seal.svg create mode 100644 packages/ui/src/assets/motifs/light/astrolabe.svg create mode 100644 packages/ui/src/assets/motifs/light/craft-seal-dice.svg create mode 100644 packages/ui/src/assets/motifs/light/craft-seal-leather.svg create mode 100644 packages/ui/src/assets/motifs/light/craft-seal-print.svg create mode 100644 packages/ui/src/assets/motifs/light/filament-banner.svg create mode 100644 packages/ui/src/assets/motifs/light/filament-transmutation.svg create mode 100644 packages/ui/src/assets/motifs/light/kepler-nest-seal.svg create mode 100644 packages/ui/src/assets/motifs/light/layered-seal.svg create mode 100644 packages/ui/src/assets/motifs/light/mini-astrolabe.svg create mode 100644 packages/ui/src/assets/motifs/light/mini-layered.svg create mode 100644 packages/ui/src/assets/motifs/light/mini-tome.svg create mode 100644 packages/ui/src/assets/motifs/light/mini-transmutation.svg create mode 100644 packages/ui/src/assets/motifs/light/scorpius.svg create mode 100644 packages/ui/src/assets/motifs/light/seven-metals-dipper.svg create mode 100644 packages/ui/src/assets/motifs/light/squared-circle-seal.svg create mode 100644 packages/ui/src/assets/motifs/light/transmutation-seal-star-paths.svg create mode 100644 packages/ui/src/assets/motifs/light/transmutation-seal.svg create mode 100644 packages/ui/src/assets/motifs/light/tria-prima-array-seal.svg create mode 100644 packages/ui/src/assets/motifs/light/zodiac-seal.svg create mode 100644 packages/ui/src/components/Motif.astro diff --git a/docs/components.md b/docs/components.md index a4cecb6..c84829b 100644 --- a/docs/components.md +++ b/docs/components.md @@ -76,4 +76,6 @@ import PageShell from "@gk/ui/components/PageShell.astro"; ``` -The site is dark only for now; light mode comes in a later phase. +The site is dark by default and turns light when the device is set to light (`prefers-color-scheme`). Colors come from the tokens in `tokens.css`, which has the light values too, so a component that uses `var(--gk-…)` needs nothing more. For a translucent color use a channel token, as in `rgba(var(--gk-gold-rgb), 0.35)`, never a hardcoded rgba. In SVG markup use `style="fill:var(--gk-gold)"`. + +Motif images come in a light recolor and, for seals, a gold foil version for each mode. Show a motif with `Motif` (or `Seal`), which picks the right file for the device; a plain `` stays dark. Pass `foil` only to a seal standing alone at 120px or more and half opacity or more. After changing a motif SVG, run `node packages/ui/scripts/light-motifs.mjs` to rewrite the `light/`, `foil/` and `foil-light/` versions. diff --git a/packages/ui/scripts/light-motifs.mjs b/packages/ui/scripts/light-motifs.mjs new file mode 100644 index 0000000..938daf6 --- /dev/null +++ b/packages/ui/scripts/light-motifs.mjs @@ -0,0 +1,65 @@ +/** + * Writes the light and foil versions of the motif SVGs from the dark originals + * in src/assets/motifs, using the inks Greg picked on the light motif board + * (2026-10-18). Run after a motif changes: node packages/ui/scripts/light-motifs.mjs + * + * light/ deep gold line: the dark inks swapped for Starlight-page inks, glow removed + * foil/ the dark seal with its gold as foil, glow kept + * foil-light/ the light seal with its gold as foil + */ +import { mkdirSync, readdirSync, readFileSync, writeFileSync } from "node:fs"; +import { join } from "node:path"; + +const dir = join(import.meta.dirname, "../src/assets/motifs"); + +// Dark colors as they appear in the motif files, and their light inks. +const LIGHT = { + "#C9A24A": "#8A6516", + "#14A39A": "#0F8C84", + "#0E1522": "#F4F2ED", + "#101A2A": "#ECE8DF", + "#F4F2ED": "#131C2B", + "#F2D58A": "#A57C1F", + "#F6E7B8": "#8A6516", + "#2BC2B7": "#0F8C84", + "#9A70F5": "#6A2FE0", + "#FFF": "#F4F2ED", +}; +const GOLD = ["#C9A24A", "#F2D58A"]; + +const stops = (s) => s.map(([o, c]) => ``).join(""); +const DARK_FOIL = stops([[0, "#8A6516"], [0.3, "#C9A24A"], [0.5, "#F6E7B8"], [0.68, "#C9A24A"], [1, "#8A6516"]]); +const LIGHT_FOIL = stops([[0, "#6F5112"], [0.35, "#A57C1F"], [0.5, "#C9A24A"], [0.65, "#8A6516"], [1, "#6F5112"]]); + +const hex = (c) => new RegExp(c.replace("#", "#") + "(?![0-9A-Fa-f])", "gi"); + +function recolor(svg, map) { + // One pass, so a swapped color is never swapped again. + const keys = Object.keys(map).sort((a, b) => b.length - a.length); + const any = new RegExp(`(${keys.join("|")})(?![0-9A-Fa-f])`, "gi"); + return svg.replace(any, (m) => map[keys.find((k) => k.toLowerCase() === m.toLowerCase())]); +} + +function foil(svg, gradStops, golds) { + const [, , , w, h] = svg.match(/viewBox="([-\d.]+) ([-\d.]+) ([\d.]+) ([\d.]+)"/) ?? [0, 0, 0, 400, 400]; + const grad = `${gradStops}`; + for (const g of golds) svg = svg.replace(hex(g), "url(#gkfoil)"); + return svg.includes("") ? svg.replace("", `${grad}`) : svg.replace(/(]*>)/, `$1${grad}`); +} + +// Glow filters are for the night sky only. +const unglow = (svg) => svg.replace(/\sfilter="url\(#[^)]*\)"/g, ""); + +for (const sub of ["light", "foil", "foil-light"]) mkdirSync(join(dir, sub), { recursive: true }); +const files = readdirSync(dir).filter((f) => f.endsWith(".svg")); +for (const f of files) { + const dark = readFileSync(join(dir, f), "utf8"); + const light = recolor(unglow(dark), LIGHT); + writeFileSync(join(dir, "light", f), light); + // Only the seals stand alone large enough for foil. + if (/seal|astrolabe|transmutation/.test(f) && !f.startsWith("mini-") && !f.startsWith("filament-banner")) { + writeFileSync(join(dir, "foil", f), foil(dark, DARK_FOIL, ["#C9A24A"])); + writeFileSync(join(dir, "foil-light", f), foil(light, LIGHT_FOIL, ["#8A6516", "#A57C1F"])); + } +} +console.log(`${files.length} motifs written`); diff --git a/packages/ui/src/assets/motifs/foil-light/astrolabe.svg b/packages/ui/src/assets/motifs/foil-light/astrolabe.svg new file mode 100644 index 0000000..7aef3e3 --- /dev/null +++ b/packages/ui/src/assets/motifs/foil-light/astrolabe.svg @@ -0,0 +1,2 @@ +0306090120150180210240270300330♈︎♉︎♊︎♋︎♌︎♍︎♎︎♏︎♐︎♑︎♒︎♓︎ + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/foil-light/craft-seal-dice.svg b/packages/ui/src/assets/motifs/foil-light/craft-seal-dice.svg new file mode 100644 index 0000000..989c6e8 --- /dev/null +++ b/packages/ui/src/assets/motifs/foil-light/craft-seal-dice.svg @@ -0,0 +1,2 @@ +DICE ✦ AQUA ✦ RESIN ✦ PATIUN ✦ DICE ✦ AQUA ✦ RESIN ✦ PATIUN ✦ 20🜄 + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/foil-light/craft-seal-leather.svg b/packages/ui/src/assets/motifs/foil-light/craft-seal-leather.svg new file mode 100644 index 0000000..680043e --- /dev/null +++ b/packages/ui/src/assets/motifs/foil-light/craft-seal-leather.svg @@ -0,0 +1,2 @@ +LEATHER ✦ TERRA ✦ HIDE ✦ PATIUN ✦ LEATHER ✦ TERRA ✦ HIDE ✦ PATIUN ✦ 🜃 + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/foil-light/craft-seal-print.svg b/packages/ui/src/assets/motifs/foil-light/craft-seal-print.svg new file mode 100644 index 0000000..b4218ea --- /dev/null +++ b/packages/ui/src/assets/motifs/foil-light/craft-seal-print.svg @@ -0,0 +1,2 @@ +PRINT ✦ IGNIS ✦ LAYER ✦ PATIUN ✦ PRINT ✦ IGNIS ✦ LAYER ✦ PATIUN ✦ 🜂 + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/foil-light/filament-transmutation.svg b/packages/ui/src/assets/motifs/foil-light/filament-transmutation.svg new file mode 100644 index 0000000..0a3fbbd --- /dev/null +++ b/packages/ui/src/assets/motifs/foil-light/filament-transmutation.svg @@ -0,0 +1,2 @@ +SOLVE ET COAGULA ✦ DICE · LEATHER · PRINT ✦ PATIUN ✦ SOLVE ET COAGULA ✦ DICE · LEATHER · PRINT ✦ PATIUN ✦ ☉☽☿♀♂♃♄ + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/foil-light/kepler-nest-seal.svg b/packages/ui/src/assets/motifs/foil-light/kepler-nest-seal.svg new file mode 100644 index 0000000..469fb19 --- /dev/null +++ b/packages/ui/src/assets/motifs/foil-light/kepler-nest-seal.svg @@ -0,0 +1,2 @@ +HARMONICES MUNDI ✦ PATIUN ✦ DICE · LEATHER · PRINT ✦ HARMONICES MUNDI ✦ PATIUN ✦ DICE · LEATHER · PRINT ✦ + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/foil-light/layered-seal.svg b/packages/ui/src/assets/motifs/foil-light/layered-seal.svg new file mode 100644 index 0000000..e6881a8 --- /dev/null +++ b/packages/ui/src/assets/motifs/foil-light/layered-seal.svg @@ -0,0 +1,2 @@ +♈︎♉︎♊︎♋︎♌︎♍︎♎︎♏︎♐︎♑︎♒︎♓︎PATIUN ✦ PATIUN ✦ PATIUN ✦ PATIUN ✦ PATIUN ✦ PATIUN ✦ 🜂🜄🜁🜃 + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/foil-light/squared-circle-seal.svg b/packages/ui/src/assets/motifs/foil-light/squared-circle-seal.svg new file mode 100644 index 0000000..4ca0f4d --- /dev/null +++ b/packages/ui/src/assets/motifs/foil-light/squared-circle-seal.svg @@ -0,0 +1,2 @@ +QUADRATURA CIRCULI ✦ SOLVE ET COAGULA ✦ PATIUN ✦ QUADRATURA CIRCULI ✦ SOLVE ET COAGULA ✦ PATIUN ✦ 🜂🜁🜄🜃🜍☿🜔 + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/foil-light/transmutation-seal-star-paths.svg b/packages/ui/src/assets/motifs/foil-light/transmutation-seal-star-paths.svg new file mode 100644 index 0000000..ca2f1c9 --- /dev/null +++ b/packages/ui/src/assets/motifs/foil-light/transmutation-seal-star-paths.svg @@ -0,0 +1,2 @@ +SOLVE ET COAGULA ✦ DICE · LEATHER · PRINT ✦ PATIUN ✦ SOLVE ET COAGULA ✦ DICE · LEATHER · PRINT ✦ PATIUN ✦ ☉☽☿♀♂♃♄ + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/foil-light/transmutation-seal.svg b/packages/ui/src/assets/motifs/foil-light/transmutation-seal.svg new file mode 100644 index 0000000..9b6638e --- /dev/null +++ b/packages/ui/src/assets/motifs/foil-light/transmutation-seal.svg @@ -0,0 +1,2 @@ +SOLVE ET COAGULA ✦ DICE · LEATHER · PRINT ✦ PATIUN ✦ SOLVE ET COAGULA ✦ DICE · LEATHER · PRINT ✦ PATIUN ✦ ☉☽☿♀♂♃♄ + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/foil-light/tria-prima-array-seal.svg b/packages/ui/src/assets/motifs/foil-light/tria-prima-array-seal.svg new file mode 100644 index 0000000..d18aa36 --- /dev/null +++ b/packages/ui/src/assets/motifs/foil-light/tria-prima-array-seal.svg @@ -0,0 +1,2 @@ +SAL ✦ SULPHUR ✦ MERCURIUS ✦ PATIUN ✦ SAL ✦ SULPHUR ✦ MERCURIUS ✦ PATIUN ✦ 🜍☿🜔 + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/foil-light/zodiac-seal.svg b/packages/ui/src/assets/motifs/foil-light/zodiac-seal.svg new file mode 100644 index 0000000..961d5d5 --- /dev/null +++ b/packages/ui/src/assets/motifs/foil-light/zodiac-seal.svg @@ -0,0 +1,2 @@ +QUOD EST SUPERIUS EST SICUT QUOD INFERIUS ✦ PATIUN ✦ QUOD EST SUPERIUS EST SICUT QUOD INFERIUS ✦ PATIUN ✦ ♈︎♉︎♊︎♋︎♌︎♍︎♎︎♏︎♐︎♑︎♒︎♓︎☉☽☿♀♂♃♄ + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/foil/astrolabe.svg b/packages/ui/src/assets/motifs/foil/astrolabe.svg new file mode 100644 index 0000000..7cb632e --- /dev/null +++ b/packages/ui/src/assets/motifs/foil/astrolabe.svg @@ -0,0 +1,2 @@ +0306090120150180210240270300330♈︎♉︎♊︎♋︎♌︎♍︎♎︎♏︎♐︎♑︎♒︎♓︎ + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/foil/craft-seal-dice.svg b/packages/ui/src/assets/motifs/foil/craft-seal-dice.svg new file mode 100644 index 0000000..acd91ec --- /dev/null +++ b/packages/ui/src/assets/motifs/foil/craft-seal-dice.svg @@ -0,0 +1,2 @@ +DICE ✦ AQUA ✦ RESIN ✦ PATIUN ✦ DICE ✦ AQUA ✦ RESIN ✦ PATIUN ✦ 20🜄 + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/foil/craft-seal-leather.svg b/packages/ui/src/assets/motifs/foil/craft-seal-leather.svg new file mode 100644 index 0000000..6644ecd --- /dev/null +++ b/packages/ui/src/assets/motifs/foil/craft-seal-leather.svg @@ -0,0 +1,2 @@ +LEATHER ✦ TERRA ✦ HIDE ✦ PATIUN ✦ LEATHER ✦ TERRA ✦ HIDE ✦ PATIUN ✦ 🜃 + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/foil/craft-seal-print.svg b/packages/ui/src/assets/motifs/foil/craft-seal-print.svg new file mode 100644 index 0000000..b9857c2 --- /dev/null +++ b/packages/ui/src/assets/motifs/foil/craft-seal-print.svg @@ -0,0 +1,2 @@ +PRINT ✦ IGNIS ✦ LAYER ✦ PATIUN ✦ PRINT ✦ IGNIS ✦ LAYER ✦ PATIUN ✦ 🜂 + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/foil/filament-transmutation.svg b/packages/ui/src/assets/motifs/foil/filament-transmutation.svg new file mode 100644 index 0000000..6fa5e22 --- /dev/null +++ b/packages/ui/src/assets/motifs/foil/filament-transmutation.svg @@ -0,0 +1,2 @@ +SOLVE ET COAGULA ✦ DICE · LEATHER · PRINT ✦ PATIUN ✦ SOLVE ET COAGULA ✦ DICE · LEATHER · PRINT ✦ PATIUN ✦ ☉☽☿♀♂♃♄ + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/foil/kepler-nest-seal.svg b/packages/ui/src/assets/motifs/foil/kepler-nest-seal.svg new file mode 100644 index 0000000..49d324a --- /dev/null +++ b/packages/ui/src/assets/motifs/foil/kepler-nest-seal.svg @@ -0,0 +1,2 @@ +HARMONICES MUNDI ✦ PATIUN ✦ DICE · LEATHER · PRINT ✦ HARMONICES MUNDI ✦ PATIUN ✦ DICE · LEATHER · PRINT ✦ + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/foil/layered-seal.svg b/packages/ui/src/assets/motifs/foil/layered-seal.svg new file mode 100644 index 0000000..fee09b5 --- /dev/null +++ b/packages/ui/src/assets/motifs/foil/layered-seal.svg @@ -0,0 +1,2 @@ +♈︎♉︎♊︎♋︎♌︎♍︎♎︎♏︎♐︎♑︎♒︎♓︎PATIUN ✦ PATIUN ✦ PATIUN ✦ PATIUN ✦ PATIUN ✦ PATIUN ✦ 🜂🜄🜁🜃 + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/foil/squared-circle-seal.svg b/packages/ui/src/assets/motifs/foil/squared-circle-seal.svg new file mode 100644 index 0000000..43cd67a --- /dev/null +++ b/packages/ui/src/assets/motifs/foil/squared-circle-seal.svg @@ -0,0 +1,2 @@ +QUADRATURA CIRCULI ✦ SOLVE ET COAGULA ✦ PATIUN ✦ QUADRATURA CIRCULI ✦ SOLVE ET COAGULA ✦ PATIUN ✦ 🜂🜁🜄🜃🜍☿🜔 + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/foil/transmutation-seal-star-paths.svg b/packages/ui/src/assets/motifs/foil/transmutation-seal-star-paths.svg new file mode 100644 index 0000000..c7593b5 --- /dev/null +++ b/packages/ui/src/assets/motifs/foil/transmutation-seal-star-paths.svg @@ -0,0 +1,2 @@ +SOLVE ET COAGULA ✦ DICE · LEATHER · PRINT ✦ PATIUN ✦ SOLVE ET COAGULA ✦ DICE · LEATHER · PRINT ✦ PATIUN ✦ ☉☽☿♀♂♃♄ + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/foil/transmutation-seal.svg b/packages/ui/src/assets/motifs/foil/transmutation-seal.svg new file mode 100644 index 0000000..05136ff --- /dev/null +++ b/packages/ui/src/assets/motifs/foil/transmutation-seal.svg @@ -0,0 +1,2 @@ +SOLVE ET COAGULA ✦ DICE · LEATHER · PRINT ✦ PATIUN ✦ SOLVE ET COAGULA ✦ DICE · LEATHER · PRINT ✦ PATIUN ✦ ☉☽☿♀♂♃♄ + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/foil/tria-prima-array-seal.svg b/packages/ui/src/assets/motifs/foil/tria-prima-array-seal.svg new file mode 100644 index 0000000..77e7d25 --- /dev/null +++ b/packages/ui/src/assets/motifs/foil/tria-prima-array-seal.svg @@ -0,0 +1,2 @@ +SAL ✦ SULPHUR ✦ MERCURIUS ✦ PATIUN ✦ SAL ✦ SULPHUR ✦ MERCURIUS ✦ PATIUN ✦ 🜍☿🜔 + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/foil/zodiac-seal.svg b/packages/ui/src/assets/motifs/foil/zodiac-seal.svg new file mode 100644 index 0000000..b31ba31 --- /dev/null +++ b/packages/ui/src/assets/motifs/foil/zodiac-seal.svg @@ -0,0 +1,2 @@ +QUOD EST SUPERIUS EST SICUT QUOD INFERIUS ✦ PATIUN ✦ QUOD EST SUPERIUS EST SICUT QUOD INFERIUS ✦ PATIUN ✦ ♈︎♉︎♊︎♋︎♌︎♍︎♎︎♏︎♐︎♑︎♒︎♓︎☉☽☿♀♂♃♄ + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/light/astrolabe.svg b/packages/ui/src/assets/motifs/light/astrolabe.svg new file mode 100644 index 0000000..68a378b --- /dev/null +++ b/packages/ui/src/assets/motifs/light/astrolabe.svg @@ -0,0 +1,2 @@ +0306090120150180210240270300330♈︎♉︎♊︎♋︎♌︎♍︎♎︎♏︎♐︎♑︎♒︎♓︎ + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/light/craft-seal-dice.svg b/packages/ui/src/assets/motifs/light/craft-seal-dice.svg new file mode 100644 index 0000000..1843b2a --- /dev/null +++ b/packages/ui/src/assets/motifs/light/craft-seal-dice.svg @@ -0,0 +1,2 @@ +DICE ✦ AQUA ✦ RESIN ✦ PATIUN ✦ DICE ✦ AQUA ✦ RESIN ✦ PATIUN ✦ 20🜄 + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/light/craft-seal-leather.svg b/packages/ui/src/assets/motifs/light/craft-seal-leather.svg new file mode 100644 index 0000000..725bbae --- /dev/null +++ b/packages/ui/src/assets/motifs/light/craft-seal-leather.svg @@ -0,0 +1,2 @@ +LEATHER ✦ TERRA ✦ HIDE ✦ PATIUN ✦ LEATHER ✦ TERRA ✦ HIDE ✦ PATIUN ✦ 🜃 + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/light/craft-seal-print.svg b/packages/ui/src/assets/motifs/light/craft-seal-print.svg new file mode 100644 index 0000000..8ea3036 --- /dev/null +++ b/packages/ui/src/assets/motifs/light/craft-seal-print.svg @@ -0,0 +1,2 @@ +PRINT ✦ IGNIS ✦ LAYER ✦ PATIUN ✦ PRINT ✦ IGNIS ✦ LAYER ✦ PATIUN ✦ 🜂 + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/light/filament-banner.svg b/packages/ui/src/assets/motifs/light/filament-banner.svg new file mode 100644 index 0000000..3a48687 --- /dev/null +++ b/packages/ui/src/assets/motifs/light/filament-banner.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/light/filament-transmutation.svg b/packages/ui/src/assets/motifs/light/filament-transmutation.svg new file mode 100644 index 0000000..1d75332 --- /dev/null +++ b/packages/ui/src/assets/motifs/light/filament-transmutation.svg @@ -0,0 +1,2 @@ +SOLVE ET COAGULA ✦ DICE · LEATHER · PRINT ✦ PATIUN ✦ SOLVE ET COAGULA ✦ DICE · LEATHER · PRINT ✦ PATIUN ✦ ☉☽☿♀♂♃♄ + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/light/kepler-nest-seal.svg b/packages/ui/src/assets/motifs/light/kepler-nest-seal.svg new file mode 100644 index 0000000..542eb89 --- /dev/null +++ b/packages/ui/src/assets/motifs/light/kepler-nest-seal.svg @@ -0,0 +1,2 @@ +HARMONICES MUNDI ✦ PATIUN ✦ DICE · LEATHER · PRINT ✦ HARMONICES MUNDI ✦ PATIUN ✦ DICE · LEATHER · PRINT ✦ + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/light/layered-seal.svg b/packages/ui/src/assets/motifs/light/layered-seal.svg new file mode 100644 index 0000000..895a340 --- /dev/null +++ b/packages/ui/src/assets/motifs/light/layered-seal.svg @@ -0,0 +1,2 @@ +♈︎♉︎♊︎♋︎♌︎♍︎♎︎♏︎♐︎♑︎♒︎♓︎PATIUN ✦ PATIUN ✦ PATIUN ✦ PATIUN ✦ PATIUN ✦ PATIUN ✦ 🜂🜄🜁🜃 + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/light/mini-astrolabe.svg b/packages/ui/src/assets/motifs/light/mini-astrolabe.svg new file mode 100644 index 0000000..86ff71d --- /dev/null +++ b/packages/ui/src/assets/motifs/light/mini-astrolabe.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/light/mini-layered.svg b/packages/ui/src/assets/motifs/light/mini-layered.svg new file mode 100644 index 0000000..adff23a --- /dev/null +++ b/packages/ui/src/assets/motifs/light/mini-layered.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/light/mini-tome.svg b/packages/ui/src/assets/motifs/light/mini-tome.svg new file mode 100644 index 0000000..3b67962 --- /dev/null +++ b/packages/ui/src/assets/motifs/light/mini-tome.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/light/mini-transmutation.svg b/packages/ui/src/assets/motifs/light/mini-transmutation.svg new file mode 100644 index 0000000..58f1085 --- /dev/null +++ b/packages/ui/src/assets/motifs/light/mini-transmutation.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/light/scorpius.svg b/packages/ui/src/assets/motifs/light/scorpius.svg new file mode 100644 index 0000000..8a8f0f7 --- /dev/null +++ b/packages/ui/src/assets/motifs/light/scorpius.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/light/seven-metals-dipper.svg b/packages/ui/src/assets/motifs/light/seven-metals-dipper.svg new file mode 100644 index 0000000..5bb7b81 --- /dev/null +++ b/packages/ui/src/assets/motifs/light/seven-metals-dipper.svg @@ -0,0 +1,2 @@ +♄♃♂♀☿☽☉ +POLARIS · PLATINUM \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/light/squared-circle-seal.svg b/packages/ui/src/assets/motifs/light/squared-circle-seal.svg new file mode 100644 index 0000000..32c5e28 --- /dev/null +++ b/packages/ui/src/assets/motifs/light/squared-circle-seal.svg @@ -0,0 +1,2 @@ +QUADRATURA CIRCULI ✦ SOLVE ET COAGULA ✦ PATIUN ✦ QUADRATURA CIRCULI ✦ SOLVE ET COAGULA ✦ PATIUN ✦ 🜂🜁🜄🜃🜍☿🜔 + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/light/transmutation-seal-star-paths.svg b/packages/ui/src/assets/motifs/light/transmutation-seal-star-paths.svg new file mode 100644 index 0000000..ecb853b --- /dev/null +++ b/packages/ui/src/assets/motifs/light/transmutation-seal-star-paths.svg @@ -0,0 +1,2 @@ +SOLVE ET COAGULA ✦ DICE · LEATHER · PRINT ✦ PATIUN ✦ SOLVE ET COAGULA ✦ DICE · LEATHER · PRINT ✦ PATIUN ✦ ☉☽☿♀♂♃♄ + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/light/transmutation-seal.svg b/packages/ui/src/assets/motifs/light/transmutation-seal.svg new file mode 100644 index 0000000..02f735c --- /dev/null +++ b/packages/ui/src/assets/motifs/light/transmutation-seal.svg @@ -0,0 +1,2 @@ +SOLVE ET COAGULA ✦ DICE · LEATHER · PRINT ✦ PATIUN ✦ SOLVE ET COAGULA ✦ DICE · LEATHER · PRINT ✦ PATIUN ✦ ☉☽☿♀♂♃♄ + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/light/tria-prima-array-seal.svg b/packages/ui/src/assets/motifs/light/tria-prima-array-seal.svg new file mode 100644 index 0000000..eb170cc --- /dev/null +++ b/packages/ui/src/assets/motifs/light/tria-prima-array-seal.svg @@ -0,0 +1,2 @@ +SAL ✦ SULPHUR ✦ MERCURIUS ✦ PATIUN ✦ SAL ✦ SULPHUR ✦ MERCURIUS ✦ PATIUN ✦ 🜍☿🜔 + \ No newline at end of file diff --git a/packages/ui/src/assets/motifs/light/zodiac-seal.svg b/packages/ui/src/assets/motifs/light/zodiac-seal.svg new file mode 100644 index 0000000..d11b46c --- /dev/null +++ b/packages/ui/src/assets/motifs/light/zodiac-seal.svg @@ -0,0 +1,2 @@ +QUOD EST SUPERIUS EST SICUT QUOD INFERIUS ✦ PATIUN ✦ QUOD EST SUPERIUS EST SICUT QUOD INFERIUS ✦ PATIUN ✦ ♈︎♉︎♊︎♋︎♌︎♍︎♎︎♏︎♐︎♑︎♒︎♓︎☉☽☿♀♂♃♄ + \ No newline at end of file diff --git a/packages/ui/src/components/Divider.astro b/packages/ui/src/components/Divider.astro index bfb82ac..edd5fb3 100644 --- a/packages/ui/src/components/Divider.astro +++ b/packages/ui/src/components/Divider.astro @@ -18,17 +18,17 @@ const left = starPath({ x1: 540, x2: 76, y, steps: 8, seed: s, openEnds: false, const right = starPath({ x1: 660, x2: 1124, y, steps: 8, seed: s + 1, openEnds: false, dot: 2, star: 4.5 }); --- diff --git a/packages/ui/src/components/GiltCorners.astro b/packages/ui/src/components/GiltCorners.astro index b6693ed..4a6eb71 100644 --- a/packages/ui/src/components/GiltCorners.astro +++ b/packages/ui/src/components/GiltCorners.astro @@ -18,9 +18,9 @@ const corners = [ { corners.map((c) => ( )) } diff --git a/packages/ui/src/components/HeroHorizon.astro b/packages/ui/src/components/HeroHorizon.astro index 47f8895..de3973c 100644 --- a/packages/ui/src/components/HeroHorizon.astro +++ b/packages/ui/src/components/HeroHorizon.astro @@ -20,6 +20,6 @@ import Star from "./Star.astro"; .line { flex: 1; height: 1px; - background: linear-gradient(90deg, transparent, rgba(201, 162, 74, 0.7) 30%, rgba(201, 162, 74, 0.7) 70%, transparent); + background: linear-gradient(90deg, transparent, rgba(var(--gk-gold-rgb), 0.7) 30%, rgba(var(--gk-gold-rgb), 0.7) 70%, transparent); } diff --git a/packages/ui/src/components/Motif.astro b/packages/ui/src/components/Motif.astro new file mode 100644 index 0000000..470933c --- /dev/null +++ b/packages/ui/src/components/Motif.astro @@ -0,0 +1,16 @@ +--- +/** + * A motif image that follows the device's light or dark setting: the dark + * original, or its light recolor. Pass `foil` for a large standalone seal. + */ +import type { HTMLAttributes } from "astro/types"; +import { motifSources } from "./seals.ts"; + +interface Props extends Omit, "src"> { + src: string; + foil?: boolean; +} +const { src, foil, ...rest } = Astro.props; +const v = motifSources(src, { foil }); +--- + diff --git a/packages/ui/src/components/PageShell.astro b/packages/ui/src/components/PageShell.astro index 7d71439..692ccb4 100644 --- a/packages/ui/src/components/PageShell.astro +++ b/packages/ui/src/components/PageShell.astro @@ -35,8 +35,9 @@ const fullTitle = title === "Greg Kilmer" ? title : `${title} · Greg Kilmer`; - - + + + @@ -64,10 +65,12 @@ const fullTitle = title === "Greg Kilmer" ? title : `${title} · Greg Kilmer`; position: relative; min-height: 100vh; overflow-x: clip; - /* The page's nebula: violet from the top right, teal from the bottom left. */ + /* The page's nebula: violet from the top right, teal from the bottom left. + In light mode it is the dawn wash over faint star chart lines. */ background: - radial-gradient(ellipse at 100% 0%, rgba(106, 47, 224, 0.28), transparent 50%), - radial-gradient(ellipse at 0% 100%, rgba(20, 163, 154, 0.2), transparent 55%), + radial-gradient(ellipse at 100% 0%, rgba(var(--gk-violet-rgb), calc(0.28 * var(--gk-wash))), transparent 50%), + radial-gradient(ellipse at 0% 100%, rgba(var(--gk-teal-deep-rgb), calc(0.2 * var(--gk-wash))), transparent 55%), + var(--gk-chart), var(--gk-sky); } .gk-main { diff --git a/packages/ui/src/components/Seal.astro b/packages/ui/src/components/Seal.astro index 45b4899..1cdfd84 100644 --- a/packages/ui/src/components/Seal.astro +++ b/packages/ui/src/components/Seal.astro @@ -1,12 +1,15 @@ --- /** One seal as an image, for seal marks, medallions and placeholder art. */ +import Motif from "./Motif.astro"; import { seals, type SealName } from "./seals.ts"; interface Props { name: SealName; size?: number; class?: string; + /** Gold foil, for a seal standing alone at 120px or more. */ + foil?: boolean; } -const { name, size = 40, class: className } = Astro.props; +const { name, size = 40, class: className, foil } = Astro.props; --- - +