@ionic/core 8.8.9-dev.11781024903.1e4268e5 → 8.8.9-dev.11781098612.122c6758

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 (1124) hide show
  1. package/components/index.js +1 -1
  2. package/components/ion-accordion-group.js +1 -1
  3. package/components/ion-accordion.js +1 -1
  4. package/components/ion-action-sheet.js +1 -1
  5. package/components/ion-alert.js +1 -1
  6. package/components/ion-app.js +1 -1
  7. package/components/ion-avatar.js +1 -1
  8. package/components/ion-back-button.js +1 -1
  9. package/components/ion-backdrop.js +1 -1
  10. package/components/ion-badge.js +1 -1
  11. package/components/ion-breadcrumb.js +1 -1
  12. package/components/ion-breadcrumbs.js +1 -1
  13. package/components/ion-button.js +1 -1
  14. package/components/ion-buttons.js +1 -1
  15. package/components/ion-card-content.js +1 -1
  16. package/components/ion-card-header.js +1 -1
  17. package/components/ion-card-subtitle.js +1 -1
  18. package/components/ion-card-title.js +1 -1
  19. package/components/ion-card.js +1 -1
  20. package/components/ion-checkbox.js +1 -1
  21. package/components/ion-chip.js +1 -1
  22. package/components/ion-col.js +1 -1
  23. package/components/ion-content.js +1 -1
  24. package/components/ion-datetime-button.js +1 -1
  25. package/components/ion-datetime.js +1 -1
  26. package/components/ion-fab-button.js +1 -1
  27. package/components/ion-fab-list.js +1 -1
  28. package/components/ion-fab.js +1 -1
  29. package/components/ion-footer.js +1 -1
  30. package/components/ion-grid.js +1 -1
  31. package/components/ion-header.js +1 -1
  32. package/components/ion-icon.js +1 -1
  33. package/components/ion-img.js +1 -1
  34. package/components/ion-infinite-scroll-content.js +1 -1
  35. package/components/ion-infinite-scroll.js +1 -1
  36. package/components/ion-input-otp.js +1 -1
  37. package/components/ion-input-password-toggle.js +1 -1
  38. package/components/ion-input.js +1 -1
  39. package/components/ion-item-divider.js +1 -1
  40. package/components/ion-item-group.js +1 -1
  41. package/components/ion-item-option.js +1 -1
  42. package/components/ion-item-options.js +1 -1
  43. package/components/ion-item-sliding.js +1 -1
  44. package/components/ion-item.js +1 -1
  45. package/components/ion-label.js +1 -1
  46. package/components/ion-list-header.js +1 -1
  47. package/components/ion-list.js +1 -1
  48. package/components/ion-loading.js +1 -1
  49. package/components/ion-menu-button.js +1 -1
  50. package/components/ion-menu-toggle.js +1 -1
  51. package/components/ion-menu.js +1 -1
  52. package/components/ion-modal.js +1 -1
  53. package/components/ion-nav-link.js +1 -1
  54. package/components/ion-nav.js +1 -1
  55. package/components/ion-note.js +1 -1
  56. package/components/ion-picker-column-option.js +1 -1
  57. package/components/ion-picker-column.js +1 -1
  58. package/components/ion-picker.js +1 -1
  59. package/components/ion-popover.js +1 -1
  60. package/components/ion-progress-bar.js +1 -1
  61. package/components/ion-radio-group.js +1 -1
  62. package/components/ion-radio.js +1 -1
  63. package/components/ion-range.js +1 -1
  64. package/components/ion-refresher-content.js +1 -1
  65. package/components/ion-refresher.js +1 -1
  66. package/components/ion-reorder-group.js +1 -1
  67. package/components/ion-reorder.js +1 -1
  68. package/components/ion-ripple-effect.js +1 -1
  69. package/components/ion-route-redirect.js +1 -1
  70. package/components/ion-route.js +1 -1
  71. package/components/ion-router-link.js +1 -1
  72. package/components/ion-router-outlet.js +1 -1
  73. package/components/ion-router.js +1 -1
  74. package/components/ion-row.js +1 -1
  75. package/components/ion-searchbar.js +1 -1
  76. package/components/ion-segment-button.js +1 -1
  77. package/components/ion-segment-content.js +1 -1
  78. package/components/ion-segment-view.js +1 -1
  79. package/components/ion-segment.js +1 -1
  80. package/components/ion-select-modal.js +1 -1
  81. package/components/ion-select-option.js +1 -1
  82. package/components/ion-select-popover.js +1 -1
  83. package/components/ion-select.js +1 -1
  84. package/components/ion-skeleton-text.js +1 -1
  85. package/components/ion-spinner.js +1 -1
  86. package/components/ion-split-pane.js +1 -1
  87. package/components/ion-tab-bar.js +1 -1
  88. package/components/ion-tab-button.js +1 -1
  89. package/components/ion-tab.js +1 -1
  90. package/components/ion-tabs.js +1 -1
  91. package/components/ion-text.js +1 -1
  92. package/components/ion-textarea.js +1 -1
  93. package/components/ion-thumbnail.js +1 -1
  94. package/components/ion-title.js +1 -1
  95. package/components/ion-toast.js +1 -1
  96. package/components/ion-toggle.js +1 -1
  97. package/components/ion-toolbar.js +1 -1
  98. package/components/p--JUspHvy.js +4 -0
  99. package/components/p-B8U2xbtx.js +4 -0
  100. package/components/p-B9jFTlwE.js +4 -0
  101. package/components/{p-oF-CwZ0b.js → p-BAYYcg3o.js} +1 -1
  102. package/components/p-BTPfOxsU.js +4 -0
  103. package/{dist/ionic/p-B2-sg7NJ.js → components/p-BT_5jSqG.js} +1 -1
  104. package/components/p-Baq1XyAy.js +4 -0
  105. package/components/p-BhmadOit.js +4 -0
  106. package/components/p-BirPFsRD.js +4 -0
  107. package/components/p-BjfgFSSR.js +4 -0
  108. package/components/p-BmVRXR1y.js +4 -0
  109. package/components/p-BnqQlm7c.js +4 -0
  110. package/components/p-BpCi7xHq.js +4 -0
  111. package/components/p-Bz0dSlXZ.js +4 -0
  112. package/components/p-C1aScSTo.js +4 -0
  113. package/components/p-C4t5ymfq.js +4 -0
  114. package/components/p-CHqRYvYm.js +4 -0
  115. package/components/p-CHzfYZbv.js +4 -0
  116. package/components/p-CI3ncNZm.js +4 -0
  117. package/components/p-CIGNaXM1.js +4 -0
  118. package/components/p-CO7fmmxt.js +4 -0
  119. package/components/p-CSZf8_j0.js +4 -0
  120. package/components/p-C_xFdyXe.js +4 -0
  121. package/components/p-Ciz1-FuE.js +4 -0
  122. package/components/p-Ck2wcXbv.js +4 -0
  123. package/components/p-CmR5uXej.js +4 -0
  124. package/components/p-CtWGkNnJ.js +4 -0
  125. package/components/p-CtukzcyX.js +4 -0
  126. package/{dist/ionic/p-CuGhCBt7.js → components/p-D13Eaw-8.js} +1 -1
  127. package/components/{p-ByW0kK1F.js → p-D5Ubpm7D.js} +1 -1
  128. package/components/p-D6Ynv7Xh.js +4 -0
  129. package/components/p-D7bSXQD3.js +4 -0
  130. package/components/p-DEBD4LvH.js +4 -0
  131. package/components/p-DH50pr9O.js +4 -0
  132. package/components/p-DIE4pXMl.js +4 -0
  133. package/components/p-DJztqcrH.js +4 -0
  134. package/components/{p-DXehWlOr.js → p-DNQI6d-L.js} +1 -1
  135. package/components/p-DOFCbuQR.js +4 -0
  136. package/components/p-DhkITZ-y.js +4 -0
  137. package/components/p-DiVJyqlX.js +4 -0
  138. package/components/p-DmpBvltk.js +4 -0
  139. package/components/p-DnL1c9_X.js +4 -0
  140. package/components/p-DpV-p5Xs.js +4 -0
  141. package/components/{p-zWP0sUV_.js → p-DqLB8yFQ.js} +1 -1
  142. package/components/p-DqZAXv2t.js +4 -0
  143. package/components/p-Dz74mwlk.js +4 -0
  144. package/components/{p-BcbmT6b3.js → p-Sh0ICmPV.js} +1 -1
  145. package/components/p-W5nO8mX_.js +4 -0
  146. package/components/p-XJWMAP8m.js +4 -0
  147. package/components/p-ZjP4CjeZ.js +4 -0
  148. package/components/{p-re70ahxF.js → p-cyNmxje6.js} +1 -1
  149. package/components/p-djQLE88P.js +4 -0
  150. package/components/{p-wCDzv5Q8.js → p-ijF0iCrA.js} +1 -1
  151. package/components/p-j5IxBIan.js +4 -0
  152. package/components/p-k_E4tX5Z.js +4 -0
  153. package/components/p-lE_JGpHD.js +4 -0
  154. package/components/p-r0aq7dpt.js +4 -0
  155. package/components/p-ryqmO0B-.js +4 -0
  156. package/components/p-wk2QqrAo.js +4 -0
  157. package/css/core.css +1 -1
  158. package/css/core.css.map +1 -1
  159. package/css/display.css +1 -1
  160. package/css/display.css.map +1 -1
  161. package/css/flex-utils.css +1 -1
  162. package/css/flex-utils.css.map +1 -1
  163. package/css/float-elements.css.map +1 -1
  164. package/css/global.bundle.css.map +1 -1
  165. package/css/ionic-swiper.css +1 -1
  166. package/css/ionic-swiper.css.map +1 -1
  167. package/css/ionic.bundle.css +1 -1
  168. package/css/ionic.bundle.css.map +1 -1
  169. package/css/normalize.css.map +1 -1
  170. package/css/padding.css.map +1 -1
  171. package/css/palettes/dark.always.css.map +1 -1
  172. package/css/palettes/dark.class.css.map +1 -1
  173. package/css/palettes/dark.system.css.map +1 -1
  174. package/css/palettes/high-contrast-dark.always.css.map +1 -1
  175. package/css/palettes/high-contrast-dark.class.css.map +1 -1
  176. package/css/palettes/high-contrast-dark.system.css.map +1 -1
  177. package/css/palettes/high-contrast.always.css.map +1 -1
  178. package/css/palettes/high-contrast.class.css.map +1 -1
  179. package/css/palettes/high-contrast.system.css.map +1 -1
  180. package/css/structure.css.map +1 -1
  181. package/css/text-alignment.css.map +1 -1
  182. package/css/text-transformation.css.map +1 -1
  183. package/css/typography.css.map +1 -1
  184. package/css/utils.bundle.css +1 -1
  185. package/css/utils.bundle.css.map +1 -1
  186. package/dist/cjs/{animation-BZJ2wKuM.js → animation-BJq0kcy2.js} +3 -3
  187. package/dist/cjs/{app-globals-C-d5fQ35.js → app-globals-BlqrqKTN.js} +1 -1
  188. package/dist/cjs/{button-active-B_20Nxkv.js → button-active-0mPOKmV2.js} +2 -2
  189. package/dist/cjs/{capacitor-CXqhdZym.js → capacitor-DmA66EwP.js} +3 -3
  190. package/dist/cjs/config-xninhj0J.js +201 -0
  191. package/dist/cjs/{data-DuOuKG7I.js → data-DLTUw-KF.js} +6 -6
  192. package/dist/{esm/focus-visible-vXpMhGrs.js → cjs/focus-visible-CCvKiLh3.js} +3 -23
  193. package/dist/cjs/{framework-delegate-Dx9FrqAC.js → framework-delegate-BtICZDHr.js} +2 -4
  194. package/dist/cjs/{haptic-CQJGW58i.js → haptic-ClPPQ_PS.js} +1 -1
  195. package/dist/cjs/hardware-back-button-iUuF_76h.js +121 -0
  196. package/dist/cjs/{helpers-DJYxKN5U.js → helpers-Cv23MFHM.js} +4 -57
  197. package/dist/cjs/{index-DSNlrgfO.js → index-BERfRao3.js} +4 -4
  198. package/dist/cjs/{index-BJrpF9T3.js → index-CIrkNXqJ.js} +2 -2
  199. package/dist/cjs/{index-CzcLEdQ5.js → index-Ct7gcRif.js} +71 -64
  200. package/dist/cjs/{index-CwxYd6UD.js → index-D81eLYUM.js} +8 -9
  201. package/dist/cjs/index-DkNv4J_i.js +10 -0
  202. package/dist/cjs/{index-CgAbCW6L.js → index-DqmRDbxg.js} +0 -2
  203. package/dist/cjs/{index-BekUBS8C.js → index-aC4x3Fk3.js} +15 -15
  204. package/dist/cjs/index.cjs.js +16 -17
  205. package/dist/cjs/{input-shims-VyZciSxi.js → input-shims-CFLg7uzj.js} +17 -18
  206. package/dist/cjs/{input.utils-Ct5KzpYv.js → input.utils-DetjmtH2.js} +5 -5
  207. package/dist/cjs/ion-accordion_2.cjs.entry.js +29 -61
  208. package/dist/cjs/ion-action-sheet.cjs.entry.js +26 -41
  209. package/dist/cjs/ion-alert.cjs.entry.js +45 -78
  210. package/dist/cjs/ion-app_8.cjs.entry.js +175 -296
  211. package/dist/cjs/ion-avatar_3.cjs.entry.js +13 -125
  212. package/dist/cjs/ion-back-button.cjs.entry.js +22 -31
  213. package/dist/cjs/ion-backdrop.cjs.entry.js +7 -10
  214. package/dist/cjs/ion-breadcrumb_2.cjs.entry.js +18 -54
  215. package/dist/cjs/ion-button_2.cjs.entry.js +22 -59
  216. package/dist/cjs/ion-card_5.cjs.entry.js +33 -55
  217. package/dist/cjs/ion-checkbox.cjs.entry.js +16 -34
  218. package/dist/cjs/ion-chip.cjs.entry.js +9 -50
  219. package/dist/cjs/ion-col_3.cjs.entry.js +57 -56
  220. package/dist/cjs/ion-datetime-button.cjs.entry.js +9 -13
  221. package/dist/cjs/{ion-datetime_3.cjs.entry.js → ion-datetime.cjs.entry.js} +29 -742
  222. package/dist/cjs/ion-fab_3.cjs.entry.js +28 -44
  223. package/dist/cjs/ion-img.cjs.entry.js +4 -8
  224. package/dist/cjs/ion-infinite-scroll_2.cjs.entry.js +17 -93
  225. package/dist/cjs/ion-input-otp.cjs.entry.js +9 -74
  226. package/dist/cjs/ion-input-password-toggle.cjs.entry.js +15 -53
  227. package/dist/cjs/ion-input.cjs.entry.js +35 -125
  228. package/dist/cjs/ion-item-option_3.cjs.entry.js +52 -467
  229. package/dist/cjs/ion-item_8.cjs.entry.js +49 -115
  230. package/dist/cjs/ion-loading.cjs.entry.js +23 -22
  231. package/dist/cjs/ion-menu_3.cjs.entry.js +29 -47
  232. package/dist/cjs/ion-modal.cjs.entry.js +145 -262
  233. package/dist/cjs/ion-nav_2.cjs.entry.js +11 -14
  234. package/dist/cjs/ion-picker-column-option.cjs.entry.js +8 -12
  235. package/dist/cjs/ion-picker-column.cjs.entry.js +14 -14
  236. package/dist/cjs/ion-picker.cjs.entry.js +6 -10
  237. package/dist/cjs/ion-popover.cjs.entry.js +23 -21
  238. package/dist/cjs/ion-progress-bar.cjs.entry.js +9 -27
  239. package/dist/cjs/ion-radio_2.cjs.entry.js +17 -35
  240. package/dist/cjs/ion-range.cjs.entry.js +13 -20
  241. package/dist/cjs/ion-refresher_2.cjs.entry.js +23 -42
  242. package/dist/cjs/ion-reorder_2.cjs.entry.js +15 -39
  243. package/dist/cjs/ion-ripple-effect.cjs.entry.js +7 -15
  244. package/dist/cjs/ion-route_4.cjs.entry.js +9 -10
  245. package/dist/cjs/ion-searchbar.cjs.entry.js +25 -138
  246. package/dist/cjs/ion-segment-content.cjs.entry.js +2 -2
  247. package/dist/cjs/ion-segment-view.cjs.entry.js +3 -13
  248. package/dist/cjs/ion-segment_2.cjs.entry.js +16 -23
  249. package/dist/cjs/ion-select-modal.cjs.entry.js +38 -115
  250. package/dist/cjs/ion-select_3.cjs.entry.js +113 -510
  251. package/dist/cjs/ion-spinner.cjs.entry.js +8 -30
  252. package/dist/cjs/ion-split-pane.cjs.entry.js +9 -13
  253. package/dist/cjs/ion-tab-bar_2.cjs.entry.js +23 -147
  254. package/dist/cjs/ion-tab_2.cjs.entry.js +7 -8
  255. package/dist/cjs/ion-text.cjs.entry.js +7 -7
  256. package/dist/cjs/ion-textarea.cjs.entry.js +23 -137
  257. package/dist/cjs/ion-toast.cjs.entry.js +47 -71
  258. package/dist/cjs/ion-toggle.cjs.entry.js +27 -84
  259. package/dist/cjs/ionic-global-B-cA6LkY.js +151 -0
  260. package/dist/cjs/ionic.cjs.js +5 -5
  261. package/dist/cjs/{ios.transition-CyNNpj1i.js → ios.transition-BOSWOaiK.js} +5 -7
  262. package/dist/cjs/{keyboard-VLGMzWBE.js → keyboard-UuAS4D_9.js} +1 -1
  263. package/dist/cjs/{keyboard-controller-CCTvHp9l.js → keyboard-controller-GXBiBRKS.js} +9 -11
  264. package/dist/cjs/{keyboard-CA6RtoWx.js → keyboard-hHzlEQpk.js} +3 -4
  265. package/dist/cjs/loader.cjs.js +4 -4
  266. package/dist/cjs/{md.transition-BEfrfWKW.js → md.transition-B8-wBZqt.js} +5 -6
  267. package/dist/cjs/{notch-controller-BTZCPOsd.js → notch-controller-18PzRGXd.js} +4 -4
  268. package/dist/cjs/{overlays-BuMIwR8B.js → overlays-DSmSrd_4.js} +42 -117
  269. package/dist/cjs/{status-tap-CTY2dMsZ.js → status-tap-BXX8H8_Y.js} +3 -4
  270. package/dist/cjs/{swipe-back-jJFi5KCB.js → swipe-back-C0GCB18x.js} +2 -3
  271. package/dist/cjs/{theme-IlOsGAz7.js → theme-CeDs6Hcv.js} +1 -25
  272. package/dist/cjs/validity-BpS37YFM.js +19 -0
  273. package/dist/collection/collection-manifest.json +4 -14
  274. package/dist/collection/components/accordion/accordion.ios.css +58 -73
  275. package/dist/collection/components/accordion/accordion.js +27 -41
  276. package/dist/collection/components/accordion/accordion.md.css +59 -67
  277. package/dist/collection/components/accordion-group/accordion-group.ios.css +4 -16
  278. package/dist/collection/components/accordion-group/accordion-group.js +8 -44
  279. package/dist/collection/components/accordion-group/accordion-group.md.css +4 -22
  280. package/dist/collection/components/action-sheet/action-sheet.ios.css +11 -368
  281. package/dist/collection/components/action-sheet/action-sheet.js +18 -33
  282. package/dist/collection/components/action-sheet/action-sheet.md.css +10 -307
  283. package/dist/collection/components/alert/alert.ios.css +19 -482
  284. package/dist/collection/components/alert/alert.js +35 -68
  285. package/dist/collection/components/alert/alert.md.css +29 -465
  286. package/dist/collection/components/app/app.js +83 -15
  287. package/dist/collection/components/avatar/avatar.ios.css +33 -7
  288. package/dist/collection/components/avatar/avatar.js +4 -120
  289. package/dist/collection/components/avatar/avatar.md.css +0 -51
  290. package/dist/collection/components/back-button/back-button.ios.css +48 -60
  291. package/dist/collection/components/back-button/back-button.js +19 -27
  292. package/dist/collection/components/back-button/back-button.md.css +48 -60
  293. package/dist/collection/components/backdrop/backdrop.ios.css +19 -56
  294. package/dist/collection/components/backdrop/backdrop.js +6 -12
  295. package/dist/collection/components/backdrop/backdrop.md.css +19 -56
  296. package/dist/collection/components/badge/badge.ios.css +12 -139
  297. package/dist/collection/components/badge/badge.js +9 -145
  298. package/dist/collection/components/badge/badge.md.css +12 -123
  299. package/dist/collection/components/breadcrumb/breadcrumb.ios.css +8 -20
  300. package/dist/collection/components/breadcrumb/breadcrumb.js +11 -43
  301. package/dist/collection/components/breadcrumb/breadcrumb.md.css +8 -20
  302. package/dist/collection/components/breadcrumbs/breadcrumbs.ios.css +0 -6
  303. package/dist/collection/components/breadcrumbs/breadcrumbs.js +9 -11
  304. package/dist/collection/components/breadcrumbs/breadcrumbs.md.css +0 -6
  305. package/dist/collection/components/button/button.ios.css +46 -154
  306. package/dist/collection/components/button/button.js +27 -63
  307. package/dist/collection/components/button/button.md.css +50 -150
  308. package/dist/collection/components/buttons/buttons.ios.css +7 -59
  309. package/dist/collection/components/buttons/buttons.js +9 -15
  310. package/dist/collection/components/buttons/buttons.md.css +3 -55
  311. package/dist/collection/components/card/card.ios.css +14 -65
  312. package/dist/collection/components/card/card.js +10 -41
  313. package/dist/collection/components/card/card.md.css +14 -65
  314. package/dist/collection/components/card-content/card-content.ios.css +35 -20
  315. package/dist/collection/components/card-content/card-content.js +10 -12
  316. package/dist/collection/components/card-content/card-content.md.css +35 -20
  317. package/dist/collection/components/card-header/card-header.ios.css +15 -27
  318. package/dist/collection/components/card-header/card-header.js +10 -13
  319. package/dist/collection/components/card-header/card-header.md.css +15 -27
  320. package/dist/collection/components/card-subtitle/card-subtitle.ios.css +0 -12
  321. package/dist/collection/components/card-subtitle/card-subtitle.js +8 -11
  322. package/dist/collection/components/card-subtitle/card-subtitle.md.css +0 -12
  323. package/dist/collection/components/card-title/card-title.ios.css +0 -73
  324. package/dist/collection/components/card-title/card-title.js +8 -11
  325. package/dist/collection/components/card-title/card-title.md.css +0 -73
  326. package/dist/collection/components/checkbox/checkbox.ios.css +101 -161
  327. package/dist/collection/components/checkbox/checkbox.js +14 -70
  328. package/dist/collection/components/checkbox/checkbox.md.css +102 -162
  329. package/dist/collection/components/chip/chip.ios.css +14 -67
  330. package/dist/collection/components/chip/chip.js +8 -108
  331. package/dist/collection/components/chip/chip.md.css +14 -67
  332. package/dist/collection/components/col/col.css +4 -192
  333. package/dist/collection/components/col/col.js +61 -211
  334. package/dist/collection/components/content/content.css +2 -8
  335. package/dist/collection/components/content/content.js +11 -16
  336. package/dist/collection/components/datetime/datetime.ios.css +106 -302
  337. package/dist/collection/components/datetime/datetime.js +20 -98
  338. package/dist/collection/components/datetime/datetime.md.css +96 -293
  339. package/dist/collection/components/datetime/utils/data.js +5 -5
  340. package/dist/collection/components/datetime-button/datetime-button.ios.css +0 -6
  341. package/dist/collection/components/datetime-button/datetime-button.js +8 -11
  342. package/dist/collection/components/datetime-button/datetime-button.md.css +0 -6
  343. package/dist/collection/components/fab/fab.css +1 -25
  344. package/dist/collection/components/fab/fab.js +5 -9
  345. package/dist/collection/components/fab-button/fab-button.ios.css +6 -18
  346. package/dist/collection/components/fab-button/fab-button.js +21 -36
  347. package/dist/collection/components/fab-button/fab-button.md.css +8 -20
  348. package/dist/collection/components/fab-list/fab-list.css +0 -12
  349. package/dist/collection/components/fab-list/fab-list.js +5 -9
  350. package/dist/collection/components/footer/footer.ios.css +2 -14
  351. package/dist/collection/components/footer/footer.js +16 -21
  352. package/dist/collection/components/footer/footer.md.css +0 -12
  353. package/dist/collection/components/grid/grid.css +0 -12
  354. package/dist/collection/components/grid/grid.js +5 -9
  355. package/dist/collection/components/header/header.ios.css +10 -25
  356. package/dist/collection/components/header/header.js +19 -50
  357. package/dist/collection/components/header/header.md.css +8 -23
  358. package/dist/collection/components/header/header.utils.js +5 -5
  359. package/dist/collection/components/img/img.js +2 -8
  360. package/dist/collection/components/infinite-scroll/infinite-scroll.js +5 -100
  361. package/dist/collection/components/infinite-scroll-content/infinite-scroll-content.ios.css +0 -12
  362. package/dist/collection/components/infinite-scroll-content/infinite-scroll-content.js +10 -16
  363. package/dist/collection/components/infinite-scroll-content/infinite-scroll-content.md.css +0 -12
  364. package/dist/collection/components/input/input.ios.css +135 -223
  365. package/dist/collection/components/input/input.js +42 -153
  366. package/dist/collection/components/input/input.md.css +207 -193
  367. package/dist/collection/components/input-otp/input-otp.ios.css +60 -105
  368. package/dist/collection/components/input-otp/input-otp.js +6 -73
  369. package/dist/collection/components/input-otp/input-otp.md.css +60 -105
  370. package/dist/collection/components/input-password-toggle/input-password-toggle.js +12 -48
  371. package/dist/collection/components/item/item.ios.css +69 -109
  372. package/dist/collection/components/item/item.js +20 -50
  373. package/dist/collection/components/item/item.md.css +68 -120
  374. package/dist/collection/components/item-divider/item-divider.ios.css +0 -18
  375. package/dist/collection/components/item-divider/item-divider.js +8 -11
  376. package/dist/collection/components/item-divider/item-divider.md.css +0 -18
  377. package/dist/collection/components/item-group/item-group.ios.css +0 -12
  378. package/dist/collection/components/item-group/item-group.js +7 -13
  379. package/dist/collection/components/item-group/item-group.md.css +0 -12
  380. package/dist/collection/components/item-option/item-option.ios.css +29 -136
  381. package/dist/collection/components/item-option/item-option.js +9 -73
  382. package/dist/collection/components/item-option/item-option.md.css +29 -136
  383. package/dist/collection/components/item-options/item-options.ios.css +34 -77
  384. package/dist/collection/components/item-options/item-options.js +7 -13
  385. package/dist/collection/components/item-options/item-options.md.css +34 -77
  386. package/dist/collection/components/item-sliding/{item-sliding.native.css → item-sliding.css} +9 -84
  387. package/dist/collection/components/item-sliding/item-sliding.js +35 -421
  388. package/dist/collection/components/item-sliding/test/test.utils.js +0 -13
  389. package/dist/collection/components/label/label.ios.css +0 -18
  390. package/dist/collection/components/label/label.js +8 -11
  391. package/dist/collection/components/label/label.md.css +0 -18
  392. package/dist/collection/components/list/list.ios.css +14 -54
  393. package/dist/collection/components/list/list.js +9 -48
  394. package/dist/collection/components/list/list.md.css +16 -56
  395. package/dist/collection/components/list-header/list-header.ios.css +38 -82
  396. package/dist/collection/components/list-header/list-header.js +8 -11
  397. package/dist/collection/components/list-header/list-header.md.css +38 -82
  398. package/dist/collection/components/loading/loading.ios.css +1 -13
  399. package/dist/collection/components/loading/loading.js +16 -15
  400. package/dist/collection/components/loading/loading.md.css +1 -13
  401. package/dist/collection/components/menu/menu.ios.css +3 -15
  402. package/dist/collection/components/menu/menu.js +7 -12
  403. package/dist/collection/components/menu/menu.md.css +3 -15
  404. package/dist/collection/components/menu-button/menu-button.ios.css +14 -48
  405. package/dist/collection/components/menu-button/menu-button.js +10 -26
  406. package/dist/collection/components/menu-button/menu-button.md.css +15 -49
  407. package/dist/collection/components/menu-toggle/menu-toggle.js +5 -8
  408. package/dist/collection/components/modal/animations/sheet.js +2 -8
  409. package/dist/collection/components/modal/gestures/sheet.js +10 -76
  410. package/dist/collection/components/modal/modal.ios.css +70 -178
  411. package/dist/collection/components/modal/modal.js +20 -51
  412. package/dist/collection/components/modal/modal.md.css +70 -178
  413. package/dist/collection/components/nav/nav.css +1 -7
  414. package/dist/collection/components/nav/nav.js +5 -11
  415. package/dist/collection/components/nav-link/nav-link.js +1 -5
  416. package/dist/collection/components/note/note.ios.css +0 -12
  417. package/dist/collection/components/note/note.js +8 -11
  418. package/dist/collection/components/note/note.md.css +0 -12
  419. package/dist/collection/components/picker/picker.ios.css +3 -15
  420. package/dist/collection/components/picker/picker.js +5 -8
  421. package/dist/collection/components/picker/picker.md.css +3 -15
  422. package/dist/collection/components/picker-column/picker-column.css +2 -9
  423. package/dist/collection/components/picker-column/picker-column.js +7 -8
  424. package/dist/collection/components/picker-column-option/picker-column-option.ios.css +0 -6
  425. package/dist/collection/components/picker-column-option/picker-column-option.js +7 -13
  426. package/dist/collection/components/picker-column-option/picker-column-option.md.css +0 -6
  427. package/dist/collection/components/popover/popover.ios.css +1 -29
  428. package/dist/collection/components/popover/popover.js +20 -19
  429. package/dist/collection/components/popover/popover.md.css +1 -29
  430. package/dist/collection/components/progress-bar/progress-bar.ios.css +17 -48
  431. package/dist/collection/components/progress-bar/progress-bar.js +7 -43
  432. package/dist/collection/components/progress-bar/progress-bar.md.css +17 -48
  433. package/dist/collection/components/radio/radio.ios.css +91 -134
  434. package/dist/collection/components/radio/radio.js +10 -15
  435. package/dist/collection/components/radio/radio.md.css +91 -134
  436. package/dist/collection/components/radio-group/radio-group.ios.css +19 -43
  437. package/dist/collection/components/radio-group/radio-group.js +7 -48
  438. package/dist/collection/components/radio-group/radio-group.md.css +19 -43
  439. package/dist/collection/components/range/range.ios.css +85 -128
  440. package/dist/collection/components/range/range.js +10 -16
  441. package/dist/collection/components/range/range.md.css +85 -128
  442. package/dist/collection/components/refresher/refresher.ios.css +1 -14
  443. package/dist/collection/components/refresher/refresher.js +8 -11
  444. package/dist/collection/components/refresher/refresher.md.css +2 -15
  445. package/dist/collection/components/refresher-content/refresher-content.js +7 -28
  446. package/dist/collection/components/reorder/reorder.ios.css +0 -6
  447. package/dist/collection/components/reorder/reorder.js +6 -33
  448. package/dist/collection/components/reorder/reorder.md.css +0 -6
  449. package/dist/collection/components/reorder-group/reorder-group.css +0 -6
  450. package/dist/collection/components/reorder-group/reorder-group.js +4 -8
  451. package/dist/collection/components/ripple-effect/{ripple-effect.common.css → ripple-effect.css} +1 -7
  452. package/dist/collection/components/ripple-effect/ripple-effect.js +6 -14
  453. package/dist/collection/components/route/route.js +0 -4
  454. package/dist/collection/components/router/router.js +0 -4
  455. package/dist/collection/components/router-link/router-link.css +2 -8
  456. package/dist/collection/components/router-link/router-link.js +5 -9
  457. package/dist/collection/components/router-outlet/router-outlet.css +1 -7
  458. package/dist/collection/components/router-outlet/router-outlet.js +40 -10
  459. package/dist/collection/components/row/row.css +0 -16
  460. package/dist/collection/components/row/row.js +2 -9
  461. package/dist/collection/components/searchbar/searchbar.ios.css +18 -56
  462. package/dist/collection/components/searchbar/searchbar.js +38 -185
  463. package/dist/collection/components/searchbar/searchbar.md.css +18 -56
  464. package/dist/collection/components/segment/segment.ios.css +2 -45
  465. package/dist/collection/components/segment/segment.js +8 -11
  466. package/dist/collection/components/segment/segment.md.css +2 -45
  467. package/dist/collection/components/segment-button/segment-button.ios.css +105 -146
  468. package/dist/collection/components/segment-button/segment-button.js +8 -11
  469. package/dist/collection/components/segment-button/segment-button.md.css +107 -148
  470. package/dist/collection/components/segment-content/segment-content.js +1 -1
  471. package/dist/collection/components/segment-view/segment-view.ios.css +0 -6
  472. package/dist/collection/components/segment-view/segment-view.js +4 -13
  473. package/dist/collection/components/segment-view/segment-view.md.css +0 -6
  474. package/dist/collection/components/select/select.ios.css +176 -348
  475. package/dist/collection/components/select/select.js +97 -474
  476. package/dist/collection/components/select/select.md.css +178 -364
  477. package/dist/collection/components/select-modal/select-modal.ios.css +0 -467
  478. package/dist/collection/components/select-modal/select-modal.js +30 -127
  479. package/dist/collection/components/select-modal/select-modal.md.css +0 -395
  480. package/dist/collection/components/select-option/select-option.js +2 -70
  481. package/dist/collection/components/select-popover/select-popover.ios.css +20 -303
  482. package/dist/collection/components/select-popover/select-popover.js +29 -89
  483. package/dist/collection/components/select-popover/select-popover.md.css +0 -346
  484. package/dist/collection/components/skeleton-text/skeleton-text.css +0 -6
  485. package/dist/collection/components/skeleton-text/skeleton-text.js +5 -9
  486. package/dist/collection/components/spinner/{spinner.ionic.css → spinner.css} +10 -78
  487. package/dist/collection/components/spinner/spinner.js +6 -47
  488. package/dist/collection/components/split-pane/split-pane.ios.css +2 -20
  489. package/dist/collection/components/split-pane/split-pane.js +9 -16
  490. package/dist/collection/components/split-pane/split-pane.md.css +2 -20
  491. package/dist/collection/components/tab/tab.js +2 -6
  492. package/dist/collection/components/tab-bar/tab-bar.ios.css +43 -71
  493. package/dist/collection/components/tab-bar/tab-bar.js +13 -171
  494. package/dist/collection/components/tab-bar/tab-bar.md.css +43 -71
  495. package/dist/collection/components/tab-button/tab-button.ios.css +95 -171
  496. package/dist/collection/components/tab-button/tab-button.js +9 -54
  497. package/dist/collection/components/tab-button/tab-button.md.css +93 -137
  498. package/dist/collection/components/tabs/tabs.css +1 -7
  499. package/dist/collection/components/tabs/tabs.js +1 -4
  500. package/dist/collection/components/text/text.css +0 -6
  501. package/dist/collection/components/text/text.js +6 -7
  502. package/dist/collection/components/textarea/textarea.ios.css +158 -298
  503. package/dist/collection/components/textarea/textarea.js +24 -162
  504. package/dist/collection/components/textarea/textarea.md.css +159 -312
  505. package/dist/collection/components/thumbnail/thumbnail.css +0 -6
  506. package/dist/collection/components/thumbnail/thumbnail.js +2 -9
  507. package/dist/collection/components/title/title.ios.css +4 -32
  508. package/dist/collection/components/title/title.js +7 -13
  509. package/dist/collection/components/title/title.md.css +4 -32
  510. package/dist/collection/components/toast/animations/utils.js +1 -1
  511. package/dist/collection/components/toast/toast.ios.css +45 -84
  512. package/dist/collection/components/toast/toast.js +13 -76
  513. package/dist/collection/components/toast/toast.md.css +45 -84
  514. package/dist/collection/components/toggle/toggle.ios.css +131 -247
  515. package/dist/collection/components/toggle/toggle.js +18 -73
  516. package/dist/collection/components/toggle/toggle.md.css +131 -244
  517. package/dist/collection/components/toolbar/toolbar.ios.css +47 -90
  518. package/dist/collection/components/toolbar/toolbar.js +13 -218
  519. package/dist/collection/components/toolbar/toolbar.md.css +47 -90
  520. package/dist/collection/global/ionic-global.js +13 -241
  521. package/dist/collection/index.js +1 -1
  522. package/dist/collection/utils/focus-trap.js +2 -13
  523. package/dist/collection/utils/focus-visible.js +0 -22
  524. package/dist/collection/utils/forms/validity.js +0 -31
  525. package/dist/collection/utils/framework-delegate.js +1 -3
  526. package/dist/collection/utils/hardware-back-button.js +0 -15
  527. package/dist/collection/utils/helpers.js +3 -57
  528. package/dist/collection/utils/keyboard/keyboard-controller.js +1 -3
  529. package/dist/collection/utils/media.js +0 -1
  530. package/dist/collection/utils/menu-controller/animations/overlay.js +3 -3
  531. package/dist/collection/utils/menu-controller/animations/push.js +1 -2
  532. package/dist/collection/utils/menu-controller/animations/reveal.js +1 -2
  533. package/dist/collection/utils/overlays.js +31 -97
  534. package/dist/collection/utils/sanitization/index.js +14 -255
  535. package/dist/collection/utils/test/playwright/drag-element.js +9 -32
  536. package/dist/collection/utils/test/playwright/generator.js +23 -48
  537. package/dist/collection/utils/test/playwright/page/utils/goto.js +5 -14
  538. package/dist/collection/utils/test/playwright/page/utils/set-content.js +3 -26
  539. package/dist/collection/utils/theme.js +1 -25
  540. package/dist/collection/utils/transition/ios.transition.js +0 -1
  541. package/dist/docs.json +589 -10120
  542. package/dist/esm/{animation-Cd1EA2ar.js → animation-DLJpuoEz.js} +2 -2
  543. package/dist/esm/{app-globals-9x_U7ofY.js → app-globals-D0C5S4hU.js} +1 -1
  544. package/dist/esm/{button-active-B016u5N-.js → button-active-BSpTQmS9.js} +2 -2
  545. package/dist/esm/{capacitor-13SFuT1K.js → capacitor-CFERIeaU.js} +1 -1
  546. package/dist/esm/config-DQCONYYp.js +195 -0
  547. package/dist/esm/{data-BNKYavC3.js → data-DZI70dKr.js} +6 -6
  548. package/dist/{cjs/focus-visible-BIj-I3-C.js → esm/focus-visible-BmVRXR1y.js} +1 -27
  549. package/dist/esm/{framework-delegate-CjVwn_KZ.js → framework-delegate-FnPGymXL.js} +2 -4
  550. package/dist/esm/{haptic-CbnKC3go.js → haptic-DzAMWJuk.js} +1 -1
  551. package/dist/esm/hardware-back-button-B93Gru0Y.js +115 -0
  552. package/dist/esm/{helpers-Do7zwvM1.js → helpers-HEqiOzXb.js} +5 -58
  553. package/dist/esm/{index-D2tu5BUg.js → index-AlrZKoWR.js} +1 -2
  554. package/dist/esm/{index-D3WueHpT.js → index-BRHzoo00.js} +3 -4
  555. package/dist/esm/{index-B2VWavcK.js → index-B_dQk_WE.js} +4 -4
  556. package/dist/esm/{index-BmkLokUL.js → index-MEDq2S8l.js} +2 -2
  557. package/dist/esm/{index-BWMvrRiE.js → index-Q6UPU0Ay.js} +11 -11
  558. package/dist/esm/index-ZjP4CjeZ.js +7 -0
  559. package/dist/esm/{index-Omi_TcwW.js → index-tcQvqkiX.js} +71 -64
  560. package/dist/esm/index.js +14 -14
  561. package/dist/esm/{input-shims-DU23z7Hg.js → input-shims-D10mwcw1.js} +6 -7
  562. package/dist/esm/{input.utils-C64RbLd_.js → input.utils-Y6NgW8bw.js} +3 -3
  563. package/dist/esm/ion-accordion_2.entry.js +29 -61
  564. package/dist/esm/ion-action-sheet.entry.js +26 -41
  565. package/dist/esm/ion-alert.entry.js +44 -77
  566. package/dist/esm/ion-app_8.entry.js +175 -296
  567. package/dist/esm/ion-avatar_3.entry.js +13 -125
  568. package/dist/esm/ion-back-button.entry.js +22 -31
  569. package/dist/esm/ion-backdrop.entry.js +7 -10
  570. package/dist/esm/ion-breadcrumb_2.entry.js +18 -54
  571. package/dist/esm/ion-button_2.entry.js +22 -59
  572. package/dist/esm/ion-card_5.entry.js +33 -55
  573. package/dist/esm/ion-checkbox.entry.js +16 -34
  574. package/dist/esm/ion-chip.entry.js +9 -50
  575. package/dist/esm/ion-col_3.entry.js +57 -56
  576. package/dist/esm/ion-datetime-button.entry.js +9 -13
  577. package/dist/esm/{ion-datetime_3.entry.js → ion-datetime.entry.js} +30 -741
  578. package/dist/esm/ion-fab_3.entry.js +28 -44
  579. package/dist/esm/ion-img.entry.js +4 -8
  580. package/dist/esm/ion-infinite-scroll_2.entry.js +16 -92
  581. package/dist/esm/ion-input-otp.entry.js +9 -74
  582. package/dist/esm/ion-input-password-toggle.entry.js +15 -53
  583. package/dist/esm/ion-input.entry.js +35 -125
  584. package/dist/esm/ion-item-option_3.entry.js +52 -467
  585. package/dist/esm/ion-item_8.entry.js +49 -115
  586. package/dist/esm/ion-loading.entry.js +22 -21
  587. package/dist/esm/ion-menu_3.entry.js +29 -47
  588. package/dist/esm/ion-modal.entry.js +98 -215
  589. package/dist/esm/ion-nav_2.entry.js +11 -14
  590. package/dist/esm/ion-picker-column-option.entry.js +8 -12
  591. package/dist/esm/ion-picker-column.entry.js +13 -13
  592. package/dist/esm/ion-picker.entry.js +6 -10
  593. package/dist/esm/ion-popover.entry.js +23 -21
  594. package/dist/esm/ion-progress-bar.entry.js +9 -27
  595. package/dist/esm/ion-radio_2.entry.js +17 -35
  596. package/dist/esm/ion-range.entry.js +13 -20
  597. package/dist/esm/ion-refresher_2.entry.js +21 -40
  598. package/dist/esm/ion-reorder_2.entry.js +15 -39
  599. package/dist/esm/ion-ripple-effect.entry.js +7 -15
  600. package/dist/esm/ion-route_4.entry.js +9 -10
  601. package/dist/esm/ion-searchbar.entry.js +25 -138
  602. package/dist/esm/ion-segment-content.entry.js +2 -2
  603. package/dist/esm/ion-segment-view.entry.js +3 -13
  604. package/dist/esm/ion-segment_2.entry.js +16 -23
  605. package/dist/esm/ion-select-modal.entry.js +38 -115
  606. package/dist/esm/ion-select_3.entry.js +114 -511
  607. package/dist/esm/ion-spinner.entry.js +8 -30
  608. package/dist/esm/ion-split-pane.entry.js +9 -13
  609. package/dist/esm/ion-tab-bar_2.entry.js +23 -147
  610. package/dist/esm/ion-tab_2.entry.js +7 -8
  611. package/dist/esm/ion-text.entry.js +7 -7
  612. package/dist/esm/ion-textarea.entry.js +23 -137
  613. package/dist/esm/ion-toast.entry.js +22 -46
  614. package/dist/esm/ion-toggle.entry.js +27 -84
  615. package/dist/esm/ionic-global-Cp_eT4sZ.js +146 -0
  616. package/dist/esm/ionic.js +6 -6
  617. package/dist/esm/{ios.transition-DoQTN5Jk.js → ios.transition-ClFrsIrS.js} +5 -7
  618. package/dist/esm/{keyboard-Dnno7-Ci.js → keyboard-CUw4ekVy.js} +1 -1
  619. package/dist/esm/{keyboard-controller-BpOdk6xN.js → keyboard-controller-BaaVITYt.js} +3 -5
  620. package/dist/esm/{keyboard-Ca1zVCcH.js → keyboard-ywgs5efA.js} +3 -4
  621. package/dist/esm/loader.js +5 -5
  622. package/dist/esm/{md.transition-DZydrWwq.js → md.transition-D0msQmzI.js} +5 -6
  623. package/dist/esm/{notch-controller-klgNWpjJ.js → notch-controller-DKDjU_O7.js} +2 -2
  624. package/dist/esm/{overlays-CpQ6Df2g.js → overlays-DLNOHWNc.js} +39 -114
  625. package/dist/esm/{status-tap-fYFdZg6z.js → status-tap-Kan2W7sh.js} +3 -4
  626. package/dist/esm/{swipe-back-BzGqTrrq.js → swipe-back-DQ1q5MgD.js} +2 -3
  627. package/dist/esm/{theme-DaJxRxSQ.js → theme-DiVJyqlX.js} +1 -25
  628. package/dist/esm/validity-DJztqcrH.js +17 -0
  629. package/dist/html.html-data.json +151 -2687
  630. package/dist/ionic/index.esm.js +1 -1
  631. package/dist/ionic/ionic.esm.js +1 -1
  632. package/dist/ionic/p-03aa786d.entry.js +4 -0
  633. package/dist/ionic/p-06c232a4.entry.js +4 -0
  634. package/dist/ionic/p-11684553.entry.js +4 -0
  635. package/dist/ionic/p-1ae21e4c.entry.js +4 -0
  636. package/dist/ionic/p-20b1a044.entry.js +4 -0
  637. package/dist/ionic/p-259d0d98.entry.js +4 -0
  638. package/dist/ionic/p-2a6d6565.entry.js +4 -0
  639. package/dist/ionic/p-341032b3.entry.js +4 -0
  640. package/dist/ionic/p-441fbb13.entry.js +4 -0
  641. package/dist/ionic/p-4502a274.entry.js +4 -0
  642. package/dist/ionic/p-4621c387.entry.js +4 -0
  643. package/dist/ionic/p-4bb3eb60.entry.js +4 -0
  644. package/dist/ionic/p-4e92a11f.entry.js +4 -0
  645. package/dist/ionic/p-50e1194a.entry.js +4 -0
  646. package/dist/ionic/p-51cd1643.entry.js +4 -0
  647. package/dist/ionic/p-5c3ec490.entry.js +4 -0
  648. package/dist/ionic/p-627fabd9.entry.js +4 -0
  649. package/dist/ionic/p-629e4703.entry.js +4 -0
  650. package/dist/ionic/p-76e92a84.entry.js +4 -0
  651. package/dist/ionic/p-7a37b3ce.entry.js +4 -0
  652. package/dist/ionic/p-7aed7726.entry.js +4 -0
  653. package/dist/ionic/p-7ebd980c.entry.js +4 -0
  654. package/dist/ionic/p-80b44b3c.entry.js +4 -0
  655. package/dist/ionic/p-81ea5652.entry.js +4 -0
  656. package/dist/ionic/p-8c8eee7d.entry.js +4 -0
  657. package/dist/ionic/p-8d624ee5.entry.js +4 -0
  658. package/dist/ionic/p-8d6fd502.entry.js +4 -0
  659. package/dist/ionic/p-9177f4ac.entry.js +4 -0
  660. package/dist/ionic/p-944c8939.entry.js +4 -0
  661. package/dist/ionic/p-9c6a5a8d.entry.js +4 -0
  662. package/dist/ionic/p-9eeaBrnk.js +4 -0
  663. package/dist/ionic/p-AlrZKoWR.js +4 -0
  664. package/dist/ionic/p-BGqMS-oh.js +4 -0
  665. package/dist/ionic/p-BUFIpxKM.js +4 -0
  666. package/dist/ionic/p-BmVRXR1y.js +4 -0
  667. package/dist/ionic/p-CFlfIb2g.js +4 -0
  668. package/dist/ionic/p-CIGNaXM1.js +4 -0
  669. package/dist/ionic/{p-BmEwy3tY.js → p-CKvCXMs9.js} +1 -1
  670. package/dist/ionic/p-Cg5-OQYy.js +4 -0
  671. package/dist/ionic/p-CtWGkNnJ.js +4 -0
  672. package/dist/ionic/p-Cx3IXROA.js +4 -0
  673. package/{components/p-Cllkut-B.js → dist/ionic/p-D13Eaw-8.js} +1 -1
  674. package/dist/ionic/p-D4uTWt4-.js +4 -0
  675. package/dist/ionic/{p-C8IHbcuP.js → p-DAAFkPFT.js} +1 -1
  676. package/dist/ionic/p-DC3RagnA.js +4 -0
  677. package/dist/ionic/p-DIuEbVLu.js +4 -0
  678. package/dist/ionic/p-DJztqcrH.js +4 -0
  679. package/dist/ionic/p-DSG2s2Eb.js +4 -0
  680. package/dist/ionic/p-Dfbt-q2k.js +4 -0
  681. package/dist/ionic/p-DiVJyqlX.js +4 -0
  682. package/dist/ionic/p-DoJvtrbw.js +4 -0
  683. package/dist/ionic/p-DzWaWHGc.js +4 -0
  684. package/dist/ionic/p-KjNvRoEp.js +4 -0
  685. package/dist/ionic/p-Nqf6uvGh.js +4 -0
  686. package/dist/ionic/p-SNAkTDfm.js +4 -0
  687. package/{components/p-CDgDBcU9.js → dist/ionic/p-VAemlbDS.js} +1 -1
  688. package/dist/ionic/{p-DKWXAwlR.js → p-Wk5HzclC.js} +1 -1
  689. package/dist/ionic/p-ZjP4CjeZ.js +4 -0
  690. package/dist/ionic/p-a2e51c5d.entry.js +4 -0
  691. package/dist/ionic/p-a3bdcae6.entry.js +4 -0
  692. package/dist/ionic/p-a44b7536.entry.js +4 -0
  693. package/dist/ionic/p-a5213260.entry.js +4 -0
  694. package/dist/ionic/p-a7628bc7.entry.js +4 -0
  695. package/dist/ionic/p-b1599fca.entry.js +4 -0
  696. package/dist/ionic/p-b16be471.entry.js +4 -0
  697. package/dist/ionic/p-b6a7397c.entry.js +4 -0
  698. package/dist/ionic/p-b9ac1fe0.entry.js +4 -0
  699. package/dist/ionic/p-c6e49f3f.entry.js +4 -0
  700. package/dist/ionic/p-c93553d2.entry.js +4 -0
  701. package/dist/ionic/p-d2c7f046.entry.js +4 -0
  702. package/dist/ionic/p-d8387b99.entry.js +4 -0
  703. package/dist/ionic/p-d8ac9eea.entry.js +4 -0
  704. package/dist/ionic/p-db1b6738.entry.js +4 -0
  705. package/dist/ionic/p-dfa8d673.entry.js +4 -0
  706. package/dist/ionic/p-ed797c72.entry.js +4 -0
  707. package/dist/ionic/p-ef93ca92.entry.js +4 -0
  708. package/dist/ionic/p-f09f9642.entry.js +4 -0
  709. package/dist/ionic/p-f1c06f82.entry.js +4 -0
  710. package/dist/ionic/p-f386f6ae.entry.js +4 -0
  711. package/dist/ionic/p-fe4aa1db.entry.js +4 -0
  712. package/dist/ionic/p-mjKAFv89.js +4 -0
  713. package/dist/ionic/p-tcQvqkiX.js +5 -0
  714. package/dist/ionic/p-viFHDgRs.js +4 -0
  715. package/dist/ionic/p-xWb6fgfq.js +4 -0
  716. package/dist/types/components/accordion/accordion.d.ts +3 -6
  717. package/dist/types/components/accordion-group/accordion-group.d.ts +1 -12
  718. package/dist/types/components/action-sheet/action-sheet-interface.d.ts +7 -3
  719. package/dist/types/components/action-sheet/action-sheet.d.ts +2 -3
  720. package/dist/types/components/alert/alert-interface.d.ts +7 -3
  721. package/dist/types/components/alert/alert.d.ts +2 -3
  722. package/dist/types/components/app/app.d.ts +5 -4
  723. package/dist/types/components/avatar/avatar.d.ts +0 -32
  724. package/dist/types/components/back-button/back-button.d.ts +1 -2
  725. package/dist/types/components/backdrop/backdrop.d.ts +0 -4
  726. package/dist/types/components/badge/badge.d.ts +1 -34
  727. package/dist/types/components/breadcrumb/breadcrumb.d.ts +1 -4
  728. package/dist/types/components/breadcrumbs/breadcrumbs.d.ts +2 -2
  729. package/dist/types/components/button/button.d.ts +8 -23
  730. package/dist/types/components/buttons/buttons.d.ts +1 -5
  731. package/dist/types/components/card/card.d.ts +1 -8
  732. package/dist/types/components/card-content/card-content.d.ts +1 -2
  733. package/dist/types/components/card-header/card-header.d.ts +2 -3
  734. package/dist/types/components/card-subtitle/card-subtitle.d.ts +1 -2
  735. package/dist/types/components/card-title/card-title.d.ts +1 -2
  736. package/dist/types/components/checkbox/checkbox.d.ts +4 -14
  737. package/dist/types/components/chip/chip.d.ts +1 -26
  738. package/dist/types/components/col/col.d.ts +5 -52
  739. package/dist/types/components/content/content.d.ts +0 -3
  740. package/dist/types/components/datetime/datetime.d.ts +1 -26
  741. package/dist/types/components/datetime/utils/data.d.ts +5 -5
  742. package/dist/types/components/datetime-button/datetime-button.d.ts +1 -2
  743. package/dist/types/components/fab/fab.d.ts +0 -4
  744. package/dist/types/components/fab-button/fab-button.d.ts +3 -5
  745. package/dist/types/components/fab-list/fab-list.d.ts +0 -4
  746. package/dist/types/components/footer/footer.d.ts +3 -4
  747. package/dist/types/components/grid/grid.d.ts +0 -4
  748. package/dist/types/components/header/header.d.ts +3 -9
  749. package/dist/types/components/header/header.utils.d.ts +3 -3
  750. package/dist/types/components/img/img.d.ts +0 -3
  751. package/dist/types/components/infinite-scroll/infinite-scroll.d.ts +0 -21
  752. package/dist/types/components/infinite-scroll-content/infinite-scroll-content.d.ts +0 -4
  753. package/dist/types/components/input/input.d.ts +6 -32
  754. package/dist/types/components/input-otp/input-otp.d.ts +0 -37
  755. package/dist/types/components/input-password-toggle/input-password-toggle.d.ts +0 -2
  756. package/dist/types/components/item/item.d.ts +4 -11
  757. package/dist/types/components/item-divider/item-divider.d.ts +1 -2
  758. package/dist/types/components/item-group/item-group.d.ts +0 -4
  759. package/dist/types/components/item-option/item-option.d.ts +1 -18
  760. package/dist/types/components/item-options/item-options.d.ts +0 -4
  761. package/dist/types/components/item-sliding/item-sliding.d.ts +1 -47
  762. package/dist/types/components/item-sliding/test/test.utils.d.ts +0 -13
  763. package/dist/types/components/label/label.d.ts +1 -2
  764. package/dist/types/components/list/list.d.ts +1 -15
  765. package/dist/types/components/list-header/list-header.d.ts +1 -2
  766. package/dist/types/components/loading/loading-interface.d.ts +7 -2
  767. package/dist/types/components/loading/loading.d.ts +2 -3
  768. package/dist/types/components/menu/menu.d.ts +0 -3
  769. package/dist/types/components/menu-button/menu-button.d.ts +1 -3
  770. package/dist/types/components/menu-toggle/menu-toggle.d.ts +0 -3
  771. package/dist/types/components/modal/gestures/sheet.d.ts +1 -1
  772. package/dist/types/components/modal/modal-interface.d.ts +7 -4
  773. package/dist/types/components/modal/modal.d.ts +1 -11
  774. package/dist/types/components/nav/nav-interface.d.ts +1 -9
  775. package/dist/types/components/nav/nav.d.ts +1 -5
  776. package/dist/types/components/nav-link/nav-link.d.ts +0 -4
  777. package/dist/types/components/note/note.d.ts +1 -2
  778. package/dist/types/components/picker/picker.d.ts +1 -2
  779. package/dist/types/components/picker-column/picker-column.d.ts +1 -2
  780. package/dist/types/components/picker-column-option/picker-column-option.d.ts +0 -4
  781. package/dist/types/components/popover/popover-interface.d.ts +6 -3
  782. package/dist/types/components/popover/popover.d.ts +5 -6
  783. package/dist/types/components/progress-bar/progress-bar.d.ts +1 -10
  784. package/dist/types/components/radio/radio.d.ts +1 -2
  785. package/dist/types/components/radio-group/radio-group.d.ts +0 -12
  786. package/dist/types/components/range/range.d.ts +1 -2
  787. package/dist/types/components/refresher/refresher.d.ts +1 -2
  788. package/dist/types/components/refresher-content/refresher-content.d.ts +0 -4
  789. package/dist/types/components/reorder/reorder.d.ts +0 -9
  790. package/dist/types/components/reorder-group/reorder-group.d.ts +0 -4
  791. package/dist/types/components/ripple-effect/ripple-effect.d.ts +0 -4
  792. package/dist/types/components/route/route.d.ts +0 -4
  793. package/dist/types/components/router/router.d.ts +0 -4
  794. package/dist/types/components/router-link/router-link.d.ts +0 -4
  795. package/dist/types/components/router-outlet/router-outlet.d.ts +8 -4
  796. package/dist/types/components/row/row.d.ts +0 -4
  797. package/dist/types/components/searchbar/searchbar.d.ts +10 -52
  798. package/dist/types/components/segment/segment.d.ts +1 -2
  799. package/dist/types/components/segment-button/segment-button.d.ts +1 -2
  800. package/dist/types/components/select/select-interface.d.ts +0 -31
  801. package/dist/types/components/select/select.d.ts +14 -66
  802. package/dist/types/components/select-modal/select-modal.d.ts +0 -8
  803. package/dist/types/components/select-option/select-option.d.ts +0 -44
  804. package/dist/types/components/select-popover/select-popover.d.ts +0 -3
  805. package/dist/types/components/skeleton-text/skeleton-text.d.ts +0 -4
  806. package/dist/types/components/spinner/spinner.d.ts +0 -15
  807. package/dist/types/components/split-pane/split-pane.d.ts +0 -4
  808. package/dist/types/components/tab/tab.d.ts +0 -4
  809. package/dist/types/components/tab-bar/tab-bar.d.ts +2 -37
  810. package/dist/types/components/tab-button/tab-button.d.ts +1 -12
  811. package/dist/types/components/tabs/tabs.d.ts +0 -3
  812. package/dist/types/components/text/text.d.ts +1 -2
  813. package/dist/types/components/textarea/textarea.d.ts +4 -53
  814. package/dist/types/components/thumbnail/thumbnail.d.ts +0 -4
  815. package/dist/types/components/title/title.d.ts +0 -4
  816. package/dist/types/components/toast/animations/utils.d.ts +2 -2
  817. package/dist/types/components/toast/toast-interface.d.ts +7 -3
  818. package/dist/types/components/toast/toast.d.ts +2 -19
  819. package/dist/types/components/toggle/toggle.d.ts +1 -15
  820. package/dist/types/components/toolbar/toolbar.d.ts +3 -43
  821. package/dist/types/components.d.ts +258 -2135
  822. package/dist/types/global/ionic-global.d.ts +2 -28
  823. package/dist/types/index.d.ts +1 -1
  824. package/dist/types/interface.d.ts +0 -4
  825. package/dist/types/stencil-public-runtime.d.ts +4 -1
  826. package/dist/types/utils/config.d.ts +2 -114
  827. package/dist/types/utils/focus-trap.d.ts +1 -1
  828. package/dist/types/utils/focus-visible.d.ts +0 -13
  829. package/dist/types/utils/forms/validity.d.ts +0 -7
  830. package/dist/types/utils/helpers.d.ts +0 -11
  831. package/dist/types/utils/overlays-interface.d.ts +1 -31
  832. package/dist/types/utils/overlays.d.ts +12 -10
  833. package/dist/types/utils/sanitization/index.d.ts +2 -54
  834. package/dist/types/utils/test/playwright/drag-element.d.ts +3 -16
  835. package/dist/types/utils/test/playwright/generator.d.ts +2 -31
  836. package/dist/types/utils/theme.d.ts +0 -9
  837. package/hydrate/index.js +2303 -6668
  838. package/hydrate/index.mjs +2303 -6668
  839. package/package.json +40 -12
  840. package/components/ion-divider.d.ts +0 -11
  841. package/components/ion-divider.js +0 -4
  842. package/components/ion-gallery.d.ts +0 -11
  843. package/components/ion-gallery.js +0 -4
  844. package/components/ion-picker-legacy-column.d.ts +0 -11
  845. package/components/ion-picker-legacy-column.js +0 -4
  846. package/components/ion-picker-legacy.d.ts +0 -11
  847. package/components/ion-picker-legacy.js +0 -4
  848. package/components/p-3Ni1Z654.js +0 -4
  849. package/components/p-7kL3tltU.js +0 -4
  850. package/components/p-B9MABkWm.js +0 -4
  851. package/components/p-BBu2n-9C.js +0 -4
  852. package/components/p-BDcohALy.js +0 -4
  853. package/components/p-BDqjX7Z_.js +0 -4
  854. package/components/p-BJzJdLry.js +0 -4
  855. package/components/p-BP_TU_4l.js +0 -4
  856. package/components/p-BYSs-jZz.js +0 -4
  857. package/components/p-BZCB7f49.js +0 -4
  858. package/components/p-BaPtaYEC.js +0 -4
  859. package/components/p-Bg30AtDZ.js +0 -4
  860. package/components/p-BhkGOA7t.js +0 -4
  861. package/components/p-BjW8SOqw.js +0 -4
  862. package/components/p-Bk9hTY4h.js +0 -4
  863. package/components/p-BqDiJgC_.js +0 -4
  864. package/components/p-BqTwa6uT.js +0 -4
  865. package/components/p-BsNpz2u3.js +0 -4
  866. package/components/p-Bt0d89x3.js +0 -4
  867. package/components/p-BwKpO3Is.js +0 -4
  868. package/components/p-BwQOIWD7.js +0 -4
  869. package/components/p-Bxiu1dAN.js +0 -4
  870. package/components/p-C75FIZBC.js +0 -4
  871. package/components/p-C8kBejTT.js +0 -4
  872. package/components/p-C91NnY87.js +0 -4
  873. package/components/p-CBS0sBAa.js +0 -4
  874. package/components/p-CODBQrPj.js +0 -4
  875. package/components/p-Cg-xpJhD.js +0 -4
  876. package/components/p-CgSn4J7d.js +0 -4
  877. package/components/p-CgZLVOCc.js +0 -4
  878. package/components/p-Cz4uz3Dy.js +0 -4
  879. package/components/p-CzC_ZSgb.js +0 -4
  880. package/components/p-D1t981Ih.js +0 -4
  881. package/components/p-D2mReIu8.js +0 -4
  882. package/components/p-D6g8ud1e.js +0 -4
  883. package/components/p-DDw-NYxz.js +0 -4
  884. package/components/p-DN_scBC7.js +0 -4
  885. package/components/p-DVcs-2q3.js +0 -4
  886. package/components/p-DaJxRxSQ.js +0 -4
  887. package/components/p-Dhi5xtNS.js +0 -4
  888. package/components/p-Do7NMUwR.js +0 -4
  889. package/components/p-Dp2x0MpA.js +0 -4
  890. package/components/p-GElQZ38c.js +0 -4
  891. package/components/p-GtzfsjJP.js +0 -4
  892. package/components/p-LB-QPk3e.js +0 -4
  893. package/components/p-Skz67GXZ.js +0 -4
  894. package/components/p-WdrzoonY.js +0 -4
  895. package/components/p-XegQjlzJ.js +0 -4
  896. package/components/p-fIOYmaqA.js +0 -4
  897. package/components/p-h64_gZrH.js +0 -4
  898. package/components/p-hpwmNJ2Q.js +0 -4
  899. package/components/p-kKYBfhbe.js +0 -4
  900. package/components/p-lGSe6-vg.js +0 -4
  901. package/components/p-pvh0bjpw.js +0 -4
  902. package/components/p-sToA4Co7.js +0 -4
  903. package/components/p-sehKq5RI.js +0 -4
  904. package/components/p-vXpMhGrs.js +0 -4
  905. package/css/ionic/bundle.ionic.css +0 -1
  906. package/css/ionic/bundle.ionic.css.map +0 -1
  907. package/css/ionic/core.ionic.css +0 -1
  908. package/css/ionic/core.ionic.css.map +0 -1
  909. package/css/ionic/global.bundle.ionic.css +0 -1
  910. package/css/ionic/global.bundle.ionic.css.map +0 -1
  911. package/css/ionic/ionic-swiper.ionic.css +0 -1
  912. package/css/ionic/ionic-swiper.ionic.css.map +0 -1
  913. package/css/ionic/link.ionic.css +0 -1
  914. package/css/ionic/link.ionic.css.map +0 -1
  915. package/css/ionic/structure.ionic.css +0 -1
  916. package/css/ionic/structure.ionic.css.map +0 -1
  917. package/css/ionic/typography.ionic.css +0 -1
  918. package/css/ionic/typography.ionic.css.map +0 -1
  919. package/css/ionic/utils.bundle.ionic.css +0 -1
  920. package/css/ionic/utils.bundle.ionic.css.map +0 -1
  921. package/dist/cjs/caret-down-vtVgfXIs.js +0 -8
  922. package/dist/cjs/caret-left-CxZXLRv5.js +0 -8
  923. package/dist/cjs/caret-right-CRCgv98E.js +0 -8
  924. package/dist/cjs/config-DWdFbSNK.js +0 -35
  925. package/dist/cjs/index-Dm4Dm7Vg.js +0 -414
  926. package/dist/cjs/ion-divider.cjs.entry.js +0 -51
  927. package/dist/cjs/ion-gallery.cjs.entry.js +0 -529
  928. package/dist/cjs/ionic-global-BW5tRzrz.js +0 -519
  929. package/dist/cjs/list-a-7GSA6K.js +0 -8
  930. package/dist/cjs/overlay-control-label-DnRLQR1t.js +0 -52
  931. package/dist/cjs/select-option-render-DQyZnlF5.js +0 -116
  932. package/dist/cjs/validity-QmuwEptc.js +0 -51
  933. package/dist/cjs/x-BTF99yFH.js +0 -8
  934. package/dist/collection/components/accordion/accordion.ionic.css +0 -201
  935. package/dist/collection/components/accordion-group/accordion-group.ionic.css +0 -93
  936. package/dist/collection/components/action-sheet/action-sheet.ionic.css +0 -491
  937. package/dist/collection/components/alert/alert.ionic.css +0 -784
  938. package/dist/collection/components/avatar/avatar.ionic.css +0 -391
  939. package/dist/collection/components/backdrop/backdrop.ionic.css +0 -109
  940. package/dist/collection/components/badge/badge.ionic.css +0 -275
  941. package/dist/collection/components/button/button.ionic.css +0 -646
  942. package/dist/collection/components/buttons/buttons.ionic.css +0 -97
  943. package/dist/collection/components/card/card.ionic.css +0 -144
  944. package/dist/collection/components/card-content/card-content.ionic.css +0 -89
  945. package/dist/collection/components/card-header/card-header.ionic.css +0 -85
  946. package/dist/collection/components/card-subtitle/card-subtitle.ionic.css +0 -144
  947. package/dist/collection/components/checkbox/checkbox.ionic.css +0 -539
  948. package/dist/collection/components/chip/chip.ionic.css +0 -217
  949. package/dist/collection/components/datetime/datetime.ionic.css +0 -703
  950. package/dist/collection/components/divider/divider.ionic.css +0 -148
  951. package/dist/collection/components/divider/divider.ios.css +0 -87
  952. package/dist/collection/components/divider/divider.js +0 -94
  953. package/dist/collection/components/divider/divider.md.css +0 -87
  954. package/dist/collection/components/gallery/gallery-constants.js +0 -12
  955. package/dist/collection/components/gallery/gallery-interface.js +0 -1
  956. package/dist/collection/components/gallery/gallery.css +0 -100
  957. package/dist/collection/components/gallery/gallery.js +0 -600
  958. package/dist/collection/components/gallery/test/utils.js +0 -100
  959. package/dist/collection/components/header/header.ionic.css +0 -97
  960. package/dist/collection/components/input/input.ionic.css +0 -889
  961. package/dist/collection/components/input-otp/input-otp.ionic.css +0 -371
  962. package/dist/collection/components/input-password-toggle/input-password-toggle.ionic.css +0 -78
  963. package/dist/collection/components/input-password-toggle/input-password-toggle.native.css +0 -61
  964. package/dist/collection/components/item/item.ionic.css +0 -496
  965. package/dist/collection/components/item-option/item-option.ionic.css +0 -278
  966. package/dist/collection/components/item-options/item-options.ionic.css +0 -221
  967. package/dist/collection/components/item-sliding/item-sliding.ionic.css +0 -211
  968. package/dist/collection/components/list/list.ionic.css +0 -212
  969. package/dist/collection/components/list-header/list-header.ionic.css +0 -190
  970. package/dist/collection/components/menu-button/menu-button.ionic.css +0 -236
  971. package/dist/collection/components/modal/animations/ionic.enter.js +0 -40
  972. package/dist/collection/components/modal/animations/ionic.leave.js +0 -28
  973. package/dist/collection/components/modal/modal.ionic.css +0 -247
  974. package/dist/collection/components/picker-legacy/animations/ios.enter.js +0 -27
  975. package/dist/collection/components/picker-legacy/animations/ios.leave.js +0 -23
  976. package/dist/collection/components/picker-legacy/picker-interface.js +0 -1
  977. package/dist/collection/components/picker-legacy/picker.ios.css +0 -312
  978. package/dist/collection/components/picker-legacy/picker.js +0 -891
  979. package/dist/collection/components/picker-legacy/picker.md.css +0 -299
  980. package/dist/collection/components/picker-legacy-column/picker-column.ios.css +0 -243
  981. package/dist/collection/components/picker-legacy-column/picker-column.js +0 -422
  982. package/dist/collection/components/picker-legacy-column/picker-column.md.css +0 -234
  983. package/dist/collection/components/picker-legacy-column/test/test.utils.js +0 -43
  984. package/dist/collection/components/popover/popover.ionic.css +0 -290
  985. package/dist/collection/components/progress-bar/progress-bar.ionic.css +0 -287
  986. package/dist/collection/components/radio/radio.ionic.css +0 -422
  987. package/dist/collection/components/radio-group/radio-group.ionic.css +0 -119
  988. package/dist/collection/components/range/range.ionic.css +0 -567
  989. package/dist/collection/components/ripple-effect/ripple-effect.ionic.css +0 -215
  990. package/dist/collection/components/searchbar/searchbar.ionic.css +0 -626
  991. package/dist/collection/components/segment/segment.ionic.css +0 -115
  992. package/dist/collection/components/segment-button/segment-button.ionic.css +0 -353
  993. package/dist/collection/components/select/select.ionic.css +0 -810
  994. package/dist/collection/components/select-modal/select-modal.ionic.css +0 -264
  995. package/dist/collection/components/select-popover/select-popover.ionic.css +0 -252
  996. package/dist/collection/components/spinner/spinner.native.css +0 -199
  997. package/dist/collection/components/tab-bar/tab-bar.ionic.css +0 -227
  998. package/dist/collection/components/tab-button/tab-button.ionic.css +0 -348
  999. package/dist/collection/components/textarea/textarea.ionic.css +0 -898
  1000. package/dist/collection/components/title/title.ionic.css +0 -127
  1001. package/dist/collection/components/toast/toast.ionic.css +0 -394
  1002. package/dist/collection/components/toggle/toggle.ionic.css +0 -508
  1003. package/dist/collection/components/toolbar/test/image.svg +0 -1
  1004. package/dist/collection/components/toolbar/toolbar.ionic.css +0 -249
  1005. package/dist/collection/utils/css-value-validation.js +0 -39
  1006. package/dist/collection/utils/overlay-control-label.js +0 -47
  1007. package/dist/collection/utils/select-option-render.js +0 -111
  1008. package/dist/esm/caret-down-D1t981Ih.js +0 -6
  1009. package/dist/esm/caret-left-fIOYmaqA.js +0 -6
  1010. package/dist/esm/caret-right-BYSs-jZz.js +0 -6
  1011. package/dist/esm/config-BwKpO3Is.js +0 -31
  1012. package/dist/esm/index-Bmyj8b0z.js +0 -409
  1013. package/dist/esm/ion-divider.entry.js +0 -49
  1014. package/dist/esm/ion-gallery.entry.js +0 -527
  1015. package/dist/esm/ionic-global--9mOmThr.js +0 -508
  1016. package/dist/esm/list-Dhi5xtNS.js +0 -6
  1017. package/dist/esm/overlay-control-label-CODBQrPj.js +0 -49
  1018. package/dist/esm/select-option-render-QGJ9tZHa.js +0 -114
  1019. package/dist/esm/validity-BjW8SOqw.js +0 -48
  1020. package/dist/esm/x-BDqjX7Z_.js +0 -6
  1021. package/dist/ionic/p-0030507d.entry.js +0 -4
  1022. package/dist/ionic/p-084c2623.entry.js +0 -4
  1023. package/dist/ionic/p-09f8a57f.entry.js +0 -4
  1024. package/dist/ionic/p-108c0f30.entry.js +0 -4
  1025. package/dist/ionic/p-1439fecb.entry.js +0 -4
  1026. package/dist/ionic/p-18ed37e3.entry.js +0 -4
  1027. package/dist/ionic/p-199bffb3.entry.js +0 -4
  1028. package/dist/ionic/p-19a1ff9a.entry.js +0 -4
  1029. package/dist/ionic/p-1a026890.entry.js +0 -4
  1030. package/dist/ionic/p-1ad16c09.entry.js +0 -4
  1031. package/dist/ionic/p-2049aa81.entry.js +0 -4
  1032. package/dist/ionic/p-290778c1.entry.js +0 -4
  1033. package/dist/ionic/p-2aa7567e.entry.js +0 -4
  1034. package/dist/ionic/p-2e7e3da1.entry.js +0 -4
  1035. package/dist/ionic/p-3656314c.entry.js +0 -4
  1036. package/dist/ionic/p-379cc989.entry.js +0 -4
  1037. package/dist/ionic/p-3f18dfe9.entry.js +0 -4
  1038. package/dist/ionic/p-40d9e029.entry.js +0 -4
  1039. package/dist/ionic/p-456736d1.entry.js +0 -4
  1040. package/dist/ionic/p-48e3cb9e.entry.js +0 -4
  1041. package/dist/ionic/p-497f6391.entry.js +0 -4
  1042. package/dist/ionic/p-64b4e6eb.entry.js +0 -4
  1043. package/dist/ionic/p-66eb0193.entry.js +0 -4
  1044. package/dist/ionic/p-67c2d349.entry.js +0 -4
  1045. package/dist/ionic/p-7054a1b9.entry.js +0 -4
  1046. package/dist/ionic/p-70ee89c9.entry.js +0 -4
  1047. package/dist/ionic/p-7186786e.entry.js +0 -4
  1048. package/dist/ionic/p-7194f6fa.entry.js +0 -4
  1049. package/dist/ionic/p-76c70824.entry.js +0 -4
  1050. package/dist/ionic/p-7f294078.entry.js +0 -4
  1051. package/dist/ionic/p-8458f1b6.entry.js +0 -4
  1052. package/dist/ionic/p-88e7f52a.entry.js +0 -4
  1053. package/dist/ionic/p-89eab395.entry.js +0 -4
  1054. package/dist/ionic/p-93315d96.entry.js +0 -4
  1055. package/dist/ionic/p-9ccfb733.entry.js +0 -4
  1056. package/dist/ionic/p-9dfbe98d.entry.js +0 -4
  1057. package/dist/ionic/p-B4ikoeaj.js +0 -4
  1058. package/dist/ionic/p-BDqjX7Z_.js +0 -4
  1059. package/dist/ionic/p-BFBCtvFI.js +0 -4
  1060. package/dist/ionic/p-BQgCYKKG.js +0 -4
  1061. package/dist/ionic/p-BYAxJDlE.js +0 -4
  1062. package/dist/ionic/p-BYSs-jZz.js +0 -4
  1063. package/dist/ionic/p-BjW8SOqw.js +0 -4
  1064. package/dist/ionic/p-BwKpO3Is.js +0 -4
  1065. package/dist/ionic/p-CDn0uNJA.js +0 -4
  1066. package/dist/ionic/p-CHE1xWbg.js +0 -4
  1067. package/dist/ionic/p-CK179dBb.js +0 -4
  1068. package/dist/ionic/p-CODBQrPj.js +0 -4
  1069. package/dist/ionic/p-CYhXBSjd.js +0 -4
  1070. package/dist/ionic/p-CxRK9GyE.js +0 -4
  1071. package/dist/ionic/p-D1t981Ih.js +0 -4
  1072. package/dist/ionic/p-D2tu5BUg.js +0 -4
  1073. package/dist/ionic/p-DDFhx1YX.js +0 -4
  1074. package/dist/ionic/p-DNGqaUsl.js +0 -4
  1075. package/dist/ionic/p-DaJxRxSQ.js +0 -4
  1076. package/dist/ionic/p-DaknVxZR.js +0 -4
  1077. package/dist/ionic/p-Dhi5xtNS.js +0 -4
  1078. package/dist/ionic/p-DoyDJ2X5.js +0 -4
  1079. package/dist/ionic/p-E1wtzfO0.js +0 -4
  1080. package/dist/ionic/p-FvDKM4Ax.js +0 -4
  1081. package/dist/ionic/p-IXZW3FBt.js +0 -4
  1082. package/dist/ionic/p-NqPMS7BP.js +0 -4
  1083. package/dist/ionic/p-Omi_TcwW.js +0 -5
  1084. package/dist/ionic/p-PoSbs6oh.js +0 -4
  1085. package/dist/ionic/p-VAJ_3beW.js +0 -4
  1086. package/dist/ionic/p-a3f9be52.entry.js +0 -4
  1087. package/dist/ionic/p-b4fd91b8.entry.js +0 -4
  1088. package/dist/ionic/p-b653f4c2.entry.js +0 -4
  1089. package/dist/ionic/p-b69add0e.entry.js +0 -4
  1090. package/dist/ionic/p-b7235e85.entry.js +0 -4
  1091. package/dist/ionic/p-b847907d.entry.js +0 -4
  1092. package/dist/ionic/p-bc317965.entry.js +0 -4
  1093. package/dist/ionic/p-bc3d68ff.entry.js +0 -4
  1094. package/dist/ionic/p-bsfLvRbd.js +0 -4
  1095. package/dist/ionic/p-c684a3b6.entry.js +0 -4
  1096. package/dist/ionic/p-c7139c41.entry.js +0 -4
  1097. package/dist/ionic/p-c94fbdab.entry.js +0 -4
  1098. package/dist/ionic/p-dac1d4de.entry.js +0 -4
  1099. package/dist/ionic/p-dd2981d0.entry.js +0 -4
  1100. package/dist/ionic/p-e89848b2.entry.js +0 -4
  1101. package/dist/ionic/p-eTI_FbQJ.js +0 -4
  1102. package/dist/ionic/p-f2f740aa.entry.js +0 -4
  1103. package/dist/ionic/p-f52856cb.entry.js +0 -4
  1104. package/dist/ionic/p-fIOYmaqA.js +0 -4
  1105. package/dist/ionic/p-fbdbdb3e.entry.js +0 -4
  1106. package/dist/ionic/p-ff09d2a5.entry.js +0 -4
  1107. package/dist/ionic/p-vXpMhGrs.js +0 -4
  1108. package/dist/types/components/divider/divider.d.ts +0 -20
  1109. package/dist/types/components/gallery/gallery-constants.d.ts +0 -9
  1110. package/dist/types/components/gallery/gallery-interface.d.ts +0 -10
  1111. package/dist/types/components/gallery/gallery.d.ts +0 -185
  1112. package/dist/types/components/gallery/test/utils.d.ts +0 -2
  1113. package/dist/types/components/modal/animations/ionic.enter.d.ts +0 -6
  1114. package/dist/types/components/modal/animations/ionic.leave.d.ts +0 -6
  1115. package/dist/types/components/picker-legacy/animations/ios.enter.d.ts +0 -5
  1116. package/dist/types/components/picker-legacy/animations/ios.leave.d.ts +0 -5
  1117. package/dist/types/components/picker-legacy/picker-interface.d.ts +0 -52
  1118. package/dist/types/components/picker-legacy/picker.d.ts +0 -159
  1119. package/dist/types/components/picker-legacy-column/picker-column.d.ts +0 -46
  1120. package/dist/types/components/picker-legacy-column/test/test.utils.d.ts +0 -9
  1121. package/dist/types/utils/css-value-validation.d.ts +0 -21
  1122. package/dist/types/utils/overlay-control-label.d.ts +0 -34
  1123. package/dist/types/utils/select-option-render.d.ts +0 -53
  1124. /package/dist/collection/components/{refresher-content/refresher-content.css → input-password-toggle/input-password-toggle.css} +0 -0
