schalli/tessera-ctl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 14 Wiki Activity

fix(05): resolve UI-SPEC typography and copywriting checker issues

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Schalli
2026-06-23 14:12:40 +02:00
parent cd9f74531a
commit 2005448c51
1 changed files with 17 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.planning/phases/05-dashboard-calendar/05-UI-SPEC.md
+17 -7
View File
@@ -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 |
---