@lumaui/tokens 0.3.2 → 0.4.1

package/README.md

@@ -2,44 +2,148 @@
 
 Design tokens do Luma UI - Neo-Minimal para Tailwind CSS v4.
 
+## ⚠️ Breaking Change in v0.4.1
+
+**Simplificação completa!** Agora `luma.css` já inclui tudo o que você precisa.
+
+### Migration Guide
+
+**Before (v0.4.0):**
+
+```css
+@import 'tailwindcss'; /* Manual */
+@import '@lumaui/tokens/build/luma.css';
+@import '@lumaui/tokens/build/luma-dark.css';
+```
+
+**After (v0.4.1+):**
+
+```css
+/* MUITO MAIS SIMPLES! */
+@import '@lumaui/tokens/build/luma.css'; /* Inclui tudo */
+@import '@lumaui/tokens/build/luma-dark.css'; /* Tema escuro */
+```
+
+**O que mudou?**
+
+- ✅ `luma.css` agora importa Tailwind CSS automaticamente
+- ✅ `luma.css` agora inclui @source para descoberta de classes
+- ✅ Zero configuração necessária
+- ✅ Funciona imediatamente após importar
+
 ## Instalação
 
 ```bash
 npm install @lumaui/tokens @lumaui/angular tailwindcss@next @tailwindcss/postcss@next
 ```
 
-## Uso
+## Uso Básico
 
-### Setup Básico
+### Importar no seu CSS
 
-**1. Configure PostCSS:**
+```css
+/* styles.css */
 
-```javascript
-// postcss.config.mjs
-export default {
-  plugins: {
-    '@tailwindcss/postcss': {},
-  },
-};
+/* Design tokens (tema light + classes dos componentes) */
+@import '@lumaui/tokens/build/luma.css';
+
+/* Opcional: Suporte a tema escuro */
+@import '@lumaui/tokens/build/luma-dark.css';
 ```
 
-**2. Importe tokens no CSS:**
+**O que está incluído no `luma.css`:**
+
+- ✅ Tailwind CSS v4 base (`@import 'tailwindcss'`)
+- ✅ 45 design tokens no bloco `@theme`
+- ✅ Manifesto de classes dos componentes (`@source`)
+- ✅ Descoberta automática de 99 classes
+
+**Bundle de conveniência:**
 
 ```css
-@import '@lumaui/tokens/luma.css';
-@import '@lumaui/tokens/luma-dark.css';
+/* Importa light + dark em um arquivo */
+@import '@lumaui/tokens/build/luma-complete.css';
 ```
 
-**3. Use as classes:**
+---
+
+### Opções de Uso
+
+#### Opção A: Imports Individuais (Recomendado)
+
+```css
+@import '@lumaui/tokens/build/luma.css'; /* Tema light + classes */
+@import '@lumaui/tokens/build/luma-dark.css'; /* Tema escuro */
+```
+
+**Vantagens:**
+
+- Controle granular (pode omitir dark theme se não usar)
+- Carregamento condicional via media query
+- Melhor para produção
+
+#### Opção B: Bundle Completo (Simples)
+
+```css
+@import '@lumaui/tokens/build/luma-complete.css'; /* Tudo junto */
+```
+
+**Vantagens:**
+
+- Um único import
+- Mais simples para protótipos
+- Fácil de copiar/colar
+
+---
+
+### Verificar se Funciona
+
+Após configurar, verifique se as classes dos componentes foram incluídas:
+
+```bash
+# Build do projeto
+npm run build
+
+# Verificar se as classes Luma estão no CSS final
+grep "bg-primary" dist/styles.css
+# Esperado: Várias correspondências (bg-primary, hover:bg-primary/90, etc.)
+```
+
+Se você vê as classes, está funcionando corretamente! ✅
+
+---
+
+### Troubleshooting
+
+**Problema:** Componentes aparecem sem estilos
+
+**Causa:** Tailwind não descobriu as classes dos componentes
+
+**Solução:**
+
+1. Verifique se está importando `@lumaui/tokens/build/luma.css` (não apenas `@lumaui/tokens`)
+2. Verifique se o CSS compilado contém classes como `bg-primary`
+3. Certifique-se que está usando Tailwind CSS v4 (não v3)
+
+**Verificar versão do Tailwind:**
+
+```bash
+npm list tailwindcss
+# Esperado: tailwindcss@4.x.x (não 3.x.x)
+```
+
+---
+
+### Use as classes
 
 ```html
