@phcdevworks/spectre-tokens 3.1.0 → 3.3.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 (12) hide show
  1. package/README.md +28 -1
  2. package/dist/index.cjs +215 -0
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +66 -0
  5. package/dist/index.d.cts +185 -0
  6. package/dist/index.d.ts +185 -0
  7. package/dist/index.js +215 -0
  8. package/dist/index.js.map +1 -1
  9. package/dist/tokens.dtcg.json +464 -0
  10. package/package.json +9 -8
  11. package/tokens/components.json +177 -0
  12. package/tokens/modes.json +328 -0
package/dist/index.css CHANGED
@@ -76,6 +76,39 @@
76
76
  --sp-dropdown-item-hover: #eef1f6;
77
77
  --sp-dropdown-item-active: #f0f9ff;
78
78
  --sp-dropdown-item-text: #141b24;
79
+ --sp-checkbox-bg: #ffffff;
80
+ --sp-checkbox-border: #b7c1d4;
81
+ --sp-checkbox-checked-bg: #0369a1;
82
+ --sp-checkbox-checked-border: #0369a1;
83
+ --sp-checkbox-text: #ffffff;
84
+ --sp-checkbox-disabled-bg: #f7f8fb;
85
+ --sp-checkbox-disabled-border: #d9dfeb;
86
+ --sp-radio-bg: #ffffff;
87
+ --sp-radio-border: #b7c1d4;
88
+ --sp-radio-checked-bg: #0369a1;
89
+ --sp-radio-checked-border: #0369a1;
90
+ --sp-radio-text: #ffffff;
91
+ --sp-radio-disabled-bg: #f7f8fb;
92
+ --sp-radio-disabled-border: #d9dfeb;
93
+ --sp-select-bg: #ffffff;
94
+ --sp-select-border: #b7c1d4;
95
+ --sp-select-text: #141b24;
96
+ --sp-select-placeholder-text: #657287;
97
+ --sp-select-disabled-bg: #f7f8fb;
98
+ --sp-select-disabled-border: #d9dfeb;
99
+ --sp-select-focus-border: #0ea5e9;
100
+ --sp-textarea-bg: #ffffff;
101
+ --sp-textarea-border: #b7c1d4;
102
+ --sp-textarea-text: #141b24;
103
+ --sp-textarea-placeholder: #657287;
104
+ --sp-textarea-disabled-bg: #f7f8fb;
105
+ --sp-textarea-disabled-border: #d9dfeb;
106
+ --sp-textarea-focus-border: #0ea5e9;
107
+ --sp-fieldset-border: #d9dfeb;
108
+ --sp-fieldset-legend-text: #141b24;
109
+ --sp-label-text: #141b24;
110
+ --sp-label-disabled-text: #8a96ad;
111
+ --sp-label-required-indicator-text: #dc2626;
79
112
  --sp-link-default: #1f57db;
80
113
  --sp-link-hover: #1946b4;
81
114
  --sp-link-active: #173b8f;
@@ -505,6 +538,39 @@
505
538
  --sp-dropdown-item-hover: #374253;
506
539
  --sp-dropdown-item-active: #082f49;
507
540
  --sp-dropdown-item-text: #eef1f6;
541
+ --sp-checkbox-bg: #222b38;
542
+ --sp-checkbox-border: #4b576a;
543
+ --sp-checkbox-checked-bg: #0369a1;
544
+ --sp-checkbox-checked-border: #0369a1;
545
+ --sp-checkbox-text: #ffffff;
546
+ --sp-checkbox-disabled-bg: #141b24;
547
+ --sp-checkbox-disabled-border: #374253;
548
+ --sp-radio-bg: #222b38;
549
+ --sp-radio-border: #4b576a;
550
+ --sp-radio-checked-bg: #0369a1;
551
+ --sp-radio-checked-border: #0369a1;
552
+ --sp-radio-text: #ffffff;
553
+ --sp-radio-disabled-bg: #141b24;
554
+ --sp-radio-disabled-border: #374253;
555
+ --sp-select-bg: #222b38;
556
+ --sp-select-border: #4b576a;
557
+ --sp-select-text: #f7f8fb;
558
+ --sp-select-placeholder-text: #8a96ad;
559
+ --sp-select-disabled-bg: #141b24;
560
+ --sp-select-disabled-border: #374253;
561
+ --sp-select-focus-border: #38bdf8;
562
+ --sp-textarea-bg: #222b38;
563
+ --sp-textarea-border: #4b576a;
564
+ --sp-textarea-text: #f7f8fb;
565
+ --sp-textarea-placeholder: #8a96ad;
566
+ --sp-textarea-disabled-bg: #141b24;
567
+ --sp-textarea-disabled-border: #374253;
568
+ --sp-textarea-focus-border: #38bdf8;
569
+ --sp-fieldset-border: #374253;
570
+ --sp-fieldset-legend-text: #f7f8fb;
571
+ --sp-label-text: #f7f8fb;
572
+ --sp-label-disabled-text: #4b576a;
573
+ --sp-label-required-indicator-text: #f87171;
508
574
  --sp-link-default: #1f57db;
