@hpe-web/design-tokens 0.1.0 → 1.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 (84) hide show
  1. package/README.md +138 -0
  2. package/dist/css/fonts/de.css +319 -0
  3. package/dist/css/fonts/en.css +319 -0
  4. package/dist/css/fonts/es.css +319 -0
  5. package/dist/css/fonts/fr.css +319 -0
  6. package/dist/css/fonts/it.css +319 -0
  7. package/dist/css/fonts/ja.css +83 -0
  8. package/dist/css/fonts/ko.css +83 -0
  9. package/dist/css/fonts/zh.css +83 -0
  10. package/dist/css/locales/de.tokens.css +74 -0
  11. package/dist/css/locales/es.tokens.css +74 -0
  12. package/dist/css/locales/fr.tokens.css +74 -0
  13. package/dist/css/locales/it.tokens.css +74 -0
  14. package/dist/css/locales/ja.tokens.css +92 -0
  15. package/dist/css/locales/ko.tokens.css +92 -0
  16. package/dist/css/locales/zh.tokens.css +10 -0
  17. package/dist/css/tokens.css +216 -208
  18. package/dist/css/tokens.dark.css +15 -12
  19. package/dist/css/tokens.md-lg.css +113 -0
  20. package/dist/css/tokens.xl.css +76 -89
  21. package/dtcg/foundation/border-radius.tokens.json +5 -5
  22. package/dtcg/foundation/border-width.tokens.json +5 -5
  23. package/dtcg/foundation/breakpoint.tokens.json +27 -0
  24. package/dtcg/foundation/color.tokens.json +66 -51
  25. package/dtcg/foundation/dimension.tokens.json +20 -0
  26. package/dtcg/foundation/font-family.tokens.json +28 -6
  27. package/dtcg/foundation/font-size.tokens.json +125 -113
  28. package/dtcg/foundation/font-weight.tokens.json +86 -74
  29. package/dtcg/foundation/letter-spacing.tokens.json +108 -96
  30. package/dtcg/foundation/line-height.tokens.json +125 -113
  31. package/dtcg/foundation/size.tokens.json +54 -5
  32. package/dtcg/foundation/space.tokens.json +11 -11
  33. package/dtcg/hpe.resolver.json +18 -3
  34. package/dtcg/semantic/border-radius.tokens.json +8 -8
  35. package/dtcg/semantic/border-width.tokens.json +1 -1
  36. package/dtcg/semantic/dimension.tokens.json +25 -0
  37. package/dtcg/semantic/font-family.tokens.json +5 -7
  38. package/dtcg/semantic/font-size.tokens.json +97 -111
  39. package/dtcg/semantic/font-weight.tokens.json +66 -71
  40. package/dtcg/semantic/letter-spacing.tokens.json +85 -99
  41. package/dtcg/semantic/line-height.tokens.json +97 -111
  42. package/dtcg/semantic/size.tokens.json +33 -1
  43. package/dtcg/semantic/space.tokens.json +1 -1
  44. package/dtcg/theme/dark/color.tokens.json +28 -19
  45. package/dtcg/theme/light/color.tokens.json +28 -19
  46. package/dtcg/viewport/md-lg/font-size.tokens.json +189 -0
  47. package/dtcg/viewport/md-lg/font-weight.tokens.json +11 -0
  48. package/dtcg/viewport/md-lg/letter-spacing.tokens.json +88 -0
  49. package/dtcg/viewport/md-lg/line-height.tokens.json +125 -0
  50. package/dtcg/viewport/md-lg/size.tokens.json +20 -0
  51. package/dtcg/viewport/md-lg/space.tokens.json +36 -0
  52. package/dtcg/viewport/sm-xs/border-width.tokens.json +1 -1
  53. package/dtcg/viewport/sm-xs/font-size.tokens.json +97 -111
  54. package/dtcg/viewport/sm-xs/font-weight.tokens.json +7 -10
  55. package/dtcg/viewport/sm-xs/letter-spacing.tokens.json +56 -60
  56. package/dtcg/viewport/sm-xs/line-height.tokens.json +97 -111
  57. package/dtcg/viewport/sm-xs/size.tokens.json +33 -11
  58. package/dtcg/viewport/sm-xs/space.tokens.json +1 -1
  59. package/dtcg/viewport/xl/font-size.tokens.json +86 -102
  60. package/dtcg/viewport/xl/letter-spacing.tokens.json +56 -52
  61. package/dtcg/viewport/xl/line-height.tokens.json +75 -91
  62. package/dtcg/viewport/xl/size.tokens.json +1 -1
  63. package/package.json +18 -17
  64. package/static/breakpoints.json +23 -0
  65. package/static/fonts.json +82 -0
  66. package/static/locales.json +58 -0
  67. package/transforms.mjs +175 -0
  68. package/dist/css/fonts.css +0 -132
  69. package/dist/css/tokens.sm-xs.css +0 -93
  70. package/dist/js/tokens.d.ts +0 -307
  71. package/dist/js/tokens.dark.d.ts +0 -98
  72. package/dist/js/tokens.dark.mjs +0 -98
  73. package/dist/js/tokens.mjs +0 -307
  74. package/dist/json/tokens.dark.json +0 -92
  75. package/dist/json/tokens.json +0 -301
  76. package/dist/json/tokens.sm-xs.json +0 -87
  77. package/dist/json/tokens.xl.json +0 -94
  78. package/dist/scss/_tokens.dark.scss +0 -93
  79. package/dist/scss/_tokens.scss +0 -302
  80. package/dist/scss/_tokens.sm-xs.scss +0 -88
  81. package/dist/scss/_tokens.xl.scss +0 -95
  82. package/dtcg/.gitkeep +0 -0
  83. package/dtcg/viewport/sm-xs/border-radius.tokens.json +0 -48
  84. package/dtcg/viewport/xl/border-radius.tokens.json +0 -48
