Theme Studio
Mueve unos pocos controles, observa cómo los siguen componentes reales y exporta una capa de sistema de diseño válida que puedes compilar para todas las plataformas.
Un sistema de diseño debería resultar adecuado de entrada y seguirte cuando cambias una sola cosa. El Studio es esa idea hecha tangible: elige una base, gira un dial, escoge un color, cambia un token, añade uno propio, y exporta el pequeño archivo de capa que dice exactamente qué has cambiado y nada más.
Nada de lo que contiene es una maqueta. La vista previa es un ámbito de sistema real con componentes reales, y aplica la misma hoja de estilos que tanrei build escribiría para tu capa, calculada en tu navegador por el mismo motor, el mismo emisor y las mismas comprobaciones de accesibilidad. Las pruebas del repositorio compilan capas del Studio con la cadena de la CLI y exigen que coincidan la hoja completa, cada valor de token en los seis esquemas y cada advertencia.
Muestra tu tema en cinco pantallas hechas con esos componentes —un resumen con todos los tipos de componente, un panel, un formulario de ajustes, una lista con su detalle y una página de documentación—, en claro, en oscuro o en ambos uno al lado del otro, y en cada uno de los tres niveles de contraste. Qué pantalla miras y cómo no forma parte de tu tema: nada de eso se guarda en el archivo.
La capa que estás creando se queda en este navegador y en la dirección de la página: un enlace al Studio lo abre con la misma capa. Abrir un enlace no sobrescribe la capa que guardaba el navegador: un banner sobre el Studio indica qué capa llegó con el enlace y sobre qué sistema está hecha, y el Studio conserva la tuya hasta que edites la del enlace o decidas quedártela; también puedes volver a la tuya.
La barra del Studio empieza por el punto de partida de tu capa: Tanrei, el sistema predeterminado, o un ejemplo de la galería de temas —m3-like, cupertino y m3-expressive-like—, cada uno una muestra de lo que una capa puede imitar, no el diseño oficial de ese sistema. Core, la capa raíz de Tanrei, aparece en la lista pero aún no se puede elegir: todavía tiene los valores del sistema predeterminado, y será un punto de partida en blanco cuando sean neutros. El mismo menú importa un archivo de capa en lugar de la que estás haciendo. Un archivo que el esquema rechaza no se carga, y el panel dice por qué; uno que acepta se carga, y el panel enumera lo que el motor de tokens encuentra en él. Si tu capa tiene cambios, el Studio pregunta antes de reemplazarlos, y Deshacer los recupera.
Exportar, en la barra del Studio, abre una hoja lateral con el archivo y qué hacer con él. Su primera línea dice si el esquema, el motor de tokens y las comprobaciones de la compilación aceptan el archivo. Una capa que empezó en un ejemplo de la galería de temas depende de ese ejemplo por defecto: el archivo sigue siendo pequeño y sigue al ejemplo a medida que mejora. También puedes escribir todos los valores, para que el archivo no cambie cuando cambie el ejemplo; un componente que vive en el ejemplo se sigue tomando de él. Después vienen el propio archivo, para copiarlo o descargarlo; las declaraciones de la hoja de estilos que tanrei build escribe para la web que difieren de las del sistema base, con la hoja completa para descargar; y los pasos siguientes, cada uno un comando que la CLI acepta tal cual, con un enlace para compartir la capa.
La columna de la izquierda enumera las nueve partes de un aspecto —color de marca, gris, tipo de letra, tamaño, esquinas, suavizado de esquinas, iconos, respuesta al pulsar y foco—, cada una con lo que tiene ahora y una pequeña muestra, y después el resto de lo que contiene una capa. Una fila abre sus controles en el panel de la derecha. Bloquea las filas que te gusten y Mezclar da otro valor a cada una de las demás, en un solo paso que se puede deshacer. Inspeccionar abre todos los tokens y el propio archivo de la capa sobre el panel. Cada cambio se puede deshacer y rehacer, con los botones de la barra del Studio o con ⌘Z y ⇧⌘Z (Ctrl+Z y Ctrl+Mayús+Z).
| Haces | La capa recibe |
|---|---|
| Elegir un sistema base | "extends" |
| Mover un dial | "$value" en dial.*, con un reason |
| Elegir una semilla o matiz + croma; declarar o quitar una paleta | una entrada en "palettes"; null quita una heredada |
| Fijar un tono de una paleta a un color exacto | source.tones de esa paleta: { "40": "#e60012" }; una fila nueva empieza con el color generado |
| Ordenar las familias de Brand, Plain o Mono, elegir la fuente genérica alternativa, poner primero la fuente de la plataforma | { "$value": ["IBM Plex Sans", "system-ui", "sans-serif"], "reason": "…" } en ref.typeface.* |
| Elegir el conjunto de iconos (una familia variable, o una familia por estado de selección), su peso y sus rellenos | valores $value fijados en ref.typeface.icon o sys.icon.family.*, sys.icon.weight, sys.icon.fill.* |
| Mover el control deslizante de suavizado de esquinas | { "$value": 0.6, "reason": "…" } en sys.shape.corner-smoothing: una cantidad de 0 a 1 con el significado de Figma (Forma) |
| Elegir cómo se responde a una pulsación y qué aspecto tiene el foco | { "$value": 1, "reason": "…" } en sys.behavior.*: eliges un nombre (ripple, glow); el archivo guarda su posición |
| Escalar un token | { "scale": n }: una proporción de lo que hereda, que sigue gobernada por su dial |
| Reorientar un token | { "$value": "{another.token}" } |
| Fijar un token | { "$value": …, "reason": "…" }: exento de todos los diales; no se escribe hasta que tiene un motivo |
| Sustituir una regla | { "derive": … }: un coeficiente sobre un dial, una tabla de tonos para un rol de color, mix o alpha para un estado |
| Editar las reglas de patrón | "rules": qué aspecto tienen los estados al pasar el cursor, con foco, pulsado y deshabilitado, para todos los componentes a la vez |
| Add… un tamaño o una variante, un paso en una serie, un token propio | una declaración bajo "vocabulary", con un rationale obligatorio |
Typefaces, Icons, Shape y Behaviour escriben valores fijados, y un valor fijado necesita un motivo: cada uno de los cuatro lo pide una vez, ya rellenado («Brand typeface.»), y todos los valores fijados que escribe llevan tu redacción. En el árbol de tokens de Inspeccionar, una elección de tipo se escoge por su nombre, nunca se escribe como número, y una pila de fuentes es la misma lista ordenada que en la fila Tipo de letra. Los botones de la vista previa son reales, así que ripple, dim, las esquinas suavizadas y el resplandor del foco son lo que <tanrei-button> hace de verdad con esos tokens en este navegador. La escala de tipos dibuja un título de cada tipo de letra, texto corrido, una etiqueta y código, además de cada estilo de texto que añada tu capa, y el conmutador Emphasized de la barra de la vista previa los vuelve a dibujar con el peso de su rol más el paso sys.typescale.emphasis.* de la familia, en vivo desde la hoja de estilos. Cuando una elección no dibujaría nada (dim mientras todas las opacidades de pulsado son 1, como en el sistema predeterminado), la advertencia de la propia compilación se muestra bajo el control, palabra por palabra, y el token que nombra es un enlace a su editor.
Un control que se deja en su valor base no escribe nada, así que un Studio sin tocar exporta { "id", "extends" } y se compila exactamente como el sistema base. Todo lo que puede contener una capa válida se puede editar aquí: al importar una capa no queda nada al margen.
tanrei studio sirve este Studio en local y lo apunta al archivo de capa de tu producto: las ediciones se guardan en el archivo a medida que las haces, Build ejecuta tanrei build, y cuando el archivo cambia por debajo (un editor, un git checkout), el Studio ofrece recargar o conservar lo que está abierto. Nunca sobrescribe en silencio. Solo se guarda cuando el esquema, las reglas para una cadena de capas y el motor de tokens aceptan la capa (el servidor se lo pregunta al propio motor y responde con su mensaje), de modo que el archivo en disco es siempre uno que tanrei build compila, sea cual sea el programa que lo envió. La aplicación también sirve, desde su propia dirección, los tipos de letra y las fuentes de iconos que nombran los sistemas incluidos con Tanrei (Inter, Noto Sans JP, Roboto Mono, Roboto, Material Symbols Rounded y Outlined), así que un preajuste se dibuja con sus propios tipos.
Un producto puede apilar sus propias capas: acme-app.system.json, que extiende el acme.system.json que tiene al lado. tanrei studio entrega al Studio, en modo de solo lectura, las capas que hay junto a tu archivo, y el Studio resuelve la cadena completa en el navegador exactamente como lo hace con los sistemas incluidos; cuando una capa madre cambia en disco, todo se vuelve a calcular.
En el sitio no hay ningún archivo detrás del Studio, así que aquí no se puede importar una capa que extiende otra capa tuya: ábrela con tanrei studio, que conoce los archivos que tiene al lado. El Studio nunca descarga una fuente de ningún lugar que no sea el sitio que lo sirve: una familia que ese sitio no ofrece y que tu navegador no tiene se nombra, y la vista previa muestra con honestidad la fuente alternativa. Sus pruebas de «la vista previa es igual a la compilación» comparan la hoja de estilos web, el paquete de tokens y las advertencias; las salidas nativas las genera tanrei build a partir del mismo modelo.
La herramienta de línea de comandos no recibe una capa en un comando: tanrei init empieza una capa propia, y el archivo que descargas desde Exportar ocupa su lugar.