@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/movistar-new.css CHANGED
@@ -44,6 +44,7 @@
44
44
  /* Raw palette colors, for use with rgba() */
45
45
  --mistica-movistar-new-raw-movistarBlack: 38, 36, 35;
46
46
  --mistica-movistar-new-raw-black: 0, 0, 0;
47
+ --mistica-movistar-new-raw-movistarBlue: 0, 102, 255;
47
48
  --mistica-movistar-new-raw-white: 255, 255, 255;
48
49
  --mistica-movistar-new-raw-darkModeGrey: 21, 20, 20;
49
50
  --mistica-movistar-new-raw-darkModeBlack: 7, 7, 6;
@@ -75,6 +76,14 @@
75
76
  --mistica-color-backgroundBrandBottom: var(--mistica-movistar-new-movistarBlue);
76
77
  --mistica-color-appBarBackground: var(--mistica-movistar-new-white);
77
78
  --mistica-color-navigationBarBackground: var(--mistica-movistar-new-movistarBlue);
79
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-movistar-new-raw-movistarBlue), 0.05);
80
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-movistar-new-raw-movistarBlue), 0.08);
81
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-movistar-new-raw-movistarBlack), 0.08);
82
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-movistar-new-raw-movistarBlack), 0.1);
83
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-movistar-new-raw-white), 0.1);
84
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-movistar-new-raw-white), 0.17);
85
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-movistar-new-raw-movistarBlack), 0.2);
86
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-movistar-new-raw-movistarBlack), 0.4);
78
87
  --mistica-color-skeletonWave: var(--mistica-movistar-new-grey200);
79
88
  --mistica-color-borderLow: var(--mistica-movistar-new-grey100);
80
89
  --mistica-color-border: var(--mistica-movistar-new-grey300);
@@ -379,6 +388,9 @@
379
388
  --mistica-font-size-cardTitle: 1.25rem;
380
389
  --mistica-line-height-cardTitle: 1.5rem;
381
390
  --mistica-font-weight-cardTitle: 700;
391
+ --mistica-font-size-drawerTitle: 1.25rem;
392
+ --mistica-line-height-drawerTitle: 1.625rem;
393
+ --mistica-font-weight-drawerTitle: 700;
382
394
  --mistica-font-weight-rowTitle: 500;
383
395
  --mistica-font-weight-button: 500;
384
396
  --mistica-font-size-tabsLabel: 1rem;
@@ -402,6 +414,22 @@
402
414
  --mistica-font-size-chipLabel: 0.875rem;
403
415
  --mistica-line-height-chipLabel: 1.25rem;
404
416
  --mistica-font-weight-chipLabel: 500;
417
+ --mistica-font-size-cardPretitleSnap: 0.875rem;
418
+ --mistica-line-height-cardPretitleSnap: 1.25rem;
419
+ --mistica-font-size-cardTitleSnap: 0.875rem;
420
+ --mistica-line-height-cardTitleSnap: 1.25rem;
421
+ --mistica-font-size-cardSubtitleSnap: 0.875rem;
422
+ --mistica-line-height-cardSubtitleSnap: 1.25rem;
423
+ --mistica-font-size-cardDescriptionSnap: 0.875rem;
424
+ --mistica-line-height-cardDescriptionSnap: 1.25rem;
425
+ --mistica-font-size-cardPretitleDefault: 0.875rem;
426
+ --mistica-line-height-cardPretitleDefault: 1.25rem;
427
+ --mistica-font-size-cardTitleDefault: 1rem;
428
+ --mistica-line-height-cardTitleDefault: 1.375rem;
429
+ --mistica-font-size-cardSubtitleDefault: 0.875rem;
430
+ --mistica-line-height-cardSubtitleDefault: 1.25rem;
431
+ --mistica-font-size-cardDescriptionDefault: 0.875rem;
432
+ --mistica-line-height-cardDescriptionDefault: 1.25rem;
405
433
  --mistica-font-size-inputLabel: 0.75rem;
406
434
  --mistica-line-height-inputLabel: 1rem;
407
435
  --mistica-font-size-inputValue: 1rem;
@@ -440,6 +468,14 @@
440
468
  --mistica-color-backgroundBrandBottom: var(--mistica-movistar-new-darkModeBlack);
441
469
  --mistica-color-appBarBackground: var(--mistica-movistar-new-darkModeGrey);
442
470
  --mistica-color-navigationBarBackground: var(--mistica-movistar-new-darkModeBlack);
471
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-movistar-new-raw-white), 0.05);
472
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-movistar-new-raw-white), 0.08);
473
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-movistar-new-raw-white), 0.03);
474
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-movistar-new-raw-white), 0.05);
475
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-movistar-new-raw-white), 0.03);
476
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-movistar-new-raw-white), 0.05);
477
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-movistar-new-raw-white), 0.03);
478
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-movistar-new-raw-white), 0.05);
443
479
  --mistica-color-skeletonWave: var(--mistica-movistar-new-grey600);
