Saltar al contenido principal

Tokens · Familias de tokens

Color

Todos los colores que puede usar un componente, con nombres según su función y sus valores en claro, oscuro y alto contraste, uno junto al otro.

Archivos: src/semantic.css

Esta traducción la ha escrito una IA y todavía no la ha revisado ninguna persona. Leer esta página en inglés

Elige un token por la función que cumple, no por su color. El nombre es el mismo en todos los modos; cambia el valor.

  • Superficies para fondos, texto para palabras, líneas para bordes y separadores.
  • Marca para enlaces y la acción principal; los tokens de relleno van detrás del texto blanco.
  • Estado para éxito, advertencia, peligro e información, y nada más.
  • Barra lateral, campos y sintaxis de código solo para esos componentes.
  • Gráficos para las series, la barra vacía y la cuadrícula de un gráfico, y nada más.

Cada token muestra su función y, al lado, su valor en los modos claro, oscuro y de alto contraste. Un clic en el nombre lo selecciona entero, listo para copiar. En Figma, los mismos nombres son variables: consulta Tokens en Figma.

Los 63 tokens semánticos, en 10 grupos

Superficies (8)

  • --luz-surface-page El fondo de la página. Claro #fbf8f2 Oscuro #1c1712 Alto contraste #fff
  • --luz-surface Tarjetas, diálogos y campos: la misma superficie que la página. Claro #fffdf9 Oscuro #241e18 Alto contraste #fff
  • --luz-surface-hover Una fila o un control bajo el puntero. Claro #f4ede0 Oscuro #2e261f Alto contraste #f9fafc
  • --luz-surface-pressed Un control mientras se pulsa. Claro #ebe0cc Oscuro #3a3028 Alto contraste #e9eef4
  • --luz-surface-muted Bloques de código y áreas de fondo, a un nivel de la página. Claro #fbf8f2 Oscuro #1c1712 Alto contraste #f9fafc
  • --luz-surface-strong Cabeceras de tabla, etiquetas, tooltips y avisos emergentes, a dos niveles de la página. Claro #efe6d6 Oscuro #3a3028 Alto contraste #e9eef4
  • --luz-scrim Oscurece la página detrás de un diálogo o un cajón. Claro rgba(13, 14, 17, 0.6) Oscuro rgba(0, 0, 0, 0.7) Alto contraste rgba(13, 14, 17, 0.6)
  • --luz-surface-media Detrás de un vídeo. Igual en todos los modos. Claro #000 Oscuro #000 Alto contraste #000

Texto (5)

  • --luz-text-primary Texto del cuerpo, encabezados e iconos. Claro #231c16 Oscuro #f3ece1 Alto contraste #000
  • --luz-text-secondary Etiquetas, indicaciones y pies. Claro #6b5a48 Oscuro #b8a690 Alto contraste #0d0e11
  • --luz-text-muted Marcadores de posición y separadores. Claro #7a6a58 Oscuro #a08f7a Alto contraste #434951
  • --luz-text-disabled Controles desactivados: 3:1, el mínimo que establece LUZ. Claro #8f8172 Oscuro #877a69 Alto contraste #646b73
  • --luz-text-on-fill Texto sobre un fondo sólido: botones principales y de peligro, insignias. Claro #fff Oscuro #fff Alto contraste #fff

Líneas (3)

  • --luz-divider Líneas decorativas entre bloques de contenido. Sin mínimo. Claro #e3d4b8 Oscuro #43382d Alto contraste #434951
  • --luz-outline Bordes que identifican un control: 3:1. Claro #807366 Oscuro #7d7062 Alto contraste #000
  • --luz-focus-ring El contorno del foco: 3:1 sobre cualquier superficie. Claro #2365a6 Oscuro #6fb1ec Alto contraste #000

