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; --- - +