Iniciar sesión

Aplique estilos a AI-Kit para WordPress con variables CSS

Los componentes de la interfaz de AI‑Kit (AI‑Kit Feature y Chatbot) exponen un conjunto de tokens de diseño CSS que puede sustituir desde su tema o CSS personalizado.

La mayoría de las variables se definen en estos elementos raíz:

  • #ai-kit-inline-root — interfaces Feature integradas y el chatbot
  • #ai-kit-portal-root — interfaces Feature modales

Si no sabe qué elemento raíz usa su página, puede sustituir los tokens en ambos sin problemas.

Inicio rápido​

Añada lo siguiente al CSS de su tema (o en Apariencia → Personalizar → CSS adicional):

/* Global tweaks */
#ai-kit-inline-root,
#ai-kit-portal-root {
  --ai-kit-font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --ai-kit-radius: 8px;                 /* Feature panel corners */
  --ai-kit-chat-border-radius: 12px;    /* Chat window corners */
  --ai-kit-chat-width: 520px;
}

/* Make the launcher match your brand */
#ai-kit-portal-root {
  --ai-kit-launcher-bg: #0ea5e9;
  --ai-kit-launcher-bg-hover: #0284c7;
  --ai-kit-user-bubble-bg: #0ea5e9;
}

Referencia de tokens​

A continuación se ofrece una descripción práctica de los tokens disponibles.

Tipografía​

  • --ai-kit-font-family
  • --ai-kit-font-size
  • --ai-kit-font-size-sm
  • --ai-kit-font-size-xs
  • --ai-kit-font-size-title
  • --ai-kit-line-height

Espaciado​

  • --ai-kit-space-1 … --ai-kit-space-5
  • --ai-kit-spacing-sm / --ai-kit-spacing-md / --ai-kit-spacing-lg (alias de compatibilidad con versiones anteriores)

Radio​

  • --ai-kit-radius — radio predeterminado de las interfaces Feature (de forma predeterminada, las esquinas son cuadradas)
  • --ai-kit-radius-sm — se usa habitualmente en interfaces secundarias
  • --ai-kit-radius-pill
  • --ai-kit-radius-round
  • --ai-kit-launcher-radius — radio del iniciador o botón (puede ser independiente de --ai-kit-radius)

Colores semánticos​

Estos son los colores «significativos» que AI‑Kit usa internamente (muchos recurren de forma predeterminada a variables de Mantine cuando están presentes):

  • --ai-kit-color-text
  • --ai-kit-color-text-muted
  • --ai-kit-color-border
  • --ai-kit-color-border-muted
  • --ai-kit-color-surface / --ai-kit-color-surface-2 / --ai-kit-color-surface-3
  • --ai-kit-color-danger / --ai-kit-color-warning / --ai-kit-color-success
  • --ai-kit-color-primary
  • --ai-kit-color-primary-hover
  • --ai-kit-color-primary-contrast

Sombras​

  • --ai-kit-shadow-sm
  • --ai-kit-shadow-sm-hover

Animación del borde de Feature​

Se usa en el borde animado de Feature (si está activado en la compilación de la interfaz):

  • --ai-kit-border-width
  • --ai-kit-border-color
  • --ai-kit-border-thickness
  • --ai-kit-border-speed
  • --ai-kit-border-angle
  • --ai-kit-border-gradient

Posición, tamaño y capas​

  • --ai-kit-position-z-index
  • --ai-kit-open-button-offset-x
  • --ai-kit-open-button-offset-y
  • --ai-kit-chat-launcher-size
  • --ai-kit-chat-width
  • --ai-kit-chat-height-min
  • --ai-kit-chat-height-max
  • --ai-kit-chat-height-cap

Iniciador e interfaz del chat​

  • --ai-kit-launcher-bg

  • --ai-kit-launcher-color

  • --ai-kit-launcher-bg-hover

  • --ai-kit-launcher-shadow

  • --ai-kit-launcher-shadow-hover

  • --ai-kit-chat-surface

  • --ai-kit-chat-surface-subtle

  • --ai-kit-chat-border-color

  • --ai-kit-chat-border-radius

  • --ai-kit-chat-icon-color

Estado del chat, burbujas y Markdown​

  • --ai-kit-chat-status-bg

  • --ai-kit-chat-status-fg

  • --ai-kit-user-bubble-bg

  • --ai-kit-user-bubble-color

  • --ai-kit-assistant-bubble-bg

  • --ai-kit-assistant-bubble-color

  • --ai-kit-chat-code-bg

  • --ai-kit-chat-pre-bg

Botones y comentarios del chat​

  • --ai-kit-chat-close-bg

  • --ai-kit-chat-close-bg-hover

  • --ai-kit-chat-typing-dot-color

  • --ai-kit-chat-feedback-bg

  • --ai-kit-chat-feedback-border

  • --ai-kit-chat-feedback-active-bg