@telefonica/mistica 16.36.0 → 16.37.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (333) hide show
  1. package/css/blau.css +96 -24
  2. package/css/esimflag.css +93 -21
  3. package/css/mistica-common.css +9 -4
  4. package/css/mistica.css +1 -1
  5. package/css/movistar.css +101 -29
  6. package/css/o2-new.css +99 -28
  7. package/css/o2.css +93 -21
  8. package/css/telefonica.css +96 -24
  9. package/css/tu.css +96 -24
  10. package/css/vivo-new.css +96 -24
  11. package/css/vivo.css +96 -24
  12. package/dist/accordion.css-mistica.js +10 -10
  13. package/dist/align.css-mistica.js +1 -1
  14. package/dist/avatar.css-mistica.js +2 -2
  15. package/dist/badge.css-mistica.js +2 -2
  16. package/dist/box.css-mistica.js +13 -13
  17. package/dist/box.js +5 -5
  18. package/dist/boxed.css-mistica.js +24 -24
  19. package/dist/boxed.d.ts +2 -1
  20. package/dist/boxed.js +10 -9
  21. package/dist/button-group.css-mistica.js +4 -4
  22. package/dist/button-group.js +2 -2
  23. package/dist/button-layout.css-mistica.js +18 -18
  24. package/dist/button.css-mistica.js +35 -35
  25. package/dist/callout.css-mistica.js +5 -5
  26. package/dist/card-cover.d.ts +126 -0
  27. package/dist/card-cover.js +185 -0
  28. package/dist/card-data.d.ts +63 -0
  29. package/dist/card-data.js +171 -0
  30. package/dist/card-internal.css-mistica.js +78 -0
  31. package/dist/card-internal.css.d.ts +17 -0
  32. package/dist/card-internal.d.ts +166 -0
  33. package/dist/card-internal.js +1063 -0
  34. package/dist/card-media.d.ts +78 -0
  35. package/dist/card-media.js +163 -0
  36. package/dist/card-naked.d.ts +11 -0
  37. package/dist/card-naked.js +154 -0
  38. package/dist/carousel.css-mistica.js +25 -25
  39. package/dist/checkbox.css-mistica.js +9 -9
  40. package/dist/checkbox.js +2 -2
  41. package/dist/chip.css-mistica.js +15 -15
  42. package/dist/circle.css-mistica.js +1 -1
  43. package/dist/community/advanced-data-card.css-mistica.js +24 -24
  44. package/dist/community/advanced-data-card.d.ts +1 -1
  45. package/dist/community/advanced-data-card.js +7 -7
  46. package/dist/community/blocks.css-mistica.js +1 -1
  47. package/dist/community/example-component.css-mistica.js +1 -1
  48. package/dist/counter.css-mistica.js +9 -9
  49. package/dist/counter.js +8 -8
  50. package/dist/cover-hero-media.js +9 -9
  51. package/dist/cover-hero.css-mistica.js +15 -15
  52. package/dist/credit-card-number-field.css-mistica.js +3 -3
  53. package/dist/date-field.css-mistica.js +1 -1
  54. package/dist/date-time-picker.css-mistica.js +1 -1
  55. package/dist/dialog.css-mistica.js +12 -12
  56. package/dist/dialog.js +14 -14
  57. package/dist/divider.css-mistica.js +2 -2
  58. package/dist/double-field.css-mistica.js +4 -4
  59. package/dist/drawer.css-mistica.js +2 -2
  60. package/dist/empty-state-card.css-mistica.js +1 -1
  61. package/dist/empty-state.css-mistica.js +6 -6
  62. package/dist/fade-in.css-mistica.js +1 -1
  63. package/dist/feedback.css-mistica.js +4 -4
  64. package/dist/fixed-footer-layout.css-mistica.js +10 -10
  65. package/dist/fixed-footer-layout.js +5 -5
  66. package/dist/form.css-mistica.js +1 -1
  67. package/dist/form.js +5 -5
  68. package/dist/grid-layout.css-mistica.js +3 -3
  69. package/dist/grid.css-mistica.js +122 -122
  70. package/dist/header.css-mistica.js +3 -3
  71. package/dist/hero.css-mistica.js +6 -6
  72. package/dist/hooks.d.ts +4 -0
  73. package/dist/hooks.js +94 -83
  74. package/dist/horizontal-scroll.css-mistica.js +1 -1
  75. package/dist/horizontal-scroll.js +2 -2
  76. package/dist/icon-button.css-mistica.js +47 -47
  77. package/dist/icon-button.js +3 -3
  78. package/dist/icons/icon-chevron.css-mistica.js +2 -2
  79. package/dist/icons/icon-error.css-mistica.js +1 -1
  80. package/dist/image.css-mistica.js +5 -5
  81. package/dist/image.d.ts +2 -0
  82. package/dist/image.js +24 -20
  83. package/dist/index.d.ts +18 -3
  84. package/dist/index.js +28 -13
  85. package/dist/inline.css-mistica.js +10 -10
  86. package/dist/list.css-mistica.js +30 -15
  87. package/dist/list.css.d.ts +5 -0
  88. package/dist/list.d.ts +16 -1
  89. package/dist/list.js +158 -99
  90. package/dist/loading-bar.css-mistica.js +1 -1
  91. package/dist/loading-bar.js +2 -2
  92. package/dist/loading-screen.css-mistica.js +9 -9
  93. package/dist/loading-screen.js +3 -3
  94. package/dist/logo.css-mistica.js +5 -5
  95. package/dist/menu.css-mistica.js +14 -14
  96. package/dist/menu.js +7 -7
  97. package/dist/mosaic.css-mistica.js +1 -1
  98. package/dist/navigation-bar.css-mistica.js +32 -32
  99. package/dist/navigation-breadcrumbs.css-mistica.js +3 -3
  100. package/dist/package-version.js +1 -1
  101. package/dist/pin-field.css-mistica.js +9 -9
  102. package/dist/pin-field.js +2 -2
  103. package/dist/popover.css-mistica.js +1 -1
  104. package/dist/progress-bar.css-mistica.js +4 -4
  105. package/dist/progress-bar.js +2 -2
  106. package/dist/radio-button.css-mistica.js +18 -18
  107. package/dist/radio-button.js +5 -5
  108. package/dist/rating.css-mistica.js +4 -4
  109. package/dist/rating.js +8 -8
  110. package/dist/responsive-layout.css-mistica.js +5 -5
  111. package/dist/responsive-layout.js +6 -6
  112. package/dist/screen-reader-only.css-mistica.js +1 -1
  113. package/dist/select.css-mistica.js +18 -18
  114. package/dist/select.js +9 -9
  115. package/dist/sheet-action-row.css-mistica.js +1 -1
  116. package/dist/sheet-common.css-mistica.js +12 -12
  117. package/dist/sheet-info.css-mistica.js +1 -1
  118. package/dist/skeletons.css-mistica.js +6 -6
  119. package/dist/skins/blau.js +50 -14
  120. package/dist/skins/esimflag.js +49 -13
  121. package/dist/skins/movistar.js +54 -18
  122. package/dist/skins/o2-new.js +49 -13
  123. package/dist/skins/o2.js +49 -13
  124. package/dist/skins/skin-contract.css-mistica.js +390 -354
  125. package/dist/skins/skin-contract.css.d.ts +48 -12
  126. package/dist/skins/telefonica.js +50 -14
  127. package/dist/skins/tu.js +50 -14
  128. package/dist/skins/types/colors.d.ts +24 -6
  129. package/dist/skins/vivo-new.js +50 -14
  130. package/dist/skins/vivo.js +50 -14
  131. package/dist/skip-link.css-mistica.js +2 -2
  132. package/dist/slider.css-mistica.js +13 -13
  133. package/dist/slider.js +9 -9
  134. package/dist/snackbar.css-mistica.js +7 -7
  135. package/dist/spinner.css-mistica.js +1 -1
  136. package/dist/stack.css-mistica.js +5 -5
  137. package/dist/stacking-group.css-mistica.js +1 -1
  138. package/dist/stepper.css-mistica.js +8 -8
  139. package/dist/stepper.js +3 -3
  140. package/dist/switch-component.css-mistica.js +37 -37
  141. package/dist/table.css-mistica.js +8 -8
  142. package/dist/table.d.ts +1 -1
  143. package/dist/table.js +8 -8
  144. package/dist/tabs.css-mistica.js +17 -17
  145. package/dist/tag.css-mistica.js +1 -1
  146. package/dist/tag.js +10 -10
  147. package/dist/text-field-base.css-mistica.js +10 -10
  148. package/dist/text-field-base.js +8 -8
  149. package/dist/text-field-components.css-mistica.js +18 -18
  150. package/dist/text-field-components.js +2 -2
  151. package/dist/text-link.css-mistica.js +5 -5
  152. package/dist/text.css-mistica.js +7 -7
  153. package/dist/text.js +7 -7
  154. package/dist/theme-context.css-mistica.js +430 -394
  155. package/dist/theme-context.css.d.ts +48 -12
  156. package/dist/timeline.css-mistica.js +12 -12
  157. package/dist/timer.css-mistica.js +8 -8
  158. package/dist/tooltip.css-mistica.js +7 -7
  159. package/dist/touchable.css-mistica.js +1 -1
  160. package/dist/utils/aspect-ratio-support.css-mistica.js +5 -5
  161. package/dist/utils/aspect-ratio-support.d.ts +5 -0
  162. package/dist/utils/aspect-ratio-support.js +26 -15
  163. package/dist/utils/color.d.ts +11 -0
  164. package/dist/utils/color.js +27 -6
  165. package/dist/utils/headings.d.ts +3 -0
  166. package/dist/video.css-mistica.js +1 -1
  167. package/dist/video.js +2 -2
  168. package/dist/vivinho-loading-animation/vivinho-loading-animation.css-mistica.js +1 -1
  169. package/dist-es/accordion.css-mistica.js +7 -7
  170. package/dist-es/align.css-mistica.js +1 -1
  171. package/dist-es/avatar.css-mistica.js +2 -2
  172. package/dist-es/badge.css-mistica.js +2 -2
  173. package/dist-es/box.css-mistica.js +13 -13
  174. package/dist-es/box.js +9 -9
  175. package/dist-es/boxed.css-mistica.js +23 -23
  176. package/dist-es/boxed.js +20 -19
  177. package/dist-es/button-group.css-mistica.js +2 -2
  178. package/dist-es/button-group.js +4 -4
  179. package/dist-es/button-layout.css-mistica.js +15 -15
  180. package/dist-es/button.css-mistica.js +22 -22
  181. package/dist-es/callout.css-mistica.js +5 -5
  182. package/dist-es/callout.js +5 -5
  183. package/dist-es/card-cover.js +125 -0
  184. package/dist-es/card-data.js +110 -0
  185. package/dist-es/card-internal.css-mistica.js +22 -0
  186. package/dist-es/card-internal.js +992 -0
  187. package/dist-es/card-media.js +105 -0
  188. package/dist-es/card-naked.js +96 -0
  189. package/dist-es/carousel.css-mistica.js +9 -9
  190. package/dist-es/checkbox.css-mistica.js +8 -8
  191. package/dist-es/checkbox.js +6 -6
  192. package/dist-es/chip.css-mistica.js +13 -13
  193. package/dist-es/circle.css-mistica.js +1 -1
  194. package/dist-es/community/advanced-data-card.css-mistica.js +7 -7
  195. package/dist-es/community/advanced-data-card.js +29 -29
  196. package/dist-es/community/blocks.css-mistica.js +1 -1
  197. package/dist-es/community/example-component.css-mistica.js +1 -1
  198. package/dist-es/counter.css-mistica.js +2 -2
  199. package/dist-es/counter.js +8 -8
  200. package/dist-es/cover-hero-media.js +9 -9
  201. package/dist-es/cover-hero.css-mistica.js +4 -4
  202. package/dist-es/credit-card-number-field.css-mistica.js +3 -3
  203. package/dist-es/date-field.css-mistica.js +1 -1
  204. package/dist-es/date-time-picker.css-mistica.js +1 -1
  205. package/dist-es/dialog.css-mistica.js +5 -5
  206. package/dist-es/dialog.js +31 -31
  207. package/dist-es/divider.css-mistica.js +2 -2
  208. package/dist-es/double-field.css-mistica.js +4 -4
  209. package/dist-es/drawer.css-mistica.js +2 -2
  210. package/dist-es/empty-state-card.css-mistica.js +1 -1
  211. package/dist-es/empty-state.css-mistica.js +6 -6
  212. package/dist-es/empty-state.js +7 -7
  213. package/dist-es/fade-in.css-mistica.js +1 -1
  214. package/dist-es/feedback.css-mistica.js +2 -2
  215. package/dist-es/fixed-footer-layout.css-mistica.js +5 -5
  216. package/dist-es/fixed-footer-layout.js +5 -5
  217. package/dist-es/form.css-mistica.js +1 -1
  218. package/dist-es/form.js +5 -5
  219. package/dist-es/grid-layout.css-mistica.js +3 -3
  220. package/dist-es/grid.css-mistica.js +122 -122
  221. package/dist-es/grid.js +2 -2
  222. package/dist-es/header.css-mistica.js +2 -2
  223. package/dist-es/hero.css-mistica.js +3 -3
  224. package/dist-es/hooks.js +86 -78
  225. package/dist-es/horizontal-scroll.css-mistica.js +1 -1
  226. package/dist-es/horizontal-scroll.js +2 -2
  227. package/dist-es/icon-button.css-mistica.js +45 -45
  228. package/dist-es/icon-button.js +3 -3
  229. package/dist-es/icons/icon-chevron.css-mistica.js +2 -2
  230. package/dist-es/icons/icon-error.css-mistica.js +1 -1
  231. package/dist-es/image.css-mistica.js +4 -4
  232. package/dist-es/image.js +42 -38
  233. package/dist-es/index.js +1887 -1884
  234. package/dist-es/inline.css-mistica.js +10 -10
  235. package/dist-es/list.css-mistica.js +2 -2
  236. package/dist-es/list.js +226 -174
  237. package/dist-es/loading-bar.css-mistica.js +1 -1
  238. package/dist-es/loading-bar.js +6 -6
  239. package/dist-es/loading-screen.css-mistica.js +5 -5
  240. package/dist-es/loading-screen.js +8 -8
  241. package/dist-es/logo.css-mistica.js +5 -5
  242. package/dist-es/menu.css-mistica.js +13 -13
  243. package/dist-es/menu.js +7 -7
  244. package/dist-es/mosaic.css-mistica.js +1 -1
  245. package/dist-es/navigation-bar.css-mistica.js +17 -17
  246. package/dist-es/navigation-breadcrumbs.css-mistica.js +2 -2
  247. package/dist-es/package-version.js +1 -1
  248. package/dist-es/pin-field.css-mistica.js +2 -2
  249. package/dist-es/pin-field.js +8 -8
  250. package/dist-es/popover.css-mistica.js +1 -1
  251. package/dist-es/progress-bar.css-mistica.js +4 -4
  252. package/dist-es/progress-bar.js +10 -10
  253. package/dist-es/radio-button.css-mistica.js +16 -16
  254. package/dist-es/radio-button.js +5 -5
  255. package/dist-es/rating.css-mistica.js +3 -3
  256. package/dist-es/rating.js +12 -12
  257. package/dist-es/responsive-layout.css-mistica.js +5 -5
  258. package/dist-es/responsive-layout.js +15 -15
  259. package/dist-es/screen-reader-only.css-mistica.js +1 -1
  260. package/dist-es/select.css-mistica.js +17 -17
  261. package/dist-es/select.js +15 -15
  262. package/dist-es/sheet-action-row.css-mistica.js +1 -1
  263. package/dist-es/sheet-common.css-mistica.js +2 -2
  264. package/dist-es/sheet-info.css-mistica.js +1 -1
  265. package/dist-es/skeletons.css-mistica.js +5 -5
  266. package/dist-es/skins/blau.js +50 -14
  267. package/dist-es/skins/esimflag.js +49 -13
  268. package/dist-es/skins/movistar.js +54 -18
  269. package/dist-es/skins/o2-new.js +49 -13
  270. package/dist-es/skins/o2.js +49 -13
  271. package/dist-es/skins/skin-contract.css-mistica.js +390 -354
  272. package/dist-es/skins/telefonica.js +50 -14
  273. package/dist-es/skins/tu.js +52 -16
  274. package/dist-es/skins/vivo-new.js +52 -16
  275. package/dist-es/skins/vivo.js +52 -16
  276. package/dist-es/skip-link.css-mistica.js +2 -2
  277. package/dist-es/slider.css-mistica.js +11 -11
  278. package/dist-es/slider.js +9 -9
  279. package/dist-es/snackbar.css-mistica.js +5 -5
  280. package/dist-es/spinner.css-mistica.js +1 -1
  281. package/dist-es/stack.css-mistica.js +5 -5
  282. package/dist-es/stacking-group.css-mistica.js +1 -1
  283. package/dist-es/stepper.css-mistica.js +3 -3
  284. package/dist-es/stepper.js +3 -3
  285. package/dist-es/style.css +1 -1
  286. package/dist-es/switch-component.css-mistica.js +29 -29
  287. package/dist-es/table.css-mistica.js +8 -8
  288. package/dist-es/table.js +12 -12
  289. package/dist-es/tabs.css-mistica.js +14 -14
  290. package/dist-es/tag.css-mistica.js +1 -1
  291. package/dist-es/tag.js +17 -17
  292. package/dist-es/text-field-base.css-mistica.js +2 -2
  293. package/dist-es/text-field-base.js +16 -16
  294. package/dist-es/text-field-components.css-mistica.js +5 -5
  295. package/dist-es/text-field-components.js +4 -4
  296. package/dist-es/text-link.css-mistica.js +5 -5
  297. package/dist-es/text.css-mistica.js +7 -7
  298. package/dist-es/text.js +6 -6
  299. package/dist-es/theme-context.css-mistica.js +430 -394
  300. package/dist-es/timeline.css-mistica.js +11 -11
  301. package/dist-es/timeline.js +4 -4
  302. package/dist-es/timer.css-mistica.js +7 -7
  303. package/dist-es/tooltip.css-mistica.js +2 -2
  304. package/dist-es/touchable.css-mistica.js +1 -1
  305. package/dist-es/utils/aspect-ratio-support.css-mistica.js +4 -4
  306. package/dist-es/utils/aspect-ratio-support.js +31 -23
  307. package/dist-es/utils/color.js +23 -5
  308. package/dist-es/video.css-mistica.js +1 -1
  309. package/dist-es/video.js +5 -5
  310. package/dist-es/vivinho-loading-animation/vivinho-loading-animation.css-mistica.js +1 -1
  311. package/package.json +1 -1
  312. package/dist/card.css-mistica.js +0 -106
  313. package/dist/card.css.d.ts +0 -33
  314. package/dist/card.d.ts +0 -299
  315. package/dist/card.js +0 -1694
  316. package/dist/highlighted-card.css-mistica.js +0 -30
  317. package/dist/highlighted-card.css.d.ts +0 -7
  318. package/dist/highlighted-card.css.ts.vanilla.css-mistica.js +0 -11
  319. package/dist/highlighted-card.d.ts +0 -34
  320. package/dist/highlighted-card.js +0 -253
  321. package/dist/maybe-dismissable.css-mistica.js +0 -21
  322. package/dist/maybe-dismissable.css.ts.vanilla.css-mistica.js +0 -11
  323. package/dist/maybe-dismissable.js +0 -108
  324. package/dist-es/card.css-mistica.js +0 -8
  325. package/dist-es/card.js +0 -1599
  326. package/dist-es/highlighted-card.css-mistica.js +0 -7
  327. package/dist-es/highlighted-card.css.ts.vanilla.css-mistica.js +0 -2
  328. package/dist-es/highlighted-card.js +0 -198
  329. package/dist-es/maybe-dismissable.css-mistica.js +0 -4
  330. package/dist-es/maybe-dismissable.css.ts.vanilla.css-mistica.js +0 -2
  331. package/dist-es/maybe-dismissable.js +0 -45
  332. /package/dist/{card.css.ts.vanilla.css-mistica.js → card-internal.css.ts.vanilla.css-mistica.js} +0 -0
  333. /package/dist-es/{card.css.ts.vanilla.css-mistica.js → card-internal.css.ts.vanilla.css-mistica.js} +0 -0
