@telefonica/mistica 16.52.0 → 16.54.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 (296) hide show
  1. package/README.md +2 -1
  2. package/css/blau.css +69 -0
  3. package/css/esimflag.css +70 -1
  4. package/css/mistica.css +1 -1
  5. package/css/movistar-new.css +82 -0
  6. package/css/movistar.css +71 -2
  7. package/css/o2-new.css +71 -0
  8. package/css/o2.css +70 -0
  9. package/css/telefonica.css +94 -0
  10. package/css/tu.css +71 -1
  11. package/css/vivo-new.css +86 -9
  12. package/css/vivo.css +70 -0
  13. package/dist/accordion.css-mistica.js +10 -10
  14. package/dist/align.css-mistica.js +1 -1
  15. package/dist/autocomplete.css-mistica.js +5 -5
  16. package/dist/avatar.css-mistica.js +1 -1
  17. package/dist/badge.css-mistica.js +1 -1
  18. package/dist/box.css-mistica.js +13 -13
  19. package/dist/box.d.ts +1 -0
  20. package/dist/box.js +17 -15
  21. package/dist/boxed.css-mistica.js +24 -24
  22. package/dist/button-group.css-mistica.js +5 -5
  23. package/dist/button-layout.css-mistica.js +14 -14
  24. package/dist/button.css-mistica.js +54 -48
  25. package/dist/button.css.d.ts +5 -1
  26. package/dist/button.js +44 -44
  27. package/dist/callout.css-mistica.js +13 -13
  28. package/dist/card-internal.css-mistica.js +29 -26
  29. package/dist/card-internal.css.d.ts +2 -1
  30. package/dist/card-internal.d.ts +1 -1
  31. package/dist/card-internal.js +151 -149
  32. package/dist/carousel.css-mistica.js +32 -32
  33. package/dist/checkbox.css-mistica.js +19 -19
  34. package/dist/checkbox.js +1 -1
  35. package/dist/chip.css-mistica.js +20 -20
  36. package/dist/circle.css-mistica.js +2 -2
  37. package/dist/community/advanced-data-card.css-mistica.js +19 -19
  38. package/dist/community/blocks.css-mistica.js +3 -3
  39. package/dist/community/example-component.css-mistica.js +2 -2
  40. package/dist/counter.css-mistica.js +3 -3
  41. package/dist/cover-hero.css-mistica.js +10 -10
  42. package/dist/credit-card-number-field.css-mistica.js +3 -3
  43. package/dist/credit-card-number-field.js +16 -16
  44. package/dist/date-field.css-mistica.js +1 -1
  45. package/dist/date-field.js +1 -1
  46. package/dist/date-time-field.js +6 -6
  47. package/dist/date-time-picker.css-mistica.js +1 -1
  48. package/dist/dialog.css-mistica.js +8 -8
  49. package/dist/divider.css-mistica.js +5 -5
  50. package/dist/double-field.css-mistica.js +4 -4
  51. package/dist/drawer.css-mistica.js +18 -9
  52. package/dist/drawer.css.d.ts +3 -0
  53. package/dist/drawer.js +90 -106
  54. package/dist/empty-state-card.css-mistica.js +2 -2
  55. package/dist/empty-state.css-mistica.js +5 -5
  56. package/dist/empty-state.css.d.ts +1 -0
  57. package/dist/fade-in.css-mistica.js +1 -1
  58. package/dist/feedback.css-mistica.js +5 -2
  59. package/dist/feedback.css.d.ts +1 -0
  60. package/dist/feedback.js +34 -41
  61. package/dist/file-upload.css-mistica.js +40 -0
  62. package/dist/file-upload.css.d.ts +7 -0
  63. package/dist/file-upload.d.ts +59 -0
  64. package/dist/file-upload.js +483 -0
  65. package/dist/fixed-footer-layout.css-mistica.js +10 -10
  66. package/dist/form.css-mistica.js +2 -2
  67. package/dist/grid-layout.css-mistica.js +3 -3
  68. package/dist/grid.css-mistica.js +120 -120
  69. package/dist/header.css-mistica.js +1 -1
  70. package/dist/hero.css-mistica.js +9 -9
  71. package/dist/hero.js +51 -51
  72. package/dist/horizontal-scroll.css-mistica.js +2 -2
  73. package/dist/icon-button.css-mistica.js +61 -61
  74. package/dist/icons/icon-amex.js +45 -37
  75. package/dist/icons/icon-chevron.css-mistica.js +2 -2
  76. package/dist/icons/icon-error.css-mistica.js +1 -1
  77. package/dist/icons/icon-mastercard.js +41 -36
  78. package/dist/icons/icon-visa.js +37 -27
  79. package/dist/image.css-mistica.js +11 -11
  80. package/dist/index.d.ts +1 -0
  81. package/dist/index.js +7 -0
  82. package/dist/inline.css-mistica.js +9 -9
  83. package/dist/list.css-mistica.js +21 -21
  84. package/dist/list.d.ts +12 -2
  85. package/dist/list.js +117 -115
  86. package/dist/loading-bar.css-mistica.js +3 -3
  87. package/dist/loading-screen.css-mistica.js +7 -7
  88. package/dist/logo.css-mistica.js +5 -5
  89. package/dist/media-queries.css-mistica.js +13 -6
  90. package/dist/media-queries.css.d.ts +3 -0
  91. package/dist/menu.css-mistica.js +15 -15
  92. package/dist/month-field.js +1 -1
  93. package/dist/mosaic.css-mistica.js +1 -1
  94. package/dist/navigation-bar.css-mistica.js +42 -42
  95. package/dist/navigation-bar.d.ts +3 -1
  96. package/dist/navigation-bar.js +408 -383
  97. package/dist/navigation-breadcrumbs.css-mistica.js +3 -3
  98. package/dist/package-version.js +1 -1
  99. package/dist/pin-field.css-mistica.js +2 -2
  100. package/dist/popover.css-mistica.js +1 -1
  101. package/dist/progress-bar.css-mistica.js +7 -7
  102. package/dist/radio-button.css-mistica.js +25 -25
  103. package/dist/rating.css-mistica.js +2 -2
  104. package/dist/responsive-layout.css-mistica.js +7 -7
  105. package/dist/responsive-layout.css.d.ts +2 -1
  106. package/dist/screen-reader-only.css-mistica.js +2 -2
  107. package/dist/screen-size-context-provider.js +25 -19
  108. package/dist/screen-size-context.d.ts +2 -0
  109. package/dist/screen-size-context.js +2 -1
  110. package/dist/search-field.js +9 -9
  111. package/dist/select.css-mistica.js +23 -23
  112. package/dist/sheet-action-row.css-mistica.js +1 -1
  113. package/dist/sheet-common.css-mistica.js +10 -10
  114. package/dist/sheet-info.css-mistica.js +2 -2
  115. package/dist/skeletons.css-mistica.js +9 -9
  116. package/dist/skins/blau.js +132 -0
  117. package/dist/skins/defaults.d.ts +2 -1
  118. package/dist/skins/defaults.js +118 -0
  119. package/dist/skins/esimflag.js +132 -0
  120. package/dist/skins/movistar-new.js +134 -2
  121. package/dist/skins/movistar.js +132 -0
  122. package/dist/skins/o2-new.js +132 -0
  123. package/dist/skins/o2.js +132 -0
  124. package/dist/skins/skin-contract.css-mistica.js +702 -642
  125. package/dist/skins/skin-contract.css.d.ts +60 -0
  126. package/dist/skins/telefonica.js +132 -0
  127. package/dist/skins/tu.js +132 -0
  128. package/dist/skins/types/colors.d.ts +8 -0
  129. package/dist/skins/types/index.d.ts +30 -16
  130. package/dist/skins/vivo-new.js +132 -0
  131. package/dist/skins/vivo.js +132 -0
  132. package/dist/skip-link.css-mistica.js +2 -2
  133. package/dist/slider.css-mistica.js +21 -21
  134. package/dist/snackbar.css-mistica.js +15 -15
  135. package/dist/spinner.css-mistica.js +1 -1
  136. package/dist/sprinkles.css.d.ts +1 -1
  137. package/dist/square.css-mistica.js +2 -2
  138. package/dist/stack.css-mistica.js +5 -5
  139. package/dist/stack.d.ts +2 -1
  140. package/dist/stack.js +17 -16
  141. package/dist/stacking-group.css-mistica.js +1 -1
  142. package/dist/stepper.css-mistica.js +12 -12
  143. package/dist/switch-component.css-mistica.js +46 -46
  144. package/dist/table.css-mistica.js +9 -9
  145. package/dist/tabs.css-mistica.js +23 -23
  146. package/dist/tag.css-mistica.js +4 -4
  147. package/dist/text-field-base.css-mistica.js +25 -28
  148. package/dist/text-field-base.css.d.ts +2 -2
  149. package/dist/text-field-base.js +102 -101
  150. package/dist/text-field-components.css-mistica.js +10 -10
  151. package/dist/text-link.css-mistica.js +8 -8
  152. package/dist/text-tokens.d.ts +4 -0
  153. package/dist/text-tokens.js +62 -46
  154. package/dist/text.css-mistica.js +6 -6
  155. package/dist/theme-context-provider.js +155 -116
  156. package/dist/theme-context.css-mistica.js +1 -1
  157. package/dist/theme.d.ts +2 -1
  158. package/dist/time-field.js +4 -4
  159. package/dist/timeline.css-mistica.js +13 -13
  160. package/dist/timer.css-mistica.js +6 -6
  161. package/dist/tooltip.css-mistica.js +5 -5
  162. package/dist/touchable.css-mistica.js +5 -5
  163. package/dist/utils/aspect-ratio-support.css-mistica.js +2 -2
  164. package/dist/video.css-mistica.js +1 -1
  165. package/dist/vivinho-loading-animation/vivinho-loading-animation.css-mistica.js +1 -1
  166. package/dist-es/accordion.css-mistica.js +7 -7
  167. package/dist-es/align.css-mistica.js +1 -1
  168. package/dist-es/autocomplete.css-mistica.js +2 -2
  169. package/dist-es/avatar.css-mistica.js +1 -1
  170. package/dist-es/badge.css-mistica.js +1 -1
  171. package/dist-es/box.css-mistica.js +13 -13
  172. package/dist-es/box.js +25 -23
  173. package/dist-es/boxed.css-mistica.js +23 -23
  174. package/dist-es/button-group.css-mistica.js +2 -2
  175. package/dist-es/button-layout.css-mistica.js +14 -14
  176. package/dist-es/button.css-mistica.js +39 -36
  177. package/dist-es/button.js +90 -90
  178. package/dist-es/callout.css-mistica.js +12 -12
  179. package/dist-es/card-internal.css-mistica.js +17 -17
  180. package/dist-es/card-internal.js +204 -202
  181. package/dist-es/carousel.css-mistica.js +9 -9
  182. package/dist-es/checkbox.css-mistica.js +13 -13
  183. package/dist-es/checkbox.js +1 -1
  184. package/dist-es/chip.css-mistica.js +16 -16
  185. package/dist-es/circle.css-mistica.js +2 -2
  186. package/dist-es/community/advanced-data-card.css-mistica.js +7 -7
  187. package/dist-es/community/blocks.css-mistica.js +2 -2
  188. package/dist-es/community/example-component.css-mistica.js +2 -2
  189. package/dist-es/counter.css-mistica.js +2 -2
  190. package/dist-es/cover-hero.css-mistica.js +3 -3
  191. package/dist-es/credit-card-number-field.css-mistica.js +3 -3
  192. package/dist-es/credit-card-number-field.js +19 -19
  193. package/dist-es/date-field.css-mistica.js +1 -1
  194. package/dist-es/date-field.js +1 -1
  195. package/dist-es/date-time-field.js +6 -6
  196. package/dist-es/date-time-picker.css-mistica.js +1 -1
  197. package/dist-es/dialog.css-mistica.js +5 -5
  198. package/dist-es/divider.css-mistica.js +5 -5
  199. package/dist-es/double-field.css-mistica.js +4 -4
  200. package/dist-es/drawer.css-mistica.js +2 -2
  201. package/dist-es/drawer.js +121 -137
  202. package/dist-es/empty-state-card.css-mistica.js +2 -2
  203. package/dist-es/empty-state.css-mistica.js +5 -5
  204. package/dist-es/fade-in.css-mistica.js +1 -1
  205. package/dist-es/feedback.css-mistica.js +2 -2
  206. package/dist-es/feedback.js +51 -58
  207. package/dist-es/file-upload.css-mistica.js +8 -0
  208. package/dist-es/file-upload.js +420 -0
  209. package/dist-es/fixed-footer-layout.css-mistica.js +4 -4
  210. package/dist-es/form.css-mistica.js +2 -2
  211. package/dist-es/grid-layout.css-mistica.js +3 -3
  212. package/dist-es/grid.css-mistica.js +120 -120
  213. package/dist-es/header.css-mistica.js +1 -1
  214. package/dist-es/hero.css-mistica.js +3 -3
  215. package/dist-es/hero.js +73 -73
  216. package/dist-es/horizontal-scroll.css-mistica.js +2 -2
  217. package/dist-es/icon-button.css-mistica.js +55 -55
  218. package/dist-es/icons/icon-amex.js +46 -38
  219. package/dist-es/icons/icon-chevron.css-mistica.js +2 -2
  220. package/dist-es/icons/icon-error.css-mistica.js +1 -1
  221. package/dist-es/icons/icon-mastercard.js +42 -37
  222. package/dist-es/icons/icon-visa.js +37 -27
  223. package/dist-es/image.css-mistica.js +4 -4
  224. package/dist-es/index.js +2214 -2213
  225. package/dist-es/inline.css-mistica.js +9 -9
  226. package/dist-es/list.css-mistica.js +2 -2
  227. package/dist-es/list.js +158 -156
  228. package/dist-es/loading-bar.css-mistica.js +2 -2
  229. package/dist-es/loading-screen.css-mistica.js +5 -5
  230. package/dist-es/logo.css-mistica.js +5 -5
  231. package/dist-es/media-queries.css-mistica.js +3 -2
  232. package/dist-es/menu.css-mistica.js +14 -14
  233. package/dist-es/month-field.js +1 -1
  234. package/dist-es/mosaic.css-mistica.js +1 -1
  235. package/dist-es/navigation-bar.css-mistica.js +20 -20
  236. package/dist-es/navigation-bar.js +524 -499
  237. package/dist-es/navigation-breadcrumbs.css-mistica.js +2 -2
  238. package/dist-es/package-version.js +1 -1
  239. package/dist-es/pin-field.css-mistica.js +2 -2
  240. package/dist-es/popover.css-mistica.js +1 -1
  241. package/dist-es/progress-bar.css-mistica.js +7 -7
  242. package/dist-es/radio-button.css-mistica.js +21 -21
  243. package/dist-es/rating.css-mistica.js +2 -2
  244. package/dist-es/responsive-layout.css-mistica.js +7 -7
  245. package/dist-es/screen-reader-only.css-mistica.js +2 -2
  246. package/dist-es/screen-size-context-provider.js +35 -29
  247. package/dist-es/screen-size-context.js +2 -1
  248. package/dist-es/search-field.js +13 -13
  249. package/dist-es/select.css-mistica.js +18 -18
  250. package/dist-es/sheet-action-row.css-mistica.js +1 -1
  251. package/dist-es/sheet-common.css-mistica.js +2 -2
  252. package/dist-es/sheet-info.css-mistica.js +2 -2
  253. package/dist-es/skeletons.css-mistica.js +7 -7
  254. package/dist-es/skins/blau.js +132 -0
  255. package/dist-es/skins/defaults.js +116 -1
  256. package/dist-es/skins/esimflag.js +132 -0
  257. package/dist-es/skins/movistar-new.js +134 -2
  258. package/dist-es/skins/movistar.js +132 -0
  259. package/dist-es/skins/o2-new.js +132 -0
  260. package/dist-es/skins/o2.js +134 -2
  261. package/dist-es/skins/skin-contract.css-mistica.js +702 -642
  262. package/dist-es/skins/telefonica.js +132 -0
  263. package/dist-es/skins/tu.js +132 -0
  264. package/dist-es/skins/vivo-new.js +132 -0
  265. package/dist-es/skins/vivo.js +132 -0
  266. package/dist-es/skip-link.css-mistica.js +2 -2
  267. package/dist-es/slider.css-mistica.js +19 -19
  268. package/dist-es/snackbar.css-mistica.js +5 -5
  269. package/dist-es/spinner.css-mistica.js +1 -1
  270. package/dist-es/square.css-mistica.js +2 -2
  271. package/dist-es/stack.css-mistica.js +5 -5
  272. package/dist-es/stack.js +21 -20
  273. package/dist-es/stacking-group.css-mistica.js +1 -1
  274. package/dist-es/stepper.css-mistica.js +3 -3
  275. package/dist-es/style.css +1 -1
  276. package/dist-es/switch-component.css-mistica.js +38 -38
  277. package/dist-es/table.css-mistica.js +9 -9
  278. package/dist-es/tabs.css-mistica.js +19 -19
  279. package/dist-es/tag.css-mistica.js +2 -2
  280. package/dist-es/text-field-base.css-mistica.js +16 -16
  281. package/dist-es/text-field-base.js +132 -131
  282. package/dist-es/text-field-components.css-mistica.js +4 -4
  283. package/dist-es/text-link.css-mistica.js +8 -8
  284. package/dist-es/text-tokens.js +34 -24
  285. package/dist-es/text.css-mistica.js +6 -6
  286. package/dist-es/theme-context-provider.js +198 -159
  287. package/dist-es/theme-context.css-mistica.js +1 -1
  288. package/dist-es/time-field.js +4 -4
  289. package/dist-es/timeline.css-mistica.js +10 -10
  290. package/dist-es/timer.css-mistica.js +6 -6
  291. package/dist-es/tooltip.css-mistica.js +2 -2
  292. package/dist-es/touchable.css-mistica.js +2 -2
  293. package/dist-es/utils/aspect-ratio-support.css-mistica.js +2 -2
  294. package/dist-es/video.css-mistica.js +1 -1
  295. package/dist-es/vivinho-loading-animation/vivinho-loading-animation.css-mistica.js +1 -1
  296. package/package.json +2 -2
