@telefonica/mistica 16.11.2 → 16.13.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 (213) hide show
  1. package/css/blau.css +59 -12
  2. package/css/mistica.css +1 -1
  3. package/css/movistar.css +78 -35
  4. package/css/o2-new.css +60 -11
  5. package/css/o2.css +56 -8
  6. package/css/telefonica.css +60 -9
  7. package/css/tu.css +56 -8
  8. package/css/vivo-new.css +58 -10
  9. package/css/vivo.css +56 -8
  10. package/dist/accordion.css-mistica.js +10 -10
  11. package/dist/align.css-mistica.js +1 -1
  12. package/dist/avatar.css-mistica.js +2 -2
  13. package/dist/badge.css-mistica.js +4 -4
  14. package/dist/box.css-mistica.js +13 -13
  15. package/dist/boxed.css-mistica.js +24 -24
  16. package/dist/button-group.css-mistica.js +8 -8
  17. package/dist/button-layout.css-mistica.js +15 -15
  18. package/dist/button.css-mistica.js +36 -36
  19. package/dist/callout.css-mistica.js +8 -8
  20. package/dist/card.css-mistica.js +26 -26
  21. package/dist/carousel.css-mistica.js +23 -23
  22. package/dist/checkbox.css-mistica.js +14 -14
  23. package/dist/chip.css-mistica.js +14 -14
  24. package/dist/circle.css-mistica.js +2 -2
  25. package/dist/community/advanced-data-card.css-mistica.js +21 -21
  26. package/dist/community/blocks.css-mistica.js +2 -2
  27. package/dist/community/example-component.css-mistica.js +1 -1
  28. package/dist/counter.css-mistica.js +5 -5
  29. package/dist/cover-hero.css-mistica.js +11 -11
  30. package/dist/credit-card-number-field.css-mistica.js +4 -4
  31. package/dist/date-field.css-mistica.js +1 -1
  32. package/dist/date-time-picker.css-mistica.js +1 -1
  33. package/dist/dialog.css-mistica.js +9 -9
  34. package/dist/divider.css-mistica.js +2 -2
  35. package/dist/double-field.css-mistica.js +2 -2
  36. package/dist/drawer.css-mistica.js +6 -6
  37. package/dist/empty-state-card.css-mistica.js +1 -1
  38. package/dist/empty-state.css-mistica.js +9 -9
  39. package/dist/fade-in.css-mistica.js +1 -1
  40. package/dist/feedback.css-mistica.js +5 -5
  41. package/dist/fixed-footer-layout.css-mistica.js +11 -11
  42. package/dist/form.css-mistica.js +1 -1
  43. package/dist/grid-layout.css-mistica.js +5 -5
  44. package/dist/grid.css-mistica.js +124 -124
  45. package/dist/header.css-mistica.js +3 -3
  46. package/dist/hero.css-mistica.js +9 -9
  47. package/dist/highlighted-card.css-mistica.js +5 -5
  48. package/dist/horizontal-scroll.css-mistica.js +3 -3
  49. package/dist/icon-button.css-mistica.js +46 -46
  50. package/dist/icons/icon-chevron.css-mistica.js +2 -2
  51. package/dist/icons/icon-error.css-mistica.js +1 -1
  52. package/dist/image.css-mistica.js +4 -4
  53. package/dist/inline.css-mistica.js +9 -9
  54. package/dist/list.css-mistica.js +14 -14
  55. package/dist/loading-bar.css-mistica.js +3 -3
  56. package/dist/loading-screen.css-mistica.js +11 -11
  57. package/dist/logo.css-mistica.js +6 -6
  58. package/dist/maybe-dismissable.css-mistica.js +2 -2
  59. package/dist/menu.css-mistica.js +16 -16
  60. package/dist/meter.d.ts +2 -1
  61. package/dist/meter.js +259 -236
  62. package/dist/mosaic.css-mistica.js +2 -2
  63. package/dist/navigation-bar.css-mistica.js +44 -44
  64. package/dist/navigation-breadcrumbs.css-mistica.js +4 -4
  65. package/dist/package-version.js +1 -1
  66. package/dist/pin-field.css-mistica.js +9 -9
  67. package/dist/popover.css-mistica.js +1 -1
  68. package/dist/progress-bar.css-mistica.js +5 -5
  69. package/dist/radio-button.css-mistica.js +20 -20
  70. package/dist/rating.css-mistica.js +5 -5
  71. package/dist/responsive-layout.css-mistica.js +10 -10
  72. package/dist/screen-reader-only.css-mistica.js +1 -1
  73. package/dist/select.css-mistica.js +22 -22
  74. package/dist/sheet-action-row.css-mistica.js +1 -1
  75. package/dist/sheet-common.css-mistica.js +12 -12
  76. package/dist/sheet-info.css-mistica.js +2 -2
  77. package/dist/skeletons.css-mistica.js +9 -9
  78. package/dist/skins/blau.js +24 -0
  79. package/dist/skins/movistar.js +35 -11
  80. package/dist/skins/o2-new.js +24 -0
  81. package/dist/skins/o2.js +24 -0
  82. package/dist/skins/skin-contract.css-mistica.js +338 -314
  83. package/dist/skins/skin-contract.css.d.ts +24 -0
  84. package/dist/skins/telefonica.js +24 -0
  85. package/dist/skins/tu.js +24 -0
  86. package/dist/skins/types/colors.d.ts +12 -0
  87. package/dist/skins/vivo-new.js +26 -2
  88. package/dist/skins/vivo.js +24 -0
  89. package/dist/slider.css-mistica.js +14 -14
  90. package/dist/snackbar.css-mistica.js +14 -14
  91. package/dist/spinner.css-mistica.js +3 -3
  92. package/dist/stack.css-mistica.js +7 -7
  93. package/dist/stacking-group.css-mistica.js +2 -2
  94. package/dist/stepper.css-mistica.js +10 -10
  95. package/dist/switch-component.css-mistica.js +35 -35
  96. package/dist/table.css-mistica.js +8 -8
  97. package/dist/tabs.css-mistica.js +21 -21
  98. package/dist/tag.css-mistica.js +1 -1
  99. package/dist/tag.js +44 -32
  100. package/dist/text-field-base.css-mistica.js +14 -14
  101. package/dist/text-field-components.css-mistica.js +17 -17
  102. package/dist/text-link.css-mistica.js +3 -3
  103. package/dist/text.css-mistica.js +9 -9
  104. package/dist/theme-context.css-mistica.js +382 -358
  105. package/dist/theme-context.css.d.ts +24 -0
  106. package/dist/timeline.css-mistica.js +14 -14
  107. package/dist/timer.css-mistica.js +10 -10
  108. package/dist/tooltip.css-mistica.js +5 -5
  109. package/dist/touchable.css-mistica.js +1 -1
  110. package/dist/utils/aspect-ratio-support.css-mistica.js +3 -3
  111. package/dist/video.css-mistica.js +2 -2
  112. package/dist/vivinho-loading-animation/vivinho-loading-animation.css-mistica.js +3 -3
  113. package/dist-es/accordion.css-mistica.js +7 -7
  114. package/dist-es/align.css-mistica.js +1 -1
  115. package/dist-es/avatar.css-mistica.js +2 -2
  116. package/dist-es/badge.css-mistica.js +2 -2
  117. package/dist-es/box.css-mistica.js +13 -13
  118. package/dist-es/boxed.css-mistica.js +24 -24
  119. package/dist-es/button-group.css-mistica.js +2 -2
  120. package/dist-es/button-layout.css-mistica.js +14 -14
  121. package/dist-es/button.css-mistica.js +22 -22
  122. package/dist-es/callout.css-mistica.js +6 -6
  123. package/dist-es/card.css-mistica.js +4 -4
  124. package/dist-es/carousel.css-mistica.js +7 -7
  125. package/dist-es/checkbox.css-mistica.js +9 -9
  126. package/dist-es/chip.css-mistica.js +11 -11
  127. package/dist-es/circle.css-mistica.js +2 -2
  128. package/dist-es/community/advanced-data-card.css-mistica.js +7 -7
  129. package/dist-es/community/blocks.css-mistica.js +2 -2
  130. package/dist-es/community/example-component.css-mistica.js +1 -1
  131. package/dist-es/counter.css-mistica.js +2 -2
  132. package/dist-es/cover-hero.css-mistica.js +4 -4
  133. package/dist-es/credit-card-number-field.css-mistica.js +4 -4
  134. package/dist-es/date-field.css-mistica.js +1 -1
  135. package/dist-es/date-time-picker.css-mistica.js +1 -1
  136. package/dist-es/dialog.css-mistica.js +5 -5
  137. package/dist-es/divider.css-mistica.js +2 -2
  138. package/dist-es/double-field.css-mistica.js +2 -2
  139. package/dist-es/drawer.css-mistica.js +2 -2
  140. package/dist-es/empty-state-card.css-mistica.js +1 -1
  141. package/dist-es/empty-state.css-mistica.js +6 -6
  142. package/dist-es/fade-in.css-mistica.js +1 -1
  143. package/dist-es/feedback.css-mistica.js +2 -2
  144. package/dist-es/fixed-footer-layout.css-mistica.js +5 -5
  145. package/dist-es/form.css-mistica.js +1 -1
  146. package/dist-es/grid-layout.css-mistica.js +4 -4
  147. package/dist-es/grid.css-mistica.js +124 -124
  148. package/dist-es/header.css-mistica.js +2 -2
  149. package/dist-es/hero.css-mistica.js +3 -3
  150. package/dist-es/highlighted-card.css-mistica.js +5 -5
  151. package/dist-es/horizontal-scroll.css-mistica.js +2 -2
  152. package/dist-es/icon-button.css-mistica.js +45 -45
  153. package/dist-es/icons/icon-chevron.css-mistica.js +2 -2
  154. package/dist-es/icons/icon-error.css-mistica.js +1 -1
  155. package/dist-es/image.css-mistica.js +3 -3
  156. package/dist-es/inline.css-mistica.js +7 -7
  157. package/dist-es/list.css-mistica.js +2 -2
  158. package/dist-es/loading-bar.css-mistica.js +2 -2
  159. package/dist-es/loading-screen.css-mistica.js +5 -5
  160. package/dist-es/logo.css-mistica.js +6 -6
  161. package/dist-es/maybe-dismissable.css-mistica.js +2 -2
  162. package/dist-es/menu.css-mistica.js +14 -14
  163. package/dist-es/meter.js +282 -259
  164. package/dist-es/mosaic.css-mistica.js +2 -2
  165. package/dist-es/navigation-bar.css-mistica.js +17 -17
  166. package/dist-es/navigation-breadcrumbs.css-mistica.js +2 -2
  167. package/dist-es/package-version.js +1 -1
  168. package/dist-es/pin-field.css-mistica.js +2 -2
  169. package/dist-es/popover.css-mistica.js +1 -1
  170. package/dist-es/progress-bar.css-mistica.js +5 -5
  171. package/dist-es/radio-button.css-mistica.js +16 -16
  172. package/dist-es/rating.css-mistica.js +3 -3
  173. package/dist-es/responsive-layout.css-mistica.js +6 -6
  174. package/dist-es/screen-reader-only.css-mistica.js +1 -1
  175. package/dist-es/select.css-mistica.js +18 -18
  176. package/dist-es/sheet-action-row.css-mistica.js +1 -1
  177. package/dist-es/sheet-common.css-mistica.js +2 -2
  178. package/dist-es/sheet-info.css-mistica.js +2 -2
  179. package/dist-es/skeletons.css-mistica.js +5 -5
  180. package/dist-es/skins/blau.js +24 -0
  181. package/dist-es/skins/movistar.js +37 -13
  182. package/dist-es/skins/o2-new.js +24 -0
  183. package/dist-es/skins/o2.js +24 -0
  184. package/dist-es/skins/skin-contract.css-mistica.js +338 -314
  185. package/dist-es/skins/telefonica.js +24 -0
  186. package/dist-es/skins/tu.js +24 -0
  187. package/dist-es/skins/vivo-new.js +26 -2
  188. package/dist-es/skins/vivo.js +24 -0
  189. package/dist-es/slider.css-mistica.js +11 -11
  190. package/dist-es/snackbar.css-mistica.js +5 -5
  191. package/dist-es/spinner.css-mistica.js +2 -2
  192. package/dist-es/stack.css-mistica.js +6 -6
  193. package/dist-es/stacking-group.css-mistica.js +2 -2
  194. package/dist-es/stepper.css-mistica.js +3 -3
  195. package/dist-es/style.css +1 -1
  196. package/dist-es/switch-component.css-mistica.js +30 -30
  197. package/dist-es/table.css-mistica.js +8 -8
  198. package/dist-es/tabs.css-mistica.js +15 -15
  199. package/dist-es/tag.css-mistica.js +1 -1
  200. package/dist-es/tag.js +60 -48
  201. package/dist-es/text-field-base.css-mistica.js +2 -2
  202. package/dist-es/text-field-components.css-mistica.js +5 -5
  203. package/dist-es/text-link.css-mistica.js +3 -3
  204. package/dist-es/text.css-mistica.js +8 -8
  205. package/dist-es/theme-context.css-mistica.js +380 -356
  206. package/dist-es/timeline.css-mistica.js +11 -11
  207. package/dist-es/timer.css-mistica.js +7 -7
  208. package/dist-es/tooltip.css-mistica.js +2 -2
  209. package/dist-es/touchable.css-mistica.js +1 -1
  210. package/dist-es/utils/aspect-ratio-support.css-mistica.js +3 -3
  211. package/dist-es/video.css-mistica.js +2 -2
  212. package/dist-es/vivinho-loading-animation/vivinho-loading-animation.css-mistica.js +2 -2
  213. package/package.json +1 -1
