@progressio_resources/gravity-design-system 1.0.3 → 1.0.5

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.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@progressio_resources/gravity-design-system",
3
3
  "description": "Gravity Design System",
4
- "version": "1.0.3",
4
+ "version": "1.0.5",
5
5
  "license": "SEE LICENSE IN LIBRARY-LICENSE",
6
6
  "peerDependencies": {
7
7
  "@angular/common": "^15.1.0",
@@ -17,12 +17,13 @@ $g600: #e8fff5;
17
17
 
18
18
  $n100: #151c29;
19
19
  $n200: #1e283a;
20
- $n300: #394c6e;
21
- $n400: #415881;
22
- $n500: #97a4bd;
23
- $n600: #d6dce5;
24
- $n700: #f4f6f9;
25
- $n800: #ffffff;
20
+ $n300: #21304a;
21
+ $n400: #394c6e;
22
+ $n500: #415881;
23
+ $n600: #97a4bd;
24
+ $n700: #d6dce5;
25
+ $n800: #f4f6f9;
26
+ $n900: #ffffff;
26
27
 
27
28
  $o100: #3c2000;
28
29
  $o200: #542503;
@@ -58,12 +59,13 @@ $r700: #ffdede;
58
59
 
59
60
  --n100: #151c29;
60
61
  --n200: #1e283a;
61
- --n300: #394c6e;
62
- --n400: #415881;
63
- --n500: #97a4bd;
64
- --n600: #d6dce5;
65
- --n700: #f4f6f9;
66
- --n800: #ffffff;
62
+ --n300: #21304a;
63
+ --n400: #394c6e;
64
+ --n500: #415881;
65
+ --n600: #97a4bd;
66
+ --n700: #d6dce5;
67
+ --n800: #f4f6f9;
68
+ --n900: #ffffff;
67
69
 
68
70
  --o100: #3c2000;
69
71
  --o200: #542503;
@@ -1,131 +1,336 @@
1
1
  @import "../primitives/hero.primitives";
2
2
 
3
- //button primary
4
- $text-button-active-primary-light: $n800;
5
- $bg-button-active-primary-light: $b400;
6
- $text-button-active-primary-dark: $n100;
3
+ $bg-icon-dialog-primary-dark: $n800;
4
+ $on-bg-icon-dialog-primary-dark: $n300;
5
+ $bg-close-dialog-header-hover-primary-dark: $n100;
6
+ $close-dialog-header-hover-primary-dark: $b700;
7
+ $close-dialog-header-active-primary-dark: $b700;
8
+ $bg-dialog-header-primary-dark: $n200;
9
+ $on-bg-dialog-header-primary-dark: $n800;
10
+ $bg-dialog-primary-dark: $n100;
11
+ $bg-icon-dialog-primary-light: $n300;
12
+ $on-bg-icon-dialog-primary-light: $n900;
13
+ $bg-close-dialog-header-hover-primary-light: $n900;
14
+ $close-dialog-header-hover-primary-light: $b400;
15
+ $close-dialog-header-active-primary-light: $b400;
16
+ $bg-dialog-header-primary-light: $n800;
17
+ $on-bg-dialog-header-primary-light: $n300;
18
+ $label-text-full-read-only-primary-dark: $n800;
19
+ $input-text-full-read-only-primary-dark: $n800;
20
+ $input-text-full-disabled-primary-dark: $n300;
21
+ $placeholder-empty-enabled-pressed-primary-dark: $n800;
22
+ $label-text-full-read-only-primary-light: $n400;
23
+ $bg-field-full-read-only-primary-light: $n800;
24
+ $label-text-full-disabled-primary-light: $n700;
25
+ $bg-field-full-disabled-primary-light: $n800;
26
+ $label-text-empty-enabled-pressed-primary-light: $n400;
27
+ $placeholder-empty-enabled-pressed-primary-light: $n400;
28
+ $outline-field-empty-enabled-pressed-primary-light: $b400;
29
+ $bg-field-empty-enabled-pressed-primary-light: $n900;
30
+ $alternative-primary-light: $o300;
31
+ $label-text-empty-disabled-primary-light: $n700;
32
+ $placeholder-empty-disabled-primary-light: $n700;
33
+ $alternative-primary-dark: $o400;
34
+ $bg-field-empty-disabled-primary-light: $n800;
35
+ $label-text-full-enabled-primary-dark: $n800;
36
+ $input-text-full-enabled-primary-dark: $n800;
37
+ $outline-field-full-enabled-primary-dark: $n800;
7
38
  $bg-button-active-primary-dark: $b700;
8
- $text-button-hover-primary-light: $n800;
39
+ $bg-field-full-enabled-primary-dark: $n100;
40
+ $bg-button-active-primary-light: $b400;
41
+ $bg-field-empty-enabled-hover-primary-dark: $n200;
42
+ $label-text-empty-enabled-primary-dark: $n800;
43
+ $surface-primary-light: $n800;
44
+ $bg-field-full-enabled-hover-primary-light: $n800;
45
+ $placeholder-empty-enabled-primary-dark: $n400;
46
+ $label-text-full-enabled-primary-light: $n400;
47
+ $outline-field-empty-enabled-primary-light: $n400;
48
+ $on-bg-menu-button-pressed-primary-dark: $n900;
49
+ $bg-menu-button-pressed-primary-dark: $n400;
50
+ $on-bg-menu-button-disabled-primary-dark: $n300;
51
+ $on-bg-menu-button-hover-primary-dark: $n800;
52
+ $bg-menu-button-hover-primary-dark: $n200;
53
+ $on-bg-menu-button-active-primary-dark: $n800;
54
+ $on-bg-menu-primary-dark: $n800;
55
+ $divider-menu-primary-dark: $n200;
56
+ $on-bg-menu-button-disabled-primary-light: $n700;
57
+ $bg-menu-button-hover-primary-light: $n800;
58
+ $link-disabled-primary-dark: $n300;
59
+ $link-pressed-primary-light: $b200;
60
+ $link-disabled-primary-light: $n700;
61
+ $bg-link-hover-primary-light: $b800;
62
+ $link-active-primary-light: $b400;
63
+ $notification-sucess-highlight-primary-light: $g300;
64
+ $bg-dialog-primary-light: $n900;
65
+ $bg-icon-notification-success-primary-light: $g500;
66
+ $bg-field-full-enabled-hover-primary-dark: $n200;
67
+ $bg-field-empty-disabled-primary-dark: $n200;
68
+ $notification-error-highlight-primary-light: $r400;
69
+ $notification-warning-highlight-primary-dark: $o400;
70
+ $on-bg-icon-notification-success-primary-dark: $g100;
71
+ $bg-icon-notification-error-primary-light: $r600;
72
+ $bg-switch-disabled-primary-dark: $n200;
73
+ $bg-icon-notification-warning-primary-dark: $o400;
74
+ $on-bg-icon-notification-warning-primary-dark: $o200;
75
+ $on-bg-icon-notification-error-primary-light: $r200;
76
+ $on-bg-switch-disabled-primary-dark: $n100;
77
+ $bg-icon-notification-error-primary-dark: $r600;
78
+ $on-bg-switch-disabled-primary-light: $n900;
79
+ $on-bg-icon-notification-success-primary-light: $g100;
80
+ $notification-sucess-highlight-primary-dark: $g500;
81
+ $bg-icon-notification-success-primary-dark: $g500;
82
+ $bg-switch-off-primary-light: $n700;
83
+ $on-bg-dropdown-item-disabled-primary-dark: $n300;
84
+ $on-bg-dropdown-item-pressed-primary-dark: $n900;
85
+ $bg-dropdown-item-hover-primary-dark: $n300;
86
+ $on-bg-dropdown-item-hover-primary-dark: $n800;
87
+ $on-bg-dropdown-item-active-primary-dark: $n800;
88
+ $on-bg-dropdown-item-disabled-primary-light: $n700;
89
+ $bg-dropdown-item-hover-primary-light: $b700;
90
+ $on-bg-dropdown-item-hover-primary-light: $n400;
91
+ $on-bg-dropdown-item-active-primary-light: $n400;
92
+ $notification-warning-highlight-primary-light: $o300;
93
+ $outline-dropdown-list-primary-dark: $n800;
94
+ $bg-dropdown-list-primary-dark: $n100;
95
+ $outline-dropdown-list-primary-light: $n400;
96
+ $bg-dropdown-list-primary-light: $n900;
97
+ $icon-hover-primary-dark: $b700;
98
+ $icon-active-primary-dark: $n800;
99
+ $bg-menu-primary-light: $n900;
100
+ $number-calendar-disabled-primary-dark: $n400;
101
+ $bg-tooltip-primary-light: $n800;
102
+ $on-bg-tooltip-primary-light: $n400;
103
+ $bg-tooltip-primary-dark: $n400;
104
+ $on-bg-tooltip-primary-dark: $n900;
105
+ $bg-table-header-secondary-dark: $n400;
106
+ $on-bg-table-header-secondary-dark: $n900;
107
+ $bg-table-hover-primary-dark: $n200;
108
+ $on-bg-table-hover-primary-dark: $n800;
109
+ $bg-button-hover-tertiary-light: $b800;
110
+ $bg-table-active-primary-dark: $n100;
111
+ $on-bg-table-active-primary-dark: $n800;
112
+ $icon-hover-primary-light: $b400;
113
+ $divider-primary-dark: $n800;
114
+ $bg-table-header-secondary-light: $n700;
115
+ $on-bg-table-header-secondary-light: $n400;
116
+ $on-bg-table-hover-primary-light: $n400;
117
+ $bg-table-hover-primary-light: $n800;
118
+ $bg-table-active-primary-light: $n900;
119
+ $on-bg-table-active-primary-light: $n400;
120
+ $bg-table-header-primary-light: $n900;
121
+ $on-bg-table-header-primary-light: $n400;
122
+ $bg-stepper-completed-primary-dark: $g500;
123
+ $on-bg-stepper-completed-primary-dark: $g100;
124
+ $bg-field-full-enabled-primary-light: $n900;
125
+ $line-stepper-completed-primary-dark: $g500;
126
+ $placeholder-empty-enabled-primary-light: $n600;
127
+ $text-stepper-completed-primary-dark: $n800;
128
+ $label-text-empty-enabled-primary-light: $n400;
129
+ $bg-stepper-current-primary-dark: $b700;
130
+ $bg-field-empty-enabled-primary-light: $n900;
131
+ $on-bg-stepper-current-primary-dark: $n100;
132
+ $surface-primary-dark: $n200;
133
+ $bg-field-empty-enabled-primary-dark: $n100;
134
+ $line-stepper-current-primary-dark: $b700;
135
+ $surface-secondary-dark: $n100;
136
+ $outline-field-full-enabled-primary-light: $n400;
137
+ $text-stepper-current-primary-dark: $n800;
138
+ $input-text-full-enabled-primary-light: $n400;
139
+ $bg-stepper-pending-primary-dark: $n400;
140
+ $bg-field-empty-enabled-hover-primary-light: $n800;
141
+ $on-bg-stepper-pending-primary-dark: $n100;
142
+ $surface-secondary-light: $n900;
143
+ $bg-menu-primary-dark: $n100;
144
+ $line-stepper-pending-primary-dark: $n400;
145
+ $outline-field-empty-enabled-primary-dark: $n800;
146
+ $text-stepper-pending-primary-dark: $n400;
147
+ $on-bg-calender-primary-dark: $n800;
148
+ $arrow-calendar-active-primary-light: $n900;
149
+ $bg-stepper-current-primary-light: $b400;
150
+ $loading-primary-dark: $b700;
151
+ $on-bg-stepper-current-primary-light: $n900;
152
+ $outline-button-pressed-secondary-dark: $b600;
153
+ $bg-switch-disabled-primary-light: $n800;
154
+ $on-bg-button-hover-negative-light: $r200;
155
+ $text-stepper-current-primary-light: $n500;
156
+ $bg-stepper-pending-primary-light: $n800;
157
+ $bg-switch-on-primary-light: $b400;
158
+ $notification-error-highlight-primary-dark: $r600;
159
+ $on-bg-button-pressed-secondary-dark: $b600;
160
+ $bg-switch-off-primary-dark: $n300;
161
+ $on-bg-button-pressed-negative-light: $r100;
162
+ $text-stepper-pending-primary-light: $n600;
163
+ $on-bg-button-active-positive-light: $g100;
164
+ $bg-checkbox-on-primary-dark: $b700;
165
+ $bg-button-pressed-positive-light: $g400;
166
+ $bg-checkbox-on-primary-light: $b400;
167
+ $bg-button-active-positive-dark: $g500;
168
+ $on-bg-checkbox-on-primary-dark: $n100;
169
+ $on-bg-button-hover-positive-light: $g100;
170
+ $on-bg-checkbox-on-primary-light: $n900;
171
+ $bg-button-active-positive-light: $g500;
172
+ $outline-checkbox-off-primary-dark: $n800;
173
+ $radio-button-on-primary-dark: $b700;
174
+ $bg-menu-button-pressed-primary-light: $b700;
175
+ $bg-number-calendar-pressed-primary-light: $b300;
176
+ $on-bg-menu-button-hover-primary-light: $n400;
177
+ $arrow-calendar-disabled-primary-light: $b500;
178
+ $number-calendar-pressed-primary-dark: $n800;
179
+ $on-bg-menu-primary-light: $n400;
180
+ $number-calendar-pressed-primary-light: $n900;
181
+ $bg-number-calendar-pressed-primary-dark: $n100;
182
+ $icon-active-primary-light: $n400;
183
+ $bg-number-calendar-hover-primary-light: $b800;
184
+ $number-calendar-hover-primary-dark: $n800;
185
+ $number-calendar-hover-primary-light: $n400;
186
+ $bg-arrow-calendar-hover-primary-light: $b500;
187
+ $link-hover-primary-dark: $b700;
188
+ $arrow-calendar-hover-primary-dark: $n100;
189
+ $outline-button-hover-secondary-light: $b500;
190
+ $on-bg-switch-on-primary-dark: $n200;
191
+ $divider-primary-light: $n400;
192
+ $arrow-calendar-active-primary-dark: $n100;
193
+ $text-stepper-completed-primary-light: $n500;
194
+ $on-bg-calender-primary-light: $n400;
195
+ $on-bg-notification-primary-dark: $n800;
196
+ $on-bg-table-header-primary-dark: $n800;
197
+ $bg-field-full-read-only-primary-dark: $n300;
198
+ $on-bg-button-active-tertiary-dark: $n900;
199
+ $on-bg-button-active-positive-dark: $g100;
200
+ $on-bg-button-pressed-alternative-dark: $o100;
201
+ $bg-notification-primary-light: $n900;
202
+ $bg-button-hover-alternative-light: $o500;
203
+ $bg-field-empty-enabled-pressed-primary-dark: $n100;
204
+ $on-bg-highlight-neutro-secondary-dark: $n100;
205
+ $label-text-empty-disabled-primary-dark: $n300;
206
+ $bg-highlight-neutro-secondary-light: $n200;
207
+ $line-stepper-current-primary-light: $b400;
208
+ $on-bg-switch-off-primary-light: $n800;
209
+ $bg-button-pressed-secondary-dark: $n100;
210
+ $bg-field-full-disabled-primary-dark: $n200;
211
+ $on-bg-button-hover-primary-dark: $b200;
212
+ $outline-disabled-light: $n700;
213
+ $bg-calender-primary-dark: $n200;
214
+ $on-bg-button-hover-secondary-dark: $b800;
215
+ $negative-primary-light: $r400;
216
+ $bg-button-pressed-secondary-light: $n900;
217
+ $on-bg-icon-notification-error-primary-dark: $r200;
218
+ $on-bg-switch-off-primary-dark: $n400;
219
+ $bg-button-hover-negative-dark: $r700;
9
220
  $bg-button-hover-primary-light: $b500;
10
- $text-button-hover-primary-dark: $b200;
11
- $bg-button-hover-primary-dark: $b800;
12
- $text-button-pressed-primary-light: $n800;
13
- $bg-button-pressed-primary-light: $b300;
14
- $text-button-pressed-primary-dark: $b200;
15
- $bg-button-pressed-primary-dark: $b600;
16
-
17
- //button secondary
18
- $text-button-active-secondary-light: $b400;
19
- $outline-button-active-secondary-light: $b400;
20
- $bg-button-active-secondary-light: $n800;
21
- $text-button-active-secondary-dark: $b700;
221
+ $bg-button-hover-secondary-light: $n900;
222
+ $line-stepper-completed-primary-light: $g500;
223
+ $on-bg-button-hover-negative-dark: $r300;
224
+ $bg-button-disabled-light: $n800;
225
+ $radio-button-off-primary-light: $n400;
22
226
  $outline-button-active-secondary-dark: $b700;
227
+ $radio-button-off-primary-dark: $n800;
228
+ $radio-button-on-primary-light: $b400;
229
+ $bg-button-active-secondary-light: $n900;
230
+ $number-calendar-disabled-primary-light: $n700;
231
+ $on-bg-button-disabled-dark: $n400;
232
+ $bg-button-hover-alternative-dark: $o500;
233
+ $bg-button-disabled-dark: $n200;
234
+ $negative-primary-dark: $r500;
235
+ $bg-highlight-neutro-primary-light: $n800;
236
+ $bg-icon-notification-warning-primary-light: $o400;
237
+ $on-bg-highlight-neutro-primary-light: $n400;
238
+ $bg-button-pressed-alternative-dark: $o300;
239
+ $bg-button-pressed-alternative-light: $o300;
240
+ $divider-menu-primary-light: $n800;
241
+ $arrow-calendar-disabled-primary-dark: $b600;
242
+ $on-bg-button-pressed-alternative-light: $o100;
243
+ $on-bg-menu-button-active-primary-light: $n400;
244
+ $on-bg-dropdown-item-pressed-primary-light: $n200;
245
+ $bg-highlight-neutro-primary-dark: $n200;
246
+ $on-bg-button-hover-alternative-dark: $o200;
23
247
  $bg-button-active-secondary-dark: $n100;
24
- $text-button-hover-secondary-light: $b500;
25
- $outline-button-hover-secondary-light: $b500;
26
- $bg-button-hover-secondary-light: $n800;
27
- $text-button-hover-secondary-dark: $b800;
248
+ $on-bg-button-hover-alternative-light: $o200;
249
+ $outline-button-active-secondary-light: $b400;
250
+ $bg-button-active-negative-dark: $r600;
251
+ $line-stepper-pending-primary-light: $n800;
252
+ $bg-button-active-negative-light: $r600;
253
+ $on-bg-button-active-secondary-light: $b400;
254
+ $on-bg-button-active-alternative-dark: $o200;
255
+ $bg-switch-on-primary-dark: $b700;
256
+ $on-bg-button-active-secondary-dark: $b700;
257
+ $on-bg-button-active-negative-dark: $r200;
258
+ $on-bg-stepper-pending-primary-light: $n600;
259
+ $bg-button-active-alternative-light: $o400;
260
+ $input-text-full-read-only-primary-light: $n400;
261
+ $on-bg-button-active-alternative-light: $o200;
262
+ $input-text-full-disabled-primary-light: $n700;
263
+ $placeholder-empty-disabled-primary-dark: $n300;
264
+ $on-bg-highlight-neutro-secondary-light: $n900;
265
+ $bg-button-pressed-negative-dark: $r500;
266
+ $on-bg-button-pressed-primary-dark: $b200;
267
+ $bg-button-pressed-positive-dark: $g400;
268
+ $on-bg-button-pressed-negative-dark: $r100;
269
+ $on-bg-button-hover-tertiary-light: $b400;
270
+ $on-bg-button-pressed-positive-dark: $g100;
271
+ $on-bg-button-pressed-primary-light: $n900;
272
+ $bg-button-pressed-negative-light: $r500;
273
+ $bg-calendar-nav-primary-light: $b400;
274
+ $on-bg-switch-on-primary-light: $n900;
28
275
  $outline-button-hover-secondary-dark: $b800;
276
+ $bg-button-pressed-primary-light: $b300;
29
277
  $bg-button-hover-secondary-dark: $n100;
30
- $text-button-pressed-secondary-light: $b300;
278
+ $positive-primary-light: $g300;
279
+ $bg-button-hover-negative-light: $r700;
280
+ $on-bg-calendar-nav-primary-light: $n900;
281
+ $on-bg-calendar-nav-primary-dark: $n100;
31
282
  $outline-button-pressed-secondary-light: $b300;
32
- $bg-button-pressed-secondary-light: $n800;
33
- $text-button-pressed-secondary-dark: $b600;
34
- $outline-button-pressed-secondary-dark: $b600;
35
- $bg-button-pressed-secondary-dark: $n100;
36
-
37
- //button tertiary
38
- $text-button-active-tertiary-light: $b400;
39
- $bg-button-active-tertiary-light: $b700;
40
- $text-button-active-tertiary-dark: $n800;
41
- $bg-button-active-tertiary-dark: $n300;
42
- $text-button-hover-tertiary-light: $b400;
43
- $bg-button-hover-tertiary-light: $b800;
44
- $text-button-hover-tertiary-dark: $n800;
45
- $bg-button-hover-tertiary-dark: $n400;
46
- $text-button-pressed-tertiary-light: $b300;
47
- $bg-button-pressed-tertiary-light: $b600;
48
- $text-button-pressed-tertiary-dark: $n800;
283
+ $on-bg-button-pressed-secondary-light: $b300;
284
+ $positive-primary-dark: $g500;
285
+ $logo-primary-light: $b400;
286
+ $on-bg-button-hover-secondary-light: $b500;
287
+ $on-bg-menu-button-pressed-primary-light: $n400;
288
+ $bg-number-calendar-hover-primary-dark: $n400;
289
+ $number-calender-active-primary-dark: $n800;
290
+ $bg-calendar-nav-primary-dark: $b700;
291
+ $on-bg-button-active-negative-light: $r200;
292
+ $bg-notification-primary-dark: $n200;
293
+ $bg-table-header-primary-dark: $n100;
294
+ $label-text-full-disabled-primary-dark: $n300;
295
+ $on-bg-button-active-tertiary-light: $b400;
296
+ $loading-primary-light: $b400;
297
+ $on-bg-button-hover-tertiary-dark: $n900;
49
298
  $bg-button-pressed-tertiary-dark: $n200;
50
-
51
- //button positive
52
- $text-button-active-positive-light: $g100;
53
- $bg-button-active-positive-light: $g500;
54
- $text-button-active-positive-dark: $g100;
55
- $bg-button-active-positive-dark: $g500;
56
- $text-button-hover-positive-light: $g100;
299
+ $on-bg-button-pressed-tertiary-dark: $n900;
300
+ $bg-button-pressed-tertiary-light: $b600;
301
+ $on-bg-button-pressed-tertiary-light: $b300;
302
+ $bg-button-hover-primary-dark: $b800;
303
+ $bg-button-hover-tertiary-dark: $n500;
304
+ $on-bg-stepper-completed-primary-light: $g100;
305
+ $on-bg-notification-primary-light: $n400;
306
+ $bg-button-pressed-primary-dark: $b600;
307
+ $label-text-empty-enabled-pressed-primary-dark: $n800;
308
+ $on-bg-button-hover-primary-light: $n900;
309
+ $bg-button-active-tertiary-light: $b700;
310
+ $outline-disabled-dark: $n200;
311
+ $on-bg-button-disabled-light: $n600;
312
+ $outline-checkbox-off-primary-light: $n400;
57
313
  $bg-button-hover-positive-light: $g600;
58
- $text-button-hover-positive-dark: $g100;
59
- $bg-button-hover-positive-dark: $g600;
60
- $text-button-pressed-positive-light: $g100;
61
- $bg-button-pressed-positive-light: $g400;
62
- $text-button-pressed-positive-dark: $g100;
63
- $bg-button-pressed-positive-dark: $g400;
64
-
65
- //button negative
66
- $text-button-active-negative-light: $r200;
67
- $bg-button-active-negative-light: $r600;
68
- $text-button-active-negative-dark: $r200;
69
- $bg-button-active-negative-dark: $r600;
70
- $text-button-hover-negative-light: $r200;
71
- $bg-button-hover-negative-light: $r700;
72
- $text-button-hover-negative-dark: $r300;
73
- $bg-button-hover-negative-dark: $r700;
74
- $text-button-pressed-negative-light: $r100;
75
- $bg-button-pressed-negative-light: $r500;
76
- $text-button-pressed-negative-dark: $r100;
77
- $bg-button-pressed-negative-dark: $r500;
78
-
79
- //button alternative
80
- $text-button-active-alternative-light: $o200;
81
- $bg-button-active-alternative-light: $o400;
82
- $text-button-active-alternative-dark: $o200;
314
+ $link-hover-primary-light: $b400;
83
315
  $bg-button-active-alternative-dark: $o400;
84
- $text-button-hover-alternative-light: $o200;
85
- $bg-button-hover-alternative-light: $o500;
86
- $bg-button-hover-alternative-dark: $o500;
87
- $text-button-hover-alternative-dark: $o200;
88
- $text-button-pressed-alternative-light: $o100;
89
- $bg-button-pressed-alternative-light: $o300;
90
- $text-button-pressed-alternative-dark: $o100;
91
- $bg-button-pressed-alternative-dark: $o300;
92
-
93
- //button disabled
94
- $text-button-disabled-light: $n500;
95
- $bg-button-disabled-light: $n600;
96
- $text-button-disabled-dark: $n300;
97
- $bg-button-disabled-dark: $n200;
98
-
99
- //surface
100
- $surface-primary-light: $n700;
101
- $surface-primary-dark: $n200;
102
- $surface-secondary-light: $n800;
103
- $surface-secondary-dark: $n100;
104
-
105
- //text
106
- $text-primary-light: $n300;
107
- $text-primary-dark: $n700;
108
-
109
- //divider
110
- $divider-primary-light: $n300;
111
- $divider-primary-dark: $n700;
112
-
113
- //logo
114
- $logo-primary-light: $b400;
316
+ $on-bg-button-hover-positive-dark: $g100;
317
+ $outline-field-empty-enabled-pressed-primary-dark: $b700;
318
+ $bg-highlight-neutro-secondary-dark: $n700;
319
+ $on-bg-button-pressed-positive-light: $g100;
320
+ $bg-button-active-tertiary-dark: $n400;
321
+ $on-bg-highlight-neutro-primary-dark: $n800;
322
+ $bg-arrow-calendar-hover-primary-dark: $b800;
323
+ $link-active-primary-dark: $b700;
324
+ $number-calender-active-primary-light: $n400;
325
+ $on-bg-button-active-primary-dark: $n100;
326
+ $bg-button-hover-positive-dark: $g600;
327
+ $bg-stepper-completed-primary-light: $g500;
328
+ $bg-calender-primary-light: $n900;
329
+ $on-bg-icon-notification-warning-primary-light: $o200;
115
330
  $logo-primary-dark: $b700;
116
-
117
- //highlight
118
- $text-highlight-neutro-primary-light: $n300;
119
- $bg-highlight-neutro-primary-light: $n700;
120
- $text-highlight-neutro-primary-dark: $n700;
121
- $bg-highlight-neutro-primary-dark: $n200;
122
- $text-highlight-neutro-secondary-light: $n800;
123
- $bg-highlight-neutro-secondary-light: $n200;
124
- $text-highlight-neutro-secondary-dark: $n100;
125
- $bg-highlight-neutro-secondary-dark: $n600;
126
-
127
- //system
128
- $positive-primary-light: $g300;
129
- $positive-primary-dark: $g500;
130
- $negative-primary-light: $r400;
131
- $negative-primary-dark: $r500;
331
+ $bg-link-hover-primary-dark: $n300;
332
+ $on-bg-button-active-primary-light: $n900;
333
+ $arrow-calendar-hover-primary-light: $n900;
334
+ $link-pressed-primary-dark: $b600;
335
+ $text-primary-dark: $n800;
336
+ $text-primary-light: $n400;
@@ -1,163 +1,345 @@
1
1
  @import "../themes/hero.theme";
2
2
 
3
3
  .hero-light-theme {
4
- //button primary
5
- --text-button-active-primary: #{$text-button-active-primary-light};
6
- --bg-button-active-primary: #{$bg-button-active-primary-light};
7
- --text-button-hover-primary: #{$text-button-hover-primary-light};
8
- --bg-button-hover-primary: #{$bg-button-hover-primary-light};
9
- --text-button-pressed-primary: #{$text-button-pressed-primary-light};
10
- --bg-button-pressed-primary: #{$bg-button-pressed-primary-light};
11
-
12
- //button secondary
13
- --text-button-active-secondary: #{$text-button-active-secondary-light};
14
- --outline-button-active-secondary: #{$outline-button-active-secondary-light};
15
- --bg-button-active-secondary: #{$bg-button-active-secondary-light};
16
- --text-button-hover-secondary: #{$text-button-hover-secondary-light};
4
+ --label-text-full-read-only-primary: #{$label-text-full-read-only-primary-light};
5
+ --input-text-full-read-only-primary: #{$input-text-full-read-only-primary-light};
6
+ --bg-close-dialog-header-hover-primary: #{$bg-close-dialog-header-hover-primary-light};
7
+ --label-text-full-disabled-primary: #{$label-text-full-disabled-primary-light};
8
+ --close-dialog-header-hover-primary: #{$close-dialog-header-hover-primary-light};
9
+ --input-text-full-disabled-primary: #{$input-text-full-disabled-primary-light};
10
+ --label-text-empty-enabled-pressed-primary: #{$label-text-empty-enabled-pressed-primary-light};
11
+ --placeholder-empty-enabled-pressed-primary: #{$placeholder-empty-enabled-pressed-primary-light};
12
+ --bg-field-empty-enabled-pressed-primary: #{$bg-field-empty-enabled-pressed-primary-light};
13
+ --bg-field-empty-disabled-primary: #{$bg-field-empty-disabled-primary-light};
14
+ --label-text-full-enabled-primary: #{$label-text-full-enabled-primary-light};
15
+ --input-text-full-enabled-primary: #{$input-text-full-enabled-primary-light};
16
+ --outline-field-full-enabled-primary: #{$outline-field-full-enabled-primary-light};
17
+ --bg-field-full-enabled-primary: #{$bg-field-full-enabled-primary-light};
18
+ --bg-field-empty-enabled-hover-primary: #{$bg-field-empty-enabled-hover-primary-light};
19
+ --label-text-empty-enabled-primary: #{$label-text-empty-enabled-primary-light};
20
+ --placeholder-empty-enabled-primary: #{$placeholder-empty-enabled-primary-light};
21
+ --outline-field-empty-enabled-primary: #{$outline-field-empty-enabled-primary-light};
22
+ --bg-field-empty-enabled-primary: #{$bg-field-empty-enabled-primary-light};
23
+ --divider-primary: #{$divider-primary-light};
24
+ --on-bg-menu-button-pressed-primary: #{$on-bg-menu-button-pressed-primary-light};
25
+ --surface-secondary: #{$surface-secondary-light};
26
+ --bg-menu-button-pressed-primary: #{$bg-menu-button-pressed-primary-light};
27
+ --on-bg-menu-button-disabled-primary: #{$on-bg-menu-button-disabled-primary-light};
28
+ --divider-menu-primary: #{$divider-menu-primary-light};
29
+ --on-bg-button-active-primary: #{$on-bg-button-active-primary-light};
30
+ --link-pressed-primary: #{$link-pressed-primary-light};
31
+ --link-disabled-primary: #{$link-disabled-primary-light};
32
+ --bg-link-hover-primary: #{$bg-link-hover-primary-light};
33
+ --link-hover-primary: #{$link-hover-primary-light};
34
+ --link-active-primary: #{$link-active-primary-light};
35
+ --bg-calendar-nav-primary: #{$bg-calendar-nav-primary-light};
36
+ --on-bg-switch-off-primary: #{$on-bg-switch-off-primary-light};
37
+ --bg-switch-on-primary: #{$bg-switch-on-primary-light};
38
+ --on-bg-dropdown-item-disabled-primary: #{$on-bg-dropdown-item-disabled-primary-light};
39
+ --outline-dropdown-list-primary: #{$outline-dropdown-list-primary-light};
40
+ --bg-calender-primary: #{$bg-calender-primary-light};
41
+ --notification-error-highlight-primary: #{$notification-error-highlight-primary-light};
42
+ --bg-table-header-secondary: #{$bg-table-header-secondary-light};
43
+ --bg-dropdown-list-primary: #{$bg-dropdown-list-primary-light};
44
+ --on-bg-highlight-neutro-secondary: #{$on-bg-highlight-neutro-secondary-light};
45
+ --bg-tooltip-primary: #{$bg-tooltip-primary-light};
46
+ --on-bg-tooltip-primary: #{$on-bg-tooltip-primary-light};
47
+ --on-bg-icon-notification-success-primary: #{$on-bg-icon-notification-success-primary-light};
48
+ --on-bg-dropdown-item-active-primary: #{$on-bg-dropdown-item-active-primary-light};
49
+ --bg-switch-disabled-primary: #{$bg-switch-disabled-primary-light};
50
+ --on-bg-dropdown-item-hover-primary: #{$on-bg-dropdown-item-hover-primary-light};
51
+ --on-bg-table-header-secondary: #{$on-bg-table-header-secondary-light};
52
+ --bg-table-hover-primary: #{$bg-table-hover-primary-light};
53
+ --on-bg-table-hover-primary: #{$on-bg-table-hover-primary-light};
54
+ --bg-table-active-primary: #{$bg-table-active-primary-light};
55
+ --on-bg-table-active-primary: #{$on-bg-table-active-primary-light};
56
+ --bg-table-header-primary: #{$bg-table-header-primary-light};
57
+ --on-bg-table-header-primary: #{$on-bg-table-header-primary-light};
58
+ --bg-dialog-primary: #{$bg-dialog-primary-light};
59
+ --bg-icon-notification-warning-primary: #{$bg-icon-notification-warning-primary-light};
60
+ --on-bg-stepper-completed-primary: #{$on-bg-stepper-completed-primary-light};
61
+ --on-bg-dialog-header-primary: #{$on-bg-dialog-header-primary-light};
62
+ --notification-warning-highlight-primary: #{$notification-warning-highlight-primary-light};
63
+ --line-stepper-completed-primary: #{$line-stepper-completed-primary-light};
64
+ --on-bg-button-hover-tertiary: #{$on-bg-button-hover-tertiary-light};
65
+ --number-calendar-hover-primary: #{$number-calendar-hover-primary-light};
66
+ --icon-hover-primary: #{$icon-hover-primary-light};
67
+ --text-stepper-completed-primary: #{$text-stepper-completed-primary-light};
68
+ --arrow-calendar-disabled-primary: #{$arrow-calendar-disabled-primary-light};
69
+ --bg-button-hover-tertiary: #{$bg-button-hover-tertiary-light};
70
+ --icon-active-primary: #{$icon-active-primary-light};
71
+ --bg-stepper-current-primary: #{$bg-stepper-current-primary-light};
72
+ --on-bg-stepper-current-primary: #{$on-bg-stepper-current-primary-light};
73
+ --line-stepper-current-primary: #{$line-stepper-current-primary-light};
74
+ --bg-dialog-header-primary: #{$bg-dialog-header-primary-light};
75
+ --bg-field-full-disabled-primary: #{$bg-field-full-disabled-primary-light};
76
+ --notification-sucess-highlight-primary: #{$notification-sucess-highlight-primary-light};
77
+ --bg-field-full-enabled-hover-primary: #{$bg-field-full-enabled-hover-primary-light};
78
+ --alternative-primary: #{$alternative-primary-light};
79
+ --text-stepper-current-primary: #{$text-stepper-current-primary-light};
80
+ --close-dialog-header-active-primary: #{$close-dialog-header-active-primary-light};
81
+ --on-bg-icon-notification-warning-primary: #{$on-bg-icon-notification-warning-primary-light};
82
+ --bg-stepper-pending-primary: #{$bg-stepper-pending-primary-light};
83
+ --outline-field-empty-enabled-pressed-primary: #{$outline-field-empty-enabled-pressed-primary-light};
84
+ --on-bg-stepper-pending-primary: #{$on-bg-stepper-pending-primary-light};
85
+ --placeholder-empty-disabled-primary: #{$placeholder-empty-disabled-primary-light};
86
+ --line-stepper-pending-primary: #{$line-stepper-pending-primary-light};
87
+ --on-bg-icon-dialog-primary: #{$on-bg-icon-dialog-primary-light};
88
+ --bg-field-full-read-only-primary: #{$bg-field-full-read-only-primary-light};
89
+ --label-text-empty-disabled-primary: #{$label-text-empty-disabled-primary-light};
90
+ --text-stepper-pending-primary: #{$text-stepper-pending-primary-light};
91
+ --bg-checkbox-on-primary: #{$bg-checkbox-on-primary-light};
92
+ --outline-checkbox-off-primary: #{$outline-checkbox-off-primary-light};
93
+ --on-bg-calender-primary: #{$on-bg-calender-primary-light};
94
+ --loading-primary: #{$loading-primary-light};
95
+ --outline-disabled: #{$outline-disabled-light};
96
+ --bg-switch-off-primary: #{$bg-switch-off-primary-light};
97
+ --on-bg-calendar-nav-primary: #{$on-bg-calendar-nav-primary-light};
98
+ --on-bg-button-pressed-secondary: #{$on-bg-button-pressed-secondary-light};
17
99
  --outline-button-hover-secondary: #{$outline-button-hover-secondary-light};
100
+ --bg-button-active-secondary: #{$bg-button-active-secondary-light};
101
+ --outline-button-active-secondary: #{$outline-button-active-secondary-light};
102
+ --surface-primary: #{$surface-primary-light};
103
+ --bg-button-pressed-tertiary: #{$bg-button-pressed-tertiary-light};
18
104
  --bg-button-hover-secondary: #{$bg-button-hover-secondary-light};
19
- --text-button-pressed-secondary: #{$text-button-pressed-secondary-light};
20
- --outline-button-pressed-secondary: #{$outline-button-pressed-secondary-light};
105
+ --on-bg-button-active-positive: #{$on-bg-button-active-positive-light};
106
+ --on-bg-switch-disabled-primary: #{$on-bg-switch-disabled-primary-light};
107
+ --bg-dropdown-item-hover-primary: #{$bg-dropdown-item-hover-primary-light};
108
+ --bg-button-pressed-positive: #{$bg-button-pressed-positive-light};
109
+ --on-bg-menu-button-hover-primary: #{$on-bg-menu-button-hover-primary-light};
110
+ --negative-primary: #{$negative-primary-light};
111
+ --bg-menu-button-hover-primary: #{$bg-menu-button-hover-primary-light};
112
+ --positive-primary: #{$positive-primary-light};
113
+ --on-bg-menu-button-active-primary: #{$on-bg-menu-button-active-primary-light};
114
+ --bg-stepper-completed-primary: #{$bg-stepper-completed-primary-light};
115
+ --bg-highlight-neutro-primary: #{$bg-highlight-neutro-primary-light};
116
+ --bg-button-disabled: #{$bg-button-disabled-light};
21
117
  --bg-button-pressed-secondary: #{$bg-button-pressed-secondary-light};
22
-
23
- //button tertiary
24
- --text-button-active-tertiary: #{$text-button-active-tertiary-light};
118
+ --on-bg-button-active-tertiary: #{$on-bg-button-active-tertiary-light};
119
+ --number-calendar-pressed-primary: #{$number-calendar-pressed-primary-light};
120
+ --on-bg-notification-primary: #{$on-bg-notification-primary-light};
121
+ --on-bg-button-hover-alternative: #{$on-bg-button-hover-alternative-light};
122
+ --cta-primary: #{$bg-button-active-primary-light};
123
+ --bg-button-active-alternative: #{$bg-button-active-alternative-light};
124
+ --bg-icon-notification-error-primary: #{$bg-icon-notification-error-primary-light};
25
125
  --bg-button-active-tertiary: #{$bg-button-active-tertiary-light};
26
- --text-button-hover-tertiary: #{$text-button-hover-tertiary-light};
27
- --bg-button-hover-tertiary: #{$bg-button-hover-tertiary-light};
28
- --text-button-pressed-tertiary: #{$text-button-pressed-tertiary-light};
29
- --bg-button-pressed-tertiary: #{$bg-button-pressed-tertiary-light};
30
-
31
- //button positive
32
- --text-button-active-positive: #{$text-button-active-positive-light};
33
- --bg-button-active-positive: #{$bg-button-active-positive-light};
34
- --text-button-hover-positive: #{$text-button-hover-positive-light};
126
+ --bg-arrow-calendar-hover-primary: #{$bg-arrow-calendar-hover-primary-light};
127
+ --bg-menu-primary: #{$bg-menu-primary-light};
128
+ --logo-primary: #{$logo-primary-light};
129
+ --outline-button-pressed-secondary: #{$outline-button-pressed-secondary-light};
130
+ --on-bg-button-active-alternative: #{$on-bg-button-active-alternative-light};
35
131
  --bg-button-hover-positive: #{$bg-button-hover-positive-light};
36
- --text-button-pressed-positive: #{$text-button-pressed-positive-light};
37
- --bg-button-pressed-positive: #{$bg-button-pressed-positive-light};
38
-
39
- //button negative
40
- --text-button-active-negative: #{$text-button-active-negative-light};
41
- --bg-button-active-negative: #{$bg-button-active-negative-light};
42
- --text-button-hover-negative: #{$text-button-hover-negative-light};
43
- --bg-button-hover-negative: #{$bg-button-hover-negative-light};
44
- --text-button-pressed-negative: #{$text-button-pressed-negative-light};
132
+ --number-calender-active-primary: #{$number-calender-active-primary-light};
133
+ --bg-notification-primary: #{$bg-notification-primary-light};
45
134
  --bg-button-pressed-negative: #{$bg-button-pressed-negative-light};
46
-
47
- //button alternative
48
- --text-button-active-alternative: #{$text-button-active-alternative-light};
49
- --bg-button-active-alternative: #{$bg-button-active-alternative-light};
50
- --text-button-hover-alternative: #{$text-button-hover-alternative-light};
51
- --bg-button-hover-alternative: #{$bg-button-hover-alternative-light};
52
- --text-button-pressed-alternative: #{$text-button-pressed-alternative-light};
53
- --bg-button-pressed-alternative: #{$bg-button-pressed-alternative-light};
54
-
55
- //button disabled
56
- --text-button-disabled: #{$text-button-disabled-light};
57
- --bg-button-disabled: #{$bg-button-disabled-light};
58
-
59
- //surface
60
- --surface-primary: #{$surface-primary-light};
61
- --surface-secondary: #{$surface-secondary-light};
62
-
63
- //text
135
+ --on-bg-button-pressed-negative: #{$on-bg-button-pressed-negative-light};
136
+ --on-bg-menu-primary: #{$on-bg-menu-primary-light};
137
+ --on-bg-highlight-neutro-primary: #{$on-bg-highlight-neutro-primary-light};
138
+ --on-bg-button-pressed-positive: #{$on-bg-button-pressed-positive-light};
139
+ --radio-button-on-primary: #{$radio-button-on-primary-light};
140
+ --radio-button-off-primary: #{$radio-button-off-primary-light};
141
+ --bg-number-calendar-hover-primary: #{$bg-number-calendar-hover-primary-light};
142
+ --bg-icon-dialog-primary: #{$bg-icon-dialog-primary-light};
143
+ --bg-button-hover-negative: #{$bg-button-hover-negative-light};
144
+ --on-bg-icon-notification-error-primary: #{$on-bg-icon-notification-error-primary-light};
145
+ --bg-button-active-positive: #{$bg-button-active-positive-light};
146
+ --on-bg-button-hover-negative: #{$on-bg-button-hover-negative-light};
147
+ --on-bg-button-active-negative: #{$on-bg-button-active-negative-light};
148
+ --bg-number-calendar-pressed-primary: #{$bg-number-calendar-pressed-primary-light};
149
+ --bg-button-active-negative: #{$bg-button-active-negative-light};
150
+ --bg-button-active-primary: #{$bg-button-active-primary-light};
151
+ --arrow-calendar-active-primary: #{$arrow-calendar-active-primary-light};
152
+ --on-bg-button-hover-positive: #{$on-bg-button-hover-positive-light};
153
+ --on-bg-button-hover-primary: #{$on-bg-button-hover-primary-light};
154
+ --bg-icon-notification-success-primary: #{$bg-icon-notification-success-primary-light};
155
+ --arrow-calendar-hover-primary: #{$arrow-calendar-hover-primary-light};
156
+ --on-bg-button-pressed-tertiary: #{$on-bg-button-pressed-tertiary-light};
157
+ --on-bg-button-pressed-primary: #{$on-bg-button-pressed-primary-light};
158
+ --number-calendar-disabled-primary: #{$number-calendar-disabled-primary-light};
159
+ --bg-button-pressed-primary: #{$bg-button-pressed-primary-light};
160
+ --bg-button-hover-primary: #{$bg-button-hover-primary-light};
161
+ --on-bg-checkbox-on-primary: #{$on-bg-checkbox-on-primary-light};
162
+ --on-bg-dropdown-item-pressed-primary: #{$on-bg-dropdown-item-pressed-primary-light};
163
+ --on-bg-button-pressed-alternative: #{$on-bg-button-pressed-alternative-light};
164
+ --on-bg-switch-on-primary: #{$on-bg-switch-on-primary-light};
64
165
  --text-primary: #{$text-primary-light};
65
-
66
- //divider
67
- --divider-primary: #{$divider-primary-light};
68
-
69
- //logo
70
- --logo-primary: #{$logo-primary-light};
71
-
72
- //highlight
73
- --text-highlight-neutro-primary: #{$text-highlight-neutro-primary-light};
74
- --bg-highlight-neutro-primary: #{$bg-highlight-neutro-primary-light};
75
- --text-highlight-neutro-secondary: #{$text-highlight-neutro-secondary-light};
166
+ --bg-button-pressed-alternative: #{$bg-button-pressed-alternative-light};
167
+ --on-bg-button-active-secondary: #{$on-bg-button-active-secondary-light};
168
+ --on-bg-button-hover-secondary: #{$on-bg-button-hover-secondary-light};
169
+ --on-bg-disabled: #{$on-bg-button-disabled-light};
76
170
  --bg-highlight-neutro-secondary: #{$bg-highlight-neutro-secondary-light};
77
-
78
- //system
79
- --positive-primary: #{$positive-primary-light};
80
- --negative-primary: #{$negative-primary-light};
81
- --cta-primary: #{$bg-button-active-primary-light};
171
+ --bg-button-hover-alternative: #{$bg-button-hover-alternative-light};
82
172
  }
83
173
 
84
- .hero-dark-theme {
85
- //button primary
86
- --text-button-active-primary: #{$text-button-active-primary-dark};
87
- --bg-button-active-primary: #{$bg-button-active-primary-dark};
88
- --text-button-hover-primary: #{$text-button-hover-primary-dark};
89
- --bg-button-hover-primary: #{$bg-button-hover-primary-dark};
90
- --text-button-pressed-primary: #{$text-button-pressed-primary-dark};
91
- --bg-button-pressed-primary: #{$bg-button-pressed-primary-dark};
92
174
 
93
- //button secondary
94
- --text-button-active-secondary: #{$text-button-active-secondary-dark};
95
- --outline-button-active-secondary: #{$outline-button-active-secondary-dark};
96
- --bg-button-active-secondary: #{$bg-button-active-secondary-dark};
97
- --text-button-hover-secondary: #{$text-button-hover-secondary-dark};
175
+
176
+ .hero-dark-theme {
177
+ --label-text-full-read-only-primary: #{$label-text-full-read-only-primary-dark};
178
+ --input-text-full-read-only-primary: #{$input-text-full-read-only-primary-dark};
179
+ --bg-close-dialog-header-hover-primary: #{$bg-close-dialog-header-hover-primary-dark};
180
+ --label-text-full-disabled-primary: #{$label-text-full-disabled-primary-dark};
181
+ --close-dialog-header-hover-primary: #{$close-dialog-header-hover-primary-dark};
182
+ --input-text-full-disabled-primary: #{$input-text-full-disabled-primary-dark};
183
+ --label-text-empty-enabled-pressed-primary: #{$label-text-empty-enabled-pressed-primary-dark};
184
+ --placeholder-empty-enabled-pressed-primary: #{$placeholder-empty-enabled-pressed-primary-dark};
185
+ --bg-field-empty-enabled-pressed-primary: #{$bg-field-empty-enabled-pressed-primary-dark};
186
+ --bg-field-empty-disabled-primary: #{$bg-field-empty-disabled-primary-dark};
187
+ --label-text-full-enabled-primary: #{$label-text-full-enabled-primary-dark};
188
+ --input-text-full-enabled-primary: #{$input-text-full-enabled-primary-dark};
189
+ --outline-field-full-enabled-primary: #{$outline-field-full-enabled-primary-dark};
190
+ --bg-field-full-enabled-primary: #{$bg-field-full-enabled-primary-dark};
191
+ --bg-field-empty-enabled-hover-primary: #{$bg-field-empty-enabled-hover-primary-dark};
192
+ --label-text-empty-enabled-primary: #{$label-text-empty-enabled-primary-dark};
193
+ --placeholder-empty-enabled-primary: #{$placeholder-empty-enabled-primary-dark};
194
+ --outline-field-empty-enabled-primary: #{$outline-field-empty-enabled-primary-dark};
195
+ --bg-field-empty-enabled-primary: #{$bg-field-empty-enabled-primary-dark};
196
+ --divider-primary: #{$divider-primary-dark};
197
+ --on-bg-menu-button-pressed-primary: #{$on-bg-menu-button-pressed-primary-dark};
198
+ --surface-secondary: #{$surface-secondary-dark};
199
+ --bg-menu-button-pressed-primary: #{$bg-menu-button-pressed-primary-dark};
200
+ --on-bg-menu-button-disabled-primary: #{$on-bg-menu-button-disabled-primary-dark};
201
+ --divider-menu-primary: #{$divider-menu-primary-dark};
202
+ --on-bg-button-active-primary: #{$on-bg-button-active-primary-dark};
203
+ --link-pressed-primary: #{$link-pressed-primary-dark};
204
+ --link-disabled-primary: #{$link-disabled-primary-dark};
205
+ --bg-link-hover-primary: #{$bg-link-hover-primary-dark};
206
+ --link-hover-primary: #{$link-hover-primary-dark};
207
+ --link-active-primary: #{$link-active-primary-dark};
208
+ --bg-calendar-nav-primary: #{$bg-calendar-nav-primary-dark};
209
+ --on-bg-switch-off-primary: #{$on-bg-switch-off-primary-dark};
210
+ --bg-switch-on-primary: #{$bg-switch-on-primary-dark};
211
+ --on-bg-dropdown-item-disabled-primary: #{$on-bg-dropdown-item-disabled-primary-dark};
212
+ --outline-dropdown-list-primary: #{$outline-dropdown-list-primary-dark};
213
+ --bg-calender-primary: #{$bg-calender-primary-dark};
214
+ --notification-error-highlight-primary: #{$notification-error-highlight-primary-dark};
215
+ --bg-table-header-secondary: #{$bg-table-header-secondary-dark};
216
+ --bg-dropdown-list-primary: #{$bg-dropdown-list-primary-dark};
217
+ --on-bg-highlight-neutro-secondary: #{$on-bg-highlight-neutro-secondary-dark};
218
+ --bg-tooltip-primary: #{$bg-tooltip-primary-dark};
219
+ --on-bg-tooltip-primary: #{$on-bg-tooltip-primary-dark};
220
+ --on-bg-icon-notification-success-primary: #{$on-bg-icon-notification-success-primary-dark};
221
+ --on-bg-dropdown-item-active-primary: #{$on-bg-dropdown-item-active-primary-dark};
222
+ --bg-switch-disabled-primary: #{$bg-switch-disabled-primary-dark};
223
+ --on-bg-dropdown-item-hover-primary: #{$on-bg-dropdown-item-hover-primary-dark};
224
+ --on-bg-table-header-secondary: #{$on-bg-table-header-secondary-dark};
225
+ --bg-table-hover-primary: #{$bg-table-hover-primary-dark};
226
+ --on-bg-table-hover-primary: #{$on-bg-table-hover-primary-dark};
227
+ --bg-table-active-primary: #{$bg-table-active-primary-dark};
228
+ --on-bg-table-active-primary: #{$on-bg-table-active-primary-dark};
229
+ --bg-table-header-primary: #{$bg-table-header-primary-dark};
230
+ --on-bg-table-header-primary: #{$on-bg-table-header-primary-dark};
231
+ --bg-dialog-primary: #{$bg-dialog-primary-dark};
232
+ --bg-icon-notification-warning-primary: #{$bg-icon-notification-warning-primary-dark};
233
+ --on-bg-stepper-completed-primary: #{$on-bg-stepper-completed-primary-dark};
234
+ --on-bg-dialog-header-primary: #{$on-bg-dialog-header-primary-dark};
235
+ --notification-warning-highlight-primary: #{$notification-warning-highlight-primary-dark};
236
+ --line-stepper-completed-primary: #{$line-stepper-completed-primary-dark};
237
+ --on-bg-button-hover-tertiary: #{$on-bg-button-hover-tertiary-dark};
238
+ --number-calendar-hover-primary: #{$number-calendar-hover-primary-dark};
239
+ --icon-hover-primary: #{$icon-hover-primary-dark};
240
+ --text-stepper-completed-primary: #{$text-stepper-completed-primary-dark};
241
+ --arrow-calendar-disabled-primary: #{$arrow-calendar-disabled-primary-dark};
242
+ --bg-button-hover-tertiary: #{$bg-button-hover-tertiary-dark};
243
+ --icon-active-primary: #{$icon-active-primary-dark};
244
+ --bg-stepper-current-primary: #{$bg-stepper-current-primary-dark};
245
+ --on-bg-stepper-current-primary: #{$on-bg-stepper-current-primary-dark};
246
+ --line-stepper-current-primary: #{$line-stepper-current-primary-dark};
247
+ --bg-dialog-header-primary: #{$bg-dialog-header-primary-dark};
248
+ --bg-field-full-disabled-primary: #{$bg-field-full-disabled-primary-dark};
249
+ --notification-sucess-highlight-primary: #{$notification-sucess-highlight-primary-dark};
250
+ --bg-field-full-enabled-hover-primary: #{$bg-field-full-enabled-hover-primary-dark};
251
+ --alternative-primary: #{$alternative-primary-dark};
252
+ --text-stepper-current-primary: #{$text-stepper-current-primary-dark};
253
+ --close-dialog-header-active-primary: #{$close-dialog-header-active-primary-dark};
254
+ --on-bg-icon-notification-warning-primary: #{$on-bg-icon-notification-warning-primary-dark};
255
+ --bg-stepper-pending-primary: #{$bg-stepper-pending-primary-dark};
256
+ --outline-field-empty-enabled-pressed-primary: #{$outline-field-empty-enabled-pressed-primary-dark};
257
+ --on-bg-stepper-pending-primary: #{$on-bg-stepper-pending-primary-dark};
258
+ --placeholder-empty-disabled-primary: #{$placeholder-empty-disabled-primary-dark};
259
+ --line-stepper-pending-primary: #{$line-stepper-pending-primary-dark};
260
+ --on-bg-icon-dialog-primary: #{$on-bg-icon-dialog-primary-dark};
261
+ --bg-field-full-read-only-primary: #{$bg-field-full-read-only-primary-dark};
262
+ --label-text-empty-disabled-primary: #{$label-text-empty-disabled-primary-dark};
263
+ --text-stepper-pending-primary: #{$text-stepper-pending-primary-dark};
264
+ --bg-checkbox-on-primary: #{$bg-checkbox-on-primary-dark};
265
+ --outline-checkbox-off-primary: #{$outline-checkbox-off-primary-dark};
266
+ --on-bg-calender-primary: #{$on-bg-calender-primary-dark};
267
+ --loading-primary: #{$loading-primary-dark};
268
+ --outline-disabled: #{$outline-disabled-dark};
269
+ --bg-switch-off-primary: #{$bg-switch-off-primary-dark};
270
+ --on-bg-calendar-nav-primary: #{$on-bg-calendar-nav-primary-dark};
271
+ --on-bg-button-pressed-secondary: #{$on-bg-button-pressed-secondary-dark};
98
272
  --outline-button-hover-secondary: #{$outline-button-hover-secondary-dark};
273
+ --bg-button-active-secondary: #{$bg-button-active-secondary-dark};
274
+ --outline-button-active-secondary: #{$outline-button-active-secondary-dark};
275
+ --surface-primary: #{$surface-primary-dark};
276
+ --bg-button-pressed-tertiary: #{$bg-button-pressed-tertiary-dark};
99
277
  --bg-button-hover-secondary: #{$bg-button-hover-secondary-dark};
100
- --text-button-pressed-secondary: #{$text-button-pressed-secondary-dark};
101
- --outline-button-pressed-secondary: #{$outline-button-pressed-secondary-dark};
278
+ --on-bg-button-active-positive: #{$on-bg-button-active-positive-dark};
279
+ --on-bg-switch-disabled-primary: #{$on-bg-switch-disabled-primary-dark};
280
+ --bg-dropdown-item-hover-primary: #{$bg-dropdown-item-hover-primary-dark};
281
+ --bg-button-pressed-positive: #{$bg-button-pressed-positive-dark};
282
+ --on-bg-menu-button-hover-primary: #{$on-bg-menu-button-hover-primary-dark};
283
+ --negative-primary: #{$negative-primary-dark};
284
+ --bg-menu-button-hover-primary: #{$bg-menu-button-hover-primary-dark};
285
+ --positive-primary: #{$positive-primary-dark};
286
+ --on-bg-menu-button-active-primary: #{$on-bg-menu-button-active-primary-dark};
287
+ --bg-stepper-completed-primary: #{$bg-stepper-completed-primary-dark};
288
+ --bg-highlight-neutro-primary: #{$bg-highlight-neutro-primary-dark};
289
+ --bg-button-disabled: #{$bg-button-disabled-dark};
102
290
  --bg-button-pressed-secondary: #{$bg-button-pressed-secondary-dark};
103
-
104
- //button tertiary
105
- --text-button-active-tertiary: #{$text-button-active-tertiary-dark};
291
+ --on-bg-button-active-tertiary: #{$on-bg-button-active-tertiary-dark};
292
+ --number-calendar-pressed-primary: #{$number-calendar-pressed-primary-dark};
293
+ --on-bg-notification-primary: #{$on-bg-notification-primary-dark};
294
+ --on-bg-button-hover-alternative: #{$on-bg-button-hover-alternative-dark};
295
+ --cta-primary: #{$bg-button-active-primary-dark};
296
+ --bg-button-active-alternative: #{$bg-button-active-alternative-dark};
297
+ --bg-icon-notification-error-primary: #{$bg-icon-notification-error-primary-dark};
106
298
  --bg-button-active-tertiary: #{$bg-button-active-tertiary-dark};
107
- --text-button-hover-tertiary: #{$text-button-hover-tertiary-dark};
108
- --bg-button-hover-tertiary: #{$bg-button-hover-tertiary-dark};
109
- --text-button-pressed-tertiary: #{$text-button-pressed-tertiary-dark};
110
- --bg-button-pressed-tertiary: #{$bg-button-pressed-tertiary-dark};
111
-
112
- //button positive
113
- --text-button-active-positive: #{$text-button-active-positive-dark};
114
- --bg-button-active-positive: #{$bg-button-active-positive-dark};
115
- --text-button-hover-positive: #{$text-button-hover-positive-dark};
299
+ --bg-arrow-calendar-hover-primary: #{$bg-arrow-calendar-hover-primary-dark};
300
+ --bg-menu-primary: #{$bg-menu-primary-dark};
301
+ --logo-primary: #{$logo-primary-dark};
302
+ --outline-button-pressed-secondary: #{$outline-button-pressed-secondary-dark};
303
+ --on-bg-button-active-alternative: #{$on-bg-button-active-alternative-dark};
116
304
  --bg-button-hover-positive: #{$bg-button-hover-positive-dark};
117
- --text-button-pressed-positive: #{$text-button-pressed-positive-dark};
118
- --bg-button-pressed-positive: #{$bg-button-pressed-positive-dark};
119
-
120
- //button negative
121
- --text-button-active-negative: #{$text-button-active-negative-dark};
122
- --bg-button-active-negative: #{$bg-button-active-negative-dark};
123
- --text-button-hover-negative: #{$text-button-hover-negative-dark};
124
- --bg-button-hover-negative: #{$bg-button-hover-negative-dark};
125
- --text-button-pressed-negative: #{$text-button-pressed-negative-dark};
305
+ --number-calender-active-primary: #{$number-calender-active-primary-dark};
306
+ --bg-notification-primary: #{$bg-notification-primary-dark};
126
307
  --bg-button-pressed-negative: #{$bg-button-pressed-negative-dark};
127
-
128
- //button alternative
129
- --text-button-active-alternative: #{$text-button-active-alternative-dark};
130
- --bg-button-active-alternative: #{$bg-button-active-alternative-dark};
131
- --text-button-hover-alternative: #{$text-button-hover-alternative-dark};
132
- --bg-button-hover-alternative: #{$bg-button-hover-alternative-dark};
133
- --text-button-pressed-alternative: #{$text-button-pressed-alternative-dark};
134
- --bg-button-pressed-alternative: #{$bg-button-pressed-alternative-dark};
135
-
136
- //button disabled
137
- --text-button-disabled: #{$text-button-disabled-dark};
138
- --bg-button-disabled: #{$bg-button-disabled-dark};
139
-
140
- //surface
141
- --surface-primary: #{$surface-primary-dark};
142
- --surface-secondary: #{$surface-secondary-dark};
143
-
144
- //text
308
+ --on-bg-button-pressed-negative: #{$on-bg-button-pressed-negative-dark};
309
+ --on-bg-menu-primary: #{$on-bg-menu-primary-dark};
310
+ --on-bg-highlight-neutro-primary: #{$on-bg-highlight-neutro-primary-dark};
311
+ --on-bg-button-pressed-positive: #{$on-bg-button-pressed-positive-dark};
312
+ --radio-button-on-primary: #{$radio-button-on-primary-dark};
313
+ --radio-button-off-primary: #{$radio-button-off-primary-dark};
314
+ --bg-number-calendar-hover-primary: #{$bg-number-calendar-hover-primary-dark};
315
+ --bg-icon-dialog-primary: #{$bg-icon-dialog-primary-dark};
316
+ --bg-button-hover-negative: #{$bg-button-hover-negative-dark};
317
+ --on-bg-icon-notification-error-primary: #{$on-bg-icon-notification-error-primary-dark};
318
+ --bg-button-active-positive: #{$bg-button-active-positive-dark};
319
+ --on-bg-button-hover-negative: #{$on-bg-button-hover-negative-dark};
320
+ --on-bg-button-active-negative: #{$on-bg-button-active-negative-dark};
321
+ --bg-number-calendar-pressed-primary: #{$bg-number-calendar-pressed-primary-dark};
322
+ --bg-button-active-negative: #{$bg-button-active-negative-dark};
323
+ --bg-button-active-primary: #{$bg-button-active-primary-dark};
324
+ --arrow-calendar-active-primary: #{$arrow-calendar-active-primary-dark};
325
+ --on-bg-button-hover-positive: #{$on-bg-button-hover-positive-dark};
326
+ --on-bg-button-hover-primary: #{$on-bg-button-hover-primary-dark};
327
+ --bg-icon-notification-success-primary: #{$bg-icon-notification-success-primary-dark};
328
+ --arrow-calendar-hover-primary: #{$arrow-calendar-hover-primary-dark};
329
+ --on-bg-button-pressed-tertiary: #{$on-bg-button-pressed-tertiary-dark};
330
+ --on-bg-button-pressed-primary: #{$on-bg-button-pressed-primary-dark};
331
+ --number-calendar-disabled-primary: #{$number-calendar-disabled-primary-dark};
332
+ --bg-button-pressed-primary: #{$bg-button-pressed-primary-dark};
333
+ --bg-button-hover-primary: #{$bg-button-hover-primary-dark};
334
+ --on-bg-checkbox-on-primary: #{$on-bg-checkbox-on-primary-dark};
335
+ --on-bg-dropdown-item-pressed-primary: #{$on-bg-dropdown-item-pressed-primary-dark};
336
+ --on-bg-button-pressed-alternative: #{$on-bg-button-pressed-alternative-dark};
337
+ --on-bg-switch-on-primary: #{$on-bg-switch-on-primary-dark};
145
338
  --text-primary: #{$text-primary-dark};
146
-
147
- //divider
148
- --divider-primary: #{$divider-primary-dark};
149
-
150
- //logo
151
- --logo-primary: #{$logo-primary-dark};
152
-
153
- //highlight
154
- --text-highlight-neutro-primary: #{$text-highlight-neutro-primary-dark};
155
- --bg-highlight-neutro-primary: #{$bg-highlight-neutro-primary-dark};
156
- --text-highlight-neutro-secondary: #{$text-highlight-neutro-secondary-dark};
339
+ --bg-button-pressed-alternative: #{$bg-button-pressed-alternative-dark};
340
+ --on-bg-button-active-secondary: #{$on-bg-button-active-secondary-dark};
341
+ --on-bg-button-hover-secondary: #{$on-bg-button-hover-secondary-dark};
342
+ --on-bg-disabled: #{$on-bg-button-disabled-dark};
157
343
  --bg-highlight-neutro-secondary: #{$bg-highlight-neutro-secondary-dark};
158
-
159
- //system
160
- --positive-primary: #{$positive-primary-dark};
161
- --negative-primary: #{$negative-primary-dark};
162
- --cta-primary: #{$bg-button-active-primary-dark};
344
+ --bg-button-hover-alternative: #{$bg-button-hover-alternative-dark};
163
345
  }
@@ -29,7 +29,7 @@ body {
29
29
 
30
30
  &.sm-bold {
31
31
  font-size: $font-size-12px;
32
- font-weight: 600;
32
+ font-weight: 650;
33
33
  line-height: 1.17525rem;
34
34
  letter-spacing: 0.01875rem;
35
35
  }
@@ -45,18 +45,25 @@ body {
45
45
  font-size: $font-size-21px;
46
46
  font-weight: 400;
47
47
  line-height: 2.088rem;
48
- letter-spacing: 0.03331rem;
48
+ letter-spacing: 0.01969rem;
49
49
  }
50
50
 
51
51
  &.lg-bold {
52
52
  font-size: $font-size-21px;
53
53
  font-weight: 700;
54
- line-height: 2.088rem;
55
- letter-spacing: 0.03331rem;
54
+ line-height: 1.99106rem;
55
+ letter-spacing: 0.01969rem;
56
56
  }
57
57
  }
58
58
 
59
59
  .hr-title {
60
+
61
+ &.sm-regular {
62
+ font-size: $font-size-16px;
63
+ font-weight: 420;
64
+ letter-spacing: 0.02rem;
65
+ }
66
+
60
67
  &.sm-bold {
61
68
  font-size: $font-size-16px;
62
69
  font-weight: 731;
@@ -65,20 +72,19 @@ body {
65
72
 
66
73
  &.md-bold {
67
74
  font-size: $font-size-21px;
68
- font-weight: 731;
75
+ font-weight: 745;
69
76
  letter-spacing: 0.02665rem;
70
77
  }
71
78
 
72
79
  &.lg-regular {
73
80
  font-size: $font-size-28px;
74
- font-weight: 532;
75
- letter-spacing: -0.00875rem;
81
+ font-weight: 480;
82
+ letter-spacing: 0.02625rem;
76
83
  }
77
84
 
78
85
  &.lg-bold {
79
86
  font-size: $font-size-28px;
80
- font-weight: 800;
81
- letter-spacing: -0.00875rem;
87
+ font-weight: 760;
82
88
  }
83
89
  }
84
90
 
@@ -91,20 +97,20 @@ body {
91
97
 
92
98
  &.sm-bold {
93
99
  font-size: $font-size-12px;
94
- font-weight: 700;
100
+ font-weight: 730;
95
101
  letter-spacing: 0.01875rem;
96
102
  }
97
103
 
98
104
  &.md-regular {
99
105
  font-size: $font-size-16px;
100
106
  font-weight: 343;
101
- letter-spacing: 0.025rem;
107
+ letter-spacing: 0.03rem;
102
108
  }
103
109
 
104
110
  &.md-bold {
105
111
  font-size: $font-size-16px;
106
- font-weight: 554;
107
- letter-spacing: 0.025rem;
112
+ font-weight: 700;
113
+ letter-spacing: 0.03rem;
108
114
  }
109
115
 
110
116
  &.lg-regular {
@@ -115,7 +121,7 @@ body {
115
121
 
116
122
  &.lg-bold {
117
123
  font-size: $font-size-28px;
118
- font-weight: 532;
124
+ font-weight: 700;
119
125
  letter-spacing: 0.04375rem;
120
126
  }
121
127
  }
@@ -123,19 +129,19 @@ body {
123
129
  .hr-headline {
124
130
  &.sm-bold {
125
131
  font-size: $font-size-32px;
126
- font-weight: 674;
132
+ font-weight: 700;
127
133
  letter-spacing: 0.02rem;
128
134
  }
129
135
 
130
136
  &.md-bold {
131
137
  font-size: $font-size-38px;
132
- font-weight: 674;
138
+ font-weight: 700;
133
139
  letter-spacing: 0.02375rem;
134
140
  }
135
141
 
136
142
  &.lg-bold {
137
143
  font-size: $font-size-46px;
138
- font-weight: 674;
144
+ font-weight: 700;
139
145
  letter-spacing: 0.02875rem;
140
146
  }
141
147
  }
@@ -143,19 +149,19 @@ body {
143
149
  .hr-display {
144
150
  &.sm-bold {
145
151
  font-size: $font-size-50px;
146
- font-weight: 674;
152
+ font-weight: 700;
147
153
  letter-spacing: 0.03125rem;
148
154
  }
149
155
 
150
156
  &.md-bold {
151
157
  font-size: $font-size-67px;
152
- font-weight: 674;
158
+ font-weight: 700;
153
159
  letter-spacing: 0.04188rem;
154
160
  }
155
161
 
156
162
  &.lg-bold {
157
163
  font-size: $font-size-90px;
158
- font-weight: 674;
164
+ font-weight: 700;
159
165
  letter-spacing: 0.05625rem;
160
166
  }
161
167
  }