@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.js CHANGED
@@ -117,6 +117,51 @@ 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
+ },
148
+ "textarea": {
149
+ "bg": "{colors.white}",
150
+ "border": "{colors.neutral.300}",
151
+ "text": "{colors.neutral.900}",
152
+ "placeholder": "{colors.neutral.500}",
153
+ "disabledBg": "{colors.neutral.50}",
154
+ "disabledBorder": "{colors.neutral.200}",
155
+ "focusBorder": "{colors.info.500}"
156
+ },
157
+ "fieldset": {
158
+ "border": "{colors.neutral.200}",
159
+ "legendText": "{colors.neutral.900}"
160
+ },
161
+ "label": {
162
+ "text": "{colors.neutral.900}",
163
+ "disabledText": "{colors.neutral.400}",
164
+ "requiredIndicatorText": "{colors.error.600}"
120
165
  }
121
166
  },
122
167
  "buttons": {
@@ -371,6 +416,51 @@ var coreTokens = {
371
416
  "active": "{colors.info.50}",
372
417
  "text": "{colors.neutral.900}"
373
418
  }
419
+ },
420
+ "checkbox": {
421
+ "bg": "{colors.white}",
422
+ "border": "{colors.neutral.300}",
423
+ "checkedBg": "{colors.info.600}",
424
+ "checkedBorder": "{colors.info.600}",
425
+ "text": "{colors.white}",
426
+ "disabledBg": "{colors.neutral.50}",
427
+ "disabledBorder": "{colors.neutral.200}"
428
+ },
429
+ "radio": {
430
+ "bg": "{colors.white}",
431
+ "border": "{colors.neutral.300}",
432
+ "checkedBg": "{colors.info.600}",
433
+ "checkedBorder": "{colors.info.600}",
434
+ "text": "{colors.white}",
435
+ "disabledBg": "{colors.neutral.50}",
436
+ "disabledBorder": "{colors.neutral.200}"
437
+ },
438
+ "select": {
439
+ "bg": "{colors.white}",
440
+ "border": "{colors.neutral.300}",
441
+ "text": "{colors.neutral.900}",
442
+ "placeholderText": "{colors.neutral.500}",
443
+ "disabledBg": "{colors.neutral.50}",
444
+ "disabledBorder": "{colors.neutral.200}",
445
+ "focusBorder": "{colors.info.500}"
446
+ },
447
+ "textarea": {
448
+ "bg": "{colors.white}",
449
+ "border": "{colors.neutral.300}",
450
+ "text": "{colors.neutral.900}",
451
+ "placeholder": "{colors.neutral.500}",
452
+ "disabledBg": "{colors.neutral.50}",
453
+ "disabledBorder": "{colors.neutral.200}",
454
+ "focusBorder": "{colors.info.500}"
455
+ },
456
+ "fieldset": {
457
+ "border": "{colors.neutral.200}",
458
+ "legendText": "{colors.neutral.900}"
459
+ },
460
+ "label": {
461
+ "text": "{colors.neutral.900}",
462
+ "disabledText": "{colors.neutral.400}",
463
+ "requiredIndicatorText": "{colors.error.600}"
374
464
  }
375
465
  }
376
466
  },
@@ -520,6 +610,51 @@ var coreTokens = {
520
610
  "active": "{colors.info.900}",
521
611
  "text": "{colors.neutral.100}"
522
612
  }
613
+ },
614
+ "checkbox": {
615
+ "bg": "{colors.neutral.800}",
616
+ "border": "{colors.neutral.600}",
617
+ "checkedBg": "{colors.info.600}",
618
+ "checkedBorder": "{colors.info.600}",
619
+ "text": "{colors.white}",
620
+ "disabledBg": "{colors.neutral.900}",
621
+ "disabledBorder": "{colors.neutral.700}"
622
+ },
623
+ "radio": {
624
+ "bg": "{colors.neutral.800}",
625
+ "border": "{colors.neutral.600}",
626
+ "checkedBg": "{colors.info.600}",
627
+ "checkedBorder": "{colors.info.600}",
628
+ "text": "{colors.white}",
629
+ "disabledBg": "{colors.neutral.900}",
630
+ "disabledBorder": "{colors.neutral.700}"
631
+ },
632
+ "select": {
633
+ "bg": "{colors.neutral.800}",
634
+ "border": "{colors.neutral.600}",
635
+ "text": "{colors.neutral.50}",
636
+ "placeholderText": "{colors.neutral.400}",
637
+ "disabledBg": "{colors.neutral.900}",
638
+ "disabledBorder": "{colors.neutral.700}",
639
+ "focusBorder": "{colors.info.400}"
640
+ },
641
+ "textarea": {
642
+ "bg": "{colors.neutral.800}",
643
+ "border": "{colors.neutral.600}",
644
+ "text": "{colors.neutral.50}",
645
+ "placeholder": "{colors.neutral.400}",
646
+ "disabledBg": "{colors.neutral.900}",
647
+ "disabledBorder": "{colors.neutral.700}",
648
+ "focusBorder": "{colors.info.400}"
649
+ },
650
+ "fieldset": {
651
+ "border": "{colors.neutral.700}",
652
+ "legendText": "{colors.neutral.50}"
653
+ },
654
+ "label": {
655
+ "text": "{colors.neutral.50}",
656
+ "disabledText": "{colors.neutral.600}",
657
+ "requiredIndicatorText": "{colors.error.400}"
523
658
  }
