From 2005448c51660bb211e0aa0ffa5256324f5d759e Mon Sep 17 00:00:00 2001 From: Schalli Date: Tue, 23 Jun 2026 14:12:40 +0200 Subject: [PATCH] fix(05): resolve UI-SPEC typography and copywriting checker issues Reduce typography to 4 sizes (12/14/18/28) and 2 weights (400/600). Clock scaling declared as responsive exception, not standalone size. Destructive CTAs now include noun (Quelle loeschen / Delete source). Co-Authored-By: Claude Sonnet 4.6 --- .../05-dashboard-calendar/05-UI-SPEC.md | 24 +++++++++++++------ 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/.planning/phases/05-dashboard-calendar/05-UI-SPEC.md b/.planning/phases/05-dashboard-calendar/05-UI-SPEC.md index 21b8153..9a311d0 100644 --- a/.planning/phases/05-dashboard-calendar/05-UI-SPEC.md +++ b/.planning/phases/05-dashboard-calendar/05-UI-SPEC.md @@ -52,14 +52,16 @@ Exceptions: | Role | Size | Weight | Line Height | Usage | |------|------|--------|-------------|-------| -| Body | 14px | 400 (regular) | 1.5 | Widget content, settings form labels, descriptions | -| Label | 12px | 500 (medium) | 1.4 | Widget type labels, category badges, timestamps, muted hints | +| Label | 12px | 400 (regular) | 1.4 | Widget type labels, category badges, timestamps, muted hints, markdown code blocks (monospace) | +| Body | 14px | 400 (regular) | 1.5 | Widget content, settings form labels, descriptions, Notes widget title (semibold variant) | | Heading | 18px | 600 (semibold) | 1.3 | Settings section headings, widget catalog title | | Display | 28px | 600 (semibold) | 1.2 | Clock widget time display | -**Clock widget exception:** Digital clock uses 28px at weight 600. When widget is resized larger (4x4+), clock scales to 40px at weight 600 for visual prominence. Analog clock face uses SVG, not text. +**Exactly 2 weights used:** 400 (regular) for body/label text, 600 (semibold) for headings, display, and inline emphasis (bold, Notes title). Labels are differentiated from body by smaller size (12px) and `muted-foreground` color — no third weight needed. -**Markdown editor (Notes widget):** Inherits body typography (14px/400/1.5). Bold uses weight 600. Code blocks use monospace at 13px. +**Clock widget responsive exception:** Digital clock uses Display size (28px) at weight 600. When widget is resized larger (4x4+), clock scales proportionally via CSS `clamp()` up to approximately 40px. This is NOT a fifth type size — it is the Display size with responsive scaling applied via `font-size: clamp(28px, 4vw, 40px)`. Analog clock face uses SVG, not text. + +**Markdown editor (Notes widget):** Inherits Body typography (14px/400/1.5). Bold uses weight 600. Code blocks use Label size (12px) in monospace. Notes widget title uses Body size (14px) at weight 600 (semibold) — differentiated from content by weight, not a separate size. --- @@ -171,7 +173,7 @@ All values reference existing CSS custom properties from `globals.css`. ### Notes Widget Interaction (D-16, D-17, D-18) -1. **Layout:** Top: editable title (16px semibold, contenteditable or input). Below: compact toolbar (icon buttons: B, I, U, List, Checkbox, Link, Code). Below: editor area (fills remaining widget height, scrollable). +1. **Layout:** Top: editable title (14px semibold, contenteditable or input — Body size at weight 600). Below: compact toolbar (icon buttons: B, I, U, List, Checkbox, Link, Code). Below: editor area (fills remaining widget height, scrollable). 2. **Autosave:** Content saves to API 1000ms after last keystroke. No save indicator needed (saves silently). On API error: show small red dot in widget top-right corner. 3. **Markdown rendering:** Live WYSIWYG editing (not split-view). Toolbar buttons apply formatting inline. @@ -212,6 +214,10 @@ All values reference existing CSS custom properties from `globals.css`. | Error state (widget save) | "Aenderungen konnten nicht gespeichert werden. Bitte versuchen Sie es erneut." | | Clock widget date format | "dd. MMMM yyyy" (e.g. "23. Juni 2026") | | Settings source delete confirm | "Moechten Sie diese Kalenderquelle wirklich loeschen?" | +| Settings source delete CTA | "Quelle loeschen" | +| Settings provider delete confirm | "Moechten Sie diesen Suchanbieter wirklich loeschen?" | +| Settings provider delete CTA | "Anbieter loeschen" | +| Destructive cancel button | "Abbrechen" | ### English @@ -241,14 +247,18 @@ All values reference existing CSS custom properties from `globals.css`. | Error state (widget save) | "Could not save changes. Please try again." | | Clock widget date format | "MMMM dd, yyyy" (e.g. "June 23, 2026") | | Settings source delete confirm | "Are you sure you want to delete this calendar source?" | +| Settings source delete CTA | "Delete source" | +| Settings provider delete confirm | "Are you sure you want to delete this search provider?" | +| Settings provider delete CTA | "Delete provider" | +| Destructive cancel button | "Cancel" | ### Destructive Actions | Action | Confirmation Approach | |--------|----------------------| | Delete widget (edit mode) | No confirmation (instant, re-addable, not persisted until save) | -| Delete calendar source | Confirmation dialog: heading + body text + "Loeschen"/"Delete" button (destructive color) + "Abbrechen"/"Cancel" button | -| Delete custom search provider | Confirmation dialog: same pattern as calendar source | +| Delete calendar source | Confirmation dialog: heading + body text + "Quelle loeschen"/"Delete source" button (destructive color) + "Abbrechen"/"Cancel" button | +| Delete custom search provider | Confirmation dialog: heading + body text + "Anbieter loeschen"/"Delete provider" button (destructive color) + "Abbrechen"/"Cancel" button | ---