@telefonica/mistica 16.36.0 → 16.37.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 (333) hide show
  1. package/css/blau.css +96 -24
  2. package/css/esimflag.css +93 -21
  3. package/css/mistica-common.css +9 -4
  4. package/css/mistica.css +1 -1
  5. package/css/movistar.css +101 -29
  6. package/css/o2-new.css +99 -28
  7. package/css/o2.css +93 -21
  8. package/css/telefonica.css +96 -24
  9. package/css/tu.css +96 -24
  10. package/css/vivo-new.css +96 -24
  11. package/css/vivo.css +96 -24
  12. package/dist/accordion.css-mistica.js +10 -10
  13. package/dist/align.css-mistica.js +1 -1
  14. package/dist/avatar.css-mistica.js +2 -2
  15. package/dist/badge.css-mistica.js +2 -2
  16. package/dist/box.css-mistica.js +13 -13
  17. package/dist/box.js +5 -5
  18. package/dist/boxed.css-mistica.js +24 -24
  19. package/dist/boxed.d.ts +2 -1
  20. package/dist/boxed.js +10 -9
  21. package/dist/button-group.css-mistica.js +4 -4
  22. package/dist/button-group.js +2 -2
  23. package/dist/button-layout.css-mistica.js +18 -18
  24. package/dist/button.css-mistica.js +35 -35
  25. package/dist/callout.css-mistica.js +5 -5
  26. package/dist/card-cover.d.ts +126 -0
  27. package/dist/card-cover.js +185 -0
  28. package/dist/card-data.d.ts +63 -0
  29. package/dist/card-data.js +171 -0
  30. package/dist/card-internal.css-mistica.js +78 -0
  31. package/dist/card-internal.css.d.ts +17 -0
  32. package/dist/card-internal.d.ts +166 -0
  33. package/dist/card-internal.js +1063 -0
  34. package/dist/card-media.d.ts +78 -0
  35. package/dist/card-media.js +163 -0
  36. package/dist/card-naked.d.ts +11 -0
  37. package/dist/card-naked.js +154 -0
  38. package/dist/carousel.css-mistica.js +25 -25
  39. package/dist/checkbox.css-mistica.js +9 -9
  40. package/dist/checkbox.js +2 -2
  41. package/dist/chip.css-mistica.js +15 -15
  42. package/dist/circle.css-mistica.js +1 -1
  43. package/dist/community/advanced-data-card.css-mistica.js +24 -24
  44. package/dist/community/advanced-data-card.d.ts +1 -1
  45. package/dist/community/advanced-data-card.js +7 -7
  46. package/dist/community/blocks.css-mistica.js +1 -1
  47. package/dist/community/example-component.css-mistica.js +1 -1
  48. package/dist/counter.css-mistica.js +9 -9
  49. package/dist/counter.js +8 -8
  50. package/dist/cover-hero-media.js +9 -9
  51. package/dist/cover-hero.css-mistica.js +15 -15
  52. package/dist/credit-card-number-field.css-mistica.js +3 -3
  53. package/dist/date-field.css-mistica.js +1 -1
  54. package/dist/date-time-picker.css-mistica.js +1 -1
  55. package/dist/dialog.css-mistica.js +12 -12
  56. package/dist/dialog.js +14 -14
  57. package/dist/divider.css-mistica.js +2 -2
  58. package/dist/double-field.css-mistica.js +4 -4
  59. package/dist/drawer.css-mistica.js +2 -2
  60. package/dist/empty-state-card.css-mistica.js +1 -1
  61. package/dist/empty-state.css-mistica.js +6 -6
  62. package/dist/fade-in.css-mistica.js +1 -1
  63. package/dist/feedback.css-mistica.js +4 -4
  64. package/dist/fixed-footer-layout.css-mistica.js +10 -10
  65. package/dist/fixed-footer-layout.js +5 -5
  66. package/dist/form.css-mistica.js +1 -1
  67. package/dist/form.js +5 -5
  68. package/dist/grid-layout.css-mistica.js +3 -3
  69. package/dist/grid.css-mistica.js +122 -122
  70. package/dist/header.css-mistica.js +3 -3
  71. package/dist/hero.css-mistica.js +6 -6
  72. package/dist/hooks.d.ts +4 -0
  73. package/dist/hooks.js +94 -83
  74. package/dist/horizontal-scroll.css-mistica.js +1 -1
  75. package/dist/horizontal-scroll.js +2 -2
  76. package/dist/icon-button.css-mistica.js +47 -47
  77. package/dist/icon-button.js +3 -3
  78. package/dist/icons/icon-chevron.css-mistica.js +2 -2
  79. package/dist/icons/icon-error.css-mistica.js +1 -1
  80. package/dist/image.css-mistica.js +5 -5
  81. package/dist/image.d.ts +2 -0
  82. package/dist/image.js +24 -20
  83. package/dist/index.d.ts +18 -3
  84. package/dist/index.js +28 -13
  85. package/dist/inline.css-mistica.js +10 -10
  86. package/dist/list.css-mistica.js +30 -15
  87. package/dist/list.css.d.ts +5 -0
  88. package/dist/list.d.ts +16 -1
  89. package/dist/list.js +158 -99
  90. package/dist/loading-bar.css-mistica.js +1 -1
  91. package/dist/loading-bar.js +2 -2
  92. package/dist/loading-screen.css-mistica.js +9 -9
  93. package/dist/loading-screen.js +3 -3
  94. package/dist/logo.css-mistica.js +5 -5
  95. package/dist/menu.css-mistica.js +14 -14
  96. package/dist/menu.js +7 -7
  97. package/dist/mosaic.css-mistica.js +1 -1
  98. package/dist/navigation-bar.css-mistica.js +32 -32
  99. package/dist/navigation-breadcrumbs.css-mistica.js +3 -3
  100. package/dist/package-version.js +1 -1
  101. package/dist/pin-field.css-mistica.js +9 -9
  102. package/dist/pin-field.js +2 -2
  103. package/dist/popover.css-mistica.js +1 -1
  104. package/dist/progress-bar.css-mistica.js +4 -4
  105. package/dist/progress-bar.js +2 -2
  106. package/dist/radio-button.css-mistica.js +18 -18
  107. package/dist/radio-button.js +5 -5
  108. package/dist/rating.css-mistica.js +4 -4
  109. package/dist/rating.js +8 -8
  110. package/dist/responsive-layout.css-mistica.js +5 -5
  111. package/dist/responsive-layout.js +6 -6
  112. package/dist/screen-reader-only.css-mistica.js +1 -1
  113. package/dist/select.css-mistica.js +18 -18
  114. package/dist/select.js +9 -9
  115. package/dist/sheet-action-row.css-mistica.js +1 -1
  116. package/dist/sheet-common.css-mistica.js +12 -12
  117. package/dist/sheet-info.css-mistica.js +1 -1
  118. package/dist/skeletons.css-mistica.js +6 -6
  119. package/dist/skins/blau.js +50 -14
  120. package/dist/skins/esimflag.js +49 -13
  121. package/dist/skins/movistar.js +54 -18
  122. package/dist/skins/o2-new.js +49 -13
  123. package/dist/skins/o2.js +49 -13
  124. package/dist/skins/skin-contract.css-mistica.js +390 -354
  125. package/dist/skins/skin-contract.css.d.ts +48 -12
  126. package/dist/skins/telefonica.js +50 -14
  127. package/dist/skins/tu.js +50 -14
  128. package/dist/skins/types/colors.d.ts +24 -6
  129. package/dist/skins/vivo-new.js +50 -14
  130. package/dist/skins/vivo.js +50 -14
  131. package/dist/skip-link.css-mistica.js +2 -2
  132. package/dist/slider.css-mistica.js +13 -13
  133. package/dist/slider.js +9 -9
  134. package/dist/snackbar.css-mistica.js +7 -7
  135. package/dist/spinner.css-mistica.js +1 -1
  136. package/dist/stack.css-mistica.js +5 -5
  137. package/dist/stacking-group.css-mistica.js +1 -1
  138. package/dist/stepper.css-mistica.js +8 -8
  139. package/dist/stepper.js +3 -3
  140. package/dist/switch-component.css-mistica.js +37 -37
  141. package/dist/table.css-mistica.js +8 -8
  142. package/dist/table.d.ts +1 -1
  143. package/dist/table.js +8 -8
  144. package/dist/tabs.css-mistica.js +17 -17
  145. package/dist/tag.css-mistica.js +1 -1
  146. package/dist/tag.js +10 -10
  147. package/dist/text-field-base.css-mistica.js +10 -10
  148. package/dist/text-field-base.js +8 -8
  149. package/dist/text-field-components.css-mistica.js +18 -18
  150. package/dist/text-field-components.js +2 -2
  151. package/dist/text-link.css-mistica.js +5 -5
  152. package/dist/text.css-mistica.js +7 -7
  153. package/dist/text.js +7 -7
  154. package/dist/theme-context.css-mistica.js +430 -394
  155. package/dist/theme-context.css.d.ts +48 -12
  156. package/dist/timeline.css-mistica.js +12 -12
  157. package/dist/timer.css-mistica.js +8 -8
  158. package/dist/tooltip.css-mistica.js +7 -7
  159. package/dist/touchable.css-mistica.js +1 -1
  160. package/dist/utils/aspect-ratio-support.css-mistica.js +5 -5
  161. package/dist/utils/aspect-ratio-support.d.ts +5 -0
  162. package/dist/utils/aspect-ratio-support.js +26 -15
  163. package/dist/utils/color.d.ts +11 -0
  164. package/dist/utils/color.js +27 -6
  165. package/dist/utils/headings.d.ts +3 -0
  166. package/dist/video.css-mistica.js +1 -1
  167. package/dist/video.js +2 -2
  168. package/dist/vivinho-loading-animation/vivinho-loading-animation.css-mistica.js +1 -1
  169. package/dist-es/accordion.css-mistica.js +7 -7
  170. package/dist-es/align.css-mistica.js +1 -1
  171. package/dist-es/avatar.css-mistica.js +2 -2
  172. package/dist-es/badge.css-mistica.js +2 -2
  173. package/dist-es/box.css-mistica.js +13 -13
  174. package/dist-es/box.js +9 -9
  175. package/dist-es/boxed.css-mistica.js +23 -23
  176. package/dist-es/boxed.js +20 -19
  177. package/dist-es/button-group.css-mistica.js +2 -2
  178. package/dist-es/button-group.js +4 -4
  179. package/dist-es/button-layout.css-mistica.js +15 -15
  180. package/dist-es/button.css-mistica.js +22 -22
  181. package/dist-es/callout.css-mistica.js +5 -5
  182. package/dist-es/callout.js +5 -5
  183. package/dist-es/card-cover.js +125 -0
  184. package/dist-es/card-data.js +110 -0
  185. package/dist-es/card-internal.css-mistica.js +22 -0
  186. package/dist-es/card-internal.js +992 -0
  187. package/dist-es/card-media.js +105 -0
  188. package/dist-es/card-naked.js +96 -0
  189. package/dist-es/carousel.css-mistica.js +9 -9
  190. package/dist-es/checkbox.css-mistica.js +8 -8
  191. package/dist-es/checkbox.js +6 -6
  192. package/dist-es/chip.css-mistica.js +13 -13
  193. package/dist-es/circle.css-mistica.js +1 -1
  194. package/dist-es/community/advanced-data-card.css-mistica.js +7 -7
  195. package/dist-es/community/advanced-data-card.js +29 -29
  196. package/dist-es/community/blocks.css-mistica.js +1 -1
  197. package/dist-es/community/example-component.css-mistica.js +1 -1
  198. package/dist-es/counter.css-mistica.js +2 -2
  199. package/dist-es/counter.js +8 -8
  200. package/dist-es/cover-hero-media.js +9 -9
  201. package/dist-es/cover-hero.css-mistica.js +4 -4
  202. package/dist-es/credit-card-number-field.css-mistica.js +3 -3
  203. package/dist-es/date-field.css-mistica.js +1 -1
  204. package/dist-es/date-time-picker.css-mistica.js +1 -1
  205. package/dist-es/dialog.css-mistica.js +5 -5
  206. package/dist-es/dialog.js +31 -31
  207. package/dist-es/divider.css-mistica.js +2 -2
  208. package/dist-es/double-field.css-mistica.js +4 -4
  209. package/dist-es/drawer.css-mistica.js +2 -2
  210. package/dist-es/empty-state-card.css-mistica.js +1 -1
  211. package/dist-es/empty-state.css-mistica.js +6 -6
  212. package/dist-es/empty-state.js +7 -7
  213. package/dist-es/fade-in.css-mistica.js +1 -1
  214. package/dist-es/feedback.css-mistica.js +2 -2
  215. package/dist-es/fixed-footer-layout.css-mistica.js +5 -5
  216. package/dist-es/fixed-footer-layout.js +5 -5
  217. package/dist-es/form.css-mistica.js +1 -1
  218. package/dist-es/form.js +5 -5
  219. package/dist-es/grid-layout.css-mistica.js +3 -3
  220. package/dist-es/grid.css-mistica.js +122 -122
  221. package/dist-es/grid.js +2 -2
  222. package/dist-es/header.css-mistica.js +2 -2
  223. package/dist-es/hero.css-mistica.js +3 -3
  224. package/dist-es/hooks.js +86 -78
  225. package/dist-es/horizontal-scroll.css-mistica.js +1 -1
  226. package/dist-es/horizontal-scroll.js +2 -2
  227. package/dist-es/icon-button.css-mistica.js +45 -45
  228. package/dist-es/icon-button.js +3 -3
  229. package/dist-es/icons/icon-chevron.css-mistica.js +2 -2
  230. package/dist-es/icons/icon-error.css-mistica.js +1 -1
  231. package/dist-es/image.css-mistica.js +4 -4
  232. package/dist-es/image.js +42 -38
  233. package/dist-es/index.js +1887 -1884
  234. package/dist-es/inline.css-mistica.js +10 -10
  235. package/dist-es/list.css-mistica.js +2 -2
  236. package/dist-es/list.js +226 -174
  237. package/dist-es/loading-bar.css-mistica.js +1 -1
  238. package/dist-es/loading-bar.js +6 -6
  239. package/dist-es/loading-screen.css-mistica.js +5 -5
  240. package/dist-es/loading-screen.js +8 -8
  241. package/dist-es/logo.css-mistica.js +5 -5
  242. package/dist-es/menu.css-mistica.js +13 -13
  243. package/dist-es/menu.js +7 -7
  244. package/dist-es/mosaic.css-mistica.js +1 -1
  245. package/dist-es/navigation-bar.css-mistica.js +17 -17
  246. package/dist-es/navigation-breadcrumbs.css-mistica.js +2 -2
  247. package/dist-es/package-version.js +1 -1
  248. package/dist-es/pin-field.css-mistica.js +2 -2
  249. package/dist-es/pin-field.js +8 -8
  250. package/dist-es/popover.css-mistica.js +1 -1
  251. package/dist-es/progress-bar.css-mistica.js +4 -4
  252. package/dist-es/progress-bar.js +10 -10
  253. package/dist-es/radio-button.css-mistica.js +16 -16
  254. package/dist-es/radio-button.js +5 -5
  255. package/dist-es/rating.css-mistica.js +3 -3
  256. package/dist-es/rating.js +12 -12
  257. package/dist-es/responsive-layout.css-mistica.js +5 -5
  258. package/dist-es/responsive-layout.js +15 -15
  259. package/dist-es/screen-reader-only.css-mistica.js +1 -1
  260. package/dist-es/select.css-mistica.js +17 -17
  261. package/dist-es/select.js +15 -15
  262. package/dist-es/sheet-action-row.css-mistica.js +1 -1
  263. package/dist-es/sheet-common.css-mistica.js +2 -2
  264. package/dist-es/sheet-info.css-mistica.js +1 -1
  265. package/dist-es/skeletons.css-mistica.js +5 -5
  266. package/dist-es/skins/blau.js +50 -14
  267. package/dist-es/skins/esimflag.js +49 -13
  268. package/dist-es/skins/movistar.js +54 -18
  269. package/dist-es/skins/o2-new.js +49 -13
  270. package/dist-es/skins/o2.js +49 -13
  271. package/dist-es/skins/skin-contract.css-mistica.js +390 -354
  272. package/dist-es/skins/telefonica.js +50 -14
  273. package/dist-es/skins/tu.js +52 -16
  274. package/dist-es/skins/vivo-new.js +52 -16
  275. package/dist-es/skins/vivo.js +52 -16
  276. package/dist-es/skip-link.css-mistica.js +2 -2
  277. package/dist-es/slider.css-mistica.js +11 -11
  278. package/dist-es/slider.js +9 -9
  279. package/dist-es/snackbar.css-mistica.js +5 -5
  280. package/dist-es/spinner.css-mistica.js +1 -1
  281. package/dist-es/stack.css-mistica.js +5 -5
  282. package/dist-es/stacking-group.css-mistica.js +1 -1
  283. package/dist-es/stepper.css-mistica.js +3 -3
  284. package/dist-es/stepper.js +3 -3
  285. package/dist-es/style.css +1 -1
  286. package/dist-es/switch-component.css-mistica.js +29 -29
  287. package/dist-es/table.css-mistica.js +8 -8
  288. package/dist-es/table.js +12 -12
  289. package/dist-es/tabs.css-mistica.js +14 -14
  290. package/dist-es/tag.css-mistica.js +1 -1
  291. package/dist-es/tag.js +17 -17
  292. package/dist-es/text-field-base.css-mistica.js +2 -2
  293. package/dist-es/text-field-base.js +16 -16
  294. package/dist-es/text-field-components.css-mistica.js +5 -5
  295. package/dist-es/text-field-components.js +4 -4
  296. package/dist-es/text-link.css-mistica.js +5 -5
  297. package/dist-es/text.css-mistica.js +7 -7
  298. package/dist-es/text.js +6 -6
  299. package/dist-es/theme-context.css-mistica.js +430 -394
  300. package/dist-es/timeline.css-mistica.js +11 -11
  301. package/dist-es/timeline.js +4 -4
  302. package/dist-es/timer.css-mistica.js +7 -7
  303. package/dist-es/tooltip.css-mistica.js +2 -2
  304. package/dist-es/touchable.css-mistica.js +1 -1
  305. package/dist-es/utils/aspect-ratio-support.css-mistica.js +4 -4
  306. package/dist-es/utils/aspect-ratio-support.js +31 -23
  307. package/dist-es/utils/color.js +23 -5
  308. package/dist-es/video.css-mistica.js +1 -1
  309. package/dist-es/video.js +5 -5
  310. package/dist-es/vivinho-loading-animation/vivinho-loading-animation.css-mistica.js +1 -1
  311. package/package.json +1 -1
  312. package/dist/card.css-mistica.js +0 -106
  313. package/dist/card.css.d.ts +0 -33
  314. package/dist/card.d.ts +0 -299
  315. package/dist/card.js +0 -1694
  316. package/dist/highlighted-card.css-mistica.js +0 -30
  317. package/dist/highlighted-card.css.d.ts +0 -7
  318. package/dist/highlighted-card.css.ts.vanilla.css-mistica.js +0 -11
  319. package/dist/highlighted-card.d.ts +0 -34
  320. package/dist/highlighted-card.js +0 -253
  321. package/dist/maybe-dismissable.css-mistica.js +0 -21
  322. package/dist/maybe-dismissable.css.ts.vanilla.css-mistica.js +0 -11
  323. package/dist/maybe-dismissable.js +0 -108
  324. package/dist-es/card.css-mistica.js +0 -8
  325. package/dist-es/card.js +0 -1599
  326. package/dist-es/highlighted-card.css-mistica.js +0 -7
  327. package/dist-es/highlighted-card.css.ts.vanilla.css-mistica.js +0 -2
  328. package/dist-es/highlighted-card.js +0 -198
  329. package/dist-es/maybe-dismissable.css-mistica.js +0 -4
  330. package/dist-es/maybe-dismissable.css.ts.vanilla.css-mistica.js +0 -2
  331. package/dist-es/maybe-dismissable.js +0 -45
  332. /package/dist/{card.css.ts.vanilla.css-mistica.js → card-internal.css.ts.vanilla.css-mistica.js} +0 -0
  333. /package/dist-es/{card.css.ts.vanilla.css-mistica.js → card-internal.css.ts.vanilla.css-mistica.js} +0 -0