package/css/movistar.css CHANGED
@@ -23,14 +23,11 @@
23
23
  --mistica-movistar-movistarBlue20: #b3e1fb;
24
24
  --mistica-movistar-movistarGreen55: #52a413;
25
25
  --mistica-movistar-egg55: #d97d0d;
26
- --mistica-movistar-purple: #a13ea1;
27
26
  --mistica-movistar-pink55: #c42f6d;
28
27
  --mistica-movistar-movistarGreen10: #eff8e8;
29
28
  --mistica-movistar-egg10: #fef4e8;
30
- --mistica-movistar-purple10: #f6ecf6;
31
29
  --mistica-movistar-movistarGreen70: #407f0f;
32
30
  --mistica-movistar-egg80: #6d3f09;
33
- --mistica-movistar-purple70: #712b71;
34
31
  --mistica-movistar-darkModeBlack: #061824;
35
32
  --mistica-movistar-darkModeGrey: #081f2e;
36
33
  --mistica-movistar-darkModeGrey6: #3c5261;
@@ -41,12 +38,10 @@
41
38
  --mistica-movistar-movistarBlue40: #4dbaf7;
42
39
  --mistica-movistar-movistarGreen: #5cb615;
43
40
  --mistica-movistar-egg: #f28d15;
44
- --mistica-movistar-purple40: #bd78bd;
45
41
  --mistica-movistar-pink45: #eb5f99;
46
42
  --mistica-movistar-darkModeGrey7: #032f46;
47
43
  --mistica-movistar-movistarGreen40: #8dcc5b;
48
44
  --mistica-movistar-egg40: #f6af5b;
49
- --mistica-movistar-purple35: #c78bc7;
50
45
  --mistica-movistar-darkModeGrey3: #ced4d7;
51
46
 
52
47
  /* Raw palette colors, for use with rgba() */
@@ -63,8 +58,8 @@
63
58
  --mistica-color-backgroundBrandSecondary: var(--mistica-movistar-movistarBlueDark);
64
59
  --mistica-color-backgroundContainer: var(--mistica-movistar-white);
65
60
  --mistica-color-backgroundContainerError: var(--mistica-movistar-pepper10);
66
- --mistica-color-backgroundContainerHover: rgba(var(--mistica-movistar-raw-black), 0.03);
67
- --mistica-color-backgroundContainerPressed: rgba(var(--mistica-movistar-raw-black), 0.05);
61
+ --mistica-color-backgroundContainerHover: rgba(var(--mistica-movistar-raw-black), 0.05);
62
+ --mistica-color-backgroundContainerPressed: rgba(var(--mistica-movistar-raw-black), 0.08);
68
63
  --mistica-color-backgroundContainerBrand: var(--mistica-movistar-movistarBlue);