package/css/telefonica.css CHANGED
@@ -47,6 +47,7 @@
47
47
  --mistica-telefonica-raw-white: 255, 255, 255;
48
48
  --mistica-telefonica-raw-grey6: 88, 97, 122;
49
49
  --mistica-telefonica-raw-black: 0, 0, 0;
50
+ --mistica-telefonica-raw-telefonicaBlue80: 0, 46, 115;
50
51
  --mistica-telefonica-raw-darkModeGrey: 0, 24, 47;
51
52
  --mistica-telefonica-raw-coral60: 210, 42, 30;
52
53
  --mistica-telefonica-raw-telefonicaBlue30: 128, 179, 255;
@@ -77,6 +78,20 @@
77
78
  --mistica-color-backgroundAlternative: var(--mistica-telefonica-grey1);
78
79
  --mistica-color-backgroundBrandTop: var(--mistica-telefonica-telefonicaBlue);
79
80
  --mistica-color-backgroundBrandBottom: var(--mistica-telefonica-telefonicaBlue);
81
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-telefonica-raw-telefonicaBlue70), 0.05);
82
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-telefonica-raw-telefonicaBlue70), 0.08);
83
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-telefonica-raw-telefonicaBlue80), 0.2);
84
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(
85
+ var(--mistica-telefonica-raw-telefonicaBlue80),
86
+ 0.4
87
+ );
88
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-telefonica-raw-white), 0.1);
89
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-telefonica-raw-white), 0.17);
90
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-telefonica-raw-telefonicaBlue80), 0.2);
91
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(
92
+ var(--mistica-telefonica-raw-telefonicaBlue80),
93
+ 0.4
94
+ );
80
95
  --mistica-color-skeletonWave: var(--mistica-telefonica-grey2);