Marca (7)

  • --luz-brand-primary Enlaces, botones de contorno y fantasma, pestaña activa. Claro #2365a6 Oscuro #6fb1ec Alto contraste #00256c
  • --luz-brand-hover Un enlace bajo el puntero. Claro #1b5089 Oscuro #9ccaf2 Alto contraste #000d4e
  • --luz-brand-active Un enlace mientras se pulsa. Claro #143d69 Oscuro #c8e1f8 Alto contraste #020831
  • --luz-brand-subtle Un tinte claro de marca: avatares y botones de contorno bajo el puntero. Claro #e3eef9 Oscuro rgba(32, 143, 255, 0.14) Alto contraste #f6fbff
  • --luz-brand-fill El fondo del texto blanco: botón principal, insignia y casilla marcada. Claro #2365a6 Oscuro #2172c1 Alto contraste #00256c
  • --luz-brand-fill-hover El botón principal bajo el puntero. Claro #1b5089 Oscuro #18548f Alto contraste #000d4e
  • --luz-brand-fill-active El botón principal mientras se pulsa. Claro #143d69 Oscuro #134577 Alto contraste #020831
  • --luz-sidebar-bg El panel de la barra lateral. Claro #2a211a Oscuro #14100c Alto contraste #000
  • --luz-sidebar-text Enlaces de la barra lateral. Claro #e3d5bf Oscuro #cbbba5 Alto contraste #ced5dd
  • --luz-sidebar-text-hover Un enlace de la barra lateral bajo el puntero, el nombre de marca y el anillo de foco. Claro #fff Oscuro #fff Alto contraste #fff
  • --luz-sidebar-hover Detrás de un enlace de la barra lateral bajo el puntero. Claro #3a2f25 Oscuro #241e18 Alto contraste #16191e
  • --luz-sidebar-active-bg Detrás del enlace activo de la barra lateral. Claro #9cc8ee Oscuro #8cc4f5 Alto contraste #fff
  • --luz-sidebar-active-text El enlace activo de la barra lateral. Claro #1a140f Oscuro #14100c Alto contraste #000
  • --luz-sidebar-border Líneas decorativas entre las partes de la barra lateral. Claro #3d3127 Oscuro #2e261f Alto contraste #282d34
  • --luz-sidebar-label Etiquetas de sección y la versión. Claro #b9a78f Oscuro #a8977f Alto contraste #889099
  • --luz-sidebar-logo-bg Detrás del logotipo. Claro #9cc8ee Oscuro #8cc4f5 Alto contraste #fff

Estado (10)

  • --luz-color-success Texto y bordes de éxito. Claro #177734 Oscuro #89edb8 Alto contraste #105224
  • --luz-color-success-bg El tinte de éxito de fondo para alertas y etiquetas. Claro #eefff5 Oscuro rgba(82, 207, 146, 0.12) Alto contraste #eefff5
  • --luz-color-danger Texto de error y borde de un campo no válido. Claro #ca1c25 Oscuro #ffc3c1 Alto contraste #8d131a
  • --luz-color-danger-bg El tinte de peligro. Claro #fff8f8 Oscuro rgba(239, 79, 81, 0.12) Alto contraste #fff8f8
  • --luz-color-danger-fill El botón y la insignia de peligro, detrás del texto blanco. Claro #ca1c25 Oscuro #c31a26 Alto contraste #8d131a
  • --luz-color-warning Texto de advertencia. Claro #7c4d00 Oscuro #ffcd51 Alto contraste #5a4300
  • --luz-color-warning-accent El borde inicial de una alerta de advertencia. Decorativo. Claro #ffcd51 Oscuro #ffedb7 Alto contraste #e2a928
  • --luz-color-warning-bg El tinte de advertencia. Claro #fffae8 Oscuro rgba(255, 205, 81, 0.12) Alto contraste #fffae8
  • --luz-color-info Texto informativo. Claro #004299 Oscuro #b3d9ff Alto contraste #00256c
  • --luz-color-info-bg El tinte informativo. Claro #f6fbff Oscuro rgba(119, 185, 255, 0.12) Alto contraste #f6fbff

