🎨 Sistema de Diseño Centralizado

Todos los estilos y componentes en un lugar para mantener consistencia

🔘 Botones

Sólidos

Outline

Tamaños

Estados

📋 Cards

📝 Cómo Usar

1. Importar en tu componente

import Button from '../ui/Button.svelte';
import { getButtonClasses, animations } from '../lib/theme';
import { cn, formatPrice } from '../lib/utils';

2. Usar en tu template

<Button variant="primary" size="lg" outline={true}>
  ¡Cotiza Ahora!
</Button>

<Card 
  variant="success"
  icon="💰"
  title="Precio: {formatPrice(1500)}"
  description="Card con precio formateado"
/>

3. Clases manuales con helper functions

const buttonClass = getButtonClasses('primary', true); // outline button
const cardClass = getCardClasses('success', true);     // animated card
const combinedClass = cn(buttonClass, 'mt-4', isActive && 'ring-2');

✨ Beneficios

🎯

Consistencia

Todos los componentes usan los mismos colores y estilos

🚀

Productividad

No reinventes la rueda, usa funciones ya creadas

🔧

Mantenimiento

Cambia un color en theme.ts y se aplica en toda la app