69
64
  --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-movistar-raw-black), 0.1);
70
65
  --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-movistar-raw-black), 0.2);
@@ -154,21 +149,21 @@
154
149
  --mistica-color-error: var(--mistica-movistar-pepper55);
155
150
  --mistica-color-textError: var(--mistica-movistar-pepper55);
156
151
  --mistica-color-textErrorInverse: var(--mistica-movistar-white);
157
- --mistica-color-promo: var(--mistica-movistar-purple);
152
+ --mistica-color-promo: var(--mistica-movistar-pepper70);
158
153
  --mistica-color-highlight: var(--mistica-movistar-pink55);
159
154
  --mistica-color-successLow: var(--mistica-movistar-movistarGreen10);
160
155
  --mistica-color-warningLow: var(--mistica-movistar-egg10);
161
156
  --mistica-color-errorLow: var(--mistica-movistar-pepper10);
162
- --mistica-color-promoLow: var(--mistica-movistar-purple10);
157
+ --mistica-color-promoLow: var(--mistica-movistar-pepper10);
163
158
  --mistica-color-brandLow: var(--mistica-movistar-movistarBlue10);
164
159
  --mistica-color-successHigh: var(--mistica-movistar-movistarGreen70);
165
160
  --mistica-color-warningHigh: var(--mistica-movistar-egg80);
166
161
  --mistica-color-errorHigh: var(--mistica-movistar-pepper70);
167
- --mistica-color-promoHigh: var(--mistica-movistar-purple70);
162
+ --mistica-color-promoHigh: var(--mistica-movistar-pepper70);
168
163
  --mistica-color-successHighInverse: var(--mistica-movistar-movistarGreen70);
169
164
  --mistica-color-warningHighInverse: var(--mistica-movistar-egg80);
170
165
  --mistica-color-errorHighInverse: var(--mistica-movistar-pepper70);
171
- --mistica-color-promoHighInverse: var(--mistica-movistar-purple70);
166
+ --mistica-color-promoHighInverse: var(--mistica-movistar-pepper70);
172
167
  --mistica-color-textNavigationBarPrimary: var(--mistica-movistar-white);
173
168
  --mistica-color-textNavigationBarSecondary: var(--mistica-movistar-movistarBlue20);
174
169
  --mistica-color-textNavigationSearchBarHint: var(--mistica-movistar-movistarBlue20);
@@ -176,18 +171,30 @@
176
171
  --mistica-color-textAppBar: var(--mistica-movistar-grey5);
177
172
  --mistica-color-textAppBarSelected: var(--mistica-movistar-movistarBlueHC);
178
173
  --mistica-color-customTabsBackground: var(--mistica-movistar-white);
179
- --mistica-color-tagTextPromo: var(--mistica-movistar-purple70);
174
+ --mistica-color-tagTextPromo: var(--mistica-movistar-white);
180
175
  --mistica-color-tagTextActive: var(--mistica-movistar-movistarBlueHC);
181
176
  --mistica-color-tagTextInactive: var(--mistica-movistar-grey5);
182
177
  --mistica-color-tagTextSuccess: var(--mistica-movistar-movistarGreen70);
183
178
  --mistica-color-tagTextWarning: var(--mistica-movistar-egg80);
184
179
  --mistica-color-tagTextError: var(--mistica-movistar-pepper70);
185
- --mistica-color-tagBackgroundPromo: var(--mistica-movistar-purple10);
180
+ --mistica-color-tagBackgroundPromo: var(--mistica-movistar-pepper70);
186
181
  --mistica-color-tagBackgroundActive: var(--mistica-movistar-movistarBlue10);
187
182
  --mistica-color-tagBackgroundInactive: var(--mistica-movistar-grey1);
188
183
  --mistica-color-tagBackgroundSuccess: var(--mistica-movistar-movistarGreen10);
189
184
  --mistica-color-tagBackgroundWarning: var(--mistica-movistar-egg10);
190
185
  --mistica-color-tagBackgroundError: var(--mistica-movistar-pepper10);
186
+ --mistica-color-tagTextPromoInverse: var(--mistica-movistar-pepper70);
187
+ --mistica-color-tagTextActiveInverse: var(--mistica-movistar-movistarBlueHC);
188
+ --mistica-color-tagTextInactiveInverse: var(--mistica-movistar-grey5);
189
+ --mistica-color-tagTextSuccessInverse: var(--mistica-movistar-movistarGreen70);
190
+ --mistica-color-tagTextWarningInverse: var(--mistica-movistar-egg80);
191
+ --mistica-color-tagTextErrorInverse: var(--mistica-movistar-pepper70);
192
+ --mistica-color-tagBackgroundPromoInverse: var(--mistica-movistar-white);
193
+ --mistica-color-tagBackgroundActiveInverse: var(--mistica-movistar-white);
194
+ --mistica-color-tagBackgroundInactiveInverse: var(--mistica-movistar-white);
195
+ --mistica-color-tagBackgroundSuccessInverse: var(--mistica-movistar-white);
196
+ --mistica-color-tagBackgroundWarningInverse: var(--mistica-movistar-white);
197
+ --mistica-color-tagBackgroundErrorInverse: var(--mistica-movistar-white);
191
198
  --mistica-color-cardContentOverlay: linear-gradient(
192
199
  180deg,
193
200
  rgba(var(--mistica-movistar-raw-black), 0) 0%,
@@ -259,8 +266,8 @@
259
266
  --mistica-color-backgroundBrandSecondary: var(--mistica-movistar-darkModeBlack);
260
267
  --mistica-color-backgroundContainer: var(--mistica-movistar-darkModeGrey);
261
268
  --mistica-color-backgroundContainerError: var(--mistica-movistar-darkModeGrey);
262
- --mistica-color-backgroundContainerHover: rgba(var(--mistica-movistar-raw-white), 0.03);
263
- --mistica-color-backgroundContainerPressed: rgba(var(--mistica-movistar-raw-white), 0.05);
269
+ --mistica-color-backgroundContainerHover: rgba(var(--mistica-movistar-raw-white), 0.05);
270
+ --mistica-color-backgroundContainerPressed: rgba(var(--mistica-movistar-raw-white), 0.08);
264
271
  --mistica-color-backgroundContainerBrand: var(--mistica-movistar-darkModeGrey);
265
272
  --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-movistar-raw-white), 0.03);
266
273
  --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-movistar-raw-white), 0.05);
@@ -350,7 +357,7 @@
350
357
  --mistica-color-error: var(--mistica-movistar-pepper45);
351
358
  --mistica-color-textError: var(--mistica-movistar-pepper45);
352
359
  --mistica-color-textErrorInverse: var(--mistica-movistar-pepper45);
353
- --mistica-color-promo: var(--mistica-movistar-purple40);
360
+ --mistica-color-promo: var(--mistica-movistar-pepper45);
354
361
  --mistica-color-highlight: var(--mistica-movistar-pink45);
355
362
  --mistica-color-successLow: var(--mistica-movistar-darkModeGrey7);
356
363
  --mistica-color-warningLow: var(--mistica-movistar-darkModeGrey7);
@@ -360,11 +367,11 @@
360
367
  --mistica-color-successHigh: var(--mistica-movistar-movistarGreen40);
361
368
  --mistica-color-warningHigh: var(--mistica-movistar-egg40);
362
369
  --mistica-color-errorHigh: var(--mistica-movistar-pepper45);
363
- --mistica-color-promoHigh: var(--mistica-movistar-purple35);
370
+ --mistica-color-promoHigh: var(--mistica-movistar-pepper45);
364
371
  --mistica-color-successHighInverse: var(--mistica-movistar-movistarGreen70);
365
372
  --mistica-color-warningHighInverse: var(--mistica-movistar-egg80);
366
373
  --mistica-color-errorHighInverse: var(--mistica-movistar-pepper70);
367
- --mistica-color-promoHighInverse: var(--mistica-movistar-purple70);
374
+ --mistica-color-promoHighInverse: var(--mistica-movistar-pepper45);
368
375
  --mistica-color-textNavigationBarPrimary: var(--mistica-movistar-darkModeGrey2);
369
376
  --mistica-color-textNavigationBarSecondary: var(--mistica-movistar-darkModeGrey4);
