Bordes

Los tokens de bordes definen valores consistentes para anchos, radios y colores de bordes en todo el sistema de diseño.

Border Radius (Radio de Borde)

Valores para esquinas redondeadas, desde sutiles hasta completamente circulares:

Token	Valor	Uso
`border-radius-none`	0	Sin redondeo
`border-radius-sm`	2px	Sutil, elementos pequeños
`border-radius-md`	4px	Predeterminado, inputs, badges
`border-radius-chip`	6px	Chips, tokens, pills pequeños
`border-radius-lg`	8px	Tarjetas, contenedores
`border-radius-button`	14px	Botones estándar
`border-radius-xl`	16px	Elementos grandes
`border-radius-2xl`	24px	Modales, drawers
`border-radius-full`	9999px	Forma de píldora (pill)
`border-radius-circle`	50%	Círculos perfectos (avatares, íconos)

Diferencia entre full y circle

border-radius-full (9999px): Para formas de píldora con ancho/alto diferentes (botones largos)
border-radius-circle (50%): Para círculos perfectos donde ancho = alto (avatares, badges redondos)

Border Width (Ancho de Borde)

Anchos estándar para bordes:

Token	Valor	Uso
`border-width-none`	0	Sin borde
`border-width-thin`	1px	Bordes sutiles, predeterminado
`border-width-medium`	2px	Énfasis moderado, inputs focus
`border-width-thick`	4px	Énfasis fuerte, bordes decorativos

Border Color (Color de Borde)

Colores de borde con soporte para modo claro y oscuro:

Modo claro: --border-color - rgba(0, 0, 0, 0.08)
Atajo completo: --border - 1px solid rgba(0, 0, 0, 0.08) en modo claro. Es un shorthand completo (ancho, estilo y color), no un color.
Modo oscuro: con body.scheme-dark la variable --border pasa a 1px solid rgb(255 255 255 / 8%). El token SCSS $border-color-dark (rgba(255, 255, 255, 0.145)) existe, pero --border-color no cambia con el tema.

No mezcles --border con otras partes del shorthand

border: var(--border-width-medium) solid var(--border) se expande a 2px solid 1px solid ... y el navegador descarta la declaración. Usa var(--border) solo, o var(--border-width-*) solid var(--border-color).

Qué existe como variable CSS

$border-radius-none y $border-width-none son tokens SCSS; en CSS usa 0 o border: none. Los radios sm, md, chip, lg, button, xl, 2xl, full y circle y los anchos thin, medium y thick sí se exportan como variables CSS.

Uso

CSS/HTML
Angular
Flutter

Variables CSS

:root {
  /* Border Radius */
  --border-radius-sm: 2px;
  --border-radius-md: 4px;
  --border-radius-chip: 6px;
  --border-radius-lg: 8px;
  --border-radius-button: 14px;
  --border-radius-xl: 16px;
  --border-radius-2xl: 24px;
  --border-radius-full: 9999px;
  --border-radius-circle: 50%;
  
  /* Border Width */
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 4px;
  
  /* Border Color */
  --border-color: rgba(0, 0, 0, 0.08);
  --border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Modo oscuro */
body.scheme-dark {
  --border: 1px solid rgb(255 255 255 / 8%);
}

Ejemplos de uso

/* Tarjeta con bordes redondeados */
.card {
  border: var(--border-width-thin) solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-md);
}

/* Input con focus */
.input {
  border: var(--border-width-thin) solid var(--border-color);
  border-radius: var(--border-radius-md);
}

.input:focus {
  border-width: var(--border-width-medium);
  border-color: var(--color-natura);
}

/* Botón con forma redondeada */
.bttn {
  border: none;
  border-radius: var(--border-radius-button);
  height: var(--spacing-button);
}

/* Avatar circular */
.avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--border-radius-circle);
  border: var(--border-width-thin) solid var(--border-color);
}

/* Badge en forma de píldora */
.badge {
  border-radius: var(--border-radius-full);
  padding: 4px 12px;
}

/* Chip pequeño */
.chip {
  border-radius: var(--border-radius-chip);
  padding: 2px 8px;
  border: var(--border-width-thin) solid var(--border-color);
}

/* Modal con bordes grandes */
.modal {
  border-radius: var(--border-radius-2xl);
  border: var(--border-width-thin) solid var(--border-color);
}

Variables CSS