444
480
  --mistica-color-borderLow: var(--mistica-movistar-new-darkModeBlack);
445
481
  --mistica-color-border: var(--mistica-movistar-new-darkModeGrey);
@@ -736,6 +772,14 @@
736
772
  --mistica-color-backgroundBrandBottom: var(--mistica-movistar-new-darkModeBlack);
737
773
  --mistica-color-appBarBackground: var(--mistica-movistar-new-darkModeGrey);
738
774
  --mistica-color-navigationBarBackground: var(--mistica-movistar-new-darkModeBlack);
775
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-movistar-new-raw-white), 0.05);
776
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-movistar-new-raw-white), 0.08);
777
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-movistar-new-raw-white), 0.03);
778
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-movistar-new-raw-white), 0.05);
779
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-movistar-new-raw-white), 0.03);
780
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-movistar-new-raw-white), 0.05);
781
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-movistar-new-raw-white), 0.03);
782
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-movistar-new-raw-white), 0.05);
739
783
  --mistica-color-skeletonWave: var(--mistica-movistar-new-grey600);
740
784
  --mistica-color-borderLow: var(--mistica-movistar-new-darkModeBlack);
741
785
  --mistica-color-border: var(--mistica-movistar-new-darkModeGrey);
@@ -1058,6 +1102,26 @@
1058
1102
  --mistica-color-backgroundBrandBottom: var(--mistica-movistar-new-movistarBlue);
1059
1103
  --mistica-color-appBarBackground: var(--mistica-movistar-new-white);
1060
1104
  --mistica-color-navigationBarBackground: var(--mistica-movistar-new-movistarBlue);
1105
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-movistar-new-raw-movistarBlue), 0.05);
1106
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-movistar-new-raw-movistarBlue), 0.08);
1107
+ --mistica-color-backgroundDropZoneBrandHover: rgba(
1108
+ var(--mistica-movistar-new-raw-movistarBlack),
1109
+ 0.08
1110
+ );
1111
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(
1112
+ var(--mistica-movistar-new-raw-movistarBlack),
1113
+ 0.1
1114
+ );
1115
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-movistar-new-raw-white), 0.1);
1116
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-movistar-new-raw-white), 0.17);
1117
+ --mistica-color-backgroundDropZoneMediaHover: rgba(
1118
+ var(--mistica-movistar-new-raw-movistarBlack),
1119
+ 0.2
1120
+ );
1121
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(
1122
+ var(--mistica-movistar-new-raw-movistarBlack),
1123
+ 0.4
1124
+ );
1061
1125
  --mistica-color-skeletonWave: var(--mistica-movistar-new-grey200);
1062
1126
  --mistica-color-borderLow: var(--mistica-movistar-new-grey100);
1063
1127
  --mistica-color-border: var(--mistica-movistar-new-grey300);
@@ -1359,6 +1423,8 @@
1359
1423
  --mistica-line-height-10: 4rem;
1360
1424
  --mistica-font-size-cardTitle: 1.5rem;
1361
1425
  --mistica-line-height-cardTitle: 1.75rem;
1426
+ --mistica-font-size-drawerTitle: 1.25rem;
1427
+ --mistica-line-height-drawerTitle: 1.625rem;
1362
1428
 
1363
1429
  --mistica-font-size-tabsLabel: 1.125rem;
1364
1430
  --mistica-line-height-tabsLabel: 1.5rem;
@@ -1374,6 +1440,22 @@
1374
1440
 
1375
1441
  --mistica-font-size-chipLabel: 1.125rem;
1376
1442
  --mistica-line-height-chipLabel: 1.5rem;
1443
+ --mistica-font-size-cardPretitleSnap: 0.875rem;
1444
+ --mistica-line-height-cardPretitleSnap: 1.25rem;
1445
+ --mistica-font-size-cardTitleSnap: 0.875rem;
1446
+ --mistica-line-height-cardTitleSnap: 1.25rem;
1447
+ --mistica-font-size-cardSubtitleSnap: 0.875rem;
1448
+ --mistica-line-height-cardSubtitleSnap: 1.25rem;
1449
+ --mistica-font-size-cardDescriptionSnap: 0.875rem;
1450
+ --mistica-line-height-cardDescriptionSnap: 1.25rem;
1451
+ --mistica-font-size-cardPretitleDefault: 0.875rem;
1452
+ --mistica-line-height-cardPretitleDefault: 1.25rem;
1453
+ --mistica-font-size-cardTitleDefault: 1.125rem;
1454
+ --mistica-line-height-cardTitleDefault: 1.5rem;
1455
+ --mistica-font-size-cardSubtitleDefault: 0.875rem;
1456
+ --mistica-line-height-cardSubtitleDefault: 1.25rem;
1457
+ --mistica-font-size-cardDescriptionDefault: 0.875rem;
1458
+ --mistica-line-height-cardDescriptionDefault: 1.25rem;
1377
1459
  --mistica-font-size-inputLabel: 0.875rem;
