@hpe-web/design-tokens 1.0.0 → 1.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 (77) hide show
  1. package/README.md +22 -13
  2. package/dist/css/fonts/de.css +0 -164
  3. package/dist/css/fonts/en.css +0 -164
  4. package/dist/css/fonts/es.css +0 -164
  5. package/dist/css/fonts/fr.css +0 -164
  6. package/dist/css/fonts/it.css +0 -164
  7. package/dist/css/fonts/zh.css +1 -1
  8. package/dist/css/tokens.css +343 -264
  9. package/dist/css/tokens.dark.css +46 -63
  10. package/dist/css/tokens.md-lg.css +113 -103
  11. package/dist/css/tokens.xl.css +109 -86
  12. package/package.json +4 -8
  13. package/src/breakpoints.json +14 -0
  14. package/src/component/button.json +1382 -0
  15. package/{static → src}/fonts.json +17 -17
  16. package/src/hpe.resolver.json +94 -0
  17. package/{static → src}/locales.json +6 -6
  18. package/{dtcg/foundation/color.tokens.json → src/primitive/primitives.json} +874 -1172
  19. package/src/semantic/color.dark.json +414 -0
  20. package/src/semantic/color.light.json +415 -0
  21. package/src/semantic/dimension.md-lg.json +764 -0
  22. package/src/semantic/dimension.xl.json +764 -0
  23. package/src/semantic/dimension.xs-sm.json +764 -0
  24. package/transforms.mjs +7 -7
  25. package/dist/css/locales/de.tokens.css +0 -65
  26. package/dist/css/locales/es.tokens.css +0 -65
  27. package/dist/css/locales/fr.tokens.css +0 -65
  28. package/dist/css/locales/it.tokens.css +0 -65
  29. package/dist/css/locales/ja.tokens.css +0 -84
  30. package/dist/css/locales/ko.tokens.css +0 -84
  31. package/dist/css/locales/zh.tokens.css +0 -11
  32. package/dtcg/foundation/border-radius.tokens.json +0 -239
  33. package/dtcg/foundation/border-width.tokens.json +0 -103
  34. package/dtcg/foundation/breakpoint.tokens.json +0 -27
  35. package/dtcg/foundation/dimension.tokens.json +0 -258
  36. package/dtcg/foundation/font-family.tokens.json +0 -53
  37. package/dtcg/foundation/font-size.tokens.json +0 -408
  38. package/dtcg/foundation/font-weight.tokens.json +0 -214
  39. package/dtcg/foundation/letter-spacing.tokens.json +0 -203
  40. package/dtcg/foundation/line-height.tokens.json +0 -408
  41. package/dtcg/foundation/size.tokens.json +0 -191
  42. package/dtcg/foundation/space.tokens.json +0 -431
  43. package/dtcg/foundation/typography.tokens.json +0 -625
  44. package/dtcg/hpe.resolver.json +0 -178
  45. package/dtcg/semantic/border-radius.tokens.json +0 -149
  46. package/dtcg/semantic/border-width.tokens.json +0 -50
  47. package/dtcg/semantic/font-family.tokens.json +0 -42
  48. package/dtcg/semantic/font-size.tokens.json +0 -285
  49. package/dtcg/semantic/font-weight.tokens.json +0 -134
  50. package/dtcg/semantic/letter-spacing.tokens.json +0 -203
  51. package/dtcg/semantic/line-height.tokens.json +0 -285
  52. package/dtcg/semantic/size.tokens.json +0 -120
  53. package/dtcg/semantic/space.tokens.json +0 -275
  54. package/dtcg/semantic/typography.tokens.json +0 -536
  55. package/dtcg/theme/dark/color.tokens.json +0 -698
  56. package/dtcg/theme/light/color.tokens.json +0 -722
  57. package/dtcg/viewport/md-lg/font-size.tokens.json +0 -189
  58. package/dtcg/viewport/md-lg/font-weight.tokens.json +0 -11
  59. package/dtcg/viewport/md-lg/letter-spacing.tokens.json +0 -88
  60. package/dtcg/viewport/md-lg/line-height.tokens.json +0 -125
  61. package/dtcg/viewport/md-lg/size.tokens.json +0 -20
  62. package/dtcg/viewport/md-lg/space.tokens.json +0 -36
  63. package/dtcg/viewport/sm-xs/border-radius.tokens.json +0 -48
  64. package/dtcg/viewport/sm-xs/border-width.tokens.json +0 -15
  65. package/dtcg/viewport/sm-xs/font-size.tokens.json +0 -236
  66. package/dtcg/viewport/sm-xs/font-weight.tokens.json +0 -18
  67. package/dtcg/viewport/sm-xs/letter-spacing.tokens.json +0 -130
  68. package/dtcg/viewport/sm-xs/line-height.tokens.json +0 -236
  69. package/dtcg/viewport/sm-xs/size.tokens.json +0 -39
  70. package/dtcg/viewport/sm-xs/space.tokens.json +0 -46
  71. package/dtcg/viewport/xl/border-radius.tokens.json +0 -48
  72. package/dtcg/viewport/xl/font-size.tokens.json +0 -236
  73. package/dtcg/viewport/xl/letter-spacing.tokens.json +0 -122
  74. package/dtcg/viewport/xl/line-height.tokens.json +0 -178
  75. package/dtcg/viewport/xl/size.tokens.json +0 -84
  76. package/dtcg/viewport/xl/space.tokens.json +0 -68
  77. package/static/breakpoints.json +0 -23
