@phcdevworks/spectre-tokens 2.1.0 → 2.1.1

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 +133 -1457
  3. package/dist/index.cjs +329 -139
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.css +174 -174
  6. package/dist/index.d.cts +204 -14
  7. package/dist/index.d.ts +204 -14
  8. package/dist/index.js +329 -139
  9. package/dist/index.js.map +1 -1
  10. package/package.json +7 -8
  11. package/tokens/components.json +87 -30
  12. package/tokens/modes.json +187 -54
  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,36 +36,66 @@
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
  },
@@ -120,7 +162,7 @@
120
162
  }
121
163
  },
122
164
  "warningText": {
123
- "value": "{colors.warning.700}",
165
+ "value": "{colors.warning.800}",
124
166
  "metadata": {}
125
167
  },
126
168
  "dangerBg": {
@@ -163,7 +205,9 @@
163
205
  "testimonial": {
164
206
  "bg": {
165
207
  "value": "{colors.white}",
166
- "metadata": {}
208
+ "metadata": {
209
+ "pair": "modes.default.component.testimonial.text"
210
+ }
167
211
  },
168
212
  "border": {
169
213
  "value": "{colors.neutral.200}",
@@ -171,15 +215,21 @@
171
215
  },
172
216
  "text": {
173
217
  "value": "{colors.neutral.700}",
174
- "metadata": {}
218
+ "metadata": {
219
+ "pair": "modes.default.component.testimonial.bg"
220
+ }
175
221
  },
176
222
  "authorName": {
177
223
  "value": "{colors.neutral.900}",
178
- "metadata": {}
224
+ "metadata": {
225
+ "pair": "modes.default.component.testimonial.bg"
226
+ }
179
227
  },
180
228
  "authorTitle": {
181
229
  "value": "{colors.neutral.500}",
182
- "metadata": {}
230
+ "metadata": {
231
+ "pair": "modes.default.component.testimonial.bg"
232
+ }
183
233
  },
184
234
  "quoteMark": {
185
235
  "value": "{colors.neutral.300}",
@@ -189,7 +239,9 @@
189
239
  "pricingCard": {
190
240
  "bg": {
191
241
  "value": "{colors.white}",
192
- "metadata": {}
242
+ "metadata": {
243
+ "pair": "modes.default.component.pricingCard.price"
244
+ }
193
245
  },
194
246
  "border": {
195
247
  "value": "{colors.neutral.200}",
@@ -217,11 +269,15 @@
217
269
  },
218
270
  "price": {
219
271
  "value": "{colors.neutral.900}",
220
- "metadata": {}
272
+ "metadata": {
273
+ "pair": "modes.default.component.pricingCard.bg"
274
+ }
221
275
  },
222
276
  "priceDescription": {
223
277
  "value": "{colors.neutral.500}",
224
- "metadata": {}
278
+ "metadata": {
279
+ "pair": "modes.default.component.pricingCard.bg"
280
+ }
225
281
  }
226
282
  },
227
283
  "rating": {
@@ -243,19 +299,31 @@
243
299
  "dark": {
244
300
  "surface": {
245
301
  "page": {
246
- "value": "{colors.neutral.900}"
302
+ "value": "{colors.neutral.900}",
303
+ "metadata": {
304
+ "pair": "modes.dark.text.onPage.default"
305
+ }
247
306
  },
248
307
  "card": {
249
- "value": "{colors.neutral.800}"
308
+ "value": "{colors.neutral.800}",
309
+ "metadata": {
310
+ "pair": "modes.dark.text.onSurface.default"
311
+ }
250
312
  },
251
313
  "input": {
252
- "value": "{colors.neutral.700}"
314
+ "value": "{colors.neutral.700}",
315
+ "metadata": {
316
+ "pair": "modes.dark.text.onSurface.default"
317
+ }
253
318
  },
254
319
  "overlay": {
255
320
  "value": "{colors.neutral.800}"
256
321
  },
257
322
  "alternate": {
258
- "value": "{colors.neutral.800}"
323
+ "value": "{colors.neutral.800}",
324
+ "metadata": {
325
+ "pair": "modes.dark.text.onPage.default"
326
+ }
259
327
  },
260
328
  "hero": {
261
329
  "value": "linear-gradient(135deg, {colors.accent.900} 0%, {colors.accent.700} 100%)"
@@ -264,46 +332,82 @@
264
332
  "text": {
265
333
  "onPage": {
266
334
  "default": {
267
- "value": "{colors.neutral.50}"
335
+ "value": "{colors.neutral.50}",
336
+ "metadata": {
337
+ "pair": "modes.dark.surface.page"
338
+ }
268
339
  },
269
340
  "muted": {
270
- "value": "{colors.neutral.300}"
341
+ "value": "{colors.neutral.200}",
342
+ "metadata": {
343
+ "pair": "modes.dark.surface.page"
344
+ }
271
345
  },
272
346
  "subtle": {
273
- "value": "{colors.neutral.400}"
347
+ "value": "{colors.neutral.300}",
348
+ "metadata": {
349
+ "pair": "modes.dark.surface.page"
350
+ }
274
351
  },
275
352
  "meta": {
276
- "value": "{colors.neutral.400}"
353
+ "value": "{colors.neutral.300}",
354
+ "metadata": {
355
+ "pair": "modes.dark.surface.page"
356
+ }
277
357
  },
278
358
  "brand": {
279
- "value": "{colors.brand.400}"
359
+ "value": "{colors.brand.400}",
360
+ "metadata": {
361
+ "pair": "modes.dark.surface.page"
362
+ }
280
363
  }
281
364
  },
282
365
  "onSurface": {
283
366
  "default": {
284
- "value": "{colors.neutral.100}"
367
+ "value": "{colors.neutral.100}",
368
+ "metadata": {
369
+ "pair": "modes.dark.surface.card"
370
+ }
285
371
  },
286
372
  "muted": {
287
- "value": "{colors.neutral.300}"
373
+ "value": "{colors.neutral.200}",
374
+ "metadata": {
375
+ "pair": "modes.dark.surface.card"
376
+ }
288
377
  },
289
378
  "subtle": {
290
- "value": "{colors.neutral.400}"
379
+ "value": "{colors.neutral.300}",
380
+ "metadata": {
381
+ "pair": "modes.dark.surface.card"
382
+ }
291
383
  },
292
384
  "meta": {
293
- "value": "{colors.neutral.400}"
385
+ "value": "{colors.neutral.300}",
386
+ "metadata": {
387
+ "pair": "modes.dark.surface.card"
388
+ }
294
389
  },
295
390
  "brand": {
296
- "value": "{colors.brand.400}"
391
+ "value": "{colors.brand.400}",
392
+ "metadata": {
393
+ "pair": "modes.dark.surface.card"
394
+ }
297
395
  }
298
396
  }
299
397
  },
300
398
  "component": {
301
399
  "card": {
302
400
  "text": {
303
- "value": "{colors.neutral.100}"
401
+ "value": "{colors.neutral.100}",
402
+ "metadata": {
403
+ "pair": "modes.dark.surface.card"
404
+ }
304
405
  },
305
406
  "textMuted": {
306
- "value": "{colors.neutral.300}"
407
+ "value": "{colors.neutral.200}",
408
+ "metadata": {
409
+ "pair": "modes.dark.surface.card"
410
+ }
307
411
  }
308
412
  },
309
413
  "input": {
@@ -330,20 +434,26 @@
330
434
  }
331
435
  },
332
436
  "neutralBgHover": {
333
- "value": "{colors.neutral.600}"
437
+ "value": "{colors.neutral.600}",
438
+ "metadata": {
439
+ "pair": "modes.dark.component.badge.neutralText"
440
+ }
334
441
  },
335
442
  "neutralText": {
336
443
  "value": "{colors.neutral.100}",
337
444
  "metadata": {}
338
445
  },
339
446
  "infoBg": {
340
- "value": "{colors.info.800}",
447
+ "value": "{colors.info.900}",
341
448
  "metadata": {
342
449
  "pair": "modes.dark.component.badge.infoText"
343
450
  }
344
451
  },
345
452
  "infoBgHover": {
346
- "value": "{colors.info.700}"
453
+ "value": "{colors.info.700}",
454
+ "metadata": {
455
+ "pair": "modes.dark.component.badge.infoText"
456
+ }
347
457
  },
348
458
  "infoText": {
349
459
  "value": "{colors.info.100}",
@@ -356,7 +466,10 @@
356
466
  }
357
467
  },
358
468
  "successBgHover": {
359
- "value": "{colors.success.700}"
469
+ "value": "{colors.success.700}",
470
+ "metadata": {
471
+ "pair": "modes.dark.component.badge.successText"
472
+ }
360
473
  },
361
474
  "successText": {
362
475
  "value": "{colors.success.100}",
@@ -369,7 +482,10 @@
369
482
  }
370
483
  },
371
484
  "warningBgHover": {
372
- "value": "{colors.warning.700}"
485
+ "value": "{colors.warning.800}",
486
+ "metadata": {
487
+ "pair": "modes.dark.component.badge.warningText"
488
+ }
373
489
  },
374
490
  "warningText": {
375
491
  "value": "{colors.warning.100}",
@@ -382,7 +498,10 @@
382
498
  }
383
499
  },
384
500
  "dangerBgHover": {
385
- "value": "{colors.error.700}"
501
+ "value": "{colors.error.700}",
502
+ "metadata": {
503
+ "pair": "modes.dark.component.badge.dangerText"
504
+ }
386
505
  },
387
506
  "dangerText": {
388
507
  "value": "{colors.error.100}",
@@ -418,23 +537,31 @@
418
537
  "testimonial": {
419
538
  "bg": {
420
539
  "value": "{colors.neutral.800}",
421
- "metadata": {}
540
+ "metadata": {
541
+ "pair": "modes.dark.component.testimonial.text"
542
+ }
422
543
  },
423
544
  "border": {
424
545
  "value": "{colors.neutral.700}",
425
546
  "metadata": {}
426
547
  },
427
548
  "text": {
428
- "value": "{colors.neutral.300}",
429
- "metadata": {}
549
+ "value": "{colors.neutral.200}",
550
+ "metadata": {
551
+ "pair": "modes.dark.component.testimonial.bg"
552
+ }
430
553
  },
431
554
  "authorName": {
432
555
  "value": "{colors.neutral.100}",
433
- "metadata": {}
556
+ "metadata": {
557
+ "pair": "modes.dark.component.testimonial.bg"
558
+ }
434
559
  },
435
560
  "authorTitle": {
436
- "value": "{colors.neutral.400}",
437
- "metadata": {}
561
+ "value": "{colors.neutral.300}",
562
+ "metadata": {
563
+ "pair": "modes.dark.component.testimonial.bg"
564
+ }
438
565
  },
439
566
  "quoteMark": {
440
567
  "value": "{colors.neutral.600}",
@@ -444,7 +571,9 @@
444
571
  "pricingCard": {
445
572
  "bg": {
446
573
  "value": "{colors.neutral.800}",
447
- "metadata": {}
574
+ "metadata": {
575
+ "pair": "modes.dark.component.pricingCard.price"
576
+ }
448
577
  },
449
578
  "border": {
450
579
  "value": "{colors.neutral.700}",
@@ -472,11 +601,15 @@
472
601
  },
473
602
  "price": {
474
603
  "value": "{colors.neutral.100}",
475
- "metadata": {}
604
+ "metadata": {
605
+ "pair": "modes.dark.component.pricingCard.bg"
606
+ }
476
607
  },
477
608
  "priceDescription": {
478
- "value": "{colors.neutral.400}",
479
- "metadata": {}
609
+ "value": "{colors.neutral.300}",
610
+ "metadata": {
611
+ "pair": "modes.dark.component.pricingCard.bg"
612
+ }
480
613
  }
481
614
  },
482
615
  "rating": {
package/tokens/palette.json CHANGED
@@ -1,40 +1,40 @@
1
1
  {
2
2
  "colors": {
3
3
  "brand": {
4
- "50": "#eff6ff",
5
- "100": "#dbeafe",
6
- "200": "#bfdbfe",
7
- "300": "#93c5fd",
8
- "400": "#60a5fa",
9
- "500": "#3b82f6",
10
- "600": "#2563eb",
11
- "700": "#1d4ed8",
12
- "800": "#1e40af",
13
- "900": "#1e3a8a"
4
+ "50": "#eef4ff",
5
+ "100": "#d9e7ff",
6
+ "200": "#b9d2ff",
7
+ "300": "#8ab6ff",
8
+ "400": "#5a92ff",
9
+ "500": "#336df4",
10
+ "600": "#1f57db",
11
+ "700": "#1946b4",
12
+ "800": "#173b8f",
13
+ "900": "#16336f"
14
14
  },
15
15
  "neutral": {
16
- "50": "#f8fafc",
17
- "100": "#f1f5f9",
18
- "200": "#e2e8f0",
19
- "300": "#cbd5e1",
20
- "400": "#94a3b8",
21
- "500": "#64748b",
22
- "600": "#475569",
23
- "700": "#334155",
24
- "800": "#1e293b",
25
- "900": "#0f172a"
16
+ "50": "#f7f8fb",
17
+ "100": "#eef1f6",
18
+ "200": "#d9dfeb",
19
+ "300": "#b7c1d4",
20
+ "400": "#8a96ad",
21
+ "500": "#657287",
22
+ "600": "#4b576a",
23
+ "700": "#374253",
24
+ "800": "#222b38",
25
+ "900": "#141b24"
26
26
  },
27
27
  "accent": {
28
- "50": "#f5f3ff",
29
- "100": "#ede9fe",
30
- "200": "#ddd6fe",
31
- "300": "#c4b5fd",
32
- "400": "#a78bfa",
33
- "500": "#8b5cf6",
34
- "600": "#7c3aed",
35
- "700": "#6d28d9",
36
- "800": "#5b21b6",
37
- "900": "#4c1d95"
28
+ "50": "#f6f2ff",
29
+ "100": "#eee5ff",
30
+ "200": "#ddccff",
31
+ "300": "#c3a7ff",
32
+ "400": "#a279ff",
33
+ "500": "#854ff7",
34
+ "600": "#7135dd",
35
+ "700": "#5d28b8",
36
+ "800": "#4d2393",
37
+ "900": "#401f75"
38
38
  },
39
39
  "success": {
40
40
  "50": "#f0fdf4",
@@ -49,16 +49,16 @@
49
49
  "900": "#14532d"
50
50
  },
51
51
  "warning": {
52
- "50": "#fffbeb",
53
- "100": "#fef3c7",
54
- "200": "#fde68a",
55
- "300": "#fcd34d",
56
- "400": "#fbbf24",
57
- "500": "#f59e0b",
58
- "600": "#d97706",
59
- "700": "#b45309",
60
- "800": "#92400e",
61
- "900": "#78350f"
52
+ "50": "#fffbea",
53
+ "100": "#fff1c2",
54
+ "200": "#ffe08a",
55
+ "300": "#ffd24d",
56
+ "400": "#ffc21a",
57
+ "500": "#f5ad00",
58
+ "600": "#d48806",
59
+ "700": "#ad6800",
60
+ "800": "#8f5200",
61
+ "900": "#734000"
62
62
  },
63
63
  "error": {
64
64
  "50": "#fef2f2",
@@ -73,28 +73,28 @@
73
73
  "900": "#7f1d1d"
74
74
  },
75
75
  "info": {
76
- "50": "#eff6ff",
77
- "100": "#dbeafe",
78
- "200": "#bfdbfe",
79
- "300": "#93c5fd",
80
- "400": "#60a5fa",
81
- "500": "#3b82f6",
82
- "600": "#2563eb",
83
- "700": "#1d4ed8",
84
- "800": "#1e40af",
85
- "900": "#1e3a8a"
76
+ "50": "#f0f9ff",
77
+ "100": "#e0f2fe",
78
+ "200": "#bae6fd",
79
+ "300": "#7dd3fc",
80
+ "400": "#38bdf8",
81
+ "500": "#0ea5e9",
82
+ "600": "#0369a1",
83
+ "700": "#075985",
84
+ "800": "#0c4a6e",
85
+ "900": "#082f49"
86
86
  },
87
87
  "indigo": {
88
- "500": "#667eea",
89
- "600": "#5c67f2"
88
+ "500": "#5b6ee1",
89
+ "600": "#4d61db"
90
90
  },
91
91
  "violet": {
92
- "600": "#764ba2"
92
+ "600": "#6f3fd7"
93
93
  },
94
94
  "focus": {
95
- "primary": "#3b82f6",
95
+ "primary": "#336df4",
96
96
  "error": "#ef4444",
97
- "info": "#3b82f6"
97
+ "info": "#0369a1"
98
98
  },
99
99
  "white": "#ffffff",
100
100
  "black": "#000000"