@telefonica/mistica 17.3.0 → 17.4.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 (334) hide show
  1. package/css/blau.css +24 -16
  2. package/css/esimflag.css +35 -18
  3. package/css/mistica.css +1 -1
  4. package/css/movistar.css +29 -18
  5. package/css/o2.css +26 -18
  6. package/css/telefonica.css +38 -18
  7. package/css/vivo-evolution.css +66 -20
  8. package/css/vivo.css +26 -18
  9. package/dist/accordion.css-mistica.js +10 -10
  10. package/dist/align.css-mistica.js +1 -1
  11. package/dist/autocomplete.css-mistica.js +4 -4
  12. package/dist/avatar.css-mistica.js +1 -1
  13. package/dist/badge.css-mistica.js +1 -1
  14. package/dist/box.css-mistica.js +13 -13
  15. package/dist/boxed.css-mistica.js +24 -24
  16. package/dist/boxed.d.ts +9 -0
  17. package/dist/boxed.js +18 -15
  18. package/dist/button-group.css-mistica.js +1 -1
  19. package/dist/button-layout.css-mistica.js +19 -19
  20. package/dist/button.css-mistica.js +50 -50
  21. package/dist/callout.css-mistica.js +13 -13
  22. package/dist/card-internal.css-mistica.js +22 -22
  23. package/dist/carousel.css-mistica.js +30 -30
  24. package/dist/checkbox.css-mistica.js +15 -15
  25. package/dist/chip.css-mistica.js +18 -18
  26. package/dist/circle.css-mistica.js +2 -2
  27. package/dist/community/advanced-data-card.css-mistica.js +19 -19
  28. package/dist/community/ai-card.css-mistica.js +12 -12
  29. package/dist/community/blocks.css-mistica.js +1 -1
  30. package/dist/community/cyber/example-component.css-mistica.js +1 -1
  31. package/dist/community/example-component.css-mistica.js +2 -2
  32. package/dist/community/skins/cyber-skin.js +19 -17
  33. package/dist/counter.css-mistica.js +6 -6
  34. package/dist/cover-hero.css-mistica.js +7 -7
  35. package/dist/credit-card-number-field.css-mistica.js +3 -3
  36. package/dist/date-field.css-mistica.js +1 -1
  37. package/dist/date-time-picker.css-mistica.js +1 -1
  38. package/dist/dialog.css-mistica.js +10 -10
  39. package/dist/divider.css-mistica.js +5 -5
  40. package/dist/double-field.css-mistica.js +2 -2
  41. package/dist/drawer.css-mistica.js +4 -4
  42. package/dist/empty-state-card.css-mistica.js +1 -1
  43. package/dist/empty-state.css-mistica.js +8 -8
  44. package/dist/fade-in.css-mistica.js +1 -1
  45. package/dist/feedback.css-mistica.js +5 -5
  46. package/dist/file-upload.css-mistica.js +10 -10
  47. package/dist/fixed-footer-layout.css-mistica.js +6 -6
  48. package/dist/form.css-mistica.js +1 -1
  49. package/dist/generated/mistica-icons/icon-panel-collapse-regular.js +165 -0
  50. package/dist/generated/mistica-icons/icon-panel-expand-regular.js +159 -0
  51. package/dist/grid-layout.css-mistica.js +3 -3
  52. package/dist/grid.css-mistica.js +120 -120
  53. package/dist/header.css-mistica.js +1 -1
  54. package/dist/hero.css-mistica.js +4 -4
  55. package/dist/horizontal-scroll.css-mistica.js +1 -1
  56. package/dist/icon-button.css-mistica.js +53 -53
  57. package/dist/icons/icon-chevron.css-mistica.js +2 -2
  58. package/dist/icons/icon-error.css-mistica.js +1 -1
  59. package/dist/image.css-mistica.js +8 -8
  60. package/dist/index.d.ts +5 -0
  61. package/dist/index.js +10 -1
  62. package/dist/inline.css-mistica.js +11 -11
  63. package/dist/list.css-mistica.js +40 -28
  64. package/dist/list.css.d.ts +2 -0
  65. package/dist/list.d.ts +3 -1
  66. package/dist/list.js +176 -165
  67. package/dist/loading-bar.css-mistica.js +1 -1
  68. package/dist/loading-screen.css-mistica.js +12 -12
  69. package/dist/logo.css-mistica.js +5 -5
  70. package/dist/menu.css-mistica.js +13 -13
  71. package/dist/mobile-navigation-menu.d.ts +26 -0
  72. package/dist/mobile-navigation-menu.js +145 -0
  73. package/dist/mosaic.css-mistica.js +1 -1
  74. package/dist/navigation-bar.css-mistica.js +31 -97
  75. package/dist/navigation-bar.css.d.ts +0 -24
  76. package/dist/navigation-bar.d.ts +3 -38
  77. package/dist/navigation-bar.js +399 -586
  78. package/dist/navigation-breadcrumbs.css-mistica.js +1 -1
  79. package/dist/navigation-shared.css-mistica.js +79 -0
  80. package/dist/navigation-shared.css.d.ts +26 -0
  81. package/dist/navigation-shared.d.ts +66 -0
  82. package/dist/navigation-shared.js +264 -0
  83. package/dist/package-version.js +1 -1
  84. package/dist/pagination.css-mistica.js +22 -22
  85. package/dist/pin-field.css-mistica.js +4 -4
  86. package/dist/popover.css-mistica.js +1 -1
  87. package/dist/portal.d.ts +1 -1
  88. package/dist/progress-bar.css-mistica.js +7 -7
  89. package/dist/radio-button.css-mistica.js +27 -27
  90. package/dist/rating.css-mistica.js +4 -4
  91. package/dist/responsive-layout.css-mistica.js +6 -6
  92. package/dist/screen-reader-only.css-mistica.js +1 -1
  93. package/dist/select.css-mistica.js +21 -21
  94. package/dist/sheet-action-row.css-mistica.js +1 -1
  95. package/dist/sheet-common.css-mistica.js +7 -7
  96. package/dist/sheet-info.css-mistica.js +1 -1
  97. package/dist/sidenav-bar-context.d.ts +25 -0
  98. package/dist/sidenav-bar-context.js +72 -0
  99. package/dist/sidenav-bar-data.d.ts +15 -0
  100. package/dist/sidenav-bar-data.js +38 -0
  101. package/dist/sidenav-bar-first-level-item.d.ts +42 -0
  102. package/dist/sidenav-bar-first-level-item.js +174 -0
  103. package/dist/sidenav-bar-keyboard.d.ts +13 -0
  104. package/dist/sidenav-bar-keyboard.js +314 -0
  105. package/dist/sidenav-bar-layout.css-mistica.js +28 -0
  106. package/dist/sidenav-bar-layout.css.d.ts +5 -0
  107. package/dist/sidenav-bar-layout.d.ts +22 -0
  108. package/dist/sidenav-bar-layout.js +103 -0
  109. package/dist/sidenav-bar-mobile.d.ts +24 -0
  110. package/dist/sidenav-bar-mobile.js +332 -0
  111. package/dist/sidenav-bar-motion.d.ts +32 -0
  112. package/dist/sidenav-bar-motion.js +84 -0
  113. package/dist/sidenav-bar-panel.d.ts +31 -0
  114. package/dist/sidenav-bar-panel.js +208 -0
  115. package/dist/sidenav-bar-row.d.ts +82 -0
  116. package/dist/sidenav-bar-row.js +230 -0
  117. package/dist/sidenav-bar-second-level-item.d.ts +43 -0
  118. package/dist/sidenav-bar-second-level-item.js +89 -0
  119. package/dist/sidenav-bar-section.d.ts +23 -0
  120. package/dist/sidenav-bar-section.js +167 -0
  121. package/dist/sidenav-bar-types.d.ts +192 -0
  122. package/dist/sidenav-bar-types.js +11 -0
  123. package/dist/sidenav-bar.css-mistica.js +325 -0
  124. package/dist/sidenav-bar.css.d.ts +93 -0
  125. package/dist/sidenav-bar.d.ts +102 -0
  126. package/dist/sidenav-bar.js +492 -0
  127. package/dist/skeletons.css-mistica.js +8 -8
  128. package/dist/skins/blau.js +12 -8
  129. package/dist/skins/esimflag.js +13 -9
  130. package/dist/skins/movistar.js +13 -9
  131. package/dist/skins/o2.js +13 -9
  132. package/dist/skins/skin-contract.css-mistica.js +735 -731
  133. package/dist/skins/skin-contract.css.d.ts +4 -0
  134. package/dist/skins/telefonica.js +13 -9
  135. package/dist/skins/types/colors.d.ts +2 -0
  136. package/dist/skins/vivo-evolution.js +14 -10
  137. package/dist/skins/vivo.js +13 -9
  138. package/dist/skip-link.css-mistica.js +2 -2
  139. package/dist/slider.css-mistica.js +24 -24
  140. package/dist/snackbar.css-mistica.js +14 -14
  141. package/dist/spinner.css-mistica.js +1 -1
  142. package/dist/square.css-mistica.js +1 -1
  143. package/dist/stack.css-mistica.js +5 -5
  144. package/dist/stacking-group.css-mistica.js +1 -1
  145. package/dist/stepper.css-mistica.js +9 -9
  146. package/dist/switch-component.css-mistica.js +48 -42
  147. package/dist/switch-component.css.d.ts +2 -0
  148. package/dist/switch-component.js +18 -18
  149. package/dist/table.css-mistica.js +9 -9
  150. package/dist/tabs.css-mistica.js +22 -22
  151. package/dist/tag.css-mistica.js +3 -3
  152. package/dist/text-field-base.css-mistica.js +19 -19
  153. package/dist/text-field-components.css-mistica.js +10 -10
  154. package/dist/text-link.css-mistica.js +6 -6
  155. package/dist/text-tokens.d.ts +6 -0
  156. package/dist/text-tokens.js +157 -133
  157. package/dist/text.css-mistica.js +6 -6
  158. package/dist/timeline.css-mistica.js +11 -11
  159. package/dist/timer.css-mistica.js +6 -6
  160. package/dist/tooltip.css-mistica.js +2 -2
  161. package/dist/touchable.css-mistica.js +4 -4
  162. package/dist/utils/aspect-ratio-support.css-mistica.js +2 -2
  163. package/dist/video.css-mistica.js +1 -1
  164. package/dist/vivinho-loading-animation/vivinho-loading-animation.css-mistica.js +1 -1
  165. package/dist-es/accordion.css-mistica.js +7 -7
  166. package/dist-es/align.css-mistica.js +1 -1
  167. package/dist-es/autocomplete.css-mistica.js +2 -2
  168. package/dist-es/avatar.css-mistica.js +1 -1
  169. package/dist-es/badge.css-mistica.js +1 -1
  170. package/dist-es/box.css-mistica.js +13 -13
  171. package/dist-es/boxed.css-mistica.js +23 -23
  172. package/dist-es/boxed.js +25 -25
  173. package/dist-es/button-group.css-mistica.js +1 -1
  174. package/dist-es/button-layout.css-mistica.js +16 -16
  175. package/dist-es/button.css-mistica.js +38 -38
  176. package/dist-es/callout.css-mistica.js +12 -12
  177. package/dist-es/card-internal.css-mistica.js +17 -17
  178. package/dist-es/carousel.css-mistica.js +10 -10
  179. package/dist-es/checkbox.css-mistica.js +13 -13
  180. package/dist-es/chip.css-mistica.js +17 -17
  181. package/dist-es/circle.css-mistica.js +2 -2
  182. package/dist-es/community/advanced-data-card.css-mistica.js +7 -7
  183. package/dist-es/community/ai-card.css-mistica.js +4 -4
  184. package/dist-es/community/blocks.css-mistica.js +1 -1
  185. package/dist-es/community/cyber/example-component.css-mistica.js +1 -1
  186. package/dist-es/community/example-component.css-mistica.js +2 -2
  187. package/dist-es/community/skins/cyber-skin.js +19 -17
  188. package/dist-es/counter.css-mistica.js +2 -2
  189. package/dist-es/cover-hero.css-mistica.js +4 -4
  190. package/dist-es/credit-card-number-field.css-mistica.js +3 -3
  191. package/dist-es/date-field.css-mistica.js +1 -1
  192. package/dist-es/date-time-picker.css-mistica.js +1 -1
  193. package/dist-es/dialog.css-mistica.js +5 -5
  194. package/dist-es/divider.css-mistica.js +5 -5
  195. package/dist-es/double-field.css-mistica.js +2 -2
  196. package/dist-es/drawer.css-mistica.js +2 -2
  197. package/dist-es/empty-state-card.css-mistica.js +1 -1
  198. package/dist-es/empty-state.css-mistica.js +7 -7
  199. package/dist-es/fade-in.css-mistica.js +1 -1
  200. package/dist-es/feedback.css-mistica.js +2 -2
  201. package/dist-es/file-upload.css-mistica.js +8 -8
  202. package/dist-es/fixed-footer-layout.css-mistica.js +3 -3
  203. package/dist-es/form.css-mistica.js +1 -1
  204. package/dist-es/generated/mistica-icons/icon-panel-collapse-regular.js +115 -0
  205. package/dist-es/generated/mistica-icons/icon-panel-expand-regular.js +109 -0
  206. package/dist-es/grid-layout.css-mistica.js +3 -3
  207. package/dist-es/grid.css-mistica.js +120 -120
  208. package/dist-es/header.css-mistica.js +1 -1
  209. package/dist-es/hero.css-mistica.js +3 -3
  210. package/dist-es/horizontal-scroll.css-mistica.js +1 -1
  211. package/dist-es/icon-button.css-mistica.js +53 -53
  212. package/dist-es/icons/icon-chevron.css-mistica.js +2 -2
  213. package/dist-es/icons/icon-error.css-mistica.js +1 -1
  214. package/dist-es/image.css-mistica.js +4 -4
  215. package/dist-es/index.js +2279 -2276
  216. package/dist-es/inline.css-mistica.js +11 -11
  217. package/dist-es/list.css-mistica.js +8 -2
  218. package/dist-es/list.js +275 -264
  219. package/dist-es/loading-bar.css-mistica.js +1 -1
  220. package/dist-es/loading-screen.css-mistica.js +5 -5
  221. package/dist-es/logo.css-mistica.js +5 -5
  222. package/dist-es/menu.css-mistica.js +13 -13
  223. package/dist-es/mobile-navigation-menu.js +90 -0
  224. package/dist-es/mosaic.css-mistica.js +1 -1
  225. package/dist-es/navigation-bar.css-mistica.js +11 -20
  226. package/dist-es/navigation-bar.js +469 -656
  227. package/dist-es/navigation-breadcrumbs.css-mistica.js +1 -1
  228. package/dist-es/navigation-shared.css-mistica.js +11 -0
  229. package/dist-es/navigation-shared.js +192 -0
  230. package/dist-es/package-version.js +1 -1
  231. package/dist-es/pagination.css-mistica.js +19 -19
  232. package/dist-es/pin-field.css-mistica.js +2 -2
  233. package/dist-es/popover.css-mistica.js +1 -1
  234. package/dist-es/progress-bar.css-mistica.js +7 -7
  235. package/dist-es/radio-button.css-mistica.js +22 -22
  236. package/dist-es/rating.css-mistica.js +3 -3
  237. package/dist-es/responsive-layout.css-mistica.js +6 -6
  238. package/dist-es/screen-reader-only.css-mistica.js +1 -1
  239. package/dist-es/select.css-mistica.js +18 -18
  240. package/dist-es/sheet-action-row.css-mistica.js +1 -1
  241. package/dist-es/sheet-common.css-mistica.js +2 -2
  242. package/dist-es/sheet-info.css-mistica.js +1 -1
  243. package/dist-es/sidenav-bar-context.js +14 -0
  244. package/dist-es/sidenav-bar-data.js +12 -0
  245. package/dist-es/sidenav-bar-first-level-item.js +124 -0
  246. package/dist-es/sidenav-bar-keyboard.js +253 -0
  247. package/dist-es/sidenav-bar-layout.css-mistica.js +2 -0
  248. package/dist-es/sidenav-bar-layout.js +86 -0
  249. package/dist-es/sidenav-bar-mobile.js +277 -0
  250. package/dist-es/sidenav-bar-motion.js +26 -0
  251. package/dist-es/sidenav-bar-panel.js +146 -0
  252. package/dist-es/sidenav-bar-row.js +208 -0
  253. package/dist-es/sidenav-bar-second-level-item.js +72 -0
  254. package/dist-es/sidenav-bar-section.js +112 -0
  255. package/dist-es/sidenav-bar-types.js +2 -0
  256. package/dist-es/sidenav-bar.css-mistica.js +74 -0
  257. package/dist-es/sidenav-bar.js +429 -0
  258. package/dist-es/skeletons.css-mistica.js +7 -7
  259. package/dist-es/skins/blau.js +12 -8
  260. package/dist-es/skins/esimflag.js +13 -9
  261. package/dist-es/skins/movistar.js +13 -9
  262. package/dist-es/skins/o2.js +13 -9
  263. package/dist-es/skins/skin-contract.css-mistica.js +735 -731
  264. package/dist-es/skins/telefonica.js +13 -9
  265. package/dist-es/skins/vivo-evolution.js +14 -10
  266. package/dist-es/skins/vivo.js +13 -9
  267. package/dist-es/skip-link.css-mistica.js +2 -2
  268. package/dist-es/slider.css-mistica.js +20 -20
  269. package/dist-es/snackbar.css-mistica.js +5 -5
  270. package/dist-es/spinner.css-mistica.js +1 -1
  271. package/dist-es/square.css-mistica.js +1 -1
  272. package/dist-es/stack.css-mistica.js +5 -5
  273. package/dist-es/stacking-group.css-mistica.js +1 -1
  274. package/dist-es/stepper.css-mistica.js +3 -3
  275. package/dist-es/style.css +1 -1
  276. package/dist-es/switch-component.css-mistica.js +37 -37
  277. package/dist-es/switch-component.js +26 -26
  278. package/dist-es/table.css-mistica.js +9 -9
  279. package/dist-es/tabs.css-mistica.js +19 -19
  280. package/dist-es/tag.css-mistica.js +2 -2
  281. package/dist-es/text-field-base.css-mistica.js +17 -17
  282. package/dist-es/text-field-components.css-mistica.js +4 -4
  283. package/dist-es/text-link.css-mistica.js +6 -6
  284. package/dist-es/text-tokens.js +82 -67
  285. package/dist-es/text.css-mistica.js +6 -6
  286. package/dist-es/timeline.css-mistica.js +10 -10
  287. package/dist-es/timer.css-mistica.js +6 -6
  288. package/dist-es/tooltip.css-mistica.js +2 -2
  289. package/dist-es/touchable.css-mistica.js +2 -2
  290. package/dist-es/utils/aspect-ratio-support.css-mistica.js +2 -2
  291. package/dist-es/video.css-mistica.js +1 -1
  292. package/dist-es/vivinho-loading-animation/vivinho-loading-animation.css-mistica.js +1 -1
  293. package/package.json +2 -1
  294. package/src/boxed.css.ts +1 -0
  295. package/src/boxed.tsx +18 -5
  296. package/src/callout.css.ts +4 -2
  297. package/src/community/skins/cyber-skin.tsx +19 -16
  298. package/src/index.tsx +14 -0
  299. package/src/list.css.ts +36 -1
  300. package/src/list.tsx +370 -344
  301. package/src/mobile-navigation-menu.tsx +168 -0
  302. package/src/navigation-bar.css.ts +2 -267
  303. package/src/navigation-bar.tsx +77 -370
  304. package/src/navigation-shared.css.ts +289 -0
  305. package/src/navigation-shared.tsx +262 -0
  306. package/src/package-version.tsx +1 -1
  307. package/src/portal.tsx +1 -1
  308. package/src/sidenav-bar-context.tsx +41 -0
  309. package/src/sidenav-bar-data.ts +49 -0
  310. package/src/sidenav-bar-first-level-item.tsx +203 -0
  311. package/src/sidenav-bar-keyboard.tsx +393 -0
  312. package/src/sidenav-bar-layout.css.ts +89 -0
  313. package/src/sidenav-bar-layout.tsx +61 -0
  314. package/src/sidenav-bar-mobile.tsx +302 -0
  315. package/src/sidenav-bar-motion.tsx +70 -0
  316. package/src/sidenav-bar-panel.tsx +269 -0
  317. package/src/sidenav-bar-row.tsx +272 -0
  318. package/src/sidenav-bar-second-level-item.tsx +99 -0
  319. package/src/sidenav-bar-section.tsx +98 -0
  320. package/src/sidenav-bar-types.ts +224 -0
  321. package/src/sidenav-bar.css.ts +1018 -0
  322. package/src/sidenav-bar.tsx +821 -0
  323. package/src/skins/blau.tsx +12 -8
  324. package/src/skins/esimflag.tsx +13 -9
  325. package/src/skins/movistar.tsx +13 -9
  326. package/src/skins/o2.tsx +13 -9
  327. package/src/skins/skin-contract.css.ts +2 -0
  328. package/src/skins/telefonica.tsx +13 -9
  329. package/src/skins/types/colors.tsx +2 -0
  330. package/src/skins/vivo-evolution.tsx +14 -10
  331. package/src/skins/vivo.tsx +13 -9
  332. package/src/switch-component.css.ts +20 -0
  333. package/src/switch-component.tsx +9 -1
  334. package/src/text-tokens.tsx +24 -0
