@ionic/core 8.8.18-dev.11786361672.19605941 → 8.8.18-dev.11786399582.1d58c37d

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 (1143) 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-legacy-column.js +1 -1
  59. package/components/ion-picker-legacy.js +1 -1
  60. package/components/ion-picker.js +1 -1
  61. package/components/ion-popover.js +1 -1
  62. package/components/ion-progress-bar.js +1 -1
  63. package/components/ion-radio-group.js +1 -1
  64. package/components/ion-radio.js +1 -1
  65. package/components/ion-range.js +1 -1
  66. package/components/ion-refresher-content.js +1 -1
  67. package/components/ion-refresher.js +1 -1
  68. package/components/ion-reorder-group.js +1 -1
  69. package/components/ion-reorder.js +1 -1
  70. package/components/ion-ripple-effect.js +1 -1
  71. package/components/ion-route-redirect.js +1 -1
  72. package/components/ion-route.js +1 -1
  73. package/components/ion-router-link.js +1 -1
  74. package/components/ion-router-outlet.js +1 -1
  75. package/components/ion-router.js +1 -1
  76. package/components/ion-row.js +1 -1
  77. package/components/ion-searchbar.js +1 -1
  78. package/components/ion-segment-button.js +1 -1
  79. package/components/ion-segment-content.js +1 -1
  80. package/components/ion-segment-view.js +1 -1
  81. package/components/ion-segment.js +1 -1
  82. package/components/ion-select-modal.js +1 -1
  83. package/components/ion-select-option.js +1 -1
  84. package/components/ion-select-popover.js +1 -1
  85. package/components/ion-select.js +1 -1
  86. package/components/ion-skeleton-text.js +1 -1
  87. package/components/ion-spinner.js +1 -1
  88. package/components/ion-split-pane.js +1 -1
  89. package/components/ion-tab-bar.js +1 -1
  90. package/components/ion-tab-button.js +1 -1
  91. package/components/ion-tab.js +1 -1
  92. package/components/ion-tabs.js +1 -1
  93. package/components/ion-text.js +1 -1
  94. package/components/ion-textarea.js +1 -1
  95. package/components/ion-thumbnail.js +1 -1
  96. package/components/ion-title.js +1 -1
  97. package/components/ion-toast.js +1 -1
  98. package/components/ion-toggle.js +1 -1
  99. package/components/ion-toolbar.js +1 -1
  100. package/components/p--JUspHvy.js +4 -0
  101. package/components/p-A3O24YmY.js +4 -0
  102. package/components/p-ABkNVeU9.js +4 -0
  103. package/{dist/ionic/p-Cm20lBQw.js → components/p-B-JJgYSG.js} +1 -1
  104. package/components/p-B9jFTlwE.js +4 -0
  105. package/components/p-BLmJ0zRm.js +4 -0
  106. package/components/p-BMI53wYL.js +4 -0
  107. package/components/p-BSEgsdFI.js +4 -0
  108. package/{dist/ionic/p-Cipl19Qe.js → components/p-BkKAANMJ.js} +1 -1
  109. package/components/p-BlIAuGv2.js +4 -0
  110. package/components/p-BmVRXR1y.js +4 -0
  111. package/components/p-Bnsn6KaP.js +4 -0
  112. package/components/p-BsBCoGa-.js +4 -0
  113. package/components/p-Bz0dSlXZ.js +4 -0
  114. package/components/p-CHqRYvYm.js +4 -0
  115. package/components/p-CIGNaXM1.js +4 -0
  116. package/components/p-CO7fmmxt.js +4 -0
  117. package/components/p-CQGnMY3n.js +4 -0
  118. package/components/p-CSZf8_j0.js +4 -0
  119. package/components/{p-B_jBop0E.js → p-C_hpsif8.js} +1 -1
  120. package/components/p-C_xFdyXe.js +4 -0
  121. package/components/{p-BE21dB_a.js → p-Cf2jSDS8.js} +1 -1
  122. package/components/p-Cfx4M1Bn.js +4 -0
  123. package/components/{p-DWoO0801.js → p-ChIZKXUu.js} +1 -1
  124. package/components/p-CkMSOsFF.js +4 -0
  125. package/components/p-CmR5uXej.js +4 -0
  126. package/components/p-Cp4GRDqq.js +4 -0
  127. package/components/p-CsNJ1ULL.js +4 -0
  128. package/components/p-CtWGkNnJ.js +4 -0
  129. package/components/p-CzCbeKys.js +4 -0
  130. package/components/p-D-aHdMxW.js +4 -0
  131. package/components/p-D0d8qTwj.js +4 -0
  132. package/components/{p-D0fnq0lf.js → p-D13Eaw-8.js} +1 -1
  133. package/components/p-D3xo7hqU.js +4 -0
  134. package/components/p-D6Ynv7Xh.js +4 -0
  135. package/components/p-D7uN07a3.js +4 -0
  136. package/components/p-DCnGU1fF.js +4 -0
  137. package/components/p-DGvrK8dD.js +4 -0
  138. package/components/p-DJztqcrH.js +4 -0
  139. package/components/p-DOFCbuQR.js +4 -0
  140. package/components/p-DRxvM2Ic.js +4 -0
  141. package/components/p-DV5mPYQS.js +4 -0
  142. package/components/p-DWkAgceV.js +4 -0
  143. package/components/p-DiVJyqlX.js +4 -0
  144. package/components/{p-BZwQa9ey.js → p-DqLB8yFQ.js} +1 -1
  145. package/components/p-DqZAXv2t.js +4 -0
  146. package/components/{p-Bz4JFPmj.js → p-Osve4qkc.js} +1 -1
  147. package/components/p-R8zmRi4c.js +4 -0
  148. package/components/p-SLS1rDZM.js +4 -0
  149. package/components/p-ZjP4CjeZ.js +4 -0
  150. package/components/p-aJ6PBUvj.js +4 -0
  151. package/{dist/ionic/p-OkgYzj-7.js → components/p-cyNmxje6.js} +1 -1
  152. package/components/p-gAg0kXZp.js +4 -0
  153. package/components/p-gYiraiT_.js +4 -0
  154. package/components/p-j5IxBIan.js +4 -0
  155. package/components/p-k_E4tX5Z.js +4 -0
  156. package/components/p-oD4kcBRX.js +4 -0
  157. package/components/p-rCa2eL0j.js +4 -0
  158. package/components/p-vRBNsYbs.js +4 -0
  159. package/components/p-yEQxMl70.js +4 -0
  160. package/components/p-yzCsOZE2.js +4 -0
  161. package/css/core.css +1 -1
  162. package/css/core.css.map +1 -1
  163. package/css/display.css +1 -1
  164. package/css/display.css.map +1 -1
  165. package/css/flex-utils.css +1 -1
  166. package/css/flex-utils.css.map +1 -1
  167. package/css/float-elements.css.map +1 -1
  168. package/css/global.bundle.css.map +1 -1
  169. package/css/ionic-swiper.css +1 -1
  170. package/css/ionic-swiper.css.map +1 -1
  171. package/css/ionic.bundle.css +1 -1
  172. package/css/ionic.bundle.css.map +1 -1
  173. package/css/normalize.css.map +1 -1
  174. package/css/padding.css.map +1 -1
  175. package/css/palettes/dark.always.css.map +1 -1
  176. package/css/palettes/dark.class.css.map +1 -1
  177. package/css/palettes/dark.system.css.map +1 -1
  178. package/css/palettes/high-contrast-dark.always.css.map +1 -1
  179. package/css/palettes/high-contrast-dark.class.css.map +1 -1
  180. package/css/palettes/high-contrast-dark.system.css.map +1 -1
  181. package/css/palettes/high-contrast.always.css.map +1 -1
  182. package/css/palettes/high-contrast.class.css.map +1 -1
  183. package/css/palettes/high-contrast.system.css.map +1 -1
  184. package/css/structure.css.map +1 -1
  185. package/css/text-alignment.css.map +1 -1
  186. package/css/text-transformation.css.map +1 -1
  187. package/css/typography.css.map +1 -1
  188. package/css/utils.bundle.css +1 -1
  189. package/css/utils.bundle.css.map +1 -1
  190. package/dist/cjs/{animation-B3xfVcDO.js → animation-Ch16T-Nb.js} +3 -3
  191. package/dist/cjs/{app-globals-3ZoCVkn-.js → app-globals-Dd89e0MR.js} +1 -1
  192. package/dist/cjs/{button-active-3tZKuPbT.js → button-active-COnxOe4X.js} +2 -2
  193. package/dist/cjs/{capacitor-CQSg1uCo.js → capacitor-DmA66EwP.js} +3 -3
  194. package/dist/cjs/config-D6C-KlA9.js +201 -0
  195. package/dist/{esm/focus-visible-vXpMhGrs.js → cjs/focus-visible-CCvKiLh3.js} +3 -23
  196. package/dist/cjs/{format-BCIkDef_.js → format-BUFWn4Bn.js} +1 -1
  197. package/dist/cjs/{framework-delegate-DC5nq_NN.js → framework-delegate-BgU6U9Ez.js} +2 -4
  198. package/dist/cjs/{haptic-eix26ESE.js → haptic-ClPPQ_PS.js} +1 -1
  199. package/dist/cjs/hardware-back-button-CXmUnTJC.js +121 -0
  200. package/dist/cjs/{helpers-DiOgV5hw.js → helpers-gntk8bfm.js} +4 -71
  201. package/dist/cjs/{index-BaJ7_YbC.js → index-BS2uhvhT.js} +4 -4
  202. package/dist/cjs/{index-GZU9YrFc.js → index-BfaXsATC.js} +241 -43
  203. package/dist/cjs/{index-bX3nz2vw.js → index-BhhuJ1Yx.js} +8 -9
  204. package/dist/cjs/{index-BxEZd5IE.js → index-BiRrzGDi.js} +34 -2
  205. package/dist/cjs/index-DkNv4J_i.js +10 -0
  206. package/dist/cjs/{index-CxDnX7hd.js → index-DqmRDbxg.js} +1 -3
  207. package/dist/cjs/{index-DYRcC3bw.js → index-ooS8B4p9.js} +15 -15
  208. package/dist/cjs/index.cjs.js +16 -16
  209. package/dist/cjs/{input-shims-BSEBw22J.js → input-shims-Bn1cXfCM.js} +17 -18
  210. package/dist/cjs/{input.utils-D68wgI2Y.js → input.utils-BwhxZooW.js} +5 -5
  211. package/dist/cjs/ion-accordion_2.cjs.entry.js +29 -61
  212. package/dist/cjs/ion-action-sheet.cjs.entry.js +22 -41
  213. package/dist/cjs/ion-alert.cjs.entry.js +41 -78
  214. package/dist/cjs/ion-app_8.cjs.entry.js +244 -458
  215. package/dist/cjs/ion-avatar_3.cjs.entry.js +13 -125
  216. package/dist/cjs/ion-back-button.cjs.entry.js +22 -31
  217. package/dist/cjs/ion-backdrop.cjs.entry.js +7 -10
  218. package/dist/cjs/ion-breadcrumb_2.cjs.entry.js +18 -54
  219. package/dist/cjs/ion-button_2.cjs.entry.js +24 -61
  220. package/dist/cjs/ion-card_5.cjs.entry.js +33 -55
  221. package/dist/cjs/ion-checkbox.cjs.entry.js +17 -34
  222. package/dist/cjs/ion-chip.cjs.entry.js +9 -50
  223. package/dist/cjs/ion-col_3.cjs.entry.js +57 -56
  224. package/dist/cjs/ion-datetime-button.cjs.entry.js +9 -13
  225. package/dist/cjs/ion-datetime_3.cjs.entry.js +51 -123
  226. package/dist/cjs/ion-fab_3.cjs.entry.js +28 -44
  227. package/dist/cjs/ion-img.cjs.entry.js +4 -8
  228. package/dist/cjs/ion-infinite-scroll_2.cjs.entry.js +17 -93
  229. package/dist/cjs/ion-input-otp.cjs.entry.js +9 -74
  230. package/dist/cjs/ion-input-password-toggle.cjs.entry.js +15 -53
  231. package/dist/cjs/ion-input.cjs.entry.js +35 -146
  232. package/dist/cjs/ion-item-option_3.cjs.entry.js +52 -467
  233. package/dist/cjs/ion-item_8.cjs.entry.js +50 -121
  234. package/dist/cjs/ion-loading.cjs.entry.js +19 -22
  235. package/dist/cjs/ion-menu_3.cjs.entry.js +29 -47
  236. package/dist/cjs/ion-modal.cjs.entry.js +215 -309
  237. package/dist/cjs/ion-nav_2.cjs.entry.js +11 -14
  238. package/dist/cjs/ion-picker-column-option.cjs.entry.js +8 -12
  239. package/dist/cjs/ion-picker-column.cjs.entry.js +14 -14
  240. package/dist/cjs/ion-picker.cjs.entry.js +6 -10
  241. package/dist/cjs/ion-popover.cjs.entry.js +19 -21
  242. package/dist/cjs/ion-progress-bar.cjs.entry.js +9 -27
  243. package/dist/cjs/ion-radio_2.cjs.entry.js +18 -36
  244. package/dist/cjs/ion-range.cjs.entry.js +13 -20
  245. package/dist/cjs/ion-refresher_2.cjs.entry.js +24 -43
  246. package/dist/cjs/ion-reorder_2.cjs.entry.js +14 -38
  247. package/dist/cjs/ion-ripple-effect.cjs.entry.js +7 -15
  248. package/dist/cjs/ion-route_4.cjs.entry.js +10 -11
  249. package/dist/cjs/ion-searchbar.cjs.entry.js +27 -160
  250. package/dist/cjs/ion-segment-content.cjs.entry.js +2 -2
  251. package/dist/cjs/ion-segment-view.cjs.entry.js +3 -13
  252. package/dist/cjs/ion-segment_2.cjs.entry.js +16 -23
  253. package/dist/cjs/ion-select-modal.cjs.entry.js +38 -114
  254. package/dist/cjs/ion-select_3.cjs.entry.js +108 -557
  255. package/dist/cjs/ion-spinner.cjs.entry.js +8 -30
  256. package/dist/cjs/ion-split-pane.cjs.entry.js +9 -13
  257. package/dist/cjs/ion-tab-bar_2.cjs.entry.js +28 -150
  258. package/dist/cjs/ion-tab_2.cjs.entry.js +7 -8
  259. package/dist/cjs/ion-text.cjs.entry.js +7 -7
  260. package/dist/cjs/ion-textarea.cjs.entry.js +23 -137
  261. package/dist/cjs/ion-toast.cjs.entry.js +46 -70
  262. package/dist/cjs/ion-toggle.cjs.entry.js +26 -82
  263. package/dist/cjs/ionic-global-BerQGEpE.js +151 -0
  264. package/dist/cjs/ionic.cjs.js +4 -4
  265. package/dist/cjs/{ios.transition-DpFQfFfT.js → ios.transition-IMJRwn29.js} +5 -7
  266. package/dist/cjs/{item-multiple-inputs-BG9f5_eV.js → item-multiple-inputs-jOJZE_I0.js} +1 -1
  267. package/dist/cjs/{keyboard-Bn0Ppim6.js → keyboard-UuAS4D_9.js} +1 -1
  268. package/dist/cjs/keyboard-controller-GXBiBRKS.js +167 -0
  269. package/dist/cjs/{keyboard-faZBQysj.js → keyboard-hHzlEQpk.js} +3 -4
  270. package/dist/cjs/loader.cjs.js +4 -4
  271. package/dist/cjs/{md.transition-ChJcoZUH.js → md.transition-CgQZxcoT.js} +5 -6
  272. package/dist/cjs/{notch-controller-BO0UGB4F.js → notch-controller-_SwR025y.js} +4 -4
  273. package/dist/cjs/{overlays-CFGbPUmE.js → overlays-DuSEMhIW.js} +18 -309
  274. package/dist/cjs/{status-tap-x2qDo5QR.js → status-tap-CSvBT7FV.js} +3 -4
  275. package/dist/cjs/{swipe-back-CvZt_4YX.js → swipe-back-CuIiziaa.js} +2 -3
  276. package/dist/cjs/{theme-IlOsGAz7.js → theme-CeDs6Hcv.js} +1 -25
  277. package/dist/cjs/validity-BpS37YFM.js +19 -0
  278. package/dist/collection/collection-manifest.json +1 -9
  279. package/dist/collection/components/accordion/accordion.ios.css +58 -73
  280. package/dist/collection/components/accordion/accordion.js +27 -41
  281. package/dist/collection/components/accordion/accordion.md.css +59 -67
  282. package/dist/collection/components/accordion-group/accordion-group.ios.css +4 -16
  283. package/dist/collection/components/accordion-group/accordion-group.js +8 -44
  284. package/dist/collection/components/accordion-group/accordion-group.md.css +4 -22
  285. package/dist/collection/components/action-sheet/action-sheet.ios.css +11 -367
  286. package/dist/collection/components/action-sheet/action-sheet.js +13 -32
  287. package/dist/collection/components/action-sheet/action-sheet.md.css +10 -306
  288. package/dist/collection/components/alert/alert.ios.css +19 -481
  289. package/dist/collection/components/alert/alert.js +30 -67
  290. package/dist/collection/components/alert/alert.md.css +29 -464
  291. package/dist/collection/components/app/app.js +83 -15
  292. package/dist/collection/components/avatar/avatar.ios.css +33 -7
  293. package/dist/collection/components/avatar/avatar.js +4 -120
  294. package/dist/collection/components/avatar/avatar.md.css +0 -51
  295. package/dist/collection/components/back-button/back-button.ios.css +48 -60
  296. package/dist/collection/components/back-button/back-button.js +19 -27
  297. package/dist/collection/components/back-button/back-button.md.css +48 -60
  298. package/dist/collection/components/backdrop/backdrop.ios.css +19 -56
  299. package/dist/collection/components/backdrop/backdrop.js +6 -12
  300. package/dist/collection/components/backdrop/backdrop.md.css +19 -56
  301. package/dist/collection/components/badge/badge.ios.css +12 -137
  302. package/dist/collection/components/badge/badge.js +9 -145
  303. package/dist/collection/components/badge/badge.md.css +12 -122
  304. package/dist/collection/components/breadcrumb/breadcrumb.ios.css +8 -20
  305. package/dist/collection/components/breadcrumb/breadcrumb.js +11 -43
  306. package/dist/collection/components/breadcrumb/breadcrumb.md.css +8 -20
  307. package/dist/collection/components/breadcrumbs/breadcrumbs.ios.css +0 -6
  308. package/dist/collection/components/breadcrumbs/breadcrumbs.js +9 -11
  309. package/dist/collection/components/breadcrumbs/breadcrumbs.md.css +0 -6
  310. package/dist/collection/components/button/button.ios.css +46 -154
  311. package/dist/collection/components/button/button.js +27 -63
  312. package/dist/collection/components/button/button.md.css +50 -150
  313. package/dist/collection/components/buttons/buttons.ios.css +7 -59
  314. package/dist/collection/components/buttons/buttons.js +9 -15
  315. package/dist/collection/components/buttons/buttons.md.css +3 -55
  316. package/dist/collection/components/card/card.ios.css +14 -65
  317. package/dist/collection/components/card/card.js +10 -41
  318. package/dist/collection/components/card/card.md.css +14 -65
  319. package/dist/collection/components/card-content/card-content.ios.css +35 -20
  320. package/dist/collection/components/card-content/card-content.js +10 -12
  321. package/dist/collection/components/card-content/card-content.md.css +35 -20
  322. package/dist/collection/components/card-header/card-header.ios.css +15 -27
  323. package/dist/collection/components/card-header/card-header.js +10 -13
  324. package/dist/collection/components/card-header/card-header.md.css +15 -27
  325. package/dist/collection/components/card-subtitle/card-subtitle.ios.css +0 -12
  326. package/dist/collection/components/card-subtitle/card-subtitle.js +8 -11
  327. package/dist/collection/components/card-subtitle/card-subtitle.md.css +0 -12
  328. package/dist/collection/components/card-title/card-title.ios.css +0 -73
  329. package/dist/collection/components/card-title/card-title.js +8 -11
  330. package/dist/collection/components/card-title/card-title.md.css +0 -73
  331. package/dist/collection/components/checkbox/checkbox.ios.css +117 -242
  332. package/dist/collection/components/checkbox/checkbox.js +14 -69
  333. package/dist/collection/components/checkbox/checkbox.md.css +118 -243
  334. package/dist/collection/components/chip/chip.ios.css +14 -67
  335. package/dist/collection/components/chip/chip.js +8 -108
  336. package/dist/collection/components/chip/chip.md.css +14 -67
  337. package/dist/collection/components/col/col.css +4 -192
  338. package/dist/collection/components/col/col.js +61 -211
  339. package/dist/collection/components/content/content.css +2 -47
  340. package/dist/collection/components/content/content.js +63 -17
  341. package/dist/collection/components/datetime/datetime.ios.css +106 -302
  342. package/dist/collection/components/datetime/datetime.js +26 -100
  343. package/dist/collection/components/datetime/datetime.md.css +96 -293
  344. package/dist/collection/components/datetime/utils/data.js +5 -5
  345. package/dist/collection/components/datetime-button/datetime-button.ios.css +0 -6
  346. package/dist/collection/components/datetime-button/datetime-button.js +8 -11
  347. package/dist/collection/components/datetime-button/datetime-button.md.css +0 -6
  348. package/dist/collection/components/fab/fab.css +1 -25
  349. package/dist/collection/components/fab/fab.js +5 -9
  350. package/dist/collection/components/fab-button/fab-button.ios.css +6 -18
  351. package/dist/collection/components/fab-button/fab-button.js +21 -36
  352. package/dist/collection/components/fab-button/fab-button.md.css +8 -20
  353. package/dist/collection/components/fab-list/fab-list.css +0 -12
  354. package/dist/collection/components/fab-list/fab-list.js +5 -9
  355. package/dist/collection/components/footer/footer.ios.css +6 -33
  356. package/dist/collection/components/footer/footer.js +25 -117
  357. package/dist/collection/components/footer/footer.md.css +0 -40
  358. package/dist/collection/components/grid/grid.css +0 -12
  359. package/dist/collection/components/grid/grid.js +5 -9
  360. package/dist/collection/components/header/header.ios.css +133 -178
  361. package/dist/collection/components/header/header.js +39 -181
  362. package/dist/collection/components/header/header.md.css +9 -199
  363. package/dist/collection/components/header/header.utils.js +13 -6
  364. package/dist/collection/components/img/img.js +2 -8
  365. package/dist/collection/components/infinite-scroll/infinite-scroll.js +5 -100
  366. package/dist/collection/components/infinite-scroll-content/infinite-scroll-content.ios.css +0 -12
  367. package/dist/collection/components/infinite-scroll-content/infinite-scroll-content.js +10 -16
  368. package/dist/collection/components/infinite-scroll-content/infinite-scroll-content.md.css +0 -12
  369. package/dist/collection/components/input/input.ios.css +137 -224
  370. package/dist/collection/components/input/input.js +39 -172
  371. package/dist/collection/components/input/input.md.css +209 -194
  372. package/dist/collection/components/input-otp/input-otp.ios.css +60 -105
  373. package/dist/collection/components/input-otp/input-otp.js +7 -74
  374. package/dist/collection/components/input-otp/input-otp.md.css +60 -105
  375. package/dist/collection/components/input-password-toggle/input-password-toggle.js +12 -48
  376. package/dist/collection/components/item/item.ios.css +80 -120
  377. package/dist/collection/components/item/item.js +21 -56
  378. package/dist/collection/components/item/item.md.css +79 -131
  379. package/dist/collection/components/item-divider/item-divider.ios.css +0 -18
  380. package/dist/collection/components/item-divider/item-divider.js +8 -11
  381. package/dist/collection/components/item-divider/item-divider.md.css +0 -18
  382. package/dist/collection/components/item-group/item-group.ios.css +0 -12
  383. package/dist/collection/components/item-group/item-group.js +7 -13
  384. package/dist/collection/components/item-group/item-group.md.css +0 -12
  385. package/dist/collection/components/item-option/item-option.ios.css +29 -136
  386. package/dist/collection/components/item-option/item-option.js +9 -73
  387. package/dist/collection/components/item-option/item-option.md.css +29 -136
  388. package/dist/collection/components/item-options/item-options.ios.css +34 -77
  389. package/dist/collection/components/item-options/item-options.js +7 -13
  390. package/dist/collection/components/item-options/item-options.md.css +34 -77
  391. package/dist/collection/components/item-sliding/{item-sliding.native.css → item-sliding.css} +9 -84
  392. package/dist/collection/components/item-sliding/item-sliding.js +35 -421
  393. package/dist/collection/components/item-sliding/test/test.utils.js +0 -13
  394. package/dist/collection/components/label/label.ios.css +0 -18
  395. package/dist/collection/components/label/label.js +8 -11
  396. package/dist/collection/components/label/label.md.css +0 -18
  397. package/dist/collection/components/list/list.ios.css +14 -54
  398. package/dist/collection/components/list/list.js +9 -48
  399. package/dist/collection/components/list/list.md.css +16 -56
  400. package/dist/collection/components/list-header/list-header.ios.css +38 -82
  401. package/dist/collection/components/list-header/list-header.js +8 -11
  402. package/dist/collection/components/list-header/list-header.md.css +38 -82
  403. package/dist/collection/components/loading/loading.ios.css +1 -13
  404. package/dist/collection/components/loading/loading.js +11 -14
  405. package/dist/collection/components/loading/loading.md.css +1 -13
  406. package/dist/collection/components/menu/menu.ios.css +3 -15
  407. package/dist/collection/components/menu/menu.js +7 -12
  408. package/dist/collection/components/menu/menu.md.css +3 -15
  409. package/dist/collection/components/menu-button/menu-button.ios.css +14 -48
  410. package/dist/collection/components/menu-button/menu-button.js +10 -26
  411. package/dist/collection/components/menu-button/menu-button.md.css +15 -49
  412. package/dist/collection/components/menu-toggle/menu-toggle.js +5 -8
  413. package/dist/collection/components/modal/animations/sheet.js +2 -8
  414. package/dist/collection/components/modal/gestures/sheet.js +32 -102
  415. package/dist/collection/components/modal/gestures/swipe-to-close.js +3 -32
  416. package/dist/collection/components/modal/gestures/utils.js +17 -0
  417. package/dist/collection/components/modal/modal.ios.css +70 -178
  418. package/dist/collection/components/modal/modal.js +34 -59
  419. package/dist/collection/components/modal/modal.md.css +70 -178
  420. package/dist/collection/components/modal/safe-area-utils.js +35 -0
  421. package/dist/collection/components/nav/nav.css +1 -7
  422. package/dist/collection/components/nav/nav.js +5 -11
  423. package/dist/collection/components/nav-link/nav-link.js +1 -5
  424. package/dist/collection/components/note/note.ios.css +0 -12
  425. package/dist/collection/components/note/note.js +8 -11
  426. package/dist/collection/components/note/note.md.css +0 -12
  427. package/dist/collection/components/picker/picker.ios.css +3 -15
  428. package/dist/collection/components/picker/picker.js +5 -8
  429. package/dist/collection/components/picker/picker.md.css +3 -15
  430. package/dist/collection/components/picker-column/picker-column.css +2 -9
  431. package/dist/collection/components/picker-column/picker-column.js +7 -8
  432. package/dist/collection/components/picker-column-option/picker-column-option.ios.css +0 -6
  433. package/dist/collection/components/picker-column-option/picker-column-option.js +7 -13
  434. package/dist/collection/components/picker-column-option/picker-column-option.md.css +0 -6
  435. package/dist/collection/components/picker-legacy/picker.ios.css +1 -13
  436. package/dist/collection/components/picker-legacy/picker.js +6 -7
  437. package/dist/collection/components/picker-legacy/picker.md.css +1 -13
  438. package/dist/collection/components/picker-legacy-column/picker-column.ios.css +0 -12
  439. package/dist/collection/components/picker-legacy-column/picker-column.js +4 -4
  440. package/dist/collection/components/picker-legacy-column/picker-column.md.css +0 -12
  441. package/dist/collection/components/popover/popover.ios.css +1 -29
  442. package/dist/collection/components/popover/popover.js +15 -18
  443. package/dist/collection/components/popover/popover.md.css +1 -29
  444. package/dist/collection/components/progress-bar/progress-bar.ios.css +17 -48
  445. package/dist/collection/components/progress-bar/progress-bar.js +7 -43
  446. package/dist/collection/components/progress-bar/progress-bar.md.css +17 -48
  447. package/dist/collection/components/radio/radio.ios.css +102 -207
  448. package/dist/collection/components/radio/radio.js +9 -14
  449. package/dist/collection/components/radio/radio.md.css +102 -207
  450. package/dist/collection/components/radio-group/radio-group.ios.css +19 -43
  451. package/dist/collection/components/radio-group/radio-group.js +7 -48
  452. package/dist/collection/components/radio-group/radio-group.md.css +19 -43
  453. package/dist/collection/components/range/range.ios.css +85 -128
  454. package/dist/collection/components/range/range.js +10 -16
  455. package/dist/collection/components/range/range.md.css +85 -128
  456. package/dist/collection/components/refresher/refresher.ios.css +1 -14
  457. package/dist/collection/components/refresher/refresher.js +10 -13
  458. package/dist/collection/components/refresher/refresher.md.css +2 -15
  459. package/dist/collection/components/refresher-content/refresher-content.js +7 -28
  460. package/dist/collection/components/reorder/reorder.ios.css +0 -6
  461. package/dist/collection/components/reorder/reorder.js +6 -33
  462. package/dist/collection/components/reorder/reorder.md.css +0 -6
  463. package/dist/collection/components/reorder-group/reorder-group.css +0 -6
  464. package/dist/collection/components/reorder-group/reorder-group.js +4 -8
  465. package/dist/collection/components/ripple-effect/{ripple-effect.common.css → ripple-effect.css} +1 -7
  466. package/dist/collection/components/ripple-effect/ripple-effect.js +6 -14
  467. package/dist/collection/components/route/route.js +0 -4
  468. package/dist/collection/components/router/router.js +0 -4
  469. package/dist/collection/components/router-link/router-link.css +2 -8
  470. package/dist/collection/components/router-link/router-link.js +5 -9
  471. package/dist/collection/components/router-outlet/router-outlet.css +1 -7
  472. package/dist/collection/components/router-outlet/router-outlet.js +3 -6
  473. package/dist/collection/components/row/row.css +0 -16
  474. package/dist/collection/components/row/row.js +2 -9
  475. package/dist/collection/components/searchbar/searchbar.ios.css +18 -56
  476. package/dist/collection/components/searchbar/searchbar.js +37 -205
  477. package/dist/collection/components/searchbar/searchbar.md.css +18 -56
  478. package/dist/collection/components/segment/segment.ios.css +2 -45
  479. package/dist/collection/components/segment/segment.js +8 -11
  480. package/dist/collection/components/segment/segment.md.css +2 -45
  481. package/dist/collection/components/segment-button/segment-button.ios.css +105 -146
  482. package/dist/collection/components/segment-button/segment-button.js +8 -11
  483. package/dist/collection/components/segment-button/segment-button.md.css +107 -148
  484. package/dist/collection/components/segment-content/segment-content.js +1 -1
  485. package/dist/collection/components/segment-view/segment-view.ios.css +0 -6
  486. package/dist/collection/components/segment-view/segment-view.js +4 -13
  487. package/dist/collection/components/segment-view/segment-view.md.css +0 -6
  488. package/dist/collection/components/select/select.ios.css +176 -348
  489. package/dist/collection/components/select/select.js +92 -521
  490. package/dist/collection/components/select/select.md.css +178 -364
  491. package/dist/collection/components/select-modal/select-modal.ios.css +0 -466
  492. package/dist/collection/components/select-modal/select-modal.js +30 -126
  493. package/dist/collection/components/select-modal/select-modal.md.css +0 -394
  494. package/dist/collection/components/select-option/select-option.js +4 -72
  495. package/dist/collection/components/select-popover/select-popover.ios.css +20 -302
  496. package/dist/collection/components/select-popover/select-popover.js +29 -89
  497. package/dist/collection/components/select-popover/select-popover.md.css +0 -345
  498. package/dist/collection/components/skeleton-text/skeleton-text.css +0 -6
  499. package/dist/collection/components/skeleton-text/skeleton-text.js +5 -9
  500. package/dist/collection/components/spinner/{spinner.ionic.css → spinner.css} +10 -78
  501. package/dist/collection/components/spinner/spinner.js +6 -47
  502. package/dist/collection/components/split-pane/split-pane.ios.css +2 -20
  503. package/dist/collection/components/split-pane/split-pane.js +8 -15
  504. package/dist/collection/components/split-pane/split-pane.md.css +2 -20
  505. package/dist/collection/components/tab/tab.js +2 -6
  506. package/dist/collection/components/tab-bar/tab-bar.ios.css +43 -86
  507. package/dist/collection/components/tab-bar/tab-bar.js +15 -179
  508. package/dist/collection/components/tab-bar/tab-bar.md.css +43 -86
  509. package/dist/collection/components/tab-button/tab-button.ios.css +95 -171
  510. package/dist/collection/components/tab-button/tab-button.js +9 -54
  511. package/dist/collection/components/tab-button/tab-button.md.css +93 -137
  512. package/dist/collection/components/tabs/tabs.css +1 -7
  513. package/dist/collection/components/tabs/tabs.js +1 -4
  514. package/dist/collection/components/text/text.css +0 -6
  515. package/dist/collection/components/text/text.js +6 -7
  516. package/dist/collection/components/textarea/textarea.ios.css +158 -298
  517. package/dist/collection/components/textarea/textarea.js +24 -162
  518. package/dist/collection/components/textarea/textarea.md.css +159 -312
  519. package/dist/collection/components/thumbnail/thumbnail.css +0 -6
  520. package/dist/collection/components/thumbnail/thumbnail.js +2 -9
  521. package/dist/collection/components/title/title.ios.css +4 -32
  522. package/dist/collection/components/title/title.js +7 -13
  523. package/dist/collection/components/title/title.md.css +4 -39
  524. package/dist/collection/components/toast/animations/utils.js +1 -1
  525. package/dist/collection/components/toast/toast.ios.css +45 -84
  526. package/dist/collection/components/toast/toast.js +13 -76
  527. package/dist/collection/components/toast/toast.md.css +45 -84
  528. package/dist/collection/components/toggle/toggle.ios.css +127 -247
  529. package/dist/collection/components/toggle/toggle.js +18 -72
  530. package/dist/collection/components/toggle/toggle.md.css +127 -245
  531. package/dist/collection/components/toolbar/toolbar.ios.css +47 -90
  532. package/dist/collection/components/toolbar/toolbar.js +13 -218
  533. package/dist/collection/components/toolbar/toolbar.md.css +47 -90
  534. package/dist/collection/global/ionic-global.js +13 -241
  535. package/dist/collection/utils/content/index.js +30 -0
  536. package/dist/collection/utils/focus-trap.js +2 -13
  537. package/dist/collection/utils/focus-visible.js +0 -22
  538. package/dist/collection/utils/forms/validity.js +0 -31
  539. package/dist/collection/utils/framework-delegate.js +1 -3
  540. package/dist/collection/utils/hardware-back-button.js +0 -15
  541. package/dist/collection/utils/helpers.js +3 -70
  542. package/dist/collection/utils/keyboard/keyboard-controller.js +1 -3
  543. package/dist/collection/utils/media.js +0 -1
  544. package/dist/collection/utils/menu-controller/animations/overlay.js +3 -3
  545. package/dist/collection/utils/menu-controller/animations/push.js +1 -2
  546. package/dist/collection/utils/menu-controller/animations/reveal.js +1 -2
  547. package/dist/collection/utils/overlays.js +8 -290
  548. package/dist/collection/utils/sanitization/index.js +18 -274
  549. package/dist/collection/utils/test/playwright/drag-element.js +9 -32
  550. package/dist/collection/utils/test/playwright/generator.js +23 -48
  551. package/dist/collection/utils/test/playwright/page/utils/goto.js +5 -14
  552. package/dist/collection/utils/test/playwright/page/utils/set-content.js +3 -26
  553. package/dist/collection/utils/theme.js +1 -25
  554. package/dist/collection/utils/transition/ios.transition.js +0 -1
  555. package/dist/docs.json +287 -9091
  556. package/dist/esm/{animation-B2qdQ_ou.js → animation-DLJpuoEz.js} +2 -2
  557. package/dist/esm/{app-globals-DZ-iIjxA.js → app-globals-D0C5S4hU.js} +1 -1
  558. package/dist/esm/{button-active-BmajAby6.js → button-active-BSpTQmS9.js} +2 -2
  559. package/dist/esm/{capacitor-CtQSWUU0.js → capacitor-CFERIeaU.js} +1 -1
  560. package/dist/esm/config-DQCONYYp.js +195 -0
  561. package/dist/{cjs/focus-visible-BIj-I3-C.js → esm/focus-visible-BmVRXR1y.js} +1 -27
  562. package/dist/esm/{format-2WlZcMvG.js → format-CAmvpAez.js} +1 -1
  563. package/dist/esm/{framework-delegate-DO2QXccA.js → framework-delegate-FnPGymXL.js} +2 -4
  564. package/dist/esm/{haptic-DFgKNCce.js → haptic-DzAMWJuk.js} +1 -1
  565. package/dist/esm/hardware-back-button-B93Gru0Y.js +115 -0
  566. package/dist/esm/{helpers-DfF5_wJc.js → helpers-HEqiOzXb.js} +5 -71
  567. package/dist/esm/{index-BjaaZqVY.js → index-BRHzoo00.js} +3 -4
  568. package/dist/esm/{index-BIUWGRUl.js → index-B_dQk_WE.js} +4 -4
  569. package/dist/esm/{index-B4Kq2YNk.js → index-DV3sJJW8.js} +2 -3
  570. package/dist/esm/{index-KxK0gcRp.js → index-Dw-wN0Ja.js} +33 -3
  571. package/dist/esm/{index-Di034G4O.js → index-Q6UPU0Ay.js} +11 -11
  572. package/dist/esm/index-ZjP4CjeZ.js +7 -0
  573. package/dist/esm/{index-C0EQceqV.js → index-tcQvqkiX.js} +222 -42
  574. package/dist/esm/index.js +14 -14
  575. package/dist/esm/{input-shims-DvNNw70a.js → input-shims-LXhI7LEx.js} +6 -7
  576. package/dist/esm/{input.utils-_LkBfBWt.js → input.utils-Y6NgW8bw.js} +3 -3
  577. package/dist/esm/ion-accordion_2.entry.js +29 -61
  578. package/dist/esm/ion-action-sheet.entry.js +22 -41
  579. package/dist/esm/ion-alert.entry.js +40 -77
  580. package/dist/esm/ion-app_8.entry.js +243 -457
  581. package/dist/esm/ion-avatar_3.entry.js +13 -125
  582. package/dist/esm/ion-back-button.entry.js +22 -31
  583. package/dist/esm/ion-backdrop.entry.js +7 -10
  584. package/dist/esm/ion-breadcrumb_2.entry.js +18 -54
  585. package/dist/esm/ion-button_2.entry.js +24 -61
  586. package/dist/esm/ion-card_5.entry.js +33 -55
  587. package/dist/esm/ion-checkbox.entry.js +17 -34
  588. package/dist/esm/ion-chip.entry.js +9 -50
  589. package/dist/esm/ion-col_3.entry.js +57 -56
  590. package/dist/esm/ion-datetime-button.entry.js +9 -13
  591. package/dist/esm/ion-datetime_3.entry.js +51 -123
  592. package/dist/esm/ion-fab_3.entry.js +28 -44
  593. package/dist/esm/ion-img.entry.js +4 -8
  594. package/dist/esm/ion-infinite-scroll_2.entry.js +16 -92
  595. package/dist/esm/ion-input-otp.entry.js +9 -74
  596. package/dist/esm/ion-input-password-toggle.entry.js +15 -53
  597. package/dist/esm/ion-input.entry.js +35 -146
  598. package/dist/esm/ion-item-option_3.entry.js +52 -467
  599. package/dist/esm/ion-item_8.entry.js +50 -121
  600. package/dist/esm/ion-loading.entry.js +18 -21
  601. package/dist/esm/ion-menu_3.entry.js +29 -47
  602. package/dist/esm/ion-modal.entry.js +181 -275
  603. package/dist/esm/ion-nav_2.entry.js +11 -14
  604. package/dist/esm/ion-picker-column-option.entry.js +8 -12
  605. package/dist/esm/ion-picker-column.entry.js +13 -13
  606. package/dist/esm/ion-picker.entry.js +6 -10
  607. package/dist/esm/ion-popover.entry.js +19 -21
  608. package/dist/esm/ion-progress-bar.entry.js +9 -27
  609. package/dist/esm/ion-radio_2.entry.js +18 -36
  610. package/dist/esm/ion-range.entry.js +13 -20
  611. package/dist/esm/ion-refresher_2.entry.js +22 -41
  612. package/dist/esm/ion-reorder_2.entry.js +14 -38
  613. package/dist/esm/ion-ripple-effect.entry.js +7 -15
  614. package/dist/esm/ion-route_4.entry.js +10 -11
  615. package/dist/esm/ion-searchbar.entry.js +27 -160
  616. package/dist/esm/ion-segment-content.entry.js +2 -2
  617. package/dist/esm/ion-segment-view.entry.js +3 -13
  618. package/dist/esm/ion-segment_2.entry.js +16 -23
  619. package/dist/esm/ion-select-modal.entry.js +38 -114
  620. package/dist/esm/ion-select_3.entry.js +108 -557
  621. package/dist/esm/ion-spinner.entry.js +8 -30
  622. package/dist/esm/ion-split-pane.entry.js +9 -13
  623. package/dist/esm/ion-tab-bar_2.entry.js +27 -149
  624. package/dist/esm/ion-tab_2.entry.js +7 -8
  625. package/dist/esm/ion-text.entry.js +7 -7
  626. package/dist/esm/ion-textarea.entry.js +23 -137
  627. package/dist/esm/ion-toast.entry.js +21 -45
  628. package/dist/esm/ion-toggle.entry.js +26 -82
  629. package/dist/esm/ionic-global-Cp_eT4sZ.js +146 -0
  630. package/dist/esm/ionic.js +5 -5
  631. package/dist/esm/{ios.transition-CgScDbsb.js → ios.transition-ClFrsIrS.js} +5 -7
  632. package/dist/esm/{item-multiple-inputs-C6onMFOo.js → item-multiple-inputs-DlNuqNJm.js} +1 -1
  633. package/dist/esm/{keyboard-CyyguLDw.js → keyboard-CUw4ekVy.js} +1 -1
  634. package/dist/esm/keyboard-controller-BaaVITYt.js +165 -0
  635. package/dist/esm/{keyboard-WJix-wcz.js → keyboard-ywgs5efA.js} +3 -4
  636. package/dist/esm/loader.js +5 -5
  637. package/dist/esm/{md.transition-DThqYazt.js → md.transition-D0msQmzI.js} +5 -6
  638. package/dist/esm/{notch-controller-MTblRxjD.js → notch-controller-DKDjU_O7.js} +2 -2
  639. package/dist/esm/{overlays-tv6nLsmk.js → overlays-Dg0q2_tJ.js} +15 -306
  640. package/dist/esm/{status-tap-CoPI1M2q.js → status-tap-vO-6s4Yp.js} +3 -4
  641. package/dist/esm/{swipe-back-qmvTRnSq.js → swipe-back-DQ1q5MgD.js} +2 -3
  642. package/dist/esm/{theme-DaJxRxSQ.js → theme-DiVJyqlX.js} +1 -25
  643. package/dist/esm/validity-DJztqcrH.js +17 -0
  644. package/dist/html.html-data.json +161 -2700
  645. package/dist/ionic/index.esm.js +1 -1
  646. package/dist/ionic/ionic.esm.js +1 -1
  647. package/dist/ionic/p-01f81ea5.entry.js +4 -0
  648. package/dist/ionic/p-06c232a4.entry.js +4 -0
  649. package/dist/ionic/p-0caa922c.entry.js +4 -0
  650. package/dist/ionic/p-0dc33652.entry.js +4 -0
  651. package/dist/ionic/p-0fa9c382.entry.js +4 -0
  652. package/dist/ionic/p-10e833ef.entry.js +4 -0
  653. package/dist/ionic/p-21eb76d5.entry.js +4 -0
  654. package/dist/ionic/p-27d30585.entry.js +4 -0
  655. package/dist/ionic/p-2a05aa64.entry.js +4 -0
  656. package/dist/ionic/p-2b204c59.entry.js +4 -0
  657. package/dist/ionic/p-2bb2cb18.entry.js +4 -0
  658. package/dist/ionic/p-2fa58e80.entry.js +4 -0
  659. package/dist/ionic/p-3353c229.entry.js +4 -0
  660. package/dist/ionic/p-34586ead.entry.js +4 -0
  661. package/dist/ionic/p-37e720da.entry.js +4 -0
  662. package/dist/ionic/p-390ca786.entry.js +4 -0
  663. package/dist/ionic/p-3ae5f277.entry.js +4 -0
  664. package/dist/ionic/p-4654ae1c.entry.js +4 -0
  665. package/dist/ionic/p-4745f534.entry.js +4 -0
  666. package/dist/ionic/p-4858af1f.entry.js +4 -0
  667. package/dist/ionic/p-4baa5b82.entry.js +4 -0
  668. package/dist/ionic/p-4e92a11f.entry.js +4 -0
  669. package/dist/ionic/p-50e1194a.entry.js +4 -0
  670. package/dist/ionic/p-5334df12.entry.js +4 -0
  671. package/dist/ionic/p-5d1da0a2.entry.js +4 -0
  672. package/dist/ionic/p-5e2f73ee.entry.js +4 -0
  673. package/dist/ionic/p-5eb8e86d.entry.js +4 -0
  674. package/dist/ionic/p-65ebdf1b.entry.js +4 -0
  675. package/dist/ionic/p-746fa988.entry.js +4 -0
  676. package/dist/ionic/p-75dc25ba.entry.js +4 -0
  677. package/dist/ionic/p-7c319341.entry.js +4 -0
  678. package/dist/ionic/p-829367ed.entry.js +4 -0
  679. package/dist/ionic/p-84d5ce05.entry.js +4 -0
  680. package/dist/ionic/p-874b4bd8.entry.js +4 -0
  681. package/dist/ionic/p-8eb8ee76.entry.js +4 -0
  682. package/dist/ionic/p-9eeaBrnk.js +4 -0
  683. package/dist/ionic/p-9f9db3a2.entry.js +4 -0
  684. package/dist/ionic/p-9fa3c405.entry.js +4 -0
  685. package/dist/ionic/p-BGqMS-oh.js +4 -0
  686. package/dist/ionic/p-BUFIpxKM.js +4 -0
  687. package/dist/ionic/p-BmVRXR1y.js +4 -0
  688. package/dist/ionic/{p-7k7Q1A38.js → p-C0eMdTCW.js} +1 -1
  689. package/dist/ionic/p-CFlfIb2g.js +4 -0
  690. package/dist/ionic/p-CIGNaXM1.js +4 -0
  691. package/{components/p-BPxMDyfV.js → dist/ionic/p-CKvCXMs9.js} +1 -1
  692. package/dist/ionic/p-CmcFnK-B.js +4 -0
  693. package/dist/ionic/p-CtWGkNnJ.js +4 -0
  694. package/dist/ionic/p-Cx3IXROA.js +4 -0
  695. package/dist/ionic/p-D-3ycHmd.js +4 -0
  696. package/dist/ionic/{p-DQDmksdT.js → p-D13Eaw-8.js} +1 -1
  697. package/dist/ionic/p-D4uTWt4-.js +4 -0
  698. package/dist/ionic/p-DC3RagnA.js +4 -0
  699. package/dist/ionic/p-DIuEbVLu.js +4 -0
  700. package/dist/ionic/p-DJztqcrH.js +4 -0
  701. package/dist/ionic/p-DV3sJJW8.js +4 -0
  702. package/dist/ionic/p-DiVJyqlX.js +4 -0
  703. package/dist/ionic/p-DoJvtrbw.js +4 -0
  704. package/dist/ionic/p-DqN5EA2O.js +4 -0
  705. package/dist/ionic/p-DzWaWHGc.js +4 -0
  706. package/dist/ionic/p-KjNvRoEp.js +4 -0
  707. package/dist/ionic/p-Nqf6uvGh.js +4 -0
  708. package/dist/ionic/p-SNAkTDfm.js +4 -0
  709. package/{components/p-PCVpe9Tq.js → dist/ionic/p-VAemlbDS.js} +1 -1
  710. package/dist/ionic/p-ZjP4CjeZ.js +4 -0
  711. package/dist/ionic/p-a3bdcae6.entry.js +4 -0
  712. package/dist/ionic/p-aaeedb6b.entry.js +4 -0
  713. package/dist/ionic/p-af55a72f.entry.js +4 -0
  714. package/dist/ionic/p-b2020591.entry.js +4 -0
  715. package/dist/ionic/p-b9fadbfe.entry.js +4 -0
  716. package/dist/ionic/p-biz8zWmJ.js +4 -0
  717. package/dist/ionic/p-c0fb8edd.entry.js +4 -0
  718. package/dist/ionic/p-c38b648e.entry.js +4 -0
  719. package/dist/ionic/p-c4d8641b.entry.js +4 -0
  720. package/dist/ionic/p-c6e49f3f.entry.js +4 -0
  721. package/dist/ionic/p-ca2ab74d.entry.js +4 -0
  722. package/dist/ionic/p-d889ff6d.entry.js +4 -0
  723. package/dist/ionic/p-dfa8d673.entry.js +4 -0
  724. package/dist/ionic/p-ea56626d.entry.js +4 -0
  725. package/dist/ionic/p-ef4c3bee.entry.js +4 -0
  726. package/dist/ionic/p-f386f6ae.entry.js +4 -0
  727. package/dist/ionic/p-mjKAFv89.js +4 -0
  728. package/dist/ionic/p-tcQvqkiX.js +5 -0
  729. package/dist/ionic/p-uWtqTrG8.js +4 -0
  730. package/dist/ionic/p-viFHDgRs.js +4 -0
  731. package/dist/ionic/p-xWb6fgfq.js +4 -0
  732. package/dist/types/components/accordion/accordion.d.ts +3 -6
  733. package/dist/types/components/accordion-group/accordion-group.d.ts +1 -12
  734. package/dist/types/components/action-sheet/action-sheet-interface.d.ts +7 -3
  735. package/dist/types/components/action-sheet/action-sheet.d.ts +2 -3
  736. package/dist/types/components/alert/alert-interface.d.ts +7 -3
  737. package/dist/types/components/alert/alert.d.ts +2 -3
  738. package/dist/types/components/app/app.d.ts +5 -4
  739. package/dist/types/components/avatar/avatar.d.ts +0 -32
  740. package/dist/types/components/back-button/back-button.d.ts +1 -2
  741. package/dist/types/components/backdrop/backdrop.d.ts +0 -4
  742. package/dist/types/components/badge/badge.d.ts +1 -34
  743. package/dist/types/components/breadcrumb/breadcrumb.d.ts +1 -4
  744. package/dist/types/components/breadcrumbs/breadcrumbs.d.ts +2 -2
  745. package/dist/types/components/button/button.d.ts +8 -23
  746. package/dist/types/components/buttons/buttons.d.ts +1 -5
  747. package/dist/types/components/card/card.d.ts +1 -8
  748. package/dist/types/components/card-content/card-content.d.ts +1 -2
  749. package/dist/types/components/card-header/card-header.d.ts +2 -3
  750. package/dist/types/components/card-subtitle/card-subtitle.d.ts +1 -2
  751. package/dist/types/components/card-title/card-title.d.ts +1 -2
  752. package/dist/types/components/checkbox/checkbox.d.ts +4 -14
  753. package/dist/types/components/chip/chip.d.ts +1 -26
  754. package/dist/types/components/col/col.d.ts +5 -52
  755. package/dist/types/components/content/content.d.ts +12 -3
  756. package/dist/types/components/datetime/datetime.d.ts +6 -27
  757. package/dist/types/components/datetime/utils/data.d.ts +5 -5
  758. package/dist/types/components/datetime-button/datetime-button.d.ts +1 -2
  759. package/dist/types/components/fab/fab.d.ts +0 -4
  760. package/dist/types/components/fab-button/fab-button.d.ts +3 -5
  761. package/dist/types/components/fab-list/fab-list.d.ts +0 -4
  762. package/dist/types/components/footer/footer.d.ts +3 -20
  763. package/dist/types/components/grid/grid.d.ts +0 -4
  764. package/dist/types/components/header/header.d.ts +3 -26
  765. package/dist/types/components/header/header.utils.d.ts +5 -4
  766. package/dist/types/components/img/img.d.ts +0 -3
  767. package/dist/types/components/infinite-scroll/infinite-scroll.d.ts +0 -21
  768. package/dist/types/components/infinite-scroll-content/infinite-scroll-content.d.ts +0 -4
  769. package/dist/types/components/input/input.d.ts +5 -37
  770. package/dist/types/components/input-otp/input-otp.d.ts +0 -37
  771. package/dist/types/components/input-password-toggle/input-password-toggle.d.ts +0 -2
  772. package/dist/types/components/item/item.d.ts +4 -11
  773. package/dist/types/components/item-divider/item-divider.d.ts +1 -2
  774. package/dist/types/components/item-group/item-group.d.ts +0 -4
  775. package/dist/types/components/item-option/item-option.d.ts +1 -18
  776. package/dist/types/components/item-options/item-options.d.ts +0 -4
  777. package/dist/types/components/item-sliding/item-sliding.d.ts +1 -47
  778. package/dist/types/components/item-sliding/test/test.utils.d.ts +0 -13
  779. package/dist/types/components/label/label.d.ts +1 -2
  780. package/dist/types/components/list/list.d.ts +1 -15
  781. package/dist/types/components/list-header/list-header.d.ts +1 -2
  782. package/dist/types/components/loading/loading-interface.d.ts +7 -2
  783. package/dist/types/components/loading/loading.d.ts +2 -3
  784. package/dist/types/components/menu/menu.d.ts +0 -3
  785. package/dist/types/components/menu-button/menu-button.d.ts +1 -3
  786. package/dist/types/components/menu-toggle/menu-toggle.d.ts +0 -3
  787. package/dist/types/components/modal/gestures/sheet.d.ts +2 -1
  788. package/dist/types/components/modal/gestures/utils.d.ts +11 -0
  789. package/dist/types/components/modal/modal-interface.d.ts +7 -4
  790. package/dist/types/components/modal/modal.d.ts +7 -14
  791. package/dist/types/components/modal/safe-area-utils.d.ts +6 -0
  792. package/dist/types/components/nav/nav-interface.d.ts +1 -9
  793. package/dist/types/components/nav/nav.d.ts +1 -5
  794. package/dist/types/components/nav-link/nav-link.d.ts +0 -4
  795. package/dist/types/components/note/note.d.ts +1 -2
  796. package/dist/types/components/picker/picker.d.ts +1 -2
  797. package/dist/types/components/picker-column/picker-column.d.ts +1 -2
  798. package/dist/types/components/picker-column-option/picker-column-option.d.ts +0 -4
  799. package/dist/types/components/picker-legacy/picker.d.ts +1 -2
  800. package/dist/types/components/popover/popover-interface.d.ts +6 -3
  801. package/dist/types/components/popover/popover.d.ts +5 -6
  802. package/dist/types/components/progress-bar/progress-bar.d.ts +1 -10
  803. package/dist/types/components/radio/radio.d.ts +1 -2
  804. package/dist/types/components/radio-group/radio-group.d.ts +0 -12
  805. package/dist/types/components/range/range.d.ts +1 -2
  806. package/dist/types/components/refresher/refresher.d.ts +1 -2
  807. package/dist/types/components/refresher-content/refresher-content.d.ts +0 -4
  808. package/dist/types/components/reorder/reorder.d.ts +0 -9
  809. package/dist/types/components/reorder-group/reorder-group.d.ts +0 -4
  810. package/dist/types/components/ripple-effect/ripple-effect.d.ts +0 -4
  811. package/dist/types/components/route/route.d.ts +0 -4
  812. package/dist/types/components/router/router.d.ts +0 -4
  813. package/dist/types/components/router-link/router-link.d.ts +0 -4
  814. package/dist/types/components/router-outlet/router-outlet.d.ts +1 -4
  815. package/dist/types/components/row/row.d.ts +0 -4
  816. package/dist/types/components/searchbar/searchbar.d.ts +10 -59
  817. package/dist/types/components/segment/segment.d.ts +1 -2
  818. package/dist/types/components/segment-button/segment-button.d.ts +1 -2
  819. package/dist/types/components/select/select-interface.d.ts +0 -31
  820. package/dist/types/components/select/select.d.ts +13 -66
  821. package/dist/types/components/select-modal/select-modal.d.ts +0 -8
  822. package/dist/types/components/select-option/select-option.d.ts +1 -45
  823. package/dist/types/components/select-popover/select-popover.d.ts +0 -3
  824. package/dist/types/components/skeleton-text/skeleton-text.d.ts +0 -4
  825. package/dist/types/components/spinner/spinner.d.ts +0 -15
  826. package/dist/types/components/split-pane/split-pane.d.ts +0 -4
  827. package/dist/types/components/tab/tab.d.ts +0 -4
  828. package/dist/types/components/tab-bar/tab-bar-interface.d.ts +0 -1
  829. package/dist/types/components/tab-bar/tab-bar.d.ts +3 -41
  830. package/dist/types/components/tab-button/tab-button.d.ts +1 -12
  831. package/dist/types/components/tabs/tabs.d.ts +0 -3
  832. package/dist/types/components/text/text.d.ts +1 -2
  833. package/dist/types/components/textarea/textarea.d.ts +4 -53
  834. package/dist/types/components/thumbnail/thumbnail.d.ts +0 -4
  835. package/dist/types/components/title/title.d.ts +0 -4
  836. package/dist/types/components/toast/animations/utils.d.ts +2 -2
  837. package/dist/types/components/toast/toast-interface.d.ts +7 -3
  838. package/dist/types/components/toast/toast.d.ts +2 -19
  839. package/dist/types/components/toggle/toggle.d.ts +1 -15
  840. package/dist/types/components/toolbar/toolbar.d.ts +3 -43
  841. package/dist/types/components.d.ts +212 -1883
  842. package/dist/types/global/ionic-global.d.ts +2 -28
  843. package/dist/types/interface.d.ts +0 -3
  844. package/dist/types/utils/config.d.ts +2 -106
  845. package/dist/types/utils/content/index.d.ts +12 -0
  846. package/dist/types/utils/focus-trap.d.ts +1 -1
  847. package/dist/types/utils/focus-visible.d.ts +0 -13
  848. package/dist/types/utils/forms/validity.d.ts +0 -7
  849. package/dist/types/utils/helpers.d.ts +0 -22
  850. package/dist/types/utils/overlays-interface.d.ts +1 -31
  851. package/dist/types/utils/overlays.d.ts +1 -1
  852. package/dist/types/utils/sanitization/index.d.ts +2 -58
  853. package/dist/types/utils/test/playwright/drag-element.d.ts +3 -16
  854. package/dist/types/utils/test/playwright/generator.d.ts +2 -31
  855. package/dist/types/utils/theme.d.ts +0 -9
  856. package/hydrate/index.js +1555 -6458
  857. package/hydrate/index.mjs +1555 -6458
  858. package/package.json +7 -10
  859. package/components/ion-divider.d.ts +0 -11
  860. package/components/ion-divider.js +0 -4
  861. package/components/ion-gallery-item.d.ts +0 -11
  862. package/components/ion-gallery-item.js +0 -4
  863. package/components/ion-gallery.d.ts +0 -11
  864. package/components/ion-gallery.js +0 -4
  865. package/components/p-3VXQGlP7.js +0 -4
  866. package/components/p-B2SvA6NE.js +0 -4
  867. package/components/p-B5krYTuW.js +0 -4
  868. package/components/p-B6a9IJZ0.js +0 -4
  869. package/components/p-BArGQkuV.js +0 -4
  870. package/components/p-BDqjX7Z_.js +0 -4
  871. package/components/p-BG-Q139o.js +0 -4
  872. package/components/p-BWH3I3Dl.js +0 -4
  873. package/components/p-BYSs-jZz.js +0 -4
  874. package/components/p-BbVhJs-a.js +0 -4
  875. package/components/p-Bc6odfwr.js +0 -4
  876. package/components/p-BjW8SOqw.js +0 -4
  877. package/components/p-BkWXBpOv.js +0 -4
  878. package/components/p-Bt9GDUv-.js +0 -4
  879. package/components/p-BvNVjXg4.js +0 -4
  880. package/components/p-BwKpO3Is.js +0 -4
  881. package/components/p-BwlU9cX_.js +0 -4
  882. package/components/p-CBxy8OYq.js +0 -4
  883. package/components/p-CGdeq57o.js +0 -4
  884. package/components/p-CHPdgLHZ.js +0 -4
  885. package/components/p-CMZlqiT7.js +0 -4
  886. package/components/p-CMzkbes2.js +0 -4
  887. package/components/p-CODBQrPj.js +0 -4
  888. package/components/p-COPA4jD9.js +0 -4
  889. package/components/p-CPnW-OVE.js +0 -4
  890. package/components/p-CRmBpp1v.js +0 -4
  891. package/components/p-CT3P-wjL.js +0 -4
  892. package/components/p-CVYFPBs-.js +0 -4
  893. package/components/p-CVqhQif1.js +0 -4
  894. package/components/p-Cc3oC60a.js +0 -4
  895. package/components/p-CjY4Hs1X.js +0 -4
  896. package/components/p-CrYjk-l3.js +0 -4
  897. package/components/p-CsUcWJuB.js +0 -4
  898. package/components/p-D0Iqw6OZ.js +0 -4
  899. package/components/p-D1kNlmYt.js +0 -4
  900. package/components/p-D1t981Ih.js +0 -4
  901. package/components/p-D9C5yWpF.js +0 -4
  902. package/components/p-DDNG-IsR.js +0 -4
  903. package/components/p-DJSp7Si8.js +0 -4
  904. package/components/p-DL5wyRub.js +0 -4
  905. package/components/p-DXKZXLjV.js +0 -4
  906. package/components/p-DaJxRxSQ.js +0 -4
  907. package/components/p-Dhi5xtNS.js +0 -4
  908. package/components/p-Do8qRv6r.js +0 -4
  909. package/components/p-Dt--PjSF.js +0 -4
  910. package/components/p-DylrHLJF.js +0 -4
  911. package/components/p-FCT_QxQG.js +0 -4
  912. package/components/p-OCde3AhO.js +0 -4
  913. package/components/p-OPFCgx0m.js +0 -4
  914. package/components/p-Rkm2AOZ2.js +0 -4
  915. package/components/p-WSZErkoI.js +0 -4
  916. package/components/p-bHSMZulH.js +0 -4
  917. package/components/p-fIOYmaqA.js +0 -4
  918. package/components/p-hNcst9K9.js +0 -4
  919. package/components/p-hW_3y-wm.js +0 -4
  920. package/components/p-nLMDgmzd.js +0 -4
  921. package/components/p-oI96rnOD.js +0 -4
  922. package/components/p-r_CFQBc1.js +0 -4
  923. package/components/p-vXpMhGrs.js +0 -4
  924. package/components/p-zBZRdRDd.js +0 -4
  925. package/css/ionic/bundle.ionic.css +0 -1
  926. package/css/ionic/bundle.ionic.css.map +0 -1
  927. package/css/ionic/core.ionic.css +0 -1
  928. package/css/ionic/core.ionic.css.map +0 -1
  929. package/css/ionic/global.bundle.ionic.css +0 -1
  930. package/css/ionic/global.bundle.ionic.css.map +0 -1
  931. package/css/ionic/ionic-swiper.ionic.css +0 -1
  932. package/css/ionic/ionic-swiper.ionic.css.map +0 -1
  933. package/css/ionic/link.ionic.css +0 -1
  934. package/css/ionic/link.ionic.css.map +0 -1
  935. package/css/ionic/structure.ionic.css +0 -1
  936. package/css/ionic/structure.ionic.css.map +0 -1
  937. package/css/ionic/typography.ionic.css +0 -1
  938. package/css/ionic/typography.ionic.css.map +0 -1
  939. package/css/ionic/utils.bundle.ionic.css +0 -1
  940. package/css/ionic/utils.bundle.ionic.css.map +0 -1
  941. package/dist/cjs/caret-down-vtVgfXIs.js +0 -8
  942. package/dist/cjs/caret-left-CxZXLRv5.js +0 -8
  943. package/dist/cjs/caret-right-CRCgv98E.js +0 -8
  944. package/dist/cjs/config-DWdFbSNK.js +0 -35
  945. package/dist/cjs/index-Bj07IRTB.js +0 -429
  946. package/dist/cjs/ion-divider.cjs.entry.js +0 -51
  947. package/dist/cjs/ion-gallery-item.cjs.entry.js +0 -59
  948. package/dist/cjs/ion-gallery.cjs.entry.js +0 -607
  949. package/dist/cjs/ionic-global-QoUqobrQ.js +0 -519
  950. package/dist/cjs/list-a-7GSA6K.js +0 -8
  951. package/dist/cjs/overlay-control-label-DnRLQR1t.js +0 -52
  952. package/dist/cjs/scroll-hide-controller-G9HOmmhN.js +0 -345
  953. package/dist/cjs/select-option-render-DqBHEjDn.js +0 -124
  954. package/dist/cjs/validity-QmuwEptc.js +0 -51
  955. package/dist/cjs/x-BTF99yFH.js +0 -8
  956. package/dist/collection/components/accordion/accordion.ionic.css +0 -201
  957. package/dist/collection/components/accordion-group/accordion-group.ionic.css +0 -93
  958. package/dist/collection/components/action-sheet/action-sheet.ionic.css +0 -494
  959. package/dist/collection/components/alert/alert.ionic.css +0 -787
  960. package/dist/collection/components/avatar/avatar.ionic.css +0 -385
  961. package/dist/collection/components/backdrop/backdrop.ionic.css +0 -109
  962. package/dist/collection/components/badge/badge.ionic.css +0 -272
  963. package/dist/collection/components/button/button.ionic.css +0 -644
  964. package/dist/collection/components/buttons/buttons.ionic.css +0 -97
  965. package/dist/collection/components/card/card.ionic.css +0 -144
  966. package/dist/collection/components/card-content/card-content.ionic.css +0 -89
  967. package/dist/collection/components/card-header/card-header.ionic.css +0 -85
  968. package/dist/collection/components/card-subtitle/card-subtitle.ionic.css +0 -144
  969. package/dist/collection/components/checkbox/checkbox.ionic.css +0 -543
  970. package/dist/collection/components/chip/chip.ionic.css +0 -217
  971. package/dist/collection/components/datetime/datetime.ionic.css +0 -703
  972. package/dist/collection/components/divider/divider.ionic.css +0 -148
  973. package/dist/collection/components/divider/divider.ios.css +0 -87
  974. package/dist/collection/components/divider/divider.js +0 -94
  975. package/dist/collection/components/divider/divider.md.css +0 -87
  976. package/dist/collection/components/footer/footer-interface.js +0 -1
  977. package/dist/collection/components/gallery/gallery-constants.js +0 -12
  978. package/dist/collection/components/gallery/gallery-interface.js +0 -1
  979. package/dist/collection/components/gallery/gallery.css +0 -15
  980. package/dist/collection/components/gallery/gallery.js +0 -679
  981. package/dist/collection/components/gallery/test/utils.js +0 -100
  982. package/dist/collection/components/gallery-item/gallery-item.css +0 -49
  983. package/dist/collection/components/gallery-item/gallery-item.js +0 -99
  984. package/dist/collection/components/header/header-interface.js +0 -1
  985. package/dist/collection/components/header/header.ionic.css +0 -250
  986. package/dist/collection/components/input/input.ionic.css +0 -891
  987. package/dist/collection/components/input-otp/input-otp.ionic.css +0 -371
  988. package/dist/collection/components/input-password-toggle/input-password-toggle.ionic.css +0 -78
  989. package/dist/collection/components/input-password-toggle/input-password-toggle.native.css +0 -61
  990. package/dist/collection/components/item/item.ionic.css +0 -496
  991. package/dist/collection/components/item-option/item-option.ionic.css +0 -277
  992. package/dist/collection/components/item-options/item-options.ionic.css +0 -221
  993. package/dist/collection/components/item-sliding/item-sliding.ionic.css +0 -211
  994. package/dist/collection/components/list/list.ionic.css +0 -212
  995. package/dist/collection/components/list-header/list-header.ionic.css +0 -190
  996. package/dist/collection/components/menu-button/menu-button.ionic.css +0 -236
  997. package/dist/collection/components/modal/animations/ionic.enter.js +0 -40
  998. package/dist/collection/components/modal/animations/ionic.leave.js +0 -28
  999. package/dist/collection/components/modal/modal.ionic.css +0 -255
  1000. package/dist/collection/components/popover/popover.ionic.css +0 -290
  1001. package/dist/collection/components/progress-bar/progress-bar.ionic.css +0 -287
  1002. package/dist/collection/components/radio/radio.ionic.css +0 -422
  1003. package/dist/collection/components/radio-group/radio-group.ionic.css +0 -119
  1004. package/dist/collection/components/range/range.ionic.css +0 -567
  1005. package/dist/collection/components/ripple-effect/ripple-effect.ionic.css +0 -215
  1006. package/dist/collection/components/searchbar/searchbar.ionic.css +0 -622
  1007. package/dist/collection/components/segment/segment.ionic.css +0 -115
  1008. package/dist/collection/components/segment-button/segment-button.ionic.css +0 -352
  1009. package/dist/collection/components/select/select.ionic.css +0 -809
  1010. package/dist/collection/components/select-modal/select-modal.ionic.css +0 -257
  1011. package/dist/collection/components/select-popover/select-popover.ionic.css +0 -255
  1012. package/dist/collection/components/spinner/spinner.native.css +0 -199
  1013. package/dist/collection/components/tab-bar/tab-bar.ionic.css +0 -249
  1014. package/dist/collection/components/tab-button/tab-button.ionic.css +0 -373
  1015. package/dist/collection/components/textarea/textarea.ionic.css +0 -898
  1016. package/dist/collection/components/title/title.ionic.css +0 -127
  1017. package/dist/collection/components/toast/toast.ionic.css +0 -394
  1018. package/dist/collection/components/toggle/toggle.ionic.css +0 -512
  1019. package/dist/collection/components/toolbar/test/image.svg +0 -1
  1020. package/dist/collection/components/toolbar/toolbar.ionic.css +0 -249
  1021. package/dist/collection/utils/css-value-validation.js +0 -39
  1022. package/dist/collection/utils/overlay-control-label.js +0 -47
  1023. package/dist/collection/utils/scroll-hide-controller.js +0 -178
  1024. package/dist/collection/utils/select-option-render.js +0 -119
  1025. package/dist/esm/caret-down-D1t981Ih.js +0 -6
  1026. package/dist/esm/caret-left-fIOYmaqA.js +0 -6
  1027. package/dist/esm/caret-right-BYSs-jZz.js +0 -6
  1028. package/dist/esm/config-BwKpO3Is.js +0 -31
  1029. package/dist/esm/index-Mq5pCWmZ.js +0 -424
  1030. package/dist/esm/ion-divider.entry.js +0 -49
  1031. package/dist/esm/ion-gallery-item.entry.js +0 -57
  1032. package/dist/esm/ion-gallery.entry.js +0 -605
  1033. package/dist/esm/ionic-global-BpkTponr.js +0 -508
  1034. package/dist/esm/list-Dhi5xtNS.js +0 -6
  1035. package/dist/esm/overlay-control-label-CODBQrPj.js +0 -49
  1036. package/dist/esm/scroll-hide-controller-CUNW7EpD.js +0 -342
  1037. package/dist/esm/select-option-render-BlKZ2H83.js +0 -122
  1038. package/dist/esm/validity-BjW8SOqw.js +0 -48
  1039. package/dist/esm/x-BDqjX7Z_.js +0 -6
  1040. package/dist/ionic/p--sroV-k-.js +0 -4
  1041. package/dist/ionic/p-05ce9821.entry.js +0 -4
  1042. package/dist/ionic/p-085b8cdf.entry.js +0 -4
  1043. package/dist/ionic/p-0ef6bfc4.entry.js +0 -4
  1044. package/dist/ionic/p-176d37f8.entry.js +0 -4
  1045. package/dist/ionic/p-18b7771e.entry.js +0 -4
  1046. package/dist/ionic/p-19f34fe5.entry.js +0 -4
  1047. package/dist/ionic/p-1b6e3914.entry.js +0 -4
  1048. package/dist/ionic/p-2740db6e.entry.js +0 -4
  1049. package/dist/ionic/p-2a1abbb1.entry.js +0 -4
  1050. package/dist/ionic/p-2d9c681b.entry.js +0 -4
  1051. package/dist/ionic/p-2fba8f15.entry.js +0 -4
  1052. package/dist/ionic/p-3886bfbe.entry.js +0 -4
  1053. package/dist/ionic/p-3ab9c35a.entry.js +0 -4
  1054. package/dist/ionic/p-3b4c5cb5.entry.js +0 -4
  1055. package/dist/ionic/p-3cfb4ff2.entry.js +0 -4
  1056. package/dist/ionic/p-41afaf15.entry.js +0 -4
  1057. package/dist/ionic/p-47b9dac0.entry.js +0 -4
  1058. package/dist/ionic/p-54419365.entry.js +0 -4
  1059. package/dist/ionic/p-54b7972e.entry.js +0 -4
  1060. package/dist/ionic/p-602cf876.entry.js +0 -4
  1061. package/dist/ionic/p-678ee14a.entry.js +0 -4
  1062. package/dist/ionic/p-679c1448.entry.js +0 -4
  1063. package/dist/ionic/p-68ea8ed1.entry.js +0 -4
  1064. package/dist/ionic/p-6e1ec775.entry.js +0 -4
  1065. package/dist/ionic/p-745d6b2b.entry.js +0 -4
  1066. package/dist/ionic/p-77254b78.entry.js +0 -4
  1067. package/dist/ionic/p-89fedfda.entry.js +0 -4
  1068. package/dist/ionic/p-8cf82b85.entry.js +0 -4
  1069. package/dist/ionic/p-8d5fd199.entry.js +0 -4
  1070. package/dist/ionic/p-9087119f.entry.js +0 -4
  1071. package/dist/ionic/p-9c508a22.entry.js +0 -4
  1072. package/dist/ionic/p-B4Kq2YNk.js +0 -4
  1073. package/dist/ionic/p-BDSH5ckF.js +0 -4
  1074. package/dist/ionic/p-BDqjX7Z_.js +0 -4
  1075. package/dist/ionic/p-BFy_BK46.js +0 -4
  1076. package/dist/ionic/p-BYSs-jZz.js +0 -4
  1077. package/dist/ionic/p-BjW8SOqw.js +0 -4
  1078. package/dist/ionic/p-BlZo7Gy-.js +0 -4
  1079. package/dist/ionic/p-Bq8S4vhI.js +0 -4
  1080. package/dist/ionic/p-BwKpO3Is.js +0 -4
  1081. package/dist/ionic/p-C0EQceqV.js +0 -5
  1082. package/dist/ionic/p-C1I_d964.js +0 -4
  1083. package/dist/ionic/p-CB91Gr9M.js +0 -4
  1084. package/dist/ionic/p-CEkwLb3L.js +0 -4
  1085. package/dist/ionic/p-CJsJQPQD.js +0 -4
  1086. package/dist/ionic/p-CODBQrPj.js +0 -4
  1087. package/dist/ionic/p-Ch7MBNn_.js +0 -4
  1088. package/dist/ionic/p-CnAWnbNK.js +0 -4
  1089. package/dist/ionic/p-D1t981Ih.js +0 -4
  1090. package/dist/ionic/p-D4MT1z4_.js +0 -4
  1091. package/dist/ionic/p-D4veLKCq.js +0 -4
  1092. package/dist/ionic/p-DF7ubVci.js +0 -4
  1093. package/dist/ionic/p-DMaSfupH.js +0 -4
  1094. package/dist/ionic/p-DTsDGZPd.js +0 -4
  1095. package/dist/ionic/p-DaJxRxSQ.js +0 -4
  1096. package/dist/ionic/p-DdCaKRle.js +0 -4
  1097. package/dist/ionic/p-Dhi5xtNS.js +0 -4
  1098. package/dist/ionic/p-Dy243NXW.js +0 -4
  1099. package/dist/ionic/p-YIsE5bNG.js +0 -4
  1100. package/dist/ionic/p-a4af8e39.entry.js +0 -4
  1101. package/dist/ionic/p-b2368a93.entry.js +0 -4
  1102. package/dist/ionic/p-b275f17e.entry.js +0 -4
  1103. package/dist/ionic/p-c5635175.entry.js +0 -4
  1104. package/dist/ionic/p-c76d57fb.entry.js +0 -4
  1105. package/dist/ionic/p-ca3a07b5.entry.js +0 -4
  1106. package/dist/ionic/p-ced3cda1.entry.js +0 -4
  1107. package/dist/ionic/p-cf22e991.entry.js +0 -4
  1108. package/dist/ionic/p-d0c1d21d.entry.js +0 -4
  1109. package/dist/ionic/p-d0d42da6.entry.js +0 -4
  1110. package/dist/ionic/p-d1de76b8.entry.js +0 -4
  1111. package/dist/ionic/p-d33dfc12.entry.js +0 -4
  1112. package/dist/ionic/p-d34bfb61.entry.js +0 -4
  1113. package/dist/ionic/p-dbc08f67.entry.js +0 -4
  1114. package/dist/ionic/p-dc8e0b91.entry.js +0 -4
  1115. package/dist/ionic/p-df642ef5.entry.js +0 -4
  1116. package/dist/ionic/p-e04d63e1.entry.js +0 -4
  1117. package/dist/ionic/p-e3615478.entry.js +0 -4
  1118. package/dist/ionic/p-f1810d29.entry.js +0 -4
  1119. package/dist/ionic/p-f1a8aead.entry.js +0 -4
  1120. package/dist/ionic/p-f69af9d3.entry.js +0 -4
  1121. package/dist/ionic/p-f8001f8f.entry.js +0 -4
  1122. package/dist/ionic/p-f8b63ebb.entry.js +0 -4
  1123. package/dist/ionic/p-fIOYmaqA.js +0 -4
  1124. package/dist/ionic/p-fc6d26ff.entry.js +0 -4
  1125. package/dist/ionic/p-im8OkZlj.js +0 -4
  1126. package/dist/ionic/p-lMb_45ax.js +0 -4
  1127. package/dist/ionic/p-oUgyLDGL.js +0 -4
  1128. package/dist/ionic/p-vXpMhGrs.js +0 -4
  1129. package/dist/types/components/divider/divider.d.ts +0 -20
  1130. package/dist/types/components/footer/footer-interface.d.ts +0 -1
  1131. package/dist/types/components/gallery/gallery-constants.d.ts +0 -9
  1132. package/dist/types/components/gallery/gallery-interface.d.ts +0 -10
  1133. package/dist/types/components/gallery/gallery.d.ts +0 -218
  1134. package/dist/types/components/gallery/test/utils.d.ts +0 -3
  1135. package/dist/types/components/gallery-item/gallery-item.d.ts +0 -33
  1136. package/dist/types/components/header/header-interface.d.ts +0 -1
  1137. package/dist/types/components/modal/animations/ionic.enter.d.ts +0 -6
  1138. package/dist/types/components/modal/animations/ionic.leave.d.ts +0 -6
  1139. package/dist/types/utils/css-value-validation.d.ts +0 -21
  1140. package/dist/types/utils/overlay-control-label.d.ts +0 -34
  1141. package/dist/types/utils/scroll-hide-controller.d.ts +0 -56
  1142. package/dist/types/utils/select-option-render.d.ts +0 -53
  1143. /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"]}