From eea80c78cfce99b504b60acab8509fb49999bdc7 Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Sun, 7 Jun 2026 17:26:45 -0500 Subject: feat(theme-selector): two-column layout, contrast ratings, taller samples I restructured the page into ordered rows. The top row splits palette on the left and save / load theme on the right. The next row, "code/color assignments," puts the assignment table on the left and a single code sample on the right, picked by a language dropdown and recolored live from the assignments. The last row is the interface faces. I added a contrast column to the assignment table: each color's WCAG ratio on the current background plus an AAA / AA / FAIL rating, recomputed live and re-rated when the background changes. I also replaced the six-language scroll with the one-language picker, lengthened every sample to roughly the height of the assignment table, and renamed the title suffix to "theme." --- scripts/theme-selector/generate.py | 99 ++++++++++++++++++------------ scripts/theme-selector/samples.py | 46 ++++++++++++++ scripts/theme-selector/theme-selector.html | 95 +++++++++++++++++----------- 3 files changed, 165 insertions(+), 75 deletions(-) (limited to 'scripts/theme-selector') diff --git a/scripts/theme-selector/generate.py b/scripts/theme-selector/generate.py index 94910d1c..087920d4 100644 --- a/scripts/theme-selector/generate.py +++ b/scripts/theme-selector/generate.py @@ -1,4 +1,4 @@ -import json, re, os +import json, os HERE=os.path.dirname(os.path.abspath(__file__)) ns={} src=open(os.path.join(HERE,'samples.py')).read() @@ -38,8 +38,6 @@ UIMAP={"cursor":{"fg":None,"bg":"#a9b2bb"},"region":{"fg":None,"bg":"#264364"}, "show-paren-mismatch":{"fg":"#0d0b0a","bg":"#cb6b4d"},"link":{"fg":"#67809c","bg":None}, "error":{"fg":"#cb6b4d","bg":None},"warning":{"fg":"#e8bd30","bg":None}, "success":{"fg":"#5d9b86","bg":None},"vertical-border":{"fg":"#2f343a","bg":None}} -def cid(l): return re.sub(r'\W','',l) -code_cont="".join(f'

{l}

' for l in SAMPLES)
 HTML = """theme-selector
 
-
Untitled: color palette

-
code samples

-
CODE_CONT

-
color → category — chip reassigns · N/B/I sets weight & slant · click a header to sort

-
color △stylecategory △example

-
UI / interface faces — foreground & background per face

-
faceforegroundbackgroundpreview

-
palette — add / remove / rename / drag to reorder

-

-

- 
- 
- 
- 
-

-
save / load theme

-

- 
+
Untitled: theme

+

+ 

+  
palette

+  

+  

+   
+   
+   
+   
+  

+ 

+ 

+  
save / load theme

+  

+   
+  

+  

+   
+   
+   
+  

+  
+ 

 

-

- 
- 
- 
+
code/color assignments

+

+ 

+  
color △stylecategory △examplecontrast

+ 

+ 

+  

+  

+ 

 

-
+
interface faces

+
faceforegroundbackgroundpreview

 """
