@adddog/design-tokens 0.0.2

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 (27) hide show
  1. package/README.md +356 -0
  2. package/design-tokens.config.ts +52 -0
  3. package/dist/cli.cjs +334 -0
  4. package/dist/cli.cjs.map +1 -0
  5. package/dist/cli.d.cts +1 -0
  6. package/dist/cli.d.mts +1 -0
  7. package/dist/cli.d.ts +1 -0
  8. package/dist/cli.mjs +327 -0
  9. package/dist/cli.mjs.map +1 -0
  10. package/dist/index.cjs +616 -0
  11. package/dist/index.cjs.map +1 -0
  12. package/dist/index.d.cts +814 -0
  13. package/dist/index.d.mts +814 -0
  14. package/dist/index.d.ts +814 -0
  15. package/dist/index.mjs +606 -0
  16. package/dist/index.mjs.map +1 -0
  17. package/dist/shared/design-tokens.CU0UQL81.mjs +364 -0
  18. package/dist/shared/design-tokens.CU0UQL81.mjs.map +1 -0
  19. package/dist/shared/design-tokens.DqoFGn31.cjs +375 -0
  20. package/dist/shared/design-tokens.DqoFGn31.cjs.map +1 -0
  21. package/output/dark.css +632 -0
  22. package/output/dark.scss +458 -0
  23. package/output/dark.ts +149 -0
  24. package/output/light.css +632 -0
  25. package/output/light.scss +458 -0
  26. package/output/light.ts +149 -0
  27. package/package.json +91 -0
