Color

En Tailwind v4, un token declarado dentro de @theme genera sus utilidades: --color-card produce bg-card, text-card y border-card. Las primitivas se declaran fuera de @theme, así que no generan ninguna.

La consecuencia es la que buscábamos: no existe ninguna utilidad de Tailwind que apunte a un valor crudo. No hace falta acordarse de la regla, porque la clase directamente no existe.

/* capa 1 — primitivas, en :root, sin utilidades */
:root {
  --orbit-neutral-950: oklch(15.5% 0.004 285);
  --orbit-indigo-600:  oklch(54.6% 0.204 278);
}

/* capa 2 — semánticos, dentro de @theme, con utilidades */
@theme {
  --color-fg:     var(--orbit-neutral-950);
  --color-accent: var(--orbit-indigo-600);
}

/* dark mode: solo se redefine la capa semántica */
html.dark {
  --color-fg: var(--orbit-neutral-50);
}

• surfaceFondo de páginabg-surface
• surface-subtleZona diferenciada dentro de la páginabg-surface-subtle
• cardSuperficie de tarjetabg-card
• card-hoverTarjeta bajo el cursorbg-card-hover
• raisedMenús, popovers, cualquier cosa que flotebg-raised
• insetHundido: rieles, campos de código, fondos de barrabg-inset

• fgTexto principalbg-fg
• fg-mutedSecundario: descripciones, etiquetasbg-fg-muted
• fg-subtleTerciario: unidades, marcas de ejebg-fg-subtle
• fg-disabledDeshabilitadobg-fg-disabled
• fg-inverseSobre fondo oscuro en tema clarobg-fg-inverse
• fg-on-accentSobre el color de acentobg-fg-on-accent

• borderBorde por defectobg-border
• border-subtleSeparadores internosbg-border-subtle
• border-strongBorde con más presenciabg-border-strong
• ringAnillo de focobg-ring

• accentAcción primariabg-accent
• accent-subtleFondo teñido de acentobg-accent-subtle
• accent-fgTexto de acentobg-accent-fg
• successConfirmaciónbg-success
• dangerError o destrucciónbg-danger
• warningAtenciónbg-warning

Validada con contraste contra el fondo de tarjeta en ambos temas, y con distancia perceptual mínima entre series contiguas. En modo oscuro no se usan los mismos valores: se sustituyen por versiones más claras del mismo matiz.

• chart-1
• chart-2
• chart-3
• chart-4
• chart-5
• chart-6
• chart-7
• chart-8

Si estás por escribir un hex, un oklch() o una clase de paleta cruda, parate: hay un token semántico para eso. Si no lo hay, el que falta es el token, no el literal.