509
575
  --sp-link-hover: #1946b4;
510
576
  --sp-link-active: #173b8f;
package/dist/index.d.cts CHANGED
@@ -117,6 +117,59 @@ interface SpectreGeneratedTokens {
117
117
  text: string;
118
118
  };
119
119
  };
120
+ checkbox: {
121
+ bg: string;
122
+ border: string;
123
+ checkedBg: string;
124
+ checkedBorder: string;
125
+ text: string;
126
+ disabledBg: string;
127
+ disabledBorder: string;
128
+ };
129
+ radio: {
130
+ bg: string;
131
+ border: string;
132
+ checkedBg: string;
133
+ checkedBorder: string;
134
+ text: string;
135
+ disabledBg: string;
136
+ disabledBorder: string;
137
+ };
138
+ select: {
139
+ bg: string;
140
+ border: string;
141
+ text: string;
142
+ placeholderText: string;
143
+ disabledBg: string;
144
+ disabledBorder: string;
145
+ focusBorder: string;
146
+ borderInvalid: string;
147
+ bgInvalid: string;
148
+ borderSuccess: string;
149
+ bgSuccess: string;
150
+ };
151
+ textarea: {
152
+ bg: string;
153
+ border: string;
154
+ text: string;
155
+ placeholder: string;
156
+ disabledBg: string;
157
+ disabledBorder: string;
158
+ focusBorder: string;
159
+ borderInvalid: string;
160
+ bgInvalid: string;
161
+ borderSuccess: string;
162
+ bgSuccess: string;
163
+ };
164
+ fieldset: {
165
+ border: string;
166
+ legendText: string;
167
+ };
168
+ label: {
169
+ text: string;
170
+ disabledText: string;
171
+ requiredIndicatorText: string;
172
+ };
120
173
  };
121
174
  buttons: {
122
175
  primary: {
@@ -371,6 +424,51 @@ interface SpectreGeneratedTokens {
371
424
  text: string;
372
425
  };
373
426
  };
427
+ checkbox: {
428
+ bg: string;
429
+ border: string;
430
+ checkedBg: string;
431
+ checkedBorder: string;
432
+ text: string;
433
+ disabledBg: string;
434
+ disabledBorder: string;
435
+ };
436
+ radio: {
437
+ bg: string;
438
+ border: string;
439
+ checkedBg: string;
440
+ checkedBorder: string;
441
+ text: string;
442
+ disabledBg: string;
443
+ disabledBorder: string;
444
+ };
445
+ select: {
446
+ bg: string;
447
+ border: string;
448
+ text: string;
449
+ placeholderText: string;
450
+ disabledBg: string;
451
+ disabledBorder: string;
452
+ focusBorder: string;
453
+ };
454
+ textarea: {
455
+ bg: string;
456
+ border: string;
457
+ text: string;
458
+ placeholder: string;
459
+ disabledBg: string;
460
+ disabledBorder: string;
461
+ focusBorder: string;
462
+ };
463
+ fieldset: {
464
+ border: string;
465
+ legendText: string;
466
+ };
467
+ label: {
468
+ text: string;
469
+ disabledText: string;
470
+ requiredIndicatorText: string;
471
+ };
374
472
  };
375
473
  };
376
474
  dark: {
@@ -520,6 +618,51 @@ interface SpectreGeneratedTokens {
520
618
  text: string;
521
619
  };
522
620
  };
621
+ checkbox: {
622
+ bg: string;
623
+ border: string;
624
+ checkedBg: string;
625
+ checkedBorder: string;
626
+ text: string;
627
+ disabledBg: string;
628
+ disabledBorder: string;
629
+ };
630
+ radio: {
631
+ bg: string;
632
+ border: string;
633
+ checkedBg: string;
634
+ checkedBorder: string;
635
+ text: string;
636
+ disabledBg: string;
637
+ disabledBorder: string;
638
+ };
639
+ select: {
640
+ bg: string;
641
+ border: string;
642
+ text: string;
643
+ placeholderText: string;
644
+ disabledBg: string;
645
+ disabledBorder: string;
646
+ focusBorder: string;
647
+ };
648
+ textarea: {
649
+ bg: string;
650
+ border: string;
651
+ text: string;
652
+ placeholder: string;
653
+ disabledBg: string;
654
+ disabledBorder: string;
655
+ focusBorder: string;
656
+ };
657
+ fieldset: {
658
+ border: string;
659
+ legendText: string;
660
+ };
661
+ label: {
662
+ text: string;
663
+ disabledText: string;
664
+ requiredIndicatorText: string;
665
+ };
523
666
  };
