@telefonica/mistica 16.52.0 → 16.53.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 (280) hide show
  1. package/README.md +2 -1
  2. package/css/blau.css +69 -0
  3. package/css/esimflag.css +70 -1
  4. package/css/mistica.css +1 -1
  5. package/css/movistar-new.css +82 -0
  6. package/css/movistar.css +71 -2
  7. package/css/o2-new.css +71 -0
  8. package/css/o2.css +70 -0
  9. package/css/telefonica.css +94 -0
  10. package/css/tu.css +71 -1
  11. package/css/vivo-new.css +86 -9
  12. package/css/vivo.css +70 -0
  13. package/dist/accordion.css-mistica.js +10 -10
  14. package/dist/align.css-mistica.js +1 -1
  15. package/dist/autocomplete.css-mistica.js +5 -5
  16. package/dist/avatar.css-mistica.js +1 -1
  17. package/dist/badge.css-mistica.js +1 -1
  18. package/dist/box.css-mistica.js +13 -13
  19. package/dist/boxed.css-mistica.js +24 -24
  20. package/dist/button-group.css-mistica.js +5 -5
  21. package/dist/button-layout.css-mistica.js +14 -14
  22. package/dist/button.css-mistica.js +54 -48
  23. package/dist/button.css.d.ts +5 -1
  24. package/dist/button.js +44 -44
  25. package/dist/callout.css-mistica.js +13 -13
  26. package/dist/card-internal.css-mistica.js +25 -25
  27. package/dist/card-internal.css.d.ts +1 -1
  28. package/dist/card-internal.js +75 -74
  29. package/dist/carousel.css-mistica.js +32 -32
  30. package/dist/checkbox.css-mistica.js +19 -19
  31. package/dist/checkbox.js +1 -1
  32. package/dist/chip.css-mistica.js +20 -20
  33. package/dist/circle.css-mistica.js +2 -2
  34. package/dist/community/advanced-data-card.css-mistica.js +19 -19
  35. package/dist/community/blocks.css-mistica.js +3 -3
  36. package/dist/community/example-component.css-mistica.js +2 -2
  37. package/dist/counter.css-mistica.js +3 -3
  38. package/dist/cover-hero.css-mistica.js +10 -10
  39. package/dist/credit-card-number-field.css-mistica.js +3 -3
  40. package/dist/credit-card-number-field.js +16 -16
  41. package/dist/date-field.css-mistica.js +1 -1
  42. package/dist/date-field.js +1 -1
  43. package/dist/date-time-field.js +6 -6
  44. package/dist/date-time-picker.css-mistica.js +1 -1
  45. package/dist/dialog.css-mistica.js +8 -8
  46. package/dist/divider.css-mistica.js +5 -5
  47. package/dist/double-field.css-mistica.js +4 -4
  48. package/dist/drawer.css-mistica.js +18 -9
  49. package/dist/drawer.css.d.ts +3 -0
  50. package/dist/drawer.js +90 -106
  51. package/dist/empty-state-card.css-mistica.js +2 -2
  52. package/dist/empty-state.css-mistica.js +5 -5
  53. package/dist/empty-state.css.d.ts +1 -0
  54. package/dist/fade-in.css-mistica.js +1 -1
  55. package/dist/feedback.css-mistica.js +5 -2
  56. package/dist/feedback.css.d.ts +1 -0
  57. package/dist/feedback.js +34 -41
  58. package/dist/file-upload.css-mistica.js +40 -0
  59. package/dist/file-upload.css.d.ts +7 -0
  60. package/dist/file-upload.d.ts +59 -0
  61. package/dist/file-upload.js +483 -0
  62. package/dist/fixed-footer-layout.css-mistica.js +10 -10
  63. package/dist/form.css-mistica.js +2 -2
  64. package/dist/grid-layout.css-mistica.js +3 -3
  65. package/dist/grid.css-mistica.js +120 -120
  66. package/dist/header.css-mistica.js +1 -1
  67. package/dist/hero.css-mistica.js +9 -9
  68. package/dist/hero.js +51 -51
  69. package/dist/horizontal-scroll.css-mistica.js +2 -2
  70. package/dist/icon-button.css-mistica.js +61 -61
  71. package/dist/icons/icon-amex.js +45 -37
  72. package/dist/icons/icon-chevron.css-mistica.js +2 -2
  73. package/dist/icons/icon-error.css-mistica.js +1 -1
  74. package/dist/icons/icon-mastercard.js +41 -36
  75. package/dist/icons/icon-visa.js +37 -27
  76. package/dist/image.css-mistica.js +11 -11
  77. package/dist/index.d.ts +1 -0
  78. package/dist/index.js +7 -0
  79. package/dist/inline.css-mistica.js +9 -9
  80. package/dist/list.css-mistica.js +21 -21
  81. package/dist/list.d.ts +12 -2
  82. package/dist/list.js +117 -115
  83. package/dist/loading-bar.css-mistica.js +3 -3
  84. package/dist/loading-screen.css-mistica.js +7 -7
  85. package/dist/logo.css-mistica.js +5 -5
  86. package/dist/menu.css-mistica.js +15 -15
  87. package/dist/month-field.js +1 -1
  88. package/dist/mosaic.css-mistica.js +1 -1
  89. package/dist/navigation-bar.css-mistica.js +42 -42
  90. package/dist/navigation-breadcrumbs.css-mistica.js +3 -3
  91. package/dist/package-version.js +1 -1
  92. package/dist/pin-field.css-mistica.js +2 -2
  93. package/dist/popover.css-mistica.js +1 -1
  94. package/dist/progress-bar.css-mistica.js +7 -7
  95. package/dist/radio-button.css-mistica.js +25 -25
  96. package/dist/rating.css-mistica.js +2 -2
  97. package/dist/responsive-layout.css-mistica.js +7 -7
  98. package/dist/screen-reader-only.css-mistica.js +2 -2
  99. package/dist/search-field.js +9 -9
  100. package/dist/select.css-mistica.js +23 -23
  101. package/dist/sheet-action-row.css-mistica.js +1 -1
  102. package/dist/sheet-common.css-mistica.js +10 -10
  103. package/dist/sheet-info.css-mistica.js +2 -2
  104. package/dist/skeletons.css-mistica.js +9 -9
  105. package/dist/skins/blau.js +132 -0
  106. package/dist/skins/defaults.d.ts +2 -1
  107. package/dist/skins/defaults.js +118 -0
  108. package/dist/skins/esimflag.js +132 -0
  109. package/dist/skins/movistar-new.js +134 -2
  110. package/dist/skins/movistar.js +132 -0
  111. package/dist/skins/o2-new.js +132 -0
  112. package/dist/skins/o2.js +132 -0
  113. package/dist/skins/skin-contract.css-mistica.js +702 -642
  114. package/dist/skins/skin-contract.css.d.ts +60 -0
  115. package/dist/skins/telefonica.js +132 -0
  116. package/dist/skins/tu.js +132 -0
  117. package/dist/skins/types/colors.d.ts +8 -0
  118. package/dist/skins/types/index.d.ts +30 -16
  119. package/dist/skins/vivo-new.js +132 -0
  120. package/dist/skins/vivo.js +132 -0
  121. package/dist/skip-link.css-mistica.js +2 -2
  122. package/dist/slider.css-mistica.js +21 -21
  123. package/dist/snackbar.css-mistica.js +15 -15
  124. package/dist/spinner.css-mistica.js +1 -1
  125. package/dist/sprinkles.css.d.ts +1 -1
  126. package/dist/square.css-mistica.js +2 -2
  127. package/dist/stack.css-mistica.js +5 -5
  128. package/dist/stack.d.ts +2 -1
  129. package/dist/stack.js +17 -16
  130. package/dist/stacking-group.css-mistica.js +1 -1
  131. package/dist/stepper.css-mistica.js +12 -12
  132. package/dist/switch-component.css-mistica.js +46 -46
  133. package/dist/table.css-mistica.js +9 -9
  134. package/dist/tabs.css-mistica.js +23 -23
  135. package/dist/tag.css-mistica.js +4 -4
  136. package/dist/text-field-base.css-mistica.js +25 -28
  137. package/dist/text-field-base.css.d.ts +2 -2
  138. package/dist/text-field-base.js +102 -101
  139. package/dist/text-field-components.css-mistica.js +10 -10
  140. package/dist/text-link.css-mistica.js +8 -8
  141. package/dist/text-tokens.d.ts +4 -0
  142. package/dist/text-tokens.js +62 -46
  143. package/dist/text.css-mistica.js +6 -6
  144. package/dist/theme-context-provider.js +155 -116
  145. package/dist/theme-context.css-mistica.js +1 -1
  146. package/dist/theme.d.ts +2 -1
  147. package/dist/time-field.js +4 -4
  148. package/dist/timeline.css-mistica.js +13 -13
  149. package/dist/timer.css-mistica.js +6 -6
  150. package/dist/tooltip.css-mistica.js +5 -5
  151. package/dist/touchable.css-mistica.js +5 -5
  152. package/dist/utils/aspect-ratio-support.css-mistica.js +2 -2
  153. package/dist/video.css-mistica.js +1 -1
  154. package/dist/vivinho-loading-animation/vivinho-loading-animation.css-mistica.js +1 -1
  155. package/dist-es/accordion.css-mistica.js +7 -7
  156. package/dist-es/align.css-mistica.js +1 -1
  157. package/dist-es/autocomplete.css-mistica.js +2 -2
  158. package/dist-es/avatar.css-mistica.js +1 -1
  159. package/dist-es/badge.css-mistica.js +1 -1
  160. package/dist-es/box.css-mistica.js +13 -13
  161. package/dist-es/boxed.css-mistica.js +23 -23
  162. package/dist-es/button-group.css-mistica.js +2 -2
  163. package/dist-es/button-layout.css-mistica.js +14 -14
  164. package/dist-es/button.css-mistica.js +39 -36
  165. package/dist-es/button.js +90 -90
  166. package/dist-es/callout.css-mistica.js +12 -12
  167. package/dist-es/card-internal.css-mistica.js +17 -17
  168. package/dist-es/card-internal.js +89 -88
  169. package/dist-es/carousel.css-mistica.js +9 -9
  170. package/dist-es/checkbox.css-mistica.js +13 -13
  171. package/dist-es/checkbox.js +1 -1
  172. package/dist-es/chip.css-mistica.js +16 -16
  173. package/dist-es/circle.css-mistica.js +2 -2
  174. package/dist-es/community/advanced-data-card.css-mistica.js +7 -7
  175. package/dist-es/community/blocks.css-mistica.js +2 -2
  176. package/dist-es/community/example-component.css-mistica.js +2 -2
  177. package/dist-es/counter.css-mistica.js +2 -2
  178. package/dist-es/cover-hero.css-mistica.js +3 -3
  179. package/dist-es/credit-card-number-field.css-mistica.js +3 -3
  180. package/dist-es/credit-card-number-field.js +19 -19
  181. package/dist-es/date-field.css-mistica.js +1 -1
  182. package/dist-es/date-field.js +1 -1
  183. package/dist-es/date-time-field.js +6 -6
  184. package/dist-es/date-time-picker.css-mistica.js +1 -1
  185. package/dist-es/dialog.css-mistica.js +5 -5
  186. package/dist-es/divider.css-mistica.js +5 -5
  187. package/dist-es/double-field.css-mistica.js +4 -4
  188. package/dist-es/drawer.css-mistica.js +2 -2
  189. package/dist-es/drawer.js +121 -137
  190. package/dist-es/empty-state-card.css-mistica.js +2 -2
  191. package/dist-es/empty-state.css-mistica.js +5 -5
  192. package/dist-es/fade-in.css-mistica.js +1 -1
  193. package/dist-es/feedback.css-mistica.js +2 -2
  194. package/dist-es/feedback.js +51 -58
  195. package/dist-es/file-upload.css-mistica.js +8 -0
  196. package/dist-es/file-upload.js +420 -0
  197. package/dist-es/fixed-footer-layout.css-mistica.js +4 -4
  198. package/dist-es/form.css-mistica.js +2 -2
  199. package/dist-es/grid-layout.css-mistica.js +3 -3
  200. package/dist-es/grid.css-mistica.js +120 -120
  201. package/dist-es/header.css-mistica.js +1 -1
  202. package/dist-es/hero.css-mistica.js +3 -3
  203. package/dist-es/hero.js +73 -73
  204. package/dist-es/horizontal-scroll.css-mistica.js +2 -2
  205. package/dist-es/icon-button.css-mistica.js +55 -55
  206. package/dist-es/icons/icon-amex.js +46 -38
  207. package/dist-es/icons/icon-chevron.css-mistica.js +2 -2
  208. package/dist-es/icons/icon-error.css-mistica.js +1 -1
  209. package/dist-es/icons/icon-mastercard.js +42 -37
  210. package/dist-es/icons/icon-visa.js +37 -27
  211. package/dist-es/image.css-mistica.js +4 -4
  212. package/dist-es/index.js +2214 -2213
  213. package/dist-es/inline.css-mistica.js +9 -9
  214. package/dist-es/list.css-mistica.js +2 -2
  215. package/dist-es/list.js +158 -156
  216. package/dist-es/loading-bar.css-mistica.js +2 -2
  217. package/dist-es/loading-screen.css-mistica.js +5 -5
  218. package/dist-es/logo.css-mistica.js +5 -5
  219. package/dist-es/menu.css-mistica.js +14 -14
  220. package/dist-es/month-field.js +1 -1
  221. package/dist-es/mosaic.css-mistica.js +1 -1
  222. package/dist-es/navigation-bar.css-mistica.js +20 -20
  223. package/dist-es/navigation-breadcrumbs.css-mistica.js +2 -2
  224. package/dist-es/package-version.js +1 -1
  225. package/dist-es/pin-field.css-mistica.js +2 -2
  226. package/dist-es/popover.css-mistica.js +1 -1
  227. package/dist-es/progress-bar.css-mistica.js +7 -7
  228. package/dist-es/radio-button.css-mistica.js +21 -21
  229. package/dist-es/rating.css-mistica.js +2 -2
  230. package/dist-es/responsive-layout.css-mistica.js +7 -7
  231. package/dist-es/screen-reader-only.css-mistica.js +2 -2
  232. package/dist-es/search-field.js +13 -13
  233. package/dist-es/select.css-mistica.js +18 -18
  234. package/dist-es/sheet-action-row.css-mistica.js +1 -1
  235. package/dist-es/sheet-common.css-mistica.js +2 -2
  236. package/dist-es/sheet-info.css-mistica.js +2 -2
  237. package/dist-es/skeletons.css-mistica.js +7 -7
  238. package/dist-es/skins/blau.js +132 -0
  239. package/dist-es/skins/defaults.js +116 -1
  240. package/dist-es/skins/esimflag.js +132 -0
  241. package/dist-es/skins/movistar-new.js +134 -2
  242. package/dist-es/skins/movistar.js +132 -0
  243. package/dist-es/skins/o2-new.js +132 -0
  244. package/dist-es/skins/o2.js +134 -2
  245. package/dist-es/skins/skin-contract.css-mistica.js +702 -642
  246. package/dist-es/skins/telefonica.js +132 -0
  247. package/dist-es/skins/tu.js +132 -0
  248. package/dist-es/skins/vivo-new.js +132 -0
  249. package/dist-es/skins/vivo.js +132 -0
  250. package/dist-es/skip-link.css-mistica.js +2 -2
  251. package/dist-es/slider.css-mistica.js +19 -19
  252. package/dist-es/snackbar.css-mistica.js +5 -5
  253. package/dist-es/spinner.css-mistica.js +1 -1
  254. package/dist-es/square.css-mistica.js +2 -2
  255. package/dist-es/stack.css-mistica.js +5 -5
  256. package/dist-es/stack.js +21 -20
  257. package/dist-es/stacking-group.css-mistica.js +1 -1
  258. package/dist-es/stepper.css-mistica.js +3 -3
  259. package/dist-es/style.css +1 -1
  260. package/dist-es/switch-component.css-mistica.js +38 -38
  261. package/dist-es/table.css-mistica.js +9 -9
  262. package/dist-es/tabs.css-mistica.js +19 -19
  263. package/dist-es/tag.css-mistica.js +2 -2
  264. package/dist-es/text-field-base.css-mistica.js +16 -16
  265. package/dist-es/text-field-base.js +132 -131
  266. package/dist-es/text-field-components.css-mistica.js +4 -4
  267. package/dist-es/text-link.css-mistica.js +8 -8
  268. package/dist-es/text-tokens.js +34 -24
  269. package/dist-es/text.css-mistica.js +6 -6
  270. package/dist-es/theme-context-provider.js +198 -159
  271. package/dist-es/theme-context.css-mistica.js +1 -1
  272. package/dist-es/time-field.js +4 -4
  273. package/dist-es/timeline.css-mistica.js +10 -10
  274. package/dist-es/timer.css-mistica.js +6 -6
  275. package/dist-es/tooltip.css-mistica.js +2 -2
  276. package/dist-es/touchable.css-mistica.js +2 -2
  277. package/dist-es/utils/aspect-ratio-support.css-mistica.js +2 -2
  278. package/dist-es/video.css-mistica.js +1 -1
  279. package/dist-es/vivinho-loading-animation/vivinho-loading-animation.css-mistica.js +1 -1
  280. package/package.json +1 -1