-<button class="lm-bg-primary text-white lm-rounded-md px-6 py-3">
+<button class="bg-primary text-primary-foreground rounded-md px-6 py-3">
   Continuar
 </button>
 
-<div class="lm-bg-surface-base lm-text-primary">
-  <h1 class="lm-text-lg">Título</h1>
-  <p class="lm-text-secondary">Descrição</p>
+<div class="bg-card text-card-foreground">
+  <h1 class="text-lg">Título</h1>
+  <p class="text-muted-foreground">Descrição</p>
 </div>
 ```
 

package/build/luma-complete.css

@@ -1,21 +1,19 @@
 /**
- * Luma Design System - Complete CSS
+ * Luma Design System - Complete CSS Bundle
  *
- * This file includes:
- * - All design tokens (colors, spacing, typography, etc.)
- * - All Tailwind utilities for Luma components
- * - Internal @source directive (no need to add @source in your project!)
+ * Convenience file that imports both light and dark themes.
+ * Equivalent to importing luma.css + luma-dark.css separately.
  *
  * Usage in your styles.css:
- *   @import 'tailwindcss';
- *   @import '@lumaui/tokens';
  *
- * For dark theme support, also add:
- *   @import '@lumaui/tokens/dark.css';
+ *   @import '@lumaui/tokens/build/luma-complete.css';
+ *
+ * Note: luma.css already includes @source directive for component classes.
+ * Note: luma.css already includes @import 'tailwindcss'.
  */
 
-/* Tell Tailwind to scan the component class manifest */
-@source "./luma-classes.js";
-
-/* Import all tokens and utilities */
+/* Import light theme tokens (includes Tailwind, @source, and component classes) */
 @import './luma.css';
+
+/* Import dark theme overrides */
+@import './luma-dark.css';

package/build/luma-dark.css

@@ -1,5 +1,3 @@
-@import "tailwindcss";
-
 .dark {
   /* Luma Design System - Purple Theme (Dark) */
 

package/build/luma.css

@@ -1,4 +1,7 @@
-@import "tailwindcss";
+@import 'tailwindcss';
+
+/* Component class manifest - enables automatic class discovery */
+@source "./luma-classes.js";
 
 @theme {
   /* Luma Design System - Purple Theme (Light) */

package/package.json

@@ -1,19 +1,45 @@
 {
   "name": "@lumaui/tokens",
-  "version": "0.3.2",
+  "version": "0.4.1",
   "description": "Design tokens for Luma UI - Neo-Minimal design system",
   "type": "module",
-  "main": "./build/luma-complete.css",
+  "main": "./build/luma.css",
   "exports": {
-    ".": "./build/luma-complete.css",
-    "./styles.css": "./build/luma-complete.css",
-    "./tokens": "./build/luma.css",
-    "./dark.css": "./build/luma-dark.css",
-    "./styles/dark.css": "./build/luma-dark.css",
-    "./build/luma.css": "./build/luma.css",
-    "./build/luma-dark.css": "./build/luma-dark.css",
-    "./luma.css": "./build/luma.css",
-    "./luma-dark.css": "./build/luma-dark.css"
+    ".": {
+      "style": "./build/luma.css",
+      "default": "./build/luma.css"
+    },
+    "./tokens": {
+      "style": "./build/luma.css",
+      "default": "./build/luma.css"
+    },
+    "./dark.css": {
+      "style": "./build/luma-dark.css",
+      "default": "./build/luma-dark.css"
+    },
+    "./build/luma.css": {
+      "style": "./build/luma.css",
+      "default": "./build/luma.css"
+    },
+    "./build/luma-dark.css": {
+      "style": "./build/luma-dark.css",
+      "default": "./build/luma-dark.css"
+    },
+    "./build/luma-complete.css": {
+      "style": "./build/luma-complete.css",
+      "default": "./build/luma-complete.css"
+    },
+    "./luma.css": {
+      "style": "./build/luma.css",
+      "default": "./build/luma.css"
+    },
+    "./luma-dark.css": {
+      "style": "./build/luma-dark.css",
+      "default": "./build/luma-dark.css"
+    },
+    "./classes": {
+      "default": "./build/luma-classes.js"
+    }
   },
   "files": [
     "build/",