@telefonica/mistica 17.2.0 → 17.4.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 (347) hide show
  1. package/css/blau.css +30 -16
  2. package/css/community/cyber.css +1491 -0
  3. package/css/esimflag.css +41 -18
  4. package/css/mistica-common.css +6 -0
  5. package/css/mistica.css +1 -1
  6. package/css/movistar.css +35 -18
  7. package/css/o2.css +32 -18
  8. package/css/telefonica.css +44 -18
  9. package/css/vivo-evolution.css +72 -20
  10. package/css/vivo.css +32 -18
  11. package/dist/accordion.css-mistica.js +10 -10
  12. package/dist/align.css-mistica.js +1 -1
  13. package/dist/autocomplete.css-mistica.js +4 -4
  14. package/dist/avatar.css-mistica.js +1 -1
  15. package/dist/badge.css-mistica.js +1 -1
  16. package/dist/box.css-mistica.js +13 -13
  17. package/dist/boxed.css-mistica.js +24 -24
  18. package/dist/boxed.d.ts +9 -0
  19. package/dist/boxed.js +18 -15
  20. package/dist/button-group.css-mistica.js +1 -1
  21. package/dist/button-layout.css-mistica.js +19 -19
  22. package/dist/button.css-mistica.js +50 -50
  23. package/dist/callout.css-mistica.js +13 -13
  24. package/dist/card-internal.css-mistica.js +22 -22
  25. package/dist/carousel.css-mistica.js +30 -30
  26. package/dist/checkbox.css-mistica.js +15 -15
  27. package/dist/chip.css-mistica.js +18 -18
  28. package/dist/circle.css-mistica.js +2 -2
  29. package/dist/community/advanced-data-card.css-mistica.js +19 -19
  30. package/dist/community/ai-card.css-mistica.js +9 -9
  31. package/dist/community/blocks.css-mistica.js +3 -3
  32. package/dist/community/cyber/example-component.css-mistica.js +1 -1
  33. package/dist/community/example-component.css-mistica.js +1 -1
  34. package/dist/community/skins/cyber-skin.d.ts +5 -0
  35. package/dist/community/skins/cyber-skin.js +289 -256
  36. package/dist/counter.css-mistica.js +6 -6
  37. package/dist/cover-hero.css-mistica.js +7 -7
  38. package/dist/credit-card-number-field.css-mistica.js +3 -3
  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 +10 -10
  42. package/dist/divider.css-mistica.js +5 -5
  43. package/dist/double-field.css-mistica.js +2 -2
  44. package/dist/drawer.css-mistica.js +4 -4
  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 +5 -5
  49. package/dist/file-upload.css-mistica.js +10 -10
  50. package/dist/fixed-footer-layout.css-mistica.js +6 -6
  51. package/dist/form.css-mistica.js +1 -1
  52. package/dist/generated/mistica-icons/icon-panel-collapse-regular.js +165 -0
  53. package/dist/generated/mistica-icons/icon-panel-expand-regular.js +159 -0
  54. package/dist/grid-layout.css-mistica.js +3 -3
  55. package/dist/grid.css-mistica.js +120 -120
  56. package/dist/header.css-mistica.js +1 -1
  57. package/dist/hero.css-mistica.js +4 -4
  58. package/dist/horizontal-scroll.css-mistica.js +1 -1
  59. package/dist/icon-button.css-mistica.js +53 -53
  60. package/dist/icons/icon-chevron.css-mistica.js +2 -2
  61. package/dist/icons/icon-error.css-mistica.js +1 -1
  62. package/dist/image.css-mistica.js +8 -8
  63. package/dist/index.d.ts +5 -0
  64. package/dist/index.js +10 -1
  65. package/dist/inline.css-mistica.js +11 -11
  66. package/dist/list.css-mistica.js +40 -28
  67. package/dist/list.css.d.ts +2 -0
  68. package/dist/list.d.ts +3 -1
  69. package/dist/list.js +176 -165
  70. package/dist/loading-bar.css-mistica.js +1 -1
  71. package/dist/loading-screen.css-mistica.js +12 -12
  72. package/dist/logo-movistar.js +1 -1
  73. package/dist/logo.css-mistica.js +5 -5
  74. package/dist/menu.css-mistica.js +13 -13
  75. package/dist/mobile-navigation-menu.d.ts +26 -0
  76. package/dist/mobile-navigation-menu.js +145 -0
  77. package/dist/mosaic.css-mistica.js +1 -1
  78. package/dist/navigation-bar.css-mistica.js +31 -97
  79. package/dist/navigation-bar.css.d.ts +0 -24
  80. package/dist/navigation-bar.d.ts +3 -38
  81. package/dist/navigation-bar.js +399 -586
  82. package/dist/navigation-breadcrumbs.css-mistica.js +1 -1
  83. package/dist/navigation-shared.css-mistica.js +79 -0
  84. package/dist/navigation-shared.css.d.ts +26 -0
  85. package/dist/navigation-shared.d.ts +66 -0
  86. package/dist/navigation-shared.js +264 -0
  87. package/dist/package-version.js +1 -1
  88. package/dist/pagination.css-mistica.js +22 -22
  89. package/dist/pin-field.css-mistica.js +4 -4
  90. package/dist/popover.css-mistica.js +1 -1
  91. package/dist/portal.d.ts +1 -1
  92. package/dist/progress-bar.css-mistica.js +7 -7
  93. package/dist/radio-button.css-mistica.js +27 -27
  94. package/dist/rating.css-mistica.js +4 -4
  95. package/dist/responsive-layout.css-mistica.js +6 -6
  96. package/dist/screen-reader-only.css-mistica.js +1 -1
  97. package/dist/select.css-mistica.js +21 -21
  98. package/dist/sheet-action-row.css-mistica.js +1 -1
  99. package/dist/sheet-common.css-mistica.js +7 -7
  100. package/dist/sheet-info.css-mistica.js +1 -1
  101. package/dist/sidenav-bar-context.d.ts +25 -0
  102. package/dist/sidenav-bar-context.js +72 -0
  103. package/dist/sidenav-bar-data.d.ts +15 -0
  104. package/dist/sidenav-bar-data.js +38 -0
  105. package/dist/sidenav-bar-first-level-item.d.ts +42 -0
  106. package/dist/sidenav-bar-first-level-item.js +174 -0
  107. package/dist/sidenav-bar-keyboard.d.ts +13 -0
  108. package/dist/sidenav-bar-keyboard.js +314 -0
  109. package/dist/sidenav-bar-layout.css-mistica.js +28 -0
  110. package/dist/sidenav-bar-layout.css.d.ts +5 -0
  111. package/dist/sidenav-bar-layout.d.ts +22 -0
  112. package/dist/sidenav-bar-layout.js +103 -0
  113. package/dist/sidenav-bar-mobile.d.ts +24 -0
  114. package/dist/sidenav-bar-mobile.js +332 -0
  115. package/dist/sidenav-bar-motion.d.ts +32 -0
  116. package/dist/sidenav-bar-motion.js +84 -0
  117. package/dist/sidenav-bar-panel.d.ts +31 -0
  118. package/dist/sidenav-bar-panel.js +208 -0
  119. package/dist/sidenav-bar-row.d.ts +82 -0
  120. package/dist/sidenav-bar-row.js +230 -0
  121. package/dist/sidenav-bar-second-level-item.d.ts +43 -0
  122. package/dist/sidenav-bar-second-level-item.js +89 -0
  123. package/dist/sidenav-bar-section.d.ts +23 -0
  124. package/dist/sidenav-bar-section.js +167 -0
  125. package/dist/sidenav-bar-types.d.ts +192 -0
  126. package/dist/sidenav-bar-types.js +11 -0
  127. package/dist/sidenav-bar.css-mistica.js +325 -0
  128. package/dist/sidenav-bar.css.d.ts +93 -0
  129. package/dist/sidenav-bar.d.ts +102 -0
  130. package/dist/sidenav-bar.js +492 -0
  131. package/dist/skeletons.css-mistica.js +8 -8
  132. package/dist/skins/blau.d.ts +5 -0
  133. package/dist/skins/blau.js +12 -8
  134. package/dist/skins/esimflag.d.ts +5 -0
  135. package/dist/skins/esimflag.js +13 -9
  136. package/dist/skins/movistar.d.ts +5 -0
  137. package/dist/skins/movistar.js +13 -9
  138. package/dist/skins/o2.d.ts +5 -0
  139. package/dist/skins/o2.js +13 -9
  140. package/dist/skins/skin-contract.css-mistica.js +735 -731
  141. package/dist/skins/skin-contract.css.d.ts +16 -12
  142. package/dist/skins/telefonica.d.ts +5 -0
  143. package/dist/skins/telefonica.js +13 -9
  144. package/dist/skins/types/colors.d.ts +13 -6
  145. package/dist/skins/vivo-evolution.d.ts +5 -0
  146. package/dist/skins/vivo-evolution.js +14 -10
  147. package/dist/skins/vivo.d.ts +5 -0
  148. package/dist/skins/vivo.js +13 -9
  149. package/dist/skip-link.css-mistica.js +2 -2
  150. package/dist/slider.css-mistica.js +24 -24
  151. package/dist/snackbar.css-mistica.js +14 -14
  152. package/dist/spinner.css-mistica.js +1 -1
  153. package/dist/square.css-mistica.js +1 -1
  154. package/dist/stack.css-mistica.js +5 -5
  155. package/dist/stacking-group.css-mistica.js +1 -1
  156. package/dist/stepper.css-mistica.js +9 -9
  157. package/dist/switch-component.css-mistica.js +48 -42
  158. package/dist/switch-component.css.d.ts +2 -0
  159. package/dist/switch-component.js +18 -18
  160. package/dist/table.css-mistica.js +9 -9
  161. package/dist/tabs.css-mistica.js +22 -22
  162. package/dist/tag.css-mistica.js +3 -3
  163. package/dist/text-field-base.css-mistica.js +19 -19
  164. package/dist/text-field-components.css-mistica.js +10 -10
  165. package/dist/text-link.css-mistica.js +6 -6
  166. package/dist/text-tokens.d.ts +6 -0
  167. package/dist/text-tokens.js +157 -133
  168. package/dist/text.css-mistica.js +6 -6
  169. package/dist/timeline.css-mistica.js +11 -11
  170. package/dist/timer.css-mistica.js +6 -6
  171. package/dist/tooltip.css-mistica.js +2 -2
  172. package/dist/touchable.css-mistica.js +4 -4
  173. package/dist/utils/aspect-ratio-support.css-mistica.js +2 -2
  174. package/dist/video.css-mistica.js +1 -1
  175. package/dist/vivinho-loading-animation/vivinho-loading-animation.css-mistica.js +1 -1
  176. package/dist-es/accordion.css-mistica.js +7 -7
  177. package/dist-es/align.css-mistica.js +1 -1
  178. package/dist-es/autocomplete.css-mistica.js +2 -2
  179. package/dist-es/avatar.css-mistica.js +1 -1
  180. package/dist-es/badge.css-mistica.js +1 -1
  181. package/dist-es/box.css-mistica.js +13 -13
  182. package/dist-es/boxed.css-mistica.js +23 -23
  183. package/dist-es/boxed.js +25 -25
  184. package/dist-es/button-group.css-mistica.js +1 -1
  185. package/dist-es/button-layout.css-mistica.js +16 -16
  186. package/dist-es/button.css-mistica.js +38 -38
  187. package/dist-es/callout.css-mistica.js +12 -12
  188. package/dist-es/card-internal.css-mistica.js +17 -17
  189. package/dist-es/carousel.css-mistica.js +10 -10
  190. package/dist-es/checkbox.css-mistica.js +13 -13
  191. package/dist-es/chip.css-mistica.js +17 -17
  192. package/dist-es/circle.css-mistica.js +2 -2
  193. package/dist-es/community/advanced-data-card.css-mistica.js +7 -7
  194. package/dist-es/community/ai-card.css-mistica.js +3 -3
  195. package/dist-es/community/blocks.css-mistica.js +2 -2
  196. package/dist-es/community/cyber/example-component.css-mistica.js +1 -1
  197. package/dist-es/community/example-component.css-mistica.js +1 -1
  198. package/dist-es/community/skins/cyber-skin.js +289 -256
  199. package/dist-es/counter.css-mistica.js +2 -2
  200. package/dist-es/cover-hero.css-mistica.js +4 -4
  201. package/dist-es/credit-card-number-field.css-mistica.js +3 -3
  202. package/dist-es/date-field.css-mistica.js +1 -1
  203. package/dist-es/date-time-picker.css-mistica.js +1 -1
  204. package/dist-es/dialog.css-mistica.js +5 -5
  205. package/dist-es/divider.css-mistica.js +5 -5
  206. package/dist-es/double-field.css-mistica.js +2 -2
  207. package/dist-es/drawer.css-mistica.js +2 -2
  208. package/dist-es/empty-state-card.css-mistica.js +1 -1
  209. package/dist-es/empty-state.css-mistica.js +7 -7
  210. package/dist-es/fade-in.css-mistica.js +1 -1
  211. package/dist-es/feedback.css-mistica.js +2 -2
  212. package/dist-es/file-upload.css-mistica.js +8 -8
  213. package/dist-es/fixed-footer-layout.css-mistica.js +3 -3
  214. package/dist-es/form.css-mistica.js +1 -1
  215. package/dist-es/generated/mistica-icons/icon-panel-collapse-regular.js +115 -0
  216. package/dist-es/generated/mistica-icons/icon-panel-expand-regular.js +109 -0
  217. package/dist-es/grid-layout.css-mistica.js +3 -3
  218. package/dist-es/grid.css-mistica.js +120 -120
  219. package/dist-es/header.css-mistica.js +1 -1
  220. package/dist-es/hero.css-mistica.js +3 -3
  221. package/dist-es/horizontal-scroll.css-mistica.js +1 -1
  222. package/dist-es/icon-button.css-mistica.js +53 -53
  223. package/dist-es/icons/icon-chevron.css-mistica.js +2 -2
  224. package/dist-es/icons/icon-error.css-mistica.js +1 -1
  225. package/dist-es/image.css-mistica.js +4 -4
  226. package/dist-es/index.js +2279 -2276
  227. package/dist-es/inline.css-mistica.js +11 -11
  228. package/dist-es/list.css-mistica.js +8 -2
  229. package/dist-es/list.js +275 -264
  230. package/dist-es/loading-bar.css-mistica.js +1 -1
  231. package/dist-es/loading-screen.css-mistica.js +5 -5
  232. package/dist-es/logo-movistar.js +1 -1
  233. package/dist-es/logo.css-mistica.js +5 -5
  234. package/dist-es/menu.css-mistica.js +13 -13
  235. package/dist-es/mobile-navigation-menu.js +90 -0
  236. package/dist-es/mosaic.css-mistica.js +1 -1
  237. package/dist-es/navigation-bar.css-mistica.js +11 -20
  238. package/dist-es/navigation-bar.js +469 -656
  239. package/dist-es/navigation-breadcrumbs.css-mistica.js +1 -1
  240. package/dist-es/navigation-shared.css-mistica.js +11 -0
  241. package/dist-es/navigation-shared.js +192 -0
  242. package/dist-es/package-version.js +1 -1
  243. package/dist-es/pagination.css-mistica.js +19 -19
  244. package/dist-es/pin-field.css-mistica.js +2 -2
  245. package/dist-es/popover.css-mistica.js +1 -1
  246. package/dist-es/progress-bar.css-mistica.js +7 -7
  247. package/dist-es/radio-button.css-mistica.js +22 -22
  248. package/dist-es/rating.css-mistica.js +3 -3
  249. package/dist-es/responsive-layout.css-mistica.js +6 -6
  250. package/dist-es/screen-reader-only.css-mistica.js +1 -1
  251. package/dist-es/select.css-mistica.js +18 -18
  252. package/dist-es/sheet-action-row.css-mistica.js +1 -1
  253. package/dist-es/sheet-common.css-mistica.js +2 -2
  254. package/dist-es/sheet-info.css-mistica.js +1 -1
  255. package/dist-es/sidenav-bar-context.js +14 -0
  256. package/dist-es/sidenav-bar-data.js +12 -0
  257. package/dist-es/sidenav-bar-first-level-item.js +124 -0
  258. package/dist-es/sidenav-bar-keyboard.js +253 -0
  259. package/dist-es/sidenav-bar-layout.css-mistica.js +2 -0
  260. package/dist-es/sidenav-bar-layout.js +86 -0
  261. package/dist-es/sidenav-bar-mobile.js +277 -0
  262. package/dist-es/sidenav-bar-motion.js +26 -0
  263. package/dist-es/sidenav-bar-panel.js +146 -0
  264. package/dist-es/sidenav-bar-row.js +208 -0
  265. package/dist-es/sidenav-bar-second-level-item.js +72 -0
  266. package/dist-es/sidenav-bar-section.js +112 -0
  267. package/dist-es/sidenav-bar-types.js +2 -0
  268. package/dist-es/sidenav-bar.css-mistica.js +74 -0
  269. package/dist-es/sidenav-bar.js +429 -0
  270. package/dist-es/skeletons.css-mistica.js +7 -7
  271. package/dist-es/skins/blau.js +12 -8
  272. package/dist-es/skins/esimflag.js +13 -9
  273. package/dist-es/skins/movistar.js +13 -9
  274. package/dist-es/skins/o2.js +13 -9
  275. package/dist-es/skins/skin-contract.css-mistica.js +735 -731
  276. package/dist-es/skins/telefonica.js +13 -9
  277. package/dist-es/skins/vivo-evolution.js +14 -10
  278. package/dist-es/skins/vivo.js +13 -9
  279. package/dist-es/skip-link.css-mistica.js +2 -2
  280. package/dist-es/slider.css-mistica.js +20 -20
  281. package/dist-es/snackbar.css-mistica.js +5 -5
  282. package/dist-es/spinner.css-mistica.js +1 -1
  283. package/dist-es/square.css-mistica.js +1 -1
  284. package/dist-es/stack.css-mistica.js +5 -5
  285. package/dist-es/stacking-group.css-mistica.js +1 -1
  286. package/dist-es/stepper.css-mistica.js +3 -3
  287. package/dist-es/style.css +1 -1
  288. package/dist-es/switch-component.css-mistica.js +37 -37
  289. package/dist-es/switch-component.js +26 -26
  290. package/dist-es/table.css-mistica.js +9 -9
  291. package/dist-es/tabs.css-mistica.js +19 -19
  292. package/dist-es/tag.css-mistica.js +2 -2
  293. package/dist-es/text-field-base.css-mistica.js +17 -17
  294. package/dist-es/text-field-components.css-mistica.js +4 -4
  295. package/dist-es/text-link.css-mistica.js +6 -6
  296. package/dist-es/text-tokens.js +82 -67
  297. package/dist-es/text.css-mistica.js +6 -6
  298. package/dist-es/timeline.css-mistica.js +10 -10
  299. package/dist-es/timer.css-mistica.js +6 -6
  300. package/dist-es/tooltip.css-mistica.js +2 -2
  301. package/dist-es/touchable.css-mistica.js +2 -2
  302. package/dist-es/utils/aspect-ratio-support.css-mistica.js +2 -2
  303. package/dist-es/video.css-mistica.js +1 -1
  304. package/dist-es/vivinho-loading-animation/vivinho-loading-animation.css-mistica.js +1 -1
  305. package/package.json +3 -2
  306. package/src/boxed.css.ts +1 -0
  307. package/src/boxed.tsx +18 -5
  308. package/src/callout.css.ts +4 -2
  309. package/src/community/skins/cyber-skin.tsx +127 -439
  310. package/src/index.tsx +14 -0
  311. package/src/list.css.ts +36 -1
  312. package/src/list.tsx +370 -344
  313. package/src/logo-movistar.tsx +1 -1
  314. package/src/mobile-navigation-menu.tsx +168 -0
  315. package/src/navigation-bar.css.ts +2 -267
  316. package/src/navigation-bar.tsx +77 -370
  317. package/src/navigation-shared.css.ts +289 -0
  318. package/src/navigation-shared.tsx +262 -0
  319. package/src/package-version.tsx +1 -1
  320. package/src/portal.tsx +1 -1
  321. package/src/sidenav-bar-context.tsx +41 -0
  322. package/src/sidenav-bar-data.ts +49 -0
  323. package/src/sidenav-bar-first-level-item.tsx +203 -0
  324. package/src/sidenav-bar-keyboard.tsx +393 -0
  325. package/src/sidenav-bar-layout.css.ts +89 -0
  326. package/src/sidenav-bar-layout.tsx +61 -0
  327. package/src/sidenav-bar-mobile.tsx +302 -0
  328. package/src/sidenav-bar-motion.tsx +70 -0
  329. package/src/sidenav-bar-panel.tsx +269 -0
  330. package/src/sidenav-bar-row.tsx +272 -0
  331. package/src/sidenav-bar-second-level-item.tsx +99 -0
  332. package/src/sidenav-bar-section.tsx +98 -0
  333. package/src/sidenav-bar-types.ts +224 -0
  334. package/src/sidenav-bar.css.ts +1018 -0
  335. package/src/sidenav-bar.tsx +821 -0
  336. package/src/skins/blau.tsx +18 -8
  337. package/src/skins/esimflag.tsx +19 -9
  338. package/src/skins/movistar.tsx +19 -9
  339. package/src/skins/o2.tsx +19 -9
  340. package/src/skins/skin-contract.css.ts +2 -0
  341. package/src/skins/telefonica.tsx +19 -9
  342. package/src/skins/types/colors.tsx +14 -6
  343. package/src/skins/vivo-evolution.tsx +20 -10
  344. package/src/skins/vivo.tsx +19 -9
  345. package/src/switch-component.css.ts +20 -0
  346. package/src/switch-component.tsx +9 -1
  347. package/src/text-tokens.tsx +24 -0