package/css/movistar.css CHANGED
@@ -83,6 +83,8 @@
83
83
  --mistica-color-backgroundContainerNegative: rgba(var(--mistica-movistar-raw-movistarBlack), 0.2);
84
84
  --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-movistar-blue800);
85
85
  --mistica-color-backgroundContainerAlternative: var(--mistica-movistar-grey100);
86
+ --mistica-color-backgroundContainerAlternativeOverAlternative: var(--mistica-movistar-white);
87
+ --mistica-color-backgroundContainerAlternativeOverBrand: var(--mistica-movistar-blue800);
86
88
  --mistica-color-backgroundOverlay: rgba(var(--mistica-movistar-raw-movistarBlack), 0.6);
87
89
  --mistica-color-backgroundSkeleton: var(--mistica-movistar-grey200);
88
90
  --mistica-color-backgroundSkeletonInverse: var(--mistica-movistar-blue800);
@@ -125,12 +127,12 @@
125
127
  --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-movistar-raw-white), 0.3);
126
128
  --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-movistar-raw-white), 0.3);
127
129
  --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-movistar-grey100);
128
- --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-movistar-white);
129
- --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-movistar-grey100);
130
- --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-movistar-white);
131
- --mistica-color-buttonLinkNeutralBackgroundNegativePressed: var(--mistica-movistar-grey100);
132
- --mistica-color-buttonLinkNeutralBackgroundMedia: var(--mistica-movistar-white);
133
- --mistica-color-buttonLinkNeutralBackgroundMediaPressed: var(--mistica-movistar-grey100);
130
+ --mistica-color-buttonLinkNeutralBackgroundBrand: rgba(var(--mistica-movistar-raw-white), 0);
131
+ --mistica-color-buttonLinkNeutralBackgroundBrandPressed: rgba(var(--mistica-movistar-raw-white), 0.3);
132
+ --mistica-color-buttonLinkNeutralBackgroundNegative: rgba(var(--mistica-movistar-raw-white), 0);
133
+ --mistica-color-buttonLinkNeutralBackgroundNegativePressed: rgba(var(--mistica-movistar-raw-white), 0.3);
134
+ --mistica-color-buttonLinkNeutralBackgroundMedia: rgba(var(--mistica-movistar-raw-white), 0);
135
+ --mistica-color-buttonLinkNeutralBackgroundMediaPressed: rgba(var(--mistica-movistar-raw-white), 0.3);
134
136
  --mistica-color-buttonPrimaryBackground: var(--mistica-movistar-movistarBlue);
