@telefonica/mistica 16.26.0 → 16.27.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 (237) hide show
  1. package/css/blau.css +120 -108
  2. package/css/esimflag.css +8 -0
  3. package/css/mistica.css +1 -1
  4. package/css/movistar.css +8 -0
  5. package/css/o2-new.css +8 -0
  6. package/css/o2.css +8 -0
  7. package/css/telefonica.css +8 -0
  8. package/css/tu.css +8 -0
  9. package/css/vivo-new.css +10 -2
  10. package/css/vivo.css +8 -0
  11. package/dist/accordion.css-mistica.js +11 -11
  12. package/dist/align.css-mistica.js +1 -1
  13. package/dist/avatar.css-mistica.js +1 -1
  14. package/dist/badge.css-mistica.js +1 -1
  15. package/dist/box.css-mistica.js +13 -13
  16. package/dist/boxed.css-mistica.js +24 -24
  17. package/dist/button-group.css-mistica.js +1 -1
  18. package/dist/button-layout.css-mistica.js +13 -13
  19. package/dist/button-layout.css.d.ts +3 -3
  20. package/dist/button.css-mistica.js +28 -28
  21. package/dist/callout.css-mistica.js +7 -7
  22. package/dist/callout.css.d.ts +1 -1
  23. package/dist/card.css-mistica.js +20 -20
  24. package/dist/carousel.css-mistica.js +28 -28
  25. package/dist/checkbox.css-mistica.js +11 -11
  26. package/dist/chip.css-mistica.js +16 -16
  27. package/dist/circle.css-mistica.js +1 -1
  28. package/dist/community/advanced-data-card.css-mistica.js +18 -18
  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 +2 -2
  32. package/dist/cover-hero.css-mistica.js +8 -8
  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 +8 -8
  37. package/dist/divider.css-mistica.js +2 -2
  38. package/dist/divider.css.d.ts +1 -1
  39. package/dist/double-field.css-mistica.js +2 -2
  40. package/dist/drawer.css-mistica.js +6 -6
  41. package/dist/empty-state-card.css-mistica.js +2 -2
  42. package/dist/empty-state.css-mistica.js +7 -7
  43. package/dist/fade-in.css-mistica.js +1 -1
  44. package/dist/feedback.css-mistica.js +1 -1
  45. package/dist/feedback.js +38 -38
  46. package/dist/fixed-footer-layout.css-mistica.js +8 -8
  47. package/dist/form.css-mistica.js +1 -1
  48. package/dist/grid-layout.css-mistica.js +3 -3
  49. package/dist/grid.css-mistica.js +122 -122
  50. package/dist/grid.css.d.ts +6 -6
  51. package/dist/header.css-mistica.js +4 -4
  52. package/dist/hero.css-mistica.js +4 -4
  53. package/dist/highlighted-card.css-mistica.js +4 -4
  54. package/dist/horizontal-scroll.css-mistica.js +2 -2
  55. package/dist/icon-button.css-mistica.js +42 -42
  56. package/dist/icons/icon-chevron.css-mistica.js +2 -2
  57. package/dist/icons/icon-error.css-mistica.js +1 -1
  58. package/dist/image.css-mistica.js +5 -5
  59. package/dist/inline.css-mistica.js +10 -10
  60. package/dist/list.css-mistica.js +16 -16
  61. package/dist/loading-bar.css-mistica.js +3 -3
  62. package/dist/loading-screen.css-mistica.js +5 -5
  63. package/dist/loading-screen.css.d.ts +1 -1
  64. package/dist/loading-screen.js +31 -31
  65. package/dist/logo.css-mistica.js +5 -5
  66. package/dist/maybe-dismissable.css-mistica.js +2 -2
  67. package/dist/menu.css-mistica.js +16 -16
  68. package/dist/mosaic.css-mistica.js +1 -1
  69. package/dist/navigation-bar.css-mistica.js +40 -40
  70. package/dist/navigation-bar.css.d.ts +3 -3
  71. package/dist/navigation-breadcrumbs.css-mistica.js +4 -4
  72. package/dist/package-version.js +1 -1
  73. package/dist/pin-field.css-mistica.js +4 -4
  74. package/dist/popover.css-mistica.js +1 -1
  75. package/dist/progress-bar.css-mistica.js +4 -4
  76. package/dist/progress-bar.css.d.ts +1 -1
  77. package/dist/radio-button.css-mistica.js +18 -18
  78. package/dist/rating.css-mistica.js +2 -2
  79. package/dist/responsive-layout.css-mistica.js +11 -11
  80. package/dist/screen-reader-only.css-mistica.js +1 -1
  81. package/dist/select.css-mistica.js +22 -22
  82. package/dist/sheet-action-row.css-mistica.js +1 -1
  83. package/dist/sheet-common.css-mistica.js +9 -9
  84. package/dist/sheet-info.css-mistica.js +1 -1
  85. package/dist/skeletons.css-mistica.js +6 -6
  86. package/dist/skeletons.css.d.ts +1 -1
  87. package/dist/skins/blau.d.ts +2 -0
  88. package/dist/skins/blau.js +66 -56
  89. package/dist/skins/defaults.d.ts +2 -1
  90. package/dist/skins/defaults.js +6 -0
  91. package/dist/skins/esimflag.js +8 -0
  92. package/dist/skins/movistar.js +4 -0
  93. package/dist/skins/o2-new.js +8 -0
  94. package/dist/skins/o2.js +8 -0
  95. package/dist/skins/skin-contract.css-mistica.js +352 -348
  96. package/dist/skins/skin-contract.css.d.ts +4 -0
  97. package/dist/skins/telefonica.js +8 -0
  98. package/dist/skins/tu.js +8 -0
  99. package/dist/skins/types/colors.d.ts +2 -0
  100. package/dist/skins/types/index.d.ts +7 -0
  101. package/dist/skins/vivo-new.js +9 -1
  102. package/dist/skins/vivo.js +8 -0
  103. package/dist/slider.css-mistica.js +17 -17
  104. package/dist/slider.css.d.ts +3 -3
  105. package/dist/snackbar.css-mistica.js +10 -10
  106. package/dist/spinner.css-mistica.js +1 -1
  107. package/dist/sprinkles.css.d.ts +3 -3
  108. package/dist/stack.css-mistica.js +5 -5
  109. package/dist/stacking-group.css-mistica.js +1 -1
  110. package/dist/stepper.css-mistica.js +11 -11
  111. package/dist/switch-component.css-mistica.js +34 -34
  112. package/dist/table.css-mistica.js +8 -8
  113. package/dist/table.css.d.ts +1 -1
  114. package/dist/tabs.css-mistica.js +19 -19
  115. package/dist/tabs.css.d.ts +1 -1
  116. package/dist/tag.css-mistica.js +3 -3
  117. package/dist/text-field-base.css-mistica.js +16 -16
  118. package/dist/text-field-components.css-mistica.js +9 -9
  119. package/dist/text-link.css-mistica.js +5 -5
  120. package/dist/text.css-mistica.js +7 -7
  121. package/dist/theme-context-provider.js +27 -26
  122. package/dist/theme-context.css-mistica.js +392 -388
  123. package/dist/theme-context.css.d.ts +4 -0
  124. package/dist/theme.d.ts +2 -1
  125. package/dist/timeline.css-mistica.js +10 -10
  126. package/dist/timeline.css.d.ts +1 -1
  127. package/dist/timer.css-mistica.js +6 -6
  128. package/dist/timer.css.d.ts +1 -1
  129. package/dist/tooltip.css-mistica.js +3 -3
  130. package/dist/touchable.css-mistica.js +1 -1
  131. package/dist/utils/aspect-ratio-support.css-mistica.js +3 -3
  132. package/dist/video.css-mistica.js +1 -1
  133. package/dist/vivinho-loading-animation/vivinho-loading-animation.css-mistica.js +1 -1
  134. package/dist-es/accordion.css-mistica.js +7 -7
  135. package/dist-es/align.css-mistica.js +1 -1
  136. package/dist-es/avatar.css-mistica.js +1 -1
  137. package/dist-es/badge.css-mistica.js +1 -1
  138. package/dist-es/box.css-mistica.js +13 -13
  139. package/dist-es/boxed.css-mistica.js +23 -23
  140. package/dist-es/button-group.css-mistica.js +1 -1
  141. package/dist-es/button-layout.css-mistica.js +13 -13
  142. package/dist-es/button.css-mistica.js +19 -19
  143. package/dist-es/callout.css-mistica.js +6 -6
  144. package/dist-es/card.css-mistica.js +4 -4
  145. package/dist-es/carousel.css-mistica.js +7 -7
  146. package/dist-es/checkbox.css-mistica.js +9 -9
  147. package/dist-es/chip.css-mistica.js +13 -13
  148. package/dist-es/circle.css-mistica.js +1 -1
  149. package/dist-es/community/advanced-data-card.css-mistica.js +7 -7
  150. package/dist-es/community/blocks.css-mistica.js +1 -1
  151. package/dist-es/community/example-component.css-mistica.js +1 -1
  152. package/dist-es/counter.css-mistica.js +2 -2
  153. package/dist-es/cover-hero.css-mistica.js +4 -4
  154. package/dist-es/credit-card-number-field.css-mistica.js +3 -3
  155. package/dist-es/date-field.css-mistica.js +1 -1
  156. package/dist-es/date-time-picker.css-mistica.js +1 -1
  157. package/dist-es/dialog.css-mistica.js +5 -5
  158. package/dist-es/divider.css-mistica.js +2 -2
  159. package/dist-es/double-field.css-mistica.js +2 -2
  160. package/dist-es/drawer.css-mistica.js +2 -2
  161. package/dist-es/empty-state-card.css-mistica.js +2 -2
  162. package/dist-es/empty-state.css-mistica.js +6 -6
  163. package/dist-es/fade-in.css-mistica.js +1 -1
  164. package/dist-es/feedback.css-mistica.js +1 -1
  165. package/dist-es/feedback.js +60 -60
  166. package/dist-es/fixed-footer-layout.css-mistica.js +5 -5
  167. package/dist-es/form.css-mistica.js +1 -1
  168. package/dist-es/grid-layout.css-mistica.js +3 -3
  169. package/dist-es/grid.css-mistica.js +122 -122
  170. package/dist-es/header.css-mistica.js +2 -2
  171. package/dist-es/hero.css-mistica.js +3 -3
  172. package/dist-es/highlighted-card.css-mistica.js +4 -4
  173. package/dist-es/horizontal-scroll.css-mistica.js +2 -2
  174. package/dist-es/icon-button.css-mistica.js +42 -42
  175. package/dist-es/icons/icon-chevron.css-mistica.js +2 -2
  176. package/dist-es/icons/icon-error.css-mistica.js +1 -1
  177. package/dist-es/image.css-mistica.js +4 -4
  178. package/dist-es/inline.css-mistica.js +10 -10
  179. package/dist-es/list.css-mistica.js +2 -2
  180. package/dist-es/loading-bar.css-mistica.js +2 -2
  181. package/dist-es/loading-screen.css-mistica.js +5 -5
  182. package/dist-es/loading-screen.js +56 -56
  183. package/dist-es/logo.css-mistica.js +5 -5
  184. package/dist-es/maybe-dismissable.css-mistica.js +2 -2
  185. package/dist-es/menu.css-mistica.js +14 -14
  186. package/dist-es/mosaic.css-mistica.js +1 -1
  187. package/dist-es/navigation-bar.css-mistica.js +17 -17
  188. package/dist-es/navigation-breadcrumbs.css-mistica.js +2 -2
  189. package/dist-es/package-version.js +1 -1
  190. package/dist-es/pin-field.css-mistica.js +2 -2
  191. package/dist-es/popover.css-mistica.js +1 -1
  192. package/dist-es/progress-bar.css-mistica.js +4 -4
  193. package/dist-es/radio-button.css-mistica.js +16 -16
  194. package/dist-es/rating.css-mistica.js +2 -2
  195. package/dist-es/responsive-layout.css-mistica.js +6 -6
  196. package/dist-es/screen-reader-only.css-mistica.js +1 -1
  197. package/dist-es/select.css-mistica.js +18 -18
  198. package/dist-es/sheet-action-row.css-mistica.js +1 -1
  199. package/dist-es/sheet-common.css-mistica.js +2 -2
  200. package/dist-es/sheet-info.css-mistica.js +1 -1
  201. package/dist-es/skeletons.css-mistica.js +5 -5
  202. package/dist-es/skins/blau.js +66 -56
  203. package/dist-es/skins/defaults.js +4 -1
  204. package/dist-es/skins/esimflag.js +8 -0
  205. package/dist-es/skins/movistar.js +4 -0
  206. package/dist-es/skins/o2-new.js +8 -0
  207. package/dist-es/skins/o2.js +8 -0
  208. package/dist-es/skins/skin-contract.css-mistica.js +352 -348
  209. package/dist-es/skins/telefonica.js +8 -0
  210. package/dist-es/skins/tu.js +8 -0
  211. package/dist-es/skins/vivo-new.js +9 -1
  212. package/dist-es/skins/vivo.js +8 -0
  213. package/dist-es/slider.css-mistica.js +11 -11
  214. package/dist-es/snackbar.css-mistica.js +5 -5
  215. package/dist-es/spinner.css-mistica.js +1 -1
  216. package/dist-es/stack.css-mistica.js +5 -5
  217. package/dist-es/stacking-group.css-mistica.js +1 -1
  218. package/dist-es/stepper.css-mistica.js +3 -3
  219. package/dist-es/style.css +1 -1
  220. package/dist-es/switch-component.css-mistica.js +28 -28
  221. package/dist-es/table.css-mistica.js +8 -8
  222. package/dist-es/tabs.css-mistica.js +14 -14
  223. package/dist-es/tag.css-mistica.js +2 -2
  224. package/dist-es/text-field-base.css-mistica.js +2 -2
  225. package/dist-es/text-field-components.css-mistica.js +4 -4
  226. package/dist-es/text-link.css-mistica.js +5 -5
  227. package/dist-es/text.css-mistica.js +7 -7
  228. package/dist-es/theme-context-provider.js +47 -46
  229. package/dist-es/theme-context.css-mistica.js +392 -388
  230. package/dist-es/timeline.css-mistica.js +10 -10
  231. package/dist-es/timer.css-mistica.js +6 -6
  232. package/dist-es/tooltip.css-mistica.js +2 -2
  233. package/dist-es/touchable.css-mistica.js +1 -1
  234. package/dist-es/utils/aspect-ratio-support.css-mistica.js +3 -3
  235. package/dist-es/video.css-mistica.js +1 -1
  236. package/dist-es/vivinho-loading-animation/vivinho-loading-animation.css-mistica.js +1 -1
  237. package/package.json +1 -1
