Solicitar acceso a la API
Micro Frontend

Herramienta de estilos

Aplica tu marca al micro-frontend ajustando los tokens de diseno y las opciones de maquetacion. Cada parametro esta explicado, la vista previa se re-estiliza en directo y la llamada mount() generada esta lista para pegar.

Preajustes
Sugerir desde una captura

Sube, arrastra o pega una imagen PNG, JPEG o WebP (máx. 5 MB). Se envía a nuestro proveedor de IA una versión reducida y sin metadatos para analizar los roles visuales; después se valida el contraste localmente. ADITUS conserva la imagen original y el estilo derivado durante 6 meses para control de calidad.

Suelta una imagen aquí
También puedes pegar con Ctrl+V o Cmd+V en esta pestaña.

--aditus-accent

Color principal de la marca: botones, estados activos, enfasis.

--aditus-accent-strong

Tono hover/pulsado del acento.

--aditus-accent-contrast

Color de texto/iconos sobre el acento.

--aditus-accent-soft

Tinte de acento tenue para rellenos/hovers suaves.

--aditus-surface

Fondo de paneles/tarjetas/campos.

--aditus-surface-2

Superficie ligeramente elevada para rellenos anidados.

--aditus-border

Color de borde fino.

--aditus-border-strong

Borde mas marcado para campos/controles.

--aditus-text

Color principal del texto.

--aditus-muted

Color de texto atenuado/secundario.

--aditus-heading

Color de titulos, mas claro que el texto del cuerpo.

--aditus-overlay-surface

Fondo opaco de la ventana de detalle del articulo. Defina un color OPACO cuando Superficie sea translucida (temas de cristal), para que el dialogo flotante nunca se vuelva transparente y su texto siga siendo legible.

--aditus-overlay-backdrop

Velo detras de la ventana de detalle. Use un velo oscuro (p. ej. rgba(0,0,0,0.6)) para temas oscuros, donde el valor por defecto derivado del texto seria un velo palido.

--aditus-success

Color de exito: pasos completados, marca de finalizado.

--aditus-success-soft

Tinte de exito tenue.

--aditus-danger

Color de error.

--aditus-danger-soft

Tinte de error tenue.

--aditus-radius

Radio de las esquinas de paneles/tarjetas.

--aditus-radius-sm

Radio de las esquinas de campos/chips pequenos.

--aditus-radius-button

Radio de las esquinas de los botones.

--aditus-gap

Espaciado entre secciones apiladas dentro de una fase.

--aditus-shadow

Box-shadow para paneles/tarjetas elevados.

--aditus-font

Pila de familias de fuentes para todo el micro-frontend.

--aditus-font-size

Una longitud CSS (p. ej. 16px o 1rem) que escala TODA la tipografia — texto, metadatos, controles y titulos mantienen sus proporciones y crecen juntos. Por defecto: 15px.

El paso de evento como lista vertical de filas o como cuadricula de tarjetas. Cada evento muestra solo su propia informacion mas un unico boton de seleccion.

El paso de articulo como lista vertical o como cuadricula de tarjetas de precios (definida mediante articleContent).

Como se disponen los articulos dentro de un grupo expandido de la vista de lista: pila compacta o cuadricula responsiva de varias columnas.

Como eligen los articulos los usuarios en la vista de lista: un unico boton de seleccion por fila, o un selector de cantidad por fila con subtotales de linea y un boton al pie que anade todas las selecciones a la vez.

Muestra el icono por articulo (el pequeno SVG tenido que la tienda real dibuja a la izquierda de cada entrada) en la vista de lista.

Muestra una imagen de cabecera: el gran banner de marca del evento resuelto como cabecera a todo el ancho sobre el flujo. Aparece en cuanto se selecciona un evento.

Culture enviada en la cabecera Accept-Language — controla el contenido localizado de la API (p. ej. de-DE, en-GB).

Al cambiar de paso, realinea suavemente el widget en la vista (nunca en el montaje inicial). Desactivado si el host gestiona el desplazamiento.

Numero de columnas de las opciones de respuesta de las preguntas RadioButtonList/CheckBoxList (1-4). Las pantallas estrechas vuelven a una sola columna.

Inyecta el tema neutro por defecto incluido. Desactivelo cuando entregue su propia apariencia completa.

Vista previa en directo
Fondo de la vista previaSolo una ayuda de estilo — no es un token del Micro-Frontend. El Micro-Frontend es transparente y hereda el fondo de tu pagina.
mount.ts
import { mount } from "@workspace/aditus-shop-embed";

mount(document.getElementById("aditus-shop")!, {
  publicKey: "pk_deine_seite",
  // sessionToken,  // requerido para activar la tienda — acunado por tu backend, ver "Micro Frontend"
  eventTheme: false,  // muestra tus tokens, no la marca del organizador del evento
});

Solo se emiten los tokens que has cambiado — los omitidos conservan los valores por defecto incluidos.