@lumaui/tokens 0.4.0 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +92 -49
  2. package/build/luma-complete.css +8 -13
  3. package/build/luma.css +5 -0
  4. package/package.json +37 -11
package/README.md CHANGED
@@ -2,34 +2,34 @@
2
2
 
3
3
  Design tokens do Luma UI - Neo-Minimal para Tailwind CSS v4.
4
4
 
5
- ## ⚠️ Breaking Change in v0.4.0
5
+ ## ⚠️ Breaking Change in v0.4.1
6
6
 
7
- **Luma tokens files no longer import Tailwind CSS internally.** Your project is now responsible for importing Tailwind.
7
+ **Simplificação completa!** Agora `luma.css` já inclui tudo o que você precisa.
8
8
 
9
9
  ### Migration Guide
10
10
 
11
- **Before (v0.3.x):**
11
+ **Before (v0.4.0):**
12
12
 
13
13
  ```css
14
- @import '@lumaui/tokens/build/luma.css'; /* Tailwind was included */
14
+ @import 'tailwindcss'; /* Manual */
15
+ @import '@lumaui/tokens/build/luma.css';
16
+ @import '@lumaui/tokens/build/luma-dark.css';
15
17
  ```
16
18
 
17
- **After (v0.4.0+):**
19
+ **After (v0.4.1+):**
18
20
 
19
21
  ```css
20
- /* ALWAYS import Tailwind explicitly */
21
- @import 'tailwindcss'; /* Your project's responsibility */
22
- @import '@lumaui/tokens/build/luma.css'; /* Tokens only */
23
- @import '@lumaui/tokens/build/luma-dark.css'; /* Dark theme */
22
+ /* MUITO MAIS SIMPLES! */
23
+ @import '@lumaui/tokens/build/luma.css'; /* Inclui tudo */
24
+ @import '@lumaui/tokens/build/luma-dark.css'; /* Tema escuro */
24
25
  ```
25
26
 
26
- **Why this change?**
27
- Importing Tailwind is the project's responsibility, not the design system's. This provides:
27
+ **O que mudou?**
28
28
 
29
- - ✅ Better separation of concerns
30
- - ✅ No duplicate imports
31
- - ✅ More flexibility (use any Tailwind version/config)
32
- - ✅ Clearer architecture
29
+ - ✅ `luma.css` agora importa Tailwind CSS automaticamente
30
+ - ✅ `luma.css` agora inclui @source para descoberta de classes
31
+ - ✅ Zero configuração necessária
32
+ - ✅ Funciona imediatamente após importar
33
33
 
34
34
  ## Instalação
35
35
 
@@ -37,61 +37,104 @@ Importing Tailwind is the project's responsibility, not the design system's. Thi
37
37
  npm install @lumaui/tokens @lumaui/angular tailwindcss@next @tailwindcss/postcss@next
38
38
  ```
39
39
 
40
- ## Uso
40
+ ## Uso Básico
41
41
 
42
- ### ⚠️ IMPORTANTE: Responsabilidade do Tailwind CSS
42
+ ### Importar no seu CSS
43
43
 
44
- **Luma tokens files do NOT import Tailwind CSS internally.** Your project is responsible for importing Tailwind.
44
+ ```css
45
+ /* styles.css */
45
46
 
46
- ### Setup Básico
47
+ /* Design tokens (tema light + classes dos componentes) */
48
+ @import '@lumaui/tokens/build/luma.css';
47
49
 
48
- **1. Configure PostCSS:**
50
+ /* Opcional: Suporte a tema escuro */
51
+ @import '@lumaui/tokens/build/luma-dark.css';
52
+ ```
49
53
 
50
- ```javascript
51
- // postcss.config.mjs
52
- export default {
53
- plugins: {
54
- '@tailwindcss/postcss': {},
55
- },
56
- };
54
+ **O que está incluído no `luma.css`:**
55
+
56
+ - ✅ Tailwind CSS v4 base (`@import 'tailwindcss'`)
57
+ - ✅ 45 design tokens no bloco `@theme`
58
+ - ✅ Manifesto de classes dos componentes (`@source`)
59
+ - ✅ Descoberta automática de 99 classes
60
+
61
+ **Bundle de conveniência:**
62
+
63
+ ```css
64
+ /* Importa light + dark em um arquivo */
65
+ @import '@lumaui/tokens/build/luma-complete.css';
57
66
  ```
