@hpe-web/design-tokens 1.2.0 → 1.2.1

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 (19) hide show
  1. package/README.md +8 -3
  2. package/dist/css/locales/de.tokens.css +56 -0
  3. package/dist/css/locales/es.tokens.css +56 -0
  4. package/dist/css/locales/fr.tokens.css +56 -0
  5. package/dist/css/locales/it.tokens.css +56 -0
  6. package/dist/css/locales/ja.tokens.css +71 -0
  7. package/dist/css/locales/ko.tokens.css +71 -0
  8. package/dist/css/tokens.css +142 -161
  9. package/dist/css/tokens.dark.css +54 -43
  10. package/dist/css/tokens.md-lg.css +49 -49
  11. package/dist/css/tokens.xl.css +51 -51
  12. package/package.json +1 -1
  13. package/src/component/button.json +212 -422
  14. package/src/locales.json +8 -8
  15. package/src/semantic/color.dark.json +446 -161
  16. package/src/semantic/color.light.json +466 -158
  17. package/src/semantic/dimension.md-lg.json +21 -21
  18. package/src/semantic/dimension.xl.json +21 -21
  19. package/src/semantic/dimension.xs-sm.json +21 -21
package/dist/css/tokens.css CHANGED
@@ -3,100 +3,64 @@
3
3
  */
4
4
 
