@mozaic-ds/vue 0.16.1-beta.0 → 0.18.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 (37) hide show
  1. package/dist/mozaic-vue.adeo.css +1 -1
  2. package/dist/mozaic-vue.adeo.umd.js +10478 -6458
  3. package/dist/mozaic-vue.common.js +10478 -6458
  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 +10478 -6458
  7. package/dist/mozaic-vue.umd.js.map +1 -1
  8. package/dist/mozaic-vue.umd.min.js +1 -1
  9. package/dist/mozaic-vue.umd.min.js.map +1 -1
  10. package/package.json +5 -5
  11. package/src/components/autocomplete/MAutocomplete.vue +198 -0
  12. package/src/components/autocomplete/index.js +7 -0
  13. package/src/components/card/MCard.vue +1 -0
  14. package/src/components/checkbox/MCheckboxGroup.vue +8 -2
  15. package/src/components/container/MContainer.vue +4 -2
  16. package/src/components/datatable/MDataTable.vue +1 -1
  17. package/src/components/fileuploader/MFileResult.vue +5 -0
  18. package/src/components/fileuploader/MFileUploader.vue +1 -0
  19. package/src/components/index.js +2 -0
  20. package/src/components/layer/MLayer.vue +6 -0
  21. package/src/components/listbox/MListBox.vue +106 -0
  22. package/src/components/listbox/index.js +7 -0
  23. package/src/components/optioncard/MOptionCard.vue +2 -0
  24. package/src/components/tabs/MTab.vue +35 -9
  25. package/src/components/tags/MTag.vue +21 -0
  26. package/src/components/textinput/MTextInput.vue +5 -0
  27. package/src/index.js +2 -0
  28. package/src/tokens/adeo/android/colors.xml +55 -44
  29. package/src/tokens/adeo/css/_variables.scss +55 -44
  30. package/src/tokens/adeo/css/root.scss +55 -44
  31. package/src/tokens/adeo/ios/StyleDictionaryColor.h +11 -0
  32. package/src/tokens/adeo/ios/StyleDictionaryColor.m +49 -38
  33. package/src/tokens/adeo/ios/StyleDictionaryColor.swift +55 -44
  34. package/src/tokens/adeo/js/tokens.js +55 -44
  35. package/src/tokens/adeo/js/tokensObject.js +379 -111
  36. package/src/tokens/adeo/scss/_tokens.scss +74 -48
  37. package/types/index.d.ts +4 -0
package/src/tokens/adeo/scss/_tokens.scss CHANGED
@@ -136,13 +136,13 @@ $color-success-600: #188803 !default;
136
136
  $color-success-700: #006902 !default;
137
137
  $color-success-800: #035010 !default;
138
138
  $color-success-900: #023618 !default;
139
- $color-button-solid-background: #00919f !default;
139
+ $color-button-solid-background: #007f8c !default;
140
140
  $color-button-solid-font: #ffffff !default;
141
141
  $color-button-solid-focus-border: #006974 !default;
142
142
  $color-button-solid-disabled-background: #dddcd5 !default;
143
143
  $color-button-solid-disabled-font: #71706b !default;
144
144
  $color-button-solid-active-background: #006974 !default;
145
- $color-button-solid-hover-background: #007f8c !default;
145
+ $color-button-solid-hover-background: #006974 !default;
146
146
  $color-button-solid-hover-font: #ffffff !default;
147
147
  $color-button-solid-primary-02-background: #007574 !default;
148
148
  $color-button-solid-primary-02-font: #ffffff !default;
@@ -160,17 +160,17 @@ $color-button-solid-neutral-disabled-font: #71706b !default;
160
160
  $color-button-solid-neutral-active-background: #3a3936 !default;
161
161
  $color-button-solid-neutral-hover-background: #1e1e1c !default;
162
162
  $color-button-solid-neutral-hover-font: #ffffff !default;
