Fundamentos
Los tokens semánticos genéricos —los que no pertenecen a ningún componente—, agrupados por el concepto que nombran, un fichero por concepto. Los de un componente están en la página de ese componente.
Un fondo sobre el que se coloca contenido. Hay dos: el documento, y un contenedor, que se separa del documento para que lo que lleva dentro se lea como una unidad. El borde de un contenedor es una sola decisión —color, grosor y tipo—, y la toma el contenedor.
| Token | Qué nombra |
|---|---|
--surface--color--document | El color de fondo del documento. |
--surface--color--container | El color de fondo de un contenedor. |
--surface--border--container | El color del borde de un contenedor. |
--surface--border-width--container | El grosor del borde de un contenedor. |
--surface--border-style--container | El tipo (border-style) del borde de un contenedor. |
--surface--radius--container | El radio de borde de un contenedor. |
El color de un texto dice qué clase de texto es, no cuánta atención merece: dirigir la atención es trabajo de las superficies de marca. Hay dos letras, la de exposición y la de lectura, y cada una lleva su familia, su grosor, su interlineado y su espaciado.
| Token | Qué nombra |
|---|---|
--text--color--display | El color del texto de exposición, el que va en la letra de exposición: titulares, cifras de precio, etiquetas de acción. |
--text--color--ui | El color del texto de interfaz, el que nombra u opera un control: la etiqueta de un campo o de una casilla, el valor escrito en un campo, el título de un resultado, la opción de un menú. |
--text--color--body | El color del texto de lectura: párrafos, descripciones, celdas. |
--text--color--meta | El color del texto que anota a otro: metadatos, eyebrows, etiquetas de sección, cabeceras de tabla, un precio anterior. |
--text--color--inactive | El color del texto inactivo: un marcador de posición, un valor que ya no está disponible. |
--text--color--link | El color de un enlace dentro del texto. |
--text--color--link-hover | El color de un enlace al apuntarlo. |
--text--color--navigation | El color de un enlace de navegación en reposo. |
--text--font-family--display | La familia tipográfica del texto de exposición: titulares, cifras, etiquetas de acción. |
--text--font-family--body | La familia tipográfica del texto de lectura. |
--text--font-weight--display | El grosor de letra del texto de exposición. |
--text--font-weight--body | El grosor de letra del texto de lectura. |
--text--font-size--hero | El tamaño de letra del titular de portada. Es fluido: cambia con el ancho del viewport. |
--text--font-size--heading-1 | El tamaño de letra de un titular de primer nivel (h1). Es fluido. |
--text--font-size--heading-2 | El tamaño de letra de un titular de segundo nivel (h2). |
--text--font-size--heading-3 | El tamaño de letra de un titular de tercer nivel (h3). |
--text--font-size--heading-4 | El tamaño de letra de un titular de cuarto nivel (h4). |
--text--font-size--card-title | El tamaño de letra del titular de una tarjeta. Es fluido. |
--text--font-size--price | El tamaño de letra de una cifra de precio. |
--text--font-size--body | El tamaño de letra del texto de lectura. |
--text--font-size--caption | El tamaño de letra del texto que acompaña a un control: una etiqueta, un mensaje de error, un subtítulo. |
--text--font-size--eyebrow | El tamaño de letra de un eyebrow. |
--text--line-height--display | El interlineado del texto de exposición. |
--text--line-height--body | El interlineado del texto de lectura. |
--text--letter-spacing--display | El espaciado entre letras del texto de exposición. |
--text--letter-spacing--price | El espaciado entre letras de una cifra de precio. |
--text--letter-spacing--eyebrow | El espaciado entre letras de un eyebrow, que va en mayúsculas separadas. |
La línea de un elemento que solo necesita delimitarse: un campo, una ficha, una píldora, una celda. Un borde es una sola decisión —color, grosor y tipo—: el concepto que decide el color de una línea decide también su grosor y su tipo. Este concepto cubre la línea de los elementos que no tienen una propia; un contenedor, el trazo de un control, un fragmento de código o un anillo que forma parte de una pieza tienen la suya en su propio concepto.
| Token | Qué nombra |
|---|---|
--border--width--line | El grosor de la línea de un elemento que solo se delimita. |
--border--style--line | El tipo (border-style) de esa línea. |
--border--color--rest | El color del borde de un elemento en reposo. |
--border--color--hover | El color del borde de un elemento al apuntarlo. |
--border--color--active | El color del borde de un elemento mientras es el actual: un campo con el foco, un desplegable abierto, una fila seleccionada. |
--border--color--divider | El color de una línea que separa dos secciones sobre el mismo fondo. |
| Token | Qué nombra |
|---|---|
--focus--color--ring | El color del anillo de foco. |
--focus--outline--ring | El anillo de foco completo (grosor, tipo y color), para aplicar en outline. |
| Token | Qué nombra |
|---|---|
--code--color--text | El color del texto de un fragmento de código, en línea o en bloque. |
--code--background--snippet | El color de fondo de un fragmento de código. |
--code--border--snippet | El color del borde de un fragmento de código. |
--code--border-width--snippet | El grosor del borde de un fragmento de código. |
--code--border-style--snippet | El tipo (border-style) del borde de un fragmento de código. |
| Token | Qué nombra |
|---|---|
--hover--background--target | El color de fondo que toma un elemento al apuntarlo, en los elementos que responden al puntero con un color de fondo. |
| Token | Qué nombra |
|---|---|
--disabled--color--text | El color del texto de un control no disponible. |
--disabled--background--control | El color de fondo de un control no disponible. |
--disabled--border--control | El color del borde de un control no disponible. |
Estar elegido, en sus dos formas: un control que se marca o se desmarca, y el elemento actual entre sus iguales.
| Token | Qué nombra |
|---|---|
--selection--background--box | El color de fondo de la casilla de un control sin marcar. |
--selection--border--box | El color del borde de la casilla de un control de selección. |
--selection--border-width--box | El grosor del borde de la casilla de un control de selección. |
--selection--border-style--box | El tipo (border-style) del borde de la casilla de un control de selección. |
--selection--color--checked | El color de la marca de un control marcado. |
--selection--background--option-checked | El color de fondo de una opción entera cuando está marcada. |
--selection--color--option-checked-text | El color del texto de una opción entera cuando está marcada. |
--selection--background--current | El color de fondo del elemento actual entre sus iguales. |
--selection--color--current-text | El color del texto del elemento actual entre sus iguales. |
--selection--border--current | El color del borde del elemento actual entre sus iguales. |
--selection--border-width--current | El grosor del borde del elemento actual entre sus iguales. |
--selection--border-style--current | El tipo (border-style) del borde del elemento actual entre sus iguales. |
--selection--color--peer-text | El color del texto de un igual que no es el actual. |
| Token | Qué nombra |
|---|---|
--action--background--primary | El color de fondo de la acción primaria. |
--action--background--primary-hover | El color de fondo de la acción primaria al apuntarla. |
--action--border--primary | El color del borde de la acción primaria. |
--action--color--primary-text | El color del texto de la acción primaria. |
Una condición que la interfaz comunica: éxito, error, aviso e inclusión.
| Token | Qué nombra |
|---|---|
--state--color--success | El color del estado de éxito. |
--state--color--success-text | El color del texto o de la marca sobre una forma rellena con el color de éxito. |
--state--background--success | El color de fondo del estado de éxito. |
--state--color--error | El color del estado de error. |
--state--color--error-text | El color del texto o de la marca sobre una forma rellena con el color de error. |
--state--background--error | El color de fondo del estado de error. |
--state--background--error-hover | El color de fondo de una acción de error al apuntarla. |
--state--color--warning | El color del estado de aviso. |
--state--color--warning-text | El color del texto o de la marca sobre una forma rellena con el color de aviso. |
--state--background--warning | El color de fondo del estado de aviso. |
--state--color--included | El color de la marca que dice que algo está incluido cuando se dibuja sola, sin disco. |
--state--background--included | El color de fondo del disco que lleva esa marca. |
--state--color--included-text | El color de la marca sobre ese disco. |
| Token | Qué nombra |
|---|---|
--motion--transition--feedback | La transición de una respuesta inmediata: un cambio de color al apuntar o al enfocar. |
--motion--transition--state | La transición de un cambio de estado: algo que conmuta o que se desplaza. |
--motion--transition--movement | La transición de una parte que se mueve: un chevron que gira, una flecha que avanza. |
--motion--transition--reveal | La transición de una entrada o de un despliegue. |
Un campo de texto.
| Token | Qué nombra |
|---|---|
--field--radius--box | El radio de borde de un campo de texto. |
--field--background--box | El color de fondo de un campo de texto. |
| Token | Qué nombra |
|---|---|
--message--radius--box | El radio de borde de un aviso colocado en la página. |
| Token | Qué nombra |
|---|---|
--menu--radius--panel | El radio de borde del panel flotante de un menú. |
--menu--radius--item | El radio de borde de una fila de un menú. |
--menu--shadow--panel | La sombra del panel flotante de un menú. |
Un disparador pulsable con forma de píldora o circular.
| Token | Qué nombra |
|---|---|
--control--radius--pill | El radio de borde de un control con forma de píldora. |
--control--radius--icon-button | El radio de borde de un control circular. |
--control--height--compact | El alto de todo control compacto, para que una fila de controles compactos quede a ras. |
--control--background--rest | El color de fondo de un control en reposo. |
--control--color--stroke | El color del borde de un control y de su sombra desplazada. |
--control--border-width--stroke | El grosor del borde de un control. |
--control--border-style--stroke | El tipo (border-style) del borde de un control. |
--control--color--glyph | El color del glifo de un control que es solo un icono, en reposo. |
--control--color--glyph-hover | El color de ese glifo al apuntarlo. |
--control--offset--pill-rest | El desplazamiento de la sombra de un control con forma de píldora en reposo. |
--control--offset--pill-pressed | El desplazamiento de la sombra de un control con forma de píldora pulsado, y el de reposo de uno compacto. |
--control--offset--pill-active | El desplazamiento de la sombra de un control compacto con forma de píldora mientras se pulsa. |
| Token | Qué nombra |
|---|---|
--indicator--radius--pill | El radio de borde de un marcador de estado con forma de píldora. |
--indicator--radius--dot | El radio de borde de un marcador de estado con forma de punto. |
| Token | Qué nombra |
|---|---|
--icon--radius--info | El radio de borde de un marcador informativo, nunca interactivo. |
--icon--color--info | El color de un glifo informativo, nunca interactivo. |
Una pista por la que se desplaza un mando, o que se rellena hasta un punto.
| Token | Qué nombra |
|---|---|
--track--radius--rail | El radio de borde de la pista. |
--track--radius--knob | El radio de borde del mando. |
--track--background--rail | El color de fondo de la parte sin rellenar de la pista. |
--track--background--fill | El color de fondo de la parte rellena de la pista. |
--track--background--knob | El color de fondo del mando. |
| Token | Qué nombra |
|---|---|
--elevation--shadow--raised | La sombra de un elemento que se separa apenas de la página. |
--elevation--shadow--floating | La sombra de un elemento que flota sobre el contenido. |
--elevation--shadow--overlay | La sombra de un elemento colocado por encima de todo. |
| Token | Qué nombra |
|---|---|
--layer--order--menu-panel | El z-index del panel flotante de un menú. |
--layer--order--frame | El z-index de un marco fijo de la página. |
--layer--order--tooltip | El z-index de una ayuda emergente. |
--layer--order--modal | El z-index de una ventana modal. |
--layer--order--toast | El z-index de una notificación pasajera. |
Son los únicos z-index que comparten contexto de apilado: lo que un componente eleva dentro de su propia caja cuenta desde 1 en su contexto aislado y nunca toma uno de estos valores.
| Token | Qué nombra |
|---|---|
--content--size--column | El ancho máximo de la columna de contenido. |
--content--size--reading | El ancho máximo de la columna de un texto de lectura. |