package/css/community/cyber.css ADDED
@@ -0,0 +1,1491 @@
1
+ /**
2
+ * @generated
3
+ * This file was automatically generated by the generate-design-tokens script.
4
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
5
+ */
6
+
7
+ [data-mistica-skin='cyber'] {
8
+ /* Palette colors */
9
+ --mistica-cyber-white: #ffffff;
10
+ --mistica-cyber-red10: #f9eeed;
11
+ --mistica-cyber-brand: #0066ff;
12
+ --mistica-cyber-brand70: #0356c9;
13
+ --mistica-cyber-brand10: #f7f7ff;
14
+ --mistica-cyber-grey900: #031a34;
15
+ --mistica-cyber-grey100: #d1d5e4;
16
+ --mistica-cyber-grey15: #f5f5f5;
17
+ --mistica-cyber-grey400: #6e7894;
18
+ --mistica-cyber-red50: #d22a1e;
19
+ --mistica-cyber-red60: #bf2618;
20
+ --mistica-cyber-grey10: #f2f2f2;
21
+ --mistica-cyber-black: #000000;
22
+ --mistica-cyber-brand15: #e5f0ff;
23
+ --mistica-cyber-brand30: #80b3ff;
24
+ --mistica-cyber-grey500: #5a637c;
25
+ --mistica-cyber-teal: #75c0c7;
26
+ --mistica-cyber-yellow60: #bea537;
27
+ --mistica-cyber-purple: #b86be8;
28
+ --mistica-cyber-red20: #f2b1a5;
29
+ --mistica-cyber-teal10: #ebffff;
30
+ --mistica-cyber-yellow15: #fcf7db;
31
+ --mistica-cyber-purple10: #f8f0fd;
32
+ --mistica-cyber-teal70: #528889;
33
+ --mistica-cyber-purple70: #9e2eb1;
34
+ --mistica-cyber-grey300: #8f97af;
35
+ --mistica-cyber-purple80: #471551;
36
+ --mistica-cyber-teal80: #253d3c;
37
+ --mistica-cyber-yellow80: #473515;
38
+ --mistica-cyber-teal20: #bfeaec;
39
+ --mistica-cyber-darkModeBlack: #070706;
40
+ --mistica-cyber-darkModeGrey: #151414;
41
+ --mistica-cyber-grey700: #2f4255;
42
+ --mistica-cyber-grey800: #393f46;
43
+ --mistica-cyber-darkModeBrand: #227aff;
44
+ --mistica-cyber-red30: #d6786b;
45
+ --mistica-cyber-brand20: #b2d1ff;
46
+ --mistica-cyber-grey200: #b0b6ca;
47
+ --mistica-cyber-brandDark: #00264d;
48
+ --mistica-cyber-teal40: #9ed3d8;
49
+ --mistica-cyber-yellow40: #f0d57c;
50
+ --mistica-cyber-purple40: #cd97ef;
51
+ --mistica-cyber-brand80: #002e73;
52
+ --mistica-cyber-red90: #491818;
53
+
54
+ /* Raw palette colors, for use with rgba() */
55
+ --mistica-cyber-raw-brand70: 3, 86, 201;
56
+ --mistica-cyber-raw-darkModeBlack: 7, 7, 6;
57
+ --mistica-cyber-raw-white: 255, 255, 255;
58
+ --mistica-cyber-raw-grey900: 3, 26, 52;
59
+ --mistica-cyber-raw-black: 0, 0, 0;
60
+ --mistica-cyber-raw-brand: 0, 102, 255;
61
+ --mistica-cyber-raw-brand80: 0, 46, 115;
62
+ --mistica-cyber-raw-darkModeBrand: 34, 122, 255;
63
+ --mistica-cyber-raw-darkModeGrey: 21, 20, 20;
64
+ --mistica-cyber-raw-red50: 210, 42, 30;
65
+ --mistica-cyber-raw-brand30: 128, 179, 255;
66
+
67
+ /* Colors */
68
+ --mistica-color-appBarBackground: var(--mistica-cyber-white);
69
+ --mistica-color-background: var(--mistica-cyber-white);
70
+ --mistica-color-backgroundContainer: var(--mistica-cyber-white);
71
+ --mistica-color-backgroundContainerError: var(--mistica-cyber-red10);
72
+ --mistica-color-backgroundContainerHover: rgba(var(--mistica-cyber-raw-brand70), 0.05);
73
+ --mistica-color-backgroundContainerPressed: rgba(var(--mistica-cyber-raw-brand70), 0.08);
74
+ --mistica-color-backgroundContainerBrand: var(--mistica-cyber-brand);
75
+ --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.2);
76
+ --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.4);
77
+ --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-cyber-brand70);
78
+ --mistica-color-backgroundContainerNegative: rgba(var(--mistica-cyber-raw-white), 0.1);
79
+ --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-cyber-brand70);
80
+ --mistica-color-backgroundContainerAlternative: var(--mistica-cyber-brand10);
81
+ --mistica-color-backgroundBrand: var(--mistica-cyber-brand);
82
+ --mistica-color-backgroundNegative: var(--mistica-cyber-grey900);
83
+ --mistica-color-backgroundBrandSecondary: var(--mistica-cyber-brand);
84
+ --mistica-color-backgroundOverlay: rgba(var(--mistica-cyber-raw-grey900), 0.8);
85
+ --mistica-color-backgroundSkeleton: var(--mistica-cyber-grey100);
86
+ --mistica-color-backgroundSkeletonInverse: var(--mistica-cyber-brand70);
87
+ --mistica-color-backgroundSkeletonNegative: rgba(var(--mistica-cyber-raw-black), 0.2);
88
+ --mistica-color-backgroundSkeletonBrand: var(--mistica-cyber-brand70);
89
+ --mistica-color-navigationBarBackground: var(--mistica-cyber-brand);
90
+ --mistica-color-backgroundAlternative: var(--mistica-cyber-brand10);
91
+ --mistica-color-backgroundSelected: rgba(var(--mistica-cyber-raw-brand), 0.08);
92
+ --mistica-color-backgroundSelectedHover: rgba(var(--mistica-cyber-raw-brand), 0.12);
93
+ --mistica-color-backgroundSelectedPressed: rgba(var(--mistica-cyber-raw-brand), 0.16);
94
+ --mistica-color-backgroundSelectedBrand: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.16);
95
+ --mistica-color-backgroundSelectedBrandHover: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.24);
96
+ --mistica-color-backgroundSelectedBrandPressed: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.32);
97
+ --mistica-color-backgroundSelectedNegative: rgba(var(--mistica-cyber-raw-white), 0.2);
98
+ --mistica-color-backgroundSelectedNegativeHover: rgba(var(--mistica-cyber-raw-white), 0.28);
99
+ --mistica-color-backgroundSelectedNegativePressed: rgba(var(--mistica-cyber-raw-white), 0.35);
100
+ --mistica-color-backgroundBrandTop: var(--mistica-cyber-brand);
101
+ --mistica-color-backgroundBrandBottom: var(--mistica-cyber-brand);
102
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-cyber-raw-brand70), 0.05);
103
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-cyber-raw-brand70), 0.08);
104
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-cyber-raw-brand80), 0.2);
105
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-cyber-raw-brand80), 0.4);
106
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-cyber-raw-white), 0.1);
107
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-cyber-raw-white), 0.17);
108
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-cyber-raw-brand80), 0.2);
109
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-cyber-raw-brand80), 0.4);
110
+ --mistica-color-skeletonWave: var(--mistica-cyber-grey100);
111
+ --mistica-color-borderLow: var(--mistica-cyber-grey15);
112
+ --mistica-color-border: var(--mistica-cyber-grey100);
113
+ --mistica-color-borderHigh: var(--mistica-cyber-grey400);
114
+ --mistica-color-borderSelected: var(--mistica-cyber-brand);
115
+ --mistica-color-coverBackgroundHover: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.25);
116
+ --mistica-color-coverBackgroundPressed: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.35);
117
+ --mistica-color-buttonDangerBackground: var(--mistica-cyber-red50);
118
+ --mistica-color-buttonDangerBackgroundPressed: var(--mistica-cyber-red60);
119
+ --mistica-color-buttonDangerBackgroundHover: var(--mistica-cyber-red60);
120
+ --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-cyber-white);
121
+ --mistica-color-buttonLinkDangerBackgroundNegative: var(--mistica-cyber-white);
122
+ --mistica-color-buttonLinkDangerBackgroundBrand: var(--mistica-cyber-white);
123
+ --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-cyber-white);
124
+ --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-cyber-red10);
125
+ --mistica-color-buttonLinkDangerBackgroundInversePressed: var(--mistica-cyber-red10);
126
+ --mistica-color-buttonLinkDangerBackgroundNegativePressed: var(--mistica-cyber-red10);
127
+ --mistica-color-buttonLinkDangerBackgroundBrandPressed: var(--mistica-cyber-red10);
128
+ --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-cyber-red10);
129
+ --mistica-color-buttonLinkBackgroundPressed: var(--mistica-cyber-brand10);
130
+ --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-cyber-raw-white), 0.08);
131
+ --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-cyber-raw-white), 0.08);
132
+ --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-cyber-raw-white), 0.08);
133
+ --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-cyber-raw-white), 0.08);
134
+ --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-cyber-grey10);
135
+ --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-cyber-white);
136
+ --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-cyber-grey10);
137
+ --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-cyber-white);
138
+ --mistica-color-buttonLinkNeutralBackgroundNegativePressed: var(--mistica-cyber-grey10);
139
+ --mistica-color-buttonLinkNeutralBackgroundMedia: var(--mistica-cyber-white);
140
+ --mistica-color-buttonLinkNeutralBackgroundMediaPressed: var(--mistica-cyber-grey10);
141
+ --mistica-color-buttonPrimaryBackground: var(--mistica-cyber-black);
142
+ --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-cyber-white);
143
+ --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-cyber-white);
144
+ --mistica-color-buttonPrimaryBackgroundBrand: var(--mistica-cyber-white);
145
+ --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-cyber-white);
146
+ --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-cyber-brand70);
147
+ --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-cyber-brand15);
148
+ --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-cyber-brand15);
149
+ --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-cyber-brand15);
150
+ --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-cyber-brand15);
151
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-cyber-brand70);
152
+ --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-cyber-brand15);
153
+ --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-cyber-brand15);
154
+ --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-cyber-brand15);
155
+ --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-cyber-brand15);
156
+ --mistica-color-buttonSecondaryBackgroundBrand: rgba(var(--mistica-cyber-raw-white), 0);
157
+ --mistica-color-buttonSecondaryBorder: var(--mistica-cyber-brand);
158
+ --mistica-color-buttonSecondaryBorderInverse: var(--mistica-cyber-white);
159
+ --mistica-color-buttonSecondaryBorderNegative: var(--mistica-cyber-white);
160
+ --mistica-color-buttonSecondaryBorderBrand: var(--mistica-cyber-white);
161
+ --mistica-color-buttonSecondaryBorderMedia: var(--mistica-cyber-white);
162
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-cyber-brand70);
163
+ --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-cyber-white);
164
+ --mistica-color-buttonSecondaryBorderNegativePressed: var(--mistica-cyber-white);
165
+ --mistica-color-buttonSecondaryBorderBrandPressed: var(--mistica-cyber-white);
166
+ --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-cyber-white);
167
+ --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-cyber-brand15);
168
+ --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-cyber-raw-white), 0.1);
169
+ --mistica-color-buttonSecondaryBackgroundNegativeHover: rgba(var(--mistica-cyber-raw-white), 0.1);
170
+ --mistica-color-buttonSecondaryBackgroundBrandHover: rgba(var(--mistica-cyber-raw-white), 0.1);
171
+ --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-cyber-raw-white), 0.1);
172
+ --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-cyber-brand15);
173
+ --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-cyber-raw-white), 0.1);
174
+ --mistica-color-buttonSecondaryBackgroundNegativePressed: rgba(var(--mistica-cyber-raw-white), 0.1);
175
+ --mistica-color-buttonSecondaryBackgroundBrandPressed: rgba(var(--mistica-cyber-raw-white), 0.1);
176
+ --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-cyber-raw-white), 0.1);
177
+ --mistica-color-textButtonPrimary: var(--mistica-cyber-white);
178
+ --mistica-color-textButtonPrimaryInverse: var(--mistica-cyber-brand);
179
+ --mistica-color-textButtonPrimaryNegative: var(--mistica-cyber-brand);
180
+ --mistica-color-textButtonPrimaryBrand: var(--mistica-cyber-brand);
181
+ --mistica-color-textButtonPrimaryMedia: var(--mistica-cyber-brand);
182
+ --mistica-color-textButtonPrimaryInversePressed: var(--mistica-cyber-brand70);
183
+ --mistica-color-textButtonPrimaryNegativePressed: var(--mistica-cyber-brand70);
184
+ --mistica-color-textButtonPrimaryBrandPressed: var(--mistica-cyber-brand70);
185
+ --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-cyber-brand70);
186
+ --mistica-color-textButtonSecondary: var(--mistica-cyber-black);
187
+ --mistica-color-textButtonSecondaryInverse: var(--mistica-cyber-white);
188
+ --mistica-color-textButtonSecondaryNegative: var(--mistica-cyber-white);
189
+ --mistica-color-textButtonSecondaryBrand: var(--mistica-cyber-white);
190
+ --mistica-color-textButtonSecondaryMedia: var(--mistica-cyber-white);
191
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-cyber-brand70);
192
+ --mistica-color-textButtonSecondaryInversePressed: var(--mistica-cyber-white);
193
+ --mistica-color-textButtonSecondaryNegativePressed: var(--mistica-cyber-white);
194
+ --mistica-color-textButtonSecondaryBrandPressed: var(--mistica-cyber-white);
195
+ --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-cyber-white);
196
+ --mistica-color-textLink: var(--mistica-cyber-brand);
197
+ --mistica-color-textLinkInverse: var(--mistica-cyber-white);
198
+ --mistica-color-textLinkNegative: var(--mistica-cyber-white);
199
+ --mistica-color-textLinkBrand: var(--mistica-cyber-white);
200
+ --mistica-color-textLinkMedia: var(--mistica-cyber-white);
201
+ --mistica-color-textLinkDanger: var(--mistica-cyber-red50);
202
+ --mistica-color-textLinkDangerMedia: var(--mistica-cyber-red50);
203
+ --mistica-color-textLinkSnackbar: var(--mistica-cyber-brand30);
204
+ --mistica-color-textLinkNeutral: var(--mistica-cyber-grey900);
205
+ --mistica-color-textLinkNeutralBrand: var(--mistica-cyber-grey900);
206
+ --mistica-color-textLinkNeutralNegative: var(--mistica-cyber-grey900);
207
+ --mistica-color-textLinkNeutralAlternative: var(--mistica-cyber-grey900);
208
+ --mistica-color-textLinkNeutralMedia: var(--mistica-cyber-grey900);
209
+ --mistica-color-textActivated: var(--mistica-cyber-brand70);
210
+ --mistica-color-textBrand: var(--mistica-cyber-brand70);
211
+ --mistica-color-inputBorder: var(--mistica-cyber-grey400);
212
+ --mistica-color-inputBorderInverse: var(--mistica-cyber-white);
213
+ --mistica-color-inputBorderNegative: var(--mistica-cyber-white);
214
+ --mistica-color-inputBorderBrand: var(--mistica-cyber-white);
215
+ --mistica-color-completedStep: var(--mistica-cyber-brand);
216
+ --mistica-color-completedStepInverse: var(--mistica-cyber-brand70);
217
+ --mistica-color-completedStepNegative: var(--mistica-cyber-brand70);
218
+ --mistica-color-completedStepBrand: var(--mistica-cyber-brand70);
219
+ --mistica-color-control: var(--mistica-cyber-grey400);
220
+ --mistica-color-controlActivated: var(--mistica-cyber-brand);
221
+ --mistica-color-controlInverse: var(--mistica-cyber-brand10);
222
+ --mistica-color-controlNegative: var(--mistica-cyber-brand10);
223
+ --mistica-color-controlBrand: var(--mistica-cyber-brand10);
224
+ --mistica-color-controlActivatedInverse: var(--mistica-cyber-white);
225
+ --mistica-color-controlActivatedNegative: var(--mistica-cyber-white);
226
+ --mistica-color-controlActivatedBrand: var(--mistica-cyber-white);
227
+ --mistica-color-controlError: var(--mistica-cyber-red50);
228
+ --mistica-color-chevronIndicator: var(--mistica-cyber-grey400);
229
+ --mistica-color-barTrack: var(--mistica-cyber-grey100);
230
+ --mistica-color-barTrackInverse: rgba(var(--mistica-cyber-raw-white), 0.3);
231
+ --mistica-color-barTrackNegative: rgba(var(--mistica-cyber-raw-white), 0.3);
232
+ --mistica-color-barTrackBrand: rgba(var(--mistica-cyber-raw-white), 0.3);
233
+ --mistica-color-loadingBar: var(--mistica-cyber-brand30);
234
+ --mistica-color-loadingBarBackground: var(--mistica-cyber-brand70);
235
+ --mistica-color-toggleAndroidInactive: var(--mistica-cyber-grey100);
236
+ --mistica-color-toggleAndroidBackgroundActive: var(--mistica-cyber-grey100);
237
+ --mistica-color-toggleAndroidActiveBrand: var(--mistica-cyber-white);
238
+ --mistica-color-toggleAndroidInactiveBrand: var(--mistica-cyber-grey100);
239
+ --mistica-color-toggleAndroidBackgroundActiveBrand: var(--mistica-cyber-grey100);
240
+ --mistica-color-toggleAndroidBackgroundInactiveBrand: var(--mistica-cyber-brand10);
241
+ --mistica-color-iosControlKnob: var(--mistica-cyber-white);
242
+ --mistica-color-controlKnobInverse: var(--mistica-cyber-brand);
243
+ --mistica-color-controlKnobNegative: var(--mistica-cyber-brand);
244
+ --mistica-color-controlKnobBrand: var(--mistica-cyber-brand);
245
+ --mistica-color-divider: var(--mistica-cyber-grey100);
246
+ --mistica-color-dividerInverse: rgba(var(--mistica-cyber-raw-white), 0.2);
247
+ --mistica-color-dividerNegative: rgba(var(--mistica-cyber-raw-white), 0.2);
248
+ --mistica-color-dividerBrand: rgba(var(--mistica-cyber-raw-white), 0.2);
249
+ --mistica-color-navigationBarDivider: var(--mistica-cyber-brand);
250
+ --mistica-color-badge: var(--mistica-cyber-red50);
251
+ --mistica-color-feedbackErrorBackground: var(--mistica-cyber-red50);
252
+ --mistica-color-feedbackInfoBackground: var(--mistica-cyber-grey900);
253
+ --mistica-color-brand: var(--mistica-cyber-brand);
254
+ --mistica-color-brandHigh: var(--mistica-cyber-brand70);
255
+ --mistica-color-inverse: var(--mistica-cyber-white);
256
+ --mistica-color-negative: var(--mistica-cyber-white);
257
+ --mistica-color-neutralHigh: var(--mistica-cyber-grey900);
258
+ --mistica-color-neutralHighNegative: var(--mistica-cyber-white);
259
+ --mistica-color-neutralHighBrand: var(--mistica-cyber-white);
260
+ --mistica-color-neutralMedium: var(--mistica-cyber-grey400);
261
+ --mistica-color-neutralMediumInverse: var(--mistica-cyber-grey400);
262
+ --mistica-color-neutralMediumNegative: var(--mistica-cyber-grey400);
263
+ --mistica-color-neutralMediumBrand: var(--mistica-cyber-grey400);
264
+ --mistica-color-neutralLow: var(--mistica-cyber-brand10);
265
+ --mistica-color-neutralLowAlternative: var(--mistica-cyber-grey100);
266
+ --mistica-color-textPrimary: var(--mistica-cyber-grey900);
267
+ --mistica-color-textPrimaryInverse: var(--mistica-cyber-white);
268
+ --mistica-color-textPrimaryNegative: var(--mistica-cyber-white);
269
+ --mistica-color-textPrimaryBrand: var(--mistica-cyber-white);
270
+ --mistica-color-textPrimaryMedia: var(--mistica-cyber-white);
271
+ --mistica-color-textSecondary: var(--mistica-cyber-grey500);
272
+ --mistica-color-textSecondaryInverse: var(--mistica-cyber-white);
273
+ --mistica-color-textSecondaryNegative: var(--mistica-cyber-white);
274
+ --mistica-color-textSecondaryBrand: var(--mistica-cyber-white);
275
+ --mistica-color-textSecondaryMedia: var(--mistica-cyber-white);
276
+ --mistica-color-error: var(--mistica-cyber-red50);
277
+ --mistica-color-textError: var(--mistica-cyber-red50);
278
+ --mistica-color-textErrorInverse: var(--mistica-cyber-white);
279
+ --mistica-color-textErrorNegative: var(--mistica-cyber-white);
280
+ --mistica-color-textErrorBrand: var(--mistica-cyber-white);
281
+ --mistica-color-success: var(--mistica-cyber-teal);
282
+ --mistica-color-warning: var(--mistica-cyber-yellow60);
283
+ --mistica-color-promo: var(--mistica-cyber-purple);
284
+ --mistica-color-highlight: var(--mistica-cyber-red20);
285
+ --mistica-color-successLow: var(--mistica-cyber-teal10);
286
+ --mistica-color-warningLow: var(--mistica-cyber-yellow15);
287
+ --mistica-color-errorLow: var(--mistica-cyber-red10);
288
+ --mistica-color-promoLow: var(--mistica-cyber-purple10);
289
+ --mistica-color-brandLow: var(--mistica-cyber-brand15);
290
+ --mistica-color-successHigh: var(--mistica-cyber-teal70);
291
+ --mistica-color-warningHigh: var(--mistica-cyber-yellow60);
292
+ --mistica-color-errorHigh: var(--mistica-cyber-red60);
293
+ --mistica-color-promoHigh: var(--mistica-cyber-purple70);
294
+ --mistica-color-successHighInverse: var(--mistica-cyber-teal70);
295
+ --mistica-color-successHighNegative: var(--mistica-cyber-teal70);
296
+ --mistica-color-successHighBrand: var(--mistica-cyber-teal70);
297
+ --mistica-color-warningHighInverse: var(--mistica-cyber-yellow60);
298
+ --mistica-color-warningHighNegative: var(--mistica-cyber-yellow60);
299
+ --mistica-color-warningHighBrand: var(--mistica-cyber-yellow60);
300
+ --mistica-color-errorHighInverse: var(--mistica-cyber-red60);
301
+ --mistica-color-errorHighNegative: var(--mistica-cyber-red60);
302
+ --mistica-color-errorHighBrand: var(--mistica-cyber-red60);
303
+ --mistica-color-promoHighInverse: var(--mistica-cyber-purple70);
304
+ --mistica-color-promoHighNegative: var(--mistica-cyber-purple70);
305
+ --mistica-color-promoHighBrand: var(--mistica-cyber-purple70);
306
+ --mistica-color-textNavigationBarPrimary: var(--mistica-cyber-white);
307
+ --mistica-color-textNavigationBarSecondary: var(--mistica-cyber-brand10);
308
+ --mistica-color-textNavigationSearchBarHint: var(--mistica-cyber-brand10);
309
+ --mistica-color-textNavigationSearchBarText: var(--mistica-cyber-white);
310
+ --mistica-color-textAppBar: var(--mistica-cyber-grey300);
311
+ --mistica-color-textAppBarSelected: var(--mistica-cyber-brand70);
312
+ --mistica-color-iosGlassAppBar: var(--mistica-cyber-grey900);
313
+ --mistica-color-iosGlassAppBarSelected: var(--mistica-cyber-brand70);
314
+ --mistica-color-customTabsBackground: var(--mistica-cyber-brand70);
315
+ --mistica-color-tagTextPromo: var(--mistica-cyber-purple80);
316
+ --mistica-color-tagTextActive: var(--mistica-cyber-brand70);
317
+ --mistica-color-tagTextInactive: var(--mistica-cyber-grey500);
318
+ --mistica-color-tagTextInfo: var(--mistica-cyber-brand70);
319
+ --mistica-color-tagTextSuccess: var(--mistica-cyber-teal80);
320
+ --mistica-color-tagTextWarning: var(--mistica-cyber-yellow80);
321
+ --mistica-color-tagTextError: var(--mistica-cyber-red60);
322
+ --mistica-color-tagBackgroundPromo: var(--mistica-cyber-purple10);
323
+ --mistica-color-tagBackgroundActive: var(--mistica-cyber-brand10);
324
+ --mistica-color-tagBackgroundInactive: var(--mistica-cyber-brand10);
325
+ --mistica-color-tagBackgroundInfo: var(--mistica-cyber-brand15);
326
+ --mistica-color-tagBackgroundSuccess: var(--mistica-cyber-teal20);
327
+ --mistica-color-tagBackgroundWarning: var(--mistica-cyber-yellow15);
328
+ --mistica-color-tagBackgroundError: var(--mistica-cyber-red10);
329
+ --mistica-color-tagTextPromoInverse: var(--mistica-cyber-purple80);
330
+ --mistica-color-tagTextPromoNegative: var(--mistica-cyber-purple80);
331
+ --mistica-color-tagTextPromoBrand: var(--mistica-cyber-purple80);
332
+ --mistica-color-tagTextActiveInverse: var(--mistica-cyber-brand70);
333
+ --mistica-color-tagTextActiveNegative: var(--mistica-cyber-brand70);
334
+ --mistica-color-tagTextActiveBrand: var(--mistica-cyber-brand70);
335
+ --mistica-color-tagTextInactiveInverse: var(--mistica-cyber-grey500);
336
+ --mistica-color-tagTextInactiveNegative: var(--mistica-cyber-grey500);
337
+ --mistica-color-tagTextInactiveBrand: var(--mistica-cyber-grey500);
338
+ --mistica-color-tagTextInfoInverse: var(--mistica-cyber-brand70);
339
+ --mistica-color-tagTextInfoNegative: var(--mistica-cyber-brand70);
340
+ --mistica-color-tagTextInfoBrand: var(--mistica-cyber-brand70);
341
+ --mistica-color-tagTextSuccessInverse: var(--mistica-cyber-teal80);
342
+ --mistica-color-tagTextSuccessNegative: var(--mistica-cyber-teal80);
343
+ --mistica-color-tagTextSuccessBrand: var(--mistica-cyber-teal80);
344
+ --mistica-color-tagTextWarningInverse: var(--mistica-cyber-yellow80);
345
+ --mistica-color-tagTextWarningNegative: var(--mistica-cyber-yellow80);
346
+ --mistica-color-tagTextWarningBrand: var(--mistica-cyber-yellow80);
347
+ --mistica-color-tagTextErrorInverse: var(--mistica-cyber-red60);
348
+ --mistica-color-tagTextErrorNegative: var(--mistica-cyber-red60);
349
+ --mistica-color-tagTextErrorBrand: var(--mistica-cyber-red60);
350
+ --mistica-color-tagBackgroundPromoInverse: var(--mistica-cyber-purple10);
351
+ --mistica-color-tagBackgroundPromoNegative: var(--mistica-cyber-purple10);
352
+ --mistica-color-tagBackgroundPromoBrand: var(--mistica-cyber-purple10);
353
+ --mistica-color-tagBackgroundActiveInverse: var(--mistica-cyber-brand10);
354
+ --mistica-color-tagBackgroundActiveNegative: var(--mistica-cyber-brand10);
355
+ --mistica-color-tagBackgroundActiveBrand: var(--mistica-cyber-brand10);
356
+ --mistica-color-tagBackgroundInactiveInverse: var(--mistica-cyber-brand10);
357
+ --mistica-color-tagBackgroundInactiveNegative: var(--mistica-cyber-brand10);
358
+ --mistica-color-tagBackgroundInactiveBrand: var(--mistica-cyber-brand10);
359
+ --mistica-color-tagBackgroundInfoInverse: var(--mistica-cyber-brand15);
360
+ --mistica-color-tagBackgroundInfoNegative: var(--mistica-cyber-brand15);
361
+ --mistica-color-tagBackgroundInfoBrand: var(--mistica-cyber-brand15);
362
+ --mistica-color-tagBackgroundSuccessInverse: var(--mistica-cyber-teal10);
363
+ --mistica-color-tagBackgroundSuccessNegative: var(--mistica-cyber-teal10);
364
+ --mistica-color-tagBackgroundSuccessBrand: var(--mistica-cyber-teal10);
365
+ --mistica-color-tagBackgroundWarningInverse: var(--mistica-cyber-yellow15);
366
+ --mistica-color-tagBackgroundWarningNegative: var(--mistica-cyber-yellow15);
367
+ --mistica-color-tagBackgroundWarningBrand: var(--mistica-cyber-yellow15);
368
+ --mistica-color-tagBackgroundErrorInverse: var(--mistica-cyber-red10);
369
+ --mistica-color-tagBackgroundErrorNegative: var(--mistica-cyber-red10);
370
+ --mistica-color-tagBackgroundErrorBrand: var(--mistica-cyber-red10);
371
+ --mistica-color-cardContentOverlay: linear-gradient(
372
+ 180deg,
373
+ rgba(var(--mistica-cyber-raw-black), 0) 0%,
374
+ rgba(var(--mistica-cyber-raw-black), 0.4) 30%,
375
+ rgba(var(--mistica-cyber-raw-black), 0.7) 100%
376
+ );
377
+ --mistica-color-cardFooterOverlay: rgba(var(--mistica-cyber-raw-black), 0.7);
378
+
379
+ /* Border radius */
380
+ --mistica-border-radius-avatar: 50%;
381
+ --mistica-border-radius-bar: 0px;
382
+ --mistica-border-radius-button: 32px;
383
+ --mistica-border-radius-checkbox: 2px;
384
+ --mistica-border-radius-container: 20px;
385
+ --mistica-border-radius-indicator: 24px;
386
+ --mistica-border-radius-chip: 24px;
387
+ --mistica-border-radius-tag: 24px;
388
+ --mistica-border-radius-input: 12px;
389
+ --mistica-border-radius-popup: 4px;
390
+ --mistica-border-radius-sheet: 0px;
391
+ --mistica-border-radius-mediaSmall: 2px;
392
+ --mistica-border-radius-snackbar: 4px;
393
+
394
+ /* Text */
395
+ --mistica-font-size-1: 0.75rem;
396
+ --mistica-line-height-1: 1rem;
397
+ --mistica-font-size-2: 0.875rem;
398
+ --mistica-line-height-2: 1.25rem;
399
+ --mistica-font-size-3: 1rem;
400
+ --mistica-line-height-3: 1.5rem;
401
+ --mistica-font-size-4: 1.125rem;
402
+ --mistica-line-height-4: 1.5rem;
403
+ --mistica-font-size-5: 1.25rem;
404
+ --mistica-line-height-5: 1.5rem;
405
+ --mistica-font-weight-5: 400;
406
+ --mistica-font-size-6: 1.5rem;
407
+ --mistica-line-height-6: 2rem;
408
+ --mistica-font-weight-6: 400;
409
+ --mistica-font-size-7: 1.75rem;
410
+ --mistica-line-height-7: 2rem;
411
+ --mistica-font-weight-7: 400;
412
+ --mistica-font-size-8: 2rem;
413
+ --mistica-line-height-8: 2.5rem;
414
+ --mistica-font-weight-8: 400;
415
+ --mistica-font-size-9: 2.5rem;
416
+ --mistica-line-height-9: 3rem;
417
+ --mistica-font-weight-9: 400;
418
+ --mistica-font-size-10: 3rem;
419
+ --mistica-line-height-10: 3.5rem;
420
+ --mistica-font-weight-10: 400;
421
+ --mistica-font-size-cardTitle: 1.25rem;
422
+ --mistica-line-height-cardTitle: 1.5rem;
423
+ --mistica-font-weight-cardTitle: 500;
424
+ --mistica-font-size-drawerTitle: 1.25rem;
425
+ --mistica-line-height-drawerTitle: 1.5rem;
426
+ --mistica-font-weight-drawerTitle: 400;
427
+ --mistica-font-weight-rowTitle: 400;
428
+ --mistica-font-weight-button: 500;
429
+ --mistica-font-size-tabsLabel: 1rem;
430
+ --mistica-line-height-tabsLabel: 1.5rem;
431
+ --mistica-font-weight-tabsLabel: 500;
432
+ --mistica-font-weight-link: 500;
433
+ --mistica-font-size-title1: 0.75rem;
434
+ --mistica-line-height-title1: 1rem;
435
+ --mistica-font-weight-title1: 500;
436
+ --mistica-font-size-title2: 1rem;
437
+ --mistica-line-height-title2: 1.5rem;
438
+ --mistica-font-weight-title2: 400;
439
+ --mistica-font-size-title3: 1.25rem;
440
+ --mistica-line-height-title3: 1.5rem;
441
+ --mistica-font-weight-title3: 400;
442
+ --mistica-font-size-title4: 1.5rem;
443
+ --mistica-line-height-title4: 2rem;
444
+ --mistica-font-weight-title4: 400;
445
+ --mistica-font-weight-indicator: 500;
446
+ --mistica-font-weight-navigationBar: 500;
447
+ --mistica-font-size-chipLabel: 0.875rem;
448
+ --mistica-line-height-chipLabel: 1.25rem;
449
+ --mistica-font-weight-chipLabel: 500;
450
+ --mistica-font-size-cardPretitleSnap: 0.875rem;
451
+ --mistica-line-height-cardPretitleSnap: 1.25rem;
452
+ --mistica-font-size-cardTitleSnap: 0.875rem;
453
+ --mistica-line-height-cardTitleSnap: 1.25rem;
454
+ --mistica-font-size-cardSubtitleSnap: 0.875rem;
455
+ --mistica-line-height-cardSubtitleSnap: 1.25rem;
456
+ --mistica-font-size-cardDescriptionSnap: 0.875rem;
457
+ --mistica-line-height-cardDescriptionSnap: 1.25rem;
458
+ --mistica-font-size-cardPretitleDefault: 0.875rem;
459
+ --mistica-line-height-cardPretitleDefault: 1.25rem;
460
+ --mistica-font-size-cardTitleDefault: 1.125rem;
461
+ --mistica-line-height-cardTitleDefault: 1.5rem;
462
+ --mistica-font-size-cardSubtitleDefault: 0.875rem;
463
+ --mistica-line-height-cardSubtitleDefault: 1.25rem;
464
+ --mistica-font-size-cardDescriptionDefault: 0.875rem;
465
+ --mistica-line-height-cardDescriptionDefault: 1.25rem;
466
+ --mistica-font-size-inputLabel: 0.75rem;
467
+ --mistica-line-height-inputLabel: 1rem;
468
+ --mistica-font-size-inputValue: 1rem;
469
+ --mistica-line-height-inputValue: 1.5rem;
470
+ --mistica-font-size-inputHelperText: 0.75rem;
471
+ --mistica-line-height-inputHelperText: 1rem;
472
+ --mistica-font-size-stepperStepLabel: 0.875rem;
473
+ --mistica-line-height-stepperStepLabel: 1.25rem;
474
+ --mistica-font-size-loadingScreenTitle: 1.125rem;
475
+ --mistica-line-height-loadingScreenTitle: 1.5rem;
476
+ }
477
+
478
+ [data-mistica-skin='cyber'][data-mistica-color-scheme='dark'] {
479
+ --mistica-color-background: var(--mistica-cyber-darkModeBlack);
480
+ --mistica-color-backgroundAlternative: var(--mistica-cyber-darkModeBlack);
481
+ --mistica-color-backgroundSelected: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.18);
482
+ --mistica-color-backgroundSelectedHover: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.25);
483
+ --mistica-color-backgroundSelectedPressed: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.33);
484
+ --mistica-color-backgroundSelectedBrand: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.18);
485
+ --mistica-color-backgroundSelectedBrandHover: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.25);
486
+ --mistica-color-backgroundSelectedBrandPressed: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.33);
487
+ --mistica-color-backgroundSelectedNegative: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.18);
488
+ --mistica-color-backgroundSelectedNegativeHover: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.25);
489
+ --mistica-color-backgroundSelectedNegativePressed: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.33);
490
+ --mistica-color-backgroundBrand: var(--mistica-cyber-darkModeBlack);
491
+ --mistica-color-backgroundNegative: var(--mistica-cyber-darkModeBlack);
492
+ --mistica-color-backgroundBrandSecondary: var(--mistica-cyber-darkModeBlack);
493
+ --mistica-color-backgroundContainer: var(--mistica-cyber-darkModeGrey);
494
+ --mistica-color-backgroundContainerError: var(--mistica-cyber-darkModeGrey);
495
+ --mistica-color-backgroundContainerHover: rgba(var(--mistica-cyber-raw-brand70), 0.05);
496
+ --mistica-color-backgroundContainerPressed: rgba(var(--mistica-cyber-raw-brand70), 0.08);
497
+ --mistica-color-backgroundContainerBrand: var(--mistica-cyber-darkModeGrey);
498
+ --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-cyber-raw-white), 0.03);
499
+ --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-cyber-raw-white), 0.05);
500
+ --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-cyber-darkModeGrey);
501
+ --mistica-color-backgroundContainerNegative: var(--mistica-cyber-darkModeGrey);
502
+ --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-cyber-darkModeGrey);
503
+ --mistica-color-backgroundContainerAlternative: var(--mistica-cyber-darkModeGrey);
504
+ --mistica-color-backgroundOverlay: rgba(var(--mistica-cyber-raw-darkModeGrey), 0.8);
505
+ --mistica-color-backgroundSkeleton: var(--mistica-cyber-grey700);
506
+ --mistica-color-backgroundSkeletonInverse: var(--mistica-cyber-grey700);
507
+ --mistica-color-backgroundSkeletonNegative: var(--mistica-cyber-grey700);
508
+ --mistica-color-backgroundSkeletonBrand: var(--mistica-cyber-grey700);
509
+ --mistica-color-backgroundBrandTop: var(--mistica-cyber-darkModeBlack);
510
+ --mistica-color-backgroundBrandBottom: var(--mistica-cyber-darkModeBlack);
511
+ --mistica-color-appBarBackground: var(--mistica-cyber-darkModeGrey);
512
+ --mistica-color-navigationBarBackground: var(--mistica-cyber-darkModeBlack);
513
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-cyber-raw-brand70), 0.05);
514
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-cyber-raw-brand70), 0.07);
515
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-cyber-raw-white), 0.03);
516
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-cyber-raw-white), 0.05);
517
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-cyber-raw-white), 0.03);
518
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-cyber-raw-white), 0.05);
519
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-cyber-raw-white), 0.03);
520
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-cyber-raw-white), 0.05);
521
+ --mistica-color-skeletonWave: var(--mistica-cyber-grey700);
522
+ --mistica-color-borderLow: var(--mistica-cyber-darkModeBlack);
523
+ --mistica-color-border: var(--mistica-cyber-grey800);
524
+ --mistica-color-borderHigh: var(--mistica-cyber-grey400);
525
+ --mistica-color-borderSelected: var(--mistica-cyber-darkModeBrand);
526
+ --mistica-color-coverBackgroundHover: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.25);
527
+ --mistica-color-coverBackgroundPressed: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.35);
528
+ --mistica-color-buttonDangerBackground: var(--mistica-cyber-red50);
529
+ --mistica-color-buttonDangerBackgroundPressed: var(--mistica-cyber-red60);
530
+ --mistica-color-buttonDangerBackgroundHover: var(--mistica-cyber-red60);
531
+ --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-cyber-raw-red50), 0.16);
532
+ --mistica-color-buttonLinkDangerBackgroundNegative: rgba(var(--mistica-cyber-raw-red50), 0.16);
533
+ --mistica-color-buttonLinkDangerBackgroundBrand: rgba(var(--mistica-cyber-raw-red50), 0.16);
534
+ --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-cyber-white);
535
+ --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-cyber-raw-red50), 0.16);
536
+ --mistica-color-buttonLinkDangerBackgroundInversePressed: rgba(var(--mistica-cyber-raw-red50), 0.16);
537
+ --mistica-color-buttonLinkDangerBackgroundNegativePressed: rgba(var(--mistica-cyber-raw-red50), 0.16);
538
+ --mistica-color-buttonLinkDangerBackgroundBrandPressed: rgba(var(--mistica-cyber-raw-red50), 0.16);
539
+ --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-cyber-red10);
540
+ --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-cyber-raw-brand30), 0.16);
541
+ --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-cyber-raw-brand30), 0.16);
542
+ --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-cyber-raw-brand30), 0.16);
543
+ --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-cyber-raw-brand30), 0.16);
544
+ --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-cyber-raw-white), 0.08);
545
+ --mistica-color-buttonLinkNeutralBackgroundPressed: rgba(var(--mistica-cyber-raw-white), 0.08);
546
+ --mistica-color-buttonLinkNeutralBackgroundBrand: rgba(var(--mistica-cyber-raw-white), 0);
547
+ --mistica-color-buttonLinkNeutralBackgroundBrandPressed: rgba(var(--mistica-cyber-raw-white), 0.08);
548
+ --mistica-color-buttonLinkNeutralBackgroundNegative: rgba(var(--mistica-cyber-raw-white), 0);
549
+ --mistica-color-buttonLinkNeutralBackgroundNegativePressed: rgba(var(--mistica-cyber-raw-white), 0.08);
550
+ --mistica-color-buttonLinkNeutralBackgroundMedia: rgba(var(--mistica-cyber-raw-white), 0);
551
+ --mistica-color-buttonLinkNeutralBackgroundMediaPressed: rgba(var(--mistica-cyber-raw-white), 0.08);
552
+ --mistica-color-buttonPrimaryBackground: var(--mistica-cyber-brand);
553
+ --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-cyber-white);
554
+ --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-cyber-white);
555
+ --mistica-color-buttonPrimaryBackgroundBrand: var(--mistica-cyber-white);
556
+ --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-cyber-white);
557
+ --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-cyber-brand70);
558
+ --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-cyber-brand15);
559
+ --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-cyber-brand15);
560
+ --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-cyber-brand15);
561
+ --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-cyber-brand15);
562
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-cyber-brand70);
563
+ --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-cyber-brand15);
564
+ --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-cyber-brand15);
565
+ --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-cyber-brand15);
566
+ --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-cyber-brand15);
567
+ --mistica-color-buttonSecondaryBackgroundBrand: rgba(var(--mistica-cyber-raw-white), 0);
568
+ --mistica-color-buttonSecondaryBorder: var(--mistica-cyber-darkModeBrand);
569
+ --mistica-color-buttonSecondaryBorderInverse: var(--mistica-cyber-white);
570
+ --mistica-color-buttonSecondaryBorderNegative: var(--mistica-cyber-white);
571
+ --mistica-color-buttonSecondaryBorderBrand: var(--mistica-cyber-white);
572
+ --mistica-color-buttonSecondaryBorderMedia: var(--mistica-cyber-white);
573
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-cyber-white);
574
+ --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-cyber-white);
575
+ --mistica-color-buttonSecondaryBorderNegativePressed: var(--mistica-cyber-white);
576
+ --mistica-color-buttonSecondaryBorderBrandPressed: var(--mistica-cyber-white);
577
+ --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-cyber-white);
578
+ --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-cyber-raw-white), 0.15);
579
+ --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-cyber-raw-white), 0.15);
580
+ --mistica-color-buttonSecondaryBackgroundNegativeHover: rgba(var(--mistica-cyber-raw-white), 0.15);
581
+ --mistica-color-buttonSecondaryBackgroundBrandHover: rgba(var(--mistica-cyber-raw-white), 0.15);
582
+ --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-cyber-raw-white), 0.1);
583
+ --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-cyber-raw-white), 0.15);
584
+ --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-cyber-raw-white), 0.15);
585
+ --mistica-color-buttonSecondaryBackgroundNegativePressed: rgba(var(--mistica-cyber-raw-white), 0.15);
586
+ --mistica-color-buttonSecondaryBackgroundBrandPressed: rgba(var(--mistica-cyber-raw-white), 0.15);
587
+ --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-cyber-raw-white), 0.1);
588
+ --mistica-color-textButtonPrimary: var(--mistica-cyber-white);
589
+ --mistica-color-textButtonPrimaryInverse: var(--mistica-cyber-brand);
590
+ --mistica-color-textButtonPrimaryNegative: var(--mistica-cyber-brand);
591
+ --mistica-color-textButtonPrimaryBrand: var(--mistica-cyber-brand);
592
+ --mistica-color-textButtonPrimaryMedia: var(--mistica-cyber-brand);
593
+ --mistica-color-textButtonPrimaryInversePressed: var(--mistica-cyber-brand70);
594
+ --mistica-color-textButtonPrimaryNegativePressed: var(--mistica-cyber-brand70);
595
+ --mistica-color-textButtonPrimaryBrandPressed: var(--mistica-cyber-brand70);
596
+ --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-cyber-brand70);
597
+ --mistica-color-textButtonSecondary: var(--mistica-cyber-white);
598
+ --mistica-color-textButtonSecondaryInverse: var(--mistica-cyber-white);
599
+ --mistica-color-textButtonSecondaryNegative: var(--mistica-cyber-white);
600
+ --mistica-color-textButtonSecondaryBrand: var(--mistica-cyber-white);
601
+ --mistica-color-textButtonSecondaryMedia: var(--mistica-cyber-white);
602
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-cyber-white);
603
+ --mistica-color-textButtonSecondaryInversePressed: var(--mistica-cyber-white);
604
+ --mistica-color-textButtonSecondaryNegativePressed: var(--mistica-cyber-white);
605
+ --mistica-color-textButtonSecondaryBrandPressed: var(--mistica-cyber-white);
606
+ --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-cyber-white);
607
+ --mistica-color-textLink: var(--mistica-cyber-darkModeBrand);
608
+ --mistica-color-textLinkInverse: var(--mistica-cyber-darkModeBrand);
609
+ --mistica-color-textLinkNegative: var(--mistica-cyber-darkModeBrand);
610
+ --mistica-color-textLinkBrand: var(--mistica-cyber-darkModeBrand);
611
+ --mistica-color-textLinkMedia: var(--mistica-cyber-white);
612
+ --mistica-color-textLinkDanger: var(--mistica-cyber-red30);
613
+ --mistica-color-textLinkDangerMedia: var(--mistica-cyber-red50);
614
+ --mistica-color-textLinkSnackbar: var(--mistica-cyber-darkModeBrand);
615
+ --mistica-color-textLinkNeutral: var(--mistica-cyber-brand10);
616
+ --mistica-color-textLinkNeutralBrand: var(--mistica-cyber-brand10);
617
+ --mistica-color-textLinkNeutralNegative: var(--mistica-cyber-brand10);
618
+ --mistica-color-textLinkNeutralAlternative: var(--mistica-cyber-brand10);
619
+ --mistica-color-textLinkNeutralMedia: var(--mistica-cyber-white);
620
+ --mistica-color-textActivated: var(--mistica-cyber-darkModeBrand);
621
+ --mistica-color-textBrand: var(--mistica-cyber-brand30);
622
+ --mistica-color-inputBorder: var(--mistica-cyber-grey400);
623
+ --mistica-color-inputBorderInverse: var(--mistica-cyber-grey400);
624
+ --mistica-color-inputBorderNegative: var(--mistica-cyber-grey400);
625
+ --mistica-color-inputBorderBrand: var(--mistica-cyber-grey400);
626
+ --mistica-color-completedStep: var(--mistica-cyber-brand);
627
+ --mistica-color-completedStepInverse: var(--mistica-cyber-brand);
628
+ --mistica-color-completedStepNegative: var(--mistica-cyber-brand);
629
+ --mistica-color-completedStepBrand: var(--mistica-cyber-brand);
630
+ --mistica-color-control: var(--mistica-cyber-grey400);
631
+ --mistica-color-controlActivated: var(--mistica-cyber-darkModeBrand);
632
+ --mistica-color-controlInverse: var(--mistica-cyber-grey400);
633
+ --mistica-color-controlNegative: var(--mistica-cyber-grey400);
634
+ --mistica-color-controlBrand: var(--mistica-cyber-grey400);
635
+ --mistica-color-controlActivatedInverse: var(--mistica-cyber-darkModeBrand);
636
+ --mistica-color-controlActivatedNegative: var(--mistica-cyber-darkModeBrand);
637
+ --mistica-color-controlActivatedBrand: var(--mistica-cyber-darkModeBrand);
638
+ --mistica-color-controlError: var(--mistica-cyber-red30);
639
+ --mistica-color-chevronIndicator: var(--mistica-cyber-grey400);
640
+ --mistica-color-barTrack: var(--mistica-cyber-grey800);
641
+ --mistica-color-barTrackInverse: var(--mistica-cyber-grey800);
642
+ --mistica-color-barTrackNegative: var(--mistica-cyber-grey800);
643
+ --mistica-color-barTrackBrand: var(--mistica-cyber-grey800);
644
+ --mistica-color-loadingBar: var(--mistica-cyber-darkModeBrand);
645
+ --mistica-color-loadingBarBackground: var(--mistica-cyber-grey500);
646
+ --mistica-color-toggleAndroidInactive: var(--mistica-cyber-grey100);
647
+ --mistica-color-toggleAndroidBackgroundActive: var(--mistica-cyber-brand20);
648
+ --mistica-color-toggleAndroidActiveBrand: var(--mistica-cyber-darkModeBrand);
649
+ --mistica-color-toggleAndroidInactiveBrand: var(--mistica-cyber-grey100);
650
+ --mistica-color-toggleAndroidBackgroundActiveBrand: var(--mistica-cyber-brand20);
651
+ --mistica-color-toggleAndroidBackgroundInactiveBrand: var(--mistica-cyber-grey400);
652
+ --mistica-color-iosControlKnob: var(--mistica-cyber-brand10);
653
+ --mistica-color-controlKnobInverse: var(--mistica-cyber-brand10);
654
+ --mistica-color-controlKnobNegative: var(--mistica-cyber-brand10);
655
+ --mistica-color-controlKnobBrand: var(--mistica-cyber-brand10);
656
+ --mistica-color-divider: rgba(var(--mistica-cyber-raw-white), 0.2);
657
+ --mistica-color-dividerInverse: rgba(var(--mistica-cyber-raw-white), 0.05);
658
+ --mistica-color-dividerNegative: rgba(var(--mistica-cyber-raw-white), 0.05);
659
+ --mistica-color-dividerBrand: rgba(var(--mistica-cyber-raw-white), 0.05);
660
+ --mistica-color-navigationBarDivider: var(--mistica-cyber-darkModeBlack);
661
+ --mistica-color-badge: var(--mistica-cyber-red50);
662
+ --mistica-color-feedbackErrorBackground: var(--mistica-cyber-red60);
663
+ --mistica-color-feedbackInfoBackground: var(--mistica-cyber-darkModeGrey);
664
+ --mistica-color-brand: var(--mistica-cyber-darkModeBrand);
665
+ --mistica-color-brandHigh: rgba(var(--mistica-cyber-raw-white), 0.05);
666
+ --mistica-color-inverse: var(--mistica-cyber-brand10);
667
+ --mistica-color-negative: var(--mistica-cyber-brand10);
668
+ --mistica-color-neutralHigh: var(--mistica-cyber-grey100);
669
+ --mistica-color-neutralHighBrand: var(--mistica-cyber-grey100);
670
+ --mistica-color-neutralHighNegative: var(--mistica-cyber-grey100);
671
+ --mistica-color-neutralMedium: var(--mistica-cyber-grey400);
672
+ --mistica-color-neutralMediumInverse: var(--mistica-cyber-grey400);
673
+ --mistica-color-neutralMediumNegative: var(--mistica-cyber-grey400);
674
+ --mistica-color-neutralMediumBrand: var(--mistica-cyber-grey400);
675
+ --mistica-color-neutralLow: var(--mistica-cyber-grey700);
676
+ --mistica-color-neutralLowAlternative: var(--mistica-cyber-grey700);
677
+ --mistica-color-textPrimary: var(--mistica-cyber-brand10);
678
+ --mistica-color-textPrimaryInverse: var(--mistica-cyber-brand10);
679
+ --mistica-color-textPrimaryNegative: var(--mistica-cyber-brand10);
680
+ --mistica-color-textPrimaryBrand: var(--mistica-cyber-brand10);
681
+ --mistica-color-textPrimaryMedia: var(--mistica-cyber-white);
682
+ --mistica-color-textSecondary: var(--mistica-cyber-grey200);
683
+ --mistica-color-textSecondaryInverse: var(--mistica-cyber-grey200);
684
+ --mistica-color-textSecondaryNegative: var(--mistica-cyber-grey200);
685
+ --mistica-color-textSecondaryBrand: var(--mistica-cyber-grey200);
686
+ --mistica-color-textSecondaryMedia: var(--mistica-cyber-white);
687
+ --mistica-color-error: var(--mistica-cyber-red30);
688
+ --mistica-color-textError: var(--mistica-cyber-red20);
689
+ --mistica-color-textErrorInverse: var(--mistica-cyber-red30);
690
+ --mistica-color-textErrorNegative: var(--mistica-cyber-red30);
691
+ --mistica-color-textErrorBrand: var(--mistica-cyber-red30);
692
+ --mistica-color-success: var(--mistica-cyber-teal);
693
+ --mistica-color-warning: var(--mistica-cyber-yellow60);
694
+ --mistica-color-promo: var(--mistica-cyber-purple);
695
+ --mistica-color-highlight: var(--mistica-cyber-red20);
696
+ --mistica-color-successLow: var(--mistica-cyber-brandDark);
697
+ --mistica-color-warningLow: var(--mistica-cyber-brandDark);
698
+ --mistica-color-errorLow: var(--mistica-cyber-brandDark);
699
+ --mistica-color-promoLow: var(--mistica-cyber-brandDark);
700
+ --mistica-color-brandLow: var(--mistica-cyber-brandDark);
701
+ --mistica-color-successHigh: var(--mistica-cyber-teal40);
702
+ --mistica-color-warningHigh: var(--mistica-cyber-yellow40);
703
+ --mistica-color-errorHigh: var(--mistica-cyber-red20);
704
+ --mistica-color-promoHigh: var(--mistica-cyber-purple40);
705
+ --mistica-color-successHighInverse: var(--mistica-cyber-teal70);
706
+ --mistica-color-successHighNegative: var(--mistica-cyber-teal70);
707
+ --mistica-color-successHighBrand: var(--mistica-cyber-teal70);
708
+ --mistica-color-warningHighInverse: var(--mistica-cyber-yellow60);
709
+ --mistica-color-warningHighNegative: var(--mistica-cyber-yellow60);
710
+ --mistica-color-warningHighBrand: var(--mistica-cyber-yellow60);
711
+ --mistica-color-errorHighInverse: var(--mistica-cyber-red60);
712
+ --mistica-color-errorHighNegative: var(--mistica-cyber-red60);
713
+ --mistica-color-errorHighBrand: var(--mistica-cyber-red60);
714
+ --mistica-color-promoHighInverse: var(--mistica-cyber-purple70);
715
+ --mistica-color-promoHighNegative: var(--mistica-cyber-purple70);
716
+ --mistica-color-promoHighBrand: var(--mistica-cyber-purple70);
717
+ --mistica-color-textNavigationBarPrimary: var(--mistica-cyber-white);
718
+ --mistica-color-textNavigationBarSecondary: var(--mistica-cyber-grey300);
719
+ --mistica-color-textNavigationSearchBarHint: var(--mistica-cyber-grey300);
720
+ --mistica-color-textNavigationSearchBarText: var(--mistica-cyber-white);
721
+ --mistica-color-textAppBar: var(--mistica-cyber-grey100);
722
+ --mistica-color-textAppBarSelected: var(--mistica-cyber-white);
723
+ --mistica-color-iosGlassAppBar: var(--mistica-cyber-white);
724
+ --mistica-color-iosGlassAppBarSelected: var(--mistica-cyber-white);
725
+ --mistica-color-customTabsBackground: var(--mistica-cyber-darkModeBlack);
726
+ --mistica-color-tagTextPromo: var(--mistica-cyber-purple40);
727
+ --mistica-color-tagTextActive: var(--mistica-cyber-brand20);
728
+ --mistica-color-tagTextInactive: var(--mistica-cyber-grey200);
729
+ --mistica-color-tagTextInfo: var(--mistica-cyber-brand20);
730
+ --mistica-color-tagTextSuccess: var(--mistica-cyber-teal40);
731
+ --mistica-color-tagTextWarning: var(--mistica-cyber-yellow40);
732
+ --mistica-color-tagTextError: var(--mistica-cyber-red20);
733
+ --mistica-color-tagBackgroundPromo: var(--mistica-cyber-purple80);
734
+ --mistica-color-tagBackgroundActive: var(--mistica-cyber-brand80);
735
+ --mistica-color-tagBackgroundInactive: var(--mistica-cyber-grey700);
736
+ --mistica-color-tagBackgroundInfo: var(--mistica-cyber-brand80);
737
+ --mistica-color-tagBackgroundSuccess: var(--mistica-cyber-teal80);
738
+ --mistica-color-tagBackgroundWarning: var(--mistica-cyber-yellow80);
739
+ --mistica-color-tagBackgroundError: var(--mistica-cyber-red90);
740
+ --mistica-color-tagTextPromoInverse: var(--mistica-cyber-purple40);
741
+ --mistica-color-tagTextPromoNegative: var(--mistica-cyber-purple40);
742
+ --mistica-color-tagTextPromoBrand: var(--mistica-cyber-purple40);
743
+ --mistica-color-tagTextActiveInverse: var(--mistica-cyber-brand20);
744
+ --mistica-color-tagTextActiveNegative: var(--mistica-cyber-brand20);
745
+ --mistica-color-tagTextActiveBrand: var(--mistica-cyber-brand20);
746
+ --mistica-color-tagTextInactiveInverse: var(--mistica-cyber-grey200);
747
+ --mistica-color-tagTextInactiveNegative: var(--mistica-cyber-grey200);
748
+ --mistica-color-tagTextInactiveBrand: var(--mistica-cyber-grey200);
749
+ --mistica-color-tagTextInfoInverse: var(--mistica-cyber-brand20);
750
+ --mistica-color-tagTextInfoNegative: var(--mistica-cyber-brand20);
751
+ --mistica-color-tagTextInfoBrand: var(--mistica-cyber-brand20);
752
+ --mistica-color-tagTextSuccessInverse: var(--mistica-cyber-teal40);
753
+ --mistica-color-tagTextSuccessNegative: var(--mistica-cyber-teal40);
754
+ --mistica-color-tagTextSuccessBrand: var(--mistica-cyber-teal40);
755
+ --mistica-color-tagTextWarningInverse: var(--mistica-cyber-yellow40);
756
+ --mistica-color-tagTextWarningNegative: var(--mistica-cyber-yellow40);
757
+ --mistica-color-tagTextWarningBrand: var(--mistica-cyber-yellow40);
758
+ --mistica-color-tagTextErrorInverse: var(--mistica-cyber-red20);
759
+ --mistica-color-tagTextErrorNegative: var(--mistica-cyber-red20);
760
+ --mistica-color-tagTextErrorBrand: var(--mistica-cyber-red20);
761
+ --mistica-color-tagBackgroundPromoInverse: var(--mistica-cyber-purple80);
762
+ --mistica-color-tagBackgroundPromoNegative: var(--mistica-cyber-purple80);
763
+ --mistica-color-tagBackgroundPromoBrand: var(--mistica-cyber-purple80);
764
+ --mistica-color-tagBackgroundActiveInverse: var(--mistica-cyber-brand80);
765
+ --mistica-color-tagBackgroundActiveNegative: var(--mistica-cyber-brand80);
766
+ --mistica-color-tagBackgroundActiveBrand: var(--mistica-cyber-brand80);
767
+ --mistica-color-tagBackgroundInactiveInverse: var(--mistica-cyber-grey700);
768
+ --mistica-color-tagBackgroundInactiveNegative: var(--mistica-cyber-grey700);
769
+ --mistica-color-tagBackgroundInactiveBrand: var(--mistica-cyber-grey700);
770
+ --mistica-color-tagBackgroundInfoInverse: var(--mistica-cyber-brand80);
771
+ --mistica-color-tagBackgroundInfoNegative: var(--mistica-cyber-brand80);
772
+ --mistica-color-tagBackgroundInfoBrand: var(--mistica-cyber-brand80);
773
+ --mistica-color-tagBackgroundSuccessInverse: var(--mistica-cyber-teal80);
774
+ --mistica-color-tagBackgroundSuccessNegative: var(--mistica-cyber-teal80);
775
+ --mistica-color-tagBackgroundSuccessBrand: var(--mistica-cyber-teal80);
776
+ --mistica-color-tagBackgroundWarningInverse: var(--mistica-cyber-yellow80);
777
+ --mistica-color-tagBackgroundWarningNegative: var(--mistica-cyber-yellow80);
778
+ --mistica-color-tagBackgroundWarningBrand: var(--mistica-cyber-yellow80);
779
+ --mistica-color-tagBackgroundErrorInverse: var(--mistica-cyber-red90);
780
+ --mistica-color-tagBackgroundErrorNegative: var(--mistica-cyber-red90);
781
+ --mistica-color-tagBackgroundErrorBrand: var(--mistica-cyber-red90);
782
+ --mistica-color-cardContentOverlay: linear-gradient(
783
+ 180deg,
784
+ rgba(var(--mistica-cyber-raw-black), 0) 0%,
785
+ rgba(var(--mistica-cyber-raw-black), 0.4) 30%,
786
+ rgba(var(--mistica-cyber-raw-black), 0.7) 100%
787
+ );
788
+ --mistica-color-cardFooterOverlay: rgba(var(--mistica-cyber-raw-black), 0.7);
789
+ }
790
+
791
+ @media (prefers-color-scheme: dark) {
792
+ [data-mistica-skin='cyber'] {
793
+ --mistica-color-background: var(--mistica-cyber-darkModeBlack);
794
+ --mistica-color-backgroundAlternative: var(--mistica-cyber-darkModeBlack);
795
+ --mistica-color-backgroundSelected: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.18);
796
+ --mistica-color-backgroundSelectedHover: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.25);
797
+ --mistica-color-backgroundSelectedPressed: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.33);
798
+ --mistica-color-backgroundSelectedBrand: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.18);
799
+ --mistica-color-backgroundSelectedBrandHover: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.25);
800
+ --mistica-color-backgroundSelectedBrandPressed: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.33);
801
+ --mistica-color-backgroundSelectedNegative: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.18);
802
+ --mistica-color-backgroundSelectedNegativeHover: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.25);
803
+ --mistica-color-backgroundSelectedNegativePressed: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.33);
804
+ --mistica-color-backgroundBrand: var(--mistica-cyber-darkModeBlack);
805
+ --mistica-color-backgroundNegative: var(--mistica-cyber-darkModeBlack);
806
+ --mistica-color-backgroundBrandSecondary: var(--mistica-cyber-darkModeBlack);
807
+ --mistica-color-backgroundContainer: var(--mistica-cyber-darkModeGrey);
808
+ --mistica-color-backgroundContainerError: var(--mistica-cyber-darkModeGrey);
809
+ --mistica-color-backgroundContainerHover: rgba(var(--mistica-cyber-raw-brand70), 0.05);
810
+ --mistica-color-backgroundContainerPressed: rgba(var(--mistica-cyber-raw-brand70), 0.08);
811
+ --mistica-color-backgroundContainerBrand: var(--mistica-cyber-darkModeGrey);
812
+ --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-cyber-raw-white), 0.03);
813
+ --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-cyber-raw-white), 0.05);
814
+ --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-cyber-darkModeGrey);
815
+ --mistica-color-backgroundContainerNegative: var(--mistica-cyber-darkModeGrey);
816
+ --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-cyber-darkModeGrey);
817
+ --mistica-color-backgroundContainerAlternative: var(--mistica-cyber-darkModeGrey);
818
+ --mistica-color-backgroundOverlay: rgba(var(--mistica-cyber-raw-darkModeGrey), 0.8);
819
+ --mistica-color-backgroundSkeleton: var(--mistica-cyber-grey700);
820
+ --mistica-color-backgroundSkeletonInverse: var(--mistica-cyber-grey700);
821
+ --mistica-color-backgroundSkeletonNegative: var(--mistica-cyber-grey700);
822
+ --mistica-color-backgroundSkeletonBrand: var(--mistica-cyber-grey700);
823
+ --mistica-color-backgroundBrandTop: var(--mistica-cyber-darkModeBlack);
824
+ --mistica-color-backgroundBrandBottom: var(--mistica-cyber-darkModeBlack);
825
+ --mistica-color-appBarBackground: var(--mistica-cyber-darkModeGrey);
826
+ --mistica-color-navigationBarBackground: var(--mistica-cyber-darkModeBlack);
827
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-cyber-raw-brand70), 0.05);
828
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-cyber-raw-brand70), 0.07);
829
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-cyber-raw-white), 0.03);
830
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-cyber-raw-white), 0.05);
831
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-cyber-raw-white), 0.03);
832
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-cyber-raw-white), 0.05);
833
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-cyber-raw-white), 0.03);
834
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-cyber-raw-white), 0.05);
835
+ --mistica-color-skeletonWave: var(--mistica-cyber-grey700);
836
+ --mistica-color-borderLow: var(--mistica-cyber-darkModeBlack);
837
+ --mistica-color-border: var(--mistica-cyber-grey800);
838
+ --mistica-color-borderHigh: var(--mistica-cyber-grey400);
839
+ --mistica-color-borderSelected: var(--mistica-cyber-darkModeBrand);
840
+ --mistica-color-coverBackgroundHover: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.25);
841
+ --mistica-color-coverBackgroundPressed: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.35);
842
+ --mistica-color-buttonDangerBackground: var(--mistica-cyber-red50);
843
+ --mistica-color-buttonDangerBackgroundPressed: var(--mistica-cyber-red60);
844
+ --mistica-color-buttonDangerBackgroundHover: var(--mistica-cyber-red60);
845
+ --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-cyber-raw-red50), 0.16);
846
+ --mistica-color-buttonLinkDangerBackgroundNegative: rgba(var(--mistica-cyber-raw-red50), 0.16);
847
+ --mistica-color-buttonLinkDangerBackgroundBrand: rgba(var(--mistica-cyber-raw-red50), 0.16);
848
+ --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-cyber-white);
849
+ --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-cyber-raw-red50), 0.16);
850
+ --mistica-color-buttonLinkDangerBackgroundInversePressed: rgba(var(--mistica-cyber-raw-red50), 0.16);
851
+ --mistica-color-buttonLinkDangerBackgroundNegativePressed: rgba(var(--mistica-cyber-raw-red50), 0.16);
852
+ --mistica-color-buttonLinkDangerBackgroundBrandPressed: rgba(var(--mistica-cyber-raw-red50), 0.16);
853
+ --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-cyber-red10);
854
+ --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-cyber-raw-brand30), 0.16);
855
+ --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-cyber-raw-brand30), 0.16);
856
+ --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-cyber-raw-brand30), 0.16);
857
+ --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-cyber-raw-brand30), 0.16);
858
+ --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-cyber-raw-white), 0.08);
859
+ --mistica-color-buttonLinkNeutralBackgroundPressed: rgba(var(--mistica-cyber-raw-white), 0.08);
860
+ --mistica-color-buttonLinkNeutralBackgroundBrand: rgba(var(--mistica-cyber-raw-white), 0);
861
+ --mistica-color-buttonLinkNeutralBackgroundBrandPressed: rgba(var(--mistica-cyber-raw-white), 0.08);
862
+ --mistica-color-buttonLinkNeutralBackgroundNegative: rgba(var(--mistica-cyber-raw-white), 0);
863
+ --mistica-color-buttonLinkNeutralBackgroundNegativePressed: rgba(
864
+ var(--mistica-cyber-raw-white),
865
+ 0.08
866
+ );
867
+ --mistica-color-buttonLinkNeutralBackgroundMedia: rgba(var(--mistica-cyber-raw-white), 0);
868
+ --mistica-color-buttonLinkNeutralBackgroundMediaPressed: rgba(var(--mistica-cyber-raw-white), 0.08);
869
+ --mistica-color-buttonPrimaryBackground: var(--mistica-cyber-brand);
870
+ --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-cyber-white);
871
+ --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-cyber-white);
872
+ --mistica-color-buttonPrimaryBackgroundBrand: var(--mistica-cyber-white);
873
+ --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-cyber-white);
874
+ --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-cyber-brand70);
875
+ --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-cyber-brand15);
876
+ --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-cyber-brand15);
877
+ --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-cyber-brand15);
878
+ --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-cyber-brand15);
879
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-cyber-brand70);
880
+ --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-cyber-brand15);
881
+ --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-cyber-brand15);
882
+ --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-cyber-brand15);
883
+ --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-cyber-brand15);
884
+ --mistica-color-buttonSecondaryBackgroundBrand: rgba(var(--mistica-cyber-raw-white), 0);
885
+ --mistica-color-buttonSecondaryBorder: var(--mistica-cyber-darkModeBrand);
886
+ --mistica-color-buttonSecondaryBorderInverse: var(--mistica-cyber-white);
887
+ --mistica-color-buttonSecondaryBorderNegative: var(--mistica-cyber-white);
888
+ --mistica-color-buttonSecondaryBorderBrand: var(--mistica-cyber-white);
889
+ --mistica-color-buttonSecondaryBorderMedia: var(--mistica-cyber-white);
890
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-cyber-white);
891
+ --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-cyber-white);
892
+ --mistica-color-buttonSecondaryBorderNegativePressed: var(--mistica-cyber-white);
893
+ --mistica-color-buttonSecondaryBorderBrandPressed: var(--mistica-cyber-white);
894
+ --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-cyber-white);
895
+ --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-cyber-raw-white), 0.15);
896
+ --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-cyber-raw-white), 0.15);
897
+ --mistica-color-buttonSecondaryBackgroundNegativeHover: rgba(var(--mistica-cyber-raw-white), 0.15);
898
+ --mistica-color-buttonSecondaryBackgroundBrandHover: rgba(var(--mistica-cyber-raw-white), 0.15);
899
+ --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-cyber-raw-white), 0.1);
900
+ --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-cyber-raw-white), 0.15);
901
+ --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-cyber-raw-white), 0.15);
902
+ --mistica-color-buttonSecondaryBackgroundNegativePressed: rgba(var(--mistica-cyber-raw-white), 0.15);
903
+ --mistica-color-buttonSecondaryBackgroundBrandPressed: rgba(var(--mistica-cyber-raw-white), 0.15);
904
+ --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-cyber-raw-white), 0.1);
905
+ --mistica-color-textButtonPrimary: var(--mistica-cyber-white);
906
+ --mistica-color-textButtonPrimaryInverse: var(--mistica-cyber-brand);
907
+ --mistica-color-textButtonPrimaryNegative: var(--mistica-cyber-brand);
908
+ --mistica-color-textButtonPrimaryBrand: var(--mistica-cyber-brand);
909
+ --mistica-color-textButtonPrimaryMedia: var(--mistica-cyber-brand);
910
+ --mistica-color-textButtonPrimaryInversePressed: var(--mistica-cyber-brand70);
911
+ --mistica-color-textButtonPrimaryNegativePressed: var(--mistica-cyber-brand70);
912
+ --mistica-color-textButtonPrimaryBrandPressed: var(--mistica-cyber-brand70);
913
+ --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-cyber-brand70);
914
+ --mistica-color-textButtonSecondary: var(--mistica-cyber-white);
915
+ --mistica-color-textButtonSecondaryInverse: var(--mistica-cyber-white);
916
+ --mistica-color-textButtonSecondaryNegative: var(--mistica-cyber-white);
917
+ --mistica-color-textButtonSecondaryBrand: var(--mistica-cyber-white);
918
+ --mistica-color-textButtonSecondaryMedia: var(--mistica-cyber-white);
919
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-cyber-white);
920
+ --mistica-color-textButtonSecondaryInversePressed: var(--mistica-cyber-white);
921
+ --mistica-color-textButtonSecondaryNegativePressed: var(--mistica-cyber-white);
922
+ --mistica-color-textButtonSecondaryBrandPressed: var(--mistica-cyber-white);
923
+ --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-cyber-white);
924
+ --mistica-color-textLink: var(--mistica-cyber-darkModeBrand);
925
+ --mistica-color-textLinkInverse: var(--mistica-cyber-darkModeBrand);
926
+ --mistica-color-textLinkNegative: var(--mistica-cyber-darkModeBrand);
927
+ --mistica-color-textLinkBrand: var(--mistica-cyber-darkModeBrand);
928
+ --mistica-color-textLinkMedia: var(--mistica-cyber-white);
929
+ --mistica-color-textLinkDanger: var(--mistica-cyber-red30);
930
+ --mistica-color-textLinkDangerMedia: var(--mistica-cyber-red50);
931
+ --mistica-color-textLinkSnackbar: var(--mistica-cyber-darkModeBrand);
932
+ --mistica-color-textLinkNeutral: var(--mistica-cyber-brand10);
933
+ --mistica-color-textLinkNeutralBrand: var(--mistica-cyber-brand10);
934
+ --mistica-color-textLinkNeutralNegative: var(--mistica-cyber-brand10);
935
+ --mistica-color-textLinkNeutralAlternative: var(--mistica-cyber-brand10);
936
+ --mistica-color-textLinkNeutralMedia: var(--mistica-cyber-white);
937
+ --mistica-color-textActivated: var(--mistica-cyber-darkModeBrand);
938
+ --mistica-color-textBrand: var(--mistica-cyber-brand30);
939
+ --mistica-color-inputBorder: var(--mistica-cyber-grey400);
940
+ --mistica-color-inputBorderInverse: var(--mistica-cyber-grey400);
941
+ --mistica-color-inputBorderNegative: var(--mistica-cyber-grey400);
942
+ --mistica-color-inputBorderBrand: var(--mistica-cyber-grey400);
943
+ --mistica-color-completedStep: var(--mistica-cyber-brand);
944
+ --mistica-color-completedStepInverse: var(--mistica-cyber-brand);
945
+ --mistica-color-completedStepNegative: var(--mistica-cyber-brand);
946
+ --mistica-color-completedStepBrand: var(--mistica-cyber-brand);
947
+ --mistica-color-control: var(--mistica-cyber-grey400);
948
+ --mistica-color-controlActivated: var(--mistica-cyber-darkModeBrand);
949
+ --mistica-color-controlInverse: var(--mistica-cyber-grey400);
950
+ --mistica-color-controlNegative: var(--mistica-cyber-grey400);
951
+ --mistica-color-controlBrand: var(--mistica-cyber-grey400);
952
+ --mistica-color-controlActivatedInverse: var(--mistica-cyber-darkModeBrand);
953
+ --mistica-color-controlActivatedNegative: var(--mistica-cyber-darkModeBrand);
954
+ --mistica-color-controlActivatedBrand: var(--mistica-cyber-darkModeBrand);
955
+ --mistica-color-controlError: var(--mistica-cyber-red30);
956
+ --mistica-color-chevronIndicator: var(--mistica-cyber-grey400);
957
+ --mistica-color-barTrack: var(--mistica-cyber-grey800);
958
+ --mistica-color-barTrackInverse: var(--mistica-cyber-grey800);
959
+ --mistica-color-barTrackNegative: var(--mistica-cyber-grey800);
960
+ --mistica-color-barTrackBrand: var(--mistica-cyber-grey800);
961
+ --mistica-color-loadingBar: var(--mistica-cyber-darkModeBrand);
962
+ --mistica-color-loadingBarBackground: var(--mistica-cyber-grey500);
963
+ --mistica-color-toggleAndroidInactive: var(--mistica-cyber-grey100);
964
+ --mistica-color-toggleAndroidBackgroundActive: var(--mistica-cyber-brand20);
965
+ --mistica-color-toggleAndroidActiveBrand: var(--mistica-cyber-darkModeBrand);
966
+ --mistica-color-toggleAndroidInactiveBrand: var(--mistica-cyber-grey100);
967
+ --mistica-color-toggleAndroidBackgroundActiveBrand: var(--mistica-cyber-brand20);
968
+ --mistica-color-toggleAndroidBackgroundInactiveBrand: var(--mistica-cyber-grey400);
969
+ --mistica-color-iosControlKnob: var(--mistica-cyber-brand10);
970
+ --mistica-color-controlKnobInverse: var(--mistica-cyber-brand10);
971
+ --mistica-color-controlKnobNegative: var(--mistica-cyber-brand10);
972
+ --mistica-color-controlKnobBrand: var(--mistica-cyber-brand10);
973
+ --mistica-color-divider: rgba(var(--mistica-cyber-raw-white), 0.2);
974
+ --mistica-color-dividerInverse: rgba(var(--mistica-cyber-raw-white), 0.05);
975
+ --mistica-color-dividerNegative: rgba(var(--mistica-cyber-raw-white), 0.05);
976
+ --mistica-color-dividerBrand: rgba(var(--mistica-cyber-raw-white), 0.05);
977
+ --mistica-color-navigationBarDivider: var(--mistica-cyber-darkModeBlack);
978
+ --mistica-color-badge: var(--mistica-cyber-red50);
979
+ --mistica-color-feedbackErrorBackground: var(--mistica-cyber-red60);
980
+ --mistica-color-feedbackInfoBackground: var(--mistica-cyber-darkModeGrey);
981
+ --mistica-color-brand: var(--mistica-cyber-darkModeBrand);
982
+ --mistica-color-brandHigh: rgba(var(--mistica-cyber-raw-white), 0.05);
983
+ --mistica-color-inverse: var(--mistica-cyber-brand10);
984
+ --mistica-color-negative: var(--mistica-cyber-brand10);
985
+ --mistica-color-neutralHigh: var(--mistica-cyber-grey100);
986
+ --mistica-color-neutralHighBrand: var(--mistica-cyber-grey100);
987
+ --mistica-color-neutralHighNegative: var(--mistica-cyber-grey100);
988
+ --mistica-color-neutralMedium: var(--mistica-cyber-grey400);
989
+ --mistica-color-neutralMediumInverse: var(--mistica-cyber-grey400);
990
+ --mistica-color-neutralMediumNegative: var(--mistica-cyber-grey400);
991
+ --mistica-color-neutralMediumBrand: var(--mistica-cyber-grey400);
992
+ --mistica-color-neutralLow: var(--mistica-cyber-grey700);
993
+ --mistica-color-neutralLowAlternative: var(--mistica-cyber-grey700);
994
+ --mistica-color-textPrimary: var(--mistica-cyber-brand10);
995
+ --mistica-color-textPrimaryInverse: var(--mistica-cyber-brand10);
996
+ --mistica-color-textPrimaryNegative: var(--mistica-cyber-brand10);
997
+ --mistica-color-textPrimaryBrand: var(--mistica-cyber-brand10);
998
+ --mistica-color-textPrimaryMedia: var(--mistica-cyber-white);
999
+ --mistica-color-textSecondary: var(--mistica-cyber-grey200);
1000
+ --mistica-color-textSecondaryInverse: var(--mistica-cyber-grey200);
1001
+ --mistica-color-textSecondaryNegative: var(--mistica-cyber-grey200);
1002
+ --mistica-color-textSecondaryBrand: var(--mistica-cyber-grey200);
1003
+ --mistica-color-textSecondaryMedia: var(--mistica-cyber-white);
1004
+ --mistica-color-error: var(--mistica-cyber-red30);
1005
+ --mistica-color-textError: var(--mistica-cyber-red20);
1006
+ --mistica-color-textErrorInverse: var(--mistica-cyber-red30);
1007
+ --mistica-color-textErrorNegative: var(--mistica-cyber-red30);
1008
+ --mistica-color-textErrorBrand: var(--mistica-cyber-red30);
1009
+ --mistica-color-success: var(--mistica-cyber-teal);
1010
+ --mistica-color-warning: var(--mistica-cyber-yellow60);
1011
+ --mistica-color-promo: var(--mistica-cyber-purple);
1012
+ --mistica-color-highlight: var(--mistica-cyber-red20);
1013
+ --mistica-color-successLow: var(--mistica-cyber-brandDark);
1014
+ --mistica-color-warningLow: var(--mistica-cyber-brandDark);
1015
+ --mistica-color-errorLow: var(--mistica-cyber-brandDark);
1016
+ --mistica-color-promoLow: var(--mistica-cyber-brandDark);
1017
+ --mistica-color-brandLow: var(--mistica-cyber-brandDark);
1018
+ --mistica-color-successHigh: var(--mistica-cyber-teal40);
1019
+ --mistica-color-warningHigh: var(--mistica-cyber-yellow40);
1020
+ --mistica-color-errorHigh: var(--mistica-cyber-red20);
1021
+ --mistica-color-promoHigh: var(--mistica-cyber-purple40);
1022
+ --mistica-color-successHighInverse: var(--mistica-cyber-teal70);
1023
+ --mistica-color-successHighNegative: var(--mistica-cyber-teal70);
1024
+ --mistica-color-successHighBrand: var(--mistica-cyber-teal70);
1025
+ --mistica-color-warningHighInverse: var(--mistica-cyber-yellow60);
1026
+ --mistica-color-warningHighNegative: var(--mistica-cyber-yellow60);
1027
+ --mistica-color-warningHighBrand: var(--mistica-cyber-yellow60);
1028
+ --mistica-color-errorHighInverse: var(--mistica-cyber-red60);
1029
+ --mistica-color-errorHighNegative: var(--mistica-cyber-red60);
1030
+ --mistica-color-errorHighBrand: var(--mistica-cyber-red60);
1031
+ --mistica-color-promoHighInverse: var(--mistica-cyber-purple70);
1032
+ --mistica-color-promoHighNegative: var(--mistica-cyber-purple70);
1033
+ --mistica-color-promoHighBrand: var(--mistica-cyber-purple70);
1034
+ --mistica-color-textNavigationBarPrimary: var(--mistica-cyber-white);
1035
+ --mistica-color-textNavigationBarSecondary: var(--mistica-cyber-grey300);
1036
+ --mistica-color-textNavigationSearchBarHint: var(--mistica-cyber-grey300);
1037
+ --mistica-color-textNavigationSearchBarText: var(--mistica-cyber-white);
1038
+ --mistica-color-textAppBar: var(--mistica-cyber-grey100);
1039
+ --mistica-color-textAppBarSelected: var(--mistica-cyber-white);
1040
+ --mistica-color-iosGlassAppBar: var(--mistica-cyber-white);
1041
+ --mistica-color-iosGlassAppBarSelected: var(--mistica-cyber-white);
1042
+ --mistica-color-customTabsBackground: var(--mistica-cyber-darkModeBlack);
1043
+ --mistica-color-tagTextPromo: var(--mistica-cyber-purple40);
1044
+ --mistica-color-tagTextActive: var(--mistica-cyber-brand20);
1045
+ --mistica-color-tagTextInactive: var(--mistica-cyber-grey200);
1046
+ --mistica-color-tagTextInfo: var(--mistica-cyber-brand20);
1047
+ --mistica-color-tagTextSuccess: var(--mistica-cyber-teal40);
1048
+ --mistica-color-tagTextWarning: var(--mistica-cyber-yellow40);
1049
+ --mistica-color-tagTextError: var(--mistica-cyber-red20);
1050
+ --mistica-color-tagBackgroundPromo: var(--mistica-cyber-purple80);
1051
+ --mistica-color-tagBackgroundActive: var(--mistica-cyber-brand80);
1052
+ --mistica-color-tagBackgroundInactive: var(--mistica-cyber-grey700);
1053
+ --mistica-color-tagBackgroundInfo: var(--mistica-cyber-brand80);
1054
+ --mistica-color-tagBackgroundSuccess: var(--mistica-cyber-teal80);
1055
+ --mistica-color-tagBackgroundWarning: var(--mistica-cyber-yellow80);
1056
+ --mistica-color-tagBackgroundError: var(--mistica-cyber-red90);
1057
+ --mistica-color-tagTextPromoInverse: var(--mistica-cyber-purple40);
1058
+ --mistica-color-tagTextPromoNegative: var(--mistica-cyber-purple40);
1059
+ --mistica-color-tagTextPromoBrand: var(--mistica-cyber-purple40);
1060
+ --mistica-color-tagTextActiveInverse: var(--mistica-cyber-brand20);
1061
+ --mistica-color-tagTextActiveNegative: var(--mistica-cyber-brand20);
1062
+ --mistica-color-tagTextActiveBrand: var(--mistica-cyber-brand20);
1063
+ --mistica-color-tagTextInactiveInverse: var(--mistica-cyber-grey200);
1064
+ --mistica-color-tagTextInactiveNegative: var(--mistica-cyber-grey200);
1065
+ --mistica-color-tagTextInactiveBrand: var(--mistica-cyber-grey200);
1066
+ --mistica-color-tagTextInfoInverse: var(--mistica-cyber-brand20);
1067
+ --mistica-color-tagTextInfoNegative: var(--mistica-cyber-brand20);
1068
+ --mistica-color-tagTextInfoBrand: var(--mistica-cyber-brand20);
1069
+ --mistica-color-tagTextSuccessInverse: var(--mistica-cyber-teal40);
1070
+ --mistica-color-tagTextSuccessNegative: var(--mistica-cyber-teal40);
1071
+ --mistica-color-tagTextSuccessBrand: var(--mistica-cyber-teal40);
1072
+ --mistica-color-tagTextWarningInverse: var(--mistica-cyber-yellow40);
1073
+ --mistica-color-tagTextWarningNegative: var(--mistica-cyber-yellow40);
1074
+ --mistica-color-tagTextWarningBrand: var(--mistica-cyber-yellow40);
1075
+ --mistica-color-tagTextErrorInverse: var(--mistica-cyber-red20);
1076
+ --mistica-color-tagTextErrorNegative: var(--mistica-cyber-red20);
1077
+ --mistica-color-tagTextErrorBrand: var(--mistica-cyber-red20);
1078
+ --mistica-color-tagBackgroundPromoInverse: var(--mistica-cyber-purple80);
1079
+ --mistica-color-tagBackgroundPromoNegative: var(--mistica-cyber-purple80);
1080
+ --mistica-color-tagBackgroundPromoBrand: var(--mistica-cyber-purple80);
1081
+ --mistica-color-tagBackgroundActiveInverse: var(--mistica-cyber-brand80);
1082
+ --mistica-color-tagBackgroundActiveNegative: var(--mistica-cyber-brand80);
1083
+ --mistica-color-tagBackgroundActiveBrand: var(--mistica-cyber-brand80);
1084
+ --mistica-color-tagBackgroundInactiveInverse: var(--mistica-cyber-grey700);
1085
+ --mistica-color-tagBackgroundInactiveNegative: var(--mistica-cyber-grey700);
1086
+ --mistica-color-tagBackgroundInactiveBrand: var(--mistica-cyber-grey700);
1087
+ --mistica-color-tagBackgroundInfoInverse: var(--mistica-cyber-brand80);
1088
+ --mistica-color-tagBackgroundInfoNegative: var(--mistica-cyber-brand80);
1089
+ --mistica-color-tagBackgroundInfoBrand: var(--mistica-cyber-brand80);
1090
+ --mistica-color-tagBackgroundSuccessInverse: var(--mistica-cyber-teal80);
1091
+ --mistica-color-tagBackgroundSuccessNegative: var(--mistica-cyber-teal80);
1092
+ --mistica-color-tagBackgroundSuccessBrand: var(--mistica-cyber-teal80);
1093
+ --mistica-color-tagBackgroundWarningInverse: var(--mistica-cyber-yellow80);
1094
+ --mistica-color-tagBackgroundWarningNegative: var(--mistica-cyber-yellow80);
1095
+ --mistica-color-tagBackgroundWarningBrand: var(--mistica-cyber-yellow80);
1096
+ --mistica-color-tagBackgroundErrorInverse: var(--mistica-cyber-red90);
1097
+ --mistica-color-tagBackgroundErrorNegative: var(--mistica-cyber-red90);
1098
+ --mistica-color-tagBackgroundErrorBrand: var(--mistica-cyber-red90);
1099
+ --mistica-color-cardContentOverlay: linear-gradient(
1100
+ 180deg,
1101
+ rgba(var(--mistica-cyber-raw-black), 0) 0%,
1102
+ rgba(var(--mistica-cyber-raw-black), 0.4) 30%,
1103
+ rgba(var(--mistica-cyber-raw-black), 0.7) 100%
1104
+ );
1105
+ --mistica-color-cardFooterOverlay: rgba(var(--mistica-cyber-raw-black), 0.7);
1106
+ }
1107
+
1108
+ [data-mistica-skin='cyber'][data-mistica-color-scheme='light'] {
1109
+ --mistica-color-background: var(--mistica-cyber-white);
1110
+ --mistica-color-backgroundAlternative: var(--mistica-cyber-brand10);
1111
+ --mistica-color-backgroundSelected: rgba(var(--mistica-cyber-raw-brand), 0.08);
1112
+ --mistica-color-backgroundSelectedHover: rgba(var(--mistica-cyber-raw-brand), 0.12);
1113
+ --mistica-color-backgroundSelectedPressed: rgba(var(--mistica-cyber-raw-brand), 0.16);
1114
+ --mistica-color-backgroundSelectedBrand: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.16);
1115
+ --mistica-color-backgroundSelectedBrandHover: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.24);
1116
+ --mistica-color-backgroundSelectedBrandPressed: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.32);
1117
+ --mistica-color-backgroundSelectedNegative: rgba(var(--mistica-cyber-raw-white), 0.2);
1118
+ --mistica-color-backgroundSelectedNegativeHover: rgba(var(--mistica-cyber-raw-white), 0.28);
1119
+ --mistica-color-backgroundSelectedNegativePressed: rgba(var(--mistica-cyber-raw-white), 0.35);
1120
+ --mistica-color-backgroundBrand: var(--mistica-cyber-brand);
1121
+ --mistica-color-backgroundNegative: var(--mistica-cyber-grey900);
1122
+ --mistica-color-backgroundBrandSecondary: var(--mistica-cyber-brand);
1123
+ --mistica-color-backgroundContainer: var(--mistica-cyber-white);
1124
+ --mistica-color-backgroundContainerError: var(--mistica-cyber-red10);
1125
+ --mistica-color-backgroundContainerHover: rgba(var(--mistica-cyber-raw-brand70), 0.05);
1126
+ --mistica-color-backgroundContainerPressed: rgba(var(--mistica-cyber-raw-brand70), 0.08);
1127
+ --mistica-color-backgroundContainerBrand: var(--mistica-cyber-brand);
1128
+ --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.2);
1129
+ --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.4);
1130
+ --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-cyber-brand70);
1131
+ --mistica-color-backgroundContainerNegative: rgba(var(--mistica-cyber-raw-white), 0.1);
1132
+ --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-cyber-brand70);
1133
+ --mistica-color-backgroundContainerAlternative: var(--mistica-cyber-brand10);
1134
+ --mistica-color-backgroundOverlay: rgba(var(--mistica-cyber-raw-grey900), 0.8);
1135
+ --mistica-color-backgroundSkeleton: var(--mistica-cyber-grey100);
1136
+ --mistica-color-backgroundSkeletonInverse: var(--mistica-cyber-brand70);
1137
+ --mistica-color-backgroundSkeletonNegative: rgba(var(--mistica-cyber-raw-black), 0.2);
1138
+ --mistica-color-backgroundSkeletonBrand: var(--mistica-cyber-brand70);
1139
+ --mistica-color-backgroundBrandTop: var(--mistica-cyber-brand);
1140
+ --mistica-color-backgroundBrandBottom: var(--mistica-cyber-brand);
1141
+ --mistica-color-appBarBackground: var(--mistica-cyber-white);
1142
+ --mistica-color-navigationBarBackground: var(--mistica-cyber-brand);
1143
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-cyber-raw-brand70), 0.05);
1144
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-cyber-raw-brand70), 0.08);
1145
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-cyber-raw-brand80), 0.2);
1146
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-cyber-raw-brand80), 0.4);
1147
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-cyber-raw-white), 0.1);
1148
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-cyber-raw-white), 0.17);
1149
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-cyber-raw-brand80), 0.2);
1150
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-cyber-raw-brand80), 0.4);
1151
+ --mistica-color-skeletonWave: var(--mistica-cyber-grey100);
1152
+ --mistica-color-borderLow: var(--mistica-cyber-grey15);
1153
+ --mistica-color-border: var(--mistica-cyber-grey100);
1154
+ --mistica-color-borderHigh: var(--mistica-cyber-grey400);
1155
+ --mistica-color-borderSelected: var(--mistica-cyber-brand);
1156
+ --mistica-color-coverBackgroundHover: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.25);
1157
+ --mistica-color-coverBackgroundPressed: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.35);
1158
+ --mistica-color-buttonDangerBackground: var(--mistica-cyber-red50);
1159
+ --mistica-color-buttonDangerBackgroundPressed: var(--mistica-cyber-red60);
1160
+ --mistica-color-buttonDangerBackgroundHover: var(--mistica-cyber-red60);
1161
+ --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-cyber-white);
1162
+ --mistica-color-buttonLinkDangerBackgroundNegative: var(--mistica-cyber-white);
1163
+ --mistica-color-buttonLinkDangerBackgroundBrand: var(--mistica-cyber-white);
1164
+ --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-cyber-white);
1165
+ --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-cyber-red10);
1166
+ --mistica-color-buttonLinkDangerBackgroundInversePressed: var(--mistica-cyber-red10);
1167
+ --mistica-color-buttonLinkDangerBackgroundNegativePressed: var(--mistica-cyber-red10);
1168
+ --mistica-color-buttonLinkDangerBackgroundBrandPressed: var(--mistica-cyber-red10);
1169
+ --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-cyber-red10);
1170
+ --mistica-color-buttonLinkBackgroundPressed: var(--mistica-cyber-brand10);
1171
+ --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-cyber-raw-white), 0.08);
1172
+ --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-cyber-raw-white), 0.08);
1173
+ --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-cyber-raw-white), 0.08);
1174
+ --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-cyber-raw-white), 0.08);
1175
+ --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-cyber-grey10);
1176
+ --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-cyber-white);
1177
+ --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-cyber-grey10);
1178
+ --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-cyber-white);
1179
+ --mistica-color-buttonLinkNeutralBackgroundNegativePressed: var(--mistica-cyber-grey10);
1180
+ --mistica-color-buttonLinkNeutralBackgroundMedia: var(--mistica-cyber-white);
1181
+ --mistica-color-buttonLinkNeutralBackgroundMediaPressed: var(--mistica-cyber-grey10);
1182
+ --mistica-color-buttonPrimaryBackground: var(--mistica-cyber-black);
1183
+ --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-cyber-white);
1184
+ --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-cyber-white);
1185
+ --mistica-color-buttonPrimaryBackgroundBrand: var(--mistica-cyber-white);
1186
+ --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-cyber-white);
1187
+ --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-cyber-brand70);
1188
+ --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-cyber-brand15);
1189
+ --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-cyber-brand15);
1190
+ --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-cyber-brand15);
1191
+ --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-cyber-brand15);
1192
+ --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-cyber-brand70);
1193
+ --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-cyber-brand15);
1194
+ --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-cyber-brand15);
1195
+ --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-cyber-brand15);
1196
+ --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-cyber-brand15);
1197
+ --mistica-color-buttonSecondaryBackgroundBrand: rgba(var(--mistica-cyber-raw-white), 0);
1198
+ --mistica-color-buttonSecondaryBorder: var(--mistica-cyber-brand);
1199
+ --mistica-color-buttonSecondaryBorderInverse: var(--mistica-cyber-white);
1200
+ --mistica-color-buttonSecondaryBorderNegative: var(--mistica-cyber-white);
1201
+ --mistica-color-buttonSecondaryBorderBrand: var(--mistica-cyber-white);
1202
+ --mistica-color-buttonSecondaryBorderMedia: var(--mistica-cyber-white);
1203
+ --mistica-color-buttonSecondaryBorderPressed: var(--mistica-cyber-brand70);
1204
+ --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-cyber-white);
1205
+ --mistica-color-buttonSecondaryBorderNegativePressed: var(--mistica-cyber-white);
1206
+ --mistica-color-buttonSecondaryBorderBrandPressed: var(--mistica-cyber-white);
1207
+ --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-cyber-white);
1208
+ --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-cyber-brand15);
1209
+ --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-cyber-raw-white), 0.1);
1210
+ --mistica-color-buttonSecondaryBackgroundNegativeHover: rgba(var(--mistica-cyber-raw-white), 0.1);
1211
+ --mistica-color-buttonSecondaryBackgroundBrandHover: rgba(var(--mistica-cyber-raw-white), 0.1);
1212
+ --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-cyber-raw-white), 0.1);
1213
+ --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-cyber-brand15);
1214
+ --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-cyber-raw-white), 0.1);
1215
+ --mistica-color-buttonSecondaryBackgroundNegativePressed: rgba(var(--mistica-cyber-raw-white), 0.1);
1216
+ --mistica-color-buttonSecondaryBackgroundBrandPressed: rgba(var(--mistica-cyber-raw-white), 0.1);
1217
+ --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-cyber-raw-white), 0.1);
1218
+ --mistica-color-textButtonPrimary: var(--mistica-cyber-white);
1219
+ --mistica-color-textButtonPrimaryInverse: var(--mistica-cyber-brand);
1220
+ --mistica-color-textButtonPrimaryNegative: var(--mistica-cyber-brand);
1221
+ --mistica-color-textButtonPrimaryBrand: var(--mistica-cyber-brand);
1222
+ --mistica-color-textButtonPrimaryMedia: var(--mistica-cyber-brand);
1223
+ --mistica-color-textButtonPrimaryInversePressed: var(--mistica-cyber-brand70);
1224
+ --mistica-color-textButtonPrimaryNegativePressed: var(--mistica-cyber-brand70);
1225
+ --mistica-color-textButtonPrimaryBrandPressed: var(--mistica-cyber-brand70);
1226
+ --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-cyber-brand70);
1227
+ --mistica-color-textButtonSecondary: var(--mistica-cyber-black);
1228
+ --mistica-color-textButtonSecondaryInverse: var(--mistica-cyber-white);
1229
+ --mistica-color-textButtonSecondaryNegative: var(--mistica-cyber-white);
1230
+ --mistica-color-textButtonSecondaryBrand: var(--mistica-cyber-white);
1231
+ --mistica-color-textButtonSecondaryMedia: var(--mistica-cyber-white);
1232
+ --mistica-color-textButtonSecondaryPressed: var(--mistica-cyber-brand70);
1233
+ --mistica-color-textButtonSecondaryInversePressed: var(--mistica-cyber-white);
1234
+ --mistica-color-textButtonSecondaryNegativePressed: var(--mistica-cyber-white);
1235
+ --mistica-color-textButtonSecondaryBrandPressed: var(--mistica-cyber-white);
1236
+ --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-cyber-white);
1237
+ --mistica-color-textLink: var(--mistica-cyber-brand);
1238
+ --mistica-color-textLinkInverse: var(--mistica-cyber-white);
1239
+ --mistica-color-textLinkNegative: var(--mistica-cyber-white);
1240
+ --mistica-color-textLinkBrand: var(--mistica-cyber-white);
1241
+ --mistica-color-textLinkMedia: var(--mistica-cyber-white);
1242
+ --mistica-color-textLinkDanger: var(--mistica-cyber-red50);
1243
+ --mistica-color-textLinkDangerMedia: var(--mistica-cyber-red50);
1244
+ --mistica-color-textLinkSnackbar: var(--mistica-cyber-brand30);
1245
+ --mistica-color-textLinkNeutral: var(--mistica-cyber-grey900);
1246
+ --mistica-color-textLinkNeutralBrand: var(--mistica-cyber-grey900);
1247
+ --mistica-color-textLinkNeutralNegative: var(--mistica-cyber-grey900);
1248
+ --mistica-color-textLinkNeutralAlternative: var(--mistica-cyber-grey900);
1249
+ --mistica-color-textLinkNeutralMedia: var(--mistica-cyber-grey900);
1250
+ --mistica-color-textActivated: var(--mistica-cyber-brand70);
1251
+ --mistica-color-textBrand: var(--mistica-cyber-brand70);
1252
+ --mistica-color-inputBorder: var(--mistica-cyber-grey400);
1253
+ --mistica-color-inputBorderInverse: var(--mistica-cyber-white);
1254
+ --mistica-color-inputBorderNegative: var(--mistica-cyber-white);
1255
+ --mistica-color-inputBorderBrand: var(--mistica-cyber-white);
1256
+ --mistica-color-completedStep: var(--mistica-cyber-brand);
1257
+ --mistica-color-completedStepInverse: var(--mistica-cyber-brand70);
1258
+ --mistica-color-completedStepNegative: var(--mistica-cyber-brand70);
1259
+ --mistica-color-completedStepBrand: var(--mistica-cyber-brand70);
1260
+ --mistica-color-control: var(--mistica-cyber-grey400);
1261
+ --mistica-color-controlActivated: var(--mistica-cyber-brand);
1262
+ --mistica-color-controlInverse: var(--mistica-cyber-brand10);
1263
+ --mistica-color-controlNegative: var(--mistica-cyber-brand10);
1264
+ --mistica-color-controlBrand: var(--mistica-cyber-brand10);
1265
+ --mistica-color-controlActivatedInverse: var(--mistica-cyber-white);
1266
+ --mistica-color-controlActivatedNegative: var(--mistica-cyber-white);
1267
+ --mistica-color-controlActivatedBrand: var(--mistica-cyber-white);
1268
+ --mistica-color-controlError: var(--mistica-cyber-red50);
1269
+ --mistica-color-chevronIndicator: var(--mistica-cyber-grey400);
1270
+ --mistica-color-barTrack: var(--mistica-cyber-grey100);
1271
+ --mistica-color-barTrackInverse: rgba(var(--mistica-cyber-raw-white), 0.3);
1272
+ --mistica-color-barTrackNegative: rgba(var(--mistica-cyber-raw-white), 0.3);
1273
+ --mistica-color-barTrackBrand: rgba(var(--mistica-cyber-raw-white), 0.3);
1274
+ --mistica-color-loadingBar: var(--mistica-cyber-brand30);
1275
+ --mistica-color-loadingBarBackground: var(--mistica-cyber-brand70);
1276
+ --mistica-color-toggleAndroidInactive: var(--mistica-cyber-grey100);
1277
+ --mistica-color-toggleAndroidBackgroundActive: var(--mistica-cyber-grey100);
1278
+ --mistica-color-toggleAndroidActiveBrand: var(--mistica-cyber-white);
1279
+ --mistica-color-toggleAndroidInactiveBrand: var(--mistica-cyber-grey100);
1280
+ --mistica-color-toggleAndroidBackgroundActiveBrand: var(--mistica-cyber-grey100);
1281
+ --mistica-color-toggleAndroidBackgroundInactiveBrand: var(--mistica-cyber-brand10);
1282
+ --mistica-color-iosControlKnob: var(--mistica-cyber-white);
1283
+ --mistica-color-controlKnobInverse: var(--mistica-cyber-brand);
1284
+ --mistica-color-controlKnobNegative: var(--mistica-cyber-brand);
1285
+ --mistica-color-controlKnobBrand: var(--mistica-cyber-brand);
1286
+ --mistica-color-divider: var(--mistica-cyber-grey100);
1287
+ --mistica-color-dividerInverse: rgba(var(--mistica-cyber-raw-white), 0.2);
1288
+ --mistica-color-dividerNegative: rgba(var(--mistica-cyber-raw-white), 0.2);
1289
+ --mistica-color-dividerBrand: rgba(var(--mistica-cyber-raw-white), 0.2);
1290
+ --mistica-color-navigationBarDivider: var(--mistica-cyber-brand);
1291
+ --mistica-color-badge: var(--mistica-cyber-red50);
1292
+ --mistica-color-feedbackErrorBackground: var(--mistica-cyber-red50);
1293
+ --mistica-color-feedbackInfoBackground: var(--mistica-cyber-grey900);
1294
+ --mistica-color-brand: var(--mistica-cyber-brand);
1295
+ --mistica-color-brandHigh: var(--mistica-cyber-brand70);
1296
+ --mistica-color-inverse: var(--mistica-cyber-white);
1297
+ --mistica-color-negative: var(--mistica-cyber-white);
1298
+ --mistica-color-neutralHigh: var(--mistica-cyber-grey900);
1299
+ --mistica-color-neutralHighBrand: var(--mistica-cyber-white);
1300
+ --mistica-color-neutralHighNegative: var(--mistica-cyber-white);
1301
+ --mistica-color-neutralMedium: var(--mistica-cyber-grey400);
1302
+ --mistica-color-neutralMediumInverse: var(--mistica-cyber-grey400);
1303
+ --mistica-color-neutralMediumNegative: var(--mistica-cyber-grey400);
1304
+ --mistica-color-neutralMediumBrand: var(--mistica-cyber-grey400);
1305
+ --mistica-color-neutralLow: var(--mistica-cyber-brand10);
1306
+ --mistica-color-neutralLowAlternative: var(--mistica-cyber-grey100);
1307
+ --mistica-color-textPrimary: var(--mistica-cyber-grey900);
1308
+ --mistica-color-textPrimaryInverse: var(--mistica-cyber-white);
1309
+ --mistica-color-textPrimaryNegative: var(--mistica-cyber-white);
1310
+ --mistica-color-textPrimaryBrand: var(--mistica-cyber-white);
1311
+ --mistica-color-textPrimaryMedia: var(--mistica-cyber-white);
1312
+ --mistica-color-textSecondary: var(--mistica-cyber-grey500);
1313
+ --mistica-color-textSecondaryInverse: var(--mistica-cyber-white);
1314
+ --mistica-color-textSecondaryNegative: var(--mistica-cyber-white);
1315
+ --mistica-color-textSecondaryBrand: var(--mistica-cyber-white);
1316
+ --mistica-color-textSecondaryMedia: var(--mistica-cyber-white);
1317
+ --mistica-color-error: var(--mistica-cyber-red50);
1318
+ --mistica-color-textError: var(--mistica-cyber-red50);
1319
+ --mistica-color-textErrorInverse: var(--mistica-cyber-white);
1320
+ --mistica-color-textErrorNegative: var(--mistica-cyber-white);
1321
+ --mistica-color-textErrorBrand: var(--mistica-cyber-white);
1322
+ --mistica-color-success: var(--mistica-cyber-teal);
1323
+ --mistica-color-warning: var(--mistica-cyber-yellow60);
1324
+ --mistica-color-promo: var(--mistica-cyber-purple);
1325
+ --mistica-color-highlight: var(--mistica-cyber-red20);
1326
+ --mistica-color-successLow: var(--mistica-cyber-teal10);
1327
+ --mistica-color-warningLow: var(--mistica-cyber-yellow15);
1328
+ --mistica-color-errorLow: var(--mistica-cyber-red10);
1329
+ --mistica-color-promoLow: var(--mistica-cyber-purple10);
1330
+ --mistica-color-brandLow: var(--mistica-cyber-brand15);
1331
+ --mistica-color-successHigh: var(--mistica-cyber-teal70);
1332
+ --mistica-color-warningHigh: var(--mistica-cyber-yellow60);
1333
+ --mistica-color-errorHigh: var(--mistica-cyber-red60);
1334
+ --mistica-color-promoHigh: var(--mistica-cyber-purple70);
1335
+ --mistica-color-successHighInverse: var(--mistica-cyber-teal70);
1336
+ --mistica-color-successHighNegative: var(--mistica-cyber-teal70);
1337
+ --mistica-color-successHighBrand: var(--mistica-cyber-teal70);
1338
+ --mistica-color-warningHighInverse: var(--mistica-cyber-yellow60);
1339
+ --mistica-color-warningHighNegative: var(--mistica-cyber-yellow60);
1340
+ --mistica-color-warningHighBrand: var(--mistica-cyber-yellow60);
1341
+ --mistica-color-errorHighInverse: var(--mistica-cyber-red60);
1342
+ --mistica-color-errorHighNegative: var(--mistica-cyber-red60);
1343
+ --mistica-color-errorHighBrand: var(--mistica-cyber-red60);
1344
+ --mistica-color-promoHighInverse: var(--mistica-cyber-purple70);
1345
+ --mistica-color-promoHighNegative: var(--mistica-cyber-purple70);
1346
+ --mistica-color-promoHighBrand: var(--mistica-cyber-purple70);
1347
+ --mistica-color-textNavigationBarPrimary: var(--mistica-cyber-white);
1348
+ --mistica-color-textNavigationBarSecondary: var(--mistica-cyber-brand10);
1349
+ --mistica-color-textNavigationSearchBarHint: var(--mistica-cyber-brand10);
1350
+ --mistica-color-textNavigationSearchBarText: var(--mistica-cyber-white);
1351
+ --mistica-color-textAppBar: var(--mistica-cyber-grey300);
1352
+ --mistica-color-textAppBarSelected: var(--mistica-cyber-brand70);
1353
+ --mistica-color-iosGlassAppBar: var(--mistica-cyber-grey900);
1354
+ --mistica-color-iosGlassAppBarSelected: var(--mistica-cyber-brand70);
1355
+ --mistica-color-customTabsBackground: var(--mistica-cyber-brand70);
1356
+ --mistica-color-tagTextPromo: var(--mistica-cyber-purple80);
1357
+ --mistica-color-tagTextActive: var(--mistica-cyber-brand70);
1358
+ --mistica-color-tagTextInactive: var(--mistica-cyber-grey500);
1359
+ --mistica-color-tagTextInfo: var(--mistica-cyber-brand70);
1360
+ --mistica-color-tagTextSuccess: var(--mistica-cyber-teal80);
1361
+ --mistica-color-tagTextWarning: var(--mistica-cyber-yellow80);
1362
+ --mistica-color-tagTextError: var(--mistica-cyber-red60);
1363
+ --mistica-color-tagBackgroundPromo: var(--mistica-cyber-purple10);
1364
+ --mistica-color-tagBackgroundActive: var(--mistica-cyber-brand10);
1365
+ --mistica-color-tagBackgroundInactive: var(--mistica-cyber-brand10);
1366
+ --mistica-color-tagBackgroundInfo: var(--mistica-cyber-brand15);
1367
+ --mistica-color-tagBackgroundSuccess: var(--mistica-cyber-teal20);
1368
+ --mistica-color-tagBackgroundWarning: var(--mistica-cyber-yellow15);
1369
+ --mistica-color-tagBackgroundError: var(--mistica-cyber-red10);
1370
+ --mistica-color-tagTextPromoInverse: var(--mistica-cyber-purple80);
1371
+ --mistica-color-tagTextPromoNegative: var(--mistica-cyber-purple80);
1372
+ --mistica-color-tagTextPromoBrand: var(--mistica-cyber-purple80);
1373
+ --mistica-color-tagTextActiveInverse: var(--mistica-cyber-brand70);
1374
+ --mistica-color-tagTextActiveNegative: var(--mistica-cyber-brand70);
1375
+ --mistica-color-tagTextActiveBrand: var(--mistica-cyber-brand70);
1376
+ --mistica-color-tagTextInactiveInverse: var(--mistica-cyber-grey500);
1377
+ --mistica-color-tagTextInactiveNegative: var(--mistica-cyber-grey500);
1378
+ --mistica-color-tagTextInactiveBrand: var(--mistica-cyber-grey500);
1379
+ --mistica-color-tagTextInfoInverse: var(--mistica-cyber-brand70);
1380
+ --mistica-color-tagTextInfoNegative: var(--mistica-cyber-brand70);
1381
+ --mistica-color-tagTextInfoBrand: var(--mistica-cyber-brand70);
1382
+ --mistica-color-tagTextSuccessInverse: var(--mistica-cyber-teal80);
1383
+ --mistica-color-tagTextSuccessNegative: var(--mistica-cyber-teal80);
1384
+ --mistica-color-tagTextSuccessBrand: var(--mistica-cyber-teal80);
1385
+ --mistica-color-tagTextWarningInverse: var(--mistica-cyber-yellow80);
1386
+ --mistica-color-tagTextWarningNegative: var(--mistica-cyber-yellow80);
1387
+ --mistica-color-tagTextWarningBrand: var(--mistica-cyber-yellow80);
1388
+ --mistica-color-tagTextErrorInverse: var(--mistica-cyber-red60);
1389
+ --mistica-color-tagTextErrorNegative: var(--mistica-cyber-red60);
1390
+ --mistica-color-tagTextErrorBrand: var(--mistica-cyber-red60);
1391
+ --mistica-color-tagBackgroundPromoInverse: var(--mistica-cyber-purple10);
1392
+ --mistica-color-tagBackgroundPromoNegative: var(--mistica-cyber-purple10);
1393
+ --mistica-color-tagBackgroundPromoBrand: var(--mistica-cyber-purple10);
1394
+ --mistica-color-tagBackgroundActiveInverse: var(--mistica-cyber-brand10);
1395
+ --mistica-color-tagBackgroundActiveNegative: var(--mistica-cyber-brand10);
1396
+ --mistica-color-tagBackgroundActiveBrand: var(--mistica-cyber-brand10);
1397
+ --mistica-color-tagBackgroundInactiveInverse: var(--mistica-cyber-brand10);
1398
+ --mistica-color-tagBackgroundInactiveNegative: var(--mistica-cyber-brand10);
1399
+ --mistica-color-tagBackgroundInactiveBrand: var(--mistica-cyber-brand10);
1400
+ --mistica-color-tagBackgroundInfoInverse: var(--mistica-cyber-brand15);
1401
+ --mistica-color-tagBackgroundInfoNegative: var(--mistica-cyber-brand15);
1402
+ --mistica-color-tagBackgroundInfoBrand: var(--mistica-cyber-brand15);
1403
+ --mistica-color-tagBackgroundSuccessInverse: var(--mistica-cyber-teal10);
1404
+ --mistica-color-tagBackgroundSuccessNegative: var(--mistica-cyber-teal10);
1405
+ --mistica-color-tagBackgroundSuccessBrand: var(--mistica-cyber-teal10);
1406
+ --mistica-color-tagBackgroundWarningInverse: var(--mistica-cyber-yellow15);
1407
+ --mistica-color-tagBackgroundWarningNegative: var(--mistica-cyber-yellow15);
1408
+ --mistica-color-tagBackgroundWarningBrand: var(--mistica-cyber-yellow15);
1409
+ --mistica-color-tagBackgroundErrorInverse: var(--mistica-cyber-red10);
1410
+ --mistica-color-tagBackgroundErrorNegative: var(--mistica-cyber-red10);
1411
+ --mistica-color-tagBackgroundErrorBrand: var(--mistica-cyber-red10);
1412
+ --mistica-color-cardContentOverlay: linear-gradient(
1413
+ 180deg,
1414
+ rgba(var(--mistica-cyber-raw-black), 0) 0%,
1415
+ rgba(var(--mistica-cyber-raw-black), 0.4) 30%,
1416
+ rgba(var(--mistica-cyber-raw-black), 0.7) 100%
1417
+ );
1418
+ --mistica-color-cardFooterOverlay: rgba(var(--mistica-cyber-raw-black), 0.7);
1419
+ }
1420
+ }
1421
+
1422
+ @media (min-width: 1024px) {
1423
+ [data-mistica-skin='cyber'] {
1424
+ /* Text */
1425
+ --mistica-font-size-1: 0.875rem;
1426
+ --mistica-line-height-1: 1.25rem;
1427
+ --mistica-font-size-2: 1rem;
1428
+ --mistica-line-height-2: 1.5rem;
1429
+ --mistica-font-size-3: 1.125rem;
1430
+ --mistica-line-height-3: 1.5rem;
1431
+ --mistica-font-size-4: 1.25rem;
1432
+ --mistica-line-height-4: 1.75rem;
1433
+ --mistica-font-size-5: 1.75rem;
1434
+ --mistica-line-height-5: 2rem;
1435
+ --mistica-font-size-6: 2rem;
1436
+ --mistica-line-height-6: 2.5rem;
1437
+ --mistica-font-size-7: 2.5rem;
1438
+ --mistica-line-height-7: 3rem;
1439
+ --mistica-font-size-8: 3rem;
1440
+ --mistica-line-height-8: 3.5rem;
1441
+ --mistica-font-size-9: 3.5rem;
1442
+ --mistica-line-height-9: 4rem;
1443
+ --mistica-font-size-10: 4rem;
1444
+ --mistica-line-height-10: 4.5rem;
1445
+ --mistica-font-size-cardTitle: 1.5rem;
1446
+ --mistica-line-height-cardTitle: 1.75rem;
1447
+ --mistica-font-size-drawerTitle: 1.75rem;
1448
+ --mistica-line-height-drawerTitle: 2rem;
1449
+
1450
+ --mistica-font-size-tabsLabel: 1.125rem;
1451
+ --mistica-line-height-tabsLabel: 1.5rem;
1452
+
1453
+ --mistica-font-size-title1: 0.875rem;
1454
+ --mistica-line-height-title1: 1.25rem;
1455
+ --mistica-font-size-title2: 1.125rem;
1456
+ --mistica-line-height-title2: 1.5rem;
1457
+ --mistica-font-size-title3: 1.75rem;
1458
+ --mistica-line-height-title3: 2rem;
1459
+ --mistica-font-size-title4: 2rem;
1460
+ --mistica-line-height-title4: 2.5rem;
1461
+
1462
+ --mistica-font-size-chipLabel: 1rem;
1463
+ --mistica-line-height-chipLabel: 1.5rem;
1464
+ --mistica-font-size-cardPretitleSnap: 1rem;
1465
+ --mistica-line-height-cardPretitleSnap: 1.5rem;
1466
+ --mistica-font-size-cardTitleSnap: 1rem;
1467
+ --mistica-line-height-cardTitleSnap: 1.5rem;
1468
+ --mistica-font-size-cardSubtitleSnap: 1rem;
1469
+ --mistica-line-height-cardSubtitleSnap: 1.5rem;
1470
+ --mistica-font-size-cardDescriptionSnap: 1rem;
1471
+ --mistica-line-height-cardDescriptionSnap: 1.5rem;
1472
+ --mistica-font-size-cardPretitleDefault: 1rem;
1473
+ --mistica-line-height-cardPretitleDefault: 1.5rem;
1474
+ --mistica-font-size-cardTitleDefault: 1.25rem;
1475
+ --mistica-line-height-cardTitleDefault: 1.75rem;
1476
+ --mistica-font-size-cardSubtitleDefault: 1rem;
1477
+ --mistica-line-height-cardSubtitleDefault: 1.5rem;
1478
+ --mistica-font-size-cardDescriptionDefault: 1rem;
1479
+ --mistica-line-height-cardDescriptionDefault: 1.5rem;
1480
+ --mistica-font-size-inputLabel: 0.875rem;
1481
+ --mistica-line-height-inputLabel: 1.25rem;
1482
+ --mistica-font-size-inputValue: 1.125rem;
1483
+ --mistica-line-height-inputValue: 1.5rem;
1484
+ --mistica-font-size-inputHelperText: 0.875rem;
1485
+ --mistica-line-height-inputHelperText: 1.25rem;
1486
+ --mistica-font-size-stepperStepLabel: 1rem;
1487
+ --mistica-line-height-stepperStepLabel: 1.5rem;
1488
+ --mistica-font-size-loadingScreenTitle: 1.25rem;
1489
+ --mistica-line-height-loadingScreenTitle: 1.75rem;
1490
+ }
1491
+ }