Iconos
Un conjunto de iconos por sistema de diseño, un peso y una regla: con contorno cuando no está seleccionado, con relleno cuando lo está.
Los iconos predeterminados de Tanrei son Material Symbols, Rounded, con peso 300. Igual que los tipos de letra del texto, la fuente se referencia por su nombre y no se incluye: la carga el producto.
La manera de dibujar un icono es un pequeño grupo de tokens. La caja del icono tiene tres tamaños, sys.icon.small, medium y large (16, 20 y 24px de forma predeterminada), y el tamaño óptico de la fuente sigue a la caja.
ref.typeface.icon- The icon font. Material Symbols Rounded: a variable font whose weight and fill are set from sys.icon.
sys.icon.family- The icon font by selection. A variable icon font (Material Symbols) is one family and tells selected from unselected with its FILL axis; a static icon font tells them apart with two families (Material Icons Outlined / Material Icons). Both default to ref.typeface.icon.
sys.icon.weight- The stroke weight of every icon (the `wght` axis of the icon font).
sys.icon.fill- The fill of an icon by selection (the `FILL` axis of the icon font): 0 is outlined, 1 is filled.
Generado a partir de tokens/ref/typeface.tokens.json, tokens/sys/measure.tokens.json
Sin seleccionar, con contorno. Seleccionado, con relleno. Siempre. Un elemento de navegación, una pestaña, un conmutador, un chip, un favorito: el icono sigue siendo el mismo glifo y solo su relleno cambia con el estado. Los iconos con relleno y con contorno nunca se mezclan para decorar ni se eligen a mano: en la web, el relleno sigue el estado del control en el que se encuentra el icono.
El relleno sigue a la selección
import '@tanrei/web/icons.css';<button aria-pressed="true"><span class="tanrei-icon" aria-hidden="true">favorite</span> Favorito</button>.tanrei-icon lee aria-pressed, aria-selected, aria-checked y aria-current en cualquier ancestro (en un control de Tanrei, que los traslada a data-aria-*, lee data-aria-pressed, data-aria-selected, data-aria-checked y data-aria-current), o data-selected en el icono o en un ancestro (data-selected="false" excluye un icono concreto). Dale a un icono aria-hidden="true" cuando el texto que tiene al lado dice lo mismo, y dale al control un nombre accesible cuando no es así.
El nombre también puede ir en data-icon, con el elemento vacío:
<span class="tanrei-icon" data-icon="folder"></span>El glifo es el mismo, pero su nombre deja de ser texto de la página: no aparece en textContent ni en innerText, ni en lo que se copia, ni en el nombre accesible del control que lo contiene. Úsalo allí donde el nombre se leería como texto, como una fila de un menú o de una lista, una celda de una tabla o un texto que compara una prueba. El tamaño, la selección y el reflejo en los diseños de derecha a izquierda funcionan igual que con el nombre escrito como texto. Mantén aria-hidden="true" cuando el texto de al lado ya dice lo mismo: Firefox anterior a la versión 128 sigue incluyendo el nombre en el nombre accesible.
En las plataformas nativas, los mismos valores llegan con el sistema de diseño (system.icon), junto con una pequeña utilidad que convierte seleccionado y un tamaño en lo que necesita la fuente. Tanrei todavía no incluye un componente de icono.
El conjunto de iconos pertenece al sistema de diseño, así que una capa puede cambiarlo. Esto es lo que resuelven los sistemas incluidos:
| Sistema de diseño | family.unselected | family.selected | weight | fill.unselected | fill.selected |
|---|---|---|---|---|---|
tanrei | Material Symbols Rounded | Material Symbols Rounded | 300 | 0 | 1 |
cupertino | Material Symbols Rounded | Material Symbols Rounded | 300 | 0 | 1 |
m3-expressive-like | Material Symbols Outlined | Material Symbols Outlined | 400 | 0 | 1 |
m3-like | Material Symbols Outlined | Material Symbols Outlined | 400 | 0 | 1 |
Generado a partir de tokens/systems/*.system.json, design/tokens/<system>/tanrei.light.tokens.json
Una fuente de iconos distingue un icono seleccionado de uno sin seleccionar de una de dos maneras, y los tokens cubren ambas. Un icono seleccionado toma siempre family.selected y fill.selected; cuál de los dos cambia de verdad lo que se dibuja depende del conjunto.
Una fuente de iconos variable, como Material Symbols, es una sola familia con un eje FILL. De forma predeterminada, los dos tokens de familia apuntan a ref.typeface.icon, así que reorientar ese único token cambia el conjunto, y fill.unselected / fill.selected distinguen los estados. Esto es todo lo que escribe m3-like:
"tokens": {
"tanrei.ref.typeface.icon": { "$value": ["Material Symbols Outlined"], "reason": "Material Design 3 dibuja Material Symbols en el estilo Outlined." },
"tanrei.sys.icon.weight": { "$value": 400, "reason": "El peso predeterminado de Material Symbols en Material Design 3." }
}Una fuente de iconos estática no tiene ejes. Distribuye los dibujos con contorno y con relleno como dos familias separadas, así que la capa nombra una para cada estado:
"tokens": {
"tanrei.sys.icon.family.unselected": { "$value": ["Material Icons Outlined"], "reason": "Acme usa el conjunto estático Material Icons: con contorno cuando no está seleccionado." },
"tanrei.sys.icon.family.selected": { "$value": ["Material Icons"], "reason": "Acme usa el conjunto estático Material Icons: con relleno cuando está seleccionado." },
"tanrei.sys.icon.weight": { "$value": 400, "reason": "Una fuente de iconos estática tiene un solo peso; Material Icons está dibujado a 400." }
}Los tokens de relleno y de peso se quedan como están. Una fuente estática ignora los ejes, así que no hacen ningún daño, y un componente no necesita saber qué tipo de conjunto está activo. Esta capa es el fixture de pruebas del propio repositorio (packages/tokens-build/test/fixtures/acme.system.json).
Tanrei decide cómo se dibuja un icono, no qué iconos existen. Cada conjunto nombra sus glifos de forma distinta, y a un conjunto le puede faltar un glifo que otro sí tiene. Un producto que cambia de conjunto de iconos comprueba los nombres que usa. Un conjunto de símbolos que no es una fuente, como SF Symbols, no se puede nombrar con un token de familia; eso está anotado en el registro de lagunas de imitación como platform-symbol-sets.
El <Text> de React Native no puede definir los ejes de variación de una fuente, así que con una fuente de iconos variable FILL nunca llega al glifo, y un icono se ve igual en los dos estados. Para mantener allí la regla, usa dos familias estáticas como se indica arriba, o dibuja los iconos como SVG.
Las utilidades de iconos de los cuatro paquetes nativos se están pasando ahora al modelo de una familia por estado; hasta que el README de un paquete lo describa, cuenta con que ese paquete lea una sola familia.