package/css/tu.css CHANGED
@@ -76,34 +76,51 @@
76
76
  --mistica-color-buttonDangerBackground: var(--mistica-tu-red);
77
77
  --mistica-color-buttonDangerBackgroundPressed: var(--mistica-tu-red55);
78
78
  --mistica-color-buttonDangerBackgroundHover: var(--mistica-tu-red55);
79
- --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-tu-red10);
80
79
  --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-tu-white);
80
+ --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-tu-white);
81
+ --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-tu-red10);
81
82
  --mistica-color-buttonLinkDangerBackgroundInversePressed: var(--mistica-tu-red10);
83
+ --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-tu-red10);
82
84
  --mistica-color-buttonLinkBackgroundPressed: var(--mistica-tu-blue10);
83
85
  --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-tu-raw-white), 0.08);
86
+ --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-tu-raw-white), 0.08);
84
87
  --mistica-color-buttonPrimaryBackground: var(--mistica-tu-primary);
85
88
  --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-tu-white);
86
- --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-tu-primary45);
89
+ --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-tu-white);
87
90
  --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-tu-primary45);
91
+ --mistica-color-buttonPrimaryBackgroundInverseHover: rgba(var(--mistica-tu-raw-white), 0.8);
92
+ --mistica-color-buttonPrimaryBackgroundMediaHover: rgba(var(--mistica-tu-raw-white), 0.8);
93
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-tu-primary45);
88
94
  --mistica-color-buttonPrimaryBackgroundInversePressed: rgba(var(--mistica-tu-raw-white), 0.8);
