@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.js CHANGED
@@ -117,6 +117,59 @@ var coreTokens = {
117
117
  "active": "{colors.info.50}",
118
118
  "text": "{colors.neutral.900}"
119
119
  }
120
+ },
121
+ "checkbox": {
122
+ "bg": "{colors.white}",
123
+ "border": "{colors.neutral.300}",
124
+ "checkedBg": "{colors.info.600}",
125
+ "checkedBorder": "{colors.info.600}",
126
+ "text": "{colors.white}",
127
+ "disabledBg": "{colors.neutral.50}",
128
+ "disabledBorder": "{colors.neutral.200}"
129
+ },
130
+ "radio": {
131
+ "bg": "{colors.white}",
132
+ "border": "{colors.neutral.300}",
133
+ "checkedBg": "{colors.info.600}",
134
+ "checkedBorder": "{colors.info.600}",
135
+ "text": "{colors.white}",
136
+ "disabledBg": "{colors.neutral.50}",
137
+ "disabledBorder": "{colors.neutral.200}"
138
+ },
139
+ "select": {
140
+ "bg": "{colors.white}",
141
+ "border": "{colors.neutral.300}",
142
+ "text": "{colors.neutral.900}",
143
+ "placeholderText": "{colors.neutral.500}",
144
+ "disabledBg": "{colors.neutral.50}",
145
+ "disabledBorder": "{colors.neutral.200}",
146
+ "focusBorder": "{colors.info.500}",
147
+ "borderInvalid": "{colors.error.500}",
148
+ "bgInvalid": "{colors.error.50}",
149
+ "borderSuccess": "{colors.success.500}",
150
+ "bgSuccess": "{colors.success.50}"
151
+ },
152
+ "textarea": {
153
+ "bg": "{colors.white}",
154
+ "border": "{colors.neutral.300}",
155
+ "text": "{colors.neutral.900}",
156
+ "placeholder": "{colors.neutral.500}",
157
+ "disabledBg": "{colors.neutral.50}",
158
+ "disabledBorder": "{colors.neutral.200}",
159
+ "focusBorder": "{colors.info.500}",
160
+ "borderInvalid": "{colors.error.500}",
161
+ "bgInvalid": "{colors.error.50}",
162
+ "borderSuccess": "{colors.success.500}",
163
+ "bgSuccess": "{colors.success.50}"
164
+ },
165
+ "fieldset": {
166
+ "border": "{colors.neutral.200}",
167
+ "legendText": "{colors.neutral.900}"
168
+ },
169
+ "label": {
170
+ "text": "{colors.neutral.900}",
171
+ "disabledText": "{colors.neutral.400}",
172
+ "requiredIndicatorText": "{colors.error.600}"
120
173
  }
121
174
  },
122
175
  "buttons": {
@@ -371,6 +424,51 @@ var coreTokens = {
371
424
  "active": "{colors.info.50}",
372
425
  "text": "{colors.neutral.900}"
373
426
  }
427
+ },
428
+ "checkbox": {
429
+ "bg": "{colors.white}",
430
+ "border": "{colors.neutral.300}",
431
+ "checkedBg": "{colors.info.600}",
432
+ "checkedBorder": "{colors.info.600}",
433
+ "text": "{colors.white}",
434
+ "disabledBg": "{colors.neutral.50}",
435
+ "disabledBorder": "{colors.neutral.200}"
436
+ },
437
+ "radio": {
438
+ "bg": "{colors.white}",
439
+ "border": "{colors.neutral.300}",
440
+ "checkedBg": "{colors.info.600}",
441
+ "checkedBorder": "{colors.info.600}",
442
+ "text": "{colors.white}",
443
+ "disabledBg": "{colors.neutral.50}",
444
+ "disabledBorder": "{colors.neutral.200}"
445
+ },
446
+ "select": {
447
+ "bg": "{colors.white}",
448
+ "border": "{colors.neutral.300}",
449
+ "text": "{colors.neutral.900}",
450
+ "placeholderText": "{colors.neutral.500}",
451
+ "disabledBg": "{colors.neutral.50}",
452
+ "disabledBorder": "{colors.neutral.200}",
453
+ "focusBorder": "{colors.info.500}"
454
+ },
455
+ "textarea": {
456
+ "bg": "{colors.white}",
457
+ "border": "{colors.neutral.300}",
458
+ "text": "{colors.neutral.900}",
459
+ "placeholder": "{colors.neutral.500}",
460
+ "disabledBg": "{colors.neutral.50}",
461
+ "disabledBorder": "{colors.neutral.200}",
462
+ "focusBorder": "{colors.info.500}"
463
+ },
464
+ "fieldset": {
465
+ "border": "{colors.neutral.200}",
466
+ "legendText": "{colors.neutral.900}"
467
+ },
468
+ "label": {
469
+ "text": "{colors.neutral.900}",
470
+ "disabledText": "{colors.neutral.400}",
471
+ "requiredIndicatorText": "{colors.error.600}"
374
472
  }