package/README.md CHANGED
@@ -124,7 +124,8 @@ Start prototyping interfaces with Mistica components in the
124
124
  - `yarn test-acceptance`: run acceptance tests headless (you need to start storybook first)
125
125
  - `yarn test-acceptance --ui`: run acceptance tests with ui (you need to start storybook first)
126
126
  - `yarn lint`: check codestyle
127
- - `yarn ts-check`: check static types (run `yarn build` first — the type check requires generated declaration files in `dist/`)
127
+ - `yarn ts-check`: check static types (run `yarn build` first — the type check requires generated declaration
128
+ files in `dist/`)
128
129
  - `yarn build`: build package
129
130
  - `yarn storybook`: starts storybook
130
131
  - `yarn playroom`: starts playroom
package/css/blau.css CHANGED
@@ -71,6 +71,14 @@
71
71
  --mistica-color-backgroundBrandBottom: var(--mistica-blau-blauBluePrimary);
72
72
  --mistica-color-appBarBackground: var(--mistica-blau-white);
73
73
  --mistica-color-navigationBarBackground: var(--mistica-blau-blauBluePrimary);
74
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-blau-raw-blauBlueSecondary), 0.05);
75
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-blau-raw-blauBlueSecondary), 0.08);
76
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-blau-raw-grey6), 0.05);
77
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-blau-raw-grey6), 0.08);
78
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-blau-raw-white), 0.1);
79
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-blau-raw-white), 0.17);
80
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-blau-raw-grey6), 0.05);
81
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-blau-raw-grey6), 0.08);
74
82
  --mistica-color-skeletonWave: var(--mistica-blau-grey2);
