From 1161db28fd7505870b3dbd641e8feb4c3ebec4dd Mon Sep 17 00:00:00 2001 From: Emile Clark-Boman Date: Tue, 3 Feb 2026 13:05:53 +1000 Subject: [PATCH] design modular theming system --- www/css/themes/README.md | 3 +++ www/css/themes/core.css | 16 +++++++++++++ www/css/themes/maps/rose-pine.css | 26 ++++++++++++++++++++++ www/css/themes/palettes/rose-pine-dawn.css | 17 ++++++++++++++ www/css/themes/palettes/rose-pine-moon.css | 17 ++++++++++++++ www/css/themes/palettes/rose-pine.css | 17 ++++++++++++++ www/css/themes/themes/rose-pine-dawn.css | 6 +++++ www/css/themes/themes/rose-pine-moon.css | 6 +++++ www/css/themes/themes/rose-pine.css | 6 +++++ 9 files changed, 114 insertions(+) create mode 100644 www/css/themes/README.md create mode 100644 www/css/themes/core.css create mode 100644 www/css/themes/maps/rose-pine.css create mode 100644 www/css/themes/palettes/rose-pine-dawn.css create mode 100644 www/css/themes/palettes/rose-pine-moon.css create mode 100644 www/css/themes/palettes/rose-pine.css create mode 100644 www/css/themes/themes/rose-pine-dawn.css create mode 100644 www/css/themes/themes/rose-pine-moon.css create mode 100644 www/css/themes/themes/rose-pine.css diff --git a/www/css/themes/README.md b/www/css/themes/README.md new file mode 100644 index 0000000..d554ba9 --- /dev/null +++ b/www/css/themes/README.md @@ -0,0 +1,3 @@ +We're exploiting the fact that css variables are computed lazily. +That way we only have to write one file in `./maps/` for all the +theme variants we need. **Way** less boilerplate. diff --git a/www/css/themes/core.css b/www/css/themes/core.css new file mode 100644 index 0000000..f94f237 --- /dev/null +++ b/www/css/themes/core.css @@ -0,0 +1,16 @@ +.theme-tty-prompt { + color: var(--theme-tty-prompt); +} + +.theme-tty-command { + color: var(--theme-tty-command); +} + +.theme-tty-warning { + color: var(--theme-tty-warning); +} + +.theme-tty-error { + color: var(--theme-tty-error); +} + diff --git a/www/css/themes/maps/rose-pine.css b/www/css/themes/maps/rose-pine.css new file mode 100644 index 0000000..ba91286 --- /dev/null +++ b/www/css/themes/maps/rose-pine.css @@ -0,0 +1,26 @@ +/* +Variables: + --palette-rose-pine-base + --palette-rose-pine-surface + --palette-rose-pine-overlay + --palette-rose-pine-muted + --palette-rose-pine-subtle + --palette-rose-pine-text + --palette-rose-pine-love + --palette-rose-pine-gold + --palette-rose-pine-rose + --palette-rose-pine-pine + --palette-rose-pine-foam + --palette-rose-pine-iris + --palette-rose-pine-highlight-low + --palette-rose-pine-highlight-med + --palette-rose-pine-highlight-high +*/ + +:root { + --theme-tty-prompt: var(--color-rose-pine-foam); + --theme-tty-command: var(--color-rose-pine-iris); + --theme-tty-warning: var(--color-rose-pine-gold); + --theme-tty-errror: var(--color-rose-pine-love); + /* --theme-tty-: var(--color-rose-pine-); */ +} diff --git a/www/css/themes/palettes/rose-pine-dawn.css b/www/css/themes/palettes/rose-pine-dawn.css new file mode 100644 index 0000000..b249026 --- /dev/null +++ b/www/css/themes/palettes/rose-pine-dawn.css @@ -0,0 +1,17 @@ +:root { + --palette-rose-pine-base: hsl(32deg, 57%, 95%); + --palette-rose-pine-surface: hsl(35deg, 100%, 98%); + --palette-rose-pine-overlay: hsl(33deg, 43%, 91%); + --palette-rose-pine-muted: hsl(257deg, 9%, 61%); + --palette-rose-pine-subtle: hsl(248deg, 12%, 52%); + --palette-rose-pine-text: hsl(248deg, 19%, 40%); + --palette-rose-pine-love: hsl(343deg, 35%, 55%); + --palette-rose-pine-gold: hsl(35deg, 81%, 56%); + --palette-rose-pine-rose: hsl(3deg, 53%, 67%); + --palette-rose-pine-pine: hsl(197deg, 53%, 34%); + --palette-rose-pine-foam: hsl(189deg, 30%, 48%); + --palette-rose-pine-iris: hsl(268deg, 21%, 57%); + --palette-rose-pine-highlight-low: hsl(25deg, 35%, 93%); + --palette-rose-pine-highlight-med: hsl(10deg, 9%, 86%); + --palette-rose-pine-highlight-high: hsl(315deg, 4%, 80%); +} diff --git a/www/css/themes/palettes/rose-pine-moon.css b/www/css/themes/palettes/rose-pine-moon.css new file mode 100644 index 0000000..c1356e1 --- /dev/null +++ b/www/css/themes/palettes/rose-pine-moon.css @@ -0,0 +1,17 @@ +:root { + --palette-rose-pine-base: hsl(246deg, 24%, 17%); + --palette-rose-pine-surface: hsl(248deg, 24%, 20%); + --palette-rose-pine-overlay: hsl(248deg, 21%, 26%); + --palette-rose-pine-muted: hsl(249deg, 12%, 47%); + --palette-rose-pine-subtle: hsl(248deg, 15%, 61%); + --palette-rose-pine-text: hsl(245deg, 50%, 91%); + --palette-rose-pine-love: hsl(343deg, 76%, 68%); + --palette-rose-pine-gold: hsl(35deg, 88%, 72%); + --palette-rose-pine-rose: hsl(2deg, 66%, 75%); + --palette-rose-pine-pine: hsl(197deg, 48%, 47%); + --palette-rose-pine-foam: hsl(189deg, 43%, 73%); + --palette-rose-pine-iris: hsl(267deg, 57%, 78%); + --palette-rose-pine-highlight-low: hsl(245deg, 22%, 20%); + --palette-rose-pine-highlight-med: hsl(247deg, 16%, 30%); + --palette-rose-pine-highlight-high: hsl(249deg, 15%, 38%); +} diff --git a/www/css/themes/palettes/rose-pine.css b/www/css/themes/palettes/rose-pine.css new file mode 100644 index 0000000..479c8c9 --- /dev/null +++ b/www/css/themes/palettes/rose-pine.css @@ -0,0 +1,17 @@ +:root { + --palette-rose-pine-base: hsl(249deg, 22%, 12%); + --palette-rose-pine-surface: hsl(247deg, 23%, 15%); + --palette-rose-pine-overlay: hsl(248deg, 25%, 18%); + --palette-rose-pine-muted: hsl(249deg, 12%, 47%); + --palette-rose-pine-subtle: hsl(248deg, 15%, 61%); + --palette-rose-pine-text: hsl(245deg, 50%, 91%); + --palette-rose-pine-love: hsl(343deg, 76%, 68%); + --palette-rose-pine-gold: hsl(35deg, 88%, 72%); + --palette-rose-pine-rose: hsl(2deg, 55%, 83%); + --palette-rose-pine-pine: hsl(197deg, 49%, 38%); + --palette-rose-pine-foam: hsl(189deg, 43%, 73%); + --palette-rose-pine-iris: hsl(267deg, 57%, 78%); + --palette-rose-pine-highlight-low: hsl(244deg, 18%, 15%); + --palette-rose-pine-highlight-med: hsl(249deg, 15%, 28%); + --palette-rose-pine-highlight-high: hsl(248deg, 13%, 36%); +} diff --git a/www/css/themes/themes/rose-pine-dawn.css b/www/css/themes/themes/rose-pine-dawn.css new file mode 100644 index 0000000..46474c0 --- /dev/null +++ b/www/css/themes/themes/rose-pine-dawn.css @@ -0,0 +1,6 @@ +@import url('palettes/rose-pine-dawn.css'); +@import url('maps/rose-pine.css'); + +:root { + --theme-name: "Rosé Pine Dawn"; +} diff --git a/www/css/themes/themes/rose-pine-moon.css b/www/css/themes/themes/rose-pine-moon.css new file mode 100644 index 0000000..2f898c8 --- /dev/null +++ b/www/css/themes/themes/rose-pine-moon.css @@ -0,0 +1,6 @@ +@import url('palettes/rose-pine.css'); +@import url('maps/rose-pine.css'); + +:root { + --theme-name: "Rosé Pine Moon"; +} diff --git a/www/css/themes/themes/rose-pine.css b/www/css/themes/themes/rose-pine.css new file mode 100644 index 0000000..6782eb3 --- /dev/null +++ b/www/css/themes/themes/rose-pine.css @@ -0,0 +1,6 @@ +@import url('palettes/rose-pine.css'); +@import url('maps/rose-pine.css'); + +:root { + --theme-name: "Rosé Pine"; +}