@phcdevworks/spectre-tokens 3.1.0 → 3.2.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 +207 -0
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +66 -0
  5. package/dist/index.d.cts +177 -0
  6. package/dist/index.d.ts +177 -0
  7. package/dist/index.js +207 -0
  8. package/dist/index.js.map +1 -1
  9. package/dist/tokens.dtcg.json +432 -0
  10. package/package.json +5 -5
  11. package/tokens/components.json +141 -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,51 @@ 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
+ };
147
+ textarea: {
148
+ bg: string;
149
+ border: string;
150
+ text: string;
151
+ placeholder: string;
152
+ disabledBg: string;
153
+ disabledBorder: string;
154
+ focusBorder: string;
155
+ };
156
+ fieldset: {
157
+ border: string;
158
+ legendText: string;
159
+ };
160
+ label: {
161
+ text: string;
162
+ disabledText: string;
163
+ requiredIndicatorText: string;
164
+ };
120
165
  };
121
166
  buttons: {
122
167
  primary: {
@@ -371,6 +416,51 @@ interface SpectreGeneratedTokens {
371
416
  text: string;
372
417
  };
373
418
  };
419
+ checkbox: {
420
+ bg: string;
421
+ border: string;
422
+ checkedBg: string;
423
+ checkedBorder: string;
424
+ text: string;
425
+ disabledBg: string;
426
+ disabledBorder: string;
427
+ };
428
+ radio: {
429
+ bg: string;
430
+ border: string;
431
+ checkedBg: string;
432
+ checkedBorder: string;
433
+ text: string;
434
+ disabledBg: string;
435
+ disabledBorder: string;
436
+ };
437
+ select: {
438
+ bg: string;
439
+ border: string;
440
+ text: string;
441
+ placeholderText: string;
442
+ disabledBg: string;
443
+ disabledBorder: string;
444
+ focusBorder: string;
445
+ };
446
+ textarea: {
447
+ bg: string;
448
+ border: string;
449
+ text: string;
450
+ placeholder: string;
451
+ disabledBg: string;
452
+ disabledBorder: string;
453
+ focusBorder: string;
454
+ };
455
+ fieldset: {
456
+ border: string;
457
+ legendText: string;
458
+ };
459
+ label: {
460
+ text: string;
461
+ disabledText: string;
462
+ requiredIndicatorText: string;
463
+ };
374
464
  };
375
465
  };
376
466
  dark: {
@@ -520,6 +610,51 @@ interface SpectreGeneratedTokens {
520
610
  text: string;
521
611
  };
522
612
  };
613
+ checkbox: {
614
+ bg: string;
615
+ border: string;
616
+ checkedBg: string;
617
+ checkedBorder: string;
618
+ text: string;
619
+ disabledBg: string;
620
+ disabledBorder: string;
621
+ };
622
+ radio: {
623
+ bg: string;
624
+ border: string;
625
+ checkedBg: string;
626
+ checkedBorder: string;
627
+ text: string;
628
+ disabledBg: string;
629
+ disabledBorder: string;
630
+ };
631
+ select: {
632
+ bg: string;
633
+ border: string;
634
+ text: string;
635
+ placeholderText: string;
636
+ disabledBg: string;
637
+ disabledBorder: string;
638
+ focusBorder: string;
639
+ };
640
+ textarea: {
641
+ bg: string;
642
+ border: string;
643
+ text: string;
644
+ placeholder: string;
645
+ disabledBg: string;
646
+ disabledBorder: string;
647
+ focusBorder: string;
648
+ };
649
+ fieldset: {
650
+ border: string;
651
+ legendText: string;
652
+ };
653
+ label: {
654
+ text: string;
655
+ disabledText: string;
656
+ requiredIndicatorText: string;
657
+ };
523
658
  };
524
659
  };
525
660
  };
@@ -1179,6 +1314,42 @@ interface ComponentDropdownTokens<Value = string> {
1179
1314
  text: Value;
1180
1315
  };
1181
1316
  }
