@lumaui/tokens 0.1.0

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 (20) hide show
  1. package/README.md +284 -0
  2. package/build/luma-dark.css +59 -0
  3. package/build/luma.css +623 -0
  4. package/package.json +52 -0
  5. package/src/components/badge/badge.dark.json +11 -0
  6. package/src/components/badge/badge.json +36 -0
  7. package/src/components/button/button.dark.json +96 -0
  8. package/src/components/button/button.json +154 -0
  9. package/src/components/card/card.dark.json +81 -0
  10. package/src/components/card/card.json +111 -0
  11. package/src/core/colors.dark.json +154 -0
  12. package/src/core/colors.json +164 -0
  13. package/src/core/spacing.json +53 -0
  14. package/src/core/transitions.json +23 -0
  15. package/src/core/typography.json +64 -0
  16. package/src/index.ts +8 -0
  17. package/src/luma-dark.css +34 -0
  18. package/src/luma.css +273 -0
  19. package/src/themes/dark.tokens.css +55 -0
  20. package/src/themes/light.tokens.css +55 -0
package/README.md ADDED
@@ -0,0 +1,284 @@
1
+ # @lumaui/tokens
2
+
3
+ Design tokens do Luma UI - Neo-Minimal para Tailwind CSS v4.
4
+
5
+ ## Instalação
6
+
7
+ ```bash
8
+ npm install @lumaui/tokens @lumaui/angular tailwindcss@next @tailwindcss/postcss@next
9
+ ```
10
+
11
+ ## Uso
12
+
13
+ ### Setup Básico
14
+
15
+ **1. Configure PostCSS:**
16
+
17
+ ```javascript
18
+ // postcss.config.mjs
19
+ export default {
20
+ plugins: {
21
+ '@tailwindcss/postcss': {},
22
+ },
23
+ };
24
+ ```
25
+
26
+ **2. Importe tokens no CSS:**
27
+
28
+ ```css
29
+ @import '@lumaui/tokens/luma.css';
30
+ @import '@lumaui/tokens/luma-dark.css';
31
+ ```
32
+
33
+ **3. Use as classes:**
34
+
35
+ ```html
36
+ <button class="lm-bg-primary text-white lm-rounded-md px-6 py-3">
37
+ Continuar
38
+ </button>
39
+
40
+ <div class="lm-bg-surface-base lm-text-primary">
41
+ <h1 class="lm-text-lg">Título</h1>
42
+ <p class="lm-text-secondary">Descrição</p>
43
+ </div>
44
+ ```
45
+
46
+ **Não precisa de tailwind.config.ts!** 🎉
47
+
48
+ ### Customização
49
+
50
+ Para sobrescrever tokens, defina após o import:
51
+
52
+ ```css
53
+ @import '@lumaui/tokens/luma.css';
54
+
55
+ @theme {
56
+ /* Override primary color */
57
+ --color-primary: oklch(0.6 0.15 350); /* Rosa */
58
+ }
59
+ ```
60
+
61
+ ### Tema Customizado
62
+
63
+ ```css
64
+ @import '@lumaui/tokens/luma.css';
65
+
66
+ .theme-ocean {
67
+ --color-primary: oklch(0.55 0.12 200); /* Azul oceano */
68
+ --color-surface-base: oklch(0.96 0.01 200);
69
+ }
70
+ ```
71
+
72
+ ```html
73
+ <div class="theme-ocean">
74
+ <button class="lm-bg-primary">Ocean Theme</button>
75
+ </div>
76
+ ```
77
+
78
+ ### Dark Theme
79
+
80
+ O dark theme é ativado quando a classe `.dark` é aplicada:
81
+
82
+ ```html
83
+ <html class="dark">
84
+ <!-- Todo o conteúdo usará o dark theme -->
85
+ </html>
86
+ ```
87
+
88
+ Ou em um contexto específico:
89
+
90
+ ```html
91
+ <div class="dark">
92
+ <!-- Apenas este contexto usará dark theme -->
93
+ <button class="lm-bg-primary">Dark Button</button>
94
+ </div>
95
+ ```
96
+
97
+ ## Tokens Disponíveis
98
+
99
+ ### Cores
100
+
101
+ | Token | Descrição | Classes Geradas |
102
+ | ---------------------------- | ------------------------- | ------------------------------------------------- |
103
+ | `--color-primary` | Cor primária | `lm-bg-primary`, `text-primary`, `border-primary` |
104
+ | `--color-primary-hover` | Hover da cor primária | `lm-bg-primary-hover` |
105
+ | `--color-primary-active` | Active da cor primária | `lm-bg-primary-active` |
106
+ | `--color-surface-base` | Cor de fundo base | `lm-bg-surface-base` |
107
+ | `--color-text-primary` | Cor de texto primária | `lm-text-primary` |
108
+ | `--color-text-secondary` | Cor de texto secundária | `lm-text-secondary` |
109
+ | `--color-card-background` | Background do card | `lm-bg-card-background` |
110
+ | `--color-card-gradient-from` | Gradiente inicial do card | `lm-from-card-gradient-from` |
111
+ | `--color-card-gradient-to` | Gradiente final do card | `lm-to-card-gradient-to` |
112
+
113
+ ### Tipografia
114
+
115
+ | Token | Valor Padrão | Classe |
116
+ | -------------------- | ------------------- | -------------- |
117
+ | `--lm-text-sm` | 0.75rem (12px) | `lm-text-sm` |
118
+ | `--lm-text-base` | 1rem (16px) | `lm-text-base` |
119
+ | `--lm-text-lg` | 1.875rem (30px) | `lm-text-lg` |
120
+ | `--font-family-base` | Inter, system fonts | - |
121
+
122
+ ### Border Radius
123
+
124
+ | Token | Valor Padrão | Classe |
125
+ | -------------------- | ------------ | ------------------- |
126
+ | `--radius-luma-sm` | 6px | `lm-rounded-sm` |
127
+ | `--radius-luma-md` | 10px | `lm-rounded-md` |
128
+ | `--radius-luma-lg` | 18px | `lm-rounded-lg` |
129
+ | `--radius-luma-full` | 9999px | `rounded-luma-full` |
130
+
131
+ ### Transições
132
+
133
+ | Token | Valor Padrão | Classe |
134
+ | -------------------- | ------------ | ------------------ |
135
+ | `--lm-duration-fast` | 150ms | `lm-duration-fast` |
136
+ | `--lm-duration-base` | 200ms | `lm-duration-base` |
137
+
138
+ ### Espaçamento
139
+
140
+ | Token | Valor Padrão |
141
+ | ------------------------ | ------------- |
142
+ | `--spacing-xs` | 0.25rem (4px) |
143
+ | `--spacing-sm` | 0.5rem (8px) |
144
+ | `--spacing-md` | 1rem (16px) |
145
+ | `--spacing-lg` | 1.5rem (24px) |
146
+ | `--spacing-xl` | 2.5rem (40px) |
147
+ | `--spacing-card-padding` | 1.5rem (24px) |
148
+
149
+ ## Formato dos Tokens (OKLCH)
150
+
151
+ Tailwind CSS v4 usa o espaço de cor OKLCH por padrão, que oferece:
152
+
153
+ - **Melhor interpolação de cores**: Transições mais suaves
154
+ - **Espaço perceptualmente uniforme**: Cores parecem ter luminosidade consistente
155
+ - **Wide-gamut support**: Suporte a cores mais vibrantes
156
+
157
+ **Formato:**
158
+
159
+ ```css
160
+ --color-primary: oklch(L C H);
161
+ ```
162
+
163
+ - **L** (Lightness): 0 a 1 (0 = preto, 1 = branco)
164
+ - **C** (Chroma): 0 a 0.4 (saturação)
165
+ - **H** (Hue): 0 a 360 (matiz)
166
+
167
+ **Exemplos:**
168
+
169
+ - Azul: `oklch(0.54 0.1 230)`
170
+ - Vermelho: `oklch(0.55 0.22 25)`
171
+ - Verde: `oklch(0.60 0.15 145)`
172
+
173
+ ## Conversão RGB para OKLCH
174
+
175
+ Para converter suas cores RGB para OKLCH, use ferramentas online como:
176
+
177
+ - [OKLCH Color Picker](https://oklch.com/)
178
+ - [Coloraide](https://facelessuser.github.io/coloraide/)
179
+
180
+ **Aproximações:**
181
+
182
+ - RGB `50 127 179` (azul) → `oklch(0.54 0.1 230)`
183
+ - RGB `15 17 20` (preto) → `oklch(0.15 0.005 0)`
184
+ - RGB `251 251 252` (branco) → `oklch(0.99 0.001 0)`
185
+
186
+ ## Benefícios do Tailwind v4
187
+
188
+ ### 1. Zero Config
189
+
190
+ - Não precisa de `tailwind.config.ts`
191
+ - Tudo definido em CSS com `@theme`
192
+
193
+ ### 2. Geração Automática
194
+
195
+ `--color-primary` gera automaticamente:
196
+
197
+ - `lm-bg-primary`
198
+ - `text-primary`
199
+ - `border-primary`
200
+ - `fill-primary`
201
+ - E variantes com opacidade!
202
+
203
+ ### 3. Melhor Performance
204
+
205
+ - Autoprefixer incluído
206
+ - Build mais rápido
207
+ - Melhor tree-shaking
208
+
209
+ ### 4. Cores Modernas
210
+
211
+ - OKLCH para cores mais vibrantes
212
+ - Melhor interpolação
213
+ - Suporte a wide-gamut
214
+
215
+ ## Estrutura do Pacote
216
+
217
+ ```
218
+ @lumaui/tokens/
219
+ ├── src/
220
+ │ ├── luma.css # Tokens principais (light theme)
221
+ │ ├── luma-dark.css # Dark theme overrides
222
+ │ ├── themes/ # Legacy (deprecated)
223
+ │ │ ├── light.tokens.css
224
+ │ │ └── dark.tokens.css
225
+ │ └── index.ts # Exports TypeScript
226
+ ├── package.json
227
+ └── README.md
228
+ ```
229
+
230
+ ## Migração de v3 para v4
231
+
232
+ Se você está migrando de Tailwind v3:
233
+
234
+ 1. **Instale Tailwind v4:**
235
+
236
+ ```bash
237
+ npm uninstall tailwindcss autoprefixer
238
+ npm install tailwindcss@next @tailwindcss/postcss@next
239
+ ```
240
+
241
+ 2. **Atualize PostCSS:**
242
+
243
+ ```javascript
244
+ // postcss.config.mjs
245
+ export default {
246
+ plugins: {
247
+ '@tailwindcss/postcss': {},
248
+ },
249
+ };
250
+ ```
251
+
252
+ 3. **Atualize CSS:**
253
+
254
+ ```css
255
+ /* Antes */
256
+ @tailwind base;
257
+ @tailwind components;
258
+ @tailwind utilities;
259
+
260
+ /* Depois */
261
+ @import '@lumaui/tokens/luma.css';
262
+ @import '@lumaui/tokens/luma-dark.css';
263
+ ```
264
+
265
+ 4. **Delete tailwind.config.ts** - Não é mais necessário!
266
+
267
+ 5. **Classes continuam as mesmas!** 🎉
268
+
269
+ ## Compatibilidade
270
+
271
+ - ✅ Tailwind CSS v4.x
272
+ - ✅ Angular 21+
273
+ - ✅ React 18+
274
+ - ✅ Vue 3+
275
+ - ✅ Nx 22+
276
+ - ✅ Todos os navegadores modernos com suporte a OKLCH
277
+
278
+ ## Suporte
279
+
280
+ Para issues e contribuições: [GitHub Repository](https://github.com/seu-repo/luma)
281
+
282
+ ## Licença
283
+
284
+ MIT
package/build/luma-dark.css ADDED
@@ -0,0 +1,59 @@
1
+ /* Luma Design System - Dark Theme */
2
+ .dark {
3
+ --luma-color-primary-50: oklch(0.70 0.14 232.13);
4
+ --luma-color-primary-60: oklch(0.64 0.13 232.13);
5
+ --luma-color-primary-70: oklch(0.58 0.12 232.13);
6
+ --luma-color-primary-80: oklch(0.52 0.11 232.13);
7
+ --luma-color-neutral-50: oklch(0.20 0.005 265);
8
+ --luma-color-neutral-60: oklch(0.25 0.008 265);
9
+ --luma-color-neutral-70: oklch(0.30 0.01 265);
10
+ --luma-color-neutral-80: oklch(0.70 0.01 265);
11
+ --luma-color-neutral-90: oklch(0.70 0.01 265);
12
+ --luma-color-neutral-100: oklch(0.90 0.01 265);
13
+ --luma-color-success-50: oklch(0.80 0.10 150);
14
+ --luma-color-success-60: oklch(0.72 0.09 150);
15
+ --luma-color-success-70: oklch(0.65 0.08 150);
16
+ --luma-color-success-80: oklch(0.58 0.07 150);
17
+ --luma-color-warning-50: oklch(0.85 0.12 85);
18
+ --luma-color-warning-60: oklch(0.78 0.11 85);
19
+ --luma-color-warning-70: oklch(0.72 0.10 85);
20
+ --luma-color-warning-80: oklch(0.65 0.09 85);
21
+ --luma-color-error-50: oklch(0.70 0.13 25);
22
+ --luma-color-error-60: oklch(0.62 0.12 25);
23
+ --luma-color-error-70: oklch(0.56 0.11 25);
24
+ --luma-color-error-80: oklch(0.50 0.10 25);
25
+ --luma-color-surface-base: oklch(0.15 0.005 265);
26
+ --luma-color-text-primary: oklch(0.90 0.01 265);
27
+ --luma-color-text-secondary: oklch(0.70 0.01 265);
28
+ --luma-focus-ring-color: oklch(0.70 0.14 232.13 / 0.45);
29
+ --luma-button-primary-bg: oklch(0.70 0.14 232.13);
30
+ --luma-button-primary-bg-hover: oklch(0.58 0.12 232.13);
31
+ --luma-button-primary-bg-active: oklch(0.52 0.11 232.13);
32
+ --luma-button-primary-text: oklch(0.1 0 0);
33
+ --luma-button-outline-border: oklch(0.25 0.008 265);
34
+ --luma-button-outline-border-hover: oklch(0.70 0.01 265);
35
+ --luma-button-outline-bg-hover: oklch(0.20 0.005 265);
36
+ --luma-button-outline-text: oklch(0.90 0.01 265);
37
+ --luma-button-ghost-bg: rgba(0, 0, 0, 0);
38
+ --luma-button-ghost-bg-hover: oklch(0.20 0.005 265);
39
+ --luma-button-ghost-text: oklch(0.90 0.01 265);
40
+ --luma-button-danger-bg: oklch(0.70 0.13 25);
41
+ --luma-button-danger-bg-hover: oklch(0.56 0.11 25);
42
+ --luma-button-danger-bg-active: oklch(0.50 0.10 25);
43
+ --luma-button-danger-text: oklch(0.1 0 0);
44
+ --luma-button-focus-ring-color: oklch(0.70 0.14 232.13 / 0.45);
45
+ --luma-card-shadow-background: oklch(0.18 0.005 265);
46
+ --luma-card-shadow-border: oklch(0.25 0.008 265);
47
+ --luma-card-shadow-shadow: 0 8px 24px oklch(0 0 0 / 0.25);
48
+ --luma-card-nested-background: oklch(0.20 0.005 265);
49
+ --luma-card-nested-border: oklch(0.25 0.008 265);
50
+ --luma-card-preview-background: oklch(0.20 0.005 265);
51
+ --luma-card-preview-border: oklch(0.25 0.008 265);
52
+ --luma-card-gradient-from: oklch(0.25 0.01 265 / 0.6);
53
+ --luma-card-gradient-to: oklch(0.2 0.008 265 / 0.6);
54
+ --luma-card-background: oklch(0.17 0.005 265);
55
+ --luma-card-box-shadow: 0px 2px 0 0px oklch(0 0 0 / 0.3);
56
+ --luma-code-background: oklch(0.08 0.005 265);
57
+ --luma-code-border: oklch(0.20 0.008 265);
58
+ --luma-badge-bg: oklch(0.64 0.12 230 / 0.15);
59
+ }