package/css/blau.css CHANGED
@@ -78,34 +78,51 @@
78
78
  --mistica-color-buttonDangerBackground: var(--mistica-blau-blauRed);
79
79
  --mistica-color-buttonDangerBackgroundPressed: var(--mistica-blau-blauRed70);
80
80
  --mistica-color-buttonDangerBackgroundHover: var(--mistica-blau-blauRed70);
81
- --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-blau-blauRed10);
82
81
  --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-blau-white);
82
+ --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-blau-white);
83
+ --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-blau-blauRed10);
83
84
  --mistica-color-buttonLinkDangerBackgroundInversePressed: var(--mistica-blau-blauRed10);
85
+ --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-blau-blauRed10);
84
86
  --mistica-color-buttonLinkBackgroundPressed: var(--mistica-blau-blauPurple10);
85
87
  --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-blau-raw-white), 0.15);
88
+ --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-blau-raw-white), 0.15);
86
89
  --mistica-color-buttonPrimaryBackground: var(--mistica-blau-blauBlueSecondary);
87
90
  --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-blau-white);
88
- --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-blau-blauBlueSecondary60);
91
+ --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-blau-white);
89
92
  --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-blau-blauBlueSecondary60);
93
+ --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-blau-blauBluePrimary20);
94
+ --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-blau-blauBluePrimary20);
95
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-blau-blauBlueSecondary60);
90
96
  --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-blau-blauBluePrimary30);
