@mozaic-ds/vue 0.23.0-beta.0 → 0.24.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/dist/mozaic-vue.adeo.css +41 -40
  2. package/dist/mozaic-vue.adeo.umd.js +2894 -1265
  3. package/dist/mozaic-vue.common.js +2894 -1265
  4. package/dist/mozaic-vue.common.js.map +1 -1
  5. package/dist/mozaic-vue.css +1 -1
  6. package/dist/mozaic-vue.umd.js +2894 -1265
  7. package/dist/mozaic-vue.umd.js.map +1 -1
  8. package/dist/mozaic-vue.umd.min.js +2 -2
  9. package/dist/mozaic-vue.umd.min.js.map +1 -1
  10. package/package.json +16 -16
  11. package/src/components/autocomplete/MAutocomplete.vue +28 -12
  12. package/src/components/dropdown/MDropdown.vue +245 -0
  13. package/src/components/dropdown/index.js +7 -0
  14. package/src/components/icon/MIcon.vue +18 -2
  15. package/src/components/index.js +1 -0
  16. package/src/components/phonenumber/MPhoneNumber.vue +4 -2
  17. package/src/components/quantityselector/MQuantitySelector.vue +5 -0
  18. package/src/components/tabs/MTab.vue +4 -11
  19. package/src/index.js +1 -0
  20. package/src/tokens/adeo/android/colors.xml +209 -166
  21. package/src/tokens/adeo/css/_variables.scss +209 -166
  22. package/src/tokens/adeo/css/root.scss +89 -46
  23. package/src/tokens/adeo/ios/StyleDictionaryColor.h +48 -5
  24. package/src/tokens/adeo/ios/StyleDictionaryColor.m +214 -171
  25. package/src/tokens/adeo/ios/StyleDictionaryColor.swift +209 -166
  26. package/src/tokens/adeo/js/tokens.js +209 -166
  27. package/src/tokens/adeo/js/tokensObject.js +1279 -304
  28. package/src/tokens/adeo/scss/_tokens.scss +344 -174
  29. package/types/index.d.ts +2 -0
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;
@@ -44,24 +54,24 @@
44
54
  --color-secondary-yellow-300: #fee07d;
45
55
  --color-secondary-yellow-200: #ffebaf;
46
56
  --color-secondary-yellow-100: #fff8e2;
47
- --color-secondary-orange-900: #360e00;
48
- --color-secondary-orange-800: #531b00;
49
- --color-secondary-orange-700: #8c3500;
50
- --color-secondary-orange-600: #c65200;
51
- --color-secondary-orange-500: #ea7315;
52
- --color-secondary-orange-400: #ef934a;
53
- --color-secondary-orange-300: #f4b27e;
54
- --color-secondary-orange-200: #f8d2b3;
55
- --color-secondary-orange-100: #fdf1e8;
56
- --color-secondary-red-900: #2d0000;
57
- --color-secondary-red-800: #530000;
58
- --color-secondary-red-700: #8c0003;
59
- --color-secondary-red-600: #c61112;
60
- --color-secondary-red-500: #ea302d;
61
- --color-secondary-red-400: #ef5f5c;
62
- --color-secondary-red-300: #f38d8c;
63
- --color-secondary-red-200: #f8bcbb;
64
- --color-secondary-red-100: #fdeaea;
57
+ --color-secondary-orange-900: #401f15;
58
+ --color-secondary-orange-800: #6a351c;
59
+ --color-secondary-orange-700: #974f20;
60
+ --color-secondary-orange-600: #c86f21;
61
+ --color-secondary-orange-500: #fc961e;
62
+ --color-secondary-orange-400: #ffab4b;
63
+ --color-secondary-orange-300: #ffc17d;
64
+ --color-secondary-orange-200: #ffdab2;
65
+ --color-secondary-orange-100: #fff5eb;
66
+ --color-secondary-red-900: #3e1219;
67
+ --color-secondary-red-800: #641b21;
68
+ --color-secondary-red-700: #8b2226;
69
+ --color-secondary-red-600: #b42a27;
70
+ --color-secondary-red-500: #df382b;
71
+ --color-secondary-red-400: #ea5d58;
72
+ --color-secondary-red-300: #f38789;
73
+ --color-secondary-red-200: #fab9bc;
74
+ --color-secondary-red-100: #feedee;
65
75
  --color-secondary-purple-900: #1a1a4b;
