design modular theming system

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.

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

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-); */
+}

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%);
+}

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%);
+}

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%);
+}

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

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

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