97
+ --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-blau-blauBluePrimary30);
91
98
  --mistica-color-buttonSecondaryBorder: var(--mistica-blau-blauBlueSecondary);
92
- --mistica-color-buttonSecondaryBorderPressed: var(--mistica-blau-blauBlueSecondary60);
93
99
  --mistica-color-buttonSecondaryBorderInverse: var(--mistica-blau-white);
94
- --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-blau-blauBlueSecondary10);
95
- --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-blau-blauBlueSecondary10);
100
+ --mistica-color-buttonSecondaryBorderMedia: var(--mistica-blau-white);
101
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-blau-blauBlueSecondary60);
96
102
  --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-blau-white);
103
+ --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-blau-white);
104
+ --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-blau-blauBlueSecondary10);
97
105
  --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-blau-raw-white), 0.2);
106
+ --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-blau-raw-white), 0.2);
107
+ --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-blau-blauBlueSecondary10);
98
108
  --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-blau-raw-white), 0.2);
109
+ --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-blau-raw-white), 0.2);
99
110
  --mistica-color-textButtonPrimary: var(--mistica-blau-white);
100
111
  --mistica-color-textButtonPrimaryInverse: var(--mistica-blau-blauBlueSecondary);
112
+ --mistica-color-textButtonPrimaryMedia: var(--mistica-blau-blauBlueSecondary);
101
113
  --mistica-color-textButtonPrimaryInversePressed: var(--mistica-blau-blauBlueSecondary60);