375
473
  }
376
474
  },
@@ -520,6 +618,51 @@ var coreTokens = {
520
618
  "active": "{colors.info.900}",
521
619
  "text": "{colors.neutral.100}"
522
620
  }
621
+ },
622
+ "checkbox": {
623
+ "bg": "{colors.neutral.800}",
624
+ "border": "{colors.neutral.600}",
625
+ "checkedBg": "{colors.info.600}",
626
+ "checkedBorder": "{colors.info.600}",
627
+ "text": "{colors.white}",
628
+ "disabledBg": "{colors.neutral.900}",
629
+ "disabledBorder": "{colors.neutral.700}"
630
+ },
631
+ "radio": {
632
+ "bg": "{colors.neutral.800}",
633
+ "border": "{colors.neutral.600}",
634
+ "checkedBg": "{colors.info.600}",
635
+ "checkedBorder": "{colors.info.600}",
636
+ "text": "{colors.white}",
637
+ "disabledBg": "{colors.neutral.900}",
638
+ "disabledBorder": "{colors.neutral.700}"
639
+ },
640
+ "select": {
641
+ "bg": "{colors.neutral.800}",
642
+ "border": "{colors.neutral.600}",
643
+ "text": "{colors.neutral.50}",
644
+ "placeholderText": "{colors.neutral.400}",
645
+ "disabledBg": "{colors.neutral.900}",
646
+ "disabledBorder": "{colors.neutral.700}",
647
+ "focusBorder": "{colors.info.400}"
648
+ },
649
+ "textarea": {
650
+ "bg": "{colors.neutral.800}",
651
+ "border": "{colors.neutral.600}",
652
+ "text": "{colors.neutral.50}",
653
+ "placeholder": "{colors.neutral.400}",
654
+ "disabledBg": "{colors.neutral.900}",
655
+ "disabledBorder": "{colors.neutral.700}",
656
+ "focusBorder": "{colors.info.400}"
657
+ },
658
+ "fieldset": {
659
+ "border": "{colors.neutral.700}",
660
+ "legendText": "{colors.neutral.50}"
661
+ },
662
+ "label": {
663
+ "text": "{colors.neutral.50}",
664
+ "disabledText": "{colors.neutral.600}",
665
+ "requiredIndicatorText": "{colors.error.400}"
523
666
  }
524
667
  }
525
668
  }
@@ -1098,6 +1241,42 @@ var DROPDOWN_FIELDS = [
1098
1241
  { name: "item-active", modePath: ["item", "active"], aliasPath: ["item", "active"] },
1099
1242
  { name: "item-text", modePath: ["item", "text"], aliasPath: ["item", "text"] }
1100
1243
  ];
