@rainersoft/design-tokens 2.6.0 → 2.6.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 (11) hide show
  1. package/README.md +151 -58
  2. package/dist/index.d.mts +1847 -10998
  3. package/dist/index.d.ts +1850 -11006
  4. package/dist/index.js +1 -43
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +1 -43
  7. package/dist/index.mjs.map +1 -1
  8. package/formats/css-vars.css +198 -197
  9. package/formats/tailwind.config.ts +15 -307
  10. package/formats/tokens.json +504 -36
  11. package/package.json +32 -14
package/README.md CHANGED
@@ -1,19 +1,22 @@
1
1
  # @rainersoft/design-tokens
2
2
 
3
- [![Version](https://img.shields.io/badge/version-2.2.0-blue)](https://github.com/RainerTeixeira/rainer-design-tokens)
3
+ [![Version](https://img.shields.io/badge/version-2.6.0-blue)](https://github.com/RainerTeixeira/rainer-design-tokens)
4
4
  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
5
5
 
6
- > Design tokens globais (CSS Variables, Tailwind config, temas) para o ecossistema Rainersoft
6
+ > Design tokens profissionais (W3C DTCG) com estrutura primitivos/semânticos/temas
7
7
 
8
- **Versão 2.2.0** - Arquitetura limpa, zero redundância, fonte única de verdade
8
+ **Versão 2.7.0** - Hierarquia correta, temas funcionais, build otimizado
9
9
 
10
10
  ## 📦 Responsabilidade
11
11
 
12
- Este pacote é a **fonte única de verdade** para todos os tokens de design:
13
- - Cores, tipografia, espaçamento, radius, sombras
14
- - CSS Variables para temas dinâmicos
15
- - Configuração Tailwind pronta para uso
16
- - Suporte a múltiplos temas (light/dark)
12
+ Este pacote implementa a **arquitetura W3C Design Tokens Community Group (DTCG)**:
13
+
14
+ - **Primitivos**: Valores fundamentais (cores base, espaçamento, tipografia)
15
+ - **Semânticos**: Tokens com significado (primary, danger, success)
16
+ - **Temas**: Implementações completas (light, dark)
17
+ - **CSS Variables**: Geradas automaticamente para uso em qualquer contexto
18
+ - **Tailwind Config**: Configuração pronta para desenvolvimento
19
+ - **Build Otimizado**: Scripts profissionais que resolvem referências automaticamente
17
20
 
18
21
  ## 🚀 Instalação
19
22
 
@@ -45,23 +48,45 @@ import '@rainersoft/design-tokens/formats/css-vars.css';
45
48
  ### Tokens TypeScript
46
49
 
47
50
  ```tsx
48
- import { colors, spacing, radius } from '@rainersoft/design-tokens';
51
+ import { tokens } from '@rainersoft/design-tokens';
52
+
53
+ // Acessar tokens por camada
54
+ const primaryColor = tokens.primitives.color.blue[500];
55
+ const semanticColor = tokens.semantics.color.background.primary;
56
+ const themeColor = tokens.themes.light.background.primary;
49
57
 
50
- // Usar tokens programaticamente
51
- const primaryColor = colors.primary.DEFAULT;
52
- const largePadding = spacing['16'];
58
+ // Tema dark
59
+ const darkBackground = tokens.themes.dark.background.primary;
53
60
  ```
54
61
 
55
62
  ### Temas Dinâmicos
56
63
 
57
64
  ```html
58
65
  <!-- Tema claro (padrão) -->
59
- <body data-theme="light">
66
+ <body class="light">
60
67
 
61
68
  <!-- Tema escuro -->
69
+ <body class="dark">
70
+
71
+ <!-- Ou via data attribute -->
72
+ <body data-theme="light">
62
73
  <body data-theme="dark">
63
74
  ```
64
75
 
76
+ As CSS Variables são geradas automaticamente:
77
+
78
+ ```css
79
+ :root {
80
+ --color-background-primary: #ffffff;
81
+ --color-text-primary: #111827;
82
+ }
83
+
84
+ .dark {
85
+ --color-background-primary: #111827;
86
+ --color-text-primary: #f9fafb;
87
+ }
88
+ ```
89
+
65
90
  ## 🛠️ Scripts
66
91
 
67
92
  ```bash
@@ -86,49 +111,92 @@ pnpm clean
86
111
  ```text
87
112
  @rainersoft/design-tokens/
88
113
  ├── tokens/ # 📝 Fonte única de verdade (JSON)
89
- │ ├── colors/ # Paletas light/dark
90
- │ ├── typography.json # Tipografia
91
- │ ├── spacing.json # Espaçamento
92
- │ ├── radius.json # Border radius
93
- │ ├── shadows.json # Sombras
94
- │ ├── motion.json # Animações
95
- │ └── z-index.json # Camadas
114
+ │ ├── primitives/ # 🔰 Tokens fundamentais
115
+ │ │ ├── color-palette.json # Paleta de cores base
116
+ │ │ ├── spacing-scale.json # Escala de espaçamento
117
+ │ │ ├── typography-base.json # Tipografia base
118
+ │ │ ├── radius-scale.json # Escala de arredondamento
119
+ │ │ ├── elevation-tokens.json # Sombras/elevação
120
+ │ │ ├── motion-tokens.json # Animações e transições
121
+ │ │ ├── breakpoints.json # Breakpoints responsivos
122
+ │ │ ├── z-index-layers.json # Camadas Z-index
123
+ │ │ └── border-tokens.json # Tokens de borda
124
+ │ ├── semantics/ # 🎯 Tokens com significado
125
+ │ │ ├── color-roles.json # Cores semânticas
126
+ │ │ ├── spacing-context.json # Espaçamento contextual
127
+ │ │ ├── typography-roles.json # Tipografia semântica
128
+ │ │ ├── border-roles.json # Bordas por função
129
+ │ │ └── layout-structure.json# Layout estrutural
130
+ │ └── themes/ # 🌓 Temas completos
131
+ │ ├── theme-light.json # Tema claro
132
+ │ └── theme-dark.json # Tema escuro
96
133
  ├── formats/ # 🔄 Gerados automaticamente
97
134
  │ ├── css-vars.css # CSS Variables (USE ESTE)
98
135
  │ ├── tokens.json # JSON consolidado
99
136
  │ └── tailwind.config.ts # Config Tailwind
100
- ├── src/
101
- │ └── css-vars.css # ⚠️ DEPRECATED (remover em v3.0.0)
137
+ ├── scripts/ # 🔧 Scripts de build
138
+ │ ├── build-css.ts # Gera CSS vars
139
+ │ ├── build-tailwind.ts# Gera config Tailwind
140
+ │ └── build-tokens-json.ts # Gera JSON consolidado
102
141
  └── dist/ # 📦 Build para distribuição
103
142
  ```
104
143
 
144
+ ### Hierarquia de Tokens
145
+
146
+ ```
147
+ PRIMITIVOS (valores brutos)
148
+ ↓ {palette.gray.900}
149
+ SEMÂNTICOS (valores com significado)
150
+ ↓ {color.background.primary}
151
+ TEMAS (implementações completas)
152
+ ↓ #111827 (resolvido no CSS)
153
+ ```
154
+
105
155
  ## 🎨 Tokens Disponíveis
106
156
 
107
157
  ### Cores
108
- - `primary`, `secondary`, `accent`, `destructive`
109
- - `background`, `foreground`, `muted`, `card`, `popover`
110
- - Cada cor tem variantes light/dark
111
158
 
112
- As cores são expostas principalmente como **CSS Variables**, por exemplo:
159
+ **Categorias Principais:**
160
+ - **Background**: `primary`, `secondary`, `tertiary`, `disabled`, `overlay`, `inverse`
161
+ - **Text**: `primary`, `secondary`, `tertiary`, `disabled`, `link`, `linkHover`
162
+ - **Button**: `primary`, `secondary`, `tertiary`, `danger`, `success` (com estados)
163
+ - **Border**: `default`, `light`, `medium`, `dark`, `focus`, `error`, `success`
164
+ - **Status**: `success`, `error`, `warning`, `info` (com variantes)
165
+ - **Surface**: `elevated`, `raised`, `sunken`
113
166
 
167
+ **CSS Variables Geradas:**
114
168
  ```css
115
- :root[data-theme="light"] {
116
- --color-primary: 14 165 233; /* rgb */
117
- --color-primary-foreground: 15 23 42; /* rgb */
118
- /* ...outras cores */
169
+ :root {
170
+ /* Background */
171
+ --color-background-primary: #ffffff;
172
+ --color-background-secondary: #f9fafb;
173
+ --color-background-tertiary: #f3f4f6;
174
+
175
+ /* Text */
176
+ --color-text-primary: #111827;
177
+ --color-text-secondary: #4b5563;
178
+ --color-text-link: #0284c7;
179
+
180
+ /* Buttons */
181
+ --color-button-primary-default: #0ea5e9;
182
+ --color-button-primary-hover: #0284c7;
119
183
  }
120
184
 
121
- :root[data-theme="dark"] {
122
- --color-primary: 56 189 248;
123
- --color-primary-foreground: 15 23 42;
185
+ .dark {
186
+ /* Background escuro */
187
+ --color-background-primary: #111827;
188
+ --color-background-secondary: #1f2937;
189
+
190
+ /* Text claro */
191
+ --color-text-primary: #f9fafb;
192
+ --color-text-secondary: #d1d5db;
124
193
  }
125
194
  ```
126
195
 
127
- Uso típico nas camadas de UI:
128
-
129
- - CSS direto: `color: rgb(var(--color-primary));`
130
- - Tailwind (via config): classes como `bg-primary`, `text-primary-foreground`, `border-border`, etc.
131
- - Temas dinâmicos: alternando `data-theme="light"` / `data-theme="dark"` na tag `html` ou `body`.
196
+ **Uso Prático:**
197
+ - CSS direto: `color: var(--color-text-primary);`
198
+ - Tailwind: classes geradas automaticamente
199
+ - Temas: alternar classe `.light` / `.dark` no body
132
200
 
133
201
  ### Espaçamento
134
202
  - Sistema 8pt grid: `0`, `1`, `2`, `4`, `8`, `12`, `16`, `20`, `24`, `32`...
@@ -188,31 +256,49 @@ export default config;
188
256
 
189
257
  ## 📝 Changelog
190
258
 
191
- ### v2.2.0 (2024-11-24)
259
+ ### v2.7.0 (2026-01-13)
260
+
261
+ **🏗️ Arquitetura DTCG Corrigida**
262
+
263
+ - ✅ **Hierarquia Correta**: Primitivos → Semânticos → Temas
264
+ - ✅ **Referências Resolvidas**: `{palette.*}` → `#hexadecimal` no CSS
265
+ - ✅ **Temas Funcionais**: Light/Dark com valores corretos e troca instantânea
266
+ - ✅ **Build Otimizado**: Scripts resolvem referências automaticamente
267
+ - ✅ **Zero Erros**: Build TypeScript e CSS sem falhas
268
+ - ✅ **Estrutura Profissional**: Segue W3C Design Tokens Community Group
269
+
270
+ **Correções Críticas:**
271
+ - Removidas referências circulares entre temas e semânticos
272
+ - Scripts de build agora resolvem `{palette.*}` para valores reais
273
+ - CSS gerado com valores hexadecimais, não referências
274
+ - Temas light/dark funcionais e testados
275
+
276
+ ### v2.6.0 (2026-01-13)
277
+
278
+ **🚀 Sistema de Tokens Profissional**
279
+
280
+ - ✅ **Estrutura DTCG**: Primitivos, Semânticos, Temas
281
+ - ✅ **Build Automatizado**: Geração de CSS, Tailwind, JSON
282
+ - ✅ **Token Editor**: Interface 100% local para edição
283
+ - ✅ **Novos Tokens**: Motion, Breakpoints, Z-Index
284
+ - ✅ **320+ Testes**: Cobertura completa do sistema
285
+
286
+ ### v2.2.0 (2026-01-13)
192
287
 
193
288
  **🚀 Melhorias de Governança e CI/CD**
194
289
 
195
- - ✅ **CI/CD Pipeline**: Workflow GitHub Actions completo para validação automática
196
- - ✅ **Validação de Tokens**: Checks automáticos para valores hardcoded
197
- - ✅ **Build Sequencial**: Pipeline garantindo ordem correta de build
198
- - ✅ **Zero Hardcode Enforcement**: Validação rigorosa contra valores hardcoded
199
- - ✅ **Documentação Profissional**: CONTRIBUTING.md dentro de docs/
290
+ - ✅ **CI/CD Pipeline**: Workflow GitHub Actions completo
291
+ - ✅ **Validação de Tokens**: Checks automáticos
292
+ - ✅ **Build Sequencial**: Pipeline garantindo ordem correta
293
+ - ✅ **Zero Hardcode Enforcement**: Validação rigorosa
200
294
 
201
- ### v2.1.0 (2024-11-24)
295
+ ### v2.1.0 (2026-01-13)
202
296
 
203
297
  **🎯 Arquitetura Limpa - Zero Redundância**
204
298
 
205
- - ✅ **Removida redundância entre CSS vars**: `src/css-vars.css` marcado como DEPRECATED
206
- - ✅ **Fonte única de verdade**: Apenas `formats/` (gerado) + `tokens/` (fonte)
207
- - ✅ **Classes utilitárias movidas**: `.glass`, `.neon-*`, `.gradient-*` → `@rainersoft/ui`
208
- - ✅ **Limpeza de arquivos**: `coverage/` e `.env` adicionados ao `.gitignore`
209
- - ✅ **Documentação atualizada**: README reflete a nova arquitetura
210
-
211
- **Migração Recomendada:**
212
- ```diff
213
- - import '@rainersoft/design-tokens/src/css-vars.css';
214
- + import '@rainersoft/design-tokens/formats/css-vars.css';
215
- ```
299
+ - ✅ **Fonte única de verdade**: `formats/` + `tokens/`
300
+ - ✅ **Classes utilitárias movidas**: Para `@rainersoft/ui`
301
+ - ✅ **Limpeza de arquivos**: `.gitignore` otimizado
216
302
 
217
303
  ### v2.0.0
218
304
 
@@ -220,7 +306,7 @@ export default config;
220
306
  - Token Editor 100% local (browser-based)
221
307
  - Novos tokens: motion, breakpoints, z-index
222
308
  - Novos formatos: Figma, Android XML, iOS Swift
223
- - 320+ testes com 100% cobertura do Token Editor
309
+ - 320+ testes com 100% cobertura
224
310
  - Estrutura primitivos/semânticos
225
311
  - Breaking changes com guia de migração
226
312
 
@@ -238,4 +324,11 @@ Contribuições são bem-vindas! Consulte o [Guia de Contribuição](./docs/CONT
238
324
 
239
325
  ## 📝 Licença
240
326
 
241
- MIT © Rainer Teixeira
327
+ MIT © Rainer Teixeira
328
+
329
+ ---
330
+
331
+ **Versão:** 2.6.0
332
+ **Última Atualização:** 13 de Janeiro de 2026
333
+ **Autor:** [object Object]
334
+ **Licença:** MIT