81
96
  --mistica-color-borderLow: var(--mistica-telefonica-grey1);
82
97
  --mistica-color-border: var(--mistica-telefonica-grey2);
@@ -378,6 +393,9 @@
378
393
  --mistica-font-size-cardTitle: 1.25rem;
379
394
  --mistica-line-height-cardTitle: 1.5rem;
380
395
  --mistica-font-weight-cardTitle: 400;
396
+ --mistica-font-size-drawerTitle: 1.25rem;
397
+ --mistica-line-height-drawerTitle: 1.5rem;
398
+ --mistica-font-weight-drawerTitle: 400;
381
399
  --mistica-font-weight-rowTitle: 400;
382
400
  --mistica-font-weight-button: 500;
383
401
  --mistica-font-size-tabsLabel: 1rem;
@@ -401,6 +419,22 @@
401
419
  --mistica-font-size-chipLabel: 0.875rem;
402
420
  --mistica-line-height-chipLabel: 1.25rem;
403
421
  --mistica-font-weight-chipLabel: 500;
422
+ --mistica-font-size-cardPretitleSnap: 0.875rem;
423
+ --mistica-line-height-cardPretitleSnap: 1.25rem;
424
+ --mistica-font-size-cardTitleSnap: 0.875rem;
425
+ --mistica-line-height-cardTitleSnap: 1.25rem;
426
+ --mistica-font-size-cardSubtitleSnap: 0.875rem;
427
+ --mistica-line-height-cardSubtitleSnap: 1.25rem;
428
+ --mistica-font-size-cardDescriptionSnap: 0.875rem;
429
+ --mistica-line-height-cardDescriptionSnap: 1.25rem;
430
+ --mistica-font-size-cardPretitleDefault: 0.875rem;
431
+ --mistica-line-height-cardPretitleDefault: 1.25rem;
432
+ --mistica-font-size-cardTitleDefault: 1.125rem;
433
+ --mistica-line-height-cardTitleDefault: 1.5rem;
434
+ --mistica-font-size-cardSubtitleDefault: 0.875rem;
435
+ --mistica-line-height-cardSubtitleDefault: 1.25rem;
436
+ --mistica-font-size-cardDescriptionDefault: 0.875rem;
437
+ --mistica-line-height-cardDescriptionDefault: 1.25rem;
404
438
  --mistica-font-size-inputLabel: 0.75rem;
405
439
  --mistica-line-height-inputLabel: 1rem;
406
440
  --mistica-font-size-inputValue: 1rem;
@@ -439,6 +473,14 @@
439
473
  --mistica-color-backgroundBrandBottom: var(--mistica-telefonica-darkModeBlack);
440
474
  --mistica-color-appBarBackground: var(--mistica-telefonica-darkModeGrey);
441
475
  --mistica-color-navigationBarBackground: var(--mistica-telefonica-darkModeBlack);
476
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-telefonica-raw-telefonicaBlue70), 0.05);
477
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-telefonica-raw-telefonicaBlue70), 0.07);
478
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-telefonica-raw-white), 0.03);
479
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-telefonica-raw-white), 0.05);
480
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-telefonica-raw-white), 0.03);
481
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-telefonica-raw-white), 0.05);
482
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-telefonica-raw-white), 0.03);
483
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-telefonica-raw-white), 0.05);
442
484
  --mistica-color-skeletonWave: var(--mistica-telefonica-grey8);