370
377
  --mistica-color-textNavigationSearchBarHint: var(--mistica-movistar-darkModeGrey4);
@@ -372,18 +379,30 @@
372
379
  --mistica-color-textAppBar: var(--mistica-movistar-darkModeGrey4);
373
380
  --mistica-color-textAppBarSelected: var(--mistica-movistar-movistarBlue);
374
381
  --mistica-color-customTabsBackground: var(--mistica-movistar-darkModeBlack);
375
- --mistica-color-tagTextPromo: var(--mistica-movistar-purple35);
382
+ --mistica-color-tagTextPromo: var(--mistica-movistar-white);
376
383
  --mistica-color-tagTextActive: var(--mistica-movistar-movistarBlue);
377
384
  --mistica-color-tagTextInactive: var(--mistica-movistar-darkModeGrey3);
378
385
  --mistica-color-tagTextSuccess: var(--mistica-movistar-movistarGreen40);
379
386
  --mistica-color-tagTextWarning: var(--mistica-movistar-egg40);
380
387
  --mistica-color-tagTextError: var(--mistica-movistar-pepper45);
381
- --mistica-color-tagBackgroundPromo: var(--mistica-movistar-darkModeGrey7);
388
+ --mistica-color-tagBackgroundPromo: var(--mistica-movistar-pepper70);
382
389
  --mistica-color-tagBackgroundActive: var(--mistica-movistar-darkModeGrey7);
383
390
  --mistica-color-tagBackgroundInactive: var(--mistica-movistar-darkModeGrey7);
384
391
  --mistica-color-tagBackgroundSuccess: var(--mistica-movistar-darkModeGrey7);
385
392
  --mistica-color-tagBackgroundWarning: var(--mistica-movistar-darkModeGrey7);
386
393
  --mistica-color-tagBackgroundError: var(--mistica-movistar-darkModeGrey7);
394
+ --mistica-color-tagTextPromoInverse: var(--mistica-movistar-white);
395
+ --mistica-color-tagTextActiveInverse: var(--mistica-movistar-movistarBlue);
396
+ --mistica-color-tagTextInactiveInverse: var(--mistica-movistar-darkModeGrey3);
397
+ --mistica-color-tagTextSuccessInverse: var(--mistica-movistar-movistarGreen40);
398
+ --mistica-color-tagTextWarningInverse: var(--mistica-movistar-egg40);
399
+ --mistica-color-tagTextErrorInverse: var(--mistica-movistar-pepper45);
400
+ --mistica-color-tagBackgroundPromoInverse: var(--mistica-movistar-pepper70);
401
+ --mistica-color-tagBackgroundActiveInverse: var(--mistica-movistar-darkModeGrey7);
402
+ --mistica-color-tagBackgroundInactiveInverse: var(--mistica-movistar-darkModeGrey7);
403
+ --mistica-color-tagBackgroundSuccessInverse: var(--mistica-movistar-darkModeGrey7);
404
+ --mistica-color-tagBackgroundWarningInverse: var(--mistica-movistar-darkModeGrey7);
405
+ --mistica-color-tagBackgroundErrorInverse: var(--mistica-movistar-darkModeGrey7);
387
406
  --mistica-color-cardContentOverlay: linear-gradient(
388
407
  180deg,
389
408
  rgba(var(--mistica-movistar-raw-black), 0) 0%,
@@ -400,8 +419,8 @@
400
419
  --mistica-color-backgroundBrandSecondary: var(--mistica-movistar-darkModeBlack);
401
420
  --mistica-color-backgroundContainer: var(--mistica-movistar-darkModeGrey);
402
421
  --mistica-color-backgroundContainerError: var(--mistica-movistar-darkModeGrey);
403
- --mistica-color-backgroundContainerHover: rgba(var(--mistica-movistar-raw-white), 0.03);
404
- --mistica-color-backgroundContainerPressed: rgba(var(--mistica-movistar-raw-white), 0.05);
422
+ --mistica-color-backgroundContainerHover: rgba(var(--mistica-movistar-raw-white), 0.05);
423
+ --mistica-color-backgroundContainerPressed: rgba(var(--mistica-movistar-raw-white), 0.08);
405
424
  --mistica-color-backgroundContainerBrand: var(--mistica-movistar-darkModeGrey);
406
425
  --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-movistar-raw-white), 0.03);
407
426
  --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-movistar-raw-white), 0.05);
@@ -497,7 +516,7 @@
497
516
  --mistica-color-error: var(--mistica-movistar-pepper45);
498
517
  --mistica-color-textError: var(--mistica-movistar-pepper45);
499
518
  --mistica-color-textErrorInverse: var(--mistica-movistar-pepper45);
500
- --mistica-color-promo: var(--mistica-movistar-purple40);
519
+ --mistica-color-promo: var(--mistica-movistar-pepper45);
501
520
  --mistica-color-highlight: var(--mistica-movistar-pink45);
502
521
  --mistica-color-successLow: var(--mistica-movistar-darkModeGrey7);
503
522
  --mistica-color-warningLow: var(--mistica-movistar-darkModeGrey7);
@@ -507,11 +526,11 @@
507
526
  --mistica-color-successHigh: var(--mistica-movistar-movistarGreen40);
508
527
  --mistica-color-warningHigh: var(--mistica-movistar-egg40);
509
528
  --mistica-color-errorHigh: var(--mistica-movistar-pepper45);
510
- --mistica-color-promoHigh: var(--mistica-movistar-purple35);
529
+ --mistica-color-promoHigh: var(--mistica-movistar-pepper45);
511
530
  --mistica-color-successHighInverse: var(--mistica-movistar-movistarGreen70);
512
531
  --mistica-color-warningHighInverse: var(--mistica-movistar-egg80);
513
532
  --mistica-color-errorHighInverse: var(--mistica-movistar-pepper70);
514
- --mistica-color-promoHighInverse: var(--mistica-movistar-purple70);
533
+ --mistica-color-promoHighInverse: var(--mistica-movistar-pepper45);
515
534
  --mistica-color-textNavigationBarPrimary: var(--mistica-movistar-darkModeGrey2);
516
535
  --mistica-color-textNavigationBarSecondary: var(--mistica-movistar-darkModeGrey4);
517
536
  --mistica-color-textNavigationSearchBarHint: var(--mistica-movistar-darkModeGrey4);
@@ -519,18 +538,30 @@
519
538
  --mistica-color-textAppBar: var(--mistica-movistar-darkModeGrey4);
520
539
  --mistica-color-textAppBarSelected: var(--mistica-movistar-movistarBlue);
521
540
  --mistica-color-customTabsBackground: var(--mistica-movistar-darkModeBlack);
522
- --mistica-color-tagTextPromo: var(--mistica-movistar-purple35);
541
+ --mistica-color-tagTextPromo: var(--mistica-movistar-white);
523
542
  --mistica-color-tagTextActive: var(--mistica-movistar-movistarBlue);
524
543
  --mistica-color-tagTextInactive: var(--mistica-movistar-darkModeGrey3);
525
544
  --mistica-color-tagTextSuccess: var(--mistica-movistar-movistarGreen40);
526
545
  --mistica-color-tagTextWarning: var(--mistica-movistar-egg40);
527
546
  --mistica-color-tagTextError: var(--mistica-movistar-pepper45);
528
- --mistica-color-tagBackgroundPromo: var(--mistica-movistar-darkModeGrey7);
547
+ --mistica-color-tagBackgroundPromo: var(--mistica-movistar-pepper70);
529
548
  --mistica-color-tagBackgroundActive: var(--mistica-movistar-darkModeGrey7);
530
549
  --mistica-color-tagBackgroundInactive: var(--mistica-movistar-darkModeGrey7);
531
550
  --mistica-color-tagBackgroundSuccess: var(--mistica-movistar-darkModeGrey7);
532
551
  --mistica-color-tagBackgroundWarning: var(--mistica-movistar-darkModeGrey7);
533
552
  --mistica-color-tagBackgroundError: var(--mistica-movistar-darkModeGrey7);
