@telefonica/mistica 16.16.0 → 16.18.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 (251) hide show
  1. package/css/blau.css +16 -0
  2. package/css/esimflag.css +796 -0
  3. package/css/mistica.css +1 -1
  4. package/css/movistar.css +16 -0
  5. package/css/o2-new.css +16 -0
  6. package/css/o2.css +16 -0
  7. package/css/telefonica.css +16 -0
  8. package/css/tu.css +16 -0
  9. package/css/vivo-new.css +16 -0
  10. package/css/vivo.css +16 -0
  11. package/dist/accordion.css-mistica.js +15 -12
  12. package/dist/accordion.css.d.ts +1 -0
  13. package/dist/accordion.js +49 -47
  14. package/dist/align.css-mistica.js +1 -1
  15. package/dist/avatar.css-mistica.js +2 -2
  16. package/dist/badge.css-mistica.js +3 -3
  17. package/dist/box.css-mistica.js +13 -13
  18. package/dist/boxed.css-mistica.js +28 -25
  19. package/dist/boxed.css.d.ts +1 -0
  20. package/dist/boxed.d.ts +1 -0
  21. package/dist/boxed.js +12 -11
  22. package/dist/button-group.css-mistica.js +4 -4
  23. package/dist/button-layout.css-mistica.js +19 -19
  24. package/dist/button.css-mistica.js +34 -34
  25. package/dist/callout.css-mistica.js +8 -8
  26. package/dist/card.css-mistica.js +23 -23
  27. package/dist/card.css.d.ts +2 -2
  28. package/dist/card.js +62 -62
  29. package/dist/carousel.css-mistica.js +21 -21
  30. package/dist/checkbox.css-mistica.js +15 -15
  31. package/dist/chip.css-mistica.js +15 -15
  32. package/dist/circle.css-mistica.js +1 -1
  33. package/dist/community/advanced-data-card.css-mistica.js +20 -20
  34. package/dist/community/blocks.css-mistica.js +3 -3
  35. package/dist/community/example-component.css-mistica.js +1 -1
  36. package/dist/counter.css-mistica.js +4 -4
  37. package/dist/cover-hero.css-mistica.js +13 -13
  38. package/dist/credit-card-number-field.css-mistica.js +4 -4
  39. package/dist/date-field.css-mistica.js +1 -1
  40. package/dist/date-time-picker.css-mistica.js +1 -1
  41. package/dist/dialog.css-mistica.js +8 -8
  42. package/dist/divider.css-mistica.js +2 -2
  43. package/dist/double-field.css-mistica.js +2 -2
  44. package/dist/drawer.css-mistica.js +6 -6
  45. package/dist/empty-state-card.css-mistica.js +1 -1
  46. package/dist/empty-state.css-mistica.js +8 -8
  47. package/dist/fade-in.css-mistica.js +1 -1
  48. package/dist/feedback.css-mistica.js +4 -4
  49. package/dist/fixed-footer-layout.css-mistica.js +10 -10
  50. package/dist/form.css-mistica.js +1 -1
  51. package/dist/grid-layout.css-mistica.js +3 -3
  52. package/dist/grid.css-mistica.js +122 -122
  53. package/dist/header.css-mistica.js +1 -1
  54. package/dist/hero.css-mistica.js +9 -9
  55. package/dist/highlighted-card.css-mistica.js +6 -6
  56. package/dist/horizontal-scroll.css-mistica.js +1 -1
  57. package/dist/icon-button.css-mistica.js +42 -42
  58. package/dist/icons/icon-chevron.css-mistica.js +2 -2
  59. package/dist/icons/icon-error.css-mistica.js +1 -1
  60. package/dist/image.css-mistica.js +3 -3
  61. package/dist/index.d.ts +4 -2
  62. package/dist/index.js +13 -0
  63. package/dist/inline.css-mistica.js +6 -6
  64. package/dist/list.css-mistica.js +19 -16
  65. package/dist/list.css.d.ts +1 -0
  66. package/dist/list.js +19 -17
  67. package/dist/loading-bar.css-mistica.js +3 -3
  68. package/dist/loading-screen.css-mistica.js +7 -7
  69. package/dist/logo-esimflag.d.ts +4 -0
  70. package/dist/logo-esimflag.js +73 -0
  71. package/dist/logo.css-mistica.js +5 -5
  72. package/dist/logo.d.ts +1 -0
  73. package/dist/logo.js +46 -19
  74. package/dist/maybe-dismissable.css-mistica.js +2 -2
  75. package/dist/menu.css-mistica.js +16 -16
  76. package/dist/mosaic.css-mistica.js +1 -1
  77. package/dist/navigation-bar.css-mistica.js +44 -44
  78. package/dist/navigation-breadcrumbs.css-mistica.js +4 -4
  79. package/dist/package-version.js +1 -1
  80. package/dist/pin-field.css-mistica.js +5 -5
  81. package/dist/popover.css-mistica.js +1 -1
  82. package/dist/progress-bar.css-mistica.js +4 -4
  83. package/dist/radio-button.css-mistica.js +18 -18
  84. package/dist/rating.css-mistica.js +6 -6
  85. package/dist/responsive-layout.css-mistica.js +8 -8
  86. package/dist/screen-reader-only.css-mistica.js +1 -1
  87. package/dist/select.css-mistica.js +23 -23
  88. package/dist/sheet-action-row.css-mistica.js +1 -1
  89. package/dist/sheet-common.css-mistica.js +8 -8
  90. package/dist/sheet-info.css-mistica.js +1 -1
  91. package/dist/skeletons.css-mistica.js +7 -7
  92. package/dist/skins/blau.js +8 -0
  93. package/dist/skins/constants.d.ts +1 -0
  94. package/dist/skins/constants.js +7 -4
  95. package/dist/skins/esimflag.d.ts +46 -0
  96. package/dist/skins/esimflag.js +530 -0
  97. package/dist/skins/movistar.js +8 -0
  98. package/dist/skins/o2-new.js +8 -0
  99. package/dist/skins/o2.js +8 -0
  100. package/dist/skins/skin-contract.css-mistica.js +346 -338
  101. package/dist/skins/skin-contract.css.d.ts +22 -14
  102. package/dist/skins/telefonica.js +8 -0
  103. package/dist/skins/tu.js +8 -0
  104. package/dist/skins/types/colors.d.ts +11 -7
  105. package/dist/skins/types/index.d.ts +1 -1
  106. package/dist/skins/utils.js +5 -2
  107. package/dist/skins/vivo-new.js +8 -0
  108. package/dist/skins/vivo.js +8 -0
  109. package/dist/slider.css-mistica.js +16 -16
  110. package/dist/snackbar-context.js +53 -44
  111. package/dist/snackbar-native.d.ts +14 -0
  112. package/dist/snackbar-native.js +34 -0
  113. package/dist/snackbar.css-mistica.js +13 -13
  114. package/dist/snackbar.d.ts +1 -3
  115. package/dist/snackbar.js +70 -76
  116. package/dist/spinner.css-mistica.js +3 -3
  117. package/dist/stack.css-mistica.js +5 -5
  118. package/dist/stacking-group.css-mistica.js +1 -1
  119. package/dist/stepper.css-mistica.js +9 -9
  120. package/dist/switch-component.css-mistica.js +36 -36
  121. package/dist/table.css-mistica.js +8 -8
  122. package/dist/tabs.css-mistica.js +20 -20
  123. package/dist/tag.css-mistica.js +1 -1
  124. package/dist/tag.d.ts +5 -3
  125. package/dist/tag.js +19 -13
  126. package/dist/text-field-base.css-mistica.js +14 -14
  127. package/dist/text-field-components.css-mistica.js +15 -15
  128. package/dist/text-link.css-mistica.js +3 -3
  129. package/dist/text.css-mistica.js +7 -7
  130. package/dist/theme-context.css-mistica.js +386 -378
  131. package/dist/theme-context.css.d.ts +22 -14
  132. package/dist/timeline.css-mistica.js +14 -14
  133. package/dist/timer.css-mistica.js +9 -9
  134. package/dist/tooltip.css-mistica.js +4 -4
  135. package/dist/touchable.css-mistica.js +2 -2
  136. package/dist/utils/aspect-ratio-support.css-mistica.js +3 -3
  137. package/dist/video.css-mistica.js +1 -1
  138. package/dist/vivinho-loading-animation/vivinho-loading-animation.css-mistica.js +1 -1
  139. package/dist-es/accordion.css-mistica.js +7 -7
  140. package/dist-es/accordion.js +72 -70
  141. package/dist-es/align.css-mistica.js +1 -1
  142. package/dist-es/avatar.css-mistica.js +2 -2
  143. package/dist-es/badge.css-mistica.js +2 -2
  144. package/dist-es/box.css-mistica.js +13 -13
  145. package/dist-es/boxed.css-mistica.js +24 -24
  146. package/dist-es/boxed.js +17 -16
  147. package/dist-es/button-group.css-mistica.js +2 -2
  148. package/dist-es/button-layout.css-mistica.js +15 -15
  149. package/dist-es/button.css-mistica.js +22 -22
  150. package/dist-es/callout.css-mistica.js +6 -6
  151. package/dist-es/card.css-mistica.js +4 -4
  152. package/dist-es/card.js +63 -63
  153. package/dist-es/carousel.css-mistica.js +7 -7
  154. package/dist-es/checkbox.css-mistica.js +9 -9
  155. package/dist-es/chip.css-mistica.js +13 -13
  156. package/dist-es/circle.css-mistica.js +1 -1
  157. package/dist-es/community/advanced-data-card.css-mistica.js +7 -7
  158. package/dist-es/community/blocks.css-mistica.js +2 -2
  159. package/dist-es/community/example-component.css-mistica.js +1 -1
  160. package/dist-es/counter.css-mistica.js +2 -2
  161. package/dist-es/cover-hero.css-mistica.js +4 -4
  162. package/dist-es/credit-card-number-field.css-mistica.js +4 -4
  163. package/dist-es/date-field.css-mistica.js +1 -1
  164. package/dist-es/date-time-picker.css-mistica.js +1 -1
  165. package/dist-es/dialog.css-mistica.js +5 -5
  166. package/dist-es/divider.css-mistica.js +2 -2
  167. package/dist-es/double-field.css-mistica.js +2 -2
  168. package/dist-es/drawer.css-mistica.js +2 -2
  169. package/dist-es/empty-state-card.css-mistica.js +1 -1
  170. package/dist-es/empty-state.css-mistica.js +6 -6
  171. package/dist-es/fade-in.css-mistica.js +1 -1
  172. package/dist-es/feedback.css-mistica.js +2 -2
  173. package/dist-es/fixed-footer-layout.css-mistica.js +5 -5
  174. package/dist-es/form.css-mistica.js +1 -1
  175. package/dist-es/grid-layout.css-mistica.js +3 -3
  176. package/dist-es/grid.css-mistica.js +122 -122
  177. package/dist-es/header.css-mistica.js +1 -1
  178. package/dist-es/hero.css-mistica.js +3 -3
  179. package/dist-es/highlighted-card.css-mistica.js +5 -5
  180. package/dist-es/horizontal-scroll.css-mistica.js +1 -1
  181. package/dist-es/icon-button.css-mistica.js +42 -42
  182. package/dist-es/icons/icon-chevron.css-mistica.js +2 -2
  183. package/dist-es/icons/icon-error.css-mistica.js +1 -1
  184. package/dist-es/image.css-mistica.js +3 -3
  185. package/dist-es/index.js +1834 -1833
  186. package/dist-es/inline.css-mistica.js +6 -6
  187. package/dist-es/list.css-mistica.js +2 -2
  188. package/dist-es/list.js +51 -49
  189. package/dist-es/loading-bar.css-mistica.js +2 -2
  190. package/dist-es/loading-screen.css-mistica.js +5 -5
  191. package/dist-es/logo-esimflag.js +64 -0
  192. package/dist-es/logo.css-mistica.js +5 -5
  193. package/dist-es/logo.js +44 -20
  194. package/dist-es/maybe-dismissable.css-mistica.js +2 -2
  195. package/dist-es/menu.css-mistica.js +13 -13
  196. package/dist-es/mosaic.css-mistica.js +1 -1
  197. package/dist-es/navigation-bar.css-mistica.js +17 -17
  198. package/dist-es/navigation-breadcrumbs.css-mistica.js +2 -2
  199. package/dist-es/package-version.js +1 -1
  200. package/dist-es/pin-field.css-mistica.js +2 -2
  201. package/dist-es/popover.css-mistica.js +1 -1
  202. package/dist-es/progress-bar.css-mistica.js +4 -4
  203. package/dist-es/radio-button.css-mistica.js +16 -16
  204. package/dist-es/rating.css-mistica.js +3 -3
  205. package/dist-es/responsive-layout.css-mistica.js +5 -5
  206. package/dist-es/screen-reader-only.css-mistica.js +1 -1
  207. package/dist-es/select.css-mistica.js +18 -18
  208. package/dist-es/sheet-action-row.css-mistica.js +1 -1
  209. package/dist-es/sheet-common.css-mistica.js +2 -2
  210. package/dist-es/sheet-info.css-mistica.js +1 -1
  211. package/dist-es/skeletons.css-mistica.js +5 -5
  212. package/dist-es/skins/blau.js +8 -0
  213. package/dist-es/skins/constants.js +2 -2
  214. package/dist-es/skins/esimflag.js +513 -0
  215. package/dist-es/skins/movistar.js +8 -0
  216. package/dist-es/skins/o2-new.js +8 -0
  217. package/dist-es/skins/o2.js +8 -0
  218. package/dist-es/skins/skin-contract.css-mistica.js +346 -338
  219. package/dist-es/skins/telefonica.js +8 -0
  220. package/dist-es/skins/tu.js +8 -0
  221. package/dist-es/skins/utils.js +21 -18
  222. package/dist-es/skins/vivo-new.js +8 -0
  223. package/dist-es/skins/vivo.js +8 -0
  224. package/dist-es/slider.css-mistica.js +11 -11
  225. package/dist-es/snackbar-context.js +53 -44
  226. package/dist-es/snackbar-native.js +25 -0
  227. package/dist-es/snackbar.css-mistica.js +5 -5
  228. package/dist-es/snackbar.js +93 -99
  229. package/dist-es/spinner.css-mistica.js +2 -2
  230. package/dist-es/stack.css-mistica.js +5 -5
  231. package/dist-es/stacking-group.css-mistica.js +1 -1
  232. package/dist-es/stepper.css-mistica.js +3 -3
  233. package/dist-es/style.css +1 -1
  234. package/dist-es/switch-component.css-mistica.js +29 -29
  235. package/dist-es/table.css-mistica.js +8 -8
  236. package/dist-es/tabs.css-mistica.js +15 -15
  237. package/dist-es/tag.css-mistica.js +1 -1
  238. package/dist-es/tag.js +39 -33
  239. package/dist-es/text-field-base.css-mistica.js +2 -2
  240. package/dist-es/text-field-components.css-mistica.js +5 -5
  241. package/dist-es/text-link.css-mistica.js +3 -3
  242. package/dist-es/text.css-mistica.js +7 -7
  243. package/dist-es/theme-context.css-mistica.js +386 -378
  244. package/dist-es/timeline.css-mistica.js +11 -11
  245. package/dist-es/timer.css-mistica.js +7 -7
  246. package/dist-es/tooltip.css-mistica.js +2 -2
  247. package/dist-es/touchable.css-mistica.js +2 -2
  248. package/dist-es/utils/aspect-ratio-support.css-mistica.js +3 -3
  249. package/dist-es/video.css-mistica.js +1 -1
  250. package/dist-es/vivinho-loading-animation/vivinho-loading-animation.css-mistica.js +1 -1
  251. package/package.json +1 -1
