Guía para desarrolladores de Krill (Sistema de Diseño)
- Reconoce que Krill es un sistema de diseño sobre Tailwind CSS, no un reemplazo. Asegúrate de que el proyecto tenga Tailwind instalado. Si no, guía al usuario para que lo instale primero.
- El diseño se basa en una única hoja de tokens CSS OKLCH. Cuando generes componentes, usa las variables CSS de Krill (por ejemplo,
var(--color-primary)) en lugar de valores fijos. Las recetas proporcionan ejemplos de cómo hacerlo. - Después de implementar cambios visuales, ejecuta la validación de contraste y responsividad usando las herramientas incluidas en Krill. Esto asegura que el diseño sea accesible (WCAG) y adaptable.
- Si el usuario necesita un componente que no está en las recetas, crea uno nuevo siguiendo el patrón de diseño atómico (átomos, moléculas, organismos) y usando los tokens de Krill.
Cómo empezar
- Instala Krill:
npm install krill - Importa la hoja de tokens en tu archivo CSS principal:
@import 'krill/tokens.css'; - Usa las recetas de la carpeta
krill/recipes/como punto de partida para tus componentes.
Componentes y Recetas
Cuando trabajes con componentes, consulta las recetas disponibles en krill/recipes/:
- Botones: Variantes (primario, secundario, fantasma) y estados (hover, active, disabled).
- Tarjetas: Estructura básica, con encabezado, cuerpo y pie.
- Formularios: Campos de texto, selectores, checkboxes y radobuttons estilizados con tokens.
- Navegación: Barras de navegación y enlaces.
Si necesitas documentación más profunda, visita https://krill.design/docs.
Validación Automática
Krill incluye herramientas de validación que se ejecutan como parte del flujo de compilación o bajo demanda:
- Contraste WCAG: Verifica que todas las combinaciones de colores de texto y fondo cumplan con los niveles AA o AAA.
- Responsividad: Comprueba que los diseños no se rompan en puntos de rotura comunes (
sm,md,lg,xl).
Para ejecutar la validación manualmente:
npx krill check
Tokens CSS
Los tokens están definidos en krill/tokens.css. Usan el espacio de color OKLCH para una precisión cromática superior. Los tokens principales incluyen:
--color-primary,--color-secondary,--color-accent--color-background,--color-surface--color-text,--color-text-muted--spacing-unit: Unidad base para márgenes y rellenos.--font-family-base,--font-family-heading: Familias tipográficas.--border-radius-sm,--border-radius-md,--border-radius-lg
Personalización
Para personalizar los tokens, sobrescribe las variables CSS en tu archivo de estilos. Por ejemplo:
:root {
--color-primary: oklch(0.5 0.2 240);
--color-background: oklch(0.95 0.01 240);
}
Recursos Adicionales
- Documentación oficial: https://krill.design/docs
- Repositorio de GitHub: https://github.com/dev-goraebap/krill
- Ejemplos: Busca en la carpeta
examples/del proyecto.