@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/dist/css/fonts.css ADDED
@@ -0,0 +1,132 @@
1
+ /**
2
+ * HPE Design System — Font Declarations
3
+ *
4
+ * These @font-face rules align with the design token font-family values:
5
+ * --display-font: "HPE Graphik XXCondensed"
6
+ * --heading-font: "HPE Graphik"
7
+ * --text-font: "HPE Graphik"
8
+ * --quote-font: "HPE Graphik"
9
+ *
10
+ * Unlike the legacy CDN file, weights are consolidated under a single
11
+ * font-family name so the browser can match via font-weight.
12
+ */
13
+
14
+ /* ——— HPE Graphik ————————————————————————————————————————————————————————————
15
+ Used by: heading, text, quote tokens
16
+ Weights referenced by tokens: 300, 400, 500, 700
17
+ —————————————————————————————————————————————————————————————————————————— */
18
+
19
+ @font-face {
20
+ font-family: 'HPE Graphik';
21
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphik-Light-Web.woff2') format('woff2'),
22
+ url('https://h50007.www5.hpe.com/hfws-static/fonts/graphik/HPEGraphik-Light-Web.woff2') format('woff2');
23
+ font-weight: 300;
24
+ font-style: normal;
25
+ font-display: swap;
26
+ }
27
+
28
+ @font-face {
29
+ font-family: 'HPE Graphik';
30
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphik-LightItalic-Web.woff2') format('woff2'),
31
+ url('https://h50007.www5.hpe.com/hfws-static/fonts/graphik/HPEGraphik-LightItalic-Web.woff2') format('woff2');
32
+ font-weight: 300;
33
+ font-style: italic;
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-Regular-Web.woff2') format('woff2'),
40
+ url('https://h50007.www5.hpe.com/hfws-static/fonts/graphik/HPEGraphik-Regular-Web.woff2') format('woff2');
41
+ font-weight: 400;
42
+ font-style: normal;
43
+ font-display: swap;
44
+ }
45
+
46
+ @font-face {
47
+ font-family: 'HPE Graphik';
48
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphik-RegularItalic-Web.woff2') format('woff2'),
49
+ url('https://h50007.www5.hpe.com/hfws-static/fonts/graphik/HPEGraphik-RegularItalic-Web.woff2') format('woff2');
50
+ font-weight: 400;
51
+ font-style: italic;
52
+ font-display: swap;
53
+ }
54
+
55
+ @font-face {
56
+ font-family: 'HPE Graphik';
57
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphik-Medium-Web.woff2') format('woff2'),
58
+ url('https://h50007.www5.hpe.com/hfws-static/fonts/graphik/HPEGraphik-Medium-Web.woff2') format('woff2');
59
+ font-weight: 500;
60
+ font-style: normal;
61
+ font-display: swap;
62
+ }
63
+
64
+ @font-face {
65
+ font-family: 'HPE Graphik';
66
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphik-MediumItalic-Web.woff2') format('woff2'),
67
+ url('https://h50007.www5.hpe.com/hfws-static/fonts/graphik/HPEGraphik-MediumItalic-Web.woff2') format('woff2');
68
+ font-weight: 500;
69
+ font-style: italic;
70
+ font-display: swap;
71
+ }
72
+
73
+ @font-face {
74
+ font-family: 'HPE Graphik';
75
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphik-Bold-Web.woff2') format('woff2'),
76
+ url('https://h50007.www5.hpe.com/hfws-static/fonts/graphik/HPEGraphik-Bold-Web.woff2') format('woff2');
77
+ font-weight: 700;
78
+ font-style: normal;
79
+ font-display: swap;
80
+ }
81
+
82
+ @font-face {
83
+ font-family: 'HPE Graphik';
84
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphik-BoldItalic-Web.woff2') format('woff2'),
85
+ url('https://h50007.www5.hpe.com/hfws-static/fonts/graphik/HPEGraphik-BoldItalic-Web.woff2') format('woff2');
86
+ font-weight: 700;
87
+ font-style: italic;
88
+ font-display: swap;
89
+ }
90
+
91
+ /* ——— HPE Graphik XXCondensed ————————————————————————————————————————————————
92
+ Used by: display tokens
93
+ Weights referenced by tokens: 300, 400, 500, 700
94
+
95
+ ⚠️ TODO: Regular (400) and Medium (500) are not on the CDN yet.
96
+ The browser will synthesize from the nearest available weight until uploaded.
97
+ —————————————————————————————————————————————————————————————————————————— */
98
+
99
+ @font-face {
100
+ font-family: 'HPE Graphik XXCondensed';
101
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Light-Web.woff2') format('woff2');
102
+ font-weight: 300;
103
+ font-style: normal;
104
+ font-display: swap;
105
+ }
106
+
107
+ /* ⚠️ Regular (400) not on CDN — mapped to Light as fallback */
108
+ @font-face {
109
+ font-family: 'HPE Graphik XXCondensed';
110
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Light-Web.woff2') format('woff2');
111
+ font-weight: 400;
112
+ font-style: normal;
113
+ font-display: swap;
114
+ }
115
+
116
+ /* ⚠️ Medium (500) not on CDN — mapped to Bold as fallback */
117
+ @font-face {
118
+ font-family: 'HPE Graphik XXCondensed';
119
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Bold-Web.woff2') format('woff2');
120
+ font-weight: 500;
121
+ font-style: normal;
122
+ font-display: swap;
123
+ }
124
+
125
+ @font-face {
126
+ font-family: 'HPE Graphik XXCondensed';
127
+ src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Bold-Web.woff2') format('woff2');
128
+ font-weight: 700;
129
+ font-style: normal;
130
+ font-display: swap;
131
+ }
132
+
package/dist/css/tokens.css ADDED
@@ -0,0 +1,305 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root, [data-theme="light"] {
6
+ --hpe-web-button-play-rest-icon-color: #068667;
7
+ --hpe-web-multi-mode-button-anchor-large-border-radius: 9999px;
8
+ --hpe-web-multi-mode-button-anchor-large-font-size: 20px;
9
+ --hpe-web-multi-mode-button-anchor-large-line-height: 28px;
10
+ --hpe-web-multi-mode-button-anchor-large-border-width: 4px;
11
+ --hpe-web-multi-mode-button-anchor-large-icon-height: 20px;
12
+ --hpe-web-multi-mode-button-anchor-large-icon-width: 20px;
13
+ --hpe-web-multi-mode-button-anchor-large-min-height: 20px;
14
+ --hpe-web-multi-mode-button-anchor-large-gap-x: 12px;
15
+ --hpe-web-multi-mode-button-anchor-large-padding-x: 0px;
16
+ --hpe-web-multi-mode-button-anchor-large-padding-y: 0px;
17
+ --hpe-web-multi-mode-button-anchor-medium-border-radius: 9999px;
18
+ --hpe-web-multi-mode-button-anchor-medium-border-width: 4px;
19
+ --hpe-web-multi-mode-button-anchor-medium-font-size: 18px;
20
+ --hpe-web-multi-mode-button-anchor-medium-line-height: 24px;
21
+ --hpe-web-multi-mode-button-anchor-medium-icon-height: 16px;
22
+ --hpe-web-multi-mode-button-anchor-medium-icon-width: 16px;
23
+ --hpe-web-multi-mode-button-anchor-medium-min-height: 24px;
24
+ --hpe-web-multi-mode-button-anchor-medium-gap-x: 12px;
25
+ --hpe-web-multi-mode-button-anchor-medium-padding-x: 0px;
26
+ --hpe-web-multi-mode-button-anchor-medium-padding-y: 0px;
27
+ --hpe-web-multi-mode-button-anchor-small-border-radius: 9999px;
28
+ --hpe-web-multi-mode-button-anchor-small-border-width: 4px;
29
+ --hpe-web-multi-mode-button-anchor-small-font-size: 16px;
30
+ --hpe-web-multi-mode-button-anchor-small-line-height: 24px;
31
+ --hpe-web-multi-mode-button-anchor-small-icon-height: 16px;
32
+ --hpe-web-multi-mode-button-anchor-small-icon-width: 16px;
33
+ --hpe-web-multi-mode-button-anchor-small-min-height: 14px;
34
+ --hpe-web-multi-mode-button-anchor-small-gap-x: 8px;
35
+ --hpe-web-multi-mode-button-anchor-small-padding-x: 0px;
36
+ --hpe-web-multi-mode-button-anchor-small-padding-y: 0px;
37
+ --hpe-web-multi-mode-button-primary-large-border-radius: 9999px;
38
+ --hpe-web-multi-mode-button-primary-large-font-size: 20px;
39
+ --hpe-web-multi-mode-button-primary-large-line-height: 28px;
40
+ --hpe-web-multi-mode-button-primary-large-border-width: 0px;
41
+ --hpe-web-multi-mode-button-primary-large-icon-height: 20px;
42
+ --hpe-web-multi-mode-button-primary-large-icon-width: 20px;
43
+ --hpe-web-multi-mode-button-primary-large-min-height: 60px;
44
+ --hpe-web-multi-mode-button-primary-large-gap-x: 12px;
45
+ --hpe-web-multi-mode-button-primary-large-padding-x: 36px;
46
+ --hpe-web-multi-mode-button-primary-large-padding-y: 16px;
47
+ --hpe-web-multi-mode-button-primary-medium-border-radius: 9999px;
48
+ --hpe-web-multi-mode-button-primary-medium-border-width: 0px;
49
+ --hpe-web-multi-mode-button-primary-medium-font-size: 18px;
50
+ --hpe-web-multi-mode-button-primary-medium-line-height: 24px;
51
+ --hpe-web-multi-mode-button-primary-medium-icon-height: 16px;
52
+ --hpe-web-multi-mode-button-primary-medium-icon-width: 16px;
53
+ --hpe-web-multi-mode-button-primary-medium-min-height: 52px;
54
+ --hpe-web-multi-mode-button-primary-medium-gap-x: 12px;
55
+ --hpe-web-multi-mode-button-primary-medium-padding-x: 28px;
56
+ --hpe-web-multi-mode-button-primary-medium-padding-y: 14px;
57
+ --hpe-web-multi-mode-button-primary-small-border-radius: 9999px;
58
+ --hpe-web-multi-mode-button-primary-small-border-width: 0px;
59
+ --hpe-web-multi-mode-button-primary-small-font-size: 16px;
60
+ --hpe-web-multi-mode-button-primary-small-line-height: 24px;
61
+ --hpe-web-multi-mode-button-primary-small-icon-height: 16px;
62
+ --hpe-web-multi-mode-button-primary-small-icon-width: 16px;
63
+ --hpe-web-multi-mode-button-primary-small-min-height: 48px;
64
+ --hpe-web-multi-mode-button-primary-small-gap-x: 8px;
65
+ --hpe-web-multi-mode-button-primary-small-padding-x: 24px;
66
+ --hpe-web-multi-mode-button-primary-small-padding-y: 12px;
67
+ --hpe-web-multi-mode-button-secondary-large-border-radius: 9999px;
68
+ --hpe-web-multi-mode-button-secondary-large-border-width: 4px;
69
+ --hpe-web-multi-mode-button-secondary-large-font-size: 20px;
70
+ --hpe-web-multi-mode-button-secondary-large-line-height: 28px;
71
+ --hpe-web-multi-mode-button-secondary-large-icon-height: 20px;
72
+ --hpe-web-multi-mode-button-secondary-large-icon-width: 20px;
73
+ --hpe-web-multi-mode-button-secondary-large-min-height: 60px;
74
+ --hpe-web-multi-mode-button-secondary-large-gap-x: 12px;
75
+ --hpe-web-multi-mode-button-secondary-large-padding-x: 36px;
76
+ --hpe-web-multi-mode-button-secondary-large-padding-y: 16px;
77
+ --hpe-web-multi-mode-button-secondary-medium-border-radius: 9999px;
78
+ --hpe-web-multi-mode-button-secondary-medium-border-width: 4px;
79
+ --hpe-web-multi-mode-button-secondary-medium-font-size: 18px;
80
+ --hpe-web-multi-mode-button-secondary-medium-line-height: 24px;
81
+ --hpe-web-multi-mode-button-secondary-medium-icon-height: 16px;
82
+ --hpe-web-multi-mode-button-secondary-medium-icon-width: 16px;
83
+ --hpe-web-multi-mode-button-secondary-medium-min-height: 52px;
84
+ --hpe-web-multi-mode-button-secondary-medium-gap-x: 12px;
85
+ --hpe-web-multi-mode-button-secondary-medium-padding-x: 28px;
86
+ --hpe-web-multi-mode-button-secondary-medium-padding-y: 14px;
87
+ --hpe-web-multi-mode-button-secondary-small-border-radius: 9999px;
88
+ --hpe-web-multi-mode-button-secondary-small-border-width: 3px;
89
+ --hpe-web-multi-mode-button-secondary-small-font-size: 16px;
90
+ --hpe-web-multi-mode-button-secondary-small-line-height: 24px;
91
+ --hpe-web-multi-mode-button-secondary-small-icon-height: 16px;
92
+ --hpe-web-multi-mode-button-secondary-small-icon-width: 16px;
93
+ --hpe-web-multi-mode-button-secondary-small-min-height: 48px;
94
+ --hpe-web-multi-mode-button-secondary-small-gap-x: 8px;
95
+ --hpe-web-multi-mode-button-secondary-small-padding-x: 24px;
96
+ --hpe-web-multi-mode-button-secondary-small-padding-y: 12px;
97
+ --hpe-web-radius-full: 9999px;
98
+ --hpe-web-radius-hair: 1px;
99
+ --hpe-web-radius-large: 12px;
100
+ --hpe-web-radius-medium: 8px;
101
+ --hpe-web-radius-none: 0px;
102
+ --hpe-web-radius-small: 6px;
103
+ --hpe-web-radius-xlarge: 16px;
104
+ --hpe-web-radius-xsmall: 4px;
105
+ --hpe-web-radius-xxlarge: 24px;
106
+ --hpe-web-radius-xxsmall: 1px;
107
+ --hpe-web-color-background-card: #f7f7f7;
108
+ --hpe-web-color-background-card-hover: #e6e8e9;
109
+ --hpe-web-color-background-component: #e6e8e9;
110
+ --hpe-web-color-background-component-disabled: #a5a5a9;
111
+ --hpe-web-color-background-component-hover: #d4d4d4;
112
+ --hpe-web-color-background-contrast: #0000000a;
113
+ --hpe-web-color-background-critical: #cc1f1a;
114
+ --hpe-web-color-background-default: #ffffff;
115
+ --hpe-web-color-background-focus: #2ad2c9;
116
+ --hpe-web-color-background-neutral: #535c66;
117
+ --hpe-web-color-background-neutral-strong: #292d3a;
118
+ --hpe-web-color-background-neutral-weak: #d4d8db;
119
+ --hpe-web-color-background-ok: #009a71;
120
+ --hpe-web-color-background-primary: #01a982;
121
+ --hpe-web-color-background-primary-strong: #068667;
122
+ --hpe-web-color-background-warning: #d36d00;
123
+ --hpe-web-color-border-critical: #cc1f1a;
124
+ --hpe-web-color-border-default: #a0a2a8;
125
+ --hpe-web-color-border-focus: #2ad2c9;
126
+ --hpe-web-color-border-ok: #009a71;
127
+ --hpe-web-color-border-primary: #01a982;
128
+ --hpe-web-color-border-primary-strong: #068667;
129
+ --hpe-web-color-border-warning: #d36d00;
130
+ --hpe-web-color-border-weak: #d1d1d1;
131
+ --hpe-web-color-decorative-black: #000000;
132
+ --hpe-web-color-decorative-blue: #0070f8;
133
+ --hpe-web-color-decorative-brand: #01a982;
134
+ --hpe-web-color-decorative-cyan: #62e5f6;
135
+ --hpe-web-color-decorative-green: #05cc93;
136
+ --hpe-web-color-decorative-neutral: #7d8a92;
137
+ --hpe-web-color-decorative-neutral-hover: #606a70;
138
+ --hpe-web-color-decorative-purple: #7764fc;
139
+ --hpe-web-color-decorative-white: #ffffff;
140
+ --hpe-web-color-gradient-element-green-stop0: #05cc93;
141
+ --hpe-web-color-gradient-element-green-stop100: #ffffff00;
142
+ --hpe-web-color-gradient-element-neutral-stop0: #292d3a45;
143
+ --hpe-web-color-gradient-element-neutral-stop100: #ffffff00;
144
+ --hpe-web-color-gradient-element-neutral-stop15: #393d4840;
145
+ --hpe-web-color-gradient-element-neutral-stop28: #494e573d;
146
+ --hpe-web-color-gradient-element-neutral-stop38: #5a5f6538;
147
+ --hpe-web-color-gradient-element-neutral-stop47: #6a707333;
148
+ --hpe-web-color-gradient-element-neutral-stop54: #7b818130;
149
+ --hpe-web-color-gradient-element-neutral-stop60: #8c92902b;
150
+ --hpe-web-color-gradient-element-neutral-stop65: #9da39e26;
151
+ --hpe-web-color-gradient-element-neutral-stop70: #adb4ac21;
152
+ --hpe-web-color-gradient-element-neutral-stop73: #bec5bb1f;
153
+ --hpe-web-color-gradient-element-neutral-stop77: #cfd6c91a;
154
+ --hpe-web-color-gradient-element-neutral-stop80: #e0e7d714;
155
+ --hpe-web-color-gradient-element-neutral-stop84: #f0f8e512;
156
+ --hpe-web-color-gradient-element-neutral-stop88: #fafff20d;
157
+ --hpe-web-color-gradient-element-neutral-stop94: #ffffff08;
158
+ --hpe-web-color-gradient-neutral-stop0: #1d1f2700;
159
+ --hpe-web-color-gradient-neutral-stop100: #1d1f27;
160
+ --hpe-web-color-gradient-video-overlay-stop0: #00000000;
161
+ --hpe-web-color-gradient-video-overlay-stop100: #00000066;
162
+ --hpe-web-color-icon-critical: #cc1f1a;
163
+ --hpe-web-color-icon-default: #67686e;
164
+ --hpe-web-color-icon-disabled: #a0a2ab;
165
+ --hpe-web-color-icon-focus: #2ad2c9;
166
+ --hpe-web-color-icon-neutral: #292d3a;
167
+ --hpe-web-color-icon-ok: #009a71;
168
+ --hpe-web-color-icon-primary: #01a982;
169
+ --hpe-web-color-icon-primary-strong: #005f49;
170
+ --hpe-web-color-icon-strong: #292d3a;
171
+ --hpe-web-color-icon-warning: #d36d00;
172
+ --hpe-web-color-icon-weak: #676767;
173
+ --hpe-web-color-logo: #01a982;
174
+ --hpe-web-color-text-body: #67686e;
175
+ --hpe-web-color-text-critical: #cc1f1a;
176
+ --hpe-web-color-text-disabled: #a0a2ab;
177
+ --hpe-web-color-text-focus: #2ad2c9;
178
+ --hpe-web-color-text-header: #292d3a;
179
+ --hpe-web-color-text-neutral-strong: #21242e;
180
+ --hpe-web-color-text-ok: #009a71;
181
+ --hpe-web-color-text-on-neutral: #ffffff;
182
+ --hpe-web-color-text-primary: #068667;
183
+ --hpe-web-color-text-primary-strong: #005f49;
184
+ --hpe-web-color-text-warning: #d36d00;
185
+ --hpe-web-color-text-weak: #676767;
186
+ --hpe-web-color-transparent: #00000000;
187
+ --hpe-web-theme-button-carousel-disabled-background: #b4b6ba;
188
+ --hpe-web-theme-button-carousel-disabled-border-color: #00000000;
189
+ --hpe-web-theme-button-carousel-disabled-icon-color: #ffffff;
190
+ --hpe-web-theme-button-carousel-hover-background: #67686e;
191
+ --hpe-web-theme-button-carousel-hover-border-color: #00000000;
192
+ --hpe-web-theme-button-carousel-hover-icon-color: #ffffff;
193
+ --hpe-web-theme-button-carousel-rest-background: #535c66;
194
+ --hpe-web-theme-button-carousel-rest-border-color: #00000000;
195
+ --hpe-web-theme-button-carousel-rest-icon-color: #ffffff;
196
+ --hpe-web-display-font: "HPE Graphik XXCondensed", "Arial Narrow", Arial, sans-serif;
197
+ --hpe-web-display-bold-2xlarge-font-size: 144px;
198
+ --hpe-web-display-bold-2xlarge-font-weight: 700;
199
+ --hpe-web-display-bold-2xlarge-letter-spacing: 2px;
200
+ --hpe-web-display-bold-2xlarge-line-height: 144px;
201
+ --hpe-web-display-bold-large-font-size: 80px;
202
+ --hpe-web-display-bold-large-font-weight: 700;
203
+ --hpe-web-display-bold-large-letter-spacing: 1.6px;
204
+ --hpe-web-display-bold-large-line-height: 80px;
205
+ --hpe-web-display-bold-xlarge-font-size: 96px;
206
+ --hpe-web-display-bold-xlarge-font-weight: 700;
207
+ --hpe-web-display-bold-xlarge-letter-spacing: 2px;
208
+ --hpe-web-display-bold-xlarge-line-height: 96px;
209
+ --hpe-web-display-light-2xlarge-font-size: 144px;
210
+ --hpe-web-display-light-2xlarge-font-weight: 300;
211
+ --hpe-web-display-light-2xlarge-letter-spacing: 2px;
212
+ --hpe-web-display-light-2xlarge-line-height: 144px;
213
+ --hpe-web-display-light-large-font-size: 80px;
214
+ --hpe-web-display-light-large-font-weight: 300;
215
+ --hpe-web-display-light-large-letter-spacing: 1.6px;
216
+ --hpe-web-display-light-large-line-height: 80px;
217
+ --hpe-web-display-light-xlarge-font-size: 96px;
218
+ --hpe-web-display-light-xlarge-font-weight: 300;
219
+ --hpe-web-display-light-xlarge-letter-spacing: 2px;
220
+ --hpe-web-display-light-xlarge-line-height: 96px;
221
+ --hpe-web-display-regular-2xlarge-font-size: 144px;
222
+ --hpe-web-display-regular-2xlarge-font-weight: 400;
223
+ --hpe-web-display-regular-2xlarge-letter-spacing: 2px;
224
+ --hpe-web-display-regular-2xlarge-line-height: 144px;
225
+ --hpe-web-display-regular-large-font-size: 80px;
226
+ --hpe-web-display-regular-large-font-weight: 500;
227
+ --hpe-web-display-regular-large-letter-spacing: 1.6px;
228
+ --hpe-web-display-regular-large-line-height: 80px;
229
+ --hpe-web-display-regular-xlarge-font-size: 96px;
230
+ --hpe-web-display-regular-xlarge-font-weight: 500;
231
+ --hpe-web-display-regular-xlarge-letter-spacing: 2px;
232
+ --hpe-web-display-regular-xlarge-line-height: 96px;
233
+ --hpe-web-heading-font: "HPE Graphik", Arial, sans-serif;
234
+ --hpe-web-heading-3xsmall-font-size: 16px;
235
+ --hpe-web-heading-3xsmall-font-weight: 500;
236
+ --hpe-web-heading-3xsmall-letter-spacing: 0px;
237
+ --hpe-web-heading-3xsmall-line-height: 22px;
238
+ --hpe-web-heading-large-font-size: 56px;
239
+ --hpe-web-heading-large-font-weight: 500;
240
+ --hpe-web-heading-large-letter-spacing: -1.68px;
241
+ --hpe-web-heading-large-line-height: 62px;
242
+ --hpe-web-heading-medium-font-size: 40px;
243
+ --hpe-web-heading-medium-font-weight: 500;
244
+ --hpe-web-heading-medium-letter-spacing: -0.8px;
245
+ --hpe-web-heading-medium-line-height: 46px;
246
+ --hpe-web-heading-small-font-size: 32px;
247
+ --hpe-web-heading-small-font-weight: 500;
248
+ --hpe-web-heading-small-letter-spacing: -0.32px;
249
+ --hpe-web-heading-small-line-height: 38px;
250
+ --hpe-web-heading-xlarge-font-size: 68px;
251
+ --hpe-web-heading-xlarge-font-weight: 500;
252
+ --hpe-web-heading-xlarge-letter-spacing: -2.73px;
253
+ --hpe-web-heading-xlarge-line-height: 74px;
254
+ --hpe-web-heading-xsmall-font-size: 24px;
255
+ --hpe-web-heading-xsmall-font-weight: 500;
256
+ --hpe-web-heading-xsmall-letter-spacing: 0px;
257
+ --hpe-web-heading-xsmall-line-height: 30px;
258
+ --hpe-web-heading-xxsmall-font-size: 18px;
259
+ --hpe-web-heading-xxsmall-font-weight: 500;
260
+ --hpe-web-heading-xxsmall-letter-spacing: 0px;
261
+ --hpe-web-heading-xxsmall-line-height: 24px;
262
+ --hpe-web-quote-font: "HPE Graphik", Arial, sans-serif;
263
+ --hpe-web-quote-large-font-size: 48px;
264
+ --hpe-web-quote-large-font-weight: 400;
265
+ --hpe-web-quote-large-letter-spacing: -1.92px;
266
+ --hpe-web-quote-large-line-height: 58px;
267
+ --hpe-web-quote-medium-font-size: 40px;
268
+ --hpe-web-quote-medium-font-weight: 400;
269
+ --hpe-web-quote-medium-letter-spacing: -1.2px;
270
+ --hpe-web-quote-medium-line-height: 50px;
271
+ --hpe-web-quote-small-font-size: 32px;
272
+ --hpe-web-quote-small-font-weight: 400;
273
+ --hpe-web-quote-small-letter-spacing: -0.64px;
274
+ --hpe-web-quote-small-line-height: 42px;
275
+ --hpe-web-text-font: "HPE Graphik", Arial, sans-serif;
276
+ --hpe-web-text-large-font-size: 24px;
277
+ --hpe-web-text-large-font-weight: 400;
278
+ --hpe-web-text-large-letter-spacing: -0.24px;
279
+ --hpe-web-text-large-line-height: 34px;
280
+ --hpe-web-text-medium-font-size: 18px;
281
+ --hpe-web-text-medium-font-weight: 400;
282
+ --hpe-web-text-medium-letter-spacing: 0px;
283
+ --hpe-web-text-medium-line-height: 26px;
284
+ --hpe-web-text-small-font-size: 16px;
285
+ --hpe-web-text-small-font-weight: 400;
286
+ --hpe-web-text-small-letter-spacing: 0px;
287
+ --hpe-web-text-small-line-height: 24px;
288
+ --hpe-web-text-xsmall-font-size: 14px;
289
+ --hpe-web-text-xsmall-font-weight: 400;
290
+ --hpe-web-text-xsmall-letter-spacing: 0px;
291
+ --hpe-web-text-xsmall-line-height: 20px;
292
+ --hpe-web-spacing-3xlarge: 96px;
293
+ --hpe-web-spacing-3xsmall: 8px;
294
+ --hpe-web-spacing-4xlarge: 160px;
295
+ --hpe-web-spacing-4xsmall: 4px;
296
+ --hpe-web-spacing-hair: 1px;
297
+ --hpe-web-spacing-large: 40px;
298
+ --hpe-web-spacing-medium: 32px;
299
+ --hpe-web-spacing-none: 0px;
300
+ --hpe-web-spacing-small: 24px;
301
+ --hpe-web-spacing-xlarge: 48px;
302
+ --hpe-web-spacing-xsmall: 16px;
303
+ --hpe-web-spacing-xxlarge: 64px;
304
+ --hpe-web-spacing-xxsmall: 12px;
305
+ }
package/dist/css/tokens.dark.css ADDED
@@ -0,0 +1,96 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ [data-theme="dark"] {
6
+ --hpe-web-button-play-rest-icon-color: #068667;
7
+ --hpe-web-color-background-card: #292d3a;
8
+ --hpe-web-color-background-card-hover: #21242e;
9
+ --hpe-web-color-background-component: #292d3a;
10
+ --hpe-web-color-background-component-disabled: #d4d8db;
11
+ --hpe-web-color-background-component-hover: #535c66;
12
+ --hpe-web-color-background-contrast: #0000000a;
13
+ --hpe-web-color-background-critical: #cc1f1a;
14
+ --hpe-web-color-background-default: #1d1f27;
15
+ --hpe-web-color-background-focus: #2ad2c9;
16
+ --hpe-web-color-background-neutral: #d4d8db;
17
+ --hpe-web-color-background-neutral-strong: #ffffff;
18
+ --hpe-web-color-background-neutral-weak: #d4d8db;
19
+ --hpe-web-color-background-ok: #1ed8ae;
20
+ --hpe-web-color-background-primary: #01a982;
21
+ --hpe-web-color-background-primary-strong: #068667;
22
+ --hpe-web-color-background-warning: #d36d00;
23
+ --hpe-web-color-border-critical: #cc1f1a;
24
+ --hpe-web-color-border-default: #7d8a92;
25
+ --hpe-web-color-border-focus: #2ad2c9;
26
+ --hpe-web-color-border-ok: #17eba0;
27
+ --hpe-web-color-border-primary: #01a982;
28
+ --hpe-web-color-border-primary-strong: #068667;
29
+ --hpe-web-color-border-warning: #d36d00;
30
+ --hpe-web-color-border-weak: #535c66;
31
+ --hpe-web-color-decorative-black: #000000;
32
+ --hpe-web-color-decorative-blue: #0070f8;
33
+ --hpe-web-color-decorative-brand: #01a982;
34
+ --hpe-web-color-decorative-cyan: #00a4b3;
35
+ --hpe-web-color-decorative-green: #068667;
36
+ --hpe-web-color-decorative-neutral: #b1b9be;
37
+ --hpe-web-color-decorative-neutral-hover: #d4d8db;
38
+ --hpe-web-color-decorative-purple: #7764fc;
39
+ --hpe-web-color-decorative-white: #ffffff;
40
+ --hpe-web-color-gradient-element-green-stop0: #05cc93;
41
+ --hpe-web-color-gradient-element-green-stop100: #0f101600;
42
+ --hpe-web-color-gradient-element-neutral-stop0: #5c667245;
43
+ --hpe-web-color-gradient-element-neutral-stop100: #5c667200;
44
+ --hpe-web-color-gradient-element-neutral-stop15: #5c6672fc;
45
+ --hpe-web-color-gradient-element-neutral-stop28: #5c6672f5;
46
+ --hpe-web-color-gradient-element-neutral-stop38: #5c6672e8;
47
+ --hpe-web-color-gradient-element-neutral-stop47: #5c6672d9;
48
+ --hpe-web-color-gradient-element-neutral-stop54: #5c6672c7;
49
+ --hpe-web-color-gradient-element-neutral-stop60: #5c6672b2;
50
+ --hpe-web-color-gradient-element-neutral-stop65: #5c66729e;
51
+ --hpe-web-color-gradient-element-neutral-stop70: #5c667285;
52
+ --hpe-web-color-gradient-element-neutral-stop73: #5c66726e;
53
+ --hpe-web-color-gradient-element-neutral-stop77: #5c667257;
54
+ --hpe-web-color-gradient-element-neutral-stop80: #5c667242;
55
+ --hpe-web-color-gradient-element-neutral-stop84: #5c66722e;
56
+ --hpe-web-color-gradient-element-neutral-stop88: #5c66721a;
57
+ --hpe-web-color-gradient-element-neutral-stop94: #5c66720d;
58
+ --hpe-web-color-gradient-neutral-stop0: #1d1f2700;
59
+ --hpe-web-color-gradient-neutral-stop100: #1d1f27;
60
+ --hpe-web-color-gradient-video-overlay-stop0: #00000000;
61
+ --hpe-web-color-gradient-video-overlay-stop100: #00000066;
62
+ --hpe-web-color-icon-critical: #cc1f1a;
63
+ --hpe-web-color-icon-default: #e5e5e5;
64
+ --hpe-web-color-icon-disabled: #bebebe;
65
+ --hpe-web-color-icon-focus: #2ad2c9;
66
+ --hpe-web-color-icon-neutral: #ffffff;
67
+ --hpe-web-color-icon-ok: #1ed8ae;
68
+ --hpe-web-color-icon-primary: #01a982;
69
+ --hpe-web-color-icon-primary-strong: #01a982;
70
+ --hpe-web-color-icon-strong: #ffffff;
71
+ --hpe-web-color-icon-warning: #d36d00;
72
+ --hpe-web-color-icon-weak: #ffffff9c;
73
+ --hpe-web-color-logo: #01a982;
74
+ --hpe-web-color-text-body: #e5e5e5;
75
+ --hpe-web-color-text-critical: #fc6161;
76
+ --hpe-web-color-text-disabled: #bebebe;
77
+ --hpe-web-color-text-focus: #2ad2c9;
78
+ --hpe-web-color-text-header: #ffffff;
79
+ --hpe-web-color-text-neutral-strong: #f7f7f7;
80
+ --hpe-web-color-text-ok: #17eba0;
81
+ --hpe-web-color-text-on-neutral: #292d3a;
82
+ --hpe-web-color-text-primary: #00e0af;
83
+ --hpe-web-color-text-primary-strong: #01a982;
84
+ --hpe-web-color-text-warning: #ec8c25;
85
+ --hpe-web-color-text-weak: #ffffff9c;
86
+ --hpe-web-color-transparent: #ffffff00;
87
+ --hpe-web-theme-button-carousel-disabled-background: #a5a5a9;
88
+ --hpe-web-theme-button-carousel-disabled-border-color: #00000000;
89
+ --hpe-web-theme-button-carousel-disabled-icon-color: #292d3a;
90
+ --hpe-web-theme-button-carousel-hover-background: #d4d4d4;
91
+ --hpe-web-theme-button-carousel-hover-border-color: #ffffff00;
92
+ --hpe-web-theme-button-carousel-hover-icon-color: #292d3a;
93
+ --hpe-web-theme-button-carousel-rest-background: #e6e8e9;
94
+ --hpe-web-theme-button-carousel-rest-border-color: #00000000;
95
+ --hpe-web-theme-button-carousel-rest-icon-color: #292d3a;
96
+ }
package/dist/css/tokens.sm-xs.css ADDED
@@ -0,0 +1,93 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ @media (max-width: 991px) {
6
+ :root {
7
+ --hpe-web-multi-mode-button-anchor-large-font-size: 18px;
8
+ --hpe-web-multi-mode-button-anchor-large-line-height: 24px;
9
+ --hpe-web-multi-mode-button-anchor-large-min-height: 16px;
10
+ --hpe-web-multi-mode-button-anchor-large-gap-x: 8px;
11
+ --hpe-web-multi-mode-button-anchor-medium-border-width: 0px;
12
+ --hpe-web-multi-mode-button-anchor-small-padding-x: 2px;
13
+ --hpe-web-multi-mode-button-primary-large-font-size: 18px;
14
+ --hpe-web-multi-mode-button-primary-large-line-height: 24px;
15
+ --hpe-web-multi-mode-button-primary-large-min-height: 56px;
16
+ --hpe-web-multi-mode-button-primary-large-gap-x: 8px;
17
+ --hpe-web-multi-mode-button-primary-medium-icon-width: 20px;
18
+ --hpe-web-multi-mode-button-secondary-large-font-size: 18px;
19
+ --hpe-web-multi-mode-button-secondary-large-line-height: 24px;
20
+ --hpe-web-multi-mode-button-secondary-large-min-height: 56px;
21
+ --hpe-web-multi-mode-button-secondary-large-gap-x: 8px;
22
+ --hpe-web-multi-mode-button-secondary-medium-icon-width: 20px;
23
+ --hpe-web-radius-large: 16px;
24
+ --hpe-web-radius-medium: 12px;
25
+ --hpe-web-radius-small: 8px;
26
+ --hpe-web-radius-xlarge: 24px;
27
+ --hpe-web-radius-xsmall: 6px;
28
+ --hpe-web-radius-xxlarge: 32px;
29
+ --hpe-web-radius-xxsmall: 4px;
30
+ --hpe-web-display-bold-2xlarge-font-size: 90px;
31
+ --hpe-web-display-bold-2xlarge-line-height: 90px;
32
+ --hpe-web-display-bold-large-font-size: 48px;
33
+ --hpe-web-display-bold-large-letter-spacing: 0.96px;
34
+ --hpe-web-display-bold-large-line-height: 48px;
35
+ --hpe-web-display-bold-xlarge-font-size: 60px;
36
+ --hpe-web-display-bold-xlarge-letter-spacing: 1.2px;
37
+ --hpe-web-display-bold-xlarge-line-height: 60px;
38
+ --hpe-web-display-light-2xlarge-font-size: 90px;
39
+ --hpe-web-display-light-2xlarge-line-height: 90px;
40
+ --hpe-web-display-light-large-font-size: 48px;
41
+ --hpe-web-display-light-large-letter-spacing: 0.96px;
42
+ --hpe-web-display-light-large-line-height: 48px;
43
+ --hpe-web-display-light-xlarge-font-size: 60px;
44
+ --hpe-web-display-light-xlarge-letter-spacing: 1.2px;
45
+ --hpe-web-display-light-xlarge-line-height: 60px;
46
+ --hpe-web-display-regular-2xlarge-font-size: 90px;
47
+ --hpe-web-display-regular-2xlarge-line-height: 90px;
48
+ --hpe-web-display-regular-large-font-size: 48px;
49
+ --hpe-web-display-regular-large-font-weight: 400;
50
+ --hpe-web-display-regular-large-letter-spacing: 0.96px;
51
+ --hpe-web-display-regular-large-line-height: 48px;
52
+ --hpe-web-display-regular-xlarge-font-size: 60px;
53
+ --hpe-web-display-regular-xlarge-font-weight: 400;
54
+ --hpe-web-display-regular-xlarge-letter-spacing: 1.2px;
55
+ --hpe-web-display-regular-xlarge-line-height: 60px;
56
+ --hpe-web-heading-3xsmall-font-size: 14px;
57
+ --hpe-web-heading-3xsmall-line-height: 20px;
58
+ --hpe-web-heading-large-font-size: 40px;
59
+ --hpe-web-heading-large-letter-spacing: -0.8px;
60
+ --hpe-web-heading-large-line-height: 46px;
61
+ --hpe-web-heading-medium-font-size: 32px;
62
+ --hpe-web-heading-medium-letter-spacing: -0.32px;
63
+ --hpe-web-heading-medium-line-height: 38px;
64
+ --hpe-web-heading-small-font-size: 26px;
65
+ --hpe-web-heading-small-letter-spacing: 0px;
66
+ --hpe-web-heading-small-line-height: 32px;
67
+ --hpe-web-heading-xlarge-font-size: 40px;
68
+ --hpe-web-heading-xlarge-letter-spacing: -0.8px;
69
+ --hpe-web-heading-xlarge-line-height: 46px;
70
+ --hpe-web-heading-xsmall-font-size: 20px;
71
+ --hpe-web-heading-xsmall-line-height: 26px;
72
+ --hpe-web-heading-xxsmall-font-size: 16px;
73
+ --hpe-web-heading-xxsmall-line-height: 22px;
74
+ --hpe-web-quote-large-font-size: 32px;
75
+ --hpe-web-quote-large-letter-spacing: -0.64px;
76
+ --hpe-web-quote-large-line-height: 42px;
77
+ --hpe-web-quote-medium-font-size: 28px;
78
+ --hpe-web-quote-medium-letter-spacing: -0.28px;
79
+ --hpe-web-quote-medium-line-height: 38px;
80
+ --hpe-web-quote-small-font-size: 24px;
81
+ --hpe-web-quote-small-letter-spacing: -0.24px;
82
+ --hpe-web-quote-small-line-height: 34px;
83
+ --hpe-web-text-large-font-size: 20px;
84
+ --hpe-web-text-large-letter-spacing: -0.2px;
85
+ --hpe-web-text-large-line-height: 30px;
86
+ --hpe-web-text-medium-font-size: 16px;
87
+ --hpe-web-text-medium-line-height: 24px;
88
+ --hpe-web-text-small-font-size: 14px;
89
+ --hpe-web-text-small-line-height: 20px;
90
+ --hpe-web-text-xsmall-font-size: 12px;
91
+ --hpe-web-text-xsmall-line-height: 18px;
92
+ }
93
+ }