75
83
  --mistica-color-borderLow: var(--mistica-blau-grey1);
76
84
  --mistica-color-border: var(--mistica-blau-grey3);
@@ -372,6 +380,9 @@
372
380
  --mistica-font-size-cardTitle: 1.25rem;
373
381
  --mistica-line-height-cardTitle: 1.5rem;
374
382
  --mistica-font-weight-cardTitle: 400;
383
+ --mistica-font-size-drawerTitle: 1.25rem;
384
+ --mistica-line-height-drawerTitle: 1.5rem;
385
+ --mistica-font-weight-drawerTitle: 300;
375
386
  --mistica-font-weight-rowTitle: 400;
376
387
  --mistica-font-weight-button: 500;
377
388
  --mistica-font-size-tabsLabel: 1rem;
@@ -395,6 +406,22 @@
395
406
  --mistica-font-size-chipLabel: 0.875rem;
396
407
  --mistica-line-height-chipLabel: 1.25rem;
397
408
  --mistica-font-weight-chipLabel: 500;
409
+ --mistica-font-size-cardPretitleSnap: 0.875rem;
410
+ --mistica-line-height-cardPretitleSnap: 1.25rem;
411
+ --mistica-font-size-cardTitleSnap: 0.875rem;
412
+ --mistica-line-height-cardTitleSnap: 1.25rem;
413
+ --mistica-font-size-cardSubtitleSnap: 0.875rem;
414
+ --mistica-line-height-cardSubtitleSnap: 1.25rem;
415
+ --mistica-font-size-cardDescriptionSnap: 0.875rem;
416
+ --mistica-line-height-cardDescriptionSnap: 1.25rem;
417
+ --mistica-font-size-cardPretitleDefault: 0.875rem;
418
+ --mistica-line-height-cardPretitleDefault: 1.25rem;
419
+ --mistica-font-size-cardTitleDefault: 1.125rem;
420
+ --mistica-line-height-cardTitleDefault: 1.5rem;
421
+ --mistica-font-size-cardSubtitleDefault: 0.875rem;
422
+ --mistica-line-height-cardSubtitleDefault: 1.25rem;
423
+ --mistica-font-size-cardDescriptionDefault: 0.875rem;
424
+ --mistica-line-height-cardDescriptionDefault: 1.25rem;
398
425
  --mistica-font-size-inputLabel: 0.75rem;
