From 055e0992ddba95d19f6d7f77687ae80148479e7a Mon Sep 17 00:00:00 2001
From: Craig Jennings <c@cjennings.net>
Date: Sat, 20 Jun 2026 05:48:01 -0400
Subject: feat(theme-studio): custom weight/slant dropdowns with previews

Replace the native weight and slant selects with a custom dropdown themed like the color dropdown. The values are spelled out (semibold instead of "semi", and an unset control reads "weight"/"slant" rather than "wt"/"sl"), and each popup option renders in its own weight or slant so the choice previews itself. The trigger shows the current value in that style too.

mkEnumDropdown mirrors the color dropdown's popup, lock, and outside-click handling, so the new control opens, locks, and closes the same way. The style-cluster gates drive the popup instead of a native select and check the spelled-out range plus the per-option preview.
---
 scripts/theme-studio/styles.css | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

(limited to 'scripts/theme-studio/styles.css')

diff --git a/scripts/theme-studio/styles.css b/scripts/theme-studio/styles.css
index e81bef810..a22777035 100644
--- a/scripts/theme-studio/styles.css
+++ b/scripts/theme-studio/styles.css
@@ -20,7 +20,6 @@
  .boxbtn.on{background:#3a3320;border-color:#e8bd30;color:#e8bd30}
  .boxbtn:disabled{opacity:.3;cursor:default}
  .stylecluster{display:flex;flex-wrap:wrap;align-items:center;gap:4px;width:max-content;max-width:210px}
- select.stylesel{width:78px;padding:2px 4px;font:11px monospace;font-weight:normal}
  .exptoggle{width:18px;height:18px;padding:0;border:1px solid #3a3a3a;border-radius:3px;background:#1f1c19;color:#8a9496;font:12px monospace;line-height:1;cursor:pointer;vertical-align:middle}
  .exptoggle.on{background:#3a3320;border-color:#e8bd30;color:#e8bd30}
  .exptoggle.exp-nd{border-color:#e8bd30;color:#e8bd30}
@@ -52,6 +51,14 @@
  .cdd.compact.is-default{border-color:#8f7810;box-shadow:inset 0 0 0 1px #8f7810}
  .cddsw{display:inline-block;width:13px;height:13px;border-radius:3px;border:1px solid #0007;flex:none}
  .cdd.compact .cddsw{width:18px;height:18px}
+ .cdd.enumdd{width:auto;min-width:60px;max-width:96px;justify-content:center;background:#161412;color:#cdced1;font:13px monospace;padding:5px 8px}
+ .cdd.enumdd.is-default{color:#8a8a82}
+ .cdd.enumdd.locked{cursor:default;opacity:.85;box-shadow:inset 0 0 0 2px #e8bd3088}
+ .enumpop{display:flex;flex-direction:column;gap:2px;min-width:96px}
+ .enumopt{text-align:left;font:13px monospace;color:#cdced1;background:#161412;border:1px solid #3a3a3a;border-radius:4px;padding:4px 10px;cursor:pointer}
+ .enumopt:hover{background:#252321}
+ .enumopt.sel{outline:1px solid #e8bd30;outline-offset:1px}
+ .enumdef{color:#9a9a92}
  .cddpop{position:fixed;z-index:200;background:#161412;border:1px solid #3a3a3a;border-radius:6px;box-shadow:0 12px 34px #000c;max-height:70vh;overflow:auto;padding:8px}
  .cddghead{display:flex;align-items:center;gap:8px;margin-bottom:7px}
  .cddgdef{font:bold 11px monospace;color:#cdced1;background:#161412;border:1px solid #3a3a3a;border-radius:4px;padding:3px 10px;cursor:pointer}
-- 
cgit v1.2.3