443
485
  --mistica-color-borderLow: var(--mistica-telefonica-darkModeBlack);
444
486
  --mistica-color-border: var(--mistica-telefonica-darkModeGrey);
@@ -741,6 +783,17 @@
741
783
  --mistica-color-backgroundBrandBottom: var(--mistica-telefonica-darkModeBlack);
742
784
  --mistica-color-appBarBackground: var(--mistica-telefonica-darkModeGrey);
743
785
  --mistica-color-navigationBarBackground: var(--mistica-telefonica-darkModeBlack);
786
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-telefonica-raw-telefonicaBlue70), 0.05);
787
+ --mistica-color-backgroundDropZoneDragover: rgba(
788
+ var(--mistica-telefonica-raw-telefonicaBlue70),
789
+ 0.07
790
+ );
791
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-telefonica-raw-white), 0.03);
792
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-telefonica-raw-white), 0.05);
793
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-telefonica-raw-white), 0.03);
794
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-telefonica-raw-white), 0.05);
795
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-telefonica-raw-white), 0.03);
796
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-telefonica-raw-white), 0.05);
744
797
  --mistica-color-skeletonWave: var(--mistica-telefonica-grey8);
745
798
  --mistica-color-borderLow: var(--mistica-telefonica-darkModeBlack);
746
799
  --mistica-color-border: var(--mistica-telefonica-darkModeGrey);
@@ -1066,6 +1119,29 @@
1066
1119
  --mistica-color-backgroundBrandBottom: var(--mistica-telefonica-telefonicaBlue);
1067
1120
  --mistica-color-appBarBackground: var(--mistica-telefonica-white);
1068
1121
  --mistica-color-navigationBarBackground: var(--mistica-telefonica-telefonicaBlue);
1122
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-telefonica-raw-telefonicaBlue70), 0.05);
1123
+ --mistica-color-backgroundDropZoneDragover: rgba(
1124
+ var(--mistica-telefonica-raw-telefonicaBlue70),
1125
+ 0.08
1126
+ );
1127
+ --mistica-color-backgroundDropZoneBrandHover: rgba(
1128
+ var(--mistica-telefonica-raw-telefonicaBlue80),
1129
+ 0.2
1130
+ );
1131
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(
1132
+ var(--mistica-telefonica-raw-telefonicaBlue80),
1133
+ 0.4
1134
+ );
1135
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-telefonica-raw-white), 0.1);
1136
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-telefonica-raw-white), 0.17);
1137
+ --mistica-color-backgroundDropZoneMediaHover: rgba(
1138
+ var(--mistica-telefonica-raw-telefonicaBlue80),
1139
+ 0.2
1140
+ );
1141
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(
1142
+ var(--mistica-telefonica-raw-telefonicaBlue80),
1143
+ 0.4
1144
+ );
1069
1145
  --mistica-color-skeletonWave: var(--mistica-telefonica-grey2);
1070
1146
  --mistica-color-borderLow: var(--mistica-telefonica-grey1);
1071
1147
  --mistica-color-border: var(--mistica-telefonica-grey2);
@@ -1358,6 +1434,8 @@
1358
1434
  --mistica-line-height-10: 4.5rem;
1359
1435
  --mistica-font-size-cardTitle: 1.5rem;
1360
1436
  --mistica-line-height-cardTitle: 1.75rem;
1437
+ --mistica-font-size-drawerTitle: 1.75rem;
1438
+ --mistica-line-height-drawerTitle: 2rem;
1361
1439
 
1362
1440
  --mistica-font-size-tabsLabel: 1.125rem;
1363
1441
  --mistica-line-height-tabsLabel: 1.5rem;
@@ -1373,6 +1451,22 @@
1373
1451
 
1374
1452
  --mistica-font-size-chipLabel: 1rem;
1375
1453
  --mistica-line-height-chipLabel: 1.5rem;
1454
+ --mistica-font-size-cardPretitleSnap: 1rem;
1455
+ --mistica-line-height-cardPretitleSnap: 1.5rem;
1456
+ --mistica-font-size-cardTitleSnap: 1rem;
1457
+ --mistica-line-height-cardTitleSnap: 1.5rem;
1458
+ --mistica-font-size-cardSubtitleSnap: 1rem;
1459
+ --mistica-line-height-cardSubtitleSnap: 1.5rem;
1460
+ --mistica-font-size-cardDescriptionSnap: 1rem;
1461
+ --mistica-line-height-cardDescriptionSnap: 1.5rem;
1462
+ --mistica-font-size-cardPretitleDefault: 1rem;
1463
+ --mistica-line-height-cardPretitleDefault: 1.5rem;
1464
+ --mistica-font-size-cardTitleDefault: 1.25rem;
1465
+ --mistica-line-height-cardTitleDefault: 1.75rem;
1466
+ --mistica-font-size-cardSubtitleDefault: 1rem;
1467
+ --mistica-line-height-cardSubtitleDefault: 1.5rem;
1468
+ --mistica-font-size-cardDescriptionDefault: 1rem;
1469
+ --mistica-line-height-cardDescriptionDefault: 1.5rem;
1376
1470
  --mistica-font-size-inputLabel: 0.875rem;
1377
1471
  --mistica-line-height-inputLabel: 1.25rem;
1378
1472
  --mistica-font-size-inputValue: 1.125rem;
package/css/tu.css CHANGED
@@ -8,10 +8,10 @@
8
8
  --mistica-tu-blue: #4343ff;
9
9
  --mistica-tu-grey2: #d1d5e4;
10
10
  --mistica-tu-primary65: #202735;
11
+ --mistica-tu-blue10: #ececff;
11
12
  --mistica-tu-grey5: #6e7894;
12
13
  --mistica-tu-red: #cb4d3a;
13
14
  --mistica-tu-red55: #bb4736;
14
- --mistica-tu-blue10: #ececff;
15
15
  --mistica-tu-primary45: #555d6c;
16
16
  --mistica-tu-blue70: #3232b9;
17
17
  --mistica-tu-green40: #a1dfcf;
@@ -41,6 +41,7 @@
41
41
  --mistica-tu-raw-grey1: 242, 244, 255;
42
42
  --mistica-tu-raw-primary: 43, 52, 71;
43
43
  --mistica-tu-raw-black: 0, 0, 0;
44
+ --mistica-tu-raw-blue70: 50, 50, 185;
44
45
  --mistica-tu-raw-white: 255, 255, 255;
45
46
  --mistica-tu-raw-darkModeGrey: 32, 39, 53;
46
47
  --mistica-tu-raw-darkModeBlack: 22, 26, 36;
@@ -72,6 +73,14 @@
72
73
  --mistica-color-backgroundAlternative: var(--mistica-tu-grey1);
73
74
  --mistica-color-backgroundBrandTop: var(--mistica-tu-primary);
74
75
  --mistica-color-backgroundBrandBottom: var(--mistica-tu-primary);
76
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-tu-raw-blue70), 0.08);
77
+ --mistica-color-backgroundDropZoneDragover: var(--mistica-tu-blue10);
78
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-tu-raw-grey9), 0.2);
79
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-tu-raw-grey9), 0.4);
80
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-tu-raw-white), 0.1);
81
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-tu-raw-white), 0.17);
82
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-tu-raw-grey9), 0.2);
83
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-tu-raw-grey9), 0.4);
75
84
  --mistica-color-skeletonWave: var(--mistica-tu-grey2);
76
85
  --mistica-color-borderLow: var(--mistica-tu-grey1);
77
86
  --mistica-color-border: var(--mistica-tu-grey2);
@@ -373,6 +382,9 @@
373
382
  --mistica-font-size-cardTitle: 1.25rem;