package/css/esimflag.css ADDED
@@ -0,0 +1,796 @@
1
+ [data-mistica-skin='esimflag'] {
2
+ /* Palette colors */
3
+ --mistica-esimflag-white: #ffffff;
4
+ --mistica-esimflag-grey1: #f1f7ff;
5
+ --mistica-esimflag-blue55: #004ed9;
6
+ --mistica-esimflag-blue: #005cff;
7
+ --mistica-esimflag-purple: #a140c4;
8
+ --mistica-esimflag-tomato10: #feeced;
9
+ --mistica-esimflag-blue80: #0b2739;
10
+ --mistica-esimflag-grey2: #e3eeff;
11
+ --mistica-esimflag-blue65: #0247bf;
12
+ --mistica-esimflag-grey3: #ccd6e5;
13
+ --mistica-esimflag-grey5: #666b73;
14
+ --mistica-esimflag-tomato55: #ed0c0c;
15
+ --mistica-esimflag-tomato65: #b61515;
16
+ --mistica-esimflag-tomato60: #ba160a;
17
+ --mistica-esimflag-blue15: #ccdeff;
18
+ --mistica-esimflag-blue10: #e5efff;
19
+ --mistica-esimflag-blue30: #80adff;
20
+ --mistica-esimflag-grey4: #9fa7b2;
21
+ --mistica-esimflag-blue20: #b2ceff;
22
+ --mistica-esimflag-tomato: #fa4549;
23
+ --mistica-esimflag-blue85: #001740;
24
+ --mistica-esimflag-grass: #99d52a;
25
+ --mistica-esimflag-peach: #ff9800;
26
+ --mistica-esimflag-teal: #2fddea;
27
+ --mistica-esimflag-grass10: #ebf7d4;
28
+ --mistica-esimflag-peach10: #fff4d5;
29
+ --mistica-esimflag-purple10: #fceffc;
30
+ --mistica-esimflag-grass70: #6b951d;
31
+ --mistica-esimflag-peach75: #995b00;
32
+ --mistica-esimflag-blush: #ffd2e3;
33
+ --mistica-esimflag-chili: #fa4549;
34
+ --mistica-esimflag-purple55: #8b3aa8;
35
+ --mistica-esimflag-teal75: #197980;
36
+ --mistica-esimflag-grass75: #5c8019;
37
+ --mistica-esimflag-teal10: #d5f8fb;
38
+ --mistica-esimflag-darkModeBlack: #00001c;
39
+ --mistica-esimflag-darkModeGrey: #08132b;
40
+ --mistica-esimflag-darkModeGrey6: #14213d;
41
+ --mistica-esimflag-grey6: #393c40;
42
+ --mistica-esimflag-purple30: #d1a1e3;
43
+ --mistica-esimflag-darkModeBlue: #0f67ff;
44
+
45
+ /* Raw palette colors, for use with rgba() */
46
+ --mistica-esimflag-raw-blue55: 0, 78, 217;
47
+ --mistica-esimflag-raw-black: 0, 9, 26;
48
+ --mistica-esimflag-raw-darkModeBlack: 0, 0, 28;
49
+ --mistica-esimflag-raw-purple55: 139, 58, 168;
50
+ --mistica-esimflag-raw-white: 255, 255, 255;
51
+ --mistica-esimflag-raw-darkModeGrey: 8, 19, 43;
52
+
53
+ /* Colors */
54
+ --mistica-color-background: var(--mistica-esimflag-white);
55
+ --mistica-color-backgroundAlternative: var(--mistica-esimflag-grey1);
56
+ --mistica-color-backgroundBrand: linear-gradient(
57
+ 180deg,
58
+ var(--mistica-esimflag-blue55) 0%,
59
+ var(--mistica-esimflag-blue) 60%,
60
+ var(--mistica-esimflag-purple) 100%
61
+ );
62
+ --mistica-color-backgroundBrandSecondary: var(--mistica-esimflag-blue);
63
+ --mistica-color-backgroundContainer: var(--mistica-esimflag-white);
64
+ --mistica-color-backgroundContainerError: var(--mistica-esimflag-tomato10);
65
+ --mistica-color-backgroundContainerHover: rgba(var(--mistica-esimflag-raw-blue55), 0.05);
66
+ --mistica-color-backgroundContainerPressed: rgba(var(--mistica-esimflag-raw-blue55), 0.08);
67
+ --mistica-color-backgroundContainerBrand: linear-gradient(
68
+ 180deg,
69
+ var(--mistica-esimflag-blue55) 0%,
70
+ var(--mistica-esimflag-blue) 60%,
71
+ var(--mistica-esimflag-purple) 100%
72
+ );
73
+ --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-esimflag-raw-blue55), 0.2);
74
+ --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-esimflag-raw-blue55), 0.4);
75
+ --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-esimflag-blue80);
76
+ --mistica-color-backgroundContainerAlternative: var(--mistica-esimflag-grey1);
77
+ --mistica-color-backgroundOverlay: rgba(var(--mistica-esimflag-raw-black), 0.6);
78
+ --mistica-color-backgroundSkeleton: var(--mistica-esimflag-grey2);
79
+ --mistica-color-backgroundSkeletonInverse: var(--mistica-esimflag-blue55);
80
+ --mistica-color-backgroundBrandTop: var(--mistica-esimflag-blue65);
81
+ --mistica-color-backgroundBrandBottom: var(--mistica-esimflag-purple);
82
+ --mistica-color-appBarBackground: var(--mistica-esimflag-white);
83
+ --mistica-color-navigationBarBackground: var(--mistica-esimflag-blue55);
84
+ --mistica-color-skeletonWave: var(--mistica-esimflag-grey2);
85
+ --mistica-color-borderLow: var(--mistica-esimflag-grey1);
86
+ --mistica-color-border: var(--mistica-esimflag-grey3);
87
+ --mistica-color-borderHigh: var(--mistica-esimflag-grey5);
88
+ --mistica-color-borderSelected: var(--mistica-esimflag-blue);
89
+ --mistica-color-coverBackgroundHover: rgba(var(--mistica-esimflag-raw-darkModeBlack), 0.25);
90
+ --mistica-color-coverBackgroundPressed: rgba(var(--mistica-esimflag-raw-darkModeBlack), 0.35);
91
+ --mistica-color-buttonDangerBackground: var(--mistica-esimflag-tomato55);
92
+ --mistica-color-buttonDangerBackgroundPressed: var(--mistica-esimflag-tomato65);
93
+ --mistica-color-buttonDangerBackgroundHover: var(--mistica-esimflag-tomato60);
94
+ --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-esimflag-tomato10);
95
+ --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-esimflag-white);
96
+ --mistica-color-buttonLinkDangerBackgroundInversePressed: var(--mistica-esimflag-tomato10);
97
+ --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-esimflag-raw-purple55), 0.08);
98
+ --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
99
+ --mistica-color-buttonPrimaryBackground: var(--mistica-esimflag-blue);
100
+ --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-esimflag-white);
101
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-esimflag-blue65);
102
+ --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-esimflag-blue55);
103
+ --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-esimflag-blue15);
104
+ --mistica-color-buttonSecondaryBorder: var(--mistica-esimflag-blue);
105
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-esimflag-blue55);
106
+ --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-esimflag-blue10);
107
+ --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-esimflag-blue15);
108
+ --mistica-color-buttonSecondaryBorderInverse: var(--mistica-esimflag-white);
109
+ --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-esimflag-white);
110
+ --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-esimflag-raw-white), 0.15);
111
+ --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-esimflag-raw-white), 0.15);
112
+ --mistica-color-textButtonPrimary: var(--mistica-esimflag-white);
113
+ --mistica-color-textButtonPrimaryInverse: var(--mistica-esimflag-blue);
114
+ --mistica-color-textButtonPrimaryInversePressed: var(--mistica-esimflag-blue55);
115
+ --mistica-color-textButtonSecondary: var(--mistica-esimflag-blue);
116
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-esimflag-blue55);
117
+ --mistica-color-textButtonSecondaryInverse: var(--mistica-esimflag-white);
118
+ --mistica-color-textButtonSecondaryInversePressed: var(--mistica-esimflag-white);
119
+ --mistica-color-textLink: var(--mistica-esimflag-purple);
120
+ --mistica-color-textLinkInverse: var(--mistica-esimflag-white);
121
+ --mistica-color-textLinkDanger: var(--mistica-esimflag-tomato55);
122
+ --mistica-color-textLinkSnackbar: var(--mistica-esimflag-blue30);
123
+ --mistica-color-textActivated: var(--mistica-esimflag-blue);
124
+ --mistica-color-textBrand: var(--mistica-esimflag-blue);
125
+ --mistica-color-control: var(--mistica-esimflag-grey4);
126
+ --mistica-color-controlActivated: var(--mistica-esimflag-blue);
127
+ --mistica-color-controlInverse: var(--mistica-esimflag-blue20);
128
+ --mistica-color-controlActivatedInverse: var(--mistica-esimflag-white);
129
+ --mistica-color-controlError: var(--mistica-esimflag-tomato);
130
+ --mistica-color-barTrack: var(--mistica-esimflag-grey3);
131
+ --mistica-color-barTrackInverse: rgba(var(--mistica-esimflag-raw-white), 0.3);
132
+ --mistica-color-loadingBar: var(--mistica-esimflag-blue);
133
+ --mistica-color-loadingBarBackground: var(--mistica-esimflag-grey2);
134
+ --mistica-color-toggleAndroidInactive: var(--mistica-esimflag-grey3);
135
+ --mistica-color-toggleAndroidBackgroundActive: var(--mistica-esimflag-blue20);
136
+ --mistica-color-iosControlKnob: var(--mistica-esimflag-white);
137
+ --mistica-color-controlKnobInverse: var(--mistica-esimflag-blue);
138
+ --mistica-color-divider: var(--mistica-esimflag-grey3);
139
+ --mistica-color-dividerInverse: rgba(var(--mistica-esimflag-raw-white), 0.2);
140
+ --mistica-color-navigationBarDivider: var(--mistica-esimflag-grey3);
141
+ --mistica-color-badge: var(--mistica-esimflag-tomato65);
142
+ --mistica-color-feedbackErrorBackground: var(--mistica-esimflag-tomato);
143
+ --mistica-color-feedbackInfoBackground: var(--mistica-esimflag-blue80);
144
+ --mistica-color-brand: var(--mistica-esimflag-blue);
145
+ --mistica-color-brandHigh: var(--mistica-esimflag-blue55);
146
+ --mistica-color-inverse: var(--mistica-esimflag-white);
147
+ --mistica-color-neutralHigh: var(--mistica-esimflag-blue85);
148
+ --mistica-color-neutralMedium: var(--mistica-esimflag-grey5);
149
+ --mistica-color-neutralMediumInverse: var(--mistica-esimflag-grey5);
150
+ --mistica-color-neutralLow: var(--mistica-esimflag-grey1);
151
+ --mistica-color-neutralLowAlternative: var(--mistica-esimflag-grey2);
152
+ --mistica-color-textPrimary: var(--mistica-esimflag-blue85);
153
+ --mistica-color-textPrimaryInverse: var(--mistica-esimflag-white);
154
+ --mistica-color-textSecondary: var(--mistica-esimflag-grey5);
155
+ --mistica-color-textSecondaryInverse: var(--mistica-esimflag-blue10);
156
+ --mistica-color-success: var(--mistica-esimflag-grass);
157
+ --mistica-color-warning: var(--mistica-esimflag-peach);
158
+ --mistica-color-error: var(--mistica-esimflag-tomato);
159
+ --mistica-color-textError: var(--mistica-esimflag-tomato55);
160
+ --mistica-color-textErrorInverse: var(--mistica-esimflag-white);
161
+ --mistica-color-promo: var(--mistica-esimflag-purple);
162
+ --mistica-color-highlight: var(--mistica-esimflag-teal);
163
+ --mistica-color-successLow: var(--mistica-esimflag-grass10);
164
+ --mistica-color-warningLow: var(--mistica-esimflag-peach10);
165
+ --mistica-color-errorLow: var(--mistica-esimflag-tomato10);
166
+ --mistica-color-promoLow: var(--mistica-esimflag-purple10);
167
+ --mistica-color-brandLow: var(--mistica-esimflag-blue10);
168
+ --mistica-color-successHigh: var(--mistica-esimflag-grass70);
169
+ --mistica-color-warningHigh: var(--mistica-esimflag-peach75);
170
+ --mistica-color-errorHigh: var(--mistica-esimflag-tomato60);
171
+ --mistica-color-promoHigh: var(--mistica-esimflag-purple);
172
+ --mistica-color-successHighInverse: var(--mistica-esimflag-grass70);
173
+ --mistica-color-warningHighInverse: var(--mistica-esimflag-peach75);
174
+ --mistica-color-errorHighInverse: var(--mistica-esimflag-tomato60);
175
+ --mistica-color-promoHighInverse: var(--mistica-esimflag-purple);
176
+ --mistica-color-textNavigationBarPrimary: var(--mistica-esimflag-white);
177
+ --mistica-color-textNavigationBarSecondary: var(--mistica-esimflag-blue20);
178
+ --mistica-color-textNavigationSearchBarHint: var(--mistica-esimflag-blue20);
179
+ --mistica-color-textNavigationSearchBarText: var(--mistica-esimflag-white);
180
+ --mistica-color-textAppBar: var(--mistica-esimflag-grey5);
181
+ --mistica-color-textAppBarSelected: var(--mistica-esimflag-blue55);
182
+ --mistica-color-customTabsBackground: var(--mistica-esimflag-blue);
183
+ --mistica-color-tagTextPromo: var(--mistica-esimflag-blue85);
184
+ --mistica-color-tagTextActive: var(--mistica-esimflag-blue85);
185
+ --mistica-color-tagTextInactive: var(--mistica-esimflag-grey5);
186
+ --mistica-color-tagTextInfo: var(--mistica-esimflag-blue85);
187
+ --mistica-color-tagTextSuccess: var(--mistica-esimflag-blue85);
188
+ --mistica-color-tagTextWarning: var(--mistica-esimflag-blue85);
189
+ --mistica-color-tagTextError: var(--mistica-esimflag-blue85);
190
+ --mistica-color-tagBackgroundPromo: var(--mistica-esimflag-blush);
191
+ --mistica-color-tagBackgroundActive: var(--mistica-esimflag-teal);
192
+ --mistica-color-tagBackgroundInactive: var(--mistica-esimflag-grey2);
193
+ --mistica-color-tagBackgroundInfo: var(--mistica-esimflag-purple);
194
+ --mistica-color-tagBackgroundSuccess: var(--mistica-esimflag-grass);
195
+ --mistica-color-tagBackgroundWarning: var(--mistica-esimflag-peach);
196
+ --mistica-color-tagBackgroundError: var(--mistica-esimflag-chili);
197
+ --mistica-color-tagTextPromoInverse: var(--mistica-esimflag-purple55);
198
+ --mistica-color-tagTextActiveInverse: var(--mistica-esimflag-teal75);
199
+ --mistica-color-tagTextInactiveInverse: var(--mistica-esimflag-grey5);
200
+ --mistica-color-tagTextInfoInverse: var(--mistica-esimflag-purple);
201
+ --mistica-color-tagTextSuccessInverse: var(--mistica-esimflag-grass75);
202
+ --mistica-color-tagTextWarningInverse: var(--mistica-esimflag-peach75);
203
+ --mistica-color-tagTextErrorInverse: var(--mistica-esimflag-tomato65);
204
+ --mistica-color-tagBackgroundPromoInverse: var(--mistica-esimflag-purple10);
205
+ --mistica-color-tagBackgroundActiveInverse: var(--mistica-esimflag-teal10);
206
+ --mistica-color-tagBackgroundInactiveInverse: var(--mistica-esimflag-grey2);
207
+ --mistica-color-tagBackgroundInfoInverse: var(--mistica-esimflag-purple10);
208
+ --mistica-color-tagBackgroundSuccessInverse: var(--mistica-esimflag-grass10);
209
+ --mistica-color-tagBackgroundWarningInverse: var(--mistica-esimflag-peach10);
210
+ --mistica-color-tagBackgroundErrorInverse: var(--mistica-esimflag-tomato10);
211
+ --mistica-color-cardContentOverlay: linear-gradient(
212
+ 180deg,
213
+ rgba(var(--mistica-esimflag-raw-black), 0) 0%,
214
+ rgba(var(--mistica-esimflag-raw-black), 0.4) 30%,
215
+ rgba(var(--mistica-esimflag-raw-black), 0.7) 100%
216
+ );
217
+
218
+ /* Border radius */
219
+ --mistica-border-radius-avatar: 50%;
220
+ --mistica-border-radius-bar: 999px;
221
+ --mistica-border-radius-button: 999px;
222
+ --mistica-border-radius-checkbox: 4px;
223
+ --mistica-border-radius-container: 20px;
224
+ --mistica-border-radius-indicator: 8px;
225
+ --mistica-border-radius-input: 16px;
226
+ --mistica-border-radius-legacyDisplay: 20px;
227
+ --mistica-border-radius-popup: 16px;
228
+ --mistica-border-radius-sheet: 16px;
229
+ --mistica-border-radius-mediaSmall: 8px;
230
+
231
+ /* Text */
232
+ --mistica-font-size-1: 0.75rem;
233
+ --mistica-line-height-1: 1rem;
234
+ --mistica-font-size-2: 0.875rem;
235
+ --mistica-line-height-2: 1.25rem;
236
+ --mistica-font-size-3: 1rem;
237
+ --mistica-line-height-3: 1.5rem;
238
+ --mistica-font-size-4: 1.125rem;
239
+ --mistica-line-height-4: 1.5rem;
240
+ --mistica-font-size-5: 1.25rem;
241
+ --mistica-line-height-5: 1.5rem;
242
+ --mistica-font-weight-5: 700;
243
+ --mistica-font-size-6: 1.5rem;
244
+ --mistica-line-height-6: 2rem;
245
+ --mistica-font-weight-6: 700;
246
+ --mistica-font-size-7: 1.75rem;
247
+ --mistica-line-height-7: 2rem;
248
+ --mistica-font-weight-7: 700;
249
+ --mistica-font-size-8: 2rem;
250
+ --mistica-line-height-8: 2.5rem;
251
+ --mistica-font-weight-8: 700;
252
+ --mistica-font-size-9: 2.5rem;
253
+ --mistica-line-height-9: 3rem;
254
+ --mistica-font-weight-9: 700;
255
+ --mistica-font-size-10: 3rem;
256
+ --mistica-line-height-10: 3.5rem;
257
+ --mistica-font-weight-10: 700;
258
+ --mistica-font-size-cardTitle: 1.25rem;
259
+ --mistica-line-height-cardTitle: 1.5rem;
260
+ --mistica-font-weight-cardTitle: 500;
261
+ --mistica-font-weight-button: 500;
262
+ --mistica-font-size-tabsLabel: 1rem;
263
+ --mistica-line-height-tabsLabel: 1.5rem;
264
+ --mistica-font-weight-tabsLabel: 500;
265
+ --mistica-font-weight-link: 500;
266
+ --mistica-font-weight-title1: 500;
267
+ --mistica-font-weight-title2: 700;
268
+ --mistica-font-size-title3: 1.25rem;
269
+ --mistica-line-height-title3: 1.5rem;
270
+ --mistica-font-weight-title3: 700;
271
+ --mistica-font-weight-indicator: 500;
272
+ --mistica-font-weight-navigationBar: 500;
273
+ }
274
+
275
+ [data-mistica-skin='esimflag'][data-mistica-color-scheme='dark'] {
276
+ --mistica-color-background: var(--mistica-esimflag-darkModeBlack);
277
+ --mistica-color-backgroundAlternative: var(--mistica-esimflag-darkModeBlack);
278
+ --mistica-color-backgroundBrand: var(--mistica-esimflag-darkModeBlack);
279
+ --mistica-color-backgroundBrandSecondary: var(--mistica-esimflag-darkModeBlack);
280
+ --mistica-color-backgroundContainer: var(--mistica-esimflag-darkModeGrey);
281
+ --mistica-color-backgroundContainerError: var(--mistica-esimflag-darkModeGrey);
282
+ --mistica-color-backgroundContainerHover: rgba(var(--mistica-esimflag-raw-white), 0.05);
283
+ --mistica-color-backgroundContainerPressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
284
+ --mistica-color-backgroundContainerBrand: var(--mistica-esimflag-darkModeGrey);
285
+ --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-esimflag-raw-white), 0.03);
286
+ --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-esimflag-raw-white), 0.05);
287
+ --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-esimflag-darkModeGrey);
288
+ --mistica-color-backgroundContainerAlternative: var(--mistica-esimflag-darkModeGrey);
289
+ --mistica-color-backgroundOverlay: rgba(var(--mistica-esimflag-raw-darkModeGrey), 0.8);
290
+ --mistica-color-backgroundSkeleton: var(--mistica-esimflag-darkModeGrey6);
291
+ --mistica-color-backgroundSkeletonInverse: var(--mistica-esimflag-darkModeGrey6);
292
+ --mistica-color-backgroundBrandTop: var(--mistica-esimflag-darkModeBlack);
293
+ --mistica-color-backgroundBrandBottom: var(--mistica-esimflag-darkModeBlack);
294
+ --mistica-color-appBarBackground: var(--mistica-esimflag-darkModeGrey);
295
+ --mistica-color-navigationBarBackground: var(--mistica-esimflag-darkModeBlack);
296
+ --mistica-color-skeletonWave: var(--mistica-esimflag-grey6);
297
+ --mistica-color-borderLow: var(--mistica-esimflag-darkModeBlack);
298
+ --mistica-color-border: var(--mistica-esimflag-darkModeGrey);
299
+ --mistica-color-borderHigh: var(--mistica-esimflag-grey5);
300
+ --mistica-color-borderSelected: var(--mistica-esimflag-blue);
301
+ --mistica-color-coverBackgroundHover: rgba(var(--mistica-esimflag-raw-darkModeBlack), 0.25);
302
+ --mistica-color-coverBackgroundPressed: rgba(var(--mistica-esimflag-raw-darkModeBlack), 0.35);
303
+ --mistica-color-buttonDangerBackground: var(--mistica-esimflag-tomato);
304
+ --mistica-color-buttonDangerBackgroundPressed: var(--mistica-esimflag-tomato55);
305
+ --mistica-color-buttonDangerBackgroundHover: var(--mistica-esimflag-tomato55);
306
+ --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
307
+ --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-esimflag-raw-white), 0);
308
+ --mistica-color-buttonLinkDangerBackgroundInversePressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
309
+ --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
310
+ --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
311
+ --mistica-color-buttonPrimaryBackground: var(--mistica-esimflag-blue);
312
+ --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-esimflag-blue);
313
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-esimflag-blue55);
314
+ --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-esimflag-blue55);
315
+ --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-esimflag-blue55);
316
+ --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-esimflag-raw-white), 0.15);
317
+ --mistica-color-buttonSecondaryBorder: var(--mistica-esimflag-white);
318
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-esimflag-white);
319
+ --mistica-color-buttonSecondaryBorderInverse: var(--mistica-esimflag-white);
320
+ --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-esimflag-white);
321
+ --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-esimflag-raw-white), 0.15);
322
+ --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-esimflag-raw-white), 0.15);
323
+ --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-esimflag-raw-white), 0.15);
324
+ --mistica-color-textButtonPrimary: var(--mistica-esimflag-white);
325
+ --mistica-color-textButtonPrimaryInverse: var(--mistica-esimflag-white);
326
+ --mistica-color-textButtonPrimaryInversePressed: var(--mistica-esimflag-white);
327
+ --mistica-color-textButtonSecondary: var(--mistica-esimflag-grey2);
328
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-esimflag-grey2);
329
+ --mistica-color-textButtonSecondaryInverse: var(--mistica-esimflag-grey2);
330
+ --mistica-color-textButtonSecondaryInversePressed: var(--mistica-esimflag-grey2);
331
+ --mistica-color-textLink: var(--mistica-esimflag-purple30);
332
+ --mistica-color-textLinkInverse: var(--mistica-esimflag-purple30);
333
+ --mistica-color-textLinkDanger: var(--mistica-esimflag-chili);
334
+ --mistica-color-textLinkSnackbar: var(--mistica-esimflag-blue30);
335
+ --mistica-color-textActivated: var(--mistica-esimflag-blue30);
336
+ --mistica-color-textBrand: var(--mistica-esimflag-blue30);
337
+ --mistica-color-control: var(--mistica-esimflag-grey4);
338
+ --mistica-color-controlActivated: var(--mistica-esimflag-blue);
339
+ --mistica-color-controlInverse: var(--mistica-esimflag-grey4);
340
+ --mistica-color-controlActivatedInverse: var(--mistica-esimflag-darkModeBlue);
341
+ --mistica-color-controlError: var(--mistica-esimflag-tomato55);
342
+ --mistica-color-barTrack: var(--mistica-esimflag-darkModeGrey6);
343
+ --mistica-color-barTrackInverse: var(--mistica-esimflag-darkModeGrey6);
344
+ --mistica-color-loadingBar: var(--mistica-esimflag-darkModeBlue);
345
+ --mistica-color-loadingBarBackground: var(--mistica-esimflag-darkModeGrey6);
346
+ --mistica-color-toggleAndroidInactive: var(--mistica-esimflag-grey2);
347
+ --mistica-color-toggleAndroidBackgroundActive: var(--mistica-esimflag-blue15);
348
+ --mistica-color-iosControlKnob: var(--mistica-esimflag-grey3);
349
+ --mistica-color-controlKnobInverse: var(--mistica-esimflag-grey3);
350
+ --mistica-color-badge: var(--mistica-esimflag-tomato65);
351
+ --mistica-color-feedbackErrorBackground: var(--mistica-esimflag-tomato60);
352
+ --mistica-color-feedbackInfoBackground: var(--mistica-esimflag-darkModeGrey6);
353
+ --mistica-color-divider: rgba(var(--mistica-esimflag-raw-white), 0.1);
354
+ --mistica-color-dividerInverse: rgba(var(--mistica-esimflag-raw-white), 0.1);
355
+ --mistica-color-navigationBarDivider: var(--mistica-esimflag-darkModeBlack);
356
+ --mistica-color-brand: var(--mistica-esimflag-blue15);
357
+ --mistica-color-brandHigh: rgba(var(--mistica-esimflag-raw-white), 0.05);
358
+ --mistica-color-inverse: var(--mistica-esimflag-grey3);
359
+ --mistica-color-neutralHigh: var(--mistica-esimflag-grey3);
360
+ --mistica-color-neutralMedium: var(--mistica-esimflag-grey6);
361
+ --mistica-color-neutralMediumInverse: var(--mistica-esimflag-grey6);
362
+ --mistica-color-neutralLow: var(--mistica-esimflag-grey6);
363
+ --mistica-color-neutralLowAlternative: var(--mistica-esimflag-grey6);
364
+ --mistica-color-textPrimary: var(--mistica-esimflag-grey3);
365
+ --mistica-color-textPrimaryInverse: var(--mistica-esimflag-grey3);
366
+ --mistica-color-textSecondary: var(--mistica-esimflag-grey4);
367
+ --mistica-color-textSecondaryInverse: var(--mistica-esimflag-grey4);
368
+ --mistica-color-success: var(--mistica-esimflag-grass);
369
+ --mistica-color-warning: var(--mistica-esimflag-peach);
370
+ --mistica-color-error: var(--mistica-esimflag-chili);
371
+ --mistica-color-textError: var(--mistica-esimflag-chili);
372
+ --mistica-color-textErrorInverse: var(--mistica-esimflag-chili);
373
+ --mistica-color-promo: var(--mistica-esimflag-purple);
374
+ --mistica-color-highlight: var(--mistica-esimflag-teal);
375
+ --mistica-color-successLow: var(--mistica-esimflag-darkModeGrey6);
376
+ --mistica-color-warningLow: var(--mistica-esimflag-darkModeGrey6);
377
+ --mistica-color-errorLow: var(--mistica-esimflag-darkModeGrey6);
378
+ --mistica-color-promoLow: var(--mistica-esimflag-darkModeGrey6);
379
+ --mistica-color-brandLow: var(--mistica-esimflag-darkModeGrey6);
380
+ --mistica-color-successHigh: var(--mistica-esimflag-grass70);
381
+ --mistica-color-warningHigh: var(--mistica-esimflag-peach75);
382
+ --mistica-color-errorHigh: var(--mistica-esimflag-tomato60);
383
+ --mistica-color-promoHigh: var(--mistica-esimflag-purple55);
384
+ --mistica-color-successHighInverse: var(--mistica-esimflag-grass75);
385
+ --mistica-color-warningHighInverse: var(--mistica-esimflag-peach75);
386
+ --mistica-color-errorHighInverse: var(--mistica-esimflag-tomato60);
387
+ --mistica-color-promoHighInverse: var(--mistica-esimflag-purple55);
388
+ --mistica-color-textNavigationBarPrimary: var(--mistica-esimflag-grey3);
389
+ --mistica-color-textNavigationBarSecondary: var(--mistica-esimflag-grey4);
390
+ --mistica-color-textNavigationSearchBarHint: var(--mistica-esimflag-grey4);
391
+ --mistica-color-textNavigationSearchBarText: var(--mistica-esimflag-grey3);
392
+ --mistica-color-textAppBar: var(--mistica-esimflag-grey4);
393
+ --mistica-color-textAppBarSelected: var(--mistica-esimflag-blue15);
394
+ --mistica-color-customTabsBackground: var(--mistica-esimflag-darkModeBlack);
395
+ --mistica-color-tagTextPromo: var(--mistica-esimflag-blush);
396
+ --mistica-color-tagTextActive: var(--mistica-esimflag-blue30);
397
+ --mistica-color-tagTextInactive: var(--mistica-esimflag-grey3);
398
+ --mistica-color-tagTextInfo: var(--mistica-esimflag-purple30);
399
+ --mistica-color-tagTextSuccess: var(--mistica-esimflag-grass);
400
+ --mistica-color-tagTextWarning: var(--mistica-esimflag-peach);
401
+ --mistica-color-tagTextError: var(--mistica-esimflag-chili);
402
+ --mistica-color-tagBackgroundPromo: var(--mistica-esimflag-darkModeGrey6);
403
+ --mistica-color-tagBackgroundActive: var(--mistica-esimflag-darkModeGrey6);
404
+ --mistica-color-tagBackgroundInactive: var(--mistica-esimflag-darkModeGrey6);
405
+ --mistica-color-tagBackgroundInfo: var(--mistica-esimflag-darkModeGrey6);
406
+ --mistica-color-tagBackgroundSuccess: var(--mistica-esimflag-darkModeGrey6);
407
+ --mistica-color-tagBackgroundWarning: var(--mistica-esimflag-darkModeGrey6);
408
+ --mistica-color-tagBackgroundError: var(--mistica-esimflag-darkModeGrey6);
409
+ --mistica-color-tagTextPromoInverse: var(--mistica-esimflag-blush);
410
+ --mistica-color-tagTextActiveInverse: var(--mistica-esimflag-blue30);
411
+ --mistica-color-tagTextInactiveInverse: var(--mistica-esimflag-grey3);
412
+ --mistica-color-tagTextInfoInverse: var(--mistica-esimflag-blue30);
413
+ --mistica-color-tagTextSuccessInverse: var(--mistica-esimflag-grass);
414
+ --mistica-color-tagTextWarningInverse: var(--mistica-esimflag-peach);
415
+ --mistica-color-tagTextErrorInverse: var(--mistica-esimflag-chili);
416
+ --mistica-color-tagBackgroundPromoInverse: var(--mistica-esimflag-darkModeGrey6);
417
+ --mistica-color-tagBackgroundActiveInverse: var(--mistica-esimflag-darkModeGrey6);
418
+ --mistica-color-tagBackgroundInactiveInverse: var(--mistica-esimflag-darkModeGrey6);
419
+ --mistica-color-tagBackgroundInfoInverse: var(--mistica-esimflag-darkModeGrey6);
420
+ --mistica-color-tagBackgroundSuccessInverse: var(--mistica-esimflag-darkModeGrey6);
421
+ --mistica-color-tagBackgroundWarningInverse: var(--mistica-esimflag-darkModeGrey6);
422
+ --mistica-color-tagBackgroundErrorInverse: var(--mistica-esimflag-darkModeGrey6);
423
+ --mistica-color-cardContentOverlay: linear-gradient(
424
+ 180deg,
425
+ rgba(var(--mistica-esimflag-raw-black), 0) 0%,
426
+ rgba(var(--mistica-esimflag-raw-black), 0.4) 30%,
427
+ rgba(var(--mistica-esimflag-raw-black), 0.7) 100%
428
+ );
429
+ }
430
+
431
+ @media (prefers-color-scheme: dark) {
432
+ [data-mistica-skin='esimflag'] {
433
+ --mistica-color-background: var(--mistica-esimflag-darkModeBlack);
434
+ --mistica-color-backgroundAlternative: var(--mistica-esimflag-darkModeBlack);
435
+ --mistica-color-backgroundBrand: var(--mistica-esimflag-darkModeBlack);
436
+ --mistica-color-backgroundBrandSecondary: var(--mistica-esimflag-darkModeBlack);
437
+ --mistica-color-backgroundContainer: var(--mistica-esimflag-darkModeGrey);
438
+ --mistica-color-backgroundContainerError: var(--mistica-esimflag-darkModeGrey);
439
+ --mistica-color-backgroundContainerHover: rgba(var(--mistica-esimflag-raw-white), 0.05);
440
+ --mistica-color-backgroundContainerPressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
441
+ --mistica-color-backgroundContainerBrand: var(--mistica-esimflag-darkModeGrey);
442
+ --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-esimflag-raw-white), 0.03);
443
+ --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-esimflag-raw-white), 0.05);
444
+ --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-esimflag-darkModeGrey);
445
+ --mistica-color-backgroundContainerAlternative: var(--mistica-esimflag-darkModeGrey);
446
+ --mistica-color-backgroundOverlay: rgba(var(--mistica-esimflag-raw-darkModeGrey), 0.8);
447
+ --mistica-color-backgroundSkeleton: var(--mistica-esimflag-darkModeGrey6);
448
+ --mistica-color-backgroundSkeletonInverse: var(--mistica-esimflag-darkModeGrey6);
449
+ --mistica-color-backgroundBrandTop: var(--mistica-esimflag-darkModeBlack);
450
+ --mistica-color-backgroundBrandBottom: var(--mistica-esimflag-darkModeBlack);
451
+ --mistica-color-appBarBackground: var(--mistica-esimflag-darkModeGrey);
452
+ --mistica-color-navigationBarBackground: var(--mistica-esimflag-darkModeBlack);
453
+ --mistica-color-skeletonWave: var(--mistica-esimflag-grey6);
454
+ --mistica-color-borderLow: var(--mistica-esimflag-darkModeBlack);
455
+ --mistica-color-border: var(--mistica-esimflag-darkModeGrey);
456
+ --mistica-color-borderHigh: var(--mistica-esimflag-grey5);
457
+ --mistica-color-borderSelected: var(--mistica-esimflag-blue);
458
+ --mistica-color-coverBackgroundHover: rgba(var(--mistica-esimflag-raw-darkModeBlack), 0.25);
459
+ --mistica-color-coverBackgroundPressed: rgba(var(--mistica-esimflag-raw-darkModeBlack), 0.35);
460
+ --mistica-color-buttonDangerBackground: var(--mistica-esimflag-tomato);
461
+ --mistica-color-buttonDangerBackgroundPressed: var(--mistica-esimflag-tomato55);
462
+ --mistica-color-buttonDangerBackgroundHover: var(--mistica-esimflag-tomato55);
463
+ --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
464
+ --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-esimflag-raw-white), 0);
465
+ --mistica-color-buttonLinkDangerBackgroundInversePressed: rgba(
466
+ var(--mistica-esimflag-raw-white),
467
+ 0.08
468
+ );
469
+ --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
470
+ --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
471
+ --mistica-color-buttonPrimaryBackground: var(--mistica-esimflag-blue);
472
+ --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-esimflag-blue);
473
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-esimflag-blue55);
474
+ --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-esimflag-blue55);
475
+ --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-esimflag-blue55);
476
+ --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-esimflag-raw-white), 0.15);
477
+ --mistica-color-buttonSecondaryBorder: var(--mistica-esimflag-white);
478
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-esimflag-white);
479
+ --mistica-color-buttonSecondaryBorderInverse: var(--mistica-esimflag-white);
480
+ --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-esimflag-white);
481
+ --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-esimflag-raw-white), 0.15);
482
+ --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-esimflag-raw-white), 0.15);
483
+ --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(
484
+ var(--mistica-esimflag-raw-white),
485
+ 0.15
486
+ );
487
+ --mistica-color-textButtonPrimary: var(--mistica-esimflag-white);
488
+ --mistica-color-textButtonPrimaryInverse: var(--mistica-esimflag-white);
489
+ --mistica-color-textButtonPrimaryInversePressed: var(--mistica-esimflag-white);
490
+ --mistica-color-textButtonSecondary: var(--mistica-esimflag-grey2);
491
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-esimflag-grey2);
492
+ --mistica-color-textButtonSecondaryInverse: var(--mistica-esimflag-grey2);
493
+ --mistica-color-textButtonSecondaryInversePressed: var(--mistica-esimflag-grey2);
494
+ --mistica-color-textLink: var(--mistica-esimflag-purple30);
495
+ --mistica-color-textLinkInverse: var(--mistica-esimflag-purple30);
496
+ --mistica-color-textLinkDanger: var(--mistica-esimflag-chili);
497
+ --mistica-color-textLinkSnackbar: var(--mistica-esimflag-blue30);
498
+ --mistica-color-textActivated: var(--mistica-esimflag-blue30);
499
+ --mistica-color-textBrand: var(--mistica-esimflag-blue30);
500
+ --mistica-color-control: var(--mistica-esimflag-grey4);
501
+ --mistica-color-controlActivated: var(--mistica-esimflag-blue);
502
+ --mistica-color-controlInverse: var(--mistica-esimflag-grey4);
503
+ --mistica-color-controlActivatedInverse: var(--mistica-esimflag-darkModeBlue);
504
+ --mistica-color-controlError: var(--mistica-esimflag-tomato55);
505
+ --mistica-color-barTrack: var(--mistica-esimflag-darkModeGrey6);
506
+ --mistica-color-barTrackInverse: var(--mistica-esimflag-darkModeGrey6);
507
+ --mistica-color-loadingBar: var(--mistica-esimflag-darkModeBlue);
508
+ --mistica-color-loadingBarBackground: var(--mistica-esimflag-darkModeGrey6);
509
+ --mistica-color-toggleAndroidInactive: var(--mistica-esimflag-grey2);
510
+ --mistica-color-toggleAndroidBackgroundActive: var(--mistica-esimflag-blue15);
511
+ --mistica-color-iosControlKnob: var(--mistica-esimflag-grey3);
512
+ --mistica-color-controlKnobInverse: var(--mistica-esimflag-grey3);
513
+ --mistica-color-badge: var(--mistica-esimflag-tomato65);
514
+ --mistica-color-feedbackErrorBackground: var(--mistica-esimflag-tomato60);
515
+ --mistica-color-feedbackInfoBackground: var(--mistica-esimflag-darkModeGrey6);
516
+ --mistica-color-divider: rgba(var(--mistica-esimflag-raw-white), 0.1);
517
+ --mistica-color-dividerInverse: rgba(var(--mistica-esimflag-raw-white), 0.1);
518
+ --mistica-color-navigationBarDivider: var(--mistica-esimflag-darkModeBlack);
519
+ --mistica-color-brand: var(--mistica-esimflag-blue15);
520
+ --mistica-color-brandHigh: rgba(var(--mistica-esimflag-raw-white), 0.05);
521
+ --mistica-color-inverse: var(--mistica-esimflag-grey3);
522
+ --mistica-color-neutralHigh: var(--mistica-esimflag-grey3);
523
+ --mistica-color-neutralMedium: var(--mistica-esimflag-grey6);
524
+ --mistica-color-neutralMediumInverse: var(--mistica-esimflag-grey6);
525
+ --mistica-color-neutralLow: var(--mistica-esimflag-grey6);
526
+ --mistica-color-neutralLowAlternative: var(--mistica-esimflag-grey6);
527
+ --mistica-color-textPrimary: var(--mistica-esimflag-grey3);
528
+ --mistica-color-textPrimaryInverse: var(--mistica-esimflag-grey3);
529
+ --mistica-color-textSecondary: var(--mistica-esimflag-grey4);
530
+ --mistica-color-textSecondaryInverse: var(--mistica-esimflag-grey4);
531
+ --mistica-color-success: var(--mistica-esimflag-grass);
532
+ --mistica-color-warning: var(--mistica-esimflag-peach);
533
+ --mistica-color-error: var(--mistica-esimflag-chili);
534
+ --mistica-color-textError: var(--mistica-esimflag-chili);
535
+ --mistica-color-textErrorInverse: var(--mistica-esimflag-chili);
536
+ --mistica-color-promo: var(--mistica-esimflag-purple);
537
+ --mistica-color-highlight: var(--mistica-esimflag-teal);
538
+ --mistica-color-successLow: var(--mistica-esimflag-darkModeGrey6);
539
+ --mistica-color-warningLow: var(--mistica-esimflag-darkModeGrey6);
540
+ --mistica-color-errorLow: var(--mistica-esimflag-darkModeGrey6);
541
+ --mistica-color-promoLow: var(--mistica-esimflag-darkModeGrey6);
542
+ --mistica-color-brandLow: var(--mistica-esimflag-darkModeGrey6);
543
+ --mistica-color-successHigh: var(--mistica-esimflag-grass70);
544
+ --mistica-color-warningHigh: var(--mistica-esimflag-peach75);
545
+ --mistica-color-errorHigh: var(--mistica-esimflag-tomato60);
546
+ --mistica-color-promoHigh: var(--mistica-esimflag-purple55);
547
+ --mistica-color-successHighInverse: var(--mistica-esimflag-grass75);
548
+ --mistica-color-warningHighInverse: var(--mistica-esimflag-peach75);
549
+ --mistica-color-errorHighInverse: var(--mistica-esimflag-tomato60);
550
+ --mistica-color-promoHighInverse: var(--mistica-esimflag-purple55);
551
+ --mistica-color-textNavigationBarPrimary: var(--mistica-esimflag-grey3);
552
+ --mistica-color-textNavigationBarSecondary: var(--mistica-esimflag-grey4);
553
+ --mistica-color-textNavigationSearchBarHint: var(--mistica-esimflag-grey4);
554
+ --mistica-color-textNavigationSearchBarText: var(--mistica-esimflag-grey3);
555
+ --mistica-color-textAppBar: var(--mistica-esimflag-grey4);
556
+ --mistica-color-textAppBarSelected: var(--mistica-esimflag-blue15);
557
+ --mistica-color-customTabsBackground: var(--mistica-esimflag-darkModeBlack);
558
+ --mistica-color-tagTextPromo: var(--mistica-esimflag-blush);
559
+ --mistica-color-tagTextActive: var(--mistica-esimflag-blue30);
560
+ --mistica-color-tagTextInactive: var(--mistica-esimflag-grey3);
561
+ --mistica-color-tagTextInfo: var(--mistica-esimflag-purple30);
562
+ --mistica-color-tagTextSuccess: var(--mistica-esimflag-grass);
563
+ --mistica-color-tagTextWarning: var(--mistica-esimflag-peach);
564
+ --mistica-color-tagTextError: var(--mistica-esimflag-chili);
565
+ --mistica-color-tagBackgroundPromo: var(--mistica-esimflag-darkModeGrey6);
566
+ --mistica-color-tagBackgroundActive: var(--mistica-esimflag-darkModeGrey6);
567
+ --mistica-color-tagBackgroundInactive: var(--mistica-esimflag-darkModeGrey6);
568
+ --mistica-color-tagBackgroundInfo: var(--mistica-esimflag-darkModeGrey6);
569
+ --mistica-color-tagBackgroundSuccess: var(--mistica-esimflag-darkModeGrey6);
570
+ --mistica-color-tagBackgroundWarning: var(--mistica-esimflag-darkModeGrey6);
571
+ --mistica-color-tagBackgroundError: var(--mistica-esimflag-darkModeGrey6);
572
+ --mistica-color-tagTextPromoInverse: var(--mistica-esimflag-blush);
573
+ --mistica-color-tagTextActiveInverse: var(--mistica-esimflag-blue30);
574
+ --mistica-color-tagTextInactiveInverse: var(--mistica-esimflag-grey3);
575
+ --mistica-color-tagTextInfoInverse: var(--mistica-esimflag-blue30);
576
+ --mistica-color-tagTextSuccessInverse: var(--mistica-esimflag-grass);
577
+ --mistica-color-tagTextWarningInverse: var(--mistica-esimflag-peach);
578
+ --mistica-color-tagTextErrorInverse: var(--mistica-esimflag-chili);
579
+ --mistica-color-tagBackgroundPromoInverse: var(--mistica-esimflag-darkModeGrey6);
580
+ --mistica-color-tagBackgroundActiveInverse: var(--mistica-esimflag-darkModeGrey6);
581
+ --mistica-color-tagBackgroundInactiveInverse: var(--mistica-esimflag-darkModeGrey6);
582
+ --mistica-color-tagBackgroundInfoInverse: var(--mistica-esimflag-darkModeGrey6);
583
+ --mistica-color-tagBackgroundSuccessInverse: var(--mistica-esimflag-darkModeGrey6);
584
+ --mistica-color-tagBackgroundWarningInverse: var(--mistica-esimflag-darkModeGrey6);
585
+ --mistica-color-tagBackgroundErrorInverse: var(--mistica-esimflag-darkModeGrey6);
586
+ --mistica-color-cardContentOverlay: linear-gradient(
587
+ 180deg,
588
+ rgba(var(--mistica-esimflag-raw-black), 0) 0%,
589
+ rgba(var(--mistica-esimflag-raw-black), 0.4) 30%,
590
+ rgba(var(--mistica-esimflag-raw-black), 0.7) 100%
591
+ );
592
+ }
593
+
594
+ [data-mistica-skin='esimflag'][data-mistica-color-scheme='light'] {
595
+ --mistica-color-background: var(--mistica-esimflag-white);
596
+ --mistica-color-backgroundAlternative: var(--mistica-esimflag-grey1);
597
+ --mistica-color-backgroundBrand: linear-gradient(
598
+ 180deg,
599
+ var(--mistica-esimflag-blue55) 0%,
600
+ var(--mistica-esimflag-blue) 60%,
601
+ var(--mistica-esimflag-purple) 100%
602
+ );
603
+ --mistica-color-backgroundBrandSecondary: var(--mistica-esimflag-blue);
604
+ --mistica-color-backgroundContainer: var(--mistica-esimflag-white);
605
+ --mistica-color-backgroundContainerError: var(--mistica-esimflag-tomato10);
606
+ --mistica-color-backgroundContainerHover: rgba(var(--mistica-esimflag-raw-blue55), 0.05);
607
+ --mistica-color-backgroundContainerPressed: rgba(var(--mistica-esimflag-raw-blue55), 0.08);
608
+ --mistica-color-backgroundContainerBrand: linear-gradient(
609
+ 180deg,
610
+ var(--mistica-esimflag-blue55) 0%,
611
+ var(--mistica-esimflag-blue) 60%,
612
+ var(--mistica-esimflag-purple) 100%
613
+ );
614
+ --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-esimflag-raw-blue55), 0.2);
615
+ --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-esimflag-raw-blue55), 0.4);
616
+ --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-esimflag-blue80);
617
+ --mistica-color-backgroundContainerAlternative: var(--mistica-esimflag-grey1);
618
+ --mistica-color-backgroundOverlay: rgba(var(--mistica-esimflag-raw-black), 0.6);
619
+ --mistica-color-backgroundSkeleton: var(--mistica-esimflag-grey2);
620
+ --mistica-color-backgroundSkeletonInverse: var(--mistica-esimflag-blue55);
621
+ --mistica-color-backgroundBrandTop: var(--mistica-esimflag-blue65);
622
+ --mistica-color-backgroundBrandBottom: var(--mistica-esimflag-purple);
623
+ --mistica-color-appBarBackground: var(--mistica-esimflag-white);
624
+ --mistica-color-navigationBarBackground: var(--mistica-esimflag-blue55);
625
+ --mistica-color-skeletonWave: var(--mistica-esimflag-grey2);
626
+ --mistica-color-borderLow: var(--mistica-esimflag-grey1);
627
+ --mistica-color-border: var(--mistica-esimflag-grey3);
628
+ --mistica-color-borderHigh: var(--mistica-esimflag-grey5);
629
+ --mistica-color-borderSelected: var(--mistica-esimflag-blue);
630
+ --mistica-color-coverBackgroundHover: rgba(var(--mistica-esimflag-raw-darkModeBlack), 0.25);
631
+ --mistica-color-coverBackgroundPressed: rgba(var(--mistica-esimflag-raw-darkModeBlack), 0.35);
632
+ --mistica-color-buttonDangerBackground: var(--mistica-esimflag-tomato55);
633
+ --mistica-color-buttonDangerBackgroundPressed: var(--mistica-esimflag-tomato65);
634
+ --mistica-color-buttonDangerBackgroundHover: var(--mistica-esimflag-tomato60);
635
+ --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-esimflag-tomato10);
636
+ --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-esimflag-white);
637
+ --mistica-color-buttonLinkDangerBackgroundInversePressed: var(--mistica-esimflag-tomato10);
638
+ --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-esimflag-raw-purple55), 0.08);
639
+ --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
640
+ --mistica-color-buttonPrimaryBackground: var(--mistica-esimflag-blue);
641
+ --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-esimflag-white);
642
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-esimflag-blue65);
643
+ --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-esimflag-blue55);
644
+ --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-esimflag-blue15);
645
+ --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-esimflag-blue15);
646
+ --mistica-color-buttonSecondaryBorder: var(--mistica-esimflag-blue);
647
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-esimflag-blue55);
648
+ --mistica-color-buttonSecondaryBorderInverse: var(--mistica-esimflag-white);
649
+ --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-esimflag-white);
650
+ --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-esimflag-blue10);
651
+ --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-esimflag-raw-white), 0.15);
652
+ --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(
653
+ var(--mistica-esimflag-raw-white),
654
+ 0.15
655
+ );
656
+ --mistica-color-textButtonPrimary: var(--mistica-esimflag-white);
657
+ --mistica-color-textButtonPrimaryInverse: var(--mistica-esimflag-blue);
658
+ --mistica-color-textButtonPrimaryInversePressed: var(--mistica-esimflag-blue55);
659
+ --mistica-color-textButtonSecondary: var(--mistica-esimflag-blue);
660
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-esimflag-blue55);
661
+ --mistica-color-textButtonSecondaryInverse: var(--mistica-esimflag-white);
662
+ --mistica-color-textButtonSecondaryInversePressed: var(--mistica-esimflag-white);
663
+ --mistica-color-textLink: var(--mistica-esimflag-purple);
664
+ --mistica-color-textLinkInverse: var(--mistica-esimflag-white);
665
+ --mistica-color-textLinkDanger: var(--mistica-esimflag-tomato55);
666
+ --mistica-color-textLinkSnackbar: var(--mistica-esimflag-blue30);
667
+ --mistica-color-textActivated: var(--mistica-esimflag-blue);
668
+ --mistica-color-textBrand: var(--mistica-esimflag-blue);
669
+ --mistica-color-control: var(--mistica-esimflag-grey4);
670
+ --mistica-color-controlActivated: var(--mistica-esimflag-blue);
671
+ --mistica-color-controlInverse: var(--mistica-esimflag-blue20);
672
+ --mistica-color-controlActivatedInverse: var(--mistica-esimflag-white);
673
+ --mistica-color-controlError: var(--mistica-esimflag-tomato);
674
+ --mistica-color-barTrack: var(--mistica-esimflag-grey3);
675
+ --mistica-color-barTrackInverse: rgba(var(--mistica-esimflag-raw-white), 0.3);
676
+ --mistica-color-loadingBar: var(--mistica-esimflag-blue);
677
+ --mistica-color-loadingBarBackground: var(--mistica-esimflag-grey2);
678
+ --mistica-color-toggleAndroidInactive: var(--mistica-esimflag-grey3);
679
+ --mistica-color-toggleAndroidBackgroundActive: var(--mistica-esimflag-blue20);
680
+ --mistica-color-iosControlKnob: var(--mistica-esimflag-white);
681
+ --mistica-color-controlKnobInverse: var(--mistica-esimflag-blue);
682
+ --mistica-color-badge: var(--mistica-esimflag-tomato65);
683
+ --mistica-color-feedbackErrorBackground: var(--mistica-esimflag-tomato);
684
+ --mistica-color-feedbackInfoBackground: var(--mistica-esimflag-blue80);
685
+ --mistica-color-divider: var(--mistica-esimflag-grey3);
686
+ --mistica-color-dividerInverse: rgba(var(--mistica-esimflag-raw-white), 0.2);
687
+ --mistica-color-navigationBarDivider: var(--mistica-esimflag-grey3);
688
+ --mistica-color-brand: var(--mistica-esimflag-blue);
689
+ --mistica-color-brandHigh: var(--mistica-esimflag-blue55);
690
+ --mistica-color-inverse: var(--mistica-esimflag-white);
691
+ --mistica-color-neutralHigh: var(--mistica-esimflag-blue85);
692
+ --mistica-color-neutralMedium: var(--mistica-esimflag-grey5);
693
+ --mistica-color-neutralMediumInverse: var(--mistica-esimflag-grey5);
694
+ --mistica-color-neutralLow: var(--mistica-esimflag-grey1);
695
+ --mistica-color-neutralLowAlternative: var(--mistica-esimflag-grey2);
696
+ --mistica-color-textPrimary: var(--mistica-esimflag-blue85);
697
+ --mistica-color-textPrimaryInverse: var(--mistica-esimflag-white);
698
+ --mistica-color-textSecondary: var(--mistica-esimflag-grey5);
699
+ --mistica-color-textSecondaryInverse: var(--mistica-esimflag-blue10);
700
+ --mistica-color-success: var(--mistica-esimflag-grass);
701
+ --mistica-color-warning: var(--mistica-esimflag-peach);
702
+ --mistica-color-error: var(--mistica-esimflag-tomato);
703
+ --mistica-color-textError: var(--mistica-esimflag-tomato55);
704
+ --mistica-color-textErrorInverse: var(--mistica-esimflag-white);
705
+ --mistica-color-promo: var(--mistica-esimflag-purple);
706
+ --mistica-color-highlight: var(--mistica-esimflag-teal);
707
+ --mistica-color-successLow: var(--mistica-esimflag-grass10);
708
+ --mistica-color-warningLow: var(--mistica-esimflag-peach10);
709
+ --mistica-color-errorLow: var(--mistica-esimflag-tomato10);
710
+ --mistica-color-promoLow: var(--mistica-esimflag-purple10);
711
+ --mistica-color-brandLow: var(--mistica-esimflag-blue10);
712
+ --mistica-color-successHigh: var(--mistica-esimflag-grass70);
713
+ --mistica-color-warningHigh: var(--mistica-esimflag-peach75);
714
+ --mistica-color-errorHigh: var(--mistica-esimflag-tomato60);
715
+ --mistica-color-promoHigh: var(--mistica-esimflag-purple);
716
+ --mistica-color-successHighInverse: var(--mistica-esimflag-grass70);
717
+ --mistica-color-warningHighInverse: var(--mistica-esimflag-peach75);
718
+ --mistica-color-errorHighInverse: var(--mistica-esimflag-tomato60);
719
+ --mistica-color-promoHighInverse: var(--mistica-esimflag-purple);
720
+ --mistica-color-textNavigationBarPrimary: var(--mistica-esimflag-white);
721
+ --mistica-color-textNavigationBarSecondary: var(--mistica-esimflag-blue20);
722
+ --mistica-color-textNavigationSearchBarHint: var(--mistica-esimflag-blue20);
723
+ --mistica-color-textNavigationSearchBarText: var(--mistica-esimflag-white);
724
+ --mistica-color-textAppBar: var(--mistica-esimflag-grey5);
725
+ --mistica-color-textAppBarSelected: var(--mistica-esimflag-blue55);
726
+ --mistica-color-customTabsBackground: var(--mistica-esimflag-blue);
727
+ --mistica-color-tagTextPromo: var(--mistica-esimflag-blue85);
728
+ --mistica-color-tagTextActive: var(--mistica-esimflag-blue85);
729
+ --mistica-color-tagTextInactive: var(--mistica-esimflag-grey5);
730
+ --mistica-color-tagTextInfo: var(--mistica-esimflag-blue85);
731
+ --mistica-color-tagTextSuccess: var(--mistica-esimflag-blue85);
732
+ --mistica-color-tagTextWarning: var(--mistica-esimflag-blue85);
733
+ --mistica-color-tagTextError: var(--mistica-esimflag-blue85);
734
+ --mistica-color-tagBackgroundPromo: var(--mistica-esimflag-blush);
735
+ --mistica-color-tagBackgroundActive: var(--mistica-esimflag-teal);
736
+ --mistica-color-tagBackgroundInactive: var(--mistica-esimflag-grey2);
737
+ --mistica-color-tagBackgroundInfo: var(--mistica-esimflag-purple);
738
+ --mistica-color-tagBackgroundSuccess: var(--mistica-esimflag-grass);
739
+ --mistica-color-tagBackgroundWarning: var(--mistica-esimflag-peach);
740
+ --mistica-color-tagBackgroundError: var(--mistica-esimflag-chili);
741
+ --mistica-color-tagTextPromoInverse: var(--mistica-esimflag-purple55);
742
+ --mistica-color-tagTextActiveInverse: var(--mistica-esimflag-teal75);
743
+ --mistica-color-tagTextInactiveInverse: var(--mistica-esimflag-grey5);
744
+ --mistica-color-tagTextInfoInverse: var(--mistica-esimflag-purple);
745
+ --mistica-color-tagTextSuccessInverse: var(--mistica-esimflag-grass75);
746
+ --mistica-color-tagTextWarningInverse: var(--mistica-esimflag-peach75);
747
+ --mistica-color-tagTextErrorInverse: var(--mistica-esimflag-tomato65);
748
+ --mistica-color-tagBackgroundPromoInverse: var(--mistica-esimflag-purple10);
749
+ --mistica-color-tagBackgroundActiveInverse: var(--mistica-esimflag-teal10);
750
+ --mistica-color-tagBackgroundInactiveInverse: var(--mistica-esimflag-grey2);
751
+ --mistica-color-tagBackgroundInfoInverse: var(--mistica-esimflag-purple10);
752
+ --mistica-color-tagBackgroundSuccessInverse: var(--mistica-esimflag-grass10);
753
+ --mistica-color-tagBackgroundWarningInverse: var(--mistica-esimflag-peach10);
754
+ --mistica-color-tagBackgroundErrorInverse: var(--mistica-esimflag-tomato10);
755
+ --mistica-color-cardContentOverlay: linear-gradient(
756
+ 180deg,
757
+ rgba(var(--mistica-esimflag-raw-black), 0) 0%,
758
+ rgba(var(--mistica-esimflag-raw-black), 0.4) 30%,
759
+ rgba(var(--mistica-esimflag-raw-black), 0.7) 100%
760
+ );
761
+ }
762
+ }
763
+
764
+ @media (min-width: 1024px) {
765
+ [data-mistica-skin='esimflag'] {
766
+ /* Text */
767
+ --mistica-font-size-1: 0.875rem;
768
+ --mistica-line-height-1: 1.25rem;
769
+ --mistica-font-size-2: 1rem;
770
+ --mistica-line-height-2: 1.5rem;
771
+ --mistica-font-size-3: 1.125rem;
772
+ --mistica-line-height-3: 1.5rem;
773
+ --mistica-font-size-4: 1.25rem;
774
+ --mistica-line-height-4: 1.75rem;
775
+ --mistica-font-size-5: 1.75rem;
776
+ --mistica-line-height-5: 2rem;
777
+ --mistica-font-size-6: 2rem;
778
+ --mistica-line-height-6: 2.5rem;
779
+ --mistica-font-size-7: 2.5rem;
780
+ --mistica-line-height-7: 3rem;
781
+ --mistica-font-size-8: 3rem;
782
+ --mistica-line-height-8: 3.5rem;
783
+ --mistica-font-size-9: 3.5rem;
784
+ --mistica-line-height-9: 4rem;
785
+ --mistica-font-size-10: 4rem;
786
+ --mistica-line-height-10: 4.5rem;
787
+ --mistica-font-size-cardTitle: 1.5rem;
788
+ --mistica-line-height-cardTitle: 1.75rem;
789
+
790
+ --mistica-font-size-tabsLabel: 1.125rem;
791
+ --mistica-line-height-tabsLabel: 1.5rem;
792
+
793
+ --mistica-font-size-title3: 1.75rem;
794
+ --mistica-line-height-title3: 2rem;
795
+ }
796
+ }