Implementación de temas mult marca con variables CSS

La creación de temas para varias marcas asigna un único conjunto de tokens de alias de componentes a distintos valores de tokens globales para cada marca. Los componentes hacen referencia a tokens de alias; los archivos de tema de cada marca reasignan los alias a valores globales específicos de la marca.

Defina los tokens globales en :root: todos los valores de color sin procesar, los valores de espaciado y los valores tipográficos. Esta es la marca predeterminada. Los componentes nunca hacen referencia directamente a los valores globales; siempre lo hacen a través de alias.

Los tokens de alias hacen referencia a los valores globales mediante var(): --color-action: var(--color-brand-primary). Los componentes usan --color-action. Cambiar el significado de --color-brand-primary modifica todo el sistema.

Aplique los temas de marca con una clase en html o en un elemento contenedor. Cada clase de tema reemplaza los tokens globales dentro del ámbito de esa marca. Los componentes dentro del contenedor heredan automáticamente los valores de la marca.

El modo oscuro es una variante de tema: una clase o consulta de medios que reemplaza los tokens de color. Use prefers-color-scheme para el valor predeterminado del sistema operativo y una clase .dark para que el usuario lo sobrescriba. Ambos modifican los mismos tokens de alias.

Las propiedades personalizadas de CSS siguen la cascada y se heredan. Un tema aplicado a un elemento contenedor afecta a todos sus descendientes. Los temas anidados reemplazan a los temas externos en el nivel del contenedor, lo que resulta útil para escenarios en los que un widget dentro de una página tiene su propio tema.

Asegúrese de que los tokens de alias estén siempre definidos. Si falta una clase de tema, el alias debe recurrir correctamente a un valor predeterminado. Use la sintaxis de valores de respaldo de CSS var(): var(--color-action, #3b82f6) para evitar texto invisible o fondos ausentes.

Style Dictionary puede generar archivos CSS de tema separados a partir de un JSON de tokens. El paso de compilación genera theme-brand-a.css y theme-brand-b.css. Cargue el archivo adecuado en tiempo de ejecución o compílelo en bundles separados para cada marca.

Escriba pruebas de regresión visual que representen cada componente en cada tema. Percy y Chromatic capturan capturas de pantalla para cada variante de tema. Las pruebas visuales automatizadas detectan regresiones cuando los valores de los tokens globales cambian inesperadamente.

Alterne las clases de tema con JavaScript: document.documentElement.classList.replace("theme-a", "theme-b"). Las variables CSS se actualizan al instante sin volver a representar los componentes; no es necesario volver a representar React ni recalcular los valores estáticos de los estilos.

Las variables CSS se resuelven en el momento del pintado; cambiar una variable raíz provoca el repintado de todos los elementos que la usan. Limite los cambios de variables globales a las interacciones del usuario, como alternar el tema, y no a bucles de animación. Use transiciones de propiedades individuales para los efectos de tematización animados.

¿Cómo permiten los temas basados en propiedades personalizadas de CSS cambiar de marca sin modificar el CSS de los componentes?

La creación de temas para varias marcas separa los valores globales de tokens sin procesar de los tokens de alias semánticos. Las clases de tema reemplazan los valores globales dentro del ámbito de un contenedor. Los componentes que hacen referencia a alias reflejan automáticamente el tema de marca activo, lo que permite cambiar de marca en tiempo de ejecución sin modificar el código de los componentes.