recourse 4.4.4 → 4.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9a2407f2f271c099137cb116f77873a8e498e106f32ebe70e6b4ad20c789a987
-  data.tar.gz: bc9c0f80bf263983fc51f4af82eb17675564b9f17eccb794284fec10f7ee59eb
+  metadata.gz: 314d13d5c8a4e44ae907b432a9f8c37d3c4f3401cb12856127681077171c969f
+  data.tar.gz: c389ca81f7dbad23c1f185b4f50ec479f901c7dace6d57d94020be9b811f8c80
 SHA512:
-  metadata.gz: b9f10651a71c2e65a15c8f6a1f5c7d33b5ff67b516e9a528b3220ffa9e273cb88423afdda64d6301a9a09ab97614a0c7dfa701f15d1ea4bb1bc11b2a2bcedf25
-  data.tar.gz: fd3b958dfeddf61fc1d368435e6675d9103d102d367ada4309f89c0b135a3c5da26e3069a7ba4ceb998881e6cd9a04bdb2041f6004e1729124a54b5290d49a44
+  metadata.gz: 1b1492f1befaab5648685a8894d255a70a376c3dbd076218ebe68d0cc5c88345e6f1debcc7598745fd0ec8b68151967bd896730b0dc50b9c8fa282bcb5dfcdf0
+  data.tar.gz: 213e0a0eefc0137b315ac8bfb35861286b72958edd686798a820a5a8388b627bd0f5905be5aa682027f4333eccb50291a42361788781a66d9b226a8ff9f19f12

data/CHANGELOG.md

