State

Abrir en ChatGPT

Los tokens de estado definen cómo los componentes responden visualmente a la interacción del usuario, como cuando están deshabilitados o enfocados. Estas variables ayudan a garantizar un comportamiento y un estilo consistentes en todos los elementos de la interfaz de usuario, y se pueden personalizar fácilmente para que coincidan con su sistema de diseño.

Estado deshabilitado

Las propiedades del estado deshabilitado se utilizan para hacer que un elemento parezca visiblemente inactivo y no interactivo.

La opacidad se adapta al tema actual para una visibilidad óptima tanto en modos claros como oscuros.

Ejemplo

input:disabled {
  opacity: var(--dwc-disabled-opacity);
  cursor: var(--dwc-disabled-cursor);
}

Variables

Variable	Valor predeterminado	Descripción
--dwc-disabled-opacity	Se adapta al modo claro/oscuridad	Opacidad reducida para elementos deshabilitados
--dwc-disabled-cursor	var(--dwc-cursor-disabled)

---

Estado enfocado

Cuando un componente recibe enfoque, se muestra un anillo de enfoque a su alrededor para indicar su estado activo. El anillo de enfoque utiliza un patrón de anillo con un hueco de color de superficie en el interior y un anillo coloreado en el exterior.

Variables

Variable	Valor predeterminado	Descripción
--dwc-focus-ring-a	0.75	Opacidad alfa del anillo de enfoque
--dwc-focus-ring-width	2px	Grosor del anillo de enfoque
--dwc-focus-ring-gap	2px	Hueco entre el borde del componente y el anillo

Cada paleta de colores genera su propia variable de anillo de enfoque:

Patrón de variable	Descripción
--dwc-focus-ring-{name}	Sombra del anillo de enfoque teñida con el color de la paleta.

Donde {name} es uno de: primary, success, warning, danger, info, gray, default. Consulte Temas de componentes para más detalles.

---

Escalas

Las transformaciones de escala se utilizan para las animaciones de retroalimentación de presión/clic en elementos interactivos.

Variable	Valor predeterminado	Descripción
--dwc-scale-press	0.97	Escala de presión estándar (reducción del 3%)
--dwc-scale-press-deep	0.93	Escala de presión profunda (reducción del 7%)