58
67
 
59
- **2. Importe Tailwind + tokens no CSS:**
68
+ ---
69
+
70
+ ### Opções de Uso
60
71
 
61
- **Option A: Individual files (recommended)**
72
+ #### Opção A: Imports Individuais (Recomendado)
62
73
 
63
74
  ```css
64
- /* styles.css */
65
- @import 'tailwindcss'; /* Required - project's responsibility */
66
- @import '@lumaui/tokens/build/luma.css'; /* Light theme */
67
- @import '@lumaui/tokens/build/luma-dark.css'; /* Dark theme */
75
+ @import '@lumaui/tokens/build/luma.css'; /* Tema light + classes */
76
+ @import '@lumaui/tokens/build/luma-dark.css'; /* Tema escuro */
68
77
  ```
69
78
 
70
- **Option B: Convenience bundle**
79
+ **Vantagens:**
80
+
81
+ - Controle granular (pode omitir dark theme se não usar)
82
+ - Carregamento condicional via media query
83
+ - Melhor para produção
84
+
85
+ #### Opção B: Bundle Completo (Simples)
71
86
 
72
87
  ```css
73
- /* styles.css */
74
- @import 'tailwindcss'; /* Required */
75
- @import '@lumaui/tokens/build/luma-complete.css'; /* Both themes */
88
+ @import '@lumaui/tokens/build/luma-complete.css'; /* Tudo junto */
76
89
  ```
77
90
 
78
- **Option C: Without postcss-import (angular.json)**
91
+ **Vantagens:**
79
92
 
80
- ```json
81
- // angular.json
82
- "styles": [
83
- "node_modules/@lumaui/tokens/build/luma.css",
84
- "node_modules/@lumaui/tokens/build/luma-dark.css",
85
- "src/styles.css"
86
- ]
93
+ - Um único import
94
+ - Mais simples para protótipos
95
+ - Fácil de copiar/colar
96
+
97
+ ---
98
+
99
+ ### Verificar se Funciona
100
+
101
+ Após configurar, verifique se as classes dos componentes foram incluídas:
102
+
103
+ ```bash
104
+ # Build do projeto
105
+ npm run build
106
+
107
+ # Verificar se as classes Luma estão no CSS final
108
+ grep "bg-primary" dist/styles.css
109
+ # Esperado: Várias correspondências (bg-primary, hover:bg-primary/90, etc.)
87
110
  ```
88
111
 
89
- ```css
90
- /* styles.css */
91
- @import 'tailwindcss'; /* Required */
112
+ Se você vê as classes, está funcionando corretamente! ✅
113
+
114
+ ---
115
+
116
+ ### Troubleshooting
117
+
118
+ **Problema:** Componentes aparecem sem estilos
119
+
120
+ **Causa:** Tailwind não descobriu as classes dos componentes
121
+
122
+ **Solução:**
123
+
124
+ 1. Verifique se está importando `@lumaui/tokens/build/luma.css` (não apenas `@lumaui/tokens`)
125
+ 2. Verifique se o CSS compilado contém classes como `bg-primary`
126
+ 3. Certifique-se que está usando Tailwind CSS v4 (não v3)
127
+
128
+ **Verificar versão do Tailwind:**
129
+
130
+ ```bash
131
+ npm list tailwindcss
132
+ # Esperado: tailwindcss@4.x.x (não 3.x.x)
92
133
  ```
93
134
 
94
- **3. Use as classes:**
135
+ ---
136
+
137
+ ### Use as classes
95
138
 