524
667
  };
525
668
  };
@@ -1179,6 +1322,42 @@ interface ComponentDropdownTokens<Value = string> {
1179
1322
  text: Value;
1180
1323
  };
1181
1324
  }
1325
+ interface ComponentSelectionControlTokens<Value = string> {
1326
+ bg: Value;
1327
+ border: Value;
1328
+ checkedBg: Value;
1329
+ checkedBorder: Value;
1330
+ text: Value;
1331
+ disabledBg: Value;
1332
+ disabledBorder: Value;
1333
+ }
1334
+ interface ComponentSelectTokens<Value = string> {
1335
+ bg: Value;
1336
+ border: Value;
1337
+ text: Value;
1338
+ placeholderText: Value;
1339
+ disabledBg: Value;
1340
+ disabledBorder: Value;
1341
+ focusBorder: Value;
1342
+ }
1343
+ interface ComponentTextareaTokens<Value = string> {
1344
+ bg: Value;
1345
+ border: Value;
1346
+ text: Value;
1347
+ placeholder: Value;
1348
+ disabledBg: Value;
1349
+ disabledBorder: Value;
1350
+ focusBorder: Value;
1351
+ }
1352
+ interface ComponentFieldsetTokens<Value = string> {
1353
+ border: Value;
1354
+ legendText: Value;
1355
+ }
1356
+ interface ComponentLabelTokens<Value = string> {
1357
+ text: Value;
1358
+ disabledText: Value;
1359
+ requiredIndicatorText: Value;
1360
+ }
1182
1361
  interface ComponentTokens<Value = string> {
1183
1362
  card: {
1184
1363
  text: Value;
@@ -1202,6 +1381,12 @@ interface ComponentTokens<Value = string> {
1202
1381
  toast: ComponentToastTokens<Value>;
1203
1382
  tooltip: ComponentTooltipTokens<Value>;
1204
1383
  dropdown: ComponentDropdownTokens<Value>;
1384
+ checkbox: ComponentSelectionControlTokens<Value>;
1385
+ radio: ComponentSelectionControlTokens<Value>;
1386
+ select: ComponentSelectTokens<Value>;
1387
+ textarea: ComponentTextareaTokens<Value>;
1388
+ fieldset: ComponentFieldsetTokens<Value>;
1389
+ label: ComponentLabelTokens<Value>;
1205
1390
  [key: string]: unknown;
1206
1391
  }
1207
1392
  type SpectreModeName = 'default' | 'dark';
package/dist/index.d.ts CHANGED
@@ -117,6 +117,59 @@ interface SpectreGeneratedTokens {
117
117
  text: string;
118
118
  };
119
119
  };
120
+ checkbox: {
121
+ bg: string;
122
+ border: string;
123
+ checkedBg: string;
124
+ checkedBorder: string;
125
+ text: string;
126
+ disabledBg: string;
127
+ disabledBorder: string;
128
+ };
129
+ radio: {
130
+ bg: string;
131
+ border: string;
132
+ checkedBg: string;
133
+ checkedBorder: string;
134
+ text: string;
135
+ disabledBg: string;
136
+ disabledBorder: string;
137
+ };
138
+ select: {
139
+ bg: string;
140
+ border: string;
141
+ text: string;
142
+ placeholderText: string;
143
+ disabledBg: string;
144
+ disabledBorder: string;
145
+ focusBorder: string;
146
+ borderInvalid: string;
147
+ bgInvalid: string;
148
+ borderSuccess: string;
149
+ bgSuccess: string;
150
+ };
151
+ textarea: {
152
+ bg: string;
153
+ border: string;
154
+ text: string;
155
+ placeholder: string;
156
+ disabledBg: string;
157
+ disabledBorder: string;
158
+ focusBorder: string;
159
+ borderInvalid: string;
160
+ bgInvalid: string;
161
+ borderSuccess: string;
162
+ bgSuccess: string;
163
+ };
164
+ fieldset: {
165
+ border: string;
166
+ legendText: string;
167
+ };
168
+ label: {
169
+ text: string;
170
+ disabledText: string;
171
+ requiredIndicatorText: string;
172
+ };
120
173
  };
