@progressio_resources/gravity-design-system 1.0.4 → 1.0.6

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.4",
4
+ "version": "1.0.6",
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,391 @@
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
+ // dialog
4
+ $bg-icon-dialog-primary-dark: $n800;
5
+ $on-bg-icon-dialog-primary-dark: $n300;
6
+ $bg-close-dialog-header-hover-primary-dark: $n100;
7
+ $close-dialog-header-hover-primary-dark: $b700;
8
+ $close-dialog-header-active-primary-dark: $b700;
9
+ $bg-dialog-header-primary-dark: $n200;
10
+ $on-bg-dialog-header-primary-dark: $n800;
11
+ $bg-dialog-primary-dark: $n100;
12
+ $bg-icon-dialog-primary-light: $n300;
13
+ $on-bg-icon-dialog-primary-light: $n900;
14
+ $bg-close-dialog-header-hover-primary-light: $n900;
15
+ $close-dialog-header-hover-primary-light: $b400;
16
+ $close-dialog-header-active-primary-light: $b400;
17
+ $bg-dialog-header-primary-light: $n800;
18
+ $on-bg-dialog-header-primary-light: $n300;
19
+ $bg-dialog-primary-light: $n900;
20
+
21
+ // text-field
22
+ $label-text-full-read-only-primary-dark: $n800;
23
+ $input-text-full-read-only-primary-dark: $n800;
24
+ $input-text-full-disabled-primary-dark: $n300;
25
+ $placeholder-empty-enabled-pressed-primary-dark: $n800;
26
+ $label-text-full-read-only-primary-light: $n400;
27
+ $bg-field-full-read-only-primary-light: $n800;
28
+ $label-text-full-disabled-primary-light: $n700;
29
+ $bg-field-full-disabled-primary-light: $n800;
30
+ $label-text-empty-enabled-pressed-primary-light: $n400;
31
+ $placeholder-empty-enabled-pressed-primary-light: $n400;
32
+ $outline-field-empty-enabled-pressed-primary-light: $b400;
33
+ $bg-field-empty-enabled-pressed-primary-light: $n900;
34
+ $label-text-empty-disabled-primary-light: $n700;
35
+ $placeholder-empty-disabled-primary-light: $n700;
36
+ $bg-field-empty-disabled-primary-light: $n800;
37
+ $label-text-full-enabled-primary-dark: $n800;
38
+ $input-text-full-enabled-primary-dark: $n800;
39
+ $outline-field-full-enabled-primary-dark: $n800;
40
+ $bg-field-full-enabled-primary-dark: $n100;
41
+ $bg-field-empty-enabled-hover-primary-dark: $n200;
42
+ $label-text-empty-enabled-primary-dark: $n800;
43
+ $bg-field-full-enabled-hover-primary-light: $n800;
44
+ $placeholder-empty-enabled-primary-dark: $n400;
45
+ $label-text-full-enabled-primary-light: $n400;
46
+ $outline-field-empty-enabled-primary-light: $n400;
47
+ $bg-field-full-enabled-hover-primary-dark: $n200;
48
+ $bg-field-empty-disabled-primary-dark: $n200;
49
+ $bg-field-full-enabled-primary-light: $n900;
50
+ $placeholder-empty-enabled-primary-light: $n600;
51
+ $label-text-empty-enabled-primary-light: $n400;
52
+ $bg-field-empty-enabled-primary-light: $n900;
53
+ $bg-field-empty-enabled-primary-dark: $n100;
54
+ $outline-field-full-enabled-primary-light: $n400;
55
+ $input-text-full-enabled-primary-light: $n400;
56
+ $bg-field-empty-enabled-hover-primary-light: $n800;
57
+ $outline-field-empty-enabled-primary-dark: $n800;
58
+ $bg-field-full-read-only-primary-dark: $n300;
59
+ $bg-field-empty-enabled-pressed-primary-dark: $n100;
60
+ $label-text-empty-disabled-primary-dark: $n300;
61
+ $bg-field-full-disabled-primary-dark: $n200;
62
+ $input-text-full-read-only-primary-light: $n400;
63
+ $input-text-full-disabled-primary-light: $n700;
64
+ $placeholder-empty-disabled-primary-dark: $n300;
65
+ $label-text-full-disabled-primary-dark: $n300;
66
+ $label-text-empty-enabled-pressed-primary-dark: $n800;
67
+ $outline-field-empty-enabled-pressed-primary-dark: $b700;
68
+
69
+ // system
70
+ $alternative-primary-light: $o300;
71
+ $alternative-primary-dark: $o400;
72
+ $negative-primary-light: $r400;
73
+ $negative-primary-dark: $r500;
74
+ $positive-primary-light: $g300;
75
+ $positive-primary-dark: $g500;
76
+
77
+ // button-primary
7
78
  $bg-button-active-primary-dark: $b700;
8
- $text-button-hover-primary-light: $n800;
79
+ $bg-button-active-primary-light: $b400;
80
+ $on-bg-button-hover-primary-dark: $b200;
9
81
  $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;
82
+ $on-bg-button-pressed-primary-dark: $b200;
83
+ $on-bg-button-pressed-primary-light: $n900;
13
84
  $bg-button-pressed-primary-light: $b300;
14
- $text-button-pressed-primary-dark: $b200;
85
+ $bg-button-hover-primary-dark: $b800;
15
86
  $bg-button-pressed-primary-dark: $b600;
