@hpe-web/design-tokens 1.3.1 → 2.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 (25) hide show
  1. package/README.md +31 -6
  2. package/dist/css/locales/de.tokens.css +42 -21
  3. package/dist/css/locales/es.tokens.css +42 -21
  4. package/dist/css/locales/fr.tokens.css +42 -21
  5. package/dist/css/locales/it.tokens.css +42 -21
  6. package/dist/css/locales/ja.tokens.css +41 -19
  7. package/dist/css/locales/ko.tokens.css +41 -19
  8. package/dist/css/locales/zh.tokens.css +3 -0
  9. package/dist/css/tokens.css +128 -36
  10. package/dist/css/tokens.dark.css +195 -2
  11. package/dist/css/tokens.md-lg.css +83 -29
  12. package/dist/css/tokens.xl.css +84 -30
  13. package/package.json +2 -2
  14. package/src/component/{button.json → component.json} +244 -6
  15. package/src/hpe.resolver.json +2 -2
  16. package/src/primitive/primitives.json +1 -1
  17. package/src/semantic/color.dark.json +48 -6
  18. package/src/semantic/color.light.json +48 -6
  19. package/src/semantic/dimension.md-lg.json +436 -49
  20. package/src/semantic/dimension.xl.json +439 -52
  21. package/src/semantic/dimension.xs-sm.json +435 -48
  22. package/src/snapshots/component/5fc94136d48c018dba9a72a28d52a9ff9f7b19b607453ecfddef7467ca039c9b.json +5580 -0
  23. package/src/snapshots/current.json +8 -0
  24. package/src/snapshots/primitive/7e878b4264ed525786e7a59d0e578dc1bcb9aefb149679741793c283c7e7918e.json +7234 -0
  25. package/src/snapshots/semantic/afc82e5feb03f3c4d976dff4bcd4cedd1a5c674198d7ae3b4b4164e8694e3fc6.json +9576 -0
package/src/semantic/dimension.xs-sm.json CHANGED
@@ -28,6 +28,20 @@
28
28
  }
29
29
  },