135
137
  --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-movistar-white);
136
138
  --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-movistar-white);
@@ -195,10 +197,10 @@
195
197
  --mistica-color-textLinkDangerMedia: var(--mistica-movistar-red);
196
198
  --mistica-color-textLinkSnackbar: var(--mistica-movistar-blue300);
197
199
  --mistica-color-textLinkNeutral: var(--mistica-movistar-movistarBlack);
198
- --mistica-color-textLinkNeutralBrand: var(--mistica-movistar-movistarBlack);
199
- --mistica-color-textLinkNeutralNegative: var(--mistica-movistar-movistarBlack);
200
+ --mistica-color-textLinkNeutralBrand: var(--mistica-movistar-white);
201
+ --mistica-color-textLinkNeutralNegative: var(--mistica-movistar-white);
200
202
  --mistica-color-textLinkNeutralAlternative: var(--mistica-movistar-movistarBlack);
201
- --mistica-color-textLinkNeutralMedia: var(--mistica-movistar-movistarBlack);
203
+ --mistica-color-textLinkNeutralMedia: var(--mistica-movistar-white);
202
204
  --mistica-color-textActivated: var(--mistica-movistar-blueHigh);
203
205
  --mistica-color-textBrand: var(--mistica-movistar-blueHigh);
204
206
  --mistica-color-inputBorder: var(--mistica-movistar-grey500);
@@ -506,6 +508,8 @@
506
508
  --mistica-color-backgroundContainerNegative: var(--mistica-movistar-darkModeGrey);
507
509
  --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-movistar-darkModeGrey);
508
510
  --mistica-color-backgroundContainerAlternative: var(--mistica-movistar-darkModeGrey);
511
+ --mistica-color-backgroundContainerAlternativeOverAlternative: var(--mistica-movistar-darkModeGrey);
512
+ --mistica-color-backgroundContainerAlternativeOverBrand: var(--mistica-movistar-darkModeGrey);
509
513
  --mistica-color-backgroundOverlay: rgba(var(--mistica-movistar-raw-darkModeGrey), 0.8);
510
514
  --mistica-color-backgroundSkeleton: var(--mistica-movistar-grey600);
511
515
  --mistica-color-backgroundSkeletonInverse: var(--mistica-movistar-grey600);
@@ -838,6 +842,8 @@
838
842
  --mistica-color-backgroundContainerNegative: var(--mistica-movistar-darkModeGrey);
839
843
  --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-movistar-darkModeGrey);
840
844
  --mistica-color-backgroundContainerAlternative: var(--mistica-movistar-darkModeGrey);
845
+ --mistica-color-backgroundContainerAlternativeOverAlternative: var(--mistica-movistar-darkModeGrey);
846
+ --mistica-color-backgroundContainerAlternativeOverBrand: var(--mistica-movistar-darkModeGrey);
841
847
  --mistica-color-backgroundOverlay: rgba(var(--mistica-movistar-raw-darkModeGrey), 0.8);
842
848
  --mistica-color-backgroundSkeleton: var(--mistica-movistar-grey600);
843
849
  --mistica-color-backgroundSkeletonInverse: var(--mistica-movistar-grey600);
@@ -1172,6 +1178,8 @@
1172
1178
  --mistica-color-backgroundContainerNegative: rgba(var(--mistica-movistar-raw-movistarBlack), 0.2);
1173
1179
  --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-movistar-blue800);
1174
1180
  --mistica-color-backgroundContainerAlternative: var(--mistica-movistar-grey100);
1181
+ --mistica-color-backgroundContainerAlternativeOverAlternative: var(--mistica-movistar-white);
1182
+ --mistica-color-backgroundContainerAlternativeOverBrand: var(--mistica-movistar-blue800);
1175
1183
  --mistica-color-backgroundOverlay: rgba(var(--mistica-movistar-raw-movistarBlack), 0.6);
1176
1184
  --mistica-color-backgroundSkeleton: var(--mistica-movistar-grey200);
1177
1185
  --mistica-color-backgroundSkeletonInverse: var(--mistica-movistar-blue800);
@@ -1214,12 +1222,15 @@
1214
1222
  --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-movistar-raw-white), 0.3);
1215
1223
  --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-movistar-raw-white), 0.3);
1216
1224
  --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-movistar-grey100);