114
+ --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-blau-blauBlueSecondary60);
102
115
  --mistica-color-textButtonSecondary: var(--mistica-blau-blauBlueSecondary);
103
- --mistica-color-textButtonSecondaryPressed: var(--mistica-blau-blauBlueSecondary60);
104
116
  --mistica-color-textButtonSecondaryInverse: var(--mistica-blau-white);
117
+ --mistica-color-textButtonSecondaryMedia: var(--mistica-blau-white);
118
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-blau-blauBlueSecondary60);
105
119
  --mistica-color-textButtonSecondaryInversePressed: var(--mistica-blau-white);
120
+ --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-blau-white);
106
121
  --mistica-color-textLink: var(--mistica-blau-blauPurple);
107
122
  --mistica-color-textLinkInverse: var(--mistica-blau-white);
123
+ --mistica-color-textLinkMedia: var(--mistica-blau-white);
108
124
  --mistica-color-textLinkDanger: var(--mistica-blau-blauRed);
125
+ --mistica-color-textLinkDangerMedia: var(--mistica-blau-blauRed);
109
126
  --mistica-color-textLinkSnackbar: var(--mistica-blau-blauPurple30);
110
127
  --mistica-color-textActivated: var(--mistica-blau-blauBlueSecondary);
111
128
  --mistica-color-textBrand: var(--mistica-blau-blauBlueSecondary);
@@ -203,6 +220,7 @@
203
220
  rgba(var(--mistica-blau-raw-grey6), 0.4) 30%,
204
221
  rgba(var(--mistica-blau-raw-grey6), 0.7) 100%
205
222
  );
223
+ --mistica-color-cardFooterOverlay: rgba(var(--mistica-blau-raw-grey6), 0.7);
206
224
 
207
225
  /* Border radius */
208
226
  --mistica-border-radius-avatar: 50%;
@@ -294,34 +312,51 @@
294
312
  --mistica-color-buttonDangerBackground: var(--mistica-blau-blauRed);
295
313
  --mistica-color-buttonDangerBackgroundPressed: var(--mistica-blau-blauRed70);
296
314
  --mistica-color-buttonDangerBackgroundHover: var(--mistica-blau-blauRed70);
297
- --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-blau-raw-blauRed), 0.3);
298
315
  --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-blau-raw-white), 0);
316
+ --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-blau-white);
317
+ --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-blau-raw-blauRed), 0.3);
299
318
  --mistica-color-buttonLinkDangerBackgroundInversePressed: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
319
+ --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-blau-blauRed10);
300
320
  --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
301
321
  --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
322
+ --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-blau-raw-white), 0.15);
302
323
  --mistica-color-buttonPrimaryBackground: var(--mistica-blau-blauBlueSecondary);
303
324
  --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-blau-blauBlueSecondary);
304
- --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-blau-blauBlueSecondary60);
325
+ --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-blau-white);
305
326
  --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-blau-blauBlueSecondary60);
327
+ --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-blau-blauBlueSecondary60);
328
+ --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-blau-blauBluePrimary20);
329
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-blau-blauBlueSecondary60);
306
330
  --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-blau-blauBlueSecondary60);
331
+ --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-blau-blauBluePrimary30);
307
332
  --mistica-color-buttonSecondaryBorder: var(--mistica-blau-white);
308
- --mistica-color-buttonSecondaryBorderPressed: var(--mistica-blau-white);
309
- --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-blau-raw-white), 0.15);
310
- --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-blau-raw-white), 0.15);
311
333
  --mistica-color-buttonSecondaryBorderInverse: var(--mistica-blau-white);
334
+ --mistica-color-buttonSecondaryBorderMedia: var(--mistica-blau-white);
335
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-blau-white);
312
336
  --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-blau-white);
337
+ --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-blau-white);
338
+ --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-blau-raw-white), 0.15);
313
339
  --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-blau-raw-white), 0.15);
340
+ --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-blau-raw-white), 0.2);
341
+ --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-blau-raw-white), 0.15);
314
342
  --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-blau-raw-white), 0.15);
343
+ --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-blau-raw-white), 0.2);
315
344
  --mistica-color-textButtonPrimary: var(--mistica-blau-grey2);
316
345
  --mistica-color-textButtonPrimaryInverse: var(--mistica-blau-grey2);
346
+ --mistica-color-textButtonPrimaryMedia: var(--mistica-blau-blauBlueSecondary);
317
347
  --mistica-color-textButtonPrimaryInversePressed: var(--mistica-blau-grey2);
348
+ --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-blau-blauBlueSecondary60);
318
349
  --mistica-color-textButtonSecondary: var(--mistica-blau-grey2);
319
- --mistica-color-textButtonSecondaryPressed: var(--mistica-blau-grey2);
320
350
  --mistica-color-textButtonSecondaryInverse: var(--mistica-blau-grey2);
351
+ --mistica-color-textButtonSecondaryMedia: var(--mistica-blau-white);
352
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-blau-grey2);
321
353
  --mistica-color-textButtonSecondaryInversePressed: var(--mistica-blau-grey2);
354
+ --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-blau-white);
322
355
  --mistica-color-textLink: var(--mistica-blau-blauPurple30);
323
356
  --mistica-color-textLinkInverse: var(--mistica-blau-blauPurple30);
