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: 445cb867283aeeb80c7863d67a716d8f99e4e612 (patch)
tree: 30d7b0c5916a3eb18d6d8eab61012621a759cec3 /themes
parent: fe4ee2dc51a4bbc70b90f6d104c222857384b4e7 (diff)
download: dotemacs-445cb867283aeeb80c7863d67a716d8f99e4e612.tar.gz
dotemacs-445cb867283aeeb80c7863d67a716d8f99e4e612.zip
3 files changed, 156 insertions, 175 deletions
diff --git a/themes/dupre-color-palette.html b/themes/dupre-color-palette.html
index 9bbbb9516..f3d6ae31a 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 d0e78b5ff..94bd084c6 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 000000000..0b15f10bb
--- /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	445cb867283aeeb80c7863d67a716d8f99e4e612 (patch)
tree	30d7b0c5916a3eb18d6d8eab61012621a759cec3 /themes
parent	fe4ee2dc51a4bbc70b90f6d104c222857384b4e7 (diff)
download	dotemacs-445cb867283aeeb80c7863d67a716d8f99e4e612.tar.gz dotemacs-445cb867283aeeb80c7863d67a716d8f99e4e612.zip