Stylisez AI-Kit pour WordPress avec des variables CSS

Les composants d'interface AI‑Kit (AI‑Kit Feature et Chatbot) exposent un ensemble de jetons de conception CSS que vous pouvez redéfinir depuis votre thème ou votre CSS personnalisé.

La plupart des variables sont définies sur ces racines :

• #ai-kit-inline-root — interfaces Feature inline et chatbot
• #ai-kit-portal-root — interfaces Feature modales

Si vous ne savez pas quelle racine votre page utilise, vous pouvez redéfinir les jetons sans risque sur les deux.

Démarrage rapide​

Ajoutez ce qui suit au CSS de votre thème (ou à Apparence → Personnaliser → CSS additionnel) :

/* 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;
}

Référence des jetons​

Voici un aperçu pratique des jetons disponibles.

Typographie​

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

Espacement​

• --ai-kit-space-1 … --ai-kit-space-5
• --ai-kit-spacing-sm / --ai-kit-spacing-md / --ai-kit-spacing-lg (alias de rétrocompatibilité)

Rayon​

• --ai-kit-radius — rayon par défaut utilisé par les surfaces Feature (la valeur par défaut est à angles carrés)
• --ai-kit-radius-sm — souvent utilisé pour les surfaces secondaires
• --ai-kit-radius-pill
• --ai-kit-radius-round
• --ai-kit-launcher-radius — rayon du lanceur/bouton (peut être indépendant de --ai-kit-radius)

Couleurs sémantiques​

Ce sont les couleurs « signifiantes » qu'AI-Kit utilise en interne (la plupart prennent par défaut les variables Mantine lorsqu'elles sont présentes) :

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

Ombres​

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

Animation de bordure Feature​

Utilisée par la bordure Feature animée (si activée dans votre build d'interface) :

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

Position, taille et superposition​

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

Lanceur et surface du 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

Statut du chat, bulles et 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

Boutons du chat et retours​

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