aboutsummaryrefslogtreecommitdiff
path: root/scripts/theme-studio/styles.css
Commit message (Collapse)AuthorAgeFilesLines
* refactor(theme-studio): polish the expander (underline inside, dynamic ↵Craig Jennings34 hours1-0/+1
| | | | | | | | | | | | | | colspan, nd flag) Three cleanups to the per-row expander from 3B-2. The underline control moves from the in-row style cell into the expander, next to overline. The row keeps weight, slant, and strike inline, so the style cell drops from three wrapped rows to two and the table reads flatter. mkExpander no longer hardcodes each table's colspan. tableColCount reads the column count from the table's header, so a detail row spans correctly even if a column is added later. A collapsed expander now flags itself when it hides an attribute that differs from the face's default, so a non-default value is never invisible. overflowNonDefault (app-core.js, unit-tested) compares the expander's attributes against the default. The toggle re-checks after every edit and gets the gold marker when any differ. faceBoxNonDefaults drops underline from the in-row style box in the same move, since underline is now the expander's concern. The #expandtest gate covers the underline control in its new home, its wavy write, and the flag appearing then clearing. Full suite green: Python 59, Node 201, ERT 41, plus the browser hash gates.
* feat(theme-studio): add a per-row expander for the overflow face attributesCraig Jennings34 hours1-0/+10
| | | | | | | | | | Each row in the syntax, UI, and package tables gets a "more" toggle that reveals a detail row beneath it, holding the attributes that don't fit a column: distant-fg, family, overline, inverse, and extend. The syntax and UI tables also get inherit and height there, since they have no inline column for those. Packages already do, so their expander leaves them out. One mkDetailEditor builds the editor and one mkExpander wires the toggle plus the hidden detail row, both shared across the three tables. The detail controls join the row's lock cell, so locking a row disables them too. Detail rows ride along when a table is sorted: applyTableSort now sorts only the main rows and re-attaches each detail row right after its parent (matched by data-detail-for), so a sort never separates the pair. The new #expandtest browser gate covers the toggle, the field set, the model writes, and the package expander dropping inherit/height. This is the last editor piece for the face-attribute work. Every attribute the model and emitter support is now reachable from the UI. Full suite green: Python 59, Node 198, ERT 41, plus the browser hash gates.
* feat(theme-studio): replace the style toggles with ↵Craig Jennings36 hours1-2/+2
| | | | | | | | | | | | weight/slant/underline/strike controls The B/I/U/S toggle buttons in the syntax, UI, and package tables become a weight selector (light/normal/medium/semibold/bold/heavy), a slant selector (normal/italic/oblique), and box-like underline and strike controls. The underline control sets line or wave plus a color, and the strike control sets a color. A face can now reach the full weight range and a wavy or colored underline, not just bold and italic on-off. All four controls come from one mkStyleControls helper shared across the three tables, and underline and strike share mkLineStyleControl (the box-control pattern, parameterized for a styled line vs a plain toggle). With the real controls in place I dropped the transitional legacyStyleOn/toggleLegacyStyle shim and its tests. The overflow attributes (distant-fg, family, overline, inverse, extend, and inherit/height for ui and syntax) move into a per-row expander next. Verified by screenshot and the browser style gate, which now drives a weight-select change and an underline-wave click through the model. Full suite green: Python 59, Node 198, ERT 41, plus the browser hash gates.
* fix(theme-studio): make the color picker stand out from the pageCraig Jennings4 days1-1/+1
| | | | The picker panel's background (#161412) sat a few shades off the page background (#0d0b0a), so it was hard to tell apart from the page. I gave it the studio's gold accent border (#e8bd30) and lifted the background to #1f1c19, both already used in the toolbar chrome, so the panel reads as a distinct surface. The #pickertest gate asserts the accent border and a per-channel background lift of at least 12 over the page, so the distinction can't quietly regress.
* fix(theme-studio): scope the view-nav arrow style under .pkgbarCraig Jennings4 days1-3/+4
| | | | The generic .pkgbar button rule outweighed my .viewnav rule on specificity, so the arrows rendered at default button size. Scoping the rule under .pkgbar wins the cascade and restores the compact arrow size.
* feat(theme-studio): prev/next arrows to step the view dropdownCraig Jennings4 days1-0/+3
| | | | I added left and right arrow buttons flanking the view dropdown. They step the selection to the previous or next item and re-render the faces table and preview, so you can walk the list without reopening the dropdown. A pure stepViewIndex helper clamps the index to the option range, no wrap. stepView sets the selection and calls onViewChange.
* feat(theme-studio): mark per-face setting boxes that differ from defaultCraig Jennings4 days1-0/+5
| | | | A non-default height looks identical to the default in the size input, so a stray 1.1 hides in plain sight. I added a small gold corner flag on any per-face setting cell (fg, bg, style, inherit, size, box) whose value differs from the face's seed default. A pure faceBoxNonDefaults helper computes the per-box flags. buildPkgTable resolves fg/bg to hex before comparing, so a palette-name-vs-hex difference doesn't read as a change.
* refactor(theme-studio): drop the too-similar-colors warning boxCraig Jennings4 days1-3/+0
| | | | The warning box under the palette wasn't useful there; the same ΔE info is reachable per-chip via the nearest-ΔE tooltip and inline contrast. Remove renderPaletteWarnings, the #palwarn element, its CSS, and the #deltatest gate. paletteWarnings still runs for the per-chip nearest distance.
* feat(theme-studio): 2D gallery color picker for the assignment dropdownsCraig Jennings5 days1-6/+11
| | | | | | | | | | - The color dropdown opens a grid, not a long list. - The grid mirrors the palette: ground strip, then a row per family. - Members run dark to light, with the current color outlined. - A default chip clears the assignment. - A (gone) cell shows a color no longer in the palette. - The trigger and step buttons stay the same. - All three tiers share the one dropdown.
* style(theme-studio): thin the barber-pole flag borderCraig Jennings5 days1-3/+3
|
* style(theme-studio): make the unused and gone flags a two-color barber-pole ↵Craig Jennings5 days1-3/+10
| | | | | | border The single-color dashed outline blended in. I replaced it with a ring of two alternating contrasting colors, drawn as a masked repeating gradient so it overlays without shifting layout. Unused tiles and columns use gold and black; gone assignments use red and white, keeping the two states distinct at a glance.
* feat(theme-studio): flag gone color assignments with a borderCraig Jennings5 days1-0/+1
| | | | An assignment pointing at a color no longer in the palette showed only as "(gone)" on hover. I added a distinct solid border to the swatch whenever its current value resolves to "(gone)", so a broken assignment reads at a glance. The solid red outline is set apart from the dashed unused-tile flag, keeping the two palette-state cues distinguishable. A #gonetest gate covers the flagged and unflagged cases.
* feat(theme-studio): flag unused palette tiles and columnsCraig Jennings5 days1-0/+2
| | | | | | I added usedPaletteHexes, a reverse lookup over the syntax, ui, and package assignments (plus the ground endpoints) that resolves each reference to a hex. renderPalette outlines a tile whose color is referenced nowhere and outlines a whole column when none of its colors are used, so dead colors stand out for pruning before a theme ships. The check is biased safe: an unresolvable reference marks nothing, so a color that is actually used is never flagged. Node tests cover the lookup. A #unusedtest gate covers the tile and column flags.
* feat(theme-studio): add a palette display toggle for base colors vs full spansCraig Jennings5 days1-0/+1
| | | | I added an arrow control to the palette that collapses every column to its base color (right arrow) or expands to the full spans (down arrow), to conserve vertical space. Ground steps collapse too, leaving bg and fg. A #paltoggletest gate covers the collapse and the expand.
* refactor(theme-studio): rename preview samples and match cluster button sizesCraig Jennings5 days1-1/+1
| | | | | | I renamed the preview personas to Christine (was Alice) and Evan (was Eve), trimming the mu4e header spacing so those rows stay aligned. I shrank the style cluster buttons from 26x24 to the 17x15 box-button size, so the two clusters match and the assignment row returns to roughly its pre-cluster height.
* refactor(theme-studio): drop dead bindings and CSS left by the cluster workCraig Jennings5 days1-1/+0
|
* feat(theme-studio): reflow the B/I/U/S style buttons into a 2x2 clusterCraig Jennings5 days1-0/+2
| | | | | | The four style buttons sat in a horizontal row, the widest part of the style column. I wrapped them in the same 2x2 grid the box control uses, so they form a square (still multi-toggle, since bold and italic combine). The column narrows to roughly half its width across all three tiers. A #styletest gate confirms the four buttons live in a .stylecluster.
* feat(theme-studio): compact the box control into a 2x2 button clusterCraig Jennings5 days1-1/+5
| | | | | | | | The box control was a wide select plus a color swatch, pinning the box column at 166px. I replaced the select with a 2x2 cluster of radio buttons for the four styles: blank (no box), □ (line), ▼ (pressed), ▲ (raised). The color swatch now shows only while a box style is active, so the no-box case stays narrow. The column drops to 76px across all three tiers. A #boxtest gate covers the cluster: four buttons, radio selection, and the swatch hiding when no box is set. #beveltest now drives the style through the cluster button instead of the removed select. The same cluster shape sets up the B/I/U/S style column next.
* feat(theme-studio): palette generator and preview fidelityCraig Jennings6 days1-1/+23
| | | | | | | | | | Two strands land together because the generated theme-studio.html bundles every source file into one page and can't be split cleanly. The palette generator is a preview-first panel: palette-generator-core.js plans the palette and palette-generator-ui.js draws it. Generated colors stay inspectable and tunable through the existing selector, and committing one creates a normal base column. It adds source-mode and scheme controls, a configurable accent count, and color names from color-names.json. For preview fidelity, syntax and UI colors now resolve through the real Emacs inherit chains, so the preview matches how Emacs renders the theme. resolveSyntaxFg pins dec to ty (Emacs has no decorator face) and otherwise follows comment-delimiter to comment, doc to string, property to variable, function-call to function-name. resolveUiAttr walks mode-line-inactive to mode-line and line-number-current-line to line-number. The decorator label now reads "decorator to type" to match the type face Emacs uses for it. Design recorded in the two theme-studio specs under docs/.
* Update theme studio palette workflowCraig Jennings6 days1-1/+13
|
* Add theme studio box color controlsCraig Jennings7 days1-0/+3
|
* Add theme studio face color step arrowsCraig Jennings7 days1-2/+6
|
* Refine theme studio tile name editingCraig Jennings7 days1-1/+2
|
* Make theme studio column delete saferCraig Jennings7 days1-0/+2
|
* Add theme studio column deleteCraig Jennings7 days1-2/+2
|
* Add theme studio column selection and reorder controlsCraig Jennings7 days1-1/+6
|
* Update theme studio color columns and defaultsCraig Jennings7 days1-2/+4
|
* feat(theme-studio): base-edit recolors a family; retire the ramp panelCraig Jennings10 days1-10/+0
| | | | | | | | Editing a family's base now recolors the whole family: update-selected on a base with a ramp regenerates the family from the new base at the same count, so references follow the new hexes (shared regenFamilyInPlace with the count control). Editing a ground swatch already writes the bg/fg assignment through the existing repoint, and the gate confirms it. The standalone ramp panel is gone — its button, panel, JS, CSS, and the #ramptest gate are removed. Fanning a color into a ramp now happens from its strip: add a color, then raise its column's count. The ramp() math stays in app-core; only the duplicate UI is retired. Phase 5 of the color-families spec. A #baseedittest gate covers the base-edit recolor (family follows, references repoint, count preserved) and the bg-swatch edit writing the assignment.
* feat(theme-studio): add the live per-family count controlCraig Jennings10 days1-0/+2
| | | | | | | | Each chromatic family column gets a count input (0-4) showing its current per-side reach. Setting N regenerates the family as a symmetric base ±N ramp from its most-saturated color, replacing the family's current members. A reference to a surviving step (matched by signed lightness rank) follows the new hex through repointHex; a reference to a step removed by lowering N is left on its old hex, which is no longer in the palette and renders as "(gone)" — never silently reassigned. The neutral and ground strips get no control. I also fixed the neutral threshold curve: it was flat-high through the darks, which pulled a chroma-eased dark ramp step (a dark desaturated blue) into the neutral column and broke the family. The curve now tapers toward both lightness extremes, peaking near mid, so dark and light tints both keep their hue while mid grays stay neutral. This is the symmetric form of the Munsell scaling and a strict improvement. Phase 4 of the color-families spec. A #counttest gate covers count-up adding symmetric steps, count-down dropping the extremes, the surviving-step repoint, and the removed-step "(gone)".
* style(theme-studio): lay out family strips as vertical columnsCraig Jennings10 days1-3/+2
| | | | Each family now reads top to bottom (dark to light) as a column, with families arranged left to right, rather than horizontal rows stacked down the panel.
* feat(theme-studio): render the palette as hue family stripsCraig Jennings10 days1-3/+5
| | | | | | The palette panel is now a stack of strips: the pinned ground strip (bg, fg) first, then hue-sorted family strips, each dark to light. Grouping comes from familiesFromPalette off the hex every render, so renaming a color never moves it. The flat PALETTE stays the editable truth and chips keep their per-chip remove / rename / select; the move-arrow and drag reordering are gone since the sort is deterministic now (moveColor and the drag state with them). Phase 3 of the color-families spec. A #familytest gate checks the ground strip pins first, families render, chips keep their controls, and a color renamed to anything stays in the same strip. Existing palette flows (delta, heal, ramp gates) stay green.
* feat(theme-studio): warn which ramp steps collide with existing namesCraig Jennings11 days1-0/+2
| | | | A ramp step whose name already exists in the palette is skipped on add, but the only signal was a count. Now preview marks each colliding tile with a dashed outline and a badge, and the message names every collision, so you can see which steps won't add before you add them. Add-all reports the skipped names too, not just how many. The single-tile add already named its one collision; this extends the same warning to preview and add-all.
* style(theme-studio): widen ramp tiles to the palette-tile widthCraig Jennings11 days1-1/+1
| | | | The ramp preview tiles were narrower than the palette chips, so longer hexes and names had less room. They now match the palette tile width (128px) and hold the same column count.
* feat(theme-studio): show the hex under each ramp preview tileCraig Jennings11 days1-1/+2
| | | | Each ramp step tile showed only its derived name. It now shows the hex underneath too, matching the palette chips, so you can read the generated value without hovering for the title. The #ramptest gate asserts every tile carries its hex line.
* feat(theme-studio): mark safe lightness in the OKLCH pickerCraig Jennings11 days1-1/+2
| | | | | | | | The OKLCH picker gets a "safe for" selector listing the covered overlay faces. Pick one and the C×L plane shades the lightness band too light to keep that face readable over its foreground set, with the L_max ceiling as the band's lower edge. The ceiling is one marker computed via lMax at the current chroma, not a per-pixel foreground-set mask over the plane, so the existing AA/AAA mask stays single-foreground. When no foreground is dark enough to fail, the band hides; when even black can't satisfy the target, the whole plane shades. The band only shows in OKLCH mode and clears in HSV. The cursor moved above the band so it stays visible through the shade. Phase 5 of the palette-ramps spec, the last build phase. A #safetest browser gate pins that the band appears for a selected covered face with a positive height and hides when none is selected.
* feat(theme-studio): add the ramp UI in the paletteCraig Jennings11 days1-0/+7
| | | | | | | | 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.
* refactor(theme-studio): extract CSS and JS to files, inline at generate timeCraig Jennings11 days1-0/+87
generate.py was 1378 lines, ~1300 of them a single triple-quoted string holding the whole app. Moved the <style> block to styles.css and the <script> body to app.js, and generate.py now inlines both through placeholders the same way it already inlines colormath.js, then fills the data placeholders. It drops to ~500 lines (the remaining bulk is the package face-data dicts, a later stage). The generated page is byte-identical to before — every hash gate, the node suite, the spliced-script parse, and the new #locktest stay green. Two integrity tests guard the splice: styles.css inlines verbatim, and app.js reaches the page exactly as fill_data renders it. Both go red if the splice wiring is dropped. Living in real files instead of a Python string kills the backslash-doubling bug class (str.replace is literal, so escapes survive), gives the CSS and JS real editor tooling, and opens the app logic to unit testing — the point of the whole refactor.