87
+ $on-bg-button-hover-primary-light: $n900;
88
+ $on-bg-button-active-primary-dark: $n100;
89
+ $on-bg-button-active-primary-light: $n900;
16
90
 
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;
91
+ // surface
92
+ $surface-primary-light: $n800;
93
+ $surface-primary-dark: $n200;
94
+ $surface-secondary-dark: $n100;
95
+ $surface-secondary-light: $n900;
96
+
97
+ // menu
98
+ $on-bg-menu-button-pressed-primary-dark: $n900;
99
+ $bg-menu-button-pressed-primary-dark: $n400;
100
+ $on-bg-menu-button-disabled-primary-dark: $n300;
101
+ $on-bg-menu-button-hover-primary-dark: $n800;
102
+ $bg-menu-button-hover-primary-dark: $n200;
103
+ $on-bg-menu-button-active-primary-dark: $n800;
104
+ $on-bg-menu-primary-dark: $n800;
105
+ $divider-menu-primary-dark: $n200;
106
+ $on-bg-menu-button-disabled-primary-light: $n700;
107
+ $bg-menu-button-hover-primary-light: $n800;
108
+ $bg-menu-primary-light: $n900;
109
+ $bg-menu-primary-dark: $n100;
110
+ $bg-menu-button-pressed-primary-light: $b700;
111
+ $on-bg-menu-button-hover-primary-light: $n400;
112
+ $on-bg-menu-primary-light: $n400;
113
+ $divider-menu-primary-light: $n800;
114
+ $on-bg-menu-button-active-primary-light: $n400;
115
+ $on-bg-menu-button-pressed-primary-light: $n400;
116
+
117
+ // link
118
+ $link-disabled-primary-dark: $n300;
119
+ $link-pressed-primary-light: $b200;
120
+ $link-disabled-primary-light: $n700;
121
+ $bg-link-hover-primary-light: $b800;
122
+ $link-active-primary-light: $b400;
123
+ $link-hover-primary-dark: $b700;
124
+ $link-hover-primary-light: $b400;
125
+ $link-active-primary-dark: $b700;
126
+ $bg-link-hover-primary-dark: $n300;
127
+ $link-pressed-primary-dark: $b600;
128
+
129
+ // notification
130
+ $notification-sucess-highlight-primary-light: $g300;
131
+ $bg-icon-notification-success-primary-light: $g500;
132
+ $notification-error-highlight-primary-light: $r400;
133
+ $notification-warning-highlight-primary-dark: $o400;
134
+ $on-bg-icon-notification-success-primary-dark: $g100;
135
+ $bg-icon-notification-error-primary-light: $r600;
136
+ $bg-icon-notification-warning-primary-dark: $o400;
137
+ $on-bg-icon-notification-warning-primary-dark: $o200;
138
+ $on-bg-icon-notification-error-primary-light: $r200;
139
+ $bg-icon-notification-error-primary-dark: $r600;
140
+ $on-bg-icon-notification-success-primary-light: $g100;
141
+ $notification-sucess-highlight-primary-dark: $g500;
142
+ $bg-icon-notification-success-primary-dark: $g500;
143
+ $notification-warning-highlight-primary-light: $o300;
144
+ $notification-error-highlight-primary-dark: $r600;
145
+ $on-bg-notification-primary-dark: $n800;
146
+ $bg-notification-primary-light: $n900;
147
+ $on-bg-icon-notification-error-primary-dark: $r200;
148
+ $bg-icon-notification-warning-primary-light: $o400;
149
+ $bg-notification-primary-dark: $n200;
150
+ $on-bg-notification-primary-light: $n400;
151
+ $on-bg-icon-notification-warning-primary-light: $o200;
152
+
153
+ // switch
154
+ $bg-switch-disabled-primary-dark: $n200;
155
+ $on-bg-switch-disabled-primary-dark: $n100;
156
+ $on-bg-switch-disabled-primary-light: $n900;
157
+ $bg-switch-off-primary-light: $n700;
158
+ $bg-switch-disabled-primary-light: $n800;
159
+ $bg-switch-on-primary-light: $b400;
160
+ $bg-switch-off-primary-dark: $n300;
161
+ $on-bg-switch-on-primary-dark: $n200;
162
+ $on-bg-switch-off-primary-light: $n800;
163
+ $on-bg-switch-off-primary-dark: $n400;
164
+ $bg-switch-on-primary-dark: $b700;
165
+ $on-bg-switch-on-primary-light: $n900;
166
+
167
+ // dropdown-list
168
+ $on-bg-dropdown-item-disabled-primary-dark: $n300;
169
+ $on-bg-dropdown-item-pressed-primary-dark: $n900;
170
+ $bg-dropdown-item-hover-primary-dark: $n300;
171
+ $on-bg-dropdown-item-hover-primary-dark: $n800;
172
+ $on-bg-dropdown-item-active-primary-dark: $n800;
173
+ $on-bg-dropdown-item-disabled-primary-light: $n700;
174
+ $bg-dropdown-item-hover-primary-light: $b700;
175
+ $on-bg-dropdown-item-hover-primary-light: $n400;
176
+ $on-bg-dropdown-item-active-primary-light: $n400;
177
+ $outline-dropdown-list-primary-dark: $n800;
178
+ $bg-dropdown-list-primary-dark: $n100;
179
+ $outline-dropdown-list-primary-light: $n400;
180
+ $bg-dropdown-list-primary-light: $n900;
181
+ $on-bg-dropdown-item-pressed-primary-light: $n200;
182
+
183
+ // icon
184
+ $icon-hover-primary-dark: $b700;
185
+ $icon-active-primary-dark: $n800;
186
+ $icon-hover-primary-light: $b400;
187
+ $icon-active-primary-light: $n400;
188
+
189
+ // calendar
190
+ $number-calendar-disabled-primary-dark: $n400;
191
+ $on-bg-calender-primary-dark: $n800;
192
+ $arrow-calendar-active-primary-light: $n900;
193
+ $bg-number-calendar-pressed-primary-light: $b300;
194
+ $arrow-calendar-disabled-primary-light: $b500;
195
+ $number-calendar-pressed-primary-dark: $n800;
196
+ $number-calendar-pressed-primary-light: $n900;
197
+ $bg-number-calendar-pressed-primary-dark: $n100;
198
+ $bg-number-calendar-hover-primary-light: $b800;
199
+ $number-calendar-hover-primary-dark: $n800;
200
+ $number-calendar-hover-primary-light: $n400;
201
+ $bg-arrow-calendar-hover-primary-light: $b500;
202
+ $arrow-calendar-hover-primary-dark: $n100;
203
+ $arrow-calendar-active-primary-dark: $n100;
204
+ $on-bg-calender-primary-light: $n400;
205
+ $bg-calender-primary-dark: $n200;
206
+ $number-calendar-disabled-primary-light: $n700;
207
+ $arrow-calendar-disabled-primary-dark: $b600;
208
+ $bg-calendar-nav-primary-light: $b400;
209
+ $on-bg-calendar-nav-primary-light: $n900;
210
+ $on-bg-calendar-nav-primary-dark: $n100;
211
+ $bg-number-calendar-hover-primary-dark: $n400;
212
+ $number-calender-active-primary-dark: $n800;
213
+ $bg-calendar-nav-primary-dark: $b700;
214
+ $bg-arrow-calendar-hover-primary-dark: $b800;
215
+ $number-calender-active-primary-light: $n400;
216
+ $bg-calender-primary-light: $n900;
217
+ $arrow-calendar-hover-primary-light: $n900;
218
+
219
+ // tooltip
220
+ $bg-tooltip-primary-light: $n800;
221
+ $on-bg-tooltip-primary-light: $n400;
222
+ $bg-tooltip-primary-dark: $n400;
223
+ $on-bg-tooltip-primary-dark: $n900;
224
+
225
+ // table
226
+ $bg-table-header-secondary-dark: $n400;
227
+ $on-bg-table-header-secondary-dark: $n900;
228
+ $bg-table-hover-primary-dark: $n200;
229
+ $on-bg-table-hover-primary-dark: $n800;
230
+ $bg-table-active-primary-dark: $n100;
231
+ $on-bg-table-active-primary-dark: $n800;
232
+ $bg-table-header-secondary-light: $n700;
233
+ $on-bg-table-header-secondary-light: $n400;
234
+ $on-bg-table-hover-primary-light: $n400;
235
+ $bg-table-hover-primary-light: $n800;
236
+ $bg-table-active-primary-light: $n900;
237
+ $on-bg-table-active-primary-light: $n400;
238
+ $bg-table-header-primary-light: $n900;
239
+ $on-bg-table-header-primary-light: $n400;
240
+ $on-bg-table-header-primary-dark: $n800;
241
+ $bg-table-header-primary-dark: $n100;
242
+
243
+ // button-tertiary
244
+ $bg-button-hover-tertiary-light: $b800;
245
+ $on-bg-button-active-tertiary-dark: $n900;
246
+ $on-bg-button-hover-tertiary-light: $b400;
247
+ $on-bg-button-active-tertiary-light: $b400;
248
+ $on-bg-button-hover-tertiary-dark: $n900;
249
+ $bg-button-pressed-tertiary-dark: $n200;
250
+ $on-bg-button-pressed-tertiary-dark: $n900;
251
+ $bg-button-pressed-tertiary-light: $b600;
252
+ $on-bg-button-pressed-tertiary-light: $b300;
253
+ $bg-button-hover-tertiary-dark: $n500;
254
+ $bg-button-active-tertiary-light: $b700;
255
+ $bg-button-active-tertiary-dark: $n400;
256
+
257
+ // divider
258
+ $divider-primary-dark: $n800;
259
+ $divider-primary-light: $n400;
260
+
261
+ // stepper
262
+ $bg-stepper-completed-primary-dark: $g500;
263
+ $on-bg-stepper-completed-primary-dark: $g100;
264
+ $line-stepper-completed-primary-dark: $g500;
265
+ $text-stepper-completed-primary-dark: $n800;
266
+ $bg-stepper-current-primary-dark: $b700;
267
+ $on-bg-stepper-current-primary-dark: $n100;
268
+ $line-stepper-current-primary-dark: $b700;
269
+ $text-stepper-current-primary-dark: $n800;
270
+ $bg-stepper-pending-primary-dark: $n400;
271
+ $on-bg-stepper-pending-primary-dark: $n100;
272
+ $line-stepper-pending-primary-dark: $n400;
273
+ $text-stepper-pending-primary-dark: $n400;
274
+ $bg-stepper-current-primary-light: $b400;
275
+ $on-bg-stepper-current-primary-light: $n900;
276
+ $text-stepper-current-primary-light: $n500;
277
+ $bg-stepper-pending-primary-light: $n800;
278
+ $text-stepper-pending-primary-light: $n600;
279
+ $text-stepper-completed-primary-light: $n500;
280
+ $line-stepper-current-primary-light: $b400;
281
+ $line-stepper-completed-primary-light: $g500;
282
+ $line-stepper-pending-primary-light: $n800;
283
+ $on-bg-stepper-pending-primary-light: $n600;
284
+ $on-bg-stepper-completed-primary-light: $g100;
285
+ $bg-stepper-completed-primary-light: $g500;
286
+
287
+ // loading
288
+ $loading-primary-dark: $b700;
289
+ $loading-primary-light: $b400;
290
+
291
+ // button-secondary
292
+ $outline-button-pressed-secondary-dark: $b600;
293
+ $on-bg-button-pressed-secondary-dark: $b600;
294
+ $outline-button-hover-secondary-light: $b500;
295
+ $bg-button-pressed-secondary-dark: $n100;
296
+ $on-bg-button-hover-secondary-dark: $b800;
297
+ $bg-button-pressed-secondary-light: $n900;
298
+ $bg-button-hover-secondary-light: $n900;
22
299
  $outline-button-active-secondary-dark: $b700;
