Gitea-Admin/led2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(05): fix UI-SPEC checker blocks — typography, spacing

Browse Source
This commit is contained in:
Claude
2026-04-07 09:05:57 +00:00
parent f739c8fe19
commit 02826b2c89
1 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
.planning/phases/05-live-show-execution/05-UI-SPEC.md
View File

@@ -34,13 +34,11 @@ Declared values (multiples of 4 only):
| Token | Value | Usage | | Token | Value | Usage |
|-------|-------|-------| |-------|-------|-------|
| xs | 4px | Inner icon gaps, strip padding (`padding: 0 4px`) | | xs | 4px | Inner icon gaps, strip padding (`padding: 0 4px`), live-preview top/bottom padding |
| sm | 8px | Element gaps inside device strips, panel content padding top/bottom | | sm | 8px | Element gaps inside device strips, panel content padding top/bottom |
| md | 12px | Header/transport bar horizontal padding | | lg | 16px | Header/transport bar horizontal padding |
| lg | 16px | Timeline toolbar gap between field groups |
| xl | 24px | — | | xl | 24px | — |
| 2xl | 32px | Timeline toolbar fixed height | | 2xl | 32px | Timeline toolbar fixed height |
| transport | 52px | Transport bar grid row height (existing, do not change) |
Exceptions: Exceptions:
- Device strip row height: 18px (compact single-line strip — matches existing `.block-inspector` at 40px; preview is intentionally denser) - Device strip row height: 18px (compact single-line strip — matches existing `.block-inspector` at 40px; preview is intentionally denser)
@@ -48,6 +46,9 @@ Exceptions:
- Strip color swatch: 40px wide × 10px tall (fixed decoration element) - Strip color swatch: 40px wide × 10px tall (fixed decoration element)
- Live preview panel max-height: 60px (D-06 from CONTEXT.md, overflows to scroll if many devices) - Live preview panel max-height: 60px (D-06 from CONTEXT.md, overflows to scroll if many devices)
Fixed dimensions (not spacing tokens — declared here for executor reference):
- Transport bar grid row height: 52px (existing fixed dimension, unchanged from Phase 4)
Source: CONTEXT.md D-06 "Compact — 40-60px total" + RESEARCH.md Pattern 2 CSS. Source: CONTEXT.md D-06 "Compact — 40-60px total" + RESEARCH.md Pattern 2 CSS.
--- ---
@@ -98,6 +99,8 @@ All values use existing CSS custom properties. No new color tokens for Phase 5.
**Live preview color fills:** The preview device strip color swatch uses the cue's `params.color` value (RGB array from the animation block) as `background-color: rgb(r, g, b)`. This is data-driven, not a design token. Inactive state uses `--text-dim` (`#555555`) as fill. **Live preview color fills:** The preview device strip color swatch uses the cue's `params.color` value (RGB array from the animation block) as `background-color: rgb(r, g, b)`. This is data-driven, not a design token. Inactive state uses `--text-dim` (`#555555`) as fill.
**Focal point:** The active `.device-strip` color swatch is the primary visual signal during playback. The color fill (data-driven RGB from the animation cue) is the focal point of the live preview panel — all other elements in the strip are secondary context for which device and animation is active.
Source: `style.css` entire file; CONTEXT.md D-11/D-12/D-15; Phase 1 CONTEXT.md D-11 through D-15. Source: `style.css` entire file; CONTEXT.md D-11/D-12/D-15; Phase 1 CONTEXT.md D-11 through D-15.
--- ---
@@ -142,7 +145,7 @@ Collapsing: If device count > 3, panel height exceeds 60px and scrolls via `over
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1px; gap: 1px;
padding: 2px 0; padding: 4px 0;
max-height: 60px; max-height: 60px;
overflow-y: auto; overflow-y: auto;
flex-shrink: 0; flex-shrink: 0;
@@ -155,7 +158,7 @@ Collapsing: If device count > 3, panel height exceeds 60px and scrolls via `over
padding: 0 4px; padding: 0 4px;
background: var(--bg-panel); background: var(--bg-panel);
gap: 8px; gap: 8px;
font-size: 11px; font-size: 12px;
font-family: var(--font-mono); font-family: var(--font-mono);
letter-spacing: 0.05em; letter-spacing: 0.05em;
transition: background-color 0.1s; transition: background-color 0.1s;
@@ -309,6 +312,9 @@ Transport bar remains in `.app-shell` grid `transport` area — it is NOT inside
The show selector controls are added to the existing `.transport-bar` flex row. The show selector controls are added to the existing `.transport-bar` flex row.
Fixed dimensions (not spacing tokens):
- Transport bar grid row height: 52px (existing, do not change)
--- ---
## Registry Safety ## Registry Safety