@telefonica/mistica 16.39.0 → 16.41.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 (235) hide show
  1. package/css/blau.css +12 -1
  2. package/css/esimflag.css +12 -1
  3. package/css/mistica.css +1 -1
  4. package/css/movistar-new.css +897 -0
  5. package/css/movistar.css +12 -1
  6. package/css/o2-new.css +13 -2
  7. package/css/o2.css +12 -1
  8. package/css/telefonica.css +13 -2
  9. package/css/tu.css +13 -2
  10. package/css/vivo-new.css +13 -2
  11. package/css/vivo.css +12 -1
  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 +3 -3
  16. package/dist/box.css-mistica.js +13 -13
  17. package/dist/boxed.css-mistica.js +24 -24
  18. package/dist/button-group.css-mistica.js +3 -3
  19. package/dist/button-layout.css-mistica.js +13 -13
  20. package/dist/button.css-mistica.js +40 -40
  21. package/dist/callout.css-mistica.js +6 -6
  22. package/dist/card-internal.css-mistica.js +23 -23
  23. package/dist/carousel.css-mistica.js +32 -32
  24. package/dist/checkbox.css-mistica.js +12 -12
  25. package/dist/chip.css-mistica.js +15 -15
  26. package/dist/circle.css-mistica.js +1 -1
  27. package/dist/community/advanced-data-card.css-mistica.js +20 -20
  28. package/dist/community/advanced-data-card.js +23 -22
  29. package/dist/community/blocks.css-mistica.js +1 -1
  30. package/dist/community/example-component.css-mistica.js +1 -1
  31. package/dist/counter.css-mistica.js +5 -5
  32. package/dist/cover-hero.css-mistica.js +11 -11
  33. package/dist/credit-card-number-field.css-mistica.js +3 -3
  34. package/dist/date-field.css-mistica.js +1 -1
  35. package/dist/date-time-picker.css-mistica.js +1 -1
  36. package/dist/dialog.css-mistica.js +6 -6
  37. package/dist/divider.css-mistica.js +2 -2
  38. package/dist/double-field.css-mistica.js +2 -2
  39. package/dist/drawer.css-mistica.js +7 -7
  40. package/dist/empty-state-card.css-mistica.js +1 -1
  41. package/dist/empty-state.css-mistica.js +6 -6
  42. package/dist/fade-in.css-mistica.js +1 -1
  43. package/dist/feedback.css-mistica.js +4 -4
  44. package/dist/fixed-footer-layout.css-mistica.js +9 -9
  45. package/dist/form.css-mistica.js +2 -2
  46. package/dist/grid-layout.css-mistica.js +3 -3
  47. package/dist/grid.css-mistica.js +122 -122
  48. package/dist/header.css-mistica.js +1 -1
  49. package/dist/hero.css-mistica.js +5 -5
  50. package/dist/horizontal-scroll.css-mistica.js +1 -1
  51. package/dist/icon-button.css-mistica.js +44 -44
  52. package/dist/icons/icon-chevron.css-mistica.js +2 -2
  53. package/dist/icons/icon-error.css-mistica.js +1 -1
  54. package/dist/image.css-mistica.js +6 -6
  55. package/dist/index.d.ts +5 -2
  56. package/dist/index.js +16 -0
  57. package/dist/inline.css-mistica.js +10 -10
  58. package/dist/list.css-mistica.js +22 -22
  59. package/dist/list.js +128 -123
  60. package/dist/loading-bar.css-mistica.js +3 -3
  61. package/dist/loading-screen.css-mistica.js +10 -10
  62. package/dist/logo-movistar-new.d.ts +4 -0
  63. package/dist/logo-movistar-new.js +123 -0
  64. package/dist/logo.css-mistica.js +5 -5
  65. package/dist/logo.d.ts +1 -0
  66. package/dist/logo.js +62 -35
  67. package/dist/menu.css-mistica.js +15 -15
  68. package/dist/mosaic.css-mistica.js +1 -1
  69. package/dist/navigation-bar.css-mistica.js +43 -43
  70. package/dist/navigation-breadcrumbs.css-mistica.js +1 -1
  71. package/dist/package-version.js +1 -1
  72. package/dist/pin-field.css-mistica.js +5 -5
  73. package/dist/popover.css-mistica.js +1 -1
  74. package/dist/progress-bar.css-mistica.js +4 -4
  75. package/dist/radio-button.css-mistica.js +18 -18
  76. package/dist/rating.css-mistica.js +5 -5
  77. package/dist/responsive-layout.css-mistica.js +8 -8
  78. package/dist/screen-reader-only.css-mistica.js +1 -1
  79. package/dist/select.css-mistica.js +25 -24
  80. package/dist/sheet-action-row.css-mistica.js +1 -1
  81. package/dist/sheet-common.css-mistica.js +8 -8
  82. package/dist/sheet-info.css-mistica.js +1 -1
  83. package/dist/skeletons.css-mistica.js +6 -6
  84. package/dist/skins/blau.js +10 -1
  85. package/dist/skins/constants.d.ts +1 -0
  86. package/dist/skins/constants.js +12 -9
  87. package/dist/skins/defaults.js +6 -1
  88. package/dist/skins/esimflag.js +10 -1
  89. package/dist/skins/movistar-new.d.ts +53 -0
  90. package/dist/skins/movistar-new.js +594 -0
  91. package/dist/skins/movistar.js +10 -1
  92. package/dist/skins/o2-new.js +11 -2
  93. package/dist/skins/o2.js +10 -1
  94. package/dist/skins/skin-contract.css-mistica.js +399 -390
  95. package/dist/skins/skin-contract.css.d.ts +9 -0
  96. package/dist/skins/telefonica.js +11 -2
  97. package/dist/skins/tu.js +11 -2
  98. package/dist/skins/types/colors.d.ts +2 -0
  99. package/dist/skins/types/index.d.ts +4 -1
  100. package/dist/skins/utils.js +7 -4
  101. package/dist/skins/vivo-new.js +11 -2
  102. package/dist/skins/vivo.js +10 -1
  103. package/dist/skip-link.css-mistica.js +1 -1
  104. package/dist/slider.css-mistica.js +16 -16
  105. package/dist/snackbar.css-mistica.js +11 -11
  106. package/dist/spinner.css-mistica.js +3 -3
  107. package/dist/stack.css-mistica.js +5 -5
  108. package/dist/stacking-group.css-mistica.js +1 -1
  109. package/dist/stepper.css-mistica.js +9 -9
  110. package/dist/switch-component.css-mistica.js +36 -36
  111. package/dist/table.css-mistica.js +8 -8
  112. package/dist/tabs.css-mistica.js +18 -18
  113. package/dist/tag.css-mistica.js +3 -3
  114. package/dist/text-field-base.css-mistica.js +18 -18
  115. package/dist/text-field-components.css-mistica.js +11 -11
  116. package/dist/text-field-components.css.d.ts +1 -0
  117. package/dist/text-link.css-mistica.js +5 -5
  118. package/dist/text.css-mistica.js +7 -7
  119. package/dist/theme-context.css-mistica.js +1 -1
  120. package/dist/theme.d.ts +1 -0
  121. package/dist/timeline.css-mistica.js +15 -15
  122. package/dist/timer.css-mistica.js +6 -6
  123. package/dist/tooltip.css-mistica.js +4 -4
  124. package/dist/touchable.css-mistica.js +4 -4
  125. package/dist/utils/aspect-ratio-support.css-mistica.js +6 -6
  126. package/dist/video.css-mistica.js +1 -1
  127. package/dist/vivinho-loading-animation/vivinho-loading-animation.css-mistica.js +1 -1
  128. package/dist-es/accordion.css-mistica.js +7 -7
  129. package/dist-es/align.css-mistica.js +1 -1
  130. package/dist-es/avatar.css-mistica.js +2 -2
  131. package/dist-es/badge.css-mistica.js +2 -2
  132. package/dist-es/box.css-mistica.js +13 -13
  133. package/dist-es/boxed.css-mistica.js +23 -23
  134. package/dist-es/button-group.css-mistica.js +2 -2
  135. package/dist-es/button-layout.css-mistica.js +13 -13
  136. package/dist-es/button.css-mistica.js +27 -27
  137. package/dist-es/callout.css-mistica.js +6 -6
  138. package/dist-es/card-internal.css-mistica.js +16 -16
  139. package/dist-es/carousel.css-mistica.js +9 -9
  140. package/dist-es/checkbox.css-mistica.js +9 -9
  141. package/dist-es/chip.css-mistica.js +14 -14
  142. package/dist-es/circle.css-mistica.js +1 -1
  143. package/dist-es/community/advanced-data-card.css-mistica.js +7 -7
  144. package/dist-es/community/advanced-data-card.js +34 -33
  145. package/dist-es/community/blocks.css-mistica.js +1 -1
  146. package/dist-es/community/example-component.css-mistica.js +1 -1
  147. package/dist-es/counter.css-mistica.js +2 -2
  148. package/dist-es/cover-hero.css-mistica.js +4 -4
  149. package/dist-es/credit-card-number-field.css-mistica.js +3 -3
  150. package/dist-es/date-field.css-mistica.js +1 -1
  151. package/dist-es/date-time-picker.css-mistica.js +1 -1
  152. package/dist-es/dialog.css-mistica.js +5 -5
  153. package/dist-es/divider.css-mistica.js +2 -2
  154. package/dist-es/double-field.css-mistica.js +2 -2
  155. package/dist-es/drawer.css-mistica.js +2 -2
  156. package/dist-es/empty-state-card.css-mistica.js +1 -1
  157. package/dist-es/empty-state.css-mistica.js +6 -6
  158. package/dist-es/fade-in.css-mistica.js +1 -1
  159. package/dist-es/feedback.css-mistica.js +2 -2
  160. package/dist-es/fixed-footer-layout.css-mistica.js +5 -5
  161. package/dist-es/form.css-mistica.js +2 -2
  162. package/dist-es/grid-layout.css-mistica.js +3 -3
  163. package/dist-es/grid.css-mistica.js +122 -122
  164. package/dist-es/header.css-mistica.js +1 -1
  165. package/dist-es/hero.css-mistica.js +3 -3
  166. package/dist-es/horizontal-scroll.css-mistica.js +1 -1
  167. package/dist-es/icon-button.css-mistica.js +43 -43
  168. package/dist-es/icons/icon-chevron.css-mistica.js +2 -2
  169. package/dist-es/icons/icon-error.css-mistica.js +1 -1
  170. package/dist-es/image.css-mistica.js +4 -4
  171. package/dist-es/index.js +1865 -1864
  172. package/dist-es/inline.css-mistica.js +10 -10
  173. package/dist-es/list.css-mistica.js +2 -2
  174. package/dist-es/list.js +196 -191
  175. package/dist-es/loading-bar.css-mistica.js +2 -2
  176. package/dist-es/loading-screen.css-mistica.js +5 -5
  177. package/dist-es/logo-movistar-new.js +114 -0
  178. package/dist-es/logo.css-mistica.js +5 -5
  179. package/dist-es/logo.js +59 -35
  180. package/dist-es/menu.css-mistica.js +13 -13
  181. package/dist-es/mosaic.css-mistica.js +1 -1
  182. package/dist-es/navigation-bar.css-mistica.js +17 -17
  183. package/dist-es/navigation-breadcrumbs.css-mistica.js +1 -1
  184. package/dist-es/package-version.js +1 -1
  185. package/dist-es/pin-field.css-mistica.js +2 -2
  186. package/dist-es/popover.css-mistica.js +1 -1
  187. package/dist-es/progress-bar.css-mistica.js +4 -4
  188. package/dist-es/radio-button.css-mistica.js +16 -16
  189. package/dist-es/rating.css-mistica.js +3 -3
  190. package/dist-es/responsive-layout.css-mistica.js +6 -6
  191. package/dist-es/screen-reader-only.css-mistica.js +1 -1
  192. package/dist-es/select.css-mistica.js +18 -17
  193. package/dist-es/sheet-action-row.css-mistica.js +1 -1
  194. package/dist-es/sheet-common.css-mistica.js +2 -2
  195. package/dist-es/sheet-info.css-mistica.js +1 -1
  196. package/dist-es/skeletons.css-mistica.js +5 -5
  197. package/dist-es/skins/blau.js +10 -1
  198. package/dist-es/skins/constants.js +2 -2
  199. package/dist-es/skins/defaults.js +6 -1
  200. package/dist-es/skins/esimflag.js +10 -1
  201. package/dist-es/skins/movistar-new.js +577 -0
  202. package/dist-es/skins/movistar.js +10 -1
  203. package/dist-es/skins/o2-new.js +11 -2
  204. package/dist-es/skins/o2.js +10 -1
  205. package/dist-es/skins/skin-contract.css-mistica.js +399 -390
  206. package/dist-es/skins/telefonica.js +11 -2
  207. package/dist-es/skins/tu.js +11 -2
  208. package/dist-es/skins/utils.js +24 -21
  209. package/dist-es/skins/vivo-new.js +11 -2
  210. package/dist-es/skins/vivo.js +10 -1
  211. package/dist-es/skip-link.css-mistica.js +1 -1
  212. package/dist-es/slider.css-mistica.js +11 -11
  213. package/dist-es/snackbar.css-mistica.js +5 -5
  214. package/dist-es/spinner.css-mistica.js +2 -2
  215. package/dist-es/stack.css-mistica.js +5 -5
  216. package/dist-es/stacking-group.css-mistica.js +1 -1
  217. package/dist-es/stepper.css-mistica.js +3 -3
  218. package/dist-es/style.css +1 -1
  219. package/dist-es/switch-component.css-mistica.js +30 -30
  220. package/dist-es/table.css-mistica.js +8 -8
  221. package/dist-es/tabs.css-mistica.js +14 -14
  222. package/dist-es/tag.css-mistica.js +2 -2
  223. package/dist-es/text-field-base.css-mistica.js +2 -2
  224. package/dist-es/text-field-components.css-mistica.js +4 -4
  225. package/dist-es/text-link.css-mistica.js +5 -5
  226. package/dist-es/text.css-mistica.js +7 -7
  227. package/dist-es/theme-context.css-mistica.js +1 -1
  228. package/dist-es/timeline.css-mistica.js +11 -11
  229. package/dist-es/timer.css-mistica.js +6 -6
  230. package/dist-es/tooltip.css-mistica.js +2 -2
  231. package/dist-es/touchable.css-mistica.js +2 -2
  232. package/dist-es/utils/aspect-ratio-support.css-mistica.js +4 -4
  233. package/dist-es/video.css-mistica.js +1 -1
  234. package/dist-es/vivinho-loading-animation/vivinho-loading-animation.css-mistica.js +1 -1
  235. package/package.json +1 -1
