From 452380268034959e0b2d8052b6593a5ba802cf42 Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Sun, 7 Jun 2026 17:32:34 -0500 Subject: feat(theme-selector): add a live mock Emacs frame for the interface faces I split the interface-faces row into the face table on the left and a mock Emacs buffer on the right. The mock paints the faces in context: line numbers and fringe, a current line with hl-line and the current-line number, a region selection, an isearch match, a lazy-highlight, a show-paren match, a block cursor, active and inactive mode-lines, and a minibuffer prompt with an echo line for link, error, warning, and success. It rebuilds whenever a syntax or interface color changes, so it always reflects the current theme. The face table told you each color. The mock shows what they look like together in a real buffer. --- scripts/theme-selector/generate.py | 52 ++++++++++++++++++++++++++++-- scripts/theme-selector/theme-selector.html | 52 ++++++++++++++++++++++++++++-- 2 files changed, 100 insertions(+), 4 deletions(-) (limited to 'scripts') diff --git a/scripts/theme-selector/generate.py b/scripts/theme-selector/generate.py index 087920d4..8a89f6b1 100644 --- a/scripts/theme-selector/generate.py +++ b/scripts/theme-selector/generate.py @@ -70,6 +70,10 @@ HTML = """theme-selector .pane h1{margin-top:0} .filebar.end{justify-content:flex-end} .langbar{margin-bottom:10px;display:flex;gap:8px;align-items:center} #codepre{width:100%;box-sizing:border-box} + .mock{border:1px solid #252321;border-radius:8px;overflow:hidden;font:15px/1.7 monospace} + .mock .ln{display:flex;align-items:stretch;white-space:pre} + .mock .fr{width:10px;flex:0 0 auto} .mock .num{width:36px;flex:0 0 auto;text-align:right;padding-right:10px} + .mock .cd{flex:1;padding-left:8px} .mock .bar,.mock .echo{padding:4px 10px;white-space:pre}

Untitled: theme

@@ -107,7 +111,15 @@ HTML = """theme-selector

interface faces

-
faceforegroundbackgroundpreview
+
+
+
faceforegroundbackgroundpreview
+
+
+
+
+
+