Ir al contenido
MildportMildport

Tematización

El widget se tematiza mediante custom properties de CSS en light-DOM — tokens --mildport-* que defines en (o por encima de) el elemento. Cualquier sistema de diseño, modo oscuro incluido. Sin perforar el Shadow DOM, sin guerras 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 conjunto de tokens representativo:

Token Propósito
--mildport-bg / --mildport-fg Fondo y texto base.
--mildport-surface / --mildport-border Tarjetas, paneles, líneas finas.
--mildport-primary / --mildport-primary-fg Acento y su color de contraste.
--mildport-success / --mildport-warning / --mildport-danger Estados de validación.
--mildport-radius / --mildport-font Radio de esquina y tipografía.
--mildport-grid-* Encabezado, celdas y selección de la cuadrícula de revisión.