374
383
  --mistica-line-height-cardTitle: 1.5rem;
375
384
  --mistica-font-weight-cardTitle: 500;
385
+ --mistica-font-size-drawerTitle: 1.25rem;
386
+ --mistica-line-height-drawerTitle: 1.5rem;
387
+ --mistica-font-weight-drawerTitle: 500;
376
388
  --mistica-font-weight-rowTitle: 400;
377
389
  --mistica-font-weight-button: 500;
378
390
  --mistica-font-size-tabsLabel: 1rem;
@@ -396,6 +408,22 @@
396
408
  --mistica-font-size-chipLabel: 0.875rem;
397
409
  --mistica-line-height-chipLabel: 1.25rem;
398
410
  --mistica-font-weight-chipLabel: 500;
411
+ --mistica-font-size-cardPretitleSnap: 0.875rem;
412
+ --mistica-line-height-cardPretitleSnap: 1.25rem;
413
+ --mistica-font-size-cardTitleSnap: 0.875rem;
414
+ --mistica-line-height-cardTitleSnap: 1.25rem;
415
+ --mistica-font-size-cardSubtitleSnap: 0.875rem;
416
+ --mistica-line-height-cardSubtitleSnap: 1.25rem;
417
+ --mistica-font-size-cardDescriptionSnap: 0.875rem;
418
+ --mistica-line-height-cardDescriptionSnap: 1.25rem;
419
+ --mistica-font-size-cardPretitleDefault: 0.875rem;
420
+ --mistica-line-height-cardPretitleDefault: 1.25rem;
421
+ --mistica-font-size-cardTitleDefault: 1.125rem;
422
+ --mistica-line-height-cardTitleDefault: 1.5rem;
423
+ --mistica-font-size-cardSubtitleDefault: 0.875rem;
424
+ --mistica-line-height-cardSubtitleDefault: 1.25rem;
425
+ --mistica-font-size-cardDescriptionDefault: 0.875rem;
426
+ --mistica-line-height-cardDescriptionDefault: 1.25rem;
399
427
  --mistica-font-size-inputLabel: 0.75rem;
400
428
  --mistica-line-height-inputLabel: 1rem;
401
429
  --mistica-font-size-inputValue: 1rem;
@@ -434,6 +462,14 @@
434
462
  --mistica-color-backgroundBrandBottom: var(--mistica-tu-darkModeBlack);
435
463
  --mistica-color-appBarBackground: var(--mistica-tu-darkModeGrey);
436
464
  --mistica-color-navigationBarBackground: var(--mistica-tu-darkModeBlack);
465
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-tu-raw-white), 0.05);
466
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-tu-raw-white), 0.08);
467
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-tu-raw-white), 0.03);
468
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-tu-raw-white), 0.05);
469
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-tu-raw-white), 0.03);
470
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-tu-raw-white), 0.05);
471
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-tu-raw-white), 0.03);
472
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-tu-raw-white), 0.05);
437
473
  --mistica-color-skeletonWave: var(--mistica-tu-grey5);
438
474
  --mistica-color-borderLow: var(--mistica-tu-darkModeBlack);
439
475
  --mistica-color-border: var(--mistica-tu-darkModeGrey);
@@ -718,6 +754,14 @@
718
754
  --mistica-color-backgroundBrandBottom: var(--mistica-tu-darkModeBlack);
719
755
  --mistica-color-appBarBackground: var(--mistica-tu-darkModeGrey);
720
756
  --mistica-color-navigationBarBackground: var(--mistica-tu-darkModeBlack);
757
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-tu-raw-white), 0.05);
758
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-tu-raw-white), 0.08);
759
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-tu-raw-white), 0.03);
760
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-tu-raw-white), 0.05);
761
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-tu-raw-white), 0.03);
762
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-tu-raw-white), 0.05);
763
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-tu-raw-white), 0.03);
764
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-tu-raw-white), 0.05);
721
765
  --mistica-color-skeletonWave: var(--mistica-tu-grey5);
722
766
  --mistica-color-borderLow: var(--mistica-tu-darkModeBlack);
723
767
  --mistica-color-border: var(--mistica-tu-darkModeGrey);
@@ -1001,6 +1045,14 @@
1001
1045
  --mistica-color-backgroundBrandBottom: var(--mistica-tu-primary);
1002
1046
  --mistica-color-appBarBackground: var(--mistica-tu-white);
1003
1047
  --mistica-color-navigationBarBackground: var(--mistica-tu-primary);
1048
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-tu-raw-blue70), 0.08);
1049
+ --mistica-color-backgroundDropZoneDragover: var(--mistica-tu-blue10);
1050
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-tu-raw-grey9), 0.2);
1051
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-tu-raw-grey9), 0.4);
1052
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-tu-raw-white), 0.1);
1053
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-tu-raw-white), 0.17);
1054
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-tu-raw-grey9), 0.2);
1055
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-tu-raw-grey9), 0.4);
1004
1056
  --mistica-color-skeletonWave: var(--mistica-tu-grey2);
1005
1057
  --mistica-color-borderLow: var(--mistica-tu-grey1);
1006
1058
  --mistica-color-border: var(--mistica-tu-grey2);
@@ -1284,6 +1336,8 @@
1284
1336
  --mistica-line-height-10: 4.5rem;
1285
1337
  --mistica-font-size-cardTitle: 1.5rem;
1286
1338
  --mistica-line-height-cardTitle: 1.75rem;
1339
+ --mistica-font-size-drawerTitle: 1.75rem;
1340
+ --mistica-line-height-drawerTitle: 2rem;
1287
1341
 
1288
1342
  --mistica-font-size-tabsLabel: 1.125rem;
1289
1343
  --mistica-line-height-tabsLabel: 1.5rem;
@@ -1299,6 +1353,22 @@
1299
1353
 
1300
1354
  --mistica-font-size-chipLabel: 1rem;
1301
1355
  --mistica-line-height-chipLabel: 1.5rem;
1356
+ --mistica-font-size-cardPretitleSnap: 1rem;
1357
+ --mistica-line-height-cardPretitleSnap: 1.5rem;
1358
+ --mistica-font-size-cardTitleSnap: 1rem;
1359
+ --mistica-line-height-cardTitleSnap: 1.5rem;
1360
+ --mistica-font-size-cardSubtitleSnap: 1rem;
1361
+ --mistica-line-height-cardSubtitleSnap: 1.5rem;
1362
+ --mistica-font-size-cardDescriptionSnap: 1rem;
1363
+ --mistica-line-height-cardDescriptionSnap: 1.5rem;
1364
+ --mistica-font-size-cardPretitleDefault: 1rem;
1365
+ --mistica-line-height-cardPretitleDefault: 1.5rem;
1366
+ --mistica-font-size-cardTitleDefault: 1.25rem;
1367
+ --mistica-line-height-cardTitleDefault: 1.75rem;
1368
+ --mistica-font-size-cardSubtitleDefault: 1rem;
1369
+ --mistica-line-height-cardSubtitleDefault: 1.5rem;
1370
+ --mistica-font-size-cardDescriptionDefault: 1rem;
1371
+ --mistica-line-height-cardDescriptionDefault: 1.5rem;
1302
1372
  --mistica-font-size-inputLabel: 0.875rem;
1303
1373
  --mistica-line-height-inputLabel: 1.25rem;
1304
1374
  --mistica-font-size-inputValue: 1.125rem;
package/css/vivo-new.css CHANGED
@@ -7,11 +7,11 @@
7
7
  --mistica-vivo-new-vivoPurpleLight80: #8433ad;
8
8
  --mistica-vivo-new-pepperLight10: #fce4ef;
9
9
  --mistica-vivo-new-grey3: #dddddd;
10
+ --mistica-vivo-new-vivoPurpleLight10: #efe5f4;
10
11
  --mistica-vivo-new-grey2: #eeeeee;