95
+ --mistica-color-buttonPrimaryBackgroundMediaPressed: rgba(var(--mistica-tu-raw-white), 0.8);
89
96
  --mistica-color-buttonSecondaryBorder: var(--mistica-tu-blue);
90
- --mistica-color-buttonSecondaryBorderPressed: var(--mistica-tu-blue70);
91
- --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-tu-blue10);
92
- --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-tu-blue10);
93
97
  --mistica-color-buttonSecondaryBorderInverse: var(--mistica-tu-white);
98
+ --mistica-color-buttonSecondaryBorderMedia: var(--mistica-tu-white);
99
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-tu-blue70);
94
100
  --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-tu-white);
101
+ --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-tu-white);
102
+ --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-tu-blue10);
95
103
  --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-tu-raw-white), 0.1);
104
+ --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-tu-raw-white), 0.1);
105
+ --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-tu-blue10);
96
106
  --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-tu-raw-white), 0.1);
107
+ --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-tu-raw-white), 0.1);
97
108
  --mistica-color-textButtonPrimary: var(--mistica-tu-white);
98
109
  --mistica-color-textButtonPrimaryInverse: var(--mistica-tu-primary);
110
+ --mistica-color-textButtonPrimaryMedia: var(--mistica-tu-primary);
99
111
  --mistica-color-textButtonPrimaryInversePressed: var(--mistica-tu-primary);
