@telefonica/mistica 16.36.1 → 16.37.1

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/movistar.css CHANGED
@@ -14,8 +14,8 @@
14
14
  --mistica-movistar-pepper65: #bf2937;
15
15
  --mistica-movistar-movistarBlue10: #e6f5fd;
16
16
  --mistica-movistar-movistarBlueHC: #066fcb;
17
- --mistica-movistar-movistarBlueHC65: #055398;
18
17
  --mistica-movistar-movistarBlueHC55: #055eac;
18
+ --mistica-movistar-movistarBlueHC65: #055398;
19
19
  --mistica-movistar-movistarBlue15: #ceebfb;
20
20
  --mistica-movistar-pepper60: #cc2c3b;
21
21
  --mistica-movistar-movistarBlue30: #80cef9;
@@ -82,34 +82,51 @@
82
82
  --mistica-color-buttonDangerBackground: var(--mistica-movistar-pepper55);
83
83
  --mistica-color-buttonDangerBackgroundPressed: var(--mistica-movistar-pepper70);
84
84
  --mistica-color-buttonDangerBackgroundHover: var(--mistica-movistar-pepper65);
85
- --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-movistar-pepper10);
86
85
  --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-movistar-white);
86
+ --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-movistar-white);
87
+ --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-movistar-pepper10);
87
88
  --mistica-color-buttonLinkDangerBackgroundInversePressed: var(--mistica-movistar-pepper10);
89
+ --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-movistar-pepper10);
88
90
  --mistica-color-buttonLinkBackgroundPressed: var(--mistica-movistar-movistarBlue10);
89
91
  --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-movistar-raw-white), 0.2);
92
+ --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-movistar-raw-white), 0.2);
90
93
  --mistica-color-buttonPrimaryBackground: var(--mistica-movistar-movistarBlueHC);
91
94
  --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-movistar-white);
92
- --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-movistar-movistarBlueHC65);
95
+ --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-movistar-white);
93
96
  --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-movistar-movistarBlueHC55);
97
+ --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-movistar-movistarBlue10);
98
+ --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-movistar-movistarBlue10);
99
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-movistar-movistarBlueHC65);
94
100
  --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-movistar-movistarBlue10);
101
+ --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-movistar-movistarBlue10);
95
102
  --mistica-color-buttonSecondaryBorder: var(--mistica-movistar-movistarBlueHC);
96
- --mistica-color-buttonSecondaryBorderPressed: var(--mistica-movistar-movistarBlueHC65);
97
- --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-movistar-movistarBlue10);
98
- --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-movistar-movistarBlue15);
99
103
  --mistica-color-buttonSecondaryBorderInverse: var(--mistica-movistar-white);
104
+ --mistica-color-buttonSecondaryBorderMedia: var(--mistica-movistar-white);
105
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-movistar-movistarBlueHC65);
100
106
  --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-movistar-white);
107
+ --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-movistar-white);
108
+ --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-movistar-movistarBlue10);
101
109
  --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-movistar-raw-white), 0.2);
110
+ --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-movistar-raw-white), 0.2);
111
+ --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-movistar-movistarBlue15);
102
112
  --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-movistar-raw-white), 0.3);
113
+ --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-movistar-raw-white), 0.3);
103
114
  --mistica-color-textButtonPrimary: var(--mistica-movistar-white);
104
115
  --mistica-color-textButtonPrimaryInverse: var(--mistica-movistar-movistarBlueHC);
116
+ --mistica-color-textButtonPrimaryMedia: var(--mistica-movistar-movistarBlueHC);
105
117
  --mistica-color-textButtonPrimaryInversePressed: var(--mistica-movistar-movistarBlueHC);
118
+ --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-movistar-movistarBlueHC);
106
119
  --mistica-color-textButtonSecondary: var(--mistica-movistar-movistarBlueHC);
107
- --mistica-color-textButtonSecondaryPressed: var(--mistica-movistar-movistarBlueHC55);
108
120
  --mistica-color-textButtonSecondaryInverse: var(--mistica-movistar-white);
121
+ --mistica-color-textButtonSecondaryMedia: var(--mistica-movistar-white);
122
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-movistar-movistarBlueHC55);
109
123
  --mistica-color-textButtonSecondaryInversePressed: var(--mistica-movistar-white);
124
+ --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-movistar-white);
110
125
  --mistica-color-textLink: var(--mistica-movistar-movistarBlueHC);
111
126
  --mistica-color-textLinkInverse: var(--mistica-movistar-white);
127
+ --mistica-color-textLinkMedia: var(--mistica-movistar-white);
112
128
  --mistica-color-textLinkDanger: var(--mistica-movistar-pepper60);
129
+ --mistica-color-textLinkDangerMedia: var(--mistica-movistar-pepper60);
113
130
  --mistica-color-textLinkSnackbar: var(--mistica-movistar-movistarBlue30);
114
131
  --mistica-color-textActivated: var(--mistica-movistar-movistarBlueHC);
115
132
  --mistica-color-textBrand: var(--mistica-movistar-movistarBlueHC);
@@ -209,18 +226,19 @@
209
226
  rgba(var(--mistica-movistar-raw-black), 0.4) 30%,
