Files

T

tobias 27640fee35 Entwurf aus Claude Design aufnehmen (Zwischenstand)

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>

2026-08-11 00:36:58 +02:00

3.2 KiB

Raw 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.

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 @imports 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):

<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:

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

3.2 KiB Raw Blame History