112
+ --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-tu-primary);
100
113
  --mistica-color-textButtonSecondary: var(--mistica-tu-blue);
101
- --mistica-color-textButtonSecondaryPressed: var(--mistica-tu-blue70);
102
114
  --mistica-color-textButtonSecondaryInverse: var(--mistica-tu-white);
115
+ --mistica-color-textButtonSecondaryMedia: var(--mistica-tu-white);
116
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-tu-blue70);
103
117
  --mistica-color-textButtonSecondaryInversePressed: var(--mistica-tu-white);
118
+ --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-tu-white);
104
119
  --mistica-color-textLink: var(--mistica-tu-blue);
105
120
  --mistica-color-textLinkInverse: var(--mistica-tu-white);
121
+ --mistica-color-textLinkMedia: var(--mistica-tu-white);
106
122
  --mistica-color-textLinkDanger: var(--mistica-tu-red);
123
+ --mistica-color-textLinkDangerMedia: var(--mistica-tu-red);
107
124
  --mistica-color-textLinkSnackbar: var(--mistica-tu-white);
108
125
  --mistica-color-textActivated: var(--mistica-tu-primary);
109
126
  --mistica-color-textBrand: var(--mistica-tu-blue);
@@ -203,6 +220,7 @@
203
220
  rgba(var(--mistica-tu-raw-black), 0.4) 30%,
204
221
  rgba(var(--mistica-tu-raw-black), 0.7) 100%
205
222
  );
223
+ --mistica-color-cardFooterOverlay: rgba(var(--mistica-tu-raw-black), 0.7);
206
224
 
207
225
  /* Border radius */
208
226
  --mistica-border-radius-avatar: 50%;
@@ -292,34 +310,51 @@
292
310
  --mistica-color-buttonDangerBackground: var(--mistica-tu-red);
293
311
  --mistica-color-buttonDangerBackgroundPressed: var(--mistica-tu-red80);
294
312
  --mistica-color-buttonDangerBackgroundHover: var(--mistica-tu-red80);
295
- --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-tu-red10);
296
313
  --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-tu-raw-white), 0);
314
+ --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-tu-white);
315
+ --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-tu-red10);
297
316
  --mistica-color-buttonLinkDangerBackgroundInversePressed: var(--mistica-tu-red10);
317
+ --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-tu-red10);
298
318
  --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-tu-raw-white), 0.08);
299
319
  --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-tu-raw-white), 0.08);
320
+ --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-tu-raw-white), 0.08);
300
321
  --mistica-color-buttonPrimaryBackground: var(--mistica-tu-grey2);
301
322
  --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-tu-grey2);
302
- --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-tu-grey3);
323
+ --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-tu-white);
303
324
  --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-tu-grey3);
325
+ --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-tu-grey3);
326
+ --mistica-color-buttonPrimaryBackgroundMediaHover: rgba(var(--mistica-tu-raw-white), 0.8);
327
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-tu-grey3);
304
328
  --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-tu-grey3);
305
- --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-tu-raw-grey2), 0.15);
329
+ --mistica-color-buttonPrimaryBackgroundMediaPressed: rgba(var(--mistica-tu-raw-white), 0.8);
306
330
  --mistica-color-buttonSecondaryBorder: var(--mistica-tu-grey2);
307
- --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-tu-raw-grey2), 0.15);
308
- --mistica-color-buttonSecondaryBorderPressed: var(--mistica-tu-grey2);
309
331
  --mistica-color-buttonSecondaryBorderInverse: var(--mistica-tu-grey2);
332
+ --mistica-color-buttonSecondaryBorderMedia: var(--mistica-tu-white);
333
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-tu-grey2);
310
334
  --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-tu-grey2);
335
+ --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-tu-white);
336
+ --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-tu-raw-grey2), 0.15);
311
337
  --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-tu-raw-grey2), 0.15);
338
+ --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-tu-raw-white), 0.1);
339
+ --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-tu-raw-grey2), 0.15);
312
340
  --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-tu-raw-grey2), 0.15);
341
+ --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-tu-raw-white), 0.1);
313
342
  --mistica-color-textButtonPrimary: var(--mistica-tu-primary);
314
343
  --mistica-color-textButtonPrimaryInverse: var(--mistica-tu-primary);
344
+ --mistica-color-textButtonPrimaryMedia: var(--mistica-tu-primary);
315
345
  --mistica-color-textButtonPrimaryInversePressed: var(--mistica-tu-primary);
346
+ --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-tu-primary);
316
347
  --mistica-color-textButtonSecondary: var(--mistica-tu-grey2);
317
- --mistica-color-textButtonSecondaryPressed: var(--mistica-tu-grey2);
318
348
  --mistica-color-textButtonSecondaryInverse: var(--mistica-tu-grey2);
349
+ --mistica-color-textButtonSecondaryMedia: var(--mistica-tu-white);
350
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-tu-grey2);
319
351
  --mistica-color-textButtonSecondaryInversePressed: var(--mistica-tu-grey2);
352
+ --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-tu-white);
320
353
  --mistica-color-textLink: var(--mistica-tu-blue30);