1217
- --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-movistar-white);
1218
- --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-movistar-grey100);
1219
- --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-movistar-white);
1220
- --mistica-color-buttonLinkNeutralBackgroundNegativePressed: var(--mistica-movistar-grey100);
1221
- --mistica-color-buttonLinkNeutralBackgroundMedia: var(--mistica-movistar-white);
1222
- --mistica-color-buttonLinkNeutralBackgroundMediaPressed: var(--mistica-movistar-grey100);
1225
+ --mistica-color-buttonLinkNeutralBackgroundBrand: rgba(var(--mistica-movistar-raw-white), 0);
1226
+ --mistica-color-buttonLinkNeutralBackgroundBrandPressed: rgba(var(--mistica-movistar-raw-white), 0.3);
1227
+ --mistica-color-buttonLinkNeutralBackgroundNegative: rgba(var(--mistica-movistar-raw-white), 0);
1228
+ --mistica-color-buttonLinkNeutralBackgroundNegativePressed: rgba(
1229
+ var(--mistica-movistar-raw-white),
1230
+ 0.3
1231
+ );
1232
+ --mistica-color-buttonLinkNeutralBackgroundMedia: rgba(var(--mistica-movistar-raw-white), 0);
1233
+ --mistica-color-buttonLinkNeutralBackgroundMediaPressed: rgba(var(--mistica-movistar-raw-white), 0.3);
1223
1234
  --mistica-color-buttonPrimaryBackground: var(--mistica-movistar-movistarBlue);
1224
1235
  --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-movistar-white);
1225
1236
  --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-movistar-white);
@@ -1287,10 +1298,10 @@
1287
1298
  --mistica-color-textLinkDangerMedia: var(--mistica-movistar-red);
1288
1299
  --mistica-color-textLinkSnackbar: var(--mistica-movistar-blue300);
1289
1300
  --mistica-color-textLinkNeutral: var(--mistica-movistar-movistarBlack);
1290
- --mistica-color-textLinkNeutralBrand: var(--mistica-movistar-movistarBlack);
1291
- --mistica-color-textLinkNeutralNegative: var(--mistica-movistar-movistarBlack);
1301
+ --mistica-color-textLinkNeutralBrand: var(--mistica-movistar-white);
1302
+ --mistica-color-textLinkNeutralNegative: var(--mistica-movistar-white);
1292
1303
  --mistica-color-textLinkNeutralAlternative: var(--mistica-movistar-movistarBlack);
1293
- --mistica-color-textLinkNeutralMedia: var(--mistica-movistar-movistarBlack);
1304
+ --mistica-color-textLinkNeutralMedia: var(--mistica-movistar-white);
1294
1305
  --mistica-color-textActivated: var(--mistica-movistar-blueHigh);
1295
1306
  --mistica-color-textBrand: var(--mistica-movistar-blueHigh);
1296
1307
  --mistica-color-inputBorder: var(--mistica-movistar-grey500);
package/css/o2.css CHANGED
@@ -92,6 +92,8 @@
92
92
  --mistica-color-backgroundContainerNegative: rgba(var(--mistica-o2-raw-darkModeBlack), 0.4);
93
93
  --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-o2-beyondBlue70);
94
94
  --mistica-color-backgroundContainerAlternative: var(--mistica-o2-grey20);
95
+ --mistica-color-backgroundContainerAlternativeOverAlternative: var(--mistica-o2-white);
96
+ --mistica-color-backgroundContainerAlternativeOverBrand: var(--mistica-o2-beyondBlue70);
95
97
  --mistica-color-backgroundOverlay: rgba(var(--mistica-o2-raw-black), 0.6);
96
98
  --mistica-color-backgroundSkeleton: var(--mistica-o2-grey30);
97
99
  --mistica-color-backgroundSkeletonInverse: var(--mistica-o2-beyondBlue70);
@@ -134,12 +136,12 @@
134
136
  --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-o2-raw-white), 0.08);
135
137
  --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-o2-raw-white), 0.08);
136
138
  --mistica-color-buttonLinkNeutralBackgroundPressed: rgba(var(--mistica-o2-raw-grey30), 0.4);
137
- --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-o2-white);
138
- --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-o2-grey20);
139
- --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-o2-white);
140
- --mistica-color-buttonLinkNeutralBackgroundNegativePressed: var(--mistica-o2-grey20);
141
- --mistica-color-buttonLinkNeutralBackgroundMedia: var(--mistica-o2-white);
142
- --mistica-color-buttonLinkNeutralBackgroundMediaPressed: var(--mistica-o2-grey20);
139
+ --mistica-color-buttonLinkNeutralBackgroundBrand: rgba(var(--mistica-o2-raw-white), 0);
140
+ --mistica-color-buttonLinkNeutralBackgroundBrandPressed: rgba(var(--mistica-o2-raw-white), 0.08);
141
+ --mistica-color-buttonLinkNeutralBackgroundNegative: rgba(var(--mistica-o2-raw-white), 0);
142
+ --mistica-color-buttonLinkNeutralBackgroundNegativePressed: rgba(var(--mistica-o2-raw-white), 0.08);
143
+ --mistica-color-buttonLinkNeutralBackgroundMedia: rgba(var(--mistica-o2-raw-white), 0);
144
+ --mistica-color-buttonLinkNeutralBackgroundMediaPressed: rgba(var(--mistica-o2-raw-white), 0.08);
143
145
  --mistica-color-buttonPrimaryBackground: var(--mistica-o2-beyondBlue);
144
146
  --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-o2-white);
145
147
  --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-o2-white);
@@ -204,10 +206,10 @@
204
206
  --mistica-color-textLinkDangerMedia: var(--mistica-o2-o2Red65);
205
207
  --mistica-color-textLinkSnackbar: var(--mistica-o2-beyondBlue30);
206
208
  --mistica-color-textLinkNeutral: var(--mistica-o2-black);
207
- --mistica-color-textLinkNeutralBrand: var(--mistica-o2-black);
208
- --mistica-color-textLinkNeutralNegative: var(--mistica-o2-black);
209
+ --mistica-color-textLinkNeutralBrand: var(--mistica-o2-white);
210
+ --mistica-color-textLinkNeutralNegative: var(--mistica-o2-white);
209
211
  --mistica-color-textLinkNeutralAlternative: var(--mistica-o2-black);
210
- --mistica-color-textLinkNeutralMedia: var(--mistica-o2-black);
212
+ --mistica-color-textLinkNeutralMedia: var(--mistica-o2-white);
211
213
  --mistica-color-textActivated: var(--mistica-o2-beyondBlue);
212
214
  --mistica-color-textBrand: var(--mistica-o2-beyondBlue);
213
215
  --mistica-color-inputBorder: var(--mistica-o2-grey45);
@@ -503,6 +505,8 @@
503
505
  --mistica-color-backgroundContainerNegative: var(--mistica-o2-darkModeGrey);
504
506
  --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-o2-darkModeGrey);
505
507
  --mistica-color-backgroundContainerAlternative: var(--mistica-o2-darkModeGrey);
508
+ --mistica-color-backgroundContainerAlternativeOverAlternative: var(--mistica-o2-darkModeGrey);
509
+ --mistica-color-backgroundContainerAlternativeOverBrand: var(--mistica-o2-darkModeGrey);
506
510
  --mistica-color-backgroundOverlay: rgba(var(--mistica-o2-raw-darkModeGrey), 0.8);
507
511
  --mistica-color-backgroundSkeleton: var(--mistica-o2-darkModeGrey6);
508
512
  --mistica-color-backgroundSkeletonInverse: var(--mistica-o2-darkModeGrey6);
@@ -817,6 +821,8 @@
817
821
  --mistica-color-backgroundContainerNegative: var(--mistica-o2-darkModeGrey);
818
822
  --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-o2-darkModeGrey);
819
823
  --mistica-color-backgroundContainerAlternative: var(--mistica-o2-darkModeGrey);
824
+ --mistica-color-backgroundContainerAlternativeOverAlternative: var(--mistica-o2-darkModeGrey);
825
+ --mistica-color-backgroundContainerAlternativeOverBrand: var(--mistica-o2-darkModeGrey);
820
826
  --mistica-color-backgroundOverlay: rgba(var(--mistica-o2-raw-darkModeGrey), 0.8);
821
827
  --mistica-color-backgroundSkeleton: var(--mistica-o2-darkModeGrey6);
822
828
  --mistica-color-backgroundSkeletonInverse: var(--mistica-o2-darkModeGrey6);
@@ -1140,6 +1146,8 @@
1140
1146
  --mistica-color-backgroundContainerNegative: rgba(var(--mistica-o2-raw-darkModeBlack), 0.4);
1141
1147
  --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-o2-beyondBlue70);
1142
1148
  --mistica-color-backgroundContainerAlternative: var(--mistica-o2-grey20);
1149
+ --mistica-color-backgroundContainerAlternativeOverAlternative: var(--mistica-o2-white);
1150
+ --mistica-color-backgroundContainerAlternativeOverBrand: var(--mistica-o2-beyondBlue70);
1143
1151
  --mistica-color-backgroundOverlay: rgba(var(--mistica-o2-raw-black), 0.6);
1144
1152
  --mistica-color-backgroundSkeleton: var(--mistica-o2-grey30);
1145
1153
  --mistica-color-backgroundSkeletonInverse: var(--mistica-o2-beyondBlue70);
@@ -1182,12 +1190,12 @@
1182
1190
  --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-o2-raw-white), 0.08);
1183
1191
  --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-o2-raw-white), 0.08);
