Guía de personalización

Personalización completa

Astro Lite está diseñado para ser fácil de personalizar. Aquí te mostramos cómo.

Cambiar tipografía

Edita los tokens de tipografía en src/styles/tokens/typography.css:

:root {
  --text-base: clamp(1rem, 0.925rem + 0.375vw, 1.0625rem);
  /* Ajusta los valores clamp() para cambiar el tamaño base */
}

Agregar nuevos temas

1. Crea un archivo CSS en src/styles/themes/
2. Define los tokens de color para light y dark mode
3. Importa el archivo en global.css
4. Agrega el tema a themes.config.ts

Agregar nuevas páginas

1. Crea un archivo .astro en src/pages/
2. Usa BaseLayout como wrapper
3. Agrega el link a la navegación en nav.config.ts

Personalizar componentes

Los componentes usan CVA (Class Variance Authority) para manejar variantes. Cada componente tiene un archivo *.variants.ts donde puedes agregar o modificar estilos.

Ejemplo de Button:

// button.variants.ts
export const buttonVariants = cva(
  'inline-flex items-center justify-center...',
  {
    variants: {
      variant: {
        primary: 'bg-primary text-primary-foreground...',
        // Agrega tu variante personalizada
        gradient: 'bg-gradient-to-r from-brand-500 to-brand-700...',
      },
    },
  }
);

Tips

• Usa los design tokens (var(--color-brand-500)) en lugar de colores hardcodeados
• Los componentes son modulares: importa solo lo que necesites
• El dark mode funciona automáticamente con los tokens semánticos