66
76
  --color-secondary-purple-800: #282863;
67
77
  --color-secondary-purple-700: #393879;
@@ -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,32 +182,52 @@
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);
173
- --color-tabs-hover: var(--color-primary-01-800);
185
+ --color-tabs-hover: var(--color-primary-01-600);
174
186
  --color-tabs-shadow: var(--color-grey-999);
175
187
  --color-tabs-background: var(--color-grey-000);
188
+ --color-stepper-title: var(--color-primary-01-400);
189
+ --color-stepper-icon: var(--color-primary-01-400);
190
+ --color-stepper-indicator-current-border: var(--color-primary-01-400);
191
+ --color-stepper-indicator-current-background: var(--color-primary-01-400);
192
+ --color-stepper-indicator-border: var(--color-grey-400);
193
+ --color-stepper-indicator-background: var(--color-grey-000);
194
+ --color-stepper-link-hover-text: var(--color-primary-01-400);
195
+ --color-stepper-item-current-background: var(--color-primary-01-400);
196
+ --color-stepper-item-background: var(--color-grey-400);
176
197
  --color-star-hover: var(--color-secondary-orange-300);
177
- --color-star-full: var(--color-secondary-orange-500);
178
198
  --color-star-focus: var(--color-secondary-blue-500);
179
- --color-star-empty: var(--color-grey-200);
199
+ --color-star-empty: var(--color-grey-000);
180
200
  --color-progress-branded-indicator: var(--color-primary-01-500);
181
201
  --color-progress-percentage-half: var(--color-grey-000);
182
202
  --color-progress-percentage-default: var(--color-grey-900);
183
203
  --color-progress-indicator: var(--color-info-600);
184
204
  --color-progress-background: var(--color-grey-200);
185
- --color-notification-danger-icon: var(--color-danger-600);
205
+ --color-phone-number-item-focus-background: var(--color-grey-100);
206
+ --color-phone-number-item-border: var(--color-grey-300);
207
+ --color-phone-number-list-background: var(--color-grey-000);
208
+ --color-phone-number-button-border: var(--color-grey-600);
209
+ --color-password-input-button-hover-background: var(--color-grey-100);
210
+ --color-overlay-loader-background: var(--color-secondary-blue-900);
211
+ --color-overlay-background: var(--color-grey-900);
212
+ --color-option-card-checked-label-shadow: var(--color-primary-01-100);
213
+ --color-option-card-checked-label-border: var(--color-primary-01-500);
214
+ --color-option-card-hover-label-shadow: var(--color-grey-800);
215
+ --color-option-card-label-shadow: var(--color-grey-300);
216
+ --color-option-button-disabled-label-background: var(--color-grey-200);
217
+ --color-option-button-checked-label-shadow: var(--color-primary-01-100);
218
+ --color-option-button-checked-label-border: var(--color-primary-01-500);
219
+ --color-option-button-hover-label-shadow: var(--color-grey-800);
220
+ --color-option-button-label-shadow: var(--color-grey-300);
186
221
  --color-notification-danger-border: var(--color-danger-500);
187
222
  --color-notification-danger-background: var(--color-danger-100);
188
- --color-notification-warning-icon: var(--color-warning-600);
189
223
  --color-notification-warning-border: var(--color-warning-500);
190
224
  --color-notification-warning-background: var(--color-warning-100);
191
- --color-notification-success-icon: var(--color-success-600);
192
225
  --color-notification-success-border: var(--color-success-500);
193
226
  --color-notification-success-background: var(--color-success-100);
194
- --color-notification-information-icon: var(--color-info-600);
195
227
  --color-notification-information-border: var(--color-info-500);
196
228
  --color-notification-information-background: var(--color-info-100);
197
229
  --color-notification-font: var(--color-grey-999);
198
- --color-link-danger-hover: var(--color-secondary-red-800);
230
+ --color-link-danger-hover: var(--color-secondary-red-900);
199
231
  --color-link-danger-disabled: var(--color-grey-100);
200
232
  --color-link-danger-active: var(--color-secondary-red-700);
