diff --git a/demo/e2e/screenshot.spec.ts-snapshots/accordion-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/accordion-dark.png index cb7b5a6..765c67a 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/accordion-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/accordion-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/accordion.png b/demo/e2e/screenshot.spec.ts-snapshots/accordion.png index bc42e41..0db338e 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/accordion.png and b/demo/e2e/screenshot.spec.ts-snapshots/accordion.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-all-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-all-dark.png index a3a0761..a30a326 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-all-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-all-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-all.png b/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-all.png index 3188565..bfa8f2c 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-all.png and b/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-all.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-button-only-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-button-only-dark.png index b701170..e370ed4 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-button-only-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-button-only-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-button-only.png b/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-button-only.png index 61b27fc..2d21c49 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-button-only.png and b/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-button-only.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-no-cancel-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-no-cancel-dark.png index 50c730d..e35cf0c 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-no-cancel-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-no-cancel-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-no-cancel.png b/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-no-cancel.png index 6f15605..d5a6a09 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-no-cancel.png and b/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-no-cancel.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/alert-all-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/alert-all-dark.png index 32eec03..d4d4af6 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/alert-all-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/alert-all-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/alert-all.png b/demo/e2e/screenshot.spec.ts-snapshots/alert-all.png index fb0f6bc..dfe518b 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/alert-all.png and b/demo/e2e/screenshot.spec.ts-snapshots/alert-all.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/alert-button-only-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/alert-button-only-dark.png index 07db377..b1d2121 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/alert-button-only-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/alert-button-only-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/alert-button-only.png b/demo/e2e/screenshot.spec.ts-snapshots/alert-button-only.png index 1a625fa..1343265 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/alert-button-only.png and b/demo/e2e/screenshot.spec.ts-snapshots/alert-button-only.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/alert-no-cancel-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/alert-no-cancel-dark.png index 0f4e076..ff3a171 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/alert-no-cancel-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/alert-no-cancel-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/alert-no-cancel.png b/demo/e2e/screenshot.spec.ts-snapshots/alert-no-cancel.png index b04f0cc..26dfe22 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/alert-no-cancel.png and b/demo/e2e/screenshot.spec.ts-snapshots/alert-no-cancel.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/alert-remove-app-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/alert-remove-app-dark.png index 6cf225e..be125bb 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/alert-remove-app-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/alert-remove-app-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/alert-remove-app.png b/demo/e2e/screenshot.spec.ts-snapshots/alert-remove-app.png index fd6ed2d..6b7d356 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/alert-remove-app.png and b/demo/e2e/screenshot.spec.ts-snapshots/alert-remove-app.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/breadcrumbs-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/breadcrumbs-dark.png index 845f8f7..21ef59c 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/breadcrumbs-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/breadcrumbs-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/breadcrumbs.png b/demo/e2e/screenshot.spec.ts-snapshots/breadcrumbs.png index 178a72c..299c5cd 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/breadcrumbs.png and b/demo/e2e/screenshot.spec.ts-snapshots/breadcrumbs.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/button-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/button-dark.png index 360aefc..ec38bfc 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/button-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/button-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/button.png b/demo/e2e/screenshot.spec.ts-snapshots/button.png index 68b0aef..994071a 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/button.png and b/demo/e2e/screenshot.spec.ts-snapshots/button.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/card-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/card-dark.png index 8afafab..25d2fa2 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/card-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/card-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/card.png b/demo/e2e/screenshot.spec.ts-snapshots/card.png index 2047488..784505d 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/card.png and b/demo/e2e/screenshot.spec.ts-snapshots/card.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/checkbox-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/checkbox-dark.png index e4c6a05..280c1d5 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/checkbox-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/checkbox-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/checkbox.png b/demo/e2e/screenshot.spec.ts-snapshots/checkbox.png index 19b51bb..bc31840 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/checkbox.png and b/demo/e2e/screenshot.spec.ts-snapshots/checkbox.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/chip-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/chip-dark.png index a9d7d64..843ed06 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/chip-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/chip-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/chip.png b/demo/e2e/screenshot.spec.ts-snapshots/chip.png index 79eb212..6d65ba7 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/chip.png and b/demo/e2e/screenshot.spec.ts-snapshots/chip.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/date-and-time-pickers-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/date-and-time-pickers-dark.png index ce08878..f5f17fa 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/date-and-time-pickers-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/date-and-time-pickers-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/date-and-time-pickers.png b/demo/e2e/screenshot.spec.ts-snapshots/date-and-time-pickers.png index 5bcf279..6481603 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/date-and-time-pickers.png and b/demo/e2e/screenshot.spec.ts-snapshots/date-and-time-pickers.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/floating-action-button-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/floating-action-button-dark.png index b3c897c..24442c7 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/floating-action-button-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/floating-action-button-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/floating-action-button-fixed-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/floating-action-button-fixed-dark.png index 7ab1e74..e63bab6 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/floating-action-button-fixed-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/floating-action-button-fixed-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/floating-action-button-fixed.png b/demo/e2e/screenshot.spec.ts-snapshots/floating-action-button-fixed.png index eb49da4..8ad4c6f 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/floating-action-button-fixed.png and b/demo/e2e/screenshot.spec.ts-snapshots/floating-action-button-fixed.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/floating-action-button.png b/demo/e2e/screenshot.spec.ts-snapshots/floating-action-button.png index c90ed75..6594a00 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/floating-action-button.png and b/demo/e2e/screenshot.spec.ts-snapshots/floating-action-button.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/inputs-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/inputs-dark.png index fec1049..cdaa083 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/inputs-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/inputs-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/inputs.png b/demo/e2e/screenshot.spec.ts-snapshots/inputs.png index 89f87f8..9086cd9 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/inputs.png and b/demo/e2e/screenshot.spec.ts-snapshots/inputs.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/item-list-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/item-list-dark.png index a36a906..d393d4b 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/item-list-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/item-list-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/item-list.png b/demo/e2e/screenshot.spec.ts-snapshots/item-list.png index dedb00c..0928e3c 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/item-list.png and b/demo/e2e/screenshot.spec.ts-snapshots/item-list.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/modal-card-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/modal-card-dark.png index b29e8b5..c7f052e 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/modal-card-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/modal-card-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/modal-card.png b/demo/e2e/screenshot.spec.ts-snapshots/modal-card.png index e3dbb42..1e5e2b4 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/modal-card.png and b/demo/e2e/screenshot.spec.ts-snapshots/modal-card.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/modal-normal-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/modal-normal-dark.png index c2aafcf..2edd10d 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/modal-normal-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/modal-normal-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/modal-normal.png b/demo/e2e/screenshot.spec.ts-snapshots/modal-normal.png index 31e58b9..04bf49c 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/modal-normal.png and b/demo/e2e/screenshot.spec.ts-snapshots/modal-normal.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/modal-sheet-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/modal-sheet-dark.png index 3a78471..65aeaa3 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/modal-sheet-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/modal-sheet-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/modal-sheet.png b/demo/e2e/screenshot.spec.ts-snapshots/modal-sheet.png index 5adc3b5..4d85836 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/modal-sheet.png and b/demo/e2e/screenshot.spec.ts-snapshots/modal-sheet.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/popover-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/popover-dark.png index 45e8c33..810c77a 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/popover-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/popover-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/popover.png b/demo/e2e/screenshot.spec.ts-snapshots/popover.png index a31d49a..a924585 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/popover.png and b/demo/e2e/screenshot.spec.ts-snapshots/popover.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/progress-indicators-icon-only-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/progress-indicators-icon-only-dark.png index 6bebdde..b424e83 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/progress-indicators-icon-only-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/progress-indicators-icon-only-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/progress-indicators-icon-only.png b/demo/e2e/screenshot.spec.ts-snapshots/progress-indicators-icon-only.png index 5935199..f267482 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/progress-indicators-icon-only.png and b/demo/e2e/screenshot.spec.ts-snapshots/progress-indicators-icon-only.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/progress-indicators-message-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/progress-indicators-message-dark.png index 3bb18d8..99540ad 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/progress-indicators-message-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/progress-indicators-message-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/progress-indicators-message.png b/demo/e2e/screenshot.spec.ts-snapshots/progress-indicators-message.png index 25adfe0..1f6d494 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/progress-indicators-message.png and b/demo/e2e/screenshot.spec.ts-snapshots/progress-indicators-message.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/radio-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/radio-dark.png index 09e1d99..5082698 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/radio-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/radio-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/radio.png b/demo/e2e/screenshot.spec.ts-snapshots/radio.png index fd2b89b..4c3d8b0 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/radio.png and b/demo/e2e/screenshot.spec.ts-snapshots/radio.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/range-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/range-dark.png index ebca699..20bf442 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/range-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/range-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/range.png b/demo/e2e/screenshot.spec.ts-snapshots/range.png index d12e317..f3990ae 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/range.png and b/demo/e2e/screenshot.spec.ts-snapshots/range.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/reorder-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/reorder-dark.png index 44877ae..b5f25cb 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/reorder-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/reorder-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/reorder.png b/demo/e2e/screenshot.spec.ts-snapshots/reorder.png index 0138c5a..2d38a15 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/reorder.png and b/demo/e2e/screenshot.spec.ts-snapshots/reorder.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/searchbar-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/searchbar-dark.png index 6aecedf..c8c83d6 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/searchbar-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/searchbar-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/searchbar.png b/demo/e2e/screenshot.spec.ts-snapshots/searchbar.png index 93b047e..eb5bd46 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/searchbar.png and b/demo/e2e/screenshot.spec.ts-snapshots/searchbar.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/segment-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/segment-dark.png index 7d9d1b4..a0dda69 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/segment-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/segment-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/segment.png b/demo/e2e/screenshot.spec.ts-snapshots/segment.png index b4378f5..40ede7b 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/segment.png and b/demo/e2e/screenshot.spec.ts-snapshots/segment.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/select-action-sheet-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/select-action-sheet-dark.png index 4d4246b..8da40dd 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/select-action-sheet-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/select-action-sheet-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/select-action-sheet.png b/demo/e2e/screenshot.spec.ts-snapshots/select-action-sheet.png index 1e4cb94..eb4da08 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/select-action-sheet.png and b/demo/e2e/screenshot.spec.ts-snapshots/select-action-sheet.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/select-alert-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/select-alert-dark.png index 95d77fc..3fb1e86 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/select-alert-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/select-alert-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/select-alert.png b/demo/e2e/screenshot.spec.ts-snapshots/select-alert.png index 9d10863..ee07e6c 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/select-alert.png and b/demo/e2e/screenshot.spec.ts-snapshots/select-alert.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/select-modal-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/select-modal-dark.png index ddfe659..0eb0906 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/select-modal-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/select-modal-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/select-modal.png b/demo/e2e/screenshot.spec.ts-snapshots/select-modal.png index f8ff5bf..e59aac2 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/select-modal.png and b/demo/e2e/screenshot.spec.ts-snapshots/select-modal.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/select-popover-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/select-popover-dark.png index a836d71..09e4fc9 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/select-popover-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/select-popover-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/select-popover.png b/demo/e2e/screenshot.spec.ts-snapshots/select-popover.png index 58f6d13..30f34c0 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/select-popover.png and b/demo/e2e/screenshot.spec.ts-snapshots/select-popover.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/tabs-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/tabs-dark.png index eac44f8..830586b 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/tabs-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/tabs-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/tabs.png b/demo/e2e/screenshot.spec.ts-snapshots/tabs.png index c4e9aeb..9833bfb 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/tabs.png and b/demo/e2e/screenshot.spec.ts-snapshots/tabs.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/toast-anchor-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/toast-anchor-dark.png index 45b7276..7dd5fd4 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/toast-anchor-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/toast-anchor-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/toast-anchor.png b/demo/e2e/screenshot.spec.ts-snapshots/toast-anchor.png index 626509b..5e197db 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/toast-anchor.png and b/demo/e2e/screenshot.spec.ts-snapshots/toast-anchor.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/toast-bottom-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/toast-bottom-dark.png index 3650462..8bfd6c3 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/toast-bottom-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/toast-bottom-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/toast-bottom.png b/demo/e2e/screenshot.spec.ts-snapshots/toast-bottom.png index 072a3f2..4088222 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/toast-bottom.png and b/demo/e2e/screenshot.spec.ts-snapshots/toast-bottom.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/toast-danger-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/toast-danger-dark.png index e6307a9..d8ff8d3 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/toast-danger-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/toast-danger-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/toast-danger.png b/demo/e2e/screenshot.spec.ts-snapshots/toast-danger.png index 26af070..3f1a9a2 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/toast-danger.png and b/demo/e2e/screenshot.spec.ts-snapshots/toast-danger.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/toast-middle-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/toast-middle-dark.png index 89732d1..0769cf5 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/toast-middle-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/toast-middle-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/toast-middle.png b/demo/e2e/screenshot.spec.ts-snapshots/toast-middle.png index abc0ab9..b736cc8 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/toast-middle.png and b/demo/e2e/screenshot.spec.ts-snapshots/toast-middle.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/toast-primary-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/toast-primary-dark.png index 812cab0..1bb22d6 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/toast-primary-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/toast-primary-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/toast-primary.png b/demo/e2e/screenshot.spec.ts-snapshots/toast-primary.png index b2499f5..b80b502 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/toast-primary.png and b/demo/e2e/screenshot.spec.ts-snapshots/toast-primary.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/toast-success-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/toast-success-dark.png index ebddd3a..11a3c1e 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/toast-success-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/toast-success-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/toast-success.png b/demo/e2e/screenshot.spec.ts-snapshots/toast-success.png index a2d5a67..40e6a14 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/toast-success.png and b/demo/e2e/screenshot.spec.ts-snapshots/toast-success.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/toast-top-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/toast-top-dark.png index afe4a50..af85b2f 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/toast-top-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/toast-top-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/toast-top.png b/demo/e2e/screenshot.spec.ts-snapshots/toast-top.png index 24d38de..2105647 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/toast-top.png and b/demo/e2e/screenshot.spec.ts-snapshots/toast-top.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/toast-warning-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/toast-warning-dark.png index f9c1bf5..c447c5e 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/toast-warning-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/toast-warning-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/toast-warning.png b/demo/e2e/screenshot.spec.ts-snapshots/toast-warning.png index 98ef943..177659d 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/toast-warning.png and b/demo/e2e/screenshot.spec.ts-snapshots/toast-warning.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/toggle-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/toggle-dark.png index 577e0b0..30f452d 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/toggle-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/toggle-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/toggle.png b/demo/e2e/screenshot.spec.ts-snapshots/toggle.png index 0a787cd..53be04f 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/toggle.png and b/demo/e2e/screenshot.spec.ts-snapshots/toggle.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/toolbar-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/toolbar-dark.png index 0bd8ab6..16444b9 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/toolbar-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/toolbar-dark.png differ diff --git a/demo/e2e/screenshot.spec.ts-snapshots/toolbar.png b/demo/e2e/screenshot.spec.ts-snapshots/toolbar.png index a254789..3bda74d 100644 Binary files a/demo/e2e/screenshot.spec.ts-snapshots/toolbar.png and b/demo/e2e/screenshot.spec.ts-snapshots/toolbar.png differ diff --git a/src/styles/components/ion-button.scss b/src/styles/components/ion-button.scss index 753e0c9..bf8857e 100644 --- a/src/styles/components/ion-button.scss +++ b/src/styles/components/ion-button.scss @@ -13,7 +13,7 @@ $scaleup-large: 1.12; $scaleup-large-icon-only: 1.22; @mixin theme-buttons { - @include api.glass-background; + @include api.glass-background($shadow-opacity: 0.08); border-radius: 25px; overflow: hidden; &:not(:has(.ion-activated)):hover { @@ -318,7 +318,8 @@ $scaleup-large-icon-only: 1.22; --background-activated: transparent; @if not $is-back-button { --box-shadow: - inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2), 0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82); + inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2), + 0 0.5px 1px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.08); } &:not(.button-has-icon-only):not(.back-button-has-icon-only) { @@ -328,7 +329,7 @@ $scaleup-large-icon-only: 1.22; } &::part(native) { - @include api.glass-background($include-background: false, $include-box-shadow: $is-back-button); + @include api.glass-background($include-background: false, $include-box-shadow: $is-back-button, $shadow-opacity: 0.08); } &:not(.button-disabled) { diff --git a/src/styles/components/ion-searchbar.scss b/src/styles/components/ion-searchbar.scss index f53c7a6..bc8a97d 100644 --- a/src/styles/components/ion-searchbar.scss +++ b/src/styles/components/ion-searchbar.scss @@ -17,6 +17,7 @@ ion-searchbar.ios:not(.ios26-disabled):not(.searchbar-classic) { ion-icon.searchbar-search-icon { inset-inline-start: 12px; + opacity: 1; } .searchbar-input-container { @@ -26,7 +27,7 @@ ion-searchbar.ios:not(.ios26-disabled):not(.searchbar-classic) { input.searchbar-input { min-height: 44px; @include api.glass-background; - border-radius: 20px; + border-radius: 22px; padding-inline-start: 2.4rem; } .searchbar-clear-button { diff --git a/src/styles/components/ion-toggle.scss b/src/styles/components/ion-toggle.scss index 6868450..1850890 100644 --- a/src/styles/components/ion-toggle.scss +++ b/src/styles/components/ion-toggle.scss @@ -21,6 +21,7 @@ ion-toggle.ios:not(.ios26-disabled) { --handle-height: 24px; --handle-max-width: none; --handle-max-height: none; + --handle-box-shadow: none; &.ion-color { --track-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.23); } diff --git a/src/styles/components/ion-toolbar.scss b/src/styles/components/ion-toolbar.scss index fe358c8..4b6f80e 100644 --- a/src/styles/components/ion-toolbar.scss +++ b/src/styles/components/ion-toolbar.scss @@ -25,6 +25,14 @@ ion-toolbar.ios:not(.toolbar-title-large):not(.ios26-disabled):not(:has(ion-segm --min-height: 68px; } +ion-header.ios:not(.ios26-disabled):not(.header-collapse-condense):not(:where(ion-modal *)) + > ion-toolbar.ios:not(.ios26-disabled):not(.toolbar-title-large):not(.toolbar-searchbar):not( + :has(ion-segment.segment-expand) + ):first-of-type { + padding-top: max(calc(var(--ion-safe-area-top) - 10px), 6px); + --min-height: 64px; +} + ion-toolbar.ios:not(.ios26-disabled).toolbar-searchbar { *[slot='start'], *[slot='end'] { diff --git a/src/styles/utils/api.scss b/src/styles/utils/api.scss index 71a3820..af762cd 100644 --- a/src/styles/utils/api.scss +++ b/src/styles/utils/api.scss @@ -1,3 +1,19 @@ +$_glass-surface: linear-gradient( + 180deg, + rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 4%, + rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.01) 8%, + rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 16%, + rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.027) 22%, + rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.026) 28%, + rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.018) 36%, + rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.011) 44%, + rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.009) 50%, + rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.008) 58%, + rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.008) 80%, + rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.006) 88%, + rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 94% +); + @mixin glass-background( $opacity: 0.72, $blur: 2px, @@ -6,22 +22,54 @@ $border-color-rgb: var(--ios26-glass-border-color-rgb), $include-background: true, $include-box-shadow: true, - $include-border: true + $include-border: true, + $shadow-opacity: 0.18 ) { + $surface: linear-gradient(transparent, transparent); + @if $include-background { + $surface: $_glass-surface; + } @if $include-background { - background: rgba($background-rgb, $opacity); + background: $_glass-surface, rgba($background-rgb, $opacity); } backdrop-filter: blur($blur) saturate($saturate); @if $include-box-shadow { box-shadow: - inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2), - 0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82); + inset 0 0 0 0.5px rgba($border-color-rgb, 0.6), + inset 0 0 1px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.18), + inset 0 1px 2px 0 rgba($border-color-rgb, 0.8), + inset 0 -1px 2px 0 rgba($border-color-rgb, 0.5), + 0 0.5px 1px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), $shadow-opacity); } @if $include-border { - border-top: 0.5px solid rgba($border-color-rgb, 1); - border-right: 0.5px solid rgba($border-color-rgb, 0.8); - border-bottom: 0.5px solid rgba($border-color-rgb, 1); - border-left: 0.5px solid rgba($border-color-rgb, 0.6); + border: 0.5px solid; + border-top-color: rgba($border-color-rgb, 1); + border-right-color: rgba($border-color-rgb, 0.8); + border-bottom-color: rgba($border-color-rgb, 1); + border-left-color: rgba($border-color-rgb, 0.6); + @supports (color: color-mix(in srgb, white, black)) { + border-top-color: color-mix(in srgb, rgb($border-color-rgb), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 12%); + border-right-color: color-mix(in srgb, rgb($border-color-rgb), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 32%); + border-bottom-color: color-mix(in srgb, rgb($border-color-rgb), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 16%); + border-left-color: color-mix(in srgb, rgb($border-color-rgb), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 28%); + } + @supports (background-clip: border-area) and (color: color-mix(in srgb, white, black)) { + border-color: transparent; + background-image: + linear-gradient( + 180deg, + color-mix(in srgb, rgb($border-color-rgb), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 12%) 0%, + color-mix(in srgb, rgb($border-color-rgb), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 18%) 7%, + color-mix(in srgb, rgb($border-color-rgb), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 29%) 25%, + color-mix(in srgb, rgb($border-color-rgb), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 36%) 50%, + color-mix(in srgb, rgb($border-color-rgb), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 28%) 75%, + color-mix(in srgb, rgb($border-color-rgb), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 18%) 93%, + color-mix(in srgb, rgb($border-color-rgb), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 16%) 100% + ), + $surface; + background-origin: border-box, padding-box; + background-clip: border-area, padding-box; + } } // Hardware acceleration optimization for glass effects @@ -33,8 +81,10 @@ @mixin glass-background-button-activated { box-shadow: - inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2), - 0 0 8px -4px rgba(var(--ios26-glass-box-shadow-color-rgb), 0.92); + inset 0 0 0 0.5px rgba(var(--ios26-glass-border-color-rgb), 0.95), + inset 0 1px 3px 0 rgba(var(--ios26-glass-border-color-rgb), 0.85), + inset 0 -1px 2px 0 rgba(var(--ios26-glass-border-color-rgb), 0.6), + 0 0.5px 1px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.12); } @mixin glass-background-button-activated-dark( @@ -55,6 +105,9 @@ border-right: 0.8px solid rgba(var(--ios26-button-color-selected-rgb), 0.4); border-bottom: 0.8px solid rgba(var(--ios26-button-color-selected-rgb), 0.8); border-left: 0.8px solid rgba(var(--ios26-button-color-selected-rgb), 0.6); + background-image: none; + background-clip: border-box; + background-origin: padding-box; // Hardware acceleration optimization for glass effects transform: translateZ(0); @@ -73,14 +126,14 @@ @mixin glass-background-overlay-button { transition: background 0.2s ease; - background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.065); + background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1); &.ion-activated { background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.022); } } @mixin glass-background-overlay-button-variable { - --button-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.065); + --button-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1); &.ion-activated { --button-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.022); } diff --git a/src/styles/utils/translucent.scss b/src/styles/utils/translucent.scss index 764347b..746ab1b 100644 --- a/src/styles/utils/translucent.scss +++ b/src/styles/utils/translucent.scss @@ -15,28 +15,44 @@ ion-footer.ios:not(.ios26-disabled).footer-translucent { --opacity: 0; } ion-title { - filter: blur(0); transform: translateY(0); } } } +ion-header.ios:not(.ios26-disabled).header-translucent:not(.header-collapse-condense) { + &:has(> ion-toolbar.ios:not(.ios26-disabled) > *)::before { + height: 100%; + background: rgba(var(--ion-color-base-rgb, var(--ios26-content-box-shadow-rgb)), calc(0.2 * var(--opacity-scale, 1))); + backdrop-filter: blur(8px); + } + + &:not(.ion-no-border) > ion-toolbar.ios:not(.ios26-disabled):has(> *):last-of-type { + --border-width: 0 0 0.5px; + --border-color: var(--ion-toolbar-border-color, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08)); + &::part(background) { + --opacity: 1; + } + } +} + ion-header.ios:not(.ios26-disabled).header-collapse-main ion-toolbar.in-toolbar ion-title { - transition: all 0.5s ease-in-out; + transition: + opacity 0.5s ease-in-out, + color 0.5s ease-in-out, + text-shadow 0.5s ease-in-out, + transform 0.5s ease-in-out; } -ion-header.ios:not(.ios26-disabled).header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title, -ion-header.ios:not(.ios26-disabled).header-collapse-condense-inactive:not(.header-collapse-condense) - ion-toolbar.in-toolbar - ion-buttons.buttons-collapse { - filter: blur(2px); +ion-header.ios:not(.ios26-disabled).header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title { + color: transparent; + text-shadow: 0 0 1px var(--ion-color-base, var(--ion-toolbar-color, var(--ion-text-color, #000))); transform: translateY(8px); } ion-header.ios:not(.ios26-disabled):not(.header-transitioning).header-translucent::before, ion-header.ios:not(.ios26-disabled):not(.header-transitioning).header-translucent::after, -ion-content.ios:not(.ios26-disabled).content-fullscreen::part(background)::before, -ion-content.ios:not(.ios26-disabled).content-fullscreen::part(background)::after { +ion-content.ios:not(.ios26-disabled).content-fullscreen::part(background)::before { content: ''; position: absolute; width: 100%; @@ -63,7 +79,7 @@ ion-header.ios:not(.ios26-disabled).header-translucent::after { } /** - * ここから下は、ion-content::before/afterが content:'' を持たない限り表示されない + * ここから下は、ion-content::beforeが content:'' を持たない限り表示されない */ .ion-page:has(> ion-header.header-translucent) > ion-content.content-fullscreen::part(background)::before { z-index: 2; @@ -71,24 +87,8 @@ ion-header.ios:not(.ios26-disabled).header-translucent::after { height: var(--offset-top, 0px); background: linear-gradient( in oklab, - rgba(var(--ios26-content-box-shadow-rgb), 0.5) 20%, + rgba(var(--ios26-content-box-shadow-rgb), 0.5) 0%, + rgba(var(--ios26-content-box-shadow-rgb), 0.2) 50%, rgba(var(--ios26-content-box-shadow-rgb), 0) 100% ); - box-shadow: inset 0 var(--offset-top, 0px) 16px -32px rgba(var(--ios26-content-box-shadow-rgb), 0.6); -} - -ion-content.content-fullscreen::part(background)::after { - z-index: 2; - bottom: 0; - height: calc(60px + var(--ios26-floating-safe-area-bottom)); - background: linear-gradient( - in oklab, - rgba(var(--ios26-content-box-shadow-rgb), 0) 0%, - rgba(var(--ios26-content-box-shadow-rgb), 0.8) 50%, - rgba(var(--ios26-content-box-shadow-rgb), 0.8) 100% - ); -} - -.ion-page:has(> ion-footer:not(.footer-translucent)) ion-content.content-fullscreen::part(background)::after { - content: none; }