package/css/blau.css CHANGED
@@ -1,37 +1,40 @@
1
1
  [data-mistica-skin='blau'] {
2
2
  /* Palette colors */
3
- --mistica-blau-blauBluePrimary: #00b6f1;
4
3
  --mistica-blau-white: #ffffff;
4
+ --mistica-blau-blauBluePrimary20: #e5f6fd;
5
+ --mistica-blau-blauBluePrimary: #00b6f1;
5
6
  --mistica-blau-blauRed10: #feece8;
6
7
  --mistica-blau-blauBlueSecondary: #0072bc;
7
- --mistica-blau-blauBluePrimary20: #e5f6fd;
8
- --mistica-blau-grey2: #e7e7e7;
9
- --mistica-blau-grey1: #f5f9fa;
10
- --mistica-blau-grey5: #808285;
11
8
  --mistica-blau-blauBlueSecondary60: #005a99;
12
- --mistica-blau-blauRed: #f64417;
13
- --mistica-blau-blauRed70: #c93712;
9
+ --mistica-blau-grey3: #dddddd;
10
+ --mistica-blau-grey2: #f2f2f2;
11
+ --mistica-blau-grey1: #f6f6f6;
12
+ --mistica-blau-grey5: #666666;
13
+ --mistica-blau-blauRed: #d12937;
14
+ --mistica-blau-blauRed70: #bc3310;
14
15
  --mistica-blau-blauPurple10: #f1e7f7;
15
16
  --mistica-blau-blauBluePrimary30: #b3e9fb;
16
17
  --mistica-blau-blauBlueSecondary10: #e5f1f9;
17
18
  --mistica-blau-blauPurple: #7814b3;
18
19
  --mistica-blau-blauPurple30: #bb89d9;
20
+ --mistica-blau-grey4: #8a8c90;
21
+ --mistica-blau-blauBlueSecondary20: #b2d4ec;
22
+ --mistica-blau-blauBlueSecondary30: #80b7df;
19
23
  --mistica-blau-grey6: #000000;
20
- --mistica-blau-blauGreen: #30d300;
21
- --mistica-blau-blauYellow: #ffa922;
24
+ --mistica-blau-blauGreen70: #1d7f00;
25
+ --mistica-blau-blauYellow65: #d28200;
22
26
  --mistica-blau-blauGreen10: #eafbe5;
23
27
  --mistica-blau-blauYellow10: #fff6e9;
24
- --mistica-blau-blauGreen70: #1d7f00;
25
28
  --mistica-blau-blauYellow70: #996614;
26
- --mistica-blau-blauBlueSecondary20: #b2d4ec;
27
29
  --mistica-blau-darkModeBlack: #191919;
28
30
  --mistica-blau-darkModeGrey: #242424;
31
+ --mistica-blau-blauRed40: #f97c5d;
32
+ --mistica-blau-darkModeGrey5: #6d7d88;
29
33
  --mistica-blau-darkModeGrey6: #313235;
30
- --mistica-blau-blauBlueSecondary30: #80b7df;
31
- --mistica-blau-grey4: #a0a0a0;
34
+ --mistica-blau-blauGreen: #30d300;
35
+ --mistica-blau-blauYellow: #ffa922;
32
36
  --mistica-blau-blauGreen30: #97e980;
33
37
  --mistica-blau-blauYellow40: #ffc364;
34
- --mistica-blau-blauRed40: #f97c5d;
35
38
 
36
39
  /* Raw palette colors, for use with rgba() */
37
40
  --mistica-blau-raw-blauBlueSecondary: 0, 114, 188;
@@ -39,34 +42,37 @@
39
42
  --mistica-blau-raw-white: 255, 255, 255;
40
43
  --mistica-blau-raw-grey6: 0, 0, 0;
41
44
  --mistica-blau-raw-darkModeGrey: 36, 36, 36;
45
+ --mistica-blau-raw-blauRed: 209, 41, 55;
42
46
  --mistica-blau-raw-blauPurple: 120, 20, 179;
43
47
 
44
48
  /* Colors */
49
+ --mistica-color-background: var(--mistica-blau-white);
50
+ --mistica-color-backgroundAlternative: var(--mistica-blau-blauBluePrimary20);
45
51
  --mistica-color-backgroundBrand: var(--mistica-blau-blauBluePrimary);
46
52
  --mistica-color-backgroundBrandSecondary: var(--mistica-blau-blauBluePrimary);
47
- --mistica-color-appBarBackground: var(--mistica-blau-white);
48
- --mistica-color-background: var(--mistica-blau-white);
49
53
  --mistica-color-backgroundContainer: var(--mistica-blau-white);
50
54
  --mistica-color-backgroundContainerError: var(--mistica-blau-blauRed10);
51
55
  --mistica-color-backgroundContainerHover: rgba(var(--mistica-blau-raw-blauBlueSecondary), 0.05);
52
56
  --mistica-color-backgroundContainerPressed: rgba(var(--mistica-blau-raw-blauBlueSecondary), 0.08);
53
- --mistica-color-backgroundContainerBrand: var(--mistica-blau-blauBluePrimary);
57
+ --mistica-color-backgroundContainerBrand: var(--mistica-blau-blauBlueSecondary);
54
58
  --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-blau-raw-darkModeBlack), 0.2);