11
12
  --mistica-vivo-new-grey5: #666666;
12
13
  --mistica-vivo-new-pepper: #cc1f59;
13
14
  --mistica-vivo-new-pepperDark: #b71d63;
14
- --mistica-vivo-new-vivoPurpleLight10: #efe5f4;
15
15
  --mistica-vivo-new-vivoPurpleLight50: #b280cc;
16
16
  --mistica-vivo-new-vivoPurpleLight20: #e0cceb;
17
17
  --mistica-vivo-new-grey4: #8a8c90;
@@ -35,6 +35,8 @@
35
35
  /* Raw palette colors, for use with rgba() */
36
36
  --mistica-vivo-new-raw-darkModeBlack: 25, 25, 25;
37
37
  --mistica-vivo-new-raw-grey6: 0, 0, 0;
38
+ --mistica-vivo-new-raw-vivoPurple: 102, 0, 153;
39
+ --mistica-vivo-new-raw-vivoPurpleDark: 70, 30, 95;
38
40
  --mistica-vivo-new-raw-white: 255, 255, 255;
39
41
  --mistica-vivo-new-raw-darkModeGrey: 36, 36, 36;
40
42
 
@@ -64,6 +66,14 @@
64
66
  --mistica-color-backgroundBrandBottom: var(--mistica-vivo-new-vivoPurple);
65
67
  --mistica-color-appBarBackground: var(--mistica-vivo-new-white);
66
68
  --mistica-color-navigationBarBackground: var(--mistica-vivo-new-vivoPurple);
69
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-vivo-new-raw-vivoPurple), 0.06);
70
+ --mistica-color-backgroundDropZoneDragover: var(--mistica-vivo-new-vivoPurpleLight10);
71
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-vivo-new-raw-vivoPurpleDark), 0.3);
72
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-vivo-new-raw-vivoPurpleDark), 0.5);
73
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-vivo-new-raw-white), 0.1);
74
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-vivo-new-raw-white), 0.17);
75
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-vivo-new-raw-vivoPurpleDark), 0.3);
76
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-vivo-new-raw-vivoPurpleDark), 0.5);
67
77
  --mistica-color-skeletonWave: var(--mistica-vivo-new-grey2);
68
78
  --mistica-color-borderLow: var(--mistica-vivo-new-grey1);
69
79
  --mistica-color-border: var(--mistica-vivo-new-grey3);
@@ -324,16 +334,16 @@
324
334
  --mistica-border-radius-avatar: 50%;
325
335
  --mistica-border-radius-bar: 999px;
326
336
  --mistica-border-radius-button: 32px;
327
- --mistica-border-radius-checkbox: 2px;
328
- --mistica-border-radius-container: 16px;
337
+ --mistica-border-radius-checkbox: 4px;
338
+ --mistica-border-radius-container: 24px;
329
339
  --mistica-border-radius-indicator: 24px;
330
340
  --mistica-border-radius-chip: 24px;
331
- --mistica-border-radius-tag: 24px;
332
- --mistica-border-radius-input: 12px;
333
- --mistica-border-radius-legacyDisplay: 16px;
334
- --mistica-border-radius-popup: 8px;
335
- --mistica-border-radius-sheet: 16px;
336
- --mistica-border-radius-mediaSmall: 8px;
341
+ --mistica-border-radius-tag: 10px;
342
+ --mistica-border-radius-input: 16px;
343
+ --mistica-border-radius-legacyDisplay: 24px;
344
+ --mistica-border-radius-popup: 16px;
345
+ --mistica-border-radius-sheet: 24px;
346
+ --mistica-border-radius-mediaSmall: 12px;
337
347
 
338
348
  /* Text */
339
349
  --mistica-font-size-1: 0.75rem;
@@ -365,6 +375,9 @@
365
375
  --mistica-font-size-cardTitle: 1.25rem;
366
376
  --mistica-line-height-cardTitle: 1.5rem;
367
377
  --mistica-font-weight-cardTitle: 500;
378
+ --mistica-font-size-drawerTitle: 1.25rem;
379
+ --mistica-line-height-drawerTitle: 1.5rem;
380
+ --mistica-font-weight-drawerTitle: 500;
368
381
  --mistica-font-weight-rowTitle: 400;
369
382
  --mistica-font-weight-button: 500;
370
383
  --mistica-font-size-tabsLabel: 1.125rem;
@@ -388,6 +401,22 @@
388
401
  --mistica-font-size-chipLabel: 0.875rem;
389
402
  --mistica-line-height-chipLabel: 1.25rem;
390
403
  --mistica-font-weight-chipLabel: 500;
404
+ --mistica-font-size-cardPretitleSnap: 0.875rem;
405
+ --mistica-line-height-cardPretitleSnap: 1.25rem;
406
+ --mistica-font-size-cardTitleSnap: 0.875rem;
407
+ --mistica-line-height-cardTitleSnap: 1.25rem;
408
+ --mistica-font-size-cardSubtitleSnap: 0.875rem;
409
+ --mistica-line-height-cardSubtitleSnap: 1.25rem;
410
+ --mistica-font-size-cardDescriptionSnap: 0.875rem;
411
+ --mistica-line-height-cardDescriptionSnap: 1.25rem;
412
+ --mistica-font-size-cardPretitleDefault: 0.875rem;
413
+ --mistica-line-height-cardPretitleDefault: 1.25rem;
414
+ --mistica-font-size-cardTitleDefault: 1.125rem;
415
+ --mistica-line-height-cardTitleDefault: 1.5rem;
416
+ --mistica-font-size-cardSubtitleDefault: 0.875rem;
417
+ --mistica-line-height-cardSubtitleDefault: 1.25rem;
418
+ --mistica-font-size-cardDescriptionDefault: 0.875rem;
419
+ --mistica-line-height-cardDescriptionDefault: 1.25rem;
391
420
  --mistica-font-size-inputLabel: 0.75rem;
392
421
  --mistica-line-height-inputLabel: 1rem;
393
422
  --mistica-font-size-inputValue: 1rem;
@@ -426,6 +455,14 @@
426
455
  --mistica-color-backgroundBrandBottom: var(--mistica-vivo-new-darkModeBlack);
427
456
  --mistica-color-appBarBackground: var(--mistica-vivo-new-darkModeGrey);
428
457
  --mistica-color-navigationBarBackground: var(--mistica-vivo-new-darkModeBlack);
458
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-vivo-new-raw-white), 0.05);
459
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-vivo-new-raw-white), 0.08);
460
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-vivo-new-raw-white), 0.03);
461
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-vivo-new-raw-white), 0.05);
462
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-vivo-new-raw-white), 0.03);
463
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-vivo-new-raw-white), 0.05);
464
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-vivo-new-raw-white), 0.03);
465
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-vivo-new-raw-white), 0.05);
429
466
  --mistica-color-skeletonWave: var(--mistica-vivo-new-grey5);
430
467
  --mistica-color-borderLow: var(--mistica-vivo-new-darkModeBlack);
431
468
  --mistica-color-border: var(--mistica-vivo-new-darkModeGrey);
@@ -710,6 +747,14 @@
710
747
  --mistica-color-backgroundBrandBottom: var(--mistica-vivo-new-darkModeBlack);
711
748
  --mistica-color-appBarBackground: var(--mistica-vivo-new-darkModeGrey);
712
749
  --mistica-color-navigationBarBackground: var(--mistica-vivo-new-darkModeBlack);
750
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-vivo-new-raw-white), 0.05);
751
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-vivo-new-raw-white), 0.08);
752
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-vivo-new-raw-white), 0.03);
753
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-vivo-new-raw-white), 0.05);
754
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-vivo-new-raw-white), 0.03);
755
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-vivo-new-raw-white), 0.05);
756
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-vivo-new-raw-white), 0.03);
757
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-vivo-new-raw-white), 0.05);
713
758
  --mistica-color-skeletonWave: var(--mistica-vivo-new-grey5);
