@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/dist/skins/o2-new.js CHANGED
@@ -98,34 +98,51 @@ const e = {
98
98
  buttonDangerBackground: e.o2Red60,
99
99
  buttonDangerBackgroundPressed: e.o2Red65,
100
100
  buttonDangerBackgroundHover: e.o2Red65,
101
- buttonLinkDangerBackgroundPressed: e.o2Red10,
102
101
  buttonLinkDangerBackgroundInverse: e.white,
102
+ buttonLinkDangerBackgroundMedia: e.white,
103
+ buttonLinkDangerBackgroundPressed: e.o2Red10,
103
104
  buttonLinkDangerBackgroundInversePressed: e.o2Red10,
105
+ buttonLinkDangerBackgroundMediaPressed: e.o2Red10,
104
106
  buttonLinkBackgroundPressed: e.beyondBlue10,
105
107
  buttonLinkBackgroundInversePressed: (0, _color.applyAlpha)(e.white, 0.08),
108
+ buttonLinkBackgroundMediaPressed: (0, _color.applyAlpha)(e.white, 0.08),
106
109
  buttonPrimaryBackground: e.beyondBlue,
107
110
  buttonPrimaryBackgroundInverse: e.white,
108
- buttonPrimaryBackgroundPressed: e.beyondBlue70,
111
+ buttonPrimaryBackgroundMedia: e.white,
109
112
  buttonPrimaryBackgroundHover: e.beyondBlue70,
113
+ buttonPrimaryBackgroundInverseHover: e.beyondBlue30,
114
+ buttonPrimaryBackgroundMediaHover: e.beyondBlue30,
115
+ buttonPrimaryBackgroundPressed: e.beyondBlue70,
110
116
  buttonPrimaryBackgroundInversePressed: e.beyondBlue30,
117
+ buttonPrimaryBackgroundMediaPressed: e.beyondBlue30,
111
118
  buttonSecondaryBorder: e.beyondBlue,
112
- buttonSecondaryBorderPressed: e.beyondBlue70,
113
- buttonSecondaryBackgroundHover: e.beyondBlue10,
114
- buttonSecondaryBackgroundPressed: e.beyondBlue10,
115
119
  buttonSecondaryBorderInverse: e.white,
120
+ buttonSecondaryBorderMedia: e.white,
121
+ buttonSecondaryBorderPressed: e.beyondBlue70,
116
122
  buttonSecondaryBorderInversePressed: e.beyondBlue30,
123
+ buttonSecondaryBorderMediaPressed: e.beyondBlue30,
124
+ buttonSecondaryBackgroundHover: e.beyondBlue10,
117
125
  buttonSecondaryBackgroundInverseHover: (0, _color.applyAlpha)(e.white, 0.15),
126
+ buttonSecondaryBackgroundMediaHover: (0, _color.applyAlpha)(e.white, 0.15),
127
+ buttonSecondaryBackgroundPressed: e.beyondBlue10,
118
128
  buttonSecondaryBackgroundInversePressed: (0, _color.applyAlpha)(e.white, 0.15),
129
+ buttonSecondaryBackgroundMediaPressed: (0, _color.applyAlpha)(e.white, 0.15),
119
130
  textButtonPrimary: e.white,
120
131
  textButtonPrimaryInverse: e.beyondBlue,
132
+ textButtonPrimaryMedia: e.beyondBlue,
121
133
  textButtonPrimaryInversePressed: e.beyondBlue70,
134
+ textButtonPrimaryMediaPressed: e.beyondBlue70,
122
135
  textButtonSecondary: e.beyondBlue,
123
- textButtonSecondaryPressed: e.beyondBlue70,
124
136
  textButtonSecondaryInverse: e.white,
137
+ textButtonSecondaryMedia: e.white,
138
+ textButtonSecondaryPressed: e.beyondBlue70,
125
139
  textButtonSecondaryInversePressed: e.white,
140
+ textButtonSecondaryMediaPressed: e.white,
126
141
  textLink: e.beyondBlue,
127
142
  textLinkInverse: e.white,
143
+ textLinkMedia: e.white,
128
144
  textLinkDanger: e.o2Red65,
145
+ textLinkDangerMedia: e.o2Red65,
129
146
  textLinkSnackbar: e.beyondBlue30,
130
147
  textActivated: e.beyondBlue,
131
148
  textBrand: e.beyondBlue,
@@ -219,7 +236,8 @@ const e = {
219
236
  tagBackgroundSuccessInverse: e.o2Green10,
220
237
  tagBackgroundWarningInverse: e.o2Orange10,
221
238
  tagBackgroundErrorInverse: e.o2Red10,
222
- cardContentOverlay: `linear-gradient(180deg, ${(0, _color.applyAlpha)(e.beyondBlue, 0)} 0%, ${(0, _color.applyAlpha)(e.beyondBlue, 0.4)} 30%, ${(0, _color.applyAlpha)(e.beyondBlue, 1)} 100%)`
239
+ cardContentOverlay: `linear-gradient(180deg, ${(0, _color.applyAlpha)(e.black, 0)} 0%, ${(0, _color.applyAlpha)(e.black, 0.4)} 30%, ${(0, _color.applyAlpha)(e.black, 0.7)} 100%)`,
240
+ cardFooterOverlay: (0, _color.applyAlpha)(e.black, 0.7)
223
241
  },
224
242
  darkModeColors: {
225
243
  background: e.darkModeBlack,
@@ -252,34 +270,51 @@ const e = {
252
270
  buttonDangerBackground: e.o2Red60,
253
271
  buttonDangerBackgroundPressed: e.o2Red65,
254
272
  buttonDangerBackgroundHover: e.o2Red65,
255
- buttonLinkDangerBackgroundPressed: (0, _color.applyAlpha)(e.white, 0.08),
256
273
  buttonLinkDangerBackgroundInverse: (0, _color.applyAlpha)(e.white, 0),
274
+ buttonLinkDangerBackgroundMedia: e.white,
275
+ buttonLinkDangerBackgroundPressed: (0, _color.applyAlpha)(e.white, 0.08),
257
276
  buttonLinkDangerBackgroundInversePressed: (0, _color.applyAlpha)(e.white, 0.08),
277
+ buttonLinkDangerBackgroundMediaPressed: e.o2Red10,
258
278
  buttonLinkBackgroundPressed: (0, _color.applyAlpha)(e.white, 0.08),
259
279
  buttonLinkBackgroundInversePressed: (0, _color.applyAlpha)(e.white, 0.08),
280
+ buttonLinkBackgroundMediaPressed: (0, _color.applyAlpha)(e.white, 0.08),
260
281
  buttonPrimaryBackground: e.darkModeBeyondBlue,
261
282
  buttonPrimaryBackgroundInverse: e.darkModeBeyondBlue,
262
- buttonPrimaryBackgroundPressed: e.beyondBlue55,
283
+ buttonPrimaryBackgroundMedia: e.white,
263
284
  buttonPrimaryBackgroundHover: e.beyondBlue55,
285
+ buttonPrimaryBackgroundInverseHover: e.beyondBlue55,
286
+ buttonPrimaryBackgroundMediaHover: e.beyondBlue30,
287
+ buttonPrimaryBackgroundPressed: e.beyondBlue55,
264
288
  buttonPrimaryBackgroundInversePressed: e.beyondBlue55,
265
- buttonSecondaryBackgroundPressed: (0, _color.applyAlpha)(e.white, 0.15),
289
+ buttonPrimaryBackgroundMediaPressed: e.beyondBlue30,
266
290
  buttonSecondaryBorder: e.white,
267
- buttonSecondaryBorderPressed: e.white,
268
291
  buttonSecondaryBorderInverse: e.white,
292
+ buttonSecondaryBorderMedia: e.white,
293
+ buttonSecondaryBorderPressed: e.white,
269
294
  buttonSecondaryBorderInversePressed: e.white,
295
+ buttonSecondaryBorderMediaPressed: e.beyondBlue30,
270
296
  buttonSecondaryBackgroundHover: (0, _color.applyAlpha)(e.white, 0.15),
271
297
  buttonSecondaryBackgroundInverseHover: (0, _color.applyAlpha)(e.white, 0.15),
298
+ buttonSecondaryBackgroundMediaHover: (0, _color.applyAlpha)(e.white, 0.15),
299
+ buttonSecondaryBackgroundPressed: (0, _color.applyAlpha)(e.white, 0.15),
272
300
  buttonSecondaryBackgroundInversePressed: (0, _color.applyAlpha)(e.white, 0.15),
301
+ buttonSecondaryBackgroundMediaPressed: (0, _color.applyAlpha)(e.white, 0.15),
273
302
  textButtonPrimary: e.white,
274
303
  textButtonPrimaryInverse: e.white,
304
+ textButtonPrimaryMedia: e.beyondBlue,
275
305
  textButtonPrimaryInversePressed: e.white,
306
+ textButtonPrimaryMediaPressed: e.beyondBlue70,
276
307
  textButtonSecondary: e.grey30,
277
- textButtonSecondaryPressed: e.grey30,
278
308
  textButtonSecondaryInverse: e.grey30,
309
+ textButtonSecondaryMedia: e.white,
310
+ textButtonSecondaryPressed: e.grey30,
279
311
  textButtonSecondaryInversePressed: e.grey30,
312
+ textButtonSecondaryMediaPressed: e.white,
280
313
  textLink: e.beyondBlue40,
281
314
  textLinkInverse: e.beyondBlue40,
315
+ textLinkMedia: e.white,
282
316
  textLinkDanger: e.o2Red45,
317
+ textLinkDangerMedia: e.o2Red65,
283
318
  textLinkSnackbar: e.beyondBlue30,
284
319
  textActivated: e.beyondBlue30,
285
320
  textBrand: e.beyondBlue30,
@@ -373,7 +408,8 @@ const e = {
373
408
  tagBackgroundSuccessInverse: e.darkModeGrey6,
374
409
  tagBackgroundWarningInverse: e.darkModeGrey6,
375
410
  tagBackgroundErrorInverse: e.darkModeGrey6,
376
- cardContentOverlay: `linear-gradient(180deg, ${(0, _color.applyAlpha)(e.black, 0)} 0%, ${(0, _color.applyAlpha)(e.black, 0.4)} 30%, ${(0, _color.applyAlpha)(e.black, 0.7)} 100%)`
411
+ cardContentOverlay: `linear-gradient(180deg, ${(0, _color.applyAlpha)(e.black, 0)} 0%, ${(0, _color.applyAlpha)(e.black, 0.4)} 30%, ${(0, _color.applyAlpha)(e.black, 0.7)} 100%)`,
412
+ cardFooterOverlay: (0, _color.applyAlpha)(e.black, 0.7)
377
413
  },
378
414
  borderRadii: {
379
415
  avatar: "50%",
package/dist/skins/o2.js CHANGED
@@ -94,34 +94,51 @@ const e = {
94
94
  buttonDangerBackground: e.pepper,
95
95
  buttonDangerBackgroundPressed: e.pepper60,
96
96
  buttonDangerBackgroundHover: e.pepper60,
97
- buttonLinkDangerBackgroundPressed: e.pepper10,
98
97
  buttonLinkDangerBackgroundInverse: e.white,
98
+ buttonLinkDangerBackgroundMedia: e.white,
99
+ buttonLinkDangerBackgroundPressed: e.pepper10,
99
100
  buttonLinkDangerBackgroundInversePressed: e.pepper10,
101
+ buttonLinkDangerBackgroundMediaPressed: e.pepper10,
100
102
  buttonLinkBackgroundPressed: e.o2BluePrimary10,
101
103
  buttonLinkBackgroundInversePressed: (0, _color.applyAlpha)(e.white, 0.08),
104
+ buttonLinkBackgroundMediaPressed: (0, _color.applyAlpha)(e.white, 0.08),
102
105
  buttonPrimaryBackground: e.o2BluePrimary,
103
106
  buttonPrimaryBackgroundInverse: e.white,
104
- buttonPrimaryBackgroundPressed: e.o2BluePrimary70,
107
+ buttonPrimaryBackgroundMedia: e.white,
105
108
  buttonPrimaryBackgroundHover: e.o2BluePrimary70,
109
+ buttonPrimaryBackgroundInverseHover: e.o2BluePrimary30,
110
+ buttonPrimaryBackgroundMediaHover: e.o2BluePrimary30,
111
+ buttonPrimaryBackgroundPressed: e.o2BluePrimary70,
106
112
  buttonPrimaryBackgroundInversePressed: e.o2BluePrimary30,
113
+ buttonPrimaryBackgroundMediaPressed: e.o2BluePrimary30,
107
114
  buttonSecondaryBorder: e.o2BluePrimary,
108
- buttonSecondaryBorderPressed: e.o2BluePrimary70,
109
- buttonSecondaryBackgroundHover: e.o2BluePrimary10,
110
- buttonSecondaryBackgroundPressed: e.o2BluePrimary10,
111
115
  buttonSecondaryBorderInverse: e.white,
116
+ buttonSecondaryBorderMedia: e.white,
117
+ buttonSecondaryBorderPressed: e.o2BluePrimary70,
112
118
  buttonSecondaryBorderInversePressed: e.o2BluePrimary30,
119
+ buttonSecondaryBorderMediaPressed: e.o2BluePrimary30,
120
+ buttonSecondaryBackgroundHover: e.o2BluePrimary10,
113
121
  buttonSecondaryBackgroundInverseHover: (0, _color.applyAlpha)(e.white, 0.15),
122
+ buttonSecondaryBackgroundMediaHover: (0, _color.applyAlpha)(e.white, 0.15),
123
+ buttonSecondaryBackgroundPressed: e.o2BluePrimary10,
114
124
  buttonSecondaryBackgroundInversePressed: (0, _color.applyAlpha)(e.white, 0.15),
125
+ buttonSecondaryBackgroundMediaPressed: (0, _color.applyAlpha)(e.white, 0.15),
115
126
  textButtonPrimary: e.white,
116
127
  textButtonPrimaryInverse: e.o2BluePrimary,
128
+ textButtonPrimaryMedia: e.o2BluePrimary,
117
129
  textButtonPrimaryInversePressed: e.o2BluePrimary70,
130
+ textButtonPrimaryMediaPressed: e.o2BluePrimary70,
118
131
  textButtonSecondary: e.o2BluePrimary,
119
- textButtonSecondaryPressed: e.o2BluePrimary70,
120
132
  textButtonSecondaryInverse: e.white,
133
+ textButtonSecondaryMedia: e.white,
134
+ textButtonSecondaryPressed: e.o2BluePrimary70,
121
135
  textButtonSecondaryInversePressed: e.white,
136
+ textButtonSecondaryMediaPressed: e.white,
122
137
  textLink: e.o2BluePrimary,
123
138
  textLinkInverse: e.white,
139
+ textLinkMedia: e.white,
124
140
  textLinkDanger: e.pepper,
141
+ textLinkDangerMedia: e.pepper,
125
142
  textLinkSnackbar: e.o2BluePrimary30,
126
143
  textActivated: e.o2BluePrimary,
127
144
  textBrand: e.o2BluePrimary,
@@ -215,7 +232,8 @@ const e = {
215
232
  tagBackgroundSuccessInverse: e.o2Green10,
216
233
  tagBackgroundWarningInverse: e.o2Orange10,
217
234
  tagBackgroundErrorInverse: e.pepper10,
218
- cardContentOverlay: `linear-gradient(180deg, ${(0, _color.applyAlpha)(e.black, 0)} 0%, ${(0, _color.applyAlpha)(e.black, 0.4)} 30%, ${(0, _color.applyAlpha)(e.black, 0.7)} 100%)`
235
+ cardContentOverlay: `linear-gradient(180deg, ${(0, _color.applyAlpha)(e.black, 0)} 0%, ${(0, _color.applyAlpha)(e.black, 0.4)} 30%, ${(0, _color.applyAlpha)(e.black, 0.7)} 100%)`,
236
+ cardFooterOverlay: (0, _color.applyAlpha)(e.black, 0.7)
219
237
  },
220
238
  darkModeColors: {
221
239
  background: e.darkModeBlack,
@@ -248,34 +266,51 @@ const e = {
248
266
  buttonDangerBackground: e.pepper,
249
267
  buttonDangerBackgroundPressed: e.pepper60,
250
268
  buttonDangerBackgroundHover: e.pepper60,
251
- buttonLinkDangerBackgroundPressed: (0, _color.applyAlpha)(e.white, 0.08),
252
269
  buttonLinkDangerBackgroundInverse: (0, _color.applyAlpha)(e.white, 0),
270
+ buttonLinkDangerBackgroundMedia: e.white,
271
+ buttonLinkDangerBackgroundPressed: (0, _color.applyAlpha)(e.white, 0.08),
253
272
  buttonLinkDangerBackgroundInversePressed: (0, _color.applyAlpha)(e.white, 0.08),
273
+ buttonLinkDangerBackgroundMediaPressed: e.pepper10,
254
274
  buttonLinkBackgroundPressed: (0, _color.applyAlpha)(e.white, 0.08),
255
275
  buttonLinkBackgroundInversePressed: (0, _color.applyAlpha)(e.white, 0.08),
276
+ buttonLinkBackgroundMediaPressed: (0, _color.applyAlpha)(e.white, 0.08),
256
277
  buttonPrimaryBackground: e.darkModeO2BluePrimary,
257
278
  buttonPrimaryBackgroundInverse: e.darkModeO2BluePrimary,
258
- buttonPrimaryBackgroundPressed: e.darkModeO2BluePrimaryDark,
279
+ buttonPrimaryBackgroundMedia: e.white,
259
280
  buttonPrimaryBackgroundHover: e.darkModeO2BluePrimaryDark,
281
+ buttonPrimaryBackgroundInverseHover: e.darkModeO2BluePrimaryDark,
282
+ buttonPrimaryBackgroundMediaHover: e.o2BluePrimary30,
283
+ buttonPrimaryBackgroundPressed: e.darkModeO2BluePrimaryDark,
260
284
  buttonPrimaryBackgroundInversePressed: e.darkModeO2BluePrimaryDark,
261
- buttonSecondaryBackgroundPressed: (0, _color.applyAlpha)(e.white, 0.15),
285
+ buttonPrimaryBackgroundMediaPressed: e.o2BluePrimary30,
262
286
  buttonSecondaryBorder: e.white,
263
- buttonSecondaryBorderPressed: e.white,
264
287
  buttonSecondaryBorderInverse: e.white,
288
+ buttonSecondaryBorderMedia: e.white,
289
+ buttonSecondaryBorderPressed: e.white,
265
290
  buttonSecondaryBorderInversePressed: e.white,
291
+ buttonSecondaryBorderMediaPressed: e.o2BluePrimary30,
266
292
  buttonSecondaryBackgroundHover: (0, _color.applyAlpha)(e.white, 0.15),
267
293
  buttonSecondaryBackgroundInverseHover: (0, _color.applyAlpha)(e.white, 0.15),
294
+ buttonSecondaryBackgroundMediaHover: (0, _color.applyAlpha)(e.white, 0.15),
295
+ buttonSecondaryBackgroundPressed: (0, _color.applyAlpha)(e.white, 0.15),
268
296
  buttonSecondaryBackgroundInversePressed: (0, _color.applyAlpha)(e.white, 0.15),
297
+ buttonSecondaryBackgroundMediaPressed: (0, _color.applyAlpha)(e.white, 0.15),
269
298
  textButtonPrimary: e.grey2,
270
299
  textButtonPrimaryInverse: e.grey2,
300
+ textButtonPrimaryMedia: e.o2BluePrimary,
271
301
  textButtonPrimaryInversePressed: e.grey2,
302
+ textButtonPrimaryMediaPressed: e.o2BluePrimary70,
272
303
  textButtonSecondary: e.grey2,
273
- textButtonSecondaryPressed: e.grey2,
274
304
  textButtonSecondaryInverse: e.grey2,
305
+ textButtonSecondaryMedia: e.white,
306
+ textButtonSecondaryPressed: e.grey2,
275
307
  textButtonSecondaryInversePressed: e.grey2,
308
+ textButtonSecondaryMediaPressed: e.white,
276
309
  textLink: e.o2BluePrimary30,
277
310
  textLinkInverse: e.o2BluePrimary30,
311
+ textLinkMedia: e.white,
278
312
  textLinkDanger: e.pepper,
313
+ textLinkDangerMedia: e.pepper,
279
314
  textLinkSnackbar: e.o2BluePrimary30,
280
315
  textActivated: e.o2BluePrimary30,
281
316
  textBrand: e.o2BluePrimary30,
@@ -369,7 +404,8 @@ const e = {
369
404
  tagBackgroundSuccessInverse: e.darkModeGrey6,
370
405
  tagBackgroundWarningInverse: e.darkModeGrey6,
371
406
  tagBackgroundErrorInverse: e.darkModeGrey6,
372
- cardContentOverlay: `linear-gradient(180deg, ${(0, _color.applyAlpha)(e.black, 0)} 0%, ${(0, _color.applyAlpha)(e.black, 0.4)} 30%, ${(0, _color.applyAlpha)(e.black, 0.7)} 100%)`
407
+ cardContentOverlay: `linear-gradient(180deg, ${(0, _color.applyAlpha)(e.black, 0)} 0%, ${(0, _color.applyAlpha)(e.black, 0.4)} 30%, ${(0, _color.applyAlpha)(e.black, 0.7)} 100%)`,
408
+ cardFooterOverlay: (0, _color.applyAlpha)(e.black, 0.7)
373
409
  },
374
410
  borderRadii: {
375
411
  avatar: "50%",