55
59
  --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-blau-raw-darkModeBlack), 0.4);
56
- --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-blau-blauBlueSecondary);
60
+ --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-blau-blauBlueSecondary60);
57
61
  --mistica-color-backgroundContainerAlternative: var(--mistica-blau-blauBluePrimary20);
58
62
  --mistica-color-backgroundOverlay: rgba(var(--mistica-blau-raw-blauBlueSecondary), 0.75);
59
- --mistica-color-backgroundSkeleton: var(--mistica-blau-grey2);
63
+ --mistica-color-backgroundSkeleton: var(--mistica-blau-grey3);
60
64
  --mistica-color-backgroundSkeletonInverse: var(--mistica-blau-blauBlueSecondary);
61
- --mistica-color-navigationBarBackground: var(--mistica-blau-blauBluePrimary);
62
- --mistica-color-backgroundAlternative: var(--mistica-blau-blauBluePrimary20);
63
65
  --mistica-color-backgroundBrandTop: var(--mistica-blau-blauBluePrimary);
64
66
  --mistica-color-backgroundBrandBottom: var(--mistica-blau-blauBluePrimary);
67
+ --mistica-color-appBarBackground: var(--mistica-blau-white);
68
+ --mistica-color-navigationBarBackground: var(--mistica-blau-blauBluePrimary);
65
69
  --mistica-color-skeletonWave: var(--mistica-blau-grey2);
66
70
  --mistica-color-borderLow: var(--mistica-blau-grey1);
67
- --mistica-color-border: var(--mistica-blau-grey2);
71
+ --mistica-color-border: var(--mistica-blau-grey3);
68
72
  --mistica-color-borderHigh: var(--mistica-blau-grey5);
69
73
  --mistica-color-borderSelected: var(--mistica-blau-blauBlueSecondary60);
74
+ --mistica-color-completedStep: var(--mistica-blau-blauBlueSecondary);
75
+ --mistica-color-completedStepInverse: var(--mistica-blau-blauBlueSecondary60);
70
76
  --mistica-color-coverBackgroundHover: rgba(var(--mistica-blau-raw-darkModeBlack), 0.25);
71
77
  --mistica-color-coverBackgroundPressed: rgba(var(--mistica-blau-raw-darkModeBlack), 0.35);
72
78
  --mistica-color-buttonDangerBackground: var(--mistica-blau-blauRed);
@@ -103,28 +109,28 @@
103
109
  --mistica-color-textLinkSnackbar: var(--mistica-blau-blauPurple30);
104
110
  --mistica-color-textActivated: var(--mistica-blau-blauBlueSecondary);
105
111
  --mistica-color-textBrand: var(--mistica-blau-blauBluePrimary);
106
- --mistica-color-inputBorder: var(--mistica-blau-grey5);
107
- --mistica-color-control: var(--mistica-blau-grey5);
112
+ --mistica-color-inputBorder: var(--mistica-blau-grey4);
113
+ --mistica-color-control: var(--mistica-blau-grey4);
108
114
  --mistica-color-controlActivated: var(--mistica-blau-blauBlueSecondary);
109
115
  --mistica-color-controlInverse: var(--mistica-blau-blauBluePrimary30);
110
116
  --mistica-color-controlActivatedInverse: var(--mistica-blau-white);
111
117
  --mistica-color-controlError: var(--mistica-blau-blauRed);
112
- --mistica-color-barTrack: var(--mistica-blau-grey2);
118
+ --mistica-color-barTrack: var(--mistica-blau-grey3);
113
119
  --mistica-color-barTrackInverse: rgba(var(--mistica-blau-raw-grey6), 0.2);
114
120
  --mistica-color-loadingBar: var(--mistica-blau-blauBlueSecondary);
115
- --mistica-color-loadingBarBackground: var(--mistica-blau-blauBlueSecondary10);
121
+ --mistica-color-loadingBarBackground: var(--mistica-blau-blauBlueSecondary20);
116
122
  --mistica-color-toggleAndroidInactive: var(--mistica-blau-grey2);