1184
1192
  --mistica-color-buttonLinkNeutralBackgroundPressed: rgba(var(--mistica-o2-raw-grey30), 0.4);
1185
- --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-o2-white);
1186
- --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-o2-grey20);
1187
- --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-o2-white);
1188
- --mistica-color-buttonLinkNeutralBackgroundNegativePressed: var(--mistica-o2-grey20);
1189
- --mistica-color-buttonLinkNeutralBackgroundMedia: var(--mistica-o2-white);
1190
- --mistica-color-buttonLinkNeutralBackgroundMediaPressed: var(--mistica-o2-grey20);
1193
+ --mistica-color-buttonLinkNeutralBackgroundBrand: rgba(var(--mistica-o2-raw-white), 0);
1194
+ --mistica-color-buttonLinkNeutralBackgroundBrandPressed: rgba(var(--mistica-o2-raw-white), 0.08);
1195
+ --mistica-color-buttonLinkNeutralBackgroundNegative: rgba(var(--mistica-o2-raw-white), 0);
1196
+ --mistica-color-buttonLinkNeutralBackgroundNegativePressed: rgba(var(--mistica-o2-raw-white), 0.08);
1197
+ --mistica-color-buttonLinkNeutralBackgroundMedia: rgba(var(--mistica-o2-raw-white), 0);
1198
+ --mistica-color-buttonLinkNeutralBackgroundMediaPressed: rgba(var(--mistica-o2-raw-white), 0.08);
1191
1199
  --mistica-color-buttonPrimaryBackground: var(--mistica-o2-beyondBlue);
1192
1200
  --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-o2-white);
1193
1201
  --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-o2-white);
@@ -1252,10 +1260,10 @@
1252
1260
  --mistica-color-textLinkDangerMedia: var(--mistica-o2-o2Red65);
1253
1261
  --mistica-color-textLinkSnackbar: var(--mistica-o2-beyondBlue30);
1254
1262
  --mistica-color-textLinkNeutral: var(--mistica-o2-black);
1255
- --mistica-color-textLinkNeutralBrand: var(--mistica-o2-black);
1256
- --mistica-color-textLinkNeutralNegative: var(--mistica-o2-black);
1263
+ --mistica-color-textLinkNeutralBrand: var(--mistica-o2-white);
1264
+ --mistica-color-textLinkNeutralNegative: var(--mistica-o2-white);
1257
1265
  --mistica-color-textLinkNeutralAlternative: var(--mistica-o2-black);
1258
- --mistica-color-textLinkNeutralMedia: var(--mistica-o2-black);
1266
+ --mistica-color-textLinkNeutralMedia: var(--mistica-o2-white);
1259
1267
  --mistica-color-textActivated: var(--mistica-o2-beyondBlue);
1260
1268
  --mistica-color-textBrand: var(--mistica-o2-beyondBlue);
1261
1269
  --mistica-color-inputBorder: var(--mistica-o2-grey45);
package/css/telefonica.css CHANGED
@@ -75,6 +75,8 @@
75
75
  --mistica-color-backgroundContainerNegative: rgba(var(--mistica-telefonica-raw-white), 0.1);
76
76
  --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-telefonica-telefonicaBlue70);
77
77
  --mistica-color-backgroundContainerAlternative: var(--mistica-telefonica-grey1);
78
+ --mistica-color-backgroundContainerAlternativeOverAlternative: var(--mistica-telefonica-white);
79
+ --mistica-color-backgroundContainerAlternativeOverBrand: var(--mistica-telefonica-telefonicaBlue70);
78
80
  --mistica-color-backgroundBrand: var(--mistica-telefonica-telefonicaBlue);
79
81
  --mistica-color-backgroundNegative: var(--mistica-telefonica-grey9);
80
82
  --mistica-color-backgroundBrandSecondary: var(--mistica-telefonica-telefonicaBlue);
@@ -135,12 +137,15 @@
135
137
  --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-telefonica-raw-white), 0.08);
136
138
  --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-telefonica-raw-white), 0.08);
137
139
  --mistica-color-buttonLinkNeutralBackgroundPressed: rgba(var(--mistica-telefonica-raw-grey2), 0.4);
138
- --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-telefonica-white);
139
- --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-telefonica-grey1);
140
- --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-telefonica-white);
141
- --mistica-color-buttonLinkNeutralBackgroundNegativePressed: var(--mistica-telefonica-grey1);
142
- --mistica-color-buttonLinkNeutralBackgroundMedia: var(--mistica-telefonica-white);
143
- --mistica-color-buttonLinkNeutralBackgroundMediaPressed: var(--mistica-telefonica-grey1);
140
+ --mistica-color-buttonLinkNeutralBackgroundBrand: rgba(var(--mistica-telefonica-raw-white), 0);
141
+ --mistica-color-buttonLinkNeutralBackgroundBrandPressed: rgba(var(--mistica-telefonica-raw-white), 0.08);
142
+ --mistica-color-buttonLinkNeutralBackgroundNegative: rgba(var(--mistica-telefonica-raw-white), 0);
143
+ --mistica-color-buttonLinkNeutralBackgroundNegativePressed: rgba(
144
+ var(--mistica-telefonica-raw-white),
145
+ 0.08
146
+ );
147
+ --mistica-color-buttonLinkNeutralBackgroundMedia: rgba(var(--mistica-telefonica-raw-white), 0);
148
+ --mistica-color-buttonLinkNeutralBackgroundMediaPressed: rgba(var(--mistica-telefonica-raw-white), 0.08);
144
149
  --mistica-color-buttonPrimaryBackground: var(--mistica-telefonica-telefonicaBlue);
145
150
  --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-telefonica-white);
146
151
  --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-telefonica-white);
@@ -205,10 +210,10 @@
205
210
  --mistica-color-textLinkDangerMedia: var(--mistica-telefonica-coral60);
206
211
  --mistica-color-textLinkSnackbar: var(--mistica-telefonica-telefonicaBlue30);
207
212
  --mistica-color-textLinkNeutral: var(--mistica-telefonica-grey9);
208
- --mistica-color-textLinkNeutralBrand: var(--mistica-telefonica-grey9);
209
- --mistica-color-textLinkNeutralNegative: var(--mistica-telefonica-grey9);
213
+ --mistica-color-textLinkNeutralBrand: var(--mistica-telefonica-white);
214
+ --mistica-color-textLinkNeutralNegative: var(--mistica-telefonica-white);
210
215
  --mistica-color-textLinkNeutralAlternative: var(--mistica-telefonica-grey9);
211
- --mistica-color-textLinkNeutralMedia: var(--mistica-telefonica-grey9);
216
+ --mistica-color-textLinkNeutralMedia: var(--mistica-telefonica-white);
212
217
  --mistica-color-textActivated: var(--mistica-telefonica-telefonicaBlue70);
213
218
  --mistica-color-textBrand: var(--mistica-telefonica-telefonicaBlue70);
214
219
  --mistica-color-inputBorder: var(--mistica-telefonica-grey5);
@@ -522,6 +527,8 @@
522
527
  --mistica-color-backgroundContainerNegative: var(--mistica-telefonica-darkModeGrey);
523
528
  --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-telefonica-darkModeGrey);
524
529
  --mistica-color-backgroundContainerAlternative: var(--mistica-telefonica-darkModeGrey);
530
+ --mistica-color-backgroundContainerAlternativeOverAlternative: var(--mistica-telefonica-darkModeGrey);
531
+ --mistica-color-backgroundContainerAlternativeOverBrand: var(--mistica-telefonica-darkModeGrey);
525
532
  --mistica-color-backgroundOverlay: rgba(var(--mistica-telefonica-raw-darkModeGrey), 0.8);
526
533
  --mistica-color-backgroundSkeleton: var(--mistica-telefonica-grey8);
527
534
  --mistica-color-backgroundSkeletonInverse: var(--mistica-telefonica-grey8);
@@ -881,6 +888,8 @@
881
888
  --mistica-color-backgroundContainerNegative: var(--mistica-telefonica-darkModeGrey);
882
889
  --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-telefonica-darkModeGrey);
883
890
  --mistica-color-backgroundContainerAlternative: var(--mistica-telefonica-darkModeGrey);
891
+ --mistica-color-backgroundContainerAlternativeOverAlternative: var(--mistica-telefonica-darkModeGrey);
892
+ --mistica-color-backgroundContainerAlternativeOverBrand: var(--mistica-telefonica-darkModeGrey);
884
893
  --mistica-color-backgroundOverlay: rgba(var(--mistica-telefonica-raw-darkModeGrey), 0.8);
885
894
  --mistica-color-backgroundSkeleton: var(--mistica-telefonica-grey8);
886
895
  --mistica-color-backgroundSkeletonInverse: var(--mistica-telefonica-grey8);
@@ -1251,6 +1260,8 @@
1251
1260
  --mistica-color-backgroundContainerNegative: rgba(var(--mistica-telefonica-raw-white), 0.1);
1252
1261
  --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-telefonica-telefonicaBlue70);
1253
1262
  --mistica-color-backgroundContainerAlternative: var(--mistica-telefonica-grey1);
1263
+ --mistica-color-backgroundContainerAlternativeOverAlternative: var(--mistica-telefonica-white);
1264
+ --mistica-color-backgroundContainerAlternativeOverBrand: var(--mistica-telefonica-telefonicaBlue70);
1254
1265
  --mistica-color-backgroundOverlay: rgba(var(--mistica-telefonica-raw-grey6), 0.8);
