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