docs(07): fix blocking typography and spacing issues in UI-SPEC
Collapse Display h1 weight from 700 to 600 (font-semibold) to keep declared weights at exactly two (400 + 600). Remove 12px md token from named spacing scale; move px-3/py-1.5 to Component Exceptions subsection. Apply non-blocking recommendations: focal point sentence, aria-labels for icon-only AKTIONEN buttons, and more specific form CTA copy. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -43,13 +43,18 @@ Declared values (must be multiples of 4). Source: codebase audit of existing com
|
||||
|-------|-------|----------------|-------|
|
||||
| xs | 4px | `gap-1`, `p-1` | Icon gaps, inline element padding |
|
||||
| sm | 8px | `gap-2`, `p-2` | Compact element spacing, icon-to-label gap |
|
||||
| md | 12px | `px-3`, `py-1.5` | Input padding (h-9 pattern), nav item padding |
|
||||
| lg | 16px | `p-4`, `gap-4` | Default section padding, form field gap |
|
||||
| xl | 24px | `p-6`, `gap-6` | Card padding, section breaks |
|
||||
| 2xl | 32px | `gap-8` | Layout column gaps |
|
||||
| 3xl | 48px | — | Major page-level spacing |
|
||||
|
||||
**Exceptions:** none for this phase.
|
||||
### Component Exceptions
|
||||
|
||||
The following sub-4 spacing values appear in inherited component patterns. They are **not named scale tokens** — do not use them for new layout decisions.
|
||||
|
||||
| Tailwind classes | Origin | Why not a token |
|
||||
|-----------------|--------|-----------------|
|
||||
| `px-3 py-1.5` (12px / 6px) | `CalendarSourceForm` `h-9` input pattern | Inherited browser-default input sizing; compensates for 36px target height within the 8-point grid constraint. Apply only inside `<input>` and `<select>` elements following the `h-9` pattern. |
|
||||
|
||||
**Standard form element heights (from existing `CalendarSourceForm` pattern):**
|
||||
- Input height: `h-9` (36px)
|
||||
@@ -64,12 +69,12 @@ Declared sizes from codebase audit (`grep -r text-* apps/web/src/components`):
|
||||
|
||||
| Role | Size | Tailwind | Weight | Line Height | Usage |
|
||||
|------|------|----------|--------|-------------|-------|
|
||||
| Display | 24px | `text-2xl` | 700 (`font-bold`) | 1.2 | Module page `<h1>` — follows `modules/domaincheck/page.tsx` |
|
||||
| Display | 24px | `text-2xl` | 600 (`font-semibold`) | 1.2 | Module page `<h1>` |
|
||||
| Heading | 18px | `text-lg` | 600 (`font-semibold`) | 1.3 | Settings page `<h1>`, section titles — follows `settings/dashboard/page.tsx` |
|
||||
| Body | 14px | `text-sm` | 400 (`font-normal`) | 1.5 | Form labels, table cells, nav items, general text |
|
||||
| Label | 12px | `text-xs` | 600 (`font-semibold`) | 1.0 | Section category labels (uppercase + tracking-wider), table column headers, status badges |
|
||||
|
||||
**Declared weights:** 400 (regular) and 600 (semibold). Exception: Display uses 700 per existing module page convention (`font-bold`) — do not introduce 700 weight elsewhere in this phase.
|
||||
**Declared weights:** 400 (regular) and 600 (semibold). No other weights are permitted in this phase.
|
||||
|
||||
**Section category label pattern** (from `settings-sidebar.tsx` and `admin-sidebar.tsx`):
|
||||
```
|
||||
@@ -129,8 +134,9 @@ All UI strings are German (the portal language for this tenant). i18n keys are l
|
||||
| Never checked | "Noch nie geprüft" |
|
||||
| Add vehicle button | "Fahrzeug hinzufügen" |
|
||||
| CSV import button | "CSV importieren" |
|
||||
| Save (forms) | "Speichern" |
|
||||
| Cancel | "Abbrechen" |
|
||||
| Save (form action rows) | "Einstellungen speichern" |
|
||||
| Cancel (form action rows) | "Bearbeitung abbrechen" |
|
||||
| Cancel (dialogs) | "Abbrechen" |
|
||||
| Test SMTP connection | "Verbindung testen" |
|
||||
| History empty state heading | "Noch keine Rechnungen verarbeitet" |
|
||||
| History empty state body | "Klicke auf 'Jetzt prüfen', um den Posteingang zu prüfen. Neue Rechnungen erscheinen hier automatisch." |
|
||||
@@ -182,6 +188,8 @@ The following sections are required for multi-surface modules. gsd-executor must
|
||||
|
||||
**File:** `apps/web/src/app/(portal)/modules/dkv-fleet/page.tsx`
|
||||
|
||||
**Primary visual anchor:** "Jetzt prüfen" button (top-right of page header) + InvoiceHistoryTable immediately below. All other elements are secondary.
|
||||
|
||||
**Layout (top to bottom):**
|
||||
|
||||
```
|
||||
@@ -254,7 +262,7 @@ Spinner SVG: `<svg class="mr-2 h-4 w-4 animate-spin" ...>` — standard circular
|
||||
**File:** `apps/web/src/app/(portal)/modules/dkv-fleet/settings/page.tsx`
|
||||
|
||||
**Layout:**
|
||||
- Page heading: `<h1 class="text-2xl font-bold tracking-tight mb-6">Moduleinstellungen</h1>`
|
||||
- Page heading: `<h1 class="text-2xl font-semibold tracking-tight mb-6">Moduleinstellungen</h1>`
|
||||
- Tab bar immediately below heading (NOT a sub-sidebar — inline tabs)
|
||||
- Active tab: bottom border `border-b-2 border-primary text-foreground font-medium`
|
||||
- Inactive tab: `text-muted-foreground hover:text-foreground`
|
||||
@@ -293,7 +301,7 @@ Active toggle: `<button role="switch" aria-checked={isActive}>` — pill shape:
|
||||
|
||||
Form actions row: `flex gap-3 pt-4 border-t border-border mt-6`
|
||||
- "Verbindung testen" (secondary button, left) — tests IMAP/Exchange connection
|
||||
- "Speichern" (primary button)
|
||||
- "Einstellungen speichern" (primary button)
|
||||
- Inline feedback below buttons: success in green (`text-sm` at oklch(0.40 0.15 148)) or error in destructive (`text-sm text-destructive`)
|
||||
|
||||
**Tab 2: Fahrzeuge → VehicleTable + CsvImportButton**
|
||||
@@ -319,10 +327,15 @@ Table columns (same header style as InvoiceHistoryTable):
|
||||
- Edit mode: text inputs replace cells (same `h-9 rounded border border-border bg-background px-2 text-sm` but without `max-w-md` constraint) + checkmark (save) + × (cancel) icon buttons
|
||||
|
||||
Icon buttons in AKTIONEN: `p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors`
|
||||
- Pencil: 16×16 inline SVG
|
||||
- Trash: 16×16 inline SVG, `hover:text-destructive`
|
||||
- Checkmark (save): 16×16, `hover:text-primary`
|
||||
- × (cancel): 16×16
|
||||
|
||||
All icon-only buttons must carry an `aria-label` — they have no visible text:
|
||||
|
||||
| Button | SVG size | aria-label | Additional class |
|
||||
|--------|----------|-----------|-----------------|
|
||||
| Pencil (edit) | 16×16 | `"Fahrzeug bearbeiten"` | — |
|
||||
| Trash (delete) | 16×16 | `"Fahrzeug löschen"` | `hover:text-destructive` |
|
||||
| Checkmark (save row) | 16×16 | `"Änderungen speichern"` | `hover:text-primary` |
|
||||
| × (cancel row) | 16×16 | `"Bearbeitung abbrechen"` | — |
|
||||
|
||||
"Add vehicle" row: clicking [Fahrzeug hinzufügen] appends a new empty edit-mode row at bottom of table.
|
||||
|
||||
@@ -388,7 +401,7 @@ Absenderadresse * [email input, placeholder: "tessera@example.com"]
|
||||
```
|
||||
|
||||
Form actions row: `flex gap-3 pt-2`
|
||||
- "Speichern" (primary button)
|
||||
- "Einstellungen speichern" (primary button)
|
||||
- "Verbindung testen" (secondary button)
|
||||
|
||||
Connection test feedback: appears below the action row:
|
||||
@@ -515,8 +528,9 @@ New keys required for this phase. Add to `apps/web/src/i18n/messages/{de,en}.jso
|
||||
"testTesting": "Verbindung wird getestet...",
|
||||
"testSuccess": "Verbindung erfolgreich",
|
||||
"testFailed": "Verbindung fehlgeschlagen: {error}",
|
||||
"save": "Speichern",
|
||||
"cancel": "Abbrechen",
|
||||
"save": "Einstellungen speichern",
|
||||
"cancel": "Bearbeitung abbrechen",
|
||||
"cancelDialog": "Abbrechen",
|
||||
"showPassword": "Passwort anzeigen",
|
||||
"hidePassword": "Passwort verbergen"
|
||||
},
|
||||
@@ -542,7 +556,7 @@ New keys required for this phase. Add to `apps/web/src/i18n/messages/{de,en}.jso
|
||||
"password": "Passwort",
|
||||
"fromAddress": "Absenderadresse (Von)",
|
||||
"fromAddressHelp": "Die E-Mail-Adresse, die als Absender angezeigt wird.",
|
||||
"save": "Speichern",
|
||||
"save": "Einstellungen speichern",
|
||||
"test": "Verbindung testen"
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user