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