@adobe/spectrum-tokens 12.0.0-beta.9 → 12.0.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 (24) hide show
  1. package/CHANGELOG.md +47 -2
  2. package/README.md +73 -4
  3. package/{config.js → commitlint.config.cjs} +5 -22
  4. package/dist/json/drover.json +1748 -0
  5. package/dist/json/variables.json +12398 -2482
  6. package/jest.config.cjs +22 -0
  7. package/manifest.json +9 -0
  8. package/package.json +28 -12
  9. package/src/color-aliases.json +1197 -0
  10. package/src/color-component.json +108 -0
  11. package/{tokens/color.json → src/color-palette.json} +280 -240
  12. package/src/layout-component.json +3141 -0
  13. package/src/layout.json +1414 -0
  14. package/{tokens/color-semantic.json → src/semantic-color-palette.json} +85 -15
  15. package/src/typography.json +1140 -0
  16. package/tasks/buildManifest.js +8 -0
  17. package/tasks/buildSpectrumTokens.js +58 -0
  18. package/tasks/deprecateExpress.js +11 -0
  19. package/tasks/diff.js +106 -0
  20. package/tasks/lib/augmentExpressTokens.js +40 -0
  21. package/commitlint.config.js +0 -3
  22. package/tokens/color-alias.json +0 -132
  23. package/tokens/component-layout.json +0 -738
  24. package/tokens/layout.json +0 -908