321
354
  --mistica-color-textLinkInverse: var(--mistica-tu-blue30);
355
+ --mistica-color-textLinkMedia: var(--mistica-tu-white);
322
356
  --mistica-color-textLinkDanger: var(--mistica-tu-red);
357
+ --mistica-color-textLinkDangerMedia: var(--mistica-tu-red);
323
358
  --mistica-color-textLinkSnackbar: var(--mistica-tu-blue30);
324
359
  --mistica-color-textActivated: var(--mistica-tu-blue30);
325
360
  --mistica-color-textBrand: var(--mistica-tu-blue30);
@@ -419,6 +454,7 @@
419
454
  rgba(var(--mistica-tu-raw-black), 0.4) 30%,
420
455
  rgba(var(--mistica-tu-raw-black), 0.7) 100%
421
456
  );
457
+ --mistica-color-cardFooterOverlay: rgba(var(--mistica-tu-raw-black), 0.7);
422
458
  }
423
459
 
424
460
  @media (prefers-color-scheme: dark) {
@@ -453,34 +489,51 @@
453
489
  --mistica-color-buttonDangerBackground: var(--mistica-tu-red);
454
490
  --mistica-color-buttonDangerBackgroundPressed: var(--mistica-tu-red80);
455
491
  --mistica-color-buttonDangerBackgroundHover: var(--mistica-tu-red80);
456
- --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-tu-red10);
457
492
  --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-tu-raw-white), 0);
493
+ --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-tu-white);
494
+ --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-tu-red10);
458
495
  --mistica-color-buttonLinkDangerBackgroundInversePressed: var(--mistica-tu-red10);
496
+ --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-tu-red10);
459
497
  --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-tu-raw-white), 0.08);
460
498
  --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-tu-raw-white), 0.08);
499
+ --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-tu-raw-white), 0.08);
461
500
  --mistica-color-buttonPrimaryBackground: var(--mistica-tu-grey2);
462
501
  --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-tu-grey2);
463
- --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-tu-grey3);
502
+ --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-tu-white);
464
503
  --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-tu-grey3);
504
+ --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-tu-grey3);
505
+ --mistica-color-buttonPrimaryBackgroundMediaHover: rgba(var(--mistica-tu-raw-white), 0.8);
506
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-tu-grey3);
465
507
  --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-tu-grey3);
466
- --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-tu-raw-grey2), 0.15);
508
+ --mistica-color-buttonPrimaryBackgroundMediaPressed: rgba(var(--mistica-tu-raw-white), 0.8);
467
509
  --mistica-color-buttonSecondaryBorder: var(--mistica-tu-grey2);
468
- --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-tu-raw-grey2), 0.15);
469
- --mistica-color-buttonSecondaryBorderPressed: var(--mistica-tu-grey2);
470
510
  --mistica-color-buttonSecondaryBorderInverse: var(--mistica-tu-grey2);
511
+ --mistica-color-buttonSecondaryBorderMedia: var(--mistica-tu-white);
512
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-tu-grey2);
471
513
  --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-tu-grey2);
514
+ --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-tu-white);
515
+ --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-tu-raw-grey2), 0.15);
472
516
  --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-tu-raw-grey2), 0.15);
517
+ --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-tu-raw-white), 0.1);
518
+ --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-tu-raw-grey2), 0.15);
473
519
  --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-tu-raw-grey2), 0.15);
520
+ --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-tu-raw-white), 0.1);
474
521
  --mistica-color-textButtonPrimary: var(--mistica-tu-primary);
475
522
  --mistica-color-textButtonPrimaryInverse: var(--mistica-tu-primary);
523
+ --mistica-color-textButtonPrimaryMedia: var(--mistica-tu-primary);
476
524
  --mistica-color-textButtonPrimaryInversePressed: var(--mistica-tu-primary);
525
+ --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-tu-primary);
477
526
  --mistica-color-textButtonSecondary: var(--mistica-tu-grey2);
478
- --mistica-color-textButtonSecondaryPressed: var(--mistica-tu-grey2);
479
527
  --mistica-color-textButtonSecondaryInverse: var(--mistica-tu-grey2);
528
+ --mistica-color-textButtonSecondaryMedia: var(--mistica-tu-white);
529
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-tu-grey2);
480
530
  --mistica-color-textButtonSecondaryInversePressed: var(--mistica-tu-grey2);
531
+ --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-tu-white);
481
532
  --mistica-color-textLink: var(--mistica-tu-blue30);
482
533
  --mistica-color-textLinkInverse: var(--mistica-tu-blue30);
534
+ --mistica-color-textLinkMedia: var(--mistica-tu-white);
483
535
  --mistica-color-textLinkDanger: var(--mistica-tu-red);
536
+ --mistica-color-textLinkDangerMedia: var(--mistica-tu-red);
484
537
  --mistica-color-textLinkSnackbar: var(--mistica-tu-blue30);
485
538
  --mistica-color-textActivated: var(--mistica-tu-blue30);
486
539
  --mistica-color-textBrand: var(--mistica-tu-blue30);
@@ -580,6 +633,7 @@
580
633
  rgba(var(--mistica-tu-raw-black), 0.4) 30%,
581
634
  rgba(var(--mistica-tu-raw-black), 0.7) 100%
582
635
  );
636
+ --mistica-color-cardFooterOverlay: rgba(var(--mistica-tu-raw-black), 0.7);
583
637
  }
584
638
 
585
639
  [data-mistica-skin='tu'][data-mistica-color-scheme='light'] {
@@ -613,34 +667,51 @@
613
667
  --mistica-color-buttonDangerBackground: var(--mistica-tu-red);
614
668
  --mistica-color-buttonDangerBackgroundPressed: var(--mistica-tu-red55);
615
669
  --mistica-color-buttonDangerBackgroundHover: var(--mistica-tu-red55);
616
- --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-tu-red10);
617
670
  --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-tu-white);
671
+ --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-tu-white);
672
+ --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-tu-red10);
618
673
  --mistica-color-buttonLinkDangerBackgroundInversePressed: var(--mistica-tu-red10);
674
+ --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-tu-red10);
619
675
  --mistica-color-buttonLinkBackgroundPressed: var(--mistica-tu-blue10);
620
676
  --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-tu-raw-white), 0.08);
677
+ --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-tu-raw-white), 0.08);
621
678
  --mistica-color-buttonPrimaryBackground: var(--mistica-tu-primary);
622
679
  --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-tu-white);
623
- --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-tu-primary45);
680
+ --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-tu-white);
624
681
  --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-tu-primary45);
682
+ --mistica-color-buttonPrimaryBackgroundInverseHover: rgba(var(--mistica-tu-raw-white), 0.8);
683
+ --mistica-color-buttonPrimaryBackgroundMediaHover: rgba(var(--mistica-tu-raw-white), 0.8);
684
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-tu-primary45);
625
685
  --mistica-color-buttonPrimaryBackgroundInversePressed: rgba(var(--mistica-tu-raw-white), 0.8);
626
- --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-tu-blue10);
686
+ --mistica-color-buttonPrimaryBackgroundMediaPressed: rgba(var(--mistica-tu-raw-white), 0.8);
627
687
  --mistica-color-buttonSecondaryBorder: var(--mistica-tu-blue);
