@phcdevworks/spectre-tokens 2.0.0 → 2.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.
package/tokens/modes.json CHANGED
@@ -23,158 +23,475 @@
23
23
  },
24
24
  "text": {
25
25
  "onPage": {
26
- "default": { "value": "{colors.neutral.900}" },
27
- "muted": { "value": "{colors.neutral.600}" },
28
- "subtle": { "value": "{colors.neutral.500}" },
29
- "meta": { "value": "{colors.neutral.500}" },
30
- "brand": { "value": "{colors.brand.600}" }
26
+ "default": {
27
+ "value": "{colors.neutral.900}"
28
+ },
29
+ "muted": {
30
+ "value": "{colors.neutral.600}"
31
+ },
32
+ "subtle": {
33
+ "value": "{colors.neutral.500}"
34
+ },
35
+ "meta": {
36
+ "value": "{colors.neutral.500}"
37
+ },
38
+ "brand": {
39
+ "value": "{colors.brand.600}"
40
+ }
31
41
  },
32
42
  "onSurface": {
33
- "default": { "value": "{colors.neutral.900}" },
34
- "muted": { "value": "{colors.neutral.600}" },
35
- "subtle": { "value": "{colors.neutral.500}" },
36
- "meta": { "value": "{colors.neutral.500}" },
37
- "brand": { "value": "{colors.brand.600}" }
43
+ "default": {
44
+ "value": "{colors.neutral.900}"
45
+ },
46
+ "muted": {
47
+ "value": "{colors.neutral.600}"
48
+ },
49
+ "subtle": {
50
+ "value": "{colors.neutral.500}"
51
+ },
52
+ "meta": {
53
+ "value": "{colors.neutral.500}"
54
+ },
55
+ "brand": {
56
+ "value": "{colors.brand.600}"
57
+ }
38
58
  }
39
59
  },