1378
1460
  --mistica-line-height-inputLabel: 1.25rem;
1379
1461
  --mistica-font-size-inputValue: 1rem;
package/css/movistar.css CHANGED
@@ -7,16 +7,16 @@
7
7
  --mistica-movistar-pepper10: #ffebed;
8
8
  --mistica-movistar-movistarBlue55: #008edd;
9
9
  --mistica-movistar-grey2: #eeeeee;
10
+ --mistica-movistar-movistarBlue10: #e6f5fd;
11
+ --mistica-movistar-movistarBlue15: #ceebfb;
10
12
  --mistica-movistar-grey3: #dddddd;
11
13
  --mistica-movistar-grey5: #6b6c6f;
12
14
  --mistica-movistar-pepper55: #d73241;
13
15
  --mistica-movistar-pepper70: #b22634;
14
16
  --mistica-movistar-pepper65: #bf2937;
15
- --mistica-movistar-movistarBlue10: #e6f5fd;
16
17
  --mistica-movistar-movistarBlueHC: #066fcb;
17
18
  --mistica-movistar-movistarBlueHC55: #055eac;
18
19
  --mistica-movistar-movistarBlueHC65: #055398;
19
- --mistica-movistar-movistarBlue15: #ceebfb;
20
20
  --mistica-movistar-pepper60: #cc2c3b;
21
21
  --mistica-movistar-movistarBlue30: #80cef9;
22
22
  --mistica-movistar-grey4: #949494;
@@ -77,6 +77,14 @@
77
77
  --mistica-color-backgroundBrandBottom: var(--mistica-movistar-movistarBlue);
78
78
  --mistica-color-appBarBackground: var(--mistica-movistar-white);
79
79
  --mistica-color-navigationBarBackground: var(--mistica-movistar-movistarBlue);
80
+ --mistica-color-backgroundDropZoneHover: var(--mistica-movistar-movistarBlue10);
81
+ --mistica-color-backgroundDropZoneDragover: var(--mistica-movistar-movistarBlue15);
82
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-movistar-raw-black), 0.1);
83
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-movistar-raw-black), 0.2);
84
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-movistar-raw-white), 0.1);
85
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-movistar-raw-white), 0.17);
86
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-movistar-raw-black), 0.1);
87
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-movistar-raw-black), 0.2);
80
88
  --mistica-color-skeletonWave: var(--mistica-movistar-grey2);
81
89
  --mistica-color-borderLow: var(--mistica-movistar-grey1);
82
90
  --mistica-color-border: var(--mistica-movistar-grey3);
@@ -378,6 +386,9 @@
378
386
  --mistica-font-size-cardTitle: 1.25rem;
379
387
  --mistica-line-height-cardTitle: 1.5rem;
380
388
  --mistica-font-weight-cardTitle: 700;
389
+ --mistica-font-size-drawerTitle: 1.25rem;
390
+ --mistica-line-height-drawerTitle: 1.5rem;
391
+ --mistica-font-weight-drawerTitle: 700;
381
392
  --mistica-font-weight-rowTitle: 400;
382
393
  --mistica-font-weight-button: 500;
383
394
  --mistica-font-size-tabsLabel: 1rem;
@@ -401,6 +412,22 @@
401
412
  --mistica-font-size-chipLabel: 0.875rem;
402
413
  --mistica-line-height-chipLabel: 1.25rem;
403
414
  --mistica-font-weight-chipLabel: 500;
415
+ --mistica-font-size-cardPretitleSnap: 0.875rem;
416
+ --mistica-line-height-cardPretitleSnap: 1.25rem;
417
+ --mistica-font-size-cardTitleSnap: 0.875rem;
418
+ --mistica-line-height-cardTitleSnap: 1.25rem;
419
+ --mistica-font-size-cardSubtitleSnap: 0.875rem;
420
+ --mistica-line-height-cardSubtitleSnap: 1.25rem;
421
+ --mistica-font-size-cardDescriptionSnap: 0.875rem;
422
+ --mistica-line-height-cardDescriptionSnap: 1.25rem;
423
+ --mistica-font-size-cardPretitleDefault: 0.875rem;
424
+ --mistica-line-height-cardPretitleDefault: 1.25rem;
425
+ --mistica-font-size-cardTitleDefault: 1.125rem;
426
+ --mistica-line-height-cardTitleDefault: 1.5rem;
427
+ --mistica-font-size-cardSubtitleDefault: 0.875rem;
428
+ --mistica-line-height-cardSubtitleDefault: 1.25rem;
429
+ --mistica-font-size-cardDescriptionDefault: 0.875rem;
430
+ --mistica-line-height-cardDescriptionDefault: 1.25rem;
404
431
  --mistica-font-size-inputLabel: 0.75rem;