553
+ --mistica-color-tagTextPromoInverse: var(--mistica-movistar-white);
554
+ --mistica-color-tagTextActiveInverse: var(--mistica-movistar-movistarBlue);
555
+ --mistica-color-tagTextInactiveInverse: var(--mistica-movistar-darkModeGrey3);
556
+ --mistica-color-tagTextSuccessInverse: var(--mistica-movistar-movistarGreen40);
557
+ --mistica-color-tagTextWarningInverse: var(--mistica-movistar-egg40);
558
+ --mistica-color-tagTextErrorInverse: var(--mistica-movistar-pepper45);
559
+ --mistica-color-tagBackgroundPromoInverse: var(--mistica-movistar-pepper70);
560
+ --mistica-color-tagBackgroundActiveInverse: var(--mistica-movistar-darkModeGrey7);
561
+ --mistica-color-tagBackgroundInactiveInverse: var(--mistica-movistar-darkModeGrey7);
562
+ --mistica-color-tagBackgroundSuccessInverse: var(--mistica-movistar-darkModeGrey7);
563
+ --mistica-color-tagBackgroundWarningInverse: var(--mistica-movistar-darkModeGrey7);
564
+ --mistica-color-tagBackgroundErrorInverse: var(--mistica-movistar-darkModeGrey7);
534
565
  --mistica-color-cardContentOverlay: linear-gradient(
535
566
  180deg,
536
567
  rgba(var(--mistica-movistar-raw-black), 0) 0%,
@@ -546,8 +577,8 @@
546
577
  --mistica-color-backgroundBrandSecondary: var(--mistica-movistar-movistarBlueDark);
547
578
  --mistica-color-backgroundContainer: var(--mistica-movistar-white);
548
579
  --mistica-color-backgroundContainerError: var(--mistica-movistar-pepper10);
549
- --mistica-color-backgroundContainerHover: rgba(var(--mistica-movistar-raw-black), 0.03);
550
- --mistica-color-backgroundContainerPressed: rgba(var(--mistica-movistar-raw-black), 0.05);
580
+ --mistica-color-backgroundContainerHover: rgba(var(--mistica-movistar-raw-black), 0.05);
581
+ --mistica-color-backgroundContainerPressed: rgba(var(--mistica-movistar-raw-black), 0.08);
551
582
  --mistica-color-backgroundContainerBrand: var(--mistica-movistar-movistarBlue);
552
583
  --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-movistar-raw-black), 0.1);
553
584
  --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-movistar-raw-black), 0.2);
@@ -637,21 +668,21 @@
637
668
  --mistica-color-error: var(--mistica-movistar-pepper55);
638
669
  --mistica-color-textError: var(--mistica-movistar-pepper55);
639
670
  --mistica-color-textErrorInverse: var(--mistica-movistar-white);
640
- --mistica-color-promo: var(--mistica-movistar-purple);
671
+ --mistica-color-promo: var(--mistica-movistar-pepper70);
641
672
  --mistica-color-highlight: var(--mistica-movistar-pink55);
642
673
  --mistica-color-successLow: var(--mistica-movistar-movistarGreen10);
643
674
  --mistica-color-warningLow: var(--mistica-movistar-egg10);
644
675
  --mistica-color-errorLow: var(--mistica-movistar-pepper10);
645
- --mistica-color-promoLow: var(--mistica-movistar-purple10);
676
+ --mistica-color-promoLow: var(--mistica-movistar-pepper10);
646
677
  --mistica-color-brandLow: var(--mistica-movistar-movistarBlue10);
647
678
  --mistica-color-successHigh: var(--mistica-movistar-movistarGreen70);
648
679
  --mistica-color-warningHigh: var(--mistica-movistar-egg80);
649
680
  --mistica-color-errorHigh: var(--mistica-movistar-pepper70);
650
- --mistica-color-promoHigh: var(--mistica-movistar-purple70);
681
+ --mistica-color-promoHigh: var(--mistica-movistar-pepper70);
651
682
  --mistica-color-successHighInverse: var(--mistica-movistar-movistarGreen70);
652
683
  --mistica-color-warningHighInverse: var(--mistica-movistar-egg80);
653
684
  --mistica-color-errorHighInverse: var(--mistica-movistar-pepper70);
654
- --mistica-color-promoHighInverse: var(--mistica-movistar-purple70);
685
+ --mistica-color-promoHighInverse: var(--mistica-movistar-pepper70);
655
686
  --mistica-color-textNavigationBarPrimary: var(--mistica-movistar-white);
656
687
  --mistica-color-textNavigationBarSecondary: var(--mistica-movistar-movistarBlue20);
657
688
  --mistica-color-textNavigationSearchBarHint: var(--mistica-movistar-movistarBlue20);
@@ -659,18 +690,30 @@
659
690
  --mistica-color-textAppBar: var(--mistica-movistar-grey5);
660
691
  --mistica-color-textAppBarSelected: var(--mistica-movistar-movistarBlueHC);
661
692
  --mistica-color-customTabsBackground: var(--mistica-movistar-white);
662
- --mistica-color-tagTextPromo: var(--mistica-movistar-purple70);
693
+ --mistica-color-tagTextPromo: var(--mistica-movistar-white);
663
694
  --mistica-color-tagTextActive: var(--mistica-movistar-movistarBlueHC);
664
695
  --mistica-color-tagTextInactive: var(--mistica-movistar-grey5);
665
696
  --mistica-color-tagTextSuccess: var(--mistica-movistar-movistarGreen70);
666
697
  --mistica-color-tagTextWarning: var(--mistica-movistar-egg80);
667
698
  --mistica-color-tagTextError: var(--mistica-movistar-pepper70);
668
- --mistica-color-tagBackgroundPromo: var(--mistica-movistar-purple10);
699
+ --mistica-color-tagBackgroundPromo: var(--mistica-movistar-pepper70);
669
700
  --mistica-color-tagBackgroundActive: var(--mistica-movistar-movistarBlue10);
670
701
  --mistica-color-tagBackgroundInactive: var(--mistica-movistar-grey1);
671
702
  --mistica-color-tagBackgroundSuccess: var(--mistica-movistar-movistarGreen10);
672
703
  --mistica-color-tagBackgroundWarning: var(--mistica-movistar-egg10);
673
704
  --mistica-color-tagBackgroundError: var(--mistica-movistar-pepper10);