628
- --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-tu-blue10);
629
- --mistica-color-buttonSecondaryBorderPressed: var(--mistica-tu-blue70);
630
688
  --mistica-color-buttonSecondaryBorderInverse: var(--mistica-tu-white);
689
+ --mistica-color-buttonSecondaryBorderMedia: var(--mistica-tu-white);
690
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-tu-blue70);
631
691
  --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-tu-white);
692
+ --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-tu-white);
693
+ --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-tu-blue10);
632
694
  --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-tu-raw-white), 0.1);
695
+ --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-tu-raw-white), 0.1);
696
+ --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-tu-blue10);
633
697
  --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-tu-raw-white), 0.1);
698
+ --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-tu-raw-white), 0.1);
634
699
  --mistica-color-textButtonPrimary: var(--mistica-tu-white);
635
700
  --mistica-color-textButtonPrimaryInverse: var(--mistica-tu-primary);
701
+ --mistica-color-textButtonPrimaryMedia: var(--mistica-tu-primary);
636
702
  --mistica-color-textButtonPrimaryInversePressed: var(--mistica-tu-primary);
703
+ --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-tu-primary);
637
704
  --mistica-color-textButtonSecondary: var(--mistica-tu-blue);
638
- --mistica-color-textButtonSecondaryPressed: var(--mistica-tu-blue70);
639
705
  --mistica-color-textButtonSecondaryInverse: var(--mistica-tu-white);
706
+ --mistica-color-textButtonSecondaryMedia: var(--mistica-tu-white);
707
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-tu-blue70);
640
708
  --mistica-color-textButtonSecondaryInversePressed: var(--mistica-tu-white);
709
+ --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-tu-white);
641
710
  --mistica-color-textLink: var(--mistica-tu-blue);
642
711
  --mistica-color-textLinkInverse: var(--mistica-tu-white);
712
+ --mistica-color-textLinkMedia: var(--mistica-tu-white);
643
713
  --mistica-color-textLinkDanger: var(--mistica-tu-red);
714
+ --mistica-color-textLinkDangerMedia: var(--mistica-tu-red);
644
715
  --mistica-color-textLinkSnackbar: var(--mistica-tu-white);
645
716
  --mistica-color-textActivated: var(--mistica-tu-primary);
646
717
  --mistica-color-textBrand: var(--mistica-tu-blue);
@@ -740,6 +811,7 @@
740
811
  rgba(var(--mistica-tu-raw-black), 0.4) 30%,
741
812
  rgba(var(--mistica-tu-raw-black), 0.7) 100%
742
813
  );
814
+ --mistica-color-cardFooterOverlay: rgba(var(--mistica-tu-raw-black), 0.7);
743
815
  }
744
816
  }
745
817
 
package/css/vivo-new.css CHANGED
@@ -69,34 +69,51 @@
69
69
  --mistica-color-buttonDangerBackground: var(--mistica-vivo-new-pepper);
70
70
  --mistica-color-buttonDangerBackgroundPressed: var(--mistica-vivo-new-pepperDark);
71
71
  --mistica-color-buttonDangerBackgroundHover: var(--mistica-vivo-new-pepperDark);
72
- --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-vivo-new-pepperLight10);
73
72
  --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-vivo-new-white);
73
+ --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-vivo-new-white);
74
+ --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-vivo-new-pepperLight10);
74
75
  --mistica-color-buttonLinkDangerBackgroundInversePressed: var(--mistica-vivo-new-pepperLight10);
76
+ --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-vivo-new-pepperLight10);
75
77
  --mistica-color-buttonLinkBackgroundPressed: var(--mistica-vivo-new-vivoPurpleLight10);
76
78
  --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-vivo-new-raw-white), 0.1);
79
+ --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-vivo-new-raw-white), 0.1);
77
80
  --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-new-vivoPurple);
78
81
  --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-new-white);
79
- --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-new-vivoPurpleDark);
82
+ --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-vivo-new-white);
80
83
  --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-vivo-new-vivoPurpleDark);
84
+ --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-vivo-new-vivoPurpleLight50);
85
+ --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-new-vivoPurpleLight50);
86
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-new-vivoPurpleDark);
81
87
  --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-new-vivoPurpleLight50);
88
+ --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-new-vivoPurpleLight50);
82
89
  --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-new-vivoPurple);
83
- --mistica-color-buttonSecondaryBorderPressed: var(--mistica-vivo-new-vivoPurpleDark);
84
- --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-vivo-new-vivoPurpleLight10);
85
- --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-vivo-new-vivoPurpleLight10);
86
90
  --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-new-white);
91
+ --mistica-color-buttonSecondaryBorderMedia: var(--mistica-vivo-new-white);
92
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-vivo-new-vivoPurpleDark);
87
93
  --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-vivo-new-white);
94
+ --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-vivo-new-white);
95
+ --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-vivo-new-vivoPurpleLight10);
88
96
  --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
97
+ --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
98
+ --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-vivo-new-vivoPurpleLight10);
89
99
  --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-vivo-new-raw-white), 0.15);
100
+ --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-vivo-new-raw-white), 0.15);
90
101
  --mistica-color-textButtonPrimary: var(--mistica-vivo-new-white);
91
102
  --mistica-color-textButtonPrimaryInverse: var(--mistica-vivo-new-vivoPurple);
103
+ --mistica-color-textButtonPrimaryMedia: var(--mistica-vivo-new-vivoPurple);
92
104
  --mistica-color-textButtonPrimaryInversePressed: var(--mistica-vivo-new-vivoPurple);
105
+ --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-vivo-new-vivoPurple);
93
106
  --mistica-color-textButtonSecondary: var(--mistica-vivo-new-vivoPurple);
94
- --mistica-color-textButtonSecondaryPressed: var(--mistica-vivo-new-vivoPurpleDark);
95
107
  --mistica-color-textButtonSecondaryInverse: var(--mistica-vivo-new-white);
108
+ --mistica-color-textButtonSecondaryMedia: var(--mistica-vivo-new-white);
109
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-vivo-new-vivoPurpleDark);
96
110
  --mistica-color-textButtonSecondaryInversePressed: var(--mistica-vivo-new-white);
111
+ --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-vivo-new-white);
97
112
  --mistica-color-textLink: var(--mistica-vivo-new-vivoPurple);
98
113
  --mistica-color-textLinkInverse: var(--mistica-vivo-new-white);
114
+ --mistica-color-textLinkMedia: var(--mistica-vivo-new-white);
99
115
  --mistica-color-textLinkDanger: var(--mistica-vivo-new-pepper);
116
+ --mistica-color-textLinkDangerMedia: var(--mistica-vivo-new-pepper);
100
117
  --mistica-color-textLinkSnackbar: var(--mistica-vivo-new-vivoPurpleLight20);
101
118
  --mistica-color-textActivated: var(--mistica-vivo-new-vivoPurple);
102
119
  --mistica-color-textBrand: var(--mistica-vivo-new-vivoPurple);
@@ -196,6 +213,7 @@
196
213
  rgba(var(--mistica-vivo-new-raw-grey6), 0.4) 30%,