210
227
  rgba(var(--mistica-movistar-raw-black), 0.7) 100%
211
228
  );
229
+ --mistica-color-cardFooterOverlay: rgba(var(--mistica-movistar-raw-black), 0.7);
212
230
 
213
231
  /* Border radius */
214
232
  --mistica-border-radius-avatar: 50%;
215
233
  --mistica-border-radius-bar: 999px;
216
234
  --mistica-border-radius-button: 4px;
217
- --mistica-border-radius-checkbox: 2px;
218
- --mistica-border-radius-container: 8px;
235
+ --mistica-border-radius-checkbox: 4px;
236
+ --mistica-border-radius-container: 16px;
219
237
  --mistica-border-radius-indicator: 999px;
220
- --mistica-border-radius-input: 8px;
238
+ --mistica-border-radius-input: 12px;
221
239
  --mistica-border-radius-legacyDisplay: 16px;
222
240
  --mistica-border-radius-popup: 8px;
223
- --mistica-border-radius-sheet: 8px;
241
+ --mistica-border-radius-sheet: 16px;
224
242
  --mistica-border-radius-mediaSmall: 8px;
225
243
 
226
244
  /* Text */
@@ -298,34 +316,51 @@
298
316
  --mistica-color-buttonDangerBackground: var(--mistica-movistar-pepper55);
299
317
  --mistica-color-buttonDangerBackgroundPressed: var(--mistica-movistar-pepper70);
300
318
  --mistica-color-buttonDangerBackgroundHover: var(--mistica-movistar-pepper65);
301
- --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-movistar-raw-white), 0.08);
302
319
  --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-movistar-raw-white), 0);
320
+ --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-movistar-white);
321
+ --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-movistar-raw-white), 0.08);
303
322
  --mistica-color-buttonLinkDangerBackgroundInversePressed: rgba(var(--mistica-movistar-raw-white), 0.08);
323
+ --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-movistar-pepper10);
304
324
  --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-movistar-raw-white), 0.08);
305
325
  --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-movistar-raw-white), 0.08);
326
+ --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-movistar-raw-white), 0.2);
306
327
  --mistica-color-buttonPrimaryBackground: var(--mistica-movistar-movistarBlueHC);
307
328
  --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-movistar-movistarBlueHC);
308
- --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-movistar-movistarBlueHC65);
329
+ --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-movistar-white);
309
330
  --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-movistar-movistarBlueHC55);
331
+ --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-movistar-movistarBlueHC65);
332
+ --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-movistar-movistarBlue10);
333
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-movistar-movistarBlueHC65);
310
334
  --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-movistar-movistarBlueHC65);
311
- --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-movistar-raw-white), 0.15);
312
- --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-movistar-raw-white), 0.25);
335
+ --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-movistar-movistarBlue10);
313
336
  --mistica-color-buttonSecondaryBorder: var(--mistica-movistar-white);
314
- --mistica-color-buttonSecondaryBorderPressed: var(--mistica-movistar-white);
315
337
  --mistica-color-buttonSecondaryBorderInverse: var(--mistica-movistar-darkModeGrey2);
338
+ --mistica-color-buttonSecondaryBorderMedia: var(--mistica-movistar-white);
339
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-movistar-white);
316
340
  --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-movistar-darkModeGrey2);
341
+ --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-movistar-white);
342
+ --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-movistar-raw-white), 0.15);
317
343
  --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-movistar-raw-white), 0.15);
344
+ --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-movistar-raw-white), 0.2);
345
+ --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-movistar-raw-white), 0.25);
318
346
  --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-movistar-raw-white), 0.25);
347
+ --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-movistar-raw-white), 0.3);
319
348
  --mistica-color-textButtonPrimary: var(--mistica-movistar-white);
320
349
  --mistica-color-textButtonPrimaryInverse: var(--mistica-movistar-white);
350
+ --mistica-color-textButtonPrimaryMedia: var(--mistica-movistar-movistarBlueHC);
321
351
  --mistica-color-textButtonPrimaryInversePressed: var(--mistica-movistar-white);
352
+ --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-movistar-movistarBlueHC);
322
353
  --mistica-color-textButtonSecondary: var(--mistica-movistar-darkModeGrey2);
323
- --mistica-color-textButtonSecondaryPressed: var(--mistica-movistar-darkModeGrey2);
324
354
  --mistica-color-textButtonSecondaryInverse: var(--mistica-movistar-darkModeGrey2);
355
+ --mistica-color-textButtonSecondaryMedia: var(--mistica-movistar-white);
356
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-movistar-darkModeGrey2);
325
357
  --mistica-color-textButtonSecondaryInversePressed: var(--mistica-movistar-darkModeGrey2);
358
+ --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-movistar-white);
326
359
  --mistica-color-textLink: var(--mistica-movistar-movistarBlue);
327
360
  --mistica-color-textLinkInverse: var(--mistica-movistar-movistarBlue);
361
+ --mistica-color-textLinkMedia: var(--mistica-movistar-white);
328
362
  --mistica-color-textLinkDanger: var(--mistica-movistar-pepper45);
