@nice2dev/design-tokens 1.0.28
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 +221 -0
- package/dist/chunk-GJ4A7ZWW.js +1242 -0
- package/dist/chunk-MCKGQKYU.js +15 -0
- package/dist/cli/index.cjs +3018 -0
- package/dist/cli/index.d.cts +1 -0
- package/dist/cli/index.d.ts +1 -0
- package/dist/cli/index.js +363 -0
- package/dist/esm-YLJOW3XL.js +1703 -0
- package/dist/index.cjs +3880 -0
- package/dist/index.d.cts +856 -0
- package/dist/index.d.ts +856 -0
- package/dist/index.js +2628 -0
- package/package.json +59 -0
- package/tokens/animation.json +147 -0
- package/tokens/colors.json +184 -0
- package/tokens/components.json +201 -0
- package/tokens/effects.json +206 -0
- package/tokens/spacing.json +105 -0
- package/tokens/themes.json +193 -0
- package/tokens/typography.json +219 -0
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,856 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* W3C Design Token types
|
|
3
|
+
* @see https://tr.designtokens.org/format/
|
|
4
|
+
*/
|
|
5
|
+
type TokenType = 'color' | 'dimension' | 'fontFamily' | 'fontWeight' | 'duration' | 'cubicBezier' | 'number' | 'strokeStyle' | 'border' | 'transition' | 'shadow' | 'gradient' | 'typography' | 'fontStyle';
|
|
6
|
+
/**
|
|
7
|
+
* Shadow value (can be single or array of shadows)
|
|
8
|
+
*/
|
|
9
|
+
interface ShadowValue {
|
|
10
|
+
offsetX: string;
|
|
11
|
+
offsetY: string;
|
|
12
|
+
blur: string;
|
|
13
|
+
spread: string;
|
|
14
|
+
color: string;
|
|
15
|
+
inset?: boolean;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Typography composite value
|
|
19
|
+
*/
|
|
20
|
+
interface TypographyValue {
|
|
21
|
+
fontFamily: string;
|
|
22
|
+
fontSize: string;
|
|
23
|
+
fontWeight: string | number;
|
|
24
|
+
lineHeight?: string | number;
|
|
25
|
+
letterSpacing?: string;
|
|
26
|
+
fontStyle?: string;
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* Border composite value
|
|
30
|
+
*/
|
|
31
|
+
interface BorderValue {
|
|
32
|
+
color: string;
|
|
33
|
+
width: string;
|
|
34
|
+
style: string;
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* Gradient stop
|
|
38
|
+
*/
|
|
39
|
+
interface GradientStop {
|
|
40
|
+
color: string;
|
|
41
|
+
position: number;
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* Gradient value
|
|
45
|
+
*/
|
|
46
|
+
interface GradientValue {
|
|
47
|
+
type: 'linear' | 'radial' | 'conic';
|
|
48
|
+
angle?: number;
|
|
49
|
+
stops: GradientStop[];
|
|
50
|
+
}
|
|
51
|
+
/**
|
|
52
|
+
* Token value types
|
|
53
|
+
*/
|
|
54
|
+
type TokenValue = string | number | string[] | number[] | ShadowValue | ShadowValue[] | TypographyValue | BorderValue | GradientValue;
|
|
55
|
+
/**
|
|
56
|
+
* Single design token
|
|
57
|
+
*/
|
|
58
|
+
interface DesignToken {
|
|
59
|
+
$value: TokenValue;
|
|
60
|
+
$type?: TokenType;
|
|
61
|
+
$description?: string;
|
|
62
|
+
$extensions?: Record<string, unknown>;
|
|
63
|
+
}
|
|
64
|
+
/**
|
|
65
|
+
* Token group (can contain tokens or nested groups)
|
|
66
|
+
*/
|
|
67
|
+
interface TokenGroup {
|
|
68
|
+
$type?: TokenType;
|
|
69
|
+
$description?: string;
|
|
70
|
+
$extensions?: Record<string, unknown>;
|
|
71
|
+
[key: string]: DesignToken | TokenGroup | TokenType | string | undefined | Record<string, unknown>;
|
|
72
|
+
}
|
|
73
|
+
/**
|
|
74
|
+
* Token file root
|
|
75
|
+
*/
|
|
76
|
+
interface TokenFile extends TokenGroup {
|
|
77
|
+
$name?: string;
|
|
78
|
+
$version?: string;
|
|
79
|
+
$description?: string;
|
|
80
|
+
}
|
|
81
|
+
/**
|
|
82
|
+
* Resolved (flattened) token with path
|
|
83
|
+
*/
|
|
84
|
+
interface ResolvedToken {
|
|
85
|
+
path: string[];
|
|
86
|
+
name: string;
|
|
87
|
+
value: TokenValue;
|
|
88
|
+
resolvedValue: string;
|
|
89
|
+
type?: TokenType;
|
|
90
|
+
description?: string;
|
|
91
|
+
cssVariable: string;
|
|
92
|
+
references?: string[];
|
|
93
|
+
}
|
|
94
|
+
/**
|
|
95
|
+
* Token collection (all resolved tokens)
|
|
96
|
+
*/
|
|
97
|
+
interface TokenCollection {
|
|
98
|
+
tokens: ResolvedToken[];
|
|
99
|
+
byPath: Map<string, ResolvedToken>;
|
|
100
|
+
byName: Map<string, ResolvedToken>;
|
|
101
|
+
/** Optional theme variants (e.g. dark, high-contrast) keyed by theme name. */
|
|
102
|
+
themes?: Record<string, ResolvedToken[]>;
|
|
103
|
+
}
|
|
104
|
+
/**
|
|
105
|
+
* Output format
|
|
106
|
+
*/
|
|
107
|
+
type OutputFormat = 'css' | 'scss' | 'js' | 'ts' | 'json' | 'tailwind';
|
|
108
|
+
/**
|
|
109
|
+
* Generator options
|
|
110
|
+
*/
|
|
111
|
+
interface GeneratorOptions {
|
|
112
|
+
/** Output format(s) */
|
|
113
|
+
formats: OutputFormat[];
|
|
114
|
+
/** Output directory */
|
|
115
|
+
outputDir: string;
|
|
116
|
+
/** CSS variable prefix (default: 'nice') */
|
|
117
|
+
prefix?: string;
|
|
118
|
+
/** Include primitive tokens */
|
|
119
|
+
includePrimitives?: boolean;
|
|
120
|
+
/** Separate files by category */
|
|
121
|
+
separateFiles?: boolean;
|
|
122
|
+
/** Include dark mode */
|
|
123
|
+
includeDarkMode?: boolean;
|
|
124
|
+
/** Include component tokens */
|
|
125
|
+
includeComponents?: boolean;
|
|
126
|
+
/** Token file paths */
|
|
127
|
+
tokenFiles?: string[];
|
|
128
|
+
}
|
|
129
|
+
/**
|
|
130
|
+
* Theme definition
|
|
131
|
+
*/
|
|
132
|
+
interface ThemeDefinition {
|
|
133
|
+
name: string;
|
|
134
|
+
tokens: TokenCollection;
|
|
135
|
+
extends?: string;
|
|
136
|
+
selector?: string;
|
|
137
|
+
mediaQuery?: string;
|
|
138
|
+
}
|
|
139
|
+
/**
|
|
140
|
+
* Transform function
|
|
141
|
+
*/
|
|
142
|
+
type TokenTransform = (token: ResolvedToken) => string;
|
|
143
|
+
/**
|
|
144
|
+
* Plugin for extending generator
|
|
145
|
+
*/
|
|
146
|
+
interface GeneratorPlugin {
|
|
147
|
+
name: string;
|
|
148
|
+
beforeResolve?: (tokens: TokenFile[]) => TokenFile[];
|
|
149
|
+
afterResolve?: (collection: TokenCollection) => TokenCollection;
|
|
150
|
+
customFormat?: (collection: TokenCollection, options: GeneratorOptions) => string;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
/**
|
|
154
|
+
* Check if value is a design token (has $value)
|
|
155
|
+
*/
|
|
156
|
+
declare function isDesignToken(obj: unknown): obj is DesignToken;
|
|
157
|
+
/**
|
|
158
|
+
* Check if value is a token group
|
|
159
|
+
*/
|
|
160
|
+
declare function isTokenGroup(obj: unknown): obj is TokenGroup;
|
|
161
|
+
/**
|
|
162
|
+
* Check if value is a reference (e.g., "{color.blue.500}")
|
|
163
|
+
*/
|
|
164
|
+
declare function isReference(value: unknown): value is string;
|
|
165
|
+
/**
|
|
166
|
+
* Extract reference path from reference string
|
|
167
|
+
*/
|
|
168
|
+
declare function extractReferencePath(ref: string): string[];
|
|
169
|
+
/**
|
|
170
|
+
* Convert token path to CSS variable name
|
|
171
|
+
*/
|
|
172
|
+
declare function pathToCssVariable(path: string[], prefix?: string): string;
|
|
173
|
+
/**
|
|
174
|
+
* Convert token path to dot notation
|
|
175
|
+
*/
|
|
176
|
+
declare function pathToString(path: string[]): string;
|
|
177
|
+
/**
|
|
178
|
+
* Parse a single token file
|
|
179
|
+
*/
|
|
180
|
+
declare function parseTokenFile(filePath: string): TokenFile;
|
|
181
|
+
/**
|
|
182
|
+
* Parse multiple token files and merge them
|
|
183
|
+
*/
|
|
184
|
+
declare function parseTokenFiles(filePaths: string[]): TokenFile;
|
|
185
|
+
/**
|
|
186
|
+
* Merge two token files (source into target)
|
|
187
|
+
*/
|
|
188
|
+
declare function mergeTokenFiles(target: TokenFile, source: TokenFile): void;
|
|
189
|
+
/**
|
|
190
|
+
* Flatten token file into resolved tokens
|
|
191
|
+
*/
|
|
192
|
+
declare function flattenTokens(tokenFile: TokenFile, prefix?: string[], inheritedType?: TokenType): ResolvedToken[];
|
|
193
|
+
/**
|
|
194
|
+
* Find all references in a token value
|
|
195
|
+
*/
|
|
196
|
+
declare function findReferences(value: TokenValue, refs: string[]): void;
|
|
197
|
+
/**
|
|
198
|
+
* Create a token collection from resolved tokens
|
|
199
|
+
*/
|
|
200
|
+
declare function createTokenCollection(tokens: ResolvedToken[]): TokenCollection;
|
|
201
|
+
/**
|
|
202
|
+
* Parse all token files from a directory
|
|
203
|
+
*/
|
|
204
|
+
declare function parseTokenDirectory(dirPath: string, pattern?: string): TokenCollection;
|
|
205
|
+
/**
|
|
206
|
+
* Get token by path
|
|
207
|
+
*/
|
|
208
|
+
declare function getTokenByPath(collection: TokenCollection, path: string | string[]): ResolvedToken | undefined;
|
|
209
|
+
/**
|
|
210
|
+
* Filter tokens by type
|
|
211
|
+
*/
|
|
212
|
+
declare function filterTokensByType(collection: TokenCollection, type: TokenType): ResolvedToken[];
|
|
213
|
+
/**
|
|
214
|
+
* Filter tokens by path prefix
|
|
215
|
+
*/
|
|
216
|
+
declare function filterTokensByPath(collection: TokenCollection, prefix: string): ResolvedToken[];
|
|
217
|
+
/**
|
|
218
|
+
* Get all unique categories (top-level paths)
|
|
219
|
+
*/
|
|
220
|
+
declare function getCategories(collection: TokenCollection): string[];
|
|
221
|
+
|
|
222
|
+
/**
|
|
223
|
+
* Default generator options
|
|
224
|
+
*/
|
|
225
|
+
declare const defaultOptions: GeneratorOptions;
|
|
226
|
+
/**
|
|
227
|
+
* Token generator
|
|
228
|
+
*/
|
|
229
|
+
declare class TokenGenerator {
|
|
230
|
+
private options;
|
|
231
|
+
private plugins;
|
|
232
|
+
private collection;
|
|
233
|
+
private themes;
|
|
234
|
+
constructor(options?: Partial<GeneratorOptions>);
|
|
235
|
+
/**
|
|
236
|
+
* Add plugin
|
|
237
|
+
*/
|
|
238
|
+
use(plugin: GeneratorPlugin): this;
|
|
239
|
+
/**
|
|
240
|
+
* Load tokens from files
|
|
241
|
+
*/
|
|
242
|
+
load(files: string[]): this;
|
|
243
|
+
/**
|
|
244
|
+
* Load tokens from directory
|
|
245
|
+
*/
|
|
246
|
+
loadDirectory(dir: string, pattern?: string): this;
|
|
247
|
+
/**
|
|
248
|
+
* Add theme
|
|
249
|
+
*/
|
|
250
|
+
addTheme(name: string, overrideTokens?: TokenCollection): this;
|
|
251
|
+
/**
|
|
252
|
+
* Generate output files
|
|
253
|
+
*/
|
|
254
|
+
generate(): Promise<void>;
|
|
255
|
+
/**
|
|
256
|
+
* Generate single format
|
|
257
|
+
*/
|
|
258
|
+
private generateFormat;
|
|
259
|
+
/**
|
|
260
|
+
* Generate single output file
|
|
261
|
+
*/
|
|
262
|
+
private generateSingleFile;
|
|
263
|
+
/**
|
|
264
|
+
* Generate separate files by category
|
|
265
|
+
*/
|
|
266
|
+
private generateSeparateFiles;
|
|
267
|
+
/**
|
|
268
|
+
* Generate index file for separated files
|
|
269
|
+
*/
|
|
270
|
+
private generateIndexFile;
|
|
271
|
+
/**
|
|
272
|
+
* Transform collection to format
|
|
273
|
+
*/
|
|
274
|
+
private transform;
|
|
275
|
+
/**
|
|
276
|
+
* Build nested object from flat tokens
|
|
277
|
+
*/
|
|
278
|
+
private buildNestedObject;
|
|
279
|
+
/**
|
|
280
|
+
* Get file extension for format
|
|
281
|
+
*/
|
|
282
|
+
private getExtension;
|
|
283
|
+
/**
|
|
284
|
+
* Generate theme-related files
|
|
285
|
+
*/
|
|
286
|
+
private generateThemeFiles;
|
|
287
|
+
/**
|
|
288
|
+
* Get generated token collection
|
|
289
|
+
*/
|
|
290
|
+
getCollection(): TokenCollection | null;
|
|
291
|
+
/**
|
|
292
|
+
* Get generated themes
|
|
293
|
+
*/
|
|
294
|
+
getThemes(): ThemeDefinition[];
|
|
295
|
+
}
|
|
296
|
+
/**
|
|
297
|
+
* Create generator instance
|
|
298
|
+
*/
|
|
299
|
+
declare function createGenerator(options?: Partial<GeneratorOptions>): TokenGenerator;
|
|
300
|
+
/**
|
|
301
|
+
* Quick generate function
|
|
302
|
+
*/
|
|
303
|
+
declare function generateTokens(tokenDir: string, outputDir: string, options?: Partial<GeneratorOptions>): Promise<void>;
|
|
304
|
+
|
|
305
|
+
/**
|
|
306
|
+
* Resolve all references in a token collection
|
|
307
|
+
*/
|
|
308
|
+
declare function resolveTokens(collection: TokenCollection): TokenCollection;
|
|
309
|
+
/**
|
|
310
|
+
* Resolve a single token value
|
|
311
|
+
*/
|
|
312
|
+
declare function resolveTokenValue(value: TokenValue, collection: TokenCollection, depth: number): string;
|
|
313
|
+
/**
|
|
314
|
+
* Resolve reference to CSS variable usage
|
|
315
|
+
*/
|
|
316
|
+
declare function resolveToVariable(value: TokenValue, collection: TokenCollection, _prefix?: string): string;
|
|
317
|
+
/**
|
|
318
|
+
* Get dependency graph for tokens
|
|
319
|
+
*/
|
|
320
|
+
declare function getDependencyGraph(collection: TokenCollection): Map<string, Set<string>>;
|
|
321
|
+
/**
|
|
322
|
+
* Topologically sort tokens by dependencies
|
|
323
|
+
*/
|
|
324
|
+
declare function sortTokensByDependencies(collection: TokenCollection): ResolvedToken[];
|
|
325
|
+
/**
|
|
326
|
+
* Check for circular references
|
|
327
|
+
*/
|
|
328
|
+
declare function checkCircularReferences(collection: TokenCollection): string[][];
|
|
329
|
+
|
|
330
|
+
/**
|
|
331
|
+
* Transform hex color to RGB
|
|
332
|
+
*/
|
|
333
|
+
declare function hexToRgb(hex: string): Promise<string>;
|
|
334
|
+
/**
|
|
335
|
+
* Transform hex color to HSL
|
|
336
|
+
*/
|
|
337
|
+
declare function hexToHsl(hex: string): Promise<string>;
|
|
338
|
+
/**
|
|
339
|
+
* Transform hex color to OKLCH (modern color space)
|
|
340
|
+
*/
|
|
341
|
+
declare function hexToOklch(hex: string): Promise<string>;
|
|
342
|
+
/**
|
|
343
|
+
* Lighten a color by percentage
|
|
344
|
+
*/
|
|
345
|
+
declare function lightenColor(hex: string, amount: number): Promise<string>;
|
|
346
|
+
/**
|
|
347
|
+
* Darken a color by percentage
|
|
348
|
+
*/
|
|
349
|
+
declare function darkenColor(hex: string, amount: number): Promise<string>;
|
|
350
|
+
/**
|
|
351
|
+
* Calculate contrast ratio between two colors
|
|
352
|
+
*/
|
|
353
|
+
declare function getContrastRatio$1(fg: string, bg: string): Promise<number>;
|
|
354
|
+
/**
|
|
355
|
+
* Find accessible text color for background
|
|
356
|
+
*/
|
|
357
|
+
declare function getAccessibleTextColor(bgColor: string): Promise<string>;
|
|
358
|
+
/**
|
|
359
|
+
* Generate color scale from base color
|
|
360
|
+
*/
|
|
361
|
+
declare function generateColorScale$1(baseColor: string, steps?: number): Promise<Record<string, string>>;
|
|
362
|
+
/**
|
|
363
|
+
* Transform dimension to rem
|
|
364
|
+
*/
|
|
365
|
+
declare function pxToRem(px: string | number, baseFontSize?: number): string;
|
|
366
|
+
/**
|
|
367
|
+
* Transform rem to px
|
|
368
|
+
*/
|
|
369
|
+
declare function remToPx(rem: string | number, baseFontSize?: number): string;
|
|
370
|
+
/**
|
|
371
|
+
* Transform dimension to em
|
|
372
|
+
*/
|
|
373
|
+
declare function pxToEm(px: string | number, context?: number): string;
|
|
374
|
+
/**
|
|
375
|
+
* Transform font weight name to number
|
|
376
|
+
*/
|
|
377
|
+
declare function fontWeightToNumber(weight: string): number;
|
|
378
|
+
/**
|
|
379
|
+
* Transform cubic bezier to CSS
|
|
380
|
+
*/
|
|
381
|
+
declare function cubicBezierToCss(values: number[]): string;
|
|
382
|
+
/**
|
|
383
|
+
* Transform duration to milliseconds
|
|
384
|
+
*/
|
|
385
|
+
declare function durationToMs(duration: string): number;
|
|
386
|
+
/**
|
|
387
|
+
* Transform tokens to CSS custom properties
|
|
388
|
+
*/
|
|
389
|
+
declare function transformToCss(collection: TokenCollection, prefix?: string): string;
|
|
390
|
+
/**
|
|
391
|
+
* Transform tokens to SCSS variables
|
|
392
|
+
*/
|
|
393
|
+
declare function transformToScss(collection: TokenCollection, prefix?: string): string;
|
|
394
|
+
/**
|
|
395
|
+
* Transform tokens to JavaScript object
|
|
396
|
+
*/
|
|
397
|
+
declare function transformToJs(collection: TokenCollection, variableName?: string): string;
|
|
398
|
+
/**
|
|
399
|
+
* Transform tokens to TypeScript with types
|
|
400
|
+
*/
|
|
401
|
+
declare function transformToTs(collection: TokenCollection, variableName?: string): string;
|
|
402
|
+
/**
|
|
403
|
+
* Build nested token object from flat collection
|
|
404
|
+
*/
|
|
405
|
+
declare function buildTokenObject(collection: TokenCollection): Record<string, unknown>;
|
|
406
|
+
/**
|
|
407
|
+
* Generate TypeScript types for tokens
|
|
408
|
+
*/
|
|
409
|
+
declare function generateTokenTypes(collection: TokenCollection): string;
|
|
410
|
+
/**
|
|
411
|
+
* Transform to Tailwind config format
|
|
412
|
+
*/
|
|
413
|
+
declare function transformToTailwind(collection: TokenCollection): string;
|
|
414
|
+
|
|
415
|
+
/**
|
|
416
|
+
* Built-in theme modes
|
|
417
|
+
*/
|
|
418
|
+
type ThemeMode = 'light' | 'dark' | 'high-contrast' | 'high-contrast-dark' | 'dim';
|
|
419
|
+
/**
|
|
420
|
+
* Theme configuration
|
|
421
|
+
*/
|
|
422
|
+
interface ThemeConfig {
|
|
423
|
+
/** Theme name */
|
|
424
|
+
name: string;
|
|
425
|
+
/** Display name */
|
|
426
|
+
displayName?: string;
|
|
427
|
+
/** Theme mode */
|
|
428
|
+
mode: ThemeMode;
|
|
429
|
+
/** CSS selector for theme */
|
|
430
|
+
selector: string;
|
|
431
|
+
/** Media query (for system preferences) */
|
|
432
|
+
mediaQuery?: string;
|
|
433
|
+
/** Parent theme to extend */
|
|
434
|
+
extends?: string;
|
|
435
|
+
}
|
|
436
|
+
/**
|
|
437
|
+
* Default theme configurations
|
|
438
|
+
*/
|
|
439
|
+
declare const defaultThemes: Record<ThemeMode, ThemeConfig>;
|
|
440
|
+
/**
|
|
441
|
+
* Create theme definition from base tokens and overrides
|
|
442
|
+
*/
|
|
443
|
+
declare function createTheme(name: string, baseTokens: TokenCollection, overrideTokens?: TokenCollection, config?: Partial<ThemeConfig>): ThemeDefinition;
|
|
444
|
+
/**
|
|
445
|
+
* Generate CSS for all themes
|
|
446
|
+
*/
|
|
447
|
+
declare function generateThemesCss(themes: ThemeDefinition[], prefix?: string): string;
|
|
448
|
+
/**
|
|
449
|
+
* Generate theme switcher JavaScript
|
|
450
|
+
*/
|
|
451
|
+
declare function generateThemeSwitcher(): string;
|
|
452
|
+
/**
|
|
453
|
+
* Generate React theme context
|
|
454
|
+
*/
|
|
455
|
+
declare function generateReactThemeContext(): string;
|
|
456
|
+
/**
|
|
457
|
+
* Auto-generate dark mode tokens from light tokens
|
|
458
|
+
*/
|
|
459
|
+
declare function generateDarkModeTokens(lightTokens: TokenCollection): Promise<ResolvedToken[]>;
|
|
460
|
+
/**
|
|
461
|
+
* Generate high contrast tokens
|
|
462
|
+
*/
|
|
463
|
+
declare function generateHighContrastTokens(baseTokens: TokenCollection, _minContrast?: number): Promise<ResolvedToken[]>;
|
|
464
|
+
|
|
465
|
+
/**
|
|
466
|
+
* @file presets.ts
|
|
467
|
+
* @description Nice2Dev Design Tokens — Theme Presets
|
|
468
|
+
*
|
|
469
|
+
* 50+ ready-to-use theme presets for various brands and industries
|
|
470
|
+
*/
|
|
471
|
+
interface ThemePreset {
|
|
472
|
+
name: string;
|
|
473
|
+
displayName: string;
|
|
474
|
+
description: string;
|
|
475
|
+
category: PresetCategory;
|
|
476
|
+
colors: {
|
|
477
|
+
primary: ColorScale;
|
|
478
|
+
secondary?: ColorScale;
|
|
479
|
+
accent?: ColorScale;
|
|
480
|
+
neutral: ColorScale;
|
|
481
|
+
success: string;
|
|
482
|
+
warning: string;
|
|
483
|
+
error: string;
|
|
484
|
+
info: string;
|
|
485
|
+
};
|
|
486
|
+
typography?: {
|
|
487
|
+
fontFamily?: string;
|
|
488
|
+
headingFontFamily?: string;
|
|
489
|
+
};
|
|
490
|
+
borderRadius?: 'none' | 'sm' | 'md' | 'lg' | 'full';
|
|
491
|
+
shadows?: 'none' | 'sm' | 'md' | 'lg';
|
|
492
|
+
}
|
|
493
|
+
interface ColorScale {
|
|
494
|
+
50: string;
|
|
495
|
+
100: string;
|
|
496
|
+
200: string;
|
|
497
|
+
300: string;
|
|
498
|
+
400: string;
|
|
499
|
+
500: string;
|
|
500
|
+
600: string;
|
|
501
|
+
700: string;
|
|
502
|
+
800: string;
|
|
503
|
+
900: string;
|
|
504
|
+
950: string;
|
|
505
|
+
}
|
|
506
|
+
type PresetCategory = 'brand' | 'healthcare' | 'finance' | 'education' | 'technology' | 'ecommerce' | 'entertainment' | 'government' | 'nature' | 'minimal' | 'bold' | 'playful' | 'professional';
|
|
507
|
+
/**
|
|
508
|
+
* Generate color scale from a single base color
|
|
509
|
+
*/
|
|
510
|
+
declare function generateColorScale(baseColor: string): ColorScale;
|
|
511
|
+
declare const PRESETS: ThemePreset[];
|
|
512
|
+
/**
|
|
513
|
+
* Get presets by category
|
|
514
|
+
*/
|
|
515
|
+
declare function getPresetsByCategory(category: PresetCategory): ThemePreset[];
|
|
516
|
+
/**
|
|
517
|
+
* Get preset by name
|
|
518
|
+
*/
|
|
519
|
+
declare function getPresetByName(name: string): ThemePreset | undefined;
|
|
520
|
+
/**
|
|
521
|
+
* Get all categories
|
|
522
|
+
*/
|
|
523
|
+
declare function getAllCategories(): PresetCategory[];
|
|
524
|
+
/**
|
|
525
|
+
* Convert preset to CSS variables
|
|
526
|
+
*/
|
|
527
|
+
declare function presetToCssVariables(preset: ThemePreset, prefix?: string): string;
|
|
528
|
+
/**
|
|
529
|
+
* Convert preset to W3C Design Tokens format
|
|
530
|
+
*/
|
|
531
|
+
declare function presetToTokens(preset: ThemePreset): Record<string, unknown>;
|
|
532
|
+
|
|
533
|
+
/**
|
|
534
|
+
* @file brand-kit.ts
|
|
535
|
+
* @description Nice2Dev Design Tokens — Brand Kit Generator
|
|
536
|
+
*
|
|
537
|
+
* Generate a complete theme from brand colors or logo
|
|
538
|
+
*/
|
|
539
|
+
|
|
540
|
+
interface BrandKitConfig {
|
|
541
|
+
/** Primary brand color (hex) */
|
|
542
|
+
primaryColor: string;
|
|
543
|
+
/** Secondary brand color (optional) */
|
|
544
|
+
secondaryColor?: string;
|
|
545
|
+
/** Accent color (optional) */
|
|
546
|
+
accentColor?: string;
|
|
547
|
+
/** Brand name */
|
|
548
|
+
brandName: string;
|
|
549
|
+
/** Industry/category for defaults */
|
|
550
|
+
industry?: BrandIndustry;
|
|
551
|
+
/** Preferred style */
|
|
552
|
+
style?: BrandStyle;
|
|
553
|
+
/** Typography preference */
|
|
554
|
+
typography?: TypographyPreference;
|
|
555
|
+
/** Border radius preference */
|
|
556
|
+
borderRadius?: 'none' | 'sm' | 'md' | 'lg' | 'full';
|
|
557
|
+
/** Shadow intensity */
|
|
558
|
+
shadows?: 'none' | 'sm' | 'md' | 'lg';
|
|
559
|
+
}
|
|
560
|
+
type BrandIndustry = 'technology' | 'healthcare' | 'finance' | 'education' | 'retail' | 'hospitality' | 'manufacturing' | 'creative' | 'nonprofit' | 'government';
|
|
561
|
+
type BrandStyle = 'professional' | 'modern' | 'playful' | 'minimal' | 'bold' | 'luxury' | 'organic';
|
|
562
|
+
type TypographyPreference = 'modern-sans' | 'classic-serif' | 'geometric' | 'rounded' | 'monospace';
|
|
563
|
+
interface BrandKit {
|
|
564
|
+
preset: ThemePreset;
|
|
565
|
+
css: string;
|
|
566
|
+
tokens: Record<string, unknown>;
|
|
567
|
+
darkMode: ThemePreset;
|
|
568
|
+
assets: BrandAssets;
|
|
569
|
+
}
|
|
570
|
+
interface BrandAssets {
|
|
571
|
+
colorPalette: ColorPaletteAsset[];
|
|
572
|
+
typographyScale: TypographyScaleAsset[];
|
|
573
|
+
spacingScale: SpacingScaleAsset[];
|
|
574
|
+
logoUsageGuidelines: string;
|
|
575
|
+
}
|
|
576
|
+
interface ColorPaletteAsset {
|
|
577
|
+
name: string;
|
|
578
|
+
colors: {
|
|
579
|
+
shade: string;
|
|
580
|
+
hex: string;
|
|
581
|
+
usage: string;
|
|
582
|
+
}[];
|
|
583
|
+
}
|
|
584
|
+
interface TypographyScaleAsset {
|
|
585
|
+
name: string;
|
|
586
|
+
size: string;
|
|
587
|
+
weight: string | number;
|
|
588
|
+
lineHeight: string | number;
|
|
589
|
+
usage: string;
|
|
590
|
+
}
|
|
591
|
+
interface SpacingScaleAsset {
|
|
592
|
+
name: string;
|
|
593
|
+
value: string;
|
|
594
|
+
usage: string;
|
|
595
|
+
}
|
|
596
|
+
/**
|
|
597
|
+
* Analyze a color and generate complementary colors
|
|
598
|
+
*/
|
|
599
|
+
declare function analyzeColor(hex: string): {
|
|
600
|
+
hsl: [number, number, number];
|
|
601
|
+
rgb: [number, number, number];
|
|
602
|
+
luminance: number;
|
|
603
|
+
isLight: boolean;
|
|
604
|
+
complementary: string;
|
|
605
|
+
analogous: [string, string];
|
|
606
|
+
triadic: [string, string];
|
|
607
|
+
splitComplementary: [string, string];
|
|
608
|
+
};
|
|
609
|
+
/**
|
|
610
|
+
* Generate a complete brand kit from configuration
|
|
611
|
+
*/
|
|
612
|
+
declare function generateBrandKit(config: BrandKitConfig): BrandKit;
|
|
613
|
+
/**
|
|
614
|
+
* Quick generate from just a primary color
|
|
615
|
+
*/
|
|
616
|
+
declare function quickBrandKit(primaryColor: string, brandName?: string): BrandKit;
|
|
617
|
+
/**
|
|
618
|
+
* Generate brand kit for specific industry
|
|
619
|
+
*/
|
|
620
|
+
declare function industryBrandKit(primaryColor: string, brandName: string, industry: BrandIndustry): BrandKit;
|
|
621
|
+
|
|
622
|
+
/**
|
|
623
|
+
* @file accessibility.ts
|
|
624
|
+
* @description Nice2Dev Design Tokens — Accessibility Features
|
|
625
|
+
*
|
|
626
|
+
* Reduced motion, high contrast, and accessibility-focused tokens
|
|
627
|
+
*/
|
|
628
|
+
interface ReducedMotionConfig {
|
|
629
|
+
/** Disable all animations */
|
|
630
|
+
disableAnimations?: boolean;
|
|
631
|
+
/** Use instant transitions instead of animated */
|
|
632
|
+
instantTransitions?: boolean;
|
|
633
|
+
/** Allow keyframe animations with reduced duration */
|
|
634
|
+
allowReducedAnimations?: boolean;
|
|
635
|
+
/** Maximum animation duration (ms) */
|
|
636
|
+
maxDuration?: number;
|
|
637
|
+
/** Disable parallax effects */
|
|
638
|
+
disableParallax?: boolean;
|
|
639
|
+
/** Disable auto-playing media */
|
|
640
|
+
disableAutoPlay?: boolean;
|
|
641
|
+
}
|
|
642
|
+
interface HighContrastConfig {
|
|
643
|
+
/** Minimum contrast ratio for text */
|
|
644
|
+
minTextContrast?: number;
|
|
645
|
+
/** Minimum contrast ratio for interactive elements */
|
|
646
|
+
minInteractiveContrast?: number;
|
|
647
|
+
/** Enhance focus indicators */
|
|
648
|
+
enhancedFocus?: boolean;
|
|
649
|
+
/** Use solid borders instead of shadows */
|
|
650
|
+
solidBorders?: boolean;
|
|
651
|
+
/** Increase font weight */
|
|
652
|
+
bolderText?: boolean;
|
|
653
|
+
}
|
|
654
|
+
interface AccessibilityTokens {
|
|
655
|
+
motion: MotionTokens;
|
|
656
|
+
focus: FocusTokens;
|
|
657
|
+
contrast: ContrastTokens;
|
|
658
|
+
typography: AccessibilityTypography;
|
|
659
|
+
}
|
|
660
|
+
interface MotionTokens {
|
|
661
|
+
duration: Record<string, string>;
|
|
662
|
+
easing: Record<string, string>;
|
|
663
|
+
transition: Record<string, string>;
|
|
664
|
+
}
|
|
665
|
+
interface FocusTokens {
|
|
666
|
+
ring: FocusRingConfig;
|
|
667
|
+
outline: FocusOutlineConfig;
|
|
668
|
+
}
|
|
669
|
+
interface FocusRingConfig {
|
|
670
|
+
width: string;
|
|
671
|
+
offset: string;
|
|
672
|
+
color: string;
|
|
673
|
+
style: string;
|
|
674
|
+
}
|
|
675
|
+
interface FocusOutlineConfig {
|
|
676
|
+
width: string;
|
|
677
|
+
style: string;
|
|
678
|
+
color: string;
|
|
679
|
+
offset: string;
|
|
680
|
+
}
|
|
681
|
+
interface ContrastTokens {
|
|
682
|
+
text: Record<string, string>;
|
|
683
|
+
background: Record<string, string>;
|
|
684
|
+
border: Record<string, string>;
|
|
685
|
+
}
|
|
686
|
+
interface AccessibilityTypography {
|
|
687
|
+
minSize: string;
|
|
688
|
+
lineHeight: string;
|
|
689
|
+
letterSpacing: string;
|
|
690
|
+
wordSpacing: string;
|
|
691
|
+
}
|
|
692
|
+
/**
|
|
693
|
+
* Standard motion tokens (full animations)
|
|
694
|
+
*/
|
|
695
|
+
declare const STANDARD_MOTION: MotionTokens;
|
|
696
|
+
/**
|
|
697
|
+
* Reduced motion tokens (accessible)
|
|
698
|
+
*/
|
|
699
|
+
declare const REDUCED_MOTION: MotionTokens;
|
|
700
|
+
/**
|
|
701
|
+
* Minimal motion tokens (limited animations)
|
|
702
|
+
*/
|
|
703
|
+
declare const MINIMAL_MOTION: MotionTokens;
|
|
704
|
+
/**
|
|
705
|
+
* Standard focus indicators
|
|
706
|
+
*/
|
|
707
|
+
declare const STANDARD_FOCUS: FocusTokens;
|
|
708
|
+
/**
|
|
709
|
+
* Enhanced focus indicators for accessibility
|
|
710
|
+
*/
|
|
711
|
+
declare const ENHANCED_FOCUS: FocusTokens;
|
|
712
|
+
/**
|
|
713
|
+
* High visibility focus indicators
|
|
714
|
+
*/
|
|
715
|
+
declare const HIGH_VISIBILITY_FOCUS: FocusTokens;
|
|
716
|
+
/**
|
|
717
|
+
* Standard contrast tokens
|
|
718
|
+
*/
|
|
719
|
+
declare const STANDARD_CONTRAST: ContrastTokens;
|
|
720
|
+
/**
|
|
721
|
+
* High contrast tokens (WCAG AAA)
|
|
722
|
+
*/
|
|
723
|
+
declare const HIGH_CONTRAST: ContrastTokens;
|
|
724
|
+
/**
|
|
725
|
+
* High contrast dark tokens
|
|
726
|
+
*/
|
|
727
|
+
declare const HIGH_CONTRAST_DARK: ContrastTokens;
|
|
728
|
+
/**
|
|
729
|
+
* Standard typography accessibility settings
|
|
730
|
+
*/
|
|
731
|
+
declare const STANDARD_TYPOGRAPHY: AccessibilityTypography;
|
|
732
|
+
/**
|
|
733
|
+
* Enhanced readability typography
|
|
734
|
+
*/
|
|
735
|
+
declare const ENHANCED_TYPOGRAPHY: AccessibilityTypography;
|
|
736
|
+
/**
|
|
737
|
+
* Maximum readability typography
|
|
738
|
+
*/
|
|
739
|
+
declare const MAXIMUM_READABILITY_TYPOGRAPHY: AccessibilityTypography;
|
|
740
|
+
/**
|
|
741
|
+
* Generate reduced motion CSS
|
|
742
|
+
*/
|
|
743
|
+
declare function generateReducedMotionCss(config?: ReducedMotionConfig): string;
|
|
744
|
+
/**
|
|
745
|
+
* Generate enhanced focus CSS
|
|
746
|
+
*/
|
|
747
|
+
declare function generateFocusCss(tokens?: FocusTokens): string;
|
|
748
|
+
/**
|
|
749
|
+
* Generate high contrast CSS
|
|
750
|
+
*/
|
|
751
|
+
declare function generateHighContrastCss(tokens?: ContrastTokens): string;
|
|
752
|
+
/**
|
|
753
|
+
* Generate complete accessibility CSS
|
|
754
|
+
*/
|
|
755
|
+
declare function generateAccessibilityCss(options?: {
|
|
756
|
+
reducedMotion?: ReducedMotionConfig;
|
|
757
|
+
focus?: FocusTokens;
|
|
758
|
+
contrast?: ContrastTokens;
|
|
759
|
+
typography?: AccessibilityTypography;
|
|
760
|
+
}): string;
|
|
761
|
+
/**
|
|
762
|
+
* Standard accessibility tokens
|
|
763
|
+
*/
|
|
764
|
+
declare const STANDARD_ACCESSIBILITY: AccessibilityTokens;
|
|
765
|
+
/**
|
|
766
|
+
* Enhanced accessibility tokens (WCAG AA)
|
|
767
|
+
*/
|
|
768
|
+
declare const ENHANCED_ACCESSIBILITY: AccessibilityTokens;
|
|
769
|
+
/**
|
|
770
|
+
* Maximum accessibility tokens (WCAG AAA)
|
|
771
|
+
*/
|
|
772
|
+
declare const MAXIMUM_ACCESSIBILITY: AccessibilityTokens;
|
|
773
|
+
/**
|
|
774
|
+
* Calculate contrast ratio between two colors
|
|
775
|
+
*/
|
|
776
|
+
declare function getContrastRatio(color1: string, color2: string): number;
|
|
777
|
+
/**
|
|
778
|
+
* Check if contrast meets WCAG requirements
|
|
779
|
+
*/
|
|
780
|
+
declare function checkContrast(foreground: string, background: string, level?: 'AA' | 'AAA', isLargeText?: boolean): {
|
|
781
|
+
passes: boolean;
|
|
782
|
+
ratio: number;
|
|
783
|
+
required: number;
|
|
784
|
+
};
|
|
785
|
+
/**
|
|
786
|
+
* Suggest accessible color alternatives
|
|
787
|
+
*/
|
|
788
|
+
declare function suggestAccessibleColor(color: string, background: string, targetRatio?: number): string;
|
|
789
|
+
|
|
790
|
+
/**
|
|
791
|
+
* @file css-only.ts
|
|
792
|
+
* @description Nice2Dev Design Tokens — CSS-Only Approach
|
|
793
|
+
*
|
|
794
|
+
* Generate pure CSS variables without CSS-in-JS dependencies.
|
|
795
|
+
* This module provides utilities for a CSS-variables-first approach
|
|
796
|
+
* that eliminates runtime CSS-in-JS overhead.
|
|
797
|
+
*/
|
|
798
|
+
|
|
799
|
+
interface CssOnlyConfig {
|
|
800
|
+
/** CSS variable prefix */
|
|
801
|
+
prefix?: string;
|
|
802
|
+
/** Include dark mode via media query */
|
|
803
|
+
includeDarkMode?: boolean;
|
|
804
|
+
/** Include high contrast via media query */
|
|
805
|
+
includeHighContrast?: boolean;
|
|
806
|
+
/** Include reduced motion via media query */
|
|
807
|
+
includeReducedMotion?: boolean;
|
|
808
|
+
/** Generate CSS layers */
|
|
809
|
+
useLayers?: boolean;
|
|
810
|
+
/** Output format */
|
|
811
|
+
format?: 'css' | 'scss' | 'postcss';
|
|
812
|
+
/** Include fallbacks for older browsers */
|
|
813
|
+
includeFallbacks?: boolean;
|
|
814
|
+
/** Generate container queries tokens */
|
|
815
|
+
containerQueries?: boolean;
|
|
816
|
+
}
|
|
817
|
+
interface CssLayer {
|
|
818
|
+
/** Layer name */
|
|
819
|
+
name: string;
|
|
820
|
+
/** Layer content */
|
|
821
|
+
content: string;
|
|
822
|
+
}
|
|
823
|
+
interface GeneratedCss {
|
|
824
|
+
/** Root variables */
|
|
825
|
+
root: string;
|
|
826
|
+
/** Dark mode overrides */
|
|
827
|
+
dark?: string;
|
|
828
|
+
/** High contrast overrides */
|
|
829
|
+
highContrast?: string;
|
|
830
|
+
/** Reduced motion styles */
|
|
831
|
+
reducedMotion?: string;
|
|
832
|
+
/** Utility classes */
|
|
833
|
+
utilities?: string;
|
|
834
|
+
/** Component reset */
|
|
835
|
+
reset?: string;
|
|
836
|
+
/** Combined output */
|
|
837
|
+
combined: string;
|
|
838
|
+
}
|
|
839
|
+
/**
|
|
840
|
+
* Generate CSS variables from token collection
|
|
841
|
+
*/
|
|
842
|
+
declare function tokensToCssVariables(tokens: TokenCollection, config?: CssOnlyConfig): GeneratedCss;
|
|
843
|
+
/**
|
|
844
|
+
* Generate CSS from a theme preset
|
|
845
|
+
*/
|
|
846
|
+
declare function presetToCss(preset: ThemePreset, config?: CssOnlyConfig): string;
|
|
847
|
+
/**
|
|
848
|
+
* Generate CSS-only component styles
|
|
849
|
+
*/
|
|
850
|
+
declare function generateComponentStyles(prefix?: string): string;
|
|
851
|
+
/**
|
|
852
|
+
* Generate complete CSS stylesheet from preset
|
|
853
|
+
*/
|
|
854
|
+
declare function generateCompleteStylesheet(preset: ThemePreset, config?: CssOnlyConfig): string;
|
|
855
|
+
|
|
856
|
+
export { type AccessibilityTokens, type AccessibilityTypography, type BorderValue, type BrandAssets, type BrandIndustry, type BrandKit, type BrandKitConfig, type BrandStyle, type ColorPaletteAsset, type ColorScale, type ContrastTokens, type CssLayer, type CssOnlyConfig, type DesignToken, ENHANCED_ACCESSIBILITY, ENHANCED_FOCUS, ENHANCED_TYPOGRAPHY, type FocusOutlineConfig, type FocusRingConfig, type FocusTokens, type GeneratedCss, type GeneratorOptions, type GeneratorPlugin, type GradientStop, type GradientValue, HIGH_CONTRAST, HIGH_CONTRAST_DARK, HIGH_VISIBILITY_FOCUS, type HighContrastConfig, MAXIMUM_ACCESSIBILITY, MAXIMUM_READABILITY_TYPOGRAPHY, MINIMAL_MOTION, type MotionTokens, type OutputFormat, PRESETS, type PresetCategory, REDUCED_MOTION, type ReducedMotionConfig, type ResolvedToken, STANDARD_ACCESSIBILITY, STANDARD_CONTRAST, STANDARD_FOCUS, STANDARD_MOTION, STANDARD_TYPOGRAPHY, type ShadowValue, type SpacingScaleAsset, type ThemeConfig, type ThemeDefinition, type ThemeMode, type ThemePreset, type TokenCollection, type TokenFile, TokenGenerator, type TokenGroup, type TokenTransform, type TokenType, type TokenValue, type TypographyPreference, type TypographyScaleAsset, type TypographyValue, analyzeColor, buildTokenObject, checkCircularReferences, checkContrast, createGenerator, createTheme, createTokenCollection, cubicBezierToCss, darkenColor, defaultOptions, defaultThemes, durationToMs, extractReferencePath, filterTokensByPath, filterTokensByType, findReferences, flattenTokens, fontWeightToNumber, generateAccessibilityCss, generateBrandKit, generateColorScale, generateColorScale$1 as generateColorScaleAsync, generateCompleteStylesheet, generateComponentStyles, generateDarkModeTokens, generateFocusCss, generateHighContrastCss, generateHighContrastTokens, generateReactThemeContext, generateReducedMotionCss, generateThemeSwitcher, generateThemesCss, generateTokenTypes, generateTokens, getAccessibleTextColor, getAllCategories, getCategories, getContrastRatio, getContrastRatio$1 as getContrastRatioAsync, getDependencyGraph, getPresetByName, getPresetsByCategory, getTokenByPath, hexToHsl, hexToOklch, hexToRgb, industryBrandKit, isDesignToken, isReference, isTokenGroup, lightenColor, mergeTokenFiles, parseTokenDirectory, parseTokenFile, parseTokenFiles, pathToCssVariable, pathToString, presetToCss, presetToCssVariables, presetToTokens, pxToEm, pxToRem, quickBrandKit, remToPx, resolveToVariable, resolveTokenValue, resolveTokens, sortTokensByDependencies, suggestAccessibleColor, tokensToCssVariables, transformToCss, transformToJs, transformToScss, transformToTailwind, transformToTs };
|