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