363
+ --mistica-color-textLinkDangerMedia: var(--mistica-movistar-pepper60);
329
364
  --mistica-color-textLinkSnackbar: var(--mistica-movistar-movistarBlue);
330
365
  --mistica-color-textActivated: var(--mistica-movistar-movistarBlue);
331
366
  --mistica-color-textBrand: var(--mistica-movistar-movistarBlue);
@@ -425,6 +460,7 @@
425
460
  rgba(var(--mistica-movistar-raw-black), 0.4) 30%,
426
461
  rgba(var(--mistica-movistar-raw-black), 0.7) 100%
427
462
  );
463
+ --mistica-color-cardFooterOverlay: rgba(var(--mistica-movistar-raw-black), 0.7);
428
464
  }
429
465
 
430
466
  @media (prefers-color-scheme: dark) {
@@ -459,40 +495,57 @@
459
495
  --mistica-color-buttonDangerBackground: var(--mistica-movistar-pepper55);
460
496
  --mistica-color-buttonDangerBackgroundPressed: var(--mistica-movistar-pepper70);
461
497
  --mistica-color-buttonDangerBackgroundHover: var(--mistica-movistar-pepper65);
462
- --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-movistar-raw-white), 0.08);
463
498
  --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-movistar-raw-white), 0);
499
+ --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-movistar-white);
500
+ --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-movistar-raw-white), 0.08);
464
501
  --mistica-color-buttonLinkDangerBackgroundInversePressed: rgba(
465
502
  var(--mistica-movistar-raw-white),
466
503
  0.08
467
504
  );
505
+ --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-movistar-pepper10);
468
506
  --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-movistar-raw-white), 0.08);
469
507
  --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-movistar-raw-white), 0.08);
508
+ --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-movistar-raw-white), 0.2);
470
509
  --mistica-color-buttonPrimaryBackground: var(--mistica-movistar-movistarBlueHC);
471
510
  --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-movistar-movistarBlueHC);
472
- --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-movistar-movistarBlueHC65);
511
+ --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-movistar-white);
473
512
  --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-movistar-movistarBlueHC55);
513
+ --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-movistar-movistarBlueHC65);
514
+ --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-movistar-movistarBlue10);
515
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-movistar-movistarBlueHC65);
474
516
  --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-movistar-movistarBlueHC65);
475
- --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-movistar-raw-white), 0.15);
476
- --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-movistar-raw-white), 0.25);
517
+ --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-movistar-movistarBlue10);
477
518
  --mistica-color-buttonSecondaryBorder: var(--mistica-movistar-white);
478
- --mistica-color-buttonSecondaryBorderPressed: var(--mistica-movistar-white);
479
519
  --mistica-color-buttonSecondaryBorderInverse: var(--mistica-movistar-darkModeGrey2);
520
+ --mistica-color-buttonSecondaryBorderMedia: var(--mistica-movistar-white);
521
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-movistar-white);
480
522
  --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-movistar-darkModeGrey2);
523
+ --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-movistar-white);
524
+ --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-movistar-raw-white), 0.15);
481
525
  --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-movistar-raw-white), 0.15);
526
+ --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-movistar-raw-white), 0.2);
527
+ --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-movistar-raw-white), 0.25);
482
528
  --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(
483
529
  var(--mistica-movistar-raw-white),
484
530
  0.25
485
531
  );
532
+ --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-movistar-raw-white), 0.3);
486
533
  --mistica-color-textButtonPrimary: var(--mistica-movistar-white);
487
534
  --mistica-color-textButtonPrimaryInverse: var(--mistica-movistar-white);
535
+ --mistica-color-textButtonPrimaryMedia: var(--mistica-movistar-movistarBlueHC);
488
536
  --mistica-color-textButtonPrimaryInversePressed: var(--mistica-movistar-white);
537
+ --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-movistar-movistarBlueHC);
489
538
  --mistica-color-textButtonSecondary: var(--mistica-movistar-darkModeGrey2);
490
- --mistica-color-textButtonSecondaryPressed: var(--mistica-movistar-darkModeGrey2);
491
539
  --mistica-color-textButtonSecondaryInverse: var(--mistica-movistar-darkModeGrey2);
540
+ --mistica-color-textButtonSecondaryMedia: var(--mistica-movistar-white);
541
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-movistar-darkModeGrey2);
492
542
  --mistica-color-textButtonSecondaryInversePressed: var(--mistica-movistar-darkModeGrey2);
543
+ --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-movistar-white);
493
544
  --mistica-color-textLink: var(--mistica-movistar-movistarBlue);
494
545
  --mistica-color-textLinkInverse: var(--mistica-movistar-movistarBlue);
546
+ --mistica-color-textLinkMedia: var(--mistica-movistar-white);
495
547
  --mistica-color-textLinkDanger: var(--mistica-movistar-pepper45);
548
+ --mistica-color-textLinkDangerMedia: var(--mistica-movistar-pepper60);
496
549
  --mistica-color-textLinkSnackbar: var(--mistica-movistar-movistarBlue);
497
550
  --mistica-color-textActivated: var(--mistica-movistar-movistarBlue);
498
551
  --mistica-color-textBrand: var(--mistica-movistar-movistarBlue);
