@rainersoft/design-tokens 1.0.4 → 1.0.6
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.
- package/README.md +593 -544
- package/dist/index.d.ts +1714 -103
- package/dist/index.mjs +2 -1116
- package/dist/index.mjs.map +1 -1
- package/formats/tailwind.config.ts +64 -6
- package/formats/tokens.json +2 -2
- package/package.json +15 -12
- package/themes/dark.ts +2 -2
- package/themes/index.ts +2 -2
- package/themes/light.ts +2 -2
- package/tokens/accessibility.ts +1 -1
- package/tokens/animations.json +83 -0
- package/tokens/breakpoints.json +30 -0
- package/tokens/components/celestial-background.json +106 -0
- package/tokens/effects.json +125 -0
- package/tokens/hero.json +69 -0
- package/tokens/index.ts +156 -9
- package/tokens/motion.json +33 -0
- package/tokens/utilities.ts +594 -177
- package/tokens/z-index.json +27 -0
- package/dist/index.cjs +0 -1190
- package/dist/index.cjs.map +0 -1
- package/dist/index.d.cts +0 -5853
package/README.md
CHANGED
|
@@ -1,544 +1,593 @@
|
|
|
1
|
-
# @rainersoft/design-tokens
|
|
2
|
-
|
|
3
|
-
<div align="center">
|
|
4
|
-
|
|
5
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
**Enterprise-grade design tokens for modern design systems**
|
|
12
|
+
|
|
13
|
+
[Getting Started](#-installation) • [Documentation](#-documentation) • [Storybook](#-storybook---visualização-dos-tokens) • [Roadmap](./docs/14-roadmap.md)
|
|
14
|
+
|
|
15
|
+
</div>
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
## 📖 Overview
|
|
20
|
+
|
|
21
|
+
`@rainersoft/design-tokens` é uma biblioteca profissional de design tokens que define a linguagem visual do RainerSoft Design System. Agnóstica de tecnologia, escalável e pronta para produção.
|
|
22
|
+
|
|
23
|
+
### ✨ Features
|
|
24
|
+
|
|
25
|
+
- 🎨 **Temas Light & Dark** - Paletas profissionais para qualquer contexto
|
|
26
|
+
- 🚀 **Zero Dependencies** - Pura performance, sem bloat
|
|
27
|
+
- 📦 **Múltiplos Formatos** - Tailwind, CSS Vars, JSON universal
|
|
28
|
+
- 🎯 **Type-Safe** - 100% TypeScript com tipos completos
|
|
29
|
+
- 🌐 **Platform Agnostic** - Use em web, mobile, desktop, jogos
|
|
30
|
+
- ♿ **Acessível** - WCAG AA compliant por padrão
|
|
31
|
+
- 📏 **8pt Grid** - Sistema de espaçamento consistente
|
|
32
|
+
- 🎭 **Cyberpunk Theme** - Dark mode com efeitos neon
|
|
33
|
+
- 🎬 **Animações** - Keyframes e animações prontas (accordion, slide-in, fade-in)
|
|
34
|
+
- 📚 **Storybook** - Documentação visual interativa de todos os tokens
|
|
35
|
+
- ✏️ **Token Editor** - Interface web completa para editar tokens visualmente
|
|
36
|
+
- ✅ Validação de schema JSON
|
|
37
|
+
- ✅ Preview visual dos tokens
|
|
38
|
+
- ✅ Histórico de alterações (undo/redo)
|
|
39
|
+
- ✅ Geração de formatos: CSS, Tailwind, Figma, Android XML, iOS Swift (100% local no navegador)
|
|
40
|
+
- 🧪 **Testes Completos** - 302 testes com 100% de cobertura do Token Editor
|
|
41
|
+
|
|
42
|
+
---
|
|
43
|
+
|
|
44
|
+
## 🚀 Installation
|
|
45
|
+
|
|
46
|
+
```bash
|
|
47
|
+
pnpm add @rainersoft/design-tokens
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
```bash
|
|
51
|
+
npm install @rainersoft/design-tokens
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
```bash
|
|
55
|
+
yarn add @rainersoft/design-tokens
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
---
|
|
59
|
+
|
|
60
|
+
## 🎯 Quick Start
|
|
61
|
+
|
|
62
|
+
### TypeScript/JavaScript
|
|
63
|
+
|
|
64
|
+
```typescript
|
|
65
|
+
import { tokens, lightTheme, darkTheme } from '@rainersoft/design-tokens';
|
|
66
|
+
|
|
67
|
+
// Use tokens diretamente
|
|
68
|
+
const primaryColor = tokens.colors.light.primary.base; // #0891b2
|
|
69
|
+
const spacing = tokens.spacing['4']; // 1rem
|
|
70
|
+
const fontSize = tokens.typography.headings.h1.fontSize; // 2.25rem
|
|
71
|
+
|
|
72
|
+
// Ou use temas
|
|
73
|
+
const theme = lightTheme;
|
|
74
|
+
console.log(theme.colors.background.primary); // #ffffff
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
### Tailwind CSS
|
|
78
|
+
|
|
79
|
+
```typescript
|
|
80
|
+
// tailwind.config.ts
|
|
81
|
+
import { tailwindConfig } from '@rainersoft/design-tokens/formats/tailwind.config';
|
|
82
|
+
|
|
83
|
+
export default {
|
|
84
|
+
...tailwindConfig,
|
|
85
|
+
content: ['./src/**/*.{js,ts,jsx,tsx}'],
|
|
86
|
+
};
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
```tsx
|
|
90
|
+
// Use as classes
|
|
91
|
+
<div className="bg-brand text-text-primary p-4 rounded-lg shadow-md">
|
|
92
|
+
Hello World
|
|
93
|
+
</div>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
### CSS Variables
|
|
97
|
+
|
|
98
|
+
```css
|
|
99
|
+
/* Import CSS vars */
|
|
100
|
+
@import '@rainersoft/design-tokens/formats/css-vars.css';
|
|
101
|
+
|
|
102
|
+
/* Use variables */
|
|
103
|
+
.button {
|
|
104
|
+
background: var(--color-brand-primary);
|
|
105
|
+
padding: var(--spacing-4);
|
|
106
|
+
border-radius: var(--radius-md);
|
|
107
|
+
}
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
### 📚 Storybook - Visualização dos Tokens
|
|
111
|
+
|
|
112
|
+
O Storybook da lib é focado **apenas em design tokens**, não em componentes UI.
|
|
113
|
+
|
|
114
|
+
```bash
|
|
115
|
+
pnpm run storybook
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
Acesse `http://localhost:6006` para explorar:
|
|
119
|
+
- 🎨 **ColorPalette** - Paletas completas (Light & Dark themes)
|
|
120
|
+
- 🎭 **ThemePreview** - Preview dos temas mostrando tokens trabalhando juntos
|
|
121
|
+
- 📝 **Typography** - Sistema de tipografia completo
|
|
122
|
+
- 📏 **Spacing** - Escala de espaçamento (8pt grid)
|
|
123
|
+
- 🔲 **Radius** - Raios de borda
|
|
124
|
+
- 🌑 **Shadows** - Sombras e efeitos glow
|
|
125
|
+
- 🎬 **Animations** - Animações e keyframes (accordion, slide-in, fade-in)
|
|
126
|
+
|
|
127
|
+
> **Nota**: Componentes UI (Button, Card, etc.) devem estar no Storybook do frontend, não aqui. Veja [Estrutura do Storybook](./docs/06-ESTRUTURA_STORYBOOK.md) para mais detalhes.
|
|
128
|
+
|
|
129
|
+
---
|
|
130
|
+
|
|
131
|
+
## 📁 Structure
|
|
132
|
+
|
|
133
|
+
```
|
|
134
|
+
@rainersoft/design-tokens/
|
|
135
|
+
│
|
|
136
|
+
├── 📄 index.ts # Ponto de entrada principal da biblioteca
|
|
137
|
+
├── 📄 package.json # Configuração do pacote npm
|
|
138
|
+
├── 📄 pnpm-lock.yaml # Lock file do pnpm
|
|
139
|
+
├── 📄 tsconfig.json # Configuração TypeScript
|
|
140
|
+
├── 📄 tsup.config.ts # Configuração do bundler tsup
|
|
141
|
+
├── 📄 LICENSE # Licença MIT
|
|
142
|
+
├── 📄 README.md # Este arquivo
|
|
143
|
+
│
|
|
144
|
+
├── 🔧 Configurações
|
|
145
|
+
│ ├── .npmrc # Configuração pnpm (isolamento workspace)
|
|
146
|
+
│ ├── .gitignore # Arquivos ignorados pelo Git
|
|
147
|
+
│ ├── .npmignore # Arquivos ignorados na publicação npm
|
|
148
|
+
│ ├── .prettierrc.json # Configuração Prettier
|
|
149
|
+
│ ├── .eslintrc.json # Configuração ESLint
|
|
150
|
+
│ ├── .cspell.json # Configuração CSpell (verificação ortográfica)
|
|
151
|
+
│ └── .env # Variáveis de ambiente (local, não commitado)
|
|
152
|
+
│
|
|
153
|
+
├── 🎯 tokens/ # FONTE ÚNICA DE VERDADE (JSON + TypeScript)
|
|
154
|
+
│ ├── index.ts # Exportações principais dos tokens
|
|
155
|
+
│ ├── accessibility.ts # Utilitários de acessibilidade (WCAG)
|
|
156
|
+
│ ├── utilities.ts # Utilitários e helpers
|
|
157
|
+
│ ├── colors/
|
|
158
|
+
│ │ ├── light.json # Paleta do tema claro
|
|
159
|
+
│ │ └── dark.json # Paleta do tema escuro (cyberpunk)
|
|
160
|
+
│ ├── typography.json # Sistema de tipografia completo
|
|
161
|
+
│ ├── spacing.json # Escala de espaçamento (8pt grid)
|
|
162
|
+
│ ├── radius.json # Escala de raio de borda
|
|
163
|
+
│ ├── shadows.json # Sombras e efeitos glow
|
|
164
|
+
│ └── animations.json # Animações e keyframes
|
|
165
|
+
│
|
|
166
|
+
├── 🎨 themes/ # Temas compostos
|
|
167
|
+
│ ├── index.ts # Exportações dos temas
|
|
168
|
+
│ ├── light.ts # Tema claro profissional
|
|
169
|
+
│ └── dark.ts # Tema escuro cyberpunk
|
|
170
|
+
│
|
|
171
|
+
├── 📤 formats/ # FORMATOS GERADOS AUTOMATICAMENTE
|
|
172
|
+
│ ├── tailwind.config.ts # Configuração Tailwind (gerado)
|
|
173
|
+
│ ├── css-vars.css # CSS custom properties (gerado)
|
|
174
|
+
│ └── tokens.json # Export JSON universal (gerado)
|
|
175
|
+
│
|
|
176
|
+
├── 🔧 scripts/ # Scripts de build e utilitários
|
|
177
|
+
│ ├── build-formats.ts # Orquestrador principal de build
|
|
178
|
+
│ ├── build-css.ts # Gera CSS variables
|
|
179
|
+
│ ├── build-tailwind.ts # Gera Tailwind config
|
|
180
|
+
│ ├── build-tokens-json.ts # Gera tokens.json
|
|
181
|
+
│ ├── prepare-publish.js # Prepara publicação npm
|
|
182
|
+
│ ├── setup-github.sh # Setup GitHub Actions
|
|
183
|
+
│ ├── fix-storybook.ps1 # Script PowerShell para Storybook
|
|
184
|
+
│ ├── update-dates.ts # Atualiza datas na documentação
|
|
185
|
+
│ └── update-version.ts # Atualiza versão no README automaticamente
|
|
186
|
+
│
|
|
187
|
+
├── 📚 stories/ # Stories do Storybook (apenas tokens)
|
|
188
|
+
│ ├── assets/ # Assets das stories
|
|
189
|
+
│ ├── Accessibility.stories.tsx # Documentação de acessibilidade
|
|
190
|
+
│ ├── ColorPalette.stories.tsx # Paleta completa de cores
|
|
191
|
+
│ ├── ColorStates.stories.tsx # Estados de cores
|
|
192
|
+
│ ├── ThemePreview.stories.tsx # Preview dos temas
|
|
193
|
+
│ ├── Typography.stories.tsx # Sistema de tipografia
|
|
194
|
+
│ ├── TypographyHierarchy.stories.tsx # Hierarquia tipográfica
|
|
195
|
+
│ ├── Spacing.stories.tsx # Escala de espaçamento
|
|
196
|
+
│ ├── Radius.stories.tsx # Raios de borda
|
|
197
|
+
│ ├── Shadows.stories.tsx # Sombras e efeitos
|
|
198
|
+
│ ├── Animations.stories.tsx # Animações e keyframes
|
|
199
|
+
│ └── *.mdx # Documentação MDX das stories
|
|
200
|
+
│
|
|
201
|
+
├── ⚙️ .storybook/ # Configuração do Storybook
|
|
202
|
+
│ ├── main.ts # Configuração principal
|
|
203
|
+
│ └── preview.tsx # Preview e temas do Storybook
|
|
204
|
+
│
|
|
205
|
+
├── 📦 dist/ # Saída compilada (TypeScript)
|
|
206
|
+
│ ├── index.js # CommonJS bundle
|
|
207
|
+
│ ├── index.mjs # ESM bundle
|
|
208
|
+
│ ├── index.d.ts # TypeScript definitions
|
|
209
|
+
│ ├── index.d.mts # ESM TypeScript definitions
|
|
210
|
+
│ └── *.map # Source maps
|
|
211
|
+
│
|
|
212
|
+
└── 📖 docs/ # Documentação completa
|
|
213
|
+
├── 00-INDICE.md # Índice geral da documentação
|
|
214
|
+
├── 03-ESTRUTURA.md # Estrutura detalhada da biblioteca
|
|
215
|
+
├── 06-ESTRUTURA_STORYBOOK.md # Estrutura do Storybook
|
|
216
|
+
├── 04-SISTEMA_BUILD.md # Sistema de build automatizado
|
|
217
|
+
├── 01-guidelines.md # Guidelines de uso
|
|
218
|
+
├── 07-GUIA_TOKENS_EXPANDIDOS.md # Guia dos tokens expandidos
|
|
219
|
+
├── 15-GUIA_MIGRACAO.md # Guia de migração
|
|
220
|
+
├── 11-PUBLICACAO.md # Guia de publicação
|
|
221
|
+
├── 09-CONFIGURACAO_PNPM.md # Configuração pnpm
|
|
222
|
+
├── CONTRIBUINDO.md # Guia de contribuição
|
|
223
|
+
├── 05-STORYBOOK.md # Documentação do Storybook
|
|
224
|
+
├── 02-RESUMO_ESTRUTURA.md # Resumo da estrutura
|
|
225
|
+
├── 12-HISTORICO_MUDANCAS.md # Histórico de mudanças
|
|
226
|
+
└── 14-roadmap.md # Roadmap do projeto
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
### 🎯 Princípio: JSON como Fonte Única de Verdade
|
|
230
|
+
|
|
231
|
+
- ✅ **Edite apenas**: `tokens/*.json` (arquivos JSON na pasta `tokens/`)
|
|
232
|
+
- ✅ **Edite também**: `tokens/*.ts` (utilitários e helpers em TypeScript)
|
|
233
|
+
- ✅ **Formats são gerados**: Execute `pnpm run build:formats`
|
|
234
|
+
- ❌ **NÃO edite manualmente**: `formats/*` (serão sobrescritos pelo build)
|
|
235
|
+
- ⚙️ **Configurações**: Arquivos `.npmrc`, `.eslintrc.json`, `.prettierrc.json`, etc. na raiz
|
|
236
|
+
|
|
237
|
+
---
|
|
238
|
+
|
|
239
|
+
## 🎨 Color System
|
|
240
|
+
|
|
241
|
+
### Light Theme
|
|
242
|
+
```typescript
|
|
243
|
+
{
|
|
244
|
+
primary: { base: '#0891b2', hover: '#06b6d4', active: '#0891b2' },
|
|
245
|
+
secondary: { base: '#9333ea', hover: '#a855f7', active: '#9333ea' },
|
|
246
|
+
accent: { base: '#db2777', hover: '#e11d48', active: '#db2777' },
|
|
247
|
+
status: { success: '#22c55e', error: '#ef4444', warning: '#f59e0b', info: '#3b82f6' }
|
|
248
|
+
}
|
|
249
|
+
```
|
|
250
|
+
|
|
251
|
+
### Dark Theme (Cyberpunk)
|
|
252
|
+
```typescript
|
|
253
|
+
{
|
|
254
|
+
primary: { base: '#00e6ff', hover: '#33eeff', active: '#00e6ff' },
|
|
255
|
+
secondary: { base: '#7d00ff', hover: '#9333ea', active: '#7d00ff' },
|
|
256
|
+
accent: { base: '#ff006e', hover: '#ff3385', active: '#ff006e' },
|
|
257
|
+
effects: { glowCyan: '0 0 20px rgba(0, 230, 255, 0.5)' }
|
|
258
|
+
}
|
|
259
|
+
```
|
|
260
|
+
|
|
261
|
+
---
|
|
262
|
+
|
|
263
|
+
## 📏 Typography
|
|
264
|
+
|
|
265
|
+
Sistema hierárquico completo com headings, subtítulos, body, captions, buttons e labels:
|
|
266
|
+
|
|
267
|
+
```typescript
|
|
268
|
+
{
|
|
269
|
+
headings: {
|
|
270
|
+
h1: { fontSize: '2.25rem', fontWeight: '700', lineHeight: '1.2' },
|
|
271
|
+
h2: { fontSize: '1.875rem', fontWeight: '600', lineHeight: '1.3' },
|
|
272
|
+
// ... h3, h4, h5, h6
|
|
273
|
+
},
|
|
274
|
+
body: {
|
|
275
|
+
large: { fontSize: '1.125rem', lineHeight: '1.75' },
|
|
276
|
+
medium: { fontSize: '1rem', lineHeight: '1.5' },
|
|
277
|
+
small: { fontSize: '0.875rem', lineHeight: '1.5' }
|
|
278
|
+
},
|
|
279
|
+
// ... subtitle, caption, button, label, code
|
|
280
|
+
}
|
|
281
|
+
```
|
|
282
|
+
|
|
283
|
+
---
|
|
284
|
+
|
|
285
|
+
## 🌓 Theme Switching
|
|
286
|
+
|
|
287
|
+
```tsx
|
|
288
|
+
// React example
|
|
289
|
+
function ThemeToggle() {
|
|
290
|
+
const [theme, setTheme] = useState('light');
|
|
291
|
+
|
|
292
|
+
const toggleTheme = () => {
|
|
293
|
+
const newTheme = theme === 'light' ? 'dark' : 'light';
|
|
294
|
+
setTheme(newTheme);
|
|
295
|
+
document.documentElement.classList.toggle('dark');
|
|
296
|
+
};
|
|
297
|
+
|
|
298
|
+
return <button onClick={toggleTheme}>Toggle Theme</button>;
|
|
299
|
+
}
|
|
300
|
+
```
|
|
301
|
+
|
|
302
|
+
---
|
|
303
|
+
|
|
304
|
+
## 📚 Documentation
|
|
305
|
+
|
|
306
|
+
📖 **[Documentação Completa](./docs/00-INDICE.md)** - Índice geral de toda a documentação
|
|
307
|
+
|
|
308
|
+
### Guias Principais
|
|
309
|
+
|
|
310
|
+
- [**Guidelines**](./docs/01-guidelines.md) - Como usar os tokens
|
|
311
|
+
- [**ESTRUTURA.md**](./docs/03-ESTRUTURA.md) - Estrutura detalhada da biblioteca
|
|
312
|
+
- [**SISTEMA_BUILD.md**](./docs/04-SISTEMA_BUILD.md) - Sistema de build automatizado
|
|
313
|
+
- [**Roadmap**](./docs/14-roadmap.md) - Futuras features e versões
|
|
314
|
+
- [**GUIA_TOKENS_EXPANDIDOS**](./docs/07-GUIA_TOKENS_EXPANDIDOS.md) - Guia dos tokens expandidos (cores e tipografia)
|
|
315
|
+
- [**GUIA_MIGRACAO**](./docs/15-GUIA_MIGRACAO.md) - Guia de migração para v2.0.0
|
|
316
|
+
- [**PUBLICACAO**](./docs/11-PUBLICACAO.md) - Guia de publicação no GitHub/npm
|
|
317
|
+
|
|
318
|
+
### Storybook
|
|
319
|
+
|
|
320
|
+
- [**STORYBOOK.md**](./docs/05-STORYBOOK.md) - Documentação visual dos tokens
|
|
321
|
+
- [**ESTRUTURA_STORYBOOK.md**](./docs/06-ESTRUTURA_STORYBOOK.md) - Separação entre tokens e componentes
|
|
322
|
+
|
|
323
|
+
### Referência Rápida
|
|
324
|
+
|
|
325
|
+
- [**RESUMO_ESTRUTURA.md**](./docs/02-RESUMO_ESTRUTURA.md) - Resumo da estrutura
|
|
326
|
+
- [**HISTORICO_MUDANCAS.md**](./docs/12-HISTORICO_MUDANCAS.md) - Histórico de mudanças
|
|
327
|
+
|
|
328
|
+
---
|
|
329
|
+
|
|
330
|
+
## 🎯 Use Cases
|
|
331
|
+
|
|
332
|
+
### ✅ Perfect For
|
|
333
|
+
|
|
334
|
+
- 🌐 Websites e aplicações web
|
|
335
|
+
- 📱 Aplicativos mobile (React Native, Flutter)
|
|
336
|
+
- 🖥️ Aplicações desktop (Electron, Tauri)
|
|
337
|
+
- 🎮 Interfaces de jogos (Unity, Unreal, Godot)
|
|
338
|
+
- 🎨 Design systems corporativos
|
|
339
|
+
- 🚀 MVPs e protótipos rápidos
|
|
340
|
+
|
|
341
|
+
### ❌ Not Included
|
|
342
|
+
|
|
343
|
+
Esta biblioteca contém **apenas tokens**, não componentes UI.
|
|
344
|
+
|
|
345
|
+
Para componentes, use:
|
|
346
|
+
- [shadcn/ui](https://ui.shadcn.com/) com estes tokens
|
|
347
|
+
- [Radix UI](https://www.radix-ui.com/) + custom styling
|
|
348
|
+
- Sua própria biblioteca de componentes
|
|
349
|
+
|
|
350
|
+
---
|
|
351
|
+
|
|
352
|
+
## 🔧 Integration Examples
|
|
353
|
+
|
|
354
|
+
### Next.js + Tailwind
|
|
355
|
+
|
|
356
|
+
```typescript
|
|
357
|
+
// tailwind.config.ts
|
|
358
|
+
import { tailwindConfig } from '@rainersoft/design-tokens/formats/tailwind.config';
|
|
359
|
+
|
|
360
|
+
export default tailwindConfig;
|
|
361
|
+
```
|
|
362
|
+
|
|
363
|
+
```tsx
|
|
364
|
+
// app/layout.tsx
|
|
365
|
+
export default function RootLayout({ children }: { children: React.Node }) {
|
|
366
|
+
return (
|
|
367
|
+
<html lang="pt-BR" className="dark">
|
|
368
|
+
<body>{children}</body>
|
|
369
|
+
</html>
|
|
370
|
+
);
|
|
371
|
+
}
|
|
372
|
+
```
|
|
373
|
+
|
|
374
|
+
### Vite + CSS
|
|
375
|
+
|
|
376
|
+
```typescript
|
|
377
|
+
// main.ts
|
|
378
|
+
import '@rainersoft/design-tokens/formats/css-vars.css';
|
|
379
|
+
```
|
|
380
|
+
|
|
381
|
+
### shadcn/ui
|
|
382
|
+
|
|
383
|
+
```typescript
|
|
384
|
+
// Use tokens as base for shadcn/ui theming
|
|
385
|
+
import { tokens } from '@rainersoft/design-tokens';
|
|
386
|
+
|
|
387
|
+
export const shadcnTheme = {
|
|
388
|
+
primary: tokens.colors.light.primary.base,
|
|
389
|
+
secondary: tokens.colors.light.secondary.base,
|
|
390
|
+
accent: tokens.colors.light.accent.base,
|
|
391
|
+
// ... map other tokens
|
|
392
|
+
};
|
|
393
|
+
```
|
|
394
|
+
|
|
395
|
+
---
|
|
396
|
+
|
|
397
|
+
## 📦 Exports
|
|
398
|
+
|
|
399
|
+
```typescript
|
|
400
|
+
// Main tokens
|
|
401
|
+
import { tokens } from '@rainersoft/design-tokens';
|
|
402
|
+
|
|
403
|
+
// Individual token categories
|
|
404
|
+
import {
|
|
405
|
+
lightThemeColors,
|
|
406
|
+
darkThemeColors,
|
|
407
|
+
typographyTokens,
|
|
408
|
+
spacingTokens,
|
|
409
|
+
radiusTokens,
|
|
410
|
+
shadowTokens
|
|
411
|
+
} from '@rainersoft/design-tokens/tokens';
|
|
412
|
+
|
|
413
|
+
// Themes
|
|
414
|
+
import { lightTheme, darkTheme } from '@rainersoft/design-tokens/themes';
|
|
415
|
+
|
|
416
|
+
// Formats
|
|
417
|
+
import { tailwindConfig } from '@rainersoft/design-tokens/formats/tailwind.config';
|
|
418
|
+
```
|
|
419
|
+
|
|
420
|
+
---
|
|
421
|
+
|
|
422
|
+
## 🎨 Token Editor (Editor Visual Local)
|
|
423
|
+
|
|
424
|
+
Para editar os design tokens visualmente, sem servidor, use o **Token Editor** incluso no repositório:
|
|
425
|
+
|
|
426
|
+
1. Localize a pasta `token-editor/` na raiz do projeto.
|
|
427
|
+
2. Abra o arquivo `token-editor/index.html` diretamente no navegador (duplo clique ou arrastar/soltar).
|
|
428
|
+
3. Carregue um arquivo JSON de tokens, edite visualmente ou via código e salve/gera formatos **100% local**, direto no navegador.
|
|
429
|
+
|
|
430
|
+
---
|
|
431
|
+
|
|
432
|
+
## 🧪 Development
|
|
433
|
+
|
|
434
|
+
```bash
|
|
435
|
+
# Install dependencies
|
|
436
|
+
pnpm install
|
|
437
|
+
|
|
438
|
+
# Build tokens (gera formats + compila TypeScript)
|
|
439
|
+
pnpm run build
|
|
440
|
+
|
|
441
|
+
# Gerar apenas formatos (CSS, Tailwind, JSON)
|
|
442
|
+
pnpm run build:formats
|
|
443
|
+
|
|
444
|
+
# Gerar formatos individuais
|
|
445
|
+
pnpm run build:css # Gera formats/css-vars.css
|
|
446
|
+
pnpm run build:tailwind # Gera formats/tailwind.config.ts
|
|
447
|
+
pnpm run build:tokens-json # Gera formats/tokens.json
|
|
448
|
+
|
|
449
|
+
# Storybook (visualização dos tokens)
|
|
450
|
+
pnpm run storybook # Inicia Storybook em http://localhost:6006
|
|
451
|
+
pnpm run build-storybook # Gera build estático do Storybook
|
|
452
|
+
|
|
453
|
+
# Run tests
|
|
454
|
+
pnpm test
|
|
455
|
+
|
|
456
|
+
# Type check
|
|
457
|
+
pnpm run type-check
|
|
458
|
+
|
|
459
|
+
# Lint
|
|
460
|
+
pnpm run lint
|
|
461
|
+
|
|
462
|
+
# Clean
|
|
463
|
+
pnpm run clean # Remove dist/
|
|
464
|
+
pnpm run clean:all # Remove node_modules, lock, dist, etc.
|
|
465
|
+
```
|
|
466
|
+
|
|
467
|
+
### 🔄 Workflow de Desenvolvimento
|
|
468
|
+
|
|
469
|
+
1. **Edite os tokens** em `tokens/*.json` (fonte única de verdade)
|
|
470
|
+
2. **Edite utilitários** em `tokens/*.ts` se necessário (accessibility, utilities)
|
|
471
|
+
3. **Execute o build**: `pnpm run build:formats` (gera formatos)
|
|
472
|
+
4. **Os formatos são gerados automaticamente** em `formats/`
|
|
473
|
+
5. **Compile o TypeScript**: `pnpm run build` (já inclui build:formats + tsup)
|
|
474
|
+
6. **Visualize no Storybook**: `pnpm run storybook` para ver todos os tokens de forma interativa
|
|
475
|
+
7. **Execute testes**: `pnpm test` antes de commitar
|
|
476
|
+
8. **⚠️ IMPORTANTE**: Sempre commit `dist/` após build (veja [PUBLICACAO.md](./docs/11-PUBLICACAO.md#-por-que-dist-está-commitado))
|
|
477
|
+
|
|
478
|
+
### ✏️ Token Editor - Editor Visual de Tokens
|
|
479
|
+
|
|
480
|
+
Interface web **100% local** para editar tokens visualmente, sem necessidade de servidor.
|
|
481
|
+
|
|
482
|
+
**Localização**: `token-editor/`
|
|
483
|
+
|
|
484
|
+
**Características:**
|
|
485
|
+
- 🚀 **100% Local** - Funciona abrindo HTML diretamente no navegador
|
|
486
|
+
- 🎨 **Editor Visual** - Edite propriedades com inputs HTML (evita erros de sintaxe)
|
|
487
|
+
- 📝 **Editor de Código** - Edição tradicional de JSON
|
|
488
|
+
- ✅ **Validação em Tempo Real** - Detecta erros instantaneamente
|
|
489
|
+
- 💾 **Download de Arquivos** - Salve JSON diretamente (sem servidor)
|
|
490
|
+
- 🔄 **Auto-backup** - Salva automaticamente no localStorage
|
|
491
|
+
- 🎯 **Zero Dependencies** - Apenas HTML, CSS e JavaScript puro
|
|
492
|
+
|
|
493
|
+
**Como usar (Modo Local - Recomendado):**
|
|
494
|
+
```bash
|
|
495
|
+
# Simplesmente abra o arquivo HTML no navegador:
|
|
496
|
+
# Windows: Clique duas vezes em token-editor/index.html
|
|
497
|
+
# Mac/Linux: open token-editor/index.html
|
|
498
|
+
```
|
|
499
|
+
|
|
500
|
+
**Funcionalidades:**
|
|
501
|
+
- 📂 Carregar arquivos JSON do computador
|
|
502
|
+
- ✏️ Editar tokens com editor visual ou código
|
|
503
|
+
- ✅ Validação JSON em tempo real
|
|
504
|
+
- 💾 Salvar/Download de arquivos JSON
|
|
505
|
+
- 🔨 Gerar formatos (requer servidor backend - opcional)
|
|
506
|
+
- 👁️ Preview dos arquivos gerados
|
|
507
|
+
- ⌨️ Atalhos de teclado (Ctrl+S, Ctrl+Shift+F, Ctrl+B)
|
|
508
|
+
|
|
509
|
+
**Documentação completa**: Veja [Token Editor README](./token-editor/README.md)
|
|
510
|
+
|
|
511
|
+
### 🧪 Testes
|
|
512
|
+
|
|
513
|
+
Suíte completa de testes com **302 casos de teste** cobrindo toda a funcionalidade, incluindo **100% de cobertura do Token Editor** (168 testes específicos + testes E2E).
|
|
514
|
+
|
|
515
|
+
**Executar testes:**
|
|
516
|
+
```bash
|
|
517
|
+
pnpm test # Executa todos os testes
|
|
518
|
+
pnpm test:watch # Modo watch (desenvolvimento)
|
|
519
|
+
pnpm test:coverage # Com relatório de cobertura
|
|
520
|
+
```
|
|
521
|
+
|
|
522
|
+
**Cobertura:**
|
|
523
|
+
- ✅ Tokens estrutura e exportações
|
|
524
|
+
- ✅ Tokens utilitários (Tailwind classes)
|
|
525
|
+
- ✅ Utilitários de acessibilidade (WCAG)
|
|
526
|
+
- ✅ Estrutura de temas (light/dark)
|
|
527
|
+
- ✅ **Token Editor (100% de cobertura - 168 testes + E2E)**
|
|
528
|
+
- ✅ TypeScript types
|
|
529
|
+
- ✅ Casos de uso reais
|
|
530
|
+
|
|
531
|
+
Veja [Testes README](./tests/README.md) para mais detalhes.
|
|
532
|
+
|
|
533
|
+
### 📚 Storybook - Visualização dos Tokens
|
|
534
|
+
|
|
535
|
+
O Storybook da lib documenta **apenas design tokens**, não componentes UI.
|
|
536
|
+
|
|
537
|
+
**Stories disponíveis:**
|
|
538
|
+
- 🎨 **ColorPalette** - Paletas completas de cores (Light & Dark)
|
|
539
|
+
- 🎭 **ThemePreview** - Preview dos temas mostrando tokens em ação
|
|
540
|
+
- 📝 **Typography** - Sistema completo de tipografia
|
|
541
|
+
- 📏 **Spacing** - Escala de espaçamento (8pt grid)
|
|
542
|
+
- 🔲 **Radius** - Raios de borda
|
|
543
|
+
- 🌑 **Shadows** - Sombras e efeitos glow
|
|
544
|
+
- 🎬 **Animations** - Animações e keyframes (accordion, slide-in, fade-in)
|
|
545
|
+
|
|
546
|
+
**Separação de responsabilidades:**
|
|
547
|
+
- ✅ **Este Storybook**: Apenas tokens (cores, tipografia, espaçamento, etc.)
|
|
548
|
+
- ✅ **Storybook do Frontend**: Componentes UI (Button, Card, etc.)
|
|
549
|
+
|
|
550
|
+
Para mais detalhes sobre a estrutura, consulte [**Estrutura do Storybook**](./docs/06-ESTRUTURA_STORYBOOK.md).
|
|
551
|
+
|
|
552
|
+
---
|
|
553
|
+
|
|
554
|
+
## 🤝 Contributing
|
|
555
|
+
|
|
556
|
+
Contributions are welcome! Please read our [Contributing Guide](./docs/CONTRIBUINDO.md) first.
|
|
557
|
+
|
|
558
|
+
---
|
|
559
|
+
|
|
560
|
+
## 📄 License
|
|
561
|
+
|
|
562
|
+
MIT © [Rainer Teixeira](https://github.com/RainerTeixeira)
|
|
563
|
+
|
|
564
|
+
---
|
|
565
|
+
|
|
566
|
+
## 🔗 Links
|
|
567
|
+
|
|
568
|
+
- **GitHub**: [RainerTeixeira/rainer-design-tokens](https://github.com/RainerTeixeira/rainer-design-tokens)
|
|
569
|
+
- **NPM**: [@rainersoft/design-tokens](https://www.npmjs.com/package/@rainersoft/design-tokens)
|
|
570
|
+
- **Website**: [rainersoft.com.br](https://rainersoft.com.br)
|
|
571
|
+
- **Email**: suporte@rainersoft.com.br
|
|
572
|
+
|
|
573
|
+
## 🛠️ Tech Stack
|
|
574
|
+
|
|
575
|
+
- **Language**: TypeScript 5.3+ (strict mode)
|
|
576
|
+
- **Package Manager**: pnpm 9+
|
|
577
|
+
- **Build Tool**: tsup (TypeScript bundler)
|
|
578
|
+
- **Linter**: ESLint + TypeScript ESLint
|
|
579
|
+
- **Formatter**: Prettier
|
|
580
|
+
- **Testing**: Jest
|
|
581
|
+
- **Documentation**: Storybook 10
|
|
582
|
+
- **Publish**: GitHub Actions (GitHub Packages + npm)
|
|
583
|
+
|
|
584
|
+
---
|
|
585
|
+
|
|
586
|
+
<div align="center">
|
|
587
|
+
|
|
588
|
+
**Made with ❤️ by Rainer Teixeira**
|
|
589
|
+
|
|
590
|
+
|
|
591
|
+
|
|
592
|
+
|
|
593
|
+
</div>
|