@nswds/tokens 3.0.1 → 3.1.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.
Files changed (68) hide show
  1. package/dist/css/breakpoints/global.css +7 -0
  2. package/dist/css/colors/semantic/hex.css +76 -76
  3. package/dist/css/colors/semantic/hsl.css +76 -76
  4. package/dist/css/colors/semantic/oklch.css +76 -76
  5. package/dist/css/colors/semantic/rgb.css +76 -76
  6. package/dist/css/colors/themes/masterbrand/hex.css +57 -57
  7. package/dist/css/colors/themes/masterbrand/hsl.css +57 -57
  8. package/dist/css/colors/themes/masterbrand/oklch.css +57 -57
  9. package/dist/css/colors/themes/masterbrand/rgb.css +57 -57
  10. package/dist/css/radius/global.css +7 -0
  11. package/dist/css/space/global.css +14 -0
  12. package/dist/index.cjs +815 -31
  13. package/dist/index.cjs.map +1 -1
  14. package/dist/index.d.cts +263 -0
  15. package/dist/index.d.ts +263 -0
  16. package/dist/index.js +815 -31
  17. package/dist/index.js.map +1 -1
  18. package/dist/js/breakpoints/global.js +7 -0
  19. package/dist/js/radius/global.js +7 -0
  20. package/dist/js/space/global.js +14 -0
  21. package/dist/json/breakpoints/global.json +9 -0
  22. package/dist/json/radius/global.json +9 -0
  23. package/dist/json/space/global.json +16 -0
  24. package/dist/less/breakpoints/global.less +5 -0
  25. package/dist/less/colors/semantic/hex.less +76 -76
  26. package/dist/less/colors/semantic/hsl.less +76 -76
  27. package/dist/less/colors/semantic/oklch.less +76 -76
  28. package/dist/less/colors/semantic/rgb.less +76 -76
  29. package/dist/less/colors/themes/masterbrand/hex.less +57 -57
  30. package/dist/less/colors/themes/masterbrand/hsl.less +57 -57
  31. package/dist/less/colors/themes/masterbrand/oklch.less +57 -57
  32. package/dist/less/colors/themes/masterbrand/rgb.less +57 -57
  33. package/dist/less/radius/global.less +5 -0
  34. package/dist/less/space/global.less +12 -0
  35. package/dist/scss/breakpoints/global.scss +5 -0
  36. package/dist/scss/colors/semantic/hex.scss +76 -76
  37. package/dist/scss/colors/semantic/hsl.scss +76 -76
  38. package/dist/scss/colors/semantic/oklch.scss +76 -76
  39. package/dist/scss/colors/semantic/rgb.scss +76 -76
  40. package/dist/scss/colors/themes/masterbrand/hex.scss +57 -57
  41. package/dist/scss/colors/themes/masterbrand/hsl.scss +57 -57
  42. package/dist/scss/colors/themes/masterbrand/oklch.scss +57 -57
  43. package/dist/scss/colors/themes/masterbrand/rgb.scss +57 -57
  44. package/dist/scss/radius/global.scss +5 -0
  45. package/dist/scss/space/global.scss +12 -0
  46. package/dist/tailwind/breakpoints/global.css +7 -0
  47. package/dist/tailwind/radius/global.css +7 -0
  48. package/dist/tailwind/space/global.css +14 -0
  49. package/dist/tokens/breakpoints.base.json +44 -0
  50. package/dist/tokens/global/breakpoints/canonical.json +44 -0
  51. package/dist/tokens/global/radius/canonical.json +44 -0
  52. package/dist/tokens/global/space/canonical.json +100 -0
  53. package/dist/tokens/radius.base.json +44 -0
  54. package/dist/tokens/semantic/color/canonical.json +76 -0
  55. package/dist/tokens/semantic/color/hex.json +76 -0
  56. package/dist/tokens/semantic/color/hsl.json +76 -0
  57. package/dist/tokens/semantic/color/oklch.json +76 -0
  58. package/dist/tokens/semantic/color/rgb.json +76 -0
  59. package/dist/tokens/space.base.json +100 -0
  60. package/dist/tokens/themes/color/masterbrand/canonical.json +57 -0
  61. package/dist/tokens/themes/color/masterbrand/hex.json +57 -0
  62. package/dist/tokens/themes/color/masterbrand/hsl.json +57 -0
  63. package/dist/tokens/themes/color/masterbrand/oklch.json +57 -0
  64. package/dist/tokens/themes/color/masterbrand/rgb.json +57 -0
  65. package/dist/ts/breakpoints/global.ts +7 -0
  66. package/dist/ts/radius/global.ts +7 -0
  67. package/dist/ts/space/global.ts +14 -0
  68. package/package.json +1 -1