405
432
  --mistica-line-height-inputLabel: 1rem;
406
433
  --mistica-font-size-inputValue: 1rem;
@@ -439,6 +466,14 @@
439
466
  --mistica-color-backgroundBrandBottom: var(--mistica-movistar-darkModeBlack);
440
467
  --mistica-color-appBarBackground: var(--mistica-movistar-darkModeGrey);
441
468
  --mistica-color-navigationBarBackground: var(--mistica-movistar-darkModeBlack);
469
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-movistar-raw-white), 0.05);
470
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-movistar-raw-white), 0.08);
471
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-movistar-raw-white), 0.03);
472
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-movistar-raw-white), 0.05);
473
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-movistar-raw-white), 0.15);
474
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-movistar-raw-white), 0.25);
475
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-movistar-raw-white), 0.03);
476
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-movistar-raw-white), 0.05);
442
477
  --mistica-color-skeletonWave: var(--mistica-movistar-darkModeGrey6);
443
478
  --mistica-color-borderLow: var(--mistica-movistar-darkModeBlack);
444
479
  --mistica-color-border: var(--mistica-movistar-darkModeGrey);
@@ -723,6 +758,14 @@
723
758
  --mistica-color-backgroundBrandBottom: var(--mistica-movistar-darkModeBlack);
724
759
  --mistica-color-appBarBackground: var(--mistica-movistar-darkModeGrey);
725
760
  --mistica-color-navigationBarBackground: var(--mistica-movistar-darkModeBlack);
761
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-movistar-raw-white), 0.05);
762
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-movistar-raw-white), 0.08);
763
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-movistar-raw-white), 0.03);
764
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-movistar-raw-white), 0.05);
765
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-movistar-raw-white), 0.15);
766
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-movistar-raw-white), 0.25);
767
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-movistar-raw-white), 0.03);
768
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-movistar-raw-white), 0.05);
726
769
  --mistica-color-skeletonWave: var(--mistica-movistar-darkModeGrey6);
727
770
  --mistica-color-borderLow: var(--mistica-movistar-darkModeBlack);
728
771
  --mistica-color-border: var(--mistica-movistar-darkModeGrey);
@@ -1018,6 +1061,14 @@
1018
1061
  --mistica-color-backgroundBrandBottom: var(--mistica-movistar-movistarBlue);
1019
1062
  --mistica-color-appBarBackground: var(--mistica-movistar-white);
1020
1063
  --mistica-color-navigationBarBackground: var(--mistica-movistar-movistarBlue);
1064
+ --mistica-color-backgroundDropZoneHover: var(--mistica-movistar-movistarBlue10);
1065
+ --mistica-color-backgroundDropZoneDragover: var(--mistica-movistar-movistarBlue15);
1066
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-movistar-raw-black), 0.1);
1067
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-movistar-raw-black), 0.2);
1068
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-movistar-raw-white), 0.1);
1069
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-movistar-raw-white), 0.17);
1070
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-movistar-raw-black), 0.1);
1071
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-movistar-raw-black), 0.2);
1021
1072
  --mistica-color-skeletonWave: var(--mistica-movistar-grey2);
1022
1073
  --mistica-color-borderLow: var(--mistica-movistar-grey1);
1023
1074
  --mistica-color-border: var(--mistica-movistar-grey3);
@@ -1304,6 +1355,8 @@
1304
1355
  --mistica-line-height-10: 4.5rem;
1305
1356
  --mistica-font-size-cardTitle: 1.5rem;
1306
1357
  --mistica-line-height-cardTitle: 1.75rem;
1358
+ --mistica-font-size-drawerTitle: 1.75rem;
1359
+ --mistica-line-height-drawerTitle: 2rem;
1307
1360
 
1308
1361
  --mistica-font-size-tabsLabel: 1.125rem;
1309
1362
  --mistica-line-height-tabsLabel: 1.5rem;
@@ -1319,6 +1372,22 @@
1319
1372
 
1320
1373
  --mistica-font-size-chipLabel: 1rem;
1321
1374
  --mistica-line-height-chipLabel: 1.5rem;
