@mozaic-ds/vue 0.23.0 → 1.0.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 (36) hide show
  1. package/dist/mozaic-vue.adeo.css +43 -43
  2. package/dist/mozaic-vue.adeo.umd.js +1319 -3718
  3. package/dist/mozaic-vue.common.js +1319 -3718
  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 +1321 -3720
  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 +4 -4
  11. package/src/components/autocomplete/MAutocomplete.vue +93 -151
  12. package/src/components/checkbox/MCheckboxGroup.vue +0 -8
  13. package/src/components/datatable/MDataTable.vue +162 -290
  14. package/src/components/datatable/MDataTableTop.vue +35 -0
  15. package/src/components/icon/MIcon.vue +2 -18
  16. package/src/components/index.js +1 -1
  17. package/src/components/listbox/MListBox.vue +41 -213
  18. package/src/components/listbox/index.js +1 -6
  19. package/src/components/phonenumber/MPhoneNumber.vue +2 -5
  20. package/src/components/quantityselector/MQuantitySelector.vue +2 -10
  21. package/src/components/ratingstars/MStarsInput.vue +0 -1
  22. package/src/components/stepper/MStepper.vue +27 -68
  23. package/src/components/tabs/MTab.vue +55 -65
  24. package/src/components/textinput/MTextInputField.vue +1 -0
  25. package/src/index.js +1 -1
  26. package/src/tokens/adeo/android/colors.xml +166 -209
  27. package/src/tokens/adeo/css/_variables.scss +166 -209
  28. package/src/tokens/adeo/css/root.scss +46 -89
  29. package/src/tokens/adeo/ios/StyleDictionaryColor.h +5 -48
  30. package/src/tokens/adeo/ios/StyleDictionaryColor.m +171 -214
  31. package/src/tokens/adeo/ios/StyleDictionaryColor.swift +166 -209
  32. package/src/tokens/adeo/js/tokens.js +166 -209
  33. package/src/tokens/adeo/js/tokensObject.js +310 -1285
  34. package/src/tokens/adeo/scss/_tokens.scss +174 -344
  35. package/types/index.d.ts +0 -2
  36. package/src/components/listbox/MListBoxActions.vue +0 -251
package/src/tokens/adeo/css/root.scss CHANGED
@@ -1,14 +1,4 @@
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;
12
2
  --color-success-900: #023618;
13
3
  --color-success-800: #035010;
14
4
  --color-success-700: #006902;
@@ -54,24 +44,24 @@
54
44
  --color-secondary-yellow-300: #fee07d;
55
45
  --color-secondary-yellow-200: #ffebaf;
56
46
  --color-secondary-yellow-100: #fff8e2;
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;
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;
75
65
  --color-secondary-purple-900: #1a1a4b;
76
66
  --color-secondary-purple-800: #282863;
77
67
  --color-secondary-purple-700: #393879;
@@ -92,24 +82,24 @@
92
82
  --color-secondary-blue-100: #eaedef;
93
83
  --color-grey-000: #ffffff;
94
84
  --color-grey-999: #000000;
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;
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;
113
103
  --color-primary-01-900: #002e33;
114
104
  --color-primary-01-800: #004e57;
115
105
  --color-primary-01-700: #006974;
@@ -119,8 +109,6 @@
119
109
  --color-primary-01-300: #48bac4;
120
110
  --color-primary-01-200: #91d5db;
121
111
  --color-primary-01-100: #d9f0f3;
122
- --color-tooltip-border: var(--color-grey-000);
123
- --color-tooltip-background: var(--color-grey-700);
124
112
  --color-toggle-disabled-checked-circle: var(--color-grey-000);
125
113
  --color-toggle-disabled-checked-background: var(--color-primary-01-200);
126
114
  --color-toggle-disabled-circle: var(--color-grey-300);
@@ -182,52 +170,32 @@
182
170
  --color-tag-text-light-border: var(--color-grey-500);
183
171
  --color-tag-text-light-background: var(--color-grey-000);
184
172
  --color-tabs-active-disabled: var(--color-primary-01-200);
185
- --color-tabs-hover: var(--color-primary-01-600);
173
+ --color-tabs-hover: var(--color-primary-01-800);
186
174
  --color-tabs-shadow: var(--color-grey-999);