@@ -592,6 +645,7 @@
592
645
  rgba(var(--mistica-movistar-raw-black), 0.4) 30%,
593
646
  rgba(var(--mistica-movistar-raw-black), 0.7) 100%
594
647
  );
648
+ --mistica-color-cardFooterOverlay: rgba(var(--mistica-movistar-raw-black), 0.7);
595
649
  }
596
650
 
597
651
  [data-mistica-skin='movistar'][data-mistica-color-scheme='light'] {
@@ -625,34 +679,51 @@
625
679
  --mistica-color-buttonDangerBackground: var(--mistica-movistar-pepper55);
626
680
  --mistica-color-buttonDangerBackgroundPressed: var(--mistica-movistar-pepper70);
627
681
  --mistica-color-buttonDangerBackgroundHover: var(--mistica-movistar-pepper65);
628
- --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-movistar-pepper10);
629
682
  --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-movistar-white);
683
+ --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-movistar-white);
684
+ --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-movistar-pepper10);
630
685
  --mistica-color-buttonLinkDangerBackgroundInversePressed: var(--mistica-movistar-pepper10);
686
+ --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-movistar-pepper10);
631
687
  --mistica-color-buttonLinkBackgroundPressed: var(--mistica-movistar-movistarBlue10);
632
688
  --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-movistar-raw-white), 0.2);
689
+ --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-movistar-raw-white), 0.2);
633
690
  --mistica-color-buttonPrimaryBackground: var(--mistica-movistar-movistarBlueHC);
634
691
  --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-movistar-white);
635
- --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-movistar-movistarBlueHC65);
692
+ --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-movistar-white);
636
693
  --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-movistar-movistarBlueHC55);
694
+ --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-movistar-movistarBlue10);
695
+ --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-movistar-movistarBlue10);
696
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-movistar-movistarBlueHC65);
637
697
  --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-movistar-movistarBlue10);
638
- --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-movistar-movistarBlue10);
639
- --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-movistar-movistarBlue15);
698
+ --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-movistar-movistarBlue10);
640
699
  --mistica-color-buttonSecondaryBorder: var(--mistica-movistar-movistarBlueHC);
641
- --mistica-color-buttonSecondaryBorderPressed: var(--mistica-movistar-movistarBlueHC65);
642
700
  --mistica-color-buttonSecondaryBorderInverse: var(--mistica-movistar-white);
701
+ --mistica-color-buttonSecondaryBorderMedia: var(--mistica-movistar-white);
702
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-movistar-movistarBlueHC65);
643
703
  --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-movistar-white);
704
+ --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-movistar-white);
705
+ --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-movistar-movistarBlue10);
644
706
  --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-movistar-raw-white), 0.2);
707
+ --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-movistar-raw-white), 0.2);
708
+ --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-movistar-movistarBlue15);
645
709
  --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-movistar-raw-white), 0.3);
710
+ --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-movistar-raw-white), 0.3);
646
711
  --mistica-color-textButtonPrimary: var(--mistica-movistar-white);
647
712
  --mistica-color-textButtonPrimaryInverse: var(--mistica-movistar-movistarBlueHC);
713
+ --mistica-color-textButtonPrimaryMedia: var(--mistica-movistar-movistarBlueHC);
648
714
  --mistica-color-textButtonPrimaryInversePressed: var(--mistica-movistar-movistarBlueHC);
715
+ --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-movistar-movistarBlueHC);
649
716
  --mistica-color-textButtonSecondary: var(--mistica-movistar-movistarBlueHC);
650
- --mistica-color-textButtonSecondaryPressed: var(--mistica-movistar-movistarBlueHC55);
651
717
  --mistica-color-textButtonSecondaryInverse: var(--mistica-movistar-white);
718
+ --mistica-color-textButtonSecondaryMedia: var(--mistica-movistar-white);
719
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-movistar-movistarBlueHC55);
652
720
  --mistica-color-textButtonSecondaryInversePressed: var(--mistica-movistar-white);
721
+ --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-movistar-white);
653
722
  --mistica-color-textLink: var(--mistica-movistar-movistarBlueHC);
654
723
  --mistica-color-textLinkInverse: var(--mistica-movistar-white);
724
+ --mistica-color-textLinkMedia: var(--mistica-movistar-white);
655
725
  --mistica-color-textLinkDanger: var(--mistica-movistar-pepper60);
726
+ --mistica-color-textLinkDangerMedia: var(--mistica-movistar-pepper60);
656
727
  --mistica-color-textLinkSnackbar: var(--mistica-movistar-movistarBlue30);
657
728
  --mistica-color-textActivated: var(--mistica-movistar-movistarBlueHC);
658
729
  --mistica-color-textBrand: var(--mistica-movistar-movistarBlueHC);
@@ -752,6 +823,7 @@
752
823
  rgba(var(--mistica-movistar-raw-black), 0.4) 30%,
753
824
  rgba(var(--mistica-movistar-raw-black), 0.7) 100%
754
825
  );
826
+ --mistica-color-cardFooterOverlay: rgba(var(--mistica-movistar-raw-black), 0.7);
755
827
  }
756
828
  }
757
829
 
package/css/o2-new.css CHANGED
@@ -44,7 +44,6 @@
44
44
  --mistica-o2-new-raw-darkModeBlack: 0, 0, 28;