1375
+ --mistica-font-size-cardPretitleSnap: 1rem;
1376
+ --mistica-line-height-cardPretitleSnap: 1.5rem;
1377
+ --mistica-font-size-cardTitleSnap: 1rem;
1378
+ --mistica-line-height-cardTitleSnap: 1.5rem;
1379
+ --mistica-font-size-cardSubtitleSnap: 1rem;
1380
+ --mistica-line-height-cardSubtitleSnap: 1.5rem;
1381
+ --mistica-font-size-cardDescriptionSnap: 1rem;
1382
+ --mistica-line-height-cardDescriptionSnap: 1.5rem;
1383
+ --mistica-font-size-cardPretitleDefault: 1rem;
1384
+ --mistica-line-height-cardPretitleDefault: 1.5rem;
1385
+ --mistica-font-size-cardTitleDefault: 1.25rem;
1386
+ --mistica-line-height-cardTitleDefault: 1.75rem;
1387
+ --mistica-font-size-cardSubtitleDefault: 1rem;
1388
+ --mistica-line-height-cardSubtitleDefault: 1.5rem;
1389
+ --mistica-font-size-cardDescriptionDefault: 1rem;
1390
+ --mistica-line-height-cardDescriptionDefault: 1.5rem;
1322
1391
  --mistica-font-size-inputLabel: 0.875rem;
1323
1392
  --mistica-line-height-inputLabel: 1.25rem;
1324
1393
  --mistica-font-size-inputValue: 1.125rem;
package/css/o2-new.css CHANGED
@@ -43,6 +43,8 @@
43
43
  /* Raw palette colors, for use with rgba() */
44
44
  --mistica-o2-new-raw-darkModeBlack: 0, 0, 28;
45
45
  --mistica-o2-new-raw-black: 0, 0, 30;
46
+ --mistica-o2-new-raw-beyondBlue: 0, 80, 255;
47
+ --mistica-o2-new-raw-beyondBlue90: 0, 16, 51;
46
48
  --mistica-o2-new-raw-white: 255, 255, 255;
47
49
  --mistica-o2-new-raw-darkModeGrey: 8, 19, 43;
48
50
 
@@ -82,6 +84,14 @@
82
84
  --mistica-color-backgroundBrandBottom: var(--mistica-o2-new-beyondBlue45);
83
85
  --mistica-color-appBarBackground: var(--mistica-o2-new-white);
84
86
  --mistica-color-navigationBarBackground: var(--mistica-o2-new-darkBlue);
87
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-o2-new-raw-beyondBlue), 0.05);
88
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-o2-new-raw-beyondBlue), 0.08);
89
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-o2-new-raw-beyondBlue90), 0.2);
90
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-o2-new-raw-beyondBlue90), 0.4);
91
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-o2-new-raw-white), 0.1);
92
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-o2-new-raw-white), 0.17);
93
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-o2-new-raw-beyondBlue90), 0.2);
94
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-o2-new-raw-beyondBlue90), 0.4);
85
95
  --mistica-color-skeletonWave: var(--mistica-o2-new-grey30);
86
96
  --mistica-color-borderLow: var(--mistica-o2-new-grey20);
87
97
  --mistica-color-border: var(--mistica-o2-new-grey30);
@@ -383,6 +393,9 @@
383
393
  --mistica-font-size-cardTitle: 1.25rem;
384
394
  --mistica-line-height-cardTitle: 1.5rem;
385
395
  --mistica-font-weight-cardTitle: 500;
396
+ --mistica-font-size-drawerTitle: 1.25rem;
397
+ --mistica-line-height-drawerTitle: 1.5rem;
398
+ --mistica-font-weight-drawerTitle: 700;
386
399
  --mistica-font-weight-rowTitle: 400;
387
400
  --mistica-font-weight-button: 500;
388
401
  --mistica-font-size-tabsLabel: 1rem;
@@ -406,6 +419,22 @@
406
419
  --mistica-font-size-chipLabel: 0.875rem;
407
420
  --mistica-line-height-chipLabel: 1.25rem;
408
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;
409
438
  --mistica-font-size-inputLabel: 0.75rem;
410
439
  --mistica-line-height-inputLabel: 1rem;
411
440
  --mistica-font-size-inputValue: 1rem;
@@ -443,6 +472,14 @@
443
472
  --mistica-color-backgroundBrandTop: var(--mistica-o2-new-darkModeBlack);
444
473
  --mistica-color-backgroundBrandBottom: var(--mistica-o2-new-darkModeBlack);
445
474
  --mistica-color-appBarBackground: var(--mistica-o2-new-darkModeGrey);
475
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-o2-new-raw-white), 0.05);
476
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-o2-new-raw-white), 0.08);
477
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-o2-new-raw-white), 0.03);
478
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-o2-new-raw-white), 0.05);
479
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-o2-new-raw-white), 0.03);
480
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-o2-new-raw-white), 0.05);
481
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-o2-new-raw-white), 0.03);
482
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-o2-new-raw-white), 0.05);
446
483
  --mistica-color-navigationBarBackground: var(--mistica-o2-new-darkModeBlack);
