chromatic

Chromatic es una herramienta para gestionar sistemas de diseño mediante la generación de archivos específicos para cada plataforma a partir de un archivo fuente que describe los design tokens. El README lo describe como un sistema de compilación para sistemas de diseño multiplataforma utilizando design tokens. Los archivos de tokens pueden contener expresiones enriquecidas en una sintaxis natural. Los ejemplos incluyen operaciones aritméticas como 18pt + 5px, unidades como 12px, funciones como rgb(), mix() y saturate(), y referencias a otros tokens. Un token llamado primary-hue puede establecerse en 210deg, primary puede definirse como hsl({primary-hue}, 100%, 40%), y primary-dark puede hacer referencia a primary con una transformación de oscurecimiento. Esto permite que las definiciones de tokens se mantengan compactas mientras expresan las relaciones entre los valores. Chromatic es compatible con temas. Cada token puede tener una variante de tema, como dark y light, o diseños compact y cozy. Los artefactos de salida necesarios se generan automáticamente. Por ejemplo, un token cta-button-background puede definir valores separados para los temas dark y light. El soporte de temas también se muestra a través de importaciones: un archivo de tema dark puede importarse en un archivo de tokens base para que la salida generada contenga tanto los valores predeterminados como los temáticos. La herramienta aspira a ser zero-conf. Un simple archivo de tokens escrito en YAML o JSON es suficiente para comenzar. Chromatic también es personalizable cuando es necesario: los usuarios pueden escribir o modificar el formato de los archivos de salida para adaptarlos a sus requisitos. Adicionalmente, está disponible como una API que puede invocarse desde un sistema de compilación. Chromatic es multiplataforma. A partir de un único archivo de tokens, puede generar artefactos específicos para la web en Sass y CSS, para iOS en formatos JSON y plist, y para Android en XML. También puede generar una guía de estilo como un archivo HTML. Las instrucciones para comenzar en el README cubren la instalación del paquete globalmente con npm install -g @arnog/chromatic, la creación de un directorio de ejemplo con chromatic example ./test, y la ejecución de chromatic ./test -o tokens.scss o chromatic ./test -o tokens.html. Los usuarios también pueden escribir su propio archivo de tokens. Un archivo tokens.yaml con valores de background y body-color puede convertirse con chromatic tokens.yaml -o tokens.scss, produciendo variables de Sass con flags predeterminados. Un archivo de tema dark puede establecer theme: dark y tokens como background y body-color, para luego ser importado en el archivo de tokens principal. La salida de CSS generada incluye propiedades personalizadas a nivel de root y un selector de tema dark con propiedades personalizadas data-theme='dark'.