@kui-framework/theme

Sistema de temas KUI Framework - Design tokens, Tailwind preset e estilos globais.

📦 Instalação

npm install @kui-framework/theme tailwindcss
# or
pnpm add @kui-framework/theme tailwindcss

🚀 Setup

1. Configurar Tailwind

// tailwind.config.js
import kuiPreset from '@kui-framework/theme/tailwind';

export default {
  presets: [kuiPreset],
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/@kui-framework/**/*.{js,mjs}',
  ],
};

2. Importar Estilos Globais

/* app/globals.css */
@import '@kui-framework/theme/globals.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

🎨 Design Tokens

Cores

/* Light mode */
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--destructive: 0 84.2% 60.2%;

/* Dark mode */
[class~="dark"] {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  /* ... */
}

Espaçamentos

Usa escala padrão do Tailwind:

• spacing: 0.25rem increments
• borderRadius: sm, md, lg, xl

Tipografia

--font-sans: 'Inter', system-ui, sans-serif;

🎯 Features

• ✅ Design system completo
• ✅ Dark mode pronto
• ✅ Tailwind preset configurado
• ✅ CSS variables customizáveis
• ✅ Animações incluídas

📄 Licença

MIT © Kenny JSA