1244
+ var SELECTION_CONTROL_FIELDS = [
1245
+ { name: "bg", tokenKey: "bg" },
1246
+ { name: "border", tokenKey: "border" },
1247
+ { name: "checked-bg", tokenKey: "checkedBg" },
1248
+ { name: "checked-border", tokenKey: "checkedBorder" },
1249
+ { name: "text", tokenKey: "text" },
1250
+ { name: "disabled-bg", tokenKey: "disabledBg" },
1251
+ { name: "disabled-border", tokenKey: "disabledBorder" }
1252
+ ];
1253
+ var SELECT_FIELDS = [
1254
+ { name: "bg", tokenKey: "bg" },
1255
+ { name: "border", tokenKey: "border" },
1256
+ { name: "text", tokenKey: "text" },
1257
+ { name: "placeholder-text", tokenKey: "placeholderText" },
1258
+ { name: "disabled-bg", tokenKey: "disabledBg" },
1259
+ { name: "disabled-border", tokenKey: "disabledBorder" },
1260
+ { name: "focus-border", tokenKey: "focusBorder" }
1261
+ ];
1262
+ var TEXTAREA_FIELDS = [
1263
+ { name: "bg", tokenKey: "bg" },
1264
+ { name: "border", tokenKey: "border" },
1265
+ { name: "text", tokenKey: "text" },
1266
+ { name: "placeholder", tokenKey: "placeholder" },
1267
+ { name: "disabled-bg", tokenKey: "disabledBg" },
1268
+ { name: "disabled-border", tokenKey: "disabledBorder" },
1269
+ { name: "focus-border", tokenKey: "focusBorder" }
1270
+ ];
1271
+ var FIELDSET_FIELDS = [
1272
+ { name: "border", tokenKey: "border" },
1273
+ { name: "legend-text", tokenKey: "legendText" }
1274
+ ];
1275
+ var LABEL_FIELDS = [
1276
+ { name: "text", tokenKey: "text" },
1277
+ { name: "disabled-text", tokenKey: "disabledText" },
1278
+ { name: "required-indicator-text", tokenKey: "requiredIndicatorText" }
1279
+ ];
1101
1280
  var resolveTokenReference = (tokens2, reference) => {
1102
1281
  const path = reference.slice(1, -1).split(".");
1103
1282
  let current = tokens2;
@@ -1380,6 +1559,42 @@ var generateCssVariables = (tokens2, options = {}) => {
1380
1559
  modePath: ["component", "dropdown", ...modePath],
1381
1560
  aliasSrc: componentAliases,
1382
1561
  aliasPath: ["dropdown", ...aliasPath]
1562
+ })),
1563
+ ...SELECTION_CONTROL_FIELDS.map(({ name, tokenKey }) => ({
1564
+ varParts: ["checkbox", name],
1565
+ modePath: ["component", "checkbox", tokenKey],
1566
+ aliasSrc: componentAliases,
1567
+ aliasPath: ["checkbox", tokenKey]
1568
+ })),
1569
+ ...SELECTION_CONTROL_FIELDS.map(({ name, tokenKey }) => ({
1570
+ varParts: ["radio", name],
1571
+ modePath: ["component", "radio", tokenKey],
1572
+ aliasSrc: componentAliases,
1573
+ aliasPath: ["radio", tokenKey]
1574
+ })),
1575
+ ...SELECT_FIELDS.map(({ name, tokenKey }) => ({
1576
+ varParts: ["select", name],
1577
+ modePath: ["component", "select", tokenKey],
1578
+ aliasSrc: componentAliases,
1579
+ aliasPath: ["select", tokenKey]
1580
+ })),
1581
+ ...TEXTAREA_FIELDS.map(({ name, tokenKey }) => ({
1582
+ varParts: ["textarea", name],
1583
+ modePath: ["component", "textarea", tokenKey],
1584
+ aliasSrc: componentAliases,
1585
+ aliasPath: ["textarea", tokenKey]
1586
+ })),
1587
+ ...FIELDSET_FIELDS.map(({ name, tokenKey }) => ({
1588
+ varParts: ["fieldset", name],
1589
+ modePath: ["component", "fieldset", tokenKey],
1590
+ aliasSrc: componentAliases,
1591
+ aliasPath: ["fieldset", tokenKey]
1592
+ })),
1593
+ ...LABEL_FIELDS.map(({ name, tokenKey }) => ({
1594
+ varParts: ["label", name],
1595
+ modePath: ["component", "label", tokenKey],
1596
+ aliasSrc: componentAliases,
1597
+ aliasPath: ["label", tokenKey]
1383
1598
  }))
1384
1599
  ];
1385
1600
  const baseLines = [];