117
- --mistica-color-toggleAndroidBackgroundActive: var(--mistica-blau-blauBlueSecondary10);
123
+ --mistica-color-toggleAndroidBackgroundActive: var(--mistica-blau-blauBlueSecondary30);
118
124
  --mistica-color-iosControlKnob: var(--mistica-blau-white);
119
125
  --mistica-color-controlKnobInverse: var(--mistica-blau-blauBlueSecondary);
120
- --mistica-color-divider: var(--mistica-blau-grey2);
126
+ --mistica-color-divider: var(--mistica-blau-grey3);
121
127
  --mistica-color-dividerInverse: rgba(var(--mistica-blau-raw-white), 0.2);
122
128
  --mistica-color-navigationBarDivider: var(--mistica-blau-blauBluePrimary);
123
129
  --mistica-color-badge: var(--mistica-blau-blauRed);
124
130
  --mistica-color-feedbackErrorBackground: var(--mistica-blau-blauRed);
125
131
  --mistica-color-feedbackInfoBackground: var(--mistica-blau-grey6);
126
132
  --mistica-color-brand: var(--mistica-blau-blauBluePrimary);
127
- --mistica-color-brandHigh: var(--mistica-blau-blauBlueSecondary);
133
+ --mistica-color-brandHigh: var(--mistica-blau-blauBlueSecondary60);
128
134
  --mistica-color-inverse: var(--mistica-blau-white);
129
135
  --mistica-color-neutralHigh: var(--mistica-blau-grey6);
130
136
  --mistica-color-neutralMedium: var(--mistica-blau-grey5);
@@ -138,15 +144,15 @@
138
144
  --mistica-color-error: var(--mistica-blau-blauRed);
139
145
  --mistica-color-textError: var(--mistica-blau-blauRed);
140
146
  --mistica-color-textErrorInverse: var(--mistica-blau-white);
141
- --mistica-color-success: var(--mistica-blau-blauGreen);
142
- --mistica-color-warning: var(--mistica-blau-blauYellow);
147
+ --mistica-color-success: var(--mistica-blau-blauGreen70);
148
+ --mistica-color-warning: var(--mistica-blau-blauYellow65);
143
149
  --mistica-color-promo: var(--mistica-blau-blauPurple);
144
150
  --mistica-color-highlight: var(--mistica-blau-blauBluePrimary);
145
151
  --mistica-color-successLow: var(--mistica-blau-blauGreen10);
146
152
  --mistica-color-warningLow: var(--mistica-blau-blauYellow10);
147
153
  --mistica-color-errorLow: var(--mistica-blau-blauRed10);
148
154
  --mistica-color-promoLow: var(--mistica-blau-blauPurple10);
149
- --mistica-color-brandLow: var(--mistica-blau-blauBlueSecondary10);
155
+ --mistica-color-brandLow: var(--mistica-blau-blauBluePrimary20);
150
156
  --mistica-color-successHigh: var(--mistica-blau-blauGreen70);
151
157
  --mistica-color-warningHigh: var(--mistica-blau-blauYellow70);
152
158
  --mistica-color-errorHigh: var(--mistica-blau-blauRed70);
@@ -155,38 +161,38 @@
155
161
  --mistica-color-warningHighInverse: var(--mistica-blau-blauYellow70);
156
162
  --mistica-color-errorHighInverse: var(--mistica-blau-blauRed70);
157
163
  --mistica-color-promoHighInverse: var(--mistica-blau-blauPurple);
158
- --mistica-color-textNavigationBarPrimary: var(--mistica-blau-white);
159
- --mistica-color-textNavigationBarSecondary: var(--mistica-blau-blauBlueSecondary20);
160
- --mistica-color-textNavigationSearchBarHint: var(--mistica-blau-blauBlueSecondary20);
161
- --mistica-color-textNavigationSearchBarText: var(--mistica-blau-white);
164
+ --mistica-color-textNavigationBarPrimary: var(--mistica-blau-grey6);
165
+ --mistica-color-textNavigationBarSecondary: var(--mistica-blau-grey6);
166
+ --mistica-color-textNavigationSearchBarHint: var(--mistica-blau-grey6);
167
+ --mistica-color-textNavigationSearchBarText: var(--mistica-blau-grey6);
162
168
  --mistica-color-textAppBar: var(--mistica-blau-grey5);
163
169
  --mistica-color-textAppBarSelected: var(--mistica-blau-blauBlueSecondary60);
164
170
  --mistica-color-customTabsBackground: var(--mistica-blau-blauBluePrimary);
165
171
  --mistica-color-tagTextPromo: var(--mistica-blau-blauPurple);
166
- --mistica-color-tagTextActive: var(--mistica-blau-blauBluePrimary);
172
+ --mistica-color-tagTextActive: var(--mistica-blau-blauBlueSecondary);
167
173
  --mistica-color-tagTextInactive: var(--mistica-blau-grey5);
168
- --mistica-color-tagTextInfo: var(--mistica-blau-blauBluePrimary);
174
+ --mistica-color-tagTextInfo: var(--mistica-blau-blauBlueSecondary);
169
175
  --mistica-color-tagTextSuccess: var(--mistica-blau-blauGreen70);
170
176
  --mistica-color-tagTextWarning: var(--mistica-blau-blauYellow70);
171
177
  --mistica-color-tagTextError: var(--mistica-blau-blauRed70);
172
178
  --mistica-color-tagBackgroundPromo: var(--mistica-blau-blauPurple10);
173
- --mistica-color-tagBackgroundActive: var(--mistica-blau-blauBlueSecondary10);
179
+ --mistica-color-tagBackgroundActive: var(--mistica-blau-blauBluePrimary20);
174
180
  --mistica-color-tagBackgroundInactive: var(--mistica-blau-grey1);
175
- --mistica-color-tagBackgroundInfo: var(--mistica-blau-blauBlueSecondary10);
181
+ --mistica-color-tagBackgroundInfo: var(--mistica-blau-blauBluePrimary20);
176
182
  --mistica-color-tagBackgroundSuccess: var(--mistica-blau-blauGreen10);
177
183
  --mistica-color-tagBackgroundWarning: var(--mistica-blau-blauYellow10);
178
184
  --mistica-color-tagBackgroundError: var(--mistica-blau-blauRed10);
179
185
  --mistica-color-tagTextPromoInverse: var(--mistica-blau-blauPurple);
180
- --mistica-color-tagTextActiveInverse: var(--mistica-blau-blauBluePrimary);
186
+ --mistica-color-tagTextActiveInverse: var(--mistica-blau-blauBlueSecondary);
181
187
  --mistica-color-tagTextInactiveInverse: var(--mistica-blau-grey5);
182
- --mistica-color-tagTextInfoInverse: var(--mistica-blau-blauBluePrimary);
188
+ --mistica-color-tagTextInfoInverse: var(--mistica-blau-blauBlueSecondary);
183
189
  --mistica-color-tagTextSuccessInverse: var(--mistica-blau-blauGreen70);
184
190
  --mistica-color-tagTextWarningInverse: var(--mistica-blau-blauYellow70);
185
191
  --mistica-color-tagTextErrorInverse: var(--mistica-blau-blauRed70);
186
192
  --mistica-color-tagBackgroundPromoInverse: var(--mistica-blau-blauPurple10);
187
- --mistica-color-tagBackgroundActiveInverse: var(--mistica-blau-blauBlueSecondary10);
193
+ --mistica-color-tagBackgroundActiveInverse: var(--mistica-blau-blauBluePrimary20);
188
194
  --mistica-color-tagBackgroundInactiveInverse: var(--mistica-blau-grey1);
189
- --mistica-color-tagBackgroundInfoInverse: var(--mistica-blau-blauBlueSecondary10);
195
+ --mistica-color-tagBackgroundInfoInverse: var(--mistica-blau-blauBluePrimary20);
190
196
  --mistica-color-tagBackgroundSuccessInverse: var(--mistica-blau-blauGreen10);
191
197
  --mistica-color-tagBackgroundWarningInverse: var(--mistica-blau-blauYellow10);
192
198
  --mistica-color-tagBackgroundErrorInverse: var(--mistica-blau-blauRed10);
@@ -280,18 +286,20 @@
280
286
  --mistica-color-border: var(--mistica-blau-darkModeGrey);