1317
+ interface ComponentSelectionControlTokens<Value = string> {
1318
+ bg: Value;
1319
+ border: Value;
1320
+ checkedBg: Value;
1321
+ checkedBorder: Value;
1322
+ text: Value;
1323
+ disabledBg: Value;
1324
+ disabledBorder: Value;
1325
+ }
1326
+ interface ComponentSelectTokens<Value = string> {
1327
+ bg: Value;
1328
+ border: Value;
1329
+ text: Value;
1330
+ placeholderText: Value;
1331
+ disabledBg: Value;
1332
+ disabledBorder: Value;
1333
+ focusBorder: Value;
1334
+ }
1335
+ interface ComponentTextareaTokens<Value = string> {
1336
+ bg: Value;
1337
+ border: Value;
1338
+ text: Value;
1339
+ placeholder: Value;
1340
+ disabledBg: Value;
1341
+ disabledBorder: Value;
1342
+ focusBorder: Value;
1343
+ }
1344
+ interface ComponentFieldsetTokens<Value = string> {
1345
+ border: Value;
1346
+ legendText: Value;
1347
+ }
1348
+ interface ComponentLabelTokens<Value = string> {
1349
+ text: Value;
1350
+ disabledText: Value;
1351
+ requiredIndicatorText: Value;
1352
+ }
1182
1353
  interface ComponentTokens<Value = string> {
1183
1354
  card: {
1184
1355
  text: Value;
@@ -1202,6 +1373,12 @@ interface ComponentTokens<Value = string> {
1202
1373
  toast: ComponentToastTokens<Value>;
1203
1374
  tooltip: ComponentTooltipTokens<Value>;
1204
1375
  dropdown: ComponentDropdownTokens<Value>;
1376
+ checkbox: ComponentSelectionControlTokens<Value>;
1377
+ radio: ComponentSelectionControlTokens<Value>;
1378
+ select: ComponentSelectTokens<Value>;
1379
+ textarea: ComponentTextareaTokens<Value>;
1380
+ fieldset: ComponentFieldsetTokens<Value>;
1381
+ label: ComponentLabelTokens<Value>;
1205
1382
  [key: string]: unknown;
1206
1383
  }
1207
1384
  type SpectreModeName = 'default' | 'dark';
package/dist/index.d.ts CHANGED
@@ -117,6 +117,51 @@ 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
+ };
147
+ textarea: {
148
+ bg: string;
149
+ border: string;
150
+ text: string;
151
+ placeholder: string;
152
+ disabledBg: string;
153
+ disabledBorder: string;
154
+ focusBorder: string;
155
+ };
156
+ fieldset: {
157
+ border: string;
158
+ legendText: string;
159
+ };
160
+ label: {
161
+ text: string;
162
+ disabledText: string;
163
+ requiredIndicatorText: string;
164
+ };
120
165
  };
121
166
  buttons: {
122
167
  primary: {
@@ -371,6 +416,51 @@ interface SpectreGeneratedTokens {
371
416
  text: string;
372
417
  };
373
418
  };
419
+ checkbox: {
420
+ bg: string;
421
+ border: string;
422
+ checkedBg: string;
423
+ checkedBorder: string;
424
+ text: string;
425
+ disabledBg: string;
426
+ disabledBorder: string;
427
+ };
428
+ radio: {
429
+ bg: string;
430
+ border: string;
431
+ checkedBg: string;
432
+ checkedBorder: string;
433
+ text: string;
434
+ disabledBg: string;
435
+ disabledBorder: string;
436
+ };
437
+ select: {
438
+ bg: string;
439
+ border: string;
440
+ text: string;
441
+ placeholderText: string;
442
+ disabledBg: string;
443
+ disabledBorder: string;
444
+ focusBorder: string;
445
+ };
446
+ textarea: {
447
+ bg: string;
448
+ border: string;
449
+ text: string;
450
+ placeholder: string;
451
+ disabledBg: string;
452
+ disabledBorder: string;
453
+ focusBorder: string;
454
+ };
455
+ fieldset: {
456
+ border: string;
457
+ legendText: string;
458
+ };
459
+ label: {
460
+ text: string;
461
+ disabledText: string;
462
+ requiredIndicatorText: string;
463
+ };
374
464
  };