705
+ --mistica-color-tagTextPromoInverse: var(--mistica-movistar-pepper70);
706
+ --mistica-color-tagTextActiveInverse: var(--mistica-movistar-movistarBlueHC);
707
+ --mistica-color-tagTextInactiveInverse: var(--mistica-movistar-grey5);
708
+ --mistica-color-tagTextSuccessInverse: var(--mistica-movistar-movistarGreen70);
709
+ --mistica-color-tagTextWarningInverse: var(--mistica-movistar-egg80);
710
+ --mistica-color-tagTextErrorInverse: var(--mistica-movistar-pepper70);
711
+ --mistica-color-tagBackgroundPromoInverse: var(--mistica-movistar-white);
712
+ --mistica-color-tagBackgroundActiveInverse: var(--mistica-movistar-white);
713
+ --mistica-color-tagBackgroundInactiveInverse: var(--mistica-movistar-white);
714
+ --mistica-color-tagBackgroundSuccessInverse: var(--mistica-movistar-white);
715
+ --mistica-color-tagBackgroundWarningInverse: var(--mistica-movistar-white);
716
+ --mistica-color-tagBackgroundErrorInverse: var(--mistica-movistar-white);
674
717
  --mistica-color-cardContentOverlay: linear-gradient(
675
718
  180deg,
676
719
  rgba(var(--mistica-movistar-raw-black), 0) 0%,
package/css/o2-new.css CHANGED
@@ -18,7 +18,7 @@
18
18
  --mistica-o2-new-black: #00001e;
19
19
  --mistica-o2-new-grey60: #6e6e77;
20
20
  --mistica-o2-new-o2Green: #00dc7d;
21
- --mistica-o2-new-o2Orange: #ffa55a;
21
+ --mistica-o2-new-o2Orange60: #f06c00;
22
22
  --mistica-o2-new-o2Pink: #fa96ff;
23
23
  --mistica-o2-new-o2Pink80: #704373;
24
24
  --mistica-o2-new-o2Green10: #e5fbf2;
@@ -33,6 +33,7 @@
33
33
  --mistica-o2-new-beyondBlue55: #0044d9;
34
34
  --mistica-o2-new-beyondBlue40: #4d84ff;
35
35
  --mistica-o2-new-o2Red45: #ff7b7b;
36
+ --mistica-o2-new-o2Orange: #ffa55a;
36
37
  --mistica-o2-new-o2Green40: #4ce7a4;
37
38
  --mistica-o2-new-o2Orange40: #ffc08b;
38
39
  --mistica-o2-new-o2Red40: #ff8b8b;
@@ -58,8 +59,8 @@
58
59
  --mistica-color-backgroundBrandSecondary: var(--mistica-o2-new-beyondBlue);
59
60
  --mistica-color-backgroundContainer: var(--mistica-o2-new-white);
60
61
  --mistica-color-backgroundContainerError: var(--mistica-o2-new-o2Red10);
61
- --mistica-color-backgroundContainerHover: rgba(var(--mistica-o2-new-raw-darkModeBlack), 0.03);
62
- --mistica-color-backgroundContainerPressed: rgba(var(--mistica-o2-new-raw-darkModeBlack), 0.05);
62
+ --mistica-color-backgroundContainerHover: rgba(var(--mistica-o2-new-raw-darkModeBlack), 0.05);
63
+ --mistica-color-backgroundContainerPressed: rgba(var(--mistica-o2-new-raw-darkModeBlack), 0.08);
63
64
  --mistica-color-backgroundContainerBrand: linear-gradient(
64
65
  180deg,
65
66
  var(--mistica-o2-new-darkBlue) 0%,
@@ -150,7 +151,7 @@
150
151
  --mistica-color-textSecondary: var(--mistica-o2-new-grey60);
151
152
  --mistica-color-textSecondaryInverse: var(--mistica-o2-new-beyondBlue10);
152
153
  --mistica-color-success: var(--mistica-o2-new-o2Green);
153
- --mistica-color-warning: var(--mistica-o2-new-o2Orange);
154
+ --mistica-color-warning: var(--mistica-o2-new-o2Orange60);
154
155
  --mistica-color-error: var(--mistica-o2-new-o2Red65);
155
156
  --mistica-color-textError: var(--mistica-o2-new-o2Red65);
156
157
  --mistica-color-textErrorInverse: var(--mistica-o2-new-white);
@@ -188,6 +189,18 @@
188
189
  --mistica-color-tagBackgroundSuccess: var(--mistica-o2-new-o2Green10);
189
190
  --mistica-color-tagBackgroundWarning: var(--mistica-o2-new-o2Orange10);
190
191
  --mistica-color-tagBackgroundError: var(--mistica-o2-new-o2Red10);
192
+ --mistica-color-tagTextPromoInverse: var(--mistica-o2-new-o2Pink80);
193
+ --mistica-color-tagTextActiveInverse: var(--mistica-o2-new-beyondBlue);
194
+ --mistica-color-tagTextInactiveInverse: var(--mistica-o2-new-grey60);
195
+ --mistica-color-tagTextSuccessInverse: var(--mistica-o2-new-o2Green80);
196
+ --mistica-color-tagTextWarningInverse: var(--mistica-o2-new-o2Orange75);
197
+ --mistica-color-tagTextErrorInverse: var(--mistica-o2-new-o2Red65);
198
+ --mistica-color-tagBackgroundPromoInverse: var(--mistica-o2-new-o2Pink15);
199
+ --mistica-color-tagBackgroundActiveInverse: var(--mistica-o2-new-beyondBlue10);
200
+ --mistica-color-tagBackgroundInactiveInverse: var(--mistica-o2-new-grey20);
201
+ --mistica-color-tagBackgroundSuccessInverse: var(--mistica-o2-new-o2Green10);
202
+ --mistica-color-tagBackgroundWarningInverse: var(--mistica-o2-new-o2Orange10);
203
+ --mistica-color-tagBackgroundErrorInverse: var(--mistica-o2-new-o2Red10);
191
204
  --mistica-color-cardContentOverlay: linear-gradient(
192
205
  180deg,
193
206
  rgba(var(--mistica-o2-new-raw-beyondBlue), 0) 0%,
@@ -259,8 +272,8 @@
259
272
  --mistica-color-backgroundBrandSecondary: var(--mistica-o2-new-darkModeBlack);
260
273
  --mistica-color-backgroundContainer: var(--mistica-o2-new-darkModeGrey);
261
274
  --mistica-color-backgroundContainerError: var(--mistica-o2-new-darkModeGrey);
262
- --mistica-color-backgroundContainerHover: rgba(var(--mistica-o2-new-raw-white), 0.03);
263
- --mistica-color-backgroundContainerPressed: rgba(var(--mistica-o2-new-raw-white), 0.05);
275
+ --mistica-color-backgroundContainerHover: rgba(var(--mistica-o2-new-raw-white), 0.05);
276
+ --mistica-color-backgroundContainerPressed: rgba(var(--mistica-o2-new-raw-white), 0.08);
264
277
  --mistica-color-backgroundContainerBrand: var(--mistica-o2-new-darkModeGrey);
265
278
  --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-o2-new-raw-white), 0.03);
266
279
  --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-o2-new-raw-white), 0.05);
@@ -384,6 +397,18 @@
384
397
  --mistica-color-tagBackgroundSuccess: var(--mistica-o2-new-darkModeGrey6);
385
398
  --mistica-color-tagBackgroundWarning: var(--mistica-o2-new-darkModeGrey6);
386
399
  --mistica-color-tagBackgroundError: var(--mistica-o2-new-darkModeGrey6);
400
+ --mistica-color-tagTextPromoInverse: var(--mistica-o2-new-o2Pink);
401
+ --mistica-color-tagTextActiveInverse: var(--mistica-o2-new-beyondBlue30);
402
+ --mistica-color-tagTextInactiveInverse: var(--mistica-o2-new-grey40);
403
+ --mistica-color-tagTextSuccessInverse: var(--mistica-o2-new-o2Green);
404
+ --mistica-color-tagTextWarningInverse: var(--mistica-o2-new-o2Orange);
405
+ --mistica-color-tagTextErrorInverse: var(--mistica-o2-new-o2Red45);
406
+ --mistica-color-tagBackgroundPromoInverse: var(--mistica-o2-new-darkModeGrey6);
407
+ --mistica-color-tagBackgroundActiveInverse: var(--mistica-o2-new-darkModeGrey6);
408
+ --mistica-color-tagBackgroundInactiveInverse: var(--mistica-o2-new-darkModeGrey6);
409
+ --mistica-color-tagBackgroundSuccessInverse: var(--mistica-o2-new-darkModeGrey6);
410
+ --mistica-color-tagBackgroundWarningInverse: var(--mistica-o2-new-darkModeGrey6);
411
+ --mistica-color-tagBackgroundErrorInverse: var(--mistica-o2-new-darkModeGrey6);
387
412
  --mistica-color-cardContentOverlay: linear-gradient(
388
413
  180deg,
389
414
  rgba(var(--mistica-o2-new-raw-black), 0) 0%,
@@ -400,8 +425,8 @@
400
425
  --mistica-color-backgroundBrandSecondary: var(--mistica-o2-new-darkModeBlack);
401
426
  --mistica-color-backgroundContainer: var(--mistica-o2-new-darkModeGrey);
402
427
  --mistica-color-backgroundContainerError: var(--mistica-o2-new-darkModeGrey);
403
- --mistica-color-backgroundContainerHover: rgba(var(--mistica-o2-new-raw-white), 0.03);
404
- --mistica-color-backgroundContainerPressed: rgba(var(--mistica-o2-new-raw-white), 0.05);
428
+ --mistica-color-backgroundContainerHover: rgba(var(--mistica-o2-new-raw-white), 0.05);
429
+ --mistica-color-backgroundContainerPressed: rgba(var(--mistica-o2-new-raw-white), 0.08);
405
430
  --mistica-color-backgroundContainerBrand: var(--mistica-o2-new-darkModeGrey);
406
431
  --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-o2-new-raw-white), 0.03);
407
432
  --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-o2-new-raw-white), 0.05);
@@ -525,6 +550,18 @@
525
550
  --mistica-color-tagBackgroundSuccess: var(--mistica-o2-new-darkModeGrey6);
526
551
  --mistica-color-tagBackgroundWarning: var(--mistica-o2-new-darkModeGrey6);