281
287
  --mistica-color-borderHigh: var(--mistica-blau-grey5);
282
288
  --mistica-color-borderSelected: var(--mistica-blau-blauBlueSecondary60);
289
+ --mistica-color-completedStep: var(--mistica-blau-blauBlueSecondary);
290
+ --mistica-color-completedStepInverse: var(--mistica-blau-blauBlueSecondary);
283
291
  --mistica-color-coverBackgroundHover: rgba(var(--mistica-blau-raw-darkModeBlack), 0.25);
284
292
  --mistica-color-coverBackgroundPressed: rgba(var(--mistica-blau-raw-darkModeBlack), 0.35);
285
293
  --mistica-color-buttonDangerBackground: var(--mistica-blau-blauRed);
286
294
  --mistica-color-buttonDangerBackgroundPressed: var(--mistica-blau-blauRed70);
287
295
  --mistica-color-buttonDangerBackgroundHover: var(--mistica-blau-blauRed70);
288
- --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
296
+ --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-blau-raw-blauRed), 0.3);
289
297
  --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-blau-raw-white), 0);
290
298
  --mistica-color-buttonLinkDangerBackgroundInversePressed: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
291
299
  --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
292
300
  --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
293
301
  --mistica-color-buttonPrimaryBackground: var(--mistica-blau-blauBlueSecondary);
294
- --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-blau-blauBluePrimary);
302
+ --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-blau-blauBlueSecondary);
295
303
  --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-blau-blauBlueSecondary60);
296
304
  --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-blau-blauBlueSecondary60);
297
305
  --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-blau-blauBlueSecondary60);
@@ -312,25 +320,25 @@
312
320
  --mistica-color-textButtonSecondaryInversePressed: var(--mistica-blau-grey2);
313
321
  --mistica-color-textLink: var(--mistica-blau-blauPurple30);
314
322
  --mistica-color-textLinkInverse: var(--mistica-blau-blauPurple30);
315
- --mistica-color-textLinkDanger: var(--mistica-blau-blauRed);
323
+ --mistica-color-textLinkDanger: var(--mistica-blau-blauRed40);
316
324
  --mistica-color-textLinkSnackbar: var(--mistica-blau-blauPurple30);
317
- --mistica-color-textActivated: var(--mistica-blau-blauBlueSecondary);
325
+ --mistica-color-textActivated: var(--mistica-blau-blauBluePrimary);
318
326
  --mistica-color-textBrand: var(--mistica-blau-blauBluePrimary);
319
- --mistica-color-inputBorder: var(--mistica-blau-grey5);
320
- --mistica-color-control: var(--mistica-blau-darkModeGrey6);
327
+ --mistica-color-inputBorder: var(--mistica-blau-darkModeGrey5);
328
+ --mistica-color-control: var(--mistica-blau-grey4);
321
329
  --mistica-color-controlActivated: var(--mistica-blau-blauBlueSecondary);
322
- --mistica-color-controlInverse: var(--mistica-blau-darkModeGrey6);
330
+ --mistica-color-controlInverse: var(--mistica-blau-grey4);
323
331
  --mistica-color-controlActivatedInverse: var(--mistica-blau-blauBlueSecondary);
324
332
  --mistica-color-controlError: var(--mistica-blau-blauRed);
325
- --mistica-color-barTrack: var(--mistica-blau-darkModeGrey6);
326
- --mistica-color-barTrackInverse: var(--mistica-blau-darkModeGrey6);
333
+ --mistica-color-barTrack: var(--mistica-blau-grey5);
334
+ --mistica-color-barTrackInverse: var(--mistica-blau-grey5);
327
335
  --mistica-color-loadingBar: var(--mistica-blau-blauBluePrimary);
328
- --mistica-color-loadingBarBackground: var(--mistica-blau-darkModeGrey);
329
- --mistica-color-toggleAndroidInactive: var(--mistica-blau-grey5);
330
- --mistica-color-toggleAndroidBackgroundActive: var(--mistica-blau-blauBlueSecondary30);
336
+ --mistica-color-loadingBarBackground: var(--mistica-blau-grey5);
337
+ --mistica-color-toggleAndroidInactive: var(--mistica-blau-grey3);
338
+ --mistica-color-toggleAndroidBackgroundActive: var(--mistica-blau-blauBluePrimary30);
331
339
  --mistica-color-iosControlKnob: var(--mistica-blau-grey2);
332
340
  --mistica-color-controlKnobInverse: var(--mistica-blau-grey2);
333
- --mistica-color-divider: rgba(var(--mistica-blau-raw-white), 0.05);
341
+ --mistica-color-divider: rgba(var(--mistica-blau-raw-white), 0.09);
334
342
  --mistica-color-dividerInverse: rgba(var(--mistica-blau-raw-white), 0.05);
335
343
  --mistica-color-navigationBarDivider: var(--mistica-blau-darkModeBlack);
336
344
  --mistica-color-badge: var(--mistica-blau-blauRed);
@@ -340,8 +348,8 @@
340
348
  --mistica-color-brandHigh: rgba(var(--mistica-blau-raw-white), 0.05);
341
349
  --mistica-color-inverse: var(--mistica-blau-grey2);
342
350
  --mistica-color-neutralHigh: var(--mistica-blau-grey2);
343
- --mistica-color-neutralMedium: var(--mistica-blau-grey5);
344
- --mistica-color-neutralMediumInverse: var(--mistica-blau-grey5);
351
+ --mistica-color-neutralMedium: var(--mistica-blau-grey4);
352
+ --mistica-color-neutralMediumInverse: var(--mistica-blau-grey4);
345
353
  --mistica-color-neutralLow: var(--mistica-blau-darkModeGrey6);
346
354
  --mistica-color-neutralLowAlternative: var(--mistica-blau-darkModeGrey6);
347
355
  --mistica-color-textPrimary: var(--mistica-blau-grey2);
@@ -349,8 +357,8 @@
349
357
  --mistica-color-textSecondary: var(--mistica-blau-grey4);
350
358
  --mistica-color-textSecondaryInverse: var(--mistica-blau-grey4);
351
359
  --mistica-color-error: var(--mistica-blau-blauRed);
352
- --mistica-color-textError: var(--mistica-blau-blauRed);
353
- --mistica-color-textErrorInverse: var(--mistica-blau-blauRed);
360
+ --mistica-color-textError: var(--mistica-blau-blauRed40);
361
+ --mistica-color-textErrorInverse: var(--mistica-blau-blauRed40);
354
362
  --mistica-color-success: var(--mistica-blau-blauGreen);
355
363
  --mistica-color-warning: var(--mistica-blau-blauYellow);
356
364
  --mistica-color-promo: var(--mistica-blau-blauPurple);
@@ -377,7 +385,7 @@
377
385
  --mistica-color-customTabsBackground: var(--mistica-blau-darkModeBlack);
378
386
  --mistica-color-tagTextPromo: var(--mistica-blau-blauPurple30);
379
387
  --mistica-color-tagTextActive: var(--mistica-blau-blauBluePrimary);
380
- --mistica-color-tagTextInactive: var(--mistica-blau-grey5);
388
+ --mistica-color-tagTextInactive: var(--mistica-blau-grey4);
381
389
  --mistica-color-tagTextInfo: var(--mistica-blau-blauBluePrimary);
382
390
  --mistica-color-tagTextSuccess: var(--mistica-blau-blauGreen30);
383
391
  --mistica-color-tagTextWarning: var(--mistica-blau-blauYellow40);
@@ -391,7 +399,7 @@
391
399
  --mistica-color-tagBackgroundError: var(--mistica-blau-darkModeGrey6);
392
400
  --mistica-color-tagTextPromoInverse: var(--mistica-blau-blauPurple30);
393
401
  --mistica-color-tagTextActiveInverse: var(--mistica-blau-blauBluePrimary);
394
- --mistica-color-tagTextInactiveInverse: var(--mistica-blau-grey5);
402
+ --mistica-color-tagTextInactiveInverse: var(--mistica-blau-grey4);
395
403
  --mistica-color-tagTextInfoInverse: var(--mistica-blau-blauBluePrimary);