357
+ --mistica-color-textLinkMedia: var(--mistica-blau-white);
324
358
  --mistica-color-textLinkDanger: var(--mistica-blau-blauRed40);
359
+ --mistica-color-textLinkDangerMedia: var(--mistica-blau-blauRed);
325
360
  --mistica-color-textLinkSnackbar: var(--mistica-blau-blauPurple30);
326
361
  --mistica-color-textActivated: var(--mistica-blau-blauBluePrimary);
327
362
  --mistica-color-textBrand: var(--mistica-blau-blauBluePrimary);
@@ -419,6 +454,7 @@
419
454
  rgba(var(--mistica-blau-raw-grey6), 0.4) 30%,
420
455
  rgba(var(--mistica-blau-raw-grey6), 0.7) 100%
421
456
  );
457
+ --mistica-color-cardFooterOverlay: rgba(var(--mistica-blau-raw-grey6), 0.7);
422
458
  }
423
459
 
424
460
  @media (prefers-color-scheme: dark) {
@@ -455,37 +491,54 @@
455
491
  --mistica-color-buttonDangerBackground: var(--mistica-blau-blauRed);
456
492
  --mistica-color-buttonDangerBackgroundPressed: var(--mistica-blau-blauRed70);
457
493
  --mistica-color-buttonDangerBackgroundHover: var(--mistica-blau-blauRed70);
458
- --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-blau-raw-blauRed), 0.3);
459
494
  --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-blau-raw-white), 0);
495
+ --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-blau-white);
496
+ --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-blau-raw-blauRed), 0.3);
460
497
  --mistica-color-buttonLinkDangerBackgroundInversePressed: rgba(
461
498
  var(--mistica-blau-raw-blauPurple),
462
499
  0.3
463
500
  );
501
+ --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-blau-blauRed10);
464
502
  --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
465
503
  --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
504
+ --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-blau-raw-white), 0.15);
466
505
  --mistica-color-buttonPrimaryBackground: var(--mistica-blau-blauBlueSecondary);
467
506
  --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-blau-blauBlueSecondary);
468
- --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-blau-blauBlueSecondary60);
507
+ --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-blau-white);
469
508
  --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-blau-blauBlueSecondary60);
509
+ --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-blau-blauBlueSecondary60);
510
+ --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-blau-blauBluePrimary20);
511
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-blau-blauBlueSecondary60);
470
512
  --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-blau-blauBlueSecondary60);
513
+ --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-blau-blauBluePrimary30);
471
514
  --mistica-color-buttonSecondaryBorder: var(--mistica-blau-white);
472
- --mistica-color-buttonSecondaryBorderPressed: var(--mistica-blau-white);
473
- --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-blau-raw-white), 0.15);
474
- --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-blau-raw-white), 0.15);
475
515
  --mistica-color-buttonSecondaryBorderInverse: var(--mistica-blau-white);
516
+ --mistica-color-buttonSecondaryBorderMedia: var(--mistica-blau-white);
517
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-blau-white);
476
518
  --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-blau-white);
519
+ --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-blau-white);
520
+ --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-blau-raw-white), 0.15);
477
521
  --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-blau-raw-white), 0.15);
522
+ --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-blau-raw-white), 0.2);
523
+ --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-blau-raw-white), 0.15);
478
524
  --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-blau-raw-white), 0.15);
525
+ --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-blau-raw-white), 0.2);
479
526
  --mistica-color-textButtonPrimary: var(--mistica-blau-grey2);
480
527
  --mistica-color-textButtonPrimaryInverse: var(--mistica-blau-grey2);
528
+ --mistica-color-textButtonPrimaryMedia: var(--mistica-blau-blauBlueSecondary);
481
529
  --mistica-color-textButtonPrimaryInversePressed: var(--mistica-blau-grey2);
530
+ --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-blau-blauBlueSecondary60);
482
531
  --mistica-color-textButtonSecondary: var(--mistica-blau-grey2);
483
- --mistica-color-textButtonSecondaryPressed: var(--mistica-blau-grey2);
484
532
  --mistica-color-textButtonSecondaryInverse: var(--mistica-blau-grey2);
533
+ --mistica-color-textButtonSecondaryMedia: var(--mistica-blau-white);
534
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-blau-grey2);
485
535
  --mistica-color-textButtonSecondaryInversePressed: var(--mistica-blau-grey2);
536
+ --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-blau-white);
486
537
  --mistica-color-textLink: var(--mistica-blau-blauPurple30);
487
538
  --mistica-color-textLinkInverse: var(--mistica-blau-blauPurple30);
539
+ --mistica-color-textLinkMedia: var(--mistica-blau-white);
488
540
  --mistica-color-textLinkDanger: var(--mistica-blau-blauRed40);
541
+ --mistica-color-textLinkDangerMedia: var(--mistica-blau-blauRed);
489
542
  --mistica-color-textLinkSnackbar: var(--mistica-blau-blauPurple30);
490
543
  --mistica-color-textActivated: var(--mistica-blau-blauBluePrimary);
491
544
  --mistica-color-textBrand: var(--mistica-blau-blauBluePrimary);
@@ -583,6 +636,7 @@
583
636
  rgba(var(--mistica-blau-raw-grey6), 0.4) 30%,
584
637
  rgba(var(--mistica-blau-raw-grey6), 0.7) 100%
585
638
  );
639
+ --mistica-color-cardFooterOverlay: rgba(var(--mistica-blau-raw-grey6), 0.7);
586
640
  }
587
641
 
588
642
  [data-mistica-skin='blau'][data-mistica-color-scheme='light'] {
@@ -618,34 +672,51 @@
618
672
  --mistica-color-buttonDangerBackground: var(--mistica-blau-blauRed);
619
673
  --mistica-color-buttonDangerBackgroundPressed: var(--mistica-blau-blauRed70);
620
674
  --mistica-color-buttonDangerBackgroundHover: var(--mistica-blau-blauRed70);
621
- --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-blau-blauRed10);
622
675
  --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-blau-white);
676
+ --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-blau-white);
677
+ --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-blau-blauRed10);
623
678
  --mistica-color-buttonLinkDangerBackgroundInversePressed: var(--mistica-blau-blauRed10);
679
+ --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-blau-blauRed10);
624
680
  --mistica-color-buttonLinkBackgroundPressed: var(--mistica-blau-blauPurple10);
625
681
  --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-blau-raw-white), 0.15);
682
+ --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-blau-raw-white), 0.15);
626
683
  --mistica-color-buttonPrimaryBackground: var(--mistica-blau-blauBlueSecondary);
627
684
  --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-blau-white);
628
- --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-blau-blauBlueSecondary60);
685
+ --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-blau-white);
629
686
  --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-blau-blauBlueSecondary60);
687
+ --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-blau-blauBluePrimary20);
688
+ --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-blau-blauBluePrimary20);
689
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-blau-blauBlueSecondary60);
630
690
  --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-blau-blauBluePrimary30);
691
+ --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-blau-blauBluePrimary30);
631
692
  --mistica-color-buttonSecondaryBorder: var(--mistica-blau-blauBlueSecondary);