30
30
  "heading": {
31
+ "display": {
32
+ "$type": "fontFamily",
33
+ "$value": [
34
+ "HPE Graphik XXCondensed"
35
+ ]
36
+ },
37
+ "font": {
38
+ "$type": "fontFamily",
39
+ "$value": [
40
+ "HPE Graphik",
41
+ "Arial",
42
+ "sans-serif"
43
+ ]
44
+ },
31
45
  "h1": {
32
46
  "condensed": {
33
47
  "bold": {
@@ -46,8 +60,8 @@
46
60
  "letterSpacing": {
47
61
  "$type": "dimension",
48
62
  "$value": {
49
- "value": 0.02,
50
- "unit": "em"
63
+ "value": 0.96,
64
+ "unit": "px"
51
65
  }
52
66
  },
53
67
  "lineHeight": {
@@ -72,8 +86,8 @@
72
86
  "letterSpacing": {
73
87
  "$type": "dimension",
74
88
  "$value": {
75
- "value": 0.02,
76
- "unit": "em"
89
+ "value": 0.96,
90
+ "unit": "px"
77
91
  }
78
92
  },
79
93
  "lineHeight": {
@@ -98,8 +112,8 @@
98
112
  "letterSpacing": {
99
113
  "$type": "dimension",
100
114
  "$value": {
101
- "value": 0.02,
102
- "unit": "em"
115
+ "value": 0.96,
116
+ "unit": "px"
103
117
  }
104
118
  },
105
119
  "lineHeight": {
@@ -109,7 +123,33 @@
109
123
  }
110
124
  }
111
125
  },
112
- "default": {
126
+ "light": {
127
+ "fontSize": {
128
+ "$type": "dimension",
129
+ "$value": {
130
+ "value": 40,
131
+ "unit": "px"
132
+ },
133
+ "$description": "Font size typically used on h1."
134
+ },
135
+ "fontWeight": {
136
+ "$type": "fontWeight",
137
+ "$value": 300
138
+ },
139
+ "letterSpacing": {
140
+ "$type": "dimension",
141
+ "$value": {
142
+ "value": -0.8,
143
+ "unit": "px"
144
+ }
145
+ },
146
+ "lineHeight": {
147
+ "$type": "number",
148
+ "$value": 1.15,
149
+ "$description": "Line height typically used on h1."
150
+ }
151
+ },
152
+ "medium": {
113
153
  "fontSize": {
114
154
  "$type": "dimension",
115
155
  "$value": {
@@ -125,8 +165,8 @@
125
165
  "letterSpacing": {
126
166
  "$type": "dimension",
127
167
  "$value": {
128
- "value": -0.02,
129
- "unit": "em"
168
+ "value": -0.8,
169
+ "unit": "px"
130
170
  }
131
171
  },
132
172
  "lineHeight": {
@@ -154,8 +194,8 @@
154
194
  "letterSpacing": {
155
195
  "$type": "dimension",
156
196
  "$value": {
157
- "value": 0.02,
158
- "unit": "em"
197
+ "value": 1.2,
198
+ "unit": "px"
159
199
  }
160
200
  },
161
201
  "lineHeight": {
@@ -180,8 +220,8 @@
180
220
  "letterSpacing": {
181
221
  "$type": "dimension",
182
222
  "$value": {
183
- "value": 0.0333,
184
- "unit": "em"
223
+ "value": 2,
224
+ "unit": "px"
185
225
  }
186
226
  },
187
227
  "lineHeight": {
@@ -206,8 +246,8 @@
206
246
  "letterSpacing": {
207
247
  "$type": "dimension",
208
248
  "$value": {
209
- "value": 0.02,
210
- "unit": "em"
249
+ "value": 1.2,
250
+ "unit": "px"
211
251
  }
212
252
  },
213
253
  "lineHeight": {
@@ -217,7 +257,33 @@
217
257
  }
218
258
  }
219
259
  },
220
- "default": {
260
+ "light": {
261
+ "fontSize": {
262
+ "$type": "dimension",
263
+ "$value": {
264
+ "value": 40,
265
+ "unit": "px"
266
+ },
267
+ "$description": "Font size typically used on h1."
268
+ },
269
+ "fontWeight": {
270
+ "$type": "fontWeight",
271
+ "$value": 300
272
+ },
273
+ "letterSpacing": {
274
+ "$type": "dimension",
275
+ "$value": {
276
+ "value": -0.8,
277
+ "unit": "px"
278
+ }
279
+ },
280
+ "lineHeight": {
281
+ "$type": "number",
282
+ "$value": 1.15,
283
+ "$description": "Line height typically used on h1."
284
+ }
285
+ },
286
+ "medium": {
221
287
  "fontSize": {
222
288
  "$type": "dimension",
223
289
  "$value": {
@@ -233,8 +299,8 @@
233
299
  "letterSpacing": {
234
300
  "$type": "dimension",
235
301
  "$value": {
236
- "value": -0.02,
237
- "unit": "em"
302
+ "value": -0.8,
303
+ "unit": "px"
238
304
  }
239
305
  },
240
306
  "lineHeight": {
@@ -245,7 +311,33 @@
245
311
  }
246
312
  },
247
313
  "h2": {
248
- "default": {
314
+ "light": {
315
+ "fontSize": {
316
+ "$type": "dimension",
317
+ "$value": {
318
+ "value": 32,
319
+ "unit": "px"
320
+ },
321
+ "$description": "Font size typically used on h1."
322
+ },
323
+ "fontWeight": {
324
+ "$type": "fontWeight",
325
+ "$value": 300
326
+ },
327
+ "letterSpacing": {
328
+ "$type": "dimension",
329
+ "$value": {
330
+ "value": -0.32,
331
+ "unit": "px"
332
+ }
333
+ },
334
+ "lineHeight": {
335
+ "$type": "number",
336
+ "$value": 1.188,
337
+ "$description": "Line height typically used on h1."
338
+ }
339
+ },
340
+ "medium": {
249
341
  "fontSize": {
250
342
  "$type": "dimension",
251
343
  "$value": {
@@ -261,8 +353,8 @@
261
353
  "letterSpacing": {
262
354
  "$type": "dimension",
263
355
  "$value": {
264
- "value": -0.01,
265
- "unit": "em"
356
+ "value": -0.32,
357
+ "unit": "px"
266
358
  }
267
359
  },
268
360
  "lineHeight": {
@@ -273,7 +365,33 @@
273
365
  }
274
366
  },
275
367
  "h3": {
276
- "default": {
368
+ "light": {
369
+ "fontSize": {
370
+ "$type": "dimension",
371
+ "$value": {
372
+ "value": 26,
373
+ "unit": "px"
374
+ },
375
+ "$description": "Font size typically used on h1."
376
+ },
377
+ "fontWeight": {
378
+ "$type": "fontWeight",
379
+ "$value": 300
380
+ },
381
+ "letterSpacing": {
382
+ "$type": "dimension",
383
+ "$value": {
384
+ "value": 0,
385
+ "unit": "px"
386
+ }
387
+ },
388
+ "lineHeight": {
389
+ "$type": "number",
390
+ "$value": 1.231,
391
+ "$description": "Line height typically used on h1."
392
+ }
393
+ },
394
+ "medium": {
277
395
  "fontSize": {
278
396
  "$type": "dimension",
279
397
  "$value": {
@@ -290,7 +408,7 @@
290
408
  "$type": "dimension",
291
409
  "$value": {
292
410
  "value": 0,
293
- "unit": "em"
411
+ "unit": "px"
294
412
  }
295
413
  },
296
414
  "lineHeight": {
@@ -301,7 +419,33 @@
301
419
  }
302
420
  },
303
421
  "h4": {
304
- "default": {
422
+ "light": {
423
+ "fontSize": {
424
+ "$type": "dimension",
425
+ "$value": {
426
+ "value": 20,
427
+ "unit": "px"
428
+ },
429
+ "$description": "Font size typically used on h1."
430
+ },
431
+ "fontWeight": {
432
+ "$type": "fontWeight",
433
+ "$value": 500
434
+ },
435
+ "letterSpacing": {
436
+ "$type": "dimension",
437
+ "$value": {
438
+ "value": 0,
439
+ "unit": "px"
440
+ }
441
+ },
442
+ "lineHeight": {
443
+ "$type": "number",
444
+ "$value": 1.3,
445
+ "$description": "Line height typically used on h1."
446
+ }
447
+ },
448
+ "medium": {
305
449
  "fontSize": {
306
450
  "$type": "dimension",
307
451
  "$value": {
@@ -318,7 +462,7 @@
318
462
  "$type": "dimension",
319
463
  "$value": {
320
464
  "value": 0,
321
- "unit": "em"
465
+ "unit": "px"
322
466
  }
323
467
  },
324
468
  "lineHeight": {
@@ -329,7 +473,33 @@
329
473
  }
330
474
  },
331
475
  "h5": {
332
- "default": {
476
+ "light": {
477
+ "fontSize": {
478
+ "$type": "dimension",
479
+ "$value": {
480
+ "value": 16,
481
+ "unit": "px"
482
+ },
483
+ "$description": "Font size typically used on h1."
484
+ },
485
+ "fontWeight": {
486
+ "$type": "fontWeight",
487
+ "$value": 300
488
+ },
489
+ "letterSpacing": {
490
+ "$type": "dimension",
491
+ "$value": {
492
+ "value": 0,
493
+ "unit": "px"
494
+ }
495
+ },
496
+ "lineHeight": {
497
+ "$type": "number",
498
+ "$value": 1.375,
499
+ "$description": "Line height typically used on h1."
500
+ }
501
+ },
502
+ "medium": {
333
503
  "fontSize": {
334
504
  "$type": "dimension",
335
505
  "$value": {
@@ -346,7 +516,7 @@
346
516
  "$type": "dimension",
347
517
  "$value": {
348
518
  "value": 0,
349
- "unit": "em"
519
+ "unit": "px"
350
520
  }
351
521
  },
352
522
  "lineHeight": {
@@ -357,7 +527,33 @@
357
527
  }
358
528
  },
359
529
  "h6": {
360
- "default": {
530
+ "light": {
531
+ "fontSize": {
532
+ "$type": "dimension",
533
+ "$value": {
534
+ "value": 14,
535
+ "unit": "px"
536
+ },
537
+ "$description": "Font size typically used on h1."
538
+ },
539
+ "fontWeight": {
540
+ "$type": "fontWeight",
541
+ "$value": 300
542
+ },
543
+ "letterSpacing": {
544
+ "$type": "dimension",
545
+ "$value": {
546
+ "value": 0,
547
+ "unit": "px"
548
+ }
549
+ },
550
+ "lineHeight": {
551
+ "$type": "number",
552
+ "$value": 1.429,
553
+ "$description": "Line height typically used on h1."
554
+ }
555
+ },
556
+ "medium": {
361
557
  "fontSize": {
362
558
  "$type": "dimension",
363
559
  "$value": {
@@ -374,7 +570,7 @@
374
570
  "$type": "dimension",
375
571
  "$value": {
376
572
  "value": 0,
377
- "unit": "em"
573
+ "unit": "px"
378
574
  }
379
575
  },
380
576
  "lineHeight": {
@@ -424,6 +620,31 @@
424
620
  }
425
621
  },
426
622
  "multi-mode": {
623
+ "avatar": {
624
+ "height": {
625
+ "$type": "dimension",
626
+ "$value": {
627
+ "value": 64,
628
+ "unit": "px"
629
+ }
630
+ }
631
+ },
632
+ "bento-box": {
633
+ "bentoX": {
634
+ "$type": "dimension",
635
+ "$value": {
636
+ "value": 32,
637
+ "unit": "px"
638
+ }
639
+ },
640
+ "bentoY": {
641
+ "$type": "dimension",
642
+ "$value": {
643
+ "value": 32,
644
+ "unit": "px"
645
+ }
646
+ }
647
+ },
427
648
  "button": {
428
649
  "link": {
429
650
  "large": {
@@ -1052,10 +1273,163 @@
1052
1273
  }
1053
1274
  }
1054
1275
  }
1276
+ },
1277
+ "icon": {
1278
+ "height": {
1279
+ "$type": "dimension",
1280
+ "$value": {
1281
+ "value": 32,
1282
+ "unit": "px"
1283
+ }
1284
+ }
1285
+ },
1286
+ "layout": {
1287
+ "gapX": {
1288
+ "$type": "dimension",
1289
+ "$value": {
1290
+ "value": 24,
1291
+ "unit": "px"
1292
+ }
1293
+ },
1294
+ "gapY": {
1295
+ "$type": "dimension",
1296
+ "$value": {
1297
+ "value": 24,
1298
+ "unit": "px"
1299
+ }
1300
+ },
1301
+ "paddingY": {
1302
+ "$type": "dimension",
1303
+ "$value": {
1304
+ "value": 64,
1305
+ "unit": "px"
1306
+ }
1307
+ }
1308
+ },
1309
+ "live-player": {
1310
+ "gapX": {
1311
+ "$type": "dimension",
1312
+ "$value": {
1313
+ "value": 16,
1314
+ "unit": "px"
1315
+ }
1316
+ },
1317
+ "paddingX": {
1318
+ "$type": "dimension",
1319
+ "$value": {
1320
+ "value": 32,
1321
+ "unit": "px"
1322
+ }
1323
+ },
1324
+ "paddingY": {
1325
+ "$type": "dimension",
1326
+ "$value": {
1327
+ "value": 64,
1328
+ "unit": "px"
1329
+ }
1330
+ }
1331
+ },
1332
+ "logo": {
1333
+ "collage": {
1334
+ "group": {
1335
+ "gapX": {
1336
+ "$type": "dimension",
1337
+ "$value": {
1338
+ "value": 16,
1339
+ "unit": "px"
1340
+ }
1341
+ },
1342
+ "gapY": {
1343
+ "$type": "dimension",
1344
+ "$value": {
1345
+ "value": 16,
1346
+ "unit": "px"
1347
+ }
1348
+ }
1349
+ },
1350
+ "maxHeight": {
1351
+ "$type": "dimension",
1352
+ "$value": {
1353
+ "value": 40,
1354
+ "unit": "px"
1355
+ }
1356
+ }
1357
+ },
1358
+ "grid": {
1359
+ "paddingX": {
1360
+ "$type": "dimension",
1361
+ "$value": {
1362
+ "value": 32,
1363
+ "unit": "px"
1364
+ }
1365
+ },
1366
+ "paddingY": {
1367
+ "$type": "dimension",
1368
+ "$value": {
1369
+ "value": 32,
1370
+ "unit": "px"
1371
+ }
1372
+ },
1373
+ "width": {
1374
+ "$type": "dimension",
1375
+ "$value": {
1376
+ "value": 160,
1377
+ "unit": "px"
1378
+ }
1379
+ }
1380
+ },
1381
+ "height": {
1382
+ "$type": "dimension",
1383
+ "$value": {
1384
+ "value": 64,
1385
+ "unit": "px"
1386
+ }
1387
+ }
1388
+ },
1389
+ "marquee": {
1390
+ "gapX": {
1391
+ "$type": "dimension",
1392
+ "$value": {
1393
+ "value": 40,
1394
+ "unit": "px"
1395
+ }
1396
+ },
1397
+ "gapY": {
1398
+ "$type": "dimension",
1399
+ "$value": {
1400
+ "value": 40,
1401
+ "unit": "px"
1402
+ }
1403
+ },
1404
+ "paddingY": {
1405
+ "$type": "dimension",
1406
+ "$value": {
1407
+ "value": 64,
1408
+ "unit": "px"
1409
+ }
1410
+ }
1411
+ },
1412
+ "simple-marquee": {
1413
+ "paddingY": {
1414
+ "$type": "dimension",
1415
+ "$value": {
1416
+ "value": 64,
1417
+ "unit": "px"
1418
+ }
1419
+ }
1420
+ },
1421
+ "text-recipe": {
1422
+ "gapY": {
1423
+ "$type": "dimension",
1424
+ "$value": {
1425
+ "value": 12,
1426
+ "unit": "px"
1427
+ }
1428
+ }
1055
1429
  }
1056
1430
  },
1057
1431
  "paragraph": {
1058
- "body copy": {
1432
+ "body-copy": {
1059
1433
  "fontSize": {
1060
1434
  "$type": "dimension",
1061
1435
  "$value": {
@@ -1071,7 +1445,7 @@
1071
1445
  "$type": "dimension",
1072
1446
  "$value": {
1073
1447
  "value": 0,
1074
- "unit": "em"
1448
+ "unit": "px"
1075
1449
  }
1076
1450
  },
1077
1451
  "lineHeight": {
@@ -1095,7 +1469,7 @@
1095
1469
  "$type": "dimension",
1096
1470
  "$value": {
1097
1471
  "value": 0,
1098
- "unit": "em"
1472
+ "unit": "px"
1099
1473
  }
1100
1474
  },
1101
1475
  "lineHeight": {
@@ -1103,7 +1477,15 @@
1103
1477
  "$value": 1.5
1104
1478
  }
1105
1479
  },
1106
- "large body copy": {
1480
+ "font": {
1481
+ "$type": "fontFamily",
1482
+ "$value": [
1483
+ "HPE Graphik",
1484
+ "Arial",
1485
+ "sans-serif"
1486
+ ]
1487
+ },
1488
+ "large-body-copy": {
1107
1489
  "fontSize": {
1108
1490
  "$type": "dimension",
1109
1491
  "$value": {
@@ -1118,8 +1500,8 @@
1118
1500
  "letterSpacing": {
1119
1501
  "$type": "dimension",
1120
1502
  "$value": {
1121
- "value": -0.01,
1122
- "unit": "em"
1503
+ "value": -0.2,
1504
+ "unit": "px"
1123
1505
  }
1124
1506
  },
1125
1507
  "lineHeight": {
@@ -1127,7 +1509,7 @@
1127
1509
  "$value": 1.5
1128
1510
  }
1129
1511
  },
1130
- "small body copy": {
1512
+ "small-body-copy": {
1131
1513
  "fontSize": {
1132
1514
  "$type": "dimension",
1133
1515
  "$value": {
@@ -1143,7 +1525,7 @@
1143
1525
  "$type": "dimension",
1144
1526
  "$value": {
1145
1527
  "value": 0,
1146
- "unit": "em"
1528
+ "unit": "px"
1147
1529
  }
1148
1530
  },
1149
1531
  "lineHeight": {
@@ -1153,6 +1535,14 @@
1153
1535
  }
1154
1536
  },
1155
1537
  "quote": {
1538
+ "font": {
1539
+ "$type": "fontFamily",
1540
+ "$value": [
1541
+ "HPE Graphik",
1542
+ "Arial",
1543
+ "sans-serif"
1544
+ ]
1545
+ },
1156
1546
  "large": {
1157
1547
  "fontSize": {
1158
1548
  "$type": "dimension",
@@ -1168,8 +1558,8 @@
1168
1558
  "letterSpacing": {
1169
1559
  "$type": "dimension",
1170
1560
  "$value": {
1171
- "value": -0.02,
1172
- "unit": "em"
1561
+ "value": -0.64,
1562
+ "unit": "px"
1173
1563
  }
1174
1564
  },
1175
1565
  "lineHeight": {
@@ -1192,8 +1582,8 @@
1192
1582
  "letterSpacing": {
1193
1583
  "$type": "dimension",
1194
1584
  "$value": {
1195
- "value": -0.01,
1196
- "unit": "em"
1585
+ "value": -0.28,
1586
+ "unit": "px"
1197
1587
  }
1198
1588
  },
1199
1589
  "lineHeight": {
@@ -1216,8 +1606,8 @@
1216
1606
  "letterSpacing": {
1217
1607
  "$type": "dimension",
1218
1608
  "$value": {
1219
- "value": -0.01,
1220
- "unit": "em"
1609
+ "value": -0.24,
1610
+ "unit": "px"
1221
1611
  }
1222
1612
  },
1223
1613
  "lineHeight": {
@@ -1229,10 +1619,7 @@
1229
1619
  "radius": {
1230
1620
  "full": {
1231
1621
  "$type": "dimension",
1232
- "$value": {
1233
- "value": 9999,
1234
- "unit": "px"
1235
- }
1622
+ "$value": "{hpe-web.static.radius.full}"
1236
1623
  },
1237
1624
  "hair": {
1238
1625
  "$type": "dimension",
@@ -1392,4 +1779,4 @@
1392
1779
  }
1393
1780
  }
1394
1781
  }
1395
- }
1782
+ }