396
404
  --mistica-color-tagTextSuccessInverse: var(--mistica-blau-blauGreen30);
397
405
  --mistica-color-tagTextWarningInverse: var(--mistica-blau-blauYellow40);
@@ -438,12 +446,14 @@
438
446
  --mistica-color-border: var(--mistica-blau-darkModeGrey);
439
447
  --mistica-color-borderHigh: var(--mistica-blau-grey5);
440
448
  --mistica-color-borderSelected: var(--mistica-blau-blauBlueSecondary60);
449
+ --mistica-color-completedStep: var(--mistica-blau-blauBlueSecondary);
450
+ --mistica-color-completedStepInverse: var(--mistica-blau-blauBlueSecondary);
441
451
  --mistica-color-coverBackgroundHover: rgba(var(--mistica-blau-raw-darkModeBlack), 0.25);
442
452
  --mistica-color-coverBackgroundPressed: rgba(var(--mistica-blau-raw-darkModeBlack), 0.35);
443
453
  --mistica-color-buttonDangerBackground: var(--mistica-blau-blauRed);
444
454
  --mistica-color-buttonDangerBackgroundPressed: var(--mistica-blau-blauRed70);
445
455
  --mistica-color-buttonDangerBackgroundHover: var(--mistica-blau-blauRed70);
446
- --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
456
+ --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-blau-raw-blauRed), 0.3);
447
457
  --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-blau-raw-white), 0);
448
458
  --mistica-color-buttonLinkDangerBackgroundInversePressed: rgba(
449
459
  var(--mistica-blau-raw-blauPurple),
@@ -452,7 +462,7 @@
452
462
  --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
453
463
  --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
454
464
  --mistica-color-buttonPrimaryBackground: var(--mistica-blau-blauBlueSecondary);
455
- --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-blau-blauBluePrimary);
465
+ --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-blau-blauBlueSecondary);
456
466
  --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-blau-blauBlueSecondary60);
457
467
  --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-blau-blauBlueSecondary60);
458
468
  --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-blau-blauBlueSecondary60);
@@ -473,25 +483,25 @@
473
483
  --mistica-color-textButtonSecondaryInversePressed: var(--mistica-blau-grey2);
474
484
  --mistica-color-textLink: var(--mistica-blau-blauPurple30);
475
485
  --mistica-color-textLinkInverse: var(--mistica-blau-blauPurple30);
476
- --mistica-color-textLinkDanger: var(--mistica-blau-blauRed);
486
+ --mistica-color-textLinkDanger: var(--mistica-blau-blauRed40);
477
487
  --mistica-color-textLinkSnackbar: var(--mistica-blau-blauPurple30);
478
- --mistica-color-textActivated: var(--mistica-blau-blauBlueSecondary);
488
+ --mistica-color-textActivated: var(--mistica-blau-blauBluePrimary);
479
489
  --mistica-color-textBrand: var(--mistica-blau-blauBluePrimary);
480
- --mistica-color-inputBorder: var(--mistica-blau-grey5);
481
- --mistica-color-control: var(--mistica-blau-darkModeGrey6);
490
+ --mistica-color-inputBorder: var(--mistica-blau-darkModeGrey5);
491
+ --mistica-color-control: var(--mistica-blau-grey4);
482
492
  --mistica-color-controlActivated: var(--mistica-blau-blauBlueSecondary);
483
- --mistica-color-controlInverse: var(--mistica-blau-darkModeGrey6);
493
+ --mistica-color-controlInverse: var(--mistica-blau-grey4);
484
494
  --mistica-color-controlActivatedInverse: var(--mistica-blau-blauBlueSecondary);
485
495
  --mistica-color-controlError: var(--mistica-blau-blauRed);
486
- --mistica-color-barTrack: var(--mistica-blau-darkModeGrey6);
487
- --mistica-color-barTrackInverse: var(--mistica-blau-darkModeGrey6);
496
+ --mistica-color-barTrack: var(--mistica-blau-grey5);
497
+ --mistica-color-barTrackInverse: var(--mistica-blau-grey5);
488
498
  --mistica-color-loadingBar: var(--mistica-blau-blauBluePrimary);
489
- --mistica-color-loadingBarBackground: var(--mistica-blau-darkModeGrey);
490
- --mistica-color-toggleAndroidInactive: var(--mistica-blau-grey5);
491
- --mistica-color-toggleAndroidBackgroundActive: var(--mistica-blau-blauBlueSecondary30);
499
+ --mistica-color-loadingBarBackground: var(--mistica-blau-grey5);
500
+ --mistica-color-toggleAndroidInactive: var(--mistica-blau-grey3);
501
+ --mistica-color-toggleAndroidBackgroundActive: var(--mistica-blau-blauBluePrimary30);
492
502
  --mistica-color-iosControlKnob: var(--mistica-blau-grey2);
493
503
  --mistica-color-controlKnobInverse: var(--mistica-blau-grey2);
494
- --mistica-color-divider: rgba(var(--mistica-blau-raw-white), 0.05);
504
+ --mistica-color-divider: rgba(var(--mistica-blau-raw-white), 0.09);
495
505
  --mistica-color-dividerInverse: rgba(var(--mistica-blau-raw-white), 0.05);
496
506
  --mistica-color-navigationBarDivider: var(--mistica-blau-darkModeBlack);
497
507
  --mistica-color-badge: var(--mistica-blau-blauRed);
@@ -501,8 +511,8 @@
501
511
  --mistica-color-brandHigh: rgba(var(--mistica-blau-raw-white), 0.05);
502
512
  --mistica-color-inverse: var(--mistica-blau-grey2);
503
513
  --mistica-color-neutralHigh: var(--mistica-blau-grey2);
504
- --mistica-color-neutralMedium: var(--mistica-blau-grey5);
505
- --mistica-color-neutralMediumInverse: var(--mistica-blau-grey5);
514
+ --mistica-color-neutralMedium: var(--mistica-blau-grey4);
515
+ --mistica-color-neutralMediumInverse: var(--mistica-blau-grey4);
506
516
  --mistica-color-neutralLow: var(--mistica-blau-darkModeGrey6);
507
517
  --mistica-color-neutralLowAlternative: var(--mistica-blau-darkModeGrey6);
508
518
  --mistica-color-textPrimary: var(--mistica-blau-grey2);
@@ -510,8 +520,8 @@
510
520
  --mistica-color-textSecondary: var(--mistica-blau-grey4);
511
521
  --mistica-color-textSecondaryInverse: var(--mistica-blau-grey4);
512
522
  --mistica-color-error: var(--mistica-blau-blauRed);
513
- --mistica-color-textError: var(--mistica-blau-blauRed);
514
- --mistica-color-textErrorInverse: var(--mistica-blau-blauRed);
523
+ --mistica-color-textError: var(--mistica-blau-blauRed40);
524
+ --mistica-color-textErrorInverse: var(--mistica-blau-blauRed40);
515
525
  --mistica-color-success: var(--mistica-blau-blauGreen);
516
526
  --mistica-color-warning: var(--mistica-blau-blauYellow);
517
527
  --mistica-color-promo: var(--mistica-blau-blauPurple);
@@ -538,7 +548,7 @@
538
548
  --mistica-color-customTabsBackground: var(--mistica-blau-darkModeBlack);
539
549
  --mistica-color-tagTextPromo: var(--mistica-blau-blauPurple30);
540
550
  --mistica-color-tagTextActive: var(--mistica-blau-blauBluePrimary);
541
- --mistica-color-tagTextInactive: var(--mistica-blau-grey5);
551
+ --mistica-color-tagTextInactive: var(--mistica-blau-grey4);
542
552
  --mistica-color-tagTextInfo: var(--mistica-blau-blauBluePrimary);
543
553
  --mistica-color-tagTextSuccess: var(--mistica-blau-blauGreen30);
544
554
  --mistica-color-tagTextWarning: var(--mistica-blau-blauYellow40);
@@ -552,7 +562,7 @@
552
562
  --mistica-color-tagBackgroundError: var(--mistica-blau-darkModeGrey6);
