Skip to content
Gallery
plural
Plural DS
Share
Explore
Theming

Semantic color

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
info
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.
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.