201
233
  --color-link-danger-visited: var(--color-secondary-red-700);
@@ -205,7 +237,7 @@
205
237
  --color-link-primary-02-active: var(--color-primary-02-700);
206
238
  --color-link-primary-02-visited: var(--color-primary-02-700);
207
239
  --color-link-primary-02-base: var(--color-primary-02-600);
208
- --color-link-primary-hover: var(--color-primary-01-800);
240
+ --color-link-primary-hover: var(--color-primary-01-900);
209
241
  --color-link-primary-disabled: var(--color-grey-100);
210
242
  --color-link-primary-active: var(--color-primary-01-700);
211
243
  --color-link-primary-visited: var(--color-primary-01-700);
@@ -237,6 +269,9 @@
237
269
  --color-input-placeholder: var(--color-grey-500);
238
270
  --color-input-border: var(--color-grey-600);
239
271
  --color-input-text: var(--color-grey-900);
272
+ --color-hero-cover-background: var(--color-grey-900);
273
+ --color-heading-underline-lightest: var(--color-primary-01-200);
274
+ --color-heading-underline-default: var(--color-primary-01-500);
240
275
  --color-font-danger: var(--color-danger-600);
241
276
  --color-font-warning: var(--color-warning-600);
242
277
  --color-font-success: var(--color-success-600);
@@ -247,7 +282,7 @@
247
282
  --color-font-darker: var(--color-grey-900);
248
283
  --color-font-darkest: var(--color-grey-999);
249
284
  --color-font-primary-02: var(--color-primary-02-500);
250
- --color-font-primary-01: var(--color-primary-01-600);
285
+ --color-font-primary-01: var(--color-primary-01-500);
251
286
  --color-focus-border: var(--color-secondary-blue-500);
252
287
  --color-focus-gap: var(--color-grey-000);
253
288
  --color-flag-bordered-danger-text: var(--color-secondary-red-600);
@@ -289,6 +324,12 @@
289
324
  --color-divider-default: var(--color-grey-600);
290
325
  --color-divider-light: var(--color-grey-300);
291
326
  --color-divider-lightest: var(--color-grey-000);
327
+ --color-dialog-footer-shadow: var(--color-grey-900);
328
+ --color-dialog-close: var(--color-grey-500);
329
+ --color-dialog-icon: var(--color-grey-600);
330
+ --color-dialog-background: var(--color-grey-000);
331
+ --color-card-bordered-border: var(--color-grey-500);
332
+ --color-card-bordered-background: var(--color-grey-000);
292
333
  --color-button-bordered-danger-hover-background: var(--color-secondary-red-100);
293
334
  --color-button-bordered-danger-active-background: var(--color-secondary-red-200);
294
335
  --color-button-bordered-danger-disabled-font: var(--color-grey-600);
@@ -353,6 +394,8 @@
353
394
  --color-button-solid-focus-border: var(--color-primary-01-700);
354
395
  --color-button-solid-font: var(--color-grey-000);
355
396
  --color-button-solid-background: var(--color-primary-01-600);
397
+ --color-breadcrumb-arrow-invert: var(--color-grey-000);
398
+ --color-breadcrumb-arrow: var(--color-grey-800);
356
399
  --color-secondary-green-900: var(--color-primary-01-900);
357
400
  --color-secondary-green-800: var(--color-primary-01-800);
358
401
  --color-secondary-green-700: var(--color-primary-01-700);
package/src/tokens/adeo/ios/StyleDictionaryColor.h CHANGED
@@ -140,6 +140,8 @@ ColorSuccess600,
140
140
  ColorSuccess700,
141
141
  ColorSuccess800,
142
142
  ColorSuccess900,
143
+ ColorBreadcrumbArrow,
144
+ ColorBreadcrumbArrowInvert,
143
145
  ColorButtonSolidBackground,
144
146
  ColorButtonSolidFont,
145
147
  ColorButtonSolidFocusBorder,
@@ -204,6 +206,12 @@ ColorButtonBorderedDangerDisabledBackground,
204
206
  ColorButtonBorderedDangerDisabledFont,
205
207
  ColorButtonBorderedDangerActiveBackground,
206
208
  ColorButtonBorderedDangerHoverBackground,
