Saltar al contenido

Tamaños, bordes y opacidad

Beta

Los altos de control, tamaños de icono, áreas táctiles, anchos de borde y opacidades que comparten todos los componentes.

Estos tokens son el esqueleto compartido de los componentes. Que un Button md y un Input md midan lo mismo no es casualidad: los dos leen control/md. Gracias a eso se pueden poner lado a lado en un formulario y alinean sin ajustes.

Alto de controles

FigmaCSSValorUso
control/sm--ds-control-sm32pxControles compactos: tablas, toolbars, filtros.
control/md--ds-control-md40pxPor defecto: Button, Input, Select.
control/lg--ds-control-lg48pxFormularios principales y mobile.
control/xl--ds-control-xl64pxCTAs de marketing y heros.
  • Misma fila, mismo tamaño. Nunca mezcles un Input md con un Button lg.
  • md es el default de producto; lg para formularios protagonistas y mobile; sm solo en UI densa (tablas, filtros); xl solo marketing.

Iconos

FigmaCSSValorUso
icon/sm--ds-icon-sm16pxControles sm y texto xs/sm.
icon/md--ds-icon-md20pxControles md. Tamaño por defecto.
icon/lg--ds-icon-lg24pxControles lg/xl y uso suelto. Grilla nativa del set.

El tamaño del icono lo decide el tamaño del control, no el gusto: sm → 16, md → 20, lg/xl → 24. Ver Iconografía.

Área interactiva

FigmaCSSValorUso
target/min--ds-target-min24pxÁrea interactiva mínima (WCAG 2.2 AA, 2.5.8).
target/touch--ds-target-touch44pxÁrea táctil recomendada en mobile.

Un control puede verse más chico que su área clickeable: un checkbox de 16 px lleva un área de 24. En mobile, apuntá a 44.

Ancho de borde

FigmaCSSValorUso
border-none--ds-border-none0pxSin borde.
border-sm--ds-border-sm1pxBorde estándar: cards, inputs, divisores.
border-md--ds-border-md1.5pxBorde con presencia: Button stroke, controles seleccionados.
border-lg--ds-border-lg2pxFocus ring y acentos (tabs activas, marcadores).

Opacidad

FigmaCSSValorUso
opacity-disabled--ds-opacity-disabled38%Componentes deshabilitados.
opacity-scrim--ds-opacity-scrim60%Velo detrás de modales y drawers.
opacity-duo--ds-opacity-duo40%Capa secundaria de los iconos Duocolor.

disabled se aplica al componente entero, no color por color: así un botón deshabilitado se ve igual en cualquier variante y tema. Un elemento deshabilitado está exento de contraste WCAG, pero explicá cerca por qué no está disponible.

En código

.field {
  height: var(--ds-control-md);
  border: var(--ds-border-sm) solid var(--border);
}
.field:disabled {
  opacity: var(--ds-opacity-disabled);
}