@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.
@@ -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 };