399
426
  --mistica-line-height-inputLabel: 1rem;
400
427
  --mistica-font-size-inputValue: 1rem;
@@ -433,6 +460,14 @@
433
460
  --mistica-color-backgroundBrandBottom: var(--mistica-blau-darkModeBlack);
434
461
  --mistica-color-appBarBackground: var(--mistica-blau-darkModeGrey);
435
462
  --mistica-color-navigationBarBackground: var(--mistica-blau-darkModeBlack);
463
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-blau-raw-white), 0.05);
464
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-blau-raw-white), 0.08);
465
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-blau-raw-white), 0.03);
466
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-blau-raw-white), 0.05);
467
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-blau-raw-white), 0.15);
468
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-blau-raw-white), 0.15);
469
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-blau-raw-white), 0.03);
470
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-blau-raw-white), 0.05);
436
471
  --mistica-color-skeletonWave: var(--mistica-blau-grey5);
437
472
  --mistica-color-borderLow: var(--mistica-blau-darkModeBlack);
438
473
  --mistica-color-border: var(--mistica-blau-darkModeGrey);
@@ -717,6 +752,14 @@
717
752
  --mistica-color-backgroundBrandBottom: var(--mistica-blau-darkModeBlack);
718
753
  --mistica-color-appBarBackground: var(--mistica-blau-darkModeGrey);