300
+ $bg-button-active-secondary-light: $n900;
23
301
  $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;
302
+ $outline-button-active-secondary-light: $b400;
303
+ $on-bg-button-active-secondary-light: $b400;
304
+ $on-bg-button-active-secondary-dark: $b700;
28
305
  $outline-button-hover-secondary-dark: $b800;
29
306
  $bg-button-hover-secondary-dark: $n100;
30
- $text-button-pressed-secondary-light: $b300;
31
307
  $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;
308
+ $on-bg-button-pressed-secondary-light: $b300;
309
+ $on-bg-button-hover-secondary-light: $b500;
36
310
 
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;
49
- $bg-button-pressed-tertiary-dark: $n200;
311
+ // button-negative
312
+ $on-bg-button-hover-negative-light: $r200;
313
+ $on-bg-button-pressed-negative-light: $r100;
314
+ $bg-button-hover-negative-dark: $r700;
315
+ $on-bg-button-hover-negative-dark: $r300;
316
+ $bg-button-active-negative-dark: $r600;
317
+ $bg-button-active-negative-light: $r600;
318
+ $on-bg-button-active-negative-dark: $r200;
319
+ $bg-button-pressed-negative-dark: $r500;
320
+ $on-bg-button-pressed-negative-dark: $r100;
321
+ $bg-button-pressed-negative-light: $r500;
322
+ $bg-button-hover-negative-light: $r700;
323
+ $on-bg-button-active-negative-light: $r200;
50
324
 
51
- //button positive
52
- $text-button-active-positive-light: $g100;
53
- $bg-button-active-positive-light: $g500;
54
- $text-button-active-positive-dark: $g100;
325
+ // button-positive
326
+ $on-bg-button-active-positive-light: $g100;
327
+ $bg-button-pressed-positive-light: $g400;
55
328
  $bg-button-active-positive-dark: $g500;
56
- $text-button-hover-positive-light: $g100;
329
+ $on-bg-button-hover-positive-light: $g100;
330
+ $bg-button-active-positive-light: $g500;
331
+ $on-bg-button-active-positive-dark: $g100;
332
+ $bg-button-pressed-positive-dark: $g400;
333
+ $on-bg-button-pressed-positive-dark: $g100;
57
334
  $bg-button-hover-positive-light: $g600;
58
- $text-button-hover-positive-dark: $g100;
335
+ $on-bg-button-hover-positive-dark: $g100;
336
+ $on-bg-button-pressed-positive-light: $g100;
59
337
  $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
338
 
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;
339
+ // checkbox
340
+ $bg-checkbox-on-primary-dark: $b700;
341
+ $bg-checkbox-on-primary-light: $b400;
342
+ $on-bg-checkbox-on-primary-dark: $n100;
343
+ $on-bg-checkbox-on-primary-light: $n900;
344
+ $outline-checkbox-off-primary-dark: $n800;
345
+ $outline-checkbox-off-primary-light: $n400;
78
346
 
79
- //button alternative
80
- $text-button-active-alternative-light: $o200;
81
- $bg-button-active-alternative-light: $o400;
82
- $text-button-active-alternative-dark: $o200;
83
- $bg-button-active-alternative-dark: $o400;
84
- $text-button-hover-alternative-light: $o200;
347
+ // radio button
348
+ $radio-button-on-primary-dark: $b700;
349
+ $radio-button-off-primary-light: $n400;
350
+ $radio-button-off-primary-dark: $n800;
351
+ $radio-button-on-primary-light: $b400;
352
+
353
+ // button-alternative
354
+ $on-bg-button-pressed-alternative-dark: $o100;
85
355
  $bg-button-hover-alternative-light: $o500;
86
356
  $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
357
  $bg-button-pressed-alternative-dark: $o300;
358
+ $bg-button-pressed-alternative-light: $o300;
359
+ $on-bg-button-pressed-alternative-light: $o100;
360
+ $on-bg-button-hover-alternative-dark: $o200;
361
+ $on-bg-button-hover-alternative-light: $o200;
362
+ $on-bg-button-active-alternative-dark: $o200;
363
+ $bg-button-active-alternative-light: $o400;
364
+ $on-bg-button-active-alternative-light: $o200;
365
+ $bg-button-active-alternative-dark: $o400;
92
366
 
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;
367
+ // highlight
368
+ $on-bg-highlight-neutro-secondary-dark: $n100;
369
+ $bg-highlight-neutro-secondary-light: $n200;
370
+ $bg-highlight-neutro-primary-light: $n800;
371
+ $on-bg-highlight-neutro-primary-light: $n400;
372
+ $bg-highlight-neutro-primary-dark: $n200;
373
+ $on-bg-highlight-neutro-secondary-light: $n900;
374
+ $bg-highlight-neutro-secondary-dark: $n700;
375
+ $on-bg-highlight-neutro-primary-dark: $n800;
108
376
 