45
45
  --mistica-o2-new-raw-black: 0, 0, 30;
46
46
  --mistica-o2-new-raw-white: 255, 255, 255;
47
- --mistica-o2-new-raw-beyondBlue: 0, 80, 255;
48
47
  --mistica-o2-new-raw-darkModeGrey: 8, 19, 43;
49
48
 
50
49
  /* Colors */
@@ -88,34 +87,51 @@
88
87
  --mistica-color-buttonDangerBackground: var(--mistica-o2-new-o2Red60);
89
88
  --mistica-color-buttonDangerBackgroundPressed: var(--mistica-o2-new-o2Red65);
90
89
  --mistica-color-buttonDangerBackgroundHover: var(--mistica-o2-new-o2Red65);
91
- --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-o2-new-o2Red10);
92
90
  --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-o2-new-white);
91
+ --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-o2-new-white);
92
+ --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-o2-new-o2Red10);
93
93
  --mistica-color-buttonLinkDangerBackgroundInversePressed: var(--mistica-o2-new-o2Red10);
94
+ --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-o2-new-o2Red10);
94
95
  --mistica-color-buttonLinkBackgroundPressed: var(--mistica-o2-new-beyondBlue10);
95
96
  --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-o2-new-raw-white), 0.08);
97
+ --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-o2-new-raw-white), 0.08);
96
98
  --mistica-color-buttonPrimaryBackground: var(--mistica-o2-new-beyondBlue);
97
99
  --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-o2-new-white);
98
- --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-o2-new-beyondBlue70);
100
+ --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-o2-new-white);
99
101
  --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-o2-new-beyondBlue70);
102
+ --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-o2-new-beyondBlue30);
103
+ --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-o2-new-beyondBlue30);
104
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-o2-new-beyondBlue70);
100
105
  --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-o2-new-beyondBlue30);
106
+ --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-o2-new-beyondBlue30);
101
107
  --mistica-color-buttonSecondaryBorder: var(--mistica-o2-new-beyondBlue);
102
- --mistica-color-buttonSecondaryBorderPressed: var(--mistica-o2-new-beyondBlue70);
103
- --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-o2-new-beyondBlue10);
104
- --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-o2-new-beyondBlue10);
105
108
  --mistica-color-buttonSecondaryBorderInverse: var(--mistica-o2-new-white);
109
+ --mistica-color-buttonSecondaryBorderMedia: var(--mistica-o2-new-white);
110
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-o2-new-beyondBlue70);
106
111
  --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-o2-new-beyondBlue30);
112
+ --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-o2-new-beyondBlue30);
113
+ --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-o2-new-beyondBlue10);
107
114
  --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-o2-new-raw-white), 0.15);
115
+ --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-o2-new-raw-white), 0.15);
116
+ --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-o2-new-beyondBlue10);
108
117
  --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-o2-new-raw-white), 0.15);
118
+ --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-o2-new-raw-white), 0.15);
109
119
  --mistica-color-textButtonPrimary: var(--mistica-o2-new-white);
110
120
  --mistica-color-textButtonPrimaryInverse: var(--mistica-o2-new-beyondBlue);
121
+ --mistica-color-textButtonPrimaryMedia: var(--mistica-o2-new-beyondBlue);
111
122
  --mistica-color-textButtonPrimaryInversePressed: var(--mistica-o2-new-beyondBlue70);
123
+ --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-o2-new-beyondBlue70);
112
124
  --mistica-color-textButtonSecondary: var(--mistica-o2-new-beyondBlue);
113
- --mistica-color-textButtonSecondaryPressed: var(--mistica-o2-new-beyondBlue70);
114
125
  --mistica-color-textButtonSecondaryInverse: var(--mistica-o2-new-white);
126
+ --mistica-color-textButtonSecondaryMedia: var(--mistica-o2-new-white);
127
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-o2-new-beyondBlue70);
115
128
  --mistica-color-textButtonSecondaryInversePressed: var(--mistica-o2-new-white);
129
+ --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-o2-new-white);
116
130
  --mistica-color-textLink: var(--mistica-o2-new-beyondBlue);
117
131
  --mistica-color-textLinkInverse: var(--mistica-o2-new-white);
132
+ --mistica-color-textLinkMedia: var(--mistica-o2-new-white);
118
133
  --mistica-color-textLinkDanger: var(--mistica-o2-new-o2Red65);
134
+ --mistica-color-textLinkDangerMedia: var(--mistica-o2-new-o2Red65);
119
135
  --mistica-color-textLinkSnackbar: var(--mistica-o2-new-beyondBlue30);
120
136
  --mistica-color-textActivated: var(--mistica-o2-new-beyondBlue);
121
137
  --mistica-color-textBrand: var(--mistica-o2-new-beyondBlue);
@@ -211,10 +227,11 @@
211
227
  --mistica-color-tagBackgroundErrorInverse: var(--mistica-o2-new-o2Red10);