375
465
  };
376
466
  dark: {
@@ -520,6 +610,51 @@ interface SpectreGeneratedTokens {
520
610
  text: string;
521
611
  };
522
612
  };
613
+ checkbox: {
614
+ bg: string;
615
+ border: string;
616
+ checkedBg: string;
617
+ checkedBorder: string;
618
+ text: string;
619
+ disabledBg: string;
620
+ disabledBorder: string;
621
+ };
622
+ radio: {
623
+ bg: string;
624
+ border: string;
625
+ checkedBg: string;
626
+ checkedBorder: string;
627
+ text: string;
628
+ disabledBg: string;
629
+ disabledBorder: string;
630
+ };
631
+ select: {
632
+ bg: string;
633
+ border: string;
634
+ text: string;
635
+ placeholderText: string;
636
+ disabledBg: string;
637
+ disabledBorder: string;
638
+ focusBorder: string;
639
+ };
640
+ textarea: {
641
+ bg: string;
642
+ border: string;
643
+ text: string;
644
+ placeholder: string;
645
+ disabledBg: string;
646
+ disabledBorder: string;
647
+ focusBorder: string;
648
+ };
649
+ fieldset: {
650
+ border: string;
651
+ legendText: string;
652
+ };
653
+ label: {
654
+ text: string;
655
+ disabledText: string;
656
+ requiredIndicatorText: string;
657
+ };
523
658
  };
524
659
  };
525
660
  };
@@ -1179,6 +1314,42 @@ interface ComponentDropdownTokens<Value = string> {
1179
1314
  text: Value;
1180
1315
  };
1181
1316
  }
1317
+ interface ComponentSelectionControlTokens<Value = string> {
1318
+ bg: Value;
1319
+ border: Value;
1320
+ checkedBg: Value;
1321
+ checkedBorder: Value;
1322
+ text: Value;
1323
+ disabledBg: Value;
1324
+ disabledBorder: Value;
1325
+ }
1326
+ interface ComponentSelectTokens<Value = string> {
1327
+ bg: Value;
1328
+ border: Value;
1329
+ text: Value;
1330
+ placeholderText: Value;
1331
+ disabledBg: Value;
1332
+ disabledBorder: Value;
1333
+ focusBorder: Value;
1334
+ }
1335
+ interface ComponentTextareaTokens<Value = string> {
1336
+ bg: Value;
1337
+ border: Value;
1338
+ text: Value;
1339
+ placeholder: Value;
1340
+ disabledBg: Value;
1341
+ disabledBorder: Value;
1342
+ focusBorder: Value;
1343
+ }
1344
+ interface ComponentFieldsetTokens<Value = string> {
1345
+ border: Value;
1346
+ legendText: Value;
1347
+ }
1348
+ interface ComponentLabelTokens<Value = string> {
1349
+ text: Value;
1350
+ disabledText: Value;
1351
+ requiredIndicatorText: Value;
1352
+ }
1182
1353
  interface ComponentTokens<Value = string> {
1183
1354
  card: {
1184
1355
  text: Value;
@@ -1202,6 +1373,12 @@ interface ComponentTokens<Value = string> {
1202
1373
  toast: ComponentToastTokens<Value>;
1203
1374
  tooltip: ComponentTooltipTokens<Value>;
1204
1375
  dropdown: ComponentDropdownTokens<Value>;
1376
+ checkbox: ComponentSelectionControlTokens<Value>;
1377
+ radio: ComponentSelectionControlTokens<Value>;
1378
+ select: ComponentSelectTokens<Value>;
1379
+ textarea: ComponentTextareaTokens<Value>;
1380
+ fieldset: ComponentFieldsetTokens<Value>;
1381
+ label: ComponentLabelTokens<Value>;
1205
1382
  [key: string]: unknown;
1206
1383
  }
1207
1384
  type SpectreModeName = 'default' | 'dark';