632
- --mistica-color-buttonSecondaryBorderPressed: var(--mistica-blau-blauBlueSecondary60);
633
- --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-blau-blauBlueSecondary10);
634
- --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-blau-blauBlueSecondary10);
635
693
  --mistica-color-buttonSecondaryBorderInverse: var(--mistica-blau-white);
694
+ --mistica-color-buttonSecondaryBorderMedia: var(--mistica-blau-white);
695
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-blau-blauBlueSecondary60);
636
696
  --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-blau-white);
697
+ --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-blau-white);
698
+ --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-blau-blauBlueSecondary10);
637
699
  --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-blau-raw-white), 0.2);
700
+ --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-blau-raw-white), 0.2);
701
+ --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-blau-blauBlueSecondary10);
638
702
  --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-blau-raw-white), 0.2);
703
+ --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-blau-raw-white), 0.2);
639
704
  --mistica-color-textButtonPrimary: var(--mistica-blau-white);
640
705
  --mistica-color-textButtonPrimaryInverse: var(--mistica-blau-blauBlueSecondary);
706
+ --mistica-color-textButtonPrimaryMedia: var(--mistica-blau-blauBlueSecondary);
641
707
  --mistica-color-textButtonPrimaryInversePressed: var(--mistica-blau-blauBlueSecondary60);
708
+ --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-blau-blauBlueSecondary60);
642
709
  --mistica-color-textButtonSecondary: var(--mistica-blau-blauBlueSecondary);
643
- --mistica-color-textButtonSecondaryPressed: var(--mistica-blau-blauBlueSecondary60);
644
710
  --mistica-color-textButtonSecondaryInverse: var(--mistica-blau-white);
711
+ --mistica-color-textButtonSecondaryMedia: var(--mistica-blau-white);
712
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-blau-blauBlueSecondary60);
645
713
  --mistica-color-textButtonSecondaryInversePressed: var(--mistica-blau-white);
714
+ --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-blau-white);
646
715
  --mistica-color-textLink: var(--mistica-blau-blauPurple);
647
716
  --mistica-color-textLinkInverse: var(--mistica-blau-white);
717
+ --mistica-color-textLinkMedia: var(--mistica-blau-white);
648
718
  --mistica-color-textLinkDanger: var(--mistica-blau-blauRed);
719
+ --mistica-color-textLinkDangerMedia: var(--mistica-blau-blauRed);
649
720
  --mistica-color-textLinkSnackbar: var(--mistica-blau-blauPurple30);
650
721
  --mistica-color-textActivated: var(--mistica-blau-blauBlueSecondary);
651
722
  --mistica-color-textBrand: var(--mistica-blau-blauBlueSecondary);
@@ -743,6 +814,7 @@
743
814
  rgba(var(--mistica-blau-raw-grey6), 0.4) 30%,
744
815
  rgba(var(--mistica-blau-raw-grey6), 0.7) 100%
745
816
  );
817
+ --mistica-color-cardFooterOverlay: rgba(var(--mistica-blau-raw-grey6), 0.7);
746
818
  }
747
819
  }
748
820
 
package/css/esimflag.css CHANGED
@@ -91,34 +91,51 @@
91
91
  --mistica-color-buttonDangerBackground: var(--mistica-esimflag-tomato55);
92
92
  --mistica-color-buttonDangerBackgroundPressed: var(--mistica-esimflag-tomato65);
93
93
  --mistica-color-buttonDangerBackgroundHover: var(--mistica-esimflag-tomato60);
94
- --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-esimflag-tomato10);
95
94
  --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-esimflag-white);
95
+ --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-esimflag-white);
96
+ --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-esimflag-tomato10);
96
97
  --mistica-color-buttonLinkDangerBackgroundInversePressed: var(--mistica-esimflag-tomato10);
98
+ --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-esimflag-tomato10);
97
99
  --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-esimflag-raw-purple55), 0.08);
98
100
  --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
101
+ --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
99
102
  --mistica-color-buttonPrimaryBackground: var(--mistica-esimflag-blue);
100
103
  --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-esimflag-white);
101
- --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-esimflag-blue65);
104
+ --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-esimflag-white);
102
105
  --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-esimflag-blue55);
106
+ --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-esimflag-blue15);
107
+ --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-esimflag-blue15);
108
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-esimflag-blue65);
103
109
  --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-esimflag-blue15);
110
+ --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-esimflag-blue15);
104
111
  --mistica-color-buttonSecondaryBorder: var(--mistica-esimflag-blue);
105
- --mistica-color-buttonSecondaryBorderPressed: var(--mistica-esimflag-blue55);
106
- --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-esimflag-blue10);
107
- --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-esimflag-blue15);
108
112
  --mistica-color-buttonSecondaryBorderInverse: var(--mistica-esimflag-white);
113
+ --mistica-color-buttonSecondaryBorderMedia: var(--mistica-esimflag-white);
114
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-esimflag-blue55);
109
115
  --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-esimflag-white);
116
+ --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-esimflag-white);
117
+ --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-esimflag-blue10);
110
118
  --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-esimflag-raw-white), 0.15);
119
+ --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-esimflag-raw-white), 0.15);
120
+ --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-esimflag-blue15);
111
121
  --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-esimflag-raw-white), 0.15);
122
+ --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-esimflag-raw-white), 0.15);
112
123
  --mistica-color-textButtonPrimary: var(--mistica-esimflag-white);
113
124
  --mistica-color-textButtonPrimaryInverse: var(--mistica-esimflag-blue);
125
+ --mistica-color-textButtonPrimaryMedia: var(--mistica-esimflag-blue);
114
126
  --mistica-color-textButtonPrimaryInversePressed: var(--mistica-esimflag-blue55);
127
+ --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-esimflag-blue55);
115
128
  --mistica-color-textButtonSecondary: var(--mistica-esimflag-blue);
116
- --mistica-color-textButtonSecondaryPressed: var(--mistica-esimflag-blue55);
117
129
  --mistica-color-textButtonSecondaryInverse: var(--mistica-esimflag-white);
130
+ --mistica-color-textButtonSecondaryMedia: var(--mistica-esimflag-white);
131
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-esimflag-blue55);
118
132
  --mistica-color-textButtonSecondaryInversePressed: var(--mistica-esimflag-white);
133
+ --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-esimflag-white);
119
134
  --mistica-color-textLink: var(--mistica-esimflag-purple);
120
135
  --mistica-color-textLinkInverse: var(--mistica-esimflag-white);
136
+ --mistica-color-textLinkMedia: var(--mistica-esimflag-white);
121
137
  --mistica-color-textLinkDanger: var(--mistica-esimflag-tomato55);
138
+ --mistica-color-textLinkDangerMedia: var(--mistica-esimflag-tomato55);
122
139
  --mistica-color-textLinkSnackbar: var(--mistica-esimflag-blue30);
123
140
  --mistica-color-textActivated: var(--mistica-esimflag-blue);
124
141
  --mistica-color-textBrand: var(--mistica-esimflag-blue);
@@ -218,6 +235,7 @@
218
235
  rgba(var(--mistica-esimflag-raw-black), 0.4) 30%,
219
236
  rgba(var(--mistica-esimflag-raw-black), 0.7) 100%
220
237
  );
238
+ --mistica-color-cardFooterOverlay: rgba(var(--mistica-esimflag-raw-black), 0.7);
221
239
 
