Preajustes

Tanrei incluye su sistema predeterminado, tanrei, y tres preajustes: m3-like, m3-expressive-like y cupertino. Un preajuste es una capa de sistema de diseño como la que escribirías tú: da a los componentes de Tanrei los valores de otro sistema de diseño y decide qué componentes, y qué valores de su variant, tiene. Úsalo tal cual o como punto de partida de tu propio sistema de diseño.

Usar un preajuste en la web

Carga los tokens y después la hoja de estilos del preajuste. Sus tokens se aplican donde está su atributo.
```
import '@tanrei/web/tokens.css';
import '@tanrei/web/systems/m3-like.css';
```
Pon el atributo en <html> o en cualquier parte de la página: en una página pueden convivir varios sistemas.
```
<html data-tanrei-system="m3-like">
```
Registra los componentes del preajuste con su entrada, en lugar de @tanrei/web. Registra los componentes que tiene el preajuste y ningún otro.
```
import '@tanrei/web/m3-like';
```
Carga sus fuentes con los nombres de familia que usan sus tokens, que se listan abajo. Tanrei no incluye archivos de fuentes: consulta Fuentes.

Lo que tiene un preajuste figura en su manifiesto de componentes, @tanrei/web/systems/<id>.components.json, que leen los editores y los agentes de programación. En este sitio, elige un sistema de diseño junto a la lista de componentes o en la parte superior de la barra lateral, y las listas muestran solo lo que tiene ese sistema.

Los preajustes

Los datos de cada preajuste que siguen se leen de su capa, de sus tokens resueltos y de su manifiesto de componentes.

m3-like

Hoja de estilos: @tanrei/web/systems/m3-like.css
Atributo: data-tanrei-system="m3-like"
Componentes: 96, registrados por @tanrei/web/m3-like
Texto: Roboto, system-ui, sans-serif — carga Roboto (@fontsource-variable/roboto)
Código: Roboto Mono, ui-monospace, monospace — carga Roboto Mono (@fontsource-variable/roboto-mono)
Iconos: Material Symbols Outlined — carga Material Symbols Outlined (@fontsource-variable/material-symbols-outlined)
Además del sistema predeterminado: FAB menu, Segmented button
No están en él: ninguno
Valores de variante además del sistema predeterminado: filled, outlined: Chip field, Color field, Color input, Combobox, Combobox field, Number field, Number input, Select, Select field, Text field, Text input
Valores de variante que deja fuera: filled: Navigation bar · tonal: Tabs

Generado a partir de tokens/systems/m3-like.system.json, tokens/generated/m3-like/components.json

m3-expressive-like

Hoja de estilos: @tanrei/web/systems/m3-expressive-like.css
Atributo: data-tanrei-system="m3-expressive-like"
Componentes: 96, registrados por @tanrei/web/m3-expressive-like
Texto: Roboto, system-ui, sans-serif — carga Roboto (@fontsource-variable/roboto)
Código: Roboto Mono, ui-monospace, monospace — carga Roboto Mono (@fontsource-variable/roboto-mono)
Iconos: Material Symbols Outlined — carga Material Symbols Outlined (@fontsource-variable/material-symbols-outlined)
Además del sistema predeterminado: FAB menu, Segmented button
No están en él: ninguno
Valores de variante además del sistema predeterminado: filled, outlined: Chip field, Color field, Color input, Combobox, Combobox field, Number field, Number input, Select, Select field, Text field, Text input
Valores de variante que deja fuera: filled: Navigation bar · tonal: Tabs

Generado a partir de tokens/systems/m3-expressive-like.system.json, tokens/generated/m3-expressive-like/components.json

cupertino

Hoja de estilos: @tanrei/web/systems/cupertino.css
Atributo: data-tanrei-system="cupertino"
Componentes: 95, registrados por @tanrei/web/cupertino
Texto: -apple-system, BlinkMacSystemFont, system-ui, Inter, sans-serif — carga Inter (@fontsource-variable/inter)
Código: ui-monospace, SF Mono, Menlo, monospace — las fuentes propias de la plataforma
Iconos: Material Symbols Rounded — carga Material Symbols Rounded (@fontsource-variable/material-symbols-rounded)
Además del sistema predeterminado: Segmented button
No están en él: FAB menu (usa Main action button, Bottom sheet en su lugar)
Valores de variante además del sistema predeterminado: filled, outlined: Chip field, Color field, Color input, Combobox, Combobox field, Number field, Number input, Select, Select field, Text field, Text input
Valores de variante que deja fuera: filled: Navigation bar

Generado a partir de tokens/systems/cupertino.system.json, tokens/generated/cupertino/components.json

Llevar un componente de un preajuste a tu propio sistema

Un componente que tiene un preajuste y no el sistema predeterminado —el menú FAB de m3-like, o el botón segmentado— no queda fuera del alcance de un producto sobre el sistema predeterminado. Escribe una capa que extienda tanrei, incluye en ella el componente e importa su propio módulo. El componente se dibuja entonces con los tokens de tu sistema: sus tokens apuntan a los de tu sistema, así que un menú FAB llevado de esta forma se ve como el resto de tu producto, y no viene ninguno de los valores del preajuste.

Incluye el componente en tu capa (design/acme.system.json; consulta Tu propio sistema de diseño). Un componente que vive en la capa de un preajuste nombra esa capa (from); uno que el sistema predeterminado deja fuera se nombra solo.
```
{
  "id": "acme",
  "extends": "tanrei",
  "components": {
    "include": [{ "name": "fab-menu", "from": "m3-like" }, "segmented-button"]
  }
}
```
Compila. npx tanrei build escribe la hoja de estilos de tu sistema, con los tokens de los componentes incluidos valorados a partir de los tuyos, y tu manifiesto de componentes, que los lista.

Carga tu hoja de estilos, pon tu atributo y registra los componentes del sistema predeterminado y los que llevaste.

import '@tanrei/web/tokens.css';
import './styles/acme.css';
import '@tanrei/web';
import '@tanrei/web/components/fab-menu';
import '@tanrei/web/components/segmented-button';

<html data-tanrei-system="acme">

Un componente usado bajo un sistema que no lo tiene se dibuja igualmente, y lo indica en la consola de una compilación de desarrollo. La página de cada componente dice qué sistemas lo tienen y qué usan los demás en su lugar.

Código fuente e incidencias en GitHub