diff options
| author | Craig Jennings <c@cjennings.net> | 2026-06-09 18:58:10 -0500 |
|---|---|---|
| committer | Craig Jennings <c@cjennings.net> | 2026-06-09 18:58:10 -0500 |
| commit | 9da6c6635afafe4f2eae51d4bdd20dbc41856e27 (patch) | |
| tree | d50c6cd6017baf6542085a89ce1396354d0e4877 /scripts/theme-studio/generate.py | |
| parent | e7021bfe47072d8d9cb0fa6ec8d240d877f13cf0 (diff) | |
| download | dotemacs-9da6c6635afafe4f2eae51d4bdd20dbc41856e27.tar.gz dotemacs-9da6c6635afafe4f2eae51d4bdd20dbc41856e27.zip | |
feat(theme-studio): add the ramp UI in the palette
A ramp button on the palette controls opens a panel that generates a tonal ramp from the current color and previews the steps. Each step is a swatch labeled with its derived name (blue, blue+1, blue-1) and a clamp badge when the color left the sRGB gamut, so an out-of-gamut step is visible before it's added. The n, stepL, and chroma-ease controls default to 2 / 0.08 / 0.5 and re-preview live.
Clicking a step adds it to the palette; "add all" adds the lot. Steps insert adjacent to the source swatch in -n..+n order. A name collision is flagged and skipped rather than overwriting an existing color, and a generated hex that already matches another entry is added but flagged as a duplicate.
This is Phase 2, the DOM around the pure ramp() from Phase 1. A new #ramptest browser gate pins the step count, the ordered insertion after the source, the collision skip, and the clamp badge on an out-of-gamut step.
Diffstat (limited to 'scripts/theme-studio/generate.py')
| -rw-r--r-- | scripts/theme-studio/generate.py | 14 |
1 files changed, 14 insertions, 0 deletions
diff --git a/scripts/theme-studio/generate.py b/scripts/theme-studio/generate.py index 9315faad..60520b41 100644 --- a/scripts/theme-studio/generate.py +++ b/scripts/theme-studio/generate.py @@ -448,7 +448,21 @@ STYLES_CSS</style> <input type="text" id="newname" placeholder="name" onkeydown="if(event.key==='Enter')applyEdit()"> <button onclick="addColor()">+ add color</button> <button onclick="updateColor()">↻ update selected</button> + <button onclick="openRamp()" title="generate a tonal ramp (lighter/darker steps) from the current color">⛰ ramp</button> <span id="palmsg"></span> + <div id="ramp" class="ramp" style="display:none"> + <div class="ramprow"> + <label>ramp from <b id="rampname">—</b></label> + <label title="steps each direction (1-4)">steps <input type="number" id="rampn" min="1" max="4" step="1" value="2" style="width:48px"></label> + <label title="OKLCH lightness delta per step (0.04-0.12)">stepL <input type="number" id="rampstepl" min="0.04" max="0.12" step="0.01" value="0.08" style="width:62px"></label> + <label title="how much chroma eases out toward the extremes (0-1)">chroma ease <input type="number" id="rampce" min="0" max="1" step="0.1" value="0.5" style="width:58px"></label> + <button onclick="renderRamp()">preview</button> + <button onclick="addAllRampSteps()">+ add all</button> + <button onclick="closeRamp()">close</button> + </div> + <div id="rampprev" class="rampprev"></div> + <div id="rampmsg"></div> + </div> <div id="picker" class="picker"> <div class="prow"> <div id="sv" class="sv"><canvas id="svmask" class="svmask"></canvas><div id="svcur" class="svcur"></div></div> |