package/css/movistar-new.css ADDED
@@ -0,0 +1,897 @@
1
+ [data-mistica-skin='movistar-new'] {
2
+ /* Palette colors */
3
+ --mistica-movistar-new-white: #ffffff;
4
+ --mistica-movistar-new-movistarWhite: #fefaf5;
5
+ --mistica-movistar-new-movistarBlue: #0066ff;
6
+ --mistica-movistar-new-movistarBlack: #262423;
7
+ --mistica-movistar-new-salmon100: #feeee6;
8
+ --mistica-movistar-new-blue800: #0149b3;
9
+ --mistica-movistar-new-grey100: #faf7f5;
10
+ --mistica-movistar-new-grey200: #f3eeea;
11
+ --mistica-movistar-new-grey300: #dfdbd6;
12
+ --mistica-movistar-new-grey600: #605e5c;
13
+ --mistica-movistar-new-red: #c10000;
14
+ --mistica-movistar-new-redHigh: #ad0000;
15
+ --mistica-movistar-new-blue100: #e5f0ff;
16
+ --mistica-movistar-new-blueHigh: #005eeb;
17
+ --mistica-movistar-new-blue300: #80b3ff;
18
+ --mistica-movistar-new-grey500: #807d7b;
19
+ --mistica-movistar-new-blue200: #e8f4fa;
20
+ --mistica-movistar-new-blueLight: #d3eeff;
21
+ --mistica-movistar-new-blueDark: #022d67;
22
+ --mistica-movistar-new-emerald: #048239;
23
+ --mistica-movistar-new-yellow600: #bfa960;
24
+ --mistica-movistar-new-pink55: #c42f6d;
25
+ --mistica-movistar-new-green200: #ebf9df;
26
+ --mistica-movistar-new-yellow200: #fff3d1;
27
+ --mistica-movistar-new-green700: #407f0f;
28
+ --mistica-movistar-new-yellowHigh: #5e4a09;
29
+ --mistica-movistar-new-emeraldHigh: #036d30;
30
+ --mistica-movistar-new-yellowLight: #ffe99c;
31
+ --mistica-movistar-new-salmon200: #fde5d7;
32
+ --mistica-movistar-new-darkModeBlack: #070706;
33
+ --mistica-movistar-new-darkModeGrey: #151414;
34
+ --mistica-movistar-new-darkModeMovistarBlue: #227aff;
35
+ --mistica-movistar-new-red350: #ff8a8a;
36
+ --mistica-movistar-new-grey400: #9f9c99;
37
+ --mistica-movistar-new-grey700: #403f3d;
38
+ --mistica-movistar-new-yellow: #edb800;
39
+ --mistica-movistar-new-pink45: #eb5f99;
40
+ --mistica-movistar-new-yellow400: #ffcb11;
41
+ --mistica-movistar-new-green400: #8dcc5b;
42
+
43
+ /* Raw palette colors, for use with rgba() */
44
+ --mistica-movistar-new-raw-movistarBlack: 38, 36, 35;
45
+ --mistica-movistar-new-raw-white: 255, 255, 255;
46
+ --mistica-movistar-new-raw-black: 0, 0, 0;
47
+ --mistica-movistar-new-raw-darkModeGrey: 21, 20, 20;
48
+ --mistica-movistar-new-raw-darkModeBlack: 7, 7, 6;
49
+ --mistica-movistar-new-raw-movistarWhite: 254, 250, 245;
50
+
51
+ /* Colors */
52
+ --mistica-color-background: var(--mistica-movistar-new-white);
53
+ --mistica-color-backgroundAlternative: var(--mistica-movistar-new-movistarWhite);
54
+ --mistica-color-backgroundBrand: var(--mistica-movistar-new-movistarBlue);
55
+ --mistica-color-backgroundBrandSecondary: var(--mistica-movistar-new-movistarBlack);
56
+ --mistica-color-backgroundContainer: var(--mistica-movistar-new-white);
57
+ --mistica-color-backgroundContainerError: var(--mistica-movistar-new-salmon100);
58
+ --mistica-color-backgroundContainerHover: rgba(var(--mistica-movistar-new-raw-movistarBlack), 0.02);
59
+ --mistica-color-backgroundContainerPressed: rgba(var(--mistica-movistar-new-raw-movistarBlack), 0.02);
60
+ --mistica-color-backgroundContainerBrand: var(--mistica-movistar-new-movistarBlue);
61
+ --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-movistar-new-raw-movistarBlack), 0.1);
62
+ --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-movistar-new-raw-movistarBlack), 0.2);
63
+ --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-movistar-new-blue800);
64
+ --mistica-color-backgroundContainerAlternative: var(--mistica-movistar-new-grey100);
65
+ --mistica-color-backgroundOverlay: rgba(var(--mistica-movistar-new-raw-movistarBlack), 0.6);
66
+ --mistica-color-backgroundSkeleton: var(--mistica-movistar-new-grey200);
67
+ --mistica-color-backgroundSkeletonInverse: var(--mistica-movistar-new-blue800);
68
+ --mistica-color-backgroundBrandTop: var(--mistica-movistar-new-movistarBlue);
69
+ --mistica-color-backgroundBrandBottom: var(--mistica-movistar-new-movistarBlue);
70
+ --mistica-color-appBarBackground: var(--mistica-movistar-new-white);
71
+ --mistica-color-navigationBarBackground: var(--mistica-movistar-new-movistarBlue);
72
+ --mistica-color-skeletonWave: var(--mistica-movistar-new-grey200);
73
+ --mistica-color-borderLow: var(--mistica-movistar-new-grey100);
74
+ --mistica-color-border: var(--mistica-movistar-new-grey300);
75
+ --mistica-color-borderHigh: var(--mistica-movistar-new-grey600);
76
+ --mistica-color-borderSelected: var(--mistica-movistar-new-blue800);
77
+ --mistica-color-coverBackgroundHover: rgba(var(--mistica-movistar-new-raw-movistarBlack), 0.25);
78
+ --mistica-color-coverBackgroundPressed: rgba(var(--mistica-movistar-new-raw-movistarBlack), 0.35);
79
+ --mistica-color-buttonDangerBackground: var(--mistica-movistar-new-red);
80
+ --mistica-color-buttonDangerBackgroundPressed: var(--mistica-movistar-new-redHigh);
81
+ --mistica-color-buttonDangerBackgroundHover: var(--mistica-movistar-new-redHigh);
82
+ --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-movistar-new-white);
83
+ --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-movistar-new-white);
84
+ --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-movistar-new-salmon100);
85
+ --mistica-color-buttonLinkDangerBackgroundInversePressed: var(--mistica-movistar-new-salmon100);
86
+ --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-movistar-new-salmon100);
87
+ --mistica-color-buttonLinkBackgroundPressed: var(--mistica-movistar-new-blue100);
88
+ --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-movistar-new-raw-white), 0.3);
89
+ --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-movistar-new-raw-white), 0.3);
90
+ --mistica-color-buttonPrimaryBackground: var(--mistica-movistar-new-movistarBlue);
91
+ --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-movistar-new-white);
92
+ --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-movistar-new-white);
93
+ --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-movistar-new-blueHigh);
94
+ --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-movistar-new-blue100);
95
+ --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-movistar-new-blue100);
96
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-movistar-new-blueHigh);
97
+ --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-movistar-new-blue100);
98
+ --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-movistar-new-blue100);
99
+ --mistica-color-buttonSecondaryBorder: var(--mistica-movistar-new-movistarBlue);
100
+ --mistica-color-buttonSecondaryBorderInverse: var(--mistica-movistar-new-white);
101
+ --mistica-color-buttonSecondaryBorderMedia: var(--mistica-movistar-new-white);
102
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-movistar-new-blue800);
103
+ --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-movistar-new-white);
104
+ --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-movistar-new-white);
105
+ --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-movistar-new-blue100);
106
+ --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-movistar-new-raw-white), 0.2);
107
+ --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-movistar-new-raw-white), 0.2);
108
+ --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-movistar-new-blue100);
109
+ --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-movistar-new-raw-white), 0.3);
110
+ --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-movistar-new-raw-white), 0.3);
111
+ --mistica-color-textButtonPrimary: var(--mistica-movistar-new-white);
112
+ --mistica-color-textButtonPrimaryInverse: var(--mistica-movistar-new-movistarBlue);
113
+ --mistica-color-textButtonPrimaryMedia: var(--mistica-movistar-new-movistarBlue);
114
+ --mistica-color-textButtonPrimaryInversePressed: var(--mistica-movistar-new-blue800);
115
+ --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-movistar-new-blueHigh);
116
+ --mistica-color-textButtonSecondary: var(--mistica-movistar-new-movistarBlue);
117
+ --mistica-color-textButtonSecondaryInverse: var(--mistica-movistar-new-white);
118
+ --mistica-color-textButtonSecondaryMedia: var(--mistica-movistar-new-white);
119
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-movistar-new-blue800);
120
+ --mistica-color-textButtonSecondaryInversePressed: var(--mistica-movistar-new-white);
121
+ --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-movistar-new-white);
122
+ --mistica-color-textLink: var(--mistica-movistar-new-movistarBlue);
123
+ --mistica-color-textLinkInverse: var(--mistica-movistar-new-white);
124
+ --mistica-color-textLinkMedia: var(--mistica-movistar-new-white);
125
+ --mistica-color-textLinkDanger: var(--mistica-movistar-new-red);
126
+ --mistica-color-textLinkDangerMedia: var(--mistica-movistar-new-red);
127
+ --mistica-color-textLinkSnackbar: var(--mistica-movistar-new-blue300);
128
+ --mistica-color-textActivated: var(--mistica-movistar-new-blueHigh);
129
+ --mistica-color-textBrand: var(--mistica-movistar-new-blueHigh);
130
+ --mistica-color-inputBorder: var(--mistica-movistar-new-grey500);
131
+ --mistica-color-inputBorderInverse: var(--mistica-movistar-new-white);
132
+ --mistica-color-completedStep: var(--mistica-movistar-new-movistarBlue);
133
+ --mistica-color-completedStepInverse: var(--mistica-movistar-new-blue200);
134
+ --mistica-color-control: var(--mistica-movistar-new-grey500);
135
+ --mistica-color-controlActivated: var(--mistica-movistar-new-movistarBlue);
136
+ --mistica-color-controlInverse: var(--mistica-movistar-new-blueLight);
137
+ --mistica-color-controlActivatedInverse: var(--mistica-movistar-new-white);
138
+ --mistica-color-controlError: var(--mistica-movistar-new-red);
139
+ --mistica-color-barTrack: var(--mistica-movistar-new-grey300);
140
+ --mistica-color-barTrackInverse: rgba(var(--mistica-movistar-new-raw-movistarBlack), 0.14);
141
+ --mistica-color-loadingBar: var(--mistica-movistar-new-blueLight);
142
+ --mistica-color-loadingBarBackground: var(--mistica-movistar-new-blueHigh);
143
+ --mistica-color-toggleAndroidInactive: var(--mistica-movistar-new-grey200);
144
+ --mistica-color-toggleAndroidBackgroundActive: var(--mistica-movistar-new-blue300);
145
+ --mistica-color-iosControlKnob: var(--mistica-movistar-new-white);
146
+ --mistica-color-controlKnobInverse: var(--mistica-movistar-new-movistarBlue);
147
+ --mistica-color-divider: var(--mistica-movistar-new-grey300);
148
+ --mistica-color-dividerInverse: rgba(var(--mistica-movistar-new-raw-white), 0.2);
149
+ --mistica-color-navigationBarDivider: var(--mistica-movistar-new-movistarBlue);
150
+ --mistica-color-badge: var(--mistica-movistar-new-red);
151
+ --mistica-color-feedbackErrorBackground: var(--mistica-movistar-new-red);
152
+ --mistica-color-feedbackInfoBackground: var(--mistica-movistar-new-blueDark);
153
+ --mistica-color-brand: var(--mistica-movistar-new-movistarBlue);
154
+ --mistica-color-brandHigh: var(--mistica-movistar-new-blue800);
155
+ --mistica-color-inverse: var(--mistica-movistar-new-white);
156
+ --mistica-color-neutralHigh: var(--mistica-movistar-new-movistarBlack);
157
+ --mistica-color-neutralMedium: var(--mistica-movistar-new-grey600);
158
+ --mistica-color-neutralMediumInverse: var(--mistica-movistar-new-grey600);
159
+ --mistica-color-neutralLow: var(--mistica-movistar-new-grey100);
160
+ --mistica-color-neutralLowAlternative: var(--mistica-movistar-new-grey200);
161
+ --mistica-color-textPrimary: var(--mistica-movistar-new-movistarBlack);
162
+ --mistica-color-textPrimaryInverse: var(--mistica-movistar-new-white);
163
+ --mistica-color-textPrimaryMedia: var(--mistica-movistar-new-white);
164
+ --mistica-color-textSecondary: var(--mistica-movistar-new-grey600);
165
+ --mistica-color-textSecondaryInverse: var(--mistica-movistar-new-movistarWhite);
166
+ --mistica-color-textSecondaryMedia: var(--mistica-movistar-new-movistarWhite);
167
+ --mistica-color-success: var(--mistica-movistar-new-emerald);
168
+ --mistica-color-warning: var(--mistica-movistar-new-yellow600);
169
+ --mistica-color-error: var(--mistica-movistar-new-red);
170
+ --mistica-color-textError: var(--mistica-movistar-new-red);
171
+ --mistica-color-textErrorInverse: var(--mistica-movistar-new-white);
172
+ --mistica-color-promo: var(--mistica-movistar-new-redHigh);
173
+ --mistica-color-highlight: var(--mistica-movistar-new-pink55);
174
+ --mistica-color-successLow: var(--mistica-movistar-new-green200);
175
+ --mistica-color-warningLow: var(--mistica-movistar-new-yellow200);
176
+ --mistica-color-errorLow: var(--mistica-movistar-new-salmon100);
177
+ --mistica-color-promoLow: var(--mistica-movistar-new-salmon100);
178
+ --mistica-color-brandLow: var(--mistica-movistar-new-blue100);
179
+ --mistica-color-successHigh: var(--mistica-movistar-new-green700);
180
+ --mistica-color-warningHigh: var(--mistica-movistar-new-yellowHigh);
181
+ --mistica-color-errorHigh: var(--mistica-movistar-new-redHigh);
182
+ --mistica-color-promoHigh: var(--mistica-movistar-new-redHigh);
183
+ --mistica-color-successHighInverse: var(--mistica-movistar-new-emeraldHigh);
184
+ --mistica-color-warningHighInverse: var(--mistica-movistar-new-yellowHigh);
185
+ --mistica-color-errorHighInverse: var(--mistica-movistar-new-redHigh);
186
+ --mistica-color-promoHighInverse: var(--mistica-movistar-new-redHigh);
187
+ --mistica-color-textNavigationBarPrimary: var(--mistica-movistar-new-white);
188
+ --mistica-color-textNavigationBarSecondary: var(--mistica-movistar-new-blue300);
189
+ --mistica-color-textNavigationSearchBarHint: var(--mistica-movistar-new-blue300);
190
+ --mistica-color-textNavigationSearchBarText: var(--mistica-movistar-new-white);
191
+ --mistica-color-textAppBar: var(--mistica-movistar-new-grey600);
192
+ --mistica-color-textAppBarSelected: var(--mistica-movistar-new-blue800);
193
+ --mistica-color-customTabsBackground: var(--mistica-movistar-new-white);
194
+ --mistica-color-tagTextPromo: var(--mistica-movistar-new-white);
195
+ --mistica-color-tagTextActive: var(--mistica-movistar-new-blueHigh);
196
+ --mistica-color-tagTextInactive: var(--mistica-movistar-new-grey600);
197
+ --mistica-color-tagTextInfo: var(--mistica-movistar-new-blueHigh);
198
+ --mistica-color-tagTextSuccess: var(--mistica-movistar-new-emeraldHigh);
199
+ --mistica-color-tagTextWarning: var(--mistica-movistar-new-yellowHigh);
200
+ --mistica-color-tagTextError: var(--mistica-movistar-new-redHigh);
201
+ --mistica-color-tagBackgroundPromo: var(--mistica-movistar-new-redHigh);
202
+ --mistica-color-tagBackgroundActive: var(--mistica-movistar-new-blue100);
203
+ --mistica-color-tagBackgroundInactive: var(--mistica-movistar-new-grey200);
204
+ --mistica-color-tagBackgroundInfo: var(--mistica-movistar-new-blue100);
205
+ --mistica-color-tagBackgroundSuccess: var(--mistica-movistar-new-green200);
206
+ --mistica-color-tagBackgroundWarning: var(--mistica-movistar-new-yellowLight);
207
+ --mistica-color-tagBackgroundError: var(--mistica-movistar-new-salmon200);
208
+ --mistica-color-tagTextPromoInverse: var(--mistica-movistar-new-redHigh);
209
+ --mistica-color-tagTextActiveInverse: var(--mistica-movistar-new-blueHigh);
210
+ --mistica-color-tagTextInactiveInverse: var(--mistica-movistar-new-grey600);
211
+ --mistica-color-tagTextInfoInverse: var(--mistica-movistar-new-blueHigh);
212
+ --mistica-color-tagTextSuccessInverse: var(--mistica-movistar-new-green700);
213
+ --mistica-color-tagTextWarningInverse: var(--mistica-movistar-new-yellowHigh);
214
+ --mistica-color-tagTextErrorInverse: var(--mistica-movistar-new-redHigh);
215
+ --mistica-color-tagBackgroundPromoInverse: var(--mistica-movistar-new-white);
216
+ --mistica-color-tagBackgroundActiveInverse: var(--mistica-movistar-new-white);
217
+ --mistica-color-tagBackgroundInactiveInverse: var(--mistica-movistar-new-white);
218
+ --mistica-color-tagBackgroundInfoInverse: var(--mistica-movistar-new-white);
219
+ --mistica-color-tagBackgroundSuccessInverse: var(--mistica-movistar-new-white);
220
+ --mistica-color-tagBackgroundWarningInverse: var(--mistica-movistar-new-white);
221
+ --mistica-color-tagBackgroundErrorInverse: var(--mistica-movistar-new-white);
222
+ --mistica-color-cardContentOverlay: linear-gradient(
223
+ 180deg,
224
+ rgba(var(--mistica-movistar-new-raw-black), 0) 0%,
225
+ rgba(var(--mistica-movistar-new-raw-black), 0.4) 30%,
226
+ rgba(var(--mistica-movistar-new-raw-black), 0.7) 100%
227
+ );
228
+ --mistica-color-cardFooterOverlay: rgba(var(--mistica-movistar-new-raw-black), 0.7);
229
+
230
+ /* Border radius */
231
+ --mistica-border-radius-avatar: 50%;
232
+ --mistica-border-radius-bar: 999px;
233
+ --mistica-border-radius-button: 4px;
234
+ --mistica-border-radius-checkbox: 4px;
235
+ --mistica-border-radius-container: 16px;
236
+ --mistica-border-radius-indicator: 24px;
237
+ --mistica-border-radius-chip: 24px;
238
+ --mistica-border-radius-tag: 0px;
239
+ --mistica-border-radius-input: 12px;
240
+ --mistica-border-radius-legacyDisplay: 16px;
241
+ --mistica-border-radius-popup: 8px;
242
+ --mistica-border-radius-sheet: 16px;
243
+ --mistica-border-radius-mediaSmall: 8px;
244
+
245
+ /* Text */
246
+ --mistica-font-size-1: 0.75rem;
247
+ --mistica-line-height-1: 1rem;
248
+ --mistica-font-size-2: 0.875rem;
249
+ --mistica-line-height-2: 1.25rem;
250
+ --mistica-font-size-3: 1rem;
251
+ --mistica-line-height-3: 1.375rem;
252
+ --mistica-font-size-4: 1.125rem;
253
+ --mistica-line-height-4: 1.5rem;
254
+ --mistica-font-size-5: 1.25rem;
255
+ --mistica-line-height-5: 1.625rem;
256
+ --mistica-font-weight-5: 700;
257
+ --mistica-font-size-6: 1.5rem;
258
+ --mistica-line-height-6: 1.75rem;
259
+ --mistica-font-weight-6: 700;
260
+ --mistica-font-size-7: 1.75rem;
261
+ --mistica-line-height-7: 2rem;
262
+ --mistica-font-weight-7: 700;
263
+ --mistica-font-size-8: 2rem;
264
+ --mistica-line-height-8: 2.375rem;
265
+ --mistica-font-weight-8: 700;
266
+ --mistica-font-size-9: 2.5rem;
267
+ --mistica-line-height-9: 3rem;
268
+ --mistica-font-weight-9: 700;
269
+ --mistica-font-size-10: 3rem;
270
+ --mistica-line-height-10: 3.5rem;
271
+ --mistica-font-weight-10: 700;
272
+ --mistica-font-size-cardTitle: 1.25rem;
273
+ --mistica-line-height-cardTitle: 1.5rem;
274
+ --mistica-font-weight-cardTitle: 700;
275
+ --mistica-font-weight-rowTitle: 500;
276
+ --mistica-font-weight-button: 500;
277
+ --mistica-font-size-tabsLabel: 1rem;
278
+ --mistica-line-height-tabsLabel: 1.5rem;
279
+ --mistica-font-weight-tabsLabel: 500;
280
+ --mistica-font-weight-link: 500;
281
+ --mistica-font-weight-title1: 500;
282
+ --mistica-font-weight-title2: 700;
283
+ --mistica-font-size-title3: 1.25rem;
284
+ --mistica-line-height-title3: 1.625rem;
285
+ --mistica-font-weight-title3: 700;
286
+ --mistica-font-weight-indicator: 500;
287
+ --mistica-font-weight-navigationBar: 500;
288
+ }
289
+
290
+ [data-mistica-skin='movistar-new'][data-mistica-color-scheme='dark'] {
291
+ --mistica-color-background: var(--mistica-movistar-new-darkModeBlack);
292
+ --mistica-color-backgroundAlternative: var(--mistica-movistar-new-darkModeBlack);
293
+ --mistica-color-backgroundBrand: var(--mistica-movistar-new-darkModeBlack);
294
+ --mistica-color-backgroundBrandSecondary: var(--mistica-movistar-new-darkModeBlack);
295
+ --mistica-color-backgroundContainer: var(--mistica-movistar-new-darkModeGrey);
296
+ --mistica-color-backgroundContainerError: var(--mistica-movistar-new-darkModeGrey);
297
+ --mistica-color-backgroundContainerHover: rgba(var(--mistica-movistar-new-raw-white), 0.08);
298
+ --mistica-color-backgroundContainerPressed: rgba(var(--mistica-movistar-new-raw-white), 0.08);
299
+ --mistica-color-backgroundContainerBrand: var(--mistica-movistar-new-darkModeGrey);
300
+ --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-movistar-new-raw-white), 0.03);
301
+ --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-movistar-new-raw-white), 0.05);
302
+ --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-movistar-new-darkModeGrey);
303
+ --mistica-color-backgroundContainerAlternative: var(--mistica-movistar-new-darkModeGrey);
304
+ --mistica-color-backgroundOverlay: rgba(var(--mistica-movistar-new-raw-darkModeGrey), 0.8);
305
+ --mistica-color-backgroundSkeleton: var(--mistica-movistar-new-grey600);
306
+ --mistica-color-backgroundSkeletonInverse: var(--mistica-movistar-new-grey600);
307
+ --mistica-color-backgroundBrandTop: var(--mistica-movistar-new-darkModeBlack);
308
+ --mistica-color-backgroundBrandBottom: var(--mistica-movistar-new-darkModeBlack);
309
+ --mistica-color-appBarBackground: var(--mistica-movistar-new-darkModeGrey);
310
+ --mistica-color-navigationBarBackground: var(--mistica-movistar-new-darkModeBlack);
311
+ --mistica-color-skeletonWave: var(--mistica-movistar-new-grey600);
312
+ --mistica-color-borderLow: var(--mistica-movistar-new-darkModeBlack);
313
+ --mistica-color-border: var(--mistica-movistar-new-darkModeGrey);
314
+ --mistica-color-borderHigh: var(--mistica-movistar-new-grey500);
315
+ --mistica-color-borderSelected: var(--mistica-movistar-new-darkModeMovistarBlue);
316
+ --mistica-color-coverBackgroundHover: rgba(var(--mistica-movistar-new-raw-darkModeBlack), 0.25);
317
+ --mistica-color-coverBackgroundPressed: rgba(var(--mistica-movistar-new-raw-darkModeBlack), 0.35);
318
+ --mistica-color-buttonDangerBackground: var(--mistica-movistar-new-red);
319
+ --mistica-color-buttonDangerBackgroundPressed: var(--mistica-movistar-new-redHigh);
320
+ --mistica-color-buttonDangerBackgroundHover: var(--mistica-movistar-new-redHigh);
321
+ --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-movistar-new-raw-white), 0);
322
+ --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-movistar-new-white);
323
+ --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-movistar-new-raw-white), 0.08);
324
+ --mistica-color-buttonLinkDangerBackgroundInversePressed: rgba(
325
+ var(--mistica-movistar-new-raw-white),
326
+ 0.08
327
+ );
328
+ --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-movistar-new-salmon100);
329
+ --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-movistar-new-raw-white), 0.08);
330
+ --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-movistar-new-raw-white), 0.08);
331
+ --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-movistar-new-raw-white), 0.2);
332
+ --mistica-color-buttonPrimaryBackground: var(--mistica-movistar-new-movistarBlue);
333
+ --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-movistar-new-movistarBlue);
334
+ --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-movistar-new-white);
335
+ --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-movistar-new-blueHigh);
336
+ --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-movistar-new-blue800);
337
+ --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-movistar-new-blue100);
338
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-movistar-new-blue800);
339
+ --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-movistar-new-blue800);
340
+ --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-movistar-new-blue100);
341
+ --mistica-color-buttonSecondaryBorder: var(--mistica-movistar-new-white);
342
+ --mistica-color-buttonSecondaryBorderInverse: var(--mistica-movistar-new-grey200);
343
+ --mistica-color-buttonSecondaryBorderMedia: var(--mistica-movistar-new-white);
344
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-movistar-new-white);
345
+ --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-movistar-new-grey200);
346
+ --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-movistar-new-white);
347
+ --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-movistar-new-raw-white), 0.15);
348
+ --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-movistar-new-raw-white), 0.15);
349
+ --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-movistar-new-raw-white), 0.2);
350
+ --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-movistar-new-raw-white), 0.25);
351
+ --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(
352
+ var(--mistica-movistar-new-raw-white),
353
+ 0.25
354
+ );
355
+ --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-movistar-new-raw-white), 0.3);
356
+ --mistica-color-textButtonPrimary: var(--mistica-movistar-new-white);
357
+ --mistica-color-textButtonPrimaryInverse: var(--mistica-movistar-new-white);
358
+ --mistica-color-textButtonPrimaryMedia: var(--mistica-movistar-new-movistarBlue);
359
+ --mistica-color-textButtonPrimaryInversePressed: var(--mistica-movistar-new-blueLight);
360
+ --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-movistar-new-blueHigh);
361
+ --mistica-color-textButtonSecondary: var(--mistica-movistar-new-grey200);
362
+ --mistica-color-textButtonSecondaryInverse: var(--mistica-movistar-new-grey200);
363
+ --mistica-color-textButtonSecondaryMedia: var(--mistica-movistar-new-white);
364
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-movistar-new-grey200);
365
+ --mistica-color-textButtonSecondaryInversePressed: var(--mistica-movistar-new-grey200);
366
+ --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-movistar-new-white);
367
+ --mistica-color-textLink: var(--mistica-movistar-new-darkModeMovistarBlue);
368
+ --mistica-color-textLinkInverse: var(--mistica-movistar-new-darkModeMovistarBlue);
369
+ --mistica-color-textLinkMedia: var(--mistica-movistar-new-white);
370
+ --mistica-color-textLinkDanger: var(--mistica-movistar-new-red350);
371
+ --mistica-color-textLinkDangerMedia: var(--mistica-movistar-new-red);
372
+ --mistica-color-textLinkSnackbar: var(--mistica-movistar-new-darkModeMovistarBlue);
373
+ --mistica-color-textActivated: var(--mistica-movistar-new-blue300);
374
+ --mistica-color-textBrand: var(--mistica-movistar-new-blue300);
375
+ --mistica-color-inputBorder: var(--mistica-movistar-new-grey400);
376
+ --mistica-color-inputBorderInverse: var(--mistica-movistar-new-grey400);
377
+ --mistica-color-completedStep: var(--mistica-movistar-new-blue800);
378
+ --mistica-color-completedStepInverse: var(--mistica-movistar-new-blue200);
379
+ --mistica-color-control: var(--mistica-movistar-new-grey400);
380
+ --mistica-color-controlActivated: var(--mistica-movistar-new-darkModeMovistarBlue);
381
+ --mistica-color-controlInverse: var(--mistica-movistar-new-grey400);
382
+ --mistica-color-controlActivatedInverse: var(--mistica-movistar-new-darkModeMovistarBlue);
383
+ --mistica-color-controlError: var(--mistica-movistar-new-red);
384
+ --mistica-color-barTrack: var(--mistica-movistar-new-grey600);
385
+ --mistica-color-barTrackInverse: var(--mistica-movistar-new-grey600);
386
+ --mistica-color-loadingBar: var(--mistica-movistar-new-darkModeMovistarBlue);
387
+ --mistica-color-loadingBarBackground: var(--mistica-movistar-new-grey600);
388
+ --mistica-color-toggleAndroidInactive: var(--mistica-movistar-new-grey200);
389
+ --mistica-color-toggleAndroidBackgroundActive: var(--mistica-movistar-new-blue300);
390
+ --mistica-color-iosControlKnob: var(--mistica-movistar-new-grey200);
391
+ --mistica-color-controlKnobInverse: var(--mistica-movistar-new-grey200);
392
+ --mistica-color-divider: rgba(var(--mistica-movistar-new-raw-movistarWhite), 0.1);
393
+ --mistica-color-dividerInverse: rgba(var(--mistica-movistar-new-raw-movistarWhite), 0.1);
394
+ --mistica-color-navigationBarDivider: var(--mistica-movistar-new-darkModeBlack);
395
+ --mistica-color-badge: var(--mistica-movistar-new-red);
396
+ --mistica-color-feedbackErrorBackground: var(--mistica-movistar-new-red);
397
+ --mistica-color-feedbackInfoBackground: var(--mistica-movistar-new-blueDark);
398
+ --mistica-color-brand: var(--mistica-movistar-new-darkModeMovistarBlue);
399
+ --mistica-color-brandHigh: var(--mistica-movistar-new-blueHigh);
400
+ --mistica-color-inverse: var(--mistica-movistar-new-grey200);
401
+ --mistica-color-neutralHigh: var(--mistica-movistar-new-grey200);
402
+ --mistica-color-neutralMedium: var(--mistica-movistar-new-grey500);
403
+ --mistica-color-neutralMediumInverse: var(--mistica-movistar-new-grey500);
404
+ --mistica-color-neutralLow: var(--mistica-movistar-new-grey700);
405
+ --mistica-color-neutralLowAlternative: var(--mistica-movistar-new-grey700);
406
+ --mistica-color-textPrimary: var(--mistica-movistar-new-movistarWhite);
407
+ --mistica-color-textPrimaryInverse: var(--mistica-movistar-new-movistarWhite);
408
+ --mistica-color-textPrimaryMedia: var(--mistica-movistar-new-white);
409
+ --mistica-color-textSecondary: var(--mistica-movistar-new-grey400);
410
+ --mistica-color-textSecondaryInverse: var(--mistica-movistar-new-grey400);
411
+ --mistica-color-textSecondaryMedia: var(--mistica-movistar-new-white);
412
+ --mistica-color-success: var(--mistica-movistar-new-emerald);
413
+ --mistica-color-warning: var(--mistica-movistar-new-yellow);
414
+ --mistica-color-error: var(--mistica-movistar-new-red350);
415
+ --mistica-color-textError: var(--mistica-movistar-new-red350);
416
+ --mistica-color-textErrorInverse: var(--mistica-movistar-new-red350);
417
+ --mistica-color-promo: var(--mistica-movistar-new-redHigh);
418
+ --mistica-color-highlight: var(--mistica-movistar-new-pink45);
419
+ --mistica-color-successLow: var(--mistica-movistar-new-grey700);
420
+ --mistica-color-warningLow: var(--mistica-movistar-new-grey700);
421
+ --mistica-color-errorLow: var(--mistica-movistar-new-grey700);
422
+ --mistica-color-promoLow: var(--mistica-movistar-new-grey700);
423
+ --mistica-color-brandLow: var(--mistica-movistar-new-blueDark);
424
+ --mistica-color-successHigh: var(--mistica-movistar-new-emeraldHigh);
425
+ --mistica-color-warningHigh: var(--mistica-movistar-new-yellow400);
426
+ --mistica-color-errorHigh: var(--mistica-movistar-new-redHigh);
427
+ --mistica-color-promoHigh: var(--mistica-movistar-new-redHigh);
428
+ --mistica-color-successHighInverse: var(--mistica-movistar-new-green700);
429
+ --mistica-color-warningHighInverse: var(--mistica-movistar-new-yellowHigh);
430
+ --mistica-color-errorHighInverse: var(--mistica-movistar-new-redHigh);
431
+ --mistica-color-promoHighInverse: var(--mistica-movistar-new-redHigh);
432
+ --mistica-color-textNavigationBarPrimary: var(--mistica-movistar-new-grey200);
433
+ --mistica-color-textNavigationBarSecondary: var(--mistica-movistar-new-grey400);
434
+ --mistica-color-textNavigationSearchBarHint: var(--mistica-movistar-new-grey400);
435
+ --mistica-color-textNavigationSearchBarText: var(--mistica-movistar-new-grey200);
436
+ --mistica-color-textAppBar: var(--mistica-movistar-new-grey400);
437
+ --mistica-color-textAppBarSelected: var(--mistica-movistar-new-movistarBlue);
438
+ --mistica-color-customTabsBackground: var(--mistica-movistar-new-darkModeBlack);
439
+ --mistica-color-tagTextPromo: var(--mistica-movistar-new-movistarWhite);
440
+ --mistica-color-tagTextActive: var(--mistica-movistar-new-blue300);
441
+ --mistica-color-tagTextInactive: var(--mistica-movistar-new-grey300);
442
+ --mistica-color-tagTextInfo: var(--mistica-movistar-new-blue300);
443
+ --mistica-color-tagTextSuccess: var(--mistica-movistar-new-green400);
444
+ --mistica-color-tagTextWarning: var(--mistica-movistar-new-yellow400);
445
+ --mistica-color-tagTextError: var(--mistica-movistar-new-red350);
446
+ --mistica-color-tagBackgroundPromo: var(--mistica-movistar-new-redHigh);
447
+ --mistica-color-tagBackgroundActive: var(--mistica-movistar-new-grey700);
448
+ --mistica-color-tagBackgroundInactive: var(--mistica-movistar-new-grey700);
449
+ --mistica-color-tagBackgroundInfo: var(--mistica-movistar-new-grey700);
450
+ --mistica-color-tagBackgroundSuccess: var(--mistica-movistar-new-grey700);
451
+ --mistica-color-tagBackgroundWarning: var(--mistica-movistar-new-grey700);
452
+ --mistica-color-tagBackgroundError: var(--mistica-movistar-new-grey700);
453
+ --mistica-color-tagTextPromoInverse: var(--mistica-movistar-new-movistarWhite);
454
+ --mistica-color-tagTextActiveInverse: var(--mistica-movistar-new-blue300);
455
+ --mistica-color-tagTextInactiveInverse: var(--mistica-movistar-new-grey300);
456
+ --mistica-color-tagTextInfoInverse: var(--mistica-movistar-new-blue300);
457
+ --mistica-color-tagTextSuccessInverse: var(--mistica-movistar-new-green400);
458
+ --mistica-color-tagTextWarningInverse: var(--mistica-movistar-new-yellow400);
459
+ --mistica-color-tagTextErrorInverse: var(--mistica-movistar-new-red350);
460
+ --mistica-color-tagBackgroundPromoInverse: var(--mistica-movistar-new-redHigh);
461
+ --mistica-color-tagBackgroundActiveInverse: var(--mistica-movistar-new-grey700);
462
+ --mistica-color-tagBackgroundInactiveInverse: var(--mistica-movistar-new-grey700);
463
+ --mistica-color-tagBackgroundInfoInverse: var(--mistica-movistar-new-grey700);
464
+ --mistica-color-tagBackgroundSuccessInverse: var(--mistica-movistar-new-grey700);
465
+ --mistica-color-tagBackgroundWarningInverse: var(--mistica-movistar-new-grey700);
466
+ --mistica-color-tagBackgroundErrorInverse: var(--mistica-movistar-new-grey700);
467
+ --mistica-color-cardContentOverlay: linear-gradient(
468
+ 180deg,
469
+ rgba(var(--mistica-movistar-new-raw-black), 0) 0%,
470
+ rgba(var(--mistica-movistar-new-raw-black), 0.4) 30%,
471
+ rgba(var(--mistica-movistar-new-raw-black), 0.7) 100%
472
+ );
473
+ --mistica-color-cardFooterOverlay: rgba(var(--mistica-movistar-new-raw-black), 0.7);
474
+ }
475
+
476
+ @media (prefers-color-scheme: dark) {
477
+ [data-mistica-skin='movistar-new'] {
478
+ --mistica-color-background: var(--mistica-movistar-new-darkModeBlack);
479
+ --mistica-color-backgroundAlternative: var(--mistica-movistar-new-darkModeBlack);
480
+ --mistica-color-backgroundBrand: var(--mistica-movistar-new-darkModeBlack);
481
+ --mistica-color-backgroundBrandSecondary: var(--mistica-movistar-new-darkModeBlack);
482
+ --mistica-color-backgroundContainer: var(--mistica-movistar-new-darkModeGrey);
483
+ --mistica-color-backgroundContainerError: var(--mistica-movistar-new-darkModeGrey);
484
+ --mistica-color-backgroundContainerHover: rgba(var(--mistica-movistar-new-raw-white), 0.08);
485
+ --mistica-color-backgroundContainerPressed: rgba(var(--mistica-movistar-new-raw-white), 0.08);
486
+ --mistica-color-backgroundContainerBrand: var(--mistica-movistar-new-darkModeGrey);
487
+ --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-movistar-new-raw-white), 0.03);
488
+ --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-movistar-new-raw-white), 0.05);
489
+ --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-movistar-new-darkModeGrey);
490
+ --mistica-color-backgroundContainerAlternative: var(--mistica-movistar-new-darkModeGrey);
491
+ --mistica-color-backgroundOverlay: rgba(var(--mistica-movistar-new-raw-darkModeGrey), 0.8);
492
+ --mistica-color-backgroundSkeleton: var(--mistica-movistar-new-grey600);
493
+ --mistica-color-backgroundSkeletonInverse: var(--mistica-movistar-new-grey600);
494
+ --mistica-color-backgroundBrandTop: var(--mistica-movistar-new-darkModeBlack);
495
+ --mistica-color-backgroundBrandBottom: var(--mistica-movistar-new-darkModeBlack);
496
+ --mistica-color-appBarBackground: var(--mistica-movistar-new-darkModeGrey);
497
+ --mistica-color-navigationBarBackground: var(--mistica-movistar-new-darkModeBlack);
498
+ --mistica-color-skeletonWave: var(--mistica-movistar-new-grey600);
499
+ --mistica-color-borderLow: var(--mistica-movistar-new-darkModeBlack);
500
+ --mistica-color-border: var(--mistica-movistar-new-darkModeGrey);
501
+ --mistica-color-borderHigh: var(--mistica-movistar-new-grey500);
502
+ --mistica-color-borderSelected: var(--mistica-movistar-new-darkModeMovistarBlue);
503
+ --mistica-color-coverBackgroundHover: rgba(var(--mistica-movistar-new-raw-darkModeBlack), 0.25);
504
+ --mistica-color-coverBackgroundPressed: rgba(var(--mistica-movistar-new-raw-darkModeBlack), 0.35);
505
+ --mistica-color-buttonDangerBackground: var(--mistica-movistar-new-red);
506
+ --mistica-color-buttonDangerBackgroundPressed: var(--mistica-movistar-new-redHigh);
507
+ --mistica-color-buttonDangerBackgroundHover: var(--mistica-movistar-new-redHigh);
508
+ --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-movistar-new-raw-white), 0);
509
+ --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-movistar-new-white);
510
+ --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-movistar-new-raw-white), 0.08);
511
+ --mistica-color-buttonLinkDangerBackgroundInversePressed: rgba(
512
+ var(--mistica-movistar-new-raw-white),
513
+ 0.08
514
+ );
515
+ --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-movistar-new-salmon100);
516
+ --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-movistar-new-raw-white), 0.08);
517
+ --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-movistar-new-raw-white), 0.08);
518
+ --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-movistar-new-raw-white), 0.2);
519
+ --mistica-color-buttonPrimaryBackground: var(--mistica-movistar-new-movistarBlue);
520
+ --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-movistar-new-movistarBlue);
521
+ --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-movistar-new-white);
522
+ --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-movistar-new-blueHigh);
523
+ --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-movistar-new-blue800);
524
+ --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-movistar-new-blue100);
525
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-movistar-new-blue800);
526
+ --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-movistar-new-blue800);
527
+ --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-movistar-new-blue100);
528
+ --mistica-color-buttonSecondaryBorder: var(--mistica-movistar-new-white);
529
+ --mistica-color-buttonSecondaryBorderInverse: var(--mistica-movistar-new-grey200);
530
+ --mistica-color-buttonSecondaryBorderMedia: var(--mistica-movistar-new-white);
531
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-movistar-new-white);
532
+ --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-movistar-new-grey200);
533
+ --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-movistar-new-white);
534
+ --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-movistar-new-raw-white), 0.15);
535
+ --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(
536
+ var(--mistica-movistar-new-raw-white),
537
+ 0.15
538
+ );
539
+ --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-movistar-new-raw-white), 0.2);
540
+ --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-movistar-new-raw-white), 0.25);
541
+ --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(
542
+ var(--mistica-movistar-new-raw-white),
543
+ 0.25
544
+ );
545
+ --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(
546
+ var(--mistica-movistar-new-raw-white),
547
+ 0.3
548
+ );
549
+ --mistica-color-textButtonPrimary: var(--mistica-movistar-new-white);
550
+ --mistica-color-textButtonPrimaryInverse: var(--mistica-movistar-new-white);
551
+ --mistica-color-textButtonPrimaryMedia: var(--mistica-movistar-new-movistarBlue);
552
+ --mistica-color-textButtonPrimaryInversePressed: var(--mistica-movistar-new-blueLight);
553
+ --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-movistar-new-blueHigh);
554
+ --mistica-color-textButtonSecondary: var(--mistica-movistar-new-grey200);
555
+ --mistica-color-textButtonSecondaryInverse: var(--mistica-movistar-new-grey200);
556
+ --mistica-color-textButtonSecondaryMedia: var(--mistica-movistar-new-white);
557
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-movistar-new-grey200);
558
+ --mistica-color-textButtonSecondaryInversePressed: var(--mistica-movistar-new-grey200);
559
+ --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-movistar-new-white);
560
+ --mistica-color-textLink: var(--mistica-movistar-new-darkModeMovistarBlue);
561
+ --mistica-color-textLinkInverse: var(--mistica-movistar-new-darkModeMovistarBlue);
562
+ --mistica-color-textLinkMedia: var(--mistica-movistar-new-white);
563
+ --mistica-color-textLinkDanger: var(--mistica-movistar-new-red350);
564
+ --mistica-color-textLinkDangerMedia: var(--mistica-movistar-new-red);
565
+ --mistica-color-textLinkSnackbar: var(--mistica-movistar-new-darkModeMovistarBlue);
566
+ --mistica-color-textActivated: var(--mistica-movistar-new-blue300);
567
+ --mistica-color-textBrand: var(--mistica-movistar-new-blue300);
568
+ --mistica-color-inputBorder: var(--mistica-movistar-new-grey400);
569
+ --mistica-color-inputBorderInverse: var(--mistica-movistar-new-grey400);
570
+ --mistica-color-completedStep: var(--mistica-movistar-new-blue800);
571
+ --mistica-color-completedStepInverse: var(--mistica-movistar-new-blue200);
572
+ --mistica-color-control: var(--mistica-movistar-new-grey400);
573
+ --mistica-color-controlActivated: var(--mistica-movistar-new-darkModeMovistarBlue);
574
+ --mistica-color-controlInverse: var(--mistica-movistar-new-grey400);
575
+ --mistica-color-controlActivatedInverse: var(--mistica-movistar-new-darkModeMovistarBlue);
576
+ --mistica-color-controlError: var(--mistica-movistar-new-red);
577
+ --mistica-color-barTrack: var(--mistica-movistar-new-grey600);
578
+ --mistica-color-barTrackInverse: var(--mistica-movistar-new-grey600);
579
+ --mistica-color-loadingBar: var(--mistica-movistar-new-darkModeMovistarBlue);
580
+ --mistica-color-loadingBarBackground: var(--mistica-movistar-new-grey600);
581
+ --mistica-color-toggleAndroidInactive: var(--mistica-movistar-new-grey200);
582
+ --mistica-color-toggleAndroidBackgroundActive: var(--mistica-movistar-new-blue300);
583
+ --mistica-color-iosControlKnob: var(--mistica-movistar-new-grey200);
584
+ --mistica-color-controlKnobInverse: var(--mistica-movistar-new-grey200);
585
+ --mistica-color-divider: rgba(var(--mistica-movistar-new-raw-movistarWhite), 0.1);
586
+ --mistica-color-dividerInverse: rgba(var(--mistica-movistar-new-raw-movistarWhite), 0.1);
587
+ --mistica-color-navigationBarDivider: var(--mistica-movistar-new-darkModeBlack);
588
+ --mistica-color-badge: var(--mistica-movistar-new-red);
589
+ --mistica-color-feedbackErrorBackground: var(--mistica-movistar-new-red);
590
+ --mistica-color-feedbackInfoBackground: var(--mistica-movistar-new-blueDark);
591
+ --mistica-color-brand: var(--mistica-movistar-new-darkModeMovistarBlue);
592
+ --mistica-color-brandHigh: var(--mistica-movistar-new-blueHigh);
593
+ --mistica-color-inverse: var(--mistica-movistar-new-grey200);
594
+ --mistica-color-neutralHigh: var(--mistica-movistar-new-grey200);
595
+ --mistica-color-neutralMedium: var(--mistica-movistar-new-grey500);
596
+ --mistica-color-neutralMediumInverse: var(--mistica-movistar-new-grey500);
597
+ --mistica-color-neutralLow: var(--mistica-movistar-new-grey700);
598
+ --mistica-color-neutralLowAlternative: var(--mistica-movistar-new-grey700);
599
+ --mistica-color-textPrimary: var(--mistica-movistar-new-movistarWhite);
600
+ --mistica-color-textPrimaryInverse: var(--mistica-movistar-new-movistarWhite);
601
+ --mistica-color-textPrimaryMedia: var(--mistica-movistar-new-white);
602
+ --mistica-color-textSecondary: var(--mistica-movistar-new-grey400);
603
+ --mistica-color-textSecondaryInverse: var(--mistica-movistar-new-grey400);
604
+ --mistica-color-textSecondaryMedia: var(--mistica-movistar-new-white);
605
+ --mistica-color-success: var(--mistica-movistar-new-emerald);
606
+ --mistica-color-warning: var(--mistica-movistar-new-yellow);
607
+ --mistica-color-error: var(--mistica-movistar-new-red350);
608
+ --mistica-color-textError: var(--mistica-movistar-new-red350);
609
+ --mistica-color-textErrorInverse: var(--mistica-movistar-new-red350);
610
+ --mistica-color-promo: var(--mistica-movistar-new-redHigh);
611
+ --mistica-color-highlight: var(--mistica-movistar-new-pink45);
612
+ --mistica-color-successLow: var(--mistica-movistar-new-grey700);
613
+ --mistica-color-warningLow: var(--mistica-movistar-new-grey700);
614
+ --mistica-color-errorLow: var(--mistica-movistar-new-grey700);
615
+ --mistica-color-promoLow: var(--mistica-movistar-new-grey700);
616
+ --mistica-color-brandLow: var(--mistica-movistar-new-blueDark);
617
+ --mistica-color-successHigh: var(--mistica-movistar-new-emeraldHigh);
618
+ --mistica-color-warningHigh: var(--mistica-movistar-new-yellow400);
619
+ --mistica-color-errorHigh: var(--mistica-movistar-new-redHigh);
620
+ --mistica-color-promoHigh: var(--mistica-movistar-new-redHigh);
621
+ --mistica-color-successHighInverse: var(--mistica-movistar-new-green700);
622
+ --mistica-color-warningHighInverse: var(--mistica-movistar-new-yellowHigh);
623
+ --mistica-color-errorHighInverse: var(--mistica-movistar-new-redHigh);
624
+ --mistica-color-promoHighInverse: var(--mistica-movistar-new-redHigh);
625
+ --mistica-color-textNavigationBarPrimary: var(--mistica-movistar-new-grey200);
626
+ --mistica-color-textNavigationBarSecondary: var(--mistica-movistar-new-grey400);
627
+ --mistica-color-textNavigationSearchBarHint: var(--mistica-movistar-new-grey400);
628
+ --mistica-color-textNavigationSearchBarText: var(--mistica-movistar-new-grey200);
629
+ --mistica-color-textAppBar: var(--mistica-movistar-new-grey400);
630
+ --mistica-color-textAppBarSelected: var(--mistica-movistar-new-movistarBlue);
631
+ --mistica-color-customTabsBackground: var(--mistica-movistar-new-darkModeBlack);
632
+ --mistica-color-tagTextPromo: var(--mistica-movistar-new-movistarWhite);
633
+ --mistica-color-tagTextActive: var(--mistica-movistar-new-blue300);
634
+ --mistica-color-tagTextInactive: var(--mistica-movistar-new-grey300);
635
+ --mistica-color-tagTextInfo: var(--mistica-movistar-new-blue300);
636
+ --mistica-color-tagTextSuccess: var(--mistica-movistar-new-green400);
637
+ --mistica-color-tagTextWarning: var(--mistica-movistar-new-yellow400);
638
+ --mistica-color-tagTextError: var(--mistica-movistar-new-red350);
639
+ --mistica-color-tagBackgroundPromo: var(--mistica-movistar-new-redHigh);
640
+ --mistica-color-tagBackgroundActive: var(--mistica-movistar-new-grey700);
641
+ --mistica-color-tagBackgroundInactive: var(--mistica-movistar-new-grey700);
642
+ --mistica-color-tagBackgroundInfo: var(--mistica-movistar-new-grey700);
643
+ --mistica-color-tagBackgroundSuccess: var(--mistica-movistar-new-grey700);
644
+ --mistica-color-tagBackgroundWarning: var(--mistica-movistar-new-grey700);
645
+ --mistica-color-tagBackgroundError: var(--mistica-movistar-new-grey700);
646
+ --mistica-color-tagTextPromoInverse: var(--mistica-movistar-new-movistarWhite);
647
+ --mistica-color-tagTextActiveInverse: var(--mistica-movistar-new-blue300);
648
+ --mistica-color-tagTextInactiveInverse: var(--mistica-movistar-new-grey300);
649
+ --mistica-color-tagTextInfoInverse: var(--mistica-movistar-new-blue300);
650
+ --mistica-color-tagTextSuccessInverse: var(--mistica-movistar-new-green400);
651
+ --mistica-color-tagTextWarningInverse: var(--mistica-movistar-new-yellow400);
652
+ --mistica-color-tagTextErrorInverse: var(--mistica-movistar-new-red350);
653
+ --mistica-color-tagBackgroundPromoInverse: var(--mistica-movistar-new-redHigh);
654
+ --mistica-color-tagBackgroundActiveInverse: var(--mistica-movistar-new-grey700);
655
+ --mistica-color-tagBackgroundInactiveInverse: var(--mistica-movistar-new-grey700);
656
+ --mistica-color-tagBackgroundInfoInverse: var(--mistica-movistar-new-grey700);
657
+ --mistica-color-tagBackgroundSuccessInverse: var(--mistica-movistar-new-grey700);
658
+ --mistica-color-tagBackgroundWarningInverse: var(--mistica-movistar-new-grey700);
659
+ --mistica-color-tagBackgroundErrorInverse: var(--mistica-movistar-new-grey700);
660
+ --mistica-color-cardContentOverlay: linear-gradient(
661
+ 180deg,
662
+ rgba(var(--mistica-movistar-new-raw-black), 0) 0%,
663
+ rgba(var(--mistica-movistar-new-raw-black), 0.4) 30%,
664
+ rgba(var(--mistica-movistar-new-raw-black), 0.7) 100%
665
+ );
666
+ --mistica-color-cardFooterOverlay: rgba(var(--mistica-movistar-new-raw-black), 0.7);
667
+ }
668
+
669
+ [data-mistica-skin='movistar-new'][data-mistica-color-scheme='light'] {
670
+ --mistica-color-background: var(--mistica-movistar-new-white);
671
+ --mistica-color-backgroundAlternative: var(--mistica-movistar-new-movistarWhite);
672
+ --mistica-color-backgroundBrand: var(--mistica-movistar-new-movistarBlue);
673
+ --mistica-color-backgroundBrandSecondary: var(--mistica-movistar-new-movistarBlack);
674
+ --mistica-color-backgroundContainer: var(--mistica-movistar-new-white);
675
+ --mistica-color-backgroundContainerError: var(--mistica-movistar-new-salmon100);
676
+ --mistica-color-backgroundContainerHover: rgba(var(--mistica-movistar-new-raw-movistarBlack), 0.02);
677
+ --mistica-color-backgroundContainerPressed: rgba(var(--mistica-movistar-new-raw-movistarBlack), 0.02);
678
+ --mistica-color-backgroundContainerBrand: var(--mistica-movistar-new-movistarBlue);
679
+ --mistica-color-backgroundContainerBrandHover: rgba(
680
+ var(--mistica-movistar-new-raw-movistarBlack),
681
+ 0.1
682
+ );
683
+ --mistica-color-backgroundContainerBrandPressed: rgba(
684
+ var(--mistica-movistar-new-raw-movistarBlack),
685
+ 0.2
686
+ );
687
+ --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-movistar-new-blue800);
688
+ --mistica-color-backgroundContainerAlternative: var(--mistica-movistar-new-grey100);
689
+ --mistica-color-backgroundOverlay: rgba(var(--mistica-movistar-new-raw-movistarBlack), 0.6);
690
+ --mistica-color-backgroundSkeleton: var(--mistica-movistar-new-grey200);
691
+ --mistica-color-backgroundSkeletonInverse: var(--mistica-movistar-new-blue800);
692
+ --mistica-color-backgroundBrandTop: var(--mistica-movistar-new-movistarBlue);
693
+ --mistica-color-backgroundBrandBottom: var(--mistica-movistar-new-movistarBlue);
694
+ --mistica-color-appBarBackground: var(--mistica-movistar-new-white);
695
+ --mistica-color-navigationBarBackground: var(--mistica-movistar-new-movistarBlue);
696
+ --mistica-color-skeletonWave: var(--mistica-movistar-new-grey200);
697
+ --mistica-color-borderLow: var(--mistica-movistar-new-grey100);
698
+ --mistica-color-border: var(--mistica-movistar-new-grey300);
699
+ --mistica-color-borderHigh: var(--mistica-movistar-new-grey600);
700
+ --mistica-color-borderSelected: var(--mistica-movistar-new-blue800);
701
+ --mistica-color-coverBackgroundHover: rgba(var(--mistica-movistar-new-raw-movistarBlack), 0.25);
702
+ --mistica-color-coverBackgroundPressed: rgba(var(--mistica-movistar-new-raw-movistarBlack), 0.35);
703
+ --mistica-color-buttonDangerBackground: var(--mistica-movistar-new-red);
704
+ --mistica-color-buttonDangerBackgroundPressed: var(--mistica-movistar-new-redHigh);
705
+ --mistica-color-buttonDangerBackgroundHover: var(--mistica-movistar-new-redHigh);
706
+ --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-movistar-new-white);
707
+ --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-movistar-new-white);
708
+ --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-movistar-new-salmon100);
709
+ --mistica-color-buttonLinkDangerBackgroundInversePressed: var(--mistica-movistar-new-salmon100);
710
+ --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-movistar-new-salmon100);
711
+ --mistica-color-buttonLinkBackgroundPressed: var(--mistica-movistar-new-blue100);
712
+ --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-movistar-new-raw-white), 0.3);
713
+ --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-movistar-new-raw-white), 0.3);
714
+ --mistica-color-buttonPrimaryBackground: var(--mistica-movistar-new-movistarBlue);
715
+ --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-movistar-new-white);
716
+ --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-movistar-new-white);
717
+ --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-movistar-new-blueHigh);
718
+ --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-movistar-new-blue100);
719
+ --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-movistar-new-blue100);
720
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-movistar-new-blueHigh);
721
+ --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-movistar-new-blue100);
722
+ --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-movistar-new-blue100);
723
+ --mistica-color-buttonSecondaryBorder: var(--mistica-movistar-new-movistarBlue);
724
+ --mistica-color-buttonSecondaryBorderInverse: var(--mistica-movistar-new-white);
725
+ --mistica-color-buttonSecondaryBorderMedia: var(--mistica-movistar-new-white);
726
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-movistar-new-blue800);
727
+ --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-movistar-new-white);
728
+ --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-movistar-new-white);
729
+ --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-movistar-new-blue100);
730
+ --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(
731
+ var(--mistica-movistar-new-raw-white),
732
+ 0.2
733
+ );
734
+ --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-movistar-new-raw-white), 0.2);
735
+ --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-movistar-new-blue100);
736
+ --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(
737
+ var(--mistica-movistar-new-raw-white),
738
+ 0.3
739
+ );
740
+ --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(
741
+ var(--mistica-movistar-new-raw-white),
742
+ 0.3
743
+ );
744
+ --mistica-color-textButtonPrimary: var(--mistica-movistar-new-white);
745
+ --mistica-color-textButtonPrimaryInverse: var(--mistica-movistar-new-movistarBlue);
746
+ --mistica-color-textButtonPrimaryMedia: var(--mistica-movistar-new-movistarBlue);
747
+ --mistica-color-textButtonPrimaryInversePressed: var(--mistica-movistar-new-blue800);
748
+ --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-movistar-new-blueHigh);
749
+ --mistica-color-textButtonSecondary: var(--mistica-movistar-new-movistarBlue);
750
+ --mistica-color-textButtonSecondaryInverse: var(--mistica-movistar-new-white);
751
+ --mistica-color-textButtonSecondaryMedia: var(--mistica-movistar-new-white);
752
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-movistar-new-blue800);
753
+ --mistica-color-textButtonSecondaryInversePressed: var(--mistica-movistar-new-white);
754
+ --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-movistar-new-white);
755
+ --mistica-color-textLink: var(--mistica-movistar-new-movistarBlue);
756
+ --mistica-color-textLinkInverse: var(--mistica-movistar-new-white);
757
+ --mistica-color-textLinkMedia: var(--mistica-movistar-new-white);
758
+ --mistica-color-textLinkDanger: var(--mistica-movistar-new-red);
759
+ --mistica-color-textLinkDangerMedia: var(--mistica-movistar-new-red);
760
+ --mistica-color-textLinkSnackbar: var(--mistica-movistar-new-blue300);
761
+ --mistica-color-textActivated: var(--mistica-movistar-new-blueHigh);
762
+ --mistica-color-textBrand: var(--mistica-movistar-new-blueHigh);
763
+ --mistica-color-inputBorder: var(--mistica-movistar-new-grey500);
764
+ --mistica-color-inputBorderInverse: var(--mistica-movistar-new-white);
765
+ --mistica-color-completedStep: var(--mistica-movistar-new-movistarBlue);
766
+ --mistica-color-completedStepInverse: var(--mistica-movistar-new-blue200);
767
+ --mistica-color-control: var(--mistica-movistar-new-grey500);
768
+ --mistica-color-controlActivated: var(--mistica-movistar-new-movistarBlue);
769
+ --mistica-color-controlInverse: var(--mistica-movistar-new-blueLight);
770
+ --mistica-color-controlActivatedInverse: var(--mistica-movistar-new-white);
771
+ --mistica-color-controlError: var(--mistica-movistar-new-red);
772
+ --mistica-color-barTrack: var(--mistica-movistar-new-grey300);
773
+ --mistica-color-barTrackInverse: rgba(var(--mistica-movistar-new-raw-movistarBlack), 0.14);
774
+ --mistica-color-loadingBar: var(--mistica-movistar-new-blueLight);
775
+ --mistica-color-loadingBarBackground: var(--mistica-movistar-new-blueHigh);
776
+ --mistica-color-toggleAndroidInactive: var(--mistica-movistar-new-grey200);
777
+ --mistica-color-toggleAndroidBackgroundActive: var(--mistica-movistar-new-blue300);
778
+ --mistica-color-iosControlKnob: var(--mistica-movistar-new-white);
779
+ --mistica-color-controlKnobInverse: var(--mistica-movistar-new-movistarBlue);
780
+ --mistica-color-divider: var(--mistica-movistar-new-grey300);
781
+ --mistica-color-dividerInverse: rgba(var(--mistica-movistar-new-raw-white), 0.2);
782
+ --mistica-color-navigationBarDivider: var(--mistica-movistar-new-movistarBlue);
783
+ --mistica-color-badge: var(--mistica-movistar-new-red);
784
+ --mistica-color-feedbackErrorBackground: var(--mistica-movistar-new-red);
785
+ --mistica-color-feedbackInfoBackground: var(--mistica-movistar-new-blueDark);
786
+ --mistica-color-brand: var(--mistica-movistar-new-movistarBlue);
787
+ --mistica-color-brandHigh: var(--mistica-movistar-new-blue800);
788
+ --mistica-color-inverse: var(--mistica-movistar-new-white);
789
+ --mistica-color-neutralHigh: var(--mistica-movistar-new-movistarBlack);
790
+ --mistica-color-neutralMedium: var(--mistica-movistar-new-grey600);
791
+ --mistica-color-neutralMediumInverse: var(--mistica-movistar-new-grey600);
792
+ --mistica-color-neutralLow: var(--mistica-movistar-new-grey100);
793
+ --mistica-color-neutralLowAlternative: var(--mistica-movistar-new-grey200);
794
+ --mistica-color-textPrimary: var(--mistica-movistar-new-movistarBlack);
795
+ --mistica-color-textPrimaryInverse: var(--mistica-movistar-new-white);
796
+ --mistica-color-textPrimaryMedia: var(--mistica-movistar-new-white);
797
+ --mistica-color-textSecondary: var(--mistica-movistar-new-grey600);
798
+ --mistica-color-textSecondaryInverse: var(--mistica-movistar-new-movistarWhite);
799
+ --mistica-color-textSecondaryMedia: var(--mistica-movistar-new-movistarWhite);
800
+ --mistica-color-success: var(--mistica-movistar-new-emerald);
801
+ --mistica-color-warning: var(--mistica-movistar-new-yellow600);
802
+ --mistica-color-error: var(--mistica-movistar-new-red);
803
+ --mistica-color-textError: var(--mistica-movistar-new-red);
804
+ --mistica-color-textErrorInverse: var(--mistica-movistar-new-white);
805
+ --mistica-color-promo: var(--mistica-movistar-new-redHigh);
806
+ --mistica-color-highlight: var(--mistica-movistar-new-pink55);
807
+ --mistica-color-successLow: var(--mistica-movistar-new-green200);
808
+ --mistica-color-warningLow: var(--mistica-movistar-new-yellow200);
809
+ --mistica-color-errorLow: var(--mistica-movistar-new-salmon100);
810
+ --mistica-color-promoLow: var(--mistica-movistar-new-salmon100);
811
+ --mistica-color-brandLow: var(--mistica-movistar-new-blue100);
812
+ --mistica-color-successHigh: var(--mistica-movistar-new-green700);
813
+ --mistica-color-warningHigh: var(--mistica-movistar-new-yellowHigh);
814
+ --mistica-color-errorHigh: var(--mistica-movistar-new-redHigh);
815
+ --mistica-color-promoHigh: var(--mistica-movistar-new-redHigh);
816
+ --mistica-color-successHighInverse: var(--mistica-movistar-new-emeraldHigh);
817
+ --mistica-color-warningHighInverse: var(--mistica-movistar-new-yellowHigh);
818
+ --mistica-color-errorHighInverse: var(--mistica-movistar-new-redHigh);
819
+ --mistica-color-promoHighInverse: var(--mistica-movistar-new-redHigh);
820
+ --mistica-color-textNavigationBarPrimary: var(--mistica-movistar-new-white);
821
+ --mistica-color-textNavigationBarSecondary: var(--mistica-movistar-new-blue300);
822
+ --mistica-color-textNavigationSearchBarHint: var(--mistica-movistar-new-blue300);
823
+ --mistica-color-textNavigationSearchBarText: var(--mistica-movistar-new-white);
824
+ --mistica-color-textAppBar: var(--mistica-movistar-new-grey600);
825
+ --mistica-color-textAppBarSelected: var(--mistica-movistar-new-blue800);
826
+ --mistica-color-customTabsBackground: var(--mistica-movistar-new-white);
827
+ --mistica-color-tagTextPromo: var(--mistica-movistar-new-white);
828
+ --mistica-color-tagTextActive: var(--mistica-movistar-new-blueHigh);
829
+ --mistica-color-tagTextInactive: var(--mistica-movistar-new-grey600);
830
+ --mistica-color-tagTextInfo: var(--mistica-movistar-new-blueHigh);
831
+ --mistica-color-tagTextSuccess: var(--mistica-movistar-new-emeraldHigh);
832
+ --mistica-color-tagTextWarning: var(--mistica-movistar-new-yellowHigh);
833
+ --mistica-color-tagTextError: var(--mistica-movistar-new-redHigh);
834
+ --mistica-color-tagBackgroundPromo: var(--mistica-movistar-new-redHigh);
835
+ --mistica-color-tagBackgroundActive: var(--mistica-movistar-new-blue100);
836
+ --mistica-color-tagBackgroundInactive: var(--mistica-movistar-new-grey200);
837
+ --mistica-color-tagBackgroundInfo: var(--mistica-movistar-new-blue100);
838
+ --mistica-color-tagBackgroundSuccess: var(--mistica-movistar-new-green200);
839
+ --mistica-color-tagBackgroundWarning: var(--mistica-movistar-new-yellowLight);
840
+ --mistica-color-tagBackgroundError: var(--mistica-movistar-new-salmon200);
841
+ --mistica-color-tagTextPromoInverse: var(--mistica-movistar-new-redHigh);
842
+ --mistica-color-tagTextActiveInverse: var(--mistica-movistar-new-blueHigh);
843
+ --mistica-color-tagTextInactiveInverse: var(--mistica-movistar-new-grey600);
844
+ --mistica-color-tagTextInfoInverse: var(--mistica-movistar-new-blueHigh);
845
+ --mistica-color-tagTextSuccessInverse: var(--mistica-movistar-new-green700);
846
+ --mistica-color-tagTextWarningInverse: var(--mistica-movistar-new-yellowHigh);
847
+ --mistica-color-tagTextErrorInverse: var(--mistica-movistar-new-redHigh);
848
+ --mistica-color-tagBackgroundPromoInverse: var(--mistica-movistar-new-white);
849
+ --mistica-color-tagBackgroundActiveInverse: var(--mistica-movistar-new-white);
850
+ --mistica-color-tagBackgroundInactiveInverse: var(--mistica-movistar-new-white);
851
+ --mistica-color-tagBackgroundInfoInverse: var(--mistica-movistar-new-white);
852
+ --mistica-color-tagBackgroundSuccessInverse: var(--mistica-movistar-new-white);
853
+ --mistica-color-tagBackgroundWarningInverse: var(--mistica-movistar-new-white);
854
+ --mistica-color-tagBackgroundErrorInverse: var(--mistica-movistar-new-white);
855
+ --mistica-color-cardContentOverlay: linear-gradient(
856
+ 180deg,
857
+ rgba(var(--mistica-movistar-new-raw-black), 0) 0%,
858
+ rgba(var(--mistica-movistar-new-raw-black), 0.4) 30%,
859
+ rgba(var(--mistica-movistar-new-raw-black), 0.7) 100%
860
+ );
861
+ --mistica-color-cardFooterOverlay: rgba(var(--mistica-movistar-new-raw-black), 0.7);
862
+ }
863
+ }
864
+
865
+ @media (min-width: 1024px) {
866
+ [data-mistica-skin='movistar-new'] {
867
+ /* Text */
868
+ --mistica-font-size-1: 0.875rem;
869
+ --mistica-line-height-1: 1.25rem;
870
+ --mistica-font-size-2: 1rem;
871
+ --mistica-line-height-2: 1.375rem;
872
+ --mistica-font-size-3: 1.125rem;
873
+ --mistica-line-height-3: 1.5rem;
874
+ --mistica-font-size-4: 1.25rem;
875
+ --mistica-line-height-4: 1.625rem;
876
+ --mistica-font-size-5: 1.5rem;
877
+ --mistica-line-height-5: 1.75rem;
878
+ --mistica-font-size-6: 1.75rem;
879
+ --mistica-line-height-6: 2rem;
880
+ --mistica-font-size-7: 2rem;
881
+ --mistica-line-height-7: 2.375rem;
882
+ --mistica-font-size-8: 2.5rem;
883
+ --mistica-line-height-8: 3rem;
884
+ --mistica-font-size-9: 3rem;
885
+ --mistica-line-height-9: 3.5rem;
886
+ --mistica-font-size-10: 3.5rem;
887
+ --mistica-line-height-10: 4rem;
888
+ --mistica-font-size-cardTitle: 1.5rem;
889
+ --mistica-line-height-cardTitle: 1.75rem;
890
+
891
+ --mistica-font-size-tabsLabel: 1.125rem;
892
+ --mistica-line-height-tabsLabel: 1.5rem;
893
+
894
+ --mistica-font-size-title3: 1.5rem;
895
+ --mistica-line-height-title3: 1.75rem;
896
+ }
897
+ }