1255
1266
  --mistica-color-backgroundSkeleton: var(--mistica-telefonica-grey2);
1256
1267
  --mistica-color-backgroundSkeletonInverse: var(--mistica-telefonica-telefonicaBlue70);
@@ -1308,12 +1319,21 @@
1308
1319
  --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-telefonica-raw-white), 0.08);
1309
1320
  --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-telefonica-raw-white), 0.08);
1310
1321
  --mistica-color-buttonLinkNeutralBackgroundPressed: rgba(var(--mistica-telefonica-raw-grey2), 0.4);
1311
- --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-telefonica-white);
1312
- --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-telefonica-grey1);
1313
- --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-telefonica-white);
1314
- --mistica-color-buttonLinkNeutralBackgroundNegativePressed: var(--mistica-telefonica-grey1);
1315
- --mistica-color-buttonLinkNeutralBackgroundMedia: var(--mistica-telefonica-white);
1316
- --mistica-color-buttonLinkNeutralBackgroundMediaPressed: var(--mistica-telefonica-grey1);
1322
+ --mistica-color-buttonLinkNeutralBackgroundBrand: rgba(var(--mistica-telefonica-raw-white), 0);
1323
+ --mistica-color-buttonLinkNeutralBackgroundBrandPressed: rgba(
1324
+ var(--mistica-telefonica-raw-white),
1325
+ 0.08
1326
+ );
1327
+ --mistica-color-buttonLinkNeutralBackgroundNegative: rgba(var(--mistica-telefonica-raw-white), 0);
1328
+ --mistica-color-buttonLinkNeutralBackgroundNegativePressed: rgba(
1329
+ var(--mistica-telefonica-raw-white),
1330
+ 0.08
1331
+ );
1332
+ --mistica-color-buttonLinkNeutralBackgroundMedia: rgba(var(--mistica-telefonica-raw-white), 0);
1333
+ --mistica-color-buttonLinkNeutralBackgroundMediaPressed: rgba(
1334
+ var(--mistica-telefonica-raw-white),
1335
+ 0.08
1336
+ );
1317
1337
  --mistica-color-buttonPrimaryBackground: var(--mistica-telefonica-telefonicaBlue);
1318
1338
  --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-telefonica-white);
1319
1339
  --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-telefonica-white);
@@ -1387,10 +1407,10 @@
1387
1407
  --mistica-color-textLinkDangerMedia: var(--mistica-telefonica-coral60);
1388
1408
  --mistica-color-textLinkSnackbar: var(--mistica-telefonica-telefonicaBlue30);
1389
1409
  --mistica-color-textLinkNeutral: var(--mistica-telefonica-grey9);
1390
- --mistica-color-textLinkNeutralBrand: var(--mistica-telefonica-grey9);
1391
- --mistica-color-textLinkNeutralNegative: var(--mistica-telefonica-grey9);
1410
+ --mistica-color-textLinkNeutralBrand: var(--mistica-telefonica-white);
1411
+ --mistica-color-textLinkNeutralNegative: var(--mistica-telefonica-white);
1392
1412
  --mistica-color-textLinkNeutralAlternative: var(--mistica-telefonica-grey9);
1393
- --mistica-color-textLinkNeutralMedia: var(--mistica-telefonica-grey9);
1413
+ --mistica-color-textLinkNeutralMedia: var(--mistica-telefonica-white);
1394
1414
  --mistica-color-textActivated: var(--mistica-telefonica-telefonicaBlue70);
1395
1415
  --mistica-color-textBrand: var(--mistica-telefonica-telefonicaBlue70);
1396
1416
  --mistica-color-inputBorder: var(--mistica-telefonica-grey5);
package/css/vivo-evolution.css CHANGED
@@ -13,6 +13,8 @@
13
13
  --mistica-vivo-evolution-vivoPurple600: #7a2fb3;
14
14
  --mistica-vivo-evolution-vivoPepper25: #fce4ef;
15
15
  --mistica-vivo-evolution-vivoPurple650: #7020a6;
16
+ --mistica-vivo-evolution-vivoNeutral150: #e3deeb;
17
+ --mistica-vivo-evolution-vivoPurple800: #4f007a;
16
18
  --mistica-vivo-evolution-vivoNeutral200: #dcd8e5;
17
19
  --mistica-vivo-evolution-vivoPurple50: #eee7f3;
18
20
  --mistica-vivo-evolution-vivoNeutral100: #eae6f0;
@@ -91,6 +93,10 @@
91
93
  --mistica-color-backgroundContainerNegative: rgba(var(--mistica-vivo-evolution-raw-vivoNeutral950), 0.4);
92
94
  --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-vivo-evolution-vivoPurple650);
93
95
  --mistica-color-backgroundContainerAlternative: var(--mistica-vivo-evolution-vivoNeutral25);
96
+ --mistica-color-backgroundContainerAlternativeOverAlternative: var(
97
+ --mistica-vivo-evolution-vivoNeutral150
98
+ );
99
+ --mistica-color-backgroundContainerAlternativeOverBrand: var(--mistica-vivo-evolution-vivoPurple800);
94
100
  --mistica-color-backgroundOverlay: rgba(var(--mistica-vivo-evolution-raw-vivoNeutral975), 0.6);
95
101
  --mistica-color-backgroundSkeleton: var(--mistica-vivo-evolution-vivoNeutral200);
96
102
  --mistica-color-backgroundSkeletonInverse: var(--mistica-vivo-evolution-vivoPurple900);
@@ -157,12 +163,24 @@
157
163
  0.1
158
164
  );
159
165
  --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-vivo-evolution-vivoNeutral100);
160
- --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-vivo-evolution-vivoNeutral0);
161
- --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-vivo-evolution-vivoNeutral25);
162
- --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-vivo-evolution-vivoNeutral0);
163
- --mistica-color-buttonLinkNeutralBackgroundNegativePressed: var(--mistica-vivo-evolution-vivoNeutral25);
164
- --mistica-color-buttonLinkNeutralBackgroundMedia: var(--mistica-vivo-evolution-vivoNeutral0);
165
- --mistica-color-buttonLinkNeutralBackgroundMediaPressed: var(--mistica-vivo-evolution-vivoNeutral25);
166
+ --mistica-color-buttonLinkNeutralBackgroundBrand: rgba(var(--mistica-vivo-evolution-raw-vivoNeutral0), 0);
167
+ --mistica-color-buttonLinkNeutralBackgroundBrandPressed: rgba(
168
+ var(--mistica-vivo-evolution-raw-vivoNeutral0),
169
+ 0.1
170
+ );
171
+ --mistica-color-buttonLinkNeutralBackgroundNegative: rgba(
172
+ var(--mistica-vivo-evolution-raw-vivoNeutral0),
173
+ 0
174
+ );
175
+ --mistica-color-buttonLinkNeutralBackgroundNegativePressed: rgba(
176
+ var(--mistica-vivo-evolution-raw-vivoNeutral0),
177
+ 0.1
178
+ );
179
+ --mistica-color-buttonLinkNeutralBackgroundMedia: rgba(var(--mistica-vivo-evolution-raw-vivoNeutral0), 0);
180
+ --mistica-color-buttonLinkNeutralBackgroundMediaPressed: rgba(
181
+ var(--mistica-vivo-evolution-raw-vivoNeutral0),
182
+ 0.1
183
+ );
166
184
  --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-evolution-vivoPurple700);
167
185
  --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-evolution-vivoNeutral0);
168
186
  --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-vivo-evolution-vivoNeutral0);
@@ -251,10 +269,10 @@
251
269
  --mistica-color-textLinkDangerMedia: var(--mistica-vivo-evolution-vivoPepper600);
252
270
  --mistica-color-textLinkSnackbar: var(--mistica-vivo-evolution-vivoPurple100);
253
271
  --mistica-color-textLinkNeutral: var(--mistica-vivo-evolution-vivoNeutral975);
254
- --mistica-color-textLinkNeutralBrand: var(--mistica-vivo-evolution-vivoNeutral975);
255
- --mistica-color-textLinkNeutralNegative: var(--mistica-vivo-evolution-vivoNeutral975);
272
+ --mistica-color-textLinkNeutralBrand: var(--mistica-vivo-evolution-vivoNeutral0);
273
+ --mistica-color-textLinkNeutralNegative: var(--mistica-vivo-evolution-vivoNeutral0);
256
274
  --mistica-color-textLinkNeutralAlternative: var(--mistica-vivo-evolution-vivoNeutral975);
257
- --mistica-color-textLinkNeutralMedia: var(--mistica-vivo-evolution-vivoNeutral975);
275
+ --mistica-color-textLinkNeutralMedia: var(--mistica-vivo-evolution-vivoNeutral0);
258
276
  --mistica-color-textActivated: var(--mistica-vivo-evolution-vivoPurple700);
259
277
  --mistica-color-textBrand: var(--mistica-vivo-evolution-vivoPurple700);
260
278
  --mistica-color-inputBorder: var(--mistica-vivo-evolution-vivoNeutral500);
@@ -562,6 +580,10 @@
562
580
  --mistica-color-backgroundContainerNegative: var(--mistica-vivo-evolution-vivoNeutral900);
563
581
  --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-vivo-evolution-vivoNeutral900);
564
582
  --mistica-color-backgroundContainerAlternative: var(--mistica-vivo-evolution-vivoNeutral900);