212
228
  --mistica-color-cardContentOverlay: linear-gradient(
213
229
  180deg,
214
- rgba(var(--mistica-o2-new-raw-beyondBlue), 0) 0%,
215
- rgba(var(--mistica-o2-new-raw-beyondBlue), 0.4) 30%,
216
- rgba(var(--mistica-o2-new-raw-beyondBlue), 1) 100%
230
+ rgba(var(--mistica-o2-new-raw-black), 0) 0%,
231
+ rgba(var(--mistica-o2-new-raw-black), 0.4) 30%,
232
+ rgba(var(--mistica-o2-new-raw-black), 0.7) 100%
217
233
  );
234
+ --mistica-color-cardFooterOverlay: rgba(var(--mistica-o2-new-raw-black), 0.7);
218
235
 
219
236
  /* Border radius */
220
237
  --mistica-border-radius-avatar: 50%;
@@ -304,34 +321,51 @@
304
321
  --mistica-color-buttonDangerBackground: var(--mistica-o2-new-o2Red60);
305
322
  --mistica-color-buttonDangerBackgroundPressed: var(--mistica-o2-new-o2Red65);
306
323
  --mistica-color-buttonDangerBackgroundHover: var(--mistica-o2-new-o2Red65);
307
- --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-o2-new-raw-white), 0.08);
308
324
  --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-o2-new-raw-white), 0);
325
+ --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-o2-new-white);
326
+ --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-o2-new-raw-white), 0.08);
309
327
  --mistica-color-buttonLinkDangerBackgroundInversePressed: rgba(var(--mistica-o2-new-raw-white), 0.08);
328
+ --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-o2-new-o2Red10);
310
329
  --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-o2-new-raw-white), 0.08);
311
330
  --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-o2-new-raw-white), 0.08);
331
+ --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-o2-new-raw-white), 0.08);
312
332
  --mistica-color-buttonPrimaryBackground: var(--mistica-o2-new-darkModeBeyondBlue);
313
333
  --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-o2-new-darkModeBeyondBlue);
314
- --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-o2-new-beyondBlue55);
334
+ --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-o2-new-white);
315
335
  --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-o2-new-beyondBlue55);
336
+ --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-o2-new-beyondBlue55);
337
+ --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-o2-new-beyondBlue30);
338
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-o2-new-beyondBlue55);
316
339
  --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-o2-new-beyondBlue55);
317
- --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-o2-new-raw-white), 0.15);
340
+ --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-o2-new-beyondBlue30);
318
341
  --mistica-color-buttonSecondaryBorder: var(--mistica-o2-new-white);
319
- --mistica-color-buttonSecondaryBorderPressed: var(--mistica-o2-new-white);
320
342
  --mistica-color-buttonSecondaryBorderInverse: var(--mistica-o2-new-white);
343
+ --mistica-color-buttonSecondaryBorderMedia: var(--mistica-o2-new-white);
344
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-o2-new-white);
321
345
  --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-o2-new-white);
346
+ --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-o2-new-beyondBlue30);
322
347
  --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-o2-new-raw-white), 0.15);
323
348
  --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-o2-new-raw-white), 0.15);
349
+ --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-o2-new-raw-white), 0.15);
350
+ --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-o2-new-raw-white), 0.15);
324
351
  --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-o2-new-raw-white), 0.15);
352
+ --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-o2-new-raw-white), 0.15);
325
353
  --mistica-color-textButtonPrimary: var(--mistica-o2-new-white);
326
354
  --mistica-color-textButtonPrimaryInverse: var(--mistica-o2-new-white);
355
+ --mistica-color-textButtonPrimaryMedia: var(--mistica-o2-new-beyondBlue);
327
356
  --mistica-color-textButtonPrimaryInversePressed: var(--mistica-o2-new-white);
357
+ --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-o2-new-beyondBlue70);
328
358
  --mistica-color-textButtonSecondary: var(--mistica-o2-new-grey30);
329
- --mistica-color-textButtonSecondaryPressed: var(--mistica-o2-new-grey30);
330
359
  --mistica-color-textButtonSecondaryInverse: var(--mistica-o2-new-grey30);
360
+ --mistica-color-textButtonSecondaryMedia: var(--mistica-o2-new-white);
361
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-o2-new-grey30);
331
362
  --mistica-color-textButtonSecondaryInversePressed: var(--mistica-o2-new-grey30);
363
+ --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-o2-new-white);
332
364
  --mistica-color-textLink: var(--mistica-o2-new-beyondBlue40);
333
365
  --mistica-color-textLinkInverse: var(--mistica-o2-new-beyondBlue40);
366
+ --mistica-color-textLinkMedia: var(--mistica-o2-new-white);
334
367
  --mistica-color-textLinkDanger: var(--mistica-o2-new-o2Red45);
368
+ --mistica-color-textLinkDangerMedia: var(--mistica-o2-new-o2Red65);
335
369
  --mistica-color-textLinkSnackbar: var(--mistica-o2-new-beyondBlue30);
336
370
  --mistica-color-textActivated: var(--mistica-o2-new-beyondBlue30);
337
371
  --mistica-color-textBrand: var(--mistica-o2-new-beyondBlue30);
@@ -431,6 +465,7 @@
431
465
  rgba(var(--mistica-o2-new-raw-black), 0.4) 30%,
432
466
  rgba(var(--mistica-o2-new-raw-black), 0.7) 100%