524
659
  }
525
660
  }
@@ -1098,6 +1233,42 @@ var DROPDOWN_FIELDS = [
1098
1233
  { name: "item-active", modePath: ["item", "active"], aliasPath: ["item", "active"] },
1099
1234
  { name: "item-text", modePath: ["item", "text"], aliasPath: ["item", "text"] }
1100
1235
  ];
1236
+ var SELECTION_CONTROL_FIELDS = [
1237
+ { name: "bg", tokenKey: "bg" },
1238
+ { name: "border", tokenKey: "border" },
1239
+ { name: "checked-bg", tokenKey: "checkedBg" },
1240
+ { name: "checked-border", tokenKey: "checkedBorder" },
1241
+ { name: "text", tokenKey: "text" },
1242
+ { name: "disabled-bg", tokenKey: "disabledBg" },
1243
+ { name: "disabled-border", tokenKey: "disabledBorder" }
1244
+ ];
1245
+ var SELECT_FIELDS = [
1246
+ { name: "bg", tokenKey: "bg" },
1247
+ { name: "border", tokenKey: "border" },
1248
+ { name: "text", tokenKey: "text" },
1249
+ { name: "placeholder-text", tokenKey: "placeholderText" },
1250
+ { name: "disabled-bg", tokenKey: "disabledBg" },
1251
+ { name: "disabled-border", tokenKey: "disabledBorder" },
1252
+ { name: "focus-border", tokenKey: "focusBorder" }
1253
+ ];
1254
+ var TEXTAREA_FIELDS = [
1255
+ { name: "bg", tokenKey: "bg" },
1256
+ { name: "border", tokenKey: "border" },
1257
+ { name: "text", tokenKey: "text" },
1258
+ { name: "placeholder", tokenKey: "placeholder" },
1259
+ { name: "disabled-bg", tokenKey: "disabledBg" },
1260
+ { name: "disabled-border", tokenKey: "disabledBorder" },
1261
+ { name: "focus-border", tokenKey: "focusBorder" }
1262
+ ];
1263
+ var FIELDSET_FIELDS = [
1264
+ { name: "border", tokenKey: "border" },
1265
+ { name: "legend-text", tokenKey: "legendText" }
1266
+ ];
1267
+ var LABEL_FIELDS = [
1268
+ { name: "text", tokenKey: "text" },
1269
+ { name: "disabled-text", tokenKey: "disabledText" },
1270
+ { name: "required-indicator-text", tokenKey: "requiredIndicatorText" }
1271
+ ];
1101
1272
  var resolveTokenReference = (tokens2, reference) => {
1102
1273
  const path = reference.slice(1, -1).split(".");
1103
1274
  let current = tokens2;
@@ -1380,6 +1551,42 @@ var generateCssVariables = (tokens2, options = {}) => {
1380
1551
  modePath: ["component", "dropdown", ...modePath],
1381
1552
  aliasSrc: componentAliases,
1382
1553
  aliasPath: ["dropdown", ...aliasPath]
1554
+ })),
1555
+ ...SELECTION_CONTROL_FIELDS.map(({ name, tokenKey }) => ({
1556
+ varParts: ["checkbox", name],
1557
+ modePath: ["component", "checkbox", tokenKey],
1558
+ aliasSrc: componentAliases,
1559
+ aliasPath: ["checkbox", tokenKey]
1560
+ })),
1561
+ ...SELECTION_CONTROL_FIELDS.map(({ name, tokenKey }) => ({
1562
+ varParts: ["radio", name],
1563
+ modePath: ["component", "radio", tokenKey],
1564
+ aliasSrc: componentAliases,
1565
+ aliasPath: ["radio", tokenKey]
1566
+ })),
1567
+ ...SELECT_FIELDS.map(({ name, tokenKey }) => ({
1568
+ varParts: ["select", name],
1569
+ modePath: ["component", "select", tokenKey],
1570
+ aliasSrc: componentAliases,
1571
+ aliasPath: ["select", tokenKey]
1572
+ })),
1573
+ ...TEXTAREA_FIELDS.map(({ name, tokenKey }) => ({
1574
+ varParts: ["textarea", name],
1575
+ modePath: ["component", "textarea", tokenKey],
1576
+ aliasSrc: componentAliases,
1577
+ aliasPath: ["textarea", tokenKey]
1578
+ })),
1579
+ ...FIELDSET_FIELDS.map(({ name, tokenKey }) => ({
1580
+ varParts: ["fieldset", name],
1581
+ modePath: ["component", "fieldset", tokenKey],
1582
+ aliasSrc: componentAliases,
1583
+ aliasPath: ["fieldset", tokenKey]
1584
+ })),
1585
+ ...LABEL_FIELDS.map(({ name, tokenKey }) => ({
1586
+ varParts: ["label", name],
1587
+ modePath: ["component", "label", tokenKey],
1588
+ aliasSrc: componentAliases,
1589
+ aliasPath: ["label", tokenKey]
1383
1590
  }))
1384
1591
  ];
1385
1592
  const baseLines = [];