bh 6.1.4 → 6.3.0

data/app/stylesheets/theme/solarized.css

@@ -0,0 +1,188 @@
+/* Solarized, Ethan Schoonover — https://ethanschoonover.com/solarized/
+   base3 is the light page and base03 the dark one, both Solarized itself.
+   yellow serves brown, the warmest tone Solarized has.
+
+   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: #fdf6e3;
+  --bs-black: #002b36;
+
+  /* The neutrals, which every surface, border and text token Bootstrap ships
+     derives from. */
+  --bs-gray-025: color-mix(in lab, var(--bs-white) 94%, #839496);
+  --bs-gray-050: color-mix(in lab, var(--bs-white) 90%, #839496);
+  --bs-gray-100: color-mix(in lab, var(--bs-white) 80%, #839496);
+  --bs-gray-200: color-mix(in lab, var(--bs-white) 60%, #839496);
+  --bs-gray-300: color-mix(in lab, var(--bs-white) 40%, #839496);
+  --bs-gray-400: color-mix(in lab, var(--bs-white) 20%, #839496);
+  --bs-gray-500: #839496;
+  --bs-gray-600: color-mix(in lab, var(--bs-black) 16%, #839496);
+  --bs-gray-700: color-mix(in lab, var(--bs-black) 32%, #839496);
+  --bs-gray-800: color-mix(in lab, var(--bs-black) 48%, #839496);
+  --bs-gray-900: color-mix(in lab, var(--bs-black) 64%, #839496);
+  --bs-gray-950: color-mix(in lab, var(--bs-black) 76%, #839496);
+  --bs-gray-975: color-mix(in lab, var(--bs-black) 88%, #839496);
+
+  --bs-blue-025: color-mix(in lab, var(--bs-white) 94%, #268bd2);
+  --bs-blue-050: color-mix(in lab, var(--bs-white) 90%, #268bd2);
+  --bs-blue-100: color-mix(in lab, var(--bs-white) 80%, #268bd2);
+  --bs-blue-200: color-mix(in lab, var(--bs-white) 60%, #268bd2);
+  --bs-blue-300: color-mix(in lab, var(--bs-white) 40%, #268bd2);
+  --bs-blue-400: color-mix(in lab, var(--bs-white) 20%, #268bd2);
+  --bs-blue-500: #268bd2;
+  --bs-blue-600: color-mix(in lab, var(--bs-black) 16%, #268bd2);
+  --bs-blue-700: color-mix(in lab, var(--bs-black) 32%, #268bd2);
+  --bs-blue-800: color-mix(in lab, var(--bs-black) 48%, #268bd2);
+  --bs-blue-900: color-mix(in lab, var(--bs-black) 64%, #268bd2);
+  --bs-blue-950: color-mix(in lab, var(--bs-black) 76%, #268bd2);
+  --bs-blue-975: color-mix(in lab, var(--bs-black) 88%, #268bd2);
+
+  --bs-brown-025: color-mix(in lab, var(--bs-white) 94%, #b58900);
+  --bs-brown-050: color-mix(in lab, var(--bs-white) 90%, #b58900);
+  --bs-brown-100: color-mix(in lab, var(--bs-white) 80%, #b58900);
+  --bs-brown-200: color-mix(in lab, var(--bs-white) 60%, #b58900);
+  --bs-brown-300: color-mix(in lab, var(--bs-white) 40%, #b58900);
+  --bs-brown-400: color-mix(in lab, var(--bs-white) 20%, #b58900);
+  --bs-brown-500: #b58900;
+  --bs-brown-600: color-mix(in lab, var(--bs-black) 16%, #b58900);
+  --bs-brown-700: color-mix(in lab, var(--bs-black) 32%, #b58900);
+  --bs-brown-800: color-mix(in lab, var(--bs-black) 48%, #b58900);
+  --bs-brown-900: color-mix(in lab, var(--bs-black) 64%, #b58900);
+  --bs-brown-950: color-mix(in lab, var(--bs-black) 76%, #b58900);
+  --bs-brown-975: color-mix(in lab, var(--bs-black) 88%, #b58900);
+
+  --bs-cyan-025: color-mix(in lab, var(--bs-white) 94%, #2aa198);
+  --bs-cyan-050: color-mix(in lab, var(--bs-white) 90%, #2aa198);
+  --bs-cyan-100: color-mix(in lab, var(--bs-white) 80%, #2aa198);
+  --bs-cyan-200: color-mix(in lab, var(--bs-white) 60%, #2aa198);
+  --bs-cyan-300: color-mix(in lab, var(--bs-white) 40%, #2aa198);
+  --bs-cyan-400: color-mix(in lab, var(--bs-white) 20%, #2aa198);
+  --bs-cyan-500: #2aa198;
+  --bs-cyan-600: color-mix(in lab, var(--bs-black) 16%, #2aa198);
+  --bs-cyan-700: color-mix(in lab, var(--bs-black) 32%, #2aa198);
+  --bs-cyan-800: color-mix(in lab, var(--bs-black) 48%, #2aa198);
+  --bs-cyan-900: color-mix(in lab, var(--bs-black) 64%, #2aa198);
+  --bs-cyan-950: color-mix(in lab, var(--bs-black) 76%, #2aa198);
+  --bs-cyan-975: color-mix(in lab, var(--bs-black) 88%, #2aa198);
+
+  --bs-green-025: color-mix(in lab, var(--bs-white) 94%, #859900);
+  --bs-green-050: color-mix(in lab, var(--bs-white) 90%, #859900);
+  --bs-green-100: color-mix(in lab, var(--bs-white) 80%, #859900);
+  --bs-green-200: color-mix(in lab, var(--bs-white) 60%, #859900);
+  --bs-green-300: color-mix(in lab, var(--bs-white) 40%, #859900);
+  --bs-green-400: color-mix(in lab, var(--bs-white) 20%, #859900);
+  --bs-green-500: #859900;
+  --bs-green-600: color-mix(in lab, var(--bs-black) 16%, #859900);
+  --bs-green-700: color-mix(in lab, var(--bs-black) 32%, #859900);
+  --bs-green-800: color-mix(in lab, var(--bs-black) 48%, #859900);
+  --bs-green-900: color-mix(in lab, var(--bs-black) 64%, #859900);
+  --bs-green-950: color-mix(in lab, var(--bs-black) 76%, #859900);
+  --bs-green-975: color-mix(in lab, var(--bs-black) 88%, #859900);
+
+  --bs-orange-025: color-mix(in lab, var(--bs-white) 94%, #cb4b16);
+  --bs-orange-050: color-mix(in lab, var(--bs-white) 90%, #cb4b16);
+  --bs-orange-100: color-mix(in lab, var(--bs-white) 80%, #cb4b16);
+  --bs-orange-200: color-mix(in lab, var(--bs-white) 60%, #cb4b16);
+  --bs-orange-300: color-mix(in lab, var(--bs-white) 40%, #cb4b16);
+  --bs-orange-400: color-mix(in lab, var(--bs-white) 20%, #cb4b16);
+  --bs-orange-500: #cb4b16;
+  --bs-orange-600: color-mix(in lab, var(--bs-black) 16%, #cb4b16);
+  --bs-orange-700: color-mix(in lab, var(--bs-black) 32%, #cb4b16);
+  --bs-orange-800: color-mix(in lab, var(--bs-black) 48%, #cb4b16);
+  --bs-orange-900: color-mix(in lab, var(--bs-black) 64%, #cb4b16);
+  --bs-orange-950: color-mix(in lab, var(--bs-black) 76%, #cb4b16);
+  --bs-orange-975: color-mix(in lab, var(--bs-black) 88%, #cb4b16);
+
+  --bs-pink-025: color-mix(in lab, var(--bs-white) 94%, #d33682);
+  --bs-pink-050: color-mix(in lab, var(--bs-white) 90%, #d33682);
+  --bs-pink-100: color-mix(in lab, var(--bs-white) 80%, #d33682);
+  --bs-pink-200: color-mix(in lab, var(--bs-white) 60%, #d33682);
+  --bs-pink-300: color-mix(in lab, var(--bs-white) 40%, #d33682);
+  --bs-pink-400: color-mix(in lab, var(--bs-white) 20%, #d33682);
+  --bs-pink-500: #d33682;
+  --bs-pink-600: color-mix(in lab, var(--bs-black) 16%, #d33682);
+  --bs-pink-700: color-mix(in lab, var(--bs-black) 32%, #d33682);
+  --bs-pink-800: color-mix(in lab, var(--bs-black) 48%, #d33682);
+  --bs-pink-900: color-mix(in lab, var(--bs-black) 64%, #d33682);
+  --bs-pink-950: color-mix(in lab, var(--bs-black) 76%, #d33682);
+  --bs-pink-975: color-mix(in lab, var(--bs-black) 88%, #d33682);
+
+  --bs-purple-025: color-mix(in lab, var(--bs-white) 94%, #6c71c4);
+  --bs-purple-050: color-mix(in lab, var(--bs-white) 90%, #6c71c4);
+  --bs-purple-100: color-mix(in lab, var(--bs-white) 80%, #6c71c4);
+  --bs-purple-200: color-mix(in lab, var(--bs-white) 60%, #6c71c4);
+  --bs-purple-300: color-mix(in lab, var(--bs-white) 40%, #6c71c4);
+  --bs-purple-400: color-mix(in lab, var(--bs-white) 20%, #6c71c4);
+  --bs-purple-500: #6c71c4;
+  --bs-purple-600: color-mix(in lab, var(--bs-black) 16%, #6c71c4);
+  --bs-purple-700: color-mix(in lab, var(--bs-black) 32%, #6c71c4);
+  --bs-purple-800: color-mix(in lab, var(--bs-black) 48%, #6c71c4);
+  --bs-purple-900: color-mix(in lab, var(--bs-black) 64%, #6c71c4);
+  --bs-purple-950: color-mix(in lab, var(--bs-black) 76%, #6c71c4);
+  --bs-purple-975: color-mix(in lab, var(--bs-black) 88%, #6c71c4);
+
+  --bs-red-025: color-mix(in lab, var(--bs-white) 94%, #dc322f);
+  --bs-red-050: color-mix(in lab, var(--bs-white) 90%, #dc322f);
+  --bs-red-100: color-mix(in lab, var(--bs-white) 80%, #dc322f);
+  --bs-red-200: color-mix(in lab, var(--bs-white) 60%, #dc322f);
+  --bs-red-300: color-mix(in lab, var(--bs-white) 40%, #dc322f);
+  --bs-red-400: color-mix(in lab, var(--bs-white) 20%, #dc322f);
+  --bs-red-500: #dc322f;
+  --bs-red-600: color-mix(in lab, var(--bs-black) 16%, #dc322f);
+  --bs-red-700: color-mix(in lab, var(--bs-black) 32%, #dc322f);
+  --bs-red-800: color-mix(in lab, var(--bs-black) 48%, #dc322f);
+  --bs-red-900: color-mix(in lab, var(--bs-black) 64%, #dc322f);
+  --bs-red-950: color-mix(in lab, var(--bs-black) 76%, #dc322f);
+  --bs-red-975: color-mix(in lab, var(--bs-black) 88%, #dc322f);
+
+  --bs-yellow-025: color-mix(in lab, var(--bs-white) 94%, #b58900);
+  --bs-yellow-050: color-mix(in lab, var(--bs-white) 90%, #b58900);
+  --bs-yellow-100: color-mix(in lab, var(--bs-white) 80%, #b58900);
+  --bs-yellow-200: color-mix(in lab, var(--bs-white) 60%, #b58900);
+  --bs-yellow-300: color-mix(in lab, var(--bs-white) 40%, #b58900);
+  --bs-yellow-400: color-mix(in lab, var(--bs-white) 20%, #b58900);
+  --bs-yellow-500: #b58900;
+  --bs-yellow-600: color-mix(in lab, var(--bs-black) 16%, #b58900);
+  --bs-yellow-700: color-mix(in lab, var(--bs-black) 32%, #b58900);
+  --bs-yellow-800: color-mix(in lab, var(--bs-black) 48%, #b58900);
+  --bs-yellow-900: color-mix(in lab, var(--bs-black) 64%, #b58900);
+  --bs-yellow-950: color-mix(in lab, var(--bs-black) 76%, #b58900);
+  --bs-yellow-975: color-mix(in lab, var(--bs-black) 88%, #b58900);
+
+  /* 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(#073642, #eee8d5);
+  --bs-fg-body: light-dark(#586e75, #93a1a1);
+  --bs-fg-2: light-dark(#657b83, #839496);
+
+  /* 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-gray-975);
+}

data/app/stylesheets/theme/tokyo_night.css

@@ -0,0 +1,189 @@
+/* Tokyo Night, enkia — https://github.com/enkia/tokyo-night-vscode-theme
+   Tokyo Night Day is the light page and Tokyo Night's own the dark one.
+   its magenta serves purple and pink, 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: #e1e2e7;
+  --bs-black: #1a1b26;
+
+  /* The neutrals, which every surface, border and text token Bootstrap ships
+     derives from. */
+  --bs-gray-025: color-mix(in lab, var(--bs-white) 94%, #8189a8);
+  --bs-gray-050: color-mix(in lab, var(--bs-white) 90%, #8189a8);
+  --bs-gray-100: color-mix(in lab, var(--bs-white) 80%, #8189a8);
+  --bs-gray-200: color-mix(in lab, var(--bs-white) 60%, #8189a8);
+  --bs-gray-300: color-mix(in lab, var(--bs-white) 40%, #8189a8);
+  --bs-gray-400: color-mix(in lab, var(--bs-white) 20%, #8189a8);
+  --bs-gray-500: #8189a8;
+  --bs-gray-600: color-mix(in lab, var(--bs-black) 16%, #8189a8);
+  --bs-gray-700: color-mix(in lab, var(--bs-black) 32%, #8189a8);
+  --bs-gray-800: color-mix(in lab, var(--bs-black) 48%, #8189a8);
+  --bs-gray-900: color-mix(in lab, var(--bs-black) 64%, #8189a8);
+  --bs-gray-950: color-mix(in lab, var(--bs-black) 76%, #8189a8);
+  --bs-gray-975: color-mix(in lab, var(--bs-black) 88%, #8189a8);
+
+  --bs-blue-025: color-mix(in lab, var(--bs-white) 94%, #7aa2f7);
+  --bs-blue-050: color-mix(in lab, var(--bs-white) 90%, #7aa2f7);
+  --bs-blue-100: color-mix(in lab, var(--bs-white) 80%, #7aa2f7);
+  --bs-blue-200: color-mix(in lab, var(--bs-white) 60%, #7aa2f7);
+  --bs-blue-300: color-mix(in lab, var(--bs-white) 40%, #7aa2f7);
+  --bs-blue-400: color-mix(in lab, var(--bs-white) 20%, #7aa2f7);
+  --bs-blue-500: #7aa2f7;
+  --bs-blue-600: color-mix(in lab, var(--bs-black) 16%, #7aa2f7);
+  --bs-blue-700: color-mix(in lab, var(--bs-black) 32%, #7aa2f7);
+  --bs-blue-800: color-mix(in lab, var(--bs-black) 48%, #7aa2f7);
+  --bs-blue-900: color-mix(in lab, var(--bs-black) 64%, #7aa2f7);
+  --bs-blue-950: color-mix(in lab, var(--bs-black) 76%, #7aa2f7);
+  --bs-blue-975: color-mix(in lab, var(--bs-black) 88%, #7aa2f7);
+
+  --bs-brown-025: color-mix(in lab, var(--bs-white) 94%, #ff9e64);
+  --bs-brown-050: color-mix(in lab, var(--bs-white) 90%, #ff9e64);
+  --bs-brown-100: color-mix(in lab, var(--bs-white) 80%, #ff9e64);
+  --bs-brown-200: color-mix(in lab, var(--bs-white) 60%, #ff9e64);
+  --bs-brown-300: color-mix(in lab, var(--bs-white) 40%, #ff9e64);
+  --bs-brown-400: color-mix(in lab, var(--bs-white) 20%, #ff9e64);
+  --bs-brown-500: #ff9e64;
+  --bs-brown-600: color-mix(in lab, var(--bs-black) 16%, #ff9e64);
+  --bs-brown-700: color-mix(in lab, var(--bs-black) 32%, #ff9e64);
+  --bs-brown-800: color-mix(in lab, var(--bs-black) 48%, #ff9e64);
+  --bs-brown-900: color-mix(in lab, var(--bs-black) 64%, #ff9e64);
+  --bs-brown-950: color-mix(in lab, var(--bs-black) 76%, #ff9e64);
+  --bs-brown-975: color-mix(in lab, var(--bs-black) 88%, #ff9e64);
+
+  --bs-cyan-025: color-mix(in lab, var(--bs-white) 94%, #7dcfff);
+  --bs-cyan-050: color-mix(in lab, var(--bs-white) 90%, #7dcfff);
+  --bs-cyan-100: color-mix(in lab, var(--bs-white) 80%, #7dcfff);
+  --bs-cyan-200: color-mix(in lab, var(--bs-white) 60%, #7dcfff);
+  --bs-cyan-300: color-mix(in lab, var(--bs-white) 40%, #7dcfff);
+  --bs-cyan-400: color-mix(in lab, var(--bs-white) 20%, #7dcfff);
+  --bs-cyan-500: #7dcfff;
+  --bs-cyan-600: color-mix(in lab, var(--bs-black) 16%, #7dcfff);
+  --bs-cyan-700: color-mix(in lab, var(--bs-black) 32%, #7dcfff);
+  --bs-cyan-800: color-mix(in lab, var(--bs-black) 48%, #7dcfff);
+  --bs-cyan-900: color-mix(in lab, var(--bs-black) 64%, #7dcfff);
+  --bs-cyan-950: color-mix(in lab, var(--bs-black) 76%, #7dcfff);
+  --bs-cyan-975: color-mix(in lab, var(--bs-black) 88%, #7dcfff);
+
+  --bs-green-025: color-mix(in lab, var(--bs-white) 94%, #9ece6a);
+  --bs-green-050: color-mix(in lab, var(--bs-white) 90%, #9ece6a);
+  --bs-green-100: color-mix(in lab, var(--bs-white) 80%, #9ece6a);
+  --bs-green-200: color-mix(in lab, var(--bs-white) 60%, #9ece6a);
+  --bs-green-300: color-mix(in lab, var(--bs-white) 40%, #9ece6a);
+  --bs-green-400: color-mix(in lab, var(--bs-white) 20%, #9ece6a);
+  --bs-green-500: #9ece6a;
+  --bs-green-600: color-mix(in lab, var(--bs-black) 16%, #9ece6a);
+  --bs-green-700: color-mix(in lab, var(--bs-black) 32%, #9ece6a);
+  --bs-green-800: color-mix(in lab, var(--bs-black) 48%, #9ece6a);
+  --bs-green-900: color-mix(in lab, var(--bs-black) 64%, #9ece6a);
+  --bs-green-950: color-mix(in lab, var(--bs-black) 76%, #9ece6a);
+  --bs-green-975: color-mix(in lab, var(--bs-black) 88%, #9ece6a);
+
+  --bs-orange-025: color-mix(in lab, var(--bs-white) 94%, #ff9e64);
+  --bs-orange-050: color-mix(in lab, var(--bs-white) 90%, #ff9e64);
+  --bs-orange-100: color-mix(in lab, var(--bs-white) 80%, #ff9e64);
+  --bs-orange-200: color-mix(in lab, var(--bs-white) 60%, #ff9e64);
+  --bs-orange-300: color-mix(in lab, var(--bs-white) 40%, #ff9e64);
+  --bs-orange-400: color-mix(in lab, var(--bs-white) 20%, #ff9e64);
+  --bs-orange-500: #ff9e64;
+  --bs-orange-600: color-mix(in lab, var(--bs-black) 16%, #ff9e64);
+  --bs-orange-700: color-mix(in lab, var(--bs-black) 32%, #ff9e64);
+  --bs-orange-800: color-mix(in lab, var(--bs-black) 48%, #ff9e64);
+  --bs-orange-900: color-mix(in lab, var(--bs-black) 64%, #ff9e64);
+  --bs-orange-950: color-mix(in lab, var(--bs-black) 76%, #ff9e64);
+  --bs-orange-975: color-mix(in lab, var(--bs-black) 88%, #ff9e64);
+
+  --bs-pink-025: color-mix(in lab, var(--bs-white) 94%, #bb9af7);
+  --bs-pink-050: color-mix(in lab, var(--bs-white) 90%, #bb9af7);
+  --bs-pink-100: color-mix(in lab, var(--bs-white) 80%, #bb9af7);
+  --bs-pink-200: color-mix(in lab, var(--bs-white) 60%, #bb9af7);
+  --bs-pink-300: color-mix(in lab, var(--bs-white) 40%, #bb9af7);
+  --bs-pink-400: color-mix(in lab, var(--bs-white) 20%, #bb9af7);
+  --bs-pink-500: #bb9af7;
+  --bs-pink-600: color-mix(in lab, var(--bs-black) 16%, #bb9af7);
+  --bs-pink-700: color-mix(in lab, var(--bs-black) 32%, #bb9af7);
+  --bs-pink-800: color-mix(in lab, var(--bs-black) 48%, #bb9af7);
+  --bs-pink-900: color-mix(in lab, var(--bs-black) 64%, #bb9af7);
+  --bs-pink-950: color-mix(in lab, var(--bs-black) 76%, #bb9af7);
+  --bs-pink-975: color-mix(in lab, var(--bs-black) 88%, #bb9af7);
+
+  --bs-purple-025: color-mix(in lab, var(--bs-white) 94%, #bb9af7);
+  --bs-purple-050: color-mix(in lab, var(--bs-white) 90%, #bb9af7);
+  --bs-purple-100: color-mix(in lab, var(--bs-white) 80%, #bb9af7);
+  --bs-purple-200: color-mix(in lab, var(--bs-white) 60%, #bb9af7);
+  --bs-purple-300: color-mix(in lab, var(--bs-white) 40%, #bb9af7);
+  --bs-purple-400: color-mix(in lab, var(--bs-white) 20%, #bb9af7);
+  --bs-purple-500: #bb9af7;
+  --bs-purple-600: color-mix(in lab, var(--bs-black) 16%, #bb9af7);
+  --bs-purple-700: color-mix(in lab, var(--bs-black) 32%, #bb9af7);
+  --bs-purple-800: color-mix(in lab, var(--bs-black) 48%, #bb9af7);
+  --bs-purple-900: color-mix(in lab, var(--bs-black) 64%, #bb9af7);
+  --bs-purple-950: color-mix(in lab, var(--bs-black) 76%, #bb9af7);
+  --bs-purple-975: color-mix(in lab, var(--bs-black) 88%, #bb9af7);
+
+  --bs-red-025: color-mix(in lab, var(--bs-white) 94%, #f7768e);
+  --bs-red-050: color-mix(in lab, var(--bs-white) 90%, #f7768e);
+  --bs-red-100: color-mix(in lab, var(--bs-white) 80%, #f7768e);
+  --bs-red-200: color-mix(in lab, var(--bs-white) 60%, #f7768e);
+  --bs-red-300: color-mix(in lab, var(--bs-white) 40%, #f7768e);
+  --bs-red-400: color-mix(in lab, var(--bs-white) 20%, #f7768e);
+  --bs-red-500: #f7768e;
+  --bs-red-600: color-mix(in lab, var(--bs-black) 16%, #f7768e);
+  --bs-red-700: color-mix(in lab, var(--bs-black) 32%, #f7768e);
+  --bs-red-800: color-mix(in lab, var(--bs-black) 48%, #f7768e);
+  --bs-red-900: color-mix(in lab, var(--bs-black) 64%, #f7768e);
+  --bs-red-950: color-mix(in lab, var(--bs-black) 76%, #f7768e);
+  --bs-red-975: color-mix(in lab, var(--bs-black) 88%, #f7768e);
+
+  --bs-yellow-025: color-mix(in lab, var(--bs-white) 94%, #e0af68);
+  --bs-yellow-050: color-mix(in lab, var(--bs-white) 90%, #e0af68);
+  --bs-yellow-100: color-mix(in lab, var(--bs-white) 80%, #e0af68);
+  --bs-yellow-200: color-mix(in lab, var(--bs-white) 60%, #e0af68);
+  --bs-yellow-300: color-mix(in lab, var(--bs-white) 40%, #e0af68);
+  --bs-yellow-400: color-mix(in lab, var(--bs-white) 20%, #e0af68);
+  --bs-yellow-500: #e0af68;
+  --bs-yellow-600: color-mix(in lab, var(--bs-black) 16%, #e0af68);
+  --bs-yellow-700: color-mix(in lab, var(--bs-black) 32%, #e0af68);
+  --bs-yellow-800: color-mix(in lab, var(--bs-black) 48%, #e0af68);
+  --bs-yellow-900: color-mix(in lab, var(--bs-black) 64%, #e0af68);
+  --bs-yellow-950: color-mix(in lab, var(--bs-black) 76%, #e0af68);
+  --bs-yellow-975: color-mix(in lab, var(--bs-black) 88%, #e0af68);
+
+  /* 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(#1a1b26, #c0caf5);
+  --bs-fg-body: light-dark(#343b58, #a9b1d6);
+  --bs-fg-2: light-dark(#565f89, #8b93b5);
+
+  /* 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);
+}

data/build.mjs

@@ -0,0 +1,21 @@
+// Builds the stylesheet and the script into public/bh/, under the prefix the engine serves them
+// at, which is also what the gem ships. Every URL inside is relative to the file holding it,
+// so one build answers from the gem and from a CDN carrying the package alike.
+import { build } from 'esbuild'
+import { cpSync, mkdirSync } from 'node:fs'
+
+await build({
+  entryPoints: ['app/javascript/bh.js', 'app/stylesheets/bh.css'],
+  bundle: true,
+  minify: true,
+  format: 'esm',
+  outdir: 'public/bh',
+  entryNames: '[ext]/[name]',
+  alias: { bootstrap: './vendor/bootstrap.bundle.min.js' },
+  logLevel: 'info',
+})
+
+// The nine palettes are not bundled: a page links one at a time and swaps it for another,
+// which is the whole point of them, so they are copied beside the stylesheet as they are.
+mkdirSync('public/bh/theme', { recursive: true })
+cpSync('app/stylesheets/theme', 'public/bh/theme', { recursive: true })

data/config/locales/bh.en.yml

@@ -0,0 +1,13 @@
+en:
+  bh:
+    ago: '%{time} ago'
+    all: All
+    ask: Ask a question
+    clear: Clear
+    close: Close
+    more: '%{first} + %{count} more'
+    no_results: Nothing matches that
+    okay: Okay
+    search: Search
+    send: Send
+    typing: Typing

data/lib/bh/engine.rb

@@ -1,13 +1,28 @@
-require_relative 'bootstrap_helpers'
+# rails/engine alone raises NoMethodError: railtie.rb calls delegate_missing_to too early.
+require 'rails'
 
 module Bh
-  class Engine < Rails::Engine
-    initializer 'bh.view_helpers' do
-      ActiveSupport.on_load(:action_view) { include Bh::BootstrapHelpers }
-    end
+  # Hooks the gem into a host app: serves the built stylesheet and script, and the helpers.
+  class Engine < ::Rails::Engine
+    # Where the built files answer from: one prefix of the gem's own, so a host already
+    # serving `/css` from somewhere else keeps it. The slash is kept, since `Rack::Static`
+    # matches on `start_with?` and `/bh` would swallow a host's own `/bhutan`.
+    PREFIX = '/bh/'.freeze
+
+    # Neither URL carries a version, so both are asked for again on every full load and
+    # answered `304 Not Modified` while the file they name still stands.
+    HEADERS = [[:all, { 'cache-control' => 'no-cache' }]].freeze
 
+    # Before `Rails::Rack::Logger`, so fetching the stylesheet writes no `Started GET` line,
+    # and cascading, so a host route under the prefix still answers.
     initializer 'bh.assets' do |app|
-      app.config.assets.paths << root.join('app/javascript')
+      app.middleware.insert_before Rails::Rack::Logger, Rack::Static,
+                                   urls: [PREFIX], root: Engine.root.join('public').to_s,
+                                   header_rules: HEADERS, cascade: true
+    end
+
+    initializer 'bh.helpers' do
+      ActiveSupport.on_load(:action_view) { include Bh::Helpers }
     end
   end
 end

data/lib/bh/form_builder/comboboxes.rb

@@ -0,0 +1,38 @@
+require 'action_view'
+
+module Bh
+  class FormBuilder < ActionView::Helpers::FormBuilder
+    # The menu the bundle draws as a combobox: Bootstrap's toggle and a searchable menu built
+    # from a select it then hides, which stays the one thing the form submits.
+    module Comboboxes
+      # The words the menu is read by, which belong to the gem rather than to a page.
+      WORDS = %i[all clear more no_results search].freeze
+
+      # `method` as a combobox over `choices` -- the select `form.select` would draw, carrying
+      # what the bundle needs to draw it as one instead. Every argument is that select's, and
+      # its own `:prompt` is what the toggle says before anything is picked. The words it is
+      # searched, cleared and emptied by are the gem's, in the reader's own language, and
+      # `data` given in `html_options` is kept over any of them.
+      def combobox(method, choices = nil, options = {}, html_options = {}, &)
+        data = { controller: 'combobox', combobox_placeholder_value: options[:prompt],
+                 **bh_combobox_words, **html_options.fetch(:data, {}), }
+
+        select method, choices, options, html_options.merge(data: data), &
+      end
+
+    private
+
+      # `all` and `more` are Stimulus values the menu reads; the rest are plain attributes.
+      # `more` is a template the bundle fills, so it is asked for with its own placeholders as
+      # their values -- I18n would otherwise raise on the two it cannot fill.
+      def bh_combobox_words
+        WORDS.to_h do |word|
+          # rubocop:disable-next Style/FormatStringToken -- the bundle fills these, not Ruby
+          said = @template.t "bh.#{word}", first: '%{first}', count: '%{count}'
+
+          [%i[all more].include?(word) ? :"combobox_#{word}_value" : word, said]
+        end
+      end
+    end
+  end
+end

data/lib/bh/form_builder/controls.rb

@@ -0,0 +1,67 @@
+require 'action_view'
+
+module Bh
+  class FormBuilder < ActionView::Helpers::FormBuilder
+    # Every other kind of field, at the one size this builder draws them: a page says which kind
+    # it wants and nothing about how it looks. Rails hands an undressed control to whatever it
+    # has no method for here, which is how a Bootstrap class ends up written in a view.
+    module Controls
+      # What a menu wears: the control's size, so a menu and a box beside it line up.
+      MENU = 'form-select form-select-lg'
+
+      # What a box or a circle that is ticked wears.
+      CHECK = 'form-check-input'
+
+      # An email address.
+      def email_field(method, options = {}) = super(method, with_classes(options, CONTROL))
+
+      # A number, which brings the keyboard for one.
+      def number_field(method, options = {}) = super(method, with_classes(options, CONTROL))
+
+      # A password, which no name of a column earns on its own.
+      def password_field(method, options = {}) = super(method, with_classes(options, CONTROL))
+
+      # A term to search by.
+      def search_field(method, options = {}) = super(method, with_classes(options, CONTROL))
+
+      # A web address.
+      def url_field(method, options = {}) = super(method, with_classes(options, CONTROL))
+
+      # A day.
+      def date_field(method, options = {}) = super(method, with_classes(options, CONTROL))
+
+      # A time of day.
+      def time_field(method, options = {}) = super(method, with_classes(options, CONTROL))
+
+      # A day and a time together.
+      def datetime_field(method, options = {}) = super(method, with_classes(options, CONTROL))
+
+      # More than a line of words.
+      def text_area(method, options = {}) = super(method, with_classes(options, CONTROL))
+
+      # A menu of what a column may be.
+      def select(method, choices = nil, options = {}, html_options = {}, &)
+        super(method, choices, options, with_classes(html_options, MENU), &)
+      end
+
+      # One of several, ticked.
+      def check_box(method, options = {}, checked = '1', unchecked = '0')
+        super(method, with_classes(options, CHECK), checked, unchecked)
+      end
+
+      # One of several, and only one.
+      def radio_button(method, value, options = {})
+        super(method, value, with_classes(options, CHECK))
+      end
+
+      # A box and the words beside it, which is the one place words sit after a control rather
+      # than over it -- so they are not the label a field wears, and are written here instead.
+      def check(method, text, options = {})
+        words = @template.label_tag field_id(method), text, class: 'form-check-label'
+        inside = @template.safe_join [check_box(method, options), words]
+
+        @template.tag.div inside, class: 'form-check'
+      end
+    end
+  end
+end

data/lib/bh/form_builder/pins.rb

@@ -0,0 +1,30 @@
+require 'action_view'
+
+module Bh
+  class FormBuilder < ActionView::Helpers::FormBuilder
+    # The field Rails has none of: the six slots a code is typed into.
+    module Pins
+      # What the one real PIN field carries: digits only, six of them, offered by the phone from
+      # the text that brought them, and drawn as slots by Bootstrap and the `otp` controller.
+      PIN = {
+        class: 'otp-input', inputmode: :numeric, pattern: '[0-9]{6}', minlength: 6, maxlength: 6,
+        autocomplete: 'one-time-code',
+      }.freeze
+
+      # `method` as Bootstrap's OTP input: one real field rendered as six slots, the slots
+      # reddened where the record refused the code. Every option is the field's. The field is
+      # drawn by the view rather than this builder on purpose, so it is never dressed as a
+      # `form-control`: a refused one would wear a red box of its own around slots that say so.
+      def pin_field(method, **options)
+        invalid = @object.respond_to?(:errors) && @object.errors.include?(method)
+        classes = @template.class_names 'otp otp-lg', 'is-invalid': invalid
+
+        field = with_classes PIN.merge(options), PIN[:class]
+
+        @template.tag.div class: classes, data: { controller: 'otp', bs_otp: true } do
+          @template.text_field @object_name, method, **field, object: @object
+        end
+      end
+    end
+  end
+end