@rainersoft/design-tokens 1.0.0

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/dist/index.cjs ADDED
@@ -0,0 +1,944 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // index.ts
21
+ var index_exports = {};
22
+ __export(index_exports, {
23
+ BACKGROUND: () => BACKGROUND,
24
+ GRADIENTS: () => GRADIENTS,
25
+ GRADIENT_DIRECTIONS: () => GRADIENT_DIRECTIONS,
26
+ darkTheme: () => darkTheme,
27
+ darkThemeColors: () => darkThemeColors,
28
+ getContrast: () => getContrast,
29
+ getContrastInfo: () => getContrastInfo,
30
+ getLuminance: () => getLuminance,
31
+ hexToRgb: () => hexToRgb,
32
+ lightTheme: () => lightTheme,
33
+ lightThemeColors: () => lightThemeColors,
34
+ meetsWCAGAA: () => meetsWCAGAA,
35
+ meetsWCAGAAA: () => meetsWCAGAAA,
36
+ radiusTokens: () => radiusTokens,
37
+ shadowTokens: () => shadowTokens,
38
+ spacingTokens: () => spacingTokens,
39
+ themes: () => themes_default,
40
+ tokens: () => tokens_default,
41
+ typographyTokens: () => typographyTokens,
42
+ validateContrast: () => validateContrast
43
+ });
44
+ module.exports = __toCommonJS(index_exports);
45
+
46
+ // tokens/colors/light.json
47
+ var light_default = {
48
+ $schema: "https://json.schemastore.org/theme.json",
49
+ $description: "Light theme color palette - Modern and professional design with WCAG AA compliance",
50
+ colors: {
51
+ primary: {
52
+ base: "#0891b2",
53
+ hover: "#0e7490",
54
+ active: "#155e75",
55
+ disabled: "#d4d4d4",
56
+ focus: "#0891b2",
57
+ background: "#ecfeff",
58
+ backgroundHover: "#cffafe",
59
+ backgroundActive: "#a5f3fc",
60
+ border: "#0891b2",
61
+ borderHover: "#0e7490",
62
+ borderFocus: "#06b6d4",
63
+ text: "#ffffff",
64
+ textHover: "#ffffff",
65
+ textDisabled: "#a3a3a3"
66
+ },
67
+ secondary: {
68
+ base: "#9333ea",
69
+ hover: "#7e22ce",
70
+ active: "#6b21a8",
71
+ disabled: "#d4d4d4",
72
+ focus: "#9333ea",
73
+ background: "#faf5ff",
74
+ backgroundHover: "#f3e8ff",
75
+ backgroundActive: "#e9d5ff",
76
+ border: "#9333ea",
77
+ borderHover: "#7e22ce",
78
+ borderFocus: "#a855f7",
79
+ text: "#ffffff",
80
+ textHover: "#ffffff",
81
+ textDisabled: "#a3a3a3"
82
+ },
83
+ accent: {
84
+ base: "#db2777",
85
+ hover: "#be185d",
86
+ active: "#9f1239",
87
+ disabled: "#d4d4d4",
88
+ focus: "#db2777",
89
+ background: "#fdf2f8",
90
+ backgroundHover: "#fce7f3",
91
+ backgroundActive: "#fbcfe8",
92
+ border: "#db2777",
93
+ borderHover: "#be185d",
94
+ borderFocus: "#ec4899",
95
+ text: "#ffffff",
96
+ textHover: "#ffffff",
97
+ textDisabled: "#a3a3a3"
98
+ },
99
+ background: {
100
+ primary: "#ffffff",
101
+ secondary: "#fafafa",
102
+ tertiary: "#f5f5f5",
103
+ inverse: "#0a0a0f",
104
+ overlay: "rgba(0, 0, 0, 0.5)",
105
+ muted: "#f9fafb"
106
+ },
107
+ surface: {
108
+ primary: "#ffffff",
109
+ secondary: "#fafafa",
110
+ tertiary: "#f5f5f5",
111
+ elevated: "#ffffff",
112
+ overlay: "rgba(0, 0, 0, 0.5)",
113
+ hover: "#f9fafb",
114
+ active: "#f3f4f6"
115
+ },
116
+ text: {
117
+ primary: "#171717",
118
+ secondary: "#404040",
119
+ tertiary: "#737373",
120
+ inverse: "#ffffff",
121
+ disabled: "#a3a3a3",
122
+ link: "#0891b2",
123
+ linkHover: "#0e7490",
124
+ linkActive: "#155e75",
125
+ linkVisited: "#7e22ce",
126
+ onPrimary: "#ffffff",
127
+ onSecondary: "#ffffff",
128
+ onAccent: "#ffffff",
129
+ onBackground: "#171717",
130
+ onSurface: "#171717"
131
+ },
132
+ border: {
133
+ primary: "#e5e5e5",
134
+ secondary: "#d4d4d4",
135
+ tertiary: "#a3a3a3",
136
+ focus: "#0891b2",
137
+ focusRing: "#06b6d4",
138
+ inverse: "#404040",
139
+ hover: "#d4d4d4",
140
+ active: "#a3a3a3",
141
+ disabled: "#e5e5e5"
142
+ },
143
+ status: {
144
+ success: {
145
+ base: "#22c55e",
146
+ hover: "#16a34a",
147
+ active: "#15803d",
148
+ background: "#f0fdf4",
149
+ backgroundHover: "#dcfce7",
150
+ border: "#86efac",
151
+ text: "#ffffff",
152
+ textOnBackground: "#166534"
153
+ },
154
+ warning: {
155
+ base: "#f59e0b",
156
+ hover: "#d97706",
157
+ active: "#b45309",
158
+ background: "#fffbeb",
159
+ backgroundHover: "#fef3c7",
160
+ border: "#fcd34d",
161
+ text: "#ffffff",
162
+ textOnBackground: "#92400e"
163
+ },
164
+ error: {
165
+ base: "#ef4444",
166
+ hover: "#dc2626",
167
+ active: "#b91c1c",
168
+ background: "#fef2f2",
169
+ backgroundHover: "#fee2e2",
170
+ border: "#fca5a5",
171
+ text: "#ffffff",
172
+ textOnBackground: "#991b1b"
173
+ },
174
+ info: {
175
+ base: "#3b82f6",
176
+ hover: "#2563eb",
177
+ active: "#1d4ed8",
178
+ background: "#eff6ff",
179
+ backgroundHover: "#dbeafe",
180
+ border: "#93c5fd",
181
+ text: "#ffffff",
182
+ textOnBackground: "#1e40af"
183
+ }
184
+ },
185
+ interactive: {
186
+ default: "#0891b2",
187
+ hover: "#0e7490",
188
+ active: "#155e75",
189
+ disabled: "#d4d4d4",
190
+ disabledText: "#a3a3a3",
191
+ focus: "#0891b2",
192
+ focusRing: "#06b6d4"
193
+ }
194
+ }
195
+ };
196
+
197
+ // tokens/colors/dark.json
198
+ var dark_default = {
199
+ $schema: "https://json.schemastore.org/theme.json",
200
+ $description: "Dark theme color palette - Cyberpunk neon style with WCAG AA compliance",
201
+ colors: {
202
+ primary: {
203
+ base: "#00e6ff",
204
+ hover: "#1affff",
205
+ active: "#4dffff",
206
+ disabled: "#404040",
207
+ focus: "#00e6ff",
208
+ background: "rgba(0, 230, 255, 0.1)",
209
+ backgroundHover: "rgba(0, 230, 255, 0.15)",
210
+ backgroundActive: "rgba(0, 230, 255, 0.2)",
211
+ border: "#00e6ff",
212
+ borderHover: "#1affff",
213
+ borderFocus: "#4dffff",
214
+ text: "#0a0a0f",
215
+ textHover: "#0a0a0f",
216
+ textDisabled: "#525252"
217
+ },
218
+ secondary: {
219
+ base: "#7d00ff",
220
+ hover: "#941aff",
221
+ active: "#ab4dff",
222
+ disabled: "#404040",
223
+ focus: "#7d00ff",
224
+ background: "rgba(125, 0, 255, 0.1)",
225
+ backgroundHover: "rgba(125, 0, 255, 0.15)",
226
+ backgroundActive: "rgba(125, 0, 255, 0.2)",
227
+ border: "#7d00ff",
228
+ borderHover: "#941aff",
229
+ borderFocus: "#ab4dff",
230
+ text: "#ffffff",
231
+ textHover: "#ffffff",
232
+ textDisabled: "#525252"
233
+ },
234
+ accent: {
235
+ base: "#ff00ff",
236
+ hover: "#ff1aff",
237
+ active: "#ff4dff",
238
+ disabled: "#404040",
239
+ focus: "#ff00ff",
240
+ background: "rgba(255, 0, 255, 0.1)",
241
+ backgroundHover: "rgba(255, 0, 255, 0.15)",
242
+ backgroundActive: "rgba(255, 0, 255, 0.2)",
243
+ border: "#ff00ff",
244
+ borderHover: "#ff1aff",
245
+ borderFocus: "#ff4dff",
246
+ text: "#0a0a0f",
247
+ textHover: "#0a0a0f",
248
+ textDisabled: "#525252"
249
+ },
250
+ background: {
251
+ primary: "#0a0a0f",
252
+ secondary: "#0f0f1a",
253
+ tertiary: "#171717",
254
+ inverse: "#ffffff",
255
+ overlay: "rgba(0, 0, 0, 0.8)",
256
+ muted: "#0f0f1a"
257
+ },
258
+ surface: {
259
+ primary: "#171717",
260
+ secondary: "#262626",
261
+ tertiary: "#404040",
262
+ elevated: "#262626",
263
+ overlay: "rgba(0, 0, 0, 0.8)",
264
+ glass: "rgba(15, 15, 26, 0.7)",
265
+ glassHover: "rgba(15, 15, 26, 0.85)",
266
+ hover: "#262626",
267
+ active: "#404040"
268
+ },
269
+ text: {
270
+ primary: "#b3ffff",
271
+ secondary: "#4dffff",
272
+ tertiary: "#00e6ff",
273
+ inverse: "#0a0a0f",
274
+ disabled: "#525252",
275
+ link: "#1affff",
276
+ linkHover: "#4dffff",
277
+ linkActive: "#80ffff",
278
+ linkVisited: "#941aff",
279
+ onPrimary: "#0a0a0f",
280
+ onSecondary: "#ffffff",
281
+ onAccent: "#0a0a0f",
282
+ onBackground: "#b3ffff",
283
+ onSurface: "#b3ffff",
284
+ glow: "#00e6ff",
285
+ neonCyan: "#00e6ff",
286
+ neonPink: "#ff00ff",
287
+ neonPurple: "#7d00ff",
288
+ neonGreen: "#00ff00"
289
+ },
290
+ border: {
291
+ primary: "#262626",
292
+ secondary: "#404040",
293
+ tertiary: "#525252",
294
+ focus: "#00e6ff",
295
+ focusRing: "#1affff",
296
+ inverse: "#e5e5e5",
297
+ neon: "#00e6ff",
298
+ neonGlow: "rgba(0, 230, 255, 0.3)",
299
+ hover: "#404040",
300
+ active: "#525252",
301
+ disabled: "#262626"
302
+ },
303
+ status: {
304
+ success: {
305
+ base: "#00ff00",
306
+ hover: "#4dff4d",
307
+ active: "#80ff80",
308
+ background: "rgba(0, 255, 0, 0.1)",
309
+ backgroundHover: "rgba(0, 255, 0, 0.15)",
310
+ border: "#4dff4d",
311
+ text: "#0a0a0f",
312
+ textOnBackground: "#4dff4d"
313
+ },
314
+ warning: {
315
+ base: "#ff7d00",
316
+ hover: "#ffab4d",
317
+ active: "#ffc880",
318
+ background: "rgba(255, 125, 0, 0.1)",
319
+ backgroundHover: "rgba(255, 125, 0, 0.15)",
320
+ border: "#ffab4d",
321
+ text: "#0a0a0f",
322
+ textOnBackground: "#ffab4d"
323
+ },
324
+ error: {
325
+ base: "#f87171",
326
+ hover: "#fca5a5",
327
+ active: "#fecaca",
328
+ background: "rgba(239, 68, 68, 0.1)",
329
+ backgroundHover: "rgba(239, 68, 68, 0.15)",
330
+ border: "#fca5a5",
331
+ text: "#ffffff",
332
+ textOnBackground: "#fca5a5"
333
+ },
334
+ info: {
335
+ base: "#007dff",
336
+ hover: "#4dabff",
337
+ active: "#80c7ff",
338
+ background: "rgba(0, 125, 255, 0.1)",
339
+ backgroundHover: "rgba(0, 125, 255, 0.15)",
340
+ border: "#4dabff",
341
+ text: "#ffffff",
342
+ textOnBackground: "#4dabff"
343
+ }
344
+ },
345
+ interactive: {
346
+ default: "#00e6ff",
347
+ hover: "#1affff",
348
+ active: "#4dffff",
349
+ disabled: "#404040",
350
+ disabledText: "#525252",
351
+ focus: "#00e6ff",
352
+ focusRing: "#1affff"
353
+ },
354
+ effects: {
355
+ glowCyan: "0 0 20px rgba(0, 230, 255, 0.5), 0 0 40px rgba(0, 230, 255, 0.3)",
356
+ glowPink: "0 0 20px rgba(255, 0, 255, 0.5), 0 0 40px rgba(255, 0, 255, 0.3)",
357
+ glowPurple: "0 0 20px rgba(125, 0, 255, 0.5), 0 0 40px rgba(125, 0, 255, 0.3)",
358
+ glowGreen: "0 0 20px rgba(0, 255, 0, 0.5), 0 0 40px rgba(0, 255, 0, 0.3)",
359
+ shadowSm: "0 1px 2px 0 rgba(0, 0, 0, 0.5)",
360
+ shadowMd: "0 4px 6px -1px rgba(0, 0, 0, 0.5)",
361
+ shadowLg: "0 10px 15px -3px rgba(0, 0, 0, 0.5)"
362
+ },
363
+ gradients: {
364
+ primary: "linear-gradient(135deg, #00e6ff 0%, #7d00ff 100%)",
365
+ secondary: "linear-gradient(135deg, #ff00ff 0%, #00e6ff 100%)",
366
+ accent: "linear-gradient(135deg, #ff7d00 0%, #ff00ff 100%)",
367
+ background: "linear-gradient(180deg, #0a0a0f 0%, #0f0f1a 100%)"
368
+ }
369
+ }
370
+ };
371
+
372
+ // tokens/typography.json
373
+ var typography_default = {
374
+ $schema: "https://json.schemastore.org/theme.json",
375
+ $description: "Typography tokens - Complete typographic scale with semantic hierarchy (H1-H6, subtitles, body, captions)",
376
+ typography: {
377
+ fontFamily: {
378
+ sans: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
379
+ serif: "ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif",
380
+ mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
381
+ display: "var(--font-orbitron, ui-sans-serif)",
382
+ body: "var(--font-inter, ui-sans-serif)",
383
+ code: "var(--font-rajdhani, ui-monospace)"
384
+ },
385
+ fontSize: {
386
+ xs: "0.75rem",
387
+ sm: "0.875rem",
388
+ base: "1rem",
389
+ lg: "1.125rem",
390
+ xl: "1.25rem",
391
+ "2xl": "1.5rem",
392
+ "3xl": "1.875rem",
393
+ "4xl": "2.25rem",
394
+ "5xl": "3rem",
395
+ "6xl": "3.75rem",
396
+ "7xl": "4.5rem",
397
+ "8xl": "6rem",
398
+ "9xl": "8rem"
399
+ },
400
+ fontWeight: {
401
+ thin: "100",
402
+ extralight: "200",
403
+ light: "300",
404
+ normal: "400",
405
+ medium: "500",
406
+ semibold: "600",
407
+ bold: "700",
408
+ extrabold: "800",
409
+ black: "900"
410
+ },
411
+ lineHeight: {
412
+ none: "1",
413
+ tight: "1.25",
414
+ snug: "1.375",
415
+ normal: "1.5",
416
+ relaxed: "1.625",
417
+ loose: "2"
418
+ },
419
+ letterSpacing: {
420
+ tighter: "-0.05em",
421
+ tight: "-0.025em",
422
+ normal: "0em",
423
+ wide: "0.025em",
424
+ wider: "0.05em",
425
+ widest: "0.1em"
426
+ },
427
+ headings: {
428
+ h1: {
429
+ fontFamily: "var(--font-display, ui-sans-serif)",
430
+ fontSize: "clamp(2.25rem, 5vw + 1rem, 4.5rem)",
431
+ fontSizeMobile: "2.25rem",
432
+ fontSizeTablet: "3rem",
433
+ fontSizeDesktop: "4.5rem",
434
+ fontWeight: "900",
435
+ lineHeight: "1.1",
436
+ letterSpacing: "-0.02em",
437
+ marginBottom: "1rem"
438
+ },
439
+ h2: {
440
+ fontFamily: "var(--font-display, ui-sans-serif)",
441
+ fontSize: "clamp(1.875rem, 4vw + 0.75rem, 3.75rem)",
442
+ fontSizeMobile: "1.875rem",
443
+ fontSizeTablet: "2.5rem",
444
+ fontSizeDesktop: "3.75rem",
445
+ fontWeight: "800",
446
+ lineHeight: "1.15",
447
+ letterSpacing: "-0.015em",
448
+ marginBottom: "0.875rem"
449
+ },
450
+ h3: {
451
+ fontFamily: "var(--font-display, ui-sans-serif)",
452
+ fontSize: "clamp(1.5rem, 3vw + 0.5rem, 3rem)",
453
+ fontSizeMobile: "1.5rem",
454
+ fontSizeTablet: "2rem",
455
+ fontSizeDesktop: "3rem",
456
+ fontWeight: "700",
457
+ lineHeight: "1.2",
458
+ letterSpacing: "-0.01em",
459
+ marginBottom: "0.75rem"
460
+ },
461
+ h4: {
462
+ fontFamily: "var(--font-body, ui-sans-serif)",
463
+ fontSize: "clamp(1.25rem, 2.5vw + 0.5rem, 2.25rem)",
464
+ fontSizeMobile: "1.25rem",
465
+ fontSizeTablet: "1.75rem",
466
+ fontSizeDesktop: "2.25rem",
467
+ fontWeight: "700",
468
+ lineHeight: "1.25",
469
+ letterSpacing: "0em",
470
+ marginBottom: "0.625rem"
471
+ },
472
+ h5: {
473
+ fontFamily: "var(--font-body, ui-sans-serif)",
474
+ fontSize: "clamp(1.125rem, 2vw + 0.25rem, 1.875rem)",
475
+ fontSizeMobile: "1.125rem",
476
+ fontSizeTablet: "1.5rem",
477
+ fontSizeDesktop: "1.875rem",
478
+ fontWeight: "600",
479
+ lineHeight: "1.3",
480
+ letterSpacing: "0em",
481
+ marginBottom: "0.5rem"
482
+ },
483
+ h6: {
484
+ fontFamily: "var(--font-body, ui-sans-serif)",
485
+ fontSize: "clamp(1rem, 1.5vw + 0.25rem, 1.5rem)",
486
+ fontSizeMobile: "1rem",
487
+ fontSizeTablet: "1.25rem",
488
+ fontSizeDesktop: "1.5rem",
489
+ fontWeight: "600",
490
+ lineHeight: "1.35",
491
+ letterSpacing: "0.01em",
492
+ marginBottom: "0.5rem"
493
+ }
494
+ },
495
+ subtitle: {
496
+ large: {
497
+ fontFamily: "var(--font-body, ui-sans-serif)",
498
+ fontSize: "clamp(1.25rem, 2vw + 0.5rem, 2rem)",
499
+ fontSizeMobile: "1.25rem",
500
+ fontSizeTablet: "1.5rem",
501
+ fontSizeDesktop: "2rem",
502
+ fontWeight: "500",
503
+ lineHeight: "1.4",
504
+ letterSpacing: "0em",
505
+ marginBottom: "0.5rem"
506
+ },
507
+ medium: {
508
+ fontFamily: "var(--font-body, ui-sans-serif)",
509
+ fontSize: "clamp(1.125rem, 1.5vw + 0.25rem, 1.5rem)",
510
+ fontSizeMobile: "1.125rem",
511
+ fontSizeTablet: "1.25rem",
512
+ fontSizeDesktop: "1.5rem",
513
+ fontWeight: "500",
514
+ lineHeight: "1.4",
515
+ letterSpacing: "0em",
516
+ marginBottom: "0.5rem"
517
+ },
518
+ small: {
519
+ fontFamily: "var(--font-body, ui-sans-serif)",
520
+ fontSize: "1rem",
521
+ fontWeight: "500",
522
+ lineHeight: "1.4",
523
+ letterSpacing: "0em",
524
+ marginBottom: "0.375rem"
525
+ }
526
+ },
527
+ body: {
528
+ large: {
529
+ fontFamily: "var(--font-body, ui-sans-serif)",
530
+ fontSize: "1.125rem",
531
+ fontWeight: "400",
532
+ lineHeight: "1.625",
533
+ letterSpacing: "0em"
534
+ },
535
+ medium: {
536
+ fontFamily: "var(--font-body, ui-sans-serif)",
537
+ fontSize: "1rem",
538
+ fontWeight: "400",
539
+ lineHeight: "1.5",
540
+ letterSpacing: "0em"
541
+ },
542
+ small: {
543
+ fontFamily: "var(--font-body, ui-sans-serif)",
544
+ fontSize: "0.875rem",
545
+ fontWeight: "400",
546
+ lineHeight: "1.5",
547
+ letterSpacing: "0em"
548
+ }
549
+ },
550
+ caption: {
551
+ large: {
552
+ fontFamily: "var(--font-body, ui-sans-serif)",
553
+ fontSize: "0.875rem",
554
+ fontWeight: "400",
555
+ lineHeight: "1.4",
556
+ letterSpacing: "0.01em"
557
+ },
558
+ medium: {
559
+ fontFamily: "var(--font-body, ui-sans-serif)",
560
+ fontSize: "0.75rem",
561
+ fontWeight: "400",
562
+ lineHeight: "1.4",
563
+ letterSpacing: "0.01em"
564
+ },
565
+ small: {
566
+ fontFamily: "var(--font-body, ui-sans-serif)",
567
+ fontSize: "0.625rem",
568
+ fontWeight: "400",
569
+ lineHeight: "1.3",
570
+ letterSpacing: "0.02em"
571
+ }
572
+ },
573
+ button: {
574
+ large: {
575
+ fontFamily: "var(--font-body, ui-sans-serif)",
576
+ fontSize: "1.125rem",
577
+ fontWeight: "600",
578
+ lineHeight: "1.5",
579
+ letterSpacing: "0.01em"
580
+ },
581
+ medium: {
582
+ fontFamily: "var(--font-body, ui-sans-serif)",
583
+ fontSize: "1rem",
584
+ fontWeight: "600",
585
+ lineHeight: "1.5",
586
+ letterSpacing: "0.01em"
587
+ },
588
+ small: {
589
+ fontFamily: "var(--font-body, ui-sans-serif)",
590
+ fontSize: "0.875rem",
591
+ fontWeight: "600",
592
+ lineHeight: "1.4",
593
+ letterSpacing: "0.01em"
594
+ }
595
+ },
596
+ label: {
597
+ large: {
598
+ fontFamily: "var(--font-body, ui-sans-serif)",
599
+ fontSize: "0.875rem",
600
+ fontWeight: "600",
601
+ lineHeight: "1.4",
602
+ letterSpacing: "0.01em"
603
+ },
604
+ medium: {
605
+ fontFamily: "var(--font-body, ui-sans-serif)",
606
+ fontSize: "0.75rem",
607
+ fontWeight: "600",
608
+ lineHeight: "1.4",
609
+ letterSpacing: "0.01em"
610
+ },
611
+ small: {
612
+ fontFamily: "var(--font-body, ui-sans-serif)",
613
+ fontSize: "0.625rem",
614
+ fontWeight: "600",
615
+ lineHeight: "1.3",
616
+ letterSpacing: "0.02em"
617
+ }
618
+ },
619
+ code: {
620
+ inline: {
621
+ fontFamily: "var(--font-code, ui-monospace)",
622
+ fontSize: "0.875em",
623
+ fontWeight: "400",
624
+ lineHeight: "1.5",
625
+ letterSpacing: "0em"
626
+ },
627
+ block: {
628
+ fontFamily: "var(--font-code, ui-monospace)",
629
+ fontSize: "0.875rem",
630
+ fontWeight: "400",
631
+ lineHeight: "1.6",
632
+ letterSpacing: "0em"
633
+ }
634
+ }
635
+ }
636
+ };
637
+
638
+ // tokens/spacing.json
639
+ var spacing_default = {
640
+ $schema: "https://json.schemastore.org/theme.json",
641
+ $description: "Spacing tokens - Consistent spacing scale based on 8pt grid",
642
+ spacing: {
643
+ "0": "0px",
644
+ px: "1px",
645
+ "0.5": "0.125rem",
646
+ "1": "0.25rem",
647
+ "1.5": "0.375rem",
648
+ "2": "0.5rem",
649
+ "2.5": "0.625rem",
650
+ "3": "0.75rem",
651
+ "3.5": "0.875rem",
652
+ "4": "1rem",
653
+ "5": "1.25rem",
654
+ "6": "1.5rem",
655
+ "7": "1.75rem",
656
+ "8": "2rem",
657
+ "9": "2.25rem",
658
+ "10": "2.5rem",
659
+ "11": "2.75rem",
660
+ "12": "3rem",
661
+ "14": "3.5rem",
662
+ "16": "4rem",
663
+ "20": "5rem",
664
+ "24": "6rem",
665
+ "28": "7rem",
666
+ "32": "8rem",
667
+ "36": "9rem",
668
+ "40": "10rem",
669
+ "44": "11rem",
670
+ "48": "12rem",
671
+ "52": "13rem",
672
+ "56": "14rem",
673
+ "60": "15rem",
674
+ "64": "16rem",
675
+ "72": "18rem",
676
+ "80": "20rem",
677
+ "96": "24rem"
678
+ }
679
+ };
680
+
681
+ // tokens/radius.json
682
+ var radius_default = {
683
+ $schema: "https://json.schemastore.org/theme.json",
684
+ $description: "Border radius tokens - Consistent corner rounding",
685
+ radius: {
686
+ none: "0px",
687
+ sm: "0.125rem",
688
+ base: "0.25rem",
689
+ md: "0.375rem",
690
+ lg: "0.5rem",
691
+ xl: "0.75rem",
692
+ "2xl": "1rem",
693
+ "3xl": "1.5rem",
694
+ full: "9999px"
695
+ }
696
+ };
697
+
698
+ // tokens/shadows.json
699
+ var shadows_default = {
700
+ $schema: "https://json.schemastore.org/theme.json",
701
+ $description: "Shadow tokens - Elevation and depth",
702
+ shadows: {
703
+ light: {
704
+ xs: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
705
+ sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
706
+ base: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
707
+ md: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
708
+ lg: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
709
+ xl: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
710
+ "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
711
+ inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)"
712
+ },
713
+ dark: {
714
+ xs: "0 1px 2px 0 rgba(0, 0, 0, 0.5)",
715
+ sm: "0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px -1px rgba(0, 0, 0, 0.5)",
716
+ base: "0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.5)",
717
+ md: "0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5)",
718
+ lg: "0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5)",
719
+ xl: "0 25px 50px -12px rgba(0, 0, 0, 0.75)",
720
+ "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.75)",
721
+ inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.5)",
722
+ glow: {
723
+ cyan: "0 0 20px rgba(0, 230, 255, 0.5), 0 0 40px rgba(0, 230, 255, 0.3)",
724
+ pink: "0 0 20px rgba(255, 0, 255, 0.5), 0 0 40px rgba(255, 0, 255, 0.3)",
725
+ purple: "0 0 20px rgba(125, 0, 255, 0.5), 0 0 40px rgba(125, 0, 255, 0.3)",
726
+ green: "0 0 20px rgba(0, 255, 0, 0.5), 0 0 40px rgba(0, 255, 0, 0.3)"
727
+ }
728
+ }
729
+ }
730
+ };
731
+
732
+ // tokens/utilities.ts
733
+ var GRADIENT_DIRECTIONS = {
734
+ TO_TOP: "bg-gradient-to-t",
735
+ TO_BOTTOM: "bg-gradient-to-b",
736
+ TO_LEFT: "bg-gradient-to-l",
737
+ TO_RIGHT: "bg-gradient-to-r",
738
+ TO_TL: "bg-gradient-to-tl",
739
+ TO_TR: "bg-gradient-to-tr",
740
+ TO_BL: "bg-gradient-to-bl",
741
+ TO_BR: "bg-gradient-to-br"
742
+ };
743
+ var GRADIENTS = {
744
+ // Gradientes de texto
745
+ TEXT_PRIMARY: "bg-gradient-to-r from-cyan-400 via-purple-400 to-pink-400 bg-clip-text text-transparent",
746
+ // Gradientes decorativos
747
+ DECORATIVE_PRIMARY: "bg-gradient-to-br from-cyan-500 via-purple-500 to-pink-500",
748
+ DECORATIVE_CYAN_PURPLE: "bg-gradient-to-r from-cyan-500 to-purple-500",
749
+ DECORATIVE_GREEN_EMERALD: "bg-gradient-to-br from-green-500 to-emerald-500",
750
+ // Gradientes de botões
751
+ BUTTON_CYAN_BLUE: "bg-gradient-to-r from-cyan-500 to-blue-500",
752
+ BUTTON_PURPLE_PINK: "bg-gradient-to-r from-purple-500 to-pink-500"
753
+ };
754
+ var BACKGROUND = {
755
+ // Background completo
756
+ FULL: "bg-background",
757
+ // Overlay de gradiente
758
+ GRADIENT_OVERLAY: "bg-gradient-to-br from-cyan-500/10 via-purple-500/10 to-pink-500/10",
759
+ // Divisores premium
760
+ PREMIUM_DIVIDER_CONTAINER: "bg-gradient-to-b from-transparent via-cyan-500/5 to-transparent",
761
+ PREMIUM_DIVIDER_LINE: "bg-gradient-to-r from-transparent via-cyan-400/50 to-transparent",
762
+ // Backgrounds de seção
763
+ SECTION_CYAN: "bg-gradient-to-br from-cyan-500/5 via-cyan-500/3 to-transparent",
764
+ SECTION_CYAN_VIA: "bg-gradient-to-br from-transparent via-cyan-500/5 to-transparent",
765
+ SECTION_PURPLE_VIA: "bg-gradient-to-br from-transparent via-purple-500/5 to-transparent",
766
+ SECTION_PINK_VIA: "bg-gradient-to-br from-transparent via-pink-500/5 to-transparent"
767
+ };
768
+
769
+ // tokens/accessibility.ts
770
+ function hexToRgb(hex) {
771
+ const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
772
+ if (!result) {
773
+ throw new Error(`Invalid hex color: ${hex}`);
774
+ }
775
+ return {
776
+ r: parseInt(result[1], 16),
777
+ g: parseInt(result[2], 16),
778
+ b: parseInt(result[3], 16)
779
+ };
780
+ }
781
+ function getLuminance(r, g, b) {
782
+ const [rs, gs, bs] = [r, g, b].map((val) => {
783
+ const v = val / 255;
784
+ return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
785
+ });
786
+ return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
787
+ }
788
+ function getContrast(color1, color2) {
789
+ const rgb1 = hexToRgb(color1);
790
+ const rgb2 = hexToRgb(color2);
791
+ const lum1 = getLuminance(rgb1.r, rgb1.g, rgb1.b);
792
+ const lum2 = getLuminance(rgb2.r, rgb2.g, rgb2.b);
793
+ const lighter = Math.max(lum1, lum2);
794
+ const darker = Math.min(lum1, lum2);
795
+ return (lighter + 0.05) / (darker + 0.05);
796
+ }
797
+ function meetsWCAGAA(foreground, background, largeText = false) {
798
+ const contrast = getContrast(foreground, background);
799
+ return largeText ? contrast >= 3 : contrast >= 4.5;
800
+ }
801
+ function meetsWCAGAAA(foreground, background, largeText = false) {
802
+ const contrast = getContrast(foreground, background);
803
+ return largeText ? contrast >= 4.5 : contrast >= 7;
804
+ }
805
+ function getContrastInfo(foreground, background) {
806
+ const contrast = getContrast(foreground, background);
807
+ const meetsAA = contrast >= 4.5;
808
+ const meetsAALarge = contrast >= 3;
809
+ const meetsAAA = contrast >= 7;
810
+ const meetsAAALarge = contrast >= 4.5;
811
+ let level = "Fail";
812
+ if (meetsAAA) {
813
+ level = "AAA";
814
+ } else if (meetsAAALarge) {
815
+ level = "AAA Large";
816
+ } else if (meetsAA) {
817
+ level = "AA";
818
+ } else if (meetsAALarge) {
819
+ level = "AA Large";
820
+ }
821
+ return {
822
+ contrast,
823
+ meetsAA,
824
+ meetsAALarge,
825
+ meetsAAA,
826
+ meetsAAALarge,
827
+ level
828
+ };
829
+ }
830
+ function validateContrast(foreground, background, options = {}) {
831
+ const { requireAAA = false, largeText = false } = options;
832
+ const info = getContrastInfo(foreground, background);
833
+ let valid = false;
834
+ let message = "";
835
+ if (requireAAA) {
836
+ valid = largeText ? info.meetsAAALarge : info.meetsAAA;
837
+ message = valid ? `Contraste v\xE1lido (WCAG AAA${largeText ? " - Texto Grande" : ""})` : `Contraste insuficiente para WCAG AAA${largeText ? " - Texto Grande" : ""}. Requerido: ${largeText ? "4.5:1" : "7:1"}, atual: ${info.contrast.toFixed(2)}:1`;
838
+ } else {
839
+ valid = largeText ? info.meetsAALarge : info.meetsAA;
840
+ message = valid ? `Contraste v\xE1lido (WCAG AA${largeText ? " - Texto Grande" : ""})` : `Contraste insuficiente para WCAG AA${largeText ? " - Texto Grande" : ""}. Requerido: ${largeText ? "3:1" : "4.5:1"}, atual: ${info.contrast.toFixed(2)}:1`;
841
+ }
842
+ return {
843
+ valid,
844
+ level: info.level,
845
+ contrast: info.contrast,
846
+ message
847
+ };
848
+ }
849
+
850
+ // tokens/index.ts
851
+ var tokens = {
852
+ colors: {
853
+ light: light_default.colors,
854
+ dark: dark_default.colors
855
+ },
856
+ typography: typography_default.typography,
857
+ spacing: spacing_default.spacing,
858
+ radius: radius_default.radius,
859
+ shadows: shadows_default.shadows
860
+ };
861
+ var lightThemeColors = light_default.colors;
862
+ var darkThemeColors = dark_default.colors;
863
+ var typographyTokens = typography_default.typography;
864
+ var spacingTokens = spacing_default.spacing;
865
+ var radiusTokens = radius_default.radius;
866
+ var shadowTokens = shadows_default.shadows;
867
+ var tokens_default = tokens;
868
+
869
+ // themes/light.ts
870
+ var lightTheme = {
871
+ colors: tokens.colors.light,
872
+ typography: tokens.typography,
873
+ spacing: tokens.spacing,
874
+ radius: tokens.radius,
875
+ shadows: tokens.shadows.light
876
+ };
877
+
878
+ // themes/dark.ts
879
+ var darkTheme = {
880
+ colors: tokens.colors.dark,
881
+ typography: tokens.typography,
882
+ spacing: tokens.spacing,
883
+ radius: tokens.radius,
884
+ shadows: tokens.shadows.dark
885
+ };
886
+
887
+ // themes/index.ts
888
+ var themes = {
889
+ light: lightTheme,
890
+ dark: darkTheme
891
+ };
892
+ var themes_default = themes;
893
+ // Annotate the CommonJS export names for ESM import in node:
894
+ 0 && (module.exports = {
895
+ BACKGROUND,
896
+ GRADIENTS,
897
+ GRADIENT_DIRECTIONS,
898
+ darkTheme,
899
+ darkThemeColors,
900
+ getContrast,
901
+ getContrastInfo,
902
+ getLuminance,
903
+ hexToRgb,
904
+ lightTheme,
905
+ lightThemeColors,
906
+ meetsWCAGAA,
907
+ meetsWCAGAAA,
908
+ radiusTokens,
909
+ shadowTokens,
910
+ spacingTokens,
911
+ themes,
912
+ tokens,
913
+ typographyTokens,
914
+ validateContrast
915
+ });
916
+ /**
917
+ * @fileoverview Ponto de entrada principal da biblioteca @rainersoft/design-tokens
918
+ *
919
+ * @description
920
+ * Biblioteca enterprise-grade de design tokens para sistemas de design modernos.
921
+ * Tecnologicamente agnóstica, escalável e pronta para produção.
922
+ *
923
+ * Esta biblioteca fornece tokens de design estruturados que podem ser utilizados
924
+ * em qualquer framework ou tecnologia, garantindo consistência visual em toda
925
+ * a aplicação.
926
+ *
927
+ * @module @rainersoft/design-tokens
928
+ * @version 4.0.0
929
+ * @author Rainer Teixeira
930
+ * @license MIT
931
+ * @since 1.0.0
932
+ *
933
+ * @example
934
+ * ```typescript
935
+ * import { tokens, themes, lightTheme, darkTheme } from '@rainersoft/design-tokens';
936
+ *
937
+ * // Usar tokens diretamente
938
+ * const primaryColor = tokens.colors.light.brand.primary;
939
+ *
940
+ * // Usar temas completos
941
+ * const theme = lightTheme;
942
+ * ```
943
+ */
944
+ //# sourceMappingURL=index.cjs.map