447
484
  --mistica-color-skeletonWave: var(--mistica-o2-new-grey80);
448
485
  --mistica-color-borderLow: var(--mistica-o2-new-darkModeBlack);
@@ -727,6 +764,14 @@
727
764
  --mistica-color-backgroundBrandTop: var(--mistica-o2-new-darkModeBlack);
728
765
  --mistica-color-backgroundBrandBottom: var(--mistica-o2-new-darkModeBlack);
729
766
  --mistica-color-appBarBackground: var(--mistica-o2-new-darkModeGrey);
767
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-o2-new-raw-white), 0.05);
768
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-o2-new-raw-white), 0.08);
769
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-o2-new-raw-white), 0.03);
770
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-o2-new-raw-white), 0.05);
771
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-o2-new-raw-white), 0.03);
772
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-o2-new-raw-white), 0.05);
773
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-o2-new-raw-white), 0.03);
774
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-o2-new-raw-white), 0.05);
730
775
  --mistica-color-navigationBarBackground: var(--mistica-o2-new-darkModeBlack);
731
776
  --mistica-color-skeletonWave: var(--mistica-o2-new-grey80);
732
777
  --mistica-color-borderLow: var(--mistica-o2-new-darkModeBlack);
@@ -1023,6 +1068,14 @@
1023
1068
  --mistica-color-backgroundBrandTop: var(--mistica-o2-new-darkBlue);
1024
1069
  --mistica-color-backgroundBrandBottom: var(--mistica-o2-new-beyondBlue45);
1025
1070
  --mistica-color-appBarBackground: var(--mistica-o2-new-white);
1071
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-o2-new-raw-beyondBlue), 0.05);
1072
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-o2-new-raw-beyondBlue), 0.08);
1073
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-o2-new-raw-beyondBlue90), 0.2);
1074
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-o2-new-raw-beyondBlue90), 0.4);
1075
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-o2-new-raw-white), 0.1);
1076
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-o2-new-raw-white), 0.17);
1077
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-o2-new-raw-beyondBlue90), 0.2);
1078
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-o2-new-raw-beyondBlue90), 0.4);
1026
1079
  --mistica-color-navigationBarBackground: var(--mistica-o2-new-darkBlue);
1027
1080
  --mistica-color-skeletonWave: var(--mistica-o2-new-grey30);
1028
1081
  --mistica-color-borderLow: var(--mistica-o2-new-grey20);
@@ -1307,6 +1360,8 @@
1307
1360
  --mistica-line-height-10: 4.5rem;
1308
1361
  --mistica-font-size-cardTitle: 1.5rem;
1309
1362
  --mistica-line-height-cardTitle: 1.75rem;
1363
+ --mistica-font-size-drawerTitle: 1.75rem;
1364
+ --mistica-line-height-drawerTitle: 2rem;
1310
1365
 
1311
1366
  --mistica-font-size-tabsLabel: 1.125rem;
1312
1367
  --mistica-line-height-tabsLabel: 1.5rem;
@@ -1322,6 +1377,22 @@
1322
1377
 
1323
1378
  --mistica-font-size-chipLabel: 1rem;
1324
1379
  --mistica-line-height-chipLabel: 1.5rem;
1380
+ --mistica-font-size-cardPretitleSnap: 1rem;
1381
+ --mistica-line-height-cardPretitleSnap: 1.5rem;
1382
+ --mistica-font-size-cardTitleSnap: 1rem;
1383
+ --mistica-line-height-cardTitleSnap: 1.5rem;
1384
+ --mistica-font-size-cardSubtitleSnap: 1rem;
1385
+ --mistica-line-height-cardSubtitleSnap: 1.5rem;
1386
+ --mistica-font-size-cardDescriptionSnap: 1rem;
1387
+ --mistica-line-height-cardDescriptionSnap: 1.5rem;
1388
+ --mistica-font-size-cardPretitleDefault: 1rem;
1389
+ --mistica-line-height-cardPretitleDefault: 1.5rem;
1390
+ --mistica-font-size-cardTitleDefault: 1.25rem;
1391
+ --mistica-line-height-cardTitleDefault: 1.75rem;
1392
+ --mistica-font-size-cardSubtitleDefault: 1rem;
1393
+ --mistica-line-height-cardSubtitleDefault: 1.5rem;
1394
+ --mistica-font-size-cardDescriptionDefault: 1rem;
1395
+ --mistica-line-height-cardDescriptionDefault: 1.5rem;
1325
1396
  --mistica-font-size-inputLabel: 0.875rem;
