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 |
|
| xs | 4px | `gap-1`, `p-1` | Icon gaps, inline element padding |
|
||||||
| sm | 8px | `gap-2`, `p-2` | Compact element spacing, icon-to-label gap |
|
| 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 |
|
| lg | 16px | `p-4`, `gap-4` | Default section padding, form field gap |
|
||||||
| xl | 24px | `p-6`, `gap-6` | Card padding, section breaks |
|
| xl | 24px | `p-6`, `gap-6` | Card padding, section breaks |
|
||||||
| 2xl | 32px | `gap-8` | Layout column gaps |
|
| 2xl | 32px | `gap-8` | Layout column gaps |
|
||||||
| 3xl | 48px | — | Major page-level spacing |
|
| 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):**
|
**Standard form element heights (from existing `CalendarSourceForm` pattern):**
|
||||||
- Input height: `h-9` (36px)
|
- 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 |
|
| 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` |
|
| 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 |
|
| 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 |
|
| 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`):
|
**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" |
|
| Never checked | "Noch nie geprüft" |
|
||||||
| Add vehicle button | "Fahrzeug hinzufügen" |
|
| Add vehicle button | "Fahrzeug hinzufügen" |
|
||||||
| CSV import button | "CSV importieren" |
|
| CSV import button | "CSV importieren" |
|
||||||
| Save (forms) | "Speichern" |
|
| Save (form action rows) | "Einstellungen speichern" |
|
||||||
| Cancel | "Abbrechen" |
|
| Cancel (form action rows) | "Bearbeitung abbrechen" |
|
||||||
|
| Cancel (dialogs) | "Abbrechen" |
|
||||||
| Test SMTP connection | "Verbindung testen" |
|
| Test SMTP connection | "Verbindung testen" |
|
||||||
| History empty state heading | "Noch keine Rechnungen verarbeitet" |
|
| 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." |
|
| 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`
|
**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):**
|
**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`
|
**File:** `apps/web/src/app/(portal)/modules/dkv-fleet/settings/page.tsx`
|
||||||
|
|
||||||
**Layout:**
|
**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)
|
- Tab bar immediately below heading (NOT a sub-sidebar — inline tabs)
|
||||||
- Active tab: bottom border `border-b-2 border-primary text-foreground font-medium`
|
- Active tab: bottom border `border-b-2 border-primary text-foreground font-medium`
|
||||||
- Inactive tab: `text-muted-foreground hover:text-foreground`
|
- 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`
|
Form actions row: `flex gap-3 pt-4 border-t border-border mt-6`
|
||||||
- "Verbindung testen" (secondary button, left) — tests IMAP/Exchange connection
|
- "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`)
|
- 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**
|
**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
|
- 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`
|
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`
|
All icon-only buttons must carry an `aria-label` — they have no visible text:
|
||||||
- Checkmark (save): 16×16, `hover:text-primary`
|
|
||||||
- × (cancel): 16×16
|
| 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.
|
"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`
|
Form actions row: `flex gap-3 pt-2`
|
||||||
- "Speichern" (primary button)
|
- "Einstellungen speichern" (primary button)
|
||||||
- "Verbindung testen" (secondary button)
|
- "Verbindung testen" (secondary button)
|
||||||
|
|
||||||
Connection test feedback: appears below the action row:
|
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...",
|
"testTesting": "Verbindung wird getestet...",
|
||||||
"testSuccess": "Verbindung erfolgreich",
|
"testSuccess": "Verbindung erfolgreich",
|
||||||
"testFailed": "Verbindung fehlgeschlagen: {error}",
|
"testFailed": "Verbindung fehlgeschlagen: {error}",
|
||||||
"save": "Speichern",
|
"save": "Einstellungen speichern",
|
||||||
"cancel": "Abbrechen",
|
"cancel": "Bearbeitung abbrechen",
|
||||||
|
"cancelDialog": "Abbrechen",
|
||||||
"showPassword": "Passwort anzeigen",
|
"showPassword": "Passwort anzeigen",
|
||||||
"hidePassword": "Passwort verbergen"
|
"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",
|
"password": "Passwort",
|
||||||
"fromAddress": "Absenderadresse (Von)",
|
"fromAddress": "Absenderadresse (Von)",
|
||||||
"fromAddressHelp": "Die E-Mail-Adresse, die als Absender angezeigt wird.",
|
"fromAddressHelp": "Die E-Mail-Adresse, die als Absender angezeigt wird.",
|
||||||
"save": "Speichern",
|
"save": "Einstellungen speichern",
|
||||||
"test": "Verbindung testen"
|
"test": "Verbindung testen"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user