package/dist/tokens/themes/color/masterbrand/hsl.json CHANGED
@@ -2,6 +2,7 @@
2
2
  "primary": {
3
3
  "50": {
4
4
  "$type": "color",
5
+ "$description": "Primary brand colour — primary actions, links, and key accents. Step 50: lightest tints for subtle backgrounds and surfaces.",
5
6
  "$value": {
6
7
  "colorSpace": "hsl",
7
8
  "components": [
@@ -15,6 +16,7 @@
15
16
  },
16
17
  "100": {
17
18
  "$type": "color",
19
+ "$description": "Primary brand colour — primary actions, links, and key accents. Step 100: lightest tints for subtle backgrounds and surfaces.",
18
20
  "$value": {
19
21
  "colorSpace": "hsl",
20
22
  "components": [
@@ -28,6 +30,7 @@
28
30
  },
29
31
  "150": {
30
32
  "$type": "color",
33
+ "$description": "Primary brand colour — primary actions, links, and key accents. Step 150: lightest tints for subtle backgrounds and surfaces.",
31
34
  "$value": {
32
35
  "colorSpace": "hsl",
33
36
  "components": [
@@ -41,6 +44,7 @@
41
44
  },
42
45
  "200": {
43
46
  "$type": "color",
47
+ "$description": "Primary brand colour — primary actions, links, and key accents. Step 200: lightest tints for subtle backgrounds and surfaces.",
44
48
  "$value": {
45
49
  "colorSpace": "hsl",
46
50
  "components": [
@@ -54,6 +58,7 @@
54
58
  },
55
59
  "250": {
56
60
  "$type": "color",
61
+ "$description": "Primary brand colour — primary actions, links, and key accents. Step 250: lightest tints for subtle backgrounds and surfaces.",
57
62
  "$value": {
58
63
  "colorSpace": "hsl",
59
64
  "components": [
@@ -67,6 +72,7 @@
67
72
  },
68
73
  "300": {
69
74
  "$type": "color",
75
+ "$description": "Primary brand colour — primary actions, links, and key accents. Step 300: light tints.",
70
76
  "$value": {
71
77
  "colorSpace": "hsl",
72
78
  "components": [
@@ -80,6 +86,7 @@
80
86
  },
81
87
  "350": {
82
88
  "$type": "color",
89
+ "$description": "Primary brand colour — primary actions, links, and key accents. Step 350: light tints.",
83
90
  "$value": {
84
91
  "colorSpace": "hsl",
85
92
  "components": [
@@ -93,6 +100,7 @@
93
100
  },
94
101
  "400": {
95
102
  "$type": "color",
103
+ "$description": "Primary brand colour — primary actions, links, and key accents. Step 400: light tints.",
96
104
  "$value": {
97
105
  "colorSpace": "hsl",
98
106
  "components": [
@@ -106,6 +114,7 @@
106
114
  },
107
115
  "450": {
108
116
  "$type": "color",
117
+ "$description": "Primary brand colour — primary actions, links, and key accents. Step 450: light tints.",
109
118
  "$value": {
110
119
  "colorSpace": "hsl",
111
120
  "components": [
@@ -119,6 +128,7 @@
119
128
  },
120
129
  "500": {
121
130
  "$type": "color",
131
+ "$description": "Primary brand colour — primary actions, links, and key accents. Step 500: base colour.",
122
132
  "$value": {
123
133
  "colorSpace": "hsl",
124
134
  "components": [
@@ -132,6 +142,7 @@
132
142
  },
133
143
  "550": {
134
144
  "$type": "color",
145
+ "$description": "Primary brand colour — primary actions, links, and key accents. Step 550: shades for borders and icons.",
135
146
  "$value": {
136
147
  "colorSpace": "hsl",
137
148
  "components": [
@@ -145,6 +156,7 @@
145
156
  },
146
157
  "600": {
147
158
  "$type": "color",
159
+ "$description": "Primary brand colour — primary actions, links, and key accents. Step 600: shades for borders and icons.",
148
160
  "$value": {
149
161
  "colorSpace": "hsl",
150
162
  "components": [
@@ -158,6 +170,7 @@
158
170
  },
159
171
  "650": {
160
172
  "$type": "color",
173
+ "$description": "Primary brand colour — primary actions, links, and key accents. Step 650: shades for borders and icons.",
161
174
  "$value": {
162
175
  "colorSpace": "hsl",
163
176
  "components": [
@@ -171,6 +184,7 @@
171
184
  },
172
185
  "700": {
173
186
  "$type": "color",
187
+ "$description": "Primary brand colour — primary actions, links, and key accents. Step 700: shades for borders and icons.",
174
188
  "$value": {
175
189
  "colorSpace": "hsl",
176
190
  "components": [
@@ -184,6 +198,7 @@
184
198
  },
185
199
  "750": {
186
200
  "$type": "color",
201
+ "$description": "Primary brand colour — primary actions, links, and key accents. Step 750: darkest shades for text and high emphasis.",
187
202
  "$value": {
188
203
  "colorSpace": "hsl",
189
204
  "components": [
@@ -197,6 +212,7 @@
197
212
  },
198
213
  "800": {
199
214
  "$type": "color",
215
+ "$description": "Primary brand colour — primary actions, links, and key accents. Step 800: darkest shades for text and high emphasis.",
200
216
  "$value": {
201
217
  "colorSpace": "hsl",
202
218
  "components": [
@@ -210,6 +226,7 @@
210
226
  },
211
227
  "850": {
212
228
  "$type": "color",
229
+ "$description": "Primary brand colour — primary actions, links, and key accents. Step 850: darkest shades for text and high emphasis.",
213
230
  "$value": {
214
231
  "colorSpace": "hsl",
215
232
  "components": [
@@ -223,6 +240,7 @@
223
240
  },
224
241
  "900": {
225
242
  "$type": "color",
243
+ "$description": "Primary brand colour — primary actions, links, and key accents. Step 900: darkest shades for text and high emphasis.",
226
244
  "$value": {
227
245
  "colorSpace": "hsl",
228
246
  "components": [
@@ -236,6 +254,7 @@
236
254
  },
237
255
  "950": {
238
256
  "$type": "color",
257
+ "$description": "Primary brand colour — primary actions, links, and key accents. Step 950: darkest shades for text and high emphasis.",
239
258
  "$value": {
240
259
  "colorSpace": "hsl",
241
260
  "components": [
@@ -251,6 +270,7 @@
251
270
  "accent": {
252
271
  "50": {
253
272
  "$type": "color",
273
+ "$description": "Accent colour — secondary emphasis and supporting highlights. Step 50: lightest tints for subtle backgrounds and surfaces.",
254
274
  "$value": {
255
275
  "colorSpace": "hsl",
256
276
  "components": [
@@ -264,6 +284,7 @@
264
284
  },
265
285
  "100": {
266
286
  "$type": "color",
287
+ "$description": "Accent colour — secondary emphasis and supporting highlights. Step 100: lightest tints for subtle backgrounds and surfaces.",
267
288
  "$value": {
268
289
  "colorSpace": "hsl",
269
290
  "components": [
@@ -277,6 +298,7 @@
277
298
  },
278
299
  "150": {
279
300
  "$type": "color",
301
+ "$description": "Accent colour — secondary emphasis and supporting highlights. Step 150: lightest tints for subtle backgrounds and surfaces.",
280
302
  "$value": {
281
303
  "colorSpace": "hsl",
282
304
  "components": [
@@ -290,6 +312,7 @@
290
312
  },
291
313
  "200": {
292
314
  "$type": "color",
315
+ "$description": "Accent colour — secondary emphasis and supporting highlights. Step 200: lightest tints for subtle backgrounds and surfaces.",
293
316
  "$value": {
294
317
  "colorSpace": "hsl",
295
318
  "components": [
@@ -303,6 +326,7 @@
303
326
  },
304
327
  "250": {
305
328
  "$type": "color",
329
+ "$description": "Accent colour — secondary emphasis and supporting highlights. Step 250: lightest tints for subtle backgrounds and surfaces.",
306
330
  "$value": {
307
331
  "colorSpace": "hsl",
308
332
  "components": [
@@ -316,6 +340,7 @@
316
340
  },
317
341
  "300": {
318
342
  "$type": "color",
343
+ "$description": "Accent colour — secondary emphasis and supporting highlights. Step 300: light tints.",
319
344
  "$value": {
320
345
  "colorSpace": "hsl",
321
346
  "components": [
@@ -329,6 +354,7 @@
329
354
  },
330
355
  "350": {
331
356
  "$type": "color",
357
+ "$description": "Accent colour — secondary emphasis and supporting highlights. Step 350: light tints.",
332
358
  "$value": {
333
359
  "colorSpace": "hsl",
334
360
  "components": [
@@ -342,6 +368,7 @@
342
368
  },
343
369
  "400": {
344
370
  "$type": "color",
371
+ "$description": "Accent colour — secondary emphasis and supporting highlights. Step 400: light tints.",
345
372
  "$value": {
346
373
  "colorSpace": "hsl",
347
374
  "components": [
@@ -355,6 +382,7 @@
355
382
  },
356
383
  "450": {
357
384
  "$type": "color",
385
+ "$description": "Accent colour — secondary emphasis and supporting highlights. Step 450: light tints.",
358
386
  "$value": {
359
387
  "colorSpace": "hsl",
360
388
  "components": [
@@ -368,6 +396,7 @@
368
396
  },
369
397
  "500": {
370
398
  "$type": "color",
399
+ "$description": "Accent colour — secondary emphasis and supporting highlights. Step 500: base colour.",
371
400
  "$value": {
372
401
  "colorSpace": "hsl",
373
402
  "components": [
@@ -381,6 +410,7 @@
381
410
  },
382
411
  "550": {
383
412
  "$type": "color",
413
+ "$description": "Accent colour — secondary emphasis and supporting highlights. Step 550: shades for borders and icons.",
384
414
  "$value": {
385
415
  "colorSpace": "hsl",
386
416
  "components": [
@@ -394,6 +424,7 @@
394
424
  },
395
425
  "600": {
396
426
  "$type": "color",
427
+ "$description": "Accent colour — secondary emphasis and supporting highlights. Step 600: shades for borders and icons.",
397
428
  "$value": {
398
429
  "colorSpace": "hsl",
399
430
  "components": [
@@ -407,6 +438,7 @@
407
438
  },
408
439
  "650": {
409
440
  "$type": "color",
441
+ "$description": "Accent colour — secondary emphasis and supporting highlights. Step 650: shades for borders and icons.",
410
442
  "$value": {
411
443
  "colorSpace": "hsl",
412
444
  "components": [
@@ -420,6 +452,7 @@
420
452
  },
421
453
  "700": {
422
454
  "$type": "color",
455
+ "$description": "Accent colour — secondary emphasis and supporting highlights. Step 700: shades for borders and icons.",
423
456
  "$value": {
424
457
  "colorSpace": "hsl",
425
458
  "components": [
@@ -433,6 +466,7 @@
433
466
  },
434
467
  "750": {
435
468
  "$type": "color",
469
+ "$description": "Accent colour — secondary emphasis and supporting highlights. Step 750: darkest shades for text and high emphasis.",
436
470
  "$value": {
437
471
  "colorSpace": "hsl",
438
472
  "components": [
@@ -446,6 +480,7 @@
446
480
  },
447
481
  "800": {
448
482
  "$type": "color",
483
+ "$description": "Accent colour — secondary emphasis and supporting highlights. Step 800: darkest shades for text and high emphasis.",
449
484
  "$value": {
450
485
  "colorSpace": "hsl",
451
486
  "components": [
@@ -459,6 +494,7 @@
459
494
  },
460
495
  "850": {
461
496
  "$type": "color",
497
+ "$description": "Accent colour — secondary emphasis and supporting highlights. Step 850: darkest shades for text and high emphasis.",
462
498
  "$value": {
463
499
  "colorSpace": "hsl",
464
500
  "components": [
@@ -472,6 +508,7 @@
472
508
  },
473
509
  "900": {
474
510
  "$type": "color",
511
+ "$description": "Accent colour — secondary emphasis and supporting highlights. Step 900: darkest shades for text and high emphasis.",
475
512
  "$value": {
476
513
  "colorSpace": "hsl",
477
514
  "components": [
@@ -485,6 +522,7 @@
485
522
  },
486
523
  "950": {
487
524
  "$type": "color",
525
+ "$description": "Accent colour — secondary emphasis and supporting highlights. Step 950: darkest shades for text and high emphasis.",
488
526
  "$value": {
489
527
  "colorSpace": "hsl",
490
528
  "components": [
@@ -500,6 +538,7 @@
500
538
  "grey": {
501
539
  "50": {
502
540
  "$type": "color",
541
+ "$description": "Neutral grey — text, borders, surfaces, and dividers. Step 50: lightest tints for subtle backgrounds and surfaces.",
503
542
  "$value": {
504
543
  "colorSpace": "hsl",
505
544
  "components": [
@@ -513,6 +552,7 @@
513
552
  },
514
553
  "100": {
515
554
  "$type": "color",
555
+ "$description": "Neutral grey — text, borders, surfaces, and dividers. Step 100: lightest tints for subtle backgrounds and surfaces.",
516
556
  "$value": {
517
557
  "colorSpace": "hsl",
518
558
  "components": [
@@ -526,6 +566,7 @@
526
566
  },
527
567
  "150": {
528
568
  "$type": "color",
569
+ "$description": "Neutral grey — text, borders, surfaces, and dividers. Step 150: lightest tints for subtle backgrounds and surfaces.",
529
570
  "$value": {
530
571
  "colorSpace": "hsl",
531
572
  "components": [
@@ -539,6 +580,7 @@
539
580
  },
540
581
  "200": {
541
582
  "$type": "color",
583
+ "$description": "Neutral grey — text, borders, surfaces, and dividers. Step 200: lightest tints for subtle backgrounds and surfaces.",
542
584
  "$value": {
543
585
  "colorSpace": "hsl",
544
586
  "components": [
@@ -552,6 +594,7 @@
552
594
  },
553
595
  "250": {
554
596
  "$type": "color",
597
+ "$description": "Neutral grey — text, borders, surfaces, and dividers. Step 250: lightest tints for subtle backgrounds and surfaces.",
555
598
  "$value": {
556
599
  "colorSpace": "hsl",
557
600
  "components": [
@@ -565,6 +608,7 @@
565
608
  },
566
609
  "300": {
567
610
  "$type": "color",
611
+ "$description": "Neutral grey — text, borders, surfaces, and dividers. Step 300: light tints.",
568
612
  "$value": {
569
613
  "colorSpace": "hsl",
570
614
  "components": [
@@ -578,6 +622,7 @@
578
622
  },
579
623
  "350": {
580
624
  "$type": "color",
625
+ "$description": "Neutral grey — text, borders, surfaces, and dividers. Step 350: light tints.",
581
626
  "$value": {
582
627
  "colorSpace": "hsl",
583
628
  "components": [
@@ -591,6 +636,7 @@
591
636
  },
592
637
  "400": {
593
638
  "$type": "color",
639
+ "$description": "Neutral grey — text, borders, surfaces, and dividers. Step 400: light tints.",
594
640
  "$value": {
595
641
  "colorSpace": "hsl",
596
642
  "components": [
@@ -604,6 +650,7 @@
604
650
  },
605
651
  "450": {
606
652
  "$type": "color",
653
+ "$description": "Neutral grey — text, borders, surfaces, and dividers. Step 450: light tints.",
607
654
  "$value": {
608
655
  "colorSpace": "hsl",
609
656
  "components": [
@@ -617,6 +664,7 @@
617
664
  },
618
665
  "500": {
619
666
  "$type": "color",
667
+ "$description": "Neutral grey — text, borders, surfaces, and dividers. Step 500: base colour.",
620
668
  "$value": {
621
669
  "colorSpace": "hsl",
622
670
  "components": [
@@ -630,6 +678,7 @@
630
678
  },
631
679
  "550": {
632
680
  "$type": "color",
681
+ "$description": "Neutral grey — text, borders, surfaces, and dividers. Step 550: shades for borders and icons.",
633
682
  "$value": {
634
683
  "colorSpace": "hsl",
635
684
  "components": [
@@ -643,6 +692,7 @@
643
692
  },
644
693
  "600": {
645
694
  "$type": "color",
695
+ "$description": "Neutral grey — text, borders, surfaces, and dividers. Step 600: shades for borders and icons.",
646
696
  "$value": {
647
697
  "colorSpace": "hsl",
648
698
  "components": [
@@ -656,6 +706,7 @@
656
706
  },
657
707
  "650": {
658
708
  "$type": "color",
709
+ "$description": "Neutral grey — text, borders, surfaces, and dividers. Step 650: shades for borders and icons.",
659
710
  "$value": {
660
711
  "colorSpace": "hsl",
661
712
  "components": [
@@ -669,6 +720,7 @@
669
720
  },
670
721
  "700": {
671
722
  "$type": "color",
723
+ "$description": "Neutral grey — text, borders, surfaces, and dividers. Step 700: shades for borders and icons.",
672
724
  "$value": {
673
725
  "colorSpace": "hsl",
674
726
  "components": [
@@ -682,6 +734,7 @@
682
734
  },
683
735
  "750": {
684
736
  "$type": "color",
737
+ "$description": "Neutral grey — text, borders, surfaces, and dividers. Step 750: darkest shades for text and high emphasis.",
685
738
  "$value": {
686
739
  "colorSpace": "hsl",
687
740
  "components": [
@@ -695,6 +748,7 @@
695
748
  },
696
749
  "800": {
697
750
  "$type": "color",
751
+ "$description": "Neutral grey — text, borders, surfaces, and dividers. Step 800: darkest shades for text and high emphasis.",
698
752
  "$value": {
699
753
  "colorSpace": "hsl",
700
754
  "components": [
@@ -708,6 +762,7 @@
708
762
  },
709
763
  "850": {
710
764
  "$type": "color",
765
+ "$description": "Neutral grey — text, borders, surfaces, and dividers. Step 850: darkest shades for text and high emphasis.",
711
766
  "$value": {
712
767
  "colorSpace": "hsl",
713
768
  "components": [
@@ -721,6 +776,7 @@
721
776
  },
722
777
  "900": {
723
778
  "$type": "color",
779
+ "$description": "Neutral grey — text, borders, surfaces, and dividers. Step 900: darkest shades for text and high emphasis.",
724
780
  "$value": {
725
781
  "colorSpace": "hsl",
726
782
  "components": [
@@ -734,6 +790,7 @@
734
790
  },
735
791
  "950": {
736
792
  "$type": "color",
793
+ "$description": "Neutral grey — text, borders, surfaces, and dividers. Step 950: darkest shades for text and high emphasis.",
737
794
  "$value": {
738
795
  "colorSpace": "hsl",
739
796
  "components": [