tobias
27640fee35
Export des Projekts "DataMetric360 App Design" nach design/ - 80 Dateien: die beiden .dc.html-Entwurfsdateien, support.js, die verwendeten Icons, Logos, Typenschilder und Schriften sowie das kompilierte Bündel des Design-Systems, damit der Entwurf für sich allein darstellbar ist. Bewusst ein Zwischenstand, nicht der Endstand: dieser Export zeigt noch "Audi RS 6 Avant" statt des tatsächlichen RS 4 Avant competition und enthält erst die Hauptbildschirme. Die 16 fehlenden Seiten (Fahrzeugstatus, Batterieverlauf, Service, Reifen, Versicherung/Steuer und weitere, siehe SPECIFICATION.md §3) sind im Design-Projekt bereits nachbeauftragt. Beides ist in design/README.md festgehalten, damit der Stand nachvollziehbar bleibt; der Ordner wird beim nächsten Export ersetzt. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
73 lines
3.2 KiB
Markdown
73 lines
3.2 KiB
Markdown
## 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.
|
|
|
|
# AudiDashUI (@audi-dash/ui@0.1.0)
|
|
|
|
This design system is the published @audi-dash/ui React library, bundled as a single
|
|
browser global. All 20 components are the real upstream code.
|
|
|
|
## Where things are
|
|
|
|
- `_ds_bundle.js` — the whole-DS bundle at the project root; loads every component to `window.AudiDashUI`. First line is a `/* @ds-bundle: … */` metadata header.
|
|
- `styles.css` — the single stylesheet entry: it `@import`s the tokens, fonts, and component styles (`_ds_bundle.css`). Link this one file.
|
|
- `components/<group>/<Name>/<Name>.prompt.md` (example JSX + variants), `<Name>.d.ts` (types), `<Name>.html` (variant grid).
|
|
- `tokens/*.css` — CSS custom properties, names verbatim from upstream.
|
|
- `fonts/` — `@font-face` files + `fonts.css` (when the package ships fonts).
|
|
|
|
For a specific component, `read_file("components/<group>/<Name>/<Name>.prompt.md")`.
|
|
|
|
## Loading
|
|
|
|
Add these two lines to your page once (React must be on the page first):
|
|
|
|
```html
|
|
<link rel="stylesheet" href="styles.css">
|
|
<script src="_ds_bundle.js"></script>
|
|
```
|
|
|
|
Components are then available at `window.AudiDashUI.*`. Mount into a dedicated child node (e.g. `<div id="ds-root">`), not the host page's own React root, so the two trees don't collide:
|
|
|
|
```jsx
|
|
const { Accordion } = window.AudiDashUI;
|
|
ReactDOM.createRoot(document.getElementById('ds-root')).render(<Accordion />);
|
|
```
|
|
|
|
## Tokens
|
|
|
|
23 CSS custom properties from @audi-dash/ui. Names are
|
|
preserved verbatim from upstream. They are declared inside `_ds_bundle.css` (this DS ships one compiled stylesheet rather than separate token files).
|
|
|
|
- **typography** (1): `--font-stack`
|
|
- **other** (22): `--red`, `--r-tile`, `--r-pill`, …
|
|
|
|
## Components
|
|
|
|
### general
|
|
- `Accordion`
|
|
- `ActionButton`
|
|
- `Feld`
|
|
- `Fig`
|
|
- `IconButton`
|
|
- `ImagePlaceholder`
|
|
- `Pill`
|
|
- `Popup`
|
|
- `PopupMenuItem`
|
|
- `ProgressBar`
|
|
- `ProgressRing`
|
|
- `RowList`
|
|
- `Seg`
|
|
- `StatGrid`
|
|
- `StatusRow`
|
|
- `SwipeRow`
|
|
- `Switch`
|
|
- `TabBar`
|
|
- `Tile`
|
|
|
|
### accordion
|
|
- `LeafRow`
|