40
60
  "component": {
41
61
  "card": {
42
- "text": { "value": "{colors.neutral.900}" },
43
- "textMuted": { "value": "{colors.neutral.500}" }
62
+ "text": {
63
+ "value": "{colors.neutral.900}"
64
+ },
65
+ "textMuted": {
66
+ "value": "{colors.neutral.500}"
67
+ }
44
68
  },
45
69
  "input": {
46
- "text": { "value": "{colors.neutral.900}" },
47
- "placeholder": { "value": "{colors.neutral.400}" }
70
+ "text": {
71
+ "value": "{colors.neutral.900}"
72
+ },
73
+ "placeholder": {
74
+ "value": "{colors.neutral.400}"
75
+ }
48
76
  },
49
77
  "button": {
50
- "textDefault": { "value": "{colors.neutral.900}" },
51
- "textOnPrimary": { "value": "{colors.white}" }
78
+ "textDefault": {
79
+ "value": "{colors.neutral.900}"
80
+ },
81
+ "textOnPrimary": {
82
+ "value": "{colors.white}"
83
+ }
52
84
  },
53
85
  "badge": {
54
- "neutralBg": { "value": "{colors.neutral.100}", "metadata": { "pair": "modes.default.component.badge.neutralText" } },
55
- "neutralText": { "value": "{colors.neutral.700}", "metadata": {} },
56
- "infoBg": { "value": "{colors.info.100}", "metadata": { "pair": "modes.default.component.badge.infoText" } },
57
- "infoText": { "value": "{colors.info.700}", "metadata": {} },
58
- "successBg": { "value": "{colors.success.100}", "metadata": { "pair": "modes.default.component.badge.successText" } },
59
- "successText": { "value": "{colors.success.700}", "metadata": {} },
60
- "warningBg": { "value": "{colors.warning.100}", "metadata": { "pair": "modes.default.component.badge.warningText" } },
61
- "warningText": { "value": "{colors.warning.700}", "metadata": {} },
62
- "dangerBg": { "value": "{colors.error.100}", "metadata": { "pair": "modes.default.component.badge.dangerText" } },
63
- "dangerText": { "value": "{colors.error.700}", "metadata": {} }
86
+ "neutralBg": {
87
+ "value": "{colors.neutral.100}",
88
+ "metadata": {
89
+ "pair": "modes.default.component.badge.neutralText"
90
+ }
91
+ },
92
+ "neutralText": {
93
+ "value": "{colors.neutral.700}",
94
+ "metadata": {}
95
+ },
96
+ "infoBg": {
97
+ "value": "{colors.info.100}",
98
+ "metadata": {
99
+ "pair": "modes.default.component.badge.infoText"
100
+ }
101
+ },
102
+ "infoText": {
103
+ "value": "{colors.info.700}",
104
+ "metadata": {}
105
+ },
106
+ "successBg": {
107
+ "value": "{colors.success.100}",
108
+ "metadata": {
109
+ "pair": "modes.default.component.badge.successText"
110
+ }
111
+ },
112
+ "successText": {
113
+ "value": "{colors.success.700}",
114
+ "metadata": {}
115
+ },
116
+ "warningBg": {
117
+ "value": "{colors.warning.100}",
118
+ "metadata": {
119
+ "pair": "modes.default.component.badge.warningText"
120
+ }
121
+ },
122
+ "warningText": {
123
+ "value": "{colors.warning.700}",
124
+ "metadata": {}
125
+ },
126
+ "dangerBg": {
127
+ "value": "{colors.error.100}",
128
+ "metadata": {
129
+ "pair": "modes.default.component.badge.dangerText"
130
+ }
131
+ },
132
+ "dangerText": {
133
+ "value": "{colors.error.700}",
134
+ "metadata": {}
135
+ }
64
136
  },
65
137
  "iconBox": {
66
- "bg": { "value": "{colors.white}", "metadata": {} },
67
- "border": { "value": "{colors.neutral.200}", "metadata": {} },
68
- "iconDefault": { "value": "{colors.info.600}", "metadata": {} },
69
- "iconSuccess": { "value": "{colors.success.600}", "metadata": {} },
70
- "iconWarning": { "value": "{colors.warning.600}", "metadata": {} },
71
- "iconDanger": { "value": "{colors.error.600}", "metadata": {} }
138
+ "bg": {
139
+ "value": "{colors.white}",
140
+ "metadata": {}
141
+ },
142
+ "border": {
143
+ "value": "{colors.neutral.200}",
144
+ "metadata": {}
145
+ },
146
+ "iconDefault": {
147
+ "value": "{colors.info.600}",
148
+ "metadata": {}
149
+ },
150
+ "iconSuccess": {
151
+ "value": "{colors.success.600}",
152
+ "metadata": {}
153
+ },
154
+ "iconWarning": {
155
+ "value": "{colors.warning.600}",
156
+ "metadata": {}
157
+ },
158
+ "iconDanger": {
159
+ "value": "{colors.error.600}",
160
+ "metadata": {}
161
+ }
72
162
  },
73
163
  "testimonial": {
74
- "bg": { "value": "{colors.white}", "metadata": {} },
75
- "border": { "value": "{colors.neutral.200}", "metadata": {} },
76
- "text": { "value": "{colors.neutral.700}", "metadata": {} },
77
- "authorName": { "value": "{colors.neutral.900}", "metadata": {} },
78
- "authorTitle": { "value": "{colors.neutral.500}", "metadata": {} },
79
- "quoteMark": { "value": "{colors.neutral.300}", "metadata": {} }
164
+ "bg": {
165
+ "value": "{colors.white}",
166
+ "metadata": {}
167
+ },
168
+ "border": {
169
+ "value": "{colors.neutral.200}",
170
+ "metadata": {}
171
+ },
172
+ "text": {
173
+ "value": "{colors.neutral.700}",
174
+ "metadata": {}
175
+ },
176
+ "authorName": {
177
+ "value": "{colors.neutral.900}",
178
+ "metadata": {}
179
+ },
180
+ "authorTitle": {
181
+ "value": "{colors.neutral.500}",
182
+ "metadata": {}
183
+ },
184
+ "quoteMark": {
185
+ "value": "{colors.neutral.300}",
186
+ "metadata": {}
187
+ }
80
188
  },
81
189
  "pricingCard": {
82
- "bg": { "value": "{colors.white}", "metadata": {} },
83
- "border": { "value": "{colors.neutral.200}", "metadata": {} },
84
- "featuredBg": { "value": "{colors.info.600}", "metadata": { "pair": "modes.default.component.pricingCard.featuredText" } },
85
- "featuredText": { "value": "{colors.white}", "metadata": {} },
86
- "featuredBadgeBg": { "value": "{colors.warning.500}", "metadata": { "pair": "modes.default.component.pricingCard.featuredBadgeText" } },
87
- "featuredBadgeText": { "value": "{colors.neutral.900}", "metadata": {} },
88
- "price": { "value": "{colors.neutral.900}", "metadata": {} },
89
- "priceDescription": { "value": "{colors.neutral.500}", "metadata": {} }
190
+ "bg": {
191
+ "value": "{colors.white}",
192
+ "metadata": {}
193
+ },
194
+ "border": {
195
+ "value": "{colors.neutral.200}",
196
+ "metadata": {}
197
+ },
198
+ "featuredBg": {
199
+ "value": "{colors.info.600}",
200
+ "metadata": {
201
+ "pair": "modes.default.component.pricingCard.featuredText"
202
+ }
203
+ },
204
+ "featuredText": {
205
+ "value": "{colors.white}",
206
+ "metadata": {}
207
+ },
208
+ "featuredBadgeBg": {
209
+ "value": "{colors.warning.500}",
210
+ "metadata": {
211
+ "pair": "modes.default.component.pricingCard.featuredBadgeText"
212
+ }
213
+ },
214
+ "featuredBadgeText": {
215
+ "value": "{colors.neutral.900}",
216
+ "metadata": {}
217
+ },
218
+ "price": {
219
+ "value": "{colors.neutral.900}",
220
+ "metadata": {}
221
+ },
222
+ "priceDescription": {
223
+ "value": "{colors.neutral.500}",
224
+ "metadata": {}
225
+ }
90
226
  },
91
227
  "rating": {
92
- "starFilled": { "value": "{colors.warning.500}", "metadata": {} },
93
- "starEmpty": { "value": "{colors.neutral.200}", "metadata": {} },
94
- "text": { "value": "{colors.neutral.500}", "metadata": {} }
228
+ "starFilled": {
229
+ "value": "{colors.warning.500}",
230
+ "metadata": {}
231
+ },
232
+ "starEmpty": {
233
+ "value": "{colors.neutral.200}",
234
+ "metadata": {}
235
+ },
236
+ "text": {
237
+ "value": "{colors.neutral.500}",
238
+ "metadata": {}
239
+ }
95
240
  }
96
241
  }
