@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
@@ -1,134 +0,0 @@
1
- {
2
- "hpe-web": {
3
- "display": {
4
- "bold": {
5
- "_2xlarge": {
6
- "font-weight": {
7
- "$value": 700
8
- }
9
- },
10
- "large": {
11
- "font-weight": {
12
- "$value": 700
13
- }
14
- },
15
- "xlarge": {
16
- "font-weight": {
17
- "$value": 700
18
- }
19
- }
20
- },
21
- "light": {
22
- "_2xlarge": {
23
- "font-weight": {
24
- "$value": 300
25
- }
26
- },
27
- "large": {
28
- "font-weight": {
29
- "$value": 300
30
- }
31
- },
32
- "xlarge": {
33
- "font-weight": {
34
- "$value": 300
35
- }
36
- }
37
- },
38
- "regular": {
39
- "_2xlarge": {
40
- "font-weight": {
41
- "$value": 400
42
- }
43
- },
44
- "large": {
45
- "font-weight": {
46
- "$value": 500
47
- }
48
- },
49
- "xlarge": {
50
- "font-weight": {
51
- "$value": 500
52
- }
53
- }
54
- }
55
- },
56
- "heading": {
57
- "_3xsmall": {
58
- "font-weight": {
59
- "$value": 500
60
- }
61
- },
62
- "large": {
63
- "font-weight": {
64
- "$value": 500
65
- }
66
- },
67
- "medium": {
68
- "font-weight": {
69
- "$value": 500
70
- }
71
- },
72
- "small": {
73
- "font-weight": {
74
- "$value": 500
75
- }
76
- },
77
- "xlarge": {
78
- "font-weight": {
79
- "$value": 500
80
- }
81
- },
82
- "xsmall": {
83
- "font-weight": {
84
- "$value": 500
85
- }
86
- },
87
- "xxsmall": {
88
- "font-weight": {
89
- "$value": 500
90
- }
91
- }
92
- },
93
- "quote": {
94
- "large": {
95
- "font-weight": {
96
- "$value": 400
97
- }
98
- },
99
- "medium": {
100
- "font-weight": {
101
- "$value": 400
102
- }
103
- },
104
- "small": {
105
- "font-weight": {
106
- "$value": 400
107
- }
108
- }
109
- },
110
- "text": {
111
- "large": {
112
- "font-weight": {
113
- "$value": 400
114
- }
115
- },
116
- "medium": {
117
- "font-weight": {
118
- "$value": 400
119
- }
120
- },
121
- "small": {
122
- "font-weight": {
123
- "$value": 400
124
- }
125
- },
126
- "xsmall": {
127
- "font-weight": {
128
- "$value": 400
129
- }
130
- }
131
- }
132
- },
133
- "$type": "fontWeight"
134
- }
@@ -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.6,
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.6,
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.6,
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": -1.68,
96
- "unit": "px"
97
- }
98
- }
99
- },
100
- "medium": {
101
- "letter-spacing": {
102
- "$value": {
103
- "value": -0.8,
104
- "unit": "px"
105
- }
106
- }
107
- },
108
- "small": {
109
- "letter-spacing": {
110
- "$value": {
111
- "value": -0.32,
112
- "unit": "px"
113
- }
114
- }
115
- },
116
- "xlarge": {
117
- "letter-spacing": {
118
- "$value": {
119
- "value": -2.73,
120
- "unit": "px"
121
- }
122
- }
123
- },
124
- "xsmall": {
125
- "letter-spacing": {
126
- "$value": {
127
- "value": 0,
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": -1.92,
146
- "unit": "px"
147
- }
148
- }
149
- },
150
- "medium": {
151
- "letter-spacing": {
152
- "$value": {
153
- "value": -1.2,
154
- "unit": "px"
155
- }
156
- }
157
- },
158
- "small": {
159
- "letter-spacing": {
160
- "$value": {
161
- "value": -0.64,
162
- "unit": "px"
163
- }
164
- }
165
- }
166
- },
167
- "text": {
168
- "large": {
169
- "letter-spacing": {
170
- "$value": {
171
- "value": -0.24,
172
- "unit": "px"
173
- }
174
- }
175
- },
176
- "medium": {
177
- "letter-spacing": {
178
- "$value": {
179
- "value": 0,
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
- }
@@ -1,285 +0,0 @@
1
- {
2
- "hpe-web": {
3
- "display": {
4
- "bold": {
5
- "_2xlarge": {
6
- "line-height": {
7
- "$value": {
8
- "value": 144,
9
- "unit": "px"
10
- }
11
- }
12
- },
13
- "large": {
14
- "line-height": {
15
- "$value": {
16
- "value": 80,
17
- "unit": "px"
18
- }
19
- }
20
- },
21
- "xlarge": {
22
- "line-height": {
23
- "$value": {
24
- "value": 96,
25
- "unit": "px"
26
- }
27
- }
28
- }
29
- },
30
- "light": {
31
- "_2xlarge": {
32
- "line-height": {
33
- "$value": {
34
- "value": 144,
35
- "unit": "px"
36
- }
37
- }
38
- },
39
- "large": {
40
- "line-height": {
41
- "$value": {
42
- "value": 80,
43
- "unit": "px"
44
- }
45
- }
46
- },
47
- "xlarge": {
48
- "line-height": {
49
- "$value": {
50
- "value": 96,
51
- "unit": "px"
52
- }
53
- }
54
- }
55
- },
56
- "regular": {
57
- "_2xlarge": {
58
- "line-height": {
59
- "$value": {
60
- "value": 144,
61
- "unit": "px"
62
- }
63
- }
64
- },
65
- "large": {
66
- "line-height": {
67
- "$value": {
68
- "value": 80,
69
- "unit": "px"
70
- }
71
- }
72
- },
73
- "xlarge": {
74
- "line-height": {
75
- "$value": {
76
- "value": 96,
77
- "unit": "px"
78
- }
79
- }
80
- }
81
- }
82
- },
83
- "heading": {
84
- "_3xsmall": {
85
- "line-height": {
86
- "$value": {
87
- "value": 22,
88
- "unit": "px"
89
- }
90
- }
91
- },
92
- "large": {
93
- "line-height": {
94
- "$value": {
95
- "value": 62,
96
- "unit": "px"
97
- }
98
- }
99
- },
100
- "medium": {
101
- "line-height": {
102
- "$value": {
103
- "value": 46,
104
- "unit": "px"
105
- }
106
- }
107
- },
108
- "small": {
109
- "line-height": {
110
- "$value": {
111
- "value": 38,
112
- "unit": "px"
113
- }
114
- }
115
- },
116
- "xlarge": {
117
- "line-height": {
118
- "$value": {
119
- "value": 74,
120
- "unit": "px"
121
- }
122
- }
123
- },
124
- "xsmall": {
125
- "line-height": {
126
- "$value": {
127
- "value": 30,
128
- "unit": "px"
129
- }
130
- }
131
- },
132
- "xxsmall": {
133
- "line-height": {
134
- "$value": {
135
- "value": 24,
136
- "unit": "px"
137
- }
138
- }
139
- }
140
- },
141
- "multi-mode": {
142
- "button": {
143
- "anchor": {
144
- "large": {
145
- "line-height": {
146
- "$value": {
147
- "value": 28,
148
- "unit": "px"
149
- }
150
- }
151
- },
152
- "medium": {
153
- "line-height": {
154
- "$value": {
155
- "value": 24,
156
- "unit": "px"
157
- }
158
- }
159
- },
160
- "small": {
161
- "line-height": {
162
- "$value": {
163
- "value": 24,
164
- "unit": "px"
165
- }
166
- }
167
- }
168
- },
169
- "primary": {
170
- "large": {
171
- "line-height": {
172
- "$value": {
173
- "value": 28,
174
- "unit": "px"
175
- }
176
- }
177
- },
178
- "medium": {
179
- "line-height": {
180
- "$value": {
181
- "value": 24,
182
- "unit": "px"
183
- }
184
- }
185
- },
186
- "small": {
187
- "line-height": {
188
- "$value": {
189
- "value": 24,
190
- "unit": "px"
191
- }
192
- }
193
- }
194
- },
195
- "secondary": {
196
- "large": {
197
- "line-height": {
198
- "$value": {
199
- "value": 28,
200
- "unit": "px"
201
- }
202
- }
203
- },
204
- "medium": {
205
- "line-height": {
206
- "$value": {
207
- "value": 24,
208
- "unit": "px"
209
- }
210
- }
211
- },
212
- "small": {
213
- "line-height": {
214
- "$value": {
215
- "value": 24,
216
- "unit": "px"
217
- }
218
- }
219
- }
220
- }
221
- }
222
- },
223
- "quote": {
224
- "large": {
225
- "line-height": {
226
- "$value": {
227
- "value": 58,
228
- "unit": "px"
229
- }
230
- }
231
- },
232
- "medium": {
233
- "line-height": {
234
- "$value": {
235
- "value": 50,
236
- "unit": "px"
237
- }
238
- }
239
- },
240
- "small": {
241
- "line-height": {
242
- "$value": {
243
- "value": 42,
244
- "unit": "px"
245
- }
246
- }
247
- }
248
- },
249
- "text": {
250
- "large": {
251
- "line-height": {
252
- "$value": {
253
- "value": 34,
254
- "unit": "px"
255
- }
256
- }
257
- },
258
- "medium": {
259
- "line-height": {
260
- "$value": {
261
- "value": 26,
262
- "unit": "px"
263
- }
264
- }
265
- },
266
- "small": {
267
- "line-height": {
268
- "$value": {
269
- "value": 24,
270
- "unit": "px"
271
- }
272
- }
273
- },
274
- "xsmall": {
275
- "line-height": {
276
- "$value": {
277
- "value": 20,
278
- "unit": "px"
279
- }
280
- }
281
- }
282
- }
283
- },
284
- "$type": "dimension"
285
- }