Color

A nivel de color, nuestro theming es capaz de describir toda la interfaz en un número acotado de variables. Además, estas variables están relacionadas entre sí para facilitar la toma de decisiones de diseño y desarrollo.

La anatomía de una variable completa del theme es la siguiente:

--familia-categoría-[-estado][-modificador]

La familia hace referencia a la agrupación de colores en cuestión:

  • primary

  • secondary

  • neutrals

  • etc.

La categoría es relativa a la propiedad que tratamos en el theming:

  • color

El estado indica el propio estado del componente:

  • default

  • hover

  • active

El estado disabled no se considera dentro de este apartado, ya que tiene su patrón propio y este aplica a toda la interfaz, en nuestro "theming" no está especificado por cada componente.

El modificador indica un cambio en el espectro de la variable:

  • contrast: aplicable a textos, iconos e incluso bordes en estado disabled.

Última actualización