97
242
  },
98
243
  "dark": {
99
244
  "surface": {
100
- "page": { "value": "{colors.neutral.900}" },
101
- "card": { "value": "{colors.neutral.800}" },
102
- "input": { "value": "{colors.neutral.700}" },
103
- "overlay": { "value": "{colors.neutral.800}" },
104
- "alternate": { "value": "{colors.neutral.800}" },
105
- "hero": { "value": "linear-gradient(135deg, {colors.accent.900} 0%, {colors.accent.700} 100%)" }
245
+ "page": {
246
+ "value": "{colors.neutral.900}"
247
+ },
248
+ "card": {
249
+ "value": "{colors.neutral.800}"
250
+ },
251
+ "input": {
252
+ "value": "{colors.neutral.700}"
253
+ },
254
+ "overlay": {
255
+ "value": "{colors.neutral.800}"
256
+ },
257
+ "alternate": {
258
+ "value": "{colors.neutral.800}"
259
+ },
260
+ "hero": {
261
+ "value": "linear-gradient(135deg, {colors.accent.900} 0%, {colors.accent.700} 100%)"
262
+ }
106
263
  },
107
264
  "text": {
108
265
  "onPage": {
109
- "default": { "value": "{colors.neutral.50}" },
110
- "muted": { "value": "{colors.neutral.300}" },
111
- "subtle": { "value": "{colors.neutral.400}" },
112
- "meta": { "value": "{colors.neutral.400}" },
113
- "brand": { "value": "{colors.brand.400}" }
266
+ "default": {
267
+ "value": "{colors.neutral.50}"
268
+ },
269
+ "muted": {
270
+ "value": "{colors.neutral.300}"
271
+ },
272
+ "subtle": {
273
+ "value": "{colors.neutral.400}"
274
+ },
275
+ "meta": {
276
+ "value": "{colors.neutral.400}"
277
+ },
278
+ "brand": {
279
+ "value": "{colors.brand.400}"
280
+ }
114
281
  },
115
282
  "onSurface": {
116
- "default": { "value": "{colors.neutral.100}" },
117
- "muted": { "value": "{colors.neutral.300}" },
118
- "subtle": { "value": "{colors.neutral.400}" },
119
- "meta": { "value": "{colors.neutral.400}" },
120
- "brand": { "value": "{colors.brand.400}" }
283
+ "default": {
284
+ "value": "{colors.neutral.100}"
285
+ },
286
+ "muted": {
287
+ "value": "{colors.neutral.300}"
288
+ },
289
+ "subtle": {
290
+ "value": "{colors.neutral.400}"
291
+ },
292
+ "meta": {
293
+ "value": "{colors.neutral.400}"
294
+ },
295
+ "brand": {
296
+ "value": "{colors.brand.400}"
297
+ }
121
298
  }
122
299
  },
123
300
  "component": {
124
301
  "card": {
125
- "text": { "value": "{colors.neutral.100}" },
126
- "textMuted": { "value": "{colors.neutral.300}" }
302
+ "text": {
303
+ "value": "{colors.neutral.100}"
304
+ },
305
+ "textMuted": {
306
+ "value": "{colors.neutral.300}"
307
+ }
127
308
  },
128
309
  "input": {
129
- "text": { "value": "{colors.neutral.100}" },
130
- "placeholder": { "value": "{colors.neutral.400}" }
310
+ "text": {
311
+ "value": "{colors.neutral.100}"
312
+ },
313
+ "placeholder": {
314
+ "value": "{colors.neutral.400}"
315
+ }
131
316
  },
132
317
  "button": {
133
- "textDefault": { "value": "{colors.neutral.100}" },
134
- "textOnPrimary": { "value": "{colors.white}" }
318
+ "textDefault": {
319
+ "value": "{colors.neutral.100}"
320
+ },
321
+ "textOnPrimary": {
322
+ "value": "{colors.white}"
323
+ }
135
324
  },
136
325
  "badge": {
137
- "neutralBg": { "value": "{colors.neutral.700}", "metadata": { "pair": "modes.dark.component.badge.neutralText" } },
138
- "neutralText": { "value": "{colors.neutral.100}", "metadata": {} },
139
- "infoBg": { "value": "{colors.info.800}", "metadata": { "pair": "modes.dark.component.badge.infoText" } },
140
- "infoText": { "value": "{colors.info.100}", "metadata": {} },
141
- "successBg": { "value": "{colors.success.800}", "metadata": { "pair": "modes.dark.component.badge.successText" } },
142
- "successText": { "value": "{colors.success.100}", "metadata": {} },
143
- "warningBg": { "value": "{colors.warning.800}", "metadata": { "pair": "modes.dark.component.badge.warningText" } },
144
- "warningText": { "value": "{colors.warning.100}", "metadata": {} },
145
- "dangerBg": { "value": "{colors.error.800}", "metadata": { "pair": "modes.dark.component.badge.dangerText" } },
146
- "dangerText": { "value": "{colors.error.100}", "metadata": {} }
326
+ "neutralBg": {
327
+ "value": "{colors.neutral.700}",
328
+ "metadata": {
329
+ "pair": "modes.dark.component.badge.neutralText"
330
+ }
331
+ },
332
+ "neutralBgHover": {
333
+ "value": "{colors.neutral.600}"
334
+ },
335
+ "neutralText": {
336
+ "value": "{colors.neutral.100}",
337
+ "metadata": {}
338
+ },
339
+ "infoBg": {
340
+ "value": "{colors.info.800}",
341
+ "metadata": {
342
+ "pair": "modes.dark.component.badge.infoText"
343
+ }
344
+ },
345
+ "infoBgHover": {
346
+ "value": "{colors.info.700}"
347
+ },
348
+ "infoText": {
349
+ "value": "{colors.info.100}",
350
+ "metadata": {}
351
+ },
352
+ "successBg": {
353
+ "value": "{colors.success.800}",
354
+ "metadata": {
355
+ "pair": "modes.dark.component.badge.successText"
356
+ }
357
+ },
358
+ "successBgHover": {
359
+ "value": "{colors.success.700}"
360
+ },
361
+ "successText": {
362
+ "value": "{colors.success.100}",
363
+ "metadata": {}
364
+ },
365
+ "warningBg": {
366
+ "value": "{colors.warning.800}",
367
+ "metadata": {
368
+ "pair": "modes.dark.component.badge.warningText"
369
+ }
370
+ },
371
+ "warningBgHover": {
372
+ "value": "{colors.warning.700}"
373
+ },
374
+ "warningText": {
375
+ "value": "{colors.warning.100}",
376
+ "metadata": {}
377
+ },
378
+ "dangerBg": {
379
+ "value": "{colors.error.800}",
380
+ "metadata": {
381
+ "pair": "modes.dark.component.badge.dangerText"
382
+ }
383
+ },
384
+ "dangerBgHover": {
385
+ "value": "{colors.error.700}"
386
+ },
387
+ "dangerText": {
388
+ "value": "{colors.error.100}",
389
+ "metadata": {}
390
+ }
147
391
  },
148
392
  "iconBox": {
149
- "bg": { "value": "{colors.neutral.800}", "metadata": {} },
150
- "border": { "value": "{colors.neutral.700}", "metadata": {} },
151
- "iconDefault": { "value": "{colors.info.300}", "metadata": {} },
152
- "iconSuccess": { "value": "{colors.success.400}", "metadata": {} },
153
- "iconWarning": { "value": "{colors.warning.400}", "metadata": {} },
154
- "iconDanger": { "value": "{colors.error.400}", "metadata": {} }
393
+ "bg": {
394
+ "value": "{colors.neutral.800}",
395
+ "metadata": {}
396
+ },
397
+ "border": {
398
+ "value": "{colors.neutral.700}",
399
+ "metadata": {}
400
+ },
401
+ "iconDefault": {
402
+ "value": "{colors.info.300}",
403
+ "metadata": {}
404
+ },
405
+ "iconSuccess": {
406
+ "value": "{colors.success.400}",
407
+ "metadata": {}
408
+ },
409
+ "iconWarning": {
410
+ "value": "{colors.warning.400}",
411
+ "metadata": {}
412
+ },
413
+ "iconDanger": {
414
+ "value": "{colors.error.400}",
415
+ "metadata": {}
416
+ }
155
417
  },
156
418
  "testimonial": {
157
- "bg": { "value": "{colors.neutral.800}", "metadata": {} },
158
- "border": { "value": "{colors.neutral.700}", "metadata": {} },
159
- "text": { "value": "{colors.neutral.300}", "metadata": {} },
160
- "authorName": { "value": "{colors.neutral.100}", "metadata": {} },
161
- "authorTitle": { "value": "{colors.neutral.400}", "metadata": {} },
162
- "quoteMark": { "value": "{colors.neutral.600}", "metadata": {} }
419
+ "bg": {
420
+ "value": "{colors.neutral.800}",
421
+ "metadata": {}
422
+ },
423
+ "border": {
424
+ "value": "{colors.neutral.700}",
425
+ "metadata": {}
426
+ },
427
+ "text": {
428
+ "value": "{colors.neutral.300}",
429
+ "metadata": {}
430
+ },
431
+ "authorName": {
432
+ "value": "{colors.neutral.100}",
433
+ "metadata": {}
434
+ },
435
+ "authorTitle": {
436
+ "value": "{colors.neutral.400}",
437
+ "metadata": {}
438
+ },
439
+ "quoteMark": {
440
+ "value": "{colors.neutral.600}",
441
+ "metadata": {}
442
+ }
163
443
  },
164
444
  "pricingCard": {
165
- "bg": { "value": "{colors.neutral.800}", "metadata": {} },
166
- "border": { "value": "{colors.neutral.700}", "metadata": {} },
167
- "featuredBg": { "value": "{colors.info.600}", "metadata": { "pair": "modes.dark.component.pricingCard.featuredText" } },
168
- "featuredText": { "value": "{colors.white}", "metadata": {} },
169
- "featuredBadgeBg": { "value": "{colors.warning.500}", "metadata": { "pair": "modes.dark.component.pricingCard.featuredBadgeText" } },
170
- "featuredBadgeText": { "value": "{colors.neutral.900}", "metadata": {} },
171
- "price": { "value": "{colors.neutral.100}", "metadata": {} },
172
- "priceDescription": { "value": "{colors.neutral.400}", "metadata": {} }
445
+ "bg": {
446
+ "value": "{colors.neutral.800}",
447
+ "metadata": {}
448
+ },
449
+ "border": {
450
+ "value": "{colors.neutral.700}",
451
+ "metadata": {}
452
+ },
453
+ "featuredBg": {
454
+ "value": "{colors.info.600}",
455
+ "metadata": {
456
+ "pair": "modes.dark.component.pricingCard.featuredText"
457
+ }
458
+ },
459
+ "featuredText": {
460
+ "value": "{colors.white}",
461
+ "metadata": {}
462
+ },
463
+ "featuredBadgeBg": {
464
+ "value": "{colors.warning.500}",
465
+ "metadata": {
466
+ "pair": "modes.dark.component.pricingCard.featuredBadgeText"
467
+ }
468
+ },
469
+ "featuredBadgeText": {
470
+ "value": "{colors.neutral.900}",
471
+ "metadata": {}
472
+ },
473
+ "price": {
474
+ "value": "{colors.neutral.100}",
475
+ "metadata": {}
476
+ },
477
+ "priceDescription": {
478
+ "value": "{colors.neutral.400}",
479
+ "metadata": {}
480
+ }
173
481
  },
174
482
  "rating": {
175
- "starFilled": { "value": "{colors.warning.400}", "metadata": {} },
176
- "starEmpty": { "value": "{colors.neutral.700}", "metadata": {} },
177
- "text": { "value": "{colors.neutral.400}", "metadata": {} }
483
+ "starFilled": {
484
+ "value": "{colors.warning.400}",
485
+ "metadata": {}
486
+ },
487
+ "starEmpty": {
488
+ "value": "{colors.neutral.700}",
489
+ "metadata": {}
490
+ },
491
+ "text": {
492
+ "value": "{colors.neutral.400}",
493
+ "metadata": {}
494
+ }
178
495
  }
179
496
  }
180
497
  }