163
- $color-button-solid-danger-background: #ea302d !default;
163
+ $color-button-solid-danger-background: #b42a27 !default;
164
164
  $color-button-solid-danger-font: #ffffff !default;
165
165
  $color-button-solid-danger-focus-border: #8c0003 !default;
166
166
  $color-button-solid-danger-disabled-background: #dddcd5 !default;
167
167
  $color-button-solid-danger-disabled-font: #71706b !default;
168
168
  $color-button-solid-danger-active-background: #8c0003 !default;
169
- $color-button-solid-danger-hover-background: #c61112 !default;
169
+ $color-button-solid-danger-hover-background: #8c0003 !default;
170
170
  $color-button-solid-danger-hover-font: #ffffff !default;
171
171
  $color-button-bordered-background: #ffffff !default;
172
- $color-button-bordered-border: #00919f !default;
173
- $color-button-bordered-font: #00919f !default;
172
+ $color-button-bordered-border: #007f8c !default;
173
+ $color-button-bordered-font: #007f8c !default;
174
174
  $color-button-bordered-focus-border: #006974 !default;
175
175
  $color-button-bordered-disabled-background: #dddcd5 !default;
176
176
  $color-button-bordered-disabled-font: #71706b !default;
@@ -193,8 +193,8 @@ $color-button-bordered-neutral-disabled-font: #71706b !default;
193
193
  $color-button-bordered-neutral-active-background: #dddcd5 !default;
194
194
  $color-button-bordered-neutral-hover-background: #eeedea !default;
195
195
  $color-button-bordered-danger-background: #ffffff !default;
196
- $color-button-bordered-danger-border: #df382b !default;
197
- $color-button-bordered-danger-font: #df382b !default;
196
+ $color-button-bordered-danger-border: #b42a27 !default;
197
+ $color-button-bordered-danger-font: #b42a27 !default;
198
198
  $color-button-bordered-danger-focus-border: #8b2226 !default;
199
199
  $color-button-bordered-danger-disabled-background: #dddcd5 !default;
200
200
  $color-button-bordered-danger-disabled-font: #71706b !default;
@@ -213,11 +213,11 @@ $color-fileuploader-files-list: #eeedea !default;
213
213
  $color-fileuploader-files-delete: #dddcd5 !default;
214
214
  $color-fileuploader-valid: #00919f !default;
215
215
  $color-fileuploader-alert: #c61112 !default;
216
- $color-flag-solid-background: #00919f !default;
217
- $color-flag-solid-border: #00919f !default;
216
+ $color-flag-solid-background: #007f8c !default;
217
+ $color-flag-solid-border: #007f8c !default;
218
218
  $color-flag-solid-text: #ffffff !default;
219
- $color-flag-solid-primary-02-background: #035f64 !default;
220
- $color-flag-solid-primary-02-border: #035f64 !default;
219
+ $color-flag-solid-primary-02-background: #4b4a8c !default;
220
+ $color-flag-solid-primary-02-border: #4b4a8c !default;
221
221
  $color-flag-solid-primary-02-text: #ffffff !default;
222
222
  $color-flag-solid-dark-background: #000000 !default;
223
223
  $color-flag-solid-dark-border: #000000 !default;
@@ -225,15 +225,15 @@ $color-flag-solid-dark-text: #ffffff !default;
225
225
  $color-flag-solid-light-background: #ffffff !default;
226
226
  $color-flag-solid-light-border: #ffffff !default;
227
227
  $color-flag-solid-light-text: #000000 !default;
228
- $color-flag-solid-danger-background: #df382b !default;
229
- $color-flag-solid-danger-border: #df382b !default;
228
+ $color-flag-solid-danger-background: #b42a27 !default;
229
+ $color-flag-solid-danger-border: #b42a27 !default;
230
230
  $color-flag-solid-danger-text: #ffffff !default;
231
231
  $color-flag-bordered-background: #ffffff !default;