583
+ --mistica-color-backgroundContainerAlternativeOverAlternative: var(
584
+ --mistica-vivo-evolution-vivoNeutral150
585
+ );
586
+ --mistica-color-backgroundContainerAlternativeOverBrand: var(--mistica-vivo-evolution-vivoPurple800);
565
587
  --mistica-color-backgroundOverlay: rgba(var(--mistica-vivo-evolution-raw-vivoNeutral900), 0.8);
566
588
  --mistica-color-backgroundSkeleton: var(--mistica-vivo-evolution-vivoNeutral800);
567
589
  --mistica-color-backgroundSkeletonInverse: var(--mistica-vivo-evolution-vivoNeutral800);
@@ -990,6 +1012,10 @@
990
1012
  --mistica-color-backgroundContainerNegative: var(--mistica-vivo-evolution-vivoNeutral900);
991
1013
  --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-vivo-evolution-vivoNeutral900);
992
1014
  --mistica-color-backgroundContainerAlternative: var(--mistica-vivo-evolution-vivoNeutral900);
1015
+ --mistica-color-backgroundContainerAlternativeOverAlternative: var(
1016
+ --mistica-vivo-evolution-vivoNeutral150
1017
+ );
1018
+ --mistica-color-backgroundContainerAlternativeOverBrand: var(--mistica-vivo-evolution-vivoPurple800);
993
1019
  --mistica-color-backgroundOverlay: rgba(var(--mistica-vivo-evolution-raw-vivoNeutral900), 0.8);
994
1020
  --mistica-color-backgroundSkeleton: var(--mistica-vivo-evolution-vivoNeutral800);
995
1021
  --mistica-color-backgroundSkeletonInverse: var(--mistica-vivo-evolution-vivoNeutral800);
@@ -1444,6 +1470,10 @@
1444
1470
  );
1445
1471
  --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-vivo-evolution-vivoPurple650);
1446
1472
  --mistica-color-backgroundContainerAlternative: var(--mistica-vivo-evolution-vivoNeutral25);
1473
+ --mistica-color-backgroundContainerAlternativeOverAlternative: var(
1474
+ --mistica-vivo-evolution-vivoNeutral150
1475
+ );
1476
+ --mistica-color-backgroundContainerAlternativeOverBrand: var(--mistica-vivo-evolution-vivoPurple800);
1447
1477
  --mistica-color-backgroundOverlay: rgba(var(--mistica-vivo-evolution-raw-vivoNeutral975), 0.6);
1448
1478
  --mistica-color-backgroundSkeleton: var(--mistica-vivo-evolution-vivoNeutral200);
1449
1479
  --mistica-color-backgroundSkeletonInverse: var(--mistica-vivo-evolution-vivoPurple900);
@@ -1519,14 +1549,30 @@
1519
1549
  0.1
1520
1550
  );
1521
1551
  --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-vivo-evolution-vivoNeutral100);
1522
- --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-vivo-evolution-vivoNeutral0);
1523
- --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-vivo-evolution-vivoNeutral25);
1524
- --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-vivo-evolution-vivoNeutral0);
1525
- --mistica-color-buttonLinkNeutralBackgroundNegativePressed: var(
1526
- --mistica-vivo-evolution-vivoNeutral25
1527
- );
1528
- --mistica-color-buttonLinkNeutralBackgroundMedia: var(--mistica-vivo-evolution-vivoNeutral0);
1529
- --mistica-color-buttonLinkNeutralBackgroundMediaPressed: var(--mistica-vivo-evolution-vivoNeutral25);
1552
+ --mistica-color-buttonLinkNeutralBackgroundBrand: rgba(
1553
+ var(--mistica-vivo-evolution-raw-vivoNeutral0),
1554
+ 0
1555
+ );
1556
+ --mistica-color-buttonLinkNeutralBackgroundBrandPressed: rgba(
1557
+ var(--mistica-vivo-evolution-raw-vivoNeutral0),
1558
+ 0.1
1559
+ );
1560
+ --mistica-color-buttonLinkNeutralBackgroundNegative: rgba(
1561
+ var(--mistica-vivo-evolution-raw-vivoNeutral0),
1562
+ 0
1563
+ );
1564
+ --mistica-color-buttonLinkNeutralBackgroundNegativePressed: rgba(
1565
+ var(--mistica-vivo-evolution-raw-vivoNeutral0),
1566
+ 0.1
1567
+ );
1568
+ --mistica-color-buttonLinkNeutralBackgroundMedia: rgba(
1569
+ var(--mistica-vivo-evolution-raw-vivoNeutral0),
1570
+ 0
1571
+ );
1572
+ --mistica-color-buttonLinkNeutralBackgroundMediaPressed: rgba(
1573
+ var(--mistica-vivo-evolution-raw-vivoNeutral0),
1574
+ 0.1
1575
+ );
1530
1576
  --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-evolution-vivoPurple700);
1531
1577
  --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-evolution-vivoNeutral0);
1532
1578
  --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-vivo-evolution-vivoNeutral0);
@@ -1618,10 +1664,10 @@
1618
1664
  --mistica-color-textLinkDangerMedia: var(--mistica-vivo-evolution-vivoPepper600);
1619
1665
  --mistica-color-textLinkSnackbar: var(--mistica-vivo-evolution-vivoPurple100);
1620
1666
  --mistica-color-textLinkNeutral: var(--mistica-vivo-evolution-vivoNeutral975);
1621
- --mistica-color-textLinkNeutralBrand: var(--mistica-vivo-evolution-vivoNeutral975);
1622
- --mistica-color-textLinkNeutralNegative: var(--mistica-vivo-evolution-vivoNeutral975);
1667
+ --mistica-color-textLinkNeutralBrand: var(--mistica-vivo-evolution-vivoNeutral0);
1668
+ --mistica-color-textLinkNeutralNegative: var(--mistica-vivo-evolution-vivoNeutral0);
1623
1669
  --mistica-color-textLinkNeutralAlternative: var(--mistica-vivo-evolution-vivoNeutral975);
1624
- --mistica-color-textLinkNeutralMedia: var(--mistica-vivo-evolution-vivoNeutral975);
1670
+ --mistica-color-textLinkNeutralMedia: var(--mistica-vivo-evolution-vivoNeutral0);
1625
1671
  --mistica-color-textActivated: var(--mistica-vivo-evolution-vivoPurple700);
1626
1672
  --mistica-color-textBrand: var(--mistica-vivo-evolution-vivoPurple700);
1627
1673
  --mistica-color-inputBorder: var(--mistica-vivo-evolution-vivoNeutral500);
package/css/vivo.css CHANGED
@@ -73,6 +73,8 @@
73
73
  --mistica-color-backgroundContainerNegative: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.4);
74
74
  --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-vivo-vivoPurpleDark);
75
75
  --mistica-color-backgroundContainerAlternative: var(--mistica-vivo-grey1);
76
+ --mistica-color-backgroundContainerAlternativeOverAlternative: var(--mistica-vivo-white);
77
+ --mistica-color-backgroundContainerAlternativeOverBrand: var(--mistica-vivo-vivoPurpleDark);
76
78
  --mistica-color-backgroundOverlay: rgba(var(--mistica-vivo-raw-grey6), 0.6);
77
79
  --mistica-color-backgroundSkeleton: var(--mistica-vivo-grey3);
78
80
  --mistica-color-backgroundSkeletonInverse: var(--mistica-vivo-vivoPurpleDark);
@@ -115,12 +117,12 @@
115
117
  --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-vivo-raw-white), 0.1);
116
118
  --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-vivo-raw-white), 0.1);
117
119
  --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-vivo-grey2);
118
- --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-vivo-white);
119
- --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-vivo-grey1);
120
- --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-vivo-white);
121
- --mistica-color-buttonLinkNeutralBackgroundNegativePressed: var(--mistica-vivo-grey1);
122
- --mistica-color-buttonLinkNeutralBackgroundMedia: var(--mistica-vivo-white);
123
- --mistica-color-buttonLinkNeutralBackgroundMediaPressed: var(--mistica-vivo-grey1);
120
+ --mistica-color-buttonLinkNeutralBackgroundBrand: rgba(var(--mistica-vivo-raw-white), 0);
121
+ --mistica-color-buttonLinkNeutralBackgroundBrandPressed: rgba(var(--mistica-vivo-raw-white), 0.1);
122
+ --mistica-color-buttonLinkNeutralBackgroundNegative: rgba(var(--mistica-vivo-raw-white), 0);
123
+ --mistica-color-buttonLinkNeutralBackgroundNegativePressed: rgba(var(--mistica-vivo-raw-white), 0.1);
124
+ --mistica-color-buttonLinkNeutralBackgroundMedia: rgba(var(--mistica-vivo-raw-white), 0);
125
+ --mistica-color-buttonLinkNeutralBackgroundMediaPressed: rgba(var(--mistica-vivo-raw-white), 0.1);
124
126
  --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-vivoPurple);
125
127
  --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-white);
126
128
  --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-vivo-white);
@@ -185,10 +187,10 @@
185
187
  --mistica-color-textLinkDangerMedia: var(--mistica-vivo-pepper);
186
188
  --mistica-color-textLinkSnackbar: var(--mistica-vivo-vivoPurpleLight20);
187
189
  --mistica-color-textLinkNeutral: var(--mistica-vivo-grey6);
188
- --mistica-color-textLinkNeutralBrand: var(--mistica-vivo-grey6);
189
- --mistica-color-textLinkNeutralNegative: var(--mistica-vivo-grey6);
190
+ --mistica-color-textLinkNeutralBrand: var(--mistica-vivo-white);
191
+ --mistica-color-textLinkNeutralNegative: var(--mistica-vivo-white);
190
192
  --mistica-color-textLinkNeutralAlternative: var(--mistica-vivo-grey6);
