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