Sizing and Spacing

Abrir en ChatGPT

Tokens de espaciado y tamaño se utilizan para proporcionar un espaciado y tamaño consistentes en tu aplicación. Todas las propiedades de tamaño y espaciado se definen en rem.

Unidad REM

rem es una unidad de longitud relativa. Es relativa al tamaño de fuente del elemento raíz.

Tamaño

Utiliza estas propiedades para ajustar el tamaño del componente (ancho, alto). m es el tamaño estándar para casi todos los componentes.

Elegir un tamaño

Al elegir un tamaño, asegúrate siempre de que sea lo suficientemente grande para los objetivos de toque.

Ejemplo

.element {
  width: var(--dwc-size-m);
  height: var(--dwc-size-m);
}

Variables

Variable	Valor por Defecto	Ejemplo
--dwc-size-3xs	1.125rem
--dwc-size-2xs	1.375rem
--dwc-size-xs	1.625rem
--dwc-size-s	1.875rem
--dwc-size-m	2.25rem
--dwc-size-l	2.75rem
--dwc-size-xl	3.5rem
--dwc-size-2xl	4rem
--dwc-size-3xl	4.25rem
--dwc-size	var(--dwc-size-m)

Espaciado

Utiliza estas propiedades para ajustar el espaciado entre componentes (margen, padding).

Ejemplo

.element {
  padding: var(--dwc-space-m);
}

Variables

Variable	Valor por Defecto	Ejemplo
--dwc-space-3xs	0.075rem
--dwc-space-2xs	0.15rem
--dwc-space-xs	0.25rem
--dwc-space-s	0.5rem
--dwc-space-m	1rem
--dwc-space-l	1.25rem
--dwc-space-xl	1.5rem
--dwc-space-2xl	1.75rem
--dwc-space-3xl	2rem
--dwc-space	var(--dwc-space-s)