121
174
  buttons: {
122
175
  primary: {
@@ -371,6 +424,51 @@ interface SpectreGeneratedTokens {
371
424
  text: string;
372
425
  };
373
426
  };
427
+ checkbox: {
428
+ bg: string;
429
+ border: string;
430
+ checkedBg: string;
431
+ checkedBorder: string;
432
+ text: string;
433
+ disabledBg: string;
434
+ disabledBorder: string;
435
+ };
436
+ radio: {
437
+ bg: string;
438
+ border: string;
439
+ checkedBg: string;
440
+ checkedBorder: string;
441
+ text: string;
442
+ disabledBg: string;
443
+ disabledBorder: string;
444
+ };
445
+ select: {
446
+ bg: string;
447
+ border: string;
448
+ text: string;
449
+ placeholderText: string;
450
+ disabledBg: string;
451
+ disabledBorder: string;
452
+ focusBorder: string;
453
+ };
454
+ textarea: {
455
+ bg: string;
456
+ border: string;
457
+ text: string;
458
+ placeholder: string;
459
+ disabledBg: string;
460
+ disabledBorder: string;
461
+ focusBorder: string;
462
+ };
463
+ fieldset: {
464
+ border: string;
465
+ legendText: string;
466
+ };
467
+ label: {
468
+ text: string;
469
+ disabledText: string;
470
+ requiredIndicatorText: string;
471
+ };
374
472
  };
375
473
  };
376
474
  dark: {
@@ -520,6 +618,51 @@ interface SpectreGeneratedTokens {
520
618
  text: string;
521
619
  };
522
620
  };
621
+ checkbox: {
622
+ bg: string;
623
+ border: string;
624
+ checkedBg: string;
625
+ checkedBorder: string;
626
+ text: string;
627
+ disabledBg: string;
628
+ disabledBorder: string;
629
+ };
630
+ radio: {
631
+ bg: string;
632
+ border: string;
633
+ checkedBg: string;
634
+ checkedBorder: string;
635
+ text: string;
636
+ disabledBg: string;
637
+ disabledBorder: string;
638
+ };
639
+ select: {
640
+ bg: string;
641
+ border: string;
642
+ text: string;
643
+ placeholderText: string;
644
+ disabledBg: string;
645
+ disabledBorder: string;
646
+ focusBorder: string;
647
+ };
648
+ textarea: {
649
+ bg: string;
650
+ border: string;
651
+ text: string;
652
+ placeholder: string;
653
+ disabledBg: string;
654
+ disabledBorder: string;
655
+ focusBorder: string;
656
+ };
657
+ fieldset: {
658
+ border: string;
659
+ legendText: string;
660
+ };
661
+ label: {
662
+ text: string;
663
+ disabledText: string;
664
+ requiredIndicatorText: string;
665
+ };
523
666
  };
524
667
  };
525
668
  };
@@ -1179,6 +1322,42 @@ interface ComponentDropdownTokens<Value = string> {
1179
1322
  text: Value;
1180
1323
  };
1181
1324
  }
1325
+ interface ComponentSelectionControlTokens<Value = string> {
1326
+ bg: Value;
1327
+ border: Value;
1328
+ checkedBg: Value;
1329
+ checkedBorder: Value;
1330
+ text: Value;
1331
+ disabledBg: Value;
1332
+ disabledBorder: Value;
1333
+ }
1334
+ interface ComponentSelectTokens<Value = string> {
1335
+ bg: Value;
1336
+ border: Value;
1337
+ text: Value;
1338
+ placeholderText: Value;
1339
+ disabledBg: Value;
1340
+ disabledBorder: Value;
1341
+ focusBorder: Value;
1342
+ }
1343
+ interface ComponentTextareaTokens<Value = string> {
1344
+ bg: Value;
1345
+ border: Value;
1346
+ text: Value;
1347
+ placeholder: Value;
1348
+ disabledBg: Value;
1349
+ disabledBorder: Value;
1350
+ focusBorder: Value;
1351
+ }
1352
+ interface ComponentFieldsetTokens<Value = string> {
1353
+ border: Value;
1354
+ legendText: Value;
1355
+ }
1356
+ interface ComponentLabelTokens<Value = string> {
1357
+ text: Value;
1358
+ disabledText: Value;
1359
+ requiredIndicatorText: Value;
1360
+ }
1182
1361
  interface ComponentTokens<Value = string> {
1183
1362
  card: {
1184
1363
  text: Value;
@@ -1202,6 +1381,12 @@ interface ComponentTokens<Value = string> {
1202
1381
  toast: ComponentToastTokens<Value>;
1203
1382
  tooltip: ComponentTooltipTokens<Value>;
1204
1383
  dropdown: ComponentDropdownTokens<Value>;
1384
+ checkbox: ComponentSelectionControlTokens<Value>;
1385
+ radio: ComponentSelectionControlTokens<Value>;
1386
+ select: ComponentSelectTokens<Value>;
1387
+ textarea: ComponentTextareaTokens<Value>;
1388
+ fieldset: ComponentFieldsetTokens<Value>;
1389
+ label: ComponentLabelTokens<Value>;
1205
1390
  [key: string]: unknown;
1206
1391
  }
1207
1392
  type SpectreModeName = 'default' | 'dark';