Ir al contenido

Espaciado y formas

Definidas en ui/theme/Dimens.kt, son los únicos dos objetos de constantes de diseño que se usan en todo el proyecto en lugar de valores .dp sueltos.

object Spacing {
val xs = 4.dp
val sm = 8.dp
val md = 12.dp
val lg = 16.dp
val xl = 24.dp
val xxl = 48.dp
val xxxl = 64.dp
}
Token Valor Uso típico
xs 4dp separación entre título y subtítulo de un empty state
sm 8dp separación entre chip de clase e ícono, padding de chip
md 12dp padding horizontal entre elementos de una fila de stats
lg 16dp padding estándar de pantalla / tarjetas
xl 24dp padding horizontal del reveal de estadísticas
xxl / xxxl 48dp / 64dp espacios grandes (poco usados actualmente)
object Radius {
val xs = 4.dp
val sm = 8.dp
val md = 12.dp
val lg = 16.dp
val xl = 24.dp
}
Token Valor Uso típico
xs 4dp —
sm 8dp campos de texto (AppFieldShape), chips, swatches de color
md 12dp tarjetas compactas de la Gallery, botón de eliminar
lg 16dp —
xl 24dp la carta coleccionable completa (CardArtwork, CardWithQuickInfo)

AppShapes — el Shapes global de Material 3

Sección titulada «AppShapes — el Shapes global de Material 3»

Radius no sólo se usa manualmente: también alimenta el Shapes global del tema, así que cualquier componente de Material 3 que no fije una forma explícita (menús, diálogos, tarjetas por defecto) hereda automáticamente esta escala en vez de los radios por defecto de Material:

val AppShapes = Shapes(
extraSmall = RoundedCornerShape(Radius.xs),
small = RoundedCornerShape(Radius.sm),
medium = RoundedCornerShape(Radius.md),
large = RoundedCornerShape(Radius.lg),
extraLarge = RoundedCornerShape(Radius.xl),
)
// aplicado en Act4RacingCardsTheme:
MaterialTheme(colorScheme = RacingColorScheme, typography = Typography, shapes = AppShapes, ...)

Radius.xs — 4dp

Radius.sm — 8dp

Radius.md — 12dp

Radius.lg — 16dp

Radius.xl — 24dp