96
139
  ```html
97
140
  <button class="bg-primary text-primary-foreground rounded-md px-6 py-3">
package/build/luma-complete.css CHANGED
@@ -1,23 +1,18 @@
1
1
  /**
2
2
  * Luma Design System - Complete CSS Bundle
3
3
  *
4
- * This file includes:
5
- * - Component class manifest (@source directive)
6
- * - All Luma design tokens (@theme block)
7
- * - Dark theme overrides (.dark selector)
8
- *
9
- * IMPORTANT: This file does NOT import Tailwind CSS.
10
- * Your project MUST import Tailwind separately.
4
+ * Convenience file that imports both light and dark themes.
5
+ * Equivalent to importing luma.css + luma-dark.css separately.
11
6
  *
12
7
  * Usage in your styles.css:
13
- * 1. @import 'tailwindcss'; (Required - project's responsibility)
14
- * 2. @import '@lumaui/tokens/build/luma-complete.css';
8
+ *
9
+ * @import '@lumaui/tokens/build/luma-complete.css';
10
+ *
11
+ * Note: luma.css already includes @source directive for component classes.
12
+ * Note: luma.css already includes @import 'tailwindcss'.
15
13
  */
16
14
 
17
- /* Tell Tailwind to scan the component class manifest */
18
- @source "./luma-classes.js";
19
-
20
- /* Import light theme tokens */
15
+ /* Import light theme tokens (includes Tailwind, @source, and component classes) */
21
16
  @import './luma.css';
22
17
 
23
18
  /* Import dark theme overrides */
package/build/luma.css CHANGED
@@ -1,3 +1,8 @@
1
+ @import 'tailwindcss';
2
+
3
+ /* Component class manifest - enables automatic class discovery */
4
+ @source "./luma-classes.js";
5
+
1
6
  @theme {
2
7
  /* Luma Design System - Purple Theme (Light) */
3
8
 
package/package.json CHANGED
@@ -1,19 +1,45 @@
1
1
  {
2
2
  "name": "@lumaui/tokens",
3
- "version": "0.4.0",
3
+ "version": "0.4.1",
4
4
  "description": "Design tokens for Luma UI - Neo-Minimal design system",
5
5
  "type": "module",
6
- "main": "./build/luma-complete.css",
6
+ "main": "./build/luma.css",
7
7
  "exports": {
8
- ".": "./build/luma-complete.css",
9
- "./styles.css": "./build/luma-complete.css",
10
- "./tokens": "./build/luma.css",
11
- "./dark.css": "./build/luma-dark.css",
12
- "./styles/dark.css": "./build/luma-dark.css",
13
- "./build/luma.css": "./build/luma.css",
14
- "./build/luma-dark.css": "./build/luma-dark.css",
15
- "./luma.css": "./build/luma.css",
16
- "./luma-dark.css": "./build/luma-dark.css"
8
+ ".": {
9
+ "style": "./build/luma.css",
10
+ "default": "./build/luma.css"
11
+ },
12
+ "./tokens": {
13
+ "style": "./build/luma.css",
14
+ "default": "./build/luma.css"
15
+ },
16
+ "./dark.css": {
17
+ "style": "./build/luma-dark.css",
18
+ "default": "./build/luma-dark.css"
19
+ },
20
+ "./build/luma.css": {
21
+ "style": "./build/luma.css",
22
+ "default": "./build/luma.css"
23
+ },
24
+ "./build/luma-dark.css": {
25
+ "style": "./build/luma-dark.css",
26
+ "default": "./build/luma-dark.css"
27
+ },
28
+ "./build/luma-complete.css": {
29
+ "style": "./build/luma-complete.css",
30
+ "default": "./build/luma-complete.css"
31
+ },
32
+ "./luma.css": {
33
+ "style": "./build/luma.css",
34
+ "default": "./build/luma.css"
35
+ },
36
+ "./luma-dark.css": {
37
+ "style": "./build/luma-dark.css",
38
+ "default": "./build/luma-dark.css"
39
+ },
40
+ "./classes": {
41
+ "default": "./build/luma-classes.js"
42
+ }
17
43
  },
18
44
  "files": [
19
45
  "build/",