@@ -5,6 +5,47 @@ All notable changes to this project will be documented in this file.
 For more information about changelogs, check [Keep a Changelog](http://keepachangelog.com) and
 [Vandamme](http://tech-angels.github.io/vandamme).
 
+## 4.6.0 - 2026-09-08
+
+* [Fix] On a phone the `Displaying items` sentence is centered over the pagination links, which already were
+
+* [Feature] A phone reads the chrome as icons, and a pair of arrows at the foot of the sidebar puts the words back
+
+  The sidebar is one centered row of icons at the very top of the page, above the trail;
+  a crumb is its icon, a tab its icon and its figure, the foot's controls their icons. The
+  words are there for a screen reader, and for anyone who taps the arrows: they write a
+  `recourse-density` cookie and the server draws every page with the words beside the icons
+  until the next tap. A column at 768px and wider is unchanged. The arrows on that control
+  are unicon 3.6.0's `:expand` and `:collapse`, which the gem now requires.
+* [Feature] On a phone, a page under a record puts its search form and its buttons on rows below the trail
+
+  Two or three crumbs left the form the width of `Filter by na`. An index at the top of
+  the sidebar keeps its form beside its one crumb.
+
+* [Feature] `Recourse.theme` draws every page in one of eight editor color schemes, and the sidebar's moon rotates through them
+
+  Back from recourse 4's development tree, where it was cut for the release: Dawn,
+  Dracula, Gruvbox, Monokai, Nord, One Dark, Solarized and Tokyo Night, each a
+  stylesheet served from the engine that repaints Bootstrap's ramps in both modes, with
+  Bootstrap's own palette named `:bootstrap` beside them. A click on the moon or the sun
+  moves the page to another palette and into the other mode, and the reader's choice is
+  kept in their browser. `Recourse.color` still names the primary family on top of any.
+
+## 4.5.0 - 2026-09-08
+
+* [Fix] A row with a bookmark square is as tall as a row without one: the square no longer claims a button's minimum height
+
+* [Feature] The arrow after a web address opens it in a new tab, while the words still open it in this one
+
+* [Fix] A production rake task boots without Rails 8.2 warning that Action Controller and Active Record were loaded early
+
+  `recourses` defined each missing controller as the routes drew, which loaded the host's
+  `RecoursesController` and everything above it, and asked a nested name for its model the
+  same way. A boot that will not eager load — a `db:migrate` on release — draws its routes
+  before it is done, and Rails 8.2 logs a warning for every component loaded then. The
+  controller now waits for the app's first request or job, and the model is looked up as a
+  constant, without loading it.
+
 ## 4.4.4 - 2026-09-08
 
 * [Fix] On a phone the search form keeps its place beside the breadcrumb once a filter is picked

data/README.md

@@ -124,13 +124,18 @@ Here are some bonus features the gem provides. Customize them by editing their v
 your `config/initializers/recourse.rb` file:
 
 - [`Recourse.color=`](https://rubydoc.info/gems/recourse/Recourse#color%3D-class_method):
-  which Bootstrap family is primary on every page. Readers switch light and dark themselves.
+  which Bootstrap family is primary on every page.
+- [`Recourse.theme=`](https://rubydoc.info/gems/recourse/Recourse#theme%3D-class_method):
+  which color scheme every page is drawn in, one of `Recourse::THEMES.keys` — eight from
+  code editors and Bootstrap's own. Readers rotate through them, light and dark, from the
+  moon at the foot of the sidebar; their choice stays in their browser.
 - [`Recourse.bookmarks=`](https://rubydoc.info/gems/recourse/Recourse#bookmarks%3D-class_method):
   a Proc answering the viewer's bookmark rows. Every table of a model with a `has_many`
   at that class then opens with a square to keep a row by, kept rows first.
 
 ```ruby
 Recourse.color = :orange
+Recourse.theme = :nord
 Recourse.bookmarks = -> { Keepsake.where agent: Current.agent }
 ```
 

data/app/javascript/recourse/density_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from '/recourse/stimulus.js'
+
+// The arrows at the foot of the sidebar, drawn on a phone alone: a tap puts the words
+// back beside every icon the chrome shows — the sidebar's entries, the crumbs, the tabs,
+// the foot's own controls — and the next tap takes them away again. The choice goes to
+// the server in a cookie, the way the zone does, so the next page is drawn with the
+// words in rather than drawn without them and widened once a script runs.
+export default class extends Controller {
+  static values = { storage: String }
+
+  toggle() {
+    const expanded = document.body.classList.toggle('recourse-expanded')
+    const density = expanded ? 'expanded' : 'compact'
+
+    document.cookie = `${this.storageValue}=${density}; path=/; max-age=31536000; samesite=lax`
+  }
+}

data/app/javascript/recourse/scheme_controller.js

@@ -1,36 +1,45 @@
 import { Controller } from '/recourse/stimulus.js'
 
-// The sidebar's one control over how a page looks. A click moves it into the mode it is
-// not in, which is what the icon promises: a moon while the page is light, a sun while
-// it is dark. The choice belongs to the reader rather than to the app, so it is kept in
-// their browser — the layout's own script is what puts it back before the first paint,
-// a controller connecting far too late for that.
+// The sidebar's one control over how a page looks. A click moves it to another palette
+// and into the mode it is not in, which is what the icon promises: a moon while the page
+// is light, a sun while it is dark. The choice belongs to the reader rather than to the
+// app, so it is kept in their browser — the layout's own script is what puts it back
+// before the first paint, a controller connecting far too late for that.
 export default class extends Controller {
-  static values = { storage: String }
+  static values = { themes: Array, path: String, storage: String }
 
-  // Turbo merges the head on a visit, and the layout's script runs only on a full load.
-  // The sidebar is drawn again on every visit, so connecting is the moment to say it again.
+  // Turbo merges the head on a visit, which puts the palette the server chose back over
+  // the one the reader picked, and the layout's script runs only on a full load. The
+  // sidebar is drawn again on every visit, so connecting is the moment to say it again.
   connect() {
     const stored = this.#stored()
 
-    if (stored) { this.#apply(stored.mode) }
+    if (stored) { this.#apply(stored.theme, stored.mode) }
   }
 
-  // The other mode, remembered.
+  // Another palette, in the other mode. Random rather than in order: the eight have no
+  // order that means anything. Excluding the one showing is what stops a click looking
+  // like it did nothing, which is the whole risk of picking at random.
   rotate() {
     const mode = this.#mode() === 'dark' ? 'light' : 'dark'
+    const others = this.themesValue.filter((theme) => theme !== this.#theme())
+    const theme = others[Math.floor(Math.random() * others.length)]
 
-    this.#apply(mode)
-    localStorage.setItem(this.storageValue, JSON.stringify({ mode }))
+    this.#apply(theme, mode)
+    localStorage.setItem(this.storageValue, JSON.stringify({ theme, mode }))
   }
 
-  // The mode goes onto the element every `light-dark()` on the page is resolved against.
-  // Checked first: the storage is the reader's own, but what comes back out of it is
-  // still not something to write onto the page unread.
-  #apply(mode) {
+  // The mode onto the element every `light-dark()` on the page is resolved against, and
+  // the palette onto the one link that serves one. A name is checked against the list
+  // the server sent: the storage is the reader's own, but what comes back out of it is
+  // still not something to put in a URL unread.
+  #apply(theme, mode) {
     if (mode === 'light' || mode === 'dark') {
       document.documentElement.dataset.bsTheme = mode
     }
+    if (!this.themesValue.includes(theme)) { return }
+
+    this.#link().href = `${this.pathValue}/${theme}.css`
   }
 
   // What the reader picked last, or nothing at all where they never have.
@@ -48,4 +57,43 @@ export default class extends Controller {
     return document.documentElement.dataset.bsTheme ||
       (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
   }
+
+  // Which palette is showing, read off the link rather than remembered, so a reader who
+  // cleared their storage still moves on from the one in front of them.
+  #theme() {
+    const link = this.#current()
+
+    return link ? link.href.split('/').pop().replace('.css', '') : null
+  }
+
+  // The palette the page is drawn in, which is the *last* of these links rather than the
+  // first. Turbo's head merge appends a stylesheet the new head has and the old one does
+  // not — it never replaces one — and the server names the same palette on every page,
+  // so a visit made after the reader chose leaves two links and the browser obeys the
+  // one at the end. Writing to the other would change nothing anybody can see.
+  #current() {
+    const links = document.querySelectorAll('link[data-recourse-theme]')
+
+    return links[links.length - 1]
+  }
+
+  // The one link a palette is served through: whichever is in force, with any the merge
+  // left behind it taken away, and a new one where a host named no palette at all and
+  // there is none in the head to find.
+  #link() {
+    const links = [...document.querySelectorAll('link[data-recourse-theme]')]
+    const link = links.pop() || this.#appended()
+    links.forEach((stale) => stale.remove())
+
+    return link
+  }
+
+  #appended() {
+    const link = document.createElement('link')
+    link.rel = 'stylesheet'
+    link.dataset.recourseTheme = ''
+    document.head.appendChild(link)
+
+    return link
+  }
 }

data/app/stylesheets/recourse/themes/bootstrap.css

@@ -0,0 +1,11 @@
+/* Bootstrap's own palette, and the only file here that declares nothing.
+
+   The eight beside it work by overriding upstream's `:root`, so having upstream's
+   palette back is a matter of dropping their block rather than of writing one — and
+   swapping this link in is how the sidebar's toggle drops it. `Recourse.theme = nil`
+   and `:bootstrap` are the same look by two routes: the first links no stylesheet at
+   all, the second links this one.
+
+   It is named so the toggle can reach it. A reader who rotates through nine palettes
+   and never finds the one the pages started in has been shown a door with no handle
+   on the inside. */

data/app/stylesheets/recourse/themes/dawn.css

@@ -0,0 +1,189 @@
+/* Rose Pine Dawn, Rose Pine — https://rosepinetheme.com/palette/
+   Dawn is the light page and Rose Pine's own base the dark one. pine
+   serves blue, foam cyan, rose pink, love red, iris purple, gold yellow,
+   orange and brown. green is derived: Rose Pine carries none.
+
+   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: #faf4ed;
+  --bs-black: #191724;
+
+  /* The neutrals, which every surface, border and text token Bootstrap ships
+     derives from. */
+  --bs-gray-025: color-mix(in lab, var(--bs-white) 94%, #9893a5);
+  --bs-gray-050: color-mix(in lab, var(--bs-white) 90%, #9893a5);
+  --bs-gray-100: color-mix(in lab, var(--bs-white) 80%, #9893a5);
+  --bs-gray-200: color-mix(in lab, var(--bs-white) 60%, #9893a5);
+  --bs-gray-300: color-mix(in lab, var(--bs-white) 40%, #9893a5);
+  --bs-gray-400: color-mix(in lab, var(--bs-white) 20%, #9893a5);
+  --bs-gray-500: #9893a5;
+  --bs-gray-600: color-mix(in lab, var(--bs-black) 16%, #9893a5);
+  --bs-gray-700: color-mix(in lab, var(--bs-black) 32%, #9893a5);
+  --bs-gray-800: color-mix(in lab, var(--bs-black) 48%, #9893a5);
+  --bs-gray-900: color-mix(in lab, var(--bs-black) 64%, #9893a5);
+  --bs-gray-950: color-mix(in lab, var(--bs-black) 76%, #9893a5);
+  --bs-gray-975: color-mix(in lab, var(--bs-black) 88%, #9893a5);
+
+  --bs-blue-025: color-mix(in lab, var(--bs-white) 94%, #286983);
+  --bs-blue-050: color-mix(in lab, var(--bs-white) 90%, #286983);
+  --bs-blue-100: color-mix(in lab, var(--bs-white) 80%, #286983);
+  --bs-blue-200: color-mix(in lab, var(--bs-white) 60%, #286983);
+  --bs-blue-300: color-mix(in lab, var(--bs-white) 40%, #286983);
+  --bs-blue-400: color-mix(in lab, var(--bs-white) 20%, #286983);
+  --bs-blue-500: #286983;
+  --bs-blue-600: color-mix(in lab, var(--bs-black) 16%, #286983);
+  --bs-blue-700: color-mix(in lab, var(--bs-black) 32%, #286983);
+  --bs-blue-800: color-mix(in lab, var(--bs-black) 48%, #286983);
+  --bs-blue-900: color-mix(in lab, var(--bs-black) 64%, #286983);
+  --bs-blue-950: color-mix(in lab, var(--bs-black) 76%, #286983);
+  --bs-blue-975: color-mix(in lab, var(--bs-black) 88%, #286983);
+
+  --bs-brown-025: color-mix(in lab, var(--bs-white) 94%, #ea9d34);
+  --bs-brown-050: color-mix(in lab, var(--bs-white) 90%, #ea9d34);
+  --bs-brown-100: color-mix(in lab, var(--bs-white) 80%, #ea9d34);
+  --bs-brown-200: color-mix(in lab, var(--bs-white) 60%, #ea9d34);
+  --bs-brown-300: color-mix(in lab, var(--bs-white) 40%, #ea9d34);
+  --bs-brown-400: color-mix(in lab, var(--bs-white) 20%, #ea9d34);
+  --bs-brown-500: #ea9d34;
+  --bs-brown-600: color-mix(in lab, var(--bs-black) 16%, #ea9d34);
+  --bs-brown-700: color-mix(in lab, var(--bs-black) 32%, #ea9d34);
+  --bs-brown-800: color-mix(in lab, var(--bs-black) 48%, #ea9d34);
+  --bs-brown-900: color-mix(in lab, var(--bs-black) 64%, #ea9d34);
+  --bs-brown-950: color-mix(in lab, var(--bs-black) 76%, #ea9d34);
+  --bs-brown-975: color-mix(in lab, var(--bs-black) 88%, #ea9d34);
+
+  --bs-cyan-025: color-mix(in lab, var(--bs-white) 94%, #56949f);
+  --bs-cyan-050: color-mix(in lab, var(--bs-white) 90%, #56949f);
+  --bs-cyan-100: color-mix(in lab, var(--bs-white) 80%, #56949f);
+  --bs-cyan-200: color-mix(in lab, var(--bs-white) 60%, #56949f);
+  --bs-cyan-300: color-mix(in lab, var(--bs-white) 40%, #56949f);
+  --bs-cyan-400: color-mix(in lab, var(--bs-white) 20%, #56949f);
+  --bs-cyan-500: #56949f;
+  --bs-cyan-600: color-mix(in lab, var(--bs-black) 16%, #56949f);
+  --bs-cyan-700: color-mix(in lab, var(--bs-black) 32%, #56949f);
+  --bs-cyan-800: color-mix(in lab, var(--bs-black) 48%, #56949f);
+  --bs-cyan-900: color-mix(in lab, var(--bs-black) 64%, #56949f);
+  --bs-cyan-950: color-mix(in lab, var(--bs-black) 76%, #56949f);
+  --bs-cyan-975: color-mix(in lab, var(--bs-black) 88%, #56949f);
+
+  --bs-green-025: color-mix(in lab, var(--bs-white) 94%, #4f8a63);
+  --bs-green-050: color-mix(in lab, var(--bs-white) 90%, #4f8a63);
+  --bs-green-100: color-mix(in lab, var(--bs-white) 80%, #4f8a63);
+  --bs-green-200: color-mix(in lab, var(--bs-white) 60%, #4f8a63);
+  --bs-green-300: color-mix(in lab, var(--bs-white) 40%, #4f8a63);
+  --bs-green-400: color-mix(in lab, var(--bs-white) 20%, #4f8a63);
+  --bs-green-500: #4f8a63;
+  --bs-green-600: color-mix(in lab, var(--bs-black) 16%, #4f8a63);
+  --bs-green-700: color-mix(in lab, var(--bs-black) 32%, #4f8a63);
+  --bs-green-800: color-mix(in lab, var(--bs-black) 48%, #4f8a63);
+  --bs-green-900: color-mix(in lab, var(--bs-black) 64%, #4f8a63);
+  --bs-green-950: color-mix(in lab, var(--bs-black) 76%, #4f8a63);
+  --bs-green-975: color-mix(in lab, var(--bs-black) 88%, #4f8a63);
+
+  --bs-orange-025: color-mix(in lab, var(--bs-white) 94%, #ea9d34);
+  --bs-orange-050: color-mix(in lab, var(--bs-white) 90%, #ea9d34);
+  --bs-orange-100: color-mix(in lab, var(--bs-white) 80%, #ea9d34);
+  --bs-orange-200: color-mix(in lab, var(--bs-white) 60%, #ea9d34);
+  --bs-orange-300: color-mix(in lab, var(--bs-white) 40%, #ea9d34);
+  --bs-orange-400: color-mix(in lab, var(--bs-white) 20%, #ea9d34);
+  --bs-orange-500: #ea9d34;
+  --bs-orange-600: color-mix(in lab, var(--bs-black) 16%, #ea9d34);
+  --bs-orange-700: color-mix(in lab, var(--bs-black) 32%, #ea9d34);
+  --bs-orange-800: color-mix(in lab, var(--bs-black) 48%, #ea9d34);
+  --bs-orange-900: color-mix(in lab, var(--bs-black) 64%, #ea9d34);
+  --bs-orange-950: color-mix(in lab, var(--bs-black) 76%, #ea9d34);
+  --bs-orange-975: color-mix(in lab, var(--bs-black) 88%, #ea9d34);
+
+  --bs-pink-025: color-mix(in lab, var(--bs-white) 94%, #d7827e);
+  --bs-pink-050: color-mix(in lab, var(--bs-white) 90%, #d7827e);
+  --bs-pink-100: color-mix(in lab, var(--bs-white) 80%, #d7827e);
+  --bs-pink-200: color-mix(in lab, var(--bs-white) 60%, #d7827e);
+  --bs-pink-300: color-mix(in lab, var(--bs-white) 40%, #d7827e);
+  --bs-pink-400: color-mix(in lab, var(--bs-white) 20%, #d7827e);
+  --bs-pink-500: #d7827e;
+  --bs-pink-600: color-mix(in lab, var(--bs-black) 16%, #d7827e);
+  --bs-pink-700: color-mix(in lab, var(--bs-black) 32%, #d7827e);
+  --bs-pink-800: color-mix(in lab, var(--bs-black) 48%, #d7827e);
+  --bs-pink-900: color-mix(in lab, var(--bs-black) 64%, #d7827e);
+  --bs-pink-950: color-mix(in lab, var(--bs-black) 76%, #d7827e);
+  --bs-pink-975: color-mix(in lab, var(--bs-black) 88%, #d7827e);
+
+  --bs-purple-025: color-mix(in lab, var(--bs-white) 94%, #907aa9);
+  --bs-purple-050: color-mix(in lab, var(--bs-white) 90%, #907aa9);
+  --bs-purple-100: color-mix(in lab, var(--bs-white) 80%, #907aa9);
+  --bs-purple-200: color-mix(in lab, var(--bs-white) 60%, #907aa9);
+  --bs-purple-300: color-mix(in lab, var(--bs-white) 40%, #907aa9);
+  --bs-purple-400: color-mix(in lab, var(--bs-white) 20%, #907aa9);
+  --bs-purple-500: #907aa9;
+  --bs-purple-600: color-mix(in lab, var(--bs-black) 16%, #907aa9);
+  --bs-purple-700: color-mix(in lab, var(--bs-black) 32%, #907aa9);
+  --bs-purple-800: color-mix(in lab, var(--bs-black) 48%, #907aa9);
+  --bs-purple-900: color-mix(in lab, var(--bs-black) 64%, #907aa9);
+  --bs-purple-950: color-mix(in lab, var(--bs-black) 76%, #907aa9);
+  --bs-purple-975: color-mix(in lab, var(--bs-black) 88%, #907aa9);
+
+  --bs-red-025: color-mix(in lab, var(--bs-white) 94%, #b4637a);
+  --bs-red-050: color-mix(in lab, var(--bs-white) 90%, #b4637a);
+  --bs-red-100: color-mix(in lab, var(--bs-white) 80%, #b4637a);
+  --bs-red-200: color-mix(in lab, var(--bs-white) 60%, #b4637a);
+  --bs-red-300: color-mix(in lab, var(--bs-white) 40%, #b4637a);
+  --bs-red-400: color-mix(in lab, var(--bs-white) 20%, #b4637a);
+  --bs-red-500: #b4637a;
+  --bs-red-600: color-mix(in lab, var(--bs-black) 16%, #b4637a);
+  --bs-red-700: color-mix(in lab, var(--bs-black) 32%, #b4637a);
+  --bs-red-800: color-mix(in lab, var(--bs-black) 48%, #b4637a);
+  --bs-red-900: color-mix(in lab, var(--bs-black) 64%, #b4637a);
+  --bs-red-950: color-mix(in lab, var(--bs-black) 76%, #b4637a);
+  --bs-red-975: color-mix(in lab, var(--bs-black) 88%, #b4637a);
+
+  --bs-yellow-025: color-mix(in lab, var(--bs-white) 94%, #ea9d34);
+  --bs-yellow-050: color-mix(in lab, var(--bs-white) 90%, #ea9d34);
+  --bs-yellow-100: color-mix(in lab, var(--bs-white) 80%, #ea9d34);
+  --bs-yellow-200: color-mix(in lab, var(--bs-white) 60%, #ea9d34);
+  --bs-yellow-300: color-mix(in lab, var(--bs-white) 40%, #ea9d34);
+  --bs-yellow-400: color-mix(in lab, var(--bs-white) 20%, #ea9d34);
+  --bs-yellow-500: #ea9d34;
+  --bs-yellow-600: color-mix(in lab, var(--bs-black) 16%, #ea9d34);
+  --bs-yellow-700: color-mix(in lab, var(--bs-black) 32%, #ea9d34);
+  --bs-yellow-800: color-mix(in lab, var(--bs-black) 48%, #ea9d34);
+  --bs-yellow-900: color-mix(in lab, var(--bs-black) 64%, #ea9d34);
+  --bs-yellow-950: color-mix(in lab, var(--bs-black) 76%, #ea9d34);
+  --bs-yellow-975: color-mix(in lab, var(--bs-black) 88%, #ea9d34);
+
+  /* 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(#575279, #e0def4);
+  --bs-fg-body: light-dark(#575279, #c8c3dd);
+  --bs-fg-2: light-dark(#797593, #908caa);
+
+  /* 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-white);
+  --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);
+}

data/app/stylesheets/recourse/themes/dracula.css

@@ -0,0 +1,189 @@
+/* Dracula, Zeno Rocha — https://draculatheme.com/
+   Dracula's own foreground is the light page and its background the dark
+   one. its cyan serves blue and cyan, its orange serves brown. Dracula
+   leads with purple: it publishes no blue.
+
+   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: #282a36;
+
+  /* The neutrals, which every surface, border and text token Bootstrap ships
+     derives from. */
+  --bs-gray-025: color-mix(in lab, var(--bs-white) 94%, #6272a4);
+  --bs-gray-050: color-mix(in lab, var(--bs-white) 90%, #6272a4);
+  --bs-gray-100: color-mix(in lab, var(--bs-white) 80%, #6272a4);
+  --bs-gray-200: color-mix(in lab, var(--bs-white) 60%, #6272a4);
+  --bs-gray-300: color-mix(in lab, var(--bs-white) 40%, #6272a4);
+  --bs-gray-400: color-mix(in lab, var(--bs-white) 20%, #6272a4);
+  --bs-gray-500: #6272a4;
+  --bs-gray-600: color-mix(in lab, var(--bs-black) 16%, #6272a4);
+  --bs-gray-700: color-mix(in lab, var(--bs-black) 32%, #6272a4);
+  --bs-gray-800: color-mix(in lab, var(--bs-black) 48%, #6272a4);
+  --bs-gray-900: color-mix(in lab, var(--bs-black) 64%, #6272a4);
+  --bs-gray-950: color-mix(in lab, var(--bs-black) 76%, #6272a4);
+  --bs-gray-975: color-mix(in lab, var(--bs-black) 88%, #6272a4);
+
+  --bs-blue-025: color-mix(in lab, var(--bs-white) 94%, #8be9fd);
+  --bs-blue-050: color-mix(in lab, var(--bs-white) 90%, #8be9fd);
+  --bs-blue-100: color-mix(in lab, var(--bs-white) 80%, #8be9fd);
+  --bs-blue-200: color-mix(in lab, var(--bs-white) 60%, #8be9fd);
+  --bs-blue-300: color-mix(in lab, var(--bs-white) 40%, #8be9fd);
+  --bs-blue-400: color-mix(in lab, var(--bs-white) 20%, #8be9fd);
+  --bs-blue-500: #8be9fd;
+  --bs-blue-600: color-mix(in lab, var(--bs-black) 16%, #8be9fd);
+  --bs-blue-700: color-mix(in lab, var(--bs-black) 32%, #8be9fd);
+  --bs-blue-800: color-mix(in lab, var(--bs-black) 48%, #8be9fd);
+  --bs-blue-900: color-mix(in lab, var(--bs-black) 64%, #8be9fd);
+  --bs-blue-950: color-mix(in lab, var(--bs-black) 76%, #8be9fd);
+  --bs-blue-975: color-mix(in lab, var(--bs-black) 88%, #8be9fd);
+
+  --bs-brown-025: color-mix(in lab, var(--bs-white) 94%, #ffb86c);
+  --bs-brown-050: color-mix(in lab, var(--bs-white) 90%, #ffb86c);
+  --bs-brown-100: color-mix(in lab, var(--bs-white) 80%, #ffb86c);
+  --bs-brown-200: color-mix(in lab, var(--bs-white) 60%, #ffb86c);
+  --bs-brown-300: color-mix(in lab, var(--bs-white) 40%, #ffb86c);
+  --bs-brown-400: color-mix(in lab, var(--bs-white) 20%, #ffb86c);
+  --bs-brown-500: #ffb86c;
+  --bs-brown-600: color-mix(in lab, var(--bs-black) 16%, #ffb86c);
+  --bs-brown-700: color-mix(in lab, var(--bs-black) 32%, #ffb86c);
+  --bs-brown-800: color-mix(in lab, var(--bs-black) 48%, #ffb86c);
+  --bs-brown-900: color-mix(in lab, var(--bs-black) 64%, #ffb86c);
+  --bs-brown-950: color-mix(in lab, var(--bs-black) 76%, #ffb86c);
+  --bs-brown-975: color-mix(in lab, var(--bs-black) 88%, #ffb86c);
+
+  --bs-cyan-025: color-mix(in lab, var(--bs-white) 94%, #8be9fd);
+  --bs-cyan-050: color-mix(in lab, var(--bs-white) 90%, #8be9fd);
+  --bs-cyan-100: color-mix(in lab, var(--bs-white) 80%, #8be9fd);
+  --bs-cyan-200: color-mix(in lab, var(--bs-white) 60%, #8be9fd);
+  --bs-cyan-300: color-mix(in lab, var(--bs-white) 40%, #8be9fd);
+  --bs-cyan-400: color-mix(in lab, var(--bs-white) 20%, #8be9fd);
+  --bs-cyan-500: #8be9fd;
+  --bs-cyan-600: color-mix(in lab, var(--bs-black) 16%, #8be9fd);
+  --bs-cyan-700: color-mix(in lab, var(--bs-black) 32%, #8be9fd);
+  --bs-cyan-800: color-mix(in lab, var(--bs-black) 48%, #8be9fd);
+  --bs-cyan-900: color-mix(in lab, var(--bs-black) 64%, #8be9fd);
+  --bs-cyan-950: color-mix(in lab, var(--bs-black) 76%, #8be9fd);
+  --bs-cyan-975: color-mix(in lab, var(--bs-black) 88%, #8be9fd);
+
+  --bs-green-025: color-mix(in lab, var(--bs-white) 94%, #50fa7b);
+  --bs-green-050: color-mix(in lab, var(--bs-white) 90%, #50fa7b);
+  --bs-green-100: color-mix(in lab, var(--bs-white) 80%, #50fa7b);
+  --bs-green-200: color-mix(in lab, var(--bs-white) 60%, #50fa7b);
+  --bs-green-300: color-mix(in lab, var(--bs-white) 40%, #50fa7b);
+  --bs-green-400: color-mix(in lab, var(--bs-white) 20%, #50fa7b);
+  --bs-green-500: #50fa7b;
+  --bs-green-600: color-mix(in lab, var(--bs-black) 16%, #50fa7b);
+  --bs-green-700: color-mix(in lab, var(--bs-black) 32%, #50fa7b);
+  --bs-green-800: color-mix(in lab, var(--bs-black) 48%, #50fa7b);
+  --bs-green-900: color-mix(in lab, var(--bs-black) 64%, #50fa7b);
+  --bs-green-950: color-mix(in lab, var(--bs-black) 76%, #50fa7b);
+  --bs-green-975: color-mix(in lab, var(--bs-black) 88%, #50fa7b);
+
+  --bs-orange-025: color-mix(in lab, var(--bs-white) 94%, #ffb86c);
+  --bs-orange-050: color-mix(in lab, var(--bs-white) 90%, #ffb86c);
+  --bs-orange-100: color-mix(in lab, var(--bs-white) 80%, #ffb86c);
+  --bs-orange-200: color-mix(in lab, var(--bs-white) 60%, #ffb86c);
+  --bs-orange-300: color-mix(in lab, var(--bs-white) 40%, #ffb86c);
+  --bs-orange-400: color-mix(in lab, var(--bs-white) 20%, #ffb86c);
+  --bs-orange-500: #ffb86c;
+  --bs-orange-600: color-mix(in lab, var(--bs-black) 16%, #ffb86c);
+  --bs-orange-700: color-mix(in lab, var(--bs-black) 32%, #ffb86c);
+  --bs-orange-800: color-mix(in lab, var(--bs-black) 48%, #ffb86c);
+  --bs-orange-900: color-mix(in lab, var(--bs-black) 64%, #ffb86c);
+  --bs-orange-950: color-mix(in lab, var(--bs-black) 76%, #ffb86c);
+  --bs-orange-975: color-mix(in lab, var(--bs-black) 88%, #ffb86c);
+
+  --bs-pink-025: color-mix(in lab, var(--bs-white) 94%, #ff79c6);
+  --bs-pink-050: color-mix(in lab, var(--bs-white) 90%, #ff79c6);
+  --bs-pink-100: color-mix(in lab, var(--bs-white) 80%, #ff79c6);
+  --bs-pink-200: color-mix(in lab, var(--bs-white) 60%, #ff79c6);
+  --bs-pink-300: color-mix(in lab, var(--bs-white) 40%, #ff79c6);
+  --bs-pink-400: color-mix(in lab, var(--bs-white) 20%, #ff79c6);
+  --bs-pink-500: #ff79c6;
+  --bs-pink-600: color-mix(in lab, var(--bs-black) 16%, #ff79c6);
+  --bs-pink-700: color-mix(in lab, var(--bs-black) 32%, #ff79c6);
+  --bs-pink-800: color-mix(in lab, var(--bs-black) 48%, #ff79c6);
+  --bs-pink-900: color-mix(in lab, var(--bs-black) 64%, #ff79c6);
+  --bs-pink-950: color-mix(in lab, var(--bs-black) 76%, #ff79c6);
+  --bs-pink-975: color-mix(in lab, var(--bs-black) 88%, #ff79c6);
+
+  --bs-purple-025: color-mix(in lab, var(--bs-white) 94%, #bd93f9);
+  --bs-purple-050: color-mix(in lab, var(--bs-white) 90%, #bd93f9);
+  --bs-purple-100: color-mix(in lab, var(--bs-white) 80%, #bd93f9);
+  --bs-purple-200: color-mix(in lab, var(--bs-white) 60%, #bd93f9);
+  --bs-purple-300: color-mix(in lab, var(--bs-white) 40%, #bd93f9);
+  --bs-purple-400: color-mix(in lab, var(--bs-white) 20%, #bd93f9);
+  --bs-purple-500: #bd93f9;
+  --bs-purple-600: color-mix(in lab, var(--bs-black) 16%, #bd93f9);
+  --bs-purple-700: color-mix(in lab, var(--bs-black) 32%, #bd93f9);
+  --bs-purple-800: color-mix(in lab, var(--bs-black) 48%, #bd93f9);
+  --bs-purple-900: color-mix(in lab, var(--bs-black) 64%, #bd93f9);
+  --bs-purple-950: color-mix(in lab, var(--bs-black) 76%, #bd93f9);
+  --bs-purple-975: color-mix(in lab, var(--bs-black) 88%, #bd93f9);
+
+  --bs-red-025: color-mix(in lab, var(--bs-white) 94%, #ff5555);
+  --bs-red-050: color-mix(in lab, var(--bs-white) 90%, #ff5555);
+  --bs-red-100: color-mix(in lab, var(--bs-white) 80%, #ff5555);
+  --bs-red-200: color-mix(in lab, var(--bs-white) 60%, #ff5555);
+  --bs-red-300: color-mix(in lab, var(--bs-white) 40%, #ff5555);
+  --bs-red-400: color-mix(in lab, var(--bs-white) 20%, #ff5555);
+  --bs-red-500: #ff5555;
+  --bs-red-600: color-mix(in lab, var(--bs-black) 16%, #ff5555);
+  --bs-red-700: color-mix(in lab, var(--bs-black) 32%, #ff5555);
+  --bs-red-800: color-mix(in lab, var(--bs-black) 48%, #ff5555);
+  --bs-red-900: color-mix(in lab, var(--bs-black) 64%, #ff5555);
+  --bs-red-950: color-mix(in lab, var(--bs-black) 76%, #ff5555);
+  --bs-red-975: color-mix(in lab, var(--bs-black) 88%, #ff5555);
+
+  --bs-yellow-025: color-mix(in lab, var(--bs-white) 94%, #f1fa8c);
+  --bs-yellow-050: color-mix(in lab, var(--bs-white) 90%, #f1fa8c);
+  --bs-yellow-100: color-mix(in lab, var(--bs-white) 80%, #f1fa8c);
+  --bs-yellow-200: color-mix(in lab, var(--bs-white) 60%, #f1fa8c);
+  --bs-yellow-300: color-mix(in lab, var(--bs-white) 40%, #f1fa8c);
+  --bs-yellow-400: color-mix(in lab, var(--bs-white) 20%, #f1fa8c);
+  --bs-yellow-500: #f1fa8c;
+  --bs-yellow-600: color-mix(in lab, var(--bs-black) 16%, #f1fa8c);
+  --bs-yellow-700: color-mix(in lab, var(--bs-black) 32%, #f1fa8c);
+  --bs-yellow-800: color-mix(in lab, var(--bs-black) 48%, #f1fa8c);
+  --bs-yellow-900: color-mix(in lab, var(--bs-black) 64%, #f1fa8c);
+  --bs-yellow-950: color-mix(in lab, var(--bs-black) 76%, #f1fa8c);
+  --bs-yellow-975: color-mix(in lab, var(--bs-black) 88%, #f1fa8c);
+
+  /* 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(#282a36, #ffffff);
+  --bs-fg-body: light-dark(#21222c, #f8f8f2);
+  --bs-fg-2: light-dark(#4a5480, #bcc2de);
+
+  /* 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 purple 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-purple-500);
+  --bs-primary-fg: light-dark(var(--bs-purple-600), var(--bs-purple-400));
+  --bs-primary-fg-emphasis: light-dark(var(--bs-purple-800), var(--bs-purple-200));
+  --bs-primary-bg: var(--bs-purple-500);
+  --bs-primary-bg-subtle: light-dark(var(--bs-purple-100), var(--bs-purple-900));
+  --bs-primary-bg-muted: light-dark(var(--bs-purple-200), var(--bs-purple-800));
+  --bs-primary-border: light-dark(var(--bs-purple-300), var(--bs-purple-600));
+  --bs-primary-focus-ring: light-dark(color-mix(in oklch, var(--bs-purple-500) 50%, var(--bs-bg-body)), color-mix(in oklch, var(--bs-purple-500) 75%, var(--bs-bg-body)));
+  --bs-primary-contrast: var(--bs-gray-975);
+}