5
5
  :root, [data-theme="light"], .light-theme {
6
- --hpe-web-deprecated-deprecated-gradient-element-green-stop0: #05cc93;
7
- --hpe-web-deprecated-deprecated-gradient-element-green-stop100: #ffffff00;
8
- --hpe-web-deprecated-deprecated-gradient-element-neutral-stop0: #292d3a45;
9
- --hpe-web-deprecated-deprecated-gradient-neutral-stop100: #1d1f27;
10
- --hpe-web-deprecated-deprecated-gradient-video-overlay-stop0: #00000000;
11
- --hpe-web-deprecated-deprecated-gradient-video-overlay-stop100: #00000066;
12
- --hpe-web-deprecated-depreacted-multi-mode-button-carousel-disabled-background: #a5a5a9;
13
- --hpe-web-deprecated-depreacted-multi-mode-button-carousel-disabled-border-color: #00000000;
14
- --hpe-web-deprecated-depreacted-multi-mode-button-carousel-disabled-icon-color: #292d3a;
15
- --hpe-web-deprecated-depreacted-multi-mode-button-carousel-hover-background: #d4d4d4;
16
- --hpe-web-deprecated-depreacted-multi-mode-button-carousel-hover-border-color: #00000000;
17
- --hpe-web-deprecated-depreacted-multi-mode-button-carousel-hover-icon-color: #292d3a;
18
- --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-background: #e6e8e9;
19
- --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-border-color: #00000000;
20
- --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-deprecated-background-front: #1d1f27;
21
- --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-deprecated-border-focus: #2ad2c9;
22
- --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-deprecated-component: #292d3a;
23
- --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-deprecated-component-hover: #535c66;
24
- --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-icon-color: #068667;
25
- --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-icon-color-2: #292d3a;
26
- --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-stop0: #1d1f2700;
27
- --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-stop100: #5c667200;
28
- --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-stop15: #5c6672fc;
29
- --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-stop28: #5c6672f5;
30
- --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-stop38: #5c6672e8;
31
- --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-stop47: #5c6672d9;
32
- --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-stop54: #5c6672c7;
33
- --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-stop60: #5c6672b3;
34
- --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-stop65: #5c66729e;
35
- --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-stop70: #5c667285;
36
- --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-stop73: #5c66726e;
37
- --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-stop77: #5c667257;
38
- --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-stop80: #5c667242;
39
- --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-stop84: #5c66722e;
40
- --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-stop88: #5c66721a;
41
- --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-stop94: #5c66720d;
42
- --hpe-web-border-width-default: 0.0625rem;
43
- --hpe-web-border-width-large: 0.375rem;
44
- --hpe-web-border-width-medium: 0.25rem;
6
+ --hpe-web-border-width-default: 1px;
7
+ --hpe-web-border-width-large: 6px;
8
+ --hpe-web-border-width-medium: 4px;
45
9
  --hpe-web-border-width-none: 0px;
46
- --hpe-web-border-width-small: 0.125rem;
47
- --hpe-web-border-width-xsmall: 0.0625rem;
10
+ --hpe-web-border-width-small: 2px;
11
+ --hpe-web-border-width-xsmall: 1px;
48
12
  --hpe-web-heading-h1-condensed-bold-font-size: 3rem;
49
13
  --hpe-web-heading-h1-condensed-bold-font-weight: 400;
50
- --hpe-web-heading-h1-condensed-bold-letter-spacing: 0.06rem;
51
- --hpe-web-heading-h1-condensed-bold-line-height: 48;
14
+ --hpe-web-heading-h1-condensed-bold-letter-spacing: 0.96px;
15
+ --hpe-web-heading-h1-condensed-bold-line-height: 0.021;
52
16
  --hpe-web-heading-h1-condensed-light-font-size: 3rem;
53
17
  --hpe-web-heading-h1-condensed-light-font-weight: 400;
54
- --hpe-web-heading-h1-condensed-light-letter-spacing: 0.06rem;
55
- --hpe-web-heading-h1-condensed-light-line-height: 48;
18
+ --hpe-web-heading-h1-condensed-light-letter-spacing: 0.96px;
19
+ --hpe-web-heading-h1-condensed-light-line-height: 0.021;
56
20
  --hpe-web-heading-h1-condensed-medium-font-size: 3rem;
57
21
  --hpe-web-heading-h1-condensed-medium-font-weight: 400;
58
- --hpe-web-heading-h1-condensed-medium-letter-spacing: 0.06rem;
59
- --hpe-web-heading-h1-condensed-medium-line-height: 48;
22
+ --hpe-web-heading-h1-condensed-medium-letter-spacing: 0.96px;
23
+ --hpe-web-heading-h1-condensed-medium-line-height: 0.021;
60
24
  --hpe-web-heading-h1-default-font-size: 2.5rem;
61
25
  --hpe-web-heading-h1-default-font-weight: 400;
62
- --hpe-web-heading-h1-default-letter-spacing: -0.05rem;
63
- --hpe-web-heading-h1-default-line-height: 46;
26
+ --hpe-web-heading-h1-default-letter-spacing: -0.8px;
27
+ --hpe-web-heading-h1-default-line-height: 0.029;
64
28
  --hpe-web-heading-h1-large-condensed-bold-font-size: 3.75rem;
65
29
  --hpe-web-heading-h1-large-condensed-bold-font-weight: 400;
66
- --hpe-web-heading-h1-large-condensed-bold-letter-spacing: 0.075rem;
67
- --hpe-web-heading-h1-large-condensed-bold-line-height: 60;
30
+ --hpe-web-heading-h1-large-condensed-bold-letter-spacing: 1.2px;
31
+ --hpe-web-heading-h1-large-condensed-bold-line-height: 0.017;
68
32
  --hpe-web-heading-h1-large-condensed-light-font-size: 3.75rem;
69
33
  --hpe-web-heading-h1-large-condensed-light-font-weight: 400;
70
- --hpe-web-heading-h1-large-condensed-light-letter-spacing: 0.125rem;
71
- --hpe-web-heading-h1-large-condensed-light-line-height: 90;
34
+ --hpe-web-heading-h1-large-condensed-light-letter-spacing: 2px;
35
+ --hpe-web-heading-h1-large-condensed-light-line-height: 0.025;
72
36
  --hpe-web-heading-h1-large-condensed-medium-font-size: 3.75rem;
73
37
  --hpe-web-heading-h1-large-condensed-medium-font-weight: 400;
74
- --hpe-web-heading-h1-large-condensed-medium-letter-spacing: 0.075rem;
75
- --hpe-web-heading-h1-large-condensed-medium-line-height: 60;
38
+ --hpe-web-heading-h1-large-condensed-medium-letter-spacing: 1.2px;
39
+ --hpe-web-heading-h1-large-condensed-medium-line-height: 0.017;
76
40
  --hpe-web-heading-h1-large-default-font-size: 2.5rem;
77
41
  --hpe-web-heading-h1-large-default-font-weight: 400;
78
- --hpe-web-heading-h1-large-default-letter-spacing: -0.05rem;
79
- --hpe-web-heading-h1-large-default-line-height: 46;
42
+ --hpe-web-heading-h1-large-default-letter-spacing: -0.8px;
43
+ --hpe-web-heading-h1-large-default-line-height: 0.029;
80
44
  --hpe-web-heading-h2-default-font-size: 2rem;
81
45
  --hpe-web-heading-h2-default-font-weight: 400;
82
- --hpe-web-heading-h2-default-letter-spacing: -0.02rem;
83
- --hpe-web-heading-h2-default-line-height: 38;
46
+ --hpe-web-heading-h2-default-letter-spacing: -0.32px;
47
+ --hpe-web-heading-h2-default-line-height: 0.037;
84
48
  --hpe-web-heading-h3-default-font-size: 1.625rem;
85
49
  --hpe-web-heading-h3-default-font-weight: 400;
86
50
  --hpe-web-heading-h3-default-letter-spacing: 0px;
87
- --hpe-web-heading-h3-default-line-height: 32;
51
+ --hpe-web-heading-h3-default-line-height: 0.047;
88
52
  --hpe-web-heading-h4-default-font-size: 1.25rem;
89
53
  --hpe-web-heading-h4-default-font-weight: 400;
90
54
  --hpe-web-heading-h4-default-letter-spacing: 0px;
91
- --hpe-web-heading-h4-default-line-height: 26;
55
+ --hpe-web-heading-h4-default-line-height: 0.065;
92
56
  --hpe-web-heading-h5-default-font-size: 1rem;
93
57
  --hpe-web-heading-h5-default-font-weight: 400;
94
58
  --hpe-web-heading-h5-default-letter-spacing: 0px;
95
- --hpe-web-heading-h5-default-line-height: 22;
59
+ --hpe-web-heading-h5-default-line-height: 0.086;
96
60
  --hpe-web-heading-h6-default-font-size: 0.875rem;
97
61
  --hpe-web-heading-h6-default-font-weight: 400;
98
62
  --hpe-web-heading-h6-default-letter-spacing: 0px;
99
- --hpe-web-heading-h6-default-line-height: 20;
63
+ --hpe-web-heading-h6-default-line-height: 0.102;
100
64
  --hpe-web-icon-large-size: 1.375rem;
101
65
  --hpe-web-icon-medium-size: 1.125rem;
102
66
  --hpe-web-icon-small-size: 1rem;
@@ -106,41 +70,41 @@
106
70
  --hpe-web-paragraph-body-copy-font-size: 1rem;
107
71
  --hpe-web-paragraph-body-copy-font-weight: 400;
108
72
  --hpe-web-paragraph-body-copy-letter-spacing: 0px;
109
- --hpe-web-paragraph-body-copy-line-height: 24;
73
+ --hpe-web-paragraph-body-copy-line-height: 0.094;
110
74
  --hpe-web-paragraph-disclaimer-font-size: 0.75rem;
111
75
  --hpe-web-paragraph-disclaimer-font-weight: 400;
112
76
  --hpe-web-paragraph-disclaimer-letter-spacing: 0px;
113
- --hpe-web-paragraph-disclaimer-line-height: 18;
77
+ --hpe-web-paragraph-disclaimer-line-height: 0.125;
114
78
  --hpe-web-paragraph-large-body-copy-font-size: 1.25rem;
115
79
  --hpe-web-paragraph-large-body-copy-font-weight: 400;
116
- --hpe-web-paragraph-large-body-copy-letter-spacing: -0.0125rem;
117
- --hpe-web-paragraph-large-body-copy-line-height: 30;
80
+ --hpe-web-paragraph-large-body-copy-letter-spacing: -0.2px;
81
+ --hpe-web-paragraph-large-body-copy-line-height: 0.075;
118
82
  --hpe-web-paragraph-small-body-copy-font-size: 0.875rem;
119
83
  --hpe-web-paragraph-small-body-copy-font-weight: 400;
120
84
  --hpe-web-paragraph-small-body-copy-letter-spacing: 0px;
121
- --hpe-web-paragraph-small-body-copy-line-height: 20;
85
+ --hpe-web-paragraph-small-body-copy-line-height: 0.102;
122
86
  --hpe-web-quote-large-font-size: 2rem;
123
87
  --hpe-web-quote-large-font-weight: 400;
124
- --hpe-web-quote-large-letter-spacing: -0.04rem;
125
- --hpe-web-quote-large-line-height: 42;
88
+ --hpe-web-quote-large-letter-spacing: -0.64px;
89
+ --hpe-web-quote-large-line-height: 0.041;
126
90
  --hpe-web-quote-medium-font-size: 1.75rem;
127
91
  --hpe-web-quote-medium-font-weight: 400;
128
- --hpe-web-quote-medium-letter-spacing: -0.0175rem;
129
- --hpe-web-quote-medium-line-height: 38;
92
+ --hpe-web-quote-medium-letter-spacing: -0.28px;
93
+ --hpe-web-quote-medium-line-height: 0.048;
130
94
  --hpe-web-quote-small-font-size: 1.5rem;
131
95
  --hpe-web-quote-small-font-weight: 400;
132
- --hpe-web-quote-small-letter-spacing: -0.015rem;
133
- --hpe-web-quote-small-line-height: 34;
134
- --hpe-web-radius-full: 624.9375rem;
135
- --hpe-web-radius-hair: 0.0625rem;
136
- --hpe-web-radius-large: 1rem;
137
- --hpe-web-radius-medium: 0.75rem;
96
+ --hpe-web-quote-small-letter-spacing: -0.24px;
97
+ --hpe-web-quote-small-line-height: 0.059;
98
+ --hpe-web-radius-full: 9999px;
99
+ --hpe-web-radius-hair: 1px;
100
+ --hpe-web-radius-large: 16px;
101
+ --hpe-web-radius-medium: 12px;
138
102
  --hpe-web-radius-none: 0px;
139
- --hpe-web-radius-small: 0.5rem;
140
- --hpe-web-radius-xlarge: 1.5rem;
141
- --hpe-web-radius-xsmall: 0.375rem;
142
- --hpe-web-radius-xxlarge: 2rem;
143
- --hpe-web-radius-xxsmall: 0.25rem;
103
+ --hpe-web-radius-small: 8px;
104
+ --hpe-web-radius-xlarge: 24px;
105
+ --hpe-web-radius-xsmall: 6px;
106
+ --hpe-web-radius-xxlarge: 32px;
107
+ --hpe-web-radius-xxsmall: 4px;
144
108
  --hpe-web-spacing-3xlarge: 6rem;
145
109
  --hpe-web-spacing-3xsmall: 0.5rem;
146
110
  --hpe-web-spacing-4xlarge: 10rem;
@@ -156,110 +120,127 @@
156
120
  --hpe-web-spacing-xxsmall: 0.75rem;
157
121
  --hpe-web-color-background-back: #f7f7f7;
158
122
  --hpe-web-color-background-card: #f7f7f7;
159
- --hpe-web-color-background-carousel: #535c66;
160
- --hpe-web-color-background-carousel-disabled: #b1b9be;
161
- --hpe-web-color-background-carousel-hover: #606a70;
123
+ --hpe-web-color-background-card-hover: #e6e8e9;
124
+ --hpe-web-color-background-component: #e6e8e9;
125
+ --hpe-web-color-background-component-disabled: #a5a5a9;
126
+ --hpe-web-color-background-component-hover: #d4d4d4;
162
127
  --hpe-web-color-background-contrast: #0000000a;
163
- --hpe-web-color-background-critical: #ffecec;
128
+ --hpe-web-color-background-critical: #cc1f1a;
164
129
  --hpe-web-color-background-default: #ffffff;
165
- --hpe-web-color-background-disabled: #0000000a;
166
- --hpe-web-color-background-floating: #ffffff;
130
+ --hpe-web-color-background-focus: #2ad2c9;
131
+ --hpe-web-color-background-front: #ffffff;
167
132
  --hpe-web-color-background-neutral: #535c66;
168
133
  --hpe-web-color-background-neutral-strong: #292d3a;
169
134
  --hpe-web-color-background-neutral-weak: #d4d8db;
170
- --hpe-web-color-background-ok: #d1ffee;
135
+ --hpe-web-color-background-ok: #009a71;
171
136
  --hpe-web-color-background-primary: #01a982;
172
137
  --hpe-web-color-background-primary-strong: #068667;
173
- --hpe-web-color-background-sunken: #e6e8e9;
174
- --hpe-web-color-background-warning: #fff3dd;
138
+ --hpe-web-color-background-warning: #d36d00;
175
139
  --hpe-web-color-border-critical: #cc1f1a;
176
- --hpe-web-color-border-default: #b1b9be;
177
- --hpe-web-color-border-disabled: #0000001f;
140
+ --hpe-web-color-border-default: #a0a2a8;
141
+ --hpe-web-color-border-focus: #2ad2c9;
178
142
  --hpe-web-color-border-ok: #009a71;
179
143
  --hpe-web-color-border-primary: #01a982;
180
- --hpe-web-color-border-selected: #006750;
144
+ --hpe-web-color-border-primary-strong: #068667;
181
145
  --hpe-web-color-border-strong: #535c66;
182
146
  --hpe-web-color-border-warning: #d36d00;
183
- --hpe-web-color-border-weak: #d4d8db;
147
+ --hpe-web-color-border-weak: #d1d1d1;
184
148
  --hpe-web-color-decorative-black: #000000;
185
149
  --hpe-web-color-decorative-blue: #0070f8;
186
150
  --hpe-web-color-decorative-brand: #01a982;
187
151
  --hpe-web-color-decorative-cyan: #62e5f6;
188
152
  --hpe-web-color-decorative-green: #05cc93;
189
153
  --hpe-web-color-decorative-neutral: #7d8a92;
190
- --hpe-web-color-decorative-neutral-strong: #606a70;
154
+ --hpe-web-color-decorative-neutral-hover: #606a70;
191
155
  --hpe-web-color-decorative-purple: #7764fc;
192
156
  --hpe-web-color-decorative-white: #ffffff;
193
- --hpe-web-color-foreground-critical: #ec3331;
194
- --hpe-web-color-foreground-ok: #009a71;
195
- --hpe-web-color-foreground-primary: #006750;
196
- --hpe-web-color-foreground-unknown: #7d8a92;
197
- --hpe-web-color-foreground-warning: #d36d00;
157
+ --hpe-web-color-gradient-element-green-stop0: #05cc93;
158
+ --hpe-web-color-gradient-element-green-stop100: #ffffff00;
159
+ --hpe-web-color-gradient-element-neutral-stop0: #292d3a45;
160
+ --hpe-web-color-gradient-element-neutral-stop100: #ffffff00;
161
+ --hpe-web-color-gradient-element-neutral-stop15: #393d4840;
162
+ --hpe-web-color-gradient-element-neutral-stop28: #494e573d;
163
+ --hpe-web-color-gradient-element-neutral-stop38: #5a5f6538;
164
+ --hpe-web-color-gradient-element-neutral-stop47: #6a707333;
165
+ --hpe-web-color-gradient-element-neutral-stop54: #7b818130;
166
+ --hpe-web-color-gradient-element-neutral-stop60: #8c92902b;
167
+ --hpe-web-color-gradient-element-neutral-stop65: #9da39e26;
168
+ --hpe-web-color-gradient-element-neutral-stop70: #adb4ac21;
169
+ --hpe-web-color-gradient-element-neutral-stop73: #bec5bb1f;
170
+ --hpe-web-color-gradient-element-neutral-stop77: #cfd6c91a;
171
+ --hpe-web-color-gradient-element-neutral-stop80: #e0e7d714;
172
+ --hpe-web-color-gradient-element-neutral-stop84: #f0f8e512;
173
+ --hpe-web-color-gradient-element-neutral-stop88: #fafff20d;
174
+ --hpe-web-color-gradient-element-neutral-stop94: #ffffff08;
175
+ --hpe-web-color-gradient-neutral-stop0: #1d1f2700;
176
+ --hpe-web-color-gradient-neutral-stop100: #1d1f27;
177
+ --hpe-web-color-gradient-video-overlay-stop0: #00000000;
178
+ --hpe-web-color-gradient-video-overlay-stop100: #00000066;
198
179
  --hpe-web-color-icon-critical: #cc1f1a;
199
- --hpe-web-color-icon-default: #3e4550;
200
- --hpe-web-color-icon-disabled: #0000003d;
201
- --hpe-web-color-icon-info: #0055da;
180
+ --hpe-web-color-icon-default: #67686e;
181
+ --hpe-web-color-icon-disabled: #a0a2ab;
182
+ --hpe-web-color-icon-focus: #2ad2c9;
202
183
  --hpe-web-color-icon-neutral: #292d3a;
203
184
  --hpe-web-color-icon-ok: #009a71;
204
- --hpe-web-color-icon-on-strong: #ffffff;
205
185
  --hpe-web-color-icon-primary: #01a982;
206
- --hpe-web-color-icon-primary-strong: #006750;
186
+ --hpe-web-color-icon-primary-strong: #005f49;
207
187
  --hpe-web-color-icon-strong: #292d3a;
208
188
  --hpe-web-color-icon-warning: #d36d00;
209
- --hpe-web-color-icon-weak: #606a70;
189
+ --hpe-web-color-icon-weak: #676767;
210
190
  --hpe-web-color-logo-element: #01a982;
211
191
  --hpe-web-color-logo-logo-text: #000000;
192
+ --hpe-web-color-text-body: #67686e;
212
193
  --hpe-web-color-text-critical: #cc1f1a;
213
- --hpe-web-color-text-default: #3e4550;
214
- --hpe-web-color-text-disabled: #0000003d;
215
- --hpe-web-color-text-neutral-strong: #292d3a;
194
+ --hpe-web-color-text-disabled: #a0a2ab;
195
+ --hpe-web-color-text-focus: #2ad2c9;
196
+ --hpe-web-color-text-header: #292d3a;
197
+ --hpe-web-color-text-neutral-strong: #21242e;
216
198
  --hpe-web-color-text-ok: #009a71;
217
- --hpe-web-color-text-on-strong: #ffffff;
218
- --hpe-web-color-text-primary: #01a982;
219
- --hpe-web-color-text-primary-strong: #008567;
220
- --hpe-web-color-text-strong: #292d3a;
199
+ --hpe-web-color-text-on-neutral: #ffffff;
200
+ --hpe-web-color-text-primary: #068667;
201
+ --hpe-web-color-text-primary-strong: #005f49;
221
202
  --hpe-web-color-text-warning: #d36d00;
222
- --hpe-web-color-text-weak: #606a70;
203
+ --hpe-web-color-text-weak: #676767;
223
204
  --hpe-web-color-transparent: #00000000;
224
- --hpe-web-button-carousel-disabled-background: #b1b9be;
205
+ --hpe-web-button-carousel-disabled-background: #a5a5a9;
225
206
  --hpe-web-button-carousel-disabled-border-color: #00000000;
226
- --hpe-web-button-carousel-disabled-icon-color: #ffffff;
227
- --hpe-web-button-carousel-hover-background: #606a70;
207
+ --hpe-web-button-carousel-disabled-icon-color: #292d3a;
208
+ --hpe-web-button-carousel-hover-background: #d4d4d4;
228
209
  --hpe-web-button-carousel-hover-border-color: #00000000;
229
- --hpe-web-button-carousel-hover-icon-color: #ffffff;
230
- --hpe-web-button-carousel-rest-background: #535c66;
210
+ --hpe-web-button-carousel-hover-icon-color: #292d3a;
211
+ --hpe-web-button-carousel-rest-background: #e6e8e9;
231
212
  --hpe-web-button-carousel-rest-border-color: #00000000;
232
- --hpe-web-button-carousel-rest-icon-color: #ffffff;
233
- --hpe-web-button-link-large-border-radius: 624.9375rem;
234
- --hpe-web-button-link-large-border-width: 0.25rem;
213
+ --hpe-web-button-carousel-rest-icon-color: #292d3a;
214
+ --hpe-web-button-link-large-border-radius: 9999px;
215
+ --hpe-web-button-link-large-border-width: 4px;
235
216
  --hpe-web-button-link-large-font-size: 1.25rem;
236
217
  --hpe-web-button-link-large-gap-x: 0.75rem;
237
218
  --hpe-web-button-link-large-icon-height: 1.25rem;
238
219
  --hpe-web-button-link-large-icon-width: 1.25rem;
239
- --hpe-web-button-link-large-line-height: 28;
220
+ --hpe-web-button-link-large-line-height: 1.4;
240
221
  --hpe-web-button-link-large-min-height: 1.25rem;
241
222
  --hpe-web-button-link-large-padding-x: 0px;
242
223
  --hpe-web-button-link-large-padding-y: 0px;
243
- --hpe-web-button-link-medium-border-radius: 624.9375rem;
244
- --hpe-web-button-link-medium-border-width: 0.25rem;
224
+ --hpe-web-button-link-medium-border-radius: 9999px;
225
+ --hpe-web-button-link-medium-border-width: 4px;
245
226
  --hpe-web-button-link-medium-font-size: 1.125rem;
246
227
  --hpe-web-button-link-medium-gap-x: 0.75rem;
247
228
  --hpe-web-button-link-medium-icon-height: 1rem;
248
229
  --hpe-web-button-link-medium-icon-width: 1rem;
249
- --hpe-web-button-link-medium-line-height: 24;
230
+ --hpe-web-button-link-medium-line-height: 1.333;
250
231
  --hpe-web-button-link-medium-min-height: 1.5rem;
251
232
  --hpe-web-button-link-medium-padding-x: 0px;
252
233
  --hpe-web-button-link-medium-padding-y: 0px;
253
234
  --hpe-web-button-link-neutral-disabled-rest-background: #00000000;
254
235
  --hpe-web-button-link-neutral-disabled-rest-border-color: #00000000;
255
236
  --hpe-web-button-link-neutral-disabled-rest-font-weight: 400;
256
- --hpe-web-button-link-neutral-disabled-rest-icon-color: #0000003d;
257
- --hpe-web-button-link-neutral-disabled-rest-text-color: #0000003d;
237
+ --hpe-web-button-link-neutral-disabled-rest-icon-color: #a0a2ab;
238
+ --hpe-web-button-link-neutral-disabled-rest-text-color: #a0a2ab;
258
239
  --hpe-web-button-link-neutral-hover-background: #00000000;
259
240
  --hpe-web-button-link-neutral-hover-border-color: #00000000;
260
241
  --hpe-web-button-link-neutral-hover-font-weight: 400;
261
- --hpe-web-button-link-neutral-hover-icon-color: #292d3a;
262
- --hpe-web-button-link-neutral-hover-text-color: #292d3a;
242
+ --hpe-web-button-link-neutral-hover-icon-color: #21242e;
243
+ --hpe-web-button-link-neutral-hover-text-color: #21242e;
263
244
  --hpe-web-button-link-neutral-rest-background: #00000000;
264
245
  --hpe-web-button-link-neutral-rest-border-color: #00000000;
265
246
  --hpe-web-button-link-neutral-rest-font-weight: 400;
@@ -268,25 +249,25 @@
268
249
  --hpe-web-button-link-primary-disabled-rest-background: #00000000;
269
250
  --hpe-web-button-link-primary-disabled-rest-border-color: #00000000;
270
251
  --hpe-web-button-link-primary-disabled-rest-font-weight: 400;
271
- --hpe-web-button-link-primary-disabled-rest-icon-color: #0000003d;
272
- --hpe-web-button-link-primary-disabled-rest-text-color: #0000003d;
252
+ --hpe-web-button-link-primary-disabled-rest-icon-color: #a0a2ab;
253
+ --hpe-web-button-link-primary-disabled-rest-text-color: #a0a2ab;
273
254
  --hpe-web-button-link-primary-hover-background: #00000000;
274
255
  --hpe-web-button-link-primary-hover-border-color: #00000000;
275
256
  --hpe-web-button-link-primary-hover-font-weight: 400;
276
- --hpe-web-button-link-primary-hover-icon-color: #008567;
277
- --hpe-web-button-link-primary-hover-text-color: #008567;
257
+ --hpe-web-button-link-primary-hover-icon-color: #005f49;
258
+ --hpe-web-button-link-primary-hover-text-color: #005f49;
278
259
  --hpe-web-button-link-primary-rest-background: #00000000;
279
260
  --hpe-web-button-link-primary-rest-border-color: #00000000;
280
261
  --hpe-web-button-link-primary-rest-font-weight: 400;
281
- --hpe-web-button-link-primary-rest-icon-color: #01a982;
282
- --hpe-web-button-link-primary-rest-text-color: #01a982;
283
- --hpe-web-button-link-small-border-radius: 624.9375rem;
284
- --hpe-web-button-link-small-border-width: 0.25rem;
262
+ --hpe-web-button-link-primary-rest-icon-color: #068667;
263
+ --hpe-web-button-link-primary-rest-text-color: #068667;
264
+ --hpe-web-button-link-small-border-radius: 9999px;
265
+ --hpe-web-button-link-small-border-width: 4px;
285
266
  --hpe-web-button-link-small-font-size: 1rem;
286
267
  --hpe-web-button-link-small-gap-x: 0.5rem;
287
268
  --hpe-web-button-link-small-icon-height: 1rem;
288
269
  --hpe-web-button-link-small-icon-width: 1rem;
289
- --hpe-web-button-link-small-line-height: 24;
270
+ --hpe-web-button-link-small-line-height: 1.5;
290
271
  --hpe-web-button-link-small-min-height: 0.875rem;
291
272
  --hpe-web-button-link-small-padding-x: 0px;
292
273
  --hpe-web-button-link-small-padding-y: 0px;
@@ -299,30 +280,30 @@
299
280
  --hpe-web-button-primary-disabled-rest-background: #d4d8db;
300
281
  --hpe-web-button-primary-disabled-rest-border-color: #00000000;
301
282
  --hpe-web-button-primary-disabled-rest-font-weight: 400;
302
- --hpe-web-button-primary-disabled-rest-icon-color: #0000003d;
303
- --hpe-web-button-primary-disabled-rest-text-color: #0000003d;
283
+ --hpe-web-button-primary-disabled-rest-icon-color: #a0a2ab;
284
+ --hpe-web-button-primary-disabled-rest-text-color: #a0a2ab;
304
285
  --hpe-web-button-primary-hover-background: #535c66;
305
286
  --hpe-web-button-primary-hover-border-color: #00000000;
306
287
  --hpe-web-button-primary-hover-font-weight: 400;
307
288
  --hpe-web-button-primary-hover-icon-color: #ffffff;
308
289
  --hpe-web-button-primary-hover-text-color: #ffffff;
309
- --hpe-web-button-primary-large-border-radius: 624.9375rem;
290
+ --hpe-web-button-primary-large-border-radius: 9999px;
310
291
  --hpe-web-button-primary-large-border-width: 0px;
311
292
  --hpe-web-button-primary-large-font-size: 1.25rem;
312
293
  --hpe-web-button-primary-large-gap-x: 0.75rem;
313
294
  --hpe-web-button-primary-large-icon-height: 1.25rem;
314
295
  --hpe-web-button-primary-large-icon-width: 1.25rem;
315
- --hpe-web-button-primary-large-line-height: 28;
296
+ --hpe-web-button-primary-large-line-height: 1.4;
316
297
  --hpe-web-button-primary-large-min-height: 3.75rem;
317
298
  --hpe-web-button-primary-large-padding-x: 2.25rem;
318
299
  --hpe-web-button-primary-large-padding-y: 1rem;
319
- --hpe-web-button-primary-medium-border-radius: 624.9375rem;
300
+ --hpe-web-button-primary-medium-border-radius: 9999px;
320
301
  --hpe-web-button-primary-medium-border-width: 0px;
321
302
  --hpe-web-button-primary-medium-font-size: 1.125rem;
322
303
  --hpe-web-button-primary-medium-gap-x: 0.75rem;
323
304
  --hpe-web-button-primary-medium-icon-height: 1rem;
324
305
  --hpe-web-button-primary-medium-icon-width: 1rem;
325
- --hpe-web-button-primary-medium-line-height: 24;
306
+ --hpe-web-button-primary-medium-line-height: 1.333;
326
307
  --hpe-web-button-primary-medium-min-height: 3.25rem;
327
308
  --hpe-web-button-primary-medium-padding-x: 1.75rem;
328
309
  --hpe-web-button-primary-medium-padding-y: 0.875rem;
@@ -331,43 +312,43 @@
331
312
  --hpe-web-button-primary-rest-font-weight: 400;
332
313
  --hpe-web-button-primary-rest-icon-color: #ffffff;
333
314
  --hpe-web-button-primary-rest-text-color: #ffffff;
334
- --hpe-web-button-primary-small-border-radius: 624.9375rem;
315
+ --hpe-web-button-primary-small-border-radius: 9999px;
335
316
  --hpe-web-button-primary-small-border-width: 0px;
336
317
  --hpe-web-button-primary-small-font-size: 1rem;
337
318
  --hpe-web-button-primary-small-gap-x: 0.5rem;
338
319
  --hpe-web-button-primary-small-icon-height: 1rem;
339
320
  --hpe-web-button-primary-small-icon-width: 1rem;
340
- --hpe-web-button-primary-small-line-height: 24;
321
+ --hpe-web-button-primary-small-line-height: 1.5;
341
322
  --hpe-web-button-primary-small-min-height: 3rem;
342
323
  --hpe-web-button-primary-small-padding-x: 1.5rem;
343
324
  --hpe-web-button-primary-small-padding-y: 0.75rem;
344
325
  --hpe-web-button-secondary-disabled-rest-background: #00000000;
345
326
  --hpe-web-button-secondary-disabled-rest-border-color: #d4d8db;
346
327
  --hpe-web-button-secondary-disabled-rest-font-weight: 400;
347
- --hpe-web-button-secondary-disabled-rest-icon-color: #0000003d;
348
- --hpe-web-button-secondary-disabled-rest-text-color: #0000003d;
328
+ --hpe-web-button-secondary-disabled-rest-icon-color: #a0a2ab;
329
+ --hpe-web-button-secondary-disabled-rest-text-color: #a0a2ab;
349
330
  --hpe-web-button-secondary-hover-background: #00000000;
350
- --hpe-web-button-secondary-hover-border-color: #006750;
331
+ --hpe-web-button-secondary-hover-border-color: #068667;
351
332
  --hpe-web-button-secondary-hover-font-weight: 400;
352
333
  --hpe-web-button-secondary-hover-icon-color: #292d3a;
353
334
  --hpe-web-button-secondary-hover-text-color: #292d3a;
354
- --hpe-web-button-secondary-large-border-radius: 624.9375rem;
355
- --hpe-web-button-secondary-large-border-width: 0.25rem;
335
+ --hpe-web-button-secondary-large-border-radius: 9999px;
336
+ --hpe-web-button-secondary-large-border-width: 4px;
356
337
  --hpe-web-button-secondary-large-font-size: 1.25rem;
357
338
  --hpe-web-button-secondary-large-gap-x: 0.75rem;
358
339
  --hpe-web-button-secondary-large-icon-height: 1.25rem;
359
340
  --hpe-web-button-secondary-large-icon-width: 1.25rem;
360
- --hpe-web-button-secondary-large-line-height: 28;
341
+ --hpe-web-button-secondary-large-line-height: 1.4;
361
342
  --hpe-web-button-secondary-large-min-height: 3.75rem;
362
343
  --hpe-web-button-secondary-large-padding-x: 2.25rem;
363
344
  --hpe-web-button-secondary-large-padding-y: 1rem;
364
- --hpe-web-button-secondary-medium-border-radius: 624.9375rem;
365
- --hpe-web-button-secondary-medium-border-width: 0.25rem;
345
+ --hpe-web-button-secondary-medium-border-radius: 9999px;
346
+ --hpe-web-button-secondary-medium-border-width: 4px;
366
347
  --hpe-web-button-secondary-medium-font-size: 1.125rem;
367
348
  --hpe-web-button-secondary-medium-gap-x: 0.75rem;
368
349
  --hpe-web-button-secondary-medium-icon-height: 1rem;
369
350
  --hpe-web-button-secondary-medium-icon-width: 1rem;
370
- --hpe-web-button-secondary-medium-line-height: 24;
351
+ --hpe-web-button-secondary-medium-line-height: 1.333;
371
352
  --hpe-web-button-secondary-medium-min-height: 3.25rem;
372
353
  --hpe-web-button-secondary-medium-padding-x: 1.75rem;
373
354
  --hpe-web-button-secondary-medium-padding-y: 0.875rem;
@@ -376,13 +357,13 @@
376
357
  --hpe-web-button-secondary-rest-font-weight: 400;
377
358
  --hpe-web-button-secondary-rest-icon-color: #292d3a;
378
359
  --hpe-web-button-secondary-rest-text-color: #292d3a;
379
- --hpe-web-button-secondary-small-border-radius: 624.9375rem;
380
- --hpe-web-button-secondary-small-border-width: 0.1875rem;
360
+ --hpe-web-button-secondary-small-border-radius: 9999px;
361
+ --hpe-web-button-secondary-small-border-width: 3px;
381
362
  --hpe-web-button-secondary-small-font-size: 1rem;
382
363
  --hpe-web-button-secondary-small-gap-x: 0.5rem;
383
364
  --hpe-web-button-secondary-small-icon-height: 1rem;
384
365
  --hpe-web-button-secondary-small-icon-width: 1rem;
385
- --hpe-web-button-secondary-small-line-height: 24;
366
+ --hpe-web-button-secondary-small-line-height: 1.5;
386
367
  --hpe-web-button-secondary-small-min-height: 3rem;
387
368
  --hpe-web-button-secondary-small-padding-x: 1.5rem;
388
369
  --hpe-web-button-secondary-small-padding-y: 0.75rem;
package/dist/css/tokens.dark.css CHANGED
@@ -3,77 +3,88 @@
3
3
  */
4
4
 
5
5
  [data-theme="dark"], .dark-theme {
6
- --hpe-web-deprecated-deprecated-gradient-element-green-stop0: #05cc93;
7
- --hpe-web-deprecated-deprecated-gradient-element-green-stop100: #0f101600;
8
- --hpe-web-deprecated-deprecated-gradient-element-neutral-stop0: #5c667245;
9
- --hpe-web-deprecated-deprecated-gradient-neutral-stop100: #1d1f27;
10
- --hpe-web-deprecated-deprecated-gradient-video-overlay-stop0: #00000000;
11
- --hpe-web-deprecated-deprecated-gradient-video-overlay-stop100: #00000066;
12
6
  --hpe-web-color-background-back: #292d3a;
13
7
  --hpe-web-color-background-card: #292d3a;
14
- --hpe-web-color-background-carousel: #e6e8e9;
15
- --hpe-web-color-background-carousel-disabled: #b1b9be;
16
- --hpe-web-color-background-carousel-hover: #d4d8db;
17
- --hpe-web-color-background-contrast: #ffffff0f;
18
- --hpe-web-color-background-critical: #552120;
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;
19
14
  --hpe-web-color-background-default: #1d1f27;
20
- --hpe-web-color-background-disabled: #ffffff12;
21
- --hpe-web-color-background-floating: #1d1f27;
15
+ --hpe-web-color-background-focus: #2ad2c9;
16
+ --hpe-web-color-background-front: #1d1f27;
22
17
  --hpe-web-color-background-neutral: #d4d8db;
23
18
  --hpe-web-color-background-neutral-strong: #ffffff;
24
- --hpe-web-color-background-neutral-weak: #7d8a92;
25
- --hpe-web-color-background-ok: #093d32;
19
+ --hpe-web-color-background-neutral-weak: #d4d8db;
20
+ --hpe-web-color-background-ok: #1ed8ae;
26
21
  --hpe-web-color-background-primary: #01a982;
27
22
  --hpe-web-color-background-primary-strong: #068667;
28
- --hpe-web-color-background-sunken: #22252e;
29
- --hpe-web-color-background-warning: #3c361e;
30
- --hpe-web-color-border-critical: #fc6161;
31
- --hpe-web-color-border-default: #ffffff5c;
32
- --hpe-web-color-border-disabled: #ffffff1f;
23
+ --hpe-web-color-background-warning: #d36d00;
24
+ --hpe-web-color-border-critical: #cc1f1a;
25
+ --hpe-web-color-border-default: #7d8a92;
26
+ --hpe-web-color-border-focus: #2ad2c9;
33
27
  --hpe-web-color-border-ok: #17eba0;
34
28
  --hpe-web-color-border-primary: #01a982;
35
- --hpe-web-color-border-selected: #05cc93;
36
- --hpe-web-color-border-strong: #ffffffb8;
37
- --hpe-web-color-border-warning: #ec8c25;
38
- --hpe-web-color-border-weak: #ffffff1f;
29
+ --hpe-web-color-border-primary-strong: #068667;
30
+ --hpe-web-color-border-strong: #b1b9be;
31
+ --hpe-web-color-border-warning: #d36d00;
32
+ --hpe-web-color-border-weak: #535c66;
39
33
  --hpe-web-color-decorative-black: #000000;
40
34
  --hpe-web-color-decorative-blue: #0070f8;
41
35
  --hpe-web-color-decorative-brand: #01a982;
42
36
  --hpe-web-color-decorative-cyan: #00a4b3;
43
37
  --hpe-web-color-decorative-green: #068667;
44
38
  --hpe-web-color-decorative-neutral: #b1b9be;
45
- --hpe-web-color-decorative-neutral-strong: #d4d8db;
39
+ --hpe-web-color-decorative-neutral-hover: #d4d8db;
46
40
  --hpe-web-color-decorative-purple: #7764fc;
47
41
  --hpe-web-color-decorative-white: #ffffff;
48
- --hpe-web-color-foreground-critical: #fc6161;
49
- --hpe-web-color-foreground-ok: #05cc93;
50
- --hpe-web-color-foreground-primary: #05cc93;
51
- --hpe-web-color-foreground-unknown: #7d8a92;
52
- --hpe-web-color-foreground-warning: #ec8c25;
53
- --hpe-web-color-icon-critical: #fc6161;
54
- --hpe-web-color-icon-default: #e6e8e9;
55
- --hpe-web-color-icon-disabled: #ffffff3d;
56
- --hpe-web-color-icon-info: #65aef9;
42
+ --hpe-web-color-gradient-element-green-stop0: #05cc93;
43
+ --hpe-web-color-gradient-element-green-stop100: #0f101600;
44
+ --hpe-web-color-gradient-element-neutral-stop0: #5c667245;
45
+ --hpe-web-color-gradient-element-neutral-stop100: #5c667200;
46
+ --hpe-web-color-gradient-element-neutral-stop15: #5c6672fc;
47
+ --hpe-web-color-gradient-element-neutral-stop28: #5c6672f5;
48
+ --hpe-web-color-gradient-element-neutral-stop38: #5c6672e8;
49
+ --hpe-web-color-gradient-element-neutral-stop47: #5c6672d9;
50
+ --hpe-web-color-gradient-element-neutral-stop54: #5c6672c7;
51
+ --hpe-web-color-gradient-element-neutral-stop60: #5c6672b3;
52
+ --hpe-web-color-gradient-element-neutral-stop65: #5c66729e;
53
+ --hpe-web-color-gradient-element-neutral-stop70: #5c667285;
54
+ --hpe-web-color-gradient-element-neutral-stop73: #5c66726e;
55
+ --hpe-web-color-gradient-element-neutral-stop77: #5c667257;
56
+ --hpe-web-color-gradient-element-neutral-stop80: #5c667242;
57
+ --hpe-web-color-gradient-element-neutral-stop84: #5c66722e;
58
+ --hpe-web-color-gradient-element-neutral-stop88: #5c66721a;
59
+ --hpe-web-color-gradient-element-neutral-stop94: #5c66720d;
60
+ --hpe-web-color-gradient-neutral-stop0: #1d1f2700;
61
+ --hpe-web-color-gradient-neutral-stop100: #1d1f27;
62
+ --hpe-web-color-gradient-video-overlay-stop0: #00000000;
63
+ --hpe-web-color-gradient-video-overlay-stop100: #00000066;
64
+ --hpe-web-color-icon-critical: #cc1f1a;
65
+ --hpe-web-color-icon-default: #e5e5e5;
66
+ --hpe-web-color-icon-disabled: #bebebe;
67
+ --hpe-web-color-icon-focus: #2ad2c9;
57
68
  --hpe-web-color-icon-neutral: #ffffff;
58
- --hpe-web-color-icon-ok: #05cc93;
59
- --hpe-web-color-icon-on-strong: #292d3a;
69
+ --hpe-web-color-icon-ok: #1ed8ae;
60
70
  --hpe-web-color-icon-primary: #01a982;
61
71
  --hpe-web-color-icon-primary-strong: #01a982;
62
72
  --hpe-web-color-icon-strong: #ffffff;
63
- --hpe-web-color-icon-warning: #ec8c25;
64
- --hpe-web-color-icon-weak: #b1b9be;
73
+ --hpe-web-color-icon-warning: #d36d00;
74
+ --hpe-web-color-icon-weak: #ffffff9c;
65
75
  --hpe-web-color-logo-element: #01a982;
66
76
  --hpe-web-color-logo-logo-text: #ffffff;
77
+ --hpe-web-color-text-body: #e5e5e5;
67
78
  --hpe-web-color-text-critical: #fc6161;
68
- --hpe-web-color-text-default: #e6e8e9;
69
- --hpe-web-color-text-disabled: #ffffff3d;
79
+ --hpe-web-color-text-disabled: #bebebe;
80
+ --hpe-web-color-text-focus: #2ad2c9;
81
+ --hpe-web-color-text-header: #ffffff;
70
82
  --hpe-web-color-text-neutral-strong: #f7f7f7;
71
83
  --hpe-web-color-text-ok: #17eba0;
72
- --hpe-web-color-text-on-strong: #292d3a;
84
+ --hpe-web-color-text-on-neutral: #292d3a;
73
85
  --hpe-web-color-text-primary: #00e0af;
74
86
  --hpe-web-color-text-primary-strong: #01a982;
75
- --hpe-web-color-text-strong: #ffffff;
76
87
  --hpe-web-color-text-warning: #ec8c25;
77
- --hpe-web-color-text-weak: #b1b9be;
88
+ --hpe-web-color-text-weak: #ffffff9c;
78
89
  --hpe-web-color-transparent: #ffffff00;
79
90
  }