109
- //divider
110
- $divider-primary-light: $n300;
111
- $divider-primary-dark: $n700;
377
+ // disabled-status
378
+ $outline-disabled-light: $n700;
379
+ $bg-button-disabled-light: $n800;
380
+ $on-bg-button-disabled-dark: $n400;
381
+ $bg-button-disabled-dark: $n200;
382
+ $outline-disabled-dark: $n200;
383
+ $on-bg-button-disabled-light: $n600;
112
384
 
113
- //logo
385
+ // logo
114
386
  $logo-primary-light: $b400;
115
387
  $logo-primary-dark: $b700;
116
388
 
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;
389
+ // text
390
+ $text-primary-dark: $n800;
391
+ $text-primary-light: $n400;
@@ -1,163 +1,456 @@
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};
4
+ // text-field
5
+ --label-text-full-read-only-primary: #{$label-text-full-read-only-primary-light};
6
+ --input-text-full-read-only-primary: #{$input-text-full-read-only-primary-light};
7
+ --label-text-full-disabled-primary: #{$label-text-full-disabled-primary-light};
8
+ --input-text-full-disabled-primary: #{$input-text-full-disabled-primary-light};
9
+ --label-text-empty-enabled-pressed-primary: #{$label-text-empty-enabled-pressed-primary-light};
10
+ --placeholder-empty-enabled-pressed-primary: #{$placeholder-empty-enabled-pressed-primary-light};
11
+ --bg-field-empty-enabled-pressed-primary: #{$bg-field-empty-enabled-pressed-primary-light};
12
+ --bg-field-empty-disabled-primary: #{$bg-field-empty-disabled-primary-light};
13
+ --label-text-full-enabled-primary: #{$label-text-full-enabled-primary-light};
14
+ --input-text-full-enabled-primary: #{$input-text-full-enabled-primary-light};
15
+ --outline-field-full-enabled-primary: #{$outline-field-full-enabled-primary-light};
16
+ --bg-field-full-enabled-primary: #{$bg-field-full-enabled-primary-light};
17
+ --bg-field-empty-enabled-hover-primary: #{$bg-field-empty-enabled-hover-primary-light};
18
+ --label-text-empty-enabled-primary: #{$label-text-empty-enabled-primary-light};
19
+ --placeholder-empty-enabled-primary: #{$placeholder-empty-enabled-primary-light};
20
+ --outline-field-empty-enabled-primary: #{$outline-field-empty-enabled-primary-light};
21
+ --bg-field-empty-enabled-primary: #{$bg-field-empty-enabled-primary-light};
22
+ --bg-field-full-disabled-primary: #{$bg-field-full-disabled-primary-light};
23
+ --bg-field-full-enabled-hover-primary: #{$bg-field-full-enabled-hover-primary-light};
24
+ --outline-field-empty-enabled-pressed-primary: #{$outline-field-empty-enabled-pressed-primary-light};
25
+ --placeholder-empty-disabled-primary: #{$placeholder-empty-disabled-primary-light};
26
+ --bg-field-full-read-only-primary: #{$bg-field-full-read-only-primary-light};
27
+ --label-text-empty-disabled-primary: #{$label-text-empty-disabled-primary-light};
28
+
29
+ // dialog
30
+ --bg-close-dialog-header-hover-primary: #{$bg-close-dialog-header-hover-primary-light};
31
+ --close-dialog-header-hover-primary: #{$close-dialog-header-hover-primary-light};
32
+ --bg-dialog-primary: #{$bg-dialog-primary-light};
33
+ --on-bg-dialog-header-primary: #{$on-bg-dialog-header-primary-light};
34
+ --bg-dialog-header-primary: #{$bg-dialog-header-primary-light};
35
+ --close-dialog-header-active-primary: #{$close-dialog-header-active-primary-light};
36
+ --on-bg-icon-dialog-primary: #{$on-bg-icon-dialog-primary-light};
37
+ --bg-icon-dialog-primary: #{$bg-icon-dialog-primary-light};
38
+
39
+ // divider
40
+ --divider-primary: #{$divider-primary-light};
41
+
42
+ // menu
43
+ --on-bg-menu-button-pressed-primary: #{$on-bg-menu-button-pressed-primary-light};
44
+ --bg-menu-button-pressed-primary: #{$bg-menu-button-pressed-primary-light};
45
+ --on-bg-menu-button-disabled-primary: #{$on-bg-menu-button-disabled-primary-light};
46
+ --divider-menu-primary: #{$divider-menu-primary-light};
47
+ --on-bg-menu-button-hover-primary: #{$on-bg-menu-button-hover-primary-light};
48
+ --bg-menu-button-hover-primary: #{$bg-menu-button-hover-primary-light};
49
+ --on-bg-menu-button-active-primary: #{$on-bg-menu-button-active-primary-light};
50
+ --bg-menu-primary: #{$bg-menu-primary-light};
51
+ --on-bg-menu-primary: #{$on-bg-menu-primary-light};
52
+
53
+ // surface
54
+ --surface-secondary: #{$surface-secondary-light};
55
+ --surface-primary: #{$surface-primary-light};
56
+
57
+ // button-primary
58
+ --on-bg-button-active-primary: #{$on-bg-button-active-primary-light};
6
59
  --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};
60
+ --on-bg-button-hover-primary: #{$on-bg-button-hover-primary-light};
61
+ --on-bg-button-pressed-primary: #{$on-bg-button-pressed-primary-light};
10
62
  --bg-button-pressed-primary: #{$bg-button-pressed-primary-light};
63
+ --bg-button-hover-primary: #{$bg-button-hover-primary-light};
11
64
 
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};
17
- --outline-button-hover-secondary: #{$outline-button-hover-secondary-light};
18
- --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};
21
- --bg-button-pressed-secondary: #{$bg-button-pressed-secondary-light};
65
+ // link
66
+ --link-pressed-primary: #{$link-pressed-primary-light};
67
+ --link-disabled-primary: #{$link-disabled-primary-light};
68
+ --bg-link-hover-primary: #{$bg-link-hover-primary-light};
69
+ --link-hover-primary: #{$link-hover-primary-light};
70
+ --link-active-primary: #{$link-active-primary-light};
22
71
 
