Design System

Una librería modular de componentes CSS con variables de color personalizables.

Instalación

npm install @tuusuario/design-system

Uso

1. Importa los estilos en tu proyecto:

// Si usas un bundler (webpack, parcel, etc)
import '@tuusuario/design-system';

// O en tu HTML
<link rel="stylesheet" href="node_modules/@tuusuario/design-system/dist/index.css">

2. Usa los componentes en tu HTML:

<button class="btn btn-primary">Botón Primario</button>
<div class="card">
  <h2>Título de la tarjeta</h2>
  <p>Contenido...</p>
</div>

Personalización

Puedes sobrescribir las variables CSS para personalizar los colores y otros valores:

:root {
  --color-primary: #your-color;
  --color-secondary: #your-color;
  /* ... */
}

Componentes Disponibles

• Botones (.btn, .btn-primary, .btn-secondary)
• Tarjetas (.card)
• Campos de entrada (.input)
• Layout Grid (.layout-grid)
• Utilidades Flex (.flex, .flex-col, .gap-*)

Licencia

MIT