package/README.md ADDED
@@ -0,0 +1,356 @@
1
+ # @adddog/design-tokens
2
+
3
+ A configurable design token library built on [Style Dictionary](https://amzn.github.io/style-dictionary/) with CLI support for generating themes, colors, and design system tokens.
4
+
5
+ ## Features
6
+
7
+ - 🎨 **Dynamic theme generation** from configuration files
8
+ - 🔧 **CLI tool** for building and managing tokens
9
+ - 🎯 **Multiple output formats**: CSS, SCSS, TypeScript, JSON
10
+ - 🌗 **Theme inheritance** for easy variant creation
11
+ - 👀 **Watch mode** for automatic rebuilds
12
+ - ✅ **Built-in validation** for configuration
13
+ - 📦 **Programmatic API** for advanced usage
14
+
15
+ ## Installation
16
+
17
+ ```bash
18
+ npm install @adddog/design-tokens
19
+ # or
20
+ pnpm add @adddog/design-tokens
21
+ # or
22
+ yarn add @adddog/design-tokens
23
+ ```
24
+
25
+ ## Quick Start
26
+
27
+ ### 1. Initialize Configuration
28
+
29
+ ```bash
30
+ npx design-tokens init
31
+ ```
32
+
33
+ This creates a `design-tokens.config.ts` (or `.js`, `.mjs`) file in your project.
34
+
35
+ ### 2. Define Your Themes
36
+
37
+ Edit the generated config file:
38
+
39
+ ```typescript
40
+ import { defineConfig } from '@adddog/design-tokens';
41
+
42
+ export default defineConfig({
43
+ themes: [
44
+ {
45
+ name: 'light',
46
+ colors: {
47
+ primary0: '#ffffff',
48
+ primary500: '#6E7076',
49
+ primary950: '#000000',
50
+ accent500: '#2C42D3',
51
+ // ... more color tokens
52
+ }
53
+ },
54
+ {
55
+ name: 'dark',
56
+ extends: 'light', // Inherit from light theme
57
+ colors: {
58
+ primary0: '#000000',
59
+ primary950: '#ffffff',
60
+ // Only override what's different
61
+ }
62
+ }
63
+ ],
64
+ output: {
65
+ directory: './tokens',
66
+ formats: ['css', 'scss', 'ts'],
67
+ prefix: 'dt',
68
+ },
69
+ });
70
+ ```
71
+
72
+ ### 3. Build Your Tokens
73
+
74
+ ```bash
75
+ npx design-tokens build
76
+ ```
77
+
78
+ This generates token files in your specified output directory:
79
+ - `tokens/light.css`
80
+ - `tokens/dark.css`
81
+ - `tokens/light.scss`
82
+ - `tokens/dark.scss`
83
+ - etc.
84
+
85
+ ### 4. Use Generated Tokens
86
+
87
+ In your CSS:
88
+ ```css
89
+ @import './tokens/light.css';
90
+
91
+ /* Tokens are available as CSS custom properties */
92
+ .button {
93
+ background-color: var(--dt-color-accent500);
94
+ color: var(--dt-color-primary950);
95
+ }
96
+ ```
97
+
98
+ In your HTML:
99
+ ```html
100
+ <html class="light">
101
+ <!-- Your app -->
102
+ </html>
103
+ ```
104
+
105
+ Switch themes by changing the class:
106
+ ```html
107
+ <html class="dark">
108
+ <!-- Now using dark theme -->
109
+ </html>
110
+ ```
111
+
112
+ ## CLI Commands
113
+
114
+ ### `design-tokens init`
115
+
116
+ Create a starter configuration file.
117
+
118
+ ```bash
119
+ npx design-tokens init [options]
120
+
121
+ Options:
122
+ -f, --force Overwrite existing config file
123
+ ```
124
+
125
+ ### `design-tokens build`
126
+
127
+ Build design tokens from configuration.
128
+
129
+ ```bash
130
+ npx design-tokens build [options]
131
+
132
+ Options:
133
+ -c, --config <path> Path to config file
134
+ -w, --watch Watch for changes and rebuild
135
+ ```
136
+
137
+ ### `design-tokens validate`
138
+
139
+ Validate your configuration file.
140
+
141
+ ```bash
142
+ npx design-tokens validate [options]
143
+
144
+ Options:
145
+ -c, --config <path> Path to config file
146
+ ```
147
+
148
+ ## Configuration
149
+
150
+ ### Full Configuration Example
151
+
152
+ ```typescript
153
+ import { defineConfig } from '@adddog/design-tokens';
154
+
155
+ export default defineConfig({
156
+ // Required: Define your themes
157
+ themes: [
158
+ {
159
+ name: 'light',
160
+ colors: {
161
+ // Semantic color tokens
162
+ primary0: '#ffffff',
163
+ primary500: '#6E7076',
164
+ primary950: '#000000',
165
+ accent500: '#2C42D3',
166
+ positive500: '#20C557',
167
+ negative500: '#D63333',
168
+ warning500: '#FFB800',
169
+ }
170
+ },
171
+ {
172
+ name: 'dark',
173
+ extends: 'light', // Optional: inherit from another theme
174
+ colors: {
175
+ primary0: '#000000',
176
+ primary950: '#ffffff',
177
+ }
178
+ }
179
+ ],
180
+
181
+ // Optional: Base colors shared across themes
182
+ baseColors: {
183
+ white: '#ffffff',
184
+ black: '#000000',
185
+ blue500: '#2C42D3',
186
+ // Can reference in themes: { value: '{color.blue500}' }
187
+ },
188
+
189
+ // Optional: Sizing tokens
190
+ sizing: {
191
+ spacing0: { value: '0' },
192
+ spacing1: { value: '4px' },
193
+ spacing2: { value: '8px' },
194
+ spacing4: { value: '16px' },
195
+ spacing8: { value: '64px' },
196
+ },
197
+
198
+ // Optional: Font tokens
199
+ font: {
200
+ family: { value: 'system-ui, sans-serif' },
201
+ sizeXs: { value: '12px' },
202
+ sizeSm: { value: '14px' },
203
+ sizeMd: { value: '16px' },
204
+ sizeLg: { value: '18px' },
205
+ },
206
+
207
+ // Output configuration
208
+ output: {
209
+ directory: './tokens', // Where to output files
210
+ formats: ['css', 'scss', 'ts'], // Output formats
211
+ prefix: 'dt', // CSS variable prefix
212
+ },
213
+ });
214
+ ```
215
+
216
+ ### Theme Inheritance
217
+
218
+ Themes can extend other themes to reduce duplication:
219
+
220
+ ```typescript
221
+ themes: [
222
+ {
223
+ name: 'base',
224
+ colors: {
225
+ primary500: '#6E7076',
226
+ accent500: '#2C42D3',
227
+ }
228
+ },
229
+ {
230
+ name: 'light',
231
+ extends: 'base',
232
+ colors: {
233
+ primary0: '#ffffff',
234
+ primary950: '#000000',
235
+ }
236
+ },
237
+ {
238
+ name: 'dark',
239
+ extends: 'base',
240
+ colors: {
241
+ primary0: '#000000',
242
+ primary950: '#ffffff',
243
+ }
244
+ },
245
+ {
246
+ name: 'high-contrast',
247
+ extends: 'dark',
248
+ colors: {
249
+ accent500: '#00FF00', // Override for accessibility
250
+ }
251
+ }
252
+ ]
253
+ ```
254
+
255
+ ## Programmatic API
256
+
257
+ You can also use the library programmatically:
258
+
259
+ ```typescript
260
+ import { buildTokens, loadConfig, resolveConfig } from '@adddog/design-tokens';
261
+
262
+ async function build() {
263
+ const userConfig = await loadConfig('./my-tokens.config.ts');
264
+ const config = resolveConfig(userConfig);
265
+ const result = await buildTokens(config);
266
+
267
+ if (result.success) {
268
+ console.log('Generated:', result.generatedFiles);
269
+ } else {
270
+ console.error('Errors:', result.errors);
271
+ }
272
+ }
273
+ ```
274
+
275
+ ## Output Formats
276
+
277
+ ### CSS Variables
278
+
279
+ ```css
280
+ .light {
281
+ --dt-color-primary0: #ffffff;
282
+ --dt-color-primary500: #6E7076;
283
+ --dt-color-accent500: #2C42D3;
284
+ }
285
+ ```
286
+
287
+ ### SCSS Variables
288
+
289
+ ```scss
290
+ $color-primary0: #ffffff;
291
+ $color-primary500: #6E7076;
292
+ $color-accent500: #2C42D3;
293
+ ```
294
+
295
+ ### TypeScript
296
+
297
+ ```typescript
298
+ export const colorPrimary0 = "#ffffff";
299
+ export const colorPrimary500 = "#6E7076";
300
+ export const colorAccent500 = "#2C42D3";
301
+ ```
302
+
303
+ ## Internal Monorepo Usage
304
+
305
+ This package is also used internally within the monorepo. The workflow is:
306
+
307
+ ### For Maintainers
308
+
309
+ 1. **Edit the config**: Modify `design-tokens.config.ts` in the package root
310
+ 2. **Build**: Run `pnpm build` to:
311
+ - Build the library (CLI + API)
312
+ - Generate internal tokens to `output/`
313
+ 3. **Commit**: The generated `output/` files are committed to the repo
314
+
315
+ ### For Consumers (Other Monorepo Packages)
316
+
317
+ Import the pre-generated tokens directly:
318
+
319
+ ```typescript
320
+ import { DarkThemeTokens, LightThemeTokens } from '@adddog/design-tokens';
321
+ // or
322
+ import '@adddog/design-tokens/light.css';
323
+ import '@adddog/design-tokens/dark.css';
324
+ ```
325
+
326
+ The internal build uses the same library API as external consumers, so everything stays in sync!
327
+
328
+ ## TypeScript Support
329
+
330
+ The package includes full TypeScript definitions. All configuration types are exported:
331
+
332
+ ```typescript
333
+ import type {
334
+ UserConfig,
335
+ ThemeDefinition,
336
+ OutputConfig
337
+ } from '@adddog/design-tokens';
338
+ ```
339
+
340
+ ## Scripts
341
+
342
+ | Script | Description |
343
+ |--------|-------------|
344
+ | `build` | Build library and generate internal tokens |
345
+ | `build:cli` | Build CLI only |
346
+ | `lint` | Lint codebase |
347
+ | `lint:fix` | Fix linting issues |
348
+ | `types` | Type check |
349
+
350
+ ## License
351
+
352
+ MIT
353
+
354
+ ## Contributing
355
+
356
+ This package is part of a monorepo. See the main repository README for contribution guidelines.
package/design-tokens.config.ts ADDED
@@ -0,0 +1,52 @@
1
+ /**
2
+ * Internal monorepo configuration for @adddog/design-tokens
3
+ * This config imports from existing token files to maintain compatibility
4
+ * with the generateRGB() utility that creates rgb/hsl/oklch variants
5
+ */
6
+ import { defineConfig } from "./src/index";
7
+ import { color as darkColors } from "./src/tokens/color/dark";
8
+ import { color as lightColors } from "./src/tokens/color/light";
9
+ import { color as sharedColors } from "./src/tokens/shared/color";
10
+ import { font } from "./src/tokens/shared/font";
11
+ import { sizing } from "./src/tokens/shared/sizing";
12
+
13
+ /**
14
+ * Convert the generated token format to the config format
15
+ * The existing tokens already have rgb/hsl/oklch variants from generateRGB()
16
+ */
17
+ function convertTokensToConfig(tokens: Record<string, { value: string }>) {
18
+ const result: Record<string, string> = {};
19
+ for (const [key, val] of Object.entries(tokens)) {
20
+ result[key] = val.value;
21
+ }
22
+ return result;
23
+ }
24
+
25
+ export default defineConfig({
26
+ themes: [
27
+ {
28
+ name: "light",
29
+ colors: convertTokensToConfig(lightColors),
30
+ },
31
+ {
32
+ name: "dark",
33
+ colors: convertTokensToConfig(darkColors),
34
+ },
35
+ ],
36
+
37
+ // Base colors shared across all themes
38
+ baseColors: convertTokensToConfig(sharedColors),
39
+
40
+ // Sizing tokens
41
+ sizing,
42
+
43
+ // Font tokens
44
+ font,
45
+
46
+ // Output configuration
47
+ output: {
48
+ directory: "./output",
49
+ formats: ["css", "scss", "ts"],
50
+ prefix: "ai",
51
+ },
52
+ });