232
- $color-flag-bordered-border: #00919f !default;
233
- $color-flag-bordered-text: #00919f !default;
232
+ $color-flag-bordered-border: #007f8c !default;
233
+ $color-flag-bordered-text: #007f8c !default;
234
234
  $color-flag-bordered-primary-02-background: #ffffff !default;
235
- $color-flag-bordered-primary-02-border: #035f64 !default;
236
- $color-flag-bordered-primary-02-text: #035f64 !default;
235
+ $color-flag-bordered-primary-02-border: #4b4a8c !default;
236
+ $color-flag-bordered-primary-02-text: #4b4a8c !default;
237
237
  $color-flag-bordered-dark-background: #ffffff !default;
238
238
  $color-flag-bordered-dark-border: #000000 !default;
239
239
  $color-flag-bordered-dark-text: #000000 !default;
@@ -241,8 +241,8 @@ $color-flag-bordered-light-background: #000000 !default;
241
241
  $color-flag-bordered-light-border: #ffffff !default;
242
242
  $color-flag-bordered-light-text: #ffffff !default;
243
243
  $color-flag-bordered-danger-background: #ffffff !default;
244
- $color-flag-bordered-danger-border: #df382b !default;
245
- $color-flag-bordered-danger-text: #df382b !default;
244
+ $color-flag-bordered-danger-border: #b42a27 !default;
245
+ $color-flag-bordered-danger-text: #b42a27 !default;
246
246
  $color-focus-gap: #ffffff !default;
247
247
  $color-focus-border: #758992 !default;
248
248
  $color-font-primary-01: #00919f !default;
@@ -283,7 +283,7 @@ $color-link-light-visited: #dddcd5 !default;
283
283
  $color-link-light-active: #dddcd5 !default;
284
284
  $color-link-light-disabled: #eeedea !default;
285
285
  $color-link-light-hover: #a7a6a0 !default;
286
- $color-link-primary-base: #00919f !default;
286
+ $color-link-primary-base: #007f8c !default;
287
287
  $color-link-primary-visited: #006974 !default;
288
288
  $color-link-primary-active: #006974 !default;
289
289
  $color-link-primary-disabled: #eeedea !default;
@@ -324,45 +324,56 @@ $color-tabs-disabled: #71706b !default;
324
324
  $color-tabs-active: #00919f !default;
325
325
  $color-tabs-active-disabled: #91d5db !default;
326
326
  $color-tag-text-light-background: #ffffff !default;
327
- $color-tag-text-light-border: #555550 !default;
328
- $color-tag-text-light-text: #555550 !default;
329
- $color-tag-text-dark-background: #000000 !default;
327
+ $color-tag-text-light-border: #8c8b85 !default;
328
+ $color-tag-text-light-text: #1e1e1c !default;
329
+ $color-tag-text-dark-background: #1e1e1c !default;
330
330
  $color-tag-text-dark-border: #ffffff !default;
331
331
  $color-tag-text-dark-text: #ffffff !default;
332
332
  $color-tag-link-light-background: #ffffff !default;
333
- $color-tag-link-light-border: #555550 !default;
334
- $color-tag-link-light-text: #555550 !default;
333
+ $color-tag-link-light-border: #8c8b85 !default;
334
+ $color-tag-link-light-text: #1e1e1c !default;
335
335
  $color-tag-link-light-hover-background: #eeedea !default;
336
336
  $color-tag-link-light-active-background: #dddcd5 !default;
337
- $color-tag-link-dark-background: #000000 !default;
337
+ $color-tag-link-dark-background: #1e1e1c !default;
338
338
  $color-tag-link-dark-border: #ffffff !default;
339
339
  $color-tag-link-dark-text: #ffffff !default;
340
340
  $color-tag-link-dark-hover-background: #3a3936 !default;
341
341
  $color-tag-link-dark-active-background: #555550 !default;
342
- $color-tag-selectable-light-background: #dddcd5 !default;
342
+ $color-tag-selectable-light-background: #ffffff !default;
343
+ $color-tag-selectable-light-border: #8c8b85 !default;
343
344
  $color-tag-selectable-light-text: #1e1e1c !default;
