houseaccount 0.10.1

package/app/stylesheets/theme/monokai.css

@@ -0,0 +1,190 @@
+/* Monokai, Wimer Hazenberg — https://monokai.pro/
+   Monokai's own foreground is the light page and its background the dark
+   one: it publishes no light variant, so the light arm is derived from
+   it. its pink serves pink and red, its blue serves cyan, its orange
+   brown. Monokai leads with pink rather than blue, which is its accent.
+
+   Bootstrap builds a family by mixing one base toward `--bs-white` below
+   the 500 step and toward `--bs-black` above it, and inlines that base
+   into all thirteen — so a palette restates the thirteen rather than the
+   one. Upstream's order and upstream's shapes with only the base swapped,
+   so a later Bootstrap diffs against this file. */
+:root {
+  /* The page, and the two colors every ramp below is mixed with.
+     `--bs-bg-body` reads `--bs-white` in light mode and `--bs-gray-975` in
+     dark, so repainting these two is what moves the page itself. */
+  --bs-white: #f8f8f2;
+  --bs-black: #272822;
+
+  /* The neutrals, which every surface, border and text token Bootstrap ships
+     derives from. */
+  --bs-gray-025: color-mix(in lab, var(--bs-white) 94%, #75715e);
+  --bs-gray-050: color-mix(in lab, var(--bs-white) 90%, #75715e);
+  --bs-gray-100: color-mix(in lab, var(--bs-white) 80%, #75715e);
+  --bs-gray-200: color-mix(in lab, var(--bs-white) 60%, #75715e);
+  --bs-gray-300: color-mix(in lab, var(--bs-white) 40%, #75715e);
+  --bs-gray-400: color-mix(in lab, var(--bs-white) 20%, #75715e);
+  --bs-gray-500: #75715e;
+  --bs-gray-600: color-mix(in lab, var(--bs-black) 16%, #75715e);
+  --bs-gray-700: color-mix(in lab, var(--bs-black) 32%, #75715e);
+  --bs-gray-800: color-mix(in lab, var(--bs-black) 48%, #75715e);
+  --bs-gray-900: color-mix(in lab, var(--bs-black) 64%, #75715e);
+  --bs-gray-950: color-mix(in lab, var(--bs-black) 76%, #75715e);
+  --bs-gray-975: color-mix(in lab, var(--bs-black) 88%, #75715e);
+
+  --bs-blue-025: color-mix(in lab, var(--bs-white) 94%, #66d9ef);
+  --bs-blue-050: color-mix(in lab, var(--bs-white) 90%, #66d9ef);
+  --bs-blue-100: color-mix(in lab, var(--bs-white) 80%, #66d9ef);
+  --bs-blue-200: color-mix(in lab, var(--bs-white) 60%, #66d9ef);
+  --bs-blue-300: color-mix(in lab, var(--bs-white) 40%, #66d9ef);
+  --bs-blue-400: color-mix(in lab, var(--bs-white) 20%, #66d9ef);
+  --bs-blue-500: #66d9ef;
+  --bs-blue-600: color-mix(in lab, var(--bs-black) 16%, #66d9ef);
+  --bs-blue-700: color-mix(in lab, var(--bs-black) 32%, #66d9ef);
+  --bs-blue-800: color-mix(in lab, var(--bs-black) 48%, #66d9ef);
+  --bs-blue-900: color-mix(in lab, var(--bs-black) 64%, #66d9ef);
+  --bs-blue-950: color-mix(in lab, var(--bs-black) 76%, #66d9ef);
+  --bs-blue-975: color-mix(in lab, var(--bs-black) 88%, #66d9ef);
+
+  --bs-brown-025: color-mix(in lab, var(--bs-white) 94%, #fd971f);
+  --bs-brown-050: color-mix(in lab, var(--bs-white) 90%, #fd971f);
+  --bs-brown-100: color-mix(in lab, var(--bs-white) 80%, #fd971f);
+  --bs-brown-200: color-mix(in lab, var(--bs-white) 60%, #fd971f);
+  --bs-brown-300: color-mix(in lab, var(--bs-white) 40%, #fd971f);
+  --bs-brown-400: color-mix(in lab, var(--bs-white) 20%, #fd971f);
+  --bs-brown-500: #fd971f;
+  --bs-brown-600: color-mix(in lab, var(--bs-black) 16%, #fd971f);
+  --bs-brown-700: color-mix(in lab, var(--bs-black) 32%, #fd971f);
+  --bs-brown-800: color-mix(in lab, var(--bs-black) 48%, #fd971f);
+  --bs-brown-900: color-mix(in lab, var(--bs-black) 64%, #fd971f);
+  --bs-brown-950: color-mix(in lab, var(--bs-black) 76%, #fd971f);
+  --bs-brown-975: color-mix(in lab, var(--bs-black) 88%, #fd971f);
+
+  --bs-cyan-025: color-mix(in lab, var(--bs-white) 94%, #66d9ef);
+  --bs-cyan-050: color-mix(in lab, var(--bs-white) 90%, #66d9ef);
+  --bs-cyan-100: color-mix(in lab, var(--bs-white) 80%, #66d9ef);
+  --bs-cyan-200: color-mix(in lab, var(--bs-white) 60%, #66d9ef);
+  --bs-cyan-300: color-mix(in lab, var(--bs-white) 40%, #66d9ef);
+  --bs-cyan-400: color-mix(in lab, var(--bs-white) 20%, #66d9ef);
+  --bs-cyan-500: #66d9ef;
+  --bs-cyan-600: color-mix(in lab, var(--bs-black) 16%, #66d9ef);
+  --bs-cyan-700: color-mix(in lab, var(--bs-black) 32%, #66d9ef);
+  --bs-cyan-800: color-mix(in lab, var(--bs-black) 48%, #66d9ef);
+  --bs-cyan-900: color-mix(in lab, var(--bs-black) 64%, #66d9ef);
+  --bs-cyan-950: color-mix(in lab, var(--bs-black) 76%, #66d9ef);
+  --bs-cyan-975: color-mix(in lab, var(--bs-black) 88%, #66d9ef);
+
+  --bs-green-025: color-mix(in lab, var(--bs-white) 94%, #a6e22e);
+  --bs-green-050: color-mix(in lab, var(--bs-white) 90%, #a6e22e);
+  --bs-green-100: color-mix(in lab, var(--bs-white) 80%, #a6e22e);
+  --bs-green-200: color-mix(in lab, var(--bs-white) 60%, #a6e22e);
+  --bs-green-300: color-mix(in lab, var(--bs-white) 40%, #a6e22e);
+  --bs-green-400: color-mix(in lab, var(--bs-white) 20%, #a6e22e);
+  --bs-green-500: #a6e22e;
+  --bs-green-600: color-mix(in lab, var(--bs-black) 16%, #a6e22e);
+  --bs-green-700: color-mix(in lab, var(--bs-black) 32%, #a6e22e);
+  --bs-green-800: color-mix(in lab, var(--bs-black) 48%, #a6e22e);
+  --bs-green-900: color-mix(in lab, var(--bs-black) 64%, #a6e22e);
+  --bs-green-950: color-mix(in lab, var(--bs-black) 76%, #a6e22e);
+  --bs-green-975: color-mix(in lab, var(--bs-black) 88%, #a6e22e);
+
+  --bs-orange-025: color-mix(in lab, var(--bs-white) 94%, #fd971f);
+  --bs-orange-050: color-mix(in lab, var(--bs-white) 90%, #fd971f);
+  --bs-orange-100: color-mix(in lab, var(--bs-white) 80%, #fd971f);
+  --bs-orange-200: color-mix(in lab, var(--bs-white) 60%, #fd971f);
+  --bs-orange-300: color-mix(in lab, var(--bs-white) 40%, #fd971f);
+  --bs-orange-400: color-mix(in lab, var(--bs-white) 20%, #fd971f);
+  --bs-orange-500: #fd971f;
+  --bs-orange-600: color-mix(in lab, var(--bs-black) 16%, #fd971f);
+  --bs-orange-700: color-mix(in lab, var(--bs-black) 32%, #fd971f);
+  --bs-orange-800: color-mix(in lab, var(--bs-black) 48%, #fd971f);
+  --bs-orange-900: color-mix(in lab, var(--bs-black) 64%, #fd971f);
+  --bs-orange-950: color-mix(in lab, var(--bs-black) 76%, #fd971f);
+  --bs-orange-975: color-mix(in lab, var(--bs-black) 88%, #fd971f);
+
+  --bs-pink-025: color-mix(in lab, var(--bs-white) 94%, #f92672);
+  --bs-pink-050: color-mix(in lab, var(--bs-white) 90%, #f92672);
+  --bs-pink-100: color-mix(in lab, var(--bs-white) 80%, #f92672);
+  --bs-pink-200: color-mix(in lab, var(--bs-white) 60%, #f92672);
+  --bs-pink-300: color-mix(in lab, var(--bs-white) 40%, #f92672);
+  --bs-pink-400: color-mix(in lab, var(--bs-white) 20%, #f92672);
+  --bs-pink-500: #f92672;
+  --bs-pink-600: color-mix(in lab, var(--bs-black) 16%, #f92672);
+  --bs-pink-700: color-mix(in lab, var(--bs-black) 32%, #f92672);
+  --bs-pink-800: color-mix(in lab, var(--bs-black) 48%, #f92672);
+  --bs-pink-900: color-mix(in lab, var(--bs-black) 64%, #f92672);
+  --bs-pink-950: color-mix(in lab, var(--bs-black) 76%, #f92672);
+  --bs-pink-975: color-mix(in lab, var(--bs-black) 88%, #f92672);
+
+  --bs-purple-025: color-mix(in lab, var(--bs-white) 94%, #ae81ff);
+  --bs-purple-050: color-mix(in lab, var(--bs-white) 90%, #ae81ff);
+  --bs-purple-100: color-mix(in lab, var(--bs-white) 80%, #ae81ff);
+  --bs-purple-200: color-mix(in lab, var(--bs-white) 60%, #ae81ff);
+  --bs-purple-300: color-mix(in lab, var(--bs-white) 40%, #ae81ff);
+  --bs-purple-400: color-mix(in lab, var(--bs-white) 20%, #ae81ff);
+  --bs-purple-500: #ae81ff;
+  --bs-purple-600: color-mix(in lab, var(--bs-black) 16%, #ae81ff);
+  --bs-purple-700: color-mix(in lab, var(--bs-black) 32%, #ae81ff);
+  --bs-purple-800: color-mix(in lab, var(--bs-black) 48%, #ae81ff);
+  --bs-purple-900: color-mix(in lab, var(--bs-black) 64%, #ae81ff);
+  --bs-purple-950: color-mix(in lab, var(--bs-black) 76%, #ae81ff);
+  --bs-purple-975: color-mix(in lab, var(--bs-black) 88%, #ae81ff);
+
+  --bs-red-025: color-mix(in lab, var(--bs-white) 94%, #f92672);
+  --bs-red-050: color-mix(in lab, var(--bs-white) 90%, #f92672);
+  --bs-red-100: color-mix(in lab, var(--bs-white) 80%, #f92672);
+  --bs-red-200: color-mix(in lab, var(--bs-white) 60%, #f92672);
+  --bs-red-300: color-mix(in lab, var(--bs-white) 40%, #f92672);
+  --bs-red-400: color-mix(in lab, var(--bs-white) 20%, #f92672);
+  --bs-red-500: #f92672;
+  --bs-red-600: color-mix(in lab, var(--bs-black) 16%, #f92672);
+  --bs-red-700: color-mix(in lab, var(--bs-black) 32%, #f92672);
+  --bs-red-800: color-mix(in lab, var(--bs-black) 48%, #f92672);
+  --bs-red-900: color-mix(in lab, var(--bs-black) 64%, #f92672);
+  --bs-red-950: color-mix(in lab, var(--bs-black) 76%, #f92672);
+  --bs-red-975: color-mix(in lab, var(--bs-black) 88%, #f92672);
+
+  --bs-yellow-025: color-mix(in lab, var(--bs-white) 94%, #e6db74);
+  --bs-yellow-050: color-mix(in lab, var(--bs-white) 90%, #e6db74);
+  --bs-yellow-100: color-mix(in lab, var(--bs-white) 80%, #e6db74);
+  --bs-yellow-200: color-mix(in lab, var(--bs-white) 60%, #e6db74);
+  --bs-yellow-300: color-mix(in lab, var(--bs-white) 40%, #e6db74);
+  --bs-yellow-400: color-mix(in lab, var(--bs-white) 20%, #e6db74);
+  --bs-yellow-500: #e6db74;
+  --bs-yellow-600: color-mix(in lab, var(--bs-black) 16%, #e6db74);
+  --bs-yellow-700: color-mix(in lab, var(--bs-black) 32%, #e6db74);
+  --bs-yellow-800: color-mix(in lab, var(--bs-black) 48%, #e6db74);
+  --bs-yellow-900: color-mix(in lab, var(--bs-black) 64%, #e6db74);
+  --bs-yellow-950: color-mix(in lab, var(--bs-black) 76%, #e6db74);
+  --bs-yellow-975: color-mix(in lab, var(--bs-black) 88%, #e6db74);
+
+  /* Text, stated rather than left to the ramp. Bootstrap pairs a low step as
+     a light surface with that same step as dark-mode text, which a palette
+     built for its own contrast does not agree with. */
+  --bs-fg-1: light-dark(#272822, #f8f8f2);
+  --bs-fg-body: light-dark(#3b3a32, #e8e8e2);
+  --bs-fg-2: light-dark(#5c5a4c, #b4b0a0);
+
+  /* The label a solid fill carries, for the four families Bootstrap has
+     spent on a meaning and this palette has repainted. Upstream's own shape:
+     it gives warning and info a dark label for the same reason. */
+  --bs-danger-contrast: var(--bs-white);
+  --bs-success-contrast: var(--bs-gray-975);
+  --bs-warning-contrast: var(--bs-gray-975);
+  --bs-info-contrast: var(--bs-gray-975);
+
+  /* The accent this palette leads with, as the primary color: the same nine
+     `_color.html.erb` writes, from pink and the label that reads on it. Here
+     rather than only in the page because a reader may swap this file for
+     another one, and the primary has to travel with it. A host naming its
+     own color still wins, its block coming after this file. */
+  --bs-primary-base: var(--bs-pink-500);
+  --bs-primary-fg: light-dark(var(--bs-pink-600), var(--bs-pink-400));
+  --bs-primary-fg-emphasis: light-dark(var(--bs-pink-800), var(--bs-pink-200));
+  --bs-primary-bg: var(--bs-pink-500);
+  --bs-primary-bg-subtle: light-dark(var(--bs-pink-100), var(--bs-pink-900));
+  --bs-primary-bg-muted: light-dark(var(--bs-pink-200), var(--bs-pink-800));
+  --bs-primary-border: light-dark(var(--bs-pink-300), var(--bs-pink-600));
+  --bs-primary-focus-ring: light-dark(color-mix(in oklch, var(--bs-pink-500) 50%, var(--bs-bg-body)), color-mix(in oklch, var(--bs-pink-500) 75%, var(--bs-bg-body)));
+  --bs-primary-contrast: var(--bs-white);
+}

package/app/stylesheets/theme/nord.css

@@ -0,0 +1,189 @@
+/* Nord, Arctic Ice Studio — https://www.nordtheme.com/
+   Snow Storm is the light page and Polar Night the dark one. nord15
+   serves purple and pink; nord12 serves orange and brown. The mid neutral
+   is derived: Nord publishes none between nord3 and nord4.
+
+   Bootstrap builds a family by mixing one base toward `--bs-white` below
+   the 500 step and toward `--bs-black` above it, and inlines that base
+   into all thirteen — so a palette restates the thirteen rather than the
+   one. Upstream's order and upstream's shapes with only the base swapped,
+   so a later Bootstrap diffs against this file. */
+:root {
+  /* The page, and the two colors every ramp below is mixed with.
+     `--bs-bg-body` reads `--bs-white` in light mode and `--bs-gray-975` in
+     dark, so repainting these two is what moves the page itself. */
+  --bs-white: #eceff4;
+  --bs-black: #2e3440;
+
+  /* The neutrals, which every surface, border and text token Bootstrap ships
+     derives from. */
+  --bs-gray-025: color-mix(in lab, var(--bs-white) 94%, #7b8794);
+  --bs-gray-050: color-mix(in lab, var(--bs-white) 90%, #7b8794);
+  --bs-gray-100: color-mix(in lab, var(--bs-white) 80%, #7b8794);
+  --bs-gray-200: color-mix(in lab, var(--bs-white) 60%, #7b8794);
+  --bs-gray-300: color-mix(in lab, var(--bs-white) 40%, #7b8794);
+  --bs-gray-400: color-mix(in lab, var(--bs-white) 20%, #7b8794);
+  --bs-gray-500: #7b8794;
+  --bs-gray-600: color-mix(in lab, var(--bs-black) 16%, #7b8794);
+  --bs-gray-700: color-mix(in lab, var(--bs-black) 32%, #7b8794);
+  --bs-gray-800: color-mix(in lab, var(--bs-black) 48%, #7b8794);
+  --bs-gray-900: color-mix(in lab, var(--bs-black) 64%, #7b8794);
+  --bs-gray-950: color-mix(in lab, var(--bs-black) 76%, #7b8794);
+  --bs-gray-975: color-mix(in lab, var(--bs-black) 88%, #7b8794);
+
+  --bs-blue-025: color-mix(in lab, var(--bs-white) 94%, #5e81ac);
+  --bs-blue-050: color-mix(in lab, var(--bs-white) 90%, #5e81ac);
+  --bs-blue-100: color-mix(in lab, var(--bs-white) 80%, #5e81ac);
+  --bs-blue-200: color-mix(in lab, var(--bs-white) 60%, #5e81ac);
+  --bs-blue-300: color-mix(in lab, var(--bs-white) 40%, #5e81ac);
+  --bs-blue-400: color-mix(in lab, var(--bs-white) 20%, #5e81ac);
+  --bs-blue-500: #5e81ac;
+  --bs-blue-600: color-mix(in lab, var(--bs-black) 16%, #5e81ac);
+  --bs-blue-700: color-mix(in lab, var(--bs-black) 32%, #5e81ac);
+  --bs-blue-800: color-mix(in lab, var(--bs-black) 48%, #5e81ac);
+  --bs-blue-900: color-mix(in lab, var(--bs-black) 64%, #5e81ac);
+  --bs-blue-950: color-mix(in lab, var(--bs-black) 76%, #5e81ac);
+  --bs-blue-975: color-mix(in lab, var(--bs-black) 88%, #5e81ac);
+
+  --bs-brown-025: color-mix(in lab, var(--bs-white) 94%, #d08770);
+  --bs-brown-050: color-mix(in lab, var(--bs-white) 90%, #d08770);
+  --bs-brown-100: color-mix(in lab, var(--bs-white) 80%, #d08770);
+  --bs-brown-200: color-mix(in lab, var(--bs-white) 60%, #d08770);
+  --bs-brown-300: color-mix(in lab, var(--bs-white) 40%, #d08770);
+  --bs-brown-400: color-mix(in lab, var(--bs-white) 20%, #d08770);
+  --bs-brown-500: #d08770;
+  --bs-brown-600: color-mix(in lab, var(--bs-black) 16%, #d08770);
+  --bs-brown-700: color-mix(in lab, var(--bs-black) 32%, #d08770);
+  --bs-brown-800: color-mix(in lab, var(--bs-black) 48%, #d08770);
+  --bs-brown-900: color-mix(in lab, var(--bs-black) 64%, #d08770);
+  --bs-brown-950: color-mix(in lab, var(--bs-black) 76%, #d08770);
+  --bs-brown-975: color-mix(in lab, var(--bs-black) 88%, #d08770);
+
+  --bs-cyan-025: color-mix(in lab, var(--bs-white) 94%, #88c0d0);
+  --bs-cyan-050: color-mix(in lab, var(--bs-white) 90%, #88c0d0);
+  --bs-cyan-100: color-mix(in lab, var(--bs-white) 80%, #88c0d0);
+  --bs-cyan-200: color-mix(in lab, var(--bs-white) 60%, #88c0d0);
+  --bs-cyan-300: color-mix(in lab, var(--bs-white) 40%, #88c0d0);
+  --bs-cyan-400: color-mix(in lab, var(--bs-white) 20%, #88c0d0);
+  --bs-cyan-500: #88c0d0;
+  --bs-cyan-600: color-mix(in lab, var(--bs-black) 16%, #88c0d0);
+  --bs-cyan-700: color-mix(in lab, var(--bs-black) 32%, #88c0d0);
+  --bs-cyan-800: color-mix(in lab, var(--bs-black) 48%, #88c0d0);
+  --bs-cyan-900: color-mix(in lab, var(--bs-black) 64%, #88c0d0);
+  --bs-cyan-950: color-mix(in lab, var(--bs-black) 76%, #88c0d0);
+  --bs-cyan-975: color-mix(in lab, var(--bs-black) 88%, #88c0d0);
+
+  --bs-green-025: color-mix(in lab, var(--bs-white) 94%, #a3be8c);
+  --bs-green-050: color-mix(in lab, var(--bs-white) 90%, #a3be8c);
+  --bs-green-100: color-mix(in lab, var(--bs-white) 80%, #a3be8c);
+  --bs-green-200: color-mix(in lab, var(--bs-white) 60%, #a3be8c);
+  --bs-green-300: color-mix(in lab, var(--bs-white) 40%, #a3be8c);
+  --bs-green-400: color-mix(in lab, var(--bs-white) 20%, #a3be8c);
+  --bs-green-500: #a3be8c;
+  --bs-green-600: color-mix(in lab, var(--bs-black) 16%, #a3be8c);
+  --bs-green-700: color-mix(in lab, var(--bs-black) 32%, #a3be8c);
+  --bs-green-800: color-mix(in lab, var(--bs-black) 48%, #a3be8c);
+  --bs-green-900: color-mix(in lab, var(--bs-black) 64%, #a3be8c);
+  --bs-green-950: color-mix(in lab, var(--bs-black) 76%, #a3be8c);
+  --bs-green-975: color-mix(in lab, var(--bs-black) 88%, #a3be8c);
+
+  --bs-orange-025: color-mix(in lab, var(--bs-white) 94%, #d08770);
+  --bs-orange-050: color-mix(in lab, var(--bs-white) 90%, #d08770);
+  --bs-orange-100: color-mix(in lab, var(--bs-white) 80%, #d08770);
+  --bs-orange-200: color-mix(in lab, var(--bs-white) 60%, #d08770);
+  --bs-orange-300: color-mix(in lab, var(--bs-white) 40%, #d08770);
+  --bs-orange-400: color-mix(in lab, var(--bs-white) 20%, #d08770);
+  --bs-orange-500: #d08770;
+  --bs-orange-600: color-mix(in lab, var(--bs-black) 16%, #d08770);
+  --bs-orange-700: color-mix(in lab, var(--bs-black) 32%, #d08770);
+  --bs-orange-800: color-mix(in lab, var(--bs-black) 48%, #d08770);
+  --bs-orange-900: color-mix(in lab, var(--bs-black) 64%, #d08770);
+  --bs-orange-950: color-mix(in lab, var(--bs-black) 76%, #d08770);
+  --bs-orange-975: color-mix(in lab, var(--bs-black) 88%, #d08770);
+
+  --bs-pink-025: color-mix(in lab, var(--bs-white) 94%, #b48ead);
+  --bs-pink-050: color-mix(in lab, var(--bs-white) 90%, #b48ead);
+  --bs-pink-100: color-mix(in lab, var(--bs-white) 80%, #b48ead);
+  --bs-pink-200: color-mix(in lab, var(--bs-white) 60%, #b48ead);
+  --bs-pink-300: color-mix(in lab, var(--bs-white) 40%, #b48ead);
+  --bs-pink-400: color-mix(in lab, var(--bs-white) 20%, #b48ead);
+  --bs-pink-500: #b48ead;
+  --bs-pink-600: color-mix(in lab, var(--bs-black) 16%, #b48ead);
+  --bs-pink-700: color-mix(in lab, var(--bs-black) 32%, #b48ead);
+  --bs-pink-800: color-mix(in lab, var(--bs-black) 48%, #b48ead);
+  --bs-pink-900: color-mix(in lab, var(--bs-black) 64%, #b48ead);
+  --bs-pink-950: color-mix(in lab, var(--bs-black) 76%, #b48ead);
+  --bs-pink-975: color-mix(in lab, var(--bs-black) 88%, #b48ead);
+
+  --bs-purple-025: color-mix(in lab, var(--bs-white) 94%, #b48ead);
+  --bs-purple-050: color-mix(in lab, var(--bs-white) 90%, #b48ead);
+  --bs-purple-100: color-mix(in lab, var(--bs-white) 80%, #b48ead);
+  --bs-purple-200: color-mix(in lab, var(--bs-white) 60%, #b48ead);
+  --bs-purple-300: color-mix(in lab, var(--bs-white) 40%, #b48ead);
+  --bs-purple-400: color-mix(in lab, var(--bs-white) 20%, #b48ead);
+  --bs-purple-500: #b48ead;
+  --bs-purple-600: color-mix(in lab, var(--bs-black) 16%, #b48ead);
+  --bs-purple-700: color-mix(in lab, var(--bs-black) 32%, #b48ead);
+  --bs-purple-800: color-mix(in lab, var(--bs-black) 48%, #b48ead);
+  --bs-purple-900: color-mix(in lab, var(--bs-black) 64%, #b48ead);
+  --bs-purple-950: color-mix(in lab, var(--bs-black) 76%, #b48ead);
+  --bs-purple-975: color-mix(in lab, var(--bs-black) 88%, #b48ead);
+
+  --bs-red-025: color-mix(in lab, var(--bs-white) 94%, #bf616a);
+  --bs-red-050: color-mix(in lab, var(--bs-white) 90%, #bf616a);
+  --bs-red-100: color-mix(in lab, var(--bs-white) 80%, #bf616a);
+  --bs-red-200: color-mix(in lab, var(--bs-white) 60%, #bf616a);
+  --bs-red-300: color-mix(in lab, var(--bs-white) 40%, #bf616a);
+  --bs-red-400: color-mix(in lab, var(--bs-white) 20%, #bf616a);
+  --bs-red-500: #bf616a;
+  --bs-red-600: color-mix(in lab, var(--bs-black) 16%, #bf616a);
+  --bs-red-700: color-mix(in lab, var(--bs-black) 32%, #bf616a);
+  --bs-red-800: color-mix(in lab, var(--bs-black) 48%, #bf616a);
+  --bs-red-900: color-mix(in lab, var(--bs-black) 64%, #bf616a);
+  --bs-red-950: color-mix(in lab, var(--bs-black) 76%, #bf616a);
+  --bs-red-975: color-mix(in lab, var(--bs-black) 88%, #bf616a);
+
+  --bs-yellow-025: color-mix(in lab, var(--bs-white) 94%, #ebcb8b);
+  --bs-yellow-050: color-mix(in lab, var(--bs-white) 90%, #ebcb8b);
+  --bs-yellow-100: color-mix(in lab, var(--bs-white) 80%, #ebcb8b);
+  --bs-yellow-200: color-mix(in lab, var(--bs-white) 60%, #ebcb8b);
+  --bs-yellow-300: color-mix(in lab, var(--bs-white) 40%, #ebcb8b);
+  --bs-yellow-400: color-mix(in lab, var(--bs-white) 20%, #ebcb8b);
+  --bs-yellow-500: #ebcb8b;
+  --bs-yellow-600: color-mix(in lab, var(--bs-black) 16%, #ebcb8b);
+  --bs-yellow-700: color-mix(in lab, var(--bs-black) 32%, #ebcb8b);
+  --bs-yellow-800: color-mix(in lab, var(--bs-black) 48%, #ebcb8b);
+  --bs-yellow-900: color-mix(in lab, var(--bs-black) 64%, #ebcb8b);
+  --bs-yellow-950: color-mix(in lab, var(--bs-black) 76%, #ebcb8b);
+  --bs-yellow-975: color-mix(in lab, var(--bs-black) 88%, #ebcb8b);
+
+  /* Text, stated rather than left to the ramp. Bootstrap pairs a low step as
+     a light surface with that same step as dark-mode text, which a palette
+     built for its own contrast does not agree with. */
+  --bs-fg-1: light-dark(#2e3440, #eceff4);
+  --bs-fg-body: light-dark(#3b4252, #d8dee9);
+  --bs-fg-2: light-dark(#4c566a, #a7b0c0);
+
+  /* The label a solid fill carries, for the four families Bootstrap has
+     spent on a meaning and this palette has repainted. Upstream's own shape:
+     it gives warning and info a dark label for the same reason. */
+  --bs-danger-contrast: var(--bs-white);
+  --bs-success-contrast: var(--bs-gray-975);
+  --bs-warning-contrast: var(--bs-gray-975);
+  --bs-info-contrast: var(--bs-gray-975);
+
+  /* The accent this palette leads with, as the primary color: the same nine
+     `_color.html.erb` writes, from blue and the label that reads on it. Here
+     rather than only in the page because a reader may swap this file for
+     another one, and the primary has to travel with it. A host naming its
+     own color still wins, its block coming after this file. */
+  --bs-primary-base: var(--bs-blue-500);
+  --bs-primary-fg: light-dark(var(--bs-blue-600), var(--bs-blue-400));
+  --bs-primary-fg-emphasis: light-dark(var(--bs-blue-800), var(--bs-blue-200));
+  --bs-primary-bg: var(--bs-blue-500);
+  --bs-primary-bg-subtle: light-dark(var(--bs-blue-100), var(--bs-blue-900));
+  --bs-primary-bg-muted: light-dark(var(--bs-blue-200), var(--bs-blue-800));
+  --bs-primary-border: light-dark(var(--bs-blue-300), var(--bs-blue-600));
+  --bs-primary-focus-ring: light-dark(color-mix(in oklch, var(--bs-blue-500) 50%, var(--bs-bg-body)), color-mix(in oklch, var(--bs-blue-500) 75%, var(--bs-bg-body)));
+  --bs-primary-contrast: var(--bs-white);
+}

package/app/stylesheets/theme/one_dark.css

@@ -0,0 +1,189 @@
+/* One Dark, Atom — https://github.com/atom/atom/tree/master/packages/one-dark-ui
+   One Light's page is the light one and One Dark's the dark one. One Dark
+   carries no pink, so its purple serves both, and its orange serves
+   brown. The mid neutral is derived.
+
+   Bootstrap builds a family by mixing one base toward `--bs-white` below
+   the 500 step and toward `--bs-black` above it, and inlines that base
+   into all thirteen — so a palette restates the thirteen rather than the
+   one. Upstream's order and upstream's shapes with only the base swapped,
+   so a later Bootstrap diffs against this file. */
+:root {
+  /* The page, and the two colors every ramp below is mixed with.
+     `--bs-bg-body` reads `--bs-white` in light mode and `--bs-gray-975` in
+     dark, so repainting these two is what moves the page itself. */
+  --bs-white: #fafafa;
+  --bs-black: #282c34;
+
+  /* The neutrals, which every surface, border and text token Bootstrap ships
+     derives from. */
+  --bs-gray-025: color-mix(in lab, var(--bs-white) 94%, #8b91a0);
+  --bs-gray-050: color-mix(in lab, var(--bs-white) 90%, #8b91a0);
+  --bs-gray-100: color-mix(in lab, var(--bs-white) 80%, #8b91a0);
+  --bs-gray-200: color-mix(in lab, var(--bs-white) 60%, #8b91a0);
+  --bs-gray-300: color-mix(in lab, var(--bs-white) 40%, #8b91a0);
+  --bs-gray-400: color-mix(in lab, var(--bs-white) 20%, #8b91a0);
+  --bs-gray-500: #8b91a0;
+  --bs-gray-600: color-mix(in lab, var(--bs-black) 16%, #8b91a0);
+  --bs-gray-700: color-mix(in lab, var(--bs-black) 32%, #8b91a0);
+  --bs-gray-800: color-mix(in lab, var(--bs-black) 48%, #8b91a0);
+  --bs-gray-900: color-mix(in lab, var(--bs-black) 64%, #8b91a0);
+  --bs-gray-950: color-mix(in lab, var(--bs-black) 76%, #8b91a0);
+  --bs-gray-975: color-mix(in lab, var(--bs-black) 88%, #8b91a0);
+
+  --bs-blue-025: color-mix(in lab, var(--bs-white) 94%, #61afef);
+  --bs-blue-050: color-mix(in lab, var(--bs-white) 90%, #61afef);
+  --bs-blue-100: color-mix(in lab, var(--bs-white) 80%, #61afef);
+  --bs-blue-200: color-mix(in lab, var(--bs-white) 60%, #61afef);
+  --bs-blue-300: color-mix(in lab, var(--bs-white) 40%, #61afef);
+  --bs-blue-400: color-mix(in lab, var(--bs-white) 20%, #61afef);
+  --bs-blue-500: #61afef;
+  --bs-blue-600: color-mix(in lab, var(--bs-black) 16%, #61afef);
+  --bs-blue-700: color-mix(in lab, var(--bs-black) 32%, #61afef);
+  --bs-blue-800: color-mix(in lab, var(--bs-black) 48%, #61afef);
+  --bs-blue-900: color-mix(in lab, var(--bs-black) 64%, #61afef);
+  --bs-blue-950: color-mix(in lab, var(--bs-black) 76%, #61afef);
+  --bs-blue-975: color-mix(in lab, var(--bs-black) 88%, #61afef);
+
+  --bs-brown-025: color-mix(in lab, var(--bs-white) 94%, #d19a66);
+  --bs-brown-050: color-mix(in lab, var(--bs-white) 90%, #d19a66);
+  --bs-brown-100: color-mix(in lab, var(--bs-white) 80%, #d19a66);
+  --bs-brown-200: color-mix(in lab, var(--bs-white) 60%, #d19a66);
+  --bs-brown-300: color-mix(in lab, var(--bs-white) 40%, #d19a66);
+  --bs-brown-400: color-mix(in lab, var(--bs-white) 20%, #d19a66);
+  --bs-brown-500: #d19a66;
+  --bs-brown-600: color-mix(in lab, var(--bs-black) 16%, #d19a66);
+  --bs-brown-700: color-mix(in lab, var(--bs-black) 32%, #d19a66);
+  --bs-brown-800: color-mix(in lab, var(--bs-black) 48%, #d19a66);
+  --bs-brown-900: color-mix(in lab, var(--bs-black) 64%, #d19a66);
+  --bs-brown-950: color-mix(in lab, var(--bs-black) 76%, #d19a66);
+  --bs-brown-975: color-mix(in lab, var(--bs-black) 88%, #d19a66);
+
+  --bs-cyan-025: color-mix(in lab, var(--bs-white) 94%, #56b6c2);
+  --bs-cyan-050: color-mix(in lab, var(--bs-white) 90%, #56b6c2);
+  --bs-cyan-100: color-mix(in lab, var(--bs-white) 80%, #56b6c2);
+  --bs-cyan-200: color-mix(in lab, var(--bs-white) 60%, #56b6c2);
+  --bs-cyan-300: color-mix(in lab, var(--bs-white) 40%, #56b6c2);
+  --bs-cyan-400: color-mix(in lab, var(--bs-white) 20%, #56b6c2);
+  --bs-cyan-500: #56b6c2;
+  --bs-cyan-600: color-mix(in lab, var(--bs-black) 16%, #56b6c2);
+  --bs-cyan-700: color-mix(in lab, var(--bs-black) 32%, #56b6c2);
+  --bs-cyan-800: color-mix(in lab, var(--bs-black) 48%, #56b6c2);
+  --bs-cyan-900: color-mix(in lab, var(--bs-black) 64%, #56b6c2);
+  --bs-cyan-950: color-mix(in lab, var(--bs-black) 76%, #56b6c2);
+  --bs-cyan-975: color-mix(in lab, var(--bs-black) 88%, #56b6c2);
+
+  --bs-green-025: color-mix(in lab, var(--bs-white) 94%, #98c379);
+  --bs-green-050: color-mix(in lab, var(--bs-white) 90%, #98c379);
+  --bs-green-100: color-mix(in lab, var(--bs-white) 80%, #98c379);
+  --bs-green-200: color-mix(in lab, var(--bs-white) 60%, #98c379);
+  --bs-green-300: color-mix(in lab, var(--bs-white) 40%, #98c379);
+  --bs-green-400: color-mix(in lab, var(--bs-white) 20%, #98c379);
+  --bs-green-500: #98c379;
+  --bs-green-600: color-mix(in lab, var(--bs-black) 16%, #98c379);
+  --bs-green-700: color-mix(in lab, var(--bs-black) 32%, #98c379);
+  --bs-green-800: color-mix(in lab, var(--bs-black) 48%, #98c379);
+  --bs-green-900: color-mix(in lab, var(--bs-black) 64%, #98c379);
+  --bs-green-950: color-mix(in lab, var(--bs-black) 76%, #98c379);
+  --bs-green-975: color-mix(in lab, var(--bs-black) 88%, #98c379);
+
+  --bs-orange-025: color-mix(in lab, var(--bs-white) 94%, #d19a66);
+  --bs-orange-050: color-mix(in lab, var(--bs-white) 90%, #d19a66);
+  --bs-orange-100: color-mix(in lab, var(--bs-white) 80%, #d19a66);
+  --bs-orange-200: color-mix(in lab, var(--bs-white) 60%, #d19a66);
+  --bs-orange-300: color-mix(in lab, var(--bs-white) 40%, #d19a66);
+  --bs-orange-400: color-mix(in lab, var(--bs-white) 20%, #d19a66);
+  --bs-orange-500: #d19a66;
+  --bs-orange-600: color-mix(in lab, var(--bs-black) 16%, #d19a66);
+  --bs-orange-700: color-mix(in lab, var(--bs-black) 32%, #d19a66);
+  --bs-orange-800: color-mix(in lab, var(--bs-black) 48%, #d19a66);
+  --bs-orange-900: color-mix(in lab, var(--bs-black) 64%, #d19a66);
+  --bs-orange-950: color-mix(in lab, var(--bs-black) 76%, #d19a66);
+  --bs-orange-975: color-mix(in lab, var(--bs-black) 88%, #d19a66);
+
+  --bs-pink-025: color-mix(in lab, var(--bs-white) 94%, #c678dd);
+  --bs-pink-050: color-mix(in lab, var(--bs-white) 90%, #c678dd);
+  --bs-pink-100: color-mix(in lab, var(--bs-white) 80%, #c678dd);
+  --bs-pink-200: color-mix(in lab, var(--bs-white) 60%, #c678dd);
+  --bs-pink-300: color-mix(in lab, var(--bs-white) 40%, #c678dd);
+  --bs-pink-400: color-mix(in lab, var(--bs-white) 20%, #c678dd);
+  --bs-pink-500: #c678dd;
+  --bs-pink-600: color-mix(in lab, var(--bs-black) 16%, #c678dd);
+  --bs-pink-700: color-mix(in lab, var(--bs-black) 32%, #c678dd);
+  --bs-pink-800: color-mix(in lab, var(--bs-black) 48%, #c678dd);
+  --bs-pink-900: color-mix(in lab, var(--bs-black) 64%, #c678dd);
+  --bs-pink-950: color-mix(in lab, var(--bs-black) 76%, #c678dd);
+  --bs-pink-975: color-mix(in lab, var(--bs-black) 88%, #c678dd);
+
+  --bs-purple-025: color-mix(in lab, var(--bs-white) 94%, #c678dd);
+  --bs-purple-050: color-mix(in lab, var(--bs-white) 90%, #c678dd);
+  --bs-purple-100: color-mix(in lab, var(--bs-white) 80%, #c678dd);
+  --bs-purple-200: color-mix(in lab, var(--bs-white) 60%, #c678dd);
+  --bs-purple-300: color-mix(in lab, var(--bs-white) 40%, #c678dd);
+  --bs-purple-400: color-mix(in lab, var(--bs-white) 20%, #c678dd);
+  --bs-purple-500: #c678dd;
+  --bs-purple-600: color-mix(in lab, var(--bs-black) 16%, #c678dd);
+  --bs-purple-700: color-mix(in lab, var(--bs-black) 32%, #c678dd);
+  --bs-purple-800: color-mix(in lab, var(--bs-black) 48%, #c678dd);
+  --bs-purple-900: color-mix(in lab, var(--bs-black) 64%, #c678dd);
+  --bs-purple-950: color-mix(in lab, var(--bs-black) 76%, #c678dd);
+  --bs-purple-975: color-mix(in lab, var(--bs-black) 88%, #c678dd);
+
+  --bs-red-025: color-mix(in lab, var(--bs-white) 94%, #e06c75);
+  --bs-red-050: color-mix(in lab, var(--bs-white) 90%, #e06c75);
+  --bs-red-100: color-mix(in lab, var(--bs-white) 80%, #e06c75);
+  --bs-red-200: color-mix(in lab, var(--bs-white) 60%, #e06c75);
+  --bs-red-300: color-mix(in lab, var(--bs-white) 40%, #e06c75);
+  --bs-red-400: color-mix(in lab, var(--bs-white) 20%, #e06c75);
+  --bs-red-500: #e06c75;
+  --bs-red-600: color-mix(in lab, var(--bs-black) 16%, #e06c75);
+  --bs-red-700: color-mix(in lab, var(--bs-black) 32%, #e06c75);
+  --bs-red-800: color-mix(in lab, var(--bs-black) 48%, #e06c75);
+  --bs-red-900: color-mix(in lab, var(--bs-black) 64%, #e06c75);
+  --bs-red-950: color-mix(in lab, var(--bs-black) 76%, #e06c75);
+  --bs-red-975: color-mix(in lab, var(--bs-black) 88%, #e06c75);
+
+  --bs-yellow-025: color-mix(in lab, var(--bs-white) 94%, #e5c07b);
+  --bs-yellow-050: color-mix(in lab, var(--bs-white) 90%, #e5c07b);
+  --bs-yellow-100: color-mix(in lab, var(--bs-white) 80%, #e5c07b);
+  --bs-yellow-200: color-mix(in lab, var(--bs-white) 60%, #e5c07b);
+  --bs-yellow-300: color-mix(in lab, var(--bs-white) 40%, #e5c07b);
+  --bs-yellow-400: color-mix(in lab, var(--bs-white) 20%, #e5c07b);
+  --bs-yellow-500: #e5c07b;
+  --bs-yellow-600: color-mix(in lab, var(--bs-black) 16%, #e5c07b);
+  --bs-yellow-700: color-mix(in lab, var(--bs-black) 32%, #e5c07b);
+  --bs-yellow-800: color-mix(in lab, var(--bs-black) 48%, #e5c07b);
+  --bs-yellow-900: color-mix(in lab, var(--bs-black) 64%, #e5c07b);
+  --bs-yellow-950: color-mix(in lab, var(--bs-black) 76%, #e5c07b);
+  --bs-yellow-975: color-mix(in lab, var(--bs-black) 88%, #e5c07b);
+
+  /* Text, stated rather than left to the ramp. Bootstrap pairs a low step as
+     a light surface with that same step as dark-mode text, which a palette
+     built for its own contrast does not agree with. */
+  --bs-fg-1: light-dark(#202126, #ffffff);
+  --bs-fg-body: light-dark(#383a42, #abb2bf);
+  --bs-fg-2: light-dark(#5c6370, #939aa8);
+
+  /* The label a solid fill carries, for the four families Bootstrap has
+     spent on a meaning and this palette has repainted. Upstream's own shape:
+     it gives warning and info a dark label for the same reason. */
+  --bs-danger-contrast: var(--bs-gray-975);
+  --bs-success-contrast: var(--bs-gray-975);
+  --bs-warning-contrast: var(--bs-gray-975);
+  --bs-info-contrast: var(--bs-gray-975);
+
+  /* The accent this palette leads with, as the primary color: the same nine
+     `_color.html.erb` writes, from blue and the label that reads on it. Here
+     rather than only in the page because a reader may swap this file for
+     another one, and the primary has to travel with it. A host naming its
+     own color still wins, its block coming after this file. */
+  --bs-primary-base: var(--bs-blue-500);
+  --bs-primary-fg: light-dark(var(--bs-blue-600), var(--bs-blue-400));
+  --bs-primary-fg-emphasis: light-dark(var(--bs-blue-800), var(--bs-blue-200));
+  --bs-primary-bg: var(--bs-blue-500);
+  --bs-primary-bg-subtle: light-dark(var(--bs-blue-100), var(--bs-blue-900));
+  --bs-primary-bg-muted: light-dark(var(--bs-blue-200), var(--bs-blue-800));
+  --bs-primary-border: light-dark(var(--bs-blue-300), var(--bs-blue-600));
+  --bs-primary-focus-ring: light-dark(color-mix(in oklch, var(--bs-blue-500) 50%, var(--bs-bg-body)), color-mix(in oklch, var(--bs-blue-500) 75%, var(--bs-bg-body)));
+  --bs-primary-contrast: var(--bs-gray-975);
+}