Campos (2)

  • --luz-input-bg Dentro de un campo. Claro #fffdf9 Oscuro #241e18 Alto contraste #fff
  • --luz-input-border El borde de un campo: 3:1 sobre cualquier superficie. Claro #8b7d6f Oscuro #877a69 Alto contraste #000

Ampliados (5)

  • --luz-color-teal Texto de categoría (etiqueta verde azulado). Nunca un estado. Claro #00736f Oscuro #62c9b5 Alto contraste #00504d
  • --luz-color-teal-bg El tinte verde azulado. Claro #effefa Oscuro rgba(98, 201, 181, 0.12) Alto contraste #effefa
  • --luz-color-purple Texto de categoría (etiqueta morada). Nunca un estado. Claro #803ae9 Oscuro #f3e8ff Alto contraste #5828a1
  • --luz-color-purple-bg El tinte morado. Claro #fcf9ff Oscuro rgba(202, 154, 255, 0.12) Alto contraste #fcf9ff
  • --luz-color-code Código en línea. Claro #803ae9 Oscuro #ca9aff Alto contraste #5828a1

Sintaxis de código (6)

Los colores de pre.luz-code-block, measured on --luz-surface-muted: 4.5:1 or more, 7:1 or more in high contrast. See the syntax specimen.

  • --luz-code-comment Comentarios, también en cursiva. Claro #646b73 Oscuro #adb5bd Alto contraste #434951
  • --luz-code-keyword Palabras clave, también en negrita. Claro #231c16 Oscuro #f3ece1 Alto contraste #000
  • --luz-code-name Etiquetas, selectores, funciones y comandos. Claro #004299 Oscuro #b3d9ff Alto contraste #00256c
  • --luz-code-property Atributos, propiedades, indicadores y variables. Claro #853bca Oscuro #ca9aff Alto contraste #610ca0
  • --luz-code-string Cadenas. Claro #005733 Oscuro #52cf92 Alto contraste #005733
  • --luz-code-literal Números, colores y entidades. Claro #7c4d00 Oscuro #e2a928 Alto contraste #553000

Gráficos (8)

Las series de un gráfico, en el orden en que un gráfico las usa, y después la parte vacía de una barra y la cuadrícula. Cada serie tiene 3:1 o más sobre cualquier superficie (4.5:1 o más en alto contraste) y se distingue de las demás por el tono y por la luminosidad, también con protanopía o deuteranopía. Ninguna es roja, verde ni amarilla, que conservan su significado. El color nunca es la única señal: un gráfico mantiene sus cifras como texto.

  • --luz-chart-1 La primera serie de un gráfico: el azul de la marca. Claro #2365a6 Oscuro #6fb1ec Alto contraste #00256c
  • --luz-chart-2 La segunda serie: verde azulado. Claro #00736f Oscuro #62c9b5 Alto contraste #00504d
  • --luz-chart-3 La tercera serie: morado. Claro #5a248a Oscuro #dbbeeb Alto contraste #550b9d
  • --luz-chart-4 La cuarta serie: frambuesa. Claro #7f004e Oscuro #e8709f Alto contraste #9e2e81
  • --luz-chart-5 La quinta serie: pervinca. Claro #6079c4 Oscuro #6784e5 Alto contraste #4459b8
  • --luz-chart-6 La sexta serie: piedra. Claro #867f7a Oscuro #9a8c78 Alto contraste #342516
  • --luz-chart-track La parte vacía de una barra, bajo su relleno. Claro #d2c3a9 Oscuro #54483c Alto contraste #adb5bd
  • --luz-chart-grid Las líneas de la cuadrícula tras un gráfico. Decorativas. Claro #dccdb3 Oscuro #4a3e33 Alto contraste #889099

Última actualización · Editar esta página · Avisar de un problema