1326
1397
  --mistica-line-height-inputLabel: 1.25rem;
1327
1398
  --mistica-font-size-inputValue: 1.125rem;
package/css/o2.css CHANGED
@@ -38,6 +38,7 @@
38
38
  /* Raw palette colors, for use with rgba() */
39
39
  --mistica-o2-raw-darkModeBlack: 25, 25, 25;
40
40
  --mistica-o2-raw-grey6: 0, 0, 51;
41
+ --mistica-o2-raw-o2BluePrimary90: 0, 0, 51;
41
42
  --mistica-o2-raw-white: 255, 255, 255;
42
43
  --mistica-o2-raw-black: 0, 0, 0;
43
44
  --mistica-o2-raw-darkModeGrey: 36, 36, 36;
@@ -68,6 +69,14 @@
68
69
  --mistica-color-backgroundBrandBottom: var(--mistica-o2-o2BluePrimary);
69
70
  --mistica-color-appBarBackground: var(--mistica-o2-white);
70
71
  --mistica-color-navigationBarBackground: var(--mistica-o2-o2BluePrimary);
72
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-o2-raw-o2BluePrimary90), 0.05);
73
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-o2-raw-o2BluePrimary90), 0.08);
74
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-o2-raw-o2BluePrimary90), 0.4);
75
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-o2-raw-o2BluePrimary90), 0.8);
76
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-o2-raw-white), 0.1);
77
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-o2-raw-white), 0.17);
78
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-o2-raw-o2BluePrimary90), 0.4);
79
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-o2-raw-o2BluePrimary90), 0.8);
71
80
  --mistica-color-skeletonWave: var(--mistica-o2-grey2);
72
81
  --mistica-color-borderLow: var(--mistica-o2-grey1);
73
82
  --mistica-color-border: var(--mistica-o2-grey3);
@@ -369,6 +378,9 @@
369
378
  --mistica-font-size-cardTitle: 1.25rem;
370
379
  --mistica-line-height-cardTitle: 1.5rem;
371
380
  --mistica-font-weight-cardTitle: 400;
381
+ --mistica-font-size-drawerTitle: 1.25rem;
382
+ --mistica-line-height-drawerTitle: 1.5rem;
383
+ --mistica-font-weight-drawerTitle: 300;
372
384
  --mistica-font-weight-rowTitle: 400;
373
385
  --mistica-font-weight-button: 500;
374
386
  --mistica-font-size-tabsLabel: 1rem;
@@ -392,6 +404,22 @@
392
404
  --mistica-font-size-chipLabel: 0.875rem;
393
405
  --mistica-line-height-chipLabel: 1.25rem;
394
406
  --mistica-font-weight-chipLabel: 500;
407
+ --mistica-font-size-cardPretitleSnap: 0.875rem;
408
+ --mistica-line-height-cardPretitleSnap: 1.25rem;
409
+ --mistica-font-size-cardTitleSnap: 0.875rem;
410
+ --mistica-line-height-cardTitleSnap: 1.25rem;
411
+ --mistica-font-size-cardSubtitleSnap: 0.875rem;
412
+ --mistica-line-height-cardSubtitleSnap: 1.25rem;
413
+ --mistica-font-size-cardDescriptionSnap: 0.875rem;
414
+ --mistica-line-height-cardDescriptionSnap: 1.25rem;
415
+ --mistica-font-size-cardPretitleDefault: 0.875rem;
416
+ --mistica-line-height-cardPretitleDefault: 1.25rem;
417
+ --mistica-font-size-cardTitleDefault: 1.125rem;
418
+ --mistica-line-height-cardTitleDefault: 1.5rem;
419
+ --mistica-font-size-cardSubtitleDefault: 0.875rem;
420
+ --mistica-line-height-cardSubtitleDefault: 1.25rem;
421
+ --mistica-font-size-cardDescriptionDefault: 0.875rem;
422
+ --mistica-line-height-cardDescriptionDefault: 1.25rem;
395
423
  --mistica-font-size-inputLabel: 0.75rem;
396
424
  --mistica-line-height-inputLabel: 1rem;
397
425
  --mistica-font-size-inputValue: 1rem;
@@ -430,6 +458,14 @@
430
458
  --mistica-color-backgroundBrandBottom: var(--mistica-o2-darkModeBlack);
431
459
  --mistica-color-appBarBackground: var(--mistica-o2-darkModeGrey);
432
460
  --mistica-color-navigationBarBackground: var(--mistica-o2-darkModeBlack);
461
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-o2-raw-white), 0.03);
462
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-o2-raw-white), 0.05);
463
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-o2-raw-white), 0.03);
464
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-o2-raw-white), 0.05);
465
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-o2-raw-white), 0.03);
466
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-o2-raw-white), 0.05);
467
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-o2-raw-white), 0.03);
468
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-o2-raw-white), 0.05);
433
469
  --mistica-color-skeletonWave: var(--mistica-o2-grey5);
