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