433
467
  );
468
+ --mistica-color-cardFooterOverlay: rgba(var(--mistica-o2-new-raw-black), 0.7);
434
469
  }
435
470
 
436
471
  @media (prefers-color-scheme: dark) {
@@ -465,34 +500,51 @@
465
500
  --mistica-color-buttonDangerBackground: var(--mistica-o2-new-o2Red60);
466
501
  --mistica-color-buttonDangerBackgroundPressed: var(--mistica-o2-new-o2Red65);
467
502
  --mistica-color-buttonDangerBackgroundHover: var(--mistica-o2-new-o2Red65);
468
- --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-o2-new-raw-white), 0.08);
469
503
  --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-o2-new-raw-white), 0);
504
+ --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-o2-new-white);
505
+ --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-o2-new-raw-white), 0.08);
470
506
  --mistica-color-buttonLinkDangerBackgroundInversePressed: rgba(var(--mistica-o2-new-raw-white), 0.08);
507
+ --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-o2-new-o2Red10);
471
508
  --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-o2-new-raw-white), 0.08);
472
509
  --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-o2-new-raw-white), 0.08);
510
+ --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-o2-new-raw-white), 0.08);
473
511
  --mistica-color-buttonPrimaryBackground: var(--mistica-o2-new-darkModeBeyondBlue);
474
512
  --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-o2-new-darkModeBeyondBlue);
475
- --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-o2-new-beyondBlue55);
513
+ --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-o2-new-white);
476
514
  --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-o2-new-beyondBlue55);
515
+ --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-o2-new-beyondBlue55);
516
+ --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-o2-new-beyondBlue30);
517
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-o2-new-beyondBlue55);
477
518
  --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-o2-new-beyondBlue55);
478
- --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-o2-new-raw-white), 0.15);
519
+ --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-o2-new-beyondBlue30);
479
520
  --mistica-color-buttonSecondaryBorder: var(--mistica-o2-new-white);
480
- --mistica-color-buttonSecondaryBorderPressed: var(--mistica-o2-new-white);
481
521
  --mistica-color-buttonSecondaryBorderInverse: var(--mistica-o2-new-white);
522
+ --mistica-color-buttonSecondaryBorderMedia: var(--mistica-o2-new-white);
523
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-o2-new-white);
482
524
  --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-o2-new-white);
525
+ --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-o2-new-beyondBlue30);
483
526
  --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-o2-new-raw-white), 0.15);
484
527
  --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-o2-new-raw-white), 0.15);
528
+ --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-o2-new-raw-white), 0.15);
529
+ --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-o2-new-raw-white), 0.15);
485
530
  --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-o2-new-raw-white), 0.15);
531
+ --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-o2-new-raw-white), 0.15);
486
532
  --mistica-color-textButtonPrimary: var(--mistica-o2-new-white);
487
533
  --mistica-color-textButtonPrimaryInverse: var(--mistica-o2-new-white);
534
+ --mistica-color-textButtonPrimaryMedia: var(--mistica-o2-new-beyondBlue);
488
535
  --mistica-color-textButtonPrimaryInversePressed: var(--mistica-o2-new-white);
536
+ --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-o2-new-beyondBlue70);
489
537
  --mistica-color-textButtonSecondary: var(--mistica-o2-new-grey30);
490
- --mistica-color-textButtonSecondaryPressed: var(--mistica-o2-new-grey30);
491
538
  --mistica-color-textButtonSecondaryInverse: var(--mistica-o2-new-grey30);
539
+ --mistica-color-textButtonSecondaryMedia: var(--mistica-o2-new-white);
540
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-o2-new-grey30);
492
541
  --mistica-color-textButtonSecondaryInversePressed: var(--mistica-o2-new-grey30);
542
+ --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-o2-new-white);
493
543
  --mistica-color-textLink: var(--mistica-o2-new-beyondBlue40);
494
544
  --mistica-color-textLinkInverse: var(--mistica-o2-new-beyondBlue40);
545
+ --mistica-color-textLinkMedia: var(--mistica-o2-new-white);
495
546
  --mistica-color-textLinkDanger: var(--mistica-o2-new-o2Red45);
547
+ --mistica-color-textLinkDangerMedia: var(--mistica-o2-new-o2Red65);
496
548
  --mistica-color-textLinkSnackbar: var(--mistica-o2-new-beyondBlue30);
497
549
  --mistica-color-textActivated: var(--mistica-o2-new-beyondBlue30);
498
550
  --mistica-color-textBrand: var(--mistica-o2-new-beyondBlue30);
@@ -592,6 +644,7 @@
592
644
  rgba(var(--mistica-o2-new-raw-black), 0.4) 30%,
593
645
  rgba(var(--mistica-o2-new-raw-black), 0.7) 100%
594
646
  );
647
+ --mistica-color-cardFooterOverlay: rgba(var(--mistica-o2-new-raw-black), 0.7);
595
648
  }
596
649
 