23
- //button tertiary
24
- --text-button-active-tertiary: #{$text-button-active-tertiary-light};
25
- --bg-button-active-tertiary: #{$bg-button-active-tertiary-light};
26
- --text-button-hover-tertiary: #{$text-button-hover-tertiary-light};
72
+ // calendar
73
+ --bg-calendar-nav-primary: #{$bg-calendar-nav-primary-light};
74
+ --bg-calender-primary: #{$bg-calender-primary-light};
75
+ --number-calendar-hover-primary: #{$number-calendar-hover-primary-light};
76
+ --arrow-calendar-disabled-primary: #{$arrow-calendar-disabled-primary-light};
77
+ --on-bg-calender-primary: #{$on-bg-calender-primary-light};
78
+ --on-bg-calendar-nav-primary: #{$on-bg-calendar-nav-primary-light};
79
+ --number-calendar-pressed-primary: #{$number-calendar-pressed-primary-light};
80
+ --bg-arrow-calendar-hover-primary: #{$bg-arrow-calendar-hover-primary-light};
81
+ --number-calender-active-primary: #{$number-calender-active-primary-light};
82
+ --bg-number-calendar-hover-primary: #{$bg-number-calendar-hover-primary-light};
83
+ --bg-number-calendar-pressed-primary: #{$bg-number-calendar-pressed-primary-light};
84
+ --arrow-calendar-active-primary: #{$arrow-calendar-active-primary-light};
85
+ --arrow-calendar-hover-primary: #{$arrow-calendar-hover-primary-light};
86
+ --number-calendar-disabled-primary: #{$number-calendar-disabled-primary-light};
87
+
88
+ // switch
89
+ --on-bg-switch-off-primary: #{$on-bg-switch-off-primary-light};
90
+ --bg-switch-on-primary: #{$bg-switch-on-primary-light};
91
+ --bg-switch-disabled-primary: #{$bg-switch-disabled-primary-light};
92
+ --bg-switch-off-primary: #{$bg-switch-off-primary-light};
93
+ --on-bg-switch-disabled-primary: #{$on-bg-switch-disabled-primary-light};
94
+ --on-bg-switch-on-primary: #{$on-bg-switch-on-primary-light};
95
+
96
+ // dropdown-list
97
+ --on-bg-dropdown-item-disabled-primary: #{$on-bg-dropdown-item-disabled-primary-light};
98
+ --outline-dropdown-list-primary: #{$outline-dropdown-list-primary-light};
99
+ --bg-dropdown-list-primary: #{$bg-dropdown-list-primary-light};
100
+ --on-bg-dropdown-item-active-primary: #{$on-bg-dropdown-item-active-primary-light};
101
+ --on-bg-dropdown-item-hover-primary: #{$on-bg-dropdown-item-hover-primary-light};
102
+ --bg-dropdown-item-hover-primary: #{$bg-dropdown-item-hover-primary-light};
103
+ --on-bg-dropdown-item-pressed-primary: #{$on-bg-dropdown-item-pressed-primary-light};
104
+
105
+ // notification
106
+ --notification-error-highlight-primary: #{$notification-error-highlight-primary-light};
107
+ --on-bg-icon-notification-success-primary: #{$on-bg-icon-notification-success-primary-light};
108
+ --bg-icon-notification-warning-primary: #{$bg-icon-notification-warning-primary-light};
109
+ --notification-warning-highlight-primary: #{$notification-warning-highlight-primary-light};
110
+ --notification-sucess-highlight-primary: #{$notification-sucess-highlight-primary-light};
111
+ --on-bg-icon-notification-warning-primary: #{$on-bg-icon-notification-warning-primary-light};
112
+ --on-bg-notification-primary: #{$on-bg-notification-primary-light};
113
+ --bg-icon-notification-error-primary: #{$bg-icon-notification-error-primary-light};
114
+ --bg-notification-primary: #{$bg-notification-primary-light};
115
+ --on-bg-icon-notification-error-primary: #{$on-bg-icon-notification-error-primary-light};
116
+ --bg-icon-notification-success-primary: #{$bg-icon-notification-success-primary-light};
117
+
118
+ // table
119
+ --bg-table-header-secondary: #{$bg-table-header-secondary-light};
120
+ --on-bg-table-header-secondary: #{$on-bg-table-header-secondary-light};
121
+ --bg-table-hover-primary: #{$bg-table-hover-primary-light};
122
+ --on-bg-table-hover-primary: #{$on-bg-table-hover-primary-light};
123
+ --bg-table-active-primary: #{$bg-table-active-primary-light};
124
+ --on-bg-table-active-primary: #{$on-bg-table-active-primary-light};
125
+ --bg-table-header-primary: #{$bg-table-header-primary-light};
126
+ --on-bg-table-header-primary: #{$on-bg-table-header-primary-light};
127
+
128
+ // highlight
129
+ --on-bg-highlight-neutro-secondary: #{$on-bg-highlight-neutro-secondary-light};
130
+ --bg-highlight-neutro-primary: #{$bg-highlight-neutro-primary-light};
131
+ --on-bg-highlight-neutro-primary: #{$on-bg-highlight-neutro-primary-light};
132
+ --bg-highlight-neutro-secondary: #{$bg-highlight-neutro-secondary-light};
133
+
134
+ // tooltip
135
+ --bg-tooltip-primary: #{$bg-tooltip-primary-light};
136
+ --on-bg-tooltip-primary: #{$on-bg-tooltip-primary-light};
137
+
138
+ // stepper
139
+ --on-bg-stepper-completed-primary: #{$on-bg-stepper-completed-primary-light};
140
+ --line-stepper-completed-primary: #{$line-stepper-completed-primary-light};
141
+ --text-stepper-completed-primary: #{$text-stepper-completed-primary-light};
142
+ --bg-stepper-current-primary: #{$bg-stepper-current-primary-light};
143
+ --on-bg-stepper-current-primary: #{$on-bg-stepper-current-primary-light};
144
+ --line-stepper-current-primary: #{$line-stepper-current-primary-light};
145
+ --text-stepper-current-primary: #{$text-stepper-current-primary-light};
146
+ --bg-stepper-pending-primary: #{$bg-stepper-pending-primary-light};
147
+ --on-bg-stepper-pending-primary: #{$on-bg-stepper-pending-primary-light};
148
+ --line-stepper-pending-primary: #{$line-stepper-pending-primary-light};
149
+ --text-stepper-pending-primary: #{$text-stepper-pending-primary-light};
150
+ --bg-stepper-completed-primary: #{$bg-stepper-completed-primary-light};
151
+
152
+ // button-tertiary
153
+ --on-bg-button-hover-tertiary: #{$on-bg-button-hover-tertiary-light};
27
154
  --bg-button-hover-tertiary: #{$bg-button-hover-tertiary-light};
28
- --text-button-pressed-tertiary: #{$text-button-pressed-tertiary-light};
29
155
  --bg-button-pressed-tertiary: #{$bg-button-pressed-tertiary-light};
156
+ --on-bg-button-active-tertiary: #{$on-bg-button-active-tertiary-light};
157
+ --bg-button-active-tertiary: #{$bg-button-active-tertiary-light};
158
+ --on-bg-button-pressed-tertiary: #{$on-bg-button-pressed-tertiary-light};
30
159
 
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};
35
- --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};
160
+ // icons
161
+ --icon-hover-primary: #{$icon-hover-primary-light};
162
+ --icon-active-primary: #{$icon-active-primary-light};
38
163
 
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};
45
- --bg-button-pressed-negative: #{$bg-button-pressed-negative-light};
164
+ // system
165
+ --alternative-primary: #{$alternative-primary-light};
166
+ --negative-primary: #{$negative-primary-light};
167
+ --positive-primary: #{$positive-primary-light};
168
+ --cta-primary: #{$bg-button-active-primary-light};
46
169
 
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};
170
+ // checkbox
171
+ --bg-checkbox-on-primary: #{$bg-checkbox-on-primary-light};
172
+ --outline-checkbox-off-primary: #{$outline-checkbox-off-primary-light};
173
+ --on-bg-checkbox-on-primary: #{$on-bg-checkbox-on-primary-light};
54
174
 