187
175
  --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);
197
176
  --color-star-hover: var(--color-secondary-orange-300);
177
+ --color-star-full: var(--color-secondary-orange-500);
198
178
  --color-star-focus: var(--color-secondary-blue-500);
199
- --color-star-empty: var(--color-grey-000);
179
+ --color-star-empty: var(--color-grey-200);
200
180
  --color-progress-branded-indicator: var(--color-primary-01-500);
201
181
  --color-progress-percentage-half: var(--color-grey-000);
202
182
  --color-progress-percentage-default: var(--color-grey-900);
203
183
  --color-progress-indicator: var(--color-info-600);
204
184
  --color-progress-background: var(--color-grey-200);
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);
185
+ --color-notification-danger-icon: var(--color-danger-600);
221
186
  --color-notification-danger-border: var(--color-danger-500);
222
187
  --color-notification-danger-background: var(--color-danger-100);
188
+ --color-notification-warning-icon: var(--color-warning-600);
223
189
  --color-notification-warning-border: var(--color-warning-500);
224
190
  --color-notification-warning-background: var(--color-warning-100);
191
+ --color-notification-success-icon: var(--color-success-600);
225
192
  --color-notification-success-border: var(--color-success-500);
226
193
  --color-notification-success-background: var(--color-success-100);
194
+ --color-notification-information-icon: var(--color-info-600);
227
195
  --color-notification-information-border: var(--color-info-500);
228
196
  --color-notification-information-background: var(--color-info-100);
229
197
  --color-notification-font: var(--color-grey-999);
230
- --color-link-danger-hover: var(--color-secondary-red-900);
198
+ --color-link-danger-hover: var(--color-secondary-red-800);
231
199
  --color-link-danger-disabled: var(--color-grey-100);
232
200
  --color-link-danger-active: var(--color-secondary-red-700);
233
201
  --color-link-danger-visited: var(--color-secondary-red-700);
@@ -237,7 +205,7 @@
237
205
  --color-link-primary-02-active: var(--color-primary-02-700);
238
206
  --color-link-primary-02-visited: var(--color-primary-02-700);
239
207
  --color-link-primary-02-base: var(--color-primary-02-600);
240
- --color-link-primary-hover: var(--color-primary-01-900);
208
+ --color-link-primary-hover: var(--color-primary-01-800);
241
209
  --color-link-primary-disabled: var(--color-grey-100);
242
210
  --color-link-primary-active: var(--color-primary-01-700);
243
211
  --color-link-primary-visited: var(--color-primary-01-700);
@@ -269,9 +237,6 @@
269
237
  --color-input-placeholder: var(--color-grey-500);
270
238
  --color-input-border: var(--color-grey-600);
271
239
  --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);
275
240
  --color-font-danger: var(--color-danger-600);
276
241
  --color-font-warning: var(--color-warning-600);
277
242
  --color-font-success: var(--color-success-600);
@@ -282,7 +247,7 @@
282
247
  --color-font-darker: var(--color-grey-900);
283
248
  --color-font-darkest: var(--color-grey-999);
284
249
  --color-font-primary-02: var(--color-primary-02-500);
285
- --color-font-primary-01: var(--color-primary-01-500);
250
+ --color-font-primary-01: var(--color-primary-01-600);
286
251
  --color-focus-border: var(--color-secondary-blue-500);
287
252
  --color-focus-gap: var(--color-grey-000);
288
253
  --color-flag-bordered-danger-text: var(--color-secondary-red-600);
@@ -324,12 +289,6 @@
324
289
  --color-divider-default: var(--color-grey-600);
325
290
  --color-divider-light: var(--color-grey-300);
326
291
  --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);
333
292
  --color-button-bordered-danger-hover-background: var(--color-secondary-red-100);
334
293
  --color-button-bordered-danger-active-background: var(--color-secondary-red-200);
335
294
  --color-button-bordered-danger-disabled-font: var(--color-grey-600);
@@ -394,8 +353,6 @@
394
353
  --color-button-solid-focus-border: var(--color-primary-01-700);
395
354
  --color-button-solid-font: var(--color-grey-000);
396
355
  --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);
399
356
  --color-secondary-green-900: var(--color-primary-01-900);