:root {
  /* Border Radius */
  --border-radius-sm: 2px;
  --border-radius-md: 4px;
  --border-radius-chip: 6px;
  --border-radius-lg: 8px;
  --border-radius-button: 14px;
  --border-radius-xl: 16px;
  --border-radius-2xl: 24px;
  --border-radius-full: 9999px;
  --border-radius-circle: 50%;
  
  /* Border Width */
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 4px;
  
  /* Border Color */
  --border-color: rgba(0, 0, 0, 0.08);
  --border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Modo oscuro */
body.scheme-dark {
  --border: 1px solid rgb(255 255 255 / 8%);
}

Ejemplos de uso

// En estilos de componente
@Component({
  selector: 'app-card',
  styles: [`
    .card {
      border: var(--border-width-thin) solid var(--border-color);
      border-radius: var(--border-radius-lg);
      padding: var(--spacing-md);
    }
    
    .avatar {
      width: 40px;
      height: 40px;
      border-radius: var(--border-radius-circle);
    }
  `]
})
export class CardComponent {}

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

.my-card {
  // Usar variables SCSS directamente
  border: tdn.$border-width-thin solid tdn.$border-color;
  border-radius: tdn.$border-radius-lg;
  padding: tdn.$spacing-md;
  
  &:hover {
    border-width: tdn.$border-width-medium;
    border-color: tdn.$color-natura;
  }
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: tdn.$border-radius-circle;
}

.bttn {
  border: none;
  border-radius: tdn.$border-radius-button;
  height: tdn.$spacing-button;
}

// O usar CSS variables
.other-component {
  border: var(--border-width-thin) solid var(--border-color);
  border-radius: var(--border-radius-md);
}

Definir Bordes

import 'package:flutter/material.dart';

class TiendanaBorders {
  // Border Radius
  static const BorderRadius radiusNone = BorderRadius.zero;
  static const BorderRadius radiusSm = BorderRadius.all(Radius.circular(2));
  static const BorderRadius radiusMd = BorderRadius.all(Radius.circular(4));
  static const BorderRadius radiusChip = BorderRadius.all(Radius.circular(6));
  static const BorderRadius radiusLg = BorderRadius.all(Radius.circular(8));
  static const BorderRadius radiusButton = BorderRadius.all(Radius.circular(14));
  static const BorderRadius radiusXl = BorderRadius.all(Radius.circular(16));
  static const BorderRadius radiusXl2 = BorderRadius.all(Radius.circular(24));
  static const BorderRadius radiusFull = BorderRadius.all(Radius.circular(9999));
  
  // Radius values para ShapeDecoration
  static const double radiusCircle = 9999; // Usa con shape: CircleBorder()
  
  // Border Width
  static const double widthNone = 0;
  static const double widthThin = 1.0;
  static const double widthMedium = 2.0;
  static const double widthThick = 4.0;
  
  // Border Color
  static const Color borderColor = Color(0x14000000); // rgba(0, 0, 0, 0.08)
  static const Color borderColorDark = Color(0x25FFFFFF); // rgba(255, 255, 255, 0.145)
  
  // Border helper
  static Border border({double width = widthThin, Color? color}) {
    return Border.all(
      width: width,
      color: color ?? borderColor,
    );
  }
}

Ejemplos de uso

// Tarjeta con bordes redondeados
Container(
  decoration: BoxDecoration(
    border: TiendanaBorders.border(),
    borderRadius: TiendanaBorders.radiusLg,
  ),
  padding: EdgeInsets.all(TiendanaSpacing.md),
  child: Text('Contenido'),
)

// Input con borde
TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(
      borderRadius: TiendanaBorders.radiusMd,
      borderSide: BorderSide(
        width: TiendanaBorders.widthThin,
        color: TiendanaBorders.borderColor,
      ),
    ),
    focusedBorder: OutlineInputBorder(
      borderRadius: TiendanaBorders.radiusMd,
      borderSide: BorderSide(
        width: TiendanaBorders.widthMedium,
        color: TiendanaColors.natura,
      ),
    ),
  ),
)

// Avatar circular
Container(
  width: 40,
  height: 40,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    border: TiendanaBorders.border(),
    image: DecorationImage(
      image: NetworkImage('avatar.jpg'),
      fit: BoxFit.cover,
    ),
  ),
)

// Botón con bordes redondeados
ElevatedButton(
  style: ElevatedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: TiendanaBorders.radiusButton,
    ),
    minimumSize: Size(0, TiendanaSpacing.button),
  ),
  onPressed: () {},
  child: Text('Botón'),
)

// Badge en forma de píldora
Container(
  decoration: BoxDecoration(
    borderRadius: TiendanaBorders.radiusFull,
    color: TiendanaColors.natura,
  ),
  padding: EdgeInsets.symmetric(
    horizontal: 12,
    vertical: 4,
  ),
  child: Text('Badge'),
)

// Chip pequeño
Container(
  decoration: BoxDecoration(
    borderRadius: TiendanaBorders.radiusChip,
    border: TiendanaBorders.border(),
  ),
  padding: EdgeInsets.symmetric(
    horizontal: 8,
    vertical: 2,
  ),
  child: Text('Chip'),
)

Patrones Comunes

Por Tipo de Componente

Inputs/Campos: border-radius-md (4px)
Botones: border-radius-button (14px)
Tarjetas: border-radius-lg (8px)
Modales/Drawers: border-radius-2xl (24px)
Chips pequeños: border-radius-chip (6px)
Badges: border-radius-full (9999px)
Avatares: border-radius-circle (50%)

Por Nivel de Énfasis

Sutil: border-width-thin (1px) - Uso general
Moderado: border-width-medium (2px) - Focus, hover
Fuerte: border-width-thick (4px) - Decorativo, destacado

Guías de Uso

✅ Mejores Prácticas

Usa border-radius-circle para elementos cuadrados (width = height)
Usa border-radius-full para formas de píldora (width > height)
Mantén consistencia en componentes similares
Usa border-width-thin como predeterminado
Combina con tokens de color y espaciado

❌ Evita

Mezclar valores hardcodeados con tokens
Usar border-radius-circle en elementos no cuadrados
Bordes excesivamente gruesos sin propósito
Radios inconsistentes en componentes relacionados

Accesibilidad

Bordes visibles ayudan a definir áreas interactivas
Usa border-width-medium o mayor para estados de focus
Mantén contraste suficiente entre borde y fondo
Los bordes de focus deben ser claramente visibles (WCAG 2.4.7)

Ejemplos Visuales

Border Radius por Tamaño

/* Pequeño - Sutil */
.element-sm { border-radius: var(--border-radius-sm); } /* 2px */

/* Mediano - Estándar */
.element-md { border-radius: var(--border-radius-md); } /* 4px */

/* Grande - Tarjetas */
.element-lg { border-radius: var(--border-radius-lg); } /* 8px */

/* Extra Grande - Contenedores */
.element-xl { border-radius: var(--border-radius-xl); } /* 16px */

/* Completo - Formas especiales */
.pill { border-radius: var(--border-radius-full); } /* 9999px */
.circle { border-radius: var(--border-radius-circle); } /* 50% */

Clases de utilidad

.border (todos los lados), .border-t, .border-r, .border-b, .border-l y .border-0, con color --color-border-primary
.border-primary, .border-secondary, .border-focus y .border-transparent cambian solo el color
.rounded-sm, .rounded-md, .rounded-chip, .rounded-lg, .rounded-xl y .rounded-full, más .rounded-t-md, .rounded-r-md, .rounded-b-md y .rounded-l-md

No hay clases para 2xl, button ni circle: usa la variable CSS. Ver Utilidades CSS.

Border Radius (Radio de Borde)​

Border Width (Ancho de Borde)​

Border Color (Color de Borde)​

Uso​

Variables CSS​

Ejemplos de uso​

Variables CSS​

Ejemplos de uso​

Definir Bordes​

Ejemplos de uso​

Patrones Comunes​

Por Tipo de Componente​

Por Nivel de Énfasis​

Guías de Uso​

✅ Mejores Prácticas​

❌ Evita​

Accesibilidad​

Ejemplos Visuales​

Border Radius por Tamaño​

Clases de utilidad​

Border Radius (Radio de Borde)

Border Width (Ancho de Borde)

Border Color (Color de Borde)

Uso

Variables CSS

Ejemplos de uso

Variables CSS

Ejemplos de uso

Definir Bordes

Ejemplos de uso

Patrones Comunes

Por Tipo de Componente

Por Nivel de Énfasis

Guías de Uso

✅ Mejores Prácticas

❌ Evita

Accesibilidad

Ejemplos Visuales

Border Radius por Tamaño

Clases de utilidad