audi-app/design-system/.design-sync/conventions.md at main

Files

T

tobias e1d570992e Initialer Import: HA-Panel, Design-System, Companion-App

Drei zusammengehörige Teile in einem Repository:

- homeassistant/  Das fertige, im Einsatz befindliche Home-Assistant-Panel
  (panel_custom Custom Element + pyscript-Backend). Echte Fahrzeug- und
  Personendaten (fahrzeugprofil.json, fahrten.jsonl, tankvorgaenge.jsonl,
  Tankbelege) bleiben per .gitignore außen vor; die anonymisierte Vorlage
  fahrzeugprofil.example.json ist mit dabei.

- design-system/  Eigenständige React-Komponentenbibliothek (@audi-dash/ui),
  die die visuelle Sprache des Panels nachbildet - ohne Audi-Markenzeichen
  und ohne die lizenzierte Hausschrift. Dient als Grundlage für Claude
  Design. War bis hierher ein eigenes Repository und ist in dieses
  eingeschmolzen worden.

- companion-app/  Datenschicht der neuen App DataMetric360 (iOS/Android via
  Capacitor, zusätzlich als Iframe im HA-Dashboard). Noch ohne Oberfläche:
  REST- und WebSocket-Zugriff auf Home Assistant plus Warteschlange für
  Änderungen ohne Netz. Ersetzt das eingespritzte hass-Objekt, das nur
  innerhalb des HA-Frontends existiert.

Dazu die Projektdokumentation: SPECIFICATION.md (Ist-Stand des Panels),
COMPANION_APP_ARCHITECTURE.md (Architekturentscheidungen der neuen App),
AUDIT_2026-08-10.md, DESIGN_BRIEF_DATAMETRIC360.md und der ursprüngliche
Bauauftrag.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

2026-08-11 00:20:05 +02:00

1.2 KiB

Raw Permalink Blame History

Usage conventions

Always wrap the tree that uses these components in <div className="ads-root" data-theme="nacht"> (or data-theme="tag" for the light theme). Color tokens (--fg, --canvas, --tile, etc.) are defined on :root and work anywhere, but text color and page background are only applied via the .ads-root class — content rendered outside it falls back to browser-default black-on-white.
Default theme is Nacht (dark) — this is what :root sets without any data-theme override. Use data-theme="tag" for the light variant.
No Audi brand assets (font, rings, nameplate) are included in this bundle — it uses a neutral Helvetica, Arial, sans-serif fallback stack by design.
Popup renders via a React portal into document.body by default (position: fixed, centers or anchors relative to the viewport) — it doesn't need to sit inside .ads-root itself since its own CSS sets background/color explicitly rather than inheriting them.
SwipeRow is a controlled/uncontrolled swipe-to-reveal row: swiping (or setting swiped) slides content left to reveal a delete action on the right, clipping the row's left edge by design — this is the intended interaction, not a layout bug.

1.2 KiB Raw Permalink Blame History

Usage conventions

1.2 KiB

Raw Permalink Blame History