package/css/palettes/dark.system.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/css/palettes/dark.system.scss","../../src/css/palettes/dark.scss"],"names":[],"mappings":"AAEA,mCC8EE,MAEI,6BACA,sCACA,mCACA,0CACA,mCACA,kCALA,+BACA,wCACA,qCACA,4CACA,qCACA,oCALA,8BACA,wCACA,oCACA,2CACA,oCACA,mCALA,6BACA,qCACA,mCACA,0CACA,mCACA,kCALA,6BACA,sCACA,mCACA,0CACA,mCACA,kCALA,4BACA,oCACA,kCACA,yCACA,kCACA,iCALA,2BACA,kCACA,iCACA,8CACA,iCACA,gCALA,4BACA,sCACA,kCACA,yCACA,kCACA,iCALA,0BACA,oCACA,gCACA,uCACA,gCACA,+BAMJ,UACE,gCACA,oCACA,0BACA,oCACA,wCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,+BACA,0CACA,+BAGF,oBACE,wFACA,0FACA,4FAKF,SACE,gCACA,uCACA,0BACA,oCACA,wCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,+BACA,kCACA,kCACA,0CACA","file":"dark.system.css","sourcesContent":["@import \"./dark\";\n\n@media (prefers-color-scheme: dark) {\n :root {\n @include dark-base-palette();\n }\n\n :root.ios {\n @include dark-ios-palette();\n }\n\n :root.md {\n @include dark-md-palette();\n }\n}\n","@use \"sass:map\";\n@import \"../../themes/functions.color\";\n\n$primary: #4d8dff;\n$secondary: #46b1ff;\n$tertiary: #8482fb;\n$success: #2dd55b;\n$warning: #ffce31;\n$danger: #f24c58;\n$light: #222428;\n$medium: #989aa2;\n$dark: #f4f5f8;\n\n$colors: (\n primary: (\n base: $primary,\n contrast: #000,\n shade: get-color-shade($primary),\n tint: get-color-tint($primary),\n foreground: $primary,\n ),\n secondary: (\n base: $secondary,\n contrast: #000,\n shade: get-color-shade($secondary),\n tint: get-color-tint($secondary),\n foreground: $secondary,\n ),\n tertiary: (\n base: $tertiary,\n contrast: #000,\n shade: get-color-shade($tertiary),\n tint: get-color-tint($tertiary),\n foreground: $tertiary,\n ),\n success: (\n base: $success,\n contrast: #000,\n shade: get-color-shade($success),\n tint: get-color-tint($success),\n foreground: $success,\n ),\n warning: (\n base: $warning,\n contrast: #000,\n shade: get-color-shade($warning),\n tint: get-color-tint($warning),\n foreground: $warning,\n ),\n danger: (\n base: $danger,\n contrast: #000,\n shade: get-color-shade($danger),\n tint: get-color-tint($danger),\n foreground: $danger,\n ),\n light: (\n base: $light,\n contrast: #fff,\n shade: get-color-shade($light),\n tint: get-color-tint($light),\n foreground: $light,\n ),\n medium: (\n base: $medium,\n contrast: #000,\n shade: get-color-shade($medium),\n tint: get-color-tint($medium),\n foreground: $medium,\n ),\n dark: (\n base: $dark,\n contrast: #000,\n shade: get-color-shade($dark),\n tint: get-color-tint($dark),\n foreground: $dark,\n ),\n);\n\n@mixin dark-base-palette() {\n & {\n @each $color-name, $value in $colors {\n --ion-color-#{$color-name}: #{map.get($value, base)};\n --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))};\n --ion-color-#{$color-name}-contrast: #{map.get($value, contrast)};\n --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};\n --ion-color-#{$color-name}-shade: #{map.get($value, shade)};\n --ion-color-#{$color-name}-tint: #{map.get($value, tint)};\n }\n }\n}\n\n@mixin dark-ios-palette() {\n & {\n --ion-background-color: #000000;\n --ion-background-color-rgb: 0, 0, 0;\n --ion-text-color: #ffffff;\n --ion-text-color-rgb: 255, 255, 255;\n --ion-background-color-step-50: #0d0d0d;\n --ion-background-color-step-100: #1a1a1a;\n --ion-background-color-step-150: #262626;\n --ion-background-color-step-200: #333333;\n --ion-background-color-step-250: #404040;\n --ion-background-color-step-300: #4d4d4d;\n --ion-background-color-step-350: #595959;\n --ion-background-color-step-400: #666666;\n --ion-background-color-step-450: #737373;\n --ion-background-color-step-500: #808080;\n --ion-background-color-step-550: #8c8c8c;\n --ion-background-color-step-600: #999999;\n --ion-background-color-step-650: #a6a6a6;\n --ion-background-color-step-700: #b3b3b3;\n --ion-background-color-step-750: #bfbfbf;\n --ion-background-color-step-800: #cccccc;\n --ion-background-color-step-850: #d9d9d9;\n --ion-background-color-step-900: #e6e6e6;\n --ion-background-color-step-950: #f2f2f2;\n --ion-text-color-step-50: #f2f2f2;\n --ion-text-color-step-100: #e6e6e6;\n --ion-text-color-step-150: #d9d9d9;\n --ion-text-color-step-200: #cccccc;\n --ion-text-color-step-250: #bfbfbf;\n --ion-text-color-step-300: #b3b3b3;\n --ion-text-color-step-350: #a6a6a6;\n --ion-text-color-step-400: #999999;\n --ion-text-color-step-450: #8c8c8c;\n --ion-text-color-step-500: #808080;\n --ion-text-color-step-550: #737373;\n --ion-text-color-step-600: #666666;\n --ion-text-color-step-650: #595959;\n --ion-text-color-step-700: #4d4d4d;\n --ion-text-color-step-750: #404040;\n --ion-text-color-step-800: #333333;\n --ion-text-color-step-850: #262626;\n --ion-text-color-step-900: #1a1a1a;\n --ion-text-color-step-950: #0d0d0d;\n --ion-item-background: #000000;\n --ion-tab-bar-background-focused: #252525;\n --ion-card-background: #1c1c1d;\n }\n\n & ion-modal {\n --ion-background-color: var(--ion-color-step-100, var(--ion-background-color-step-100));\n --ion-toolbar-background: var(--ion-color-step-150, var(--ion-background-color-step-150));\n --ion-toolbar-border-color: var(--ion-color-step-250, var(--ion-background-color-step-250));\n }\n}\n\n@mixin dark-md-palette() {\n & {\n --ion-background-color: #121212;\n --ion-background-color-rgb: 18, 18, 18;\n --ion-text-color: #ffffff;\n --ion-text-color-rgb: 255, 255, 255;\n --ion-background-color-step-50: #1e1e1e;\n --ion-background-color-step-100: #2a2a2a;\n --ion-background-color-step-150: #363636;\n --ion-background-color-step-200: #414141;\n --ion-background-color-step-250: #4d4d4d;\n --ion-background-color-step-300: #595959;\n --ion-background-color-step-350: #656565;\n --ion-background-color-step-400: #717171;\n --ion-background-color-step-450: #7d7d7d;\n --ion-background-color-step-500: #898989;\n --ion-background-color-step-550: #949494;\n --ion-background-color-step-600: #a0a0a0;\n --ion-background-color-step-650: #acacac;\n --ion-background-color-step-700: #b8b8b8;\n --ion-background-color-step-750: #c4c4c4;\n --ion-background-color-step-800: #d0d0d0;\n --ion-background-color-step-850: #dbdbdb;\n --ion-background-color-step-900: #e7e7e7;\n --ion-background-color-step-950: #f3f3f3;\n --ion-text-color-step-50: #f3f3f3;\n --ion-text-color-step-100: #e7e7e7;\n --ion-text-color-step-150: #dbdbdb;\n --ion-text-color-step-200: #d0d0d0;\n --ion-text-color-step-250: #c4c4c4;\n --ion-text-color-step-300: #b8b8b8;\n --ion-text-color-step-350: #acacac;\n --ion-text-color-step-400: #a0a0a0;\n --ion-text-color-step-450: #949494;\n --ion-text-color-step-500: #898989;\n --ion-text-color-step-550: #7d7d7d;\n --ion-text-color-step-600: #717171;\n --ion-text-color-step-650: #656565;\n --ion-text-color-step-700: #595959;\n --ion-text-color-step-750: #4d4d4d;\n --ion-text-color-step-800: #414141;\n --ion-text-color-step-850: #363636;\n --ion-text-color-step-900: #2a2a2a;\n --ion-text-color-step-950: #1e1e1e;\n --ion-item-background: #1e1e1e;\n --ion-toolbar-background: #1f1f1f;\n --ion-tab-bar-background: #1f1f1f;\n --ion-tab-bar-background-focused: #353535;\n --ion-card-background: #1e1e1e;\n }\n}\n"]}
1
+ {"version":3,"sourceRoot":"","sources":["../../src/css/palettes/dark.system.scss","../../src/css/palettes/dark.scss"],"names":[],"mappings":"AAEA,mCCqEE,MAEI,6BACA,sCACA,mCACA,0CACA,mCACA,kCALA,+BACA,wCACA,qCACA,4CACA,qCACA,oCALA,8BACA,wCACA,oCACA,2CACA,oCACA,mCALA,6BACA,qCACA,mCACA,0CACA,mCACA,kCALA,6BACA,sCACA,mCACA,0CACA,mCACA,kCALA,4BACA,oCACA,kCACA,yCACA,kCACA,iCALA,2BACA,kCACA,iCACA,8CACA,iCACA,gCALA,4BACA,sCACA,kCACA,yCACA,kCACA,iCALA,0BACA,oCACA,gCACA,uCACA,gCACA,+BAMJ,UACE,gCACA,oCACA,0BACA,oCACA,wCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,+BACA,0CACA,+BAGF,oBACE,wFACA,0FACA,4FAKF,SACE,gCACA,uCACA,0BACA,oCACA,wCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,+BACA,kCACA,kCACA,0CACA","file":"dark.system.css","sourcesContent":["@import \"./dark\";\n\n@media (prefers-color-scheme: dark) {\n :root {\n @include dark-base-palette();\n }\n\n :root.ios {\n @include dark-ios-palette();\n }\n\n :root.md {\n @include dark-md-palette();\n }\n}\n","@use \"sass:map\";\n@import \"../../themes/ionic.functions.color\";\n\n$primary: #4d8dff;\n$secondary: #46b1ff;\n$tertiary: #8482fb;\n$success: #2dd55b;\n$warning: #ffce31;\n$danger: #f24c58;\n$light: #222428;\n$medium: #989aa2;\n$dark: #f4f5f8;\n\n$colors: (\n primary: (\n base: $primary,\n contrast: #000,\n shade: get-color-shade($primary),\n tint: get-color-tint($primary)\n ),\n secondary: (\n base: $secondary,\n contrast: #000,\n shade: get-color-shade($secondary),\n tint: get-color-tint($secondary)\n ),\n tertiary: (\n base: $tertiary,\n contrast: #000,\n shade: get-color-shade($tertiary),\n tint: get-color-tint($tertiary)\n ),\n success: (\n base: $success,\n contrast: #000,\n shade: get-color-shade($success),\n tint: get-color-tint($success)\n ),\n warning: (\n base: $warning,\n contrast: #000,\n shade: get-color-shade($warning),\n tint: get-color-tint($warning)\n ),\n danger: (\n base: $danger,\n contrast: #000,\n shade: get-color-shade($danger),\n tint: get-color-tint($danger)\n ),\n light: (\n base: $light,\n contrast: #fff,\n shade: get-color-shade($light),\n tint: get-color-tint($light)\n ),\n medium: (\n base: $medium,\n contrast: #000,\n shade: get-color-shade($medium),\n tint: get-color-tint($medium)\n ),\n dark: (\n base: $dark,\n contrast: #000,\n shade: get-color-shade($dark),\n tint: get-color-tint($dark)\n )\n);\n\n@mixin dark-base-palette() {\n & {\n @each $color-name, $value in $colors {\n --ion-color-#{$color-name}: #{map.get($value, base)};\n --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))};\n --ion-color-#{$color-name}-contrast: #{map.get($value, contrast)};\n --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};\n --ion-color-#{$color-name}-shade: #{map.get($value, shade)};\n --ion-color-#{$color-name}-tint: #{map.get($value, tint)};\n }\n }\n}\n\n@mixin dark-ios-palette() {\n & {\n --ion-background-color: #000000;\n --ion-background-color-rgb: 0, 0, 0;\n --ion-text-color: #ffffff;\n --ion-text-color-rgb: 255, 255, 255;\n --ion-background-color-step-50: #0d0d0d;\n --ion-background-color-step-100: #1a1a1a;\n --ion-background-color-step-150: #262626;\n --ion-background-color-step-200: #333333;\n --ion-background-color-step-250: #404040;\n --ion-background-color-step-300: #4d4d4d;\n --ion-background-color-step-350: #595959;\n --ion-background-color-step-400: #666666;\n --ion-background-color-step-450: #737373;\n --ion-background-color-step-500: #808080;\n --ion-background-color-step-550: #8c8c8c;\n --ion-background-color-step-600: #999999;\n --ion-background-color-step-650: #a6a6a6;\n --ion-background-color-step-700: #b3b3b3;\n --ion-background-color-step-750: #bfbfbf;\n --ion-background-color-step-800: #cccccc;\n --ion-background-color-step-850: #d9d9d9;\n --ion-background-color-step-900: #e6e6e6;\n --ion-background-color-step-950: #f2f2f2;\n --ion-text-color-step-50: #f2f2f2;\n --ion-text-color-step-100: #e6e6e6;\n --ion-text-color-step-150: #d9d9d9;\n --ion-text-color-step-200: #cccccc;\n --ion-text-color-step-250: #bfbfbf;\n --ion-text-color-step-300: #b3b3b3;\n --ion-text-color-step-350: #a6a6a6;\n --ion-text-color-step-400: #999999;\n --ion-text-color-step-450: #8c8c8c;\n --ion-text-color-step-500: #808080;\n --ion-text-color-step-550: #737373;\n --ion-text-color-step-600: #666666;\n --ion-text-color-step-650: #595959;\n --ion-text-color-step-700: #4d4d4d;\n --ion-text-color-step-750: #404040;\n --ion-text-color-step-800: #333333;\n --ion-text-color-step-850: #262626;\n --ion-text-color-step-900: #1a1a1a;\n --ion-text-color-step-950: #0d0d0d;\n --ion-item-background: #000000;\n --ion-tab-bar-background-focused: #252525;\n --ion-card-background: #1c1c1d;\n }\n\n & ion-modal {\n --ion-background-color: var(--ion-color-step-100, var(--ion-background-color-step-100));\n --ion-toolbar-background: var(--ion-color-step-150, var(--ion-background-color-step-150));\n --ion-toolbar-border-color: var(--ion-color-step-250, var(--ion-background-color-step-250));\n }\n}\n\n@mixin dark-md-palette() {\n & {\n --ion-background-color: #121212;\n --ion-background-color-rgb: 18, 18, 18;\n --ion-text-color: #ffffff;\n --ion-text-color-rgb: 255, 255, 255;\n --ion-background-color-step-50: #1e1e1e;\n --ion-background-color-step-100: #2a2a2a;\n --ion-background-color-step-150: #363636;\n --ion-background-color-step-200: #414141;\n --ion-background-color-step-250: #4d4d4d;\n --ion-background-color-step-300: #595959;\n --ion-background-color-step-350: #656565;\n --ion-background-color-step-400: #717171;\n --ion-background-color-step-450: #7d7d7d;\n --ion-background-color-step-500: #898989;\n --ion-background-color-step-550: #949494;\n --ion-background-color-step-600: #a0a0a0;\n --ion-background-color-step-650: #acacac;\n --ion-background-color-step-700: #b8b8b8;\n --ion-background-color-step-750: #c4c4c4;\n --ion-background-color-step-800: #d0d0d0;\n --ion-background-color-step-850: #dbdbdb;\n --ion-background-color-step-900: #e7e7e7;\n --ion-background-color-step-950: #f3f3f3;\n --ion-text-color-step-50: #f3f3f3;\n --ion-text-color-step-100: #e7e7e7;\n --ion-text-color-step-150: #dbdbdb;\n --ion-text-color-step-200: #d0d0d0;\n --ion-text-color-step-250: #c4c4c4;\n --ion-text-color-step-300: #b8b8b8;\n --ion-text-color-step-350: #acacac;\n --ion-text-color-step-400: #a0a0a0;\n --ion-text-color-step-450: #949494;\n --ion-text-color-step-500: #898989;\n --ion-text-color-step-550: #7d7d7d;\n --ion-text-color-step-600: #717171;\n --ion-text-color-step-650: #656565;\n --ion-text-color-step-700: #595959;\n --ion-text-color-step-750: #4d4d4d;\n --ion-text-color-step-800: #414141;\n --ion-text-color-step-850: #363636;\n --ion-text-color-step-900: #2a2a2a;\n --ion-text-color-step-950: #1e1e1e;\n --ion-item-background: #1e1e1e;\n --ion-toolbar-background: #1f1f1f;\n --ion-tab-bar-background: #1f1f1f;\n --ion-tab-bar-background-focused: #353535;\n --ion-card-background: #1e1e1e;\n }\n}\n"]}
package/css/palettes/high-contrast-dark.always.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/css/palettes/high-contrast-dark.scss"],"names":[],"mappings":"AAyGE,MACE,+BAGE,6BACA,uCACA,mCACA,0CACA,mCACA,kCALA,+BACA,wCACA,qCACA,4CACA,qCACA,oCALA,8BACA,wCACA,oCACA,2CACA,oCACA,mCALA,6BACA,sCACA,mCACA,0CACA,mCACA,kCALA,6BACA,sCACA,mCACA,0CACA,mCACA,kCALA,4BACA,sCACA,kCACA,yCACA,kCACA,iCALA,2BACA,kCACA,iCACA,8CACA,iCACA,gCALA,4BACA,sCACA,kCACA,yCACA,kCACA,iCALA,0BACA,oCACA,gCACA,uCACA,gCACA,+BAQJ,UACE,gCACA,oCACA,0BACA,oCACA,+BACA,+BACA,0CAIA,8DACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,wCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,sCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCAMF,oBACE,6DACA,+DACA,iEAOF,SACE,gCACA,uCACA,0BACA,oCACA,4BACA,+BACA,kCACA,kCACA,0CACA,+BAIA,8DACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,wCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCAMF,mBACE,qCAGF,iCAEE,mBAIF,gDACE,iCACE,iEAIJ,wCACE","file":"high-contrast-dark.always.css","sourcesContent":["@use \"sass:map\";\n@import \"../../themes/functions.color\";\n\n$primary: #7cabff;\n$secondary: #62bdff;\n$tertiary: #b6b9f9;\n$success: #4ada71;\n$warning: #ffce31;\n$danger: #fc9aa2;\n$light: #222428;\n$medium: #a8aab3;\n$dark: #f4f5f8;\n\n$colors: (\n primary: (\n base: $primary,\n contrast: #000,\n shade: get-color-shade($primary),\n tint: get-color-tint($primary),\n foreground: $primary,\n ),\n secondary: (\n base: $secondary,\n contrast: #000,\n shade: get-color-shade($secondary),\n tint: get-color-tint($secondary),\n foreground: $secondary,\n ),\n tertiary: (\n base: $tertiary,\n contrast: #000,\n shade: get-color-shade($tertiary),\n tint: get-color-tint($tertiary),\n foreground: $tertiary,\n ),\n success: (\n base: $success,\n contrast: #000,\n shade: get-color-shade($success),\n tint: get-color-tint($success),\n foreground: $success,\n ),\n warning: (\n base: $warning,\n contrast: #000,\n shade: get-color-shade($warning),\n tint: get-color-tint($warning),\n foreground: $warning,\n ),\n danger: (\n base: $danger,\n contrast: #000,\n shade: get-color-shade($danger),\n tint: get-color-tint($danger),\n foreground: $danger,\n ),\n light: (\n base: $light,\n contrast: #fff,\n shade: get-color-shade($light),\n tint: get-color-tint($light),\n foreground: $light,\n ),\n medium: (\n base: $medium,\n contrast: #000,\n shade: get-color-shade($medium),\n tint: get-color-tint($medium),\n foreground: $medium,\n ),\n dark: (\n base: $dark,\n contrast: #000,\n shade: get-color-shade($dark),\n tint: get-color-tint($dark),\n foreground: $dark,\n ),\n);\n\n/// Text step colors are generated based on\n/// how dark or light text can be. The darkest\n/// text color is usually the default text color (white or black).\n/// The darker the $lightest-text-color is, the darker each\n/// stepped color is. If you want to increase text contrast,\n/// make $lightest-text-color darker.\n$text-color: #ffffff;\n\n$darkest-text-color: #888888;\n$lightest-text-color: $text-color;\n\n/// Loop through each color object above\n/// and generate CSS Variables for each\n/// color. Do not use the ion-color function\n/// here because that will set the variable\n/// to evaluate to itself with a fallback.\n/// For example:\n/// --ion-color-primary: #{ion-color(primary, base)};\n/// Maps to:\n/// --ion-color-primary: var(--ion-color-primary, #...);\n\n/// We apply certain styles to the per-mode classes (ios and md)\n/// as opposed to setting everything in :root\n// so any high contrast dark styles override the standard\n/// contrast dark styles.\n@mixin high-contrast-dark-base-palette() {\n & {\n --ion-placeholder-opacity: 0.8;\n\n @each $color-name, $value in $colors {\n --ion-color-#{$color-name}: #{map.get($value, base)};\n --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))};\n --ion-color-#{$color-name}-contrast: #{map.get($value, contrast)};\n --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};\n --ion-color-#{$color-name}-shade: #{map.get($value, shade)};\n --ion-color-#{$color-name}-tint: #{map.get($value, tint)};\n }\n }\n}\n\n@mixin high-contrast-dark-ios-palette() {\n $background-color: #000000;\n\n & {\n --ion-background-color: #{$background-color};\n --ion-background-color-rgb: #{color-to-rgb-list($background-color)};\n --ion-text-color: #{$text-color};\n --ion-text-color-rgb: #{color-to-rgb-list($text-color)};\n --ion-item-background: #000000;\n --ion-card-background: #1c1c1d;\n --ion-tab-bar-background-focused: #252525;\n\n /// Only the item borders should increase in contrast\n /// Borders for elements like toolbars should remain the same\n --ion-item-border-color: var(--ion-background-color-step-400);\n --ion-text-color-step-50: #{mix($darkest-text-color, $lightest-text-color, 5%)};\n --ion-text-color-step-100: #{mix($darkest-text-color, $lightest-text-color, 10%)};\n --ion-text-color-step-150: #{mix($darkest-text-color, $lightest-text-color, 15%)};\n --ion-text-color-step-200: #{mix($darkest-text-color, $lightest-text-color, 20%)};\n --ion-text-color-step-250: #{mix($darkest-text-color, $lightest-text-color, 25%)};\n --ion-text-color-step-300: #{mix($darkest-text-color, $lightest-text-color, 30%)};\n --ion-text-color-step-350: #{mix($darkest-text-color, $lightest-text-color, 35%)};\n --ion-text-color-step-400: #{mix($darkest-text-color, $lightest-text-color, 40%)};\n --ion-text-color-step-450: #{mix($darkest-text-color, $lightest-text-color, 45%)};\n --ion-text-color-step-500: #{mix($darkest-text-color, $lightest-text-color, 50%)};\n --ion-text-color-step-550: #{mix($darkest-text-color, $lightest-text-color, 55%)};\n --ion-text-color-step-600: #{mix($darkest-text-color, $lightest-text-color, 60%)};\n --ion-text-color-step-650: #{mix($darkest-text-color, $lightest-text-color, 65%)};\n --ion-text-color-step-700: #{mix($darkest-text-color, $lightest-text-color, 70%)};\n --ion-text-color-step-750: #{mix($darkest-text-color, $lightest-text-color, 75%)};\n --ion-text-color-step-800: #{mix($darkest-text-color, $lightest-text-color, 80%)};\n --ion-text-color-step-850: #{mix($darkest-text-color, $lightest-text-color, 85%)};\n --ion-text-color-step-900: #{mix($darkest-text-color, $lightest-text-color, 90%)};\n --ion-text-color-step-950: #{mix($darkest-text-color, $lightest-text-color, 95%)};\n --ion-background-color-step-50: #{mix($text-color, $background-color, 5%)};\n --ion-background-color-step-100: #{mix($text-color, $background-color, 10%)};\n --ion-background-color-step-150: #{mix($text-color, $background-color, 15%)};\n --ion-background-color-step-200: #{mix($text-color, $background-color, 20%)};\n --ion-background-color-step-250: #{mix($text-color, $background-color, 25%)};\n --ion-background-color-step-300: #{mix($text-color, $background-color, 30%)};\n --ion-background-color-step-350: #{mix($text-color, $background-color, 35%)};\n --ion-background-color-step-400: #{mix($text-color, $background-color, 40%)};\n --ion-background-color-step-450: #{mix($text-color, $background-color, 45%)};\n --ion-background-color-step-500: #{mix($text-color, $background-color, 50%)};\n --ion-background-color-step-550: #{mix($text-color, $background-color, 55%)};\n --ion-background-color-step-600: #{mix($text-color, $background-color, 60%)};\n --ion-background-color-step-650: #{mix($text-color, $background-color, 65%)};\n --ion-background-color-step-700: #{mix($text-color, $background-color, 70%)};\n --ion-background-color-step-750: #{mix($text-color, $background-color, 75%)};\n --ion-background-color-step-800: #{mix($text-color, $background-color, 80%)};\n --ion-background-color-step-850: #{mix($text-color, $background-color, 85%)};\n --ion-background-color-step-900: #{mix($text-color, $background-color, 90%)};\n --ion-background-color-step-950: #{mix($text-color, $background-color, 95%)};\n }\n\n // Modal\n // --------------------------------------------------\n\n & ion-modal {\n --ion-background-color: var(--ion-background-color-step-100);\n --ion-toolbar-background: var(--ion-background-color-step-150);\n --ion-toolbar-border-color: var(--ion-background-color-step-250);\n }\n}\n\n@mixin high-contrast-dark-md-palette() {\n $background-color: #121212;\n\n & {\n --ion-background-color: #{$background-color};\n --ion-background-color-rgb: #{color-to-rgb-list($background-color)};\n --ion-text-color: #{$text-color};\n --ion-text-color-rgb: #{color-to-rgb-list($text-color)};\n --ion-border-color: #222222;\n --ion-item-background: #1e1e1e;\n --ion-toolbar-background: #1f1f1f;\n --ion-tab-bar-background: #1f1f1f;\n --ion-tab-bar-background-focused: #353535;\n --ion-card-background: #1e1e1e;\n\n /// Only the item borders should increase in contrast\n /// Borders for elements like toolbars should remain the same\n --ion-item-border-color: var(--ion-background-color-step-400);\n --ion-text-color-step-50: #{mix($darkest-text-color, $lightest-text-color, 5%)};\n --ion-text-color-step-100: #{mix($darkest-text-color, $lightest-text-color, 10%)};\n --ion-text-color-step-150: #{mix($darkest-text-color, $lightest-text-color, 15%)};\n --ion-text-color-step-200: #{mix($darkest-text-color, $lightest-text-color, 20%)};\n --ion-text-color-step-250: #{mix($darkest-text-color, $lightest-text-color, 25%)};\n --ion-text-color-step-300: #{mix($darkest-text-color, $lightest-text-color, 30%)};\n --ion-text-color-step-350: #{mix($darkest-text-color, $lightest-text-color, 35%)};\n --ion-text-color-step-400: #{mix($darkest-text-color, $lightest-text-color, 40%)};\n --ion-text-color-step-450: #{mix($darkest-text-color, $lightest-text-color, 45%)};\n --ion-text-color-step-500: #{mix($darkest-text-color, $lightest-text-color, 50%)};\n --ion-text-color-step-550: #{mix($darkest-text-color, $lightest-text-color, 55%)};\n --ion-text-color-step-600: #{mix($darkest-text-color, $lightest-text-color, 60%)};\n --ion-text-color-step-650: #{mix($darkest-text-color, $lightest-text-color, 65%)};\n --ion-text-color-step-700: #{mix($darkest-text-color, $lightest-text-color, 70%)};\n --ion-text-color-step-750: #{mix($darkest-text-color, $lightest-text-color, 75%)};\n --ion-text-color-step-800: #{mix($darkest-text-color, $lightest-text-color, 80%)};\n --ion-text-color-step-850: #{mix($darkest-text-color, $lightest-text-color, 85%)};\n --ion-text-color-step-900: #{mix($darkest-text-color, $lightest-text-color, 90%)};\n --ion-text-color-step-950: #{mix($darkest-text-color, $lightest-text-color, 95%)};\n --ion-background-color-step-50: #{mix($text-color, $background-color, 5%)};\n --ion-background-color-step-100: #{mix($text-color, $background-color, 10%)};\n --ion-background-color-step-150: #{mix($text-color, $background-color, 15%)};\n --ion-background-color-step-200: #{mix($text-color, $background-color, 20%)};\n --ion-background-color-step-250: #{mix($text-color, $background-color, 25%)};\n --ion-background-color-step-300: #{mix($text-color, $background-color, 30%)};\n --ion-background-color-step-350: #{mix($text-color, $background-color, 35%)};\n --ion-background-color-step-400: #{mix($text-color, $background-color, 40%)};\n --ion-background-color-step-450: #{mix($text-color, $background-color, 45%)};\n --ion-background-color-step-500: #{mix($text-color, $background-color, 50%)};\n --ion-background-color-step-550: #{mix($text-color, $background-color, 55%)};\n --ion-background-color-step-600: #{mix($text-color, $background-color, 60%)};\n --ion-background-color-step-650: #{mix($text-color, $background-color, 65%)};\n --ion-background-color-step-700: #{mix($text-color, $background-color, 70%)};\n --ion-background-color-step-750: #{mix($text-color, $background-color, 75%)};\n --ion-background-color-step-800: #{mix($text-color, $background-color, 80%)};\n --ion-background-color-step-850: #{mix($text-color, $background-color, 85%)};\n --ion-background-color-step-900: #{mix($text-color, $background-color, 90%)};\n --ion-background-color-step-950: #{mix($text-color, $background-color, 95%)};\n }\n\n // Toast\n // --------------------------------------------------\n\n & ion-toast {\n --color: var(--ion-background-color);\n }\n\n & ion-toast::part(button) {\n // Fallback for browsers that don't support color-mix\n color: var(--color);\n }\n\n /* stylelint-disable-next-line order/order */\n @supports (color: color-mix(in lch, plum, pink)) {\n & ion-toast::part(button) {\n color: color-mix(in srgb, var(--color) 73%, var(--button-color));\n }\n }\n\n & ion-toast::part(button cancel) {\n color: var(--color);\n }\n}\n"]}
1
+ {"version":3,"sourceRoot":"","sources":["../../src/css/palettes/high-contrast-dark.scss"],"names":[],"mappings":"AAgGE,MACE,+BAGE,6BACA,uCACA,mCACA,0CACA,mCACA,kCALA,+BACA,wCACA,qCACA,4CACA,qCACA,oCALA,8BACA,wCACA,oCACA,2CACA,oCACA,mCALA,6BACA,sCACA,mCACA,0CACA,mCACA,kCALA,6BACA,sCACA,mCACA,0CACA,mCACA,kCALA,4BACA,sCACA,kCACA,yCACA,kCACA,iCALA,2BACA,kCACA,iCACA,8CACA,iCACA,gCALA,4BACA,sCACA,kCACA,yCACA,kCACA,iCALA,0BACA,oCACA,gCACA,uCACA,gCACA,+BASJ,UACE,gCACA,oCACA,0BACA,oCACA,+BACA,+BACA,0CAIA,8DACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,wCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,sCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCAMF,oBACE,6DACA,+DACA,iEAOF,SACE,gCACA,uCACA,0BACA,oCACA,4BACA,+BACA,kCACA,kCACA,0CACA,+BAIA,8DACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,wCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCAMF,mBACE,qCAGF,iCAEE,mBAIF,gDACE,iCACE,iEAIJ,wCACE","file":"high-contrast-dark.always.css","sourcesContent":["@use \"sass:map\";\n@import \"../../themes/ionic.functions.color\";\n\n$primary: #7cabff;\n$secondary: #62bdff;\n$tertiary: #b6b9f9;\n$success: #4ada71;\n$warning: #ffce31;\n$danger: #fc9aa2;\n$light: #222428;\n$medium: #a8aab3;\n$dark: #f4f5f8;\n\n$colors: (\n primary: (\n base: $primary,\n contrast: #000,\n shade: get-color-shade($primary),\n tint: get-color-tint($primary)\n ),\n secondary: (\n base: $secondary,\n contrast: #000,\n shade: get-color-shade($secondary),\n tint: get-color-tint($secondary)\n ),\n tertiary: (\n base: $tertiary,\n contrast: #000,\n shade: get-color-shade($tertiary),\n tint: get-color-tint($tertiary)\n ),\n success: (\n base: $success,\n contrast: #000,\n shade: get-color-shade($success),\n tint: get-color-tint($success)\n ),\n warning: (\n base: $warning,\n contrast: #000,\n shade: get-color-shade($warning),\n tint: get-color-tint($warning)\n ),\n danger: (\n base: $danger,\n contrast: #000,\n shade: get-color-shade($danger),\n tint: get-color-tint($danger)\n ),\n light: (\n base: $light,\n contrast: #fff,\n shade: get-color-shade($light),\n tint: get-color-tint($light)\n ),\n medium: (\n base: $medium,\n contrast: #000,\n shade: get-color-shade($medium),\n tint: get-color-tint($medium)\n ),\n dark: (\n base: $dark,\n contrast: #000,\n shade: get-color-shade($dark),\n tint: get-color-tint($dark)\n )\n);\n\n/// Text step colors are generated based on\n/// how dark or light text can be. The darkest\n/// text color is usually the default text color (white or black).\n/// The darker the $lightest-text-color is, the darker each\n/// stepped color is. If you want to increase text contrast,\n/// make $lightest-text-color darker.\n$text-color: #ffffff;\n\n$darkest-text-color: #888888;\n$lightest-text-color: $text-color;\n\n/// Loop through each color object above\n/// and generate CSS Variables for each\n/// color. Do not use the ion-color function\n/// here because that will set the variable\n/// to evaluate to itself with a fallback.\n/// For example:\n/// --ion-color-primary: #{ion-color(primary, base)};\n/// Maps to:\n/// --ion-color-primary: var(--ion-color-primary, #...);\n\n/// We apply certain styles to the per-mode classes (ios and md)\n/// as opposed to setting everything in :root\n// so any high contrast dark styles override the standard\n/// contrast dark styles.\n@mixin high-contrast-dark-base-palette() {\n & {\n --ion-placeholder-opacity: 0.8;\n\n @each $color-name, $value in $colors {\n --ion-color-#{$color-name}: #{map.get($value, base)};\n --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))};\n --ion-color-#{$color-name}-contrast: #{map.get($value, contrast)};\n --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};\n --ion-color-#{$color-name}-shade: #{map.get($value, shade)};\n --ion-color-#{$color-name}-tint: #{map.get($value, tint)};\n }\n\n }\n}\n\n@mixin high-contrast-dark-ios-palette() {\n $background-color: #000000;\n \n & {\n --ion-background-color: #{$background-color};\n --ion-background-color-rgb: #{color-to-rgb-list($background-color)};\n --ion-text-color: #{$text-color};\n --ion-text-color-rgb: #{color-to-rgb-list($text-color)};\n --ion-item-background: #000000;\n --ion-card-background: #1c1c1d;\n --ion-tab-bar-background-focused: #252525;\n\n /// Only the item borders should increase in contrast\n /// Borders for elements like toolbars should remain the same\n --ion-item-border-color: var(--ion-background-color-step-400);\n --ion-text-color-step-50: #{mix($darkest-text-color, $lightest-text-color, 5%)};\n --ion-text-color-step-100: #{mix($darkest-text-color, $lightest-text-color, 10%)};\n --ion-text-color-step-150: #{mix($darkest-text-color, $lightest-text-color, 15%)};\n --ion-text-color-step-200: #{mix($darkest-text-color, $lightest-text-color, 20%)};\n --ion-text-color-step-250: #{mix($darkest-text-color, $lightest-text-color, 25%)};\n --ion-text-color-step-300: #{mix($darkest-text-color, $lightest-text-color, 30%)};\n --ion-text-color-step-350: #{mix($darkest-text-color, $lightest-text-color, 35%)};\n --ion-text-color-step-400: #{mix($darkest-text-color, $lightest-text-color, 40%)};\n --ion-text-color-step-450: #{mix($darkest-text-color, $lightest-text-color, 45%)};\n --ion-text-color-step-500: #{mix($darkest-text-color, $lightest-text-color, 50%)};\n --ion-text-color-step-550: #{mix($darkest-text-color, $lightest-text-color, 55%)};\n --ion-text-color-step-600: #{mix($darkest-text-color, $lightest-text-color, 60%)};\n --ion-text-color-step-650: #{mix($darkest-text-color, $lightest-text-color, 65%)};\n --ion-text-color-step-700: #{mix($darkest-text-color, $lightest-text-color, 70%)};\n --ion-text-color-step-750: #{mix($darkest-text-color, $lightest-text-color, 75%)};\n --ion-text-color-step-800: #{mix($darkest-text-color, $lightest-text-color, 80%)};\n --ion-text-color-step-850: #{mix($darkest-text-color, $lightest-text-color, 85%)};\n --ion-text-color-step-900: #{mix($darkest-text-color, $lightest-text-color, 90%)};\n --ion-text-color-step-950: #{mix($darkest-text-color, $lightest-text-color, 95%)};\n --ion-background-color-step-50: #{mix($text-color, $background-color, 5%)};\n --ion-background-color-step-100: #{mix($text-color, $background-color, 10%)};\n --ion-background-color-step-150: #{mix($text-color, $background-color, 15%)};\n --ion-background-color-step-200: #{mix($text-color, $background-color, 20%)};\n --ion-background-color-step-250: #{mix($text-color, $background-color, 25%)};\n --ion-background-color-step-300: #{mix($text-color, $background-color, 30%)};\n --ion-background-color-step-350: #{mix($text-color, $background-color, 35%)};\n --ion-background-color-step-400: #{mix($text-color, $background-color, 40%)};\n --ion-background-color-step-450: #{mix($text-color, $background-color, 45%)};\n --ion-background-color-step-500: #{mix($text-color, $background-color, 50%)};\n --ion-background-color-step-550: #{mix($text-color, $background-color, 55%)};\n --ion-background-color-step-600: #{mix($text-color, $background-color, 60%)};\n --ion-background-color-step-650: #{mix($text-color, $background-color, 65%)};\n --ion-background-color-step-700: #{mix($text-color, $background-color, 70%)};\n --ion-background-color-step-750: #{mix($text-color, $background-color, 75%)};\n --ion-background-color-step-800: #{mix($text-color, $background-color, 80%)};\n --ion-background-color-step-850: #{mix($text-color, $background-color, 85%)};\n --ion-background-color-step-900: #{mix($text-color, $background-color, 90%)};\n --ion-background-color-step-950: #{mix($text-color, $background-color, 95%)};\n }\n\n // Modal\n // --------------------------------------------------\n\n & ion-modal {\n --ion-background-color: var(--ion-background-color-step-100);\n --ion-toolbar-background: var(--ion-background-color-step-150);\n --ion-toolbar-border-color: var(--ion-background-color-step-250);\n }\n}\n\n@mixin high-contrast-dark-md-palette() {\n $background-color: #121212;\n \n & {\n --ion-background-color: #{$background-color};\n --ion-background-color-rgb: #{color-to-rgb-list($background-color)};\n --ion-text-color: #{$text-color};\n --ion-text-color-rgb: #{color-to-rgb-list($text-color)};\n --ion-border-color: #222222;\n --ion-item-background: #1e1e1e;\n --ion-toolbar-background: #1f1f1f;\n --ion-tab-bar-background: #1f1f1f;\n --ion-tab-bar-background-focused: #353535;\n --ion-card-background: #1e1e1e;\n\n /// Only the item borders should increase in contrast\n /// Borders for elements like toolbars should remain the same\n --ion-item-border-color: var(--ion-background-color-step-400);\n --ion-text-color-step-50: #{mix($darkest-text-color, $lightest-text-color, 5%)};\n --ion-text-color-step-100: #{mix($darkest-text-color, $lightest-text-color, 10%)};\n --ion-text-color-step-150: #{mix($darkest-text-color, $lightest-text-color, 15%)};\n --ion-text-color-step-200: #{mix($darkest-text-color, $lightest-text-color, 20%)};\n --ion-text-color-step-250: #{mix($darkest-text-color, $lightest-text-color, 25%)};\n --ion-text-color-step-300: #{mix($darkest-text-color, $lightest-text-color, 30%)};\n --ion-text-color-step-350: #{mix($darkest-text-color, $lightest-text-color, 35%)};\n --ion-text-color-step-400: #{mix($darkest-text-color, $lightest-text-color, 40%)};\n --ion-text-color-step-450: #{mix($darkest-text-color, $lightest-text-color, 45%)};\n --ion-text-color-step-500: #{mix($darkest-text-color, $lightest-text-color, 50%)};\n --ion-text-color-step-550: #{mix($darkest-text-color, $lightest-text-color, 55%)};\n --ion-text-color-step-600: #{mix($darkest-text-color, $lightest-text-color, 60%)};\n --ion-text-color-step-650: #{mix($darkest-text-color, $lightest-text-color, 65%)};\n --ion-text-color-step-700: #{mix($darkest-text-color, $lightest-text-color, 70%)};\n --ion-text-color-step-750: #{mix($darkest-text-color, $lightest-text-color, 75%)};\n --ion-text-color-step-800: #{mix($darkest-text-color, $lightest-text-color, 80%)};\n --ion-text-color-step-850: #{mix($darkest-text-color, $lightest-text-color, 85%)};\n --ion-text-color-step-900: #{mix($darkest-text-color, $lightest-text-color, 90%)};\n --ion-text-color-step-950: #{mix($darkest-text-color, $lightest-text-color, 95%)};\n --ion-background-color-step-50: #{mix($text-color, $background-color, 5%)};\n --ion-background-color-step-100: #{mix($text-color, $background-color, 10%)};\n --ion-background-color-step-150: #{mix($text-color, $background-color, 15%)};\n --ion-background-color-step-200: #{mix($text-color, $background-color, 20%)};\n --ion-background-color-step-250: #{mix($text-color, $background-color, 25%)};\n --ion-background-color-step-300: #{mix($text-color, $background-color, 30%)};\n --ion-background-color-step-350: #{mix($text-color, $background-color, 35%)};\n --ion-background-color-step-400: #{mix($text-color, $background-color, 40%)};\n --ion-background-color-step-450: #{mix($text-color, $background-color, 45%)};\n --ion-background-color-step-500: #{mix($text-color, $background-color, 50%)};\n --ion-background-color-step-550: #{mix($text-color, $background-color, 55%)};\n --ion-background-color-step-600: #{mix($text-color, $background-color, 60%)};\n --ion-background-color-step-650: #{mix($text-color, $background-color, 65%)};\n --ion-background-color-step-700: #{mix($text-color, $background-color, 70%)};\n --ion-background-color-step-750: #{mix($text-color, $background-color, 75%)};\n --ion-background-color-step-800: #{mix($text-color, $background-color, 80%)};\n --ion-background-color-step-850: #{mix($text-color, $background-color, 85%)};\n --ion-background-color-step-900: #{mix($text-color, $background-color, 90%)};\n --ion-background-color-step-950: #{mix($text-color, $background-color, 95%)};\n }\n\n // Toast\n // --------------------------------------------------\n\n & ion-toast {\n --color: var(--ion-background-color);\n }\n\n & ion-toast::part(button) {\n // Fallback for browsers that don't support color-mix\n color: var(--color);\n }\n\n /* stylelint-disable-next-line order/order */\n @supports (color: color-mix(in lch, plum, pink)) {\n & ion-toast::part(button) {\n color: color-mix(in srgb, var(--color) 73%, var(--button-color));\n }\n }\n\n & ion-toast::part(button cancel) {\n color: var(--color);\n }\n}\n"]}
package/css/palettes/high-contrast-dark.class.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/css/palettes/high-contrast-dark.scss"],"names":[],"mappings":"AAyGE,4CACE,+BAGE,6BACA,uCACA,mCACA,0CACA,mCACA,kCALA,+BACA,wCACA,qCACA,4CACA,qCACA,oCALA,8BACA,wCACA,oCACA,2CACA,oCACA,mCALA,6BACA,sCACA,mCACA,0CACA,mCACA,kCALA,6BACA,sCACA,mCACA,0CACA,mCACA,kCALA,4BACA,sCACA,kCACA,yCACA,kCACA,iCALA,2BACA,kCACA,iCACA,8CACA,iCACA,gCALA,4BACA,sCACA,kCACA,yCACA,kCACA,iCALA,0BACA,oCACA,gCACA,uCACA,gCACA,+BAQJ,gDACE,gCACA,oCACA,0BACA,oCACA,+BACA,+BACA,0CAIA,8DACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,wCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,sCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCAMF,0DACE,6DACA,+DACA,iEAOF,+CACE,gCACA,uCACA,0BACA,oCACA,4BACA,+BACA,kCACA,kCACA,0CACA,+BAIA,8DACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,wCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCAMF,yDACE,qCAGF,uEAEE,mBAIF,gDACE,uEACE,iEAIJ,8EACE","file":"high-contrast-dark.class.css","sourcesContent":["@use \"sass:map\";\n@import \"../../themes/functions.color\";\n\n$primary: #7cabff;\n$secondary: #62bdff;\n$tertiary: #b6b9f9;\n$success: #4ada71;\n$warning: #ffce31;\n$danger: #fc9aa2;\n$light: #222428;\n$medium: #a8aab3;\n$dark: #f4f5f8;\n\n$colors: (\n primary: (\n base: $primary,\n contrast: #000,\n shade: get-color-shade($primary),\n tint: get-color-tint($primary),\n foreground: $primary,\n ),\n secondary: (\n base: $secondary,\n contrast: #000,\n shade: get-color-shade($secondary),\n tint: get-color-tint($secondary),\n foreground: $secondary,\n ),\n tertiary: (\n base: $tertiary,\n contrast: #000,\n shade: get-color-shade($tertiary),\n tint: get-color-tint($tertiary),\n foreground: $tertiary,\n ),\n success: (\n base: $success,\n contrast: #000,\n shade: get-color-shade($success),\n tint: get-color-tint($success),\n foreground: $success,\n ),\n warning: (\n base: $warning,\n contrast: #000,\n shade: get-color-shade($warning),\n tint: get-color-tint($warning),\n foreground: $warning,\n ),\n danger: (\n base: $danger,\n contrast: #000,\n shade: get-color-shade($danger),\n tint: get-color-tint($danger),\n foreground: $danger,\n ),\n light: (\n base: $light,\n contrast: #fff,\n shade: get-color-shade($light),\n tint: get-color-tint($light),\n foreground: $light,\n ),\n medium: (\n base: $medium,\n contrast: #000,\n shade: get-color-shade($medium),\n tint: get-color-tint($medium),\n foreground: $medium,\n ),\n dark: (\n base: $dark,\n contrast: #000,\n shade: get-color-shade($dark),\n tint: get-color-tint($dark),\n foreground: $dark,\n ),\n);\n\n/// Text step colors are generated based on\n/// how dark or light text can be. The darkest\n/// text color is usually the default text color (white or black).\n/// The darker the $lightest-text-color is, the darker each\n/// stepped color is. If you want to increase text contrast,\n/// make $lightest-text-color darker.\n$text-color: #ffffff;\n\n$darkest-text-color: #888888;\n$lightest-text-color: $text-color;\n\n/// Loop through each color object above\n/// and generate CSS Variables for each\n/// color. Do not use the ion-color function\n/// here because that will set the variable\n/// to evaluate to itself with a fallback.\n/// For example:\n/// --ion-color-primary: #{ion-color(primary, base)};\n/// Maps to:\n/// --ion-color-primary: var(--ion-color-primary, #...);\n\n/// We apply certain styles to the per-mode classes (ios and md)\n/// as opposed to setting everything in :root\n// so any high contrast dark styles override the standard\n/// contrast dark styles.\n@mixin high-contrast-dark-base-palette() {\n & {\n --ion-placeholder-opacity: 0.8;\n\n @each $color-name, $value in $colors {\n --ion-color-#{$color-name}: #{map.get($value, base)};\n --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))};\n --ion-color-#{$color-name}-contrast: #{map.get($value, contrast)};\n --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};\n --ion-color-#{$color-name}-shade: #{map.get($value, shade)};\n --ion-color-#{$color-name}-tint: #{map.get($value, tint)};\n }\n }\n}\n\n@mixin high-contrast-dark-ios-palette() {\n $background-color: #000000;\n\n & {\n --ion-background-color: #{$background-color};\n --ion-background-color-rgb: #{color-to-rgb-list($background-color)};\n --ion-text-color: #{$text-color};\n --ion-text-color-rgb: #{color-to-rgb-list($text-color)};\n --ion-item-background: #000000;\n --ion-card-background: #1c1c1d;\n --ion-tab-bar-background-focused: #252525;\n\n /// Only the item borders should increase in contrast\n /// Borders for elements like toolbars should remain the same\n --ion-item-border-color: var(--ion-background-color-step-400);\n --ion-text-color-step-50: #{mix($darkest-text-color, $lightest-text-color, 5%)};\n --ion-text-color-step-100: #{mix($darkest-text-color, $lightest-text-color, 10%)};\n --ion-text-color-step-150: #{mix($darkest-text-color, $lightest-text-color, 15%)};\n --ion-text-color-step-200: #{mix($darkest-text-color, $lightest-text-color, 20%)};\n --ion-text-color-step-250: #{mix($darkest-text-color, $lightest-text-color, 25%)};\n --ion-text-color-step-300: #{mix($darkest-text-color, $lightest-text-color, 30%)};\n --ion-text-color-step-350: #{mix($darkest-text-color, $lightest-text-color, 35%)};\n --ion-text-color-step-400: #{mix($darkest-text-color, $lightest-text-color, 40%)};\n --ion-text-color-step-450: #{mix($darkest-text-color, $lightest-text-color, 45%)};\n --ion-text-color-step-500: #{mix($darkest-text-color, $lightest-text-color, 50%)};\n --ion-text-color-step-550: #{mix($darkest-text-color, $lightest-text-color, 55%)};\n --ion-text-color-step-600: #{mix($darkest-text-color, $lightest-text-color, 60%)};\n --ion-text-color-step-650: #{mix($darkest-text-color, $lightest-text-color, 65%)};\n --ion-text-color-step-700: #{mix($darkest-text-color, $lightest-text-color, 70%)};\n --ion-text-color-step-750: #{mix($darkest-text-color, $lightest-text-color, 75%)};\n --ion-text-color-step-800: #{mix($darkest-text-color, $lightest-text-color, 80%)};\n --ion-text-color-step-850: #{mix($darkest-text-color, $lightest-text-color, 85%)};\n --ion-text-color-step-900: #{mix($darkest-text-color, $lightest-text-color, 90%)};\n --ion-text-color-step-950: #{mix($darkest-text-color, $lightest-text-color, 95%)};\n --ion-background-color-step-50: #{mix($text-color, $background-color, 5%)};\n --ion-background-color-step-100: #{mix($text-color, $background-color, 10%)};\n --ion-background-color-step-150: #{mix($text-color, $background-color, 15%)};\n --ion-background-color-step-200: #{mix($text-color, $background-color, 20%)};\n --ion-background-color-step-250: #{mix($text-color, $background-color, 25%)};\n --ion-background-color-step-300: #{mix($text-color, $background-color, 30%)};\n --ion-background-color-step-350: #{mix($text-color, $background-color, 35%)};\n --ion-background-color-step-400: #{mix($text-color, $background-color, 40%)};\n --ion-background-color-step-450: #{mix($text-color, $background-color, 45%)};\n --ion-background-color-step-500: #{mix($text-color, $background-color, 50%)};\n --ion-background-color-step-550: #{mix($text-color, $background-color, 55%)};\n --ion-background-color-step-600: #{mix($text-color, $background-color, 60%)};\n --ion-background-color-step-650: #{mix($text-color, $background-color, 65%)};\n --ion-background-color-step-700: #{mix($text-color, $background-color, 70%)};\n --ion-background-color-step-750: #{mix($text-color, $background-color, 75%)};\n --ion-background-color-step-800: #{mix($text-color, $background-color, 80%)};\n --ion-background-color-step-850: #{mix($text-color, $background-color, 85%)};\n --ion-background-color-step-900: #{mix($text-color, $background-color, 90%)};\n --ion-background-color-step-950: #{mix($text-color, $background-color, 95%)};\n }\n\n // Modal\n // --------------------------------------------------\n\n & ion-modal {\n --ion-background-color: var(--ion-background-color-step-100);\n --ion-toolbar-background: var(--ion-background-color-step-150);\n --ion-toolbar-border-color: var(--ion-background-color-step-250);\n }\n}\n\n@mixin high-contrast-dark-md-palette() {\n $background-color: #121212;\n\n & {\n --ion-background-color: #{$background-color};\n --ion-background-color-rgb: #{color-to-rgb-list($background-color)};\n --ion-text-color: #{$text-color};\n --ion-text-color-rgb: #{color-to-rgb-list($text-color)};\n --ion-border-color: #222222;\n --ion-item-background: #1e1e1e;\n --ion-toolbar-background: #1f1f1f;\n --ion-tab-bar-background: #1f1f1f;\n --ion-tab-bar-background-focused: #353535;\n --ion-card-background: #1e1e1e;\n\n /// Only the item borders should increase in contrast\n /// Borders for elements like toolbars should remain the same\n --ion-item-border-color: var(--ion-background-color-step-400);\n --ion-text-color-step-50: #{mix($darkest-text-color, $lightest-text-color, 5%)};\n --ion-text-color-step-100: #{mix($darkest-text-color, $lightest-text-color, 10%)};\n --ion-text-color-step-150: #{mix($darkest-text-color, $lightest-text-color, 15%)};\n --ion-text-color-step-200: #{mix($darkest-text-color, $lightest-text-color, 20%)};\n --ion-text-color-step-250: #{mix($darkest-text-color, $lightest-text-color, 25%)};\n --ion-text-color-step-300: #{mix($darkest-text-color, $lightest-text-color, 30%)};\n --ion-text-color-step-350: #{mix($darkest-text-color, $lightest-text-color, 35%)};\n --ion-text-color-step-400: #{mix($darkest-text-color, $lightest-text-color, 40%)};\n --ion-text-color-step-450: #{mix($darkest-text-color, $lightest-text-color, 45%)};\n --ion-text-color-step-500: #{mix($darkest-text-color, $lightest-text-color, 50%)};\n --ion-text-color-step-550: #{mix($darkest-text-color, $lightest-text-color, 55%)};\n --ion-text-color-step-600: #{mix($darkest-text-color, $lightest-text-color, 60%)};\n --ion-text-color-step-650: #{mix($darkest-text-color, $lightest-text-color, 65%)};\n --ion-text-color-step-700: #{mix($darkest-text-color, $lightest-text-color, 70%)};\n --ion-text-color-step-750: #{mix($darkest-text-color, $lightest-text-color, 75%)};\n --ion-text-color-step-800: #{mix($darkest-text-color, $lightest-text-color, 80%)};\n --ion-text-color-step-850: #{mix($darkest-text-color, $lightest-text-color, 85%)};\n --ion-text-color-step-900: #{mix($darkest-text-color, $lightest-text-color, 90%)};\n --ion-text-color-step-950: #{mix($darkest-text-color, $lightest-text-color, 95%)};\n --ion-background-color-step-50: #{mix($text-color, $background-color, 5%)};\n --ion-background-color-step-100: #{mix($text-color, $background-color, 10%)};\n --ion-background-color-step-150: #{mix($text-color, $background-color, 15%)};\n --ion-background-color-step-200: #{mix($text-color, $background-color, 20%)};\n --ion-background-color-step-250: #{mix($text-color, $background-color, 25%)};\n --ion-background-color-step-300: #{mix($text-color, $background-color, 30%)};\n --ion-background-color-step-350: #{mix($text-color, $background-color, 35%)};\n --ion-background-color-step-400: #{mix($text-color, $background-color, 40%)};\n --ion-background-color-step-450: #{mix($text-color, $background-color, 45%)};\n --ion-background-color-step-500: #{mix($text-color, $background-color, 50%)};\n --ion-background-color-step-550: #{mix($text-color, $background-color, 55%)};\n --ion-background-color-step-600: #{mix($text-color, $background-color, 60%)};\n --ion-background-color-step-650: #{mix($text-color, $background-color, 65%)};\n --ion-background-color-step-700: #{mix($text-color, $background-color, 70%)};\n --ion-background-color-step-750: #{mix($text-color, $background-color, 75%)};\n --ion-background-color-step-800: #{mix($text-color, $background-color, 80%)};\n --ion-background-color-step-850: #{mix($text-color, $background-color, 85%)};\n --ion-background-color-step-900: #{mix($text-color, $background-color, 90%)};\n --ion-background-color-step-950: #{mix($text-color, $background-color, 95%)};\n }\n\n // Toast\n // --------------------------------------------------\n\n & ion-toast {\n --color: var(--ion-background-color);\n }\n\n & ion-toast::part(button) {\n // Fallback for browsers that don't support color-mix\n color: var(--color);\n }\n\n /* stylelint-disable-next-line order/order */\n @supports (color: color-mix(in lch, plum, pink)) {\n & ion-toast::part(button) {\n color: color-mix(in srgb, var(--color) 73%, var(--button-color));\n }\n }\n\n & ion-toast::part(button cancel) {\n color: var(--color);\n }\n}\n"]}
1
+ {"version":3,"sourceRoot":"","sources":["../../src/css/palettes/high-contrast-dark.scss"],"names":[],"mappings":"AAgGE,4CACE,+BAGE,6BACA,uCACA,mCACA,0CACA,mCACA,kCALA,+BACA,wCACA,qCACA,4CACA,qCACA,oCALA,8BACA,wCACA,oCACA,2CACA,oCACA,mCALA,6BACA,sCACA,mCACA,0CACA,mCACA,kCALA,6BACA,sCACA,mCACA,0CACA,mCACA,kCALA,4BACA,sCACA,kCACA,yCACA,kCACA,iCALA,2BACA,kCACA,iCACA,8CACA,iCACA,gCALA,4BACA,sCACA,kCACA,yCACA,kCACA,iCALA,0BACA,oCACA,gCACA,uCACA,gCACA,+BASJ,gDACE,gCACA,oCACA,0BACA,oCACA,+BACA,+BACA,0CAIA,8DACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,wCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,sCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCAMF,0DACE,6DACA,+DACA,iEAOF,+CACE,gCACA,uCACA,0BACA,oCACA,4BACA,+BACA,kCACA,kCACA,0CACA,+BAIA,8DACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,wCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCAMF,yDACE,qCAGF,uEAEE,mBAIF,gDACE,uEACE,iEAIJ,8EACE","file":"high-contrast-dark.class.css","sourcesContent":["@use \"sass:map\";\n@import \"../../themes/ionic.functions.color\";\n\n$primary: #7cabff;\n$secondary: #62bdff;\n$tertiary: #b6b9f9;\n$success: #4ada71;\n$warning: #ffce31;\n$danger: #fc9aa2;\n$light: #222428;\n$medium: #a8aab3;\n$dark: #f4f5f8;\n\n$colors: (\n primary: (\n base: $primary,\n contrast: #000,\n shade: get-color-shade($primary),\n tint: get-color-tint($primary)\n ),\n secondary: (\n base: $secondary,\n contrast: #000,\n shade: get-color-shade($secondary),\n tint: get-color-tint($secondary)\n ),\n tertiary: (\n base: $tertiary,\n contrast: #000,\n shade: get-color-shade($tertiary),\n tint: get-color-tint($tertiary)\n ),\n success: (\n base: $success,\n contrast: #000,\n shade: get-color-shade($success),\n tint: get-color-tint($success)\n ),\n warning: (\n base: $warning,\n contrast: #000,\n shade: get-color-shade($warning),\n tint: get-color-tint($warning)\n ),\n danger: (\n base: $danger,\n contrast: #000,\n shade: get-color-shade($danger),\n tint: get-color-tint($danger)\n ),\n light: (\n base: $light,\n contrast: #fff,\n shade: get-color-shade($light),\n tint: get-color-tint($light)\n ),\n medium: (\n base: $medium,\n contrast: #000,\n shade: get-color-shade($medium),\n tint: get-color-tint($medium)\n ),\n dark: (\n base: $dark,\n contrast: #000,\n shade: get-color-shade($dark),\n tint: get-color-tint($dark)\n )\n);\n\n/// Text step colors are generated based on\n/// how dark or light text can be. The darkest\n/// text color is usually the default text color (white or black).\n/// The darker the $lightest-text-color is, the darker each\n/// stepped color is. If you want to increase text contrast,\n/// make $lightest-text-color darker.\n$text-color: #ffffff;\n\n$darkest-text-color: #888888;\n$lightest-text-color: $text-color;\n\n/// Loop through each color object above\n/// and generate CSS Variables for each\n/// color. Do not use the ion-color function\n/// here because that will set the variable\n/// to evaluate to itself with a fallback.\n/// For example:\n/// --ion-color-primary: #{ion-color(primary, base)};\n/// Maps to:\n/// --ion-color-primary: var(--ion-color-primary, #...);\n\n/// We apply certain styles to the per-mode classes (ios and md)\n/// as opposed to setting everything in :root\n// so any high contrast dark styles override the standard\n/// contrast dark styles.\n@mixin high-contrast-dark-base-palette() {\n & {\n --ion-placeholder-opacity: 0.8;\n\n @each $color-name, $value in $colors {\n --ion-color-#{$color-name}: #{map.get($value, base)};\n --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))};\n --ion-color-#{$color-name}-contrast: #{map.get($value, contrast)};\n --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};\n --ion-color-#{$color-name}-shade: #{map.get($value, shade)};\n --ion-color-#{$color-name}-tint: #{map.get($value, tint)};\n }\n\n }\n}\n\n@mixin high-contrast-dark-ios-palette() {\n $background-color: #000000;\n \n & {\n --ion-background-color: #{$background-color};\n --ion-background-color-rgb: #{color-to-rgb-list($background-color)};\n --ion-text-color: #{$text-color};\n --ion-text-color-rgb: #{color-to-rgb-list($text-color)};\n --ion-item-background: #000000;\n --ion-card-background: #1c1c1d;\n --ion-tab-bar-background-focused: #252525;\n\n /// Only the item borders should increase in contrast\n /// Borders for elements like toolbars should remain the same\n --ion-item-border-color: var(--ion-background-color-step-400);\n --ion-text-color-step-50: #{mix($darkest-text-color, $lightest-text-color, 5%)};\n --ion-text-color-step-100: #{mix($darkest-text-color, $lightest-text-color, 10%)};\n --ion-text-color-step-150: #{mix($darkest-text-color, $lightest-text-color, 15%)};\n --ion-text-color-step-200: #{mix($darkest-text-color, $lightest-text-color, 20%)};\n --ion-text-color-step-250: #{mix($darkest-text-color, $lightest-text-color, 25%)};\n --ion-text-color-step-300: #{mix($darkest-text-color, $lightest-text-color, 30%)};\n --ion-text-color-step-350: #{mix($darkest-text-color, $lightest-text-color, 35%)};\n --ion-text-color-step-400: #{mix($darkest-text-color, $lightest-text-color, 40%)};\n --ion-text-color-step-450: #{mix($darkest-text-color, $lightest-text-color, 45%)};\n --ion-text-color-step-500: #{mix($darkest-text-color, $lightest-text-color, 50%)};\n --ion-text-color-step-550: #{mix($darkest-text-color, $lightest-text-color, 55%)};\n --ion-text-color-step-600: #{mix($darkest-text-color, $lightest-text-color, 60%)};\n --ion-text-color-step-650: #{mix($darkest-text-color, $lightest-text-color, 65%)};\n --ion-text-color-step-700: #{mix($darkest-text-color, $lightest-text-color, 70%)};\n --ion-text-color-step-750: #{mix($darkest-text-color, $lightest-text-color, 75%)};\n --ion-text-color-step-800: #{mix($darkest-text-color, $lightest-text-color, 80%)};\n --ion-text-color-step-850: #{mix($darkest-text-color, $lightest-text-color, 85%)};\n --ion-text-color-step-900: #{mix($darkest-text-color, $lightest-text-color, 90%)};\n --ion-text-color-step-950: #{mix($darkest-text-color, $lightest-text-color, 95%)};\n --ion-background-color-step-50: #{mix($text-color, $background-color, 5%)};\n --ion-background-color-step-100: #{mix($text-color, $background-color, 10%)};\n --ion-background-color-step-150: #{mix($text-color, $background-color, 15%)};\n --ion-background-color-step-200: #{mix($text-color, $background-color, 20%)};\n --ion-background-color-step-250: #{mix($text-color, $background-color, 25%)};\n --ion-background-color-step-300: #{mix($text-color, $background-color, 30%)};\n --ion-background-color-step-350: #{mix($text-color, $background-color, 35%)};\n --ion-background-color-step-400: #{mix($text-color, $background-color, 40%)};\n --ion-background-color-step-450: #{mix($text-color, $background-color, 45%)};\n --ion-background-color-step-500: #{mix($text-color, $background-color, 50%)};\n --ion-background-color-step-550: #{mix($text-color, $background-color, 55%)};\n --ion-background-color-step-600: #{mix($text-color, $background-color, 60%)};\n --ion-background-color-step-650: #{mix($text-color, $background-color, 65%)};\n --ion-background-color-step-700: #{mix($text-color, $background-color, 70%)};\n --ion-background-color-step-750: #{mix($text-color, $background-color, 75%)};\n --ion-background-color-step-800: #{mix($text-color, $background-color, 80%)};\n --ion-background-color-step-850: #{mix($text-color, $background-color, 85%)};\n --ion-background-color-step-900: #{mix($text-color, $background-color, 90%)};\n --ion-background-color-step-950: #{mix($text-color, $background-color, 95%)};\n }\n\n // Modal\n // --------------------------------------------------\n\n & ion-modal {\n --ion-background-color: var(--ion-background-color-step-100);\n --ion-toolbar-background: var(--ion-background-color-step-150);\n --ion-toolbar-border-color: var(--ion-background-color-step-250);\n }\n}\n\n@mixin high-contrast-dark-md-palette() {\n $background-color: #121212;\n \n & {\n --ion-background-color: #{$background-color};\n --ion-background-color-rgb: #{color-to-rgb-list($background-color)};\n --ion-text-color: #{$text-color};\n --ion-text-color-rgb: #{color-to-rgb-list($text-color)};\n --ion-border-color: #222222;\n --ion-item-background: #1e1e1e;\n --ion-toolbar-background: #1f1f1f;\n --ion-tab-bar-background: #1f1f1f;\n --ion-tab-bar-background-focused: #353535;\n --ion-card-background: #1e1e1e;\n\n /// Only the item borders should increase in contrast\n /// Borders for elements like toolbars should remain the same\n --ion-item-border-color: var(--ion-background-color-step-400);\n --ion-text-color-step-50: #{mix($darkest-text-color, $lightest-text-color, 5%)};\n --ion-text-color-step-100: #{mix($darkest-text-color, $lightest-text-color, 10%)};\n --ion-text-color-step-150: #{mix($darkest-text-color, $lightest-text-color, 15%)};\n --ion-text-color-step-200: #{mix($darkest-text-color, $lightest-text-color, 20%)};\n --ion-text-color-step-250: #{mix($darkest-text-color, $lightest-text-color, 25%)};\n --ion-text-color-step-300: #{mix($darkest-text-color, $lightest-text-color, 30%)};\n --ion-text-color-step-350: #{mix($darkest-text-color, $lightest-text-color, 35%)};\n --ion-text-color-step-400: #{mix($darkest-text-color, $lightest-text-color, 40%)};\n --ion-text-color-step-450: #{mix($darkest-text-color, $lightest-text-color, 45%)};\n --ion-text-color-step-500: #{mix($darkest-text-color, $lightest-text-color, 50%)};\n --ion-text-color-step-550: #{mix($darkest-text-color, $lightest-text-color, 55%)};\n --ion-text-color-step-600: #{mix($darkest-text-color, $lightest-text-color, 60%)};\n --ion-text-color-step-650: #{mix($darkest-text-color, $lightest-text-color, 65%)};\n --ion-text-color-step-700: #{mix($darkest-text-color, $lightest-text-color, 70%)};\n --ion-text-color-step-750: #{mix($darkest-text-color, $lightest-text-color, 75%)};\n --ion-text-color-step-800: #{mix($darkest-text-color, $lightest-text-color, 80%)};\n --ion-text-color-step-850: #{mix($darkest-text-color, $lightest-text-color, 85%)};\n --ion-text-color-step-900: #{mix($darkest-text-color, $lightest-text-color, 90%)};\n --ion-text-color-step-950: #{mix($darkest-text-color, $lightest-text-color, 95%)};\n --ion-background-color-step-50: #{mix($text-color, $background-color, 5%)};\n --ion-background-color-step-100: #{mix($text-color, $background-color, 10%)};\n --ion-background-color-step-150: #{mix($text-color, $background-color, 15%)};\n --ion-background-color-step-200: #{mix($text-color, $background-color, 20%)};\n --ion-background-color-step-250: #{mix($text-color, $background-color, 25%)};\n --ion-background-color-step-300: #{mix($text-color, $background-color, 30%)};\n --ion-background-color-step-350: #{mix($text-color, $background-color, 35%)};\n --ion-background-color-step-400: #{mix($text-color, $background-color, 40%)};\n --ion-background-color-step-450: #{mix($text-color, $background-color, 45%)};\n --ion-background-color-step-500: #{mix($text-color, $background-color, 50%)};\n --ion-background-color-step-550: #{mix($text-color, $background-color, 55%)};\n --ion-background-color-step-600: #{mix($text-color, $background-color, 60%)};\n --ion-background-color-step-650: #{mix($text-color, $background-color, 65%)};\n --ion-background-color-step-700: #{mix($text-color, $background-color, 70%)};\n --ion-background-color-step-750: #{mix($text-color, $background-color, 75%)};\n --ion-background-color-step-800: #{mix($text-color, $background-color, 80%)};\n --ion-background-color-step-850: #{mix($text-color, $background-color, 85%)};\n --ion-background-color-step-900: #{mix($text-color, $background-color, 90%)};\n --ion-background-color-step-950: #{mix($text-color, $background-color, 95%)};\n }\n\n // Toast\n // --------------------------------------------------\n\n & ion-toast {\n --color: var(--ion-background-color);\n }\n\n & ion-toast::part(button) {\n // Fallback for browsers that don't support color-mix\n color: var(--color);\n }\n\n /* stylelint-disable-next-line order/order */\n @supports (color: color-mix(in lch, plum, pink)) {\n & ion-toast::part(button) {\n color: color-mix(in srgb, var(--color) 73%, var(--button-color));\n }\n }\n\n & ion-toast::part(button cancel) {\n color: var(--color);\n }\n}\n"]}
package/css/palettes/high-contrast-dark.system.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/css/palettes/high-contrast-dark.system.scss","../../src/css/palettes/high-contrast-dark.scss"],"names":[],"mappings":"AAEA,+DCuGE,MACE,+BAGE,6BACA,uCACA,mCACA,0CACA,mCACA,kCALA,+BACA,wCACA,qCACA,4CACA,qCACA,oCALA,8BACA,wCACA,oCACA,2CACA,oCACA,mCALA,6BACA,sCACA,mCACA,0CACA,mCACA,kCALA,6BACA,sCACA,mCACA,0CACA,mCACA,kCALA,4BACA,sCACA,kCACA,yCACA,kCACA,iCALA,2BACA,kCACA,iCACA,8CACA,iCACA,gCALA,4BACA,sCACA,kCACA,yCACA,kCACA,iCALA,0BACA,oCACA,gCACA,uCACA,gCACA,+BAQJ,UACE,gCACA,oCACA,0BACA,oCACA,+BACA,+BACA,0CAIA,8DACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,wCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,sCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCAMF,oBACE,6DACA,+DACA,iEAOF,SACE,gCACA,uCACA,0BACA,oCACA,4BACA,+BACA,kCACA,kCACA,0CACA,+BAIA,8DACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,wCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCAMF,mBACE,qCAGF,iCAEE,mBAIF,gDACE,iCACE,iEAIJ,wCACE","file":"high-contrast-dark.system.css","sourcesContent":["@import \"./high-contrast-dark\";\n\n@media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n :root {\n @include high-contrast-dark-base-palette();\n }\n\n :root.ios {\n @include high-contrast-dark-ios-palette();\n }\n\n :root.md {\n @include high-contrast-dark-md-palette();\n }\n}\n","@use \"sass:map\";\n@import \"../../themes/functions.color\";\n\n$primary: #7cabff;\n$secondary: #62bdff;\n$tertiary: #b6b9f9;\n$success: #4ada71;\n$warning: #ffce31;\n$danger: #fc9aa2;\n$light: #222428;\n$medium: #a8aab3;\n$dark: #f4f5f8;\n\n$colors: (\n primary: (\n base: $primary,\n contrast: #000,\n shade: get-color-shade($primary),\n tint: get-color-tint($primary),\n foreground: $primary,\n ),\n secondary: (\n base: $secondary,\n contrast: #000,\n shade: get-color-shade($secondary),\n tint: get-color-tint($secondary),\n foreground: $secondary,\n ),\n tertiary: (\n base: $tertiary,\n contrast: #000,\n shade: get-color-shade($tertiary),\n tint: get-color-tint($tertiary),\n foreground: $tertiary,\n ),\n success: (\n base: $success,\n contrast: #000,\n shade: get-color-shade($success),\n tint: get-color-tint($success),\n foreground: $success,\n ),\n warning: (\n base: $warning,\n contrast: #000,\n shade: get-color-shade($warning),\n tint: get-color-tint($warning),\n foreground: $warning,\n ),\n danger: (\n base: $danger,\n contrast: #000,\n shade: get-color-shade($danger),\n tint: get-color-tint($danger),\n foreground: $danger,\n ),\n light: (\n base: $light,\n contrast: #fff,\n shade: get-color-shade($light),\n tint: get-color-tint($light),\n foreground: $light,\n ),\n medium: (\n base: $medium,\n contrast: #000,\n shade: get-color-shade($medium),\n tint: get-color-tint($medium),\n foreground: $medium,\n ),\n dark: (\n base: $dark,\n contrast: #000,\n shade: get-color-shade($dark),\n tint: get-color-tint($dark),\n foreground: $dark,\n ),\n);\n\n/// Text step colors are generated based on\n/// how dark or light text can be. The darkest\n/// text color is usually the default text color (white or black).\n/// The darker the $lightest-text-color is, the darker each\n/// stepped color is. If you want to increase text contrast,\n/// make $lightest-text-color darker.\n$text-color: #ffffff;\n\n$darkest-text-color: #888888;\n$lightest-text-color: $text-color;\n\n/// Loop through each color object above\n/// and generate CSS Variables for each\n/// color. Do not use the ion-color function\n/// here because that will set the variable\n/// to evaluate to itself with a fallback.\n/// For example:\n/// --ion-color-primary: #{ion-color(primary, base)};\n/// Maps to:\n/// --ion-color-primary: var(--ion-color-primary, #...);\n\n/// We apply certain styles to the per-mode classes (ios and md)\n/// as opposed to setting everything in :root\n// so any high contrast dark styles override the standard\n/// contrast dark styles.\n@mixin high-contrast-dark-base-palette() {\n & {\n --ion-placeholder-opacity: 0.8;\n\n @each $color-name, $value in $colors {\n --ion-color-#{$color-name}: #{map.get($value, base)};\n --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))};\n --ion-color-#{$color-name}-contrast: #{map.get($value, contrast)};\n --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};\n --ion-color-#{$color-name}-shade: #{map.get($value, shade)};\n --ion-color-#{$color-name}-tint: #{map.get($value, tint)};\n }\n }\n}\n\n@mixin high-contrast-dark-ios-palette() {\n $background-color: #000000;\n\n & {\n --ion-background-color: #{$background-color};\n --ion-background-color-rgb: #{color-to-rgb-list($background-color)};\n --ion-text-color: #{$text-color};\n --ion-text-color-rgb: #{color-to-rgb-list($text-color)};\n --ion-item-background: #000000;\n --ion-card-background: #1c1c1d;\n --ion-tab-bar-background-focused: #252525;\n\n /// Only the item borders should increase in contrast\n /// Borders for elements like toolbars should remain the same\n --ion-item-border-color: var(--ion-background-color-step-400);\n --ion-text-color-step-50: #{mix($darkest-text-color, $lightest-text-color, 5%)};\n --ion-text-color-step-100: #{mix($darkest-text-color, $lightest-text-color, 10%)};\n --ion-text-color-step-150: #{mix($darkest-text-color, $lightest-text-color, 15%)};\n --ion-text-color-step-200: #{mix($darkest-text-color, $lightest-text-color, 20%)};\n --ion-text-color-step-250: #{mix($darkest-text-color, $lightest-text-color, 25%)};\n --ion-text-color-step-300: #{mix($darkest-text-color, $lightest-text-color, 30%)};\n --ion-text-color-step-350: #{mix($darkest-text-color, $lightest-text-color, 35%)};\n --ion-text-color-step-400: #{mix($darkest-text-color, $lightest-text-color, 40%)};\n --ion-text-color-step-450: #{mix($darkest-text-color, $lightest-text-color, 45%)};\n --ion-text-color-step-500: #{mix($darkest-text-color, $lightest-text-color, 50%)};\n --ion-text-color-step-550: #{mix($darkest-text-color, $lightest-text-color, 55%)};\n --ion-text-color-step-600: #{mix($darkest-text-color, $lightest-text-color, 60%)};\n --ion-text-color-step-650: #{mix($darkest-text-color, $lightest-text-color, 65%)};\n --ion-text-color-step-700: #{mix($darkest-text-color, $lightest-text-color, 70%)};\n --ion-text-color-step-750: #{mix($darkest-text-color, $lightest-text-color, 75%)};\n --ion-text-color-step-800: #{mix($darkest-text-color, $lightest-text-color, 80%)};\n --ion-text-color-step-850: #{mix($darkest-text-color, $lightest-text-color, 85%)};\n --ion-text-color-step-900: #{mix($darkest-text-color, $lightest-text-color, 90%)};\n --ion-text-color-step-950: #{mix($darkest-text-color, $lightest-text-color, 95%)};\n --ion-background-color-step-50: #{mix($text-color, $background-color, 5%)};\n --ion-background-color-step-100: #{mix($text-color, $background-color, 10%)};\n --ion-background-color-step-150: #{mix($text-color, $background-color, 15%)};\n --ion-background-color-step-200: #{mix($text-color, $background-color, 20%)};\n --ion-background-color-step-250: #{mix($text-color, $background-color, 25%)};\n --ion-background-color-step-300: #{mix($text-color, $background-color, 30%)};\n --ion-background-color-step-350: #{mix($text-color, $background-color, 35%)};\n --ion-background-color-step-400: #{mix($text-color, $background-color, 40%)};\n --ion-background-color-step-450: #{mix($text-color, $background-color, 45%)};\n --ion-background-color-step-500: #{mix($text-color, $background-color, 50%)};\n --ion-background-color-step-550: #{mix($text-color, $background-color, 55%)};\n --ion-background-color-step-600: #{mix($text-color, $background-color, 60%)};\n --ion-background-color-step-650: #{mix($text-color, $background-color, 65%)};\n --ion-background-color-step-700: #{mix($text-color, $background-color, 70%)};\n --ion-background-color-step-750: #{mix($text-color, $background-color, 75%)};\n --ion-background-color-step-800: #{mix($text-color, $background-color, 80%)};\n --ion-background-color-step-850: #{mix($text-color, $background-color, 85%)};\n --ion-background-color-step-900: #{mix($text-color, $background-color, 90%)};\n --ion-background-color-step-950: #{mix($text-color, $background-color, 95%)};\n }\n\n // Modal\n // --------------------------------------------------\n\n & ion-modal {\n --ion-background-color: var(--ion-background-color-step-100);\n --ion-toolbar-background: var(--ion-background-color-step-150);\n --ion-toolbar-border-color: var(--ion-background-color-step-250);\n }\n}\n\n@mixin high-contrast-dark-md-palette() {\n $background-color: #121212;\n\n & {\n --ion-background-color: #{$background-color};\n --ion-background-color-rgb: #{color-to-rgb-list($background-color)};\n --ion-text-color: #{$text-color};\n --ion-text-color-rgb: #{color-to-rgb-list($text-color)};\n --ion-border-color: #222222;\n --ion-item-background: #1e1e1e;\n --ion-toolbar-background: #1f1f1f;\n --ion-tab-bar-background: #1f1f1f;\n --ion-tab-bar-background-focused: #353535;\n --ion-card-background: #1e1e1e;\n\n /// Only the item borders should increase in contrast\n /// Borders for elements like toolbars should remain the same\n --ion-item-border-color: var(--ion-background-color-step-400);\n --ion-text-color-step-50: #{mix($darkest-text-color, $lightest-text-color, 5%)};\n --ion-text-color-step-100: #{mix($darkest-text-color, $lightest-text-color, 10%)};\n --ion-text-color-step-150: #{mix($darkest-text-color, $lightest-text-color, 15%)};\n --ion-text-color-step-200: #{mix($darkest-text-color, $lightest-text-color, 20%)};\n --ion-text-color-step-250: #{mix($darkest-text-color, $lightest-text-color, 25%)};\n --ion-text-color-step-300: #{mix($darkest-text-color, $lightest-text-color, 30%)};\n --ion-text-color-step-350: #{mix($darkest-text-color, $lightest-text-color, 35%)};\n --ion-text-color-step-400: #{mix($darkest-text-color, $lightest-text-color, 40%)};\n --ion-text-color-step-450: #{mix($darkest-text-color, $lightest-text-color, 45%)};\n --ion-text-color-step-500: #{mix($darkest-text-color, $lightest-text-color, 50%)};\n --ion-text-color-step-550: #{mix($darkest-text-color, $lightest-text-color, 55%)};\n --ion-text-color-step-600: #{mix($darkest-text-color, $lightest-text-color, 60%)};\n --ion-text-color-step-650: #{mix($darkest-text-color, $lightest-text-color, 65%)};\n --ion-text-color-step-700: #{mix($darkest-text-color, $lightest-text-color, 70%)};\n --ion-text-color-step-750: #{mix($darkest-text-color, $lightest-text-color, 75%)};\n --ion-text-color-step-800: #{mix($darkest-text-color, $lightest-text-color, 80%)};\n --ion-text-color-step-850: #{mix($darkest-text-color, $lightest-text-color, 85%)};\n --ion-text-color-step-900: #{mix($darkest-text-color, $lightest-text-color, 90%)};\n --ion-text-color-step-950: #{mix($darkest-text-color, $lightest-text-color, 95%)};\n --ion-background-color-step-50: #{mix($text-color, $background-color, 5%)};\n --ion-background-color-step-100: #{mix($text-color, $background-color, 10%)};\n --ion-background-color-step-150: #{mix($text-color, $background-color, 15%)};\n --ion-background-color-step-200: #{mix($text-color, $background-color, 20%)};\n --ion-background-color-step-250: #{mix($text-color, $background-color, 25%)};\n --ion-background-color-step-300: #{mix($text-color, $background-color, 30%)};\n --ion-background-color-step-350: #{mix($text-color, $background-color, 35%)};\n --ion-background-color-step-400: #{mix($text-color, $background-color, 40%)};\n --ion-background-color-step-450: #{mix($text-color, $background-color, 45%)};\n --ion-background-color-step-500: #{mix($text-color, $background-color, 50%)};\n --ion-background-color-step-550: #{mix($text-color, $background-color, 55%)};\n --ion-background-color-step-600: #{mix($text-color, $background-color, 60%)};\n --ion-background-color-step-650: #{mix($text-color, $background-color, 65%)};\n --ion-background-color-step-700: #{mix($text-color, $background-color, 70%)};\n --ion-background-color-step-750: #{mix($text-color, $background-color, 75%)};\n --ion-background-color-step-800: #{mix($text-color, $background-color, 80%)};\n --ion-background-color-step-850: #{mix($text-color, $background-color, 85%)};\n --ion-background-color-step-900: #{mix($text-color, $background-color, 90%)};\n --ion-background-color-step-950: #{mix($text-color, $background-color, 95%)};\n }\n\n // Toast\n // --------------------------------------------------\n\n & ion-toast {\n --color: var(--ion-background-color);\n }\n\n & ion-toast::part(button) {\n // Fallback for browsers that don't support color-mix\n color: var(--color);\n }\n\n /* stylelint-disable-next-line order/order */\n @supports (color: color-mix(in lch, plum, pink)) {\n & ion-toast::part(button) {\n color: color-mix(in srgb, var(--color) 73%, var(--button-color));\n }\n }\n\n & ion-toast::part(button cancel) {\n color: var(--color);\n }\n}\n"]}
1
+ {"version":3,"sourceRoot":"","sources":["../../src/css/palettes/high-contrast-dark.system.scss","../../src/css/palettes/high-contrast-dark.scss"],"names":[],"mappings":"AAEA,+DC8FE,MACE,+BAGE,6BACA,uCACA,mCACA,0CACA,mCACA,kCALA,+BACA,wCACA,qCACA,4CACA,qCACA,oCALA,8BACA,wCACA,oCACA,2CACA,oCACA,mCALA,6BACA,sCACA,mCACA,0CACA,mCACA,kCALA,6BACA,sCACA,mCACA,0CACA,mCACA,kCALA,4BACA,sCACA,kCACA,yCACA,kCACA,iCALA,2BACA,kCACA,iCACA,8CACA,iCACA,gCALA,4BACA,sCACA,kCACA,yCACA,kCACA,iCALA,0BACA,oCACA,gCACA,uCACA,gCACA,+BASJ,UACE,gCACA,oCACA,0BACA,oCACA,+BACA,+BACA,0CAIA,8DACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,wCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,sCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCAMF,oBACE,6DACA,+DACA,iEAOF,SACE,gCACA,uCACA,0BACA,oCACA,4BACA,+BACA,kCACA,kCACA,0CACA,+BAIA,8DACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,wCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCAMF,mBACE,qCAGF,iCAEE,mBAIF,gDACE,iCACE,iEAIJ,wCACE","file":"high-contrast-dark.system.css","sourcesContent":["@import \"./high-contrast-dark\";\n\n@media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n :root {\n @include high-contrast-dark-base-palette();\n }\n\n :root.ios {\n @include high-contrast-dark-ios-palette();\n }\n\n :root.md {\n @include high-contrast-dark-md-palette();\n }\n}\n","@use \"sass:map\";\n@import \"../../themes/ionic.functions.color\";\n\n$primary: #7cabff;\n$secondary: #62bdff;\n$tertiary: #b6b9f9;\n$success: #4ada71;\n$warning: #ffce31;\n$danger: #fc9aa2;\n$light: #222428;\n$medium: #a8aab3;\n$dark: #f4f5f8;\n\n$colors: (\n primary: (\n base: $primary,\n contrast: #000,\n shade: get-color-shade($primary),\n tint: get-color-tint($primary)\n ),\n secondary: (\n base: $secondary,\n contrast: #000,\n shade: get-color-shade($secondary),\n tint: get-color-tint($secondary)\n ),\n tertiary: (\n base: $tertiary,\n contrast: #000,\n shade: get-color-shade($tertiary),\n tint: get-color-tint($tertiary)\n ),\n success: (\n base: $success,\n contrast: #000,\n shade: get-color-shade($success),\n tint: get-color-tint($success)\n ),\n warning: (\n base: $warning,\n contrast: #000,\n shade: get-color-shade($warning),\n tint: get-color-tint($warning)\n ),\n danger: (\n base: $danger,\n contrast: #000,\n shade: get-color-shade($danger),\n tint: get-color-tint($danger)\n ),\n light: (\n base: $light,\n contrast: #fff,\n shade: get-color-shade($light),\n tint: get-color-tint($light)\n ),\n medium: (\n base: $medium,\n contrast: #000,\n shade: get-color-shade($medium),\n tint: get-color-tint($medium)\n ),\n dark: (\n base: $dark,\n contrast: #000,\n shade: get-color-shade($dark),\n tint: get-color-tint($dark)\n )\n);\n\n/// Text step colors are generated based on\n/// how dark or light text can be. The darkest\n/// text color is usually the default text color (white or black).\n/// The darker the $lightest-text-color is, the darker each\n/// stepped color is. If you want to increase text contrast,\n/// make $lightest-text-color darker.\n$text-color: #ffffff;\n\n$darkest-text-color: #888888;\n$lightest-text-color: $text-color;\n\n/// Loop through each color object above\n/// and generate CSS Variables for each\n/// color. Do not use the ion-color function\n/// here because that will set the variable\n/// to evaluate to itself with a fallback.\n/// For example:\n/// --ion-color-primary: #{ion-color(primary, base)};\n/// Maps to:\n/// --ion-color-primary: var(--ion-color-primary, #...);\n\n/// We apply certain styles to the per-mode classes (ios and md)\n/// as opposed to setting everything in :root\n// so any high contrast dark styles override the standard\n/// contrast dark styles.\n@mixin high-contrast-dark-base-palette() {\n & {\n --ion-placeholder-opacity: 0.8;\n\n @each $color-name, $value in $colors {\n --ion-color-#{$color-name}: #{map.get($value, base)};\n --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))};\n --ion-color-#{$color-name}-contrast: #{map.get($value, contrast)};\n --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};\n --ion-color-#{$color-name}-shade: #{map.get($value, shade)};\n --ion-color-#{$color-name}-tint: #{map.get($value, tint)};\n }\n\n }\n}\n\n@mixin high-contrast-dark-ios-palette() {\n $background-color: #000000;\n \n & {\n --ion-background-color: #{$background-color};\n --ion-background-color-rgb: #{color-to-rgb-list($background-color)};\n --ion-text-color: #{$text-color};\n --ion-text-color-rgb: #{color-to-rgb-list($text-color)};\n --ion-item-background: #000000;\n --ion-card-background: #1c1c1d;\n --ion-tab-bar-background-focused: #252525;\n\n /// Only the item borders should increase in contrast\n /// Borders for elements like toolbars should remain the same\n --ion-item-border-color: var(--ion-background-color-step-400);\n --ion-text-color-step-50: #{mix($darkest-text-color, $lightest-text-color, 5%)};\n --ion-text-color-step-100: #{mix($darkest-text-color, $lightest-text-color, 10%)};\n --ion-text-color-step-150: #{mix($darkest-text-color, $lightest-text-color, 15%)};\n --ion-text-color-step-200: #{mix($darkest-text-color, $lightest-text-color, 20%)};\n --ion-text-color-step-250: #{mix($darkest-text-color, $lightest-text-color, 25%)};\n --ion-text-color-step-300: #{mix($darkest-text-color, $lightest-text-color, 30%)};\n --ion-text-color-step-350: #{mix($darkest-text-color, $lightest-text-color, 35%)};\n --ion-text-color-step-400: #{mix($darkest-text-color, $lightest-text-color, 40%)};\n --ion-text-color-step-450: #{mix($darkest-text-color, $lightest-text-color, 45%)};\n --ion-text-color-step-500: #{mix($darkest-text-color, $lightest-text-color, 50%)};\n --ion-text-color-step-550: #{mix($darkest-text-color, $lightest-text-color, 55%)};\n --ion-text-color-step-600: #{mix($darkest-text-color, $lightest-text-color, 60%)};\n --ion-text-color-step-650: #{mix($darkest-text-color, $lightest-text-color, 65%)};\n --ion-text-color-step-700: #{mix($darkest-text-color, $lightest-text-color, 70%)};\n --ion-text-color-step-750: #{mix($darkest-text-color, $lightest-text-color, 75%)};\n --ion-text-color-step-800: #{mix($darkest-text-color, $lightest-text-color, 80%)};\n --ion-text-color-step-850: #{mix($darkest-text-color, $lightest-text-color, 85%)};\n --ion-text-color-step-900: #{mix($darkest-text-color, $lightest-text-color, 90%)};\n --ion-text-color-step-950: #{mix($darkest-text-color, $lightest-text-color, 95%)};\n --ion-background-color-step-50: #{mix($text-color, $background-color, 5%)};\n --ion-background-color-step-100: #{mix($text-color, $background-color, 10%)};\n --ion-background-color-step-150: #{mix($text-color, $background-color, 15%)};\n --ion-background-color-step-200: #{mix($text-color, $background-color, 20%)};\n --ion-background-color-step-250: #{mix($text-color, $background-color, 25%)};\n --ion-background-color-step-300: #{mix($text-color, $background-color, 30%)};\n --ion-background-color-step-350: #{mix($text-color, $background-color, 35%)};\n --ion-background-color-step-400: #{mix($text-color, $background-color, 40%)};\n --ion-background-color-step-450: #{mix($text-color, $background-color, 45%)};\n --ion-background-color-step-500: #{mix($text-color, $background-color, 50%)};\n --ion-background-color-step-550: #{mix($text-color, $background-color, 55%)};\n --ion-background-color-step-600: #{mix($text-color, $background-color, 60%)};\n --ion-background-color-step-650: #{mix($text-color, $background-color, 65%)};\n --ion-background-color-step-700: #{mix($text-color, $background-color, 70%)};\n --ion-background-color-step-750: #{mix($text-color, $background-color, 75%)};\n --ion-background-color-step-800: #{mix($text-color, $background-color, 80%)};\n --ion-background-color-step-850: #{mix($text-color, $background-color, 85%)};\n --ion-background-color-step-900: #{mix($text-color, $background-color, 90%)};\n --ion-background-color-step-950: #{mix($text-color, $background-color, 95%)};\n }\n\n // Modal\n // --------------------------------------------------\n\n & ion-modal {\n --ion-background-color: var(--ion-background-color-step-100);\n --ion-toolbar-background: var(--ion-background-color-step-150);\n --ion-toolbar-border-color: var(--ion-background-color-step-250);\n }\n}\n\n@mixin high-contrast-dark-md-palette() {\n $background-color: #121212;\n \n & {\n --ion-background-color: #{$background-color};\n --ion-background-color-rgb: #{color-to-rgb-list($background-color)};\n --ion-text-color: #{$text-color};\n --ion-text-color-rgb: #{color-to-rgb-list($text-color)};\n --ion-border-color: #222222;\n --ion-item-background: #1e1e1e;\n --ion-toolbar-background: #1f1f1f;\n --ion-tab-bar-background: #1f1f1f;\n --ion-tab-bar-background-focused: #353535;\n --ion-card-background: #1e1e1e;\n\n /// Only the item borders should increase in contrast\n /// Borders for elements like toolbars should remain the same\n --ion-item-border-color: var(--ion-background-color-step-400);\n --ion-text-color-step-50: #{mix($darkest-text-color, $lightest-text-color, 5%)};\n --ion-text-color-step-100: #{mix($darkest-text-color, $lightest-text-color, 10%)};\n --ion-text-color-step-150: #{mix($darkest-text-color, $lightest-text-color, 15%)};\n --ion-text-color-step-200: #{mix($darkest-text-color, $lightest-text-color, 20%)};\n --ion-text-color-step-250: #{mix($darkest-text-color, $lightest-text-color, 25%)};\n --ion-text-color-step-300: #{mix($darkest-text-color, $lightest-text-color, 30%)};\n --ion-text-color-step-350: #{mix($darkest-text-color, $lightest-text-color, 35%)};\n --ion-text-color-step-400: #{mix($darkest-text-color, $lightest-text-color, 40%)};\n --ion-text-color-step-450: #{mix($darkest-text-color, $lightest-text-color, 45%)};\n --ion-text-color-step-500: #{mix($darkest-text-color, $lightest-text-color, 50%)};\n --ion-text-color-step-550: #{mix($darkest-text-color, $lightest-text-color, 55%)};\n --ion-text-color-step-600: #{mix($darkest-text-color, $lightest-text-color, 60%)};\n --ion-text-color-step-650: #{mix($darkest-text-color, $lightest-text-color, 65%)};\n --ion-text-color-step-700: #{mix($darkest-text-color, $lightest-text-color, 70%)};\n --ion-text-color-step-750: #{mix($darkest-text-color, $lightest-text-color, 75%)};\n --ion-text-color-step-800: #{mix($darkest-text-color, $lightest-text-color, 80%)};\n --ion-text-color-step-850: #{mix($darkest-text-color, $lightest-text-color, 85%)};\n --ion-text-color-step-900: #{mix($darkest-text-color, $lightest-text-color, 90%)};\n --ion-text-color-step-950: #{mix($darkest-text-color, $lightest-text-color, 95%)};\n --ion-background-color-step-50: #{mix($text-color, $background-color, 5%)};\n --ion-background-color-step-100: #{mix($text-color, $background-color, 10%)};\n --ion-background-color-step-150: #{mix($text-color, $background-color, 15%)};\n --ion-background-color-step-200: #{mix($text-color, $background-color, 20%)};\n --ion-background-color-step-250: #{mix($text-color, $background-color, 25%)};\n --ion-background-color-step-300: #{mix($text-color, $background-color, 30%)};\n --ion-background-color-step-350: #{mix($text-color, $background-color, 35%)};\n --ion-background-color-step-400: #{mix($text-color, $background-color, 40%)};\n --ion-background-color-step-450: #{mix($text-color, $background-color, 45%)};\n --ion-background-color-step-500: #{mix($text-color, $background-color, 50%)};\n --ion-background-color-step-550: #{mix($text-color, $background-color, 55%)};\n --ion-background-color-step-600: #{mix($text-color, $background-color, 60%)};\n --ion-background-color-step-650: #{mix($text-color, $background-color, 65%)};\n --ion-background-color-step-700: #{mix($text-color, $background-color, 70%)};\n --ion-background-color-step-750: #{mix($text-color, $background-color, 75%)};\n --ion-background-color-step-800: #{mix($text-color, $background-color, 80%)};\n --ion-background-color-step-850: #{mix($text-color, $background-color, 85%)};\n --ion-background-color-step-900: #{mix($text-color, $background-color, 90%)};\n --ion-background-color-step-950: #{mix($text-color, $background-color, 95%)};\n }\n\n // Toast\n // --------------------------------------------------\n\n & ion-toast {\n --color: var(--ion-background-color);\n }\n\n & ion-toast::part(button) {\n // Fallback for browsers that don't support color-mix\n color: var(--color);\n }\n\n /* stylelint-disable-next-line order/order */\n @supports (color: color-mix(in lch, plum, pink)) {\n & ion-toast::part(button) {\n color: color-mix(in srgb, var(--color) 73%, var(--button-color));\n }\n }\n\n & ion-toast::part(button cancel) {\n color: var(--color);\n }\n}\n"]}
package/css/palettes/high-contrast.always.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/css/palettes/high-contrast.scss"],"names":[],"mappings":"AAqGE,MACE,gCACA,0CACA,0BACA,8BACA,+BAIA,iCACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCAGE,6BACA,oCACA,mCACA,gDACA,mCACA,kCALA,+BACA,sCACA,qCACA,kDACA,qCACA,oCALA,8BACA,qCACA,oCACA,iDACA,oCACA,mCALA,6BACA,mCACA,mCACA,gDACA,mCACA,kCALA,6BACA,mCACA,mCACA,gDACA,mCACA,kCALA,4BACA,mCACA,kCACA,+CACA,kCACA,iCALA,2BACA,qCACA,iCACA,wCACA,iCACA,gCALA,4BACA,mCACA,kCACA,+CACA,kCACA,iCALA,0BACA,iCACA,gCACA,6CACA,gCACA,+BASJ,mBACE,qCAGF,iCAEE,mBAIF,gDACE,iCACE,iEAIJ,wCACE","file":"high-contrast.always.css","sourcesContent":["@use \"sass:map\";\n@import \"../../themes/functions.color\";\n\n$primary: #003fae;\n$secondary: #01487b;\n$tertiary: #3400e6;\n$success: #004314;\n$warning: #5f4100;\n$danger: #9c000c;\n$light: #f4f5f8;\n$medium: #444446;\n$dark: #222428;\n\n$colors: (\n primary: (\n base: $primary,\n contrast: #fff,\n shade: get-color-shade($primary),\n tint: get-color-tint($primary),\n foreground: $primary,\n ),\n secondary: (\n base: $secondary,\n contrast: #fff,\n shade: get-color-shade($secondary),\n tint: get-color-tint($secondary),\n foreground: $secondary,\n ),\n tertiary: (\n base: $tertiary,\n contrast: #fff,\n shade: get-color-shade($tertiary),\n tint: get-color-tint($tertiary),\n foreground: $tertiary,\n ),\n success: (\n base: $success,\n contrast: #fff,\n shade: get-color-shade($success),\n tint: get-color-tint($success),\n foreground: $success,\n ),\n warning: (\n base: $warning,\n contrast: #fff,\n shade: get-color-shade($warning),\n tint: get-color-tint($warning),\n foreground: $warning,\n ),\n danger: (\n base: $danger,\n contrast: #fff,\n shade: get-color-shade($danger),\n tint: get-color-tint($danger),\n foreground: $danger,\n ),\n light: (\n base: $light,\n contrast: #000,\n shade: get-color-shade($light),\n tint: get-color-tint($light),\n foreground: $light,\n ),\n medium: (\n base: $medium,\n contrast: #fff,\n shade: get-color-shade($medium),\n tint: get-color-tint($medium),\n foreground: $medium,\n ),\n dark: (\n base: $dark,\n contrast: #fff,\n shade: get-color-shade($dark),\n tint: get-color-tint($dark),\n foreground: $dark,\n ),\n);\n\n/// Text step colors are generated based on\n/// how dark or light text can be. The darkest\n/// text color is usually the default text color (white or black).\n/// The darker the $lightest-text-color is, the darker each\n/// stepped color is. If you want to increase text contrast,\n/// make $lightest-text-color darker.\n$background-color: #ffffff;\n$text-color: #000000;\n\n$darkest-text-color: $text-color;\n$lightest-text-color: #888888;\n\n/// Loop through each color object above\n/// and generate CSS Variables for each\n/// color. Do not use the ion-color function\n/// here because that will set the variable\n/// to evaluate to itself with a fallback.\n/// For example:\n/// --ion-color-primary: #{ion-color(primary, base)};\n/// Maps to:\n/// --ion-color-primary: var(--ion-color-primary, #...);\n@mixin high-contrast-light-base-palette() {\n & {\n --ion-background-color: #{$background-color};\n --ion-background-color-rgb: #{color-to-rgb-list($background-color)};\n --ion-text-color: #{$text-color};\n --ion-text-color-rgb: #{color-to-rgb-list($text-color)};\n --ion-placeholder-opacity: 0.8;\n\n /// Only the item borders should increase in contrast\n /// Borders for elements like toolbars should remain the same\n --ion-item-border-color: #7a7a7a;\n --ion-text-color-step-50: #{mix($lightest-text-color, $darkest-text-color, 5%)};\n --ion-text-color-step-100: #{mix($lightest-text-color, $darkest-text-color, 10%)};\n --ion-text-color-step-150: #{mix($lightest-text-color, $darkest-text-color, 15%)};\n --ion-text-color-step-200: #{mix($lightest-text-color, $darkest-text-color, 20%)};\n --ion-text-color-step-250: #{mix($lightest-text-color, $darkest-text-color, 25%)};\n --ion-text-color-step-300: #{mix($lightest-text-color, $darkest-text-color, 30%)};\n --ion-text-color-step-350: #{mix($lightest-text-color, $darkest-text-color, 35%)};\n --ion-text-color-step-400: #{mix($lightest-text-color, $darkest-text-color, 40%)};\n --ion-text-color-step-450: #{mix($lightest-text-color, $darkest-text-color, 45%)};\n --ion-text-color-step-500: #{mix($lightest-text-color, $darkest-text-color, 50%)};\n --ion-text-color-step-550: #{mix($lightest-text-color, $darkest-text-color, 55%)};\n --ion-text-color-step-600: #{mix($lightest-text-color, $darkest-text-color, 60%)};\n --ion-text-color-step-650: #{mix($lightest-text-color, $darkest-text-color, 65%)};\n --ion-text-color-step-700: #{mix($lightest-text-color, $darkest-text-color, 70%)};\n --ion-text-color-step-750: #{mix($lightest-text-color, $darkest-text-color, 75%)};\n --ion-text-color-step-800: #{mix($lightest-text-color, $darkest-text-color, 80%)};\n --ion-text-color-step-850: #{mix($lightest-text-color, $darkest-text-color, 85%)};\n --ion-text-color-step-900: #{mix($lightest-text-color, $darkest-text-color, 90%)};\n --ion-text-color-step-950: #{mix($lightest-text-color, $darkest-text-color, 95%)};\n\n @each $color-name, $value in $colors {\n --ion-color-#{$color-name}: #{map.get($value, base)};\n --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))};\n --ion-color-#{$color-name}-contrast: #{map.get($value, contrast)};\n --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};\n --ion-color-#{$color-name}-shade: #{map.get($value, shade)};\n --ion-color-#{$color-name}-tint: #{map.get($value, tint)};\n }\n }\n}\n\n@mixin high-contrast-light-md-palette() {\n // Toast\n // --------------------------------------------------\n\n & ion-toast {\n --color: var(--ion-background-color);\n }\n\n & ion-toast::part(button) {\n // Fallback for browsers that don't support color-mix\n color: var(--color);\n }\n\n /* stylelint-disable-next-line order/order */\n @supports (color: color-mix(in lch, plum, pink)) {\n & ion-toast::part(button) {\n color: color-mix(in srgb, var(--color) 70%, var(--button-color));\n }\n }\n\n & ion-toast::part(button cancel) {\n color: var(--color);\n }\n}\n"]}
1
+ {"version":3,"sourceRoot":"","sources":["../../src/css/palettes/high-contrast.scss"],"names":[],"mappings":"AA4FE,MACE,gCACA,0CACA,0BACA,8BACA,+BAIA,iCACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCAGE,6BACA,oCACA,mCACA,gDACA,mCACA,kCALA,+BACA,sCACA,qCACA,kDACA,qCACA,oCALA,8BACA,qCACA,oCACA,iDACA,oCACA,mCALA,6BACA,mCACA,mCACA,gDACA,mCACA,kCALA,6BACA,mCACA,mCACA,gDACA,mCACA,kCALA,4BACA,mCACA,kCACA,+CACA,kCACA,iCALA,2BACA,qCACA,iCACA,wCACA,iCACA,gCALA,4BACA,mCACA,kCACA,+CACA,kCACA,iCALA,0BACA,iCACA,gCACA,6CACA,gCACA,+BASJ,mBACE,qCAGF,iCAEE,mBAIF,gDACE,iCACE,iEAIJ,wCACE","file":"high-contrast.always.css","sourcesContent":["@use \"sass:map\";\n@import \"../../themes/ionic.functions.color\";\n\n$primary: #003fae;\n$secondary: #01487b;\n$tertiary: #3400e6;\n$success: #004314;\n$warning: #5f4100;\n$danger: #9c000c;\n$light: #f4f5f8;\n$medium: #444446;\n$dark: #222428;\n\n$colors: (\n primary: (\n base: $primary,\n contrast: #fff,\n shade: get-color-shade($primary),\n tint: get-color-tint($primary)\n ),\n secondary: (\n base: $secondary,\n contrast: #fff,\n shade: get-color-shade($secondary),\n tint: get-color-tint($secondary)\n ),\n tertiary: (\n base: $tertiary,\n contrast: #fff,\n shade: get-color-shade($tertiary),\n tint: get-color-tint($tertiary)\n ),\n success: (\n base: $success,\n contrast: #fff,\n shade: get-color-shade($success),\n tint: get-color-tint($success)\n ),\n warning: (\n base: $warning,\n contrast: #fff,\n shade: get-color-shade($warning),\n tint: get-color-tint($warning)\n ),\n danger: (\n base: $danger,\n contrast: #fff,\n shade: get-color-shade($danger),\n tint: get-color-tint($danger)\n ),\n light: (\n base: $light,\n contrast: #000,\n shade: get-color-shade($light),\n tint: get-color-tint($light)\n ),\n medium: (\n base: $medium,\n contrast: #fff,\n shade: get-color-shade($medium),\n tint: get-color-tint($medium)\n ),\n dark: (\n base: $dark,\n contrast: #fff,\n shade: get-color-shade($dark),\n tint: get-color-tint($dark)\n )\n);\n\n/// Text step colors are generated based on\n/// how dark or light text can be. The darkest\n/// text color is usually the default text color (white or black).\n/// The darker the $lightest-text-color is, the darker each\n/// stepped color is. If you want to increase text contrast,\n/// make $lightest-text-color darker.\n$background-color: #ffffff;\n$text-color: #000000;\n\n$darkest-text-color: $text-color;\n$lightest-text-color: #888888;\n\n/// Loop through each color object above\n/// and generate CSS Variables for each\n/// color. Do not use the ion-color function\n/// here because that will set the variable\n/// to evaluate to itself with a fallback.\n/// For example:\n/// --ion-color-primary: #{ion-color(primary, base)};\n/// Maps to:\n/// --ion-color-primary: var(--ion-color-primary, #...);\n@mixin high-contrast-light-base-palette() {\n & {\n --ion-background-color: #{$background-color};\n --ion-background-color-rgb: #{color-to-rgb-list($background-color)};\n --ion-text-color: #{$text-color};\n --ion-text-color-rgb: #{color-to-rgb-list($text-color)};\n --ion-placeholder-opacity: 0.8;\n\n /// Only the item borders should increase in contrast\n /// Borders for elements like toolbars should remain the same\n --ion-item-border-color: #7a7a7a;\n --ion-text-color-step-50: #{mix($lightest-text-color, $darkest-text-color, 5%)};\n --ion-text-color-step-100: #{mix($lightest-text-color, $darkest-text-color, 10%)};\n --ion-text-color-step-150: #{mix($lightest-text-color, $darkest-text-color, 15%)};\n --ion-text-color-step-200: #{mix($lightest-text-color, $darkest-text-color, 20%)};\n --ion-text-color-step-250: #{mix($lightest-text-color, $darkest-text-color, 25%)};\n --ion-text-color-step-300: #{mix($lightest-text-color, $darkest-text-color, 30%)};\n --ion-text-color-step-350: #{mix($lightest-text-color, $darkest-text-color, 35%)};\n --ion-text-color-step-400: #{mix($lightest-text-color, $darkest-text-color, 40%)};\n --ion-text-color-step-450: #{mix($lightest-text-color, $darkest-text-color, 45%)};\n --ion-text-color-step-500: #{mix($lightest-text-color, $darkest-text-color, 50%)};\n --ion-text-color-step-550: #{mix($lightest-text-color, $darkest-text-color, 55%)};\n --ion-text-color-step-600: #{mix($lightest-text-color, $darkest-text-color, 60%)};\n --ion-text-color-step-650: #{mix($lightest-text-color, $darkest-text-color, 65%)};\n --ion-text-color-step-700: #{mix($lightest-text-color, $darkest-text-color, 70%)};\n --ion-text-color-step-750: #{mix($lightest-text-color, $darkest-text-color, 75%)};\n --ion-text-color-step-800: #{mix($lightest-text-color, $darkest-text-color, 80%)};\n --ion-text-color-step-850: #{mix($lightest-text-color, $darkest-text-color, 85%)};\n --ion-text-color-step-900: #{mix($lightest-text-color, $darkest-text-color, 90%)};\n --ion-text-color-step-950: #{mix($lightest-text-color, $darkest-text-color, 95%)};\n\n @each $color-name, $value in $colors {\n --ion-color-#{$color-name}: #{map.get($value, base)};\n --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))};\n --ion-color-#{$color-name}-contrast: #{map.get($value, contrast)};\n --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};\n --ion-color-#{$color-name}-shade: #{map.get($value, shade)};\n --ion-color-#{$color-name}-tint: #{map.get($value, tint)};\n }\n }\n}\n\n@mixin high-contrast-light-md-palette() {\n // Toast\n // --------------------------------------------------\n\n & ion-toast {\n --color: var(--ion-background-color);\n }\n\n & ion-toast::part(button) {\n // Fallback for browsers that don't support color-mix\n color: var(--color);\n }\n\n /* stylelint-disable-next-line order/order */\n @supports (color: color-mix(in lch, plum, pink)) {\n & ion-toast::part(button) {\n color: color-mix(in srgb, var(--color) 70%, var(--button-color));\n }\n }\n\n & ion-toast::part(button cancel) {\n color: var(--color);\n }\n}\n"]}
package/css/palettes/high-contrast.class.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/css/palettes/high-contrast.scss"],"names":[],"mappings":"AAqGE,2BACE,gCACA,0CACA,0BACA,8BACA,+BAIA,iCACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCAGE,6BACA,oCACA,mCACA,gDACA,mCACA,kCALA,+BACA,sCACA,qCACA,kDACA,qCACA,oCALA,8BACA,qCACA,oCACA,iDACA,oCACA,mCALA,6BACA,mCACA,mCACA,gDACA,mCACA,kCALA,6BACA,mCACA,mCACA,gDACA,mCACA,kCALA,4BACA,mCACA,kCACA,+CACA,kCACA,iCALA,2BACA,qCACA,iCACA,wCACA,iCACA,gCALA,4BACA,mCACA,kCACA,+CACA,kCACA,iCALA,0BACA,iCACA,gCACA,6CACA,gCACA,+BASJ,wCACE,qCAGF,sDAEE,mBAIF,gDACE,sDACE,iEAIJ,6DACE","file":"high-contrast.class.css","sourcesContent":["@use \"sass:map\";\n@import \"../../themes/functions.color\";\n\n$primary: #003fae;\n$secondary: #01487b;\n$tertiary: #3400e6;\n$success: #004314;\n$warning: #5f4100;\n$danger: #9c000c;\n$light: #f4f5f8;\n$medium: #444446;\n$dark: #222428;\n\n$colors: (\n primary: (\n base: $primary,\n contrast: #fff,\n shade: get-color-shade($primary),\n tint: get-color-tint($primary),\n foreground: $primary,\n ),\n secondary: (\n base: $secondary,\n contrast: #fff,\n shade: get-color-shade($secondary),\n tint: get-color-tint($secondary),\n foreground: $secondary,\n ),\n tertiary: (\n base: $tertiary,\n contrast: #fff,\n shade: get-color-shade($tertiary),\n tint: get-color-tint($tertiary),\n foreground: $tertiary,\n ),\n success: (\n base: $success,\n contrast: #fff,\n shade: get-color-shade($success),\n tint: get-color-tint($success),\n foreground: $success,\n ),\n warning: (\n base: $warning,\n contrast: #fff,\n shade: get-color-shade($warning),\n tint: get-color-tint($warning),\n foreground: $warning,\n ),\n danger: (\n base: $danger,\n contrast: #fff,\n shade: get-color-shade($danger),\n tint: get-color-tint($danger),\n foreground: $danger,\n ),\n light: (\n base: $light,\n contrast: #000,\n shade: get-color-shade($light),\n tint: get-color-tint($light),\n foreground: $light,\n ),\n medium: (\n base: $medium,\n contrast: #fff,\n shade: get-color-shade($medium),\n tint: get-color-tint($medium),\n foreground: $medium,\n ),\n dark: (\n base: $dark,\n contrast: #fff,\n shade: get-color-shade($dark),\n tint: get-color-tint($dark),\n foreground: $dark,\n ),\n);\n\n/// Text step colors are generated based on\n/// how dark or light text can be. The darkest\n/// text color is usually the default text color (white or black).\n/// The darker the $lightest-text-color is, the darker each\n/// stepped color is. If you want to increase text contrast,\n/// make $lightest-text-color darker.\n$background-color: #ffffff;\n$text-color: #000000;\n\n$darkest-text-color: $text-color;\n$lightest-text-color: #888888;\n\n/// Loop through each color object above\n/// and generate CSS Variables for each\n/// color. Do not use the ion-color function\n/// here because that will set the variable\n/// to evaluate to itself with a fallback.\n/// For example:\n/// --ion-color-primary: #{ion-color(primary, base)};\n/// Maps to:\n/// --ion-color-primary: var(--ion-color-primary, #...);\n@mixin high-contrast-light-base-palette() {\n & {\n --ion-background-color: #{$background-color};\n --ion-background-color-rgb: #{color-to-rgb-list($background-color)};\n --ion-text-color: #{$text-color};\n --ion-text-color-rgb: #{color-to-rgb-list($text-color)};\n --ion-placeholder-opacity: 0.8;\n\n /// Only the item borders should increase in contrast\n /// Borders for elements like toolbars should remain the same\n --ion-item-border-color: #7a7a7a;\n --ion-text-color-step-50: #{mix($lightest-text-color, $darkest-text-color, 5%)};\n --ion-text-color-step-100: #{mix($lightest-text-color, $darkest-text-color, 10%)};\n --ion-text-color-step-150: #{mix($lightest-text-color, $darkest-text-color, 15%)};\n --ion-text-color-step-200: #{mix($lightest-text-color, $darkest-text-color, 20%)};\n --ion-text-color-step-250: #{mix($lightest-text-color, $darkest-text-color, 25%)};\n --ion-text-color-step-300: #{mix($lightest-text-color, $darkest-text-color, 30%)};\n --ion-text-color-step-350: #{mix($lightest-text-color, $darkest-text-color, 35%)};\n --ion-text-color-step-400: #{mix($lightest-text-color, $darkest-text-color, 40%)};\n --ion-text-color-step-450: #{mix($lightest-text-color, $darkest-text-color, 45%)};\n --ion-text-color-step-500: #{mix($lightest-text-color, $darkest-text-color, 50%)};\n --ion-text-color-step-550: #{mix($lightest-text-color, $darkest-text-color, 55%)};\n --ion-text-color-step-600: #{mix($lightest-text-color, $darkest-text-color, 60%)};\n --ion-text-color-step-650: #{mix($lightest-text-color, $darkest-text-color, 65%)};\n --ion-text-color-step-700: #{mix($lightest-text-color, $darkest-text-color, 70%)};\n --ion-text-color-step-750: #{mix($lightest-text-color, $darkest-text-color, 75%)};\n --ion-text-color-step-800: #{mix($lightest-text-color, $darkest-text-color, 80%)};\n --ion-text-color-step-850: #{mix($lightest-text-color, $darkest-text-color, 85%)};\n --ion-text-color-step-900: #{mix($lightest-text-color, $darkest-text-color, 90%)};\n --ion-text-color-step-950: #{mix($lightest-text-color, $darkest-text-color, 95%)};\n\n @each $color-name, $value in $colors {\n --ion-color-#{$color-name}: #{map.get($value, base)};\n --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))};\n --ion-color-#{$color-name}-contrast: #{map.get($value, contrast)};\n --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};\n --ion-color-#{$color-name}-shade: #{map.get($value, shade)};\n --ion-color-#{$color-name}-tint: #{map.get($value, tint)};\n }\n }\n}\n\n@mixin high-contrast-light-md-palette() {\n // Toast\n // --------------------------------------------------\n\n & ion-toast {\n --color: var(--ion-background-color);\n }\n\n & ion-toast::part(button) {\n // Fallback for browsers that don't support color-mix\n color: var(--color);\n }\n\n /* stylelint-disable-next-line order/order */\n @supports (color: color-mix(in lch, plum, pink)) {\n & ion-toast::part(button) {\n color: color-mix(in srgb, var(--color) 70%, var(--button-color));\n }\n }\n\n & ion-toast::part(button cancel) {\n color: var(--color);\n }\n}\n"]}
1
+ {"version":3,"sourceRoot":"","sources":["../../src/css/palettes/high-contrast.scss"],"names":[],"mappings":"AA4FE,2BACE,gCACA,0CACA,0BACA,8BACA,+BAIA,iCACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCAGE,6BACA,oCACA,mCACA,gDACA,mCACA,kCALA,+BACA,sCACA,qCACA,kDACA,qCACA,oCALA,8BACA,qCACA,oCACA,iDACA,oCACA,mCALA,6BACA,mCACA,mCACA,gDACA,mCACA,kCALA,6BACA,mCACA,mCACA,gDACA,mCACA,kCALA,4BACA,mCACA,kCACA,+CACA,kCACA,iCALA,2BACA,qCACA,iCACA,wCACA,iCACA,gCALA,4BACA,mCACA,kCACA,+CACA,kCACA,iCALA,0BACA,iCACA,gCACA,6CACA,gCACA,+BASJ,wCACE,qCAGF,sDAEE,mBAIF,gDACE,sDACE,iEAIJ,6DACE","file":"high-contrast.class.css","sourcesContent":["@use \"sass:map\";\n@import \"../../themes/ionic.functions.color\";\n\n$primary: #003fae;\n$secondary: #01487b;\n$tertiary: #3400e6;\n$success: #004314;\n$warning: #5f4100;\n$danger: #9c000c;\n$light: #f4f5f8;\n$medium: #444446;\n$dark: #222428;\n\n$colors: (\n primary: (\n base: $primary,\n contrast: #fff,\n shade: get-color-shade($primary),\n tint: get-color-tint($primary)\n ),\n secondary: (\n base: $secondary,\n contrast: #fff,\n shade: get-color-shade($secondary),\n tint: get-color-tint($secondary)\n ),\n tertiary: (\n base: $tertiary,\n contrast: #fff,\n shade: get-color-shade($tertiary),\n tint: get-color-tint($tertiary)\n ),\n success: (\n base: $success,\n contrast: #fff,\n shade: get-color-shade($success),\n tint: get-color-tint($success)\n ),\n warning: (\n base: $warning,\n contrast: #fff,\n shade: get-color-shade($warning),\n tint: get-color-tint($warning)\n ),\n danger: (\n base: $danger,\n contrast: #fff,\n shade: get-color-shade($danger),\n tint: get-color-tint($danger)\n ),\n light: (\n base: $light,\n contrast: #000,\n shade: get-color-shade($light),\n tint: get-color-tint($light)\n ),\n medium: (\n base: $medium,\n contrast: #fff,\n shade: get-color-shade($medium),\n tint: get-color-tint($medium)\n ),\n dark: (\n base: $dark,\n contrast: #fff,\n shade: get-color-shade($dark),\n tint: get-color-tint($dark)\n )\n);\n\n/// Text step colors are generated based on\n/// how dark or light text can be. The darkest\n/// text color is usually the default text color (white or black).\n/// The darker the $lightest-text-color is, the darker each\n/// stepped color is. If you want to increase text contrast,\n/// make $lightest-text-color darker.\n$background-color: #ffffff;\n$text-color: #000000;\n\n$darkest-text-color: $text-color;\n$lightest-text-color: #888888;\n\n/// Loop through each color object above\n/// and generate CSS Variables for each\n/// color. Do not use the ion-color function\n/// here because that will set the variable\n/// to evaluate to itself with a fallback.\n/// For example:\n/// --ion-color-primary: #{ion-color(primary, base)};\n/// Maps to:\n/// --ion-color-primary: var(--ion-color-primary, #...);\n@mixin high-contrast-light-base-palette() {\n & {\n --ion-background-color: #{$background-color};\n --ion-background-color-rgb: #{color-to-rgb-list($background-color)};\n --ion-text-color: #{$text-color};\n --ion-text-color-rgb: #{color-to-rgb-list($text-color)};\n --ion-placeholder-opacity: 0.8;\n\n /// Only the item borders should increase in contrast\n /// Borders for elements like toolbars should remain the same\n --ion-item-border-color: #7a7a7a;\n --ion-text-color-step-50: #{mix($lightest-text-color, $darkest-text-color, 5%)};\n --ion-text-color-step-100: #{mix($lightest-text-color, $darkest-text-color, 10%)};\n --ion-text-color-step-150: #{mix($lightest-text-color, $darkest-text-color, 15%)};\n --ion-text-color-step-200: #{mix($lightest-text-color, $darkest-text-color, 20%)};\n --ion-text-color-step-250: #{mix($lightest-text-color, $darkest-text-color, 25%)};\n --ion-text-color-step-300: #{mix($lightest-text-color, $darkest-text-color, 30%)};\n --ion-text-color-step-350: #{mix($lightest-text-color, $darkest-text-color, 35%)};\n --ion-text-color-step-400: #{mix($lightest-text-color, $darkest-text-color, 40%)};\n --ion-text-color-step-450: #{mix($lightest-text-color, $darkest-text-color, 45%)};\n --ion-text-color-step-500: #{mix($lightest-text-color, $darkest-text-color, 50%)};\n --ion-text-color-step-550: #{mix($lightest-text-color, $darkest-text-color, 55%)};\n --ion-text-color-step-600: #{mix($lightest-text-color, $darkest-text-color, 60%)};\n --ion-text-color-step-650: #{mix($lightest-text-color, $darkest-text-color, 65%)};\n --ion-text-color-step-700: #{mix($lightest-text-color, $darkest-text-color, 70%)};\n --ion-text-color-step-750: #{mix($lightest-text-color, $darkest-text-color, 75%)};\n --ion-text-color-step-800: #{mix($lightest-text-color, $darkest-text-color, 80%)};\n --ion-text-color-step-850: #{mix($lightest-text-color, $darkest-text-color, 85%)};\n --ion-text-color-step-900: #{mix($lightest-text-color, $darkest-text-color, 90%)};\n --ion-text-color-step-950: #{mix($lightest-text-color, $darkest-text-color, 95%)};\n\n @each $color-name, $value in $colors {\n --ion-color-#{$color-name}: #{map.get($value, base)};\n --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))};\n --ion-color-#{$color-name}-contrast: #{map.get($value, contrast)};\n --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};\n --ion-color-#{$color-name}-shade: #{map.get($value, shade)};\n --ion-color-#{$color-name}-tint: #{map.get($value, tint)};\n }\n }\n}\n\n@mixin high-contrast-light-md-palette() {\n // Toast\n // --------------------------------------------------\n\n & ion-toast {\n --color: var(--ion-background-color);\n }\n\n & ion-toast::part(button) {\n // Fallback for browsers that don't support color-mix\n color: var(--color);\n }\n\n /* stylelint-disable-next-line order/order */\n @supports (color: color-mix(in lch, plum, pink)) {\n & ion-toast::part(button) {\n color: color-mix(in srgb, var(--color) 70%, var(--button-color));\n }\n }\n\n & ion-toast::part(button cancel) {\n color: var(--color);\n }\n}\n"]}
package/css/palettes/high-contrast.system.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/css/palettes/high-contrast.system.scss","../../src/css/palettes/high-contrast.scss"],"names":[],"mappings":"AAEA,+BCmGE,MACE,gCACA,0CACA,0BACA,8BACA,+BAIA,iCACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCAGE,6BACA,oCACA,mCACA,gDACA,mCACA,kCALA,+BACA,sCACA,qCACA,kDACA,qCACA,oCALA,8BACA,qCACA,oCACA,iDACA,oCACA,mCALA,6BACA,mCACA,mCACA,gDACA,mCACA,kCALA,6BACA,mCACA,mCACA,gDACA,mCACA,kCALA,4BACA,mCACA,kCACA,+CACA,kCACA,iCALA,2BACA,qCACA,iCACA,wCACA,iCACA,gCALA,4BACA,mCACA,kCACA,+CACA,kCACA,iCALA,0BACA,iCACA,gCACA,6CACA,gCACA,+BASJ,mBACE,qCAGF,iCAEE,mBAIF,gDACE,iCACE,iEAIJ,wCACE","file":"high-contrast.system.css","sourcesContent":["@import \"./high-contrast\";\n\n@media (prefers-contrast: more) {\n :root {\n @include high-contrast-light-base-palette();\n }\n\n :root.md {\n @include high-contrast-light-md-palette();\n }\n}\n","@use \"sass:map\";\n@import \"../../themes/functions.color\";\n\n$primary: #003fae;\n$secondary: #01487b;\n$tertiary: #3400e6;\n$success: #004314;\n$warning: #5f4100;\n$danger: #9c000c;\n$light: #f4f5f8;\n$medium: #444446;\n$dark: #222428;\n\n$colors: (\n primary: (\n base: $primary,\n contrast: #fff,\n shade: get-color-shade($primary),\n tint: get-color-tint($primary),\n foreground: $primary,\n ),\n secondary: (\n base: $secondary,\n contrast: #fff,\n shade: get-color-shade($secondary),\n tint: get-color-tint($secondary),\n foreground: $secondary,\n ),\n tertiary: (\n base: $tertiary,\n contrast: #fff,\n shade: get-color-shade($tertiary),\n tint: get-color-tint($tertiary),\n foreground: $tertiary,\n ),\n success: (\n base: $success,\n contrast: #fff,\n shade: get-color-shade($success),\n tint: get-color-tint($success),\n foreground: $success,\n ),\n warning: (\n base: $warning,\n contrast: #fff,\n shade: get-color-shade($warning),\n tint: get-color-tint($warning),\n foreground: $warning,\n ),\n danger: (\n base: $danger,\n contrast: #fff,\n shade: get-color-shade($danger),\n tint: get-color-tint($danger),\n foreground: $danger,\n ),\n light: (\n base: $light,\n contrast: #000,\n shade: get-color-shade($light),\n tint: get-color-tint($light),\n foreground: $light,\n ),\n medium: (\n base: $medium,\n contrast: #fff,\n shade: get-color-shade($medium),\n tint: get-color-tint($medium),\n foreground: $medium,\n ),\n dark: (\n base: $dark,\n contrast: #fff,\n shade: get-color-shade($dark),\n tint: get-color-tint($dark),\n foreground: $dark,\n ),\n);\n\n/// Text step colors are generated based on\n/// how dark or light text can be. The darkest\n/// text color is usually the default text color (white or black).\n/// The darker the $lightest-text-color is, the darker each\n/// stepped color is. If you want to increase text contrast,\n/// make $lightest-text-color darker.\n$background-color: #ffffff;\n$text-color: #000000;\n\n$darkest-text-color: $text-color;\n$lightest-text-color: #888888;\n\n/// Loop through each color object above\n/// and generate CSS Variables for each\n/// color. Do not use the ion-color function\n/// here because that will set the variable\n/// to evaluate to itself with a fallback.\n/// For example:\n/// --ion-color-primary: #{ion-color(primary, base)};\n/// Maps to:\n/// --ion-color-primary: var(--ion-color-primary, #...);\n@mixin high-contrast-light-base-palette() {\n & {\n --ion-background-color: #{$background-color};\n --ion-background-color-rgb: #{color-to-rgb-list($background-color)};\n --ion-text-color: #{$text-color};\n --ion-text-color-rgb: #{color-to-rgb-list($text-color)};\n --ion-placeholder-opacity: 0.8;\n\n /// Only the item borders should increase in contrast\n /// Borders for elements like toolbars should remain the same\n --ion-item-border-color: #7a7a7a;\n --ion-text-color-step-50: #{mix($lightest-text-color, $darkest-text-color, 5%)};\n --ion-text-color-step-100: #{mix($lightest-text-color, $darkest-text-color, 10%)};\n --ion-text-color-step-150: #{mix($lightest-text-color, $darkest-text-color, 15%)};\n --ion-text-color-step-200: #{mix($lightest-text-color, $darkest-text-color, 20%)};\n --ion-text-color-step-250: #{mix($lightest-text-color, $darkest-text-color, 25%)};\n --ion-text-color-step-300: #{mix($lightest-text-color, $darkest-text-color, 30%)};\n --ion-text-color-step-350: #{mix($lightest-text-color, $darkest-text-color, 35%)};\n --ion-text-color-step-400: #{mix($lightest-text-color, $darkest-text-color, 40%)};\n --ion-text-color-step-450: #{mix($lightest-text-color, $darkest-text-color, 45%)};\n --ion-text-color-step-500: #{mix($lightest-text-color, $darkest-text-color, 50%)};\n --ion-text-color-step-550: #{mix($lightest-text-color, $darkest-text-color, 55%)};\n --ion-text-color-step-600: #{mix($lightest-text-color, $darkest-text-color, 60%)};\n --ion-text-color-step-650: #{mix($lightest-text-color, $darkest-text-color, 65%)};\n --ion-text-color-step-700: #{mix($lightest-text-color, $darkest-text-color, 70%)};\n --ion-text-color-step-750: #{mix($lightest-text-color, $darkest-text-color, 75%)};\n --ion-text-color-step-800: #{mix($lightest-text-color, $darkest-text-color, 80%)};\n --ion-text-color-step-850: #{mix($lightest-text-color, $darkest-text-color, 85%)};\n --ion-text-color-step-900: #{mix($lightest-text-color, $darkest-text-color, 90%)};\n --ion-text-color-step-950: #{mix($lightest-text-color, $darkest-text-color, 95%)};\n\n @each $color-name, $value in $colors {\n --ion-color-#{$color-name}: #{map.get($value, base)};\n --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))};\n --ion-color-#{$color-name}-contrast: #{map.get($value, contrast)};\n --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};\n --ion-color-#{$color-name}-shade: #{map.get($value, shade)};\n --ion-color-#{$color-name}-tint: #{map.get($value, tint)};\n }\n }\n}\n\n@mixin high-contrast-light-md-palette() {\n // Toast\n // --------------------------------------------------\n\n & ion-toast {\n --color: var(--ion-background-color);\n }\n\n & ion-toast::part(button) {\n // Fallback for browsers that don't support color-mix\n color: var(--color);\n }\n\n /* stylelint-disable-next-line order/order */\n @supports (color: color-mix(in lch, plum, pink)) {\n & ion-toast::part(button) {\n color: color-mix(in srgb, var(--color) 70%, var(--button-color));\n }\n }\n\n & ion-toast::part(button cancel) {\n color: var(--color);\n }\n}\n"]}
1
+ {"version":3,"sourceRoot":"","sources":["../../src/css/palettes/high-contrast.system.scss","../../src/css/palettes/high-contrast.scss"],"names":[],"mappings":"AAEA,+BC0FE,MACE,gCACA,0CACA,0BACA,8BACA,+BAIA,iCACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCAGE,6BACA,oCACA,mCACA,gDACA,mCACA,kCALA,+BACA,sCACA,qCACA,kDACA,qCACA,oCALA,8BACA,qCACA,oCACA,iDACA,oCACA,mCALA,6BACA,mCACA,mCACA,gDACA,mCACA,kCALA,6BACA,mCACA,mCACA,gDACA,mCACA,kCALA,4BACA,mCACA,kCACA,+CACA,kCACA,iCALA,2BACA,qCACA,iCACA,wCACA,iCACA,gCALA,4BACA,mCACA,kCACA,+CACA,kCACA,iCALA,0BACA,iCACA,gCACA,6CACA,gCACA,+BASJ,mBACE,qCAGF,iCAEE,mBAIF,gDACE,iCACE,iEAIJ,wCACE","file":"high-contrast.system.css","sourcesContent":["@import \"./high-contrast\";\n\n@media (prefers-contrast: more) {\n :root {\n @include high-contrast-light-base-palette();\n }\n\n :root.md {\n @include high-contrast-light-md-palette();\n }\n}\n","@use \"sass:map\";\n@import \"../../themes/ionic.functions.color\";\n\n$primary: #003fae;\n$secondary: #01487b;\n$tertiary: #3400e6;\n$success: #004314;\n$warning: #5f4100;\n$danger: #9c000c;\n$light: #f4f5f8;\n$medium: #444446;\n$dark: #222428;\n\n$colors: (\n primary: (\n base: $primary,\n contrast: #fff,\n shade: get-color-shade($primary),\n tint: get-color-tint($primary)\n ),\n secondary: (\n base: $secondary,\n contrast: #fff,\n shade: get-color-shade($secondary),\n tint: get-color-tint($secondary)\n ),\n tertiary: (\n base: $tertiary,\n contrast: #fff,\n shade: get-color-shade($tertiary),\n tint: get-color-tint($tertiary)\n ),\n success: (\n base: $success,\n contrast: #fff,\n shade: get-color-shade($success),\n tint: get-color-tint($success)\n ),\n warning: (\n base: $warning,\n contrast: #fff,\n shade: get-color-shade($warning),\n tint: get-color-tint($warning)\n ),\n danger: (\n base: $danger,\n contrast: #fff,\n shade: get-color-shade($danger),\n tint: get-color-tint($danger)\n ),\n light: (\n base: $light,\n contrast: #000,\n shade: get-color-shade($light),\n tint: get-color-tint($light)\n ),\n medium: (\n base: $medium,\n contrast: #fff,\n shade: get-color-shade($medium),\n tint: get-color-tint($medium)\n ),\n dark: (\n base: $dark,\n contrast: #fff,\n shade: get-color-shade($dark),\n tint: get-color-tint($dark)\n )\n);\n\n/// Text step colors are generated based on\n/// how dark or light text can be. The darkest\n/// text color is usually the default text color (white or black).\n/// The darker the $lightest-text-color is, the darker each\n/// stepped color is. If you want to increase text contrast,\n/// make $lightest-text-color darker.\n$background-color: #ffffff;\n$text-color: #000000;\n\n$darkest-text-color: $text-color;\n$lightest-text-color: #888888;\n\n/// Loop through each color object above\n/// and generate CSS Variables for each\n/// color. Do not use the ion-color function\n/// here because that will set the variable\n/// to evaluate to itself with a fallback.\n/// For example:\n/// --ion-color-primary: #{ion-color(primary, base)};\n/// Maps to:\n/// --ion-color-primary: var(--ion-color-primary, #...);\n@mixin high-contrast-light-base-palette() {\n & {\n --ion-background-color: #{$background-color};\n --ion-background-color-rgb: #{color-to-rgb-list($background-color)};\n --ion-text-color: #{$text-color};\n --ion-text-color-rgb: #{color-to-rgb-list($text-color)};\n --ion-placeholder-opacity: 0.8;\n\n /// Only the item borders should increase in contrast\n /// Borders for elements like toolbars should remain the same\n --ion-item-border-color: #7a7a7a;\n --ion-text-color-step-50: #{mix($lightest-text-color, $darkest-text-color, 5%)};\n --ion-text-color-step-100: #{mix($lightest-text-color, $darkest-text-color, 10%)};\n --ion-text-color-step-150: #{mix($lightest-text-color, $darkest-text-color, 15%)};\n --ion-text-color-step-200: #{mix($lightest-text-color, $darkest-text-color, 20%)};\n --ion-text-color-step-250: #{mix($lightest-text-color, $darkest-text-color, 25%)};\n --ion-text-color-step-300: #{mix($lightest-text-color, $darkest-text-color, 30%)};\n --ion-text-color-step-350: #{mix($lightest-text-color, $darkest-text-color, 35%)};\n --ion-text-color-step-400: #{mix($lightest-text-color, $darkest-text-color, 40%)};\n --ion-text-color-step-450: #{mix($lightest-text-color, $darkest-text-color, 45%)};\n --ion-text-color-step-500: #{mix($lightest-text-color, $darkest-text-color, 50%)};\n --ion-text-color-step-550: #{mix($lightest-text-color, $darkest-text-color, 55%)};\n --ion-text-color-step-600: #{mix($lightest-text-color, $darkest-text-color, 60%)};\n --ion-text-color-step-650: #{mix($lightest-text-color, $darkest-text-color, 65%)};\n --ion-text-color-step-700: #{mix($lightest-text-color, $darkest-text-color, 70%)};\n --ion-text-color-step-750: #{mix($lightest-text-color, $darkest-text-color, 75%)};\n --ion-text-color-step-800: #{mix($lightest-text-color, $darkest-text-color, 80%)};\n --ion-text-color-step-850: #{mix($lightest-text-color, $darkest-text-color, 85%)};\n --ion-text-color-step-900: #{mix($lightest-text-color, $darkest-text-color, 90%)};\n --ion-text-color-step-950: #{mix($lightest-text-color, $darkest-text-color, 95%)};\n\n @each $color-name, $value in $colors {\n --ion-color-#{$color-name}: #{map.get($value, base)};\n --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))};\n --ion-color-#{$color-name}-contrast: #{map.get($value, contrast)};\n --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};\n --ion-color-#{$color-name}-shade: #{map.get($value, shade)};\n --ion-color-#{$color-name}-tint: #{map.get($value, tint)};\n }\n }\n}\n\n@mixin high-contrast-light-md-palette() {\n // Toast\n // --------------------------------------------------\n\n & ion-toast {\n --color: var(--ion-background-color);\n }\n\n & ion-toast::part(button) {\n // Fallback for browsers that don't support color-mix\n color: var(--color);\n }\n\n /* stylelint-disable-next-line order/order */\n @supports (color: color-mix(in lch, plum, pink)) {\n & ion-toast::part(button) {\n color: color-mix(in srgb, var(--color) 70%, var(--button-color));\n }\n }\n\n & ion-toast::part(button cancel) {\n color: var(--color);\n }\n}\n"]}
package/css/structure.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../src/css/structure.scss","../src/themes/mixins.scss"],"names":[],"mappings":"AAOA,EACE,sBAEA,0CACA,wCACA,2BAGF,KACE,WACA,YACA,8BAEA,sBAGF,iBACE,cAGF,aACE,aAGF,KCyFE,kCACA,mCA4NE,YDpTc,ECqTd,aDrTc,ECwUhB,WDxUgB,ECyUhB,cDzUgB,ECoTd,aDnTe,ECoTf,cDpTe,ECuUjB,YDvUiB,ECwUjB,eDxUiB,EAEjB,eAEA,WACA,eACA,YACA,gBAsBA,wBAEA,kCAEA,gBAEA,0BAEA,uBAEA,yBAEA,qBAEA,2BACA,8BAEA","file":"structure.css","sourcesContent":["@import \"../themes/native/native.globals\";\n@import \"../themes/mixins\";\n\n// Structure\n// --------------------------------------------------\n// Adds structural css to the native html elements\n\n* {\n box-sizing: border-box;\n\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n -webkit-tap-highlight-color: transparent;\n -webkit-touch-callout: none;\n}\n\nhtml {\n width: 100%;\n height: 100%;\n -webkit-text-size-adjust: 100%;\n\n text-size-adjust: 100%;\n}\n\nhtml.ion-ce body {\n display: block;\n}\n\nhtml.plt-pwa {\n height: 100vh;\n}\n\nbody {\n @include font-smoothing();\n @include margin(0);\n @include padding(0);\n\n position: fixed;\n\n width: 100%;\n max-width: 100%;\n height: 100%;\n max-height: 100%;\n\n /**\n * Because body has position: fixed,\n * it should be promoted to its own\n * layer.\n *\n * WebKit does not always promote\n * the body to its own layer on page\n * load in Ionic apps. Once scrolling on\n * ion-content starts, WebKit will promote\n * body. Unfortunately, this causes a re-paint\n * which results in scrolling being halted\n * until the next user gesture.\n *\n * This impacts the Custom Elements build.\n * The lazy loaded build causes the browser to\n * re-paint during hydration which causes WebKit\n * to promote body to its own layer.\n * In the CE Build, this hydration does not\n * happen, so the additional re-paint does not occur.\n */\n transform: translateZ(0);\n\n text-rendering: optimizeLegibility;\n\n overflow: hidden;\n\n touch-action: manipulation;\n\n -webkit-user-drag: none;\n\n -ms-content-zooming: none;\n\n word-wrap: break-word;\n\n overscroll-behavior-y: none;\n -webkit-text-size-adjust: none;\n\n text-size-adjust: none;\n}\n","@use \"./functions.string\" as string;\n\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n * :host {\n * background-color: green;\n * }\n * }\n */\n@mixin tablet-viewport() {\n @media screen and (min-width: 768px) {\n @content;\n }\n}\n\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n * :host {\n * background-color: blue;\n * }\n * }\n */\n@mixin mobile-viewport() {\n @media screen and (max-width: 767px) {\n @content;\n }\n}\n\n@mixin input-cover() {\n @include position(0, null, null, 0);\n @include margin(0);\n\n position: absolute;\n\n width: 100%;\n height: 100%;\n\n border: 0;\n\n outline: none;\n\n background: transparent;\n\n cursor: pointer;\n\n appearance: none;\n\n &::-moz-focus-inner {\n border: 0;\n }\n}\n\n@mixin visually-hidden() {\n position: absolute;\n\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n\n width: 100%;\n height: 100%;\n\n margin: 0;\n\n padding: 0;\n\n border: 0;\n\n outline: 0;\n\n opacity: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n\n -webkit-appearance: none;\n -moz-appearance: none;\n}\n\n@mixin text-inherit() {\n color: inherit;\n\n font-family: inherit;\n font-size: inherit;\n font-style: inherit;\n font-weight: inherit;\n\n letter-spacing: inherit;\n\n text-align: inherit;\n text-decoration: inherit;\n text-indent: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n\n white-space: inherit;\n}\n\n@mixin button-state() {\n @include position(0, 0, 0, 0);\n\n position: absolute;\n\n content: \"\";\n\n opacity: 0;\n}\n\n// Font smoothing\n// --------------------------------------------------\n\n@mixin font-smoothing() {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\n// Get the key from a map based on the index\n@function index-to-key($map, $index) {\n $keys: map-keys($map);\n\n @return nth($keys, $index);\n}\n\n// Breakpoint Mixins\n// ---------------------------------------------------------------------------------\n\n// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$screen-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// ---------------------------------------------------------------------------------\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 576px\n@function breakpoint-min($name, $breakpoints: $screen-breakpoints) {\n $min: map-get($breakpoints, $name);\n\n @return if($name != index-to-key($breakpoints, 1), $min, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.\n// Useful for making responsive utilities.\n//\n// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"\" (Returns a blank string)\n// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $screen-breakpoints) {\n @return if(breakpoint-min($name, $breakpoints) == null, \"\", \"-#{$name}\");\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $screen-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n\n @if $min {\n @media (min-width: $min) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n// >> breakpoint-next(sm)\n// md\n// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// md\n// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n// md\n@function breakpoint-next($name, $breakpoints: $screen-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n $n: index($breakpoint-names, $name);\n\n @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Maximum breakpoint width. Null for the smallest (first) breakpoint.\n// The maximum value is reduced by 0.02px to work around the limitations of\n// `min-` and `max-` prefixes and viewports with fractional widths.\n//\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\t// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\t// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 767.98px\n@function breakpoint-max($name, $breakpoints: $screen-breakpoints) {\n $max: map-get($breakpoints, $name);\n\n @return if($max and $max > 0, $max - 0.02, null);\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $screen-breakpoints) {\n $max: breakpoint-max($name, $breakpoints);\n\n @if $max {\n @media (max-width: $max) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Text Direction - ltr / rtl\n//\n// CSS defaults to use the ltr css, and adds [dir=rtl] selectors\n// to override ltr defaults.\n// ----------------------------------------------------------\n\n@mixin multi-dir() {\n @content;\n\n // $root: #{&};\n // @at-root [dir] {\n // #{$root} {\n // @content;\n // }\n // }\n}\n\n@mixin rtl() {\n $root: #{&};\n\n $rootSplit: string.str-split($root, \",\");\n $selectors: #{string.add-root-selector($root, \"[dir=rtl]\")};\n $selectorsSplit: string.str-split($selectors, \",\");\n\n $hostContextSelectors: ();\n $restSelectors: ();\n $dirSelectors: ();\n\n // Selectors must be split into individual selectors in case the browser\n // doesn't support a specific selector.\n // For example, Firefox and Safari doesn't support `:host-context()`.\n // If an invalid selector is used, then the entire group of selectors\n // will be ignored.\n // @link https://www.w3.org/TR/selectors-3/#grouping\n @each $selector in $selectorsSplit {\n // Group the selectors back into a single selector to optimize the output.\n @if str-index($selector, \":host-context\") {\n $hostContextSelectors: append($hostContextSelectors, $selector, comma);\n } @else {\n // Group the selectors back into a single selector to optimize the output.\n $restSelectors: append($restSelectors, $selector, comma);\n }\n }\n\n // Supported by Chrome.\n @if length($hostContextSelectors) > 0 {\n @at-root #{$hostContextSelectors} {\n @content;\n }\n }\n\n // Supported by all browsers.\n @if length($restSelectors) > 0 {\n @at-root #{$restSelectors} {\n @content;\n }\n }\n\n // If browser can support `:dir()`, then add the `:dir()` selectors.\n @supports selector(:dir(rtl)) {\n // Adding :dir() in case the browser doesn't support `:host-context()` and does support `:dir()`.\n // `:host-context()` is added:\n // - through the `add-root-selector()` function.\n // - first so that it takes precedence over `:dir()`.\n // For example,\n // - Firefox doesn't support `:host-context()`, but does support `:dir()`.\n // - Safari doesn't support `:host-context()`, but Safari 16.4+ supports `:dir()`\n // @link https://webkit.org/blog/13966/webkit-features-in-safari-16-4/\n // -- However, there is a Webkit bug on v16 that prevents `:dir()` from working when\n // -- the app direction is changed dynamically. v17+ works fine.\n // -- @link https://bugs.webkit.org/show_bug.cgi?id=257133\n\n // Supported by Firefox.\n @at-root #{string.add-root-selector($root, \":dir(rtl)\", false)} {\n @content;\n }\n }\n}\n\n@mixin ltr() {\n @content;\n}\n\n// SVG Background Image Mixin\n// @param {string} $svg\n// ----------------------------------------------------------\n@mixin svg-background-image($svg, $flip-rtl: false) {\n $url: url-encode($svg);\n $viewBox: string.str-split(string.str-extract($svg, \"viewBox='\", \"'\"), \" \");\n\n @if $flip-rtl != true or $viewBox == null {\n @include multi-dir() {\n background-image: url(\"data:image/svg+xml;charset=utf-8,#{$url}\");\n }\n } @else {\n $transform: \"transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'\";\n $flipped-url: $svg;\n $flipped-url: string.str-replace($flipped-url, \"<path\", \"<path #{$transform}\");\n $flipped-url: string.str-replace($flipped-url, \"<line\", \"<line #{$transform}\");\n $flipped-url: string.str-replace($flipped-url, \"<polygon\", \"<polygon #{$transform}\");\n $flipped-url: url-encode($flipped-url);\n\n @include ltr() {\n background-image: url(\"data:image/svg+xml;charset=utf-8,#{$url}\");\n }\n\n @include rtl() {\n background-image: url(\"data:image/svg+xml;charset=utf-8,#{$flipped-url}\");\n }\n }\n}\n\n// Add property horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin property-horizontal($prop, $start, $end: $start) {\n @if $start == 0 and $end == 0 {\n #{$prop}-left: $start;\n #{$prop}-right: $end;\n } @else {\n -webkit-#{$prop}-start: $start;\n #{$prop}-inline-start: $start;\n -webkit-#{$prop}-end: $end;\n #{$prop}-inline-end: $end;\n }\n}\n\n// Add property for all directions\n// @param {string} $prop\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// @param {boolean} $content include content or use default\n// ----------------------------------------------------------\n@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {\n @include property-horizontal($prop, $start, $end);\n #{$prop}-top: $top;\n #{$prop}-bottom: $bottom;\n}\n\n// Add padding horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin padding-horizontal($start, $end: $start) {\n @include property-horizontal(padding, $start, $end);\n}\n\n// Add padding for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {\n @include property(padding, $top, $end, $bottom, $start);\n}\n\n// Add margin horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin margin-horizontal($start, $end: $start) {\n @include property-horizontal(margin, $start, $end);\n}\n\n// Add margin for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {\n @include property(margin, $top, $end, $bottom, $start);\n}\n\n// Add position horizontal\n// @param {string} $start - amount to position start\n// @param {string} $end - amount to left: 0; end\n// ----------------------------------------------------------\n@mixin position-horizontal($start: null, $end: null) {\n @if $start == $end {\n @include multi-dir() {\n right: $end;\n left: $start;\n }\n } @else {\n @at-root {\n & {\n inset-inline-start: $start;\n inset-inline-end: $end;\n }\n }\n }\n}\n\n// Add position for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin position($top: null, $end: null, $bottom: null, $start: null) {\n @include position-horizontal($start, $end);\n top: $top;\n bottom: $bottom;\n}\n\n// Add border for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin border($top, $end: $top, $bottom: $top, $start: $end) {\n @include property(border, $top, $end, $bottom, $start);\n}\n\n// Add border radius for all directions\n// @param {string} $top-start\n// @param {string} $top-end\n// @param {string} $bottom-end\n// @param {string} $bottom-start\n// ----------------------------------------------------------\n@mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {\n @if $top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start {\n border-radius: $top-start;\n } @else {\n border-start-start-radius: $top-start;\n border-start-end-radius: $top-end;\n border-end-end-radius: $bottom-end;\n border-end-start-radius: $bottom-start;\n }\n}\n\n// Add direction for all directions\n// @param {string} $dir - Direction on LTR\n@mixin direction($dir) {\n $other-dir: null;\n\n @if $dir == ltr {\n $other-dir: rtl;\n } @else {\n $other-dir: ltr;\n }\n\n @include ltr() {\n direction: $dir;\n }\n\n @include rtl() {\n direction: $other-dir;\n }\n}\n\n// Add float for all directions\n// @param {string} $side\n// @param {string} $decorator - !important\n@mixin float($side, $decorator: null) {\n @if $side == start {\n @include ltr() {\n float: left $decorator;\n }\n\n @include rtl() {\n float: right $decorator;\n }\n } @else if $side == end {\n @include ltr() {\n float: right $decorator;\n }\n\n @include rtl() {\n float: left $decorator;\n }\n } @else {\n @include multi-dir() {\n float: $side $decorator;\n }\n }\n}\n\n@mixin background-position($horizontal, $horizontal-amount: null, $vertical: null, $vertical-amount: null) {\n @if $horizontal == start or $horizontal == end {\n $horizontal-ltr: null;\n $horizontal-rtl: null;\n\n @if $horizontal == start {\n $horizontal-ltr: left;\n $horizontal-rtl: right;\n } @else {\n $horizontal-ltr: right;\n $horizontal-rtl: left;\n }\n\n @include ltr() {\n background-position: $horizontal-ltr $horizontal-amount $vertical $vertical-amount;\n }\n\n @include rtl() {\n background-position: $horizontal-rtl $horizontal-amount $vertical $vertical-amount;\n }\n } @else {\n @include multi-dir() {\n background-position: $horizontal $horizontal-amount $vertical $vertical-amount;\n }\n }\n}\n\n@mixin transform-origin($x-axis, $y-axis: null) {\n @if $x-axis == start {\n @include ltr() {\n transform-origin: left $y-axis;\n }\n\n @include rtl() {\n transform-origin: right $y-axis;\n }\n } @else if $x-axis == end {\n @include ltr() {\n transform-origin: right $y-axis;\n }\n\n @include rtl() {\n transform-origin: left $y-axis;\n }\n } @else if $x-axis == left or $x-axis == right {\n @include multi-dir() {\n transform-origin: $x-axis $y-axis;\n }\n } @else {\n @include ltr() {\n transform-origin: $x-axis $y-axis;\n }\n\n @include rtl() {\n transform-origin: calc(100% - #{$x-axis}) $y-axis;\n }\n }\n}\n\n// Add transform for all directions\n// @param {string} $transforms - comma separated list of transforms\n@mixin transform($transforms...) {\n $extra: null;\n\n $x: null;\n $ltr-translate: null;\n $rtl-translate: null;\n\n @each $transform in $transforms {\n @if (str-index($transform, translate3d)) {\n $transform: string.str-replace($transform, \"translate3d(\");\n $transform: string.str-replace($transform, \")\");\n\n $coordinates: string.str-split($transform, \",\");\n\n $x: nth($coordinates, 1);\n $y: nth($coordinates, 2);\n $z: nth($coordinates, 3);\n\n $ltr-translate: translate3d($x, $y, $z);\n $rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);\n } @else {\n @if $extra == null {\n $extra: $transform;\n } @else {\n $extra: $extra $transform;\n }\n }\n }\n\n @if $x == \"0\" or $x == null {\n @include multi-dir() {\n transform: $ltr-translate $extra;\n }\n } @else {\n @include ltr() {\n transform: $ltr-translate $extra;\n }\n\n @include rtl() {\n transform: $rtl-translate $extra;\n }\n }\n}\n"]}
1
+ {"version":3,"sourceRoot":"","sources":["../src/css/structure.scss","../src/themes/ionic.mixins.scss"],"names":[],"mappings":"AAQA,EACE,sBAEA,0CACA,wCACA,2BAGF,KACE,WACA,YACA,8BAEA,sBAGF,iBACE,cAGF,aACE,aAGF,KC8EE,kCACA,mCA0NE,YDvSc,ECwSd,aDxSc,EC4ThB,WD5TgB,EC6ThB,cD7TgB,ECuSd,aDtSe,ECuSf,cDvSe,EC2TjB,YD3TiB,EC4TjB,eD5TiB,EAEjB,eAEA,WACA,eACA,YACA,gBAsBA,wBAEA,kCAEA,gBAEA,0BAEA,uBAEA,yBAEA,qBAEA,2BACA,8BAEA","file":"structure.css","sourcesContent":["@import \"../themes/ionic.globals\";\n@import \"../themes/ionic.mixins\";\n\n\n// Structure\n// --------------------------------------------------\n// Adds structural css to the native html elements\n\n* {\n box-sizing: border-box;\n\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n -webkit-tap-highlight-color: transparent;\n -webkit-touch-callout: none;\n}\n\nhtml {\n width: 100%;\n height: 100%;\n -webkit-text-size-adjust: 100%;\n\n text-size-adjust: 100%;\n}\n\nhtml.ion-ce body {\n display: block;\n}\n\nhtml.plt-pwa {\n height: 100vh;\n}\n\nbody {\n @include font-smoothing();\n @include margin(0);\n @include padding(0);\n\n position: fixed;\n\n width: 100%;\n max-width: 100%;\n height: 100%;\n max-height: 100%;\n\n /**\n * Because body has position: fixed,\n * it should be promoted to its own\n * layer.\n *\n * WebKit does not always promote\n * the body to its own layer on page\n * load in Ionic apps. Once scrolling on\n * ion-content starts, WebKit will promote\n * body. Unfortunately, this causes a re-paint\n * which results in scrolling being halted\n * until the next user gesture.\n *\n * This impacts the Custom Elements build.\n * The lazy loaded build causes the browser to\n * re-paint during hydration which causes WebKit\n * to promote body to its own layer.\n * In the CE Build, this hydration does not\n * happen, so the additional re-paint does not occur.\n */\n transform: translateZ(0);\n\n text-rendering: optimizeLegibility;\n\n overflow: hidden;\n\n touch-action: manipulation;\n\n -webkit-user-drag: none;\n\n -ms-content-zooming: none;\n\n word-wrap: break-word;\n\n overscroll-behavior-y: none;\n -webkit-text-size-adjust: none;\n\n text-size-adjust: none;\n}\n","\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n * :host {\n * background-color: green;\n * }\n * }\n */\n@mixin tablet-viewport() {\n @media screen and (min-width: 768px) {\n @content;\n }\n}\n\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n * :host {\n * background-color: blue;\n * }\n * }\n */\n@mixin mobile-viewport() {\n @media screen and (max-width: 767px) {\n @content;\n }\n}\n\n@mixin input-cover() {\n @include position(0, null, null, 0);\n @include margin(0);\n\n position: absolute;\n\n width: 100%;\n height: 100%;\n\n border: 0;\n background: transparent;\n cursor: pointer;\n\n appearance: none;\n outline: none;\n\n &::-moz-focus-inner {\n border: 0;\n }\n}\n\n@mixin visually-hidden() {\n position: absolute;\n\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n\n width: 100%;\n height: 100%;\n\n margin: 0;\n padding: 0;\n\n border: 0;\n outline: 0;\n clip: rect(0 0 0 0);\n\n opacity: 0;\n overflow: hidden;\n\n -webkit-appearance: none;\n -moz-appearance: none;\n}\n\n@mixin text-inherit() {\n font-family: inherit;\n font-size: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-indent: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n}\n\n@mixin button-state() {\n @include position(0, 0, 0, 0);\n\n position: absolute;\n\n content: \"\";\n\n opacity: 0;\n}\n\n// Font smoothing\n// --------------------------------------------------\n\n@mixin font-smoothing() {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\n// Get the key from a map based on the index\n@function index-to-key($map, $index) {\n $keys: map-keys($map);\n\n @return nth($keys, $index);\n}\n\n\n// Breakpoint Mixins\n// ---------------------------------------------------------------------------------\n\n// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$screen-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// ---------------------------------------------------------------------------------\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 576px\n@function breakpoint-min($name, $breakpoints: $screen-breakpoints) {\n $min: map-get($breakpoints, $name);\n\n @return if($name != index-to-key($breakpoints, 1), $min, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.\n// Useful for making responsive utilities.\n//\n// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"\" (Returns a blank string)\n// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $screen-breakpoints) {\n @return if(breakpoint-min($name, $breakpoints) == null, \"\", \"-#{$name}\");\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $screen-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n @if $min {\n @media (min-width: $min) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n// >> breakpoint-next(sm)\n// md\n// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// md\n// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n// md\n@function breakpoint-next($name, $breakpoints: $screen-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n $n: index($breakpoint-names, $name);\n @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Maximum breakpoint width. Null for the smallest (first) breakpoint.\n// The maximum value is reduced by 0.02px to work around the limitations of\n// `min-` and `max-` prefixes and viewports with fractional widths.\n//\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\t// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\t// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 767.98px\n@function breakpoint-max($name, $breakpoints: $screen-breakpoints) {\n $max: map-get($breakpoints, $name);\n @return if($max and $max > 0, $max - .02, null);\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $screen-breakpoints) {\n $max: breakpoint-max($name, $breakpoints);\n @if $max {\n @media (max-width: $max) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n\n// Text Direction - ltr / rtl\n//\n// CSS defaults to use the ltr css, and adds [dir=rtl] selectors\n// to override ltr defaults.\n// ----------------------------------------------------------\n\n@mixin multi-dir() {\n @content;\n\n // $root: #{&};\n // @at-root [dir] {\n // #{$root} {\n // @content;\n // }\n // }\n}\n\n@mixin rtl() {\n $root: #{&};\n\n $rootSplit: str-split($root, \",\");\n $selectors: #{add-root-selector($root, \"[dir=rtl]\")};\n $selectorsSplit: str-split($selectors, \",\");\n\n $hostContextSelectors: ();\n $restSelectors: ();\n $dirSelectors: ();\n\n // Selectors must be split into individual selectors in case the browser\n // doesn't support a specific selector.\n // For example, Firefox and Safari doesn't support `:host-context()`.\n // If an invalid selector is used, then the entire group of selectors\n // will be ignored.\n // @link https://www.w3.org/TR/selectors-3/#grouping\n @each $selector in $selectorsSplit {\n // Group the selectors back into a single selector to optimize the output.\n @if str-index($selector, \":host-context\") {\n $hostContextSelectors: append($hostContextSelectors, $selector, comma);\n } @else {\n // Group the selectors back into a single selector to optimize the output.\n $restSelectors: append($restSelectors, $selector, comma);\n }\n }\n\n // Supported by Chrome.\n @if length($hostContextSelectors) > 0 {\n @at-root #{$hostContextSelectors} {\n @content;\n }\n }\n\n // Supported by all browsers.\n @if length($restSelectors) > 0 {\n @at-root #{$restSelectors} {\n @content;\n }\n }\n\n // If browser can support `:dir()`, then add the `:dir()` selectors.\n @supports selector(:dir(rtl)) {\n // Adding :dir() in case the browser doesn't support `:host-context()` and does support `:dir()`.\n // `:host-context()` is added:\n // - through the `add-root-selector()` function.\n // - first so that it takes precedence over `:dir()`.\n // For example,\n // - Firefox doesn't support `:host-context()`, but does support `:dir()`.\n // - Safari doesn't support `:host-context()`, but Safari 16.4+ supports `:dir()`\n // @link https://webkit.org/blog/13966/webkit-features-in-safari-16-4/\n // -- However, there is a Webkit bug on v16 that prevents `:dir()` from working when\n // -- the app direction is changed dynamically. v17+ works fine.\n // -- @link https://bugs.webkit.org/show_bug.cgi?id=257133\n\n // Supported by Firefox.\n @at-root #{add-root-selector($root, \":dir(rtl)\", false)} {\n @content;\n }\n }\n}\n\n@mixin ltr() {\n @content;\n}\n\n\n// SVG Background Image Mixin\n// @param {string} $svg\n// ----------------------------------------------------------\n@mixin svg-background-image($svg, $flip-rtl: false) {\n $url: url-encode($svg);\n $viewBox: str-split(str-extract($svg, \"viewBox='\", \"'\"), \" \");\n\n @if $flip-rtl != true or $viewBox == null {\n @include multi-dir() {\n background-image: url(\"data:image/svg+xml;charset=utf-8,#{$url}\");\n }\n } @else {\n $transform: \"transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'\";\n $flipped-url: $svg;\n $flipped-url: str-replace($flipped-url, \"<path\", \"<path #{$transform}\");\n $flipped-url: str-replace($flipped-url, \"<line\", \"<line #{$transform}\");\n $flipped-url: str-replace($flipped-url, \"<polygon\", \"<polygon #{$transform}\");\n $flipped-url: url-encode($flipped-url);\n\n @include ltr () {\n background-image: url(\"data:image/svg+xml;charset=utf-8,#{$url}\");\n }\n @include rtl() {\n background-image: url(\"data:image/svg+xml;charset=utf-8,#{$flipped-url}\");\n }\n }\n}\n\n// Add property horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin property-horizontal($prop, $start, $end: $start) {\n @if $start == 0 and $end == 0 {\n #{$prop}-left: $start;\n #{$prop}-right: $end;\n\n } @else {\n -webkit-#{$prop}-start: $start;\n #{$prop}-inline-start: $start;\n -webkit-#{$prop}-end: $end;\n #{$prop}-inline-end: $end;\n }\n}\n\n// Add property for all directions\n// @param {string} $prop\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// @param {boolean} $content include content or use default\n// ----------------------------------------------------------\n@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {\n @include property-horizontal($prop, $start, $end);\n #{$prop}-top: $top;\n #{$prop}-bottom: $bottom;\n}\n\n// Add padding horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin padding-horizontal($start, $end: $start) {\n @include property-horizontal(padding, $start, $end);\n}\n\n// Add padding for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {\n @include property(padding, $top, $end, $bottom, $start);\n}\n\n// Add margin horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin margin-horizontal($start, $end: $start) {\n @include property-horizontal(margin, $start, $end);\n}\n\n// Add margin for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {\n @include property(margin, $top, $end, $bottom, $start);\n}\n\n// Add position horizontal\n// @param {string} $start - amount to position start\n// @param {string} $end - amount to left: 0; end\n// ----------------------------------------------------------\n@mixin position-horizontal($start: null, $end: null) {\n @if $start == $end {\n @include multi-dir() {\n left: $start;\n right: $end;\n }\n } @else {\n @at-root {\n & {\n inset-inline-start: $start;\n inset-inline-end: $end;\n }\n }\n }\n}\n\n// Add position for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin position($top: null, $end: null, $bottom: null, $start: null) {\n @include position-horizontal($start, $end);\n top: $top;\n bottom: $bottom;\n}\n\n// Add border for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin border($top, $end: $top, $bottom: $top, $start: $end) {\n @include property(border, $top, $end, $bottom, $start);\n}\n\n// Add border radius for all directions\n// @param {string} $top-start\n// @param {string} $top-end\n// @param {string} $bottom-end\n// @param {string} $bottom-start\n// ----------------------------------------------------------\n@mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {\n @if $top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start {\n border-radius: $top-start;\n } @else {\n border-start-start-radius: $top-start;\n border-start-end-radius: $top-end;\n border-end-end-radius: $bottom-end;\n border-end-start-radius: $bottom-start;\n }\n}\n\n// Add direction for all directions\n// @param {string} $dir - Direction on LTR\n@mixin direction($dir) {\n $other-dir: null;\n\n @if $dir == ltr {\n $other-dir: rtl;\n } @else {\n $other-dir: ltr;\n }\n\n @include ltr() {\n direction: $dir;\n }\n @include rtl() {\n direction: $other-dir;\n }\n}\n\n// Add float for all directions\n// @param {string} $side\n// @param {string} $decorator - !important\n@mixin float($side, $decorator: null) {\n @if $side == start {\n @include ltr() {\n float: left $decorator;\n }\n @include rtl() {\n float: right $decorator;\n }\n } @else if $side == end {\n @include ltr() {\n float: right $decorator;\n }\n @include rtl() {\n float: left $decorator;\n }\n } @else {\n @include multi-dir() {\n float: $side $decorator;\n }\n }\n}\n\n@mixin background-position($horizontal, $horizontal-amount: null, $vertical: null, $vertical-amount: null) {\n @if $horizontal == start or $horizontal == end {\n $horizontal-ltr: null;\n $horizontal-rtl: null;\n @if $horizontal == start {\n $horizontal-ltr: left;\n $horizontal-rtl: right;\n } @else {\n $horizontal-ltr: right;\n $horizontal-rtl: left;\n }\n\n @include ltr() {\n background-position: $horizontal-ltr $horizontal-amount $vertical $vertical-amount;\n }\n @include rtl() {\n background-position: $horizontal-rtl $horizontal-amount $vertical $vertical-amount;\n }\n } @else {\n @include multi-dir() {\n background-position: $horizontal $horizontal-amount $vertical $vertical-amount;\n }\n }\n}\n\n@mixin transform-origin($x-axis, $y-axis: null) {\n @if $x-axis == start {\n @include ltr() {\n transform-origin: left $y-axis;\n }\n @include rtl() {\n transform-origin: right $y-axis;\n }\n } @else if $x-axis == end {\n @include ltr() {\n transform-origin: right $y-axis;\n }\n @include rtl() {\n transform-origin: left $y-axis;\n }\n } @else if $x-axis == left or $x-axis == right {\n @include multi-dir() {\n transform-origin: $x-axis $y-axis;\n }\n } @else {\n @include ltr() {\n transform-origin: $x-axis $y-axis;\n }\n @include rtl() {\n transform-origin: calc(100% - #{$x-axis}) $y-axis;\n }\n }\n}\n\n// Add transform for all directions\n// @param {string} $transforms - comma separated list of transforms\n@mixin transform($transforms...) {\n $extra: null;\n\n $x: null;\n $ltr-translate: null;\n $rtl-translate: null;\n\n @each $transform in $transforms {\n @if (str-index($transform, translate3d)) {\n $transform: str-replace($transform, 'translate3d(');\n $transform: str-replace($transform, ')');\n\n $coordinates: str-split($transform, ',');\n\n $x: nth($coordinates, 1);\n $y: nth($coordinates, 2);\n $z: nth($coordinates, 3);\n\n $ltr-translate: translate3d($x, $y, $z);\n $rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);\n } @else {\n @if $extra == null {\n $extra: $transform;\n } @else {\n $extra: $extra $transform;\n }\n }\n }\n\n @if $x == '0' or $x == null {\n @include multi-dir() {\n transform: $ltr-translate $extra;\n }\n } @else {\n @include ltr() {\n transform: $ltr-translate $extra;\n }\n\n @include rtl() {\n transform: $rtl-translate $extra;\n }\n }\n}\n"]}
package/css/text-alignment.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../src/css/text-alignment.scss","../src/themes/mixins.scss"],"names":[],"mappings":"AAaI,iBACE,6BAGF,kBACE,8BAGF,gBACE,4BAGF,cACE,0BAGF,eACE,2BAGF,gBACE,4BAGF,iBACE,8BAGF,eACE,8BCiIF,yBD9JA,oBACE,6BAGF,qBACE,8BAGF,mBACE,4BAGF,iBACE,0BAGF,kBACE,2BAGF,mBACE,4BAGF,oBACE,8BAGF,kBACE,+BCiIF,yBD9JA,oBACE,6BAGF,qBACE,8BAGF,mBACE,4BAGF,iBACE,0BAGF,kBACE,2BAGF,mBACE,4BAGF,oBACE,8BAGF,kBACE,+BCiIF,yBD9JA,oBACE,6BAGF,qBACE,8BAGF,mBACE,4BAGF,iBACE,0BAGF,kBACE,2BAGF,mBACE,4BAGF,oBACE,8BAGF,kBACE,+BCiIF,0BD9JA,oBACE,6BAGF,qBACE,8BAGF,mBACE,4BAGF,iBACE,0BAGF,kBACE,2BAGF,mBACE,4BAGF,oBACE,8BAGF,kBACE","file":"text-alignment.css","sourcesContent":["@import \"../themes/native/native.globals\";\n@import \"../themes/mixins\";\n\n// Text Alignment\n// --------------------------------------------------\n// Creates text alignment attributes based on screen size\n\n@each $breakpoint in map-keys($screen-breakpoints) {\n $infix: breakpoint-infix($breakpoint, $screen-breakpoints);\n\n @include media-breakpoint-up($breakpoint, $screen-breakpoints) {\n // Provide `.ion-text-{bp}` classes for aligning the text based\n // on the breakpoint\n .ion-text#{$infix}-center {\n text-align: center !important;\n }\n\n .ion-text#{$infix}-justify {\n text-align: justify !important;\n }\n\n .ion-text#{$infix}-start {\n text-align: start !important;\n }\n\n .ion-text#{$infix}-end {\n text-align: end !important;\n }\n\n .ion-text#{$infix}-left {\n text-align: left !important;\n }\n\n .ion-text#{$infix}-right {\n text-align: right !important;\n }\n\n .ion-text#{$infix}-nowrap {\n white-space: nowrap !important;\n }\n\n .ion-text#{$infix}-wrap {\n white-space: normal !important;\n }\n }\n}\n","@use \"./functions.string\" as string;\n\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n * :host {\n * background-color: green;\n * }\n * }\n */\n@mixin tablet-viewport() {\n @media screen and (min-width: 768px) {\n @content;\n }\n}\n\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n * :host {\n * background-color: blue;\n * }\n * }\n */\n@mixin mobile-viewport() {\n @media screen and (max-width: 767px) {\n @content;\n }\n}\n\n@mixin input-cover() {\n @include position(0, null, null, 0);\n @include margin(0);\n\n position: absolute;\n\n width: 100%;\n height: 100%;\n\n border: 0;\n\n outline: none;\n\n background: transparent;\n\n cursor: pointer;\n\n appearance: none;\n\n &::-moz-focus-inner {\n border: 0;\n }\n}\n\n@mixin visually-hidden() {\n position: absolute;\n\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n\n width: 100%;\n height: 100%;\n\n margin: 0;\n\n padding: 0;\n\n border: 0;\n\n outline: 0;\n\n opacity: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n\n -webkit-appearance: none;\n -moz-appearance: none;\n}\n\n@mixin text-inherit() {\n color: inherit;\n\n font-family: inherit;\n font-size: inherit;\n font-style: inherit;\n font-weight: inherit;\n\n letter-spacing: inherit;\n\n text-align: inherit;\n text-decoration: inherit;\n text-indent: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n\n white-space: inherit;\n}\n\n@mixin button-state() {\n @include position(0, 0, 0, 0);\n\n position: absolute;\n\n content: \"\";\n\n opacity: 0;\n}\n\n// Font smoothing\n// --------------------------------------------------\n\n@mixin font-smoothing() {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\n// Get the key from a map based on the index\n@function index-to-key($map, $index) {\n $keys: map-keys($map);\n\n @return nth($keys, $index);\n}\n\n// Breakpoint Mixins\n// ---------------------------------------------------------------------------------\n\n// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$screen-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// ---------------------------------------------------------------------------------\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 576px\n@function breakpoint-min($name, $breakpoints: $screen-breakpoints) {\n $min: map-get($breakpoints, $name);\n\n @return if($name != index-to-key($breakpoints, 1), $min, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.\n// Useful for making responsive utilities.\n//\n// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"\" (Returns a blank string)\n// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $screen-breakpoints) {\n @return if(breakpoint-min($name, $breakpoints) == null, \"\", \"-#{$name}\");\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $screen-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n\n @if $min {\n @media (min-width: $min) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n// >> breakpoint-next(sm)\n// md\n// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// md\n// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n// md\n@function breakpoint-next($name, $breakpoints: $screen-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n $n: index($breakpoint-names, $name);\n\n @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Maximum breakpoint width. Null for the smallest (first) breakpoint.\n// The maximum value is reduced by 0.02px to work around the limitations of\n// `min-` and `max-` prefixes and viewports with fractional widths.\n//\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\t// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\t// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 767.98px\n@function breakpoint-max($name, $breakpoints: $screen-breakpoints) {\n $max: map-get($breakpoints, $name);\n\n @return if($max and $max > 0, $max - 0.02, null);\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $screen-breakpoints) {\n $max: breakpoint-max($name, $breakpoints);\n\n @if $max {\n @media (max-width: $max) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Text Direction - ltr / rtl\n//\n// CSS defaults to use the ltr css, and adds [dir=rtl] selectors\n// to override ltr defaults.\n// ----------------------------------------------------------\n\n@mixin multi-dir() {\n @content;\n\n // $root: #{&};\n // @at-root [dir] {\n // #{$root} {\n // @content;\n // }\n // }\n}\n\n@mixin rtl() {\n $root: #{&};\n\n $rootSplit: string.str-split($root, \",\");\n $selectors: #{string.add-root-selector($root, \"[dir=rtl]\")};\n $selectorsSplit: string.str-split($selectors, \",\");\n\n $hostContextSelectors: ();\n $restSelectors: ();\n $dirSelectors: ();\n\n // Selectors must be split into individual selectors in case the browser\n // doesn't support a specific selector.\n // For example, Firefox and Safari doesn't support `:host-context()`.\n // If an invalid selector is used, then the entire group of selectors\n // will be ignored.\n // @link https://www.w3.org/TR/selectors-3/#grouping\n @each $selector in $selectorsSplit {\n // Group the selectors back into a single selector to optimize the output.\n @if str-index($selector, \":host-context\") {\n $hostContextSelectors: append($hostContextSelectors, $selector, comma);\n } @else {\n // Group the selectors back into a single selector to optimize the output.\n $restSelectors: append($restSelectors, $selector, comma);\n }\n }\n\n // Supported by Chrome.\n @if length($hostContextSelectors) > 0 {\n @at-root #{$hostContextSelectors} {\n @content;\n }\n }\n\n // Supported by all browsers.\n @if length($restSelectors) > 0 {\n @at-root #{$restSelectors} {\n @content;\n }\n }\n\n // If browser can support `:dir()`, then add the `:dir()` selectors.\n @supports selector(:dir(rtl)) {\n // Adding :dir() in case the browser doesn't support `:host-context()` and does support `:dir()`.\n // `:host-context()` is added:\n // - through the `add-root-selector()` function.\n // - first so that it takes precedence over `:dir()`.\n // For example,\n // - Firefox doesn't support `:host-context()`, but does support `:dir()`.\n // - Safari doesn't support `:host-context()`, but Safari 16.4+ supports `:dir()`\n // @link https://webkit.org/blog/13966/webkit-features-in-safari-16-4/\n // -- However, there is a Webkit bug on v16 that prevents `:dir()` from working when\n // -- the app direction is changed dynamically. v17+ works fine.\n // -- @link https://bugs.webkit.org/show_bug.cgi?id=257133\n\n // Supported by Firefox.\n @at-root #{string.add-root-selector($root, \":dir(rtl)\", false)} {\n @content;\n }\n }\n}\n\n@mixin ltr() {\n @content;\n}\n\n// SVG Background Image Mixin\n// @param {string} $svg\n// ----------------------------------------------------------\n@mixin svg-background-image($svg, $flip-rtl: false) {\n $url: url-encode($svg);\n $viewBox: string.str-split(string.str-extract($svg, \"viewBox='\", \"'\"), \" \");\n\n @if $flip-rtl != true or $viewBox == null {\n @include multi-dir() {\n background-image: url(\"data:image/svg+xml;charset=utf-8,#{$url}\");\n }\n } @else {\n $transform: \"transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'\";\n $flipped-url: $svg;\n $flipped-url: string.str-replace($flipped-url, \"<path\", \"<path #{$transform}\");\n $flipped-url: string.str-replace($flipped-url, \"<line\", \"<line #{$transform}\");\n $flipped-url: string.str-replace($flipped-url, \"<polygon\", \"<polygon #{$transform}\");\n $flipped-url: url-encode($flipped-url);\n\n @include ltr() {\n background-image: url(\"data:image/svg+xml;charset=utf-8,#{$url}\");\n }\n\n @include rtl() {\n background-image: url(\"data:image/svg+xml;charset=utf-8,#{$flipped-url}\");\n }\n }\n}\n\n// Add property horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin property-horizontal($prop, $start, $end: $start) {\n @if $start == 0 and $end == 0 {\n #{$prop}-left: $start;\n #{$prop}-right: $end;\n } @else {\n -webkit-#{$prop}-start: $start;\n #{$prop}-inline-start: $start;\n -webkit-#{$prop}-end: $end;\n #{$prop}-inline-end: $end;\n }\n}\n\n// Add property for all directions\n// @param {string} $prop\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// @param {boolean} $content include content or use default\n// ----------------------------------------------------------\n@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {\n @include property-horizontal($prop, $start, $end);\n #{$prop}-top: $top;\n #{$prop}-bottom: $bottom;\n}\n\n// Add padding horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin padding-horizontal($start, $end: $start) {\n @include property-horizontal(padding, $start, $end);\n}\n\n// Add padding for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {\n @include property(padding, $top, $end, $bottom, $start);\n}\n\n// Add margin horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin margin-horizontal($start, $end: $start) {\n @include property-horizontal(margin, $start, $end);\n}\n\n// Add margin for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {\n @include property(margin, $top, $end, $bottom, $start);\n}\n\n// Add position horizontal\n// @param {string} $start - amount to position start\n// @param {string} $end - amount to left: 0; end\n// ----------------------------------------------------------\n@mixin position-horizontal($start: null, $end: null) {\n @if $start == $end {\n @include multi-dir() {\n right: $end;\n left: $start;\n }\n } @else {\n @at-root {\n & {\n inset-inline-start: $start;\n inset-inline-end: $end;\n }\n }\n }\n}\n\n// Add position for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin position($top: null, $end: null, $bottom: null, $start: null) {\n @include position-horizontal($start, $end);\n top: $top;\n bottom: $bottom;\n}\n\n// Add border for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin border($top, $end: $top, $bottom: $top, $start: $end) {\n @include property(border, $top, $end, $bottom, $start);\n}\n\n// Add border radius for all directions\n// @param {string} $top-start\n// @param {string} $top-end\n// @param {string} $bottom-end\n// @param {string} $bottom-start\n// ----------------------------------------------------------\n@mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {\n @if $top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start {\n border-radius: $top-start;\n } @else {\n border-start-start-radius: $top-start;\n border-start-end-radius: $top-end;\n border-end-end-radius: $bottom-end;\n border-end-start-radius: $bottom-start;\n }\n}\n\n// Add direction for all directions\n// @param {string} $dir - Direction on LTR\n@mixin direction($dir) {\n $other-dir: null;\n\n @if $dir == ltr {\n $other-dir: rtl;\n } @else {\n $other-dir: ltr;\n }\n\n @include ltr() {\n direction: $dir;\n }\n\n @include rtl() {\n direction: $other-dir;\n }\n}\n\n// Add float for all directions\n// @param {string} $side\n// @param {string} $decorator - !important\n@mixin float($side, $decorator: null) {\n @if $side == start {\n @include ltr() {\n float: left $decorator;\n }\n\n @include rtl() {\n float: right $decorator;\n }\n } @else if $side == end {\n @include ltr() {\n float: right $decorator;\n }\n\n @include rtl() {\n float: left $decorator;\n }\n } @else {\n @include multi-dir() {\n float: $side $decorator;\n }\n }\n}\n\n@mixin background-position($horizontal, $horizontal-amount: null, $vertical: null, $vertical-amount: null) {\n @if $horizontal == start or $horizontal == end {\n $horizontal-ltr: null;\n $horizontal-rtl: null;\n\n @if $horizontal == start {\n $horizontal-ltr: left;\n $horizontal-rtl: right;\n } @else {\n $horizontal-ltr: right;\n $horizontal-rtl: left;\n }\n\n @include ltr() {\n background-position: $horizontal-ltr $horizontal-amount $vertical $vertical-amount;\n }\n\n @include rtl() {\n background-position: $horizontal-rtl $horizontal-amount $vertical $vertical-amount;\n }\n } @else {\n @include multi-dir() {\n background-position: $horizontal $horizontal-amount $vertical $vertical-amount;\n }\n }\n}\n\n@mixin transform-origin($x-axis, $y-axis: null) {\n @if $x-axis == start {\n @include ltr() {\n transform-origin: left $y-axis;\n }\n\n @include rtl() {\n transform-origin: right $y-axis;\n }\n } @else if $x-axis == end {\n @include ltr() {\n transform-origin: right $y-axis;\n }\n\n @include rtl() {\n transform-origin: left $y-axis;\n }\n } @else if $x-axis == left or $x-axis == right {\n @include multi-dir() {\n transform-origin: $x-axis $y-axis;\n }\n } @else {\n @include ltr() {\n transform-origin: $x-axis $y-axis;\n }\n\n @include rtl() {\n transform-origin: calc(100% - #{$x-axis}) $y-axis;\n }\n }\n}\n\n// Add transform for all directions\n// @param {string} $transforms - comma separated list of transforms\n@mixin transform($transforms...) {\n $extra: null;\n\n $x: null;\n $ltr-translate: null;\n $rtl-translate: null;\n\n @each $transform in $transforms {\n @if (str-index($transform, translate3d)) {\n $transform: string.str-replace($transform, \"translate3d(\");\n $transform: string.str-replace($transform, \")\");\n\n $coordinates: string.str-split($transform, \",\");\n\n $x: nth($coordinates, 1);\n $y: nth($coordinates, 2);\n $z: nth($coordinates, 3);\n\n $ltr-translate: translate3d($x, $y, $z);\n $rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);\n } @else {\n @if $extra == null {\n $extra: $transform;\n } @else {\n $extra: $extra $transform;\n }\n }\n }\n\n @if $x == \"0\" or $x == null {\n @include multi-dir() {\n transform: $ltr-translate $extra;\n }\n } @else {\n @include ltr() {\n transform: $ltr-translate $extra;\n }\n\n @include rtl() {\n transform: $rtl-translate $extra;\n }\n }\n}\n"]}
1
+ {"version":3,"sourceRoot":"","sources":["../src/css/text-alignment.scss","../src/themes/ionic.mixins.scss"],"names":[],"mappings":"AAaI,iBACE,6BAGF,kBACE,8BAGF,gBACE,4BAGF,cACE,0BAGF,eACE,2BAGF,gBACE,4BAGF,iBACE,8BAGF,eACE,8BCuHF,yBDpJA,oBACE,6BAGF,qBACE,8BAGF,mBACE,4BAGF,iBACE,0BAGF,kBACE,2BAGF,mBACE,4BAGF,oBACE,8BAGF,kBACE,+BCuHF,yBDpJA,oBACE,6BAGF,qBACE,8BAGF,mBACE,4BAGF,iBACE,0BAGF,kBACE,2BAGF,mBACE,4BAGF,oBACE,8BAGF,kBACE,+BCuHF,yBDpJA,oBACE,6BAGF,qBACE,8BAGF,mBACE,4BAGF,iBACE,0BAGF,kBACE,2BAGF,mBACE,4BAGF,oBACE,8BAGF,kBACE,+BCuHF,0BDpJA,oBACE,6BAGF,qBACE,8BAGF,mBACE,4BAGF,iBACE,0BAGF,kBACE,2BAGF,mBACE,4BAGF,oBACE,8BAGF,kBACE","file":"text-alignment.css","sourcesContent":["@import \"../themes/ionic.globals\";\n@import \"../themes/ionic.mixins\";\n\n// Text Alignment\n// --------------------------------------------------\n// Creates text alignment attributes based on screen size\n\n@each $breakpoint in map-keys($screen-breakpoints) {\n $infix: breakpoint-infix($breakpoint, $screen-breakpoints);\n\n @include media-breakpoint-up($breakpoint, $screen-breakpoints) {\n // Provide `.ion-text-{bp}` classes for aligning the text based\n // on the breakpoint\n .ion-text#{$infix}-center {\n text-align: center !important;\n }\n\n .ion-text#{$infix}-justify {\n text-align: justify !important;\n }\n\n .ion-text#{$infix}-start {\n text-align: start !important;\n }\n\n .ion-text#{$infix}-end {\n text-align: end !important;\n }\n\n .ion-text#{$infix}-left {\n text-align: left !important;\n }\n\n .ion-text#{$infix}-right {\n text-align: right !important;\n }\n\n .ion-text#{$infix}-nowrap {\n white-space: nowrap !important;\n }\n\n .ion-text#{$infix}-wrap {\n white-space: normal !important;\n }\n }\n}\n","\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n * :host {\n * background-color: green;\n * }\n * }\n */\n@mixin tablet-viewport() {\n @media screen and (min-width: 768px) {\n @content;\n }\n}\n\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n * :host {\n * background-color: blue;\n * }\n * }\n */\n@mixin mobile-viewport() {\n @media screen and (max-width: 767px) {\n @content;\n }\n}\n\n@mixin input-cover() {\n @include position(0, null, null, 0);\n @include margin(0);\n\n position: absolute;\n\n width: 100%;\n height: 100%;\n\n border: 0;\n background: transparent;\n cursor: pointer;\n\n appearance: none;\n outline: none;\n\n &::-moz-focus-inner {\n border: 0;\n }\n}\n\n@mixin visually-hidden() {\n position: absolute;\n\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n\n width: 100%;\n height: 100%;\n\n margin: 0;\n padding: 0;\n\n border: 0;\n outline: 0;\n clip: rect(0 0 0 0);\n\n opacity: 0;\n overflow: hidden;\n\n -webkit-appearance: none;\n -moz-appearance: none;\n}\n\n@mixin text-inherit() {\n font-family: inherit;\n font-size: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-indent: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n}\n\n@mixin button-state() {\n @include position(0, 0, 0, 0);\n\n position: absolute;\n\n content: \"\";\n\n opacity: 0;\n}\n\n// Font smoothing\n// --------------------------------------------------\n\n@mixin font-smoothing() {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\n// Get the key from a map based on the index\n@function index-to-key($map, $index) {\n $keys: map-keys($map);\n\n @return nth($keys, $index);\n}\n\n\n// Breakpoint Mixins\n// ---------------------------------------------------------------------------------\n\n// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$screen-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// ---------------------------------------------------------------------------------\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 576px\n@function breakpoint-min($name, $breakpoints: $screen-breakpoints) {\n $min: map-get($breakpoints, $name);\n\n @return if($name != index-to-key($breakpoints, 1), $min, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.\n// Useful for making responsive utilities.\n//\n// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"\" (Returns a blank string)\n// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $screen-breakpoints) {\n @return if(breakpoint-min($name, $breakpoints) == null, \"\", \"-#{$name}\");\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $screen-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n @if $min {\n @media (min-width: $min) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n// >> breakpoint-next(sm)\n// md\n// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// md\n// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n// md\n@function breakpoint-next($name, $breakpoints: $screen-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n $n: index($breakpoint-names, $name);\n @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Maximum breakpoint width. Null for the smallest (first) breakpoint.\n// The maximum value is reduced by 0.02px to work around the limitations of\n// `min-` and `max-` prefixes and viewports with fractional widths.\n//\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\t// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\t// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 767.98px\n@function breakpoint-max($name, $breakpoints: $screen-breakpoints) {\n $max: map-get($breakpoints, $name);\n @return if($max and $max > 0, $max - .02, null);\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $screen-breakpoints) {\n $max: breakpoint-max($name, $breakpoints);\n @if $max {\n @media (max-width: $max) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n\n// Text Direction - ltr / rtl\n//\n// CSS defaults to use the ltr css, and adds [dir=rtl] selectors\n// to override ltr defaults.\n// ----------------------------------------------------------\n\n@mixin multi-dir() {\n @content;\n\n // $root: #{&};\n // @at-root [dir] {\n // #{$root} {\n // @content;\n // }\n // }\n}\n\n@mixin rtl() {\n $root: #{&};\n\n $rootSplit: str-split($root, \",\");\n $selectors: #{add-root-selector($root, \"[dir=rtl]\")};\n $selectorsSplit: str-split($selectors, \",\");\n\n $hostContextSelectors: ();\n $restSelectors: ();\n $dirSelectors: ();\n\n // Selectors must be split into individual selectors in case the browser\n // doesn't support a specific selector.\n // For example, Firefox and Safari doesn't support `:host-context()`.\n // If an invalid selector is used, then the entire group of selectors\n // will be ignored.\n // @link https://www.w3.org/TR/selectors-3/#grouping\n @each $selector in $selectorsSplit {\n // Group the selectors back into a single selector to optimize the output.\n @if str-index($selector, \":host-context\") {\n $hostContextSelectors: append($hostContextSelectors, $selector, comma);\n } @else {\n // Group the selectors back into a single selector to optimize the output.\n $restSelectors: append($restSelectors, $selector, comma);\n }\n }\n\n // Supported by Chrome.\n @if length($hostContextSelectors) > 0 {\n @at-root #{$hostContextSelectors} {\n @content;\n }\n }\n\n // Supported by all browsers.\n @if length($restSelectors) > 0 {\n @at-root #{$restSelectors} {\n @content;\n }\n }\n\n // If browser can support `:dir()`, then add the `:dir()` selectors.\n @supports selector(:dir(rtl)) {\n // Adding :dir() in case the browser doesn't support `:host-context()` and does support `:dir()`.\n // `:host-context()` is added:\n // - through the `add-root-selector()` function.\n // - first so that it takes precedence over `:dir()`.\n // For example,\n // - Firefox doesn't support `:host-context()`, but does support `:dir()`.\n // - Safari doesn't support `:host-context()`, but Safari 16.4+ supports `:dir()`\n // @link https://webkit.org/blog/13966/webkit-features-in-safari-16-4/\n // -- However, there is a Webkit bug on v16 that prevents `:dir()` from working when\n // -- the app direction is changed dynamically. v17+ works fine.\n // -- @link https://bugs.webkit.org/show_bug.cgi?id=257133\n\n // Supported by Firefox.\n @at-root #{add-root-selector($root, \":dir(rtl)\", false)} {\n @content;\n }\n }\n}\n\n@mixin ltr() {\n @content;\n}\n\n\n// SVG Background Image Mixin\n// @param {string} $svg\n// ----------------------------------------------------------\n@mixin svg-background-image($svg, $flip-rtl: false) {\n $url: url-encode($svg);\n $viewBox: str-split(str-extract($svg, \"viewBox='\", \"'\"), \" \");\n\n @if $flip-rtl != true or $viewBox == null {\n @include multi-dir() {\n background-image: url(\"data:image/svg+xml;charset=utf-8,#{$url}\");\n }\n } @else {\n $transform: \"transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'\";\n $flipped-url: $svg;\n $flipped-url: str-replace($flipped-url, \"<path\", \"<path #{$transform}\");\n $flipped-url: str-replace($flipped-url, \"<line\", \"<line #{$transform}\");\n $flipped-url: str-replace($flipped-url, \"<polygon\", \"<polygon #{$transform}\");\n $flipped-url: url-encode($flipped-url);\n\n @include ltr () {\n background-image: url(\"data:image/svg+xml;charset=utf-8,#{$url}\");\n }\n @include rtl() {\n background-image: url(\"data:image/svg+xml;charset=utf-8,#{$flipped-url}\");\n }\n }\n}\n\n// Add property horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin property-horizontal($prop, $start, $end: $start) {\n @if $start == 0 and $end == 0 {\n #{$prop}-left: $start;\n #{$prop}-right: $end;\n\n } @else {\n -webkit-#{$prop}-start: $start;\n #{$prop}-inline-start: $start;\n -webkit-#{$prop}-end: $end;\n #{$prop}-inline-end: $end;\n }\n}\n\n// Add property for all directions\n// @param {string} $prop\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// @param {boolean} $content include content or use default\n// ----------------------------------------------------------\n@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {\n @include property-horizontal($prop, $start, $end);\n #{$prop}-top: $top;\n #{$prop}-bottom: $bottom;\n}\n\n// Add padding horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin padding-horizontal($start, $end: $start) {\n @include property-horizontal(padding, $start, $end);\n}\n\n// Add padding for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {\n @include property(padding, $top, $end, $bottom, $start);\n}\n\n// Add margin horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin margin-horizontal($start, $end: $start) {\n @include property-horizontal(margin, $start, $end);\n}\n\n// Add margin for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {\n @include property(margin, $top, $end, $bottom, $start);\n}\n\n// Add position horizontal\n// @param {string} $start - amount to position start\n// @param {string} $end - amount to left: 0; end\n// ----------------------------------------------------------\n@mixin position-horizontal($start: null, $end: null) {\n @if $start == $end {\n @include multi-dir() {\n left: $start;\n right: $end;\n }\n } @else {\n @at-root {\n & {\n inset-inline-start: $start;\n inset-inline-end: $end;\n }\n }\n }\n}\n\n// Add position for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin position($top: null, $end: null, $bottom: null, $start: null) {\n @include position-horizontal($start, $end);\n top: $top;\n bottom: $bottom;\n}\n\n// Add border for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin border($top, $end: $top, $bottom: $top, $start: $end) {\n @include property(border, $top, $end, $bottom, $start);\n}\n\n// Add border radius for all directions\n// @param {string} $top-start\n// @param {string} $top-end\n// @param {string} $bottom-end\n// @param {string} $bottom-start\n// ----------------------------------------------------------\n@mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {\n @if $top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start {\n border-radius: $top-start;\n } @else {\n border-start-start-radius: $top-start;\n border-start-end-radius: $top-end;\n border-end-end-radius: $bottom-end;\n border-end-start-radius: $bottom-start;\n }\n}\n\n// Add direction for all directions\n// @param {string} $dir - Direction on LTR\n@mixin direction($dir) {\n $other-dir: null;\n\n @if $dir == ltr {\n $other-dir: rtl;\n } @else {\n $other-dir: ltr;\n }\n\n @include ltr() {\n direction: $dir;\n }\n @include rtl() {\n direction: $other-dir;\n }\n}\n\n// Add float for all directions\n// @param {string} $side\n// @param {string} $decorator - !important\n@mixin float($side, $decorator: null) {\n @if $side == start {\n @include ltr() {\n float: left $decorator;\n }\n @include rtl() {\n float: right $decorator;\n }\n } @else if $side == end {\n @include ltr() {\n float: right $decorator;\n }\n @include rtl() {\n float: left $decorator;\n }\n } @else {\n @include multi-dir() {\n float: $side $decorator;\n }\n }\n}\n\n@mixin background-position($horizontal, $horizontal-amount: null, $vertical: null, $vertical-amount: null) {\n @if $horizontal == start or $horizontal == end {\n $horizontal-ltr: null;\n $horizontal-rtl: null;\n @if $horizontal == start {\n $horizontal-ltr: left;\n $horizontal-rtl: right;\n } @else {\n $horizontal-ltr: right;\n $horizontal-rtl: left;\n }\n\n @include ltr() {\n background-position: $horizontal-ltr $horizontal-amount $vertical $vertical-amount;\n }\n @include rtl() {\n background-position: $horizontal-rtl $horizontal-amount $vertical $vertical-amount;\n }\n } @else {\n @include multi-dir() {\n background-position: $horizontal $horizontal-amount $vertical $vertical-amount;\n }\n }\n}\n\n@mixin transform-origin($x-axis, $y-axis: null) {\n @if $x-axis == start {\n @include ltr() {\n transform-origin: left $y-axis;\n }\n @include rtl() {\n transform-origin: right $y-axis;\n }\n } @else if $x-axis == end {\n @include ltr() {\n transform-origin: right $y-axis;\n }\n @include rtl() {\n transform-origin: left $y-axis;\n }\n } @else if $x-axis == left or $x-axis == right {\n @include multi-dir() {\n transform-origin: $x-axis $y-axis;\n }\n } @else {\n @include ltr() {\n transform-origin: $x-axis $y-axis;\n }\n @include rtl() {\n transform-origin: calc(100% - #{$x-axis}) $y-axis;\n }\n }\n}\n\n// Add transform for all directions\n// @param {string} $transforms - comma separated list of transforms\n@mixin transform($transforms...) {\n $extra: null;\n\n $x: null;\n $ltr-translate: null;\n $rtl-translate: null;\n\n @each $transform in $transforms {\n @if (str-index($transform, translate3d)) {\n $transform: str-replace($transform, 'translate3d(');\n $transform: str-replace($transform, ')');\n\n $coordinates: str-split($transform, ',');\n\n $x: nth($coordinates, 1);\n $y: nth($coordinates, 2);\n $z: nth($coordinates, 3);\n\n $ltr-translate: translate3d($x, $y, $z);\n $rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);\n } @else {\n @if $extra == null {\n $extra: $transform;\n } @else {\n $extra: $extra $transform;\n }\n }\n }\n\n @if $x == '0' or $x == null {\n @include multi-dir() {\n transform: $ltr-translate $extra;\n }\n } @else {\n @include ltr() {\n transform: $ltr-translate $extra;\n }\n\n @include rtl() {\n transform: $rtl-translate $extra;\n }\n }\n}\n"]}