@hpe-web/design-tokens 1.2.2 → 1.3.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.
@@ -3,18 +3,212 @@
3
3
  */
4
4
 
5
5
  :root, [data-theme="light"], .light-theme {
6
- --hpe-web-border-width-default: 1px;
7
- --hpe-web-border-width-large: 6px;
8
- --hpe-web-border-width-medium: 4px;
9
- --hpe-web-border-width-none: 0px;
10
- --hpe-web-border-width-small: 2px;
11
- --hpe-web-border-width-xsmall: 1px;
6
+ /* ── Primitives — foundational values. Concrete (not aliased). ── */
7
+ --hpe-web-base-color-black-opacity100: #000000;
8
+ --hpe-web-base-color-black-opacity12: #0000001f;
9
+ --hpe-web-base-color-black-opacity24: #0000003d;
10
+ --hpe-web-base-color-black-opacity36: #0000005c;
11
+ --hpe-web-base-color-black-opacity4: #0000000a;
12
+ --hpe-web-base-color-black-opacity48: #0000007a;
13
+ --hpe-web-base-color-black-opacity50: #00000080;
14
+ --hpe-web-base-color-black-opacity72: #000000b8;
15
+ --hpe-web-base-color-black-opacity8: #00000014;
16
+ --hpe-web-base-color-blue-50: #e3f1ff;
17
+ --hpe-web-base-color-blue-200: #65aef9;
18
+ --hpe-web-base-color-blue-300: #3994f7;
19
+ --hpe-web-base-color-blue-500: #0070f8;
20
+ --hpe-web-base-color-blue-700: #0055da;
21
+ --hpe-web-base-color-blue-900: #003cae;
22
+ --hpe-web-base-color-blue-1100: #2b3547;
23
+ --hpe-web-base-color-coral-100: #fc988b;
24
+ --hpe-web-base-color-coral-200: #e5786a;
25
+ --hpe-web-base-color-coral-300: #d25f4b;
26
+ --hpe-web-base-color-coral-400: #c64f3a;
27
+ --hpe-web-base-color-coral-500: #b4422a;
28
+ --hpe-web-base-color-cyan-100: #99f0f9;
29
+ --hpe-web-base-color-cyan-200: #62e5f6;
30
+ --hpe-web-base-color-cyan-300: #00dbe4;
31
+ --hpe-web-base-color-cyan-400: #00a4b3;
32
+ --hpe-web-base-color-cyan-500: #04909d;
33
+ --hpe-web-base-color-fuschia-100: #fc9ddc;
34
+ --hpe-web-base-color-fuschia-200: #db72b8;
35
+ --hpe-web-base-color-fuschia-300: #cc54a4;
36
+ --hpe-web-base-color-fuschia-700: #ad4089;
37
+ --hpe-web-base-color-fuschia-900: #7f245c;
38
+ --hpe-web-base-color-gold-100: #f9cc61;
39
+ --hpe-web-base-color-gold-200: #ecbe4f;
40
+ --hpe-web-base-color-gold-300: #deb146;
41
+ --hpe-web-base-color-gold-400: #c89e3a;
42
+ --hpe-web-base-color-gold-500: #b38a29;
43
+ --hpe-web-base-color-gold-550: #b0840d;
44
+ --hpe-web-base-color-green-100: #d1ffee;
45
+ --hpe-web-base-color-green-125: #aafade;
46
+ --hpe-web-base-color-green-400: #00e0af;
47
+ --hpe-web-base-color-green-450: #66ebcf;
48
+ --hpe-web-base-color-green-500: #00e0af;
49
+ --hpe-web-base-color-green-550: #05cc93;
50
+ --hpe-web-base-color-green-600: #01a982;
51
+ --hpe-web-base-color-green-650: #009a71;
52
+ --hpe-web-base-color-green-700: #068667;
53
+ --hpe-web-base-color-green-800: #006750;
54
+ --hpe-web-base-color-green-900: #074738;
55
+ --hpe-web-base-color-green-1000: #093d32;
56
+ --hpe-web-base-color-grey-50: #f7f7f7;
57
+ --hpe-web-base-color-grey-200: #e6e8e9;
58
+ --hpe-web-base-color-grey-400: #d4d8db;
59
+ --hpe-web-base-color-grey-500: #b1b9be;
60
+ --hpe-web-base-color-grey-600: #7d8a92;
61
+ --hpe-web-base-color-grey-650: #606a70;
62
+ --hpe-web-base-color-grey-700: #535c66;
63
+ --hpe-web-base-color-grey-800: #3e4550;
64
+ --hpe-web-base-color-grey-1000: #292d3a;
65
+ --hpe-web-base-color-grey-1200: #22252e;
66
+ --hpe-web-base-color-grey-1300: #1d1f27;
67
+ --hpe-web-base-color-orange-50: #fff3dd;
68
+ --hpe-web-base-color-orange-500: #ec8c25;
69
+ --hpe-web-base-color-orange-600: #d36d00;
70
+ --hpe-web-base-color-orange-1000: #3c361e;
71
+ --hpe-web-base-color-plum-100: #c98ad4;
72
+ --hpe-web-base-color-plum-200: #a455b3;
73
+ --hpe-web-base-color-plum-600: #873492;
74
+ --hpe-web-base-color-plum-700: #6c2b7c;
75
+ --hpe-web-base-color-plum-900: #5e1f68;
76
+ --hpe-web-base-color-purple-100: #b7a2fc;
77
+ --hpe-web-base-color-purple-200: #9b84fc;
78
+ --hpe-web-base-color-purple-400: #7764fc;
79
+ --hpe-web-base-color-purple-700: #5d45d6;
80
+ --hpe-web-base-color-purple-900: #3c3aa1;
81
+ --hpe-web-base-color-red-50: #ffecec;
82
+ --hpe-web-base-color-red-400: #ff7b7b;
83
+ --hpe-web-base-color-red-500: #fc6161;
84
+ --hpe-web-base-color-red-600: #ec3331;
85
+ --hpe-web-base-color-red-800: #cc1f1a;
86
+ --hpe-web-base-color-red-1000: #552120;
87
+ --hpe-web-base-color-white-100: #ffffff;
88
+ --hpe-web-base-color-white-opacity10: #ffffff1a;
89
+ --hpe-web-base-color-white-opacity12: #ffffff1f;
90
+ --hpe-web-base-color-white-opacity20: #ffffff33;
91
+ --hpe-web-base-color-white-opacity24: #ffffff3d;
92
+ --hpe-web-base-color-white-opacity36: #ffffff5c;
93
+ --hpe-web-base-color-white-opacity50: #ffffff80;
94
+ --hpe-web-base-color-white-opacity6: #ffffff0f;
95
+ --hpe-web-base-color-white-opacity7: #ffffff12;
96
+ --hpe-web-base-color-white-opacity72: #ffffffb8;
97
+ --hpe-web-base-dimension-0: 0px;
98
+ --hpe-web-base-dimension-25: 0.0625rem;
99
+ --hpe-web-base-dimension-50: 0.125rem;
100
+ --hpe-web-base-dimension-75: 0.1875rem;
101
+ --hpe-web-base-dimension-100: 0.25rem;
102
+ --hpe-web-base-dimension-150: 0.375rem;
103
+ --hpe-web-base-dimension-200: 0.5rem;
104
+ --hpe-web-base-dimension-225: 0.5625rem;
105
+ --hpe-web-base-dimension-250: 0.625rem;
106
+ --hpe-web-base-dimension-300: 0.75rem;
107
+ --hpe-web-base-dimension-350: 0.875rem;
108
+ --hpe-web-base-dimension-400: 1rem;
109
+ --hpe-web-base-dimension-450: 1.125rem;
110
+ --hpe-web-base-dimension-475: 1.1875rem;
111
+ --hpe-web-base-dimension-500: 1.25rem;
112
+ --hpe-web-base-dimension-550: 1.375rem;
113
+ --hpe-web-base-dimension-600: 1.5rem;
114
+ --hpe-web-base-dimension-700: 1.75rem;
115
+ --hpe-web-base-dimension-800: 2rem;
116
+ --hpe-web-base-dimension-900: 2.25rem;
117
+ --hpe-web-base-dimension-1200: 3rem;
118
+ --hpe-web-base-dimension-1600: 4rem;
119
+ --hpe-web-base-dimension-1800: 4.5rem;
120
+ --hpe-web-base-dimension-2400: 6rem;
121
+ --hpe-web-base-dimension-3200: 8rem;
122
+ --hpe-web-base-dimension-4800: 12rem;
123
+ --hpe-web-base-dimension-6400: 16rem;
124
+ --hpe-web-base-dimension-9600: 24rem;
125
+ --hpe-web-base-dimension-12800: 32rem;
126
+ --hpe-web-base-dimension-19200: 48rem;
127
+ --hpe-web-base-dimension-25600: 64rem;
128
+ --hpe-web-base-dimension-38400: 96rem;
129
+ --hpe-web-base-font-family-condensed: "HPE Graphik", "Arial Narrow", Arial, sans-serif;
130
+ --hpe-web-base-font-family-noto-sans-jp: "Noto Sans JP";
131
+ --hpe-web-base-font-family-noto-sans-kr: "Noto Sans KR";
132
+ --hpe-web-base-font-family-noto-sans-tc: "Noto Sans TC";
133
+ --hpe-web-base-font-family-primary: "HPE Graphik", Arial, sans-serif;
134
+ --hpe-web-base-font-size-80: 0.75rem;
135
+ --hpe-web-base-font-size-90: 0.875rem;
136
+ --hpe-web-base-font-size-100: 1rem;
137
+ --hpe-web-base-font-size-200: 1.125rem;
138
+ --hpe-web-base-font-size-300: 1.25rem;
139
+ --hpe-web-base-font-size-400: 1.375rem;
140
+ --hpe-web-base-font-size-500: 1.5rem;
141
+ --hpe-web-base-font-size-600: 2.25rem;
142
+ --hpe-web-base-font-size-700: 2.625rem;
143
+ --hpe-web-base-font-size-800: 3rem;
144
+ --hpe-web-base-font-size-900: 4.5rem;
145
+ --hpe-web-base-line-height-80: 12;
146
+ --hpe-web-base-line-height-90: 16;
147
+ --hpe-web-base-line-height-100: 20;
148
+ --hpe-web-base-line-height-200: 24;
149
+ --hpe-web-base-line-height-300: 28;
150
+ --hpe-web-base-line-height-400: 30;
151
+ --hpe-web-base-line-height-500: 36;
152
+ --hpe-web-base-line-height-600: 40;
153
+ --hpe-web-base-line-height-700: 46;
154
+ --hpe-web-base-line-height-800: 48;
155
+ --hpe-web-base-line-height-900: 72;
156
+
157
+ /* ── Semantic — purpose-based. Alias primitives where possible. ── */
158
+ --hpe-web-static-border-width-default: var(--hpe-web-base-dimension-25);
159
+ --hpe-web-static-border-width-large: var(--hpe-web-base-dimension-150);
160
+ --hpe-web-static-border-width-medium: var(--hpe-web-base-dimension-100);
161
+ --hpe-web-static-border-width-none: var(--hpe-web-base-dimension-0);
162
+ --hpe-web-static-border-width-small: var(--hpe-web-base-dimension-50);
163
+ --hpe-web-static-border-width-xsmall: var(--hpe-web-base-dimension-25);
164
+ --hpe-web-static-container-3xlarge: var(--hpe-web-base-dimension-38400);
165
+ --hpe-web-static-container-3xsmall: var(--hpe-web-base-dimension-2400);
166
+ --hpe-web-static-container-4xsmall: var(--hpe-web-base-dimension-1600);
167
+ --hpe-web-static-container-5xsmall: var(--hpe-web-base-dimension-1200);
168
+ --hpe-web-static-container-large: var(--hpe-web-base-dimension-12800);
169
+ --hpe-web-static-container-medium: var(--hpe-web-base-dimension-9600);
170
+ --hpe-web-static-container-small: var(--hpe-web-base-dimension-6400);
171
+ --hpe-web-static-container-xlarge: var(--hpe-web-base-dimension-19200);
172
+ --hpe-web-static-container-xsmall: var(--hpe-web-base-dimension-4800);
173
+ --hpe-web-static-container-xxlarge: var(--hpe-web-base-dimension-25600);
174
+ --hpe-web-static-container-xxsmall: var(--hpe-web-base-dimension-3200);
175
+ --hpe-web-static-radius-full: 9999px;
176
+ --hpe-web-static-radius-hair: var(--hpe-web-base-dimension-25);
177
+ --hpe-web-static-radius-large: var(--hpe-web-base-dimension-400);
178
+ --hpe-web-static-radius-medium: var(--hpe-web-base-dimension-300);
179
+ --hpe-web-static-radius-none: var(--hpe-web-base-dimension-0);
180
+ --hpe-web-static-radius-small: var(--hpe-web-base-dimension-200);
181
+ --hpe-web-static-radius-xlarge: var(--hpe-web-base-dimension-600);
182
+ --hpe-web-static-radius-xsmall: var(--hpe-web-base-dimension-150);
183
+ --hpe-web-static-radius-xxlarge: var(--hpe-web-base-dimension-800);
184
+ --hpe-web-static-radius-xxsmall: var(--hpe-web-base-dimension-100);
185
+ --hpe-web-static-spacing-3xlarge: var(--hpe-web-base-dimension-2400);
186
+ --hpe-web-static-spacing-3xsmall: var(--hpe-web-base-dimension-150);
187
+ --hpe-web-static-spacing-4xlarge: var(--hpe-web-base-dimension-3200);
188
+ --hpe-web-static-spacing-4xsmall: var(--hpe-web-base-dimension-100);
189
+ --hpe-web-static-spacing-5xsmall: var(--hpe-web-base-dimension-75);
190
+ --hpe-web-static-spacing-6xsmall: var(--hpe-web-base-dimension-50);
191
+ --hpe-web-static-spacing-hair: var(--hpe-web-base-dimension-25);
192
+ --hpe-web-static-spacing-large: var(--hpe-web-base-dimension-800);
193
+ --hpe-web-static-spacing-medium: var(--hpe-web-base-dimension-600);
194
+ --hpe-web-static-spacing-none: var(--hpe-web-base-dimension-0);
195
+ --hpe-web-static-spacing-small: var(--hpe-web-base-dimension-400);
196
+ --hpe-web-static-spacing-xlarge: var(--hpe-web-base-dimension-1200);
197
+ --hpe-web-static-spacing-xsmall: var(--hpe-web-base-dimension-300);
198
+ --hpe-web-static-spacing-xxlarge: var(--hpe-web-base-dimension-1600);
199
+ --hpe-web-static-spacing-xxsmall: var(--hpe-web-base-dimension-200);
200
+ --hpe-web-border-width-default: var(--hpe-web-static-border-width-xsmall);
201
+ --hpe-web-border-width-large: var(--hpe-web-static-border-width-large);
202
+ --hpe-web-border-width-medium: var(--hpe-web-static-border-width-medium);
203
+ --hpe-web-border-width-none: var(--hpe-web-static-border-width-none);
204
+ --hpe-web-border-width-small: var(--hpe-web-static-border-width-small);
205
+ --hpe-web-border-width-xsmall: var(--hpe-web-static-border-width-xsmall);
12
206
  --hpe-web-heading-h1-condensed-bold-font-size: 3rem;
13
- --hpe-web-heading-h1-condensed-bold-font-weight: 400;
207
+ --hpe-web-heading-h1-condensed-bold-font-weight: 700;
14
208
  --hpe-web-heading-h1-condensed-bold-letter-spacing: 0.02em;
15
209
  --hpe-web-heading-h1-condensed-bold-line-height: 1;
16
210
  --hpe-web-heading-h1-condensed-light-font-size: 3rem;
17
- --hpe-web-heading-h1-condensed-light-font-weight: 400;
211
+ --hpe-web-heading-h1-condensed-light-font-weight: 300;
18
212
  --hpe-web-heading-h1-condensed-light-letter-spacing: 0.02em;
19
213
  --hpe-web-heading-h1-condensed-light-line-height: 1;
20
214
  --hpe-web-heading-h1-condensed-medium-font-size: 3rem;
@@ -22,15 +216,15 @@
22
216
  --hpe-web-heading-h1-condensed-medium-letter-spacing: 0.02em;
23
217
  --hpe-web-heading-h1-condensed-medium-line-height: 1;
24
218
  --hpe-web-heading-h1-default-font-size: 2.5rem;
25
- --hpe-web-heading-h1-default-font-weight: 400;
219
+ --hpe-web-heading-h1-default-font-weight: 500;
26
220
  --hpe-web-heading-h1-default-letter-spacing: -0.02em;
27
221
  --hpe-web-heading-h1-default-line-height: 1.15;
28
222
  --hpe-web-heading-h1-large-condensed-bold-font-size: 3.75rem;
29
- --hpe-web-heading-h1-large-condensed-bold-font-weight: 400;
223
+ --hpe-web-heading-h1-large-condensed-bold-font-weight: 700;
30
224
  --hpe-web-heading-h1-large-condensed-bold-letter-spacing: 0.02em;
31
225
  --hpe-web-heading-h1-large-condensed-bold-line-height: 1;
32
226
  --hpe-web-heading-h1-large-condensed-light-font-size: 3.75rem;
33
- --hpe-web-heading-h1-large-condensed-light-font-weight: 400;
227
+ --hpe-web-heading-h1-large-condensed-light-font-weight: 300;
34
228
  --hpe-web-heading-h1-large-condensed-light-letter-spacing: 0.0333em;
35
229
  --hpe-web-heading-h1-large-condensed-light-line-height: 1.5;
36
230
  --hpe-web-heading-h1-large-condensed-medium-font-size: 3.75rem;
@@ -38,35 +232,125 @@
38
232
  --hpe-web-heading-h1-large-condensed-medium-letter-spacing: 0.02em;
39
233
  --hpe-web-heading-h1-large-condensed-medium-line-height: 1;
40
234
  --hpe-web-heading-h1-large-default-font-size: 2.5rem;
41
- --hpe-web-heading-h1-large-default-font-weight: 400;
235
+ --hpe-web-heading-h1-large-default-font-weight: 500;
42
236
  --hpe-web-heading-h1-large-default-letter-spacing: -0.02em;
43
237
  --hpe-web-heading-h1-large-default-line-height: 1.15;
44
238
  --hpe-web-heading-h2-default-font-size: 2rem;
45
- --hpe-web-heading-h2-default-font-weight: 400;
239
+ --hpe-web-heading-h2-default-font-weight: 500;
46
240
  --hpe-web-heading-h2-default-letter-spacing: -0.01em;
47
241
  --hpe-web-heading-h2-default-line-height: 1.188;
48
242
  --hpe-web-heading-h3-default-font-size: 1.625rem;
49
- --hpe-web-heading-h3-default-font-weight: 400;
243
+ --hpe-web-heading-h3-default-font-weight: 500;
50
244
  --hpe-web-heading-h3-default-letter-spacing: 0em;
51
245
  --hpe-web-heading-h3-default-line-height: 1.231;
52
246
  --hpe-web-heading-h4-default-font-size: 1.25rem;
53
- --hpe-web-heading-h4-default-font-weight: 400;
247
+ --hpe-web-heading-h4-default-font-weight: 500;
54
248
  --hpe-web-heading-h4-default-letter-spacing: 0em;
55
249
  --hpe-web-heading-h4-default-line-height: 1.3;
56
250
  --hpe-web-heading-h5-default-font-size: 1rem;
57
- --hpe-web-heading-h5-default-font-weight: 400;
251
+ --hpe-web-heading-h5-default-font-weight: 500;
58
252
  --hpe-web-heading-h5-default-letter-spacing: 0em;
59
253
  --hpe-web-heading-h5-default-line-height: 1.375;
60
254
  --hpe-web-heading-h6-default-font-size: 0.875rem;
61
- --hpe-web-heading-h6-default-font-weight: 400;
255
+ --hpe-web-heading-h6-default-font-weight: 500;
62
256
  --hpe-web-heading-h6-default-letter-spacing: 0em;
63
257
  --hpe-web-heading-h6-default-line-height: 1.429;
64
- --hpe-web-icon-large-size: 1.375rem;
65
- --hpe-web-icon-medium-size: 1.125rem;
66
- --hpe-web-icon-small-size: 1rem;
67
- --hpe-web-icon-xlarge-size: 1.5rem;
68
- --hpe-web-icon-xsmall-size: 0.875rem;
69
- --hpe-web-icon-xxlarge-size: 2.25rem;
258
+ --hpe-web-icon-large-size: var(--hpe-web-base-dimension-550);
259
+ --hpe-web-icon-medium-size: var(--hpe-web-base-dimension-450);
260
+ --hpe-web-icon-small-size: var(--hpe-web-base-dimension-400);
261
+ --hpe-web-icon-xlarge-size: var(--hpe-web-base-dimension-600);
262
+ --hpe-web-icon-xsmall-size: var(--hpe-web-base-dimension-350);
263
+ --hpe-web-icon-xxlarge-size: var(--hpe-web-base-dimension-900);
264
+ --hpe-web-multi-mode-button-link-large-border-radius: 9999px;
265
+ --hpe-web-multi-mode-button-link-large-border-width: 4px;
266
+ --hpe-web-multi-mode-button-link-large-font-size: 1.125rem;
267
+ --hpe-web-multi-mode-button-link-large-gap-x: 0.5rem;
268
+ --hpe-web-multi-mode-button-link-large-icon-height: 1.25rem;
269
+ --hpe-web-multi-mode-button-link-large-icon-width: 1.25rem;
270
+ --hpe-web-multi-mode-button-link-large-line-height: 1.333;
271
+ --hpe-web-multi-mode-button-link-large-min-height: 1rem;
272
+ --hpe-web-multi-mode-button-link-large-padding-x: 0px;
273
+ --hpe-web-multi-mode-button-link-large-padding-y: 0px;
274
+ --hpe-web-multi-mode-button-link-medium-border-radius: 9999px;
275
+ --hpe-web-multi-mode-button-link-medium-border-width: 0px;
276
+ --hpe-web-multi-mode-button-link-medium-font-size: 1.125rem;
277
+ --hpe-web-multi-mode-button-link-medium-gap-x: 0.75rem;
278
+ --hpe-web-multi-mode-button-link-medium-icon-height: 1rem;
279
+ --hpe-web-multi-mode-button-link-medium-icon-width: 1rem;
280
+ --hpe-web-multi-mode-button-link-medium-line-height: 1.333;
281
+ --hpe-web-multi-mode-button-link-medium-min-height: 1.5rem;
282
+ --hpe-web-multi-mode-button-link-medium-padding-x: 0px;
283
+ --hpe-web-multi-mode-button-link-medium-padding-y: 0px;
284
+ --hpe-web-multi-mode-button-link-small-border-radius: 9999px;
285
+ --hpe-web-multi-mode-button-link-small-border-width: 4px;
286
+ --hpe-web-multi-mode-button-link-small-font-size: 1rem;
287
+ --hpe-web-multi-mode-button-link-small-gap-x: 0.5rem;
288
+ --hpe-web-multi-mode-button-link-small-icon-height: 1rem;
289
+ --hpe-web-multi-mode-button-link-small-icon-width: 1rem;
290
+ --hpe-web-multi-mode-button-link-small-line-height: 1.5;
291
+ --hpe-web-multi-mode-button-link-small-min-height: 0.875rem;
292
+ --hpe-web-multi-mode-button-link-small-padding-x: 0.125rem;
293
+ --hpe-web-multi-mode-button-link-small-padding-y: 0px;
294
+ --hpe-web-multi-mode-button-primary-large-border-radius: 9999px;
295
+ --hpe-web-multi-mode-button-primary-large-border-width: 0px;
296
+ --hpe-web-multi-mode-button-primary-large-font-size: 1.125rem;
297
+ --hpe-web-multi-mode-button-primary-large-gap-x: 0.5rem;
298
+ --hpe-web-multi-mode-button-primary-large-icon-height: 1.25rem;
299
+ --hpe-web-multi-mode-button-primary-large-icon-width: 1.25rem;
300
+ --hpe-web-multi-mode-button-primary-large-line-height: 1.333;
301
+ --hpe-web-multi-mode-button-primary-large-min-height: 3.5rem;
302
+ --hpe-web-multi-mode-button-primary-large-padding-x: 2.25rem;
303
+ --hpe-web-multi-mode-button-primary-large-padding-y: 1rem;
304
+ --hpe-web-multi-mode-button-primary-medium-border-radius: 9999px;
305
+ --hpe-web-multi-mode-button-primary-medium-border-width: 0px;
306
+ --hpe-web-multi-mode-button-primary-medium-font-size: 1.125rem;
307
+ --hpe-web-multi-mode-button-primary-medium-gap-x: 0.75rem;
308
+ --hpe-web-multi-mode-button-primary-medium-icon-height: 1rem;
309
+ --hpe-web-multi-mode-button-primary-medium-icon-width: 1rem;
310
+ --hpe-web-multi-mode-button-primary-medium-line-height: 1.333;
311
+ --hpe-web-multi-mode-button-primary-medium-min-height: 3.25rem;
312
+ --hpe-web-multi-mode-button-primary-medium-padding-x: 1.75rem;
313
+ --hpe-web-multi-mode-button-primary-medium-padding-y: 0.875rem;
314
+ --hpe-web-multi-mode-button-primary-small-border-radius: 9999px;
315
+ --hpe-web-multi-mode-button-primary-small-border-width: 0px;
316
+ --hpe-web-multi-mode-button-primary-small-font-size: 1rem;
317
+ --hpe-web-multi-mode-button-primary-small-gap-x: 0.5rem;
318
+ --hpe-web-multi-mode-button-primary-small-icon-height: 1rem;
319
+ --hpe-web-multi-mode-button-primary-small-icon-width: 1rem;
320
+ --hpe-web-multi-mode-button-primary-small-line-height: 1.5;
321
+ --hpe-web-multi-mode-button-primary-small-min-height: 3rem;
322
+ --hpe-web-multi-mode-button-primary-small-padding-x: 1.5rem;
323
+ --hpe-web-multi-mode-button-primary-small-padding-y: 0.75rem;
324
+ --hpe-web-multi-mode-button-secondary-large-border-radius: 9999px;
325
+ --hpe-web-multi-mode-button-secondary-large-border-width: 4px;
326
+ --hpe-web-multi-mode-button-secondary-large-font-size: 1.125rem;
327
+ --hpe-web-multi-mode-button-secondary-large-gap-x: 0.5rem;
328
+ --hpe-web-multi-mode-button-secondary-large-icon-height: 1.25rem;
329
+ --hpe-web-multi-mode-button-secondary-large-icon-width: 1.25rem;
330
+ --hpe-web-multi-mode-button-secondary-large-line-height: 1.333;
331
+ --hpe-web-multi-mode-button-secondary-large-min-height: 3.5rem;
332
+ --hpe-web-multi-mode-button-secondary-large-padding-x: 2.25rem;
333
+ --hpe-web-multi-mode-button-secondary-large-padding-y: 1rem;
334
+ --hpe-web-multi-mode-button-secondary-medium-border-radius: 9999px;
335
+ --hpe-web-multi-mode-button-secondary-medium-border-width: 4px;
336
+ --hpe-web-multi-mode-button-secondary-medium-font-size: 1.125rem;
337
+ --hpe-web-multi-mode-button-secondary-medium-gap-x: 0.75rem;
338
+ --hpe-web-multi-mode-button-secondary-medium-icon-height: 1rem;
339
+ --hpe-web-multi-mode-button-secondary-medium-icon-width: 1rem;
340
+ --hpe-web-multi-mode-button-secondary-medium-line-height: 1.333;
341
+ --hpe-web-multi-mode-button-secondary-medium-min-height: 3.25rem;
342
+ --hpe-web-multi-mode-button-secondary-medium-padding-x: 1.75rem;
343
+ --hpe-web-multi-mode-button-secondary-medium-padding-y: 0.875rem;
344
+ --hpe-web-multi-mode-button-secondary-small-border-radius: 9999px;
345
+ --hpe-web-multi-mode-button-secondary-small-border-width: 3px;
346
+ --hpe-web-multi-mode-button-secondary-small-font-size: 1rem;
347
+ --hpe-web-multi-mode-button-secondary-small-gap-x: 0.5rem;
348
+ --hpe-web-multi-mode-button-secondary-small-icon-height: 1rem;
349
+ --hpe-web-multi-mode-button-secondary-small-icon-width: 1rem;
350
+ --hpe-web-multi-mode-button-secondary-small-line-height: 1.5;
351
+ --hpe-web-multi-mode-button-secondary-small-min-height: 3rem;
352
+ --hpe-web-multi-mode-button-secondary-small-padding-x: 1.5rem;
353
+ --hpe-web-multi-mode-button-secondary-small-padding-y: 0.75rem;
70
354
  --hpe-web-paragraph-body-copy-font-size: 1rem;
71
355
  --hpe-web-paragraph-body-copy-font-weight: 400;
72
356
  --hpe-web-paragraph-body-copy-letter-spacing: 0em;
@@ -118,236 +402,226 @@
118
402
  --hpe-web-spacing-xsmall: 1rem;
119
403
  --hpe-web-spacing-xxlarge: 4rem;
120
404
  --hpe-web-spacing-xxsmall: 0.75rem;
121
- --hpe-web-color-background-back: #f7f7f7;
122
- --hpe-web-color-background-card: #f7f7f7;
123
- --hpe-web-color-background-carousel: #535c66;
124
- --hpe-web-color-background-carousel-disabled: #b1b9be;
125
- --hpe-web-color-background-carousel-hover: #606a70;
126
- --hpe-web-color-background-contrast: #0000000a;
127
- --hpe-web-color-background-critical: #ffecec;
128
- --hpe-web-color-background-default: #ffffff;
129
- --hpe-web-color-background-disabled: #0000000a;
130
- --hpe-web-color-background-floating: #ffffff;
131
- --hpe-web-color-background-neutral: #535c66;
132
- --hpe-web-color-background-neutral-strong: #292d3a;
133
- --hpe-web-color-background-neutral-weak: #d4d8db;
134
- --hpe-web-color-background-ok: #d1ffee;
135
- --hpe-web-color-background-primary: #01a982;
136
- --hpe-web-color-background-primary-strong: #068667;
137
- --hpe-web-color-background-sunken: #e6e8e9;
138
- --hpe-web-color-background-warning: #fff3dd;
139
- --hpe-web-color-border-critical: #cc1f1a;
140
- --hpe-web-color-border-default: #b1b9be;
141
- --hpe-web-color-border-disabled: #0000001f;
142
- --hpe-web-color-border-ok: #009a71;
143
- --hpe-web-color-border-primary: #01a982;
144
- --hpe-web-color-border-selected: #006750;
145
- --hpe-web-color-border-strong: #535c66;
146
- --hpe-web-color-border-warning: #d36d00;
147
- --hpe-web-color-border-weak: #d4d8db;
148
- --hpe-web-color-decorative-black: #000000;
149
- --hpe-web-color-decorative-blue: #0070f8;
150
- --hpe-web-color-decorative-brand: #01a982;
151
- --hpe-web-color-decorative-cyan: #62e5f6;
152
- --hpe-web-color-decorative-green: #05cc93;
153
- --hpe-web-color-decorative-neutral: #7d8a92;
154
- --hpe-web-color-decorative-neutral-strong: #606a70;
155
- --hpe-web-color-decorative-purple: #7764fc;
156
- --hpe-web-color-decorative-white: #ffffff;
157
- --hpe-web-color-foreground-critical: #ec3331;
158
- --hpe-web-color-foreground-ok: #009a71;
159
- --hpe-web-color-foreground-primary: #006750;
160
- --hpe-web-color-foreground-unknown: #7d8a92;
161
- --hpe-web-color-foreground-warning: #d36d00;
162
- --hpe-web-color-icon-critical: #cc1f1a;
163
- --hpe-web-color-icon-default: #3e4550;
164
- --hpe-web-color-icon-disabled: #0000003d;
165
- --hpe-web-color-icon-info: #0055da;
166
- --hpe-web-color-icon-neutral: #292d3a;
167
- --hpe-web-color-icon-ok: #009a71;
168
- --hpe-web-color-icon-on-strong: #ffffff;
169
- --hpe-web-color-icon-primary: #01a982;
170
- --hpe-web-color-icon-primary-strong: #006750;
171
- --hpe-web-color-icon-strong: #292d3a;
172
- --hpe-web-color-icon-warning: #d36d00;
173
- --hpe-web-color-icon-weak: #606a70;
174
- --hpe-web-color-logo-element: #01a982;
175
- --hpe-web-color-logo-logo-text: #000000;
176
- --hpe-web-color-text-critical: #cc1f1a;
177
- --hpe-web-color-text-default: #3e4550;
178
- --hpe-web-color-text-disabled: #0000003d;
179
- --hpe-web-color-text-neutral-strong: #292d3a;
180
- --hpe-web-color-text-ok: #009a71;
181
- --hpe-web-color-text-on-strong: #ffffff;
182
- --hpe-web-color-text-primary: #01a982;
183
- --hpe-web-color-text-primary-strong: #068667;
184
- --hpe-web-color-text-strong: #292d3a;
185
- --hpe-web-color-text-warning: #d36d00;
186
- --hpe-web-color-text-weak: #606a70;
405
+ --hpe-web-color-background-back: var(--hpe-web-base-color-grey-50);
406
+ --hpe-web-color-background-card: var(--hpe-web-base-color-grey-50);
407
+ --hpe-web-color-background-carousel: var(--hpe-web-base-color-grey-700);
408
+ --hpe-web-color-background-carousel-disabled: var(--hpe-web-base-color-grey-500);
409
+ --hpe-web-color-background-carousel-hover: var(--hpe-web-base-color-grey-650);
410
+ --hpe-web-color-background-contrast: var(--hpe-web-base-color-black-opacity4);
411
+ --hpe-web-color-background-critical: var(--hpe-web-base-color-red-50);
412
+ --hpe-web-color-background-default: var(--hpe-web-base-color-white-100);
413
+ --hpe-web-color-background-disabled: var(--hpe-web-base-color-black-opacity4);
414
+ --hpe-web-color-background-floating: var(--hpe-web-base-color-white-100);
415
+ --hpe-web-color-background-neutral: var(--hpe-web-base-color-grey-700);
416
+ --hpe-web-color-background-neutral-strong: var(--hpe-web-base-color-grey-1000);
417
+ --hpe-web-color-background-neutral-weak: var(--hpe-web-base-color-grey-400);
418
+ --hpe-web-color-background-ok: var(--hpe-web-base-color-green-100);
419
+ --hpe-web-color-background-primary: var(--hpe-web-base-color-green-600);
420
+ --hpe-web-color-background-primary-strong: var(--hpe-web-base-color-green-700);
421
+ --hpe-web-color-background-sunken: var(--hpe-web-base-color-grey-200);
422
+ --hpe-web-color-background-warning: var(--hpe-web-base-color-orange-50);
423
+ --hpe-web-color-border-critical: var(--hpe-web-base-color-red-800);
424
+ --hpe-web-color-border-default: var(--hpe-web-base-color-grey-500);
425
+ --hpe-web-color-border-disabled: var(--hpe-web-base-color-black-opacity12);
426
+ --hpe-web-color-border-ok: var(--hpe-web-base-color-green-650);
427
+ --hpe-web-color-border-primary: var(--hpe-web-base-color-green-600);
428
+ --hpe-web-color-border-selected: var(--hpe-web-base-color-green-800);
429
+ --hpe-web-color-border-strong: var(--hpe-web-base-color-grey-700);
430
+ --hpe-web-color-border-warning: var(--hpe-web-color-foreground-warning);
431
+ --hpe-web-color-border-weak: var(--hpe-web-base-color-grey-400);
432
+ --hpe-web-color-decorative-black: var(--hpe-web-base-color-black-opacity100);
433
+ --hpe-web-color-decorative-blue: var(--hpe-web-base-color-blue-500);
434
+ --hpe-web-color-decorative-brand: var(--hpe-web-base-color-green-600);
435
+ --hpe-web-color-decorative-cyan: var(--hpe-web-base-color-cyan-200);
436
+ --hpe-web-color-decorative-green: var(--hpe-web-base-color-green-550);
437
+ --hpe-web-color-decorative-neutral: var(--hpe-web-base-color-grey-600);
438
+ --hpe-web-color-decorative-neutral-strong: var(--hpe-web-base-color-grey-650);
439
+ --hpe-web-color-decorative-purple: var(--hpe-web-base-color-purple-400);
440
+ --hpe-web-color-decorative-white: var(--hpe-web-base-color-white-100);
441
+ --hpe-web-color-foreground-critical: var(--hpe-web-base-color-red-600);
442
+ --hpe-web-color-foreground-ok: var(--hpe-web-base-color-green-650);
443
+ --hpe-web-color-foreground-primary: var(--hpe-web-base-color-green-800);
444
+ --hpe-web-color-foreground-unknown: var(--hpe-web-base-color-grey-600);
445
+ --hpe-web-color-foreground-warning: var(--hpe-web-base-color-orange-600);
446
+ --hpe-web-color-icon-critical: var(--hpe-web-base-color-red-800);
447
+ --hpe-web-color-icon-default: var(--hpe-web-color-text-default);
448
+ --hpe-web-color-icon-disabled: var(--hpe-web-color-text-disabled);
449
+ --hpe-web-color-icon-info: var(--hpe-web-base-color-blue-700);
450
+ --hpe-web-color-icon-neutral: var(--hpe-web-base-color-grey-1000);
451
+ --hpe-web-color-icon-ok: var(--hpe-web-base-color-green-650);
452
+ --hpe-web-color-icon-on-strong: var(--hpe-web-base-color-white-100);
453
+ --hpe-web-color-icon-primary: var(--hpe-web-color-decorative-brand);
454
+ --hpe-web-color-icon-primary-strong: var(--hpe-web-base-color-green-800);
455
+ --hpe-web-color-icon-strong: var(--hpe-web-color-text-strong);
456
+ --hpe-web-color-icon-warning: var(--hpe-web-base-color-orange-600);
457
+ --hpe-web-color-icon-weak: var(--hpe-web-color-text-weak);
458
+ --hpe-web-color-logo-element: var(--hpe-web-base-color-green-600);
459
+ --hpe-web-color-logo-logo-text: var(--hpe-web-base-color-black-opacity100);
460
+ --hpe-web-color-text-critical: var(--hpe-web-base-color-red-800);
461
+ --hpe-web-color-text-default: var(--hpe-web-base-color-grey-800);
462
+ --hpe-web-color-text-disabled: var(--hpe-web-base-color-black-opacity24);
463
+ --hpe-web-color-text-neutral-strong: var(--hpe-web-base-color-grey-1000);
464
+ --hpe-web-color-text-ok: var(--hpe-web-base-color-green-650);
465
+ --hpe-web-color-text-on-strong: var(--hpe-web-base-color-white-100);
466
+ --hpe-web-color-text-primary: var(--hpe-web-base-color-green-600);
467
+ --hpe-web-color-text-primary-strong: var(--hpe-web-base-color-green-700);
468
+ --hpe-web-color-text-strong: var(--hpe-web-base-color-grey-1000);
469
+ --hpe-web-color-text-warning: var(--hpe-web-base-color-orange-600);
470
+ --hpe-web-color-text-weak: var(--hpe-web-base-color-grey-650);
187
471
  --hpe-web-color-transparent: #00000000;
188
- --hpe-web-button-carousel-disabled-background: #b1b9be;
189
- --hpe-web-button-carousel-disabled-border-color: #00000000;
190
- --hpe-web-button-carousel-disabled-icon-color: #ffffff;
191
- --hpe-web-button-carousel-hover-background: #606a70;
192
- --hpe-web-button-carousel-hover-border-color: #00000000;
193
- --hpe-web-button-carousel-hover-icon-color: #ffffff;
194
- --hpe-web-button-carousel-rest-background: #535c66;
195
- --hpe-web-button-carousel-rest-border-color: #00000000;
196
- --hpe-web-button-carousel-rest-icon-color: #ffffff;
197
- --hpe-web-button-link-large-border-radius: 9999px;
198
- --hpe-web-button-link-large-border-width: 4px;
199
- --hpe-web-button-link-large-font-size: 1.25rem;
200
- --hpe-web-button-link-large-gap-x: 0.75rem;
201
- --hpe-web-button-link-large-icon-height: 1.25rem;
202
- --hpe-web-button-link-large-icon-width: 1.25rem;
203
- --hpe-web-button-link-large-line-height: 1.4;
204
- --hpe-web-button-link-large-min-height: 1.25rem;
205
- --hpe-web-button-link-large-padding-x: 0px;
206
- --hpe-web-button-link-large-padding-y: 0px;
207
- --hpe-web-button-link-medium-border-radius: 9999px;
208
- --hpe-web-button-link-medium-border-width: 4px;
209
- --hpe-web-button-link-medium-font-size: 1.125rem;
210
- --hpe-web-button-link-medium-gap-x: 0.75rem;
211
- --hpe-web-button-link-medium-icon-height: 1rem;
212
- --hpe-web-button-link-medium-icon-width: 1rem;
213
- --hpe-web-button-link-medium-line-height: 1.333;
214
- --hpe-web-button-link-medium-min-height: 1.5rem;
215
- --hpe-web-button-link-medium-padding-x: 0px;
216
- --hpe-web-button-link-medium-padding-y: 0px;
217
- --hpe-web-button-link-neutral-disabled-rest-background: #00000000;
218
- --hpe-web-button-link-neutral-disabled-rest-border-color: #00000000;
219
- --hpe-web-button-link-neutral-disabled-rest-font-weight: 400;
220
- --hpe-web-button-link-neutral-disabled-rest-icon-color: #0000003d;
221
- --hpe-web-button-link-neutral-disabled-rest-text-color: #0000003d;
222
- --hpe-web-button-link-neutral-hover-background: #00000000;
223
- --hpe-web-button-link-neutral-hover-border-color: #00000000;
224
- --hpe-web-button-link-neutral-hover-font-weight: 400;
225
- --hpe-web-button-link-neutral-hover-icon-color: #292d3a;
226
- --hpe-web-button-link-neutral-hover-text-color: #292d3a;
227
- --hpe-web-button-link-neutral-rest-background: #00000000;
228
- --hpe-web-button-link-neutral-rest-border-color: #00000000;
229
- --hpe-web-button-link-neutral-rest-font-weight: 400;
230
- --hpe-web-button-link-neutral-rest-icon-color: #292d3a;
231
- --hpe-web-button-link-neutral-rest-text-color: #292d3a;
232
- --hpe-web-button-link-primary-disabled-rest-background: #00000000;
233
- --hpe-web-button-link-primary-disabled-rest-border-color: #00000000;
234
- --hpe-web-button-link-primary-disabled-rest-font-weight: 400;
235
- --hpe-web-button-link-primary-disabled-rest-icon-color: #0000003d;
236
- --hpe-web-button-link-primary-disabled-rest-text-color: #0000003d;
237
- --hpe-web-button-link-primary-hover-background: #00000000;
238
- --hpe-web-button-link-primary-hover-border-color: #00000000;
239
- --hpe-web-button-link-primary-hover-font-weight: 400;
240
- --hpe-web-button-link-primary-hover-icon-color: #068667;
241
- --hpe-web-button-link-primary-hover-text-color: #068667;
242
- --hpe-web-button-link-primary-rest-background: #00000000;
243
- --hpe-web-button-link-primary-rest-border-color: #00000000;
244
- --hpe-web-button-link-primary-rest-font-weight: 400;
245
- --hpe-web-button-link-primary-rest-icon-color: #01a982;
246
- --hpe-web-button-link-primary-rest-text-color: #01a982;
247
- --hpe-web-button-link-small-border-radius: 9999px;
248
- --hpe-web-button-link-small-border-width: 4px;
249
- --hpe-web-button-link-small-font-size: 1rem;
250
- --hpe-web-button-link-small-gap-x: 0.5rem;
251
- --hpe-web-button-link-small-icon-height: 1rem;
252
- --hpe-web-button-link-small-icon-width: 1rem;
253
- --hpe-web-button-link-small-line-height: 1.5;
254
- --hpe-web-button-link-small-min-height: 0.875rem;
255
- --hpe-web-button-link-small-padding-x: 0px;
256
- --hpe-web-button-link-small-padding-y: 0px;
472
+
473
+ /* ── Component — single-value aliases into the semantic layer. ── */
474
+ --hpe-web-button-carousel-disabled-background: var(--hpe-web-color-background-carousel-disabled);
475
+ --hpe-web-button-carousel-disabled-border-color: var(--hpe-web-color-transparent);
476
+ --hpe-web-button-carousel-disabled-icon-color: var(--hpe-web-color-icon-on-strong);
477
+ --hpe-web-button-carousel-hover-background: var(--hpe-web-color-background-carousel-hover);
478
+ --hpe-web-button-carousel-hover-border-color: var(--hpe-web-color-transparent);
479
+ --hpe-web-button-carousel-hover-icon-color: var(--hpe-web-color-icon-on-strong);
480
+ --hpe-web-button-carousel-rest-background: var(--hpe-web-color-background-carousel);
481
+ --hpe-web-button-carousel-rest-border-color: var(--hpe-web-color-transparent);
482
+ --hpe-web-button-carousel-rest-icon-color: var(--hpe-web-color-icon-on-strong);
483
+ --hpe-web-button-link-large-border-radius: var(--hpe-web-multi-mode-button-link-large-border-radius);
484
+ --hpe-web-button-link-large-border-width: var(--hpe-web-multi-mode-button-link-large-border-width);
485
+ --hpe-web-button-link-large-font-size: var(--hpe-web-multi-mode-button-link-large-font-size);
486
+ --hpe-web-button-link-large-gap-x: var(--hpe-web-multi-mode-button-link-large-gap-x);
487
+ --hpe-web-button-link-large-line-height: var(--hpe-web-multi-mode-button-link-large-line-height);
488
+ --hpe-web-button-link-large-min-height: var(--hpe-web-multi-mode-button-link-large-min-height);
489
+ --hpe-web-button-link-large-padding-x: var(--hpe-web-multi-mode-button-link-large-padding-x);
490
+ --hpe-web-button-link-large-padding-y: var(--hpe-web-multi-mode-button-link-large-padding-y);
491
+ --hpe-web-button-link-medium-border-radius: var(--hpe-web-multi-mode-button-link-medium-border-radius);
492
+ --hpe-web-button-link-medium-border-width: var(--hpe-web-multi-mode-button-link-medium-border-width);
493
+ --hpe-web-button-link-medium-font-size: var(--hpe-web-multi-mode-button-link-medium-font-size);
494
+ --hpe-web-button-link-medium-gap-x: var(--hpe-web-multi-mode-button-link-medium-gap-x);
495
+ --hpe-web-button-link-medium-line-height: var(--hpe-web-multi-mode-button-link-medium-line-height);
496
+ --hpe-web-button-link-medium-min-height: var(--hpe-web-multi-mode-button-link-medium-min-height);
497
+ --hpe-web-button-link-medium-padding-x: var(--hpe-web-multi-mode-button-link-medium-padding-x);
498
+ --hpe-web-button-link-medium-padding-y: var(--hpe-web-multi-mode-button-link-medium-padding-y);
499
+ --hpe-web-button-link-neutral-disabled-rest-background: var(--hpe-web-color-transparent);
500
+ --hpe-web-button-link-neutral-disabled-rest-border-color: var(--hpe-web-color-transparent);
501
+ --hpe-web-button-link-neutral-disabled-rest-font-weight: var(--hpe-web-button-link-primary-rest-font-weight);
502
+ --hpe-web-button-link-neutral-disabled-rest-icon-color: var(--hpe-web-color-icon-disabled);
503
+ --hpe-web-button-link-neutral-disabled-rest-text-color: var(--hpe-web-color-text-disabled);
504
+ --hpe-web-button-link-neutral-hover-background: var(--hpe-web-color-transparent);
505
+ --hpe-web-button-link-neutral-hover-border-color: var(--hpe-web-button-primary-rest-border-color);
506
+ --hpe-web-button-link-neutral-hover-font-weight: var(--hpe-web-button-link-primary-hover-font-weight);
507
+ --hpe-web-button-link-neutral-hover-icon-color: var(--hpe-web-color-text-neutral-strong);
508
+ --hpe-web-button-link-neutral-hover-text-color: var(--hpe-web-color-text-neutral-strong);
509
+ --hpe-web-button-link-neutral-rest-background: var(--hpe-web-color-transparent);
510
+ --hpe-web-button-link-neutral-rest-border-color: var(--hpe-web-color-transparent);
511
+ --hpe-web-button-link-neutral-rest-font-weight: var(--hpe-web-button-link-primary-rest-font-weight);
512
+ --hpe-web-button-link-neutral-rest-icon-color: var(--hpe-web-color-icon-strong);
513
+ --hpe-web-button-link-neutral-rest-text-color: var(--hpe-web-color-text-strong);
514
+ --hpe-web-button-link-primary-disabled-rest-background: var(--hpe-web-color-transparent);
515
+ --hpe-web-button-link-primary-disabled-rest-border-color: var(--hpe-web-color-transparent);
516
+ --hpe-web-button-link-primary-disabled-rest-font-weight: var(--hpe-web-button-link-primary-rest-font-weight);
517
+ --hpe-web-button-link-primary-disabled-rest-icon-color: var(--hpe-web-color-text-disabled);
518
+ --hpe-web-button-link-primary-disabled-rest-text-color: var(--hpe-web-color-text-disabled);
519
+ --hpe-web-button-link-primary-hover-background: var(--hpe-web-color-transparent);
520
+ --hpe-web-button-link-primary-hover-border-color: var(--hpe-web-color-transparent);
521
+ --hpe-web-button-link-primary-hover-font-weight: 700;
522
+ --hpe-web-button-link-primary-hover-icon-color: var(--hpe-web-color-text-primary-strong);
523
+ --hpe-web-button-link-primary-hover-text-color: var(--hpe-web-color-text-primary-strong);
524
+ --hpe-web-button-link-primary-rest-background: var(--hpe-web-color-transparent);
525
+ --hpe-web-button-link-primary-rest-border-color: var(--hpe-web-color-transparent);
526
+ --hpe-web-button-link-primary-rest-font-weight: 500;
527
+ --hpe-web-button-link-primary-rest-icon-color: var(--hpe-web-color-text-primary);
528
+ --hpe-web-button-link-primary-rest-text-color: var(--hpe-web-color-text-primary);
529
+ --hpe-web-button-link-small-border-radius: var(--hpe-web-multi-mode-button-link-small-border-radius);
530
+ --hpe-web-button-link-small-border-width: var(--hpe-web-multi-mode-button-link-small-border-width);
531
+ --hpe-web-button-link-small-font-size: var(--hpe-web-multi-mode-button-link-small-font-size);
532
+ --hpe-web-button-link-small-gap-x: var(--hpe-web-multi-mode-button-link-small-gap-x);
533
+ --hpe-web-button-link-small-line-height: var(--hpe-web-multi-mode-button-link-small-line-height);
534
+ --hpe-web-button-link-small-min-height: var(--hpe-web-multi-mode-button-link-small-min-height);
535
+ --hpe-web-button-link-small-padding-x: var(--hpe-web-multi-mode-button-link-small-padding-x);
536
+ --hpe-web-button-link-small-padding-y: var(--hpe-web-multi-mode-button-link-small-padding-y);
257
537
  --hpe-web-button-play-hover-background: #ffffff;
258
- --hpe-web-button-play-hover-border-color: #00000000;
259
- --hpe-web-button-play-hover-icon-color: #006750;
538
+ --hpe-web-button-play-hover-border-color: var(--hpe-web-color-transparent);
539
+ --hpe-web-button-play-hover-icon-color: var(--hpe-web-color-icon-primary-strong);
260
540
  --hpe-web-button-play-rest-background: #ffffff;
261
- --hpe-web-button-play-rest-border-color: #00000000;
262
- --hpe-web-button-play-rest-icon-color: #01a982;
263
- --hpe-web-button-primary-disabled-rest-background: #d4d8db;
264
- --hpe-web-button-primary-disabled-rest-border-color: #00000000;
265
- --hpe-web-button-primary-disabled-rest-font-weight: 400;
266
- --hpe-web-button-primary-disabled-rest-icon-color: #0000003d;
267
- --hpe-web-button-primary-disabled-rest-text-color: #0000003d;
268
- --hpe-web-button-primary-hover-background: #535c66;
269
- --hpe-web-button-primary-hover-border-color: #00000000;
270
- --hpe-web-button-primary-hover-font-weight: 400;
271
- --hpe-web-button-primary-hover-icon-color: #ffffff;
272
- --hpe-web-button-primary-hover-text-color: #ffffff;
273
- --hpe-web-button-primary-large-border-radius: 9999px;
274
- --hpe-web-button-primary-large-border-width: 0px;
275
- --hpe-web-button-primary-large-font-size: 1.25rem;
276
- --hpe-web-button-primary-large-gap-x: 0.75rem;
277
- --hpe-web-button-primary-large-icon-height: 1.25rem;
278
- --hpe-web-button-primary-large-icon-width: 1.25rem;
279
- --hpe-web-button-primary-large-line-height: 1.4;
280
- --hpe-web-button-primary-large-min-height: 3.75rem;
281
- --hpe-web-button-primary-large-padding-x: 2.25rem;
282
- --hpe-web-button-primary-large-padding-y: 1rem;
283
- --hpe-web-button-primary-medium-border-radius: 9999px;
284
- --hpe-web-button-primary-medium-border-width: 0px;
285
- --hpe-web-button-primary-medium-font-size: 1.125rem;
286
- --hpe-web-button-primary-medium-gap-x: 0.75rem;
287
- --hpe-web-button-primary-medium-icon-height: 1rem;
288
- --hpe-web-button-primary-medium-icon-width: 1rem;
289
- --hpe-web-button-primary-medium-line-height: 1.333;
290
- --hpe-web-button-primary-medium-min-height: 3.25rem;
291
- --hpe-web-button-primary-medium-padding-x: 1.75rem;
292
- --hpe-web-button-primary-medium-padding-y: 0.875rem;
293
- --hpe-web-button-primary-rest-background: #292d3a;
294
- --hpe-web-button-primary-rest-border-color: #00000000;
295
- --hpe-web-button-primary-rest-font-weight: 400;
296
- --hpe-web-button-primary-rest-icon-color: #ffffff;
297
- --hpe-web-button-primary-rest-text-color: #ffffff;
298
- --hpe-web-button-primary-small-border-radius: 9999px;
299
- --hpe-web-button-primary-small-border-width: 0px;
300
- --hpe-web-button-primary-small-font-size: 1rem;
301
- --hpe-web-button-primary-small-gap-x: 0.5rem;
302
- --hpe-web-button-primary-small-icon-height: 1rem;
303
- --hpe-web-button-primary-small-icon-width: 1rem;
304
- --hpe-web-button-primary-small-line-height: 1.5;
305
- --hpe-web-button-primary-small-min-height: 3rem;
306
- --hpe-web-button-primary-small-padding-x: 1.5rem;
307
- --hpe-web-button-primary-small-padding-y: 0.75rem;
308
- --hpe-web-button-secondary-disabled-rest-background: #00000000;
309
- --hpe-web-button-secondary-disabled-rest-border-color: #d4d8db;
310
- --hpe-web-button-secondary-disabled-rest-font-weight: 400;
311
- --hpe-web-button-secondary-disabled-rest-icon-color: #0000003d;
312
- --hpe-web-button-secondary-disabled-rest-text-color: #0000003d;
313
- --hpe-web-button-secondary-hover-background: #00000000;
314
- --hpe-web-button-secondary-hover-border-color: #006750;
315
- --hpe-web-button-secondary-hover-font-weight: 400;
316
- --hpe-web-button-secondary-hover-icon-color: #292d3a;
317
- --hpe-web-button-secondary-hover-text-color: #292d3a;
318
- --hpe-web-button-secondary-large-border-radius: 9999px;
319
- --hpe-web-button-secondary-large-border-width: 4px;
320
- --hpe-web-button-secondary-large-font-size: 1.25rem;
321
- --hpe-web-button-secondary-large-gap-x: 0.75rem;
322
- --hpe-web-button-secondary-large-icon-height: 1.25rem;
323
- --hpe-web-button-secondary-large-icon-width: 1.25rem;
324
- --hpe-web-button-secondary-large-line-height: 1.4;
325
- --hpe-web-button-secondary-large-min-height: 3.75rem;
326
- --hpe-web-button-secondary-large-padding-x: 2.25rem;
327
- --hpe-web-button-secondary-large-padding-y: 1rem;
328
- --hpe-web-button-secondary-medium-border-radius: 9999px;
329
- --hpe-web-button-secondary-medium-border-width: 4px;
330
- --hpe-web-button-secondary-medium-font-size: 1.125rem;
331
- --hpe-web-button-secondary-medium-gap-x: 0.75rem;
332
- --hpe-web-button-secondary-medium-icon-height: 1rem;
333
- --hpe-web-button-secondary-medium-icon-width: 1rem;
334
- --hpe-web-button-secondary-medium-line-height: 1.333;
335
- --hpe-web-button-secondary-medium-min-height: 3.25rem;
336
- --hpe-web-button-secondary-medium-padding-x: 1.75rem;
337
- --hpe-web-button-secondary-medium-padding-y: 0.875rem;
338
- --hpe-web-button-secondary-rest-background: #00000000;
339
- --hpe-web-button-secondary-rest-border-color: #01a982;
340
- --hpe-web-button-secondary-rest-font-weight: 400;
341
- --hpe-web-button-secondary-rest-icon-color: #292d3a;
342
- --hpe-web-button-secondary-rest-text-color: #292d3a;
343
- --hpe-web-button-secondary-small-border-radius: 9999px;
344
- --hpe-web-button-secondary-small-border-width: 3px;
345
- --hpe-web-button-secondary-small-font-size: 1rem;
346
- --hpe-web-button-secondary-small-gap-x: 0.5rem;
347
- --hpe-web-button-secondary-small-icon-height: 1rem;
348
- --hpe-web-button-secondary-small-icon-width: 1rem;
349
- --hpe-web-button-secondary-small-line-height: 1.5;
350
- --hpe-web-button-secondary-small-min-height: 3rem;
351
- --hpe-web-button-secondary-small-padding-x: 1.5rem;
352
- --hpe-web-button-secondary-small-padding-y: 0.75rem;
541
+ --hpe-web-button-play-rest-border-color: var(--hpe-web-color-transparent);
542
+ --hpe-web-button-play-rest-icon-color: var(--hpe-web-color-icon-primary);
543
+ --hpe-web-button-primary-disabled-rest-background: var(--hpe-web-color-background-neutral-weak);
544
+ --hpe-web-button-primary-disabled-rest-border-color: var(--hpe-web-color-transparent);
545
+ --hpe-web-button-primary-disabled-rest-font-weight: var(--hpe-web-button-primary-rest-font-weight);
546
+ --hpe-web-button-primary-disabled-rest-icon-color: var(--hpe-web-color-icon-disabled);
547
+ --hpe-web-button-primary-disabled-rest-text-color: var(--hpe-web-color-text-disabled);
548
+ --hpe-web-button-primary-hover-background: var(--hpe-web-color-background-neutral);
549
+ --hpe-web-button-primary-hover-border-color: var(--hpe-web-color-transparent);
550
+ --hpe-web-button-primary-hover-font-weight: var(--hpe-web-button-primary-rest-font-weight);
551
+ --hpe-web-button-primary-hover-icon-color: var(--hpe-web-color-text-on-strong);
552
+ --hpe-web-button-primary-hover-text-color: var(--hpe-web-color-text-on-strong);
553
+ --hpe-web-button-primary-large-border-radius: var(--hpe-web-multi-mode-button-primary-large-border-radius);
554
+ --hpe-web-button-primary-large-border-width: var(--hpe-web-multi-mode-button-primary-large-border-width);
555
+ --hpe-web-button-primary-large-font-size: var(--hpe-web-multi-mode-button-primary-large-font-size);
556
+ --hpe-web-button-primary-large-gap-x: var(--hpe-web-multi-mode-button-primary-large-gap-x);
557
+ --hpe-web-button-primary-large-icon-width: var(--hpe-web-multi-mode-button-primary-large-icon-width);
558
+ --hpe-web-button-primary-large-line-height: var(--hpe-web-multi-mode-button-primary-large-line-height);
559
+ --hpe-web-button-primary-large-min-height: var(--hpe-web-multi-mode-button-primary-large-min-height);
560
+ --hpe-web-button-primary-large-padding-x: var(--hpe-web-multi-mode-button-primary-large-padding-x);
561
+ --hpe-web-button-primary-large-padding-y: var(--hpe-web-multi-mode-button-primary-large-padding-y);
562
+ --hpe-web-button-primary-medium-border-radius: var(--hpe-web-multi-mode-button-primary-medium-border-radius);
563
+ --hpe-web-button-primary-medium-border-width: var(--hpe-web-multi-mode-button-primary-medium-border-width);
564
+ --hpe-web-button-primary-medium-font-size: var(--hpe-web-multi-mode-button-primary-medium-font-size);
565
+ --hpe-web-button-primary-medium-gap-x: var(--hpe-web-multi-mode-button-primary-medium-gap-x);
566
+ --hpe-web-button-primary-medium-icon-width: var(--hpe-web-multi-mode-button-primary-medium-icon-width);
567
+ --hpe-web-button-primary-medium-line-height: var(--hpe-web-multi-mode-button-primary-medium-line-height);
568
+ --hpe-web-button-primary-medium-min-height: var(--hpe-web-multi-mode-button-primary-medium-min-height);
569
+ --hpe-web-button-primary-medium-padding-x: var(--hpe-web-multi-mode-button-primary-medium-padding-x);
570
+ --hpe-web-button-primary-medium-padding-y: var(--hpe-web-multi-mode-button-primary-medium-padding-y);
571
+ --hpe-web-button-primary-rest-background: var(--hpe-web-color-background-neutral-strong);
572
+ --hpe-web-button-primary-rest-border-color: var(--hpe-web-color-transparent);
573
+ --hpe-web-button-primary-rest-font-weight: 500;
574
+ --hpe-web-button-primary-rest-icon-color: var(--hpe-web-color-text-on-strong);
575
+ --hpe-web-button-primary-rest-text-color: var(--hpe-web-color-text-on-strong);
576
+ --hpe-web-button-primary-small-border-radius: var(--hpe-web-multi-mode-button-primary-small-border-radius);
577
+ --hpe-web-button-primary-small-border-width: var(--hpe-web-multi-mode-button-primary-small-border-width);
578
+ --hpe-web-button-primary-small-font-size: var(--hpe-web-multi-mode-button-primary-small-font-size);
579
+ --hpe-web-button-primary-small-gap-x: var(--hpe-web-multi-mode-button-primary-small-gap-x);
580
+ --hpe-web-button-primary-small-icon-width: var(--hpe-web-multi-mode-button-primary-small-icon-width);
581
+ --hpe-web-button-primary-small-line-height: var(--hpe-web-multi-mode-button-primary-small-line-height);
582
+ --hpe-web-button-primary-small-min-height: var(--hpe-web-multi-mode-button-primary-small-min-height);
583
+ --hpe-web-button-primary-small-padding-x: var(--hpe-web-multi-mode-button-primary-small-padding-x);
584
+ --hpe-web-button-primary-small-padding-y: var(--hpe-web-multi-mode-button-primary-small-padding-y);
585
+ --hpe-web-button-secondary-disabled-rest-background: var(--hpe-web-color-transparent);
586
+ --hpe-web-button-secondary-disabled-rest-border-color: var(--hpe-web-color-background-neutral-weak);
587
+ --hpe-web-button-secondary-disabled-rest-font-weight: var(--hpe-web-button-secondary-rest-font-weight);
588
+ --hpe-web-button-secondary-disabled-rest-icon-color: var(--hpe-web-color-icon-disabled);
589
+ --hpe-web-button-secondary-disabled-rest-text-color: var(--hpe-web-color-text-disabled);
590
+ --hpe-web-button-secondary-hover-background: var(--hpe-web-color-transparent);
591
+ --hpe-web-button-secondary-hover-border-color: var(--hpe-web-color-border-selected);
592
+ --hpe-web-button-secondary-hover-font-weight: var(--hpe-web-button-secondary-rest-font-weight);
593
+ --hpe-web-button-secondary-hover-icon-color: var(--hpe-web-color-icon-strong);
594
+ --hpe-web-button-secondary-hover-text-color: var(--hpe-web-color-text-strong);
595
+ --hpe-web-button-secondary-large-border-radius: var(--hpe-web-multi-mode-button-secondary-large-border-radius);
596
+ --hpe-web-button-secondary-large-border-width: var(--hpe-web-multi-mode-button-secondary-large-border-width);
597
+ --hpe-web-button-secondary-large-font-size: var(--hpe-web-multi-mode-button-secondary-large-font-size);
598
+ --hpe-web-button-secondary-large-gap-x: var(--hpe-web-multi-mode-button-secondary-large-gap-x);
599
+ --hpe-web-button-secondary-large-icon-height: var(--hpe-web-multi-mode-button-secondary-large-icon-height);
600
+ --hpe-web-button-secondary-large-line-height: var(--hpe-web-multi-mode-button-secondary-large-line-height);
601
+ --hpe-web-button-secondary-large-min-height: var(--hpe-web-multi-mode-button-secondary-large-min-height);
602
+ --hpe-web-button-secondary-large-padding-x: var(--hpe-web-multi-mode-button-secondary-large-padding-x);
603
+ --hpe-web-button-secondary-large-padding-y: var(--hpe-web-multi-mode-button-secondary-large-padding-y);
604
+ --hpe-web-button-secondary-medium-border-radius: var(--hpe-web-multi-mode-button-secondary-medium-border-radius);
605
+ --hpe-web-button-secondary-medium-border-width: var(--hpe-web-multi-mode-button-secondary-medium-border-width);
606
+ --hpe-web-button-secondary-medium-font-size: var(--hpe-web-multi-mode-button-secondary-medium-font-size);
607
+ --hpe-web-button-secondary-medium-gap-x: var(--hpe-web-multi-mode-button-secondary-medium-gap-x);
608
+ --hpe-web-button-secondary-medium-icon-height: var(--hpe-web-multi-mode-button-secondary-medium-icon-height);
609
+ --hpe-web-button-secondary-medium-line-height: var(--hpe-web-multi-mode-button-secondary-medium-line-height);
610
+ --hpe-web-button-secondary-medium-min-height: var(--hpe-web-multi-mode-button-secondary-medium-min-height);
611
+ --hpe-web-button-secondary-medium-padding-x: var(--hpe-web-multi-mode-button-secondary-medium-padding-x);
612
+ --hpe-web-button-secondary-medium-padding-y: var(--hpe-web-multi-mode-button-secondary-medium-padding-y);
613
+ --hpe-web-button-secondary-rest-background: var(--hpe-web-color-transparent);
614
+ --hpe-web-button-secondary-rest-border-color: var(--hpe-web-color-border-primary);
615
+ --hpe-web-button-secondary-rest-font-weight: 500;
616
+ --hpe-web-button-secondary-rest-icon-color: var(--hpe-web-color-icon-strong);
617
+ --hpe-web-button-secondary-rest-text-color: var(--hpe-web-color-text-strong);
618
+ --hpe-web-button-secondary-small-border-radius: var(--hpe-web-multi-mode-button-secondary-small-border-radius);
619
+ --hpe-web-button-secondary-small-border-width: var(--hpe-web-multi-mode-button-secondary-small-border-width);
620
+ --hpe-web-button-secondary-small-font-size: var(--hpe-web-multi-mode-button-secondary-small-font-size);
621
+ --hpe-web-button-secondary-small-gap-x: var(--hpe-web-multi-mode-button-secondary-small-gap-x);
622
+ --hpe-web-button-secondary-small-icon-height: var(--hpe-web-multi-mode-button-secondary-small-icon-height);
623
+ --hpe-web-button-secondary-small-line-height: var(--hpe-web-multi-mode-button-secondary-small-line-height);
624
+ --hpe-web-button-secondary-small-min-height: var(--hpe-web-multi-mode-button-secondary-small-min-height);
625
+ --hpe-web-button-secondary-small-padding-x: var(--hpe-web-multi-mode-button-secondary-small-padding-x);
626
+ --hpe-web-button-secondary-small-padding-y: var(--hpe-web-multi-mode-button-secondary-small-padding-y);
353
627
  }