package/dtcg/foundation/letter-spacing.tokens.json DELETED
@@ -1,203 +0,0 @@
1
- {
2
- "hpe-web": {
3
- "display": {
4
- "bold": {
5
- "_2xlarge": {
6
- "letter-spacing": {
7
- "$value": {
8
- "value": 2,
9
- "unit": "px"
10
- }
11
- }
12
- },
13
- "large": {
14
- "letter-spacing": {
15
- "$value": {
16
- "value": 1.92,
17
- "unit": "px"
18
- }
19
- }
20
- },
21
- "xlarge": {
22
- "letter-spacing": {
23
- "$value": {
24
- "value": 2,
25
- "unit": "px"
26
- }
27
- }
28
- }
29
- },
30
- "light": {
31
- "_2xlarge": {
32
- "letter-spacing": {
33
- "$value": {
34
- "value": 2,
35
- "unit": "px"
36
- }
37
- }
38
- },
39
- "large": {
40
- "letter-spacing": {
41
- "$value": {
42
- "value": 1.92,
43
- "unit": "px"
44
- }
45
- }
46
- },
47
- "xlarge": {
48
- "letter-spacing": {
49
- "$value": {
50
- "value": 2,
51
- "unit": "px"
52
- }
53
- }
54
- }
55
- },
56
- "regular": {
57
- "_2xlarge": {
58
- "letter-spacing": {
59
- "$value": {
60
- "value": 2,
61
- "unit": "px"
62
- }
63
- }
64
- },
65
- "large": {
66
- "letter-spacing": {
67
- "$value": {
68
- "value": 1.92,
69
- "unit": "px"
70
- }
71
- }
72
- },
73
- "xlarge": {
74
- "letter-spacing": {
75
- "$value": {
76
- "value": 2,
77
- "unit": "px"
78
- }
79
- }
80
- }
81
- }
82
- },
83
- "heading": {
84
- "_3xsmall": {
85
- "letter-spacing": {
86
- "$value": {
87
- "value": 0,
88
- "unit": "px"
89
- }
90
- }
91
- },
92
- "large": {
93
- "letter-spacing": {
94
- "$value": {
95
- "value": -2.72,
96
- "unit": "px"
97
- }
98
- }
99
- },
100
- "medium": {
101
- "letter-spacing": {
102
- "$value": {
103
- "value": -1.04,
104
- "unit": "px"
105
- }
106
- }
107
- },
108
- "small": {
109
- "letter-spacing": {
110
- "$value": {
111
- "value": -0.36,
112
- "unit": "px"
113
- }
114
- }
115
- },
116
- "xlarge": {
117
- "letter-spacing": {
118
- "$value": {
119
- "value": -3.36,
120
- "unit": "px"
121
- }
122
- }
123
- },
124
- "xsmall": {
125
- "letter-spacing": {
126
- "$value": {
127
- "value": -0.28,
128
- "unit": "px"
129
- }
130
- }
131
- },
132
- "xxsmall": {
133
- "letter-spacing": {
134
- "$value": {
135
- "value": 0,
136
- "unit": "px"
137
- }
138
- }
139
- }
140
- },
141
- "quote": {
142
- "large": {
143
- "letter-spacing": {
144
- "$value": {
145
- "value": -2.08,
146
- "unit": "px"
147
- }
148
- }
149
- },
150
- "medium": {
151
- "letter-spacing": {
152
- "$value": {
153
- "value": -1.32,
154
- "unit": "px"
155
- }
156
- }
157
- },
158
- "small": {
159
- "letter-spacing": {
160
- "$value": {
161
- "value": -0.72,
162
- "unit": "px"
163
- }
164
- }
165
- }
166
- },
167
- "text": {
168
- "large": {
169
- "letter-spacing": {
170
- "$value": {
171
- "value": -0.28,
172
- "unit": "px"
173
- }
174
- }
175
- },
176
- "medium": {
177
- "letter-spacing": {
178
- "$value": {
179
- "value": -0.2,
180
- "unit": "px"
181
- }
182
- }
183
- },
184
- "small": {
185
- "letter-spacing": {
186
- "$value": {
187
- "value": 0,
188
- "unit": "px"
189
- }
190
- }
191
- },
192
- "xsmall": {
193
- "letter-spacing": {
194
- "$value": {
195
- "value": 0,
196
- "unit": "px"
197
- }
198
- }
199
- }
200
- }
201
- },
202
- "$type": "dimension"
203
- }
package/dtcg/foundation/line-height.tokens.json DELETED
@@ -1,408 +0,0 @@
1
- {
2
- "hpe-web": {
3
- "base": {
4
- "line-height": {
5
- "80": {
6
- "$value": {
7
- "value": 12,
8
- "unit": "px"
9
- }
10
- },
11
- "90": {
12
- "$value": {
13
- "value": 16,
14
- "unit": "px"
15
- }
16
- },
17
- "100": {
18
- "$value": {
19
- "value": 20,
20
- "unit": "px"
21
- }
22
- },
23
- "200": {
24
- "$value": {
25
- "value": 24,
26
- "unit": "px"
27
- }
28
- },
29
- "300": {
30
- "$value": {
31
- "value": 28,
32
- "unit": "px"
33
- }
34
- },
35
- "400": {
36
- "$value": {
37
- "value": 30,
38
- "unit": "px"
39
- }
40
- },
41
- "500": {
42
- "$value": {
43
- "value": 36,
44
- "unit": "px"
45
- }
46
- },
47
- "600": {
48
- "$value": {
49
- "value": 40,
50
- "unit": "px"
51
- }
52
- },
53
- "700": {
54
- "$value": {
55
- "value": 46,
56
- "unit": "px"
57
- }
58
- },
59
- "800": {
60
- "$value": {
61
- "value": 48,
62
- "unit": "px"
63
- }
64
- },
65
- "900": {
66
- "$value": {
67
- "value": 72,
68
- "unit": "px"
69
- }
70
- }
71
- }
72
- },
73
- "button": {
74
- "anchor": {
75
- "large": {
76
- "line-height": {
77
- "$value": "{hpe-web.multi-mode.button.anchor.large.line-height}"
78
- }
79
- },
80
- "medium": {
81
- "line-height": {
82
- "$value": "{hpe-web.multi-mode.button.anchor.medium.line-height}"
83
- }
84
- },
85
- "small": {
86
- "line-height": {
87
- "$value": "{hpe-web.multi-mode.button.anchor.small.line-height}"
88
- }
89
- }
90
- },
91
- "primary": {
92
- "large": {
93
- "line-height": {
94
- "$value": "{hpe-web.multi-mode.button.primary.large.line-height}"
95
- }
96
- },
97
- "medium": {
98
- "line-height": {
99
- "$value": "{hpe-web.multi-mode.button.primary.medium.line-height}"
100
- }
101
- },
102
- "small": {
103
- "line-height": {
104
- "$value": "{hpe-web.multi-mode.button.primary.small.line-height}"
105
- }
106
- }
107
- },
108
- "secondary": {
109
- "large": {
110
- "line-height": {
111
- "$value": "{hpe-web.multi-mode.button.secondary.large.line-height}"
112
- }
113
- },
114
- "medium": {
115
- "line-height": {
116
- "$value": "{hpe-web.multi-mode.button.secondary.medium.line-height}"
117
- }
118
- },
119
- "small": {
120
- "line-height": {
121
- "$value": "{hpe-web.multi-mode.button.secondary.small.line-height}"
122
- }
123
- }
124
- }
125
- },
126
- "display": {
127
- "bold": {
128
- "_2xlarge": {
129
- "line-height": {
130
- "$value": {
131
- "value": 168,
132
- "unit": "px"
133
- }
134
- }
135
- },
136
- "large": {
137
- "line-height": {
138
- "$value": {
139
- "value": 96,
140
- "unit": "px"
141
- }
142
- }
143
- },
144
- "xlarge": {
145
- "line-height": {
146
- "$value": {
147
- "value": 112,
148
- "unit": "px"
149
- }
150
- }
151
- }
152
- },
153
- "light": {
154
- "_2xlarge": {
155
- "line-height": {
156
- "$value": {
157
- "value": 168,
158
- "unit": "px"
159
- }
160
- }
161
- },
162
- "large": {
163
- "line-height": {
164
- "$value": {
165
- "value": 96,
166
- "unit": "px"
167
- }
168
- }
169
- },
170
- "xlarge": {
171
- "line-height": {
172
- "$value": {
173
- "value": 112,
174
- "unit": "px"
175
- }
176
- }
177
- }
178
- },
179
- "regular": {
180
- "_2xlarge": {
181
- "line-height": {
182
- "$value": {
183
- "value": 168,
184
- "unit": "px"
185
- }
186
- }
187
- },
188
- "large": {
189
- "line-height": {
190
- "$value": {
191
- "value": 96,
192
- "unit": "px"
193
- }
194
- }
195
- },
196
- "xlarge": {
197
- "line-height": {
198
- "$value": {
199
- "value": 112,
200
- "unit": "px"
201
- }
202
- }
203
- }
204
- }
205
- },
206
- "heading": {
207
- "_3xsmall": {
208
- "line-height": {
209
- "$value": {
210
- "value": 22,
211
- "unit": "px"
212
- }
213
- }
214
- },
215
- "large": {
216
- "line-height": {
217
- "$value": {
218
- "value": 74,
219
- "unit": "px"
220
- }
221
- }
222
- },
223
- "medium": {
224
- "line-height": {
225
- "$value": {
226
- "value": 58,
227
- "unit": "px"
228
- }
229
- }
230
- },
231
- "small": {
232
- "line-height": {
233
- "$value": {
234
- "value": 42,
235
- "unit": "px"
236
- }
237
- }
238
- },
239
- "xlarge": {
240
- "line-height": {
241
- "$value": {
242
- "value": 90,
243
- "unit": "px"
244
- }
245
- }
246
- },
247
- "xsmall": {
248
- "line-height": {
249
- "$value": {
250
- "value": 34,
251
- "unit": "px"
252
- }
253
- }
254
- },
255
- "xxsmall": {
256
- "line-height": {
257
- "$value": {
258
- "value": 26,
259
- "unit": "px"
260
- }
261
- }
262
- }
263
- },
264
- "multi-mode": {
265
- "button": {
266
- "anchor": {
267
- "large": {
268
- "line-height": {
269
- "$value": {
270
- "value": 28,
271
- "unit": "px"
272
- }
273
- }
274
- },
275
- "medium": {
276
- "line-height": {
277
- "$value": {
278
- "value": 24,
279
- "unit": "px"
280
- }
281
- }
282
- },
283
- "small": {
284
- "line-height": {
285
- "$value": {
286
- "value": 24,
287
- "unit": "px"
288
- }
289
- }
290
- }
291
- },
292
- "primary": {
293
- "large": {
294
- "line-height": {
295
- "$value": {
296
- "value": 28,
297
- "unit": "px"
298
- }
299
- }
300
- },
301
- "medium": {
302
- "line-height": {
303
- "$value": {
304
- "value": 24,
305
- "unit": "px"
306
- }
307
- }
308
- },
309
- "small": {
310
- "line-height": {
311
- "$value": {
312
- "value": 24,
313
- "unit": "px"
314
- }
315
- }
316
- }
317
- },
318
- "secondary": {
319
- "large": {
320
- "line-height": {
321
- "$value": {
322
- "value": 28,
323
- "unit": "px"
324
- }
325
- }
326
- },
327
- "medium": {
328
- "line-height": {
329
- "$value": {
330
- "value": 24,
331
- "unit": "px"
332
- }
333
- }
334
- },
335
- "small": {
336
- "line-height": {
337
- "$value": {
338
- "value": 24,
339
- "unit": "px"
340
- }
341
- }
342
- }
343
- }
344
- }
345
- },
346
- "quote": {
347
- "large": {
348
- "line-height": {
349
- "$value": {
350
- "value": 62,
351
- "unit": "px"
352
- }
353
- }
354
- },
355
- "medium": {
356
- "line-height": {
357
- "$value": {
358
- "value": 54,
359
- "unit": "px"
360
- }
361
- }
362
- },
363
- "small": {
364
- "line-height": {
365
- "$value": {
366
- "value": 46,
367
- "unit": "px"
368
- }
369
- }
370
- }
371
- },
372
- "text": {
373
- "large": {
374
- "line-height": {
375
- "$value": {
376
- "value": 38,
377
- "unit": "px"
378
- }
379
- }
380
- },
381
- "medium": {
382
- "line-height": {
383
- "$value": {
384
- "value": 30,
385
- "unit": "px"
386
- }
387
- }
388
- },
389
- "small": {
390
- "line-height": {
391
- "$value": {
392
- "value": 24,
393
- "unit": "px"
394
- }
395
- }
396
- },
397
- "xsmall": {
398
- "line-height": {
399
- "$value": {
400
- "value": 20,
401
- "unit": "px"
402
- }
403
- }
404
- }
405
- }
406
- },
407
- "$type": "dimension"
408
- }