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 <noreply@anthropic.com>
This commit is contained in:
@@ -52,14 +52,16 @@ Exceptions:
|
|||||||
|
|
||||||
| Role | Size | Weight | Line Height | Usage |
|
| Role | Size | Weight | Line Height | Usage |
|
||||||
|------|------|--------|-------------|-------|
|
|------|------|--------|-------------|-------|
|
||||||
| Body | 14px | 400 (regular) | 1.5 | Widget content, settings form labels, descriptions |
|
| Label | 12px | 400 (regular) | 1.4 | Widget type labels, category badges, timestamps, muted hints, markdown code blocks (monospace) |
|
||||||
| Label | 12px | 500 (medium) | 1.4 | Widget type labels, category badges, timestamps, muted hints |
|
| 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 |
|
| Heading | 18px | 600 (semibold) | 1.3 | Settings section headings, widget catalog title |
|
||||||
| Display | 28px | 600 (semibold) | 1.2 | Clock widget time display |
|
| 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)
|
### 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.
|
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.
|
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." |
|
| 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") |
|
| 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 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
|
### 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." |
|
| Error state (widget save) | "Could not save changes. Please try again." |
|
||||||
| Clock widget date format | "MMMM dd, yyyy" (e.g. "June 23, 2026") |
|
| 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 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
|
### Destructive Actions
|
||||||
|
|
||||||
| Action | Confirmation Approach |
|
| Action | Confirmation Approach |
|
||||||
|--------|----------------------|
|
|--------|----------------------|
|
||||||
| Delete widget (edit mode) | No confirmation (instant, re-addable, not persisted until save) |
|
| 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 calendar source | Confirmation dialog: heading + body text + "Quelle loeschen"/"Delete source" button (destructive color) + "Abbrechen"/"Cancel" button |
|
||||||
| Delete custom search provider | Confirmation dialog: same pattern as calendar source |
|
| Delete custom search provider | Confirmation dialog: heading + body text + "Anbieter loeschen"/"Delete provider" button (destructive color) + "Abbrechen"/"Cancel" button |
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user