feat(style): Jade and Crimson, Volt in teal and red, take Ember's and Obsidian's places (#316)

CLAUDE.md

@@ -31,7 +31,7 @@ was such a decision: a navigation panel bounded by the folder Prism opened in, n
 ahead and build"; spec `docs/superpowers/specs/2026-10-06-new-themes-design.md`, research and the
 approved mockup in `Documents/Claude/research/prism/2026-10-06-new-themes/`). The ten old styles
 are gone (Aurora, Void and Frost kept, refined). The rules (`lib/theme.ts`, `lib/themes/`):
-- **The 18, in wall order**: dark Aurora, Void (`new-void`), Carbon, Obsidian, Ember, Volt,
+- **The 18, in wall order**: dark Aurora, Void (`new-void`), Carbon, Crimson, Jade, Volt,
   Midnight HC, Glacier, Lagoon; light Frost, Paper, Sand, Sage, Blush, Chalk, Daylight HC, Orchid,
   Pearl. High contrast before see-through in each half. Colours exactly as `themes/catalogue.json`
   (`catalogue.test.ts`); HC themes are MONOCHROME. Every theme sets in the SYSTEM face at 12.5px
@@ -57,9 +57,20 @@ are gone (Aurora, Void and Frost kept, refined). The rules (`lib/theme.ts`, `lib
   Escape goes back. `useStyle` is the KEPT theme: re-rendering its readers on every arrow put a
   held Right over 50ms (MEASURED). This theme: See-through window (not on HC) and Save changes.
 - **Retired ids migrate once** (`themes/migrate.ts`, marker `prism.style.v`): Onyx to Void WITH
-  its glass as an unsaved edit (level 55), Terminal to Obsidian, Driftwood to Carbon, Ruby to
-  Ember, Linen to Sand; own copies kept, their `base` mapped; one quiet line names the retired
-  theme until the next pick. Onboarding is three steps, the first the same wall.
+  its glass as an unsaved edit (level 55), Terminal to Jade (Obsidian until #316), Driftwood to
+  Carbon, Ruby to Crimson (Ember until #316), Linen to Sand; own copies kept, their `base` mapped;
+  one quiet line names the retired theme until the next pick. Every map target is a current theme
+  (`migrate.test.ts`), so a later pass never chains.
+- **JADE AND CRIMSON TOOK EMBER'S AND OBSIDIAN'S PLACES** (#316; owner, 2026-10-07, with Volt's
+  Colours edited to teal: "this theme should replace Ember. its Volt but with this teal instead of
+  the yellow"; then, with them edited to red `#ff2647`: "have this replace obsidian"). Each is Volt
+  with one colour for every yellow-green value (accent, selection at Volt's alpha `38`, folder,
+  archive, the accent-mixed keyword), built by the research `build-themes.mjs`: Jade `#26ffb2`,
+  Crimson `#ff2647` (near-black ink, 5.26:1; its warn orange and error reds held apart in
+  `contrast.test.ts`). Marker `4`: `ember` and `obsidian` map to `jade` (`RETIRED_NAMES` names
+  them on the quiet line), so a window on `2` moves too; a profile the first pass PLACED on Ember
+  for Ruby and that never picked since (its line still says Ruby: `PLACED_MOVES`) goes on to
+  Crimson. Onboarding is three steps, the first the same wall.
 - Not adopted from the mockup, by recorded rules: the active tab stays told by its ink, not a
   ground fill; the Accent subtext stays (the chosen rail page is grey since #292).
 - **A ZIP FOLLOWS THE FOLDER COLOUR**, not a hardcoded indigo (owner, 2026-09-20). `--p-tree-zip`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "prism",
-  "version": "0.94.3",
+  "version": "0.95.0",
   "description": "A fast, universal media viewer for Windows.",
   "author": "Max",
   "license": "MIT",

src/renderer/src/lib/accentAlpha.test.ts

@@ -159,7 +159,11 @@ describe('an icon knockout matches the row it sits on', () => {
     expect(t['--p-sel-seen']).toMatch(/^#[0-9a-f]{6}$/i)
     for (const s of STYLES) {
       const solid = derive(s)
-      expect(solid['--p-sel-seen']).toBe(selectionBg(paletteHex(s)))
+      // A theme's designed fill when it has one (#298): Crimson's red keeps its
+      // near-black ink at 5.26:1 where the derivation, which leans to white,
+      // would deepen it to #e0213e (#316). Either way it is the selection.
+      expect(solid['--p-sel-seen']).toBe(s.table?.accentFill ?? selectionBg(paletteHex(s)))
+      expect(solid['--p-sel-seen']).toBe(solid['--p-sel-bg'])
       expect(solid['--p-sel-knockout-side']).toBe(solid['--p-accent'])
     }
   })

src/renderer/src/lib/theme.test.ts

@@ -196,7 +196,7 @@ describe('the progress bar follows the accent', () => {
   it('follows a style switch without being told', () => {
     setStyle('aurora')
     const auroraBar = resolveVizTheme(DEFAULT_BAR_THEME).accent
-    setStyle('ember')
+    setStyle('jade')
     expect(resolveVizTheme(DEFAULT_BAR_THEME).accent).not.toBe(auroraBar)
   })
 })
@@ -391,7 +391,8 @@ describe("the owner's picks of 2026-09-20", () => {
   })
 
   // Ruby's pin (near-black and red) retired with Ruby (#298): its
-  // successor in the migration is Ember, held by `themes/catalogue.test.ts`.
+  // successor in the migration is Crimson, the red of #316, held by
+  // `themes/migrate.test.ts`.
 
   it('hands the zip the folder colour, with an ink that reads on it', () => {
     // "the zip file icon should have dynamically adjusting colours based on the

src/renderer/src/lib/themes/catalogue.json

@@ -138,95 +138,95 @@
     }
   },
   {
-    "id": "obsidian",
-    "name": "Obsidian",
+    "id": "crimson",
+    "name": "Crimson",
     "mode": "dark",
-    "blurb": "Black glass edge with an emerald accent.",
+    "blurb": "Black and electric red, cyberpunk.",
     "highContrast": false,
     "seeThrough": false,
     "groundAlpha": 1,
     "material": "oled",
     "corners": "2",
     "edges": "hairline",
-    "ground": "#050505",
-    "panel": "#0c0c0c",
-    "raised": "#141414",
-    "line": "#232323",
-    "text": "#ededed",
-    "textDim": "#909090",
-    "textFaint": "#6d6d6d",
-    "accent": "#10b981",
-    "accentSolid": "#10b981",
+    "ground": "#050706",
+    "panel": "#0c0e0d",
+    "raised": "#141615",
+    "line": "#232624",
+    "text": "#eef3ea",
+    "textDim": "#91958f",
+    "textFaint": "#6e716d",
+    "accent": "#ff2647",
+    "accentSolid": "#ff2647",
     "onAccent": "#0b0b0d",
-    "selection": "#10b98138",
-    "selectionSeen": "#072d20",
-    "folder": "#5fd4a8",
+    "selection": "#ff264738",
+    "selectionSeen": "#3c0e14",
+    "folder": "#ff2647",
     "kinds": {
       "image": "#6fb2a8",
       "video": "#8f8ae0",
       "audio": "#d3a06a",
       "pdf": "#cf7f88",
       "text": "#8d93a1",
-      "archive": "#5fd4a8"
+      "archive": "#ff2647"
     },
     "code": {
-      "keyword": "#58a4ae",
-      "string": "#8be4a9",
-      "number": "#e4b88b",
-      "function": "#8bb8e4",
-      "type": "#8be4e4",
-      "tag": "#e48b9a",
-      "attribute": "#e4c68b",
-      "constant": "#e48bc6",
-      "comment": "#7e7e7e",
-      "punctuation": "#a7a7a7",
-      "activeLine": "#ededed09"
+      "keyword": "#ed4c95",
+      "string": "#85f47b",
+      "number": "#f4ad7b",
+      "function": "#7bd6f4",
+      "type": "#7bf4d6",
+      "tag": "#f47bad",
+      "attribute": "#f4e07b",
+      "constant": "#f47be0",
+      "comment": "#7a7d78",
+      "punctuation": "#a8aca6",
+      "activeLine": "#eef3ea09"
     }
   },
   {
-    "id": "ember",
-    "name": "Ember",
+    "id": "jade",
+    "name": "Jade",
     "mode": "dark",
-    "blurb": "Near black with the app icon orange.",
+    "blurb": "Black and electric teal, cyberpunk.",
     "highContrast": false,
     "seeThrough": false,
     "groundAlpha": 1,
-    "material": "solid",
-    "corners": "8",
-    "edges": "faint",
-    "ground": "#0f0d0c",
-    "panel": "#161413",
-    "raised": "#1e1b1a",
-    "line": "#242120",
-    "text": "#f3ece6",
-    "textDim": "#98938f",
-    "textFaint": "#76716e",
-    "accent": "#ec9448",
-    "accentSolid": "#ec9448",
+    "material": "oled",
+    "corners": "2",
+    "edges": "hairline",
+    "ground": "#050706",
+    "panel": "#0c0e0d",
+    "raised": "#141615",
+    "line": "#232624",
+    "text": "#eef3ea",
+    "textDim": "#91958f",
+    "textFaint": "#6e716d",
+    "accent": "#26ffb2",
+    "accentSolid": "#26ffb2",
     "onAccent": "#0b0b0d",
-    "selection": "#ec944838",
-    "selectionSeen": "#402b19",
-    "folder": "#f0a868",
+    "selection": "#26ffb238",
+    "selectionSeen": "#0c3d2c",
+    "folder": "#26ffb2",
     "kinds": {
       "image": "#6fb2a8",
       "video": "#8f8ae0",
       "audio": "#d3a06a",
       "pdf": "#cf7f88",
       "text": "#8d93a1",
-      "archive": "#f0a868"
+      "archive": "#26ffb2"
     },
     "code": {
-      "keyword": "#e89a67",
-      "string": "#bfe28d",
-      "number": "#e2bf8d",
-      "function": "#e2cd8d",
-      "type": "#8de2cd",
-      "tag": "#e28d8d",
-      "attribute": "#e2b88d",
-      "constant": "#d48de2",
-      "comment": "#86827e",
-      "punctuation": "#afa9a5",
-      "activeLine": "#f3ece609"
+      "keyword": "#75c4d0",
+      "string": "#85f47b",
+      "number": "#f4ad7b",
+      "function": "#7bd6f4",
+      "type": "#7bf4d6",
+      "tag": "#f47bad",
+      "attribute": "#f4e07b",
+      "constant": "#f47be0",
+      "comment": "#7a7d78",
+      "punctuation": "#a8aca6",
+      "activeLine": "#eef3ea09"
     }
   },
   {

src/renderer/src/lib/themes/catalogue.test.ts

@@ -10,8 +10,8 @@ const ORDER = [
   ['aurora', 'Aurora'],
   ['new-void', 'Void'],
   ['carbon', 'Carbon'],
-  ['obsidian', 'Obsidian'],
-  ['ember', 'Ember'],
+  ['crimson', 'Crimson'],
+  ['jade', 'Jade'],
   ['volt', 'Volt'],
   ['midnight-hc', 'Midnight HC'],
   ['glacier', 'Glacier'],

src/renderer/src/lib/themes/contrast.test.ts

@@ -113,3 +113,61 @@ for (const s of STYLES) {
     }
   })
 }
+
+/** CIE76 distance in Lab: about 2 is a just noticeable step. */
+const lab = (hex: string): [number, number, number] => {
+  const n = parseInt(hex.slice(1, 7), 16)
+  const [r, g, b] = [(n >> 16) & 255, (n >> 8) & 255, n & 255].map((v) => {
+    const c = v / 255
+    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
+  })
+  const f = (t: number): number => (t > 0.008856 ? Math.cbrt(t) : 7.787 * t + 16 / 116)
+  const x = f((0.4124 * r + 0.3576 * g + 0.1805 * b) / 0.95047)
+  const y = f(0.2126 * r + 0.7152 * g + 0.0722 * b)
+  const z = f((0.0193 * r + 0.1192 * g + 0.9505 * b) / 1.08883)
+  return [116 * y - 16, 500 * (x - y), 200 * (y - z)]
+}
+const apart = (a: string, b: string): number => {
+  const [p, q] = [lab(a), lab(b)]
+  return Math.hypot(p[0] - q[0], p[1] - q[1], p[2] - q[2])
+}
+
+// CRIMSON, VOLT IN RED (#316; owner, 2026-10-07: "have this replace
+// obsidian"). The first red accent on the wall, so the reds and oranges that
+// mean something else must still be told from it.
+describe('Crimson, a red accent', () => {
+  const s = STYLES.find((x) => x.id === 'crimson')!
+  const v = variablesFor(s)
+
+  it('is Volt with the red', () => {
+    const volt = variablesFor(STYLES.find((x) => x.id === 'volt')!)
+    for (const k of ['--p-bg', '--p-side-flat', '--p-raised', '--p-line', '--p-text', '--p-dim', '--p-dim2', '--p-code-string', '--p-code-fn'])
+      expect(v[k], k).toBe(volt[k])
+    expect(v['--p-accent']).toBe('#ff2647')
+    expect(v['--p-tree-folder']).toBe('#ff2647')
+    expect(v['--p-sel-tint']).toBe('#ff264738')
+  })
+
+  it('writes near-black on its fill, the ink that reaches 4.5:1 (white does not)', () => {
+    expect(v['--p-on-accent']).toBe('#0b0b0d')
+    expect(contrast('#0b0b0d', v['--p-accent'])).toBeGreaterThanOrEqual(4.5)
+    expect(contrast('#ffffff', v['--p-accent'])).toBeLessThan(4.5)
+  })
+
+  it("keeps a nearly full drive's orange apart from the red bar", () => {
+    // Below 90% a drive's bar is the accent; past it, --p-warn.
+    expect(apart(v['--p-warn'], v['--p-accent-solid'])).toBeGreaterThanOrEqual(40)
+    expect(apart(v['--p-warn-ink'], v['--p-accent-solid'])).toBeGreaterThanOrEqual(40)
+    expect(contrast(v['--p-warn'], v['--p-side-flat'])).toBeGreaterThanOrEqual(3)
+    expect(contrast(v['--p-warn-ink'], v['--p-side-flat'])).toBeGreaterThanOrEqual(4.5)
+  })
+
+  it('keeps the error reds apart from the accent', () => {
+    // Code's invalid mark, a danger button's fill, a danger menu row's ink.
+    for (const c of [v['--p-code-invalid'], '#b4353f', '#d97b84']) expect(apart(c, v['--p-accent-solid']), c).toBeGreaterThanOrEqual(30)
+  })
+
+  it('keeps the keyword, mixed from the red, apart from the tag', () => {
+    expect(apart(v['--p-code-keyword'], v['--p-code-tag'])).toBeGreaterThanOrEqual(15)
+  })
+})