@phcdevworks/spectre-tokens 2.1.0 → 2.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/LICENSE +12 -13
  2. package/README.md +138 -1456
  3. package/dist/index.cjs +449 -167
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.css +174 -174
  6. package/dist/index.d.cts +309 -27
  7. package/dist/index.d.ts +309 -27
  8. package/dist/index.js +449 -167
  9. package/dist/index.js.map +1 -1
  10. package/package.json +16 -13
  11. package/tokens/components.json +144 -45
  12. package/tokens/modes.json +250 -67
  13. package/tokens/palette.json +55 -55
package/tokens/modes.json CHANGED
@@ -3,19 +3,31 @@
3
3
  "default": {
4
4
  "surface": {
5
5
  "page": {
6
- "value": "{colors.neutral.50}"
6
+ "value": "{colors.neutral.50}",
7
+ "metadata": {
8
+ "pair": "modes.default.text.onPage.default"
9
+ }
7
10
  },
8
11
  "card": {
9
- "value": "{colors.white}"
12
+ "value": "{colors.white}",
13
+ "metadata": {
14
+ "pair": "modes.default.text.onSurface.default"
15
+ }
10
16
  },
11
17
  "input": {
12
- "value": "{colors.white}"
18
+ "value": "{colors.white}",
19
+ "metadata": {
20
+ "pair": "modes.default.text.onSurface.default"
21
+ }
13
22
  },
14
23
  "overlay": {
15
24
  "value": "{colors.neutral.900} / 0.6"
16
25
  },
17
26
  "alternate": {
18
- "value": "{colors.neutral.100}"
27
+ "value": "{colors.neutral.100}",
28
+ "metadata": {
29
+ "pair": "modes.default.text.onPage.default"
30
+ }
19
31
  },
20
32
  "hero": {
21
33
  "value": "linear-gradient(135deg, {colors.indigo.500} 0%, {colors.violet.600} 100%)"
@@ -24,54 +36,96 @@
24
36
  "text": {
25
37
  "onPage": {
26
38
  "default": {
27
- "value": "{colors.neutral.900}"
39
+ "value": "{colors.neutral.900}",
40
+ "metadata": {
41
+ "pair": "modes.default.surface.page"
42
+ }
28
43
  },
29
44
  "muted": {
30
- "value": "{colors.neutral.600}"
45
+ "value": "{colors.neutral.600}",
46
+ "metadata": {
47
+ "pair": "modes.default.surface.page"
48
+ }
31
49
  },
32
50
  "subtle": {
33
- "value": "{colors.neutral.500}"
51
+ "value": "{colors.neutral.500}",
52
+ "metadata": {
53
+ "pair": "modes.default.surface.page"
54
+ }
34
55
  },
35
56
  "meta": {
36
- "value": "{colors.neutral.500}"
57
+ "value": "{colors.neutral.500}",
58
+ "metadata": {
59
+ "pair": "modes.default.surface.page"
60
+ }
37
61
  },
38
62
  "brand": {
39
- "value": "{colors.brand.600}"
63
+ "value": "{colors.brand.600}",
64
+ "metadata": {
65
+ "pair": "modes.default.surface.page"
66
+ }
40
67
  }
41
68
  },
42
69
  "onSurface": {
43
70
  "default": {
44
- "value": "{colors.neutral.900}"
71
+ "value": "{colors.neutral.900}",
72
+ "metadata": {
73
+ "pair": "modes.default.surface.card"
74
+ }
45
75
  },
46
76
  "muted": {
47
- "value": "{colors.neutral.600}"
77
+ "value": "{colors.neutral.600}",
78
+ "metadata": {
79
+ "pair": "modes.default.surface.card"
80
+ }
48
81
  },
49
82
  "subtle": {
50
- "value": "{colors.neutral.500}"
83
+ "value": "{colors.neutral.500}",
84
+ "metadata": {
85
+ "pair": "modes.default.surface.card"
86
+ }
51
87
  },
52
88
  "meta": {
53
- "value": "{colors.neutral.500}"
89
+ "value": "{colors.neutral.500}",
90
+ "metadata": {
91
+ "pair": "modes.default.surface.card"
92
+ }
54
93
  },
55
94
  "brand": {
56
- "value": "{colors.brand.600}"
95
+ "value": "{colors.brand.600}",
96
+ "metadata": {
97
+ "pair": "modes.default.surface.card"
98
+ }
57
99
  }
58
100
  }
59
101
  },
60
102
  "component": {
61
103
  "card": {
62
104
  "text": {
63
- "value": "{colors.neutral.900}"
105
+ "value": "{colors.neutral.900}",
106
+ "metadata": {
107
+ "pair": "modes.default.surface.card"
108
+ }
64
109
  },
65
110
  "textMuted": {
66
- "value": "{colors.neutral.500}"
111
+ "value": "{colors.neutral.500}",
112
+ "metadata": {
113
+ "pair": "modes.default.surface.card"
114
+ }
67
115
  }
68
116
  },
69
117
  "input": {
70
118
  "text": {
71
- "value": "{colors.neutral.900}"
119
+ "value": "{colors.neutral.900}",
120
+ "metadata": {
121
+ "pair": "modes.default.surface.input"
122
+ }
72
123
  },
73
124
  "placeholder": {
74
- "value": "{colors.neutral.400}"
125
+ "value": "{colors.neutral.500}",
126
+ "metadata": {
127
+ "pair": "modes.default.surface.input"
128
+ }
75
129
  }
76
130
  },
77
131
  "button": {
@@ -89,6 +143,12 @@
89
143
  "pair": "modes.default.component.badge.neutralText"
90
144
  }
91
145
  },
146
+ "neutralBgHover": {
147
+ "value": "{colors.neutral.200}",
148
+ "metadata": {
149
+ "pair": "modes.default.component.badge.neutralText"
150
+ }
151
+ },
92
152
  "neutralText": {
93
153
  "value": "{colors.neutral.700}",
94
154
  "metadata": {}
@@ -99,6 +159,12 @@
99
159
  "pair": "modes.default.component.badge.infoText"
100
160
  }
101
161
  },
162
+ "infoBgHover": {
163
+ "value": "{colors.info.200}",
164
+ "metadata": {
165
+ "pair": "modes.default.component.badge.infoText"
166
+ }
167
+ },
102
168
  "infoText": {
103
169
  "value": "{colors.info.700}",
104
170
  "metadata": {}
@@ -120,7 +186,7 @@
120
186
  }
121
187
  },
122
188
  "warningText": {
123
- "value": "{colors.warning.700}",
189
+ "value": "{colors.warning.800}",
124
190
  "metadata": {}
125
191
  },
126
192
  "dangerBg": {
@@ -137,7 +203,9 @@
137
203
  "iconBox": {
138
204
  "bg": {
139
205
  "value": "{colors.white}",
140
- "metadata": {}
206
+ "metadata": {
207
+ "pair": "modes.default.component.iconBox.iconDefault"
208
+ }
141
209
  },
142
210
  "border": {
143
211
  "value": "{colors.neutral.200}",
@@ -145,7 +213,9 @@
145
213
  },
146
214
  "iconDefault": {
147
215
  "value": "{colors.info.600}",
148
- "metadata": {}
216
+ "metadata": {
217
+ "pair": "modes.default.component.iconBox.bg"
218
+ }
149
219
  },
150
220
  "iconSuccess": {
151
221
  "value": "{colors.success.600}",
@@ -157,13 +227,17 @@
157
227
  },
158
228
  "iconDanger": {
159
229
  "value": "{colors.error.600}",
160
- "metadata": {}
230
+ "metadata": {
231
+ "pair": "modes.default.component.iconBox.bg"
232
+ }
161
233
  }
162
234
  },
163
235
  "testimonial": {
164
236
  "bg": {
165
237
  "value": "{colors.white}",
166
- "metadata": {}
238
+ "metadata": {
239
+ "pair": "modes.default.component.testimonial.text"
240
+ }
167
241
  },
168
242
  "border": {
169
243
  "value": "{colors.neutral.200}",
@@ -171,15 +245,21 @@
171
245
  },
172
246
  "text": {
173
247
  "value": "{colors.neutral.700}",
174
- "metadata": {}
248
+ "metadata": {
249
+ "pair": "modes.default.component.testimonial.bg"
250
+ }
175
251
  },
176
252
  "authorName": {
177
253
  "value": "{colors.neutral.900}",
178
- "metadata": {}
254
+ "metadata": {
255
+ "pair": "modes.default.component.testimonial.bg"
256
+ }
179
257
  },
180
258
  "authorTitle": {
181
259
  "value": "{colors.neutral.500}",
182
- "metadata": {}
260
+ "metadata": {
261
+ "pair": "modes.default.component.testimonial.bg"
262
+ }
183
263
  },
184
264
  "quoteMark": {
185
265
  "value": "{colors.neutral.300}",
@@ -189,7 +269,9 @@
189
269
  "pricingCard": {
190
270
  "bg": {
191
271
  "value": "{colors.white}",
192
- "metadata": {}
272
+ "metadata": {
273
+ "pair": "modes.default.component.pricingCard.price"
274
+ }
193
275
  },
194
276
  "border": {
195
277
  "value": "{colors.neutral.200}",
@@ -217,11 +299,15 @@
217
299
  },
218
300
  "price": {
219
301
  "value": "{colors.neutral.900}",
220
- "metadata": {}
302
+ "metadata": {
303
+ "pair": "modes.default.component.pricingCard.bg"
304
+ }
221
305
  },
222
306
  "priceDescription": {
223
307
  "value": "{colors.neutral.500}",
224
- "metadata": {}
308
+ "metadata": {
309
+ "pair": "modes.default.component.pricingCard.bg"
310
+ }
225
311
  }
226
312
  },
227
313
  "rating": {
@@ -235,7 +321,9 @@
235
321
  },
236
322
  "text": {
237
323
  "value": "{colors.neutral.500}",
238
- "metadata": {}
324
+ "metadata": {
325
+ "pair": "modes.default.surface.card"
326
+ }
239
327
  }
240
328
  }
241
329
  }
@@ -243,19 +331,31 @@
243
331
  "dark": {
244
332
  "surface": {
245
333
  "page": {
246
- "value": "{colors.neutral.900}"
334
+ "value": "{colors.neutral.900}",
335
+ "metadata": {
336
+ "pair": "modes.dark.text.onPage.default"
337
+ }
247
338
  },
248
339
  "card": {
249
- "value": "{colors.neutral.800}"
340
+ "value": "{colors.neutral.800}",
341
+ "metadata": {
342
+ "pair": "modes.dark.text.onSurface.default"
343
+ }
250
344
  },
251
345
  "input": {
252
- "value": "{colors.neutral.700}"
346
+ "value": "{colors.neutral.700}",
347
+ "metadata": {
348
+ "pair": "modes.dark.text.onSurface.default"
349
+ }
253
350
  },
254
351
  "overlay": {
255
352
  "value": "{colors.neutral.800}"
256
353
  },
257
354
  "alternate": {
258
- "value": "{colors.neutral.800}"
355
+ "value": "{colors.neutral.800}",
356
+ "metadata": {
357
+ "pair": "modes.dark.text.onPage.default"
358
+ }
259
359
  },
260
360
  "hero": {
261
361
  "value": "linear-gradient(135deg, {colors.accent.900} 0%, {colors.accent.700} 100%)"
@@ -264,54 +364,96 @@
264
364
  "text": {
265
365
  "onPage": {
266
366
  "default": {
267
- "value": "{colors.neutral.50}"
367
+ "value": "{colors.neutral.50}",
368
+ "metadata": {
369
+ "pair": "modes.dark.surface.page"
370
+ }
268
371
  },
269
372
  "muted": {
270
- "value": "{colors.neutral.300}"
373
+ "value": "{colors.neutral.300}",
374
+ "metadata": {
375
+ "pair": "modes.dark.surface.page"
376
+ }
271
377
  },
272
378
  "subtle": {
273
- "value": "{colors.neutral.400}"
379
+ "value": "{colors.neutral.400}",
380
+ "metadata": {
381
+ "pair": "modes.dark.surface.page"
382
+ }
274
383
  },
275
384
  "meta": {
276
- "value": "{colors.neutral.400}"
385
+ "value": "{colors.neutral.400}",
386
+ "metadata": {
387
+ "pair": "modes.dark.surface.page"
388
+ }
277
389
  },
278
390
  "brand": {
279
- "value": "{colors.brand.400}"
391
+ "value": "{colors.brand.400}",
392
+ "metadata": {
393
+ "pair": "modes.dark.surface.page"
394
+ }
280
395
  }
281
396
  },
282
397
  "onSurface": {
283
398
  "default": {
284
- "value": "{colors.neutral.100}"
399
+ "value": "{colors.neutral.100}",
400
+ "metadata": {
401
+ "pair": "modes.dark.surface.card"
402
+ }
285
403
  },
286
404
  "muted": {
287
- "value": "{colors.neutral.300}"
405
+ "value": "{colors.neutral.300}",
406
+ "metadata": {
407
+ "pair": "modes.dark.surface.card"
408
+ }
288
409
  },
289
410
  "subtle": {
290
- "value": "{colors.neutral.400}"
411
+ "value": "{colors.neutral.400}",
412
+ "metadata": {
413
+ "pair": "modes.dark.surface.card"
414
+ }
291
415
  },
292
416
  "meta": {
293
- "value": "{colors.neutral.400}"
417
+ "value": "{colors.neutral.400}",
418
+ "metadata": {
419
+ "pair": "modes.dark.surface.card"
420
+ }
294
421
  },
295
422
  "brand": {
296
- "value": "{colors.brand.400}"
423
+ "value": "{colors.brand.400}",
424
+ "metadata": {
425
+ "pair": "modes.dark.surface.card"
426
+ }
297
427
  }
298
428
  }
299
429
  },
300
430
  "component": {
301
431
  "card": {
302
432
  "text": {
303
- "value": "{colors.neutral.100}"
433
+ "value": "{colors.neutral.100}",
434
+ "metadata": {
435
+ "pair": "modes.dark.surface.card"
436
+ }
304
437
  },
305
438
  "textMuted": {
306
- "value": "{colors.neutral.300}"
439
+ "value": "{colors.neutral.300}",
440
+ "metadata": {
441
+ "pair": "modes.dark.surface.card"
442
+ }
307
443
  }
308
444
  },
309
445
  "input": {
310
446
  "text": {
311
- "value": "{colors.neutral.100}"
447
+ "value": "{colors.neutral.100}",
448
+ "metadata": {
449
+ "pair": "modes.dark.surface.input"
450
+ }
312
451
  },
313
452
  "placeholder": {
314
- "value": "{colors.neutral.400}"
453
+ "value": "{colors.neutral.300}",
454
+ "metadata": {
455
+ "pair": "modes.dark.surface.input"
456
+ }
315
457
  }
316
458
  },
317
459
  "button": {
@@ -330,7 +472,10 @@
330
472
  }
331
473
  },
332
474
  "neutralBgHover": {
333
- "value": "{colors.neutral.600}"
475
+ "value": "{colors.neutral.600}",
476
+ "metadata": {
477
+ "pair": "modes.dark.component.badge.neutralText"
478
+ }
334
479
  },
335
480
  "neutralText": {
336
481
  "value": "{colors.neutral.100}",
@@ -343,7 +488,10 @@
343
488
  }
344
489
  },
345
490
  "infoBgHover": {
346
- "value": "{colors.info.700}"
491
+ "value": "{colors.info.700}",
492
+ "metadata": {
493
+ "pair": "modes.dark.component.badge.infoText"
494
+ }
347
495
  },
348
496
  "infoText": {
349
497
  "value": "{colors.info.100}",
@@ -356,7 +504,10 @@
356
504
  }
357
505
  },
358
506
  "successBgHover": {
359
- "value": "{colors.success.700}"
507
+ "value": "{colors.success.700}",
508
+ "metadata": {
509
+ "pair": "modes.dark.component.badge.successText"
510
+ }
360
511
  },
361
512
  "successText": {
362
513
  "value": "{colors.success.100}",
@@ -369,7 +520,10 @@
369
520
  }
370
521
  },
371
522
  "warningBgHover": {
372
- "value": "{colors.warning.700}"
523
+ "value": "{colors.warning.800}",
524
+ "metadata": {
525
+ "pair": "modes.dark.component.badge.warningText"
526
+ }
373
527
  },
374
528
  "warningText": {
375
529
  "value": "{colors.warning.100}",
@@ -382,7 +536,10 @@
382
536
  }
383
537
  },
384
538
  "dangerBgHover": {
385
- "value": "{colors.error.700}"
539
+ "value": "{colors.error.700}",
540
+ "metadata": {
541
+ "pair": "modes.dark.component.badge.dangerText"
542
+ }
386
543
  },
387
544
  "dangerText": {
388
545
  "value": "{colors.error.100}",
@@ -392,7 +549,9 @@
392
549
  "iconBox": {
393
550
  "bg": {
394
551
  "value": "{colors.neutral.800}",
395
- "metadata": {}
552
+ "metadata": {
553
+ "pair": "modes.dark.component.iconBox.iconDefault"
554
+ }
396
555
  },
397
556
  "border": {
398
557
  "value": "{colors.neutral.700}",
@@ -400,41 +559,57 @@
400
559
  },
401
560
  "iconDefault": {
402
561
  "value": "{colors.info.300}",
403
- "metadata": {}
562
+ "metadata": {
563
+ "pair": "modes.dark.component.iconBox.bg"
564
+ }
404
565
  },
405
566
  "iconSuccess": {
406
567
  "value": "{colors.success.400}",
407
- "metadata": {}
568
+ "metadata": {
569
+ "pair": "modes.dark.component.iconBox.bg"
570
+ }
408
571
  },
409
572
  "iconWarning": {
410
573
  "value": "{colors.warning.400}",
411
- "metadata": {}
574
+ "metadata": {
575
+ "pair": "modes.dark.component.iconBox.bg"
576
+ }
412
577
  },
413
578
  "iconDanger": {
414
579
  "value": "{colors.error.400}",
415
- "metadata": {}
580
+ "metadata": {
581
+ "pair": "modes.dark.component.iconBox.bg"
582
+ }
416
583
  }
417
584
  },
418
585
  "testimonial": {
419
586
  "bg": {
420
587
  "value": "{colors.neutral.800}",
421
- "metadata": {}
588
+ "metadata": {
589
+ "pair": "modes.dark.component.testimonial.text"
590
+ }
422
591
  },
423
592
  "border": {
424
593
  "value": "{colors.neutral.700}",
425
594
  "metadata": {}
426
595
  },
427
596
  "text": {
428
- "value": "{colors.neutral.300}",
429
- "metadata": {}
597
+ "value": "{colors.neutral.200}",
598
+ "metadata": {
599
+ "pair": "modes.dark.component.testimonial.bg"
600
+ }
430
601
  },
431
602
  "authorName": {
432
603
  "value": "{colors.neutral.100}",
433
- "metadata": {}
604
+ "metadata": {
605
+ "pair": "modes.dark.component.testimonial.bg"
606
+ }
434
607
  },
435
608
  "authorTitle": {
436
609
  "value": "{colors.neutral.400}",
437
- "metadata": {}
610
+ "metadata": {
611
+ "pair": "modes.dark.component.testimonial.bg"
612
+ }
438
613
  },
439
614
  "quoteMark": {
440
615
  "value": "{colors.neutral.600}",
@@ -444,7 +619,9 @@
444
619
  "pricingCard": {
445
620
  "bg": {
446
621
  "value": "{colors.neutral.800}",
447
- "metadata": {}
622
+ "metadata": {
623
+ "pair": "modes.dark.component.pricingCard.price"
624
+ }
448
625
  },
449
626
  "border": {
450
627
  "value": "{colors.neutral.700}",
@@ -472,11 +649,15 @@
472
649
  },
473
650
  "price": {
474
651
  "value": "{colors.neutral.100}",
475
- "metadata": {}
652
+ "metadata": {
653
+ "pair": "modes.dark.component.pricingCard.bg"
654
+ }
476
655
  },
477
656
  "priceDescription": {
478
657
  "value": "{colors.neutral.400}",
479
- "metadata": {}
658
+ "metadata": {
659
+ "pair": "modes.dark.component.pricingCard.bg"
660
+ }
480
661
  }
481
662
  },
482
663
  "rating": {
@@ -490,7 +671,9 @@
490
671
  },
491
672
  "text": {
492
673
  "value": "{colors.neutral.400}",
493
- "metadata": {}
674
+ "metadata": {
675
+ "pair": "modes.dark.surface.card"
676
+ }
494
677
  }
495
678
  }
496
679
  }