527
552
  --mistica-color-tagBackgroundError: var(--mistica-o2-new-darkModeGrey6);
553
+ --mistica-color-tagTextPromoInverse: var(--mistica-o2-new-o2Pink);
554
+ --mistica-color-tagTextActiveInverse: var(--mistica-o2-new-beyondBlue30);
555
+ --mistica-color-tagTextInactiveInverse: var(--mistica-o2-new-grey40);
556
+ --mistica-color-tagTextSuccessInverse: var(--mistica-o2-new-o2Green);
557
+ --mistica-color-tagTextWarningInverse: var(--mistica-o2-new-o2Orange);
558
+ --mistica-color-tagTextErrorInverse: var(--mistica-o2-new-o2Red45);
559
+ --mistica-color-tagBackgroundPromoInverse: var(--mistica-o2-new-darkModeGrey6);
560
+ --mistica-color-tagBackgroundActiveInverse: var(--mistica-o2-new-darkModeGrey6);
561
+ --mistica-color-tagBackgroundInactiveInverse: var(--mistica-o2-new-darkModeGrey6);
562
+ --mistica-color-tagBackgroundSuccessInverse: var(--mistica-o2-new-darkModeGrey6);
563
+ --mistica-color-tagBackgroundWarningInverse: var(--mistica-o2-new-darkModeGrey6);
564
+ --mistica-color-tagBackgroundErrorInverse: var(--mistica-o2-new-darkModeGrey6);
528
565
  --mistica-color-cardContentOverlay: linear-gradient(
529
566
  180deg,
530
567
  rgba(var(--mistica-o2-new-raw-black), 0) 0%,
@@ -545,8 +582,8 @@
545
582
  --mistica-color-backgroundBrandSecondary: var(--mistica-o2-new-beyondBlue);
546
583
  --mistica-color-backgroundContainer: var(--mistica-o2-new-white);
547
584
  --mistica-color-backgroundContainerError: var(--mistica-o2-new-o2Red10);
548
- --mistica-color-backgroundContainerHover: rgba(var(--mistica-o2-new-raw-darkModeBlack), 0.03);
549
- --mistica-color-backgroundContainerPressed: rgba(var(--mistica-o2-new-raw-darkModeBlack), 0.05);
585
+ --mistica-color-backgroundContainerHover: rgba(var(--mistica-o2-new-raw-darkModeBlack), 0.05);
586
+ --mistica-color-backgroundContainerPressed: rgba(var(--mistica-o2-new-raw-darkModeBlack), 0.08);
550
587
  --mistica-color-backgroundContainerBrand: linear-gradient(
551
588
  180deg,
552
589
  var(--mistica-o2-new-darkBlue) 0%,
@@ -637,7 +674,7 @@
637
674
  --mistica-color-textSecondary: var(--mistica-o2-new-grey60);
638
675
  --mistica-color-textSecondaryInverse: var(--mistica-o2-new-beyondBlue10);
639
676
  --mistica-color-success: var(--mistica-o2-new-o2Green);
640
- --mistica-color-warning: var(--mistica-o2-new-o2Orange);
677
+ --mistica-color-warning: var(--mistica-o2-new-o2Orange60);
641
678
  --mistica-color-error: var(--mistica-o2-new-o2Red65);
642
679
  --mistica-color-textError: var(--mistica-o2-new-o2Red65);
643
680
  --mistica-color-textErrorInverse: var(--mistica-o2-new-white);
@@ -675,6 +712,18 @@
675
712
  --mistica-color-tagBackgroundSuccess: var(--mistica-o2-new-o2Green10);
676
713
  --mistica-color-tagBackgroundWarning: var(--mistica-o2-new-o2Orange10);
677
714
  --mistica-color-tagBackgroundError: var(--mistica-o2-new-o2Red10);
715
+ --mistica-color-tagTextPromoInverse: var(--mistica-o2-new-o2Pink80);
716
+ --mistica-color-tagTextActiveInverse: var(--mistica-o2-new-beyondBlue);
717
+ --mistica-color-tagTextInactiveInverse: var(--mistica-o2-new-grey60);
718
+ --mistica-color-tagTextSuccessInverse: var(--mistica-o2-new-o2Green80);
719
+ --mistica-color-tagTextWarningInverse: var(--mistica-o2-new-o2Orange75);
720
+ --mistica-color-tagTextErrorInverse: var(--mistica-o2-new-o2Red65);
721
+ --mistica-color-tagBackgroundPromoInverse: var(--mistica-o2-new-o2Pink15);
722
+ --mistica-color-tagBackgroundActiveInverse: var(--mistica-o2-new-beyondBlue10);
723
+ --mistica-color-tagBackgroundInactiveInverse: var(--mistica-o2-new-grey20);
724
+ --mistica-color-tagBackgroundSuccessInverse: var(--mistica-o2-new-o2Green10);
725
+ --mistica-color-tagBackgroundWarningInverse: var(--mistica-o2-new-o2Orange10);
726
+ --mistica-color-tagBackgroundErrorInverse: var(--mistica-o2-new-o2Red10);
678
727
  --mistica-color-cardContentOverlay: linear-gradient(
679
728
  180deg,
680
729
  rgba(var(--mistica-o2-new-raw-beyondBlue), 0) 0%,
package/css/o2.css CHANGED
@@ -49,8 +49,8 @@
49
49
  --mistica-color-backgroundBrandSecondary: var(--mistica-o2-o2BluePrimary);
50
50
  --mistica-color-backgroundContainer: var(--mistica-o2-white);
51
51
  --mistica-color-backgroundContainerError: var(--mistica-o2-pepper10);
52
- --mistica-color-backgroundContainerHover: rgba(var(--mistica-o2-raw-darkModeBlack), 0.03);
53
- --mistica-color-backgroundContainerPressed: rgba(var(--mistica-o2-raw-darkModeBlack), 0.05);
52
+ --mistica-color-backgroundContainerHover: rgba(var(--mistica-o2-raw-darkModeBlack), 0.05);
53
+ --mistica-color-backgroundContainerPressed: rgba(var(--mistica-o2-raw-darkModeBlack), 0.08);
54
54
  --mistica-color-backgroundContainerBrand: var(--mistica-o2-o2BluePrimary);
55
55
  --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-o2-raw-darkModeBlack), 0.2);
56
56
  --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-o2-raw-darkModeBlack), 0.4);
@@ -174,6 +174,18 @@
174
174
  --mistica-color-tagBackgroundSuccess: var(--mistica-o2-o2Green10);
175
175
  --mistica-color-tagBackgroundWarning: var(--mistica-o2-o2Orange10);
176
176
  --mistica-color-tagBackgroundError: var(--mistica-o2-pepper10);
177
+ --mistica-color-tagTextPromoInverse: var(--mistica-o2-o2Purple);
178
+ --mistica-color-tagTextActiveInverse: var(--mistica-o2-o2BluePrimary);
179
+ --mistica-color-tagTextInactiveInverse: var(--mistica-o2-grey5);
180
+ --mistica-color-tagTextSuccessInverse: var(--mistica-o2-o2Green80);
181
+ --mistica-color-tagTextWarningInverse: var(--mistica-o2-o2Orange75);
182
+ --mistica-color-tagTextErrorInverse: var(--mistica-o2-pepper60);
183
+ --mistica-color-tagBackgroundPromoInverse: var(--mistica-o2-o2Purple10);
184
+ --mistica-color-tagBackgroundActiveInverse: var(--mistica-o2-o2BluePrimary10);
185
+ --mistica-color-tagBackgroundInactiveInverse: var(--mistica-o2-grey1);
186
+ --mistica-color-tagBackgroundSuccessInverse: var(--mistica-o2-o2Green10);
187
+ --mistica-color-tagBackgroundWarningInverse: var(--mistica-o2-o2Orange10);
188
+ --mistica-color-tagBackgroundErrorInverse: var(--mistica-o2-pepper10);
177
189
  --mistica-color-cardContentOverlay: linear-gradient(
178
190
  180deg,
179
191
  rgba(var(--mistica-o2-raw-black), 0) 0%,
@@ -245,8 +257,8 @@
245
257
  --mistica-color-backgroundBrandSecondary: var(--mistica-o2-darkModeBlack);
246
258
  --mistica-color-backgroundContainer: var(--mistica-o2-darkModeGrey);
247
259
  --mistica-color-backgroundContainerError: var(--mistica-o2-darkModeGrey);
248
- --mistica-color-backgroundContainerHover: rgba(var(--mistica-o2-raw-white), 0.03);
249
- --mistica-color-backgroundContainerPressed: rgba(var(--mistica-o2-raw-white), 0.05);
260
+ --mistica-color-backgroundContainerHover: rgba(var(--mistica-o2-raw-white), 0.05);
261
+ --mistica-color-backgroundContainerPressed: rgba(var(--mistica-o2-raw-white), 0.08);
250
262
  --mistica-color-backgroundContainerBrand: var(--mistica-o2-darkModeGrey);
251
263
  --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-o2-raw-white), 0.03);