344
345
  $color-tag-selectable-light-hover-background: #48bac4 !default;
345
- $color-tag-selectable-light-active-background: #007f8c !default;
346
+ $color-tag-selectable-light-active-background: #004e57 !default;
347
+ $color-tag-selectable-light-active-border: #004e57 !default;
348
+ $color-tag-selectable-light-active-text: #ffffff !default;
346
349
  $color-tag-selectable-light-disabled-background: #eeedea !default;
347
350
  $color-tag-selectable-light-disabled-text: #8c8b85 !default;
348
- $color-tag-selectable-light-selected-background: #00919f !default;
349
- $color-tag-selectable-dark-background: #3a3936 !default;
351
+ $color-tag-selectable-light-selected-background: #007f8c !default;
352
+ $color-tag-selectable-light-selected-text: #ffffff !default;
353
+ $color-tag-selectable-light-selected-hover-background: #006974 !default;
354
+ $color-tag-selectable-dark-background: #1e1e1c !default;
355
+ $color-tag-selectable-dark-border: #ffffff !default;
350
356
  $color-tag-selectable-dark-text: #ffffff !default;
351
- $color-tag-selectable-dark-hover-background: #00919f !default;
352
- $color-tag-selectable-dark-active-background: #004e57 !default;
353
- $color-tag-selectable-dark-selected-background: #006974 !default;
357
+ $color-tag-selectable-dark-hover-background: #006974 !default;
358
+ $color-tag-selectable-dark-active-background: #91d5db !default;
359
+ $color-tag-selectable-dark-active-border: #91d5db !default;
360
+ $color-tag-selectable-dark-active-text: #1e1e1c !default;
361
+ $color-tag-selectable-dark-selected-background: #009eac !default;
362
+ $color-tag-selectable-dark-selected-border: #009eac !default;
363
+ $color-tag-selectable-dark-selected-text: #1e1e1c !default;
364
+ $color-tag-selectable-dark-selected-hover-background: #48bac4 !default;
354
365
  $color-tag-selectable-dark-disabled-background: #555550 !default;
355
366
  $color-tag-selectable-dark-disabled-text: #8c8b85 !default;
356
- $color-tag-removable-light-background: #dddcd5 !default;
357
- $color-tag-removable-light-text: #1e1e1c !default;
358
- $color-tag-removable-light-icon: #3a3936 !default;
359
- $color-tag-removable-light-hover-background: #c2c1ba !default;
360
- $color-tag-removable-light-active-background: #a7a6a0 !default;
361
- $color-tag-removable-dark-background: #3a3936 !default;
362
- $color-tag-removable-dark-text: #ffffff !default;
363
- $color-tag-removable-dark-icon: #dddcd5 !default;
364
- $color-tag-removable-dark-hover-background: #555550 !default;
365
- $color-tag-removable-dark-active-background: #71706b !default;
367
+ $color-tag-removable-light-background: #3a3936 !default;
368
+ $color-tag-removable-light-text: #ffffff !default;
369
+ $color-tag-removable-light-icon: #dddcd5 !default;
370
+ $color-tag-removable-light-hover-background: #555550 !default;
371
+ $color-tag-removable-light-active-background: #71706b !default;
372
+ $color-tag-removable-dark-background: #dddcd5 !default;
373
+ $color-tag-removable-dark-text: #1e1e1c !default;
374
+ $color-tag-removable-dark-icon: #1e1e1c !default;
375
+ $color-tag-removable-dark-hover-background: #c2c1ba !default;
376
+ $color-tag-removable-dark-active-background: #a7a6a0 !default;
366
377
  $color-toggle-off-background: #71706b !default;
367
378
  $color-toggle-off-circle: #ffffff !default;
368
379
  $color-toggle-on-background: #00919f !default;