434
470
  --mistica-color-borderLow: var(--mistica-o2-darkModeBlack);
435
471
  --mistica-color-border: var(--mistica-o2-darkModeGrey);
@@ -714,6 +750,14 @@
714
750
  --mistica-color-backgroundBrandBottom: var(--mistica-o2-darkModeBlack);
715
751
  --mistica-color-appBarBackground: var(--mistica-o2-darkModeGrey);
716
752
  --mistica-color-navigationBarBackground: var(--mistica-o2-darkModeBlack);
753
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-o2-raw-white), 0.03);
754
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-o2-raw-white), 0.05);
755
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-o2-raw-white), 0.03);
756
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-o2-raw-white), 0.05);
757
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-o2-raw-white), 0.03);
758
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-o2-raw-white), 0.05);
759
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-o2-raw-white), 0.03);
760
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-o2-raw-white), 0.05);
717
761
  --mistica-color-skeletonWave: var(--mistica-o2-grey5);
718
762
  --mistica-color-borderLow: var(--mistica-o2-darkModeBlack);
719
763
  --mistica-color-border: var(--mistica-o2-darkModeGrey);
@@ -997,6 +1041,14 @@
997
1041
  --mistica-color-backgroundBrandBottom: var(--mistica-o2-o2BluePrimary);
998
1042
  --mistica-color-appBarBackground: var(--mistica-o2-white);
999
1043
  --mistica-color-navigationBarBackground: var(--mistica-o2-o2BluePrimary);
1044
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-o2-raw-o2BluePrimary90), 0.05);
1045
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-o2-raw-o2BluePrimary90), 0.08);
1046
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-o2-raw-o2BluePrimary90), 0.4);
1047
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-o2-raw-o2BluePrimary90), 0.8);
1048
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-o2-raw-white), 0.1);
1049
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-o2-raw-white), 0.17);
1050
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-o2-raw-o2BluePrimary90), 0.4);
1051
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-o2-raw-o2BluePrimary90), 0.8);
1000
1052
  --mistica-color-skeletonWave: var(--mistica-o2-grey2);
1001
1053
  --mistica-color-borderLow: var(--mistica-o2-grey1);
1002
1054
  --mistica-color-border: var(--mistica-o2-grey3);
@@ -1280,6 +1332,8 @@
1280
1332
  --mistica-line-height-10: 4.5rem;
1281
1333
  --mistica-font-size-cardTitle: 1.5rem;
1282
1334
  --mistica-line-height-cardTitle: 1.75rem;
1335
+ --mistica-font-size-drawerTitle: 1.75rem;
1336
+ --mistica-line-height-drawerTitle: 2rem;
1283
1337
 
1284
1338
  --mistica-font-size-tabsLabel: 1.125rem;
1285
1339
  --mistica-line-height-tabsLabel: 1.5rem;
@@ -1295,6 +1349,22 @@
1295
1349
 
1296
1350
  --mistica-font-size-chipLabel: 1rem;
1297
1351
  --mistica-line-height-chipLabel: 1.5rem;
1352
+ --mistica-font-size-cardPretitleSnap: 1rem;
1353
+ --mistica-line-height-cardPretitleSnap: 1.5rem;
1354
+ --mistica-font-size-cardTitleSnap: 1rem;
1355
+ --mistica-line-height-cardTitleSnap: 1.5rem;
1356
+ --mistica-font-size-cardSubtitleSnap: 1rem;
1357
+ --mistica-line-height-cardSubtitleSnap: 1.5rem;
1358
+ --mistica-font-size-cardDescriptionSnap: 1rem;
1359
+ --mistica-line-height-cardDescriptionSnap: 1.5rem;
1360
+ --mistica-font-size-cardPretitleDefault: 1rem;
1361
+ --mistica-line-height-cardPretitleDefault: 1.5rem;
1362
+ --mistica-font-size-cardTitleDefault: 1.25rem;
1363
+ --mistica-line-height-cardTitleDefault: 1.75rem;
1364
+ --mistica-font-size-cardSubtitleDefault: 1rem;
1365
+ --mistica-line-height-cardSubtitleDefault: 1.5rem;
1366
+ --mistica-font-size-cardDescriptionDefault: 1rem;
1367
+ --mistica-line-height-cardDescriptionDefault: 1.5rem;
1298
1368
  --mistica-font-size-inputLabel: 0.875rem;
1299
1369
  --mistica-line-height-inputLabel: 1.25rem;
1300
1370
  --mistica-font-size-inputValue: 1.125rem;