400
357
  --color-secondary-green-800: var(--color-primary-01-800);
401
358
  --color-secondary-green-700: var(--color-primary-01-700);
package/src/tokens/adeo/ios/StyleDictionaryColor.h CHANGED
@@ -140,8 +140,6 @@ ColorSuccess600,
140
140
  ColorSuccess700,
141
141
  ColorSuccess800,
142
142
  ColorSuccess900,
143
- ColorBreadcrumbArrow,
144
- ColorBreadcrumbArrowInvert,
145
143
  ColorButtonSolidBackground,
146
144
  ColorButtonSolidFont,
147
145
  ColorButtonSolidFocusBorder,
@@ -206,12 +204,6 @@ ColorButtonBorderedDangerDisabledBackground,
206
204
  ColorButtonBorderedDangerDisabledFont,
207
205
  ColorButtonBorderedDangerActiveBackground,
208
206
  ColorButtonBorderedDangerHoverBackground,
209
- ColorCardBorderedBackground,
210
- ColorCardBorderedBorder,
211
- ColorDialogBackground,
212
- ColorDialogIcon,
213
- ColorDialogClose,
214
- ColorDialogFooterShadow,
215
207
  ColorDividerLightest,
216
208
  ColorDividerLight,
217
209
  ColorDividerDefault,
@@ -268,9 +260,6 @@ ColorFontInfo,
268
260
  ColorFontSuccess,
269
261
  ColorFontWarning,
270
262
  ColorFontDanger,
271
- ColorHeadingUnderlineDefault,
272
- ColorHeadingUnderlineLightest,
273
- ColorHeroCoverBackground,
274
263
  ColorInputText,
275
264
  ColorInputBorder,
276
265
  ColorInputPlaceholder,
@@ -316,28 +305,16 @@ ColorLinkDangerHover,
316
305
  ColorNotificationFont,
317
306
  ColorNotificationInformationBackground,
318
307
  ColorNotificationInformationBorder,
308
+ ColorNotificationInformationIcon,
319
309
  ColorNotificationSuccessBackground,
320
310
  ColorNotificationSuccessBorder,
311
+ ColorNotificationSuccessIcon,
321
312
  ColorNotificationWarningBackground,
322
313
  ColorNotificationWarningBorder,
314
+ ColorNotificationWarningIcon,
323
315
  ColorNotificationDangerBackground,
324
316
  ColorNotificationDangerBorder,
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,
317
+ ColorNotificationDangerIcon,
341
318
  ColorProgressBackground,
342
319
  ColorProgressIndicator,
343
320
  ColorProgressPercentageDefault,
@@ -347,15 +324,6 @@ ColorStarEmpty,
347
324
  ColorStarFocus,
348
325
  ColorStarFull,
349
326
  ColorStarHover,
350
- ColorStepperItemBackground,
351
- ColorStepperItemCurrentBackground,
352
- ColorStepperLinkHoverText,
353
- ColorStepperIndicatorBackground,
354
- ColorStepperIndicatorBorder,
355
- ColorStepperIndicatorCurrentBackground,
356
- ColorStepperIndicatorCurrentBorder,
357
- ColorStepperIcon,
358
- ColorStepperTitle,
359
327
  ColorTabsBackground,
360
328
  ColorTabsShadow,
361
329
  ColorTabsDefault,
@@ -422,18 +390,7 @@ ColorToggleHoverCircle,
422
390
  ColorToggleDisabledBackground,
423
391
  ColorToggleDisabledCircle,
424
392
  ColorToggleDisabledCheckedBackground,
425
- ColorToggleDisabledCheckedCircle,
426
- ColorTooltipBackground,
427
- ColorTooltipBorder,
428
- ColorSecondarySandgrey100,
429
- ColorSecondarySandgrey200,
430
- ColorSecondarySandgrey300,
431
- ColorSecondarySandgrey400,
432
- ColorSecondarySandgrey500,
433
- ColorSecondarySandgrey600,
434
- ColorSecondarySandgrey700,
435
- ColorSecondarySandgrey800,
436
- ColorSecondarySandgrey900
393
+ ColorToggleDisabledCheckedCircle
437
394
  };
438
395
 
439
396
  @interface StyleDictionaryColor : NSObject