55
- //button disabled
56
- --text-button-disabled: #{$text-button-disabled-light};
175
+ // loading
176
+ --loading-primary: #{$loading-primary-light};
177
+
178
+ // disabled-status
179
+ --outline-disabled: #{$outline-disabled-light};
57
180
  --bg-button-disabled: #{$bg-button-disabled-light};
181
+ --on-bg-disabled: #{$on-bg-button-disabled-light};
58
182
 
59
- //surface
60
- --surface-primary: #{$surface-primary-light};
61
- --surface-secondary: #{$surface-secondary-light};
183
+ // button-secondary
184
+ --on-bg-button-pressed-secondary: #{$on-bg-button-pressed-secondary-light};
185
+ --outline-button-hover-secondary: #{$outline-button-hover-secondary-light};
186
+ --bg-button-active-secondary: #{$bg-button-active-secondary-light};
187
+ --outline-button-active-secondary: #{$outline-button-active-secondary-light};
188
+ --bg-button-hover-secondary: #{$bg-button-hover-secondary-light};
189
+ --bg-button-pressed-secondary: #{$bg-button-pressed-secondary-light};
190
+ --outline-button-pressed-secondary: #{$outline-button-pressed-secondary-light};
191
+ --on-bg-button-active-secondary: #{$on-bg-button-active-secondary-light};
192
+ --on-bg-button-hover-secondary: #{$on-bg-button-hover-secondary-light};
62
193
 
63
- //text
64
- --text-primary: #{$text-primary-light};
194
+ // button-positive
195
+ --on-bg-button-active-positive: #{$on-bg-button-active-positive-light};
196
+ --bg-button-pressed-positive: #{$bg-button-pressed-positive-light};
197
+ --bg-button-hover-positive: #{$bg-button-hover-positive-light};
198
+ --on-bg-button-pressed-positive: #{$on-bg-button-pressed-positive-light};
199
+ --bg-button-active-positive: #{$bg-button-active-positive-light};
200
+ --on-bg-button-hover-positive: #{$on-bg-button-hover-positive-light};
65
201
 
66
- //divider
67
- --divider-primary: #{$divider-primary-light};
202
+ // button-alternative
203
+ --on-bg-button-hover-alternative: #{$on-bg-button-hover-alternative-light};
204
+ --bg-button-active-alternative: #{$bg-button-active-alternative-light};
205
+ --on-bg-button-active-alternative: #{$on-bg-button-active-alternative-light};
206
+ --on-bg-button-pressed-alternative: #{$on-bg-button-pressed-alternative-light};
207
+ --bg-button-pressed-alternative: #{$bg-button-pressed-alternative-light};
208
+ --bg-button-hover-alternative: #{$bg-button-hover-alternative-light};
68
209
 
69
- //logo
210
+ // logo
70
211
  --logo-primary: #{$logo-primary-light};
71
212
 
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};
76
- --bg-highlight-neutro-secondary: #{$bg-highlight-neutro-secondary-light};
213
+ // button-negative
214
+ --bg-button-pressed-negative: #{$bg-button-pressed-negative-light};
215
+ --on-bg-button-pressed-negative: #{$on-bg-button-pressed-negative-light};
216
+ --bg-button-hover-negative: #{$bg-button-hover-negative-light};
217
+ --on-bg-button-hover-negative: #{$on-bg-button-hover-negative-light};
218
+ --on-bg-button-active-negative: #{$on-bg-button-active-negative-light};
219
+ --bg-button-active-negative: #{$bg-button-active-negative-light};
77
220
 
78
- //system
79
- --positive-primary: #{$positive-primary-light};
80
- --negative-primary: #{$negative-primary-light};
81
- --cta-primary: #{$bg-button-active-primary-light};
221
+ // radio button
222
+ --radio-button-on-primary: #{$radio-button-on-primary-light};
223
+ --radio-button-off-primary: #{$radio-button-off-primary-light};
224
+
225
+ // text
226
+ --text-primary: #{$text-primary-light};
82
227
  }
83
228
 
229
+
230
+
84
231
  .hero-dark-theme {
85
- //button primary
86
- --text-button-active-primary: #{$text-button-active-primary-dark};
232
+
233
+ // text-field
234
+ --label-text-full-read-only-primary: #{$label-text-full-read-only-primary-dark};
235
+ --input-text-full-read-only-primary: #{$input-text-full-read-only-primary-dark};
236
+ --label-text-full-disabled-primary: #{$label-text-full-disabled-primary-dark};
237
+ --input-text-full-disabled-primary: #{$input-text-full-disabled-primary-dark};
238
+ --label-text-empty-enabled-pressed-primary: #{$label-text-empty-enabled-pressed-primary-dark};
239
+ --placeholder-empty-enabled-pressed-primary: #{$placeholder-empty-enabled-pressed-primary-dark};
240
+ --bg-field-empty-enabled-pressed-primary: #{$bg-field-empty-enabled-pressed-primary-dark};
241
+ --bg-field-empty-disabled-primary: #{$bg-field-empty-disabled-primary-dark};
242
+ --label-text-full-enabled-primary: #{$label-text-full-enabled-primary-dark};
243
+ --input-text-full-enabled-primary: #{$input-text-full-enabled-primary-dark};
244
+ --outline-field-full-enabled-primary: #{$outline-field-full-enabled-primary-dark};
245
+ --bg-field-full-enabled-primary: #{$bg-field-full-enabled-primary-dark};
246
+ --bg-field-empty-enabled-hover-primary: #{$bg-field-empty-enabled-hover-primary-dark};
247
+ --label-text-empty-enabled-primary: #{$label-text-empty-enabled-primary-dark};
248
+ --placeholder-empty-enabled-primary: #{$placeholder-empty-enabled-primary-dark};
249
+ --outline-field-empty-enabled-primary: #{$outline-field-empty-enabled-primary-dark};
250
+ --bg-field-empty-enabled-primary: #{$bg-field-empty-enabled-primary-dark};
251
+ --bg-field-full-disabled-primary: #{$bg-field-full-disabled-primary-dark};
252
+ --bg-field-full-enabled-hover-primary: #{$bg-field-full-enabled-hover-primary-dark};
253
+ --outline-field-empty-enabled-pressed-primary: #{$outline-field-empty-enabled-pressed-primary-dark};
254
+ --placeholder-empty-disabled-primary: #{$placeholder-empty-disabled-primary-dark};
255
+ --bg-field-full-read-only-primary: #{$bg-field-full-read-only-primary-dark};
256
+ --label-text-empty-disabled-primary: #{$label-text-empty-disabled-primary-dark};
257
+
258
+ // dialog
259
+ --bg-close-dialog-header-hover-primary: #{$bg-close-dialog-header-hover-primary-dark};
260
+ --close-dialog-header-hover-primary: #{$close-dialog-header-hover-primary-dark};
261
+ --bg-dialog-primary: #{$bg-dialog-primary-dark};
262
+ --on-bg-dialog-header-primary: #{$on-bg-dialog-header-primary-dark};
263
+ --bg-dialog-header-primary: #{$bg-dialog-header-primary-dark};
264
+ --close-dialog-header-active-primary: #{$close-dialog-header-active-primary-dark};
265
+ --on-bg-icon-dialog-primary: #{$on-bg-icon-dialog-primary-dark};
266
+ --bg-icon-dialog-primary: #{$bg-icon-dialog-primary-dark};
267
+
268
+ // divider
269
+ --divider-primary: #{$divider-primary-dark};
270
+
271
+ // menu
272
+ --on-bg-menu-button-pressed-primary: #{$on-bg-menu-button-pressed-primary-dark};
273
+ --bg-menu-button-pressed-primary: #{$bg-menu-button-pressed-primary-dark};
274
+ --on-bg-menu-button-disabled-primary: #{$on-bg-menu-button-disabled-primary-dark};
275
+ --divider-menu-primary: #{$divider-menu-primary-dark};
276
+ --on-bg-menu-button-hover-primary: #{$on-bg-menu-button-hover-primary-dark};
277
+ --bg-menu-button-hover-primary: #{$bg-menu-button-hover-primary-dark};
278
+ --on-bg-menu-button-active-primary: #{$on-bg-menu-button-active-primary-dark};
279
+ --bg-menu-primary: #{$bg-menu-primary-dark};
280
+ --on-bg-menu-primary: #{$on-bg-menu-primary-dark};
281
+
282
+ // surface
283
+ --surface-secondary: #{$surface-secondary-dark};
284
+ --surface-primary: #{$surface-primary-dark};
285
+
286
+ // button-primary
287
+ --on-bg-button-active-primary: #{$on-bg-button-active-primary-dark};
87
288
  --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};