719
754
  --mistica-color-navigationBarBackground: var(--mistica-blau-darkModeBlack);
755
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-blau-raw-white), 0.05);
756
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-blau-raw-white), 0.08);
757
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-blau-raw-white), 0.03);
758
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-blau-raw-white), 0.05);
759
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-blau-raw-white), 0.15);
760
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-blau-raw-white), 0.15);
761
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-blau-raw-white), 0.03);
762
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-blau-raw-white), 0.05);
720
763
  --mistica-color-skeletonWave: var(--mistica-blau-grey5);
721
764
  --mistica-color-borderLow: var(--mistica-blau-darkModeBlack);
722
765
  --mistica-color-border: var(--mistica-blau-darkModeGrey);
@@ -1006,6 +1049,14 @@
1006
1049
  --mistica-color-backgroundBrandBottom: var(--mistica-blau-blauBluePrimary);
1007
1050
  --mistica-color-appBarBackground: var(--mistica-blau-white);
1008
1051
  --mistica-color-navigationBarBackground: var(--mistica-blau-blauBluePrimary);
1052
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-blau-raw-blauBlueSecondary), 0.05);
1053
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-blau-raw-blauBlueSecondary), 0.08);
1054
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-blau-raw-grey6), 0.05);
1055
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-blau-raw-grey6), 0.08);
1056
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-blau-raw-white), 0.1);
1057
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-blau-raw-white), 0.17);
1058
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-blau-raw-grey6), 0.05);
1059
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-blau-raw-grey6), 0.08);
1009
1060
  --mistica-color-skeletonWave: var(--mistica-blau-grey2);
