Aller au contenu
MildportMildport

Thématisation

Le widget se thématise via des custom properties CSS en light-DOM — des tokens --mildport-* que vous définissez sur (ou au-dessus de) l’élément. N’importe quel design system, mode sombre inclus. Pas de perçage du Shadow DOM, pas de guerres de !important.

.mildport {
  --mildport-bg: #0b0e16;
  --mildport-fg: #e9e4d8;
  --mildport-surface: #141a26;
  --mildport-border: rgba(233, 228, 216, 0.14);
  --mildport-primary: #f2c97d;
  --mildport-primary-fg: #1a1206;
  --mildport-radius: 12px;
  --mildport-font: 'Inter Variable', system-ui, sans-serif;


  /* review grid */
  --mildport-grid-header-bg: #1a2230;
  --mildport-grid-cell-bg: #0f1620;
  --mildport-grid-selection: #f2c97d;
}

Un ensemble de tokens représentatif :

Token Rôle
--mildport-bg / --mildport-fg Arrière-plan et texte de base.
--mildport-surface / --mildport-border Cartes, panneaux, filets.
--mildport-primary / --mildport-primary-fg Accent et sa couleur de contraste.
--mildport-success / --mildport-warning / --mildport-danger États de validation.
--mildport-radius / --mildport-font Rayon des coins et typographie.
--mildport-grid-* En-tête, cellules et sélection de la grille de revue.