553
563
  --mistica-color-tagTextPromoInverse: var(--mistica-blau-blauPurple30);
554
564
  --mistica-color-tagTextActiveInverse: var(--mistica-blau-blauBluePrimary);
555
- --mistica-color-tagTextInactiveInverse: var(--mistica-blau-grey5);
565
+ --mistica-color-tagTextInactiveInverse: var(--mistica-blau-grey4);
556
566
  --mistica-color-tagTextInfoInverse: var(--mistica-blau-blauBluePrimary);
557
567
  --mistica-color-tagTextSuccessInverse: var(--mistica-blau-blauGreen30);
558
568
  --mistica-color-tagTextWarningInverse: var(--mistica-blau-blauYellow40);
@@ -581,13 +591,13 @@
581
591
  --mistica-color-backgroundContainerError: var(--mistica-blau-blauRed10);
582
592
  --mistica-color-backgroundContainerHover: rgba(var(--mistica-blau-raw-blauBlueSecondary), 0.05);
583
593
  --mistica-color-backgroundContainerPressed: rgba(var(--mistica-blau-raw-blauBlueSecondary), 0.08);
584
- --mistica-color-backgroundContainerBrand: var(--mistica-blau-blauBluePrimary);
594
+ --mistica-color-backgroundContainerBrand: var(--mistica-blau-blauBlueSecondary);
585
595
  --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-blau-raw-darkModeBlack), 0.2);
586
596
  --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-blau-raw-darkModeBlack), 0.4);
587
- --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-blau-blauBlueSecondary);
597
+ --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-blau-blauBlueSecondary60);
588
598
  --mistica-color-backgroundContainerAlternative: var(--mistica-blau-blauBluePrimary20);
589
599
  --mistica-color-backgroundOverlay: rgba(var(--mistica-blau-raw-blauBlueSecondary), 0.75);
590
- --mistica-color-backgroundSkeleton: var(--mistica-blau-grey2);
600
+ --mistica-color-backgroundSkeleton: var(--mistica-blau-grey3);
591
601
  --mistica-color-backgroundSkeletonInverse: var(--mistica-blau-blauBlueSecondary);
592
602
  --mistica-color-backgroundBrandTop: var(--mistica-blau-blauBluePrimary);
593
603
  --mistica-color-backgroundBrandBottom: var(--mistica-blau-blauBluePrimary);
@@ -595,9 +605,11 @@
595
605
  --mistica-color-navigationBarBackground: var(--mistica-blau-blauBluePrimary);
596
606
  --mistica-color-skeletonWave: var(--mistica-blau-grey2);
597
607
  --mistica-color-borderLow: var(--mistica-blau-grey1);
598
- --mistica-color-border: var(--mistica-blau-grey2);
608
+ --mistica-color-border: var(--mistica-blau-grey3);
599
609
  --mistica-color-borderHigh: var(--mistica-blau-grey5);
600
610
  --mistica-color-borderSelected: var(--mistica-blau-blauBlueSecondary60);
611
+ --mistica-color-completedStep: var(--mistica-blau-blauBlueSecondary);
612
+ --mistica-color-completedStepInverse: var(--mistica-blau-blauBlueSecondary60);
601
613
  --mistica-color-coverBackgroundHover: rgba(var(--mistica-blau-raw-darkModeBlack), 0.25);
602
614
  --mistica-color-coverBackgroundPressed: rgba(var(--mistica-blau-raw-darkModeBlack), 0.35);
603
615
  --mistica-color-buttonDangerBackground: var(--mistica-blau-blauRed);
@@ -634,28 +646,28 @@
634
646
  --mistica-color-textLinkSnackbar: var(--mistica-blau-blauPurple30);
635
647
  --mistica-color-textActivated: var(--mistica-blau-blauBlueSecondary);
636
648
  --mistica-color-textBrand: var(--mistica-blau-blauBluePrimary);
637
- --mistica-color-inputBorder: var(--mistica-blau-grey5);
638
- --mistica-color-control: var(--mistica-blau-grey5);
649
+ --mistica-color-inputBorder: var(--mistica-blau-grey4);
650
+ --mistica-color-control: var(--mistica-blau-grey4);
639
651
  --mistica-color-controlActivated: var(--mistica-blau-blauBlueSecondary);
640
652
  --mistica-color-controlInverse: var(--mistica-blau-blauBluePrimary30);
641
653
  --mistica-color-controlActivatedInverse: var(--mistica-blau-white);
642
654
  --mistica-color-controlError: var(--mistica-blau-blauRed);
643
- --mistica-color-barTrack: var(--mistica-blau-grey2);
655
+ --mistica-color-barTrack: var(--mistica-blau-grey3);
644
656
  --mistica-color-barTrackInverse: rgba(var(--mistica-blau-raw-grey6), 0.2);
645
657
  --mistica-color-loadingBar: var(--mistica-blau-blauBlueSecondary);
646
- --mistica-color-loadingBarBackground: var(--mistica-blau-blauBlueSecondary10);
658
+ --mistica-color-loadingBarBackground: var(--mistica-blau-blauBlueSecondary20);
647
659
  --mistica-color-toggleAndroidInactive: var(--mistica-blau-grey2);
648
- --mistica-color-toggleAndroidBackgroundActive: var(--mistica-blau-blauBlueSecondary10);
660
+ --mistica-color-toggleAndroidBackgroundActive: var(--mistica-blau-blauBlueSecondary30);
649
661
  --mistica-color-iosControlKnob: var(--mistica-blau-white);
650
662
  --mistica-color-controlKnobInverse: var(--mistica-blau-blauBlueSecondary);
651
- --mistica-color-divider: var(--mistica-blau-grey2);
663
+ --mistica-color-divider: var(--mistica-blau-grey3);
652
664
  --mistica-color-dividerInverse: rgba(var(--mistica-blau-raw-white), 0.2);
653
665
  --mistica-color-navigationBarDivider: var(--mistica-blau-blauBluePrimary);
654
666
  --mistica-color-badge: var(--mistica-blau-blauRed);
655
667
  --mistica-color-feedbackErrorBackground: var(--mistica-blau-blauRed);
656
668
  --mistica-color-feedbackInfoBackground: var(--mistica-blau-grey6);
657
669
  --mistica-color-brand: var(--mistica-blau-blauBluePrimary);
658
- --mistica-color-brandHigh: var(--mistica-blau-blauBlueSecondary);
670
+ --mistica-color-brandHigh: var(--mistica-blau-blauBlueSecondary60);
659
671
  --mistica-color-inverse: var(--mistica-blau-white);
660
672
  --mistica-color-neutralHigh: var(--mistica-blau-grey6);
661
673
  --mistica-color-neutralMedium: var(--mistica-blau-grey5);
@@ -669,15 +681,15 @@
669
681
  --mistica-color-error: var(--mistica-blau-blauRed);
670
682
  --mistica-color-textError: var(--mistica-blau-blauRed);
671
683
  --mistica-color-textErrorInverse: var(--mistica-blau-white);
672
- --mistica-color-success: var(--mistica-blau-blauGreen);
673
- --mistica-color-warning: var(--mistica-blau-blauYellow);
684
+ --mistica-color-success: var(--mistica-blau-blauGreen70);
685
+ --mistica-color-warning: var(--mistica-blau-blauYellow65);
674
686
  --mistica-color-promo: var(--mistica-blau-blauPurple);
675
687
  --mistica-color-highlight: var(--mistica-blau-blauBluePrimary);
676
688
  --mistica-color-successLow: var(--mistica-blau-blauGreen10);
677
689
  --mistica-color-warningLow: var(--mistica-blau-blauYellow10);
678
690
  --mistica-color-errorLow: var(--mistica-blau-blauRed10);
679
691
  --mistica-color-promoLow: var(--mistica-blau-blauPurple10);
680
- --mistica-color-brandLow: var(--mistica-blau-blauBlueSecondary10);
692
+ --mistica-color-brandLow: var(--mistica-blau-blauBluePrimary20);
681
693
  --mistica-color-successHigh: var(--mistica-blau-blauGreen70);
