From 77a35727d54b26f9f6a48bc65a021d6bba1ee4be 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/theme-selector.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'scripts/theme-selector/theme-selector.html') diff --git a/scripts/theme-selector/theme-selector.html b/scripts/theme-selector/theme-selector.html index 52f6f3a6..b43809a0 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 @@