Resumen de estilos

Qué son los estilos

Un componente (un botón, una tarjeta) se construye con estilos. Si el botón usa el color principal, la forma de píldora y la tipografía "label", cambiar cualquiera de esos estilos cambia todos los botones a la vez. Por eso los estilos van antes que los componentes.

Tokens de diseño

Un token es un nombre para una decisión de diseño. En lugar de escribir #1d4ed8 en cien lugares, se escribe var(--md-sys-color-primary). Si mañana el color cambia, se cambia en un solo sitio.

:root {
  /* Tokens de sistema: decisiones de diseño con nombre */
  --md-sys-color-primary: #1d4ed8;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-typescale-body-large-size: 16px;
}

.boton {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border-radius: var(--md-sys-shape-corner-medium);
  font-size: var(--md-sys-typescale-body-large-size);
}

Material organiza los tokens en tres niveles: referencia (todos los valores posibles, como el tono 40 de la paleta azul), sistema (el rol, como "primary") y componente (dónde se usa, como "fondo del botón relleno").

Los 7 estilos

Material 2 y Material 3

Las páginas de componentes de esta guía siguen Material 2. Esta sección de estilos sigue Material 3, la versión vigente. Las diferencias más visibles: