🔘 Alpura Design System - Sistema de Botones

Esta documentación define el uso y la implementación de los botones para el Design System de Alpura, integrando Angular Material 19 con tokens de diseño personalizados.

---

📐 Escala de Tamaños

Contamos con una escala amplia para adaptarnos a diferentes contextos de interfaz, desde tablas densas hasta landing pages.

Clase	Altura	Font Size	Border Radius	Uso Sugerido
.alp-btn-sm	32px	12px	4px	Tablas y espacios reducidos.
.alp-btn-md	40px	14px	6px	Tamaño estándar por defecto.
.alp-btn-lg	44px	16px	8px	Formularios destacados.
.alp-btn-xl	48px	16px	8px	Modales y secciones amplias.
.alp-btn-2xl	56px	18px	10px	CTAs principales.
.alp-btn-3xl	64px	20px	12px	Hero sections.

---

🎭 Jerarquías y Variantes

Los botones se dividen por color de marca y estilo visual (Solid, Ghost, Link).

1. Solid (Primary / Secondary / Tertiary)

Utilizados para las acciones principales. Tienen un relleno sólido y cambian de tono en hover/active.

• Primary: .alp-btn-primary-solid
• Secondary: .alp-btn-secondary-solid
• Tertiary: .alp-btn-tertiary-solid

2. Ghost (Delineados)

Para acciones secundarias o de menor énfasis. Utilizan el color de la marca solo en el borde y texto.

• Clases: .alp-btn-[color]-ghost
• Comportamiento: Al hacer hover, se activa un fondo "light" de la marca.

3. Link (Estilo Texto)

Utilizados para navegación o acciones discretas dentro de párrafos.

• Clases: .alp-btn-[color]-link
• Visual: Texto subrayado que hereda el color de marca seleccionado.

---

🏗️ Implementación en HTML

Para asegurar la compatibilidad con Angular Material 19, se deben combinar las directivas de Material con nuestras clases de utilidad.

<button mat-flat-button class="alp-btn-primary-solid alp-btn-md">
  Confirmar
</button>

<button mat-stroked-button class="alp-btn-secondary-ghost alp-btn-lg">
  Cancelar
</button>

<button mat-flat-button class="alp-btn-primary-solid alp-btn-icon alp-btn-md">
  <mat-icon>add</mat-icon>
</button>

---

🔘 Botones de Icono (.alp-btn-icon)

Diseñados para ser perfectamente circulares y centrados.

• Requisito: Aplicar la clase .alp-btn-icon junto con un tamaño (sm, md, lg, etc.).
• Aspect Ratio: 1:1 automático.
• Centrado: Alineación interna optimizada para mat-icon.

---

🚫 Estado Deshabilitado

El estado :disabled está estandarizado para todos los botones para cumplir con criterios de accesibilidad y claridad visual:

• Fondo: #A8A8A8
• Texto: #4A4A4A
• Cursor: not-allowed

---

🛠️ Notas para Desarrolladores

• Transiciones: Todos los botones incluyen una transición suave de 0.2s ease-in-out para cambios de estado.
• Especificidad: Se utilizan selectores MDC (Material Design Components) para asegurar que los estilos de Alpura sobrescriban los valores por defecto de Material.
• Mixins: Si necesitas crear una variante nueva, utiliza los mixins internos:
  • @include alp-btn-solid-variant('nombre');
  • @include apply-alp-btn-size($alto, $font, $padding);
• Tip: Siempre verifica que el contraste del texto sobre el fondo del botón sea legible. Las clases .bg-* aplican texto blanco por defecto por esta razón.