package/README.md ADDED
@@ -0,0 +1,138 @@
1
+ # @hpe-web/design-tokens
2
+
3
+ HPE Design System design tokens — CSS custom properties, DTCG source, locale overrides, and utilities.
4
+
5
+ ## What's new in v1.1.0
6
+
7
+ - `button.anchor` renamed to `button.link`
8
+ - New `button.carousel` variant (disabled, hover, rest states)
9
+ - New `button.play` variant
10
+ - Added font families: M Hei PRC, Noto Sans CJKJP, YD Gothic, HPE Graphik XXCondensed
11
+ - New `dimension` tokens across all viewports
12
+
13
+ [Full changelog →](https://github.com/HPE-EMU/design-system/blob/main/packages/tokens/CHANGELOG.md)
14
+
15
+ ---
16
+
17
+ ## Install
18
+
19
+ ```bash
20
+ npm install @hpe-web/design-tokens
21
+ ```
22
+
23
+ ## Usage
24
+
25
+ ### CSS (recommended)
26
+
27
+ Load the base file and any overrides your app needs. The cascade handles viewport, theme, and locale simultaneously.
28
+
29
+ ```html
30
+ <!-- Required -->
31
+ <link rel="stylesheet" href="node_modules/@hpe-web/design-tokens/css/tokens.css">
32
+
33
+ <!-- Optional -->
34
+ <link rel="stylesheet" href="node_modules/@hpe-web/design-tokens/css/tokens.dark.css">
35
+ <link rel="stylesheet" href="node_modules/@hpe-web/design-tokens/css/tokens.md-lg.css">
36
+ <link rel="stylesheet" href="node_modules/@hpe-web/design-tokens/css/tokens.xl.css">
37
+
38
+ <!-- Locales (if your app serves multiple languages) -->
39
+ <link rel="stylesheet" href="node_modules/@hpe-web/design-tokens/css/locales/de.tokens.css">
40
+ <link rel="stylesheet" href="node_modules/@hpe-web/design-tokens/css/fonts/de.fonts.css">
41
+ ```
42
+
43
+ | File | Contents | Applied when |
44
+ |------|----------|-------------|
45
+ | `tokens.css` | All tokens — sm-xs base, light theme | Always |
46
+ | `tokens.dark.css` | Dark theme color overrides | `[data-theme="dark"]` |
47
+ | `tokens.md-lg.css` | Typography + border-radius overrides | `@media (min-width: 992px)` |
48
+ | `tokens.xl.css` | Typography + border-radius overrides | `@media (min-width: 1600px)` |
49
+ | `locales/{lang}.tokens.css` | Font-size + font-family overrides | `[lang="xx"]` |
50
+ | `fonts/{lang}.css` | `@font-face` declarations | Always (locale-specific) |
51
+
52
+ Then use tokens in your CSS:
53
+
54
+ ```css
55
+ .card {
56
+ background: var(--hpe-web-color-background-card);
57
+ padding: var(--hpe-web-space-medium);
58
+ border-radius: var(--hpe-web-border-radius-medium);
59
+ font-size: var(--hpe-web-text-medium-font-size);
60
+ }
61
+ ```
62
+
63
+ No breakpoint logic needed in component CSS. Token values shift automatically as viewport, theme, and `lang` attributes change.
64
+
65
+ **Dark mode:**
66
+ ```html
67
+ <body data-theme="dark">…</body>
68
+ ```
69
+
70
+ **Locale switching:**
71
+ ```html
72
+ <html lang="de">…</html>
73
+ ```
74
+
75
+ ### Static metadata
76
+
77
+ All three metadata files live in `static/`:
78
+
79
+ ```js
80
+ import breakpoints from '@hpe-web/design-tokens/static/breakpoints.json' assert { type: 'json' };
81
+ // { values: { xs: '0px', md: '992px', xl: '1600px' },
82
+ // ranges: { 'md-lg': { mediaQuery: '(min-width: 992px)' }, ... } }
83
+
84
+ import locales from '@hpe-web/design-tokens/static/locales.json' assert { type: 'json' };
85
+ // locales.de.coefficient.display === 0.75
86
+ // locales.ja.minFontSize === '14px'
87
+
88
+ import fonts from '@hpe-web/design-tokens/static/fonts.json' assert { type: 'json' };
89
+ ```
90
+
91
+ `breakpoints.json` is generated from DTCG token values at build time. `fonts.json` and `locales.json` are hand-maintained. All three are for tooling and pipeline scripts — the browser gets everything it needs from the CSS files.
92
+
93
+ ### Bring your own Style Dictionary
94
+
95
+ For custom output formats (AEM, native, SCSS), run your own SD pipeline against our DTCG source:
96
+
97
+ ```js
98
+ import StyleDictionary from 'style-dictionary';
99
+ import { lineHeightUnitless, letterSpacingEm } from '@hpe-web/design-tokens/transforms';
100
+
101
+ const sd = new StyleDictionary({
102
+ source: [
103
+ 'node_modules/@hpe-web/design-tokens/dtcg/foundation/**/*.tokens.json',
104
+ 'node_modules/@hpe-web/design-tokens/dtcg/semantic/**/*.tokens.json',
105
+ 'node_modules/@hpe-web/design-tokens/dtcg/theme/light/**/*.tokens.json',
106
+ 'node_modules/@hpe-web/design-tokens/dtcg/viewport/sm-xs/**/*.tokens.json',
107
+ ],
108
+ platforms: { /* your config */ },
109
+ });
110
+
111
+ sd.registerTransform(lineHeightUnitless); // px line-height → unitless ratio
112
+ sd.registerTransform(letterSpacingEm); // px letter-spacing → em
113
+
114
+ await sd.buildAllPlatforms();
115
+ ```
116
+
117
+ See `dtcg/hpe.resolver.json` for the canonical token load order.
118
+
119
+ **Locale metadata** for custom pipelines:
120
+
121
+ ```js
122
+ import locales from '@hpe-web/design-tokens/static/locales.json' assert { type: 'json' };
123
+ // locales.de.coefficient.display === 0.75
124
+ // locales.ja.minFontSize === '14px'
125
+ ```
126
+
127
+ ## Package Contents
128
+
129
+ | Export | What |
130
+ |--------|------|
131
+ | `@hpe-web/design-tokens/css/*` | CSS custom properties (primary format) |
132
+ | `@hpe-web/design-tokens/static/*` | System metadata — `breakpoints.json`, `locales.json`, `fonts.json` |
133
+ | `@hpe-web/design-tokens/dtcg/*` | DTCG 2025.10 source (for custom pipelines) |
134
+ | `@hpe-web/design-tokens/transforms` | SD transforms + `applyLocale` utility |
135
+
136
+ ## License
137
+
138
+ Proprietary — Hewlett Packard Enterprise
package/dist/css/fonts/de.css ADDED
@@ -0,0 +1,319 @@
1
+ /**
2
+
3
+ * Do not edit directly, this file was auto-generated.
4
+
5
+ * German — font declarations for [lang="de"]
6
+
7
+ */
8
+
9
+
10
+
11
+ /* ——— HPE Graphik ——— */
12
+
13
+ @font-face {
14
+ font-family: 'HPE Graphik';
15
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphik-Thin-Web.woff2') format('woff2');
16
+ font-weight: 100;
17
+ font-style: normal;
18
+ font-display: swap;
19
+ }
20
+
21
+ @font-face {
22
+ font-family: 'HPE Graphik';
23
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphik-ThinItalic-Web.woff2') format('woff2');
24
+ font-weight: 100;
25
+ font-style: italic;
26
+ font-display: swap;
27
+ }
28
+
29
+ @font-face {
30
+ font-family: 'HPE Graphik';
31
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphik-Extralight-Web.woff2') format('woff2');
32
+ font-weight: 200;
33
+ font-style: normal;
34
+ font-display: swap;
35
+ }
36
+
37
+ @font-face {
38
+ font-family: 'HPE Graphik';
39
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphik-ExtralightItalic-Web.woff2') format('woff2');
40
+ font-weight: 200;
41
+ font-style: italic;
42
+ font-display: swap;
43
+ }
44
+
45
+ @font-face {
46
+ font-family: 'HPE Graphik';
47
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphik-Light-Web.woff2') format('woff2');
48
+ font-weight: 300;
49
+ font-style: normal;
50
+ font-display: swap;
51
+ }
52
+
53
+ @font-face {
54
+ font-family: 'HPE Graphik';
55
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphik-LightItalic-Web.woff2') format('woff2');
56
+ font-weight: 300;
57
+ font-style: italic;
58
+ font-display: swap;
59
+ }
60
+
61
+ @font-face {
62
+ font-family: 'HPE Graphik';
63
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphik-Regular-Web.woff2') format('woff2');
64
+ font-weight: 400;
65
+ font-style: normal;
66
+ font-display: swap;
67
+ }
68
+
69
+ @font-face {
70
+ font-family: 'HPE Graphik';
71
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphik-RegularItalic-Web.woff2') format('woff2');
72
+ font-weight: 400;
73
+ font-style: italic;
74
+ font-display: swap;
75
+ }
76
+
77
+ @font-face {
78
+ font-family: 'HPE Graphik';
79
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphik-Medium-Web.woff2') format('woff2');
80
+ font-weight: 500;
81
+ font-style: normal;
82
+ font-display: swap;
83
+ }
84
+
85
+ @font-face {
86
+ font-family: 'HPE Graphik';
87
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphik-MediumItalic-Web.woff2') format('woff2');
88
+ font-weight: 500;
89
+ font-style: italic;
90
+ font-display: swap;
91
+ }
92
+
93
+ @font-face {
94
+ font-family: 'HPE Graphik';
95
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphik-Semibold-Web.woff2') format('woff2');
96
+ font-weight: 600;
97
+ font-style: normal;
98
+ font-display: swap;
99
+ }
100
+
101
+ @font-face {
102
+ font-family: 'HPE Graphik';
103
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphik-SemiboldItalic-Web.woff2') format('woff2');
104
+ font-weight: 600;
105
+ font-style: italic;
106
+ font-display: swap;
107
+ }
108
+
109
+ @font-face {
110
+ font-family: 'HPE Graphik';
111
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphik-Bold-Web.woff2') format('woff2');
112
+ font-weight: 700;
113
+ font-style: normal;
114
+ font-display: swap;
115
+ }
116
+
117
+ @font-face {
118
+ font-family: 'HPE Graphik';
119
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphik-BoldItalic-Web.woff2') format('woff2');
120
+ font-weight: 700;
121
+ font-style: italic;
122
+ font-display: swap;
123
+ }
124
+
125
+ @font-face {
126
+ font-family: 'HPE Graphik';
127
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphik-Black-Web.woff2') format('woff2');
128
+ font-weight: 800;
129
+ font-style: normal;
130
+ font-display: swap;
131
+ }
132
+
133
+ @font-face {
134
+ font-family: 'HPE Graphik';
135
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphik-BlackItalic-Web.woff2') format('woff2');
136
+ font-weight: 800;
137
+ font-style: italic;
138
+ font-display: swap;
139
+ }
140
+
141
+ @font-face {
142
+ font-family: 'HPE Graphik';
143
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphik-Super-Web.woff2') format('woff2');
144
+ font-weight: 900;
145
+ font-style: normal;
146
+ font-display: swap;
147
+ }
148
+
149
+ @font-face {
150
+ font-family: 'HPE Graphik';
151
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphik-SuperItalic-Web.woff2') format('woff2');
152
+ font-weight: 900;
153
+ font-style: italic;
154
+ font-display: swap;
155
+ }
156
+
157
+ /* ——— HPE Graphik (condensed) ——— */
158
+
159
+ @font-face {
160
+ font-family: 'HPE Graphik';
161
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Thin-Web.woff2') format('woff2');
162
+ font-weight: 100;
163
+ font-style: normal;
164
+ font-stretch: condensed;
165
+ font-display: swap;
166
+ }
167
+
168
+ @font-face {
169
+ font-family: 'HPE Graphik';
170
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-ThinItalic-Web.woff2') format('woff2');
171
+ font-weight: 100;
172
+ font-style: italic;
173
+ font-stretch: condensed;
174
+ font-display: swap;
175
+ }
176
+
177
+ @font-face {
178
+ font-family: 'HPE Graphik';
179
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Extralight-Web.woff2') format('woff2');
180
+ font-weight: 200;
181
+ font-style: normal;
182
+ font-stretch: condensed;
183
+ font-display: swap;
184
+ }
185
+
186
+ @font-face {
187
+ font-family: 'HPE Graphik';
188
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-ExtralightItalic-Web.woff2') format('woff2');
189
+ font-weight: 200;
190
+ font-style: italic;
191
+ font-stretch: condensed;
192
+ font-display: swap;
193
+ }
194
+
195
+ @font-face {
196
+ font-family: 'HPE Graphik';
197
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Light-Web.woff2') format('woff2');
198
+ font-weight: 300;
199
+ font-style: normal;
200
+ font-stretch: condensed;
201
+ font-display: swap;
202
+ }
203
+
204
+ @font-face {
205
+ font-family: 'HPE Graphik';
206
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-LightItalic-Web.woff2') format('woff2');
207
+ font-weight: 300;
208
+ font-style: italic;
209
+ font-stretch: condensed;
210
+ font-display: swap;
211
+ }
212
+
213
+ @font-face {
214
+ font-family: 'HPE Graphik';
215
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Regular-Web.woff2') format('woff2');
216
+ font-weight: 400;
217
+ font-style: normal;
218
+ font-stretch: condensed;
219
+ font-display: swap;
220
+ }
221
+
222
+ @font-face {
223
+ font-family: 'HPE Graphik';
224
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-RegularItalic-Web.woff2') format('woff2');
225
+ font-weight: 400;
226
+ font-style: italic;
227
+ font-stretch: condensed;
228
+ font-display: swap;
229
+ }
230
+
231
+ @font-face {
232
+ font-family: 'HPE Graphik';
233
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Medium-Web.woff2') format('woff2');
234
+ font-weight: 500;
235
+ font-style: normal;
236
+ font-stretch: condensed;
237
+ font-display: swap;
238
+ }
239
+
240
+ @font-face {
241
+ font-family: 'HPE Graphik';
242
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-MediumItalic-Web.woff2') format('woff2');
243
+ font-weight: 500;
244
+ font-style: italic;
245
+ font-stretch: condensed;
246
+ font-display: swap;
247
+ }
248
+
249
+ @font-face {
250
+ font-family: 'HPE Graphik';
251
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Semibold-Web.woff2') format('woff2');
252
+ font-weight: 600;
253
+ font-style: normal;
254
+ font-stretch: condensed;
255
+ font-display: swap;
256
+ }
257
+
258
+ @font-face {
259
+ font-family: 'HPE Graphik';
260
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-SemiboldItalic-Web.woff2') format('woff2');
261
+ font-weight: 600;
262
+ font-style: italic;
263
+ font-stretch: condensed;
264
+ font-display: swap;
265
+ }
266
+
267
+ @font-face {
268
+ font-family: 'HPE Graphik';
269
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Bold-Web.woff2') format('woff2');
270
+ font-weight: 700;
271
+ font-style: normal;
272
+ font-stretch: condensed;
273
+ font-display: swap;
274
+ }
275
+
276
+ @font-face {
277
+ font-family: 'HPE Graphik';
278
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-BoldItalic-Web.woff2') format('woff2');
279
+ font-weight: 700;
280
+ font-style: italic;
281
+ font-stretch: condensed;
282
+ font-display: swap;
283
+ }
284
+
285
+ @font-face {
286
+ font-family: 'HPE Graphik';
287
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Black-Web.woff2') format('woff2');
288
+ font-weight: 800;
289
+ font-style: normal;
290
+ font-stretch: condensed;
291
+ font-display: swap;
292
+ }
293
+
294
+ @font-face {
295
+ font-family: 'HPE Graphik';
296
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-BlackItalic-Web.woff2') format('woff2');
297
+ font-weight: 800;
298
+ font-style: italic;
299
+ font-stretch: condensed;
300
+ font-display: swap;
301
+ }
302
+
303
+ @font-face {
304
+ font-family: 'HPE Graphik';
305
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Super-Web.woff2') format('woff2');
306
+ font-weight: 900;
307
+ font-style: normal;
308
+ font-stretch: condensed;
309
+ font-display: swap;
310
+ }
311
+
312
+ @font-face {
313
+ font-family: 'HPE Graphik';
314
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-SuperItalic-Web.woff2') format('woff2');
315
+ font-weight: 900;
316
+ font-style: italic;
317
+ font-stretch: condensed;
318
+ font-display: swap;
319
+ }