iOS-Optik offiziell machen, Audi-CI-Spezifikation vorher archivieren
Entscheidung nach DESIGN_REVIEW_2026-08-13.md §A, Option 1: die additive iOS-Auflage (audi-dashboard-ios.css) wird zur verbindlichen Optik erklaert, statt die App auf reine Audi-CI zurueckzuschneiden. Der bisherige SPECIFICATION.md-§2-Wortlaut (Audi-CI-Farben, 20px-Radius) ist wortgleich in AUDI_CI_ARCHIV_2026-08-13.md gesichert, inklusive Anleitung fuer den Rueckweg - der Code selbst braucht dafuer kein Backup, da die iOS-Auflage rein additiv ist und die Audi-CI-Basiswerte in audi-dashboard.css unveraendert erhalten bleiben. SPECIFICATION.md §2 beschreibt jetzt die tatsaechlichen iOS-Werte aus audi-dashboard-ios.css. bauauftrag.md §8 bleibt unangetastet (Projekt- konvention: historisches Dokument), gilt aber ab hier als ueberholt. Zwei aus demselben Review noch offene Implementierungsfehler (Rot-Semantik invertiert, 20px/16px-Radius-Inkonsistenz bei Popups) sind unabhaengig von dieser Richtungsentscheidung und bleiben offen. Zusaetzlich: Versionsbump nach dem Redeploy in audi_ha_test.
This commit is contained in:
+37
-19
@@ -41,33 +41,51 @@ A private, single-user Home Assistant `panel_custom` dashboard that replaces the
|
||||
|
||||
## 2. Concept & Design System
|
||||
|
||||
### Visual language
|
||||
Dark ("Nacht") is the default and primary theme; a light ("Tag") theme exists as a toggle. No shadows, no gradients anywhere except the fade under the vehicle photo (`.szene`). Flat tiles, pill-shaped controls, hairline dividers.
|
||||
> **iOS-Optik ist seit 2026-08-13 die verbindliche Linie** (Entscheidung nach
|
||||
> `DESIGN_REVIEW_2026-08-13.md` §A, Option 1: „iOS-Optik als neue verbindliche Linie
|
||||
> dokumentieren"). Das ursprüngliche, reine Audi-CI-Design unten war bis dahin gültig und bleibt
|
||||
> wortgleich archiviert in [`AUDI_CI_ARCHIV_2026-08-13.md`](AUDI_CI_ARCHIV_2026-08-13.md) —
|
||||
> inklusive einer kurzen Anleitung, wie man technisch zurückwechselt (die Auflage ist rein additiv,
|
||||
> die Basis-Werte unten sind im Code nach wie vor vorhanden). `bauauftrag.md` §8 beschreibt weiterhin
|
||||
> das alte Design und gilt ab hier als überholt, wie es die Projektkonvention für Entscheidungen
|
||||
> vorsieht (siehe `AGENTS.md`).
|
||||
>
|
||||
> Bekannter, noch offener Folgefehler aus demselben Review: die Rot-Semantik ist in der iOS-Auflage
|
||||
> invertiert (`.aktion` füllt jede Primäraktion rot statt nur destruktive) — Befund B, noch nicht
|
||||
> behoben.
|
||||
|
||||
### Colors (CSS custom properties, defined per-theme via `:root` / `[data-theme="tag"]`)
|
||||
### Visual language
|
||||
iOS-native Formensprache (`audi-dashboard-ios.css`, additive Auflage über der Audi-CI-Basis unten):
|
||||
große Titel, gruppierte 44-px-Zeilen, transluzente Tab-Leiste mit Blur, iOS-Schalter/-Segmente,
|
||||
gefüllte Aktionsknöpfe. Dunkel ("Nacht") bleibt Standard, "Tag" als Umschalter. Audi Type und das
|
||||
Rot `#F50537` bleiben führend (Typografie, Akzentfarbe) — Fläche, Radius und Signalfarben folgen
|
||||
iOS-Konventionen statt der ursprünglichen Audi-Palette.
|
||||
|
||||
### Colors (CSS custom properties, iOS-Auflage überschreibt die Audi-CI-Basis pro Theme)
|
||||
|
||||
| Role | Nacht (default) | Tag |
|
||||
|---|---|---|
|
||||
| `--canvas` (page background) | `#161b23` | `#FFFFFF` |
|
||||
| `--tile` | `#1f2733` | `#f2f2f2` |
|
||||
| `--tile-2` (inputs, hover) | `#2a3341` | `#e5e5e5` |
|
||||
| `--line` | `rgba(255,255,255,.10)` | `rgba(0,0,0,.10)` |
|
||||
| `--line-strong` | `rgba(255,255,255,.20)` | `rgba(0,0,0,.22)` |
|
||||
| `--canvas` (page background) | `#0C1014` | `#F2F2F7` |
|
||||
| `--tile` | `rgba(255,255,255,.055)` | `#FFFFFF` |
|
||||
| `--tile-2` | `rgba(255,255,255,.10)` | `#EFEFF4` |
|
||||
| `--line` | `rgba(255,255,255,.13)` | `rgba(60,60,67,.13)` |
|
||||
| `--line-strong` | `rgba(255,255,255,.24)` | `rgba(60,60,67,.24)` |
|
||||
| `--fg` | `#FFFFFF` | `#000000` |
|
||||
| `--fg2` (secondary text) | `#9aa1ad` | `#4c4c4c` |
|
||||
| `--fg3` (labels/eyebrows) | `#8a94a3` | `#666666` |
|
||||
| `--ok` | `#15da15` | `#0DA20D` |
|
||||
| `--warn` | `#ffaa00` | `#ffaa00` |
|
||||
| `--shade` | `rgba(255,255,255,.05)` | `rgba(0,0,0,.04)` |
|
||||
| `--bad` | `#fd2c4e` | `#eb0d3f` |
|
||||
| `--red` (accent, theme-independent) | `#F50537` | `#F50537` |
|
||||
| `--fg2` | `#BFC4CC` | `#3C3C43` |
|
||||
| `--fg3` | `#8E8E93` | `#8E8E93` |
|
||||
| `--ok` | `#30D158` | `#34C759` |
|
||||
| `--warn` | `#FFD60A` | `#FF9F0A` |
|
||||
| `--bad` | `#FF453A` | `#FF3B30` |
|
||||
| `--ios-tint` (Akzent/Aktionsfüllung, theme-unabhängig) | `#F50537` | `#F50537` |
|
||||
|
||||
`--red` is used sparingly (accents, active states, destructive actions), not as a background fill.
|
||||
`.aktion` füllt sich vollflächig mit `--ios-tint` — abweichend von der ursprünglichen Regel „Rot nur
|
||||
als Akzent" (bekannter, offener Befund, siehe Kasten oben).
|
||||
|
||||
### Radii
|
||||
- `--r-tile: 20px` — tiles, the vehicle-photo "scene" container.
|
||||
- `--r-pill: 999px` — buttons, switches, segmented controls, progress bars.
|
||||
- Small functional elements (form inputs, placeholder/mini image boxes, popups) use **hardcoded literal pixel values** (6px / 12px / 14px respectively) rather than a shared token — see §7 for why this is a discrepancy from the brief.
|
||||
- `--r-tile: 16px` (iOS-Wert; Audi-CI-Basis war 20px, siehe Archiv) — Kacheln, Popups, Bildbereiche.
|
||||
- `--r-pill: 999px` unverändert — Buttons, Schalter, Segmente, Fortschrittsbalken.
|
||||
- `.setup-popup`/`.standortmenu` schreiben weiterhin `border-radius: 20px` als Literal
|
||||
(Inkonsistenz zum 16px-Token, ebenfalls im Review dokumentiert, noch nicht bereinigt).
|
||||
|
||||
### Typography
|
||||
Three font-family names in play, all under the trademarked "Audi Type" family, embedded inline as base64 `woff2` directly in `audi-dashboard.css` (private-install only — see Licensing below):
|
||||
|
||||
Reference in New Issue
Block a user