714
759
  --mistica-color-borderLow: var(--mistica-vivo-new-darkModeBlack);
715
760
  --mistica-color-border: var(--mistica-vivo-new-darkModeGrey);
@@ -1005,6 +1050,20 @@
1005
1050
  --mistica-color-backgroundBrandBottom: var(--mistica-vivo-new-vivoPurple);
1006
1051
  --mistica-color-appBarBackground: var(--mistica-vivo-new-white);
1007
1052
  --mistica-color-navigationBarBackground: var(--mistica-vivo-new-vivoPurple);
1053
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-vivo-new-raw-vivoPurple), 0.06);
1054
+ --mistica-color-backgroundDropZoneDragover: var(--mistica-vivo-new-vivoPurpleLight10);
1055
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-vivo-new-raw-vivoPurpleDark), 0.3);
1056
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(
1057
+ var(--mistica-vivo-new-raw-vivoPurpleDark),
1058
+ 0.5
1059
+ );
1060
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-vivo-new-raw-white), 0.1);
1061
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-vivo-new-raw-white), 0.17);
1062
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-vivo-new-raw-vivoPurpleDark), 0.3);
1063
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(
1064
+ var(--mistica-vivo-new-raw-vivoPurpleDark),
1065
+ 0.5
1066
+ );
1008
1067
  --mistica-color-skeletonWave: var(--mistica-vivo-new-grey2);
1009
1068
  --mistica-color-borderLow: var(--mistica-vivo-new-grey1);
1010
1069
  --mistica-color-border: var(--mistica-vivo-new-grey3);
@@ -1294,6 +1353,8 @@
1294
1353
  --mistica-line-height-10: 4.5rem;
1295
1354
  --mistica-font-size-cardTitle: 1.5rem;
1296
1355
  --mistica-line-height-cardTitle: 1.75rem;
1356
+ --mistica-font-size-drawerTitle: 1.75rem;
1357
+ --mistica-line-height-drawerTitle: 2rem;
1297
1358
 
1298
1359
  --mistica-font-size-tabsLabel: 1.125rem;
1299
1360
  --mistica-line-height-tabsLabel: 1.5rem;
@@ -1309,6 +1370,22 @@
1309
1370
 
1310
1371
  --mistica-font-size-chipLabel: 1rem;
1311
1372
  --mistica-line-height-chipLabel: 1.5rem;
1373
+ --mistica-font-size-cardPretitleSnap: 1rem;
1374
+ --mistica-line-height-cardPretitleSnap: 1.5rem;
1375
+ --mistica-font-size-cardTitleSnap: 1rem;
1376
+ --mistica-line-height-cardTitleSnap: 1.5rem;
1377
+ --mistica-font-size-cardSubtitleSnap: 1rem;
1378
+ --mistica-line-height-cardSubtitleSnap: 1.5rem;
1379
+ --mistica-font-size-cardDescriptionSnap: 1rem;
1380
+ --mistica-line-height-cardDescriptionSnap: 1.5rem;
1381
+ --mistica-font-size-cardPretitleDefault: 1rem;
1382
+ --mistica-line-height-cardPretitleDefault: 1.5rem;
1383
+ --mistica-font-size-cardTitleDefault: 1.5rem;
1384
+ --mistica-line-height-cardTitleDefault: 1.75rem;
1385
+ --mistica-font-size-cardSubtitleDefault: 1rem;
1386
+ --mistica-line-height-cardSubtitleDefault: 1.5rem;
1387
+ --mistica-font-size-cardDescriptionDefault: 1rem;
1388
+ --mistica-line-height-cardDescriptionDefault: 1.5rem;
1312
1389
  --mistica-font-size-inputLabel: 0.875rem;
1313
1390
  --mistica-line-height-inputLabel: 1.25rem;
1314
1391
  --mistica-font-size-inputValue: 1.125rem;
package/css/vivo.css CHANGED
@@ -35,6 +35,7 @@
35
35
  /* Raw palette colors, for use with rgba() */
36
36
  --mistica-vivo-raw-darkModeBlack: 25, 25, 25;
37
37
  --mistica-vivo-raw-grey6: 0, 0, 0;
38
+ --mistica-vivo-raw-vivoPurpleDark: 70, 30, 95;
38
39
  --mistica-vivo-raw-white: 255, 255, 255;
39
40
  --mistica-vivo-raw-darkModeGrey: 36, 36, 36;
40
41
 
@@ -64,6 +65,14 @@
64
65
  --mistica-color-backgroundBrandBottom: var(--mistica-vivo-vivoPurple);
65
66
  --mistica-color-appBarBackground: var(--mistica-vivo-white);
66
67
  --mistica-color-navigationBarBackground: var(--mistica-vivo-vivoPurple);
68
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.07);
69
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.12);
70
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.2);
71
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.4);
72
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-vivo-raw-white), 0.1);
73
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-vivo-raw-white), 0.17);
74
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.2);
75
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.4);
67
76
  --mistica-color-skeletonWave: var(--mistica-vivo-grey2);
68
77
  --mistica-color-borderLow: var(--mistica-vivo-grey1);
69
78
  --mistica-color-border: var(--mistica-vivo-grey3);
@@ -365,6 +374,9 @@
365
374
  --mistica-font-size-cardTitle: 1.25rem;
366
375
  --mistica-line-height-cardTitle: 1.5rem;
367
376
  --mistica-font-weight-cardTitle: 400;
377
+ --mistica-font-size-drawerTitle: 1.25rem;
378
+ --mistica-line-height-drawerTitle: 1.5rem;
379
+ --mistica-font-weight-drawerTitle: 300;
368
380
  --mistica-font-weight-rowTitle: 400;
369
381
  --mistica-font-weight-button: 500;
370
382
  --mistica-font-size-tabsLabel: 1rem;
@@ -388,6 +400,22 @@
388
400
  --mistica-font-size-chipLabel: 0.875rem;
389
401
  --mistica-line-height-chipLabel: 1.25rem;
390
402
  --mistica-font-weight-chipLabel: 500;
403
+ --mistica-font-size-cardPretitleSnap: 0.875rem;
404
+ --mistica-line-height-cardPretitleSnap: 1.25rem;
405
+ --mistica-font-size-cardTitleSnap: 0.875rem;
406
+ --mistica-line-height-cardTitleSnap: 1.25rem;
407
+ --mistica-font-size-cardSubtitleSnap: 0.875rem;
408
+ --mistica-line-height-cardSubtitleSnap: 1.25rem;
409
+ --mistica-font-size-cardDescriptionSnap: 0.875rem;
410
+ --mistica-line-height-cardDescriptionSnap: 1.25rem;
411
+ --mistica-font-size-cardPretitleDefault: 0.875rem;
412
+ --mistica-line-height-cardPretitleDefault: 1.25rem;
413
+ --mistica-font-size-cardTitleDefault: 1.125rem;
414
+ --mistica-line-height-cardTitleDefault: 1.5rem;
415
+ --mistica-font-size-cardSubtitleDefault: 0.875rem;
416
+ --mistica-line-height-cardSubtitleDefault: 1.25rem;
417
+ --mistica-font-size-cardDescriptionDefault: 0.875rem;
418
+ --mistica-line-height-cardDescriptionDefault: 1.25rem;
391
419
  --mistica-font-size-inputLabel: 0.75rem;
392
420
  --mistica-line-height-inputLabel: 1rem;
393
421
  --mistica-font-size-inputValue: 1rem;
@@ -426,6 +454,14 @@
426
454
  --mistica-color-backgroundBrandBottom: var(--mistica-vivo-darkModeBlack);
427
455
  --mistica-color-appBarBackground: var(--mistica-vivo-darkModeGrey);