222
240
  /* Border radius */
223
241
  --mistica-border-radius-avatar: 50%;
@@ -307,34 +325,51 @@
307
325
  --mistica-color-buttonDangerBackground: var(--mistica-esimflag-tomato);
308
326
  --mistica-color-buttonDangerBackgroundPressed: var(--mistica-esimflag-tomato55);
309
327
  --mistica-color-buttonDangerBackgroundHover: var(--mistica-esimflag-tomato55);
310
- --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
311
328
  --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-esimflag-raw-white), 0);
329
+ --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-esimflag-white);
330
+ --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
312
331
  --mistica-color-buttonLinkDangerBackgroundInversePressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
332
+ --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-esimflag-tomato10);
313
333
  --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
314
334
  --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
335
+ --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
315
336
  --mistica-color-buttonPrimaryBackground: var(--mistica-esimflag-blue);
316
337
  --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-esimflag-blue);
317
- --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-esimflag-blue55);
338
+ --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-esimflag-white);
318
339
  --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-esimflag-blue55);
340
+ --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-esimflag-blue55);
341
+ --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-esimflag-blue15);
342
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-esimflag-blue55);
319
343
  --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-esimflag-blue55);
320
- --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-esimflag-raw-white), 0.15);
344
+ --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-esimflag-blue15);
321
345
  --mistica-color-buttonSecondaryBorder: var(--mistica-esimflag-white);
322
- --mistica-color-buttonSecondaryBorderPressed: var(--mistica-esimflag-white);
323
346
  --mistica-color-buttonSecondaryBorderInverse: var(--mistica-esimflag-white);
347
+ --mistica-color-buttonSecondaryBorderMedia: var(--mistica-esimflag-white);
348
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-esimflag-white);
324
349
  --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-esimflag-white);
350
+ --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-esimflag-white);
325
351
  --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-esimflag-raw-white), 0.15);
326
352
  --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-esimflag-raw-white), 0.15);
353
+ --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-esimflag-raw-white), 0.15);
354
+ --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-esimflag-raw-white), 0.15);
327
355
  --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-esimflag-raw-white), 0.15);
356
+ --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-esimflag-raw-white), 0.15);
328
357
  --mistica-color-textButtonPrimary: var(--mistica-esimflag-white);
329
358
  --mistica-color-textButtonPrimaryInverse: var(--mistica-esimflag-white);
359
+ --mistica-color-textButtonPrimaryMedia: var(--mistica-esimflag-blue);
330
360
  --mistica-color-textButtonPrimaryInversePressed: var(--mistica-esimflag-white);
361
+ --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-esimflag-blue55);
331
362
  --mistica-color-textButtonSecondary: var(--mistica-esimflag-grey2);
332
- --mistica-color-textButtonSecondaryPressed: var(--mistica-esimflag-grey2);
333
363
  --mistica-color-textButtonSecondaryInverse: var(--mistica-esimflag-grey2);
364
+ --mistica-color-textButtonSecondaryMedia: var(--mistica-esimflag-white);
365
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-esimflag-grey2);
334
366
  --mistica-color-textButtonSecondaryInversePressed: var(--mistica-esimflag-grey2);
367
+ --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-esimflag-white);
335
368
  --mistica-color-textLink: var(--mistica-esimflag-purple30);
336
369
  --mistica-color-textLinkInverse: var(--mistica-esimflag-purple30);
370
+ --mistica-color-textLinkMedia: var(--mistica-esimflag-white);
337
371
  --mistica-color-textLinkDanger: var(--mistica-esimflag-chili);
372
+ --mistica-color-textLinkDangerMedia: var(--mistica-esimflag-tomato55);
338
373
  --mistica-color-textLinkSnackbar: var(--mistica-esimflag-blue30);
339
374
  --mistica-color-textActivated: var(--mistica-esimflag-blue30);
340
375
  --mistica-color-textBrand: var(--mistica-esimflag-blue30);
@@ -434,6 +469,7 @@
434
469
  rgba(var(--mistica-esimflag-raw-black), 0.4) 30%,
435
470
  rgba(var(--mistica-esimflag-raw-black), 0.7) 100%
436
471
  );
472
+ --mistica-color-cardFooterOverlay: rgba(var(--mistica-esimflag-raw-black), 0.7);
437
473
  }
438
474
 
439
475
  @media (prefers-color-scheme: dark) {
@@ -468,40 +504,57 @@
468
504
  --mistica-color-buttonDangerBackground: var(--mistica-esimflag-tomato);
469
505
  --mistica-color-buttonDangerBackgroundPressed: var(--mistica-esimflag-tomato55);
470
506
  --mistica-color-buttonDangerBackgroundHover: var(--mistica-esimflag-tomato55);
471
- --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
472
507
  --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-esimflag-raw-white), 0);
508
+ --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-esimflag-white);
509
+ --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
473
510
  --mistica-color-buttonLinkDangerBackgroundInversePressed: rgba(
474
511
  var(--mistica-esimflag-raw-white),
475
512
  0.08
476
513
  );
514
+ --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-esimflag-tomato10);
477
515
  --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
478
516
  --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
517
+ --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
479
518
  --mistica-color-buttonPrimaryBackground: var(--mistica-esimflag-blue);
480
519
  --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-esimflag-blue);
481
- --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-esimflag-blue55);
520
+ --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-esimflag-white);
482
521
  --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-esimflag-blue55);
522
+ --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-esimflag-blue55);
523
+ --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-esimflag-blue15);
524
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-esimflag-blue55);
483
525
  --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-esimflag-blue55);
484
- --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-esimflag-raw-white), 0.15);
526
+ --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-esimflag-blue15);
485
527
  --mistica-color-buttonSecondaryBorder: var(--mistica-esimflag-white);
486
- --mistica-color-buttonSecondaryBorderPressed: var(--mistica-esimflag-white);
487
528
  --mistica-color-buttonSecondaryBorderInverse: var(--mistica-esimflag-white);
529
+ --mistica-color-buttonSecondaryBorderMedia: var(--mistica-esimflag-white);
530
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-esimflag-white);
488
531
  --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-esimflag-white);
532
+ --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-esimflag-white);
489
533
  --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-esimflag-raw-white), 0.15);
490
534
  --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-esimflag-raw-white), 0.15);
535
+ --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-esimflag-raw-white), 0.15);
536
+ --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-esimflag-raw-white), 0.15);
491
537
  --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(
492
538
  var(--mistica-esimflag-raw-white),
493
539
  0.15
494
540
  );
541
+ --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-esimflag-raw-white), 0.15);
495
542
  --mistica-color-textButtonPrimary: var(--mistica-esimflag-white);
496
543
  --mistica-color-textButtonPrimaryInverse: var(--mistica-esimflag-white);
544
+ --mistica-color-textButtonPrimaryMedia: var(--mistica-esimflag-blue);
497
545
  --mistica-color-textButtonPrimaryInversePressed: var(--mistica-esimflag-white);
546
+ --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-esimflag-blue55);
498
547
  --mistica-color-textButtonSecondary: var(--mistica-esimflag-grey2);
499
- --mistica-color-textButtonSecondaryPressed: var(--mistica-esimflag-grey2);
500
548
  --mistica-color-textButtonSecondaryInverse: var(--mistica-esimflag-grey2);
