Espaciado

Los tokens de espaciado definen valores de espaciado consistentes utilizados en todo el sistema de diseño para padding, márgenes y espacios entre elementos.

Escala de Espaciado

Nuestro sistema de espaciado parte de una unidad base de 8px ($spacing-base, solo SCSS) y sigue una escala consistente; spacing-xs es la mitad de la base:

Token	Valor	Uso
spacing-xs	4px	Espaciado mínimo, diseños compactos
spacing-sm	8px	Espaciado pequeño entre elementos relacionados
spacing-md	16px	Espaciado predeterminado, el más común
spacing-lg	24px	Espaciado grande entre secciones
spacing-xl	32px	Espaciado extra grande
spacing-2xl	48px	Separadores de sección
spacing-3xl	64px	Divisiones principales de diseño

Tokens Especiales

• spacing-button: 40px - Altura estándar de botones
• spacing-button-sm: 26px - Altura de botones pequeños

Uso

CSS/HTML

Variables CSS

:root {
  /* Espaciado Base */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  
  /* Espaciado Específico */
  --spacing-button: 40px;
  --spacing-button-sm: 26px;
}

Ejemplos de uso

/* Padding de tarjeta */
.card {
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

/* Grupo de botones */
.button-group {
  display: flex;
  gap: var(--spacing-sm);
}

/* Sección con separación grande */
.section {
  margin-top: var(--spacing-2xl);
  padding: var(--spacing-xl);
}

/* Botón con altura estándar */
.bttn {
  height: var(--spacing-button);
  padding: 0 var(--spacing-md);
}

/* Botón pequeño */
.bttn--small {
  height: var(--spacing-button-sm);
  padding: 0 var(--spacing-sm);
}

Angular

Variables CSS

:root {
  /* Espaciado Base */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  
  /* Espaciado Específico */
  --spacing-button: 40px;
  --spacing-button-sm: 26px;
}

Ejemplos de uso

// En estilos de componente
@Component({
  selector: 'app-card',
  styles: [`
    .card {
      padding: var(--spacing-md);
      margin-bottom: var(--spacing-lg);
    }
    
    .button-group {
      display: flex;
      gap: var(--spacing-sm);
    }
  `]
})
export class CardComponent {}

// En archivos SCSS usando tokens de WebFoundation
@use '@tiendana/web-foundation' as tdn;

.my-component {
  // Usar variables SCSS directamente
  padding: tdn.$spacing-md;
  margin-bottom: tdn.$spacing-lg;
  
  .section {
    margin-top: tdn.$spacing-2xl;
  }
  
  .button-group {
    gap: tdn.$spacing-sm;
  }
}

// O usar CSS variables
.other-component {
  padding: var(--spacing-md);
  gap: var(--spacing-sm);
}

Flutter

Definir Espaciado

class TiendanaSpacing {
  // Espaciado Base
  static const double xs = 4.0;
  static const double sm = 8.0;
  static const double md = 16.0;
  static const double lg = 24.0;
  static const double xl = 32.0;
  static const double xl2 = 48.0;
  static const double xl3 = 64.0;
  
  // Espaciado Específico
  static const double button = 40.0;
  static const double buttonSmall = 26.0;
}

Ejemplos de uso

// Padding de widget
Container(
  padding: EdgeInsets.all(TiendanaSpacing.md),
  margin: EdgeInsets.only(bottom: TiendanaSpacing.lg),
  child: Text('Contenido'),
)

// Separación entre widgets
Column(
  spacing: TiendanaSpacing.sm,
  children: [
    Text('Item 1'),
    Text('Item 2'),
  ],
)

// Sección con separación grande
Container(
  margin: EdgeInsets.only(top: TiendanaSpacing.xl2),
  padding: EdgeInsets.all(TiendanaSpacing.xl),
  child: Column(children: [...]),
)

// Botón con altura estándar
SizedBox(
  height: TiendanaSpacing.button,
  child: ElevatedButton(
    child: Text('Botón'),
    onPressed: () {},
  ),
)

// Botón pequeño
SizedBox(
  height: TiendanaSpacing.buttonSmall,
  child: ElevatedButton(
    child: Text('Pequeño'),
    onPressed: () {},
  ),
)

Patrones Comunes

Padding de Componentes

• Tarjetas: spacing-md (16px) o spacing-lg (24px)
• Modales/Drawers: spacing-lg (24px) o spacing-xl (32px)
• Botones: Horizontal spacing-md (16px), vertical automático por altura

Márgenes entre Elementos

• Elementos relacionados: spacing-sm (8px)
• Campos de formulario: spacing-md (16px)
• Secciones: spacing-xl (32px) o spacing-2xl (48px)
• Divisiones principales: spacing-3xl (64px)

Gaps en Layouts

• Botones en grupo: spacing-sm (8px)
• Grid de tarjetas: spacing-md (16px) o spacing-lg (24px)
• Columnas de contenido: spacing-xl (32px)

Guías de Uso

✅ Mejores Prácticas

• Usa tokens de espaciado en lugar de valores arbitrarios
• Mantén espaciado consistente entre elementos similares
• Usa espaciados más grandes para separar contenido no relacionado
• Prefiere gap sobre márgenes cuando uses flexbox/grid

❌ Evita

• Valores hardcodeados como padding: 15px
• Mezclar unidades (px, rem, em) sin razón
• Espaciado inconsistente entre componentes similares
• Espaciados que no son múltiplos de 4px

Espaciado Responsivo

En pantallas pequeñas, considera reducir el espaciado:

.section {
  padding: var(--spacing-xl);
}

@media (max-width: 799px) {
  .section {
    padding: var(--spacing-md);
  }
}

Accesibilidad

• Mantén suficiente espacio entre elementos interactivos (mínimo 8px)
• Los botones deben tener altura mínima de 40px para táctil (spacing-button)
• Usa espaciado consistente para ayudar a usuarios con dificultades cognitivas