@ionic/core 7.6.7-dev.11707148710.1cd59fde → 7.6.7-dev.11707156611.1b43b9ec
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.
- package/components/action-sheet.js +2 -2
- package/components/alert.js +2 -2
- package/components/checkbox.js +2 -2
- package/components/ion-breadcrumb.js +2 -2
- package/components/ion-card-subtitle.js +2 -2
- package/components/ion-card-title.js +1 -1
- package/components/ion-card.js +2 -2
- package/components/ion-datetime-button.js +2 -2
- package/components/ion-datetime.js +2 -2
- package/components/ion-fab-list.js +1 -1
- package/components/ion-infinite-scroll-content.js +2 -2
- package/components/ion-input.js +4 -8
- package/components/ion-item-divider.js +2 -2
- package/components/ion-item-options.js +2 -2
- package/components/ion-loading.js +2 -2
- package/components/ion-menu.js +2 -2
- package/components/ion-modal.js +2 -2
- package/components/ion-picker-legacy.js +2 -2
- package/components/ion-range.js +2 -2
- package/components/ion-refresher-content.js +1 -1
- package/components/ion-refresher.js +2 -2
- package/components/ion-searchbar.js +2 -2
- package/components/ion-segment-button.js +1 -1
- package/components/ion-select.js +2 -2
- package/components/ion-split-pane.js +2 -2
- package/components/ion-tab-bar.js +2 -2
- package/components/ion-tab-button.js +2 -2
- package/components/ion-textarea.js +2 -2
- package/components/ion-title.js +1 -1
- package/components/ion-toast.js +2 -2
- package/components/ion-toggle.js +2 -2
- package/components/ion-toolbar.js +2 -2
- package/components/item.js +2 -2
- package/components/label.js +2 -2
- package/components/list-header.js +2 -2
- package/components/list.js +1 -1
- package/components/note.js +2 -2
- package/components/picker-column2.js +2 -2
- package/components/picker.js +2 -2
- package/components/popover.js +1 -1
- package/components/radio.js +2 -2
- package/css/core.css.map +1 -1
- package/css/display.css.map +1 -1
- package/css/float-elements.css.map +1 -1
- package/css/global.bundle.css.map +1 -1
- package/css/ionic-swiper.css.map +1 -1
- package/css/ionic.bundle.css.map +1 -1
- package/css/padding.css.map +1 -1
- package/css/structure.css.map +1 -1
- package/css/text-alignment.css.map +1 -1
- package/css/text-transformation.css.map +1 -1
- package/css/themes/dark.always.css +41 -79
- package/css/themes/dark.always.css.map +1 -1
- package/css/themes/dark.class.css +41 -79
- package/css/themes/dark.class.css.map +1 -1
- package/css/themes/dark.system.css +41 -79
- package/css/themes/dark.system.css.map +1 -1
- package/css/typography.css.map +1 -1
- package/css/utils.bundle.css.map +1 -1
- package/dist/cjs/ion-action-sheet.cjs.entry.js +2 -2
- package/dist/cjs/ion-alert.cjs.entry.js +2 -2
- package/dist/cjs/ion-app_8.cjs.entry.js +3 -3
- package/dist/cjs/ion-breadcrumb_2.cjs.entry.js +2 -2
- package/dist/cjs/ion-card_5.cjs.entry.js +5 -5
- package/dist/cjs/ion-checkbox.cjs.entry.js +2 -2
- package/dist/cjs/ion-datetime-button.cjs.entry.js +2 -2
- package/dist/cjs/ion-datetime_3.cjs.entry.js +6 -6
- package/dist/cjs/ion-fab_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-infinite-scroll_2.cjs.entry.js +2 -2
- package/dist/cjs/ion-input.cjs.entry.js +4 -6
- package/dist/cjs/ion-item-option_3.cjs.entry.js +2 -2
- package/dist/cjs/ion-item_8.cjs.entry.js +11 -11
- package/dist/cjs/ion-loading.cjs.entry.js +2 -2
- package/dist/cjs/ion-menu_3.cjs.entry.js +2 -2
- package/dist/cjs/ion-modal.cjs.entry.js +2 -2
- package/dist/cjs/ion-picker.cjs.entry.js +2 -2
- package/dist/cjs/ion-popover.cjs.entry.js +1 -1
- package/dist/cjs/ion-radio_2.cjs.entry.js +2 -2
- package/dist/cjs/ion-range.cjs.entry.js +2 -2
- package/dist/cjs/ion-refresher_2.cjs.entry.js +3 -3
- package/dist/cjs/ion-searchbar.cjs.entry.js +2 -2
- package/dist/cjs/ion-segment_2.cjs.entry.js +1 -1
- package/dist/cjs/ion-select_3.cjs.entry.js +2 -2
- package/dist/cjs/ion-split-pane.cjs.entry.js +2 -2
- package/dist/cjs/ion-tab-bar_2.cjs.entry.js +4 -4
- package/dist/cjs/ion-textarea.cjs.entry.js +2 -2
- package/dist/cjs/ion-toast.cjs.entry.js +2 -2
- package/dist/cjs/ion-toggle.cjs.entry.js +2 -2
- package/dist/cjs/ionic.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/action-sheet/action-sheet.ios.css +4 -4
- package/dist/collection/components/action-sheet/action-sheet.md.css +1 -1
- package/dist/collection/components/alert/alert.ios.css +10 -58
- package/dist/collection/components/alert/alert.md.css +19 -115
- package/dist/collection/components/breadcrumb/breadcrumb.ios.css +9 -9
- package/dist/collection/components/breadcrumb/breadcrumb.md.css +9 -9
- package/dist/collection/components/card/card.ios.css +1 -1
- package/dist/collection/components/card/card.md.css +1 -1
- package/dist/collection/components/card-subtitle/card-subtitle.ios.css +1 -1
- package/dist/collection/components/card-subtitle/card-subtitle.md.css +1 -1
- package/dist/collection/components/card-title/card-title.md.css +1 -1
- package/dist/collection/components/checkbox/checkbox.ios.css +3 -21
- package/dist/collection/components/checkbox/checkbox.md.css +3 -21
- package/dist/collection/components/datetime/datetime.ios.css +10 -32
- package/dist/collection/components/datetime/datetime.md.css +11 -33
- package/dist/collection/components/datetime-button/datetime-button.css +1 -1
- package/dist/collection/components/fab-list/fab-list.css +4 -42
- package/dist/collection/components/infinite-scroll-content/infinite-scroll-content.ios.css +3 -3
- package/dist/collection/components/infinite-scroll-content/infinite-scroll-content.md.css +3 -3
- package/dist/collection/components/input/input.ios.css +7 -31
- package/dist/collection/components/input/input.js +2 -41
- package/dist/collection/components/input/input.md.css +19 -86
- package/dist/collection/components/item/item.ios.css +2 -2
- package/dist/collection/components/item/item.md.css +11 -30
- package/dist/collection/components/item-divider/item-divider.ios.css +3 -3
- package/dist/collection/components/item-divider/item-divider.md.css +3 -3
- package/dist/collection/components/item-options/item-options.ios.css +1 -1
- package/dist/collection/components/item-options/item-options.md.css +1 -1
- package/dist/collection/components/label/label.ios.css +1 -1
- package/dist/collection/components/label/label.md.css +1 -1
- package/dist/collection/components/list/list.md.css +2 -26
- package/dist/collection/components/list-header/list-header.ios.css +2 -2
- package/dist/collection/components/list-header/list-header.md.css +1 -1
- package/dist/collection/components/loading/loading.ios.css +2 -2
- package/dist/collection/components/loading/loading.md.css +2 -2
- package/dist/collection/components/menu/menu.ios.css +8 -50
- package/dist/collection/components/menu/menu.md.css +8 -50
- package/dist/collection/components/modal/modal.ios.css +1 -1
- package/dist/collection/components/modal/modal.md.css +1 -1
- package/dist/collection/components/note/note.ios.css +1 -1
- package/dist/collection/components/note/note.md.css +1 -1
- package/dist/collection/components/picker/picker.ios.css +5 -43
- package/dist/collection/components/picker/picker.md.css +4 -42
- package/dist/collection/components/picker-legacy/picker.ios.css +7 -74
- package/dist/collection/components/picker-legacy/picker.md.css +9 -76
- package/dist/collection/components/picker-legacy-column/picker-column.ios.css +2 -26
- package/dist/collection/components/picker-legacy-column/picker-column.md.css +2 -26
- package/dist/collection/components/popover/popover.ios.css +3 -27
- package/dist/collection/components/radio/radio.ios.css +5 -42
- package/dist/collection/components/radio/radio.md.css +5 -42
- package/dist/collection/components/range/range.ios.css +11 -80
- package/dist/collection/components/range/range.md.css +16 -132
- package/dist/collection/components/refresher/refresher.ios.css +4 -27
- package/dist/collection/components/refresher/refresher.md.css +5 -28
- package/dist/collection/components/refresher/test/a11y/refresher.e2e.js +2 -1
- package/dist/collection/components/refresher-content/refresher-content.js +1 -1
- package/dist/collection/components/searchbar/searchbar.ios.css +7 -55
- package/dist/collection/components/searchbar/searchbar.md.css +10 -82
- package/dist/collection/components/segment-button/segment-button.ios.css +3 -3
- package/dist/collection/components/select/select.ios.css +5 -23
- package/dist/collection/components/select/select.md.css +18 -79
- package/dist/collection/components/split-pane/split-pane.ios.css +1 -1
- package/dist/collection/components/split-pane/split-pane.md.css +1 -1
- package/dist/collection/components/tab-bar/tab-bar.ios.css +3 -3
- package/dist/collection/components/tab-bar/tab-bar.md.css +2 -2
- package/dist/collection/components/tab-button/tab-button.ios.css +10 -93
- package/dist/collection/components/tab-button/tab-button.md.css +10 -93
- package/dist/collection/components/textarea/textarea.ios.css +6 -30
- package/dist/collection/components/textarea/textarea.md.css +18 -85
- package/dist/collection/components/title/title.ios.css +2 -21
- package/dist/collection/components/toast/test/a11y/toast.e2e.js +0 -33
- package/dist/collection/components/toast/toast.ios.css +7 -54
- package/dist/collection/components/toast/toast.md.css +8 -55
- package/dist/collection/components/toggle/toggle.ios.css +3 -21
- package/dist/collection/components/toggle/toggle.md.css +3 -21
- package/dist/collection/components/toolbar/toolbar.ios.css +2 -2
- package/dist/collection/components/toolbar/toolbar.md.css +1 -1
- package/dist/collection/themes/test/colors/theme.e2e.js +0 -56
- package/dist/docs.json +1 -54
- package/dist/esm/ion-action-sheet.entry.js +2 -2
- package/dist/esm/ion-alert.entry.js +2 -2
- package/dist/esm/ion-app_8.entry.js +3 -3
- package/dist/esm/ion-breadcrumb_2.entry.js +2 -2
- package/dist/esm/ion-card_5.entry.js +5 -5
- package/dist/esm/ion-checkbox.entry.js +2 -2
- package/dist/esm/ion-datetime-button.entry.js +2 -2
- package/dist/esm/ion-datetime_3.entry.js +6 -6
- package/dist/esm/ion-fab_3.entry.js +1 -1
- package/dist/esm/ion-infinite-scroll_2.entry.js +2 -2
- package/dist/esm/ion-input.entry.js +4 -6
- package/dist/esm/ion-item-option_3.entry.js +2 -2
- package/dist/esm/ion-item_8.entry.js +11 -11
- package/dist/esm/ion-loading.entry.js +2 -2
- package/dist/esm/ion-menu_3.entry.js +2 -2
- package/dist/esm/ion-modal.entry.js +2 -2
- package/dist/esm/ion-picker.entry.js +2 -2
- package/dist/esm/ion-popover.entry.js +1 -1
- package/dist/esm/ion-radio_2.entry.js +2 -2
- package/dist/esm/ion-range.entry.js +2 -2
- package/dist/esm/ion-refresher_2.entry.js +3 -3
- package/dist/esm/ion-searchbar.entry.js +2 -2
- package/dist/esm/ion-segment_2.entry.js +1 -1
- package/dist/esm/ion-select_3.entry.js +2 -2
- package/dist/esm/ion-split-pane.entry.js +2 -2
- package/dist/esm/ion-tab-bar_2.entry.js +4 -4
- package/dist/esm/ion-textarea.entry.js +2 -2
- package/dist/esm/ion-toast.entry.js +2 -2
- package/dist/esm/ion-toggle.entry.js +2 -2
- package/dist/esm/ionic.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm-es5/ion-action-sheet.entry.js +1 -1
- package/dist/esm-es5/ion-alert.entry.js +1 -1
- package/dist/esm-es5/ion-app_8.entry.js +1 -1
- package/dist/esm-es5/ion-breadcrumb_2.entry.js +1 -1
- package/dist/esm-es5/ion-card_5.entry.js +1 -1
- package/dist/esm-es5/ion-checkbox.entry.js +1 -1
- package/dist/esm-es5/ion-datetime-button.entry.js +1 -1
- package/dist/esm-es5/ion-datetime_3.entry.js +1 -1
- package/dist/esm-es5/ion-fab_3.entry.js +1 -1
- package/dist/esm-es5/ion-infinite-scroll_2.entry.js +1 -1
- package/dist/esm-es5/ion-input.entry.js +1 -1
- package/dist/esm-es5/ion-item-option_3.entry.js +1 -1
- package/dist/esm-es5/ion-item_8.entry.js +1 -1
- package/dist/esm-es5/ion-loading.entry.js +1 -1
- package/dist/esm-es5/ion-menu_3.entry.js +1 -1
- package/dist/esm-es5/ion-modal.entry.js +1 -1
- package/dist/esm-es5/ion-picker.entry.js +1 -1
- package/dist/esm-es5/ion-popover.entry.js +1 -1
- package/dist/esm-es5/ion-radio_2.entry.js +1 -1
- package/dist/esm-es5/ion-range.entry.js +1 -1
- package/dist/esm-es5/ion-refresher_2.entry.js +1 -1
- package/dist/esm-es5/ion-searchbar.entry.js +1 -1
- package/dist/esm-es5/ion-segment_2.entry.js +1 -1
- package/dist/esm-es5/ion-select_3.entry.js +1 -1
- package/dist/esm-es5/ion-split-pane.entry.js +1 -1
- package/dist/esm-es5/ion-tab-bar_2.entry.js +1 -1
- package/dist/esm-es5/ion-textarea.entry.js +1 -1
- package/dist/esm-es5/ion-toast.entry.js +1 -1
- package/dist/esm-es5/ion-toggle.entry.js +1 -1
- package/dist/esm-es5/ionic.js +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/html.html-data.json +0 -8
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/{p-3cf67784.entry.js → p-029891a2.entry.js} +1 -1
- package/dist/ionic/p-05266a75.entry.js +4 -0
- package/dist/ionic/p-055aee88.system.entry.js +4 -0
- package/dist/ionic/p-0b27e3f9.entry.js +4 -0
- package/dist/ionic/p-127ff448.entry.js +4 -0
- package/dist/ionic/p-18858f40.entry.js +4 -0
- package/dist/ionic/p-1a5f0313.system.js +1 -1
- package/dist/ionic/p-26976bfc.system.entry.js +4 -0
- package/dist/ionic/p-2e93a307.system.entry.js +4 -0
- package/dist/ionic/p-359da6bc.entry.js +4 -0
- package/dist/ionic/p-39af44bb.entry.js +4 -0
- package/dist/ionic/p-3bb8dba2.system.entry.js +4 -0
- package/dist/ionic/p-4210519e.entry.js +4 -0
- package/dist/ionic/p-4565aa49.system.entry.js +4 -0
- package/dist/ionic/p-467ec026.entry.js +4 -0
- package/dist/ionic/p-4b890ea2.entry.js +4 -0
- package/dist/ionic/{p-32b129a2.entry.js → p-4b94c354.entry.js} +1 -1
- package/dist/ionic/p-4f18d611.system.entry.js +4 -0
- package/dist/ionic/p-567ba50a.system.entry.js +4 -0
- package/dist/ionic/p-598bd8e2.entry.js +4 -0
- package/dist/ionic/{p-0d850325.entry.js → p-5a85d71d.entry.js} +1 -1
- package/dist/ionic/p-673614dd.system.entry.js +4 -0
- package/dist/ionic/{p-b8fbc01d.entry.js → p-67c1996d.entry.js} +1 -1
- package/dist/ionic/p-6ba863b1.system.entry.js +4 -0
- package/dist/ionic/{p-14196559.entry.js → p-7178018d.entry.js} +1 -1
- package/dist/ionic/p-731c9b0c.system.entry.js +4 -0
- package/dist/ionic/p-735807f6.system.entry.js +4 -0
- package/dist/ionic/p-77166522.system.entry.js +4 -0
- package/dist/ionic/{p-f003e500.system.entry.js → p-7751def0.system.entry.js} +1 -1
- package/dist/ionic/p-7a15321a.entry.js +4 -0
- package/dist/ionic/{p-b6e4e9ce.system.entry.js → p-7a1ef06a.system.entry.js} +1 -1
- package/dist/ionic/p-7a2c6bb5.entry.js +4 -0
- package/dist/ionic/p-85897798.entry.js +4 -0
- package/dist/ionic/p-85cb3f46.entry.js +4 -0
- package/dist/ionic/{p-c6a6ffe6.entry.js → p-85e04029.entry.js} +1 -1
- package/dist/ionic/{p-cd6a60d2.entry.js → p-870453fd.entry.js} +1 -1
- package/dist/ionic/{p-8aaade76.entry.js → p-8a66c00e.entry.js} +1 -1
- package/dist/ionic/p-92453558.entry.js +4 -0
- package/dist/ionic/{p-0f55b1b0.entry.js → p-95d8071f.entry.js} +1 -1
- package/dist/ionic/{p-69926b34.entry.js → p-9928b546.entry.js} +1 -1
- package/dist/ionic/{p-97657f32.system.entry.js → p-a11e45fe.system.entry.js} +1 -1
- package/dist/ionic/p-b0ab5300.entry.js +4 -0
- package/dist/ionic/p-b3196337.system.entry.js +4 -0
- package/dist/ionic/p-bad61026.system.entry.js +4 -0
- package/dist/ionic/p-c9b8f9e5.system.entry.js +4 -0
- package/dist/ionic/p-cb304e5f.system.entry.js +4 -0
- package/dist/ionic/p-d05259ce.system.entry.js +4 -0
- package/dist/ionic/p-d5d46104.system.entry.js +4 -0
- package/dist/ionic/{p-659086a2.system.entry.js → p-dc5a71e3.system.entry.js} +1 -1
- package/dist/ionic/{p-5186ff3f.system.entry.js → p-e0909061.system.entry.js} +1 -1
- package/dist/ionic/p-e1635f65.entry.js +4 -0
- package/dist/ionic/p-e219aec9.system.entry.js +4 -0
- package/dist/ionic/p-e28a6fd5.entry.js +4 -0
- package/dist/ionic/{p-381ca6f8.system.entry.js → p-ea90bf85.system.entry.js} +1 -1
- package/dist/ionic/p-ee1214e0.system.entry.js +4 -0
- package/dist/ionic/p-f065a07b.entry.js +4 -0
- package/dist/ionic/{p-16e781a6.system.entry.js → p-f3478ed6.system.entry.js} +1 -1
- package/dist/ionic/p-f62739dd.system.entry.js +4 -0
- package/dist/ionic/p-ffaba024.system.entry.js +4 -0
- package/dist/types/components/input/input.d.ts +0 -6
- package/dist/types/components.d.ts +0 -12
- package/dist/types/utils/test/playwright/generator.d.ts +1 -3
- package/hydrate/index.js +77 -81
- package/package.json +1 -1
- package/css/themes/high-contrast-dark.always.css +0 -180
- package/css/themes/high-contrast-dark.always.css.map +0 -1
- package/css/themes/high-contrast-dark.class.css +0 -180
- package/css/themes/high-contrast-dark.class.css.map +0 -1
- package/css/themes/high-contrast-dark.css +0 -3
- package/css/themes/high-contrast-dark.css.map +0 -1
- package/css/themes/high-contrast-dark.system.css +0 -182
- package/css/themes/high-contrast-dark.system.css.map +0 -1
- package/css/themes/high-contrast-light.always.css +0 -101
- package/css/themes/high-contrast-light.always.css.map +0 -1
- package/css/themes/high-contrast-light.class.css +0 -101
- package/css/themes/high-contrast-light.class.css.map +0 -1
- package/css/themes/high-contrast-light.css +0 -3
- package/css/themes/high-contrast-light.css.map +0 -1
- package/css/themes/high-contrast-light.system.css +0 -103
- package/css/themes/high-contrast-light.system.css.map +0 -1
- package/dist/ionic/p-0055506a.entry.js +0 -4
- package/dist/ionic/p-07d725a7.entry.js +0 -4
- package/dist/ionic/p-0ac49b0c.system.entry.js +0 -4
- package/dist/ionic/p-14b8100f.system.entry.js +0 -4
- package/dist/ionic/p-15878390.system.entry.js +0 -4
- package/dist/ionic/p-1c445de9.entry.js +0 -4
- package/dist/ionic/p-2800e6d5.system.entry.js +0 -4
- package/dist/ionic/p-283d8f5e.system.entry.js +0 -4
- package/dist/ionic/p-2aa29487.system.entry.js +0 -4
- package/dist/ionic/p-305423e0.entry.js +0 -4
- package/dist/ionic/p-327211c1.entry.js +0 -4
- package/dist/ionic/p-34f05cec.entry.js +0 -4
- package/dist/ionic/p-3587df88.system.entry.js +0 -4
- package/dist/ionic/p-3f3ae637.system.entry.js +0 -4
- package/dist/ionic/p-438b6002.system.entry.js +0 -4
- package/dist/ionic/p-4eaf5dcd.system.entry.js +0 -4
- package/dist/ionic/p-6793b96e.system.entry.js +0 -4
- package/dist/ionic/p-6b0c8263.entry.js +0 -4
- package/dist/ionic/p-7e8ef0bb.system.entry.js +0 -4
- package/dist/ionic/p-89c5f8ba.system.entry.js +0 -4
- package/dist/ionic/p-8a1d33e3.system.entry.js +0 -4
- package/dist/ionic/p-97e39972.system.entry.js +0 -4
- package/dist/ionic/p-9b930e4f.entry.js +0 -4
- package/dist/ionic/p-a114831c.entry.js +0 -4
- package/dist/ionic/p-ae8747aa.entry.js +0 -4
- package/dist/ionic/p-b13f5e6a.entry.js +0 -4
- package/dist/ionic/p-b8213f04.entry.js +0 -4
- package/dist/ionic/p-d0291fe9.entry.js +0 -4
- package/dist/ionic/p-d5a21de8.entry.js +0 -4
- package/dist/ionic/p-db00f04e.entry.js +0 -4
- package/dist/ionic/p-ddf79d90.system.entry.js +0 -4
- package/dist/ionic/p-def451e2.system.entry.js +0 -4
- package/dist/ionic/p-df5134fa.entry.js +0 -4
- package/dist/ionic/p-df7aaa62.entry.js +0 -4
- package/dist/ionic/p-dfd21411.system.entry.js +0 -4
- package/dist/ionic/p-e9a36c6f.entry.js +0 -4
- package/dist/ionic/p-ef6ec008.system.entry.js +0 -4
- package/dist/ionic/p-ef9e6f77.system.entry.js +0 -4
- package/dist/ionic/p-f27b18ba.system.entry.js +0 -4
- package/dist/ionic/p-f62122bb.system.entry.js +0 -4
- package/dist/ionic/p-fdc3ff96.entry.js +0 -4
package/package.json
CHANGED
|
@@ -1,180 +0,0 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--ion-color-primary: #7cabff;
|
|
3
|
-
--ion-color-primary-rgb: 124, 171, 255;
|
|
4
|
-
--ion-color-primary-contrast: #000;
|
|
5
|
-
--ion-color-primary-contrast-rgb: 0, 0, 0;
|
|
6
|
-
--ion-color-primary-shade: #6d96e0;
|
|
7
|
-
--ion-color-primary-tint: #89b3ff;
|
|
8
|
-
--ion-color-secondary: #62bdff;
|
|
9
|
-
--ion-color-secondary-rgb: 98, 189, 255;
|
|
10
|
-
--ion-color-secondary-contrast: #000;
|
|
11
|
-
--ion-color-secondary-contrast-rgb: 0, 0, 0;
|
|
12
|
-
--ion-color-secondary-shade: #56a6e0;
|
|
13
|
-
--ion-color-secondary-tint: #72c4ff;
|
|
14
|
-
--ion-color-tertiary: #b6b9f9;
|
|
15
|
-
--ion-color-tertiary-rgb: 182, 185, 249;
|
|
16
|
-
--ion-color-tertiary-contrast: #000;
|
|
17
|
-
--ion-color-tertiary-contrast-rgb: 0, 0, 0;
|
|
18
|
-
--ion-color-tertiary-shade: #a0a3db;
|
|
19
|
-
--ion-color-tertiary-tint: #bdc0fa;
|
|
20
|
-
--ion-color-success: #4ada71;
|
|
21
|
-
--ion-color-success-rgb: 74, 218, 113;
|
|
22
|
-
--ion-color-success-contrast: #000;
|
|
23
|
-
--ion-color-success-contrast-rgb: 0, 0, 0;
|
|
24
|
-
--ion-color-success-shade: #41c063;
|
|
25
|
-
--ion-color-success-tint: #5cde7f;
|
|
26
|
-
--ion-color-warning: #ffce31;
|
|
27
|
-
--ion-color-warning-rgb: 255, 206, 49;
|
|
28
|
-
--ion-color-warning-contrast: #000;
|
|
29
|
-
--ion-color-warning-contrast-rgb: 0, 0, 0;
|
|
30
|
-
--ion-color-warning-shade: #e0b52b;
|
|
31
|
-
--ion-color-warning-tint: #ffd346;
|
|
32
|
-
--ion-color-danger: #fc9aa2;
|
|
33
|
-
--ion-color-danger-rgb: 252, 154, 162;
|
|
34
|
-
--ion-color-danger-contrast: #000;
|
|
35
|
-
--ion-color-danger-contrast-rgb: 0, 0, 0;
|
|
36
|
-
--ion-color-danger-shade: #de888f;
|
|
37
|
-
--ion-color-danger-tint: #fca4ab;
|
|
38
|
-
--ion-color-light: #2f2f2f;
|
|
39
|
-
--ion-color-light-rgb: 47, 47, 47;
|
|
40
|
-
--ion-color-light-contrast: #fff;
|
|
41
|
-
--ion-color-light-contrast-rgb: 255, 255, 255;
|
|
42
|
-
--ion-color-light-shade: #292929;
|
|
43
|
-
--ion-color-light-tint: #444444;
|
|
44
|
-
--ion-color-medium: #b4bcc6;
|
|
45
|
-
--ion-color-medium-rgb: 180, 188, 198;
|
|
46
|
-
--ion-color-medium-contrast: #000;
|
|
47
|
-
--ion-color-medium-contrast-rgb: 0, 0, 0;
|
|
48
|
-
--ion-color-medium-shade: #9ea5ae;
|
|
49
|
-
--ion-color-medium-tint: #bcc3cc;
|
|
50
|
-
--ion-color-dark: #f6f8fc;
|
|
51
|
-
--ion-color-dark-rgb: 246, 248, 252;
|
|
52
|
-
--ion-color-dark-contrast: #000;
|
|
53
|
-
--ion-color-dark-contrast-rgb: 0, 0, 0;
|
|
54
|
-
--ion-color-dark-shade: #d8dade;
|
|
55
|
-
--ion-color-dark-tint: #f7f9fc;
|
|
56
|
-
--ion-placeholder-opacity: 0.8;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.ios body {
|
|
60
|
-
--ion-background-color: #000000;
|
|
61
|
-
--ion-background-color-rgb: 0, 0, 0;
|
|
62
|
-
--ion-text-color: #ffffff;
|
|
63
|
-
--ion-text-color-rgb: 255, 255, 255;
|
|
64
|
-
--ion-item-background: #000000;
|
|
65
|
-
--ion-card-background: #1c1c1d;
|
|
66
|
-
--ion-item-border-color: var(--ion-background-color-step-400);
|
|
67
|
-
--ion-text-color-step-50: #f9f9f9;
|
|
68
|
-
--ion-text-color-step-100: #f3f3f3;
|
|
69
|
-
--ion-text-color-step-150: #ededed;
|
|
70
|
-
--ion-text-color-step-200: #e7e7e7;
|
|
71
|
-
--ion-text-color-step-250: #e1e1e1;
|
|
72
|
-
--ion-text-color-step-300: #dbdbdb;
|
|
73
|
-
--ion-text-color-step-350: #d5d5d5;
|
|
74
|
-
--ion-text-color-step-400: #cfcfcf;
|
|
75
|
-
--ion-text-color-step-450: #c9c9c9;
|
|
76
|
-
--ion-text-color-step-500: #c4c4c4;
|
|
77
|
-
--ion-text-color-step-550: #bebebe;
|
|
78
|
-
--ion-text-color-step-600: #b8b8b8;
|
|
79
|
-
--ion-text-color-step-650: #b2b2b2;
|
|
80
|
-
--ion-text-color-step-700: #acacac;
|
|
81
|
-
--ion-text-color-step-750: #a6a6a6;
|
|
82
|
-
--ion-text-color-step-800: #a0a0a0;
|
|
83
|
-
--ion-text-color-step-850: #9a9a9a;
|
|
84
|
-
--ion-text-color-step-900: #949494;
|
|
85
|
-
--ion-text-color-step-950: #8e8e8e;
|
|
86
|
-
--ion-background-color-step-50: #0d0d0d;
|
|
87
|
-
--ion-background-color-step-100: #1a1a1a;
|
|
88
|
-
--ion-background-color-step-150: #262626;
|
|
89
|
-
--ion-background-color-step-200: #333333;
|
|
90
|
-
--ion-background-color-step-250: #404040;
|
|
91
|
-
--ion-background-color-step-300: #4d4d4d;
|
|
92
|
-
--ion-background-color-step-350: #595959;
|
|
93
|
-
--ion-background-color-step-400: #666666;
|
|
94
|
-
--ion-background-color-step-450: #737373;
|
|
95
|
-
--ion-background-color-step-500: gray;
|
|
96
|
-
--ion-background-color-step-550: #8c8c8c;
|
|
97
|
-
--ion-background-color-step-600: #999999;
|
|
98
|
-
--ion-background-color-step-650: #a6a6a6;
|
|
99
|
-
--ion-background-color-step-700: #b3b3b3;
|
|
100
|
-
--ion-background-color-step-750: #bfbfbf;
|
|
101
|
-
--ion-background-color-step-800: #cccccc;
|
|
102
|
-
--ion-background-color-step-850: #d9d9d9;
|
|
103
|
-
--ion-background-color-step-900: #e6e6e6;
|
|
104
|
-
--ion-background-color-step-950: #f2f2f2;
|
|
105
|
-
}
|
|
106
|
-
.ios body ion-modal {
|
|
107
|
-
--ion-background-color: var(--ion-background-color-step-100);
|
|
108
|
-
--ion-toolbar-background: var(--ion-background-color-step-150);
|
|
109
|
-
--ion-toolbar-border-color: var(--ion-background-color-step-250);
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
.md body {
|
|
113
|
-
/* stylelint-disable-next-line order/order */
|
|
114
|
-
}
|
|
115
|
-
.md body {
|
|
116
|
-
--ion-background-color: #121212;
|
|
117
|
-
--ion-background-color-rgb: 18, 18, 18;
|
|
118
|
-
--ion-text-color: #ffffff;
|
|
119
|
-
--ion-text-color-rgb: 255, 255, 255;
|
|
120
|
-
--ion-border-color: #222222;
|
|
121
|
-
--ion-item-background: #1e1e1e;
|
|
122
|
-
--ion-toolbar-background: #1f1f1f;
|
|
123
|
-
--ion-tab-bar-background: #1f1f1f;
|
|
124
|
-
--ion-card-background: #1e1e1e;
|
|
125
|
-
--ion-item-border-color: var(--ion-background-color-step-400);
|
|
126
|
-
--ion-text-color-step-50: #f9f9f9;
|
|
127
|
-
--ion-text-color-step-100: #f3f3f3;
|
|
128
|
-
--ion-text-color-step-150: #ededed;
|
|
129
|
-
--ion-text-color-step-200: #e7e7e7;
|
|
130
|
-
--ion-text-color-step-250: #e1e1e1;
|
|
131
|
-
--ion-text-color-step-300: #dbdbdb;
|
|
132
|
-
--ion-text-color-step-350: #d5d5d5;
|
|
133
|
-
--ion-text-color-step-400: #cfcfcf;
|
|
134
|
-
--ion-text-color-step-450: #c9c9c9;
|
|
135
|
-
--ion-text-color-step-500: #c4c4c4;
|
|
136
|
-
--ion-text-color-step-550: #bebebe;
|
|
137
|
-
--ion-text-color-step-600: #b8b8b8;
|
|
138
|
-
--ion-text-color-step-650: #b2b2b2;
|
|
139
|
-
--ion-text-color-step-700: #acacac;
|
|
140
|
-
--ion-text-color-step-750: #a6a6a6;
|
|
141
|
-
--ion-text-color-step-800: #a0a0a0;
|
|
142
|
-
--ion-text-color-step-850: #9a9a9a;
|
|
143
|
-
--ion-text-color-step-900: #949494;
|
|
144
|
-
--ion-text-color-step-950: #8e8e8e;
|
|
145
|
-
--ion-background-color-step-50: #1e1e1e;
|
|
146
|
-
--ion-background-color-step-100: #2a2a2a;
|
|
147
|
-
--ion-background-color-step-150: #363636;
|
|
148
|
-
--ion-background-color-step-200: #414141;
|
|
149
|
-
--ion-background-color-step-250: #4d4d4d;
|
|
150
|
-
--ion-background-color-step-300: #595959;
|
|
151
|
-
--ion-background-color-step-350: #656565;
|
|
152
|
-
--ion-background-color-step-400: #717171;
|
|
153
|
-
--ion-background-color-step-450: #7d7d7d;
|
|
154
|
-
--ion-background-color-step-500: #898989;
|
|
155
|
-
--ion-background-color-step-550: #949494;
|
|
156
|
-
--ion-background-color-step-600: #a0a0a0;
|
|
157
|
-
--ion-background-color-step-650: #acacac;
|
|
158
|
-
--ion-background-color-step-700: #b8b8b8;
|
|
159
|
-
--ion-background-color-step-750: #c4c4c4;
|
|
160
|
-
--ion-background-color-step-800: #d0d0d0;
|
|
161
|
-
--ion-background-color-step-850: #dbdbdb;
|
|
162
|
-
--ion-background-color-step-900: #e7e7e7;
|
|
163
|
-
--ion-background-color-step-950: #f3f3f3;
|
|
164
|
-
}
|
|
165
|
-
.md body ion-toast {
|
|
166
|
-
--color: var(--ion-background-color);
|
|
167
|
-
}
|
|
168
|
-
.md body ion-toast::part(button) {
|
|
169
|
-
color: var(--color);
|
|
170
|
-
}
|
|
171
|
-
@supports (color: color-mix(in lch, plum, pink)) {
|
|
172
|
-
.md body ion-toast::part(button) {
|
|
173
|
-
color: color-mix(in srgb, var(--color) 73%, var(--button-color));
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
.md body ion-toast::part(button cancel) {
|
|
177
|
-
color: var(--color);
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
/*# sourceMappingURL=high-contrast-dark.always.css.map */
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../src/css/themes/high-contrast-dark.scss","../../src/css/themes/high-contrast-dark.always.scss"],"names":[],"mappings":"AAgGE;EAEI;EACA;EACA;EACA;EACA;EACA;EALA;EACA;EACA;EACA;EACA;EACA;EALA;EACA;EACA;EACA;EACA;EACA;EALA;EACA;EACA;EACA;EACA;EACA;EALA;EACA;EACA;EACA;EACA;EACA;EALA;EACA;EACA;EACA;EACA;EACA;EALA;EACA;EACA;EACA;EACA;EACA;EALA;EACA;EACA;EACA;EACA;EACA;EALA;EACA;EACA;EACA;EACA;EACA;EAGF;;;AAKF;EAGE;EACA;EAEA;EACA;EAEA;EACA;EAIA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAMF;EACE;EACA;EACA;;;ACpKJ;ADkPE;;AAzEA;EAGE;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAIA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAMF;EACE;;AAGF;EAEE;;AAIF;EACE;IACE;;;AAIJ;EACE","file":"high-contrast-dark.always.css","sourcesContent":["@use \"sass:map\";\n@import \"../../themes/ionic.functions.color\";\n\n$primary: #7cabff !default;\n$secondary: #62bdff !default;\n$tertiary: #b6b9f9 !default;\n$success: #4ada71 !default;\n$warning: #ffce31 !default;\n$danger: #fc9aa2 !default;\n$light: #2f2f2f !default;\n$medium: #b4bcc6 !default;\n$dark: #f6f8fc !default;\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) !default;\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-theme() {\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 --ion-placeholder-opacity: 0.8;\n }\n}\n\n@mixin high-contrast-dark-ios-theme() {\n & {\n $background-color: #000000;\n\n --ion-background-color: #{$background-color};\n --ion-background-color-rgb: #{color-to-rgb-list($background-color)};\n\n --ion-text-color: #{$text-color};\n --ion-text-color-rgb: #{color-to-rgb-list($text-color)};\n\n --ion-item-background: #000000;\n --ion-card-background: #1c1c1d;\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\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\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-theme() {\n & {\n $background-color: #121212;\n\n --ion-background-color: #{$background-color};\n --ion-background-color-rgb: #{color-to-rgb-list($background-color)};\n\n --ion-text-color: #{$text-color};\n --ion-text-color-rgb: #{color-to-rgb-list($text-color)};\n\n --ion-border-color: #222222;\n\n --ion-item-background: #1e1e1e;\n --ion-toolbar-background: #1f1f1f;\n --ion-tab-bar-background: #1f1f1f;\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\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\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","@import \"./high-contrast-dark\";\n\n:root {\n @include high-contrast-dark-base-theme();\n}\n\n.ios body {\n @include high-contrast-dark-ios-theme();\n}\n\n.md body {\n @include high-contrast-dark-md-theme();\n}\n"]}
|
|
@@ -1,180 +0,0 @@
|
|
|
1
|
-
.ion-theme-high-contrast-dark {
|
|
2
|
-
--ion-color-primary: #7cabff;
|
|
3
|
-
--ion-color-primary-rgb: 124, 171, 255;
|
|
4
|
-
--ion-color-primary-contrast: #000;
|
|
5
|
-
--ion-color-primary-contrast-rgb: 0, 0, 0;
|
|
6
|
-
--ion-color-primary-shade: #6d96e0;
|
|
7
|
-
--ion-color-primary-tint: #89b3ff;
|
|
8
|
-
--ion-color-secondary: #62bdff;
|
|
9
|
-
--ion-color-secondary-rgb: 98, 189, 255;
|
|
10
|
-
--ion-color-secondary-contrast: #000;
|
|
11
|
-
--ion-color-secondary-contrast-rgb: 0, 0, 0;
|
|
12
|
-
--ion-color-secondary-shade: #56a6e0;
|
|
13
|
-
--ion-color-secondary-tint: #72c4ff;
|
|
14
|
-
--ion-color-tertiary: #b6b9f9;
|
|
15
|
-
--ion-color-tertiary-rgb: 182, 185, 249;
|
|
16
|
-
--ion-color-tertiary-contrast: #000;
|
|
17
|
-
--ion-color-tertiary-contrast-rgb: 0, 0, 0;
|
|
18
|
-
--ion-color-tertiary-shade: #a0a3db;
|
|
19
|
-
--ion-color-tertiary-tint: #bdc0fa;
|
|
20
|
-
--ion-color-success: #4ada71;
|
|
21
|
-
--ion-color-success-rgb: 74, 218, 113;
|
|
22
|
-
--ion-color-success-contrast: #000;
|
|
23
|
-
--ion-color-success-contrast-rgb: 0, 0, 0;
|
|
24
|
-
--ion-color-success-shade: #41c063;
|
|
25
|
-
--ion-color-success-tint: #5cde7f;
|
|
26
|
-
--ion-color-warning: #ffce31;
|
|
27
|
-
--ion-color-warning-rgb: 255, 206, 49;
|
|
28
|
-
--ion-color-warning-contrast: #000;
|
|
29
|
-
--ion-color-warning-contrast-rgb: 0, 0, 0;
|
|
30
|
-
--ion-color-warning-shade: #e0b52b;
|
|
31
|
-
--ion-color-warning-tint: #ffd346;
|
|
32
|
-
--ion-color-danger: #fc9aa2;
|
|
33
|
-
--ion-color-danger-rgb: 252, 154, 162;
|
|
34
|
-
--ion-color-danger-contrast: #000;
|
|
35
|
-
--ion-color-danger-contrast-rgb: 0, 0, 0;
|
|
36
|
-
--ion-color-danger-shade: #de888f;
|
|
37
|
-
--ion-color-danger-tint: #fca4ab;
|
|
38
|
-
--ion-color-light: #2f2f2f;
|
|
39
|
-
--ion-color-light-rgb: 47, 47, 47;
|
|
40
|
-
--ion-color-light-contrast: #fff;
|
|
41
|
-
--ion-color-light-contrast-rgb: 255, 255, 255;
|
|
42
|
-
--ion-color-light-shade: #292929;
|
|
43
|
-
--ion-color-light-tint: #444444;
|
|
44
|
-
--ion-color-medium: #b4bcc6;
|
|
45
|
-
--ion-color-medium-rgb: 180, 188, 198;
|
|
46
|
-
--ion-color-medium-contrast: #000;
|
|
47
|
-
--ion-color-medium-contrast-rgb: 0, 0, 0;
|
|
48
|
-
--ion-color-medium-shade: #9ea5ae;
|
|
49
|
-
--ion-color-medium-tint: #bcc3cc;
|
|
50
|
-
--ion-color-dark: #f6f8fc;
|
|
51
|
-
--ion-color-dark-rgb: 246, 248, 252;
|
|
52
|
-
--ion-color-dark-contrast: #000;
|
|
53
|
-
--ion-color-dark-contrast-rgb: 0, 0, 0;
|
|
54
|
-
--ion-color-dark-shade: #d8dade;
|
|
55
|
-
--ion-color-dark-tint: #f7f9fc;
|
|
56
|
-
--ion-placeholder-opacity: 0.8;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.ion-theme-high-contrast-dark.ios {
|
|
60
|
-
--ion-background-color: #000000;
|
|
61
|
-
--ion-background-color-rgb: 0, 0, 0;
|
|
62
|
-
--ion-text-color: #ffffff;
|
|
63
|
-
--ion-text-color-rgb: 255, 255, 255;
|
|
64
|
-
--ion-item-background: #000000;
|
|
65
|
-
--ion-card-background: #1c1c1d;
|
|
66
|
-
--ion-item-border-color: var(--ion-background-color-step-400);
|
|
67
|
-
--ion-text-color-step-50: #f9f9f9;
|
|
68
|
-
--ion-text-color-step-100: #f3f3f3;
|
|
69
|
-
--ion-text-color-step-150: #ededed;
|
|
70
|
-
--ion-text-color-step-200: #e7e7e7;
|
|
71
|
-
--ion-text-color-step-250: #e1e1e1;
|
|
72
|
-
--ion-text-color-step-300: #dbdbdb;
|
|
73
|
-
--ion-text-color-step-350: #d5d5d5;
|
|
74
|
-
--ion-text-color-step-400: #cfcfcf;
|
|
75
|
-
--ion-text-color-step-450: #c9c9c9;
|
|
76
|
-
--ion-text-color-step-500: #c4c4c4;
|
|
77
|
-
--ion-text-color-step-550: #bebebe;
|
|
78
|
-
--ion-text-color-step-600: #b8b8b8;
|
|
79
|
-
--ion-text-color-step-650: #b2b2b2;
|
|
80
|
-
--ion-text-color-step-700: #acacac;
|
|
81
|
-
--ion-text-color-step-750: #a6a6a6;
|
|
82
|
-
--ion-text-color-step-800: #a0a0a0;
|
|
83
|
-
--ion-text-color-step-850: #9a9a9a;
|
|
84
|
-
--ion-text-color-step-900: #949494;
|
|
85
|
-
--ion-text-color-step-950: #8e8e8e;
|
|
86
|
-
--ion-background-color-step-50: #0d0d0d;
|
|
87
|
-
--ion-background-color-step-100: #1a1a1a;
|
|
88
|
-
--ion-background-color-step-150: #262626;
|
|
89
|
-
--ion-background-color-step-200: #333333;
|
|
90
|
-
--ion-background-color-step-250: #404040;
|
|
91
|
-
--ion-background-color-step-300: #4d4d4d;
|
|
92
|
-
--ion-background-color-step-350: #595959;
|
|
93
|
-
--ion-background-color-step-400: #666666;
|
|
94
|
-
--ion-background-color-step-450: #737373;
|
|
95
|
-
--ion-background-color-step-500: gray;
|
|
96
|
-
--ion-background-color-step-550: #8c8c8c;
|
|
97
|
-
--ion-background-color-step-600: #999999;
|
|
98
|
-
--ion-background-color-step-650: #a6a6a6;
|
|
99
|
-
--ion-background-color-step-700: #b3b3b3;
|
|
100
|
-
--ion-background-color-step-750: #bfbfbf;
|
|
101
|
-
--ion-background-color-step-800: #cccccc;
|
|
102
|
-
--ion-background-color-step-850: #d9d9d9;
|
|
103
|
-
--ion-background-color-step-900: #e6e6e6;
|
|
104
|
-
--ion-background-color-step-950: #f2f2f2;
|
|
105
|
-
}
|
|
106
|
-
.ion-theme-high-contrast-dark.ios ion-modal {
|
|
107
|
-
--ion-background-color: var(--ion-background-color-step-100);
|
|
108
|
-
--ion-toolbar-background: var(--ion-background-color-step-150);
|
|
109
|
-
--ion-toolbar-border-color: var(--ion-background-color-step-250);
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
.ion-theme-high-contrast-dark.md {
|
|
113
|
-
/* stylelint-disable-next-line order/order */
|
|
114
|
-
}
|
|
115
|
-
.ion-theme-high-contrast-dark.md {
|
|
116
|
-
--ion-background-color: #121212;
|
|
117
|
-
--ion-background-color-rgb: 18, 18, 18;
|
|
118
|
-
--ion-text-color: #ffffff;
|
|
119
|
-
--ion-text-color-rgb: 255, 255, 255;
|
|
120
|
-
--ion-border-color: #222222;
|
|
121
|
-
--ion-item-background: #1e1e1e;
|
|
122
|
-
--ion-toolbar-background: #1f1f1f;
|
|
123
|
-
--ion-tab-bar-background: #1f1f1f;
|
|
124
|
-
--ion-card-background: #1e1e1e;
|
|
125
|
-
--ion-item-border-color: var(--ion-background-color-step-400);
|
|
126
|
-
--ion-text-color-step-50: #f9f9f9;
|
|
127
|
-
--ion-text-color-step-100: #f3f3f3;
|
|
128
|
-
--ion-text-color-step-150: #ededed;
|
|
129
|
-
--ion-text-color-step-200: #e7e7e7;
|
|
130
|
-
--ion-text-color-step-250: #e1e1e1;
|
|
131
|
-
--ion-text-color-step-300: #dbdbdb;
|
|
132
|
-
--ion-text-color-step-350: #d5d5d5;
|
|
133
|
-
--ion-text-color-step-400: #cfcfcf;
|
|
134
|
-
--ion-text-color-step-450: #c9c9c9;
|
|
135
|
-
--ion-text-color-step-500: #c4c4c4;
|
|
136
|
-
--ion-text-color-step-550: #bebebe;
|
|
137
|
-
--ion-text-color-step-600: #b8b8b8;
|
|
138
|
-
--ion-text-color-step-650: #b2b2b2;
|
|
139
|
-
--ion-text-color-step-700: #acacac;
|
|
140
|
-
--ion-text-color-step-750: #a6a6a6;
|
|
141
|
-
--ion-text-color-step-800: #a0a0a0;
|
|
142
|
-
--ion-text-color-step-850: #9a9a9a;
|
|
143
|
-
--ion-text-color-step-900: #949494;
|
|
144
|
-
--ion-text-color-step-950: #8e8e8e;
|
|
145
|
-
--ion-background-color-step-50: #1e1e1e;
|
|
146
|
-
--ion-background-color-step-100: #2a2a2a;
|
|
147
|
-
--ion-background-color-step-150: #363636;
|
|
148
|
-
--ion-background-color-step-200: #414141;
|
|
149
|
-
--ion-background-color-step-250: #4d4d4d;
|
|
150
|
-
--ion-background-color-step-300: #595959;
|
|
151
|
-
--ion-background-color-step-350: #656565;
|
|
152
|
-
--ion-background-color-step-400: #717171;
|
|
153
|
-
--ion-background-color-step-450: #7d7d7d;
|
|
154
|
-
--ion-background-color-step-500: #898989;
|
|
155
|
-
--ion-background-color-step-550: #949494;
|
|
156
|
-
--ion-background-color-step-600: #a0a0a0;
|
|
157
|
-
--ion-background-color-step-650: #acacac;
|
|
158
|
-
--ion-background-color-step-700: #b8b8b8;
|
|
159
|
-
--ion-background-color-step-750: #c4c4c4;
|
|
160
|
-
--ion-background-color-step-800: #d0d0d0;
|
|
161
|
-
--ion-background-color-step-850: #dbdbdb;
|
|
162
|
-
--ion-background-color-step-900: #e7e7e7;
|
|
163
|
-
--ion-background-color-step-950: #f3f3f3;
|
|
164
|
-
}
|
|
165
|
-
.ion-theme-high-contrast-dark.md ion-toast {
|
|
166
|
-
--color: var(--ion-background-color);
|
|
167
|
-
}
|
|
168
|
-
.ion-theme-high-contrast-dark.md ion-toast::part(button) {
|
|
169
|
-
color: var(--color);
|
|
170
|
-
}
|
|
171
|
-
@supports (color: color-mix(in lch, plum, pink)) {
|
|
172
|
-
.ion-theme-high-contrast-dark.md ion-toast::part(button) {
|
|
173
|
-
color: color-mix(in srgb, var(--color) 73%, var(--button-color));
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
.ion-theme-high-contrast-dark.md ion-toast::part(button cancel) {
|
|
177
|
-
color: var(--color);
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
/*# sourceMappingURL=high-contrast-dark.class.css.map */
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../src/css/themes/high-contrast-dark.scss","../../src/css/themes/high-contrast-dark.class.scss"],"names":[],"mappings":"AAgGE;EAEI;EACA;EACA;EACA;EACA;EACA;EALA;EACA;EACA;EACA;EACA;EACA;EALA;EACA;EACA;EACA;EACA;EACA;EALA;EACA;EACA;EACA;EACA;EACA;EALA;EACA;EACA;EACA;EACA;EACA;EALA;EACA;EACA;EACA;EACA;EACA;EALA;EACA;EACA;EACA;EACA;EACA;EALA;EACA;EACA;EACA;EACA;EACA;EALA;EACA;EACA;EACA;EACA;EACA;EAGF;;;AAKF;EAGE;EACA;EAEA;EACA;EAEA;EACA;EAIA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAMF;EACE;EACA;EACA;;;ACpKJ;ADkPE;;AAzEA;EAGE;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAIA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAMF;EACE;;AAGF;EAEE;;AAIF;EACE;IACE;;;AAIJ;EACE","file":"high-contrast-dark.class.css","sourcesContent":["@use \"sass:map\";\n@import \"../../themes/ionic.functions.color\";\n\n$primary: #7cabff !default;\n$secondary: #62bdff !default;\n$tertiary: #b6b9f9 !default;\n$success: #4ada71 !default;\n$warning: #ffce31 !default;\n$danger: #fc9aa2 !default;\n$light: #2f2f2f !default;\n$medium: #b4bcc6 !default;\n$dark: #f6f8fc !default;\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) !default;\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-theme() {\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 --ion-placeholder-opacity: 0.8;\n }\n}\n\n@mixin high-contrast-dark-ios-theme() {\n & {\n $background-color: #000000;\n\n --ion-background-color: #{$background-color};\n --ion-background-color-rgb: #{color-to-rgb-list($background-color)};\n\n --ion-text-color: #{$text-color};\n --ion-text-color-rgb: #{color-to-rgb-list($text-color)};\n\n --ion-item-background: #000000;\n --ion-card-background: #1c1c1d;\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\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\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-theme() {\n & {\n $background-color: #121212;\n\n --ion-background-color: #{$background-color};\n --ion-background-color-rgb: #{color-to-rgb-list($background-color)};\n\n --ion-text-color: #{$text-color};\n --ion-text-color-rgb: #{color-to-rgb-list($text-color)};\n\n --ion-border-color: #222222;\n\n --ion-item-background: #1e1e1e;\n --ion-toolbar-background: #1f1f1f;\n --ion-tab-bar-background: #1f1f1f;\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\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\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","@import \"./high-contrast-dark\";\n\n.ion-theme-high-contrast-dark {\n @include high-contrast-dark-base-theme();\n}\n\n.ion-theme-high-contrast-dark.ios {\n @include high-contrast-dark-ios-theme();\n}\n\n.ion-theme-high-contrast-dark.md {\n @include high-contrast-dark-md-theme();\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"high-contrast-dark.css","sourcesContent":[]}
|
|
@@ -1,182 +0,0 @@
|
|
|
1
|
-
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
|
|
2
|
-
:root {
|
|
3
|
-
--ion-color-primary: #7cabff;
|
|
4
|
-
--ion-color-primary-rgb: 124, 171, 255;
|
|
5
|
-
--ion-color-primary-contrast: #000;
|
|
6
|
-
--ion-color-primary-contrast-rgb: 0, 0, 0;
|
|
7
|
-
--ion-color-primary-shade: #6d96e0;
|
|
8
|
-
--ion-color-primary-tint: #89b3ff;
|
|
9
|
-
--ion-color-secondary: #62bdff;
|
|
10
|
-
--ion-color-secondary-rgb: 98, 189, 255;
|
|
11
|
-
--ion-color-secondary-contrast: #000;
|
|
12
|
-
--ion-color-secondary-contrast-rgb: 0, 0, 0;
|
|
13
|
-
--ion-color-secondary-shade: #56a6e0;
|
|
14
|
-
--ion-color-secondary-tint: #72c4ff;
|
|
15
|
-
--ion-color-tertiary: #b6b9f9;
|
|
16
|
-
--ion-color-tertiary-rgb: 182, 185, 249;
|
|
17
|
-
--ion-color-tertiary-contrast: #000;
|
|
18
|
-
--ion-color-tertiary-contrast-rgb: 0, 0, 0;
|
|
19
|
-
--ion-color-tertiary-shade: #a0a3db;
|
|
20
|
-
--ion-color-tertiary-tint: #bdc0fa;
|
|
21
|
-
--ion-color-success: #4ada71;
|
|
22
|
-
--ion-color-success-rgb: 74, 218, 113;
|
|
23
|
-
--ion-color-success-contrast: #000;
|
|
24
|
-
--ion-color-success-contrast-rgb: 0, 0, 0;
|
|
25
|
-
--ion-color-success-shade: #41c063;
|
|
26
|
-
--ion-color-success-tint: #5cde7f;
|
|
27
|
-
--ion-color-warning: #ffce31;
|
|
28
|
-
--ion-color-warning-rgb: 255, 206, 49;
|
|
29
|
-
--ion-color-warning-contrast: #000;
|
|
30
|
-
--ion-color-warning-contrast-rgb: 0, 0, 0;
|
|
31
|
-
--ion-color-warning-shade: #e0b52b;
|
|
32
|
-
--ion-color-warning-tint: #ffd346;
|
|
33
|
-
--ion-color-danger: #fc9aa2;
|
|
34
|
-
--ion-color-danger-rgb: 252, 154, 162;
|
|
35
|
-
--ion-color-danger-contrast: #000;
|
|
36
|
-
--ion-color-danger-contrast-rgb: 0, 0, 0;
|
|
37
|
-
--ion-color-danger-shade: #de888f;
|
|
38
|
-
--ion-color-danger-tint: #fca4ab;
|
|
39
|
-
--ion-color-light: #2f2f2f;
|
|
40
|
-
--ion-color-light-rgb: 47, 47, 47;
|
|
41
|
-
--ion-color-light-contrast: #fff;
|
|
42
|
-
--ion-color-light-contrast-rgb: 255, 255, 255;
|
|
43
|
-
--ion-color-light-shade: #292929;
|
|
44
|
-
--ion-color-light-tint: #444444;
|
|
45
|
-
--ion-color-medium: #b4bcc6;
|
|
46
|
-
--ion-color-medium-rgb: 180, 188, 198;
|
|
47
|
-
--ion-color-medium-contrast: #000;
|
|
48
|
-
--ion-color-medium-contrast-rgb: 0, 0, 0;
|
|
49
|
-
--ion-color-medium-shade: #9ea5ae;
|
|
50
|
-
--ion-color-medium-tint: #bcc3cc;
|
|
51
|
-
--ion-color-dark: #f6f8fc;
|
|
52
|
-
--ion-color-dark-rgb: 246, 248, 252;
|
|
53
|
-
--ion-color-dark-contrast: #000;
|
|
54
|
-
--ion-color-dark-contrast-rgb: 0, 0, 0;
|
|
55
|
-
--ion-color-dark-shade: #d8dade;
|
|
56
|
-
--ion-color-dark-tint: #f7f9fc;
|
|
57
|
-
--ion-placeholder-opacity: 0.8;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.ios body {
|
|
61
|
-
--ion-background-color: #000000;
|
|
62
|
-
--ion-background-color-rgb: 0, 0, 0;
|
|
63
|
-
--ion-text-color: #ffffff;
|
|
64
|
-
--ion-text-color-rgb: 255, 255, 255;
|
|
65
|
-
--ion-item-background: #000000;
|
|
66
|
-
--ion-card-background: #1c1c1d;
|
|
67
|
-
--ion-item-border-color: var(--ion-background-color-step-400);
|
|
68
|
-
--ion-text-color-step-50: #f9f9f9;
|
|
69
|
-
--ion-text-color-step-100: #f3f3f3;
|
|
70
|
-
--ion-text-color-step-150: #ededed;
|
|
71
|
-
--ion-text-color-step-200: #e7e7e7;
|
|
72
|
-
--ion-text-color-step-250: #e1e1e1;
|
|
73
|
-
--ion-text-color-step-300: #dbdbdb;
|
|
74
|
-
--ion-text-color-step-350: #d5d5d5;
|
|
75
|
-
--ion-text-color-step-400: #cfcfcf;
|
|
76
|
-
--ion-text-color-step-450: #c9c9c9;
|
|
77
|
-
--ion-text-color-step-500: #c4c4c4;
|
|
78
|
-
--ion-text-color-step-550: #bebebe;
|
|
79
|
-
--ion-text-color-step-600: #b8b8b8;
|
|
80
|
-
--ion-text-color-step-650: #b2b2b2;
|
|
81
|
-
--ion-text-color-step-700: #acacac;
|
|
82
|
-
--ion-text-color-step-750: #a6a6a6;
|
|
83
|
-
--ion-text-color-step-800: #a0a0a0;
|
|
84
|
-
--ion-text-color-step-850: #9a9a9a;
|
|
85
|
-
--ion-text-color-step-900: #949494;
|
|
86
|
-
--ion-text-color-step-950: #8e8e8e;
|
|
87
|
-
--ion-background-color-step-50: #0d0d0d;
|
|
88
|
-
--ion-background-color-step-100: #1a1a1a;
|
|
89
|
-
--ion-background-color-step-150: #262626;
|
|
90
|
-
--ion-background-color-step-200: #333333;
|
|
91
|
-
--ion-background-color-step-250: #404040;
|
|
92
|
-
--ion-background-color-step-300: #4d4d4d;
|
|
93
|
-
--ion-background-color-step-350: #595959;
|
|
94
|
-
--ion-background-color-step-400: #666666;
|
|
95
|
-
--ion-background-color-step-450: #737373;
|
|
96
|
-
--ion-background-color-step-500: gray;
|
|
97
|
-
--ion-background-color-step-550: #8c8c8c;
|
|
98
|
-
--ion-background-color-step-600: #999999;
|
|
99
|
-
--ion-background-color-step-650: #a6a6a6;
|
|
100
|
-
--ion-background-color-step-700: #b3b3b3;
|
|
101
|
-
--ion-background-color-step-750: #bfbfbf;
|
|
102
|
-
--ion-background-color-step-800: #cccccc;
|
|
103
|
-
--ion-background-color-step-850: #d9d9d9;
|
|
104
|
-
--ion-background-color-step-900: #e6e6e6;
|
|
105
|
-
--ion-background-color-step-950: #f2f2f2;
|
|
106
|
-
}
|
|
107
|
-
.ios body ion-modal {
|
|
108
|
-
--ion-background-color: var(--ion-background-color-step-100);
|
|
109
|
-
--ion-toolbar-background: var(--ion-background-color-step-150);
|
|
110
|
-
--ion-toolbar-border-color: var(--ion-background-color-step-250);
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
.md body {
|
|
114
|
-
/* stylelint-disable-next-line order/order */
|
|
115
|
-
}
|
|
116
|
-
.md body {
|
|
117
|
-
--ion-background-color: #121212;
|
|
118
|
-
--ion-background-color-rgb: 18, 18, 18;
|
|
119
|
-
--ion-text-color: #ffffff;
|
|
120
|
-
--ion-text-color-rgb: 255, 255, 255;
|
|
121
|
-
--ion-border-color: #222222;
|
|
122
|
-
--ion-item-background: #1e1e1e;
|
|
123
|
-
--ion-toolbar-background: #1f1f1f;
|
|
124
|
-
--ion-tab-bar-background: #1f1f1f;
|
|
125
|
-
--ion-card-background: #1e1e1e;
|
|
126
|
-
--ion-item-border-color: var(--ion-background-color-step-400);
|
|
127
|
-
--ion-text-color-step-50: #f9f9f9;
|
|
128
|
-
--ion-text-color-step-100: #f3f3f3;
|
|
129
|
-
--ion-text-color-step-150: #ededed;
|
|
130
|
-
--ion-text-color-step-200: #e7e7e7;
|
|
131
|
-
--ion-text-color-step-250: #e1e1e1;
|
|
132
|
-
--ion-text-color-step-300: #dbdbdb;
|
|
133
|
-
--ion-text-color-step-350: #d5d5d5;
|
|
134
|
-
--ion-text-color-step-400: #cfcfcf;
|
|
135
|
-
--ion-text-color-step-450: #c9c9c9;
|
|
136
|
-
--ion-text-color-step-500: #c4c4c4;
|
|
137
|
-
--ion-text-color-step-550: #bebebe;
|
|
138
|
-
--ion-text-color-step-600: #b8b8b8;
|
|
139
|
-
--ion-text-color-step-650: #b2b2b2;
|
|
140
|
-
--ion-text-color-step-700: #acacac;
|
|
141
|
-
--ion-text-color-step-750: #a6a6a6;
|
|
142
|
-
--ion-text-color-step-800: #a0a0a0;
|
|
143
|
-
--ion-text-color-step-850: #9a9a9a;
|
|
144
|
-
--ion-text-color-step-900: #949494;
|
|
145
|
-
--ion-text-color-step-950: #8e8e8e;
|
|
146
|
-
--ion-background-color-step-50: #1e1e1e;
|
|
147
|
-
--ion-background-color-step-100: #2a2a2a;
|
|
148
|
-
--ion-background-color-step-150: #363636;
|
|
149
|
-
--ion-background-color-step-200: #414141;
|
|
150
|
-
--ion-background-color-step-250: #4d4d4d;
|
|
151
|
-
--ion-background-color-step-300: #595959;
|
|
152
|
-
--ion-background-color-step-350: #656565;
|
|
153
|
-
--ion-background-color-step-400: #717171;
|
|
154
|
-
--ion-background-color-step-450: #7d7d7d;
|
|
155
|
-
--ion-background-color-step-500: #898989;
|
|
156
|
-
--ion-background-color-step-550: #949494;
|
|
157
|
-
--ion-background-color-step-600: #a0a0a0;
|
|
158
|
-
--ion-background-color-step-650: #acacac;
|
|
159
|
-
--ion-background-color-step-700: #b8b8b8;
|
|
160
|
-
--ion-background-color-step-750: #c4c4c4;
|
|
161
|
-
--ion-background-color-step-800: #d0d0d0;
|
|
162
|
-
--ion-background-color-step-850: #dbdbdb;
|
|
163
|
-
--ion-background-color-step-900: #e7e7e7;
|
|
164
|
-
--ion-background-color-step-950: #f3f3f3;
|
|
165
|
-
}
|
|
166
|
-
.md body ion-toast {
|
|
167
|
-
--color: var(--ion-background-color);
|
|
168
|
-
}
|
|
169
|
-
.md body ion-toast::part(button) {
|
|
170
|
-
color: var(--color);
|
|
171
|
-
}
|
|
172
|
-
@supports (color: color-mix(in lch, plum, pink)) {
|
|
173
|
-
.md body ion-toast::part(button) {
|
|
174
|
-
color: color-mix(in srgb, var(--color) 73%, var(--button-color));
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
.md body ion-toast::part(button cancel) {
|
|
178
|
-
color: var(--color);
|
|
179
|
-
}
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
/*# sourceMappingURL=high-contrast-dark.system.css.map */
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../src/css/themes/high-contrast-dark.system.scss","../../src/css/themes/high-contrast-dark.scss"],"names":[],"mappings":"AAEA;EC8FE;IAEI;IACA;IACA;IACA;IACA;IACA;IALA;IACA;IACA;IACA;IACA;IACA;IALA;IACA;IACA;IACA;IACA;IACA;IALA;IACA;IACA;IACA;IACA;IACA;IALA;IACA;IACA;IACA;IACA;IACA;IALA;IACA;IACA;IACA;IACA;IACA;IALA;IACA;IACA;IACA;IACA;IACA;IALA;IACA;IACA;IACA;IACA;IACA;IALA;IACA;IACA;IACA;IACA;IACA;IAGF;;;EAKF;IAGE;IACA;IAEA;IACA;IAEA;IACA;IAIA;IAEA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAMF;IACE;IACA;IACA;;;EDnKF;ACiPA;;EAzEA;IAGE;IACA;IAEA;IACA;IAEA;IAEA;IACA;IACA;IACA;IAIA;IAEA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAMF;IACE;;EAGF;IAEE;;EAIF;IACE;MACE;;;EAIJ;IACE","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-theme();\n }\n\n .ios body {\n @include high-contrast-dark-ios-theme();\n }\n\n .md body {\n @include high-contrast-dark-md-theme();\n }\n}\n","@use \"sass:map\";\n@import \"../../themes/ionic.functions.color\";\n\n$primary: #7cabff !default;\n$secondary: #62bdff !default;\n$tertiary: #b6b9f9 !default;\n$success: #4ada71 !default;\n$warning: #ffce31 !default;\n$danger: #fc9aa2 !default;\n$light: #2f2f2f !default;\n$medium: #b4bcc6 !default;\n$dark: #f6f8fc !default;\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) !default;\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-theme() {\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 --ion-placeholder-opacity: 0.8;\n }\n}\n\n@mixin high-contrast-dark-ios-theme() {\n & {\n $background-color: #000000;\n\n --ion-background-color: #{$background-color};\n --ion-background-color-rgb: #{color-to-rgb-list($background-color)};\n\n --ion-text-color: #{$text-color};\n --ion-text-color-rgb: #{color-to-rgb-list($text-color)};\n\n --ion-item-background: #000000;\n --ion-card-background: #1c1c1d;\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\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\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-theme() {\n & {\n $background-color: #121212;\n\n --ion-background-color: #{$background-color};\n --ion-background-color-rgb: #{color-to-rgb-list($background-color)};\n\n --ion-text-color: #{$text-color};\n --ion-text-color-rgb: #{color-to-rgb-list($text-color)};\n\n --ion-border-color: #222222;\n\n --ion-item-background: #1e1e1e;\n --ion-toolbar-background: #1f1f1f;\n --ion-tab-bar-background: #1f1f1f;\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\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\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"]}
|