1010
1061
  --mistica-color-borderLow: var(--mistica-blau-grey1);
1011
1062
  --mistica-color-border: var(--mistica-blau-grey3);
@@ -1289,6 +1340,8 @@
1289
1340
  --mistica-line-height-10: 4.5rem;
1290
1341
  --mistica-font-size-cardTitle: 1.5rem;
1291
1342
  --mistica-line-height-cardTitle: 1.75rem;
1343
+ --mistica-font-size-drawerTitle: 1.75rem;
1344
+ --mistica-line-height-drawerTitle: 2rem;
1292
1345
 
1293
1346
  --mistica-font-size-tabsLabel: 1.125rem;
1294
1347
  --mistica-line-height-tabsLabel: 1.5rem;
@@ -1304,6 +1357,22 @@
1304
1357
 
1305
1358
  --mistica-font-size-chipLabel: 1rem;
1306
1359
  --mistica-line-height-chipLabel: 1.5rem;
1360
+ --mistica-font-size-cardPretitleSnap: 1rem;
1361
+ --mistica-line-height-cardPretitleSnap: 1.5rem;
1362
+ --mistica-font-size-cardTitleSnap: 1rem;
1363
+ --mistica-line-height-cardTitleSnap: 1.5rem;
1364
+ --mistica-font-size-cardSubtitleSnap: 1rem;
1365
+ --mistica-line-height-cardSubtitleSnap: 1.5rem;
1366
+ --mistica-font-size-cardDescriptionSnap: 1rem;
1367
+ --mistica-line-height-cardDescriptionSnap: 1.5rem;
1368
+ --mistica-font-size-cardPretitleDefault: 1rem;
1369
+ --mistica-line-height-cardPretitleDefault: 1.5rem;
1370
+ --mistica-font-size-cardTitleDefault: 1.25rem;
1371
+ --mistica-line-height-cardTitleDefault: 1.75rem;
1372
+ --mistica-font-size-cardSubtitleDefault: 1rem;
1373
+ --mistica-line-height-cardSubtitleDefault: 1.5rem;
1374
+ --mistica-font-size-cardDescriptionDefault: 1rem;
1375
+ --mistica-line-height-cardDescriptionDefault: 1.5rem;
1307
1376
  --mistica-font-size-inputLabel: 0.875rem;
1308
1377
  --mistica-line-height-inputLabel: 1.25rem;
1309
1378
  --mistica-font-size-inputValue: 1.125rem;
package/css/esimflag.css CHANGED
@@ -46,8 +46,8 @@
46
46
  --mistica-esimflag-raw-blue55: 0, 78, 217;
47
47
  --mistica-esimflag-raw-darkModeBlack: 0, 0, 28;
48
48
  --mistica-esimflag-raw-black: 0, 9, 26;
