@mozaic-ds/vue 1.0.0-beta.3 → 1.0.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/README.md +10 -8
  2. package/dist/mozaic-vue.adeo.css +45 -43
  3. package/dist/mozaic-vue.adeo.umd.js +11552 -22322
  4. package/dist/mozaic-vue.common.js +11552 -22322
  5. package/dist/mozaic-vue.common.js.map +1 -1
  6. package/dist/mozaic-vue.css +1 -1
  7. package/dist/mozaic-vue.umd.js +11552 -22322
  8. package/dist/mozaic-vue.umd.js.map +1 -1
  9. package/dist/mozaic-vue.umd.min.js +2 -2
  10. package/dist/mozaic-vue.umd.min.js.map +1 -1
  11. package/package.json +24 -23
  12. package/src/components/autocomplete/MAutocomplete.vue +294 -111
  13. package/src/components/checkbox/MCheckboxGroup.vue +8 -0
  14. package/src/components/dropdown/MDropdown.vue +316 -0
  15. package/src/components/dropdown/index.js +7 -0
  16. package/src/components/flag/MFlag.vue +1 -1
  17. package/src/components/icon/MIcon.vue +18 -2
  18. package/src/components/index.js +2 -1
  19. package/src/components/link/MLink.vue +14 -3
  20. package/src/components/listbox/MListBox.vue +97 -57
  21. package/src/components/listbox/MListBoxActions.vue +251 -0
  22. package/src/components/listbox/index.js +6 -1
  23. package/src/components/phonenumber/MPhoneNumber.vue +10 -3
  24. package/src/components/quantityselector/MQuantitySelector.vue +15 -2
  25. package/src/components/ratingstars/MStarsInput.vue +1 -0
  26. package/src/components/stepper/MStepper.vue +68 -27
  27. package/src/components/tabs/MTab.vue +69 -59
  28. package/src/components/textinput/MTextInputField.vue +0 -1
  29. package/src/index.js +2 -1
  30. package/src/tokens/adeo/android/colors.xml +183 -126
  31. package/src/tokens/adeo/css/_variables.scss +183 -126
  32. package/src/tokens/adeo/css/root.scss +80 -23
  33. package/src/tokens/adeo/ios/StyleDictionaryColor.h +60 -3
  34. package/src/tokens/adeo/ios/StyleDictionaryColor.m +187 -130
  35. package/src/tokens/adeo/ios/StyleDictionaryColor.swift +183 -126
  36. package/src/tokens/adeo/js/tokens.js +183 -126
  37. package/src/tokens/adeo/js/tokensObject.js +1570 -283
  38. package/src/tokens/adeo/scss/_tokens.scss +342 -128
  39. package/types/index.d.ts +4 -0