597
650
  [data-mistica-skin='o2-new'][data-mistica-color-scheme='light'] {
@@ -635,34 +688,51 @@
635
688
  --mistica-color-buttonDangerBackground: var(--mistica-o2-new-o2Red60);
636
689
  --mistica-color-buttonDangerBackgroundPressed: var(--mistica-o2-new-o2Red65);
637
690
  --mistica-color-buttonDangerBackgroundHover: var(--mistica-o2-new-o2Red65);
638
- --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-o2-new-o2Red10);
639
691
  --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-o2-new-white);
692
+ --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-o2-new-white);
693
+ --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-o2-new-o2Red10);
640
694
  --mistica-color-buttonLinkDangerBackgroundInversePressed: var(--mistica-o2-new-o2Red10);
695
+ --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-o2-new-o2Red10);
641
696
  --mistica-color-buttonLinkBackgroundPressed: var(--mistica-o2-new-beyondBlue10);
642
697
  --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-o2-new-raw-white), 0.08);
698
+ --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-o2-new-raw-white), 0.08);
643
699
  --mistica-color-buttonPrimaryBackground: var(--mistica-o2-new-beyondBlue);
644
700
  --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-o2-new-white);
645
- --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-o2-new-beyondBlue70);
701
+ --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-o2-new-white);
646
702
  --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-o2-new-beyondBlue70);
703
+ --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-o2-new-beyondBlue30);
704
+ --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-o2-new-beyondBlue30);
705
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-o2-new-beyondBlue70);
647
706
  --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-o2-new-beyondBlue30);
648
- --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-o2-new-beyondBlue10);
707
+ --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-o2-new-beyondBlue30);
649
708
  --mistica-color-buttonSecondaryBorder: var(--mistica-o2-new-beyondBlue);
650
- --mistica-color-buttonSecondaryBorderPressed: var(--mistica-o2-new-beyondBlue70);
651
709
  --mistica-color-buttonSecondaryBorderInverse: var(--mistica-o2-new-white);
710
+ --mistica-color-buttonSecondaryBorderMedia: var(--mistica-o2-new-white);
711
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-o2-new-beyondBlue70);
652
712
  --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-o2-new-beyondBlue30);
713
+ --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-o2-new-beyondBlue30);
653
714
  --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-o2-new-beyondBlue10);
654
715
  --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-o2-new-raw-white), 0.15);
716
+ --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-o2-new-raw-white), 0.15);
717
+ --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-o2-new-beyondBlue10);
655
718
  --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-o2-new-raw-white), 0.15);
719
+ --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-o2-new-raw-white), 0.15);
656
720
  --mistica-color-textButtonPrimary: var(--mistica-o2-new-white);
657
721
  --mistica-color-textButtonPrimaryInverse: var(--mistica-o2-new-beyondBlue);
722
+ --mistica-color-textButtonPrimaryMedia: var(--mistica-o2-new-beyondBlue);
658
723
  --mistica-color-textButtonPrimaryInversePressed: var(--mistica-o2-new-beyondBlue70);
724
+ --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-o2-new-beyondBlue70);
659
725
  --mistica-color-textButtonSecondary: var(--mistica-o2-new-beyondBlue);
660
- --mistica-color-textButtonSecondaryPressed: var(--mistica-o2-new-beyondBlue70);
661
726
  --mistica-color-textButtonSecondaryInverse: var(--mistica-o2-new-white);
727
+ --mistica-color-textButtonSecondaryMedia: var(--mistica-o2-new-white);
728
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-o2-new-beyondBlue70);
662
729
  --mistica-color-textButtonSecondaryInversePressed: var(--mistica-o2-new-white);
730
+ --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-o2-new-white);
663
731
  --mistica-color-textLink: var(--mistica-o2-new-beyondBlue);
664
732
  --mistica-color-textLinkInverse: var(--mistica-o2-new-white);
733
+ --mistica-color-textLinkMedia: var(--mistica-o2-new-white);
665
734
  --mistica-color-textLinkDanger: var(--mistica-o2-new-o2Red65);
735
+ --mistica-color-textLinkDangerMedia: var(--mistica-o2-new-o2Red65);
666
736
  --mistica-color-textLinkSnackbar: var(--mistica-o2-new-beyondBlue30);
667
737
  --mistica-color-textActivated: var(--mistica-o2-new-beyondBlue);
668
738
  --mistica-color-textBrand: var(--mistica-o2-new-beyondBlue);
@@ -758,10 +828,11 @@
758
828
  --mistica-color-tagBackgroundErrorInverse: var(--mistica-o2-new-o2Red10);
759
829
  --mistica-color-cardContentOverlay: linear-gradient(
760
830
  180deg,
761
- rgba(var(--mistica-o2-new-raw-beyondBlue), 0) 0%,
762
- rgba(var(--mistica-o2-new-raw-beyondBlue), 0.4) 30%,
763
- rgba(var(--mistica-o2-new-raw-beyondBlue), 1) 100%
831
+ rgba(var(--mistica-o2-new-raw-black), 0) 0%,
832
+ rgba(var(--mistica-o2-new-raw-black), 0.4) 30%,
833
+ rgba(var(--mistica-o2-new-raw-black), 0.7) 100%
764
834
  );
835
+ --mistica-color-cardFooterOverlay: rgba(var(--mistica-o2-new-raw-black), 0.7);
765
836
  }
766
837
  }
767
838