49
- --mistica-esimflag-raw-purple55: 139, 58, 168;
50
49
  --mistica-esimflag-raw-white: 255, 255, 255;
50
+ --mistica-esimflag-raw-purple55: 139, 58, 168;
51
51
  --mistica-esimflag-raw-darkModeGrey: 8, 19, 43;
52
52
 
53
53
  /* Colors */
@@ -86,6 +86,14 @@
86
86
  --mistica-color-backgroundBrandBottom: var(--mistica-esimflag-purple);
87
87
  --mistica-color-appBarBackground: var(--mistica-esimflag-white);
88
88
  --mistica-color-navigationBarBackground: var(--mistica-esimflag-blue55);
89
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-esimflag-raw-blue55), 0.05);
90
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-esimflag-raw-blue55), 0.08);
91
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-esimflag-raw-blue55), 0.2);
92
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-esimflag-raw-blue55), 0.4);
93
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-esimflag-raw-white), 0.1);
94
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-esimflag-raw-white), 0.17);
95
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-esimflag-raw-blue55), 0.2);
96
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-esimflag-raw-blue55), 0.4);
89
97
  --mistica-color-skeletonWave: var(--mistica-esimflag-grey2);
90
98
  --mistica-color-borderLow: var(--mistica-esimflag-grey1);
91
99
  --mistica-color-border: var(--mistica-esimflag-grey3);
@@ -387,6 +395,9 @@
387
395
  --mistica-font-size-cardTitle: 1.25rem;
388
396
  --mistica-line-height-cardTitle: 1.5rem;
389
397
  --mistica-font-weight-cardTitle: 500;
398
+ --mistica-font-size-drawerTitle: 1.25rem;
399
+ --mistica-line-height-drawerTitle: 1.5rem;
400
+ --mistica-font-weight-drawerTitle: 700;
390
401
  --mistica-font-weight-rowTitle: 400;
391
402
  --mistica-font-weight-button: 500;
392
403
  --mistica-font-size-tabsLabel: 1rem;
@@ -410,6 +421,22 @@
410
421
  --mistica-font-size-chipLabel: 0.875rem;
411
422
  --mistica-line-height-chipLabel: 1.25rem;
412
423
  --mistica-font-weight-chipLabel: 500;
424
+ --mistica-font-size-cardPretitleSnap: 0.875rem;
425
+ --mistica-line-height-cardPretitleSnap: 1.25rem;
426
+ --mistica-font-size-cardTitleSnap: 0.875rem;
427
+ --mistica-line-height-cardTitleSnap: 1.25rem;
428
+ --mistica-font-size-cardSubtitleSnap: 0.875rem;
429
+ --mistica-line-height-cardSubtitleSnap: 1.25rem;
430
+ --mistica-font-size-cardDescriptionSnap: 0.875rem;
431
+ --mistica-line-height-cardDescriptionSnap: 1.25rem;
432
+ --mistica-font-size-cardPretitleDefault: 0.875rem;
433
+ --mistica-line-height-cardPretitleDefault: 1.25rem;
434
+ --mistica-font-size-cardTitleDefault: 1.125rem;
435
+ --mistica-line-height-cardTitleDefault: 1.5rem;
436
+ --mistica-font-size-cardSubtitleDefault: 0.875rem;
437
+ --mistica-line-height-cardSubtitleDefault: 1.25rem;
438
+ --mistica-font-size-cardDescriptionDefault: 0.875rem;
439
+ --mistica-line-height-cardDescriptionDefault: 1.25rem;
413
440
  --mistica-font-size-inputLabel: 0.75rem;
414
441
  --mistica-line-height-inputLabel: 1rem;
415
442
  --mistica-font-size-inputValue: 1rem;
@@ -449,6 +476,14 @@
449
476
  --mistica-color-appBarBackground: var(--mistica-esimflag-darkModeGrey);
450
477
  --mistica-color-navigationBarBackground: var(--mistica-esimflag-darkModeBlack);
451
478
  --mistica-color-skeletonWave: var(--mistica-esimflag-grey6);
479
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-esimflag-raw-white), 0.05);
480
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-esimflag-raw-white), 0.08);
481
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-esimflag-raw-white), 0.05);
482
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-esimflag-raw-white), 0.08);
483
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-esimflag-raw-white), 0.15);
484
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-esimflag-raw-white), 0.08);
485
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-esimflag-raw-white), 0.03);
486
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-esimflag-raw-white), 0.05);
452
487
  --mistica-color-borderLow: var(--mistica-esimflag-darkModeBlack);
