tobias
cf06e28e8d
- Audi Type Wide Bold (700) eingebunden und fuer .fig/.ads-fig gesetzt, in
beiden Codebasen. Light war zu duenn, Normal ebenfalls (Ansage des
Eigentuemers). Die alte Notiz "es gibt nur 300 und 400, niemals fetter"
ist damit ueberholt und entfernt statt ergaenzt - sie stand nur da, weil
es keine anderen Schnitte gab.
- standort_genauigkeit_m wird jetzt angezeigt ("Position auf +-12 m genau",
unter der Anschrift im Standortblatt). Der Wert kam seit jeher vom
Backend, wurde im Panel in eine Variable gelesen und nirgends gezeigt -
im Audit als totes Schema gefunden. In der App fehlte er ganz und ist
jetzt durch Typ und Adapter verdrahtet.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@audi-dash/ui
Generisches React-Komponenten-Set, das die visuelle Sprache des Audi-Dashboards (Kacheln,
Formularzeilen, Toggle, Segmented Control, Popups, Statusanzeigen, Fortschrittsanzeigen …)
nachbildet. Enthält keine Audi-Marken-Assets (Font "Audi Type", Ringe, Typenschild) - diese
sind laut Lizenzvereinbarung ausschließlich für die private Home-Assistant-Installation
freigegeben. Diese Bibliothek nutzt einen neutralen Fallback-Font-Stack (Helvetica, Arial, sans-serif).
Verwendung
Konsumierende Apps legen die .ads-root-Klasse um den Baum, der die Bibliothek nutzt, und setzen
data-theme="nacht" (Standard) oder data-theme="tag":
import { Tile, Feld, Switch } from "@audi-dash/ui";
import "@audi-dash/ui/styles.css";
function App() {
return (
<div className="ads-root" data-theme="nacht">
<Tile>
<Feld label="Beispiel">
<Switch checked={true} onChange={() => {}} />
</Feld>
</Tile>
</div>
);
}
Design-Tokens
Alle Farben/Radien/Abstände liegen als CSS-Custom-Properties in src/tokens/tokens.css vor -
Komponenten referenzieren ausschließlich var(--token), nie Literal-Hex-Werte. Siehe die Datei
für die vollständige Liste (--red, --canvas, --tile, --fg/--fg2/--fg3, --ok/--warn/
--bad, --r-tile/--r-pill/--r-func, --sp-1…--sp-5).
Typografie-Utility-Klassen
Reine Textstil-Hooks ohne eigene Komponentenstruktur (in tokens.css definiert) - direkt als
className anwenden:
| Klasse | Verwendung |
|---|---|
.ads-eyebrow |
Kleine Überschrift über einem Seitentitel (10px, uppercase, --fg3) |
.ads-title |
Seitentitel (23px, einzeilig, ellipsis) |
.ads-label |
Feld-/Kachel-Label (10px, uppercase, --fg3) |
.ads-sport |
Kursiver Akzenttext |
Die einzige Ausnahme mit echter interner Struktur ist die Fig-Komponente (großer Zahlenwert +
Einheit) - sie wird intern auch von ProgressRing und StatGrid genutzt.
Komponenten
Pill, IconButton, Fig, StatusRow, ActionButton, Switch, Seg, RowList, LeafRow, Tile, Feld,
ProgressRing, ProgressBar, StatGrid, Accordion, SwipeRow, TabBar, Popup (+PopupMenuItem),
ImagePlaceholder. Props-Referenz: .d.ts-Dateien im Build bzw. die jeweilige <Name>.tsx.
Build
npm install
npm run typecheck
npm run build