191
- --mistica-color-textLinkNeutralMedia: var(--mistica-vivo-grey6);
193
+ --mistica-color-textLinkNeutralMedia: var(--mistica-vivo-white);
192
194
  --mistica-color-textActivated: var(--mistica-vivo-vivoPurple);
193
195
  --mistica-color-textBrand: var(--mistica-vivo-vivoPurple);
194
196
  --mistica-color-inputBorder: var(--mistica-vivo-grey4);
@@ -484,6 +486,8 @@
484
486
  --mistica-color-backgroundContainerNegative: var(--mistica-vivo-darkModeGrey);
485
487
  --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-vivo-darkModeGrey);
486
488
  --mistica-color-backgroundContainerAlternative: var(--mistica-vivo-darkModeGrey);
489
+ --mistica-color-backgroundContainerAlternativeOverAlternative: var(--mistica-vivo-darkModeGrey);
490
+ --mistica-color-backgroundContainerAlternativeOverBrand: var(--mistica-vivo-darkModeGrey);
487
491
  --mistica-color-backgroundOverlay: rgba(var(--mistica-vivo-raw-darkModeGrey), 0.8);
488
492
  --mistica-color-backgroundSkeleton: var(--mistica-vivo-darkModeGrey6);
489
493
  --mistica-color-backgroundSkeletonInverse: var(--mistica-vivo-darkModeGrey6);
@@ -804,6 +808,8 @@
804
808
  --mistica-color-backgroundContainerNegative: var(--mistica-vivo-darkModeGrey);
805
809
  --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-vivo-darkModeGrey);
806
810
  --mistica-color-backgroundContainerAlternative: var(--mistica-vivo-darkModeGrey);
811
+ --mistica-color-backgroundContainerAlternativeOverAlternative: var(--mistica-vivo-darkModeGrey);
812
+ --mistica-color-backgroundContainerAlternativeOverBrand: var(--mistica-vivo-darkModeGrey);
807
813
  --mistica-color-backgroundOverlay: rgba(var(--mistica-vivo-raw-darkModeGrey), 0.8);
808
814
  --mistica-color-backgroundSkeleton: var(--mistica-vivo-darkModeGrey6);
809
815
  --mistica-color-backgroundSkeletonInverse: var(--mistica-vivo-darkModeGrey6);
@@ -1117,6 +1123,8 @@
1117
1123
  --mistica-color-backgroundContainerNegative: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.4);
1118
1124
  --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-vivo-vivoPurpleDark);
1119
1125
  --mistica-color-backgroundContainerAlternative: var(--mistica-vivo-grey1);
1126
+ --mistica-color-backgroundContainerAlternativeOverAlternative: var(--mistica-vivo-white);
1127
+ --mistica-color-backgroundContainerAlternativeOverBrand: var(--mistica-vivo-vivoPurpleDark);
1120
1128
  --mistica-color-backgroundOverlay: rgba(var(--mistica-vivo-raw-grey6), 0.6);
1121
1129
  --mistica-color-backgroundSkeleton: var(--mistica-vivo-grey3);
1122
1130
  --mistica-color-backgroundSkeletonInverse: var(--mistica-vivo-vivoPurpleDark);
@@ -1159,12 +1167,12 @@
1159
1167
  --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-vivo-raw-white), 0.1);
1160
1168
  --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-vivo-raw-white), 0.1);
1161
1169
  --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-vivo-grey2);
1162
- --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-vivo-white);
1163
- --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-vivo-grey1);
1164
- --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-vivo-white);
1165
- --mistica-color-buttonLinkNeutralBackgroundNegativePressed: var(--mistica-vivo-grey1);
1166
- --mistica-color-buttonLinkNeutralBackgroundMedia: var(--mistica-vivo-white);
1167
- --mistica-color-buttonLinkNeutralBackgroundMediaPressed: var(--mistica-vivo-grey1);
1170
+ --mistica-color-buttonLinkNeutralBackgroundBrand: rgba(var(--mistica-vivo-raw-white), 0);
1171
+ --mistica-color-buttonLinkNeutralBackgroundBrandPressed: rgba(var(--mistica-vivo-raw-white), 0.1);
1172
+ --mistica-color-buttonLinkNeutralBackgroundNegative: rgba(var(--mistica-vivo-raw-white), 0);
1173
+ --mistica-color-buttonLinkNeutralBackgroundNegativePressed: rgba(var(--mistica-vivo-raw-white), 0.1);
1174
+ --mistica-color-buttonLinkNeutralBackgroundMedia: rgba(var(--mistica-vivo-raw-white), 0);
1175
+ --mistica-color-buttonLinkNeutralBackgroundMediaPressed: rgba(var(--mistica-vivo-raw-white), 0.1);
1168
1176
  --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-vivoPurple);
1169
1177
  --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-white);
1170
1178
  --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-vivo-white);
@@ -1229,10 +1237,10 @@
1229
1237
  --mistica-color-textLinkDangerMedia: var(--mistica-vivo-pepper);
1230
1238
  --mistica-color-textLinkSnackbar: var(--mistica-vivo-vivoPurpleLight20);
1231
1239
  --mistica-color-textLinkNeutral: var(--mistica-vivo-grey6);
1232
- --mistica-color-textLinkNeutralBrand: var(--mistica-vivo-grey6);
1233
- --mistica-color-textLinkNeutralNegative: var(--mistica-vivo-grey6);
1240
+ --mistica-color-textLinkNeutralBrand: var(--mistica-vivo-white);
1241
+ --mistica-color-textLinkNeutralNegative: var(--mistica-vivo-white);
1234
1242
  --mistica-color-textLinkNeutralAlternative: var(--mistica-vivo-grey6);
1235
- --mistica-color-textLinkNeutralMedia: var(--mistica-vivo-grey6);
1243
+ --mistica-color-textLinkNeutralMedia: var(--mistica-vivo-white);
1236
1244
  --mistica-color-textActivated: var(--mistica-vivo-vivoPurple);
1237
1245
  --mistica-color-textBrand: var(--mistica-vivo-vivoPurple);
1238
1246
  --mistica-color-inputBorder: var(--mistica-vivo-grey4);
package/dist/accordion.css-mistica.js CHANGED
@@ -10,10 +10,10 @@ function _export(target, all) {
10
10
  }
11
11
  _export(exports, {
12
12
  get accordionContentPadding () {
13
- return z;
13
+ return c;
14
14
  },
15
15
  get accordionItem () {
16
- return c;
16
+ return z;
17
17
  },
18
18
  get boxed () {
19
19
  return s;
@@ -25,13 +25,13 @@ _export(exports, {
25
25
  return n;
26
26
  },
27
27
  get panel () {
28
- return i;
28
+ return x;
29
29
  },
30
30
  get panelContainer () {
31
31
  return o;
32
32
  },
33
33
  get panelTransitionClasses () {
34
- return x;
34
+ return i;
35
35
  },
36
36
  get rightContentContainer () {
37
37
  return e;
@@ -43,9 +43,9 @@ _export(exports, {
43
43
  return a;
44
44
  }
45
45
  });
46
- /* empty css */ /* empty css */ var n = "v17_3_8s3szx0 v17_3_1y2v1nfh3 v17_3_1y2v1nfic v17_3_1y2v1nfjl v17_3_1y2v1nfku v17_3_1y2v1nfrx v17_3_1y2v1nfts v17_3_1y2v1nfh2 v17_3_1y2v1nfrc v17_3_1y2v1nfse", s = "v17_3_8s3szx1", r = "v17_3_8s3szx2", a = "v17_3_8s3szx3", e = "v17_3_8s3szx4", t = "v17_3_8s3szx5", o = "v17_3_8s3szx6", x = {
47
- enter: "v17_3_8s3szx7",
48
- enterActive: "v17_3_8s3szx8",
49
- exit: "v17_3_8s3szx9",
50
- exitActive: "v17_3_8s3szxa"
51
- }, i = "v17_3_8s3szxb", c = "v17_3_8s3szxc v17_3_1y2v1nfrx", z = "v17_3_8s3szxd";
46
+ /* empty css */ /* empty css */ var n = "v17_4_8s3szx0 v17_4_1y2v1nfh7 v17_4_1y2v1nfig v17_4_1y2v1nfjp v17_4_1y2v1nfky v17_4_1y2v1nfs1 v17_4_1y2v1nftw v17_4_1y2v1nfh6 v17_4_1y2v1nfrg v17_4_1y2v1nfsi", s = "v17_4_8s3szx1", r = "v17_4_8s3szx2", a = "v17_4_8s3szx3", e = "v17_4_8s3szx4", t = "v17_4_8s3szx5", o = "v17_4_8s3szx6", i = {
47
+ enter: "v17_4_8s3szx7",
48
+ enterActive: "v17_4_8s3szx8",
49
+ exit: "v17_4_8s3szx9",
50
+ exitActive: "v17_4_8s3szxa"
51
+ }, x = "v17_4_8s3szxb", z = "v17_4_8s3szxc v17_4_1y2v1nfs1", c = "v17_4_8s3szxd";
package/dist/align.css-mistica.js CHANGED
@@ -8,4 +8,4 @@ Object.defineProperty(exports, "container", {
8
8
  return o;
9
9
  }
10
10
  });
11
- /* empty css */ var o = "v17_3_1mfs0fk0";
11
+ /* empty css */ var o = "v17_4_1mfs0fk0";