428
456
  --mistica-color-navigationBarBackground: var(--mistica-vivo-darkModeBlack);
457
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-vivo-raw-white), 0.05);
458
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-vivo-raw-white), 0.08);
459
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-vivo-raw-white), 0.03);
460
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-vivo-raw-white), 0.05);
461
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-vivo-raw-white), 0.03);
462
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-vivo-raw-white), 0.05);
463
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-vivo-raw-white), 0.03);
464
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-vivo-raw-white), 0.05);
429
465
  --mistica-color-skeletonWave: var(--mistica-vivo-grey5);
430
466
  --mistica-color-borderLow: var(--mistica-vivo-darkModeBlack);
431
467
  --mistica-color-border: var(--mistica-vivo-darkModeGrey);
@@ -710,6 +746,14 @@
710
746
  --mistica-color-backgroundBrandBottom: var(--mistica-vivo-darkModeBlack);
711
747
  --mistica-color-appBarBackground: var(--mistica-vivo-darkModeGrey);
712
748
  --mistica-color-navigationBarBackground: var(--mistica-vivo-darkModeBlack);
749
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-vivo-raw-white), 0.05);
750
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-vivo-raw-white), 0.08);
751
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-vivo-raw-white), 0.03);
752
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-vivo-raw-white), 0.05);
753
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-vivo-raw-white), 0.03);
754
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-vivo-raw-white), 0.05);
755
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-vivo-raw-white), 0.03);
756
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-vivo-raw-white), 0.05);
713
757
  --mistica-color-skeletonWave: var(--mistica-vivo-grey5);
714
758
  --mistica-color-borderLow: var(--mistica-vivo-darkModeBlack);
715
759
  --mistica-color-border: var(--mistica-vivo-darkModeGrey);
@@ -993,6 +1037,14 @@
993
1037
  --mistica-color-backgroundBrandBottom: var(--mistica-vivo-vivoPurple);
994
1038
  --mistica-color-appBarBackground: var(--mistica-vivo-white);
995
1039
  --mistica-color-navigationBarBackground: var(--mistica-vivo-vivoPurple);
1040
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.07);
1041
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.12);
1042
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.2);
1043
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.4);
1044
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-vivo-raw-white), 0.1);
1045
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-vivo-raw-white), 0.17);
1046
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.2);
1047
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.4);
996
1048
  --mistica-color-skeletonWave: var(--mistica-vivo-grey2);
997
1049
  --mistica-color-borderLow: var(--mistica-vivo-grey1);
998
1050
  --mistica-color-border: var(--mistica-vivo-grey3);
@@ -1276,6 +1328,8 @@
1276
1328
  --mistica-line-height-10: 4.5rem;
1277
1329
  --mistica-font-size-cardTitle: 1.5rem;
1278
1330
  --mistica-line-height-cardTitle: 1.75rem;
1331
+ --mistica-font-size-drawerTitle: 1.75rem;
1332
+ --mistica-line-height-drawerTitle: 2rem;
1279
1333
 
1280
1334
  --mistica-font-size-tabsLabel: 1.125rem;
1281
1335
  --mistica-line-height-tabsLabel: 1.5rem;
@@ -1291,6 +1345,22 @@
1291
1345
 
1292
1346
  --mistica-font-size-chipLabel: 1rem;
1293
1347
  --mistica-line-height-chipLabel: 1.5rem;
1348
+ --mistica-font-size-cardPretitleSnap: 1rem;
1349
+ --mistica-line-height-cardPretitleSnap: 1.5rem;
1350
+ --mistica-font-size-cardTitleSnap: 1rem;
1351
+ --mistica-line-height-cardTitleSnap: 1.5rem;
1352
+ --mistica-font-size-cardSubtitleSnap: 1rem;
1353
+ --mistica-line-height-cardSubtitleSnap: 1.5rem;
1354
+ --mistica-font-size-cardDescriptionSnap: 1rem;
1355
+ --mistica-line-height-cardDescriptionSnap: 1.5rem;
1356
+ --mistica-font-size-cardPretitleDefault: 1rem;
1357
+ --mistica-line-height-cardPretitleDefault: 1.5rem;
1358
+ --mistica-font-size-cardTitleDefault: 1.25rem;
1359
+ --mistica-line-height-cardTitleDefault: 1.75rem;
1360
+ --mistica-font-size-cardSubtitleDefault: 1rem;
1361
+ --mistica-line-height-cardSubtitleDefault: 1.5rem;
1362
+ --mistica-font-size-cardDescriptionDefault: 1rem;
1363
+ --mistica-line-height-cardDescriptionDefault: 1.5rem;
1294
1364
  --mistica-font-size-inputLabel: 0.875rem;
1295
1365
  --mistica-line-height-inputLabel: 1.25rem;
1296
1366
  --mistica-font-size-inputValue: 1.125rem;
package/dist/accordion.css-mistica.js CHANGED
@@ -10,7 +10,7 @@ function _export(target, all) {
10
10
  }
11
11
  _export(exports, {
12
12
  get accordionItem () {
13
- return f;
13
+ return z;
14
14
  },
15
15
  get boxed () {
16
16
  return s;
@@ -31,18 +31,18 @@ _export(exports, {
31
31
  return x;
32
32
  },
33
33
  get rightContentContainer () {
34
- return a;
34
+ return e;
35
35
  },
36
36
  get touchableBackground () {
37
- return e;
37
+ return r;
38
38
  },
39
39
  get touchableBackgroundOverBrand () {
40
- return r;
40
+ return a;
41
41
  }
42
42
  });
43
- /* empty css */ /* empty css */ var n = "v16_52_8s3szx0 v16_52_1y2v1nfff v16_52_1y2v1nfgo v16_52_1y2v1nfhx v16_52_1y2v1nfj6 v16_52_1y2v1nfq9 v16_52_1y2v1nfs4 v16_52_1y2v1nffe v16_52_1y2v1nfpo v16_52_1y2v1nfqq", s = "v16_52_8s3szx1", e = "v16_52_8s3szx2", r = "v16_52_8s3szx3", a = "v16_52_8s3szx4", t = "v16_52_8s3szx5", o = "v16_52_8s3szx6", x = {
44
- enter: "v16_52_8s3szx7",
45
- enterActive: "v16_52_8s3szx8",
46
- exit: "v16_52_8s3szx9",
47
- exitActive: "v16_52_8s3szxa"
48
- }, i = "v16_52_8s3szxb", f = "v16_52_8s3szxc v16_52_1y2v1nfq9";
43
+ /* empty css */ /* empty css */ var n = "v16_54_8s3szx0 v16_54_1y2v1nffv v16_54_1y2v1nfh4 v16_54_1y2v1nfid v16_54_1y2v1nfjm v16_54_1y2v1nfqp v16_54_1y2v1nfsk v16_54_1y2v1nffu v16_54_1y2v1nfq4 v16_54_1y2v1nfr6", s = "v16_54_8s3szx1", r = "v16_54_8s3szx2", a = "v16_54_8s3szx3", e = "v16_54_8s3szx4", t = "v16_54_8s3szx5", o = "v16_54_8s3szx6", x = {
44
+ enter: "v16_54_8s3szx7",
45
+ enterActive: "v16_54_8s3szx8",
46
+ exit: "v16_54_8s3szx9",
47
+ exitActive: "v16_54_8s3szxa"
48
+ }, i = "v16_54_8s3szxb", z = "v16_54_8s3szxc v16_54_1y2v1nfqp";
package/dist/align.css-mistica.js CHANGED
@@ -8,4 +8,4 @@ Object.defineProperty(exports, "container", {
8
8
  return o;
9
9
  }
10
10
  });
11
- /* empty css */ var o = "v16_52_1mfs0fk0";
11
+ /* empty css */ var o = "v16_54_1mfs0fk0";