package/src/color-component.json ADDED
@@ -0,0 +1,108 @@
1
+ {
2
+ "swatch-border-color": {
3
+ "component": "swatch",
4
+ "value": "{gray-900}"
5
+ },
6
+ "swatch-border-opacity": {
7
+ "component": "swatch",
8
+ "value": "0.51"
9
+ },
10
+ "swatch-disabled-icon-border-color": {
11
+ "component": "swatch",
12
+ "value": "{black}"
13
+ },
14
+ "swatch-disabled-icon-border-opacity": {
15
+ "component": "swatch",
16
+ "value": "0.51"
17
+ },
18
+ "thumbnail-border-color": {
19
+ "component": "thumbnail",
20
+ "value": "{gray-800}"
21
+ },
22
+ "thumbnail-border-opacity": {
23
+ "component": "thumbnail",
24
+ "value": "0.1"
25
+ },
26
+ "thumbnail-opacity-disabled": {
27
+ "component": "thumbnail",
28
+ "value": "{opacity-disabled}"
29
+ },
30
+ "opacity-checkerboard-square-light": {
31
+ "component": "opacity-checkerboard",
32
+ "value": "{white}"
33
+ },
34
+ "opacity-checkerboard-square-dark": {
35
+ "component": "opacity-checkerboard",
36
+ "sets": {
37
+ "light": {
38
+ "value": "{gray-200}"
39
+ },
40
+ "dark": {
41
+ "value": "{gray-800}"
42
+ },
43
+ "darkest": {
44
+ "value": "{gray-800}"
45
+ }
46
+ }
47
+ },
48
+ "avatar-opacity-disabled": {
49
+ "component": "avatar",
50
+ "value": "{opacity-disabled}"
51
+ },
52
+ "color-area-border-color": {
53
+ "component": "color-area",
54
+ "value": "{gray-900}"
55
+ },
56
+ "color-area-border-opacity": {
57
+ "component": "color-area",
58
+ "value": "0.1"
59
+ },
60
+ "color-slider-border-color": {
61
+ "component": "color-slider",
62
+ "value": "{gray-900}"
63
+ },
64
+ "color-slider-border-opacity": {
65
+ "component": "color-slider",
66
+ "value": "0.1"
67
+ },
68
+ "color-loupe-drop-shadow-color": {
69
+ "component": "color-loupe",
70
+ "value": "{transparent-black-300}"
71
+ },
72
+ "color-loupe-drop-shadow-y": {
73
+ "component": "color-loupe",
74
+ "value": "2px"
75
+ },
76
+ "color-loupe-drop-shadow-blur": {
77
+ "component": "color-loupe",
78
+ "value": "8px"
79
+ },
80
+ "color-loupe-inner-border": {
81
+ "component": "color-loupe",
82
+ "value": "{transparent-black-200}"
83
+ },
84
+ "color-loupe-outer-border": {
85
+ "component": "color-loupe",
86
+ "value": "{white}"
87
+ },
88
+ "card-selection-background-color": {
89
+ "component": "cards",
90
+ "value": "{gray-100}"
91
+ },
92
+ "card-selection-background-color-opacity": {
93
+ "component": "cards",
94
+ "value": "0.95"
95
+ },
96
+ "drop-zone-background-color": {
97
+ "component": "drop-zone",
98
+ "value": "{accent-visual-color}"
99
+ },
100
+ "drop-zone-background-color-opacity": {
101
+ "component": "drop-zone",
102
+ "value": "0.1"
103
+ },
104
+ "drop-zone-background-color-opacity-filled": {
105
+ "component": "drop-zone",
106
+ "value": "0.3"
107
+ }
108
+ }
package/{tokens/color.json → src/color-palette.json} RENAMED
@@ -1,11 +1,64 @@
1
1
  {
2
+ "white": {
3
+ "value": "rgb(255, 255, 255)"
4
+ },
5
+ "transparent-white-100": {
6
+ "value": "rgba(255, 255, 255, 0)"
7
+ },
8
+ "transparent-white-200": {
9
+ "value": "rgba(255, 255, 255, 0.1)"
10
+ },
11
+ "transparent-white-300": {
12
+ "value": "rgba(255, 255, 255, 0.25)"
13
+ },
14
+ "transparent-white-400": {
15
+ "value": "rgba(255, 255, 255, 0.4)"
16
+ },
17
+ "transparent-white-500": {
18
+ "value": "rgba(255, 255, 255, 0.55)"
19
+ },
20
+ "transparent-white-600": {
21
+ "value": "rgba(255, 255, 255, 0.7)"
22
+ },
23
+ "transparent-white-700": {
24
+ "value": "rgba(255, 255, 255, 0.8)"
25
+ },
26
+ "transparent-white-800": {
27
+ "value": "rgba(255, 255, 255, 0.9)"
28
+ },
29
+ "transparent-white-900": {
30
+ "value": "rgb(255, 255, 255)"
31
+ },
2
32
  "black": {
3
33
  "value": "rgb(0, 0, 0)"
4
34
  },
5
- "white": {
6
- "value": "rgb(255, 255, 255)"
35
+ "transparent-black-100": {
36
+ "value": "rgba(0, 0, 0, 0)"
37
+ },
38
+ "transparent-black-200": {
39
+ "value": "rgba(0, 0, 0, 0.1)"
40
+ },
41
+ "transparent-black-300": {
42
+ "value": "rgba(0, 0, 0, 0.25)"
43
+ },
44
+ "transparent-black-400": {
45
+ "value": "rgba(0, 0, 0, 0.4)"
46
+ },
47
+ "transparent-black-500": {
48
+ "value": "rgba(0, 0, 0, 0.55)"
49
+ },
50
+ "transparent-black-600": {
51
+ "value": "rgba(0, 0, 0, 0.7)"
52
+ },
53
+ "transparent-black-700": {
54
+ "value": "rgba(0, 0, 0, 0.8)"
55
+ },
56
+ "transparent-black-800": {
57
+ "value": "rgba(0, 0, 0, 0.9)"
58
+ },
59
+ "transparent-black-900": {
60
+ "value": "rgb(0, 0, 0)"
7
61
  },
8
-
9
62
  "gray-50": {
10
63
  "sets": {
11
64
  "light": {
@@ -182,7 +235,230 @@
182
235
  }
183
236
  }
184
237
  },
185
-
238
+ "blue-100": {
239
+ "sets": {
240
+ "light": {
241
+ "value": "rgb(224, 242, 255)"
242
+ },
243
+ "dark": {
244
+ "value": "rgb(0, 56, 119)"
245
+ },
246
+ "darkest": {
247
+ "value": "rgb(0, 38, 81)"
248
+ },
249
+ "wireframe": {
250
+ "value": "rgb(242, 245, 251)"
251
+ }
252
+ }
253
+ },
254
+ "blue-200": {
255
+ "sets": {
256
+ "light": {
257
+ "value": "rgb(202, 232, 255)"
258
+ },
259
+ "dark": {
260
+ "value": "rgb(0, 65, 138)"
261
+ },
262
+ "darkest": {
263
+ "value": "rgb(0, 50, 106)"
264
+ },
265
+ "wireframe": {
266
+ "value": "rgb(237, 241, 250)"
267
+ }
268
+ }
269
+ },
270
+ "blue-300": {
271
+ "sets": {
272
+ "light": {
273
+ "value": "rgb(181, 222, 255)"
274
+ },
275
+ "dark": {
276
+ "value": "rgb(0, 77, 163)"
277
+ },
278
+ "darkest": {
279
+ "value": "rgb(0, 64, 135)"
280
+ },
281
+ "wireframe": {
282
+ "value": "rgb(233, 238, 248)"
283
+ }
284
+ }
285
+ },
286
+ "blue-400": {
287
+ "sets": {
288
+ "light": {
289
+ "value": "rgb(150, 206, 253)"
290
+ },
291
+ "dark": {
292
+ "value": "rgb(0, 89, 194)"
293
+ },
294
+ "darkest": {
295
+ "value": "rgb(0, 78, 166)"
296
+ },
297
+ "wireframe": {
298
+ "value": "rgb(226, 232, 247)"
299
+ }
300
+ }
301
+ },
302
+ "blue-500": {
303
+ "sets": {
304
+ "light": {
305
+ "value": "rgb(120, 187, 250)"
306
+ },
307
+ "dark": {
308
+ "value": "rgb(3, 103, 224)"
309
+ },
310
+ "darkest": {
311
+ "value": "rgb(0, 92, 200)"
312
+ },
313
+ "wireframe": {
314
+ "value": "rgb(216, 225, 244)"
315
+ }
316
+ }
317
+ },
318
+ "blue-600": {
319
+ "sets": {
320
+ "light": {
321
+ "value": "rgb(89, 167, 246)"
322
+ },
323
+ "dark": {
324
+ "value": "rgb(19, 121, 243)"
325
+ },
326
+ "darkest": {
327
+ "value": "rgb(6, 108, 231)"
328
+ },
329
+ "wireframe": {
330
+ "value": "rgb(203, 215, 241)"
331
+ }
332
+ }
333
+ },
334
+ "blue-700": {
335
+ "sets": {
336
+ "light": {
337
+ "value": "rgb(56, 146, 243)"
338
+ },
339
+ "dark": {
340
+ "value": "rgb(52, 143, 244)"
341
+ },
342
+ "darkest": {
343
+ "value": "rgb(29, 128, 245)"
344
+ },
345
+ "wireframe": {
346
+ "value": "rgb(190, 205, 237)"
347
+ }
348
+ }
349
+ },
350
+ "blue-800": {
351
+ "sets": {
352
+ "light": {
353
+ "value": "rgb(20, 122, 243)"
354
+ },
355
+ "dark": {
356
+ "value": "rgb(84, 163, 246)"
357
+ },
358
+ "darkest": {
359
+ "value": "rgb(64, 150, 243)"
360
+ },
361
+ "wireframe": {
362
+ "value": "rgb(173, 192, 233)"
363
+ }
364
+ }
365
+ },
366
+ "blue-900": {
367
+ "sets": {
368
+ "light": {
369
+ "value": "rgb(2, 101, 220)"
370
+ },
371
+ "dark": {
372
+ "value": "rgb(114, 183, 249)"
373
+ },
374
+ "darkest": {
375
+ "value": "rgb(94, 170, 247)"
376
+ },
377
+ "wireframe": {
378
+ "value": "rgb(154, 177, 227)"
379
+ }
380
+ }
381
+ },
382
+ "blue-1000": {
383
+ "sets": {
384
+ "light": {
385
+ "value": "rgb(0, 84, 182)"
386
+ },
387
+ "dark": {
388
+ "value": "rgb(143, 202, 252)"
389
+ },
390
+ "darkest": {
391
+ "value": "rgb(124, 189, 250)"
392
+ },
393
+ "wireframe": {
394
+ "value": "rgb(133, 161, 219)"
395
+ }
396
+ }
397
+ },
398
+ "blue-1100": {
399
+ "sets": {
400
+ "light": {
401
+ "value": "rgb(0, 68, 145)"
402
+ },
403
+ "dark": {
404
+ "value": "rgb(174, 219, 254)"
405
+ },
406
+ "darkest": {
407
+ "value": "rgb(152, 206, 253)"
408
+ },
409
+ "wireframe": {
410
+ "value": "rgb(114, 145, 211)"
411
+ }
412
+ }
413
+ },
414
+ "blue-1200": {
415
+ "sets": {
416
+ "light": {
417
+ "value": "rgb(0, 53, 113)"
418
+ },
419
+ "dark": {
420
+ "value": "rgb(204, 233, 255)"
421
+ },
422
+ "darkest": {
423
+ "value": "rgb(179, 222, 254)"
424
+ },
425
+ "wireframe": {
426
+ "value": "rgb(96, 130, 201)"
427
+ }
428
+ }
429
+ },
430
+ "blue-1300": {
431
+ "sets": {
432
+ "light": {
433
+ "value": "rgb(0, 39, 84)"
434
+ },
435
+ "dark": {
436
+ "value": "rgb(232, 246, 255)"
437
+ },
438
+ "darkest": {
439
+ "value": "rgb(206, 234, 255)"
440
+ },
441
+ "wireframe": {
442
+ "value": "rgb(82, 117, 192)"
443
+ }
444
+ }
445
+ },
446
+ "blue-1400": {
447
+ "sets": {
448
+ "light": {
449
+ "value": "rgb(0, 28, 60)"
450
+ },
451
+ "dark": {
452
+ "value": "rgb(255, 255, 255)"
453
+ },
454
+ "darkest": {
455
+ "value": "rgb(227, 243, 255)"
456
+ },
457
+ "wireframe": {
458
+ "value": "rgb(74, 109, 184)"
459
+ }
460
+ }
461
+ },
186
462
  "red-100": {
187
463
  "sets": {
188
464
  "light": {
@@ -407,7 +683,6 @@
407
683
  }
408
684
  }
409
685
  },
410
-
411
686
  "orange-100": {
412
687
  "sets": {
413
688
  "light": {
@@ -632,7 +907,6 @@
632
907
  }
633
908
  }
634
909
  },
635
-
636
910
  "yellow-100": {
637
911
  "sets": {
638
912
  "light": {
@@ -857,7 +1131,6 @@
857
1131
  }
858
1132
  }
859
1133
  },
860
-
861
1134
  "chartreuse-100": {
862
1135
  "sets": {
863
1136
  "light": {
@@ -1082,7 +1355,6 @@
1082
1355
  }
1083
1356
  }
1084
1357
  },
1085
-
1086
1358
  "celery-100": {
1087
1359
  "sets": {
1088
1360
  "light": {
@@ -1307,7 +1579,6 @@
1307
1579
  }
1308
1580
  }
1309
1581
  },
1310
-
1311
1582
  "green-100": {
1312
1583
  "sets": {
1313
1584
  "light": {
@@ -1532,7 +1803,6 @@
1532
1803
  }
1533
1804
  }
1534
1805
  },
1535
-
1536
1806
  "seafoam-100": {
1537
1807
  "sets": {
1538
1808
  "light": {
@@ -1757,7 +2027,6 @@
1757
2027
  }
1758
2028
  }
1759
2029
  },
1760
-
1761
2030
  "cyan-100": {
1762
2031
  "sets": {
1763
2032
  "light": {
@@ -1982,232 +2251,6 @@
1982
2251
  }
1983
2252
  }
1984
2253
  },
1985
-
1986
- "blue-100": {
1987
- "sets": {
1988
- "light": {
1989
- "value": "rgb(224, 242, 255)"
1990
- },
1991
- "dark": {
1992
- "value": "rgb(0, 56, 119)"
1993
- },
1994
- "darkest": {
1995
- "value": "rgb(0, 38, 81)"
1996
- },
1997
- "wireframe": {
1998
- "value": "rgb(242, 245, 251)"
1999
- }
2000
- }
2001
- },
2002
- "blue-200": {
2003
- "sets": {
2004
- "light": {
2005
- "value": "rgb(202, 232, 255)"
2006
- },
2007
- "dark": {
2008
- "value": "rgb(0, 65, 138)"
2009
- },
2010
- "darkest": {
2011
- "value": "rgb(0, 50, 106)"
2012
- },
2013
- "wireframe": {
2014
- "value": "rgb(237, 241, 250)"
2015
- }
2016
- }
2017
- },
2018
- "blue-300": {
2019
- "sets": {
2020
- "light": {
2021
- "value": "rgb(181, 222, 255)"
2022
- },
2023
- "dark": {
2024
- "value": "rgb(0, 77, 163)"
2025
- },
2026
- "darkest": {
2027
- "value": "rgb(0, 64, 135)"
2028
- },
2029
- "wireframe": {
2030
- "value": "rgb(233, 238, 248)"
2031
- }
2032
- }
2033
- },
2034
- "blue-400": {
2035
- "sets": {
2036
- "light": {
2037
- "value": "rgb(150, 206, 253)"
2038
- },
2039
- "dark": {
2040
- "value": "rgb(0, 89, 194)"
2041
- },
2042
- "darkest": {
2043
- "value": "rgb(0, 78, 166)"
2044
- },
2045
- "wireframe": {
2046
- "value": "rgb(226, 232, 247)"
2047
- }
2048
- }
2049
- },
2050
- "blue-500": {
2051
- "sets": {
2052
- "light": {
2053
- "value": "rgb(120, 187, 250)"
2054
- },
2055
- "dark": {
2056
- "value": "rgb(3, 103, 224)"
2057
- },
2058
- "darkest": {
2059
- "value": "rgb(0, 92, 200)"
2060
- },
2061
- "wireframe": {
2062
- "value": "rgb(216, 225, 244)"
2063
- }
2064
- }
2065
- },
2066
- "blue-600": {
2067
- "sets": {
2068
- "light": {
2069
- "value": "rgb(89, 167, 246)"
2070
- },
2071
- "dark": {
2072
- "value": "rgb(19, 121, 243)"
2073
- },
2074
- "darkest": {
2075
- "value": "rgb(6, 108, 231)"
2076
- },
2077
- "wireframe": {
2078
- "value": "rgb(203, 215, 241)"
2079
- }
2080
- }
2081
- },
2082
- "blue-700": {
2083
- "sets": {
2084
- "light": {
2085
- "value": "rgb(56, 146, 243)"
2086
- },
2087
- "dark": {
2088
- "value": "rgb(52, 143, 244)"
2089
- },
2090
- "darkest": {
2091
- "value": "rgb(29, 128, 245)"
2092
- },
2093
- "wireframe": {
2094
- "value": "rgb(190, 205, 237)"
2095
- }
2096
- }
2097
- },
2098
- "blue-800": {
2099
- "sets": {
2100
- "light": {
2101
- "value": "rgb(20, 122, 243)"
2102
- },
2103
- "dark": {
2104
- "value": "rgb(84, 163, 246)"
2105
- },
2106
- "darkest": {
2107
- "value": "rgb(64, 150, 243)"
2108
- },
2109
- "wireframe": {
2110
- "value": "rgb(173, 192, 233)"
2111
- }
2112
- }
2113
- },
2114
- "blue-900": {
2115
- "sets": {
2116
- "light": {
2117
- "value": "rgb(2, 101, 220)"
2118
- },
2119
- "dark": {
2120
- "value": "rgb(114, 183, 249)"
2121
- },
2122
- "darkest": {
2123
- "value": "rgb(94, 170, 247)"
2124
- },
2125
- "wireframe": {
2126
- "value": "rgb(154, 177, 227)"
2127
- }
2128
- }
2129
- },
2130
- "blue-1000": {
2131
- "sets": {
2132
- "light": {
2133
- "value": "rgb(0, 84, 182)"
2134
- },
2135
- "dark": {
2136
- "value": "rgb(143, 202, 252)"
2137
- },
2138
- "darkest": {
2139
- "value": "rgb(124, 189, 250)"
2140
- },
2141
- "wireframe": {
2142
- "value": "rgb(133, 161, 219)"
2143
- }
2144
- }
2145
- },
2146
- "blue-1100": {
2147
- "sets": {
2148
- "light": {
2149
- "value": "rgb(0, 68, 145)"
2150
- },
2151
- "dark": {
2152
- "value": "rgb(174, 219, 254)"
2153
- },
2154
- "darkest": {
2155
- "value": "rgb(152, 206, 253)"
2156
- },
2157
- "wireframe": {
2158
- "value": "rgb(114, 145, 211)"
2159
- }
2160
- }
2161
- },
2162
- "blue-1200": {
2163
- "sets": {
2164
- "light": {
2165
- "value": "rgb(0, 53, 113)"
2166
- },
2167
- "dark": {
2168
- "value": "rgb(204, 233, 255)"
2169
- },
2170
- "darkest": {
2171
- "value": "rgb(179, 222, 254)"
2172
- },
2173
- "wireframe": {
2174
- "value": "rgb(96, 130, 201)"
2175
- }
2176
- }
2177
- },
2178
- "blue-1300": {
2179
- "sets": {
2180
- "light": {
2181
- "value": "rgb(0, 39, 84)"
2182
- },
2183
- "dark": {
2184
- "value": "rgb(232, 246, 255)"
2185
- },
2186
- "darkest": {
2187
- "value": "rgb(206, 234, 255)"
2188
- },
2189
- "wireframe": {
2190
- "value": "rgb(82, 117, 192)"
2191
- }
2192
- }
2193
- },
2194
- "blue-1400": {
2195
- "sets": {
2196
- "light": {
2197
- "value": "rgb(0, 28, 60)"
2198
- },
2199
- "dark": {
2200
- "value": "rgb(255, 255, 255)"
2201
- },
2202
- "darkest": {
2203
- "value": "rgb(227, 243, 255)"
2204
- },
2205
- "wireframe": {
2206
- "value": "rgb(74, 109, 184)"
2207
- }
2208
- }
2209
- },
2210
-
2211
2254
  "indigo-100": {
2212
2255
  "sets": {
2213
2256
  "light": {
@@ -2432,7 +2475,6 @@
2432
2475
  }
2433
2476
  }
2434
2477
  },
2435
-
2436
2478
  "purple-100": {
2437
2479
  "sets": {
2438
2480
  "light": {
@@ -2657,7 +2699,6 @@
2657
2699
  }
2658
2700
  }
2659
2701
  },
2660
-
2661
2702
  "fuchsia-100": {
2662
2703
  "sets": {
2663
2704
  "light": {
@@ -2882,7 +2923,6 @@
2882
2923
  }
2883
2924
  }
2884
2925
  },
2885
-
2886
2926
  "magenta-100": {
2887
2927
  "sets": {
2888
2928
  "light": {