289
+ --on-bg-button-hover-primary: #{$on-bg-button-hover-primary-dark};
290
+ --on-bg-button-pressed-primary: #{$on-bg-button-pressed-primary-dark};
91
291
  --bg-button-pressed-primary: #{$bg-button-pressed-primary-dark};
292
+ --bg-button-hover-primary: #{$bg-button-hover-primary-dark};
92
293
 
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};
98
- --outline-button-hover-secondary: #{$outline-button-hover-secondary-dark};
99
- --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};
102
- --bg-button-pressed-secondary: #{$bg-button-pressed-secondary-dark};
294
+ // link
295
+ --link-pressed-primary: #{$link-pressed-primary-dark};
296
+ --link-disabled-primary: #{$link-disabled-primary-dark};
297
+ --bg-link-hover-primary: #{$bg-link-hover-primary-dark};
298
+ --link-hover-primary: #{$link-hover-primary-dark};
299
+ --link-active-primary: #{$link-active-primary-dark};
103
300
 
104
- //button tertiary
105
- --text-button-active-tertiary: #{$text-button-active-tertiary-dark};
106
- --bg-button-active-tertiary: #{$bg-button-active-tertiary-dark};
107
- --text-button-hover-tertiary: #{$text-button-hover-tertiary-dark};
301
+ // calendar
302
+ --bg-calendar-nav-primary: #{$bg-calendar-nav-primary-dark};
303
+ --bg-calender-primary: #{$bg-calender-primary-dark};
304
+ --number-calendar-hover-primary: #{$number-calendar-hover-primary-dark};
305
+ --arrow-calendar-disabled-primary: #{$arrow-calendar-disabled-primary-dark};
306
+ --on-bg-calender-primary: #{$on-bg-calender-primary-dark};
307
+ --on-bg-calendar-nav-primary: #{$on-bg-calendar-nav-primary-dark};
308
+ --number-calendar-pressed-primary: #{$number-calendar-pressed-primary-dark};
309
+ --bg-arrow-calendar-hover-primary: #{$bg-arrow-calendar-hover-primary-dark};
310
+ --number-calender-active-primary: #{$number-calender-active-primary-dark};
311
+ --bg-number-calendar-hover-primary: #{$bg-number-calendar-hover-primary-dark};
312
+ --bg-number-calendar-pressed-primary: #{$bg-number-calendar-pressed-primary-dark};
313
+ --arrow-calendar-active-primary: #{$arrow-calendar-active-primary-dark};
314
+ --arrow-calendar-hover-primary: #{$arrow-calendar-hover-primary-dark};
315
+ --number-calendar-disabled-primary: #{$number-calendar-disabled-primary-dark};
316
+
317
+ // switch
318
+ --on-bg-switch-off-primary: #{$on-bg-switch-off-primary-dark};
319
+ --bg-switch-on-primary: #{$bg-switch-on-primary-dark};
320
+ --bg-switch-disabled-primary: #{$bg-switch-disabled-primary-dark};
321
+ --bg-switch-off-primary: #{$bg-switch-off-primary-dark};
322
+ --on-bg-switch-disabled-primary: #{$on-bg-switch-disabled-primary-dark};
323
+ --on-bg-switch-on-primary: #{$on-bg-switch-on-primary-dark};
324
+
325
+ // dropdown-list
326
+ --on-bg-dropdown-item-disabled-primary: #{$on-bg-dropdown-item-disabled-primary-dark};
327
+ --outline-dropdown-list-primary: #{$outline-dropdown-list-primary-dark};
328
+ --bg-dropdown-list-primary: #{$bg-dropdown-list-primary-dark};
329
+ --on-bg-dropdown-item-active-primary: #{$on-bg-dropdown-item-active-primary-dark};
330
+ --on-bg-dropdown-item-hover-primary: #{$on-bg-dropdown-item-hover-primary-dark};
331
+ --bg-dropdown-item-hover-primary: #{$bg-dropdown-item-hover-primary-dark};
332
+ --on-bg-dropdown-item-pressed-primary: #{$on-bg-dropdown-item-pressed-primary-dark};
333
+
334
+ // notification
335
+ --notification-error-highlight-primary: #{$notification-error-highlight-primary-dark};
336
+ --on-bg-icon-notification-success-primary: #{$on-bg-icon-notification-success-primary-dark};
337
+ --bg-icon-notification-warning-primary: #{$bg-icon-notification-warning-primary-dark};
338
+ --notification-warning-highlight-primary: #{$notification-warning-highlight-primary-dark};
339
+ --notification-sucess-highlight-primary: #{$notification-sucess-highlight-primary-dark};
340
+ --on-bg-icon-notification-warning-primary: #{$on-bg-icon-notification-warning-primary-dark};
341
+ --on-bg-notification-primary: #{$on-bg-notification-primary-dark};
342
+ --bg-icon-notification-error-primary: #{$bg-icon-notification-error-primary-dark};
343
+ --bg-notification-primary: #{$bg-notification-primary-dark};
344
+ --on-bg-icon-notification-error-primary: #{$on-bg-icon-notification-error-primary-dark};
345
+ --bg-icon-notification-success-primary: #{$bg-icon-notification-success-primary-dark};
346
+
347
+ // table
348
+ --bg-table-header-secondary: #{$bg-table-header-secondary-dark};
349
+ --on-bg-table-header-secondary: #{$on-bg-table-header-secondary-dark};
350
+ --bg-table-hover-primary: #{$bg-table-hover-primary-dark};
351
+ --on-bg-table-hover-primary: #{$on-bg-table-hover-primary-dark};
352
+ --bg-table-active-primary: #{$bg-table-active-primary-dark};
353
+ --on-bg-table-active-primary: #{$on-bg-table-active-primary-dark};
354
+ --bg-table-header-primary: #{$bg-table-header-primary-dark};
355
+ --on-bg-table-header-primary: #{$on-bg-table-header-primary-dark};
356
+
357
+ // highlight
358
+ --on-bg-highlight-neutro-secondary: #{$on-bg-highlight-neutro-secondary-dark};
359
+ --bg-highlight-neutro-primary: #{$bg-highlight-neutro-primary-dark};
360
+ --on-bg-highlight-neutro-primary: #{$on-bg-highlight-neutro-primary-dark};
361
+ --bg-highlight-neutro-secondary: #{$bg-highlight-neutro-secondary-dark};
362
+
363
+ // tooltip
364
+ --bg-tooltip-primary: #{$bg-tooltip-primary-dark};
365
+ --on-bg-tooltip-primary: #{$on-bg-tooltip-primary-dark};
366
+
367
+ // stepper
368
+ --on-bg-stepper-completed-primary: #{$on-bg-stepper-completed-primary-dark};
369
+ --line-stepper-completed-primary: #{$line-stepper-completed-primary-dark};
370
+ --text-stepper-completed-primary: #{$text-stepper-completed-primary-dark};
371
+ --bg-stepper-current-primary: #{$bg-stepper-current-primary-dark};
372
+ --on-bg-stepper-current-primary: #{$on-bg-stepper-current-primary-dark};
373
+ --line-stepper-current-primary: #{$line-stepper-current-primary-dark};
374
+ --text-stepper-current-primary: #{$text-stepper-current-primary-dark};
375
+ --bg-stepper-pending-primary: #{$bg-stepper-pending-primary-dark};
376
+ --on-bg-stepper-pending-primary: #{$on-bg-stepper-pending-primary-dark};
377
+ --line-stepper-pending-primary: #{$line-stepper-pending-primary-dark};
378
+ --text-stepper-pending-primary: #{$text-stepper-pending-primary-dark};
379
+ --bg-stepper-completed-primary: #{$bg-stepper-completed-primary-dark};
380
+
381
+ // button-tertiary
382
+ --on-bg-button-hover-tertiary: #{$on-bg-button-hover-tertiary-dark};
108
383
  --bg-button-hover-tertiary: #{$bg-button-hover-tertiary-dark};