197
214
  rgba(var(--mistica-vivo-new-raw-grey6), 0.7) 100%
198
215
  );
216
+ --mistica-color-cardFooterOverlay: rgba(var(--mistica-vivo-new-raw-grey6), 0.7);
199
217
 
200
218
  /* Border radius */
201
219
  --mistica-border-radius-avatar: 50%;
@@ -285,34 +303,51 @@
285
303
  --mistica-color-buttonDangerBackground: var(--mistica-vivo-new-pepper);
286
304
  --mistica-color-buttonDangerBackgroundPressed: var(--mistica-vivo-new-pepperDark);
287
305
  --mistica-color-buttonDangerBackgroundHover: var(--mistica-vivo-new-pepperDark);
288
- --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-vivo-new-raw-white), 0.08);
289
306
  --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-vivo-new-raw-white), 0);
307
+ --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-vivo-new-white);
308
+ --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-vivo-new-raw-white), 0.08);
290
309
  --mistica-color-buttonLinkDangerBackgroundInversePressed: rgba(var(--mistica-vivo-new-raw-white), 0.08);
310
+ --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-vivo-new-pepperLight10);
291
311
  --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-vivo-new-raw-white), 0.08);
292
312
  --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-vivo-new-raw-white), 0.08);
313
+ --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-vivo-new-raw-white), 0.1);
293
314
  --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-new-vivoPurpleLight80);
294
315
  --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-new-vivoPurpleLight80);
295
- --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-new-vivoPurpleDark);
316
+ --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-vivo-new-white);
296
317
  --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-vivo-new-vivoPurpleDark);
318
+ --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-vivo-new-vivoPurpleDark);
319
+ --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-new-vivoPurpleLight50);
320
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-new-vivoPurpleDark);
297
321
  --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-new-vivoPurpleDark);
298
- --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
299
- --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-vivo-new-raw-white), 0.15);
322
+ --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-new-vivoPurpleLight50);
300
323
  --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-new-white);
301
- --mistica-color-buttonSecondaryBorderPressed: var(--mistica-vivo-new-white);
302
324
  --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-new-white);
325
+ --mistica-color-buttonSecondaryBorderMedia: var(--mistica-vivo-new-white);
326
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-vivo-new-white);
303
327
  --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-vivo-new-white);
328
+ --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-vivo-new-white);
329
+ --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
304
330
  --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
331
+ --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
332
+ --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-vivo-new-raw-white), 0.15);
305
333
  --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-vivo-new-raw-white), 0.15);
334
+ --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-vivo-new-raw-white), 0.15);
306
335
  --mistica-color-textButtonPrimary: var(--mistica-vivo-new-grey2);
307
336
  --mistica-color-textButtonPrimaryInverse: var(--mistica-vivo-new-grey2);
337
+ --mistica-color-textButtonPrimaryMedia: var(--mistica-vivo-new-vivoPurple);
308
338
  --mistica-color-textButtonPrimaryInversePressed: var(--mistica-vivo-new-grey2);
339
+ --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-vivo-new-vivoPurple);
309
340
  --mistica-color-textButtonSecondary: var(--mistica-vivo-new-grey2);
310
- --mistica-color-textButtonSecondaryPressed: var(--mistica-vivo-new-grey2);
311
341
  --mistica-color-textButtonSecondaryInverse: var(--mistica-vivo-new-grey2);
342
+ --mistica-color-textButtonSecondaryMedia: var(--mistica-vivo-new-white);
343
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-vivo-new-grey2);
312
344
  --mistica-color-textButtonSecondaryInversePressed: var(--mistica-vivo-new-grey2);
345
+ --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-vivo-new-white);
313
346
  --mistica-color-textLink: var(--mistica-vivo-new-vivoPurpleLight50);
314
347
  --mistica-color-textLinkInverse: var(--mistica-vivo-new-vivoPurpleLight50);
348
+ --mistica-color-textLinkMedia: var(--mistica-vivo-new-white);
315
349
  --mistica-color-textLinkDanger: var(--mistica-vivo-new-pepper);
350
+ --mistica-color-textLinkDangerMedia: var(--mistica-vivo-new-pepper);
316
351
  --mistica-color-textLinkSnackbar: var(--mistica-vivo-new-vivoPurpleLight50);
317
352
  --mistica-color-textActivated: var(--mistica-vivo-new-vivoPurpleLight80);
318
353
  --mistica-color-textBrand: var(--mistica-vivo-new-vivoPurpleLight80);
@@ -412,6 +447,7 @@
412
447
  rgba(var(--mistica-vivo-new-raw-grey6), 0.4) 30%,
413
448
  rgba(var(--mistica-vivo-new-raw-grey6), 0.7) 100%
414
449
  );
450
+ --mistica-color-cardFooterOverlay: rgba(var(--mistica-vivo-new-raw-grey6), 0.7);
415
451
  }
416
452
 
417
453
  @media (prefers-color-scheme: dark) {
@@ -446,40 +482,57 @@
446
482
  --mistica-color-buttonDangerBackground: var(--mistica-vivo-new-pepper);
447
483
  --mistica-color-buttonDangerBackgroundPressed: var(--mistica-vivo-new-pepperDark);
448
484
  --mistica-color-buttonDangerBackgroundHover: var(--mistica-vivo-new-pepperDark);
449
- --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-vivo-new-raw-white), 0.08);
450
485
  --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-vivo-new-raw-white), 0);
486
+ --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-vivo-new-white);
487
+ --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-vivo-new-raw-white), 0.08);
451
488
  --mistica-color-buttonLinkDangerBackgroundInversePressed: rgba(
452
489
  var(--mistica-vivo-new-raw-white),
453
490
  0.08
454
491
  );
492
+ --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-vivo-new-pepperLight10);
455
493
  --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-vivo-new-raw-white), 0.08);
456
494
  --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-vivo-new-raw-white), 0.08);
495
+ --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-vivo-new-raw-white), 0.1);
457
496
  --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-new-vivoPurpleLight80);
458
497
  --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-new-vivoPurpleLight80);
459
- --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-new-vivoPurpleDark);
498
+ --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-vivo-new-white);
460
499
  --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-vivo-new-vivoPurpleDark);
500
+ --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-vivo-new-vivoPurpleDark);
501
+ --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-new-vivoPurpleLight50);
502
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-new-vivoPurpleDark);
461
503
  --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-new-vivoPurpleDark);
462
- --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
463
- --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-vivo-new-raw-white), 0.15);
504
+ --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-new-vivoPurpleLight50);
464
505
  --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-new-white);
465
- --mistica-color-buttonSecondaryBorderPressed: var(--mistica-vivo-new-white);
466
506
  --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-new-white);
507
+ --mistica-color-buttonSecondaryBorderMedia: var(--mistica-vivo-new-white);
508
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-vivo-new-white);
467
509
  --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-vivo-new-white);
510
+ --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-vivo-new-white);
511
+ --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
468
512
  --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
513
+ --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
514
+ --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-vivo-new-raw-white), 0.15);
469
515
  --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(
470
516
  var(--mistica-vivo-new-raw-white),
471
517
  0.15
472
518
  );