209
+ ColorCardBorderedBackground,
210
+ ColorCardBorderedBorder,
211
+ ColorDialogBackground,
212
+ ColorDialogIcon,
213
+ ColorDialogClose,
214
+ ColorDialogFooterShadow,
207
215
  ColorDividerLightest,
208
216
  ColorDividerLight,
209
217
  ColorDividerDefault,
@@ -260,6 +268,9 @@ ColorFontInfo,
260
268
  ColorFontSuccess,
261
269
  ColorFontWarning,
262
270
  ColorFontDanger,
271
+ ColorHeadingUnderlineDefault,
272
+ ColorHeadingUnderlineLightest,
273
+ ColorHeroCoverBackground,
263
274
  ColorInputText,
264
275
  ColorInputBorder,
265
276
  ColorInputPlaceholder,
@@ -305,16 +316,28 @@ ColorLinkDangerHover,
305
316
  ColorNotificationFont,
306
317
  ColorNotificationInformationBackground,
307
318
  ColorNotificationInformationBorder,
308
- ColorNotificationInformationIcon,
309
319
  ColorNotificationSuccessBackground,
310
320
  ColorNotificationSuccessBorder,
311
- ColorNotificationSuccessIcon,
312
321
  ColorNotificationWarningBackground,
313
322
  ColorNotificationWarningBorder,
314
- ColorNotificationWarningIcon,
315
323
  ColorNotificationDangerBackground,
316
324
  ColorNotificationDangerBorder,
317
- ColorNotificationDangerIcon,
325
+ ColorOptionButtonLabelShadow,
326
+ ColorOptionButtonHoverLabelShadow,
327
+ ColorOptionButtonCheckedLabelBorder,
328
+ ColorOptionButtonCheckedLabelShadow,
329
+ ColorOptionButtonDisabledLabelBackground,
330
+ ColorOptionCardLabelShadow,
331
+ ColorOptionCardHoverLabelShadow,
332
+ ColorOptionCardCheckedLabelBorder,
333
+ ColorOptionCardCheckedLabelShadow,
334
+ ColorOverlayBackground,
335
+ ColorOverlayLoaderBackground,
336
+ ColorPasswordInputButtonHoverBackground,
337
+ ColorPhoneNumberButtonBorder,
338
+ ColorPhoneNumberListBackground,
339
+ ColorPhoneNumberItemBorder,
340
+ ColorPhoneNumberItemFocusBackground,
318
341
  ColorProgressBackground,
319
342
  ColorProgressIndicator,
320
343
  ColorProgressPercentageDefault,
@@ -324,6 +347,15 @@ ColorStarEmpty,
324
347
  ColorStarFocus,
325
348
  ColorStarFull,
326
349
  ColorStarHover,
350
+ ColorStepperItemBackground,
351
+ ColorStepperItemCurrentBackground,
352
+ ColorStepperLinkHoverText,
353
+ ColorStepperIndicatorBackground,
354
+ ColorStepperIndicatorBorder,
355
+ ColorStepperIndicatorCurrentBackground,
356
+ ColorStepperIndicatorCurrentBorder,
357
+ ColorStepperIcon,
358
+ ColorStepperTitle,
327
359
  ColorTabsBackground,
328
360
  ColorTabsShadow,
329
361
  ColorTabsDefault,
@@ -390,7 +422,18 @@ ColorToggleHoverCircle,
390
422
  ColorToggleDisabledBackground,
391
423
  ColorToggleDisabledCircle,
392
424
  ColorToggleDisabledCheckedBackground,
393
- ColorToggleDisabledCheckedCircle
425
+ ColorToggleDisabledCheckedCircle,
426
+ ColorTooltipBackground,
427
+ ColorTooltipBorder,
428
+ ColorSecondarySandgrey100,
429
+ ColorSecondarySandgrey200,
430
+ ColorSecondarySandgrey300,
431
+ ColorSecondarySandgrey400,
432
+ ColorSecondarySandgrey500,
433
+ ColorSecondarySandgrey600,
434
+ ColorSecondarySandgrey700,
435
+ ColorSecondarySandgrey800,
436
+ ColorSecondarySandgrey900
394
437
  };
395
438
 
396
439
  @interface StyleDictionaryColor : NSObject