From eb6165e96907a946b8ff6b3ca86c2b3797ecfada Mon Sep 17 00:00:00 2001
From: Stan Grams <sjg@haxx.space>
Date: Mon, 2 Mar 2026 21:41:25 +0100
Subject: [PATCH] [feat](trx-frontend): add blood theme and rename fire

Co-authored-by: OpenAI Codex <codex@openai.com>

Signed-off-by: Stan Grams <sjg@haxx.space>
---
 .../trx-frontend-http/assets/web/app.js       | 20 ++++++-
 .../trx-frontend-http/assets/web/index.html   |  3 +-
 .../trx-frontend-http/assets/web/style.css    | 60 ++++++++++++++++++-
 3 files changed, 80 insertions(+), 3 deletions(-)

diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
index cf27e16..de044f7 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
@@ -544,6 +544,24 @@ const CANVAS_PALETTE = {
       waterfallHue: [18, 48], waterfallSat: 90, waterfallLight: [92, 42], waterfallAlpha: [0.34, 0.84],
     },
   },
+  blood: {
+    dark: {
+      bg: "#140406",
+      spectrumLine: "#d81d3f", spectrumFill: "rgba(216,29,63,0.14)",
+      spectrumGrid: "rgba(255,90,110,0.08)", spectrumLabel: "rgba(255,208,214,0.54)",
+      waveformLine: "rgba(224,64,94,0.94)", waveformPeak: "rgba(255,128,128,0.90)",
+      waveformGrid: "rgba(255,84,110,0.10)", waveformLabel: "rgba(255,220,224,0.66)",
+      waterfallHue: [350, 6], waterfallSat: 90, waterfallLight: [8, 52], waterfallAlpha: [0.26, 0.88],
+    },
+    light: {
+      bg: "#fff0f1",
+      spectrumLine: "#a60f2f", spectrumFill: "rgba(166,15,47,0.14)",
+      spectrumGrid: "rgba(120,24,44,0.09)", spectrumLabel: "rgba(86,18,32,0.56)",
+      waveformLine: "rgba(160,18,52,0.95)", waveformPeak: "rgba(212,74,95,0.90)",
+      waveformGrid: "rgba(120,24,44,0.10)", waveformLabel: "rgba(86,18,32,0.68)",
+      waterfallHue: [350, 10], waterfallSat: 76, waterfallLight: [92, 40], waterfallAlpha: [0.34, 0.84],
+    },
+  },
 };
 
 function currentStyle() {
@@ -558,7 +576,7 @@ function canvasPalette() {
 
 function setStyle(style) {
   const remapped = style === "nord" ? "arctic" : style === "monokai" ? "lime" : style;
-  const valid = ["original", "arctic", "lime", "contrast", "neon-disco", "golden-rain", "fire"];
+  const valid = ["original", "arctic", "lime", "contrast", "neon-disco", "golden-rain", "fire", "blood"];
   const next = valid.includes(remapped) ? remapped : "original";
   if (next === "original") {
     document.documentElement.removeAttribute("data-style");
diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
index a52cf06..1cedc0d 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
@@ -46,7 +46,8 @@
             <option value="contrast">Contrast</option>
             <option value="neon-disco">Neon Disco</option>
             <option value="golden-rain">Donald</option>
-            <option value="fire">Fire</option>
+            <option value="fire">Amber</option>
+            <option value="blood">Blood</option>
           </select>
         </div>
         <button id="theme-toggle" class="header-bar-btn" type="button" aria-label="Toggle dark or light theme">Light</button>
diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
index d6829f1..042d300 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
@@ -2307,7 +2307,7 @@ button:focus-visible, input:focus-visible, select:focus-visible {
   --spectrum-bg: #f5ecd9;
 }
 
-/* ── Fire style ───────────────────────────────────────────────────────── */
+/* ── Amber style ──────────────────────────────────────────────────────── */
 [data-style="fire"] {
   --bg: #120706;
   --card-bg: #1b0c0a;
@@ -2364,3 +2364,61 @@ button:focus-visible, input:focus-visible, select:focus-visible {
   --wavelength-fg: #9a5a3a;
   --spectrum-bg: #fff0e4;
 }
+
+/* ── Blood style ──────────────────────────────────────────────────────── */
+[data-style="blood"] {
+  --bg: #140406;
+  --card-bg: #1c080b;
+  --input-bg: #190709;
+  --border: #4e1520;
+  --border-light: #7d2434;
+  --text: #ffe3e5;
+  --text-muted: #ca8b93;
+  --text-heading: #fff2f3;
+  --btn-bg: #2a0d12;
+  --btn-border: #8f3142;
+  --accent-green: #c8475d;
+  --accent-yellow: #f06d6d;
+  --accent-red: #b80f2d;
+  --jog-hi: #351016;
+  --jog-lo: #230b0f;
+  --jog-shadow: rgba(0,0,0,0.64);
+  --jog-inset: rgba(255,146,160,0.07);
+  --audio-level-bg: #210a0e;
+  --audio-level-border: #7d2434;
+  --audio-level-fill-start: #b80f2d;
+  --audio-level-fill-end: #f06d6d;
+  --filter-bg: #2b0e14;
+  --filter-fg: #ffe3e5;
+  --filter-border: #8f3142;
+  --wavelength-fg: #d0939c;
+  --spectrum-bg: #150508;
+}
+[data-style="blood"][data-theme="light"] {
+  --bg: #fff0f1;
+  --card-bg: #fff6f7;
+  --input-bg: #ffe4e7;
+  --border: #efc2c8;
+  --border-light: #d6919c;
+  --text: #481018;
+  --text-muted: #8f4754;
+  --text-heading: #340a12;
+  --btn-bg: #ffd8dd;
+  --btn-border: #cb6e7e;
+  --accent-green: #bb324c;
+  --accent-yellow: #d94b5f;
+  --accent-red: #a80b28;
+  --jog-hi: #ffd8dd;
+  --jog-lo: #ffc9d0;
+  --jog-shadow: rgba(100,25,39,0.18);
+  --jog-inset: rgba(255,255,255,0.74);
+  --audio-level-bg: #ffe1e5;
+  --audio-level-border: #d6919c;
+  --audio-level-fill-start: #a80b28;
+  --audio-level-fill-end: #d94b5f;
+  --filter-bg: #ffd8dd;
+  --filter-fg: #481018;
+  --filter-border: #cb6e7e;
+  --wavelength-fg: #9e5562;
+  --spectrum-bg: #ffecef;
+}