519
+ --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-vivo-new-raw-white), 0.15);
473
520
  --mistica-color-textButtonPrimary: var(--mistica-vivo-new-grey2);
474
521
  --mistica-color-textButtonPrimaryInverse: var(--mistica-vivo-new-grey2);
522
+ --mistica-color-textButtonPrimaryMedia: var(--mistica-vivo-new-vivoPurple);
475
523
  --mistica-color-textButtonPrimaryInversePressed: var(--mistica-vivo-new-grey2);
524
+ --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-vivo-new-vivoPurple);
476
525
  --mistica-color-textButtonSecondary: var(--mistica-vivo-new-grey2);
477
- --mistica-color-textButtonSecondaryPressed: var(--mistica-vivo-new-grey2);
478
526
  --mistica-color-textButtonSecondaryInverse: var(--mistica-vivo-new-grey2);
527
+ --mistica-color-textButtonSecondaryMedia: var(--mistica-vivo-new-white);
528
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-vivo-new-grey2);
479
529
  --mistica-color-textButtonSecondaryInversePressed: var(--mistica-vivo-new-grey2);
530
+ --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-vivo-new-white);
480
531
  --mistica-color-textLink: var(--mistica-vivo-new-vivoPurpleLight50);
481
532
  --mistica-color-textLinkInverse: var(--mistica-vivo-new-vivoPurpleLight50);
533
+ --mistica-color-textLinkMedia: var(--mistica-vivo-new-white);
482
534
  --mistica-color-textLinkDanger: var(--mistica-vivo-new-pepper);
535
+ --mistica-color-textLinkDangerMedia: var(--mistica-vivo-new-pepper);
483
536
  --mistica-color-textLinkSnackbar: var(--mistica-vivo-new-vivoPurpleLight50);
484
537
  --mistica-color-textActivated: var(--mistica-vivo-new-vivoPurpleLight80);
485
538
  --mistica-color-textBrand: var(--mistica-vivo-new-vivoPurpleLight80);
@@ -579,6 +632,7 @@
579
632
  rgba(var(--mistica-vivo-new-raw-grey6), 0.4) 30%,
580
633
  rgba(var(--mistica-vivo-new-raw-grey6), 0.7) 100%
581
634
  );
635
+ --mistica-color-cardFooterOverlay: rgba(var(--mistica-vivo-new-raw-grey6), 0.7);
582
636
  }
583
637
 
584
638
  [data-mistica-skin='vivo-new'][data-mistica-color-scheme='light'] {
@@ -612,37 +666,54 @@
612
666
  --mistica-color-buttonDangerBackground: var(--mistica-vivo-new-pepper);
613
667
  --mistica-color-buttonDangerBackgroundPressed: var(--mistica-vivo-new-pepperDark);
614
668
  --mistica-color-buttonDangerBackgroundHover: var(--mistica-vivo-new-pepperDark);
615
- --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-vivo-new-pepperLight10);
616
669
  --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-vivo-new-white);
670
+ --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-vivo-new-white);
671
+ --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-vivo-new-pepperLight10);
617
672
  --mistica-color-buttonLinkDangerBackgroundInversePressed: var(--mistica-vivo-new-pepperLight10);
673
+ --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-vivo-new-pepperLight10);
618
674
  --mistica-color-buttonLinkBackgroundPressed: var(--mistica-vivo-new-vivoPurpleLight10);
619
675
  --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-vivo-new-raw-white), 0.1);
676
+ --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-vivo-new-raw-white), 0.1);
620
677
  --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-new-vivoPurple);
621
678
  --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-new-white);
622
- --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-new-vivoPurpleDark);
679
+ --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-vivo-new-white);
623
680
  --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-vivo-new-vivoPurpleDark);
681
+ --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-vivo-new-vivoPurpleLight50);
682
+ --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-new-vivoPurpleLight50);
683
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-new-vivoPurpleDark);
624
684
  --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-new-vivoPurpleLight50);
625
- --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-vivo-new-vivoPurpleLight10);
626
- --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-vivo-new-vivoPurpleLight10);
685
+ --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-new-vivoPurpleLight50);
627
686
  --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-new-vivoPurple);
628
- --mistica-color-buttonSecondaryBorderPressed: var(--mistica-vivo-new-vivoPurpleDark);
629
687
  --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-new-white);
688
+ --mistica-color-buttonSecondaryBorderMedia: var(--mistica-vivo-new-white);
689
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-vivo-new-vivoPurpleDark);
630
690
  --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-vivo-new-white);
691
+ --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-vivo-new-white);
692
+ --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-vivo-new-vivoPurpleLight10);
631
693
  --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
694
+ --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
695
+ --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-vivo-new-vivoPurpleLight10);
632
696
  --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(
633
697
  var(--mistica-vivo-new-raw-white),
634
698
  0.15
635
699
  );
700
+ --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-vivo-new-raw-white), 0.15);
636
701
  --mistica-color-textButtonPrimary: var(--mistica-vivo-new-white);
637
702
  --mistica-color-textButtonPrimaryInverse: var(--mistica-vivo-new-vivoPurple);
703
+ --mistica-color-textButtonPrimaryMedia: var(--mistica-vivo-new-vivoPurple);
638
704
  --mistica-color-textButtonPrimaryInversePressed: var(--mistica-vivo-new-vivoPurple);
705
+ --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-vivo-new-vivoPurple);
639
706
  --mistica-color-textButtonSecondary: var(--mistica-vivo-new-vivoPurple);
640
- --mistica-color-textButtonSecondaryPressed: var(--mistica-vivo-new-vivoPurpleDark);
641
707
  --mistica-color-textButtonSecondaryInverse: var(--mistica-vivo-new-white);
708
+ --mistica-color-textButtonSecondaryMedia: var(--mistica-vivo-new-white);
709
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-vivo-new-vivoPurpleDark);
642
710
  --mistica-color-textButtonSecondaryInversePressed: var(--mistica-vivo-new-white);
711
+ --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-vivo-new-white);
643
712
  --mistica-color-textLink: var(--mistica-vivo-new-vivoPurple);
644
713
  --mistica-color-textLinkInverse: var(--mistica-vivo-new-white);
714
+ --mistica-color-textLinkMedia: var(--mistica-vivo-new-white);
645
715
  --mistica-color-textLinkDanger: var(--mistica-vivo-new-pepper);
716
+ --mistica-color-textLinkDangerMedia: var(--mistica-vivo-new-pepper);
646
717
  --mistica-color-textLinkSnackbar: var(--mistica-vivo-new-vivoPurpleLight20);
647
718
  --mistica-color-textActivated: var(--mistica-vivo-new-vivoPurple);
648
719
  --mistica-color-textBrand: var(--mistica-vivo-new-vivoPurple);
@@ -742,6 +813,7 @@
742
813
  rgba(var(--mistica-vivo-new-raw-grey6), 0.4) 30%,
743
814
  rgba(var(--mistica-vivo-new-raw-grey6), 0.7) 100%
744
815
  );
816
+ --mistica-color-cardFooterOverlay: rgba(var(--mistica-vivo-new-raw-grey6), 0.7);
745
817
  }
746
818
  }
747
819