API-Zugang anfragen
Micro Frontend

Styling-Tool

Brande das Micro-Frontend, indem du Design-Tokens und Layout-Optionen anpasst. Jeder Parameter ist erklärt, die Vorschau skinnt live mit, und der erzeugte mount()-Aufruf ist fertig zum Einfügen.

Presets
Vorschlag aus einem Screenshot

Lade ein PNG-, JPEG- oder WebP-Bild hoch, ziehe es hierher oder füge es ein (max. 5 MB). Eine verkleinerte, von Metadaten bereinigte Fassung wird zur Analyse der visuellen Rollen an unseren KI-Dienstleister gesendet; anschließend wird der Kontrast lokal geprüft. ADITUS speichert Originalbild und abgeleitetes Style-Set zur Qualitätskontrolle 6 Monate.

Bild hier ablegen
Alternativ kannst du im Foto-Tab Strg+V oder Cmd+V drücken.

--aditus-accent

Primäre Markenfarbe: Buttons, aktive Zustände, Betonung.

--aditus-accent-strong

Hover-/Pressed-Abstufung des Akzents.

--aditus-accent-contrast

Text-/Icon-Farbe auf dem Akzent.

--aditus-accent-soft

Zarte Akzent-Tönung für weiche Füllungen/Hovers.

--aditus-surface

Hintergrund von Panels/Karten/Inputs.

--aditus-surface-2

Leicht erhöhte Fläche für verschachtelte Füllungen.

--aditus-border

Haarlinien-Rahmenfarbe.

--aditus-border-strong

Kräftigerer Rahmen für Inputs/Controls.

--aditus-text

Primäre Textfarbe.

--aditus-muted

Gedämpfte/sekundäre Textfarbe.

--aditus-heading

Überschriften-Farbe, heller als Fließtext.

--aditus-overlay-surface

Deckende Fläche des Artikel-Detail-Modals. Bei transparenter Fläche (Glas-Themes) eine DECKENDE Farbe setzen, damit der schwebende Dialog nicht durchsichtig wird und der Text lesbar bleibt.

--aditus-overlay-backdrop

Abdunkelung hinter dem Detail-Modal. Fuer dunkle Themes eine dunkle Abdunkelung (z. B. rgba(0,0,0,0.6)), da der aus dem Text abgeleitete Standard ein heller Schleier wäre.

--aditus-success

Erfolgsfarbe: abgeschlossene Schritte, Fertig-Haken.

--aditus-success-soft

Zarte Erfolgs-Tönung.

--aditus-danger

Fehlerfarbe.

--aditus-danger-soft

Zarte Fehler-Tönung.

--aditus-radius

Eckenradius von Panels/Karten.

--aditus-radius-sm

Eckenradius von Inputs/kleinen Chips.

--aditus-radius-button

Eckenradius von Buttons.

--aditus-gap

Abstand zwischen gestapelten Abschnitten in einer Phase.

--aditus-shadow

Box-Shadow für erhöhte Panels/Karten.

--aditus-font

Schriftfamilien-Stack für das gesamte Micro-Frontend.

--aditus-font-size

Eine CSS-Länge (z. B. 16px oder 1rem), die die GESAMTE Typografie skaliert — Fließtext, Metadaten, Bedienelemente und Überschriften behalten ihre Proportionen und wachsen gemeinsam. Standard: 15px.

Der Event-Schritt als vertikale Liste oder als Karten-Grid. Jedes Event zeigt nur seine eigenen Infos plus einen einzelnen Auswählen-Button.

Der Artikel-Schritt als vertikale Liste oder als Preis-Karten-Grid (per articleContent gestaltet).

Wie Artikel innerhalb einer aufgeklappten Gruppe der Listen-Ansicht liegen: kompakter Stapel oder responsives Mehrspalten-Grid.

Wie Artikel in der Listen-Ansicht gewählt werden: ein einzelner Auswählen-Button je Zeile, oder ein Mengen-Stepper je Zeile mit Zwischensummen und einem Weiter-Button, der alle Mengen auf einmal in den Warenkorb legt.

Zeigt das Artikel-Icon (das kleine getönte SVG, das der echte Shop links neben jedem Ticket rendert) in der Listen-Ansicht.

Zeigt eine Headergrafik: das große Marken-Banner des gewählten Events als formatfüllende Kopfgrafik über dem Flow. Erscheint, sobald ein Event gewählt ist.

Culture als Accept-Language-Header — steuert die lokalisierten Inhalte der API (z. B. de-DE, en-GB).

Bei Schrittwechsel das Widget sanft in den sichtbaren Bereich rücken (nie beim ersten Mount). Aus, wenn der Host das Scrollen selbst steuert.

Spaltenzahl der Antwortoptionen von RadioButtonList-/CheckBoxList-Surveyfragen (1-4). Schmale Viewports fallen automatisch auf eine Spalte zurück.

Injiziert das mitgelieferte neutrale Standard-Theme. Ausschalten, wenn du dein eigenes vollständiges Skin lieferst.

Live-Vorschau
Vorschau-HintergrundNur Styling-Hilfe — kein Micro-Frontend-Token. Das Micro-Frontend ist transparent und übernimmt den Hintergrund deiner Seite.
mount.ts
import { mount } from "@workspace/aditus-shop-embed";

mount(document.getElementById("aditus-shop")!, {
  publicKey: "pk_deine_seite",
  // sessionToken,  // Pflicht, um den Shop zu aktivieren — vom Backend gemintet, siehe "Micro Frontend"
  eventTheme: false,  // deine Tokens rendern, nicht das Branding des Veranstalters
});

Es werden nur geänderte Tokens ausgegeben — weggelassene behalten die mitgelieferten Defaults.