453
488
  --mistica-color-border: var(--mistica-esimflag-darkModeGrey);
454
489
  --mistica-color-borderHigh: var(--mistica-esimflag-grey5);
@@ -733,6 +768,14 @@
733
768
  --mistica-color-appBarBackground: var(--mistica-esimflag-darkModeGrey);
734
769
  --mistica-color-navigationBarBackground: var(--mistica-esimflag-darkModeBlack);
735
770
  --mistica-color-skeletonWave: var(--mistica-esimflag-grey6);
771
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-esimflag-raw-white), 0.05);
772
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-esimflag-raw-white), 0.08);
773
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-esimflag-raw-white), 0.05);
774
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-esimflag-raw-white), 0.08);
775
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-esimflag-raw-white), 0.15);
776
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-esimflag-raw-white), 0.08);
777
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-esimflag-raw-white), 0.03);
778
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-esimflag-raw-white), 0.05);
736
779
  --mistica-color-borderLow: var(--mistica-esimflag-darkModeBlack);
737
780
  --mistica-color-border: var(--mistica-esimflag-darkModeGrey);
738
781
  --mistica-color-borderHigh: var(--mistica-esimflag-grey5);
@@ -1038,6 +1081,14 @@
1038
1081
  --mistica-color-appBarBackground: var(--mistica-esimflag-white);
1039
1082
  --mistica-color-navigationBarBackground: var(--mistica-esimflag-blue55);
1040
1083
  --mistica-color-skeletonWave: var(--mistica-esimflag-grey2);
1084
+ --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-esimflag-raw-blue55), 0.05);
1085
+ --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-esimflag-raw-blue55), 0.08);
1086
+ --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-esimflag-raw-blue55), 0.2);
1087
+ --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-esimflag-raw-blue55), 0.4);
1088
+ --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-esimflag-raw-white), 0.1);
1089
+ --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-esimflag-raw-white), 0.17);
1090
+ --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-esimflag-raw-blue55), 0.2);
1091
+ --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-esimflag-raw-blue55), 0.4);
1041
1092
  --mistica-color-borderLow: var(--mistica-esimflag-grey1);
1042
1093
  --mistica-color-border: var(--mistica-esimflag-grey3);
1043
1094
  --mistica-color-borderHigh: var(--mistica-esimflag-grey5);
@@ -1326,6 +1377,8 @@
1326
1377
  --mistica-line-height-10: 4.5rem;
1327
1378
  --mistica-font-size-cardTitle: 1.5rem;
1328
1379
  --mistica-line-height-cardTitle: 1.75rem;
1380
+ --mistica-font-size-drawerTitle: 1.75rem;
1381
+ --mistica-line-height-drawerTitle: 2rem;
1329
1382
 
1330
1383
  --mistica-font-size-tabsLabel: 1.125rem;
1331
1384
  --mistica-line-height-tabsLabel: 1.5rem;
@@ -1341,6 +1394,22 @@
1341
1394
 
1342
1395
  --mistica-font-size-chipLabel: 1rem;
1343
1396
  --mistica-line-height-chipLabel: 1.5rem;
1397
+ --mistica-font-size-cardPretitleSnap: 1rem;
1398
+ --mistica-line-height-cardPretitleSnap: 1.5rem;
1399
+ --mistica-font-size-cardTitleSnap: 1rem;
1400
+ --mistica-line-height-cardTitleSnap: 1.5rem;
1401
+ --mistica-font-size-cardSubtitleSnap: 1rem;
1402
+ --mistica-line-height-cardSubtitleSnap: 1.5rem;
1403
+ --mistica-font-size-cardDescriptionSnap: 1rem;
1404
+ --mistica-line-height-cardDescriptionSnap: 1.5rem;
1405
+ --mistica-font-size-cardPretitleDefault: 1rem;
1406
+ --mistica-line-height-cardPretitleDefault: 1.5rem;
1407
+ --mistica-font-size-cardTitleDefault: 1.25rem;
1408
+ --mistica-line-height-cardTitleDefault: 1.75rem;
1409
+ --mistica-font-size-cardSubtitleDefault: 1rem;
1410
+ --mistica-line-height-cardSubtitleDefault: 1.5rem;
1411
+ --mistica-font-size-cardDescriptionDefault: 1rem;
1412
+ --mistica-line-height-cardDescriptionDefault: 1.5rem;
1344
1413
  --mistica-font-size-inputLabel: 0.875rem;
1345
1414
  --mistica-line-height-inputLabel: 1.25rem;
1346
1415
  --mistica-font-size-inputValue: 1.125rem;