682
694
  --mistica-color-warningHigh: var(--mistica-blau-blauYellow70);
683
695
  --mistica-color-errorHigh: var(--mistica-blau-blauRed70);
@@ -686,38 +698,38 @@
686
698
  --mistica-color-warningHighInverse: var(--mistica-blau-blauYellow70);
687
699
  --mistica-color-errorHighInverse: var(--mistica-blau-blauRed70);
688
700
  --mistica-color-promoHighInverse: var(--mistica-blau-blauPurple);
689
- --mistica-color-textNavigationBarPrimary: var(--mistica-blau-white);
690
- --mistica-color-textNavigationBarSecondary: var(--mistica-blau-blauBlueSecondary20);
691
- --mistica-color-textNavigationSearchBarHint: var(--mistica-blau-blauBlueSecondary20);
692
- --mistica-color-textNavigationSearchBarText: var(--mistica-blau-white);
701
+ --mistica-color-textNavigationBarPrimary: var(--mistica-blau-grey6);
702
+ --mistica-color-textNavigationBarSecondary: var(--mistica-blau-grey6);
703
+ --mistica-color-textNavigationSearchBarHint: var(--mistica-blau-grey6);
704
+ --mistica-color-textNavigationSearchBarText: var(--mistica-blau-grey6);
693
705
  --mistica-color-textAppBar: var(--mistica-blau-grey5);
694
706
  --mistica-color-textAppBarSelected: var(--mistica-blau-blauBlueSecondary60);
695
707
  --mistica-color-customTabsBackground: var(--mistica-blau-blauBluePrimary);
696
708
  --mistica-color-tagTextPromo: var(--mistica-blau-blauPurple);
697
- --mistica-color-tagTextActive: var(--mistica-blau-blauBluePrimary);
709
+ --mistica-color-tagTextActive: var(--mistica-blau-blauBlueSecondary);
698
710
  --mistica-color-tagTextInactive: var(--mistica-blau-grey5);
699
- --mistica-color-tagTextInfo: var(--mistica-blau-blauBluePrimary);
711
+ --mistica-color-tagTextInfo: var(--mistica-blau-blauBlueSecondary);
700
712
  --mistica-color-tagTextSuccess: var(--mistica-blau-blauGreen70);
701
713
  --mistica-color-tagTextWarning: var(--mistica-blau-blauYellow70);
702
714
  --mistica-color-tagTextError: var(--mistica-blau-blauRed70);
703
715
  --mistica-color-tagBackgroundPromo: var(--mistica-blau-blauPurple10);
704
- --mistica-color-tagBackgroundActive: var(--mistica-blau-blauBlueSecondary10);
716
+ --mistica-color-tagBackgroundActive: var(--mistica-blau-blauBluePrimary20);
705
717
  --mistica-color-tagBackgroundInactive: var(--mistica-blau-grey1);
706
- --mistica-color-tagBackgroundInfo: var(--mistica-blau-blauBlueSecondary10);
718
+ --mistica-color-tagBackgroundInfo: var(--mistica-blau-blauBluePrimary20);
707
719
  --mistica-color-tagBackgroundSuccess: var(--mistica-blau-blauGreen10);
708
720
  --mistica-color-tagBackgroundWarning: var(--mistica-blau-blauYellow10);
709
721
  --mistica-color-tagBackgroundError: var(--mistica-blau-blauRed10);
710
722
  --mistica-color-tagTextPromoInverse: var(--mistica-blau-blauPurple);
711
- --mistica-color-tagTextActiveInverse: var(--mistica-blau-blauBluePrimary);
723
+ --mistica-color-tagTextActiveInverse: var(--mistica-blau-blauBlueSecondary);
712
724
  --mistica-color-tagTextInactiveInverse: var(--mistica-blau-grey5);
713
- --mistica-color-tagTextInfoInverse: var(--mistica-blau-blauBluePrimary);
725
+ --mistica-color-tagTextInfoInverse: var(--mistica-blau-blauBlueSecondary);
714
726
  --mistica-color-tagTextSuccessInverse: var(--mistica-blau-blauGreen70);
715
727
  --mistica-color-tagTextWarningInverse: var(--mistica-blau-blauYellow70);
716
728
  --mistica-color-tagTextErrorInverse: var(--mistica-blau-blauRed70);
717
729
  --mistica-color-tagBackgroundPromoInverse: var(--mistica-blau-blauPurple10);
718
- --mistica-color-tagBackgroundActiveInverse: var(--mistica-blau-blauBlueSecondary10);
730
+ --mistica-color-tagBackgroundActiveInverse: var(--mistica-blau-blauBluePrimary20);
719
731
  --mistica-color-tagBackgroundInactiveInverse: var(--mistica-blau-grey1);
720
- --mistica-color-tagBackgroundInfoInverse: var(--mistica-blau-blauBlueSecondary10);
732
+ --mistica-color-tagBackgroundInfoInverse: var(--mistica-blau-blauBluePrimary20);
721
733
  --mistica-color-tagBackgroundSuccessInverse: var(--mistica-blau-blauGreen10);
722
734
  --mistica-color-tagBackgroundWarningInverse: var(--mistica-blau-blauYellow10);
723
735
  --mistica-color-tagBackgroundErrorInverse: var(--mistica-blau-blauRed10);
package/css/esimflag.css CHANGED
@@ -123,6 +123,8 @@
123
123
  --mistica-color-textActivated: var(--mistica-esimflag-blue);
124
124
  --mistica-color-textBrand: var(--mistica-esimflag-blue);
125
125
  --mistica-color-inputBorder: var(--mistica-esimflag-grey4);
126
+ --mistica-color-completedStep: var(--mistica-esimflag-blue);
127
+ --mistica-color-completedStepInverse: var(--mistica-esimflag-blue80);
126
128
  --mistica-color-control: var(--mistica-esimflag-grey4);
127
129
  --mistica-color-controlActivated: var(--mistica-esimflag-blue);
128
130
  --mistica-color-controlInverse: var(--mistica-esimflag-blue20);
@@ -336,6 +338,8 @@
336
338
  --mistica-color-textActivated: var(--mistica-esimflag-blue30);
337
339
  --mistica-color-textBrand: var(--mistica-esimflag-blue30);
338
340
  --mistica-color-inputBorder: var(--mistica-esimflag-grey4);
341
+ --mistica-color-completedStep: var(--mistica-esimflag-blue);
342
+ --mistica-color-completedStepInverse: var(--mistica-esimflag-blue);
339
343
  --mistica-color-control: var(--mistica-esimflag-grey4);
340
344
  --mistica-color-controlActivated: var(--mistica-esimflag-blue);
341
345
  --mistica-color-controlInverse: var(--mistica-esimflag-grey4);
@@ -500,6 +504,8 @@
500
504
  --mistica-color-textActivated: var(--mistica-esimflag-blue30);
501
505
  --mistica-color-textBrand: var(--mistica-esimflag-blue30);
502
506
  --mistica-color-inputBorder: var(--mistica-esimflag-grey4);
507
+ --mistica-color-completedStep: var(--mistica-esimflag-blue);
508
+ --mistica-color-completedStepInverse: var(--mistica-esimflag-blue);
503
509
  --mistica-color-control: var(--mistica-esimflag-grey4);
504
510
  --mistica-color-controlActivated: var(--mistica-esimflag-blue);
505
511
  --mistica-color-controlInverse: var(--mistica-esimflag-grey4);
@@ -670,6 +676,8 @@
670
676
  --mistica-color-textActivated: var(--mistica-esimflag-blue);
671
677
  --mistica-color-textBrand: var(--mistica-esimflag-blue);
672
678
  --mistica-color-inputBorder: var(--mistica-esimflag-grey4);
679
+ --mistica-color-completedStep: var(--mistica-esimflag-blue);
680
+ --mistica-color-completedStepInverse: var(--mistica-esimflag-blue80);
673
681
  --mistica-color-control: var(--mistica-esimflag-grey4);
674
682
  --mistica-color-controlActivated: var(--mistica-esimflag-blue);
675
683
  --mistica-color-controlInverse: var(--mistica-esimflag-blue20);