549
+ --mistica-color-textButtonSecondaryMedia: var(--mistica-esimflag-white);
550
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-esimflag-grey2);
501
551
  --mistica-color-textButtonSecondaryInversePressed: var(--mistica-esimflag-grey2);
552
+ --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-esimflag-white);
502
553
  --mistica-color-textLink: var(--mistica-esimflag-purple30);
503
554
  --mistica-color-textLinkInverse: var(--mistica-esimflag-purple30);
555
+ --mistica-color-textLinkMedia: var(--mistica-esimflag-white);
504
556
  --mistica-color-textLinkDanger: var(--mistica-esimflag-chili);
557
+ --mistica-color-textLinkDangerMedia: var(--mistica-esimflag-tomato55);
505
558
  --mistica-color-textLinkSnackbar: var(--mistica-esimflag-blue30);
506
559
  --mistica-color-textActivated: var(--mistica-esimflag-blue30);
507
560
  --mistica-color-textBrand: var(--mistica-esimflag-blue30);
@@ -601,6 +654,7 @@
601
654
  rgba(var(--mistica-esimflag-raw-black), 0.4) 30%,
602
655
  rgba(var(--mistica-esimflag-raw-black), 0.7) 100%
603
656
  );
657
+ --mistica-color-cardFooterOverlay: rgba(var(--mistica-esimflag-raw-black), 0.7);
604
658
  }
605
659
 
606
660
  [data-mistica-skin='esimflag'][data-mistica-color-scheme='light'] {
@@ -644,37 +698,54 @@
644
698
  --mistica-color-buttonDangerBackground: var(--mistica-esimflag-tomato55);
645
699
  --mistica-color-buttonDangerBackgroundPressed: var(--mistica-esimflag-tomato65);
646
700
  --mistica-color-buttonDangerBackgroundHover: var(--mistica-esimflag-tomato60);
647
- --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-esimflag-tomato10);
648
701
  --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-esimflag-white);
702
+ --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-esimflag-white);
703
+ --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-esimflag-tomato10);
649
704
  --mistica-color-buttonLinkDangerBackgroundInversePressed: var(--mistica-esimflag-tomato10);
705
+ --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-esimflag-tomato10);
650
706
  --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-esimflag-raw-purple55), 0.08);
651
707
  --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
708
+ --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
652
709
  --mistica-color-buttonPrimaryBackground: var(--mistica-esimflag-blue);
653
710
  --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-esimflag-white);
654
- --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-esimflag-blue65);
711
+ --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-esimflag-white);
655
712
  --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-esimflag-blue55);
713
+ --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-esimflag-blue15);
714
+ --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-esimflag-blue15);
715
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-esimflag-blue65);
656
716
  --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-esimflag-blue15);
657
- --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-esimflag-blue15);
717
+ --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-esimflag-blue15);
658
718
  --mistica-color-buttonSecondaryBorder: var(--mistica-esimflag-blue);
659
- --mistica-color-buttonSecondaryBorderPressed: var(--mistica-esimflag-blue55);
660
719
  --mistica-color-buttonSecondaryBorderInverse: var(--mistica-esimflag-white);
720
+ --mistica-color-buttonSecondaryBorderMedia: var(--mistica-esimflag-white);
721
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-esimflag-blue55);
661
722
  --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-esimflag-white);
723
+ --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-esimflag-white);
662
724
  --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-esimflag-blue10);
663
725
  --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-esimflag-raw-white), 0.15);
726
+ --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-esimflag-raw-white), 0.15);
727
+ --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-esimflag-blue15);
664
728
  --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(
665
729
  var(--mistica-esimflag-raw-white),
666
730
  0.15
667
731
  );
732
+ --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-esimflag-raw-white), 0.15);
668
733
  --mistica-color-textButtonPrimary: var(--mistica-esimflag-white);
669
734
  --mistica-color-textButtonPrimaryInverse: var(--mistica-esimflag-blue);
735
+ --mistica-color-textButtonPrimaryMedia: var(--mistica-esimflag-blue);
670
736
  --mistica-color-textButtonPrimaryInversePressed: var(--mistica-esimflag-blue55);
737
+ --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-esimflag-blue55);
671
738
  --mistica-color-textButtonSecondary: var(--mistica-esimflag-blue);
672
- --mistica-color-textButtonSecondaryPressed: var(--mistica-esimflag-blue55);
673
739
  --mistica-color-textButtonSecondaryInverse: var(--mistica-esimflag-white);
740
+ --mistica-color-textButtonSecondaryMedia: var(--mistica-esimflag-white);
741
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-esimflag-blue55);
674
742
  --mistica-color-textButtonSecondaryInversePressed: var(--mistica-esimflag-white);
743
+ --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-esimflag-white);
675
744
  --mistica-color-textLink: var(--mistica-esimflag-purple);
676
745
  --mistica-color-textLinkInverse: var(--mistica-esimflag-white);
746
+ --mistica-color-textLinkMedia: var(--mistica-esimflag-white);
677
747
  --mistica-color-textLinkDanger: var(--mistica-esimflag-tomato55);
748
+ --mistica-color-textLinkDangerMedia: var(--mistica-esimflag-tomato55);
678
749
  --mistica-color-textLinkSnackbar: var(--mistica-esimflag-blue30);
679
750
  --mistica-color-textActivated: var(--mistica-esimflag-blue);
680
751
  --mistica-color-textBrand: var(--mistica-esimflag-blue);
@@ -774,6 +845,7 @@
774
845
  rgba(var(--mistica-esimflag-raw-black), 0.4) 30%,
775
846
  rgba(var(--mistica-esimflag-raw-black), 0.7) 100%
776
847
  );
848
+ --mistica-color-cardFooterOverlay: rgba(var(--mistica-esimflag-raw-black), 0.7);
777
849
  }
778
850
  }
779
851
 
package/css/mistica-common.css CHANGED
@@ -246,17 +246,22 @@
246
246
  line-height: var(--mistica-line-height-tabsLabel);
247
247
  font-weight: var(--mistica-font-weight-tabsLabel);
248
248
  }
249
+ .mistica-text-link {
250
+ font-size: var(--mistica-font-size-link);
251
+ line-height: var(--mistica-line-height-link);
252
+ font-weight: var(--mistica-font-weight-link);
253
+ }
249
254
  .mistica-text-title1 {
250
255
  color: var(--vcolor-textSecondary);
251
256
  text-transform: uppercase;
252
- font-size: var(--mistica-font-size-1);
253
- line-height: var(--mistica-line-height-1);
257
+ font-size: var(--mistica-font-size-title1);
258
+ line-height: var(--mistica-line-height-title1);
254
259
  font-weight: var(--mistica-font-weight-title1);
255
260
  }
256
261
  .mistica-text-title2 {
257
262
  color: var(--vcolor-textPrimary);
258
- font-size: var(--mistica-font-size-3);
259
- line-height: var(--mistica-line-height-3);
263
+ font-size: var(--mistica-font-size-title2);
264
+ line-height: var(--mistica-line-height-title2);
260
265
  font-weight: var(--mistica-font-weight-title2);
261
266
  }
262
267
  .mistica-text-title3 {