109
- --text-button-pressed-tertiary: #{$text-button-pressed-tertiary-dark};
110
384
  --bg-button-pressed-tertiary: #{$bg-button-pressed-tertiary-dark};
385
+ --on-bg-button-active-tertiary: #{$on-bg-button-active-tertiary-dark};
386
+ --bg-button-active-tertiary: #{$bg-button-active-tertiary-dark};
387
+ --on-bg-button-pressed-tertiary: #{$on-bg-button-pressed-tertiary-dark};
111
388
 
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};
116
- --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};
389
+ // icons
390
+ --icon-hover-primary: #{$icon-hover-primary-dark};
391
+ --icon-active-primary: #{$icon-active-primary-dark};
119
392
 
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};
126
- --bg-button-pressed-negative: #{$bg-button-pressed-negative-dark};
393
+ // system
394
+ --alternative-primary: #{$alternative-primary-dark};
395
+ --negative-primary: #{$negative-primary-dark};
396
+ --positive-primary: #{$positive-primary-dark};
397
+ --cta-primary: #{$bg-button-active-primary-dark};
127
398
 
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};
399
+ // checkbox
400
+ --bg-checkbox-on-primary: #{$bg-checkbox-on-primary-dark};
401
+ --outline-checkbox-off-primary: #{$outline-checkbox-off-primary-dark};
402
+ --on-bg-checkbox-on-primary: #{$on-bg-checkbox-on-primary-dark};
135
403
 
136
- //button disabled
137
- --text-button-disabled: #{$text-button-disabled-dark};
404
+ // loading
405
+ --loading-primary: #{$loading-primary-dark};
406
+
407
+ // disabled-status
408
+ --outline-disabled: #{$outline-disabled-dark};
138
409
  --bg-button-disabled: #{$bg-button-disabled-dark};
410
+ --on-bg-disabled: #{$on-bg-button-disabled-dark};
139
411
 
140
- //surface
141
- --surface-primary: #{$surface-primary-dark};
142
- --surface-secondary: #{$surface-secondary-dark};
412
+ // button-secondary
413
+ --on-bg-button-pressed-secondary: #{$on-bg-button-pressed-secondary-dark};
414
+ --outline-button-hover-secondary: #{$outline-button-hover-secondary-dark};
415
+ --bg-button-active-secondary: #{$bg-button-active-secondary-dark};
416
+ --outline-button-active-secondary: #{$outline-button-active-secondary-dark};
417
+ --bg-button-hover-secondary: #{$bg-button-hover-secondary-dark};
418
+ --bg-button-pressed-secondary: #{$bg-button-pressed-secondary-dark};
419
+ --outline-button-pressed-secondary: #{$outline-button-pressed-secondary-dark};
420
+ --on-bg-button-active-secondary: #{$on-bg-button-active-secondary-dark};
421
+ --on-bg-button-hover-secondary: #{$on-bg-button-hover-secondary-dark};
143
422
 
144
- //text
145
- --text-primary: #{$text-primary-dark};
423
+ // button-positive
424
+ --on-bg-button-active-positive: #{$on-bg-button-active-positive-dark};
425
+ --bg-button-pressed-positive: #{$bg-button-pressed-positive-dark};
426
+ --bg-button-hover-positive: #{$bg-button-hover-positive-dark};
427
+ --on-bg-button-pressed-positive: #{$on-bg-button-pressed-positive-dark};
428
+ --bg-button-active-positive: #{$bg-button-active-positive-dark};
429
+ --on-bg-button-hover-positive: #{$on-bg-button-hover-positive-dark};
146
430
 
147
- //divider
148
- --divider-primary: #{$divider-primary-dark};
431
+ // button-alternative
432
+ --on-bg-button-hover-alternative: #{$on-bg-button-hover-alternative-dark};
433
+ --bg-button-active-alternative: #{$bg-button-active-alternative-dark};
434
+ --on-bg-button-active-alternative: #{$on-bg-button-active-alternative-dark};
435
+ --on-bg-button-pressed-alternative: #{$on-bg-button-pressed-alternative-dark};
436
+ --bg-button-pressed-alternative: #{$bg-button-pressed-alternative-dark};
437
+ --bg-button-hover-alternative: #{$bg-button-hover-alternative-dark};
149
438
 
150
- //logo
439
+ // logo
151
440
  --logo-primary: #{$logo-primary-dark};
152
441
 
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};
157
- --bg-highlight-neutro-secondary: #{$bg-highlight-neutro-secondary-dark};
442
+ // button-negative
443
+ --bg-button-pressed-negative: #{$bg-button-pressed-negative-dark};
444
+ --on-bg-button-pressed-negative: #{$on-bg-button-pressed-negative-dark};
445
+ --bg-button-hover-negative: #{$bg-button-hover-negative-dark};
446
+ --on-bg-button-hover-negative: #{$on-bg-button-hover-negative-dark};
447
+ --on-bg-button-active-negative: #{$on-bg-button-active-negative-dark};
448
+ --bg-button-active-negative: #{$bg-button-active-negative-dark};
158
449
 
159
- //system
160
- --positive-primary: #{$positive-primary-dark};
161
- --negative-primary: #{$negative-primary-dark};
162
- --cta-primary: #{$bg-button-active-primary-dark};
450
+ // radio button
451
+ --radio-button-on-primary: #{$radio-button-on-primary-dark};
452
+ --radio-button-off-primary: #{$radio-button-off-primary-dark};
453
+
454
+ // text
455
+ --text-primary: #{$text-primary-dark};
163
456
  }