Tokens de diseño en CSS

Dos capas: valores crudos con nombres aburridos y nombres semánticos que los apuntan.

:root {
  /* raw scale */
  --blue-500: oklch(62% 0.19 256);
  --gray-100: oklch(97% 0.005 260);
  --gray-900: oklch(22% 0.02 260);
  --space-4: 1rem;
  --radius-md: 0.5rem;

  /* decisions */
  --surface: var(--gray-100);
  --text: var(--gray-900);
  --gap: var(--space-4);
}

.card {
  background: var(--surface);
  color: var(--text);
  padding: var(--gap);
  border-radius: var(--radius-md);
}

Cómo funciona

Un token crudo nombra un valor; un token semántico nombra una decisión.
Los componentes solo usan la capa semántica.
Un tema entonces reapunta los nombres semánticos y no toca nada más.

Palabras clave y builtins usados aquí

background
color
padding
rem

El intento, en números

Líneas: 20
Caracteres a escribir: 369
Tokens: 102
Ritmo de tres estrellas: 85 tpm

Al ritmo de tres estrellas de 85 tokens por minuto, este intento toma unos 72 segundos.

Escribe este fragmento

Paso 2 de 3 en Fundamentos; paso 2 de 9 en Organizar el CSS.

← Anterior Siguiente →