From 49680afc7de2f394aaa17740cb4f96e0904838eb Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Mon, 8 Jun 2026 02:07:35 -0500 Subject: feat(theme-selector): full category coverage, elements rename, visible tile borders I renamed the assignments column "category" to "elements" and gave every language sample a token for each category that applies to it, so clicking an element name flashes real code in any language: Python gained a regexp, Elisp/Go/TypeScript/C each a builtin, and Go and Shell an escape. The categories a language genuinely lacks (Elisp has no preprocessor, Shell no types) fall back to flashing the example cell. The save area header is now "export, import, and save", and the palette tiles and the picker swatch carry a visible border so a tile that matches the page background still reads. --- scripts/theme-selector/generate.py | 10 +++++----- scripts/theme-selector/samples.py | 11 +++++++---- scripts/theme-selector/theme-selector.html | 12 ++++++------ 3 files changed, 18 insertions(+), 15 deletions(-) (limited to 'scripts') diff --git a/scripts/theme-selector/generate.py b/scripts/theme-selector/generate.py index 4bce322a0..696592fa9 100644 --- a/scripts/theme-selector/generate.py +++ b/scripts/theme-selector/generate.py @@ -76,7 +76,7 @@ HTML = """theme-selector .sbtn{width:26px;height:24px;border:1px solid #3a3a3a;border-radius:3px;background:#eaeaea;color:#111;cursor:pointer;font-size:15px;margin-right:2px;padding:0} .sbtn.on{background:#0d0b0a;color:#cdced1;border-color:#8a9496} .pals{display:flex;gap:8px;flex-wrap:wrap} - .pchip{width:128px;height:58px;border-radius:6px;border:1px solid #00000060;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:grab} + .pchip{width:128px;height:58px;border-radius:6px;border:1px solid #555;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:grab} .pchip.drag{opacity:.4} .pchip.sel{outline:3px solid #e8bd30;outline-offset:2px} .pchip.over{outline:2px dashed #e8bd30;outline-offset:1px} .pchip input.nm{background:transparent;border:none;text-align:center;font:bold 10pt monospace;width:108px;outline:none} .pchip .mv{position:absolute;bottom:-1px;background:none;border:none;cursor:pointer;font-size:22px;line-height:1;font-weight:bold;opacity:.5;padding:0 5px} .pchip .mv:hover{opacity:1} .pchip .mv.l{left:0} .pchip .mv.r{right:0} .pchip .hx{font-size:10pt;opacity:.8} .pchip .rm{position:absolute;top:2px;right:5px;background:none;border:none;cursor:pointer;font-size:14px;font-weight:bold;opacity:.7} @@ -85,7 +85,7 @@ HTML = """theme-selector .palctl input[type=text]{background:#161412;border:1px solid #252321;color:#cdced1;border-radius:4px;padding:5px 8px;font:10pt monospace} .palctl input[type=text]::placeholder{color:#b4b1a2;opacity:1} .palctl{position:relative} - .swatch{width:128px;height:58px;border:1px solid #00000060;border-radius:6px;cursor:pointer;background:#888} + .swatch{width:128px;height:58px;border:1px solid #555;border-radius:6px;cursor:pointer;background:#888} .picker{display:none;position:absolute;top:66px;left:0;z-index:60;background:#161412;border:1px solid #3a3a3a;border-radius:8px;padding:12px;box-shadow:0 10px 30px #000b;width:470px} .picker .prow{display:flex;gap:10px} .sv{position:relative;width:400px;height:320px;border-radius:4px;cursor:crosshair} @@ -97,7 +97,7 @@ HTML = """theme-selector .hue{position:relative;width:34px;height:320px;border-radius:4px;cursor:ns-resize;background:linear-gradient(to bottom,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)} .huecur{position:absolute;left:-2px;right:-2px;height:4px;background:#fff;border:1px solid #0008;transform:translateY(-50%);pointer-events:none} .pinfo{display:flex;justify-content:space-between;margin:10px 2px 8px;font:12pt monospace;color:#cdced1} - .pkchips{display:flex;flex-wrap:wrap;gap:5px} .pkchips .pc{width:28px;height:28px;border-radius:3px;border:1px solid #00000066;cursor:pointer} + .pkchips{display:flex;flex-wrap:wrap;gap:5px} .pkchips .pc{width:28px;height:28px;border-radius:3px;border:1px solid #555;cursor:pointer} .palctl button,.filebar button,.fbtn{background:#252321;color:#e8bd30;border:1px solid #3a3a3a;border-radius:4px;padding:6px 12px;font:10pt monospace;cursor:pointer} #palmsg{font:10pt monospace;opacity:0;transition:opacity .35s;margin-left:6px} #export{width:100%;height:180px;margin-top:10px;background:#0d0b0a;color:#a4ac64;border:1px solid #252321;border-radius:6px;font:10pt monospace;padding:10px} @@ -142,7 +142,7 @@ HTML = """theme-selector
-

save / load theme

+

export, import, and save

@@ -158,7 +158,7 @@ HTML = """theme-selector

code/color assignments

-
color △stylecategory △examplecontrast
+
color △styleelements △examplecontrast
diff --git a/scripts/theme-selector/samples.py b/scripts/theme-selector/samples.py index 38d57092f..539effc85 100644 --- a/scripts/theme-selector/samples.py +++ b/scripts/theme-selector/samples.py @@ -20,6 +20,7 @@ PYS=[ [('kw','from'),('p',' '),('var','dataclasses'),('p',' '),('kw','import'),('p',' '),('var','dataclass'),('punc',','),('p',' '),('var','field')], [], [('con','DEFAULT_PORT'),('op',':'),('p',' '),('ty','int'),('p',' '),('op','='),('p',' '),('num','8080')], + [('con','HEX'),('p',' '),('op','='),('p',' '),('var','re'),('op','.'),('fnc','compile'),('punc','('),('re','r"#[0-9a-f]{6}"'),('punc',')')], [], [('dec','@dataclass')], [('kw','class'),('p',' '),('ty','Theme'),('op',':')], @@ -49,7 +50,7 @@ ELS=[ [], [('punc','('),('kw','defun'),('p',' '),('fnd','cache-get'),('p',' '),('punc','('),('var','key'),('punc',')')], [('p',' '),('doc','"Return cached value for KEY."')], - [('p',' '),('punc','('),('kw','or'),('p',' '),('punc','('),('fnc','gethash'),('p',' '),('var','key'),('p',' '),('var','cache--tbl'),('punc',')')], + [('p',' '),('punc','('),('kw','or'),('p',' '),('punc','('),('bi','gethash'),('p',' '),('var','key'),('p',' '),('var','cache--tbl'),('punc',')')], [('p',' '),('punc','('),('kw','let'),('p',' '),('punc','(('),('var','v'),('p',' '),('punc','('),('fnc','compute'),('p',' '),('var','key'),('p',' '),('num','42'),('punc','))) ')], [('p',' '),('punc','('),('fnc','puthash'),('p',' '),('var','key'),('p',' '),('var','v'),('p',' '),('var','cache--tbl'),('punc',') '),('var','v'),('punc','))))')], [], @@ -83,9 +84,9 @@ GOS=[ [('kw','func'),('p',' '),('punc','('),('var','q'),('p',' '),('op','*'),('ty','Queue'),('punc',')'),('p',' '),('fnd','Push'),('punc','('),('var','o'),('p',' '),('op','*'),('ty','Order'),('punc',')'),('p',' '),('ty','error'),('p',' '),('punc','{')], [('p',' '),('cmd','//'),('cm',' reject nil')], [('p',' '),('kw','if'),('p',' '),('var','o'),('p',' '),('op','=='),('p',' '),('con','nil'),('p',' '),('punc','{')], - [('p',' '),('kw','return'),('p',' '),('fnc','fmt.Errorf'),('punc','('),('str','"nil"'),('punc',')')], + [('p',' '),('kw','return'),('p',' '),('fnc','fmt.Errorf'),('punc','('),('str','"nil'),('esc','\\n'),('str','"'),('punc',')')], [('p',' '),('punc','}')], - [('p',' '),('var','q'),('op','.'),('prop','items'),('p',' '),('op','='),('p',' '),('fnc','append'),('punc','('),('var','q'),('op','.'),('prop','items'),('punc',','),('p',' '),('var','o'),('punc',')')], + [('p',' '),('var','q'),('op','.'),('prop','items'),('p',' '),('op','='),('p',' '),('bi','append'),('punc','('),('var','q'),('op','.'),('prop','items'),('punc',','),('p',' '),('var','o'),('punc',')')], [('p',' '),('kw','return'),('p',' '),('con','nil')], [('punc','}')], [], @@ -117,6 +118,7 @@ TSS=[ [('kw','const'),('p',' '),('var','q'),('p',' '),('op','='),('p',' '),('kw','new'),('p',' '),('ty','OrderQueue'),('punc','()'),('punc',';')], [('var','q'),('op','.'),('fnd','push'),('punc','('),('punc','{'),('p',' '),('prop','id'),('op',':'),('p',' '),('num','1'),('p',' '),('punc','}'),('p',' '),('kw','as'),('p',' '),('ty','Order'),('punc',')'),('punc',';')], [('var','console'),('op','.'),('fnc','log'),('punc','('),('var','q'),('op','.'),('prop','max'),('punc',')'),('punc',';')], + [('kw','const'),('p',' '),('var','cap'),('p',' '),('op','='),('p',' '),('var','Math'),('op','.'),('bi','max'),('punc','('),('con','LIMIT'),('punc',','),('p',' '),('num','0'),('punc',')'),('punc',';')], ] CS=[ @@ -140,6 +142,7 @@ CS=[ [('cmd','//'),('cm',' entrypoint')], [('ty','int'),('p',' '),('fnd','main'),('punc','('),('ty','void'),('punc',')'),('p',' '),('punc','{')], [('p',' '),('ty','Order'),('p',' '),('var','o'),('p',' '),('op','='),('p',' '),('punc','{'),('p',' '),('op','.'),('prop','id'),('p',' '),('op','='),('p',' '),('num','1'),('p',' '),('punc','}'),('punc',';')], + [('p',' '),('ty','Order'),('p',' '),('op','*'),('var','p2'),('p',' '),('op','='),('p',' '),('bi','malloc'),('punc','('),('bi','sizeof'),('punc','('),('ty','Order'),('punc','))'),('punc',';')], [('p',' '),('fnc','push'),('punc','('),('op','&'),('var','o'),('punc',')'),('punc',';')], [('p',' '),('kw','return'),('p',' '),('num','0'),('punc',';')], [('punc','}')], @@ -165,7 +168,7 @@ SHS=[ [('p',' '),('kw','for'),('p',' '),('var','host'),('p',' '),('kw','in'),('p',' '),('str','"$@"'),('punc',';'),('p',' '),('kw','do')], [('p',' '),('fnc','deploy'),('p',' '),('str','"$host"'),('p',' '),('op','||'),('p',' '),('bi','exit'),('p',' '),('num','1')], [('p',' '),('kw','done')], - [('p',' '),('bi','echo'),('p',' '),('str','"all done"')], + [('p',' '),('bi','echo'),('p',' '),('op','-e'),('p',' '),('str','"all done'),('esc','\\n'),('str','"')], [('punc','}')], [], [('fnc','main'),('p',' '),('str','"$@"')], diff --git a/scripts/theme-selector/theme-selector.html b/scripts/theme-selector/theme-selector.html index 52f6f3a6d..b43809a0a 100644 --- a/scripts/theme-selector/theme-selector.html +++ b/scripts/theme-selector/theme-selector.html @@ -14,7 +14,7 @@ .sbtn{width:26px;height:24px;border:1px solid #3a3a3a;border-radius:3px;background:#eaeaea;color:#111;cursor:pointer;font-size:15px;margin-right:2px;padding:0} .sbtn.on{background:#0d0b0a;color:#cdced1;border-color:#8a9496} .pals{display:flex;gap:8px;flex-wrap:wrap} - .pchip{width:128px;height:58px;border-radius:6px;border:1px solid #00000060;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:grab} + .pchip{width:128px;height:58px;border-radius:6px;border:1px solid #555;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:grab} .pchip.drag{opacity:.4} .pchip.sel{outline:3px solid #e8bd30;outline-offset:2px} .pchip.over{outline:2px dashed #e8bd30;outline-offset:1px} .pchip input.nm{background:transparent;border:none;text-align:center;font:bold 10pt monospace;width:108px;outline:none} .pchip .mv{position:absolute;bottom:-1px;background:none;border:none;cursor:pointer;font-size:22px;line-height:1;font-weight:bold;opacity:.5;padding:0 5px} .pchip .mv:hover{opacity:1} .pchip .mv.l{left:0} .pchip .mv.r{right:0} .pchip .hx{font-size:10pt;opacity:.8} .pchip .rm{position:absolute;top:2px;right:5px;background:none;border:none;cursor:pointer;font-size:14px;font-weight:bold;opacity:.7} @@ -23,7 +23,7 @@ .palctl input[type=text]{background:#161412;border:1px solid #252321;color:#cdced1;border-radius:4px;padding:5px 8px;font:10pt monospace} .palctl input[type=text]::placeholder{color:#b4b1a2;opacity:1} .palctl{position:relative} - .swatch{width:128px;height:58px;border:1px solid #00000060;border-radius:6px;cursor:pointer;background:#888} + .swatch{width:128px;height:58px;border:1px solid #555;border-radius:6px;cursor:pointer;background:#888} .picker{display:none;position:absolute;top:66px;left:0;z-index:60;background:#161412;border:1px solid #3a3a3a;border-radius:8px;padding:12px;box-shadow:0 10px 30px #000b;width:470px} .picker .prow{display:flex;gap:10px} .sv{position:relative;width:400px;height:320px;border-radius:4px;cursor:crosshair} @@ -35,7 +35,7 @@ .hue{position:relative;width:34px;height:320px;border-radius:4px;cursor:ns-resize;background:linear-gradient(to bottom,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)} .huecur{position:absolute;left:-2px;right:-2px;height:4px;background:#fff;border:1px solid #0008;transform:translateY(-50%);pointer-events:none} .pinfo{display:flex;justify-content:space-between;margin:10px 2px 8px;font:12pt monospace;color:#cdced1} - .pkchips{display:flex;flex-wrap:wrap;gap:5px} .pkchips .pc{width:28px;height:28px;border-radius:3px;border:1px solid #00000066;cursor:pointer} + .pkchips{display:flex;flex-wrap:wrap;gap:5px} .pkchips .pc{width:28px;height:28px;border-radius:3px;border:1px solid #555;cursor:pointer} .palctl button,.filebar button,.fbtn{background:#252321;color:#e8bd30;border:1px solid #3a3a3a;border-radius:4px;padding:6px 12px;font:10pt monospace;cursor:pointer} #palmsg{font:10pt monospace;opacity:0;transition:opacity .35s;margin-left:6px} #export{width:100%;height:180px;margin-top:10px;background:#0d0b0a;color:#a4ac64;border:1px solid #252321;border-radius:6px;font:10pt monospace;padding:10px} @@ -80,7 +80,7 @@
-

save / load theme

+

export, import, and save

@@ -96,7 +96,7 @@

code/color assignments

-
color △stylecategory △examplecontrast
+
color △styleelements △examplecontrast
@@ -114,7 +114,7 @@