252
264
  --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-o2-raw-white), 0.05);
@@ -370,6 +382,18 @@
370
382
  --mistica-color-tagBackgroundSuccess: var(--mistica-o2-darkModeGrey6);
371
383
  --mistica-color-tagBackgroundWarning: var(--mistica-o2-darkModeGrey6);
372
384
  --mistica-color-tagBackgroundError: var(--mistica-o2-darkModeGrey6);
385
+ --mistica-color-tagTextPromoInverse: var(--mistica-o2-o2Purple30);
386
+ --mistica-color-tagTextActiveInverse: var(--mistica-o2-o2BluePrimary30);
387
+ --mistica-color-tagTextInactiveInverse: var(--mistica-o2-grey5);
388
+ --mistica-color-tagTextSuccessInverse: var(--mistica-o2-o2Green40);
389
+ --mistica-color-tagTextWarningInverse: var(--mistica-o2-o2Orange40);
390
+ --mistica-color-tagTextErrorInverse: var(--mistica-o2-pepper40);
391
+ --mistica-color-tagBackgroundPromoInverse: var(--mistica-o2-darkModeGrey6);
392
+ --mistica-color-tagBackgroundActiveInverse: var(--mistica-o2-darkModeGrey6);
393
+ --mistica-color-tagBackgroundInactiveInverse: var(--mistica-o2-darkModeGrey6);
394
+ --mistica-color-tagBackgroundSuccessInverse: var(--mistica-o2-darkModeGrey6);
395
+ --mistica-color-tagBackgroundWarningInverse: var(--mistica-o2-darkModeGrey6);
396
+ --mistica-color-tagBackgroundErrorInverse: var(--mistica-o2-darkModeGrey6);
373
397
  --mistica-color-cardContentOverlay: linear-gradient(
374
398
  180deg,
375
399
  rgba(var(--mistica-o2-raw-black), 0) 0%,
@@ -386,8 +410,8 @@
386
410
  --mistica-color-backgroundBrandSecondary: var(--mistica-o2-darkModeBlack);
387
411
  --mistica-color-backgroundContainer: var(--mistica-o2-darkModeGrey);
388
412
  --mistica-color-backgroundContainerError: var(--mistica-o2-darkModeGrey);
389
- --mistica-color-backgroundContainerHover: rgba(var(--mistica-o2-raw-white), 0.03);
390
- --mistica-color-backgroundContainerPressed: rgba(var(--mistica-o2-raw-white), 0.05);
413
+ --mistica-color-backgroundContainerHover: rgba(var(--mistica-o2-raw-white), 0.05);
414
+ --mistica-color-backgroundContainerPressed: rgba(var(--mistica-o2-raw-white), 0.08);
391
415
  --mistica-color-backgroundContainerBrand: var(--mistica-o2-darkModeGrey);
392
416
  --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-o2-raw-white), 0.03);
393
417
  --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-o2-raw-white), 0.05);
@@ -511,6 +535,18 @@
511
535
  --mistica-color-tagBackgroundSuccess: var(--mistica-o2-darkModeGrey6);
512
536
  --mistica-color-tagBackgroundWarning: var(--mistica-o2-darkModeGrey6);
513
537
  --mistica-color-tagBackgroundError: var(--mistica-o2-darkModeGrey6);
538
+ --mistica-color-tagTextPromoInverse: var(--mistica-o2-o2Purple30);
539
+ --mistica-color-tagTextActiveInverse: var(--mistica-o2-o2BluePrimary30);
540
+ --mistica-color-tagTextInactiveInverse: var(--mistica-o2-grey5);
541
+ --mistica-color-tagTextSuccessInverse: var(--mistica-o2-o2Green40);
542
+ --mistica-color-tagTextWarningInverse: var(--mistica-o2-o2Orange40);
543
+ --mistica-color-tagTextErrorInverse: var(--mistica-o2-pepper40);
544
+ --mistica-color-tagBackgroundPromoInverse: var(--mistica-o2-darkModeGrey6);
545
+ --mistica-color-tagBackgroundActiveInverse: var(--mistica-o2-darkModeGrey6);
546
+ --mistica-color-tagBackgroundInactiveInverse: var(--mistica-o2-darkModeGrey6);
547
+ --mistica-color-tagBackgroundSuccessInverse: var(--mistica-o2-darkModeGrey6);
548
+ --mistica-color-tagBackgroundWarningInverse: var(--mistica-o2-darkModeGrey6);
549
+ --mistica-color-tagBackgroundErrorInverse: var(--mistica-o2-darkModeGrey6);
514
550
  --mistica-color-cardContentOverlay: linear-gradient(
515
551
  180deg,
516
552
  rgba(var(--mistica-o2-raw-black), 0) 0%,
@@ -526,8 +562,8 @@
526
562
  --mistica-color-backgroundBrandSecondary: var(--mistica-o2-o2BluePrimary);
527
563
  --mistica-color-backgroundContainer: var(--mistica-o2-white);
528
564
  --mistica-color-backgroundContainerError: var(--mistica-o2-pepper10);
529
- --mistica-color-backgroundContainerHover: rgba(var(--mistica-o2-raw-darkModeBlack), 0.03);
530
- --mistica-color-backgroundContainerPressed: rgba(var(--mistica-o2-raw-darkModeBlack), 0.05);
565
+ --mistica-color-backgroundContainerHover: rgba(var(--mistica-o2-raw-darkModeBlack), 0.05);
566
+ --mistica-color-backgroundContainerPressed: rgba(var(--mistica-o2-raw-darkModeBlack), 0.08);
531
567
  --mistica-color-backgroundContainerBrand: var(--mistica-o2-o2BluePrimary);
532
568
  --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-o2-raw-darkModeBlack), 0.2);
533
569
  --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-o2-raw-darkModeBlack), 0.4);
@@ -651,6 +687,18 @@
651
687
  --mistica-color-tagBackgroundSuccess: var(--mistica-o2-o2Green10);
652
688
  --mistica-color-tagBackgroundWarning: var(--mistica-o2-o2Orange10);
653
689
  --mistica-color-tagBackgroundError: var(--mistica-o2-pepper10);
690
+ --mistica-color-tagTextPromoInverse: var(--mistica-o2-o2Purple);
691
+ --mistica-color-tagTextActiveInverse: var(--mistica-o2-o2BluePrimary);
692
+ --mistica-color-tagTextInactiveInverse: var(--mistica-o2-grey5);
693
+ --mistica-color-tagTextSuccessInverse: var(--mistica-o2-o2Green80);
694
+ --mistica-color-tagTextWarningInverse: var(--mistica-o2-o2Orange75);
695
+ --mistica-color-tagTextErrorInverse: var(--mistica-o2-pepper60);
696
+ --mistica-color-tagBackgroundPromoInverse: var(--mistica-o2-o2Purple10);
697
+ --mistica-color-tagBackgroundActiveInverse: var(--mistica-o2-o2BluePrimary10);
698
+ --mistica-color-tagBackgroundInactiveInverse: var(--mistica-o2-grey1);
699
+ --mistica-color-tagBackgroundSuccessInverse: var(--mistica-o2-o2Green10);
700
+ --mistica-color-tagBackgroundWarningInverse: var(--mistica-o2-o2Orange10);
701
+ --mistica-color-tagBackgroundErrorInverse: var(--mistica-o2-pepper10);
654
702
  --mistica-color-cardContentOverlay: linear-gradient(
655
703
  180deg,
656
704
  rgba(var(--mistica-o2-raw-black), 0) 0%,