@@ -25,16 +25,16 @@
25
25
  "900": "#0f172a"
26
26
  },
27
27
  "accent": {
28
- "50": "#eff6ff",
29
- "100": "#dbeafe",
28
+ "50": "#f5f3ff",
29
+ "100": "#ede9fe",
30
30
  "200": "#ddd6fe",
31
- "300": "#93c5fd",
32
- "400": "#60a5fa",
31
+ "300": "#c4b5fd",
32
+ "400": "#a78bfa",
33
33
  "500": "#8b5cf6",
34
34
  "600": "#7c3aed",
35
35
  "700": "#6d28d9",
36
- "800": "#1e40af",
37
- "900": "#1e3a8a"
36
+ "800": "#5b21b6",
37
+ "900": "#4c1d95"
38
38
  },
39
39
  "success": {
40
40
  "50": "#f0fdf4",
@@ -141,5 +141,11 @@
141
141
  "borders": {
142
142
  "card": "{colors.neutral.200}",
143
143
  "input": "{colors.neutral.300}"
144
+ },
145
+ "border": {
146
+ "width": {
147
+ "base": "1px",
148
+ "thick": "2px"
149
+ }
144
150
  }
145
151
  }
@@ -58,7 +58,8 @@
58
58
  "sm": "1rem",
59
59
  "md": "1.5rem",
60
60
  "lg": "2rem"
61
- }
61
+ },
62
+ "maxWidth": "72rem"
62
63
  }
63
64
  }
64
65
  }