Demander un accès API
Micro Frontend

Outil de style

Personnalisez la marque du micro-frontend en ajustant les tokens de design et les options de mise en page. Chaque parametre est explique, l'apercu se re-stylise en direct et l'appel mount() genere est pret a coller.

Prereglages
Suggerer depuis une capture

Importez, déposez ou collez une image PNG, JPEG ou WebP (5 Mo max.). Une version réduite et sans métadonnées est envoyée à notre prestataire d’IA pour analyser les rôles visuels, puis le contraste est validé localement. ADITUS conserve en privé l’original et le style dérivé pendant 6 mois pour le contrôle qualité.

Déposez une image ici
Vous pouvez aussi coller avec Ctrl+V ou Cmd+V dans cet onglet.

--aditus-accent

Couleur principale de la marque : boutons, etats actifs, mise en avant.

--aditus-accent-strong

Nuance survol/appui de l'accent.

--aditus-accent-contrast

Couleur du texte/des icones sur l'accent.

--aditus-accent-soft

Teinte d'accent legere pour les remplissages/survols doux.

--aditus-surface

Arriere-plan des panneaux/cartes/champs.

--aditus-surface-2

Surface legerement surelevee pour les remplissages imbriques.

--aditus-border

Couleur de bordure fine.

--aditus-border-strong

Bordure plus marquee pour les champs/controles.

--aditus-text

Couleur principale du texte.

--aditus-muted

Couleur de texte attenuee/secondaire.

--aditus-heading

Couleur des titres, plus claire que le corps du texte.

--aditus-overlay-surface

Arriere-plan opaque de la fenetre de detail d'article. Definissez une couleur OPAQUE lorsque Surface est translucide (themes verre), afin que la boite de dialogue flottante ne devienne jamais transparente et que son texte reste lisible.

--aditus-overlay-backdrop

Voile derriere la fenetre de detail. Utilisez un voile sombre (p. ex. rgba(0,0,0,0.6)) pour les themes sombres, ou la valeur par defaut derivee du texte serait un voile pale.

--aditus-success

Couleur de succes : etapes terminees, coche de validation.

--aditus-success-soft

Teinte de succes legere.

--aditus-danger

Couleur d'erreur.

--aditus-danger-soft

Teinte d'erreur legere.

--aditus-radius

Rayon des coins des panneaux/cartes.

--aditus-radius-sm

Rayon des coins des champs/petites puces.

--aditus-radius-button

Rayon des coins des boutons.

--aditus-gap

Espacement entre les sections empilees dans une phase.

--aditus-shadow

Box-shadow pour les panneaux/cartes sureleves.

--aditus-font

Pile de familles de polices pour l'ensemble du micro-frontend.

--aditus-font-size

Une longueur CSS (p. ex. 16px ou 1rem) qui met a l'echelle TOUTE la typographie — texte, metadonnees, controles et titres gardent leurs proportions et grandissent ensemble. Par defaut : 15px.

L'etape evenement sous forme de liste verticale de lignes ou de grille de cartes. Chaque evenement n'affiche que ses propres infos plus un unique bouton de selection.

L'etape article sous forme de liste verticale ou de grille de cartes de tarifs (definie via articleContent).

Disposition des articles dans un groupe deplie de la vue liste : pile compacte ou grille multi-colonnes responsive.

Comment les utilisateurs choisissent les articles dans la vue liste : un unique bouton de selection par ligne, ou un selecteur de quantite par ligne avec sous-totaux de ligne et un bouton de pied de page qui ajoute toutes les selections d'un coup.

Affiche l'icone par article (le petit SVG teinte que la vraie boutique affiche a gauche de chaque billet) dans la vue liste.

Affiche une image d'en-tete : la grande banniere de marque de l'evenement resolu comme bandeau pleine largeur au-dessus du flux. Apparait des qu'un evenement est selectionne.

Culture envoyee dans l'en-tete Accept-Language — pilote le contenu localise de l'API (p. ex. de-DE, en-GB).

A chaque changement d'etape, replace doucement le widget dans le champ de vision (jamais au premier montage). Desactive si l'hote gere le defilement.

Nombre de colonnes des options de reponse des questions RadioButtonList/CheckBoxList (1-4). Les ecrans etroits reviennent a une seule colonne.

Injecte le theme neutre par defaut fourni. Desactivez-le si vous livrez votre propre habillage complet.

Apercu en direct
Fond de l'apercuAide au style uniquement — pas un token du Micro-Frontend. Le Micro-Frontend est transparent et herite du fond de votre page.
mount.ts
import { mount } from "@workspace/aditus-shop-embed";

mount(document.getElementById("aditus-shop")!, {
  publicKey: "pk_deine_seite",
  // sessionToken,  // requis pour activer la boutique — minte par votre backend, voir "Micro Frontend"
  eventTheme: false,  // affiche vos tokens, pas l'habillage de l'organisateur de l'evenement
});

Seuls les tokens que vous avez modifies sont emis — les autres conservent les valeurs par defaut fournies.