chore(themes): regenerate dupre palette preview from palette.el

The committed palette PNG had drifted from the theme. It labeled steel as "cyan", invented magenta colors the palette never had, and left out blue+2. There was no generator, so the preview and the source diverged silently. I added gen-palette-preview.py, which parses the (name "#hex") pairs straight out of dupre-palette.el and emits the preview HTML grouped one row per color family. I regenerated the HTML and the PNG from it, so all 32 colors show with square swatches at 2x, columns aligned, and nothing drifts from palette.el again.
author: Craig Jennings <c@cjennings.net> 2026-05-22 17:03:24 -0500
committer: Craig Jennings <c@cjennings.net> 2026-05-22 17:03:24 -0500
commit: ec42e0f6c7e9452d79898a096eca2710b23a9d60 (patch)
tree: a7d33ba4fbde7fc28cffd215da13b8547acb7d09 /themes
parent: 39f5005fa01cdd019a6fb6d893245ed1e444ea5c (diff)
download: dotemacs-ec42e0f6c7e9452d79898a096eca2710b23a9d60.tar.gz
dotemacs-ec42e0f6c7e9452d79898a096eca2710b23a9d60.zip
3 files changed, 156 insertions, 175 deletions
diff --git a/themes/dupre-color-palette.html b/themes/dupre-color-palette.html
index 9bbbb951..f3d6ae31 100644
--- a/themes/dupre-color-palette.html
+++ b/themes/dupre-color-palette.html
@@ -1,183 +1,81 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Color Palette</title>
-    <style>
-        body {
-            font-family: 'Courier New', monospace;
-            background: #2a2a2a;
-            color: #f0f0f0;
-            padding: 20px;
-            margin: 0;
-        }
-        .palette {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 12px;
-            max-width: 1200px;
-        }
-        .swatch {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            background: #1a1a1a;
-            padding: 8px 12px;
-            border-radius: 4px;
-        }
-        .color-box {
-            width: 4ch;
-            height: 4ch;
-            border: 1px solid #555;
-            border-radius: 2px;
-            flex-shrink: 0;
-        }
-        .label {
-            font-size: 12px;
-            line-height: 1.4;
-        }
-        .name {
-            font-weight: bold;
-            color: #fff;
-        }
-        .hex {
-            color: #999;
-        }
-        h1 {
-            margin-bottom: 20px;
-            font-size: 18px;
-            font-weight: normal;
-        }
-    </style>
+  <meta charset="UTF-8">
+  <title>Dupre Theme Color Palette</title>
+  <style>
+    body { font-family: 'Courier New', monospace; background: #151311; color: #f0fef0;
+            padding: 28px; margin: 0; width: max-content; }
+    h1 { font-size: 20px; font-weight: bold; margin: 0 0 24px; }
+    .family { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
+    .fam { width: 96px; text-align: right; padding-top: 46px; color: #b4b1a2;
+            font-size: 13px; flex-shrink: 0; }
+    .swatch { width: 120px; flex-shrink: 0; }
+    .box { width: 112px; height: 112px; border: 1px solid #474544; border-radius: 3px; }
+    .name { font-weight: bold; color: #f0fef0; font-size: 12px; margin-top: 5px; }
+    .hex { color: #969385; font-size: 11px; }
+  </style>
 </head>
 <body>
-    <h1>Color Palette Comparison</h1>
-    <div class="palette">
-        <div class="swatch">
-            <div class="color-box" style="background: #151311;"></div>
-            <div class="label"><span class="name">bg</span><br><span class="hex">#151311</span></div>
-        </div>
-        <div class="swatch">
-            <div class="color-box" style="background: #252321;"></div>
-            <div class="label"><span class="name">bg+1</span><br><span class="hex">#252321</span></div>
-        </div>
-        <div class="swatch">
-            <div class="color-box" style="background: #474544;"></div>
-            <div class="label"><span class="name">bg+2</span><br><span class="hex">#474544</span></div>
-        </div>
-        <div class="swatch">
-            <div class="color-box" style="background: #58574e;"></div>
-            <div class="label"><span class="name">gray-2</span><br><span class="hex">#58574e</span></div>
-        </div>
-        <div class="swatch">
-            <div class="color-box" style="background: #6c6a60;"></div>
-            <div class="label"><span class="name">gray-1</span><br><span class="hex">#6c6a60</span></div>
-        </div>
-        <div class="swatch">
-            <div class="color-box" style="background: #969385;"></div>
-            <div class="label"><span class="name">gray</span><br><span class="hex">#969385</span></div>
-        </div>
-        <div class="swatch">
-            <div class="color-box" style="background: #b4b1a2;"></div>
-            <div class="label"><span class="name">gray+1</span><br><span class="hex">#b4b1a2</span></div>
-        </div>
-        <div class="swatch">
-            <div class="color-box" style="background: #d0cbc0;"></div>
-            <div class="label"><span class="name">gray+2</span><br><span class="hex">#d0cbc0</span></div>
-        </div>
-        <div class="swatch">
-            <div class="color-box" style="background: #8a9496;"></div>
-            <div class="label"><span class="name">steel</span><br><span class="hex">#8a9496</span></div>
-        </div>
-        <div class="swatch">
-            <div class="color-box" style="background: #acb0b3;"></div>
-            <div class="label"><span class="name">steel+1</span><br><span class="hex">#acb0b3</span></div>
-        </div>
-        <div class="swatch">
-            <div class="color-box" style="background: #c0c7ca;"></div>
-            <div class="label"><span class="name">steel+2</span><br><span class="hex">#c0c7ca</span></div>
-        </div>
-        <div class="swatch">
-            <div class="color-box" style="background: #67809c;"></div>
-            <div class="label"><span class="name">blue</span><br><span class="hex">#67809c</span></div>
-        </div>
-        <div class="swatch">
-            <div class="color-box" style="background: #b2c3cc;"></div>
-            <div class="label"><span class="name">blue+1</span><br><span class="hex">#b2c3cc</span></div>
-        </div>
-        <div class="swatch">
-            <div class="color-box" style="background: #d9e2ff;"></div>
-            <div class="label"><span class="name">blue+2</span><br><span class="hex">#d9e2ff</span></div>
-        </div>
-        <div class="swatch">
-            <div class="color-box" style="background: #646d14;"></div>
-            <div class="label"><span class="name">green-2</span><br><span class="hex">#646d14</span></div>
-        </div>
-        <div class="swatch">
-            <div class="color-box" style="background: #869038;"></div>
-            <div class="label"><span class="name">green-1</span><br><span class="hex">#869038</span></div>
-        </div>
-        <div class="swatch">
-            <div class="color-box" style="background: #a4ac64;"></div>
-            <div class="label"><span class="name">green</span><br><span class="hex">#a4ac64</span></div>
-        </div>
-        <div class="swatch">
-            <div class="color-box" style="background: #ccc768;"></div>
-            <div class="label"><span class="name">green+1</span><br><span class="hex">#ccc768</span></div>
-        </div>
-        <div class="swatch">
-            <div class="color-box" style="background: #3f1c0f;"></div>
-            <div class="label"><span class="name">red-3</span><br><span class="hex">#3f1c0f</span></div>
-        </div>
-        <div class="swatch">
-            <div class="color-box" style="background: #7c2a09;"></div>
-            <div class="label"><span class="name">red-2</span><br><span class="hex">#7c2a09</span></div>
-        </div>
-        <div class="swatch">
-            <div class="color-box" style="background: #a7502d;"></div>
-            <div class="label"><span class="name">red-1</span><br><span class="hex">#a7502d</span></div>
-        </div>
-        <div class="swatch">
-            <div class="color-box" style="background: #d47c59;"></div>
-            <div class="label"><span class="name">red</span><br><span class="hex">#d47c59</span></div>
-        </div>
-        <div class="swatch">
-            <div class="color-box" style="background: #edb08f;"></div>
-            <div class="label"><span class="name">red+1</span><br><span class="hex">#edb08f</span></div>
-        </div>
-        <div class="swatch">
-            <div class="color-box" style="background: #edbca2;"></div>
-            <div class="label"><span class="name">red+2</span><br><span class="hex">#edbca2</span></div>
-        </div>
-        <div class="swatch">
-            <div class="color-box" style="background: #875f00;"></div>
-            <div class="label"><span class="name">yellow-2</span><br><span class="hex">#875f00</span></div>
-        </div>
-        <div class="swatch">
-            <div class="color-box" style="background: #ffd700;"></div>
-            <div class="label"><span class="name">yellow-1</span><br><span class="hex">#ffd700</span></div>
-        </div>
-        <div class="swatch">
-            <div class="color-box" style="background: #d7af5f;"></div>
-            <div class="label"><span class="name">yellow</span><br><span class="hex">#d7af5f</span></div>
-        </div>
-        <div class="swatch">
-            <div class="color-box" style="background: #ffd75f;"></div>
-            <div class="label"><span class="name">yellow+1</span><br><span class="hex">#ffd75f</span></div>
-        </div>
-        <div class="swatch">
-            <div class="color-box" style="background: #f9ee98;"></div>
-            <div class="label"><span class="name">yellow+2</span><br><span class="hex">#f9ee98</span></div>
-        </div>
-        <div class="swatch">
-            <div class="color-box" style="background: #ff2a00;"></div>
-            <div class="label"><span class="name">intense-red</span><br><span class="hex">#ff2a00</span></div>
-        </div>
-        <div class="swatch">
-            <div class="color-box" style="background: #f0fef0;"></div>
-            <div class="label"><span class="name">fg</span><br><span class="hex">#f0fef0</span></div>
-        </div>
+  <h1>Dupre Theme Color Palette</h1>
+    <div class="family">
+      <div class="fam">bg</div>
+      <div class="swatch"><div class="box" style="background:#151311"></div><div class="name">bg</div><div class="hex">#151311</div></div>
+      <div class="swatch"><div class="box" style="background:#151311"></div><div class="name">bg+0</div><div class="hex">#151311</div></div>
+      <div class="swatch"><div class="box" style="background:#252321"></div><div class="name">bg+1</div><div class="hex">#252321</div></div>
+      <div class="swatch"><div class="box" style="background:#474544"></div><div class="name">bg+2</div><div class="hex">#474544</div></div>
+    </div>
+    <div class="family">
+      <div class="fam">gray</div>
+      <div class="swatch"><div class="box" style="background:#58574e"></div><div class="name">gray-2</div><div class="hex">#58574e</div></div>
+      <div class="swatch"><div class="box" style="background:#6c6a60"></div><div class="name">gray-1</div><div class="hex">#6c6a60</div></div>
+      <div class="swatch"><div class="box" style="background:#969385"></div><div class="name">gray</div><div class="hex">#969385</div></div>
+      <div class="swatch"><div class="box" style="background:#b4b1a2"></div><div class="name">gray+1</div><div class="hex">#b4b1a2</div></div>
+      <div class="swatch"><div class="box" style="background:#d0cbc0"></div><div class="name">gray+2</div><div class="hex">#d0cbc0</div></div>
+    </div>
+    <div class="family">
+      <div class="fam">steel</div>
+      <div class="swatch"><div class="box" style="background:#8a9496"></div><div class="name">steel</div><div class="hex">#8a9496</div></div>
+      <div class="swatch"><div class="box" style="background:#acb0b3"></div><div class="name">steel+1</div><div class="hex">#acb0b3</div></div>
+      <div class="swatch"><div class="box" style="background:#c0c7ca"></div><div class="name">steel+2</div><div class="hex">#c0c7ca</div></div>
+    </div>
+    <div class="family">
+      <div class="fam">blue</div>
+      <div class="swatch"><div class="box" style="background:#67809c"></div><div class="name">blue</div><div class="hex">#67809c</div></div>
+      <div class="swatch"><div class="box" style="background:#b2c3cc"></div><div class="name">blue+1</div><div class="hex">#b2c3cc</div></div>
+      <div class="swatch"><div class="box" style="background:#d9e2ff"></div><div class="name">blue+2</div><div class="hex">#d9e2ff</div></div>
+    </div>
+    <div class="family">
+      <div class="fam">green</div>
+      <div class="swatch"><div class="box" style="background:#646d14"></div><div class="name">green-2</div><div class="hex">#646d14</div></div>
+      <div class="swatch"><div class="box" style="background:#869038"></div><div class="name">green-1</div><div class="hex">#869038</div></div>
+      <div class="swatch"><div class="box" style="background:#a4ac64"></div><div class="name">green</div><div class="hex">#a4ac64</div></div>
+      <div class="swatch"><div class="box" style="background:#ccc768"></div><div class="name">green+1</div><div class="hex">#ccc768</div></div>
+    </div>
+    <div class="family">
+      <div class="fam">red</div>
+      <div class="swatch"><div class="box" style="background:#3f1c0f"></div><div class="name">red-3</div><div class="hex">#3f1c0f</div></div>
+      <div class="swatch"><div class="box" style="background:#7c2a09"></div><div class="name">red-2</div><div class="hex">#7c2a09</div></div>
+      <div class="swatch"><div class="box" style="background:#a7502d"></div><div class="name">red-1</div><div class="hex">#a7502d</div></div>
+      <div class="swatch"><div class="box" style="background:#d47c59"></div><div class="name">red</div><div class="hex">#d47c59</div></div>
+      <div class="swatch"><div class="box" style="background:#edb08f"></div><div class="name">red+1</div><div class="hex">#edb08f</div></div>
+      <div class="swatch"><div class="box" style="background:#edbca2"></div><div class="name">red+2</div><div class="hex">#edbca2</div></div>
+    </div>
+    <div class="family">
+      <div class="fam">yellow</div>
+      <div class="swatch"><div class="box" style="background:#875f00"></div><div class="name">yellow-2</div><div class="hex">#875f00</div></div>
+      <div class="swatch"><div class="box" style="background:#ffd700"></div><div class="name">yellow-1</div><div class="hex">#ffd700</div></div>
+      <div class="swatch"><div class="box" style="background:#d7af5f"></div><div class="name">yellow</div><div class="hex">#d7af5f</div></div>
+      <div class="swatch"><div class="box" style="background:#ffd75f"></div><div class="name">yellow+1</div><div class="hex">#ffd75f</div></div>
+      <div class="swatch"><div class="box" style="background:#f9ee98"></div><div class="name">yellow+2</div><div class="hex">#f9ee98</div></div>
+    </div>
+    <div class="family">
+      <div class="fam">intense-red</div>
+      <div class="swatch"><div class="box" style="background:#ff2a00"></div><div class="name">intense-red</div><div class="hex">#ff2a00</div></div>
+    </div>
+    <div class="family">
+      <div class="fam">fg</div>
+      <div class="swatch"><div class="box" style="background:#f0fef0"></div><div class="name">fg</div><div class="hex">#f0fef0</div></div>
     </div>
 </body>
 </html>
diff --git a/themes/dupre-palette.png b/themes/dupre-palette.png
index d0e78b5f..94bd084c 100644
--- a/themes/dupre-palette.png
+++ b/themes/dupre-palette.png
diff --git a/themes/gen-palette-preview.py b/themes/gen-palette-preview.py
new file mode 100755
index 00000000..0b15f10b
--- /dev/null
+++ b/themes/gen-palette-preview.py
@@ -0,0 +1,83 @@
+#!/usr/bin/env python3
+"""Generate the Dupre palette preview HTML from dupre-palette.el.
+
+Reads the (name "#hex") pairs straight from the palette source so the preview
+can't drift from the theme. Groups colors into one row per family (by name
+prefix, e.g. gray-2/gray/gray+1 share the "gray" row), with fixed-width
+swatches so columns line up across rows.
+
+Regenerate the PNG from the HTML afterwards:
+
+  google-chrome-stable --headless=new --screenshot=themes/dupre-palette.png \\
+    --window-size=975,1520 --hide-scrollbars --default-background-color=151311FF \\
+    "file://$PWD/themes/dupre-color-palette.html"
+"""
+import re
+from pathlib import Path
+
+HERE = Path(__file__).resolve().parent
+SRC = HERE / "dupre-palette.el"
+OUT = HERE / "dupre-color-palette.html"
+
+text = open(SRC).read()
+# Only the dupre-palette defconst has (name "#hex") pairs; semantic mappings are
+# (name colorname) with no hex, so this regex selects exactly the base palette.
+pairs = re.findall(r'\(([a-z0-9]+(?:[+\-]\d+)?(?:-[a-z]+)?)\s+"(#[0-9a-fA-F]{6})"\)', text)
+
+def family(name):
+    m = re.match(r'^([a-z]+(?:-[a-z]+)??)(?:[+\-]\d+)?$', name)
+    return m.group(1) if m else name
+
+# Group consecutive same-family entries (palette.el already orders them so).
+rows, cur_fam, cur = [], None, []
+for name, hexv in pairs:
+    fam = family(name)
+    if fam != cur_fam:
+        if cur:
+            rows.append((cur_fam, cur))
+        cur_fam, cur = fam, []
+    cur.append((name, hexv))
+if cur:
+    rows.append((cur_fam, cur))
+
+def swatch(name, hexv):
+    return (f'      <div class="swatch">'
+            f'<div class="box" style="background:{hexv}"></div>'
+            f'<div class="name">{name}</div>'
+            f'<div class="hex">{hexv}</div></div>')
+
+body = []
+for fam, items in rows:
+    body.append('    <div class="family">')
+    body.append(f'      <div class="fam">{fam}</div>')
+    body.extend(swatch(n, h) for n, h in items)
+    body.append('    </div>')
+
+html = f"""<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Dupre Theme Color Palette</title>
+  <style>
+    body {{ font-family: 'Courier New', monospace; background: #151311; color: #f0fef0;
+            padding: 28px; margin: 0; width: max-content; }}
+    h1 {{ font-size: 20px; font-weight: bold; margin: 0 0 24px; }}
+    .family {{ display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }}
+    .fam {{ width: 96px; text-align: right; padding-top: 46px; color: #b4b1a2;
+            font-size: 13px; flex-shrink: 0; }}
+    .swatch {{ width: 120px; flex-shrink: 0; }}
+    .box {{ width: 112px; height: 112px; border: 1px solid #474544; border-radius: 3px; }}
+    .name {{ font-weight: bold; color: #f0fef0; font-size: 12px; margin-top: 5px; }}
+    .hex {{ color: #969385; font-size: 11px; }}
+  </style>
+</head>
+<body>
+  <h1>Dupre Theme Color Palette</h1>
+{chr(10).join(body)}
+</body>
+</html>
+"""
+
+open(OUT, "w").write(html)
+print(f"wrote {OUT}: {len(pairs)} colors in {len(rows)} family rows")
+print("families:", ", ".join(f for f, _ in rows))
author	Craig Jennings <c@cjennings.net>	2026-05-22 17:03:24 -0500
committer	Craig Jennings <c@cjennings.net>	2026-05-22 17:03:24 -0500
commit	ec42e0f6c7e9452d79898a096eca2710b23a9d60 (patch)
tree	a7d33ba4fbde7fc28cffd215da13b8547acb7d09 /themes
parent	39f5005fa01cdd019a6fb6d893245ed1e444ea5c (diff)
download	dotemacs-ec42e0f6c7e9452d79898a096eca2710b23a9d60.tar.gz dotemacs-ec42e0f6c7e9452d79898a096eca2710b23a9d60.zip