[style](trx-frontend): rename amber and fire themes

Co-authored-by: OpenAI Codex <codex@openai.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
2026-03-02 21:51:24 +01:00
parent a48c11c1fe
commit 9ec0ba6545
3 changed files with 15 additions and 11 deletions
@@ -526,7 +526,7 @@ const CANVAS_PALETTE = {
waterfallHue: [45, 18], waterfallSat: 86, waterfallLight: [92, 42], waterfallAlpha: [0.34, 0.82], waterfallHue: [45, 18], waterfallSat: 86, waterfallLight: [92, 42], waterfallAlpha: [0.34, 0.82],
}, },
}, },
fire: { amber: {
dark: { dark: {
bg: "#130706", bg: "#130706",
spectrumLine: "#ff7a1f", spectrumFill: "rgba(255,122,31,0.14)", spectrumLine: "#ff7a1f", spectrumFill: "rgba(255,122,31,0.14)",
@@ -544,7 +544,7 @@ const CANVAS_PALETTE = {
waterfallHue: [18, 48], waterfallSat: 90, waterfallLight: [92, 42], waterfallAlpha: [0.34, 0.84], waterfallHue: [18, 48], waterfallSat: 90, waterfallLight: [92, 42], waterfallAlpha: [0.34, 0.84],
}, },
}, },
blood: { fire: {
dark: { dark: {
bg: "#140406", bg: "#140406",
spectrumLine: "#cf1b22", spectrumFill: "rgba(207,27,34,0.14)", spectrumLine: "#cf1b22", spectrumFill: "rgba(207,27,34,0.14)",
@@ -575,8 +575,12 @@ function canvasPalette() {
} }
function setStyle(style) { function setStyle(style) {
const remapped = style === "nord" ? "arctic" : style === "monokai" ? "lime" : style; const remapped =
const valid = ["original", "arctic", "lime", "contrast", "neon-disco", "golden-rain", "fire", "blood"]; style === "nord" ? "arctic"
: style === "monokai" ? "lime"
: style === "blood" ? "fire"
: style;
const valid = ["original", "arctic", "lime", "contrast", "neon-disco", "golden-rain", "amber", "fire"];
const next = valid.includes(remapped) ? remapped : "original"; const next = valid.includes(remapped) ? remapped : "original";
if (next === "original") { if (next === "original") {
document.documentElement.removeAttribute("data-style"); document.documentElement.removeAttribute("data-style");
@@ -46,8 +46,8 @@
<option value="contrast">Contrast</option> <option value="contrast">Contrast</option>
<option value="neon-disco">Neon Disco</option> <option value="neon-disco">Neon Disco</option>
<option value="golden-rain">Donald</option> <option value="golden-rain">Donald</option>
<option value="fire">Amber</option> <option value="amber">Amber</option>
<option value="blood">Blood</option> <option value="fire">Fire</option>
</select> </select>
</div> </div>
<button id="theme-toggle" class="header-bar-btn" type="button" aria-label="Toggle dark or light theme">Light</button> <button id="theme-toggle" class="header-bar-btn" type="button" aria-label="Toggle dark or light theme">Light</button>
@@ -2308,7 +2308,7 @@ button:focus-visible, input:focus-visible, select:focus-visible {
} }
/* ── Amber style ──────────────────────────────────────────────────────── */ /* ── Amber style ──────────────────────────────────────────────────────── */
[data-style="fire"] { [data-style="amber"] {
--bg: #120706; --bg: #120706;
--card-bg: #1b0c0a; --card-bg: #1b0c0a;
--input-bg: #180907; --input-bg: #180907;
@@ -2336,7 +2336,7 @@ button:focus-visible, input:focus-visible, select:focus-visible {
--wavelength-fg: #d38d6a; --wavelength-fg: #d38d6a;
--spectrum-bg: #140907; --spectrum-bg: #140907;
} }
[data-style="fire"][data-theme="light"] { [data-style="amber"][data-theme="light"] {
--bg: #fff3ea; --bg: #fff3ea;
--card-bg: #fff7f0; --card-bg: #fff7f0;
--input-bg: #ffe9da; --input-bg: #ffe9da;
@@ -2365,8 +2365,8 @@ button:focus-visible, input:focus-visible, select:focus-visible {
--spectrum-bg: #fff0e4; --spectrum-bg: #fff0e4;
} }
/* ── Blood style ──────────────────────────────────────────────────────── */ /* ── Fire style ──────────────────────────────────────────────────────── */
[data-style="blood"] { [data-style="fire"] {
--bg: #140406; --bg: #140406;
--card-bg: #1d0708; --card-bg: #1d0708;
--input-bg: #1a0607; --input-bg: #1a0607;
@@ -2394,7 +2394,7 @@ button:focus-visible, input:focus-visible, select:focus-visible {
--wavelength-fg: #d78d78; --wavelength-fg: #d78d78;
--spectrum-bg: #150508; --spectrum-bg: #150508;
} }
[data-style="blood"][data-theme="light"] { [data-style="fire"][data-theme="light"] {
--bg: #fdf0ea; --bg: #fdf0ea;
--card-bg: #fff6f1; --card-bg: #fff6f1;
--input-bg: #ffe5db; --input-bg: #ffe5db;