-HTML=(HTML.replace("CODE_CONT",code_cont).replace("SAMPLES_J",json.dumps(SAMPLES))
+HTML=(HTML.replace("SAMPLES_J",json.dumps(SAMPLES))
  .replace("PALETTE_J",json.dumps(PALETTE)).replace("CATS_J",json.dumps(CATS))
  .replace("UIFACES_J",json.dumps(UI_FACES)).replace("UIMAP_J",json.dumps(UIMAP))
  .replace("BOLD_J",json.dumps(BOLD)).replace("MAP_J",json.dumps(MAP)))
diff --git a/scripts/theme-selector/samples.py b/scripts/theme-selector/samples.py
index 1637a2a3..41307a1c 100644
--- a/scripts/theme-selector/samples.py
+++ b/scripts/theme-selector/samples.py
@@ -32,6 +32,13 @@ PYS=[
  [('p','        '),('var','v'),('p',' '),('op','='),('p',' '),('var','self'),('op','.'),('prop','colors'),('op','.'),('fnc','get'),('punc','('),('var','key'),('punc',','),('p',' '),('str','"'),('esc','\\t'),('str','none"'),('punc',')')],
  [('p','        '),('kw','if'),('p',' '),('bi','len'),('punc','('),('var','v'),('punc',')'),('p',' '),('op','=='),('p',' '),('num','0'),('op',':'),('p',' '),('kw','return'),('p',' '),('con','None')],
  [('p','        '),('kw','return'),('p',' '),('var','v')],
+ [],
+ [('p','    '),('dec','@property')],
+ [('p','    '),('kw','def'),('p',' '),('fnd','size'),('punc','('),('var','self'),('punc',')'),('p',' '),('op','->'),('p',' '),('ty','int'),('op',':')],
+ [('p','        '),('kw','return'),('p',' '),('bi','len'),('punc','('),('var','self'),('op','.'),('prop','colors'),('punc',')')],
+ [],
+ [('var','theme'),('p',' '),('op','='),('p',' '),('ty','Theme'),('punc','('),('str','"dupre"'),('punc',')')],
+ [('fnc','print'),('punc','('),('var','theme'),('op','.'),('fnc','resolve'),('punc','('),('str','"bg"'),('punc','))')],
 ]
 ELS=[
  [('cmd',';;'),('cm',' cache.el')],
@@ -45,6 +52,20 @@ ELS=[
  [('p','  '),('punc','('),('kw','or'),('p',' '),('punc','('),('fnc','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','))))')],
+ [],
+ [('punc','('),('kw','defun'),('p',' '),('fnd','cache-clear'),('p',' '),('punc','()')],
+ [('p','  '),('doc','"Empty the memo table."')],
+ [('p','  '),('punc','('),('kw','interactive'),('punc',')')],
+ [('p','  '),('punc','('),('fnc','clrhash'),('p',' '),('var','cache--tbl'),('punc',')')],
+ [('p','  '),('punc','('),('fnc','message'),('p',' '),('str','"cleared'),('esc','\\n'),('str','"'),('punc','))')],
+ [],
+ [('punc','('),('kw','defun'),('p',' '),('fnd','cache-keys'),('p',' '),('punc','()')],
+ [('p','  '),('doc','"Return all keys."')],
+ [('p','  '),('punc','('),('kw','let'),('p',' '),('punc','(('),('var','acc'),('p',' '),('con','nil'),('punc','))')],
+ [('p','    '),('punc','('),('fnc','maphash'),('p',' '),('punc','('),('kw','lambda'),('p',' '),('punc','('),('var','k'),('p',' '),('var','_v'),('punc',')'),('p',' '),('punc','('),('fnc','push'),('p',' '),('var','k'),('p',' '),('var','acc'),('punc','))')],
+ [('p','      '),('var','cache--tbl'),('punc',')'),('p',' '),('var','acc'),('punc','))')],
+ [],
+ [('punc','('),('kw','provide'),('p',' '),('con',"'cache"),('punc',')')],
 ]
 GOS=[
  [('cmd','//'),('cm',' queue.go')],
@@ -67,6 +88,10 @@ GOS=[
  [('p','    '),('var','q'),('op','.'),('prop','items'),('p',' '),('op','='),('p',' '),('fnc','append'),('punc','('),('var','q'),('op','.'),('prop','items'),('punc',','),('p',' '),('var','o'),('punc',')')],
  [('p','    '),('kw','return'),('p',' '),('con','nil')],
  [('punc','}')],
+ [],
+ [('kw','func'),('p',' '),('fnd','main'),('punc','()'),('p',' '),('punc','{')],
+ [('p','    '),('fnc','fmt.Println'),('punc','('),('op','&'),('ty','Queue'),('punc','{}'),('punc',')')],
+ [('punc','}')],
 ]
 TSS=[
  [('cmd','//'),('cm',' orders.ts')],
@@ -87,6 +112,11 @@ TSS=[
  [('p','    '),('kw','return'),('p',' '),('con','true'),('punc',';')],
  [('p','  '),('punc','}')],
  [('punc','}')],
+ [],
+ [('kw','const'),('p',' '),('con','LIMIT'),('op',':'),('p',' '),('ty','number'),('p',' '),('op','='),('p',' '),('num','50'),('punc',';')],
+ [('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',';')],
 ]
 
 CS=[
@@ -106,6 +136,13 @@ CS=[
  [('p','    '),('fnc','printf'),('punc','('),('str','"id=%d'),('esc',chr(92)+'n'),('str','"'),('punc',','),('p',' '),('var','o'),('op','->'),('prop','id'),('punc',');')],
  [('p','    '),('kw','return'),('p',' '),('num','0'),('punc',';')],
  [('punc','}')],
+ [],
+ [('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','    '),('fnc','push'),('punc','('),('op','&'),('var','o'),('punc',')'),('punc',';')],
+ [('p','    '),('kw','return'),('p',' '),('num','0'),('punc',';')],
+ [('punc','}')],
 ]
 SHS=[
  [('cmd','#!'),('cm','/bin/bash')],
@@ -123,6 +160,15 @@ SHS=[
  [('p','    '),('kw','fi')],
  [('p','    '),('fnc','rsync'),('p',' '),('op','-az'),('p',' '),('str','"$NAME"'),('p',' '),('str','"$target"')],
  [('punc','}')],
+ [],
+ [('fnd','main'),('punc','()'),('p',' '),('punc','{')],
+ [('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"')],
+ [('punc','}')],
+ [],
+ [('fnc','main'),('p',' '),('str','"$@"')],
 ]
 
 cols="".join(f'
{n}
{render(s)}
' for n,s in [("Elisp",ELS),("Go",GOS),("Python",PYS),("TypeScript",TSS),("Shell",SHS),("C/C++",CS)])
diff --git a/scripts/theme-selector/theme-selector.html b/scripts/theme-selector/theme-selector.html
index 827529c5..cda479fa 100644
--- a/scripts/theme-selector/theme-selector.html
+++ b/scripts/theme-selector/theme-selector.html
@@ -25,48 +25,69 @@
  #export{width:100%;height:180px;margin-top:10px;background:#0d0b0a;color:#a4ac64;border:1px solid #252321;border-radius:6px;font:10pt monospace;padding:10px}
  .filebar{margin:6px 0 0;display:flex;gap:8px;align-items:center}
  #pagetitle{font-size:30px;color:#cdced1;font-weight:normal;border:none;margin:4px 0 18px;padding:0}
+ .cols{display:flex;gap:28px;align-items:flex-start}
+ .pane{min-width:0} .pane.grow{flex:1} .pane.saveload{flex:0 0 auto;margin-left:auto}
+ .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}
 
-
Untitled: color palette

-
code samples

-
Elisp
Go
Python
TypeScript
Shell
C/C++

-
color → category — chip reassigns · N/B/I sets weight & slant · click a header to sort

-
color △stylecategory △example

-
UI / interface faces — foreground & background per face

-
faceforegroundbackgroundpreview

-
palette — add / remove / rename / drag to reorder

-

-

- 
- 
- 
- 
-

-
save / load theme

-

- 
+
Untitled: theme

+

+ 

+  
palette

+  

+  

+   
+   
+   
+   
+  

+ 

+ 

+  
save / load theme

+  

+   
+  

+  

+   
+   
+   
+  

+  
+ 

 

-

- 
- 
- 
+
code/color assignments

+

+ 

+  
color △stylecategory △examplecontrast

+ 

+ 

+  

+  

+ 

 

-
+
interface faces

+
faceforegroundbackgroundpreview

 
\ No newline at end of file
-- 
cgit v1.2.3