@@ -1042,32 +1053,47 @@ $tokens: (
1042
1053
  'selectable': (
1043
1054
  'light': (
1044
1055
  'background': $color-tag-selectable-light-background,
1056
+ 'border': $color-tag-selectable-light-border,
1045
1057
  'text': $color-tag-selectable-light-text,
1046
1058
  'hover': (
1047
1059
  'background': $color-tag-selectable-light-hover-background
1048
1060
  ),
1049
1061
  'active': (
1050
- 'background': $color-tag-selectable-light-active-background
1062
+ 'background': $color-tag-selectable-light-active-background,
1063
+ 'border': $color-tag-selectable-light-active-border,
1064
+ 'text': $color-tag-selectable-light-active-text
1051
1065
  ),
1052
1066
  'disabled': (
1053
1067
  'background': $color-tag-selectable-light-disabled-background,
1054
1068
  'text': $color-tag-selectable-light-disabled-text
1055
1069
  ),
1056
1070
  'selected': (
1057
- 'background': $color-tag-selectable-light-selected-background
1071
+ 'background': $color-tag-selectable-light-selected-background,
1072
+ 'text': $color-tag-selectable-light-selected-text,
1073
+ 'hover': (
1074
+ 'background': $color-tag-selectable-light-selected-hover-background
1075
+ )
1058
1076
  )
1059
1077
  ),
1060
1078
  'dark': (
1061
1079
  'background': $color-tag-selectable-dark-background,
1080
+ 'border': $color-tag-selectable-dark-border,
1062
1081
  'text': $color-tag-selectable-dark-text,
1063
1082
  'hover': (
1064
1083
  'background': $color-tag-selectable-dark-hover-background
1065
1084
  ),
1066
1085
  'active': (
1067
- 'background': $color-tag-selectable-dark-active-background
1086
+ 'background': $color-tag-selectable-dark-active-background,
1087
+ 'border': $color-tag-selectable-dark-active-border,
1088
+ 'text': $color-tag-selectable-dark-active-text
1068
1089
  ),
1069
1090
  'selected': (
1070
- 'background': $color-tag-selectable-dark-selected-background
1091
+ 'background': $color-tag-selectable-dark-selected-background,
1092
+ 'border': $color-tag-selectable-dark-selected-border,
1093
+ 'text': $color-tag-selectable-dark-selected-text,
1094
+ 'hover': (
1095
+ 'background': $color-tag-selectable-dark-selected-hover-background
1096
+ )
1071
1097
  ),
1072
1098
  'disabled': (
1073
1099
  'background': $color-tag-selectable-dark-disabled-background,
package/types/index.d.ts CHANGED
@@ -9,6 +9,7 @@ declare module '@mozaic-ds/vue' {
9
9
  const MHeading: VueConstructor;
10
10
  // Components
11
11
  const MAccordion: VueConstructor;
12
+ const MAutocomplete: VueConstructor;
12
13
  const MBadge: VueConstructor;
13
14
  const MBreadcrumb: VueConstructor;
14
15
  const MButton: VueConstructor;
@@ -22,6 +23,7 @@ declare module '@mozaic-ds/vue' {
22
23
  const MIcon: VueConstructor;
23
24
  const MLayer: VueConstructor;
24
25
  const MLink: VueConstructor;
26
+ const MListBox: VueConstructor;
25
27
  const MLoader: VueConstructor;
26
28
  const MModal: VueConstructor;
27
29
  const MNotification: VueConstructor;
@@ -54,6 +56,7 @@ declare module '@mozaic-ds/vue' {
54
56
  MHeading,
55
57
  // Components
56
58
  MAccordion,
59
+ MAutocomplete,
57
60
  MBadge,
58
61
  MBreadcrumb,
59
62
  MButton,
@@ -67,6 +70,7 @@ declare module '@mozaic-ds/vue' {
67
70
  MIcon,
68
71
  MLayer,
69
72
  MLink,
73
+ MListBox,
70
74
  MLoader,
71
75
  MModal,
72
76
  MNotification,