package/src/tokens/adeo/css/_variables.scss CHANGED
@@ -10,9 +10,9 @@ $color-badge-warning-text: var(--color-badge-warning-text, #8c3500);
10
10
  $color-badge-danger-background: var(--color-badge-danger-background, #fdeaea);
11
11
  $color-badge-danger-border: var(--color-badge-danger-border, #ea302d);
12
12
  $color-badge-danger-text: var(--color-badge-danger-text, #8c0003);
13
- $color-badge-neutral-background: var(--color-badge-neutral-background, #eeedea);
14
- $color-badge-neutral-border: var(--color-badge-neutral-border, #8c8b85);
15
- $color-badge-neutral-text: var(--color-badge-neutral-text, #555550);
13
+ $color-badge-neutral-background: var(--color-badge-neutral-background, #e6e6e6);
14
+ $color-badge-neutral-border: var(--color-badge-neutral-border, #808080);
15
+ $color-badge-neutral-text: var(--color-badge-neutral-text, #4d4d4d);
16
16
  $color-primary-01-100: var(--color-primary-01-100, #d9f0f3);
17
17
  $color-primary-01-200: var(--color-primary-01-200, #91d5db);
18
18
  $color-primary-01-300: var(--color-primary-01-300, #48bac4);
@@ -22,24 +22,24 @@ $color-primary-01-600: var(--color-primary-01-600, #007f8c);
22
22
  $color-primary-01-700: var(--color-primary-01-700, #006974);
23
23
  $color-primary-01-800: var(--color-primary-01-800, #004e57);
24
24
  $color-primary-01-900: var(--color-primary-01-900, #002e33);
25
- $color-primary-02-100: var(--color-primary-02-100, #dbedea);
26
- $color-primary-02-200: var(--color-primary-02-200, #a5d1cb);
27
- $color-primary-02-300: var(--color-primary-02-300, #6eb4ad);
28
- $color-primary-02-400: var(--color-primary-02-400, #379590);
29
- $color-primary-02-500: var(--color-primary-02-500, #007574);
30
- $color-primary-02-600: var(--color-primary-02-600, #035f64);
31
- $color-primary-02-700: var(--color-primary-02-700, #044c53);
32
- $color-primary-02-800: var(--color-primary-02-800, #063a44);
33
- $color-primary-02-900: var(--color-primary-02-900, #062b35);
34
- $color-grey-100: var(--color-grey-100, #eeedea);
35
- $color-grey-200: var(--color-grey-200, #dddcd5);
36
- $color-grey-300: var(--color-grey-300, #c2c1ba);
37
- $color-grey-400: var(--color-grey-400, #a7a6a0);
38
- $color-grey-500: var(--color-grey-500, #8c8b85);
39
- $color-grey-600: var(--color-grey-600, #71706b);
40
- $color-grey-700: var(--color-grey-700, #555550);
41
- $color-grey-800: var(--color-grey-800, #3a3936);
42
- $color-grey-900: var(--color-grey-900, #1e1e1c);
25
+ $color-primary-02-100: var(--color-primary-02-100, #eeeff1);
26
+ $color-primary-02-200: var(--color-primary-02-200, #cfd2d8);
27
+ $color-primary-02-300: var(--color-primary-02-300, #b3b7c1);
28
+ $color-primary-02-400: var(--color-primary-02-400, #8f94a3);
29
+ $color-primary-02-500: var(--color-primary-02-500, #6a7081);
30
+ $color-primary-02-600: var(--color-primary-02-600, #494f60);
31
+ $color-primary-02-700: var(--color-primary-02-700, #343b4c);
32
+ $color-primary-02-800: var(--color-primary-02-800, #242938);
33
+ $color-primary-02-900: var(--color-primary-02-900, #171b26);
34
+ $color-grey-100: var(--color-grey-100, #e6e6e6);
35
+ $color-grey-200: var(--color-grey-200, #cccccc);
36
+ $color-grey-300: var(--color-grey-300, #b3b3b3);
37
+ $color-grey-400: var(--color-grey-400, #999999);
38
+ $color-grey-500: var(--color-grey-500, #808080);
39
+ $color-grey-600: var(--color-grey-600, #666666);
40
+ $color-grey-700: var(--color-grey-700, #4d4d4d);
41
+ $color-grey-800: var(--color-grey-800, #333333);
42
+ $color-grey-900: var(--color-grey-900, #191919);
43
43
  $color-grey-999: var(--color-grey-999, #000000);
44
44
  $color-grey-000: var(--color-grey-000, #ffffff);
45
45
  $color-secondary-blue-100: var(--color-secondary-blue-100, #eaedef);
@@ -132,35 +132,37 @@ $color-success-600: var(--color-success-600, #188803);
132
132
  $color-success-700: var(--color-success-700, #006902);
133
133
  $color-success-800: var(--color-success-800, #035010);
134
134
  $color-success-900: var(--color-success-900, #023618);
135
+ $color-breadcrumb-arrow: var(--color-breadcrumb-arrow, #333333);
136
+ $color-breadcrumb-arrow-invert: var(--color-breadcrumb-arrow-invert, #ffffff);
135
137
  $color-button-solid-background: var(--color-button-solid-background, #007f8c);
136
138
  $color-button-solid-font: var(--color-button-solid-font, #ffffff);
137
139
  $color-button-solid-focus-border: var(--color-button-solid-focus-border, #006974);
138
- $color-button-solid-disabled-background: var(--color-button-solid-disabled-background, #dddcd5);
139
- $color-button-solid-disabled-font: var(--color-button-solid-disabled-font, #71706b);
140
+ $color-button-solid-disabled-background: var(--color-button-solid-disabled-background, #cccccc);
141
+ $color-button-solid-disabled-font: var(--color-button-solid-disabled-font, #666666);
140
142
  $color-button-solid-active-background: var(--color-button-solid-active-background, #006974);
141
143
  $color-button-solid-hover-background: var(--color-button-solid-hover-background, #006974);
142
144
  $color-button-solid-hover-font: var(--color-button-solid-hover-font, #ffffff);
143
- $color-button-solid-primary-02-background: var(--color-button-solid-primary-02-background, #007574);
145
+ $color-button-solid-primary-02-background: var(--color-button-solid-primary-02-background, #6a7081);
144
146
  $color-button-solid-primary-02-font: var(--color-button-solid-primary-02-font, #ffffff);
145
- $color-button-solid-primary-02-focus-border: var(--color-button-solid-primary-02-focus-border, #062b35);
146
- $color-button-solid-primary-02-disabled-background: var(--color-button-solid-primary-02-disabled-background, #dddcd5);
147
- $color-button-solid-primary-02-disabled-font: var(--color-button-solid-primary-02-disabled-font, #71706b);
148
- $color-button-solid-primary-02-active-background: var(--color-button-solid-primary-02-active-background, #062b35);
149
- $color-button-solid-primary-02-hover-background: var(--color-button-solid-primary-02-hover-background, #063a44);
147
+ $color-button-solid-primary-02-focus-border: var(--color-button-solid-primary-02-focus-border, #171b26);
148
+ $color-button-solid-primary-02-disabled-background: var(--color-button-solid-primary-02-disabled-background, #cccccc);
149
+ $color-button-solid-primary-02-disabled-font: var(--color-button-solid-primary-02-disabled-font, #666666);
150
+ $color-button-solid-primary-02-active-background: var(--color-button-solid-primary-02-active-background, #171b26);
151
+ $color-button-solid-primary-02-hover-background: var(--color-button-solid-primary-02-hover-background, #242938);
150
152
  $color-button-solid-primary-02-hover-font: var(--color-button-solid-primary-02-hover-font, #ffffff);
151
- $color-button-solid-neutral-background: var(--color-button-solid-neutral-background, #3a3936);
153
+ $color-button-solid-neutral-background: var(--color-button-solid-neutral-background, #333333);
152
154
  $color-button-solid-neutral-font: var(--color-button-solid-neutral-font, #ffffff);
153
- $color-button-solid-neutral-focus-border: var(--color-button-solid-neutral-focus-border, #1e1e1c);
154
- $color-button-solid-neutral-disabled-background: var(--color-button-solid-neutral-disabled-background, #dddcd5);
155
- $color-button-solid-neutral-disabled-font: var(--color-button-solid-neutral-disabled-font, #71706b);
156
- $color-button-solid-neutral-active-background: var(--color-button-solid-neutral-active-background, #3a3936);
157
- $color-button-solid-neutral-hover-background: var(--color-button-solid-neutral-hover-background, #1e1e1c);
155
+ $color-button-solid-neutral-focus-border: var(--color-button-solid-neutral-focus-border, #191919);
156
+ $color-button-solid-neutral-disabled-background: var(--color-button-solid-neutral-disabled-background, #cccccc);
157
+ $color-button-solid-neutral-disabled-font: var(--color-button-solid-neutral-disabled-font, #666666);
158
+ $color-button-solid-neutral-active-background: var(--color-button-solid-neutral-active-background, #333333);
159
+ $color-button-solid-neutral-hover-background: var(--color-button-solid-neutral-hover-background, #191919);
158
160
  $color-button-solid-neutral-hover-font: var(--color-button-solid-neutral-hover-font, #ffffff);
159
161
  $color-button-solid-danger-background: var(--color-button-solid-danger-background, #c61112);
160
162
  $color-button-solid-danger-font: var(--color-button-solid-danger-font, #ffffff);
161
163
  $color-button-solid-danger-focus-border: var(--color-button-solid-danger-focus-border, #8c0003);
162
- $color-button-solid-danger-disabled-background: var(--color-button-solid-danger-disabled-background, #dddcd5);
163
- $color-button-solid-danger-disabled-font: var(--color-button-solid-danger-disabled-font, #71706b);
164
+ $color-button-solid-danger-disabled-background: var(--color-button-solid-danger-disabled-background, #cccccc);
165
+ $color-button-solid-danger-disabled-font: var(--color-button-solid-danger-disabled-font, #666666);
164
166
  $color-button-solid-danger-active-background: var(--color-button-solid-danger-active-background, #8c0003);
165
167
  $color-button-solid-danger-hover-background: var(--color-button-solid-danger-hover-background, #8c0003);
166
168
  $color-button-solid-danger-hover-font: var(--color-button-solid-danger-hover-font, #ffffff);
@@ -168,45 +170,51 @@ $color-button-bordered-background: var(--color-button-bordered-background, #ffff
168
170
  $color-button-bordered-border: var(--color-button-bordered-border, #007f8c);
169
171
  $color-button-bordered-font: var(--color-button-bordered-font, #007f8c);
170
172
  $color-button-bordered-focus-border: var(--color-button-bordered-focus-border, #006974);
171
- $color-button-bordered-disabled-background: var(--color-button-bordered-disabled-background, #dddcd5);
172
- $color-button-bordered-disabled-font: var(--color-button-bordered-disabled-font, #71706b);
173
+ $color-button-bordered-disabled-background: var(--color-button-bordered-disabled-background, #cccccc);
174
+ $color-button-bordered-disabled-font: var(--color-button-bordered-disabled-font, #666666);
173
175
  $color-button-bordered-active-background: var(--color-button-bordered-active-background, #91d5db);
174
176
  $color-button-bordered-hover-background: var(--color-button-bordered-hover-background, #d9f0f3);
175
177
  $color-button-bordered-primary-02-background: var(--color-button-bordered-primary-02-background, #ffffff);
176
- $color-button-bordered-primary-02-border: var(--color-button-bordered-primary-02-border, #007574);
177
- $color-button-bordered-primary-02-font: var(--color-button-bordered-primary-02-font, #007574);
178
- $color-button-bordered-primary-02-focus-border: var(--color-button-bordered-primary-02-focus-border, #062b35);
179
- $color-button-bordered-primary-02-disabled-background: var(--color-button-bordered-primary-02-disabled-background, #dddcd5);
180
- $color-button-bordered-primary-02-disabled-font: var(--color-button-bordered-primary-02-disabled-font, #71706b);
181
- $color-button-bordered-primary-02-active-background: var(--color-button-bordered-primary-02-active-background, #a5d1cb);
182
- $color-button-bordered-primary-02-hover-background: var(--color-button-bordered-primary-02-hover-background, #dbedea);
178
+ $color-button-bordered-primary-02-border: var(--color-button-bordered-primary-02-border, #6a7081);
179
+ $color-button-bordered-primary-02-font: var(--color-button-bordered-primary-02-font, #6a7081);
180
+ $color-button-bordered-primary-02-focus-border: var(--color-button-bordered-primary-02-focus-border, #171b26);
181
+ $color-button-bordered-primary-02-disabled-background: var(--color-button-bordered-primary-02-disabled-background, #cccccc);
182
+ $color-button-bordered-primary-02-disabled-font: var(--color-button-bordered-primary-02-disabled-font, #666666);
183
+ $color-button-bordered-primary-02-active-background: var(--color-button-bordered-primary-02-active-background, #cfd2d8);
184
+ $color-button-bordered-primary-02-hover-background: var(--color-button-bordered-primary-02-hover-background, #eeeff1);
183
185
  $color-button-bordered-neutral-background: var(--color-button-bordered-neutral-background, #ffffff);
184
- $color-button-bordered-neutral-border: var(--color-button-bordered-neutral-border, #3a3936);
185
- $color-button-bordered-neutral-font: var(--color-button-bordered-neutral-font, #3a3936);
186
- $color-button-bordered-neutral-focus-border: var(--color-button-bordered-neutral-focus-border, #1e1e1c);
187
- $color-button-bordered-neutral-disabled-background: var(--color-button-bordered-neutral-disabled-background, #dddcd5);
188
- $color-button-bordered-neutral-disabled-font: var(--color-button-bordered-neutral-disabled-font, #71706b);
189
- $color-button-bordered-neutral-active-background: var(--color-button-bordered-neutral-active-background, #dddcd5);
190
- $color-button-bordered-neutral-hover-background: var(--color-button-bordered-neutral-hover-background, #eeedea);
186
+ $color-button-bordered-neutral-border: var(--color-button-bordered-neutral-border, #333333);
187
+ $color-button-bordered-neutral-font: var(--color-button-bordered-neutral-font, #333333);
188
+ $color-button-bordered-neutral-focus-border: var(--color-button-bordered-neutral-focus-border, #191919);
189
+ $color-button-bordered-neutral-disabled-background: var(--color-button-bordered-neutral-disabled-background, #cccccc);
190
+ $color-button-bordered-neutral-disabled-font: var(--color-button-bordered-neutral-disabled-font, #666666);
191
+ $color-button-bordered-neutral-active-background: var(--color-button-bordered-neutral-active-background, #cccccc);
192
+ $color-button-bordered-neutral-hover-background: var(--color-button-bordered-neutral-hover-background, #e6e6e6);
191
193
  $color-button-bordered-danger-background: var(--color-button-bordered-danger-background, #ffffff);
192
194
  $color-button-bordered-danger-border: var(--color-button-bordered-danger-border, #c61112);
193
195
  $color-button-bordered-danger-font: var(--color-button-bordered-danger-font, #c61112);
194
196
  $color-button-bordered-danger-focus-border: var(--color-button-bordered-danger-focus-border, #8c0003);
195
- $color-button-bordered-danger-disabled-background: var(--color-button-bordered-danger-disabled-background, #dddcd5);
196
- $color-button-bordered-danger-disabled-font: var(--color-button-bordered-danger-disabled-font, #71706b);
197
+ $color-button-bordered-danger-disabled-background: var(--color-button-bordered-danger-disabled-background, #cccccc);
198
+ $color-button-bordered-danger-disabled-font: var(--color-button-bordered-danger-disabled-font, #666666);
197
199
  $color-button-bordered-danger-active-background: var(--color-button-bordered-danger-active-background, #f8bcbb);
198
200
  $color-button-bordered-danger-hover-background: var(--color-button-bordered-danger-hover-background, #fdeaea);
201
+ $color-card-bordered-background: var(--color-card-bordered-background, #ffffff);
202
+ $color-card-bordered-border: var(--color-card-bordered-border, #808080);
203
+ $color-dialog-background: var(--color-dialog-background, #ffffff);
204
+ $color-dialog-icon: var(--color-dialog-icon, #666666);
205
+ $color-dialog-close: var(--color-dialog-close, #808080);
206
+ $color-dialog-footer-shadow: var(--color-dialog-footer-shadow, #191919);
199
207
  $color-divider-lightest: var(--color-divider-lightest, #ffffff);
200
- $color-divider-light: var(--color-divider-light, #c2c1ba);
201
- $color-divider-default: var(--color-divider-default, #71706b);
208
+ $color-divider-light: var(--color-divider-light, #b3b3b3);
209
+ $color-divider-default: var(--color-divider-default, #666666);
202
210
  $color-divider-dark: var(--color-divider-dark, #000000);
203
211
  $color-fields-error: var(--color-fields-error, #c61112);
204
- $color-fields-label: var(--color-fields-label, #3a3936);
205
- $color-fields-requirement: var(--color-fields-requirement, #71706b);
206
- $color-fields-help: var(--color-fields-help, #71706b);
212
+ $color-fields-label: var(--color-fields-label, #333333);
213
+ $color-fields-requirement: var(--color-fields-requirement, #666666);
214
+ $color-fields-help: var(--color-fields-help, #666666);
207
215
  $color-fileuploader-font: var(--color-fileuploader-font, #000000);
208
- $color-fileuploader-files-list: var(--color-fileuploader-files-list, #eeedea);
209
- $color-fileuploader-files-delete: var(--color-fileuploader-files-delete, #dddcd5);
216
+ $color-fileuploader-files-list: var(--color-fileuploader-files-list, #e6e6e6);
217
+ $color-fileuploader-files-delete: var(--color-fileuploader-files-delete, #cccccc);
210
218
  $color-fileuploader-valid: var(--color-fileuploader-valid, #00919f);
211
219
  $color-fileuploader-alert: var(--color-fileuploader-alert, #c61112);
212
220
  $color-flag-solid-background: var(--color-flag-solid-background, #007f8c);
@@ -242,24 +250,27 @@ $color-flag-bordered-danger-text: var(--color-flag-bordered-danger-text, #c61112
242
250
  $color-focus-gap: var(--color-focus-gap, #ffffff);
243
251
  $color-focus-border: var(--color-focus-border, #758992);
244
252
  $color-font-primary-01: var(--color-font-primary-01, #007f8c);
245
- $color-font-primary-02: var(--color-font-primary-02, #007574);
253
+ $color-font-primary-02: var(--color-font-primary-02, #6a7081);
246
254
  $color-font-darkest: var(--color-font-darkest, #000000);
247
- $color-font-darker: var(--color-font-darker, #1e1e1c);
248
- $color-font-dark: var(--color-font-dark, #3a3936);
249
- $color-font-light: var(--color-font-light, #71706b);
255
+ $color-font-darker: var(--color-font-darker, #191919);
256
+ $color-font-dark: var(--color-font-dark, #333333);
257
+ $color-font-light: var(--color-font-light, #666666);
250
258
  $color-font-lightest: var(--color-font-lightest, #ffffff);
251
259
  $color-font-info: var(--color-font-info, #007bb4);
252
260
  $color-font-success: var(--color-font-success, #188803);
253
261
  $color-font-warning: var(--color-font-warning, #c65200);
254
262
  $color-font-danger: var(--color-font-danger, #c61112);
255
- $color-input-text: var(--color-input-text, #1e1e1c);
256
- $color-input-border: var(--color-input-border, #71706b);
257
- $color-input-placeholder: var(--color-input-placeholder, #8c8b85);
263
+ $color-heading-underline-default: var(--color-heading-underline-default, #00919f);
264
+ $color-heading-underline-lightest: var(--color-heading-underline-lightest, #91d5db);
265
+ $color-hero-cover-background: var(--color-hero-cover-background, #191919);
266
+ $color-input-text: var(--color-input-text, #191919);
267
+ $color-input-border: var(--color-input-border, #666666);
268
+ $color-input-placeholder: var(--color-input-placeholder, #808080);
258
269
  $color-input-background: var(--color-input-background, #ffffff);
259
- $color-input-disabled-border: var(--color-input-disabled-border, #eeedea);
260
- $color-input-disabled-background: var(--color-input-disabled-background, #eeedea);
261
- $color-input-disabled-icon: var(--color-input-disabled-icon, #a7a6a0);
262
- $color-input-hover-border: var(--color-input-hover-border, #1e1e1c);
270
+ $color-input-disabled-border: var(--color-input-disabled-border, #e6e6e6);
271
+ $color-input-disabled-background: var(--color-input-disabled-background, #e6e6e6);
272
+ $color-input-disabled-icon: var(--color-input-disabled-icon, #999999);
273
+ $color-input-hover-border: var(--color-input-hover-border, #191919);
263
274
  $color-input-focus-border: var(--color-input-focus-border, #758992);
264
275
  $color-input-valid-border: var(--color-input-valid-border, #46a610);
265
276
  $color-input-valid-hover-border: var(--color-input-valid-hover-border, #035010);
@@ -270,30 +281,36 @@ $color-input-checked-background: var(--color-input-checked-background, #00919f);
270
281
  $color-input-checked-icon: var(--color-input-checked-icon, #ffffff);
271
282
  $color-input-checked-hover-border: var(--color-input-checked-hover-border, #004e57);
272
283
  $color-link-dark-base: var(--color-link-dark-base, #000000);
273
- $color-link-dark-visited: var(--color-link-dark-visited, #3a3936);
274
- $color-link-dark-active: var(--color-link-dark-active, #3a3936);
275
- $color-link-dark-disabled: var(--color-link-dark-disabled, #eeedea);
276
- $color-link-dark-hover: var(--color-link-dark-hover, #71706b);
284
+ $color-link-dark-visited: var(--color-link-dark-visited, #333333);
285
+ $color-link-dark-active: var(--color-link-dark-active, #333333);
286
+ $color-link-dark-disabled: var(--color-link-dark-disabled, #e6e6e6);
287
+ $color-link-dark-hover: var(--color-link-dark-hover, #666666);
277
288
  $color-link-light-base: var(--color-link-light-base, #ffffff);
278
- $color-link-light-visited: var(--color-link-light-visited, #dddcd5);
279
- $color-link-light-active: var(--color-link-light-active, #dddcd5);
280
- $color-link-light-disabled: var(--color-link-light-disabled, #eeedea);
281
- $color-link-light-hover: var(--color-link-light-hover, #a7a6a0);
289
+ $color-link-light-visited: var(--color-link-light-visited, #cccccc);
290
+ $color-link-light-active: var(--color-link-light-active, #cccccc);
291
+ $color-link-light-disabled: var(--color-link-light-disabled, #e6e6e6);
292
+ $color-link-light-hover: var(--color-link-light-hover, #999999);
282
293
  $color-link-primary-base: var(--color-link-primary-base, #007f8c);
283
294
  $color-link-primary-visited: var(--color-link-primary-visited, #006974);
284
295
  $color-link-primary-active: var(--color-link-primary-active, #006974);
285
- $color-link-primary-disabled: var(--color-link-primary-disabled, #eeedea);
296
+ $color-link-primary-disabled: var(--color-link-primary-disabled, #e6e6e6);
286
297
  $color-link-primary-hover: var(--color-link-primary-hover, #004e57);
287
- $color-link-primary-02-base: var(--color-link-primary-02-base, #035f64);
288
- $color-link-primary-02-visited: var(--color-link-primary-02-visited, #044c53);
289
- $color-link-primary-02-active: var(--color-link-primary-02-active, #044c53);
290
- $color-link-primary-02-disabled: var(--color-link-primary-02-disabled, #eeedea);
291
- $color-link-primary-02-hover: var(--color-link-primary-02-hover, #062b35);
298
+ $color-link-primary-02-base: var(--color-link-primary-02-base, #494f60);
299
+ $color-link-primary-02-visited: var(--color-link-primary-02-visited, #343b4c);
300
+ $color-link-primary-02-active: var(--color-link-primary-02-active, #343b4c);
301
+ $color-link-primary-02-disabled: var(--color-link-primary-02-disabled, #e6e6e6);
302
+ $color-link-primary-02-hover: var(--color-link-primary-02-hover, #171b26);
292
303
  $color-link-danger-base: var(--color-link-danger-base, #c61112);
293
304
  $color-link-danger-visited: var(--color-link-danger-visited, #8c0003);
294
305
  $color-link-danger-active: var(--color-link-danger-active, #8c0003);
295
- $color-link-danger-disabled: var(--color-link-danger-disabled, #eeedea);
306
+ $color-link-danger-disabled: var(--color-link-danger-disabled, #e6e6e6);
296
307
  $color-link-danger-hover: var(--color-link-danger-hover, #530000);
308
+ $color-listbox-background: var(--color-listbox-background, #ffffff);
309
+ $color-listbox-border: var(--color-listbox-border, #666666);
310
+ $color-listbox-tile-border: var(--color-listbox-tile-border, #b3b3b3);
311
+ $color-listbox-tile-shadow: var(--color-listbox-tile-shadow, #191919);
312
+ $color-listbox-tile-hover-background: var(--color-listbox-tile-hover-background, #e6e6e6);
313
+ $color-listbox-disabled-background: var(--color-listbox-disabled-background, #cccccc);
297
314
  $color-notification-font: var(--color-notification-font, #000000);
298
315
  $color-notification-information-background: var(--color-notification-information-background, #daeff7);
299
316
  $color-notification-information-border: var(--color-notification-information-border, #0b96cc);
@@ -307,79 +324,119 @@ $color-notification-warning-icon: var(--color-notification-warning-icon, #c65200
307
324
  $color-notification-danger-background: var(--color-notification-danger-background, #fdeaea);
308
325
  $color-notification-danger-border: var(--color-notification-danger-border, #ea302d);
309
326
  $color-notification-danger-icon: var(--color-notification-danger-icon, #c61112);
310
- $color-progress-background: var(--color-progress-background, #dddcd5);
327
+ $color-option-button-label-shadow: var(--color-option-button-label-shadow, #b3b3b3);
328
+ $color-option-button-hover-label-shadow: var(--color-option-button-hover-label-shadow, #333333);
329
+ $color-option-button-checked-label-border: var(--color-option-button-checked-label-border, #00919f);
330
+ $color-option-button-checked-label-shadow: var(--color-option-button-checked-label-shadow, #d9f0f3);
331
+ $color-option-button-disabled-label-background: var(--color-option-button-disabled-label-background, #cccccc);
332
+ $color-option-card-label-shadow: var(--color-option-card-label-shadow, #b3b3b3);
333
+ $color-option-card-hover-label-shadow: var(--color-option-card-hover-label-shadow, #333333);
334
+ $color-option-card-checked-label-border: var(--color-option-card-checked-label-border, #00919f);
335
+ $color-option-card-checked-label-shadow: var(--color-option-card-checked-label-shadow, #d9f0f3);
336
+ $color-overlay-background: var(--color-overlay-background, #191919);
337
+ $color-overlay-loader-background: var(--color-overlay-loader-background, #082435);
338
+ $color-password-input-button-hover-background: var(--color-password-input-button-hover-background, #e6e6e6);
339
+ $color-phone-number-button-border: var(--color-phone-number-button-border, #666666);
340
+ $color-phone-number-list-background: var(--color-phone-number-list-background, #ffffff);
341
+ $color-phone-number-item-border: var(--color-phone-number-item-border, #b3b3b3);
342
+ $color-phone-number-item-focus-background: var(--color-phone-number-item-focus-background, #e6e6e6);
343
+ $color-progress-background: var(--color-progress-background, #cccccc);
311
344
  $color-progress-indicator: var(--color-progress-indicator, #007bb4);
312
- $color-progress-percentage-default: var(--color-progress-percentage-default, #1e1e1c);
345
+ $color-progress-percentage-default: var(--color-progress-percentage-default, #191919);
313
346
  $color-progress-percentage-half: var(--color-progress-percentage-half, #ffffff);
314
347
  $color-progress-branded-indicator: var(--color-progress-branded-indicator, #00919f);
315
- $color-star-empty: var(--color-star-empty, #dddcd5);
348
+ $color-star-empty: var(--color-star-empty, #ffffff);
316
349
  $color-star-focus: var(--color-star-focus, #758992);
317
350
  $color-star-full: var(--color-star-full, #ea7315);
318
351
  $color-star-hover: var(--color-star-hover, #f4b27e);
352
+ $color-stepper-item-background: var(--color-stepper-item-background, #999999);
353
+ $color-stepper-item-current-background: var(--color-stepper-item-current-background, #00919f);
354
+ $color-stepper-link-hover-text: var(--color-stepper-link-hover-text, #00919f);
355
+ $color-stepper-indicator-background: var(--color-stepper-indicator-background, #ffffff);
356
+ $color-stepper-indicator-border: var(--color-stepper-indicator-border, #999999);
357
+ $color-stepper-indicator-current-background: var(--color-stepper-indicator-current-background, #00919f);
358
+ $color-stepper-indicator-current-border: var(--color-stepper-indicator-current-border, #00919f);
359
+ $color-stepper-icon: var(--color-stepper-icon, #00919f);
360
+ $color-stepper-title: var(--color-stepper-title, #00919f);
319
361
  $color-tabs-background: var(--color-tabs-background, #ffffff);
320
362
  $color-tabs-shadow: var(--color-tabs-shadow, #000000);
321
- $color-tabs-default: var(--color-tabs-default, #1e1e1c);
363
+ $color-tabs-default: var(--color-tabs-default, #666666);
364
+ $color-tabs-element-background: var(--color-tabs-element-background, #eeeff1);
322
365
  $color-tabs-hover: var(--color-tabs-hover, #004e57);
323
- $color-tabs-disabled: var(--color-tabs-disabled, #71706b);
324
- $color-tabs-active: var(--color-tabs-active, #007f8c);
366
+ $color-tabs-disabled-background: var(--color-tabs-disabled-background, #cccccc);
367
+ $color-tabs-active-background: var(--color-tabs-active-background, #cfd2d8);
368
+ $color-tabs-active-text: var(--color-tabs-active-text, #333333);
369
+ $color-tabs-selected-border: var(--color-tabs-selected-border, #000000);
370
+ $color-tabs-selected-text: var(--color-tabs-selected-text, #000000);
325
371
  $color-tabs-active-disabled: var(--color-tabs-active-disabled, #91d5db);
326
372
  $color-tag-text-light-background: var(--color-tag-text-light-background, #ffffff);
327
- $color-tag-text-light-border: var(--color-tag-text-light-border, #8c8b85);
328
- $color-tag-text-light-text: var(--color-tag-text-light-text, #1e1e1c);
329
- $color-tag-text-dark-background: var(--color-tag-text-dark-background, #1e1e1c);
373
+ $color-tag-text-light-border: var(--color-tag-text-light-border, #808080);
374
+ $color-tag-text-light-text: var(--color-tag-text-light-text, #191919);
375
+ $color-tag-text-dark-background: var(--color-tag-text-dark-background, #191919);
330
376
  $color-tag-text-dark-border: var(--color-tag-text-dark-border, #ffffff);
331
377
  $color-tag-text-dark-text: var(--color-tag-text-dark-text, #ffffff);
332
378
  $color-tag-link-light-background: var(--color-tag-link-light-background, #ffffff);
333
- $color-tag-link-light-border: var(--color-tag-link-light-border, #8c8b85);
334
- $color-tag-link-light-text: var(--color-tag-link-light-text, #1e1e1c);
335
- $color-tag-link-light-hover-background: var(--color-tag-link-light-hover-background, #eeedea);
336
- $color-tag-link-light-active-background: var(--color-tag-link-light-active-background, #dddcd5);
337
- $color-tag-link-dark-background: var(--color-tag-link-dark-background, #1e1e1c);
379
+ $color-tag-link-light-border: var(--color-tag-link-light-border, #808080);
380
+ $color-tag-link-light-text: var(--color-tag-link-light-text, #191919);
381
+ $color-tag-link-light-hover-background: var(--color-tag-link-light-hover-background, #e6e6e6);
382
+ $color-tag-link-light-active-background: var(--color-tag-link-light-active-background, #cccccc);
383
+ $color-tag-link-dark-background: var(--color-tag-link-dark-background, #191919);
338
384
  $color-tag-link-dark-border: var(--color-tag-link-dark-border, #ffffff);
339
385
  $color-tag-link-dark-text: var(--color-tag-link-dark-text, #ffffff);
340
- $color-tag-link-dark-hover-background: var(--color-tag-link-dark-hover-background, #3a3936);
341
- $color-tag-link-dark-active-background: var(--color-tag-link-dark-active-background, #555550);
386
+ $color-tag-link-dark-hover-background: var(--color-tag-link-dark-hover-background, #333333);
387
+ $color-tag-link-dark-active-background: var(--color-tag-link-dark-active-background, #4d4d4d);
342
388
  $color-tag-selectable-light-background: var(--color-tag-selectable-light-background, #ffffff);
343
- $color-tag-selectable-light-border: var(--color-tag-selectable-light-border, #8c8b85);
344
- $color-tag-selectable-light-text: var(--color-tag-selectable-light-text, #1e1e1c);
389
+ $color-tag-selectable-light-border: var(--color-tag-selectable-light-border, #808080);
390
+ $color-tag-selectable-light-text: var(--color-tag-selectable-light-text, #191919);
345
391
  $color-tag-selectable-light-hover-background: var(--color-tag-selectable-light-hover-background, #48bac4);
346
392
  $color-tag-selectable-light-active-background: var(--color-tag-selectable-light-active-background, #004e57);
347
393
  $color-tag-selectable-light-active-border: var(--color-tag-selectable-light-active-border, #004e57);
348
394
  $color-tag-selectable-light-active-text: var(--color-tag-selectable-light-active-text, #ffffff);
349
- $color-tag-selectable-light-disabled-background: var(--color-tag-selectable-light-disabled-background, #eeedea);
350
- $color-tag-selectable-light-disabled-text: var(--color-tag-selectable-light-disabled-text, #8c8b85);
395
+ $color-tag-selectable-light-disabled-background: var(--color-tag-selectable-light-disabled-background, #e6e6e6);
396
+ $color-tag-selectable-light-disabled-text: var(--color-tag-selectable-light-disabled-text, #808080);
351
397
  $color-tag-selectable-light-selected-background: var(--color-tag-selectable-light-selected-background, #007f8c);
352
398
  $color-tag-selectable-light-selected-text: var(--color-tag-selectable-light-selected-text, #ffffff);
353
399
  $color-tag-selectable-light-selected-hover-background: var(--color-tag-selectable-light-selected-hover-background, #006974);
354
- $color-tag-selectable-dark-background: var(--color-tag-selectable-dark-background, #1e1e1c);
400
+ $color-tag-selectable-dark-background: var(--color-tag-selectable-dark-background, #191919);
355
401
  $color-tag-selectable-dark-border: var(--color-tag-selectable-dark-border, #ffffff);
356
402
  $color-tag-selectable-dark-text: var(--color-tag-selectable-dark-text, #ffffff);
357
403
  $color-tag-selectable-dark-hover-background: var(--color-tag-selectable-dark-hover-background, #006974);
358
404
  $color-tag-selectable-dark-active-background: var(--color-tag-selectable-dark-active-background, #91d5db);
359
405
  $color-tag-selectable-dark-active-border: var(--color-tag-selectable-dark-active-border, #91d5db);
360
- $color-tag-selectable-dark-active-text: var(--color-tag-selectable-dark-active-text, #1e1e1c);
406
+ $color-tag-selectable-dark-active-text: var(--color-tag-selectable-dark-active-text, #191919);
361
407
  $color-tag-selectable-dark-selected-background: var(--color-tag-selectable-dark-selected-background, #009eac);
362
408
  $color-tag-selectable-dark-selected-border: var(--color-tag-selectable-dark-selected-border, #009eac);
363
- $color-tag-selectable-dark-selected-text: var(--color-tag-selectable-dark-selected-text, #1e1e1c);
409
+ $color-tag-selectable-dark-selected-text: var(--color-tag-selectable-dark-selected-text, #191919);
364
410
  $color-tag-selectable-dark-selected-hover-background: var(--color-tag-selectable-dark-selected-hover-background, #48bac4);
365
- $color-tag-selectable-dark-disabled-background: var(--color-tag-selectable-dark-disabled-background, #555550);
366
- $color-tag-selectable-dark-disabled-text: var(--color-tag-selectable-dark-disabled-text, #8c8b85);
367
- $color-tag-removable-light-background: var(--color-tag-removable-light-background, #3a3936);
411
+ $color-tag-selectable-dark-disabled-background: var(--color-tag-selectable-dark-disabled-background, #4d4d4d);
412
+ $color-tag-selectable-dark-disabled-text: var(--color-tag-selectable-dark-disabled-text, #808080);
413
+ $color-tag-removable-light-background: var(--color-tag-removable-light-background, #333333);
368
414
  $color-tag-removable-light-text: var(--color-tag-removable-light-text, #ffffff);
369
- $color-tag-removable-light-icon: var(--color-tag-removable-light-icon, #dddcd5);
370
- $color-tag-removable-light-hover-background: var(--color-tag-removable-light-hover-background, #555550);
371
- $color-tag-removable-light-active-background: var(--color-tag-removable-light-active-background, #71706b);
372
- $color-tag-removable-dark-background: var(--color-tag-removable-dark-background, #dddcd5);
373
- $color-tag-removable-dark-text: var(--color-tag-removable-dark-text, #1e1e1c);
374
- $color-tag-removable-dark-icon: var(--color-tag-removable-dark-icon, #1e1e1c);
375
- $color-tag-removable-dark-hover-background: var(--color-tag-removable-dark-hover-background, #c2c1ba);
376
- $color-tag-removable-dark-active-background: var(--color-tag-removable-dark-active-background, #a7a6a0);
377
- $color-toggle-off-background: var(--color-toggle-off-background, #71706b);
415
+ $color-tag-removable-light-icon: var(--color-tag-removable-light-icon, #cccccc);
416
+ $color-tag-removable-light-hover-background: var(--color-tag-removable-light-hover-background, #4d4d4d);
417
+ $color-tag-removable-light-active-background: var(--color-tag-removable-light-active-background, #666666);
418
+ $color-tag-removable-dark-background: var(--color-tag-removable-dark-background, #cccccc);
419
+ $color-tag-removable-dark-text: var(--color-tag-removable-dark-text, #191919);
420
+ $color-tag-removable-dark-icon: var(--color-tag-removable-dark-icon, #191919);
421
+ $color-tag-removable-dark-hover-background: var(--color-tag-removable-dark-hover-background, #b3b3b3);
422
+ $color-tag-removable-dark-active-background: var(--color-tag-removable-dark-active-background, #999999);
423
+ $color-toggle-off-background: var(--color-toggle-off-background, #666666);
378
424
  $color-toggle-off-circle: var(--color-toggle-off-circle, #ffffff);
379
425
  $color-toggle-on-background: var(--color-toggle-on-background, #00919f);
380
426
  $color-toggle-on-circle: var(--color-toggle-on-circle, #ffffff);
381
- $color-toggle-hover-circle: var(--color-toggle-hover-circle, #eeedea);
382
- $color-toggle-disabled-background: var(--color-toggle-disabled-background, #eeedea);
383
- $color-toggle-disabled-circle: var(--color-toggle-disabled-circle, #c2c1ba);
427
+ $color-toggle-hover-circle: var(--color-toggle-hover-circle, #e6e6e6);
428
+ $color-toggle-disabled-background: var(--color-toggle-disabled-background, #e6e6e6);
429
+ $color-toggle-disabled-circle: var(--color-toggle-disabled-circle, #b3b3b3);
384
430
  $color-toggle-disabled-checked-background: var(--color-toggle-disabled-checked-background, #91d5db);
385
431
  $color-toggle-disabled-checked-circle: var(--color-toggle-disabled-checked-circle, #ffffff);
432
+ $color-tooltip-background: var(--color-tooltip-background, #4d4d4d);
433
+ $color-tooltip-border: var(--color-tooltip-border, #ffffff);
434
+ $color-secondary-sandgrey-100: var(--color-secondary-sandgrey-100, #eeedea);
435
+ $color-secondary-sandgrey-200: var(--color-secondary-sandgrey-200, #dddcd5);
436
+ $color-secondary-sandgrey-300: var(--color-secondary-sandgrey-300, #c2c1ba);
437
+ $color-secondary-sandgrey-400: var(--color-secondary-sandgrey-400, #a7a6a0);
438
+ $color-secondary-sandgrey-500: var(--color-secondary-sandgrey-500, #8c8b85);
439
+ $color-secondary-sandgrey-600: var(--color-secondary-sandgrey-600, #71706b);
440
+ $color-secondary-sandgrey-700: var(--color-secondary-sandgrey-700, #555550);
441
+ $color-secondary-sandgrey-800: var(--color-secondary-sandgrey-800, #3a3936);
442
+ $color-secondary-sandgrey-900: var(--color-secondary-sandgrey-900, #1e1e1c);
package/src/tokens/adeo/css/root.scss CHANGED
@@ -1,4 +1,14 @@
1
1
  :root {
2
+ --color-secondary-sandgrey-900: #1e1e1c;
3
+ --color-secondary-sandgrey-800: #3a3936;
4
+ --color-secondary-sandgrey-700: #555550;
5
+ --color-secondary-sandgrey-600: #71706b;
6
+ --color-secondary-sandgrey-500: #8c8b85;
7
+ --color-secondary-sandgrey-400: #a7a6a0;
8
+ --color-secondary-sandgrey-300: #c2c1ba;
9
+ --color-secondary-sandgrey-200: #dddcd5;
10
+ --color-secondary-sandgrey-100: #eeedea;
11
+ --color-star-full: #ea7315;
2
12
  --color-success-900: #023618;
3
13
  --color-success-800: #035010;
4
14
  --color-success-700: #006902;
@@ -82,24 +92,24 @@
82
92
  --color-secondary-blue-100: #eaedef;
83
93
  --color-grey-000: #ffffff;
84
94
  --color-grey-999: #000000;
85
- --color-grey-900: #1e1e1c;
86
- --color-grey-800: #3a3936;
87
- --color-grey-700: #555550;
88
- --color-grey-600: #71706b;
89
- --color-grey-500: #8c8b85;
90
- --color-grey-400: #a7a6a0;
91
- --color-grey-300: #c2c1ba;
92
- --color-grey-200: #dddcd5;
93
- --color-grey-100: #eeedea;
94
- --color-primary-02-900: #062b35;
95
- --color-primary-02-800: #063a44;
96
- --color-primary-02-700: #044c53;
97
- --color-primary-02-600: #035f64;
98
- --color-primary-02-500: #007574;
99
- --color-primary-02-400: #379590;
100
- --color-primary-02-300: #6eb4ad;
101
- --color-primary-02-200: #a5d1cb;
102
- --color-primary-02-100: #dbedea;
95
+ --color-grey-900: #191919;
96
+ --color-grey-800: #333333;
97
+ --color-grey-700: #4d4d4d;
98
+ --color-grey-600: #666666;
99
+ --color-grey-500: #808080;
100
+ --color-grey-400: #999999;
101
+ --color-grey-300: #b3b3b3;
102
+ --color-grey-200: #cccccc;
103
+ --color-grey-100: #e6e6e6;
104
+ --color-primary-02-900: #171b26;
105
+ --color-primary-02-800: #242938;
106
+ --color-primary-02-700: #343b4c;
107
+ --color-primary-02-600: #494f60;
108
+ --color-primary-02-500: #6a7081;
109
+ --color-primary-02-400: #8f94a3;
110
+ --color-primary-02-300: #b3b7c1;
111
+ --color-primary-02-200: #cfd2d8;
112
+ --color-primary-02-100: #eeeff1;
103
113
  --color-primary-01-900: #002e33;
104
114
  --color-primary-01-800: #004e57;
105
115
  --color-primary-01-700: #006974;
@@ -109,6 +119,8 @@
109
119
  --color-primary-01-300: #48bac4;
110
120
  --color-primary-01-200: #91d5db;
111
121
  --color-primary-01-100: #d9f0f3;
122
+ --color-tooltip-border: var(--color-grey-000);
123
+ --color-tooltip-background: var(--color-grey-700);
112
124
  --color-toggle-disabled-checked-circle: var(--color-grey-000);
113
125
  --color-toggle-disabled-checked-background: var(--color-primary-01-200);
114
126
  --color-toggle-disabled-circle: var(--color-grey-300);
@@ -170,18 +182,46 @@
170
182
  --color-tag-text-light-border: var(--color-grey-500);
171
183
  --color-tag-text-light-background: var(--color-grey-000);
172
184
  --color-tabs-active-disabled: var(--color-primary-01-200);
185
+ --color-tabs-selected-border: var(--color-grey-999);
186
+ --color-tabs-active-background: var(--color-primary-02-200);
187
+ --color-tabs-disabled-background: var(--color-grey-200);
173
188
  --color-tabs-hover: var(--color-primary-01-800);
189
+ --color-tabs-element-background: var(--color-primary-02-100);
174
190
  --color-tabs-shadow: var(--color-grey-999);
175
191
  --color-tabs-background: var(--color-grey-000);
192
+ --color-stepper-title: var(--color-primary-01-500);
193
+ --color-stepper-icon: var(--color-primary-01-500);
194
+ --color-stepper-indicator-current-border: var(--color-primary-01-500);
195
+ --color-stepper-indicator-current-background: var(--color-primary-01-500);
196
+ --color-stepper-indicator-border: var(--color-grey-400);
197
+ --color-stepper-indicator-background: var(--color-grey-000);
198
+ --color-stepper-link-hover-text: var(--color-primary-01-500);
199
+ --color-stepper-item-current-background: var(--color-primary-01-500);
200
+ --color-stepper-item-background: var(--color-grey-400);
176
201
  --color-star-hover: var(--color-secondary-orange-300);
177
- --color-star-full: var(--color-secondary-orange-500);
178
202
  --color-star-focus: var(--color-secondary-blue-500);
179
- --color-star-empty: var(--color-grey-200);
203
+ --color-star-empty: var(--color-grey-000);
180
204
  --color-progress-branded-indicator: var(--color-primary-01-500);
181
205
  --color-progress-percentage-half: var(--color-grey-000);
182
206
  --color-progress-percentage-default: var(--color-grey-900);
183
207
  --color-progress-indicator: var(--color-info-600);
184
208
  --color-progress-background: var(--color-grey-200);
209
+ --color-phone-number-item-focus-background: var(--color-grey-100);
210
+ --color-phone-number-item-border: var(--color-grey-300);
211
+ --color-phone-number-list-background: var(--color-grey-000);
212
+ --color-phone-number-button-border: var(--color-grey-600);
213
+ --color-password-input-button-hover-background: var(--color-grey-100);
214
+ --color-overlay-loader-background: var(--color-secondary-blue-900);
215
+ --color-overlay-background: var(--color-grey-900);
216
+ --color-option-card-checked-label-shadow: var(--color-primary-01-100);
217
+ --color-option-card-checked-label-border: var(--color-primary-01-500);
218
+ --color-option-card-hover-label-shadow: var(--color-grey-800);
219
+ --color-option-card-label-shadow: var(--color-grey-300);
220
+ --color-option-button-disabled-label-background: var(--color-grey-200);
221
+ --color-option-button-checked-label-shadow: var(--color-primary-01-100);
222
+ --color-option-button-checked-label-border: var(--color-primary-01-500);
223
+ --color-option-button-hover-label-shadow: var(--color-grey-800);
224
+ --color-option-button-label-shadow: var(--color-grey-300);
185
225
  --color-notification-danger-icon: var(--color-danger-600);
186
226
  --color-notification-danger-border: var(--color-danger-500);
187
227
  --color-notification-danger-background: var(--color-danger-100);
@@ -195,6 +235,12 @@
195
235
  --color-notification-information-border: var(--color-info-500);
196
236
  --color-notification-information-background: var(--color-info-100);
197
237
  --color-notification-font: var(--color-grey-999);
238
+ --color-listbox-disabled-background: var(--color-grey-200);
239
+ --color-listbox-tile-hover-background: var(--color-grey-100);
240
+ --color-listbox-tile-shadow: var(--color-grey-900);
241
+ --color-listbox-tile-border: var(--color-grey-300);
242
+ --color-listbox-border: var(--color-grey-600);
243
+ --color-listbox-background: var(--color-grey-000);
198
244
  --color-link-danger-hover: var(--color-secondary-red-800);
199
245
  --color-link-danger-disabled: var(--color-grey-100);
200
246
  --color-link-danger-active: var(--color-secondary-red-700);
@@ -237,6 +283,9 @@
237
283
  --color-input-placeholder: var(--color-grey-500);
238
284
  --color-input-border: var(--color-grey-600);
239
285
  --color-input-text: var(--color-grey-900);
286
+ --color-hero-cover-background: var(--color-grey-900);
287
+ --color-heading-underline-lightest: var(--color-primary-01-200);
288
+ --color-heading-underline-default: var(--color-primary-01-500);
240
289
  --color-font-danger: var(--color-danger-600);
241
290
  --color-font-warning: var(--color-warning-600);
242
291
  --color-font-success: var(--color-success-600);
@@ -289,6 +338,12 @@
289
338
  --color-divider-default: var(--color-grey-600);
290
339
  --color-divider-light: var(--color-grey-300);
291
340
  --color-divider-lightest: var(--color-grey-000);
341
+ --color-dialog-footer-shadow: var(--color-grey-900);
342
+ --color-dialog-close: var(--color-grey-500);
343
+ --color-dialog-icon: var(--color-grey-600);
344
+ --color-dialog-background: var(--color-grey-000);
345
+ --color-card-bordered-border: var(--color-grey-500);
346
+ --color-card-bordered-background: var(--color-grey-000);
292
347
  --color-button-bordered-danger-hover-background: var(--color-secondary-red-100);
293
348
  --color-button-bordered-danger-active-background: var(--color-secondary-red-200);
294
349
  --color-button-bordered-danger-disabled-font: var(--color-grey-600);
@@ -353,6 +408,8 @@
353
408
  --color-button-solid-focus-border: var(--color-primary-01-700);
354
409
  --color-button-solid-font: var(--color-grey-000);
355
410
  --color-button-solid-background: var(--color-primary-01-600);
411
+ --color-breadcrumb-arrow-invert: var(--color-grey-000);
412
+ --color-breadcrumb-arrow: var(--color-grey-800);
356
413
  --color-secondary-green-900: var(--color-primary-01-900);
357
414
  --color-secondary-green-800: var(--color-primary-01-800);
358
415
  --color-secondary-green-700: var(--color-primary-01-700);
@@ -377,9 +434,9 @@
377
434
  --color-badge-info-text: var(--color-info-700);
378
435
  --color-badge-info-border: var(--color-info-500);
379
436
  --color-badge-info-background: var(--color-info-100);
380
- --color-tabs-active: var(--color-font-primary-01);
381
- --color-tabs-disabled: var(--color-font-light);
382
- --color-tabs-default: var(--color-font-darker);
437
+ --color-tabs-selected-text: var(--color-font-darkest);
438
+ --color-tabs-active-text: var(--color-font-dark);
439
+ --color-tabs-default: var(--color-font-light);
383
440
  --color-fields-help: var(--color-font-light);
384
441
  --color-fields-requirement: var(--color-font-light);
385
442
  --color-fields-label: var(--color-font-dark);