diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 3683c77f0dd..e2b762b7d16 100644
Binary files a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 57360d4b3a9..b8319e18a58 100644
Binary files a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Safari-linux.png
index feff39b2c1a..efc3d5a5d4a 100644
Binary files a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 318f9b7673e..a54fa53c8f0 100644
Binary files a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png
index cec8179d745..b1d327bb722 100644
Binary files a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Safari-linux.png
index 8cff9ceb168..1643cc5ca8b 100644
Binary files a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 56b5c11197b..8d6f08bfd43 100644
Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 18c64d56fc9..295f31bd6ba 100644
Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-ionic-md-ltr-light-Mobile-Safari-linux.png
index 5d912e79e20..a817006588c 100644
Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 282b831a5f5..b56c851125f 100644
Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 1953a6888ca..0eb54c79ae6 100644
Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png
index 2b105a7a765..e15760f9a2e 100644
Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Chrome-linux.png
index a0d143bf408..30aa0b20f46 100644
Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 466738d20df..014ed19f5b3 100644
Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Safari-linux.png
index b2100d4a1d4..7c01646562a 100644
Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Chrome-linux.png
index 985801e309d..d3a0b09ab39 100644
Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Firefox-linux.png
index 1b16598a180..e22028a71f5 100644
Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Safari-linux.png
index 71793a26556..6bddcdbf7de 100644
Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Chrome-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Chrome-linux.png
index 473d0bbb9dc..d73eb5cb23a 100644
Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Firefox-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Firefox-linux.png
index f76ca283842..6dbd3867d93 100644
Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Safari-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Safari-linux.png
index df435b0ec42..6b2f4e86bf2 100644
Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Safari-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png
index a25619bd283..d813c814dee 100644
Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png
index ad2bb4538c7..e9c37351f35 100644
Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Safari-linux.png
index 6f3cdcfb28a..a17c483dfe7 100644
Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png
index b94af4150ce..c81ea35e2bb 100644
Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png
index ee44ddc9bb2..93482291c13 100644
Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Safari-linux.png
index 03395a46b63..b0d4f14fc53 100644
Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Chrome-linux.png
index 522236f535f..3589dfc1658 100644
Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Firefox-linux.png
index eea0311fd46..9764d1d0756 100644
Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Safari-linux.png
index 8c1211834e4..e3a67a83c3f 100644
Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png
index a1c1f73c12b..497c57c6eb4 100644
Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 0e9ae9f8a0c..50e9e53e690 100644
Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png
index 2801895a201..0bce7b9fa31 100644
Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Chrome-linux.png
index 57aac31475b..b691c103a0f 100644
Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Firefox-linux.png
index 98a04b419d2..955434ba52b 100644
Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Safari-linux.png
index fbd3d5b03cd..de3e1fea864 100644
Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Chrome-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Chrome-linux.png
index cd085361d08..3817fee6802 100644
Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Firefox-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Firefox-linux.png
index c53c7f0ce18..580431490ea 100644
Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Safari-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Safari-linux.png
index 91c2442090d..d3bdcce1274 100644
Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Safari-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 97eb83b6405..de85575f3fd 100644
Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
index f0b12752839..2d010ce55af 100644
Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
index 9ff385a74ad..3592c19097b 100644
Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 9d1027dc756..84c115c71c9 100644
Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 664f4b11bc7..fe5bb063431 100644
Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Safari-linux.png
index 164169e82b5..664f1b27b71 100644
Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Chrome-linux.png
index f0ee0e2996b..b1bebcec251 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 60d092a4cb5..f39439a3b0d 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Safari-linux.png
index 0723cc5f9d8..aab32c19fa0 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 8ac00c86659..cd7293f4a7d 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 10002d1f75d..4b1c1091808 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png
index 74edc89b589..9411d13c81b 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png
index f8a754b4b66..f437a5619cd 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 4fb90f509a7..52189bdd0eb 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png
index a674bd94fa5..15b17b28c3a 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 9ee778a3d74..5992decf30f 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 70250ac59e1..cf22e2f2436 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png
index 24c2236c0b2..e496c49b794 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png
index bcefa78888b..6b10c5832ee 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png
index a566ea394cc..e694601bc7b 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png
index ccd80589857..c79cab78c97 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png
index f31f2a61e68..f09e8be2dc6 100644
Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png
index f54ba03c74b..485d5ba508f 100644
Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png
index b4a02a3737a..38eedfd053b 100644
Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
index f31f2a61e68..f09e8be2dc6 100644
Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
index f54ba03c74b..485d5ba508f 100644
Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
index b4a02a3737a..38eedfd053b 100644
Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 2743c4c8ab9..61a497482e6 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png
index baf4e65c201..c5e57c4c284 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png
index d4308994e72..0b4247323b7 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 2b8b32ef24a..90a02527c4c 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 2c640777215..bea609b4a3c 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Safari-linux.png
index 582f2078fd6..d6e87c70396 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 89c6f48c776..69b02ecb152 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 82e7efaa4f4..fefac781ebe 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Safari-linux.png
index 95d52b581f0..e88d91caabf 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 8d6e28fa30f..ba421138751 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 599c5235a15..035c62979e8 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Safari-linux.png
index 06d7debcc2e..05520d7fb52 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 780093421e3..c06377b5986 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Chrome-linux.png
index bb8f17d5415..b9d7016b316 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 2f91223fbc1..1298275fc13 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Safari-linux.png
index d2419860506..fe7753260c6 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 8d342a43209..65bf2b7efc5 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 979c9cb710b..dd77d83e340 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Safari-linux.png
index 5d593df1330..9b5ff1123ac 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 1ac3b0e007f..e32d6203fdf 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 7a28b391793..2da54ef3403 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Safari-linux.png
index 31e7b3c06bd..e0cee08cc41 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Chrome-linux.png
index dbc941b506d..e1afeec7361 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 9276217ab51..10dd90952c4 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Safari-linux.png
index 45ddc98b613..a51032a3459 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png
index f931ec3ccd2..793bb8fc699 100644
Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 5d28c9ea3d0..5b96a215de7 100644
Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png
index 4ee337adfe6..2ef1877d385 100644
Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 1ac3b0e007f..e32d6203fdf 100644
Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 7a28b391793..2da54ef3403 100644
Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Safari-linux.png
index 31e7b3c06bd..e0cee08cc41 100644
Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 8e2192b1607..5635c748e06 100644
Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png
index d0f55c67f74..6c13fed7893 100644
Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Safari-linux.png
index 2812dd9e812..f67410b349d 100644
Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png
index dddd43bb78d..ce4906a9cdd 100644
Binary files a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 7afe8e6b9aa..0f3a39b3e57 100644
Binary files a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ionic-md-ltr-light-Mobile-Safari-linux.png
index 5f344fa60ca..e01683119e7 100644
Binary files a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 25c1f594134..5cd09d16f36 100644
Binary files a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 0937d5382cc..776fd18adda 100644
Binary files a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ionic-md-rtl-light-Mobile-Safari-linux.png
index e6619e16314..216becbe79b 100644
Binary files a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 91d06630066..8f1b29e6b5b 100644
Binary files a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png
index f792f80940d..dc865e89e1d 100644
Binary files a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png
index 4c8aac68518..da668e67f5a 100644
Binary files a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 63f7e0418c5..818ed38ee14 100644
Binary files a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-dark-Mobile-Chrome-linux.png
index 44355c06361..2ac84546138 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-dark-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Chrome-linux.png
index fa86f3f82c2..dcd0aad909b 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 81bb8cc7b42..a766caa9d12 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Safari-linux.png
index b86a075a0d8..de7001b3c58 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-dark-Mobile-Chrome-linux.png
index 00a0daaf87e..1e364048afa 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-dark-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Chrome-linux.png
index bda6b58a180..210d82738c6 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Firefox-linux.png
index fb15aac4d41..a5a4564bb6c 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Safari-linux.png
index ca53dbcc94a..6be65ce8585 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 02aca099365..7a59bc238e7 100644
Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png
index d7d77a0e28a..e60df70e0df 100644
Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Safari-linux.png
index 0af72153e63..59a0eb4e122 100644
Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 9f5a7885db7..6b1b7f91461 100644
Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png
index f0b0c4536fa..ddf6e81bf0c 100644
Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Safari-linux.png
index 248459faaa4..edf8d8f191a 100644
Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/themes/functions.color.scss b/core/src/themes/functions.color.scss
index 702bdf0bcf4..a48b8e18c09 100644
--- a/core/src/themes/functions.color.scss
+++ b/core/src/themes/functions.color.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
// Set the theme colors map to be used by the color functions
// --------------------------------------------------------------------------------------------
@mixin set-theme-colors($colorsMap) {
@@ -10,11 +12,13 @@
// current-color(base) => var(--ion-color-base)
// current-color(contrast, 0.1) => rgba(var(--ion-color-contrast-rgb), 0.1)
// --------------------------------------------------------------------------------------------
-@function current-color($variation, $alpha: null) {
+@function current-color($variation, $alpha: null, $subtle: false) {
+ $variable: if($subtle, "--ion-color-subtle-#{$variation}", "--ion-color-#{$variation}");
+
@if $alpha == null {
- @return var(--ion-color-#{$variation});
+ @return var(#{$variable});
} @else {
- @return rgba(var(--ion-color-#{$variation}-rgb), #{$alpha});
+ @return rgba(var(#{$variable}-rgb), #{$alpha});
}
}
@@ -25,17 +29,32 @@
// ion-color(secondary, contrast) => var(--ion-color-secondary-contrast)
// ion-color(primary, base, 0.5) => rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5)
// --------------------------------------------------------------------------------------------
-@function ion-color($name, $variation, $alpha: null, $rgb: null) {
+@function ion-color($name, $variation, $alpha: null, $rgb: null, $subtle: false) {
@if not($theme-colors) {
@error 'No theme colors set. Please make sure to call set-theme-colors($colorsMap) before using ion-color()';
}
- $values: map-get($theme-colors, $name);
- $value: map-get($values, $variation);
- $variable: --ion-color-#{$name}-#{$variation};
+ $values: map.get($theme-colors, $name);
+ $values: map.get($values, if($subtle, subtle, bold));
+
+ $value: map.get($values, $variation);
+
+ // TODO(FW-6417): this can be removed when foreground is required
+ // Fallback to "base" variant when "foreground" variant is undefined
+ @if ($variation == foreground and $value == null) {
+ $variation: base;
+ $value: map.get($values, $variation);
+ }
+ // If the color requested is subtle we return `--ion-color-{color}-subtle-contrast`,
+ // otherwise we return `--ion-color-{color}-contrast`.
+ $variable: if($subtle, "--ion-color-#{$name}-subtle-#{$variation}", "--ion-color-#{$name}-#{$variation}");
+
+ // If the variation being used is "base", we do not include the variant.
+ // If the color requested is subtle we return `--ion-color-{color}-subtle`,
+ // otherwise we return `--ion-color-{color}`.
@if ($variation == base) {
- $variable: --ion-color-#{$name};
+ $variable: if($subtle, "--ion-color-#{$name}-subtle", "--ion-color-#{$name}");
}
@if ($alpha) {
@@ -79,43 +98,157 @@
@return #{red($color)}, #{green($color)}, #{blue($color)};
}
-// Generates the color classes and variables
-// based on the colors map
+// Generates color variants for the specified color based on the
+// colors map for whichever hue is passed (bold, subtle).
// --------------------------------------------------------------------------------------------
-@mixin generate-color($color-name) {
+// Example usage (bold):
+// .ion-color-primary {
+// @include generate-color-variants("primary");
+// }
+//
+// Example output (bold):
+// .ion-color-primary {
+// --ion-color-base: var(--ion-color-primary-base, #105cef) !important;
+// --ion-color-base-rgb: var(--ion-color-primary-base-rgb, 16, 92, 239) !important;
+// --ion-color-contrast: var(--ion-color-primary-contrast, #fff) !important;
+// --ion-color-contrast-rgb: var(--ion-color-primary-contrast-rgb, 255, 255, 255) !important;
+// --ion-color-shade: var(--ion-color-primary-shade, #0f54da) !important;
+// --ion-color-tint: var(--ion-color-primary-tint, #94a5f4) !important;
+// }
+// --------------------------------------------------------------------------------------------
+// Example usage (subtle):
+// .ion-color-primary {
+// @include generate-color-variants("primary", "subtle")
+// }
+//
+// Example output (subtle):
+// .ion-color-primary {
+// --ion-color-subtle-base: var(--ion-color-primary-subtle-base, #f2f4fd) !important;
+// --ion-color-subtle-base-rgb: var(--ion-color-primary-subtle-base-rgb, 242, 244, 253) !important;
+// --ion-color-subtle-contrast: var(--ion-color-primary-subtle-contrast, #105cef) !important;
+// --ion-color-subtle-contrast-rgb: var(--ion-color-primary-subtle-contrast-rgb, 16, 92, 239) !important;
+// --ion-color-subtle-shade: var(--ion-color-primary-subtle-shade, #d0d7fa) !important;
+// --ion-color-subtle-tint: var(--ion-color-primary-subtle-tint, #e9ecfc) !important;
+// }
+// --------------------------------------------------------------------------------------------
+@mixin generate-color-variants($color-name, $hue: "bold") {
@if not($theme-colors) {
@error 'No theme colors set. Please make sure to call set-theme-colors($colorsMap) before using ion-color()';
}
- $value: map-get($theme-colors, $color-name);
-
- $base: map-get($value, base);
- $contrast: map-get($value, contrast);
- $shade: map-get($value, shade);
- $tint: map-get($value, tint);
+ // Grab the different hue color maps for the
+ // specified color and then grab the map of color variants
+ $hue-colors: map.get($theme-colors, $color-name);
+ $color-variants: map.get($hue-colors, $hue);
+
+ $prefix: if($hue == "subtle", "-subtle", "");
+
+ // TODO(FW-6417) this @if can be removed if we add subtle colors for ios and md
+ // Only proceed if the color variants exist
+ @if $color-variants {
+ // Grab the individual color variants
+ $base: map.get($color-variants, base);
+ $base-rgb: map.get($color-variants, base-rgb);
+ $contrast: map.get($color-variants, contrast);
+ $contrast-rgb: map.get($color-variants, contrast-rgb);
+ $shade: map.get($color-variants, shade);
+ $tint: map.get($color-variants, tint);
+ $foreground: map.get($color-variants, foreground);
+
+ // Generate CSS variables dynamically
+ --ion-color#{$prefix}-base: var(--ion-color-#{$color-name}#{$prefix}, #{$base}) !important;
+ --ion-color#{$prefix}-base-rgb: var(--ion-color-#{$color-name}#{$prefix}-rgb, #{$base-rgb}) !important;
+ --ion-color#{$prefix}-contrast: var(--ion-color-#{$color-name}#{$prefix}-contrast, #{$contrast}) !important;
+ --ion-color#{$prefix}-contrast-rgb: var(
+ --ion-color-#{$color-name}#{$prefix}-contrast-rgb,
+ #{$contrast-rgb}
+ ) !important;
+ --ion-color#{$prefix}-shade: var(--ion-color-#{$color-name}#{$prefix}-shade, #{$shade}) !important;
+ --ion-color#{$prefix}-tint: var(--ion-color-#{$color-name}#{$prefix}-tint, #{$tint}) !important;
+ // TODO(FW-6417): remove the fallback variable when the foreground variable is
+ // required by all palettes for all themes:
+ // --ion-color#{$prefix}-foreground: var(--ion-color-#{$color-name}#{$prefix}-foreground, #{$foreground}) !important;
+ --ion-color#{$prefix}-foreground: var(
+ --ion-color-#{$color-name}#{$prefix}-foreground,
+ var(--ion-color-#{$color-name}#{$prefix}, #{$foreground})
+ ) !important;
+ }
+}
- --ion-color-base: var(--ion-color-#{$color-name}, #{$base}) !important;
- --ion-color-base-rgb: var(--ion-color-#{$color-name}-rgb, #{color-to-rgb-list($base)}) !important;
- --ion-color-contrast: var(--ion-color-#{$color-name}-contrast, #{$contrast}) !important;
- --ion-color-contrast-rgb: var(--ion-color-#{$color-name}-contrast-rgb, #{color-to-rgb-list($contrast)}) !important;
- --ion-color-shade: var(--ion-color-#{$color-name}-shade, #{$shade}) !important;
- --ion-color-tint: var(--ion-color-#{$color-name}-tint, #{$tint}) !important;
+// Generates both bold and subtle color variables
+// for the specified color in the colors map.
+// --------------------------------------------------------------------------------------------
+@mixin generate-color($color-name) {
+ @include generate-color-variants($color-name);
+ @include generate-color-variants($color-name, "subtle");
}
-// Generates the CSS variables for each color
-// based on the colors map
+// Generates color variables for all colors in the colors map for both hues (bold, subtle).
+// --------------------------------------------------------------------------------------------
+// Example usage:
+// :root {
+// generate-color-variables()
+// }
+//
+// Example output:
+// :root {
+// --ion-color-primary: #105cef;
+// --ion-color-primary-rgb: 16, 92, 239;
+// --ion-color-primary-contrast: #ffffff;
+// --ion-color-primary-contrast-rgb: 255, 255, 255;
+// --ion-color-primary-shade: #0f54da;
+// --ion-color-primary-tint: #94a5f4;
+// --ion-color-primary-foreground: #105cef;
+// --ion-color-primary-subtle: #f2f4fd;
+// --ion-color-primary-subtle-rgb: 242, 244, 253;
+// --ion-color-primary-subtle-contrast: #105cef;
+// --ion-color-primary-subtle-contrast-rgb: 16, 92, 239;
+// --ion-color-primary-subtle-shade: #d0d7fa;
+// --ion-color-primary-subtle-tint: #e9ecfc;
+// --ion-color-primary-foreground: #105cef;
+// ...
+// --ion-color-dark: #292929;
+// --ion-color-dark-rgb: 41, 41, 41;
+// --ion-color-dark-contrast: #ffffff;
+// --ion-color-dark-contrast-rgb: 255, 255, 255;
+// --ion-color-dark-shade: #242424;
+// --ion-color-dark-tint: #4e4e4e;
+// --ion-color-dark-foreground: #242424;
+// --ion-color-dark-subtle: #f5f5f5;
+// --ion-color-dark-subtle-rgb: 245, 245, 245;
+// --ion-color-dark-subtle-contrast: #292929;
+// --ion-color-dark-subtle-contrast-rgb: 41, 41, 41;
+// --ion-color-dark-subtle-shade: #e0e0e0;
+// --ion-color-dark-subtle-tint: #efefef;
+// --ion-color-dark-subtle-foreground: #242424;
+// }
// --------------------------------------------------------------------------------------------
@mixin generate-color-variables() {
@if not($theme-colors) {
- @error 'No theme colors set. Please make sure to call set-theme-colors($colorsMap) before using ion-color()';
+ @error 'No theme colors set. Please make sure to call set-theme-colors($colorsMap) before using ion-color().';
}
@each $color-name, $value in $theme-colors {
- --ion-color-#{$color-name}: #{map-get($value, base)};
- --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map-get($value, base))};
- --ion-color-#{$color-name}-contrast: #{map-get($value, contrast)};
- --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map-get($value, contrast))};
- --ion-color-#{$color-name}-shade: #{map-get($value, shade)};
- --ion-color-#{$color-name}-tint: #{map-get($value, tint)};
+ @each $hue in (bold, subtle) {
+ $colors: map.get($value, $hue);
+
+ @if $colors != null {
+ $prefix: if($hue == subtle, "-subtle", "");
+
+ --ion-color-#{$color-name}#{$prefix}: #{map.get($colors, base)};
+ --ion-color-#{$color-name}#{$prefix}-rgb: #{map.get($colors, base-rgb)};
+ --ion-color-#{$color-name}#{$prefix}-contrast: #{map.get($colors, contrast)};
+ --ion-color-#{$color-name}#{$prefix}-contrast-rgb: #{map.get($colors, contrast-rgb)};
+ --ion-color-#{$color-name}#{$prefix}-shade: #{map.get($colors, shade)};
+ --ion-color-#{$color-name}#{$prefix}-tint: #{map.get($colors, tint)};
+ // TODO(FW-6417): this "if" can be removed when foreground is defined for ios/md
+ // themes. It should not be added until we want foreground to be required for
+ // ios and md because this will be a breaking change, requiring users to add
+ // `--ion-color-{color}-foreground` in order to override the default colors
+ @if (map.get($colors, foreground)) {
+ --ion-color-#{$color-name}#{$prefix}-foreground: #{map.get($colors, foreground)};
+ }
+ }
+ }
}
}
diff --git a/core/src/themes/ionic/ionic.theme.default.scss b/core/src/themes/ionic/ionic.theme.default.scss
index cd702ae9842..a8769e00d3a 100644
--- a/core/src/themes/ionic/ionic.theme.default.scss
+++ b/core/src/themes/ionic/ionic.theme.default.scss
@@ -10,84 +10,200 @@
// Default Ionic Colors
// -------------------------------------------------------------------------------------------
// Color map should provide
-// - base: main color to be used.
-// - contrast: Color that will provide readable text against the base color
-// - shade: 12% darker version of the base color (mix with black)
-// - tint: 10% lighter version of the base color (mix with white)
+// - bold: a map of the bold color variations
+// - subtle: a map of the subtle color variations
+//
+// Each hue color map should provide
+// - base: The main color used for backgrounds
+// - base-rgb: The base color in RGB format
+// - contrast: A color that ensures readable text on the base color
+// - contrast-rgb: The contrast color in RGB format
+// - shade: A darker variant of the base color, used for pressed/active states
+// - tint: A lighter variant of the base color, used for ?
+// - foreground: The main color used for text and foreground elements
// TODO(ROU-10778, ROU-10875): Sync the color names to the design system of
// ios and md. This will allow us to have a single color map.
-$primary: #105cef;
-$secondary: initial;
-$tertiary: initial;
-$success: #1fbd3b;
-$warning: #e18300;
-$danger: #bf2222;
-$light: #f2f4fd;
-$medium: initial;
-$neutral: #626262;
-$dark: initial;
-
$ionic-colors: (
primary: (
- base: $primary,
- contrast: #fff,
- shade: color.get-color-shade($primary),
- tint: color.get-color-tint($primary),
+ bold: (
+ base: globals.$ion-bg-primary-base-default,
+ base-rgb: globals.$ion-bg-primary-base-default-rgb,
+ contrast: globals.$ion-text-inverse,
+ contrast-rgb: globals.$ion-text-inverse-rgb,
+ shade: globals.$ion-bg-primary-base-press,
+ tint: globals.$ion-semantics-primary-600,
+ foreground: globals.$ion-text-primary,
+ ),
+ subtle: (
+ base: globals.$ion-bg-primary-subtle-default,
+ base-rgb: globals.$ion-bg-primary-subtle-default-rgb,
+ contrast: globals.$ion-text-primary,
+ contrast-rgb: globals.$ion-text-primary-rgb,
+ shade: globals.$ion-bg-primary-subtle-press,
+ tint: globals.$ion-semantics-primary-200,
+ foreground: globals.$ion-text-primary,
+ ),
),
secondary: (
- base: $secondary,
- contrast: $secondary,
- shade: color.get-color-shade($secondary),
- tint: color.get-color-tint($secondary),
+ bold: (
+ base: globals.$ion-bg-info-base-default,
+ base-rgb: globals.$ion-bg-info-base-default-rgb,
+ contrast: globals.$ion-text-inverse,
+ contrast-rgb: globals.$ion-text-inverse-rgb,
+ shade: globals.$ion-bg-info-base-press,
+ tint: globals.$ion-semantics-info-700,
+ foreground: globals.$ion-text-info,
+ ),
+ subtle: (
+ base: globals.$ion-bg-info-subtle-default,
+ base-rgb: globals.$ion-bg-info-subtle-default-rgb,
+ contrast: globals.$ion-text-info,
+ contrast-rgb: globals.$ion-text-info-rgb,
+ shade: globals.$ion-bg-info-subtle-press,
+ tint: globals.$ion-semantics-info-200,
+ foreground: globals.$ion-text-info,
+ ),
),
tertiary: (
- base: $tertiary,
- contrast: $tertiary,
- shade: color.get-color-shade($tertiary),
- tint: color.get-color-tint($tertiary),
+ bold: (
+ base: globals.$ion-primitives-violet-700,
+ base-rgb: globals.$ion-primitives-violet-700-rgb,
+ contrast: globals.$ion-text-inverse,
+ contrast-rgb: globals.$ion-text-inverse-rgb,
+ shade: globals.$ion-primitives-violet-800,
+ tint: globals.$ion-primitives-violet-600,
+ foreground: globals.$ion-primitives-violet-700,
+ ),
+ subtle: (
+ base: globals.$ion-primitives-violet-100,
+ base-rgb: globals.$ion-primitives-violet-100-rgb,
+ contrast: globals.$ion-primitives-violet-700,
+ contrast-rgb: globals.$ion-primitives-violet-700-rgb,
+ shade: globals.$ion-primitives-violet-300,
+ tint: globals.$ion-primitives-violet-200,
+ foreground: globals.$ion-primitives-violet-700,
+ ),
),
success: (
- base: $success,
- contrast: #000,
- shade: color.get-color-shade($success),
- tint: color.get-color-tint($success),
+ bold: (
+ base: globals.$ion-bg-success-base-default,
+ base-rgb: globals.$ion-bg-success-base-default-rgb,
+ contrast: globals.$ion-text-inverse,
+ contrast-rgb: globals.$ion-text-inverse-rgb,
+ shade: globals.$ion-bg-success-base-press,
+ tint: globals.$ion-semantics-success-800,
+ foreground: globals.$ion-text-success,
+ ),
+ subtle: (
+ base: globals.$ion-bg-success-subtle-default,
+ base-rgb: globals.$ion-bg-success-subtle-default-rgb,
+ contrast: globals.$ion-text-success,
+ contrast-rgb: globals.$ion-text-success-rgb,
+ shade: globals.$ion-bg-success-subtle-press,
+ tint: globals.$ion-semantics-success-200,
+ foreground: globals.$ion-text-success,
+ ),
),
warning: (
- base: $warning,
- contrast: #000,
- shade: color.get-color-shade($warning),
- tint: color.get-color-tint($warning),
+ bold: (
+ base: globals.$ion-bg-warning-base-default,
+ base-rgb: globals.$ion-bg-warning-base-default-rgb,
+ contrast: globals.$ion-text-default,
+ contrast-rgb: globals.$ion-text-default-rgb,
+ shade: globals.$ion-bg-warning-base-press,
+ tint: globals.$ion-primitives-yellow-300,
+ foreground: globals.$ion-text-warning,
+ ),
+ subtle: (
+ base: globals.$ion-bg-warning-subtle-default,
+ base-rgb: globals.$ion-bg-warning-subtle-default-rgb,
+ contrast: globals.$ion-text-warning,
+ contrast-rgb: globals.$ion-text-warning-rgb,
+ shade: globals.$ion-bg-warning-subtle-press,
+ tint: globals.$ion-primitives-yellow-100,
+ foreground: globals.$ion-text-warning,
+ ),
),
danger: (
- base: $danger,
- contrast: #fff,
- shade: color.get-color-shade($danger),
- tint: color.get-color-tint($danger),
+ bold: (
+ base: globals.$ion-bg-danger-base-default,
+ base-rgb: globals.$ion-bg-danger-base-default-rgb,
+ contrast: globals.$ion-text-inverse,
+ contrast-rgb: globals.$ion-text-inverse-rgb,
+ shade: globals.$ion-bg-danger-base-press,
+ tint: globals.$ion-semantics-danger-700,
+ foreground: globals.$ion-text-danger,
+ ),
+ subtle: (
+ base: globals.$ion-bg-danger-subtle-default,
+ base-rgb: globals.$ion-bg-danger-subtle-default-rgb,
+ contrast: globals.$ion-text-danger,
+ contrast-rgb: globals.$ion-text-danger-rgb,
+ shade: globals.$ion-bg-danger-subtle-press,
+ tint: globals.$ion-semantics-danger-200,
+ foreground: globals.$ion-text-danger,
+ ),
),
light: (
- base: $light,
- contrast: #000,
- shade: color.get-color-shade($light),
- tint: color.get-color-tint($light),
+ bold: (
+ base: globals.$ion-bg-neutral-base-default,
+ base-rgb: globals.$ion-bg-neutral-base-default-rgb,
+ contrast: globals.$ion-text-default,
+ contrast-rgb: globals.$ion-text-default-rgb,
+ shade: globals.$ion-primitives-neutral-600,
+ tint: globals.$ion-primitives-neutral-400,
+ foreground: globals.$ion-text-default,
+ ),
+ subtle: (
+ base: globals.$ion-bg-neutral-subtlest-default,
+ base-rgb: globals.$ion-bg-neutral-subtlest-default-rgb,
+ contrast: globals.$ion-text-default,
+ contrast-rgb: globals.$ion-text-default-rgb,
+ shade: globals.$ion-bg-neutral-subtlest-press,
+ tint: globals.$ion-primitives-neutral-100,
+ foreground: globals.$ion-text-default,
+ ),
),
medium: (
- base: $medium,
- contrast: $medium,
- shade: color.get-color-shade($medium),
- tint: color.get-color-tint($medium),
- ),
- neutral: (
- base: $neutral,
- contrast: #fff,
- shade: color.get-color-shade($neutral),
- tint: color.get-color-tint($neutral),
+ bold: (
+ base: globals.$ion-bg-neutral-bold-default,
+ base-rgb: globals.$ion-bg-neutral-bold-default-rgb,
+ contrast: globals.$ion-text-inverse,
+ contrast-rgb: globals.$ion-text-inverse-rgb,
+ shade: globals.$ion-bg-neutral-bold-press,
+ tint: globals.$ion-primitives-neutral-900,
+ foreground: globals.$ion-text-default,
+ ),
+ subtle: (
+ base: globals.$ion-bg-neutral-subtle-default,
+ base-rgb: globals.$ion-bg-neutral-subtle-default-rgb,
+ contrast: globals.$ion-text-subtlest,
+ contrast-rgb: globals.$ion-text-subtlest-rgb,
+ shade: globals.$ion-bg-neutral-subtle-press,
+ tint: globals.$ion-primitives-neutral-100,
+ foreground: globals.$ion-text-default,
+ ),
),
dark: (
- base: $dark,
- contrast: $dark,
- shade: color.get-color-shade($dark),
- tint: color.get-color-tint($dark),
+ bold: (
+ base: globals.$ion-bg-neutral-boldest-default,
+ base-rgb: globals.$ion-bg-neutral-boldest-default-rgb,
+ contrast: globals.$ion-text-inverse,
+ contrast-rgb: globals.$ion-text-inverse-rgb,
+ shade: globals.$ion-bg-neutral-boldest-press,
+ tint: globals.$ion-primitives-neutral-1100,
+ foreground: globals.$ion-text-default,
+ ),
+ subtle: (
+ base: globals.$ion-bg-neutral-subtle-default,
+ base-rgb: globals.$ion-bg-neutral-subtle-default-rgb,
+ contrast: globals.$ion-text-subtle,
+ contrast-rgb: globals.$ion-text-subtle-rgb,
+ shade: globals.$ion-bg-neutral-subtle-press,
+ tint: globals.$ion-primitives-neutral-100,
+ foreground: globals.$ion-text-default,
+ ),
),
);
@@ -98,5 +214,5 @@ $tabbar-ionic-background: var(--ion-tab-bar-background, globals.$ion-primitives-
$tabbar-ionic-background-activated: var(--ion-tab-bar-background-activated, globals.$ion-primitives-neutral-100);
$tabbar-ionic-background-focused: var(--ion-tab-bar-background-focused, transparent);
$tabbar-ionic-color: var(--ion-tab-bar-color, globals.$ion-primitives-neutral-800);
-$tabbar-ionic-color-selected: var(--ion-tab-bar-color-selected, globals.$ion-semantics-primary-base);
+$tabbar-ionic-color-selected: var(--ion-tab-bar-color-selected, globals.$ion-text-primary);
$tabbar-ionic-border-color: var(--ion-tab-bar-border-color, transparent);
diff --git a/core/src/themes/ionic/test/colors/index.html b/core/src/themes/ionic/test/colors/index.html
index 5f990e1fe12..b2f0048c798 100644
--- a/core/src/themes/ionic/test/colors/index.html
+++ b/core/src/themes/ionic/test/colors/index.html
@@ -7,11 +7,11 @@
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
- <link href="../../../../css/ionic.bundle.css" rel="stylesheet" />
- <link href="../../../../scripts/testing/styles.css" rel="stylesheet" />
- <script src="../../../../scripts/testing/scripts.js"></script>
- <script nomodule src="../../../../dist/ionic/ionic.js"></script>
- <script type="module" src="../../../../dist/ionic/ionic.esm.js"></script>
+ <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+ <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+ <script src="../../../../../scripts/testing/scripts.js"></script>
+ <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
<script>
window.Ionic = {
config: {
@@ -24,27 +24,20 @@
<style>
.container {
display: flex;
-
justify-content: center;
-
flex-wrap: wrap;
-
border-bottom: 1px solid #ddd;
padding: 20px 0;
}
.header {
width: 100%;
-
margin-top: 0;
}
.color-block {
display: flex;
align-items: center;
-
- background: var(--ion-color-contrast);
-
margin: 4px;
}
@@ -53,7 +46,7 @@
}
.ion-color {
- color: var(--ion-color-base);
+ color: var(--ion-color-foreground);
}
.ion-color-background {
@@ -71,19 +64,23 @@
color: var(--ion-color-contrast);
}
- .ion-color-background-08 {
- background: rgb(var(--ion-color-base-rgb), 0.08);
- color: var(--ion-color-base);
+ .ion-color-subtle {
+ color: var(--ion-color-subtle-foreground);
}
- .ion-color-background-12 {
- background: rgb(var(--ion-color-base-rgb), 0.12);
- color: var(--ion-color-base);
+ .ion-color-subtle-background {
+ background: var(--ion-color-subtle-base);
+ color: var(--ion-color-subtle-contrast);
}
- .ion-color-background-16 {
- background: rgb(var(--ion-color-base-rgb), 0.16);
- color: var(--ion-color-base);
+ .ion-color-subtle-background-shade {
+ background: var(--ion-color-subtle-shade);
+ color: var(--ion-color-subtle-contrast);
+ }
+
+ .ion-color-subtle-background-tint {
+ background: var(--ion-color-subtle-tint);
+ color: var(--ion-color-subtle-contrast);
}
</style>
</head>
@@ -99,156 +96,112 @@
<ion-content id="content" class="ion-text-center" no-bounce>
<div class="container">
<h3 class="header">Text</h3>
- <div class="color-block ion-color-primary">
- <div class="ion-color">Primary</div>
- </div>
- <div class="color-block ion-color-success">
- <div class="ion-color">Success</div>
- </div>
- <div class="color-block ion-color-warning">
- <div class="ion-color">Warning</div>
- </div>
- <div class="color-block ion-color-danger">
- <div class="ion-color">Danger</div>
- </div>
- <div class="color-block ion-color-light">
- <div class="ion-color">Light</div>
- </div>
- <div class="color-block ion-color-neutral">
- <div class="ion-color">Neutral</div>
- </div>
+ <div class="color-block ion-color-primary"><div class="ion-color">Primary</div></div>
+ <div class="color-block ion-color-secondary"><div class="ion-color">Secondary</div></div>
+ <div class="color-block ion-color-tertiary"><div class="ion-color">Tertiary</div></div>
+ <div class="color-block ion-color-success"><div class="ion-color">Success</div></div>
+ <div class="color-block ion-color-warning"><div class="ion-color">Warning</div></div>
+ <div class="color-block ion-color-danger"><div class="ion-color">Danger</div></div>
+ <div class="color-block ion-color-light"><div class="ion-color">Light</div></div>
+ <div class="color-block ion-color-medium"><div class="ion-color">Medium</div></div>
+ <div class="color-block ion-color-dark"><div class="ion-color">Dark</div></div>
</div>
<div class="container">
<h3 class="header">Background</h3>
- <div class="color-block ion-color-primary">
- <div class="ion-color-background">Primary</div>
- </div>
- <div class="color-block ion-color-success">
- <div class="ion-color-background">Success</div>
- </div>
- <div class="color-block ion-color-warning">
- <div class="ion-color-background">Warning</div>
- </div>
- <div class="color-block ion-color-danger">
- <div class="ion-color-background">Danger</div>
- </div>
- <div class="color-block ion-color-light">
- <div class="ion-color-background">Light</div>
- </div>
- <div class="color-block ion-color-neutral">
- <div class="ion-color-background">Neutral</div>
- </div>
+ <div class="color-block ion-color-primary"><div class="ion-color-background">Primary</div></div>
+ <div class="color-block ion-color-secondary"><div class="ion-color-background">Secondary</div></div>
+ <div class="color-block ion-color-tertiary"><div class="ion-color-background">Tertiary</div></div>
+ <div class="color-block ion-color-success"><div class="ion-color-background">Success</div></div>
+ <div class="color-block ion-color-warning"><div class="ion-color-background">Warning</div></div>
+ <div class="color-block ion-color-danger"><div class="ion-color-background">Danger</div></div>
+ <div class="color-block ion-color-light"><div class="ion-color-background">Light</div></div>
+ <div class="color-block ion-color-medium"><div class="ion-color-background">Medium</div></div>
+ <div class="color-block ion-color-dark"><div class="ion-color-background">Dark</div></div>
</div>
<div class="container">
<h3 class="header">Background Shade</h3>
- <div class="color-block ion-color-primary">
- <div class="ion-color-background-shade">Primary</div>
- </div>
- <div class="color-block ion-color-success">
- <div class="ion-color-background-shade">Success</div>
- </div>
- <div class="color-block ion-color-warning">
- <div class="ion-color-background-shade">Warning</div>
- </div>
- <div class="color-block ion-color-danger">
- <div class="ion-color-background-shade">Danger</div>
- </div>
- <div class="color-block ion-color-light">
- <div class="ion-color-background-shade">Light</div>
- </div>
- <div class="color-block ion-color-neutral">
- <div class="ion-color-background-shade">Neutral</div>
- </div>
+ <div class="color-block ion-color-primary"><div class="ion-color-background-shade">Primary</div></div>
+ <div class="color-block ion-color-secondary"><div class="ion-color-background-shade">Secondary</div></div>
+ <div class="color-block ion-color-tertiary"><div class="ion-color-background-shade">Tertiary</div></div>
+ <div class="color-block ion-color-success"><div class="ion-color-background-shade">Success</div></div>
+ <div class="color-block ion-color-warning"><div class="ion-color-background-shade">Warning</div></div>
+ <div class="color-block ion-color-danger"><div class="ion-color-background-shade">Danger</div></div>
+ <div class="color-block ion-color-light"><div class="ion-color-background-shade">Light</div></div>
+ <div class="color-block ion-color-medium"><div class="ion-color-background-shade">Medium</div></div>
+ <div class="color-block ion-color-dark"><div class="ion-color-background-shade">Dark</div></div>
</div>
<div class="container">
<h3 class="header">Background Tint</h3>
- <div class="color-block ion-color-primary">
- <div class="ion-color-background-tint">Primary</div>
- </div>
- <div class="color-block ion-color-success">
- <div class="ion-color-background-tint">Success</div>
- </div>
- <div class="color-block ion-color-warning">
- <div class="ion-color-background-tint">Warning</div>
- </div>
- <div class="color-block ion-color-danger">
- <div class="ion-color-background-tint">Danger</div>
- </div>
- <div class="color-block ion-color-light">
- <div class="ion-color-background-tint">Light</div>
- </div>
- <div class="color-block ion-color-neutral">
- <div class="ion-color-background-tint">Neutral</div>
- </div>
+ <div class="color-block ion-color-primary"><div class="ion-color-background-tint">Primary</div></div>
+ <div class="color-block ion-color-secondary"><div class="ion-color-background-tint">Secondary</div></div>
+ <div class="color-block ion-color-tertiary"><div class="ion-color-background-tint">Tertiary</div></div>
+ <div class="color-block ion-color-success"><div class="ion-color-background-tint">Success</div></div>
+ <div class="color-block ion-color-warning"><div class="ion-color-background-tint">Warning</div></div>
+ <div class="color-block ion-color-danger"><div class="ion-color-background-tint">Danger</div></div>
+ <div class="color-block ion-color-light"><div class="ion-color-background-tint">Light</div></div>
+ <div class="color-block ion-color-medium"><div class="ion-color-background-tint">Medium</div></div>
+ <div class="color-block ion-color-dark"><div class="ion-color-background-tint">Dark</div></div>
</div>
<div class="container">
- <h3 class="header">Background 8%</h3>
- <div class="color-block ion-color-primary">
- <div class="ion-color-background-08">Primary</div>
- </div>
- <div class="color-block ion-color-success">
- <div class="ion-color-background-08">Success</div>
- </div>
- <div class="color-block ion-color-warning">
- <div class="ion-color-background-08">Warning</div>
- </div>
- <div class="color-block ion-color-danger">
- <div class="ion-color-background-08">Danger</div>
- </div>
- <div class="color-block ion-color-light">
- <div class="ion-color-background-08">Light</div>
- </div>
- <div class="color-block ion-color-neutral">
- <div class="ion-color-background-08">Neutral</div>
- </div>
+ <h3 class="header">Subtle Text</h3>
+ <div class="color-block ion-color-primary"><div class="ion-color-subtle">Primary</div></div>
+ <div class="color-block ion-color-secondary"><div class="ion-color-subtle">Secondary</div></div>
+ <div class="color-block ion-color-tertiary"><div class="ion-color-subtle">Tertiary</div></div>
+ <div class="color-block ion-color-success"><div class="ion-color-subtle">Success</div></div>
+ <div class="color-block ion-color-warning"><div class="ion-color-subtle">Warning</div></div>
+ <div class="color-block ion-color-danger"><div class="ion-color-subtle">Danger</div></div>
+ <div class="color-block ion-color-light"><div class="ion-color-subtle">Light</div></div>
+ <div class="color-block ion-color-medium"><div class="ion-color-subtle">Medium</div></div>
+ <div class="color-block ion-color-dark"><div class="ion-color-subtle">Dark</div></div>
</div>
<div class="container">
- <h3 class="header">Background 12%</h3>
- <div class="color-block ion-color-primary">
- <div class="ion-color-background-12">Primary</div>
- </div>
- <div class="color-block ion-color-success">
- <div class="ion-color-background-12">Success</div>
- </div>
- <div class="color-block ion-color-warning">
- <div class="ion-color-background-12">Warning</div>
- </div>
- <div class="color-block ion-color-danger">
- <div class="ion-color-background-12">Danger</div>
- </div>
- <div class="color-block ion-color-light">
- <div class="ion-color-background-12">Light</div>
- </div>
- <div class="color-block ion-color-neutral">
- <div class="ion-color-background-12">Neutral</div>
- </div>
+ <h3 class="header">Subtle Background</h3>
+ <div class="color-block ion-color-primary"><div class="ion-color-subtle-background">Primary</div></div>
+ <div class="color-block ion-color-secondary"><div class="ion-color-subtle-background">Secondary</div></div>
+ <div class="color-block ion-color-tertiary"><div class="ion-color-subtle-background">Tertiary</div></div>
+ <div class="color-block ion-color-success"><div class="ion-color-subtle-background">Success</div></div>
+ <div class="color-block ion-color-warning"><div class="ion-color-subtle-background">Warning</div></div>
+ <div class="color-block ion-color-danger"><div class="ion-color-subtle-background">Danger</div></div>
+ <div class="color-block ion-color-light"><div class="ion-color-subtle-background">Light</div></div>
+ <div class="color-block ion-color-medium"><div class="ion-color-subtle-background">Medium</div></div>
+ <div class="color-block ion-color-dark"><div class="ion-color-subtle-background">Dark</div></div>
</div>
<div class="container">
- <h3 class="header">Background 16%</h3>
- <div class="color-block ion-color-primary">
- <div class="ion-color-background-16">Primary</div>
- </div>
- <div class="color-block ion-color-success">
- <div class="ion-color-background-16">Success</div>
- </div>
- <div class="color-block ion-color-warning">
- <div class="ion-color-background-16">Warning</div>
- </div>
- <div class="color-block ion-color-danger">
- <div class="ion-color-background-16">Danger</div>
- </div>
- <div class="color-block ion-color-light">
- <div class="ion-color-background-16">Light</div>
- </div>
- <div class="color-block ion-color-neutral">
- <div class="ion-color-background-16">Neutral</div>
- </div>
+ <h3 class="header">Subtle Background Shade</h3>
+ <div class="color-block ion-color-primary"><div class="ion-color-subtle-background-shade">Primary</div></div>
+ <div class="color-block ion-color-secondary">
+ <div class="ion-color-subtle-background-shade">Secondary</div>
+ </div>
+ <div class="color-block ion-color-tertiary">
+ <div class="ion-color-subtle-background-shade">Tertiary</div>
+ </div>
+ <div class="color-block ion-color-success"><div class="ion-color-subtle-background-shade">Success</div></div>
+ <div class="color-block ion-color-warning"><div class="ion-color-subtle-background-shade">Warning</div></div>
+ <div class="color-block ion-color-danger"><div class="ion-color-subtle-background-shade">Danger</div></div>
+ <div class="color-block ion-color-light"><div class="ion-color-subtle-background-shade">Light</div></div>
+ <div class="color-block ion-color-medium"><div class="ion-color-subtle-background-shade">Medium</div></div>
+ <div class="color-block ion-color-dark"><div class="ion-color-subtle-background-shade">Dark</div></div>
+ </div>
+
+ <div class="container">
+ <h3 class="header">Subtle Background Tint</h3>
+ <div class="color-block ion-color-primary"><div class="ion-color-subtle-background-tint">Primary</div></div>
+ <div class="color-block ion-color-secondary">
+ <div class="ion-color-subtle-background-tint">Secondary</div>
+ </div>
+ <div class="color-block ion-color-tertiary"><div class="ion-color-subtle-background-tint">Tertiary</div></div>
+ <div class="color-block ion-color-success"><div class="ion-color-subtle-background-tint">Success</div></div>
+ <div class="color-block ion-color-warning"><div class="ion-color-subtle-background-tint">Warning</div></div>
+ <div class="color-block ion-color-danger"><div class="ion-color-subtle-background-tint">Danger</div></div>
+ <div class="color-block ion-color-light"><div class="ion-color-subtle-background-tint">Light</div></div>
+ <div class="color-block ion-color-medium"><div class="ion-color-subtle-background-tint">Medium</div></div>
+ <div class="color-block ion-color-dark"><div class="ion-color-subtle-background-tint">Dark</div></div>
</div>
</ion-content>
</ion-app>
diff --git a/core/src/themes/ionic/test/colors/theme.e2e.ts b/core/src/themes/ionic/test/colors/theme.e2e.ts
index 779ceeb117f..662a9ef3033 100644
--- a/core/src/themes/ionic/test/colors/theme.e2e.ts
+++ b/core/src/themes/ionic/test/colors/theme.e2e.ts
@@ -9,57 +9,72 @@ import { configs, test } from '@utils/test/playwright';
const styleTestHelpers = `
<style>
main {
- background: var(--ion-color-contrast);
font-size: 14pt;
}
- .ion-background {
+
+ .ion-color {
+ color: var(--ion-color-foreground);
+ }
+
+ .ion-color-background {
background: var(--ion-color-base);
+ color: var(--ion-color-contrast);
}
- .ion-background-shade {
+
+ .ion-color-background-shade {
background: var(--ion-color-shade);
+ color: var(--ion-color-contrast);
}
- .ion-background-tint {
+
+ .ion-color-background-tint {
background: var(--ion-color-tint);
+ color: var(--ion-color-contrast);
}
- .ion-background-opacity-08 {
- background: rgba(var(--ion-color-base-rgb), 0.08);
- }
- .ion-background-opacity-12 {
- background: rgba(var(--ion-color-base-rgb), 0.12);
+
+ .ion-color-subtle {
+ color: var(--ion-color-subtle-foreground);
}
- .ion-background-opacity-16 {
- background: rgba(var(--ion-color-base-rgb), 0.16);
+
+ .ion-color-subtle-background {
+ background: var(--ion-color-subtle-base);
+ color: var(--ion-color-subtle-contrast);
}
- .ion-color {
- color: var(--ion-color-base);
+
+ .ion-color-subtle-background-shade {
+ background: var(--ion-color-subtle-shade);
+ color: var(--ion-color-subtle-contrast);
}
- .ion-color-contrast {
- color: var(--ion-color-contrast);
+
+ .ion-color-subtle-background-tint {
+ background: var(--ion-color-subtle-tint);
+ color: var(--ion-color-subtle-contrast);
}
</style>
`;
/**
* All colors should be tested in the following scenarios:
- * 1) The base color as the text color against the contrast color as the background color
+ * 1) The foreground color as the text color against the default background color
* 2) The contrast color as the text color against the base color as the background color
* 3) The contrast color as the text color against the shade color as the background color
* 4) The contrast color as the text color against the tint color as the background color
- * 5) The base color as the text color against the base color at 0.08 opacity as the background color
- * 6) The base color as the text color against the base color at 0.12 opacity as the background color
- * 7) The base color as the text color against the base color at 0.16 opacity as the background color
+ * 5) The subtle foreground color as the text color against the default background color
+ * 6) The subtle contrast color as the text color against the subtle base color as the background color
+ * 7) The subtle contrast color as the text color against the subtle shade color as the background color
+ * 8) The subtle contrast color as the text color against the subtle tint color as the background color
*/
configs({ modes: ['ionic-md'], directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ config, title }) => {
- const colors = ['primary', 'neutral', 'success', 'warning', 'danger', 'light'];
+ const colors = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
- test.describe(title('theme'), () => {
+ test.describe(title('palette colors: bold'), () => {
test.beforeEach(({ skip }) => {
skip.browser('firefox', 'Color contrast ratio is consistent across browsers');
skip.browser('webkit', 'Color contrast ratio is consistent across browsers');
});
for (const color of colors) {
- test(`color "${color}" should pass AA guidelines`, async ({ page }) => {
+ // 1) The foreground color as the text color against the default background color
+ test(`foreground color "${color}" should pass AA guidelines`, async ({ page }) => {
await page.setContent(
`${styleTestHelpers}
<main class="ion-color-${color}">
@@ -72,11 +87,12 @@ configs({ modes: ['ionic-md'], directions: ['ltr'], palettes: ['light', 'dark']
expect(results.violations).toEqual([]);
});
+ // 2) The contrast color as the text color against the base color as the background color
test(`contrast color on "${color}" background should pass AA guidelines`, async ({ page }) => {
await page.setContent(
`${styleTestHelpers}
<main class="ion-color-${color}">
- <p class="ion-color-contrast ion-background">Hello World</p>
+ <p class="ion-color-background">Hello World</p>
</main>`,
config
);
@@ -85,11 +101,12 @@ configs({ modes: ['ionic-md'], directions: ['ltr'], palettes: ['light', 'dark']
expect(results.violations).toEqual([]);
});
+ // 3) The contrast color as the text color against the shade color as the background color
test(`contrast color on "${color}" background shade should pass AA guidelines`, async ({ page }) => {
await page.setContent(
`${styleTestHelpers}
<main class="ion-color-${color}">
- <p class="ion-color-contrast ion-background-shade">Hello World</p>
+ <p class="ion-color-background-shade">Hello World</p>
</main>`,
config
);
@@ -98,11 +115,14 @@ configs({ modes: ['ionic-md'], directions: ['ltr'], palettes: ['light', 'dark']
expect(results.violations).toEqual([]);
});
- test(`contrast color on "${color}" background tint should pass AA guidelines`, async ({ page }) => {
+ // 4) The contrast color as the text color against the tint color as the background color
+ // TODO(ROU-10778): Re-enable this test once the colors have been finalized
+ // Fails on primary, tertiary, success, danger
+ test.skip(`contrast color on "${color}" background tint should pass AA guidelines`, async ({ page }) => {
await page.setContent(
`${styleTestHelpers}
<main class="ion-color-${color}">
- <p class="ion-color-contrast ion-background-tint">Hello World</p>
+ <p class="ion-color-background-tint">Hello World</p>
</main>`,
config
);
@@ -110,12 +130,22 @@ configs({ modes: ['ionic-md'], directions: ['ltr'], palettes: ['light', 'dark']
const results = await new AxeBuilder({ page }).analyze();
expect(results.violations).toEqual([]);
});
+ }
+ });
+
+ test.describe(title('palette colors: subtle'), () => {
+ test.beforeEach(({ skip }) => {
+ skip.browser('firefox', 'Color contrast ratio is consistent across browsers');
+ skip.browser('webkit', 'Color contrast ratio is consistent across browsers');
+ });
- test(`color "${color}" on 0.08 opacity background should pass AA guidelines`, async ({ page }) => {
+ for (const color of colors) {
+ // 5) The subtle foreground color as the text color against the default background color
+ test(`subtle foreground color "${color}" should pass AA guidelines`, async ({ page }) => {
await page.setContent(
`${styleTestHelpers}
<main class="ion-color-${color}">
- <p class="ion-color ion-background-opacity-08">Hello World</p>
+ <p class="ion-color-subtle">Hello World</p>
</main>`,
config
);
@@ -124,11 +154,12 @@ configs({ modes: ['ionic-md'], directions: ['ltr'], palettes: ['light', 'dark']
expect(results.violations).toEqual([]);
});
- test(`color "${color}" on 0.12 opacity background should pass AA guidelines`, async ({ page }) => {
+ // 6) The subtle contrast color as the text color against the subtle base color as the background color
+ test(`subtle contrast color on "${color}" subtle background should pass AA guidelines`, async ({ page }) => {
await page.setContent(
`${styleTestHelpers}
<main class="ion-color-${color}">
- <p class="ion-color ion-background-opacity-12">Hello World</p>
+ <p class="ion-color-subtle-background">Hello World</p>
</main>`,
config
);
@@ -137,12 +168,29 @@ configs({ modes: ['ionic-md'], directions: ['ltr'], palettes: ['light', 'dark']
expect(results.violations).toEqual([]);
});
+ // 7) The subtle contrast color as the text color against the subtle shade color as the background color
// TODO(ROU-10778): Re-enable this test once the colors have been finalized
- test.skip(`color "${color}" on 0.16 opacity background should pass AA guidelines`, async ({ page }) => {
+ test.skip(`subtle contrast color on "${color}" subtle background shade should pass AA guidelines`, async ({
+ page,
+ }) => {
+ await page.setContent(
+ `${styleTestHelpers}
+ <main class="ion-color-${color}">
+ <p class="ion-color-subtle-background-shade">Hello World</p>
+ </main>`,
+ config
+ );
+
+ const results = await new AxeBuilder({ page }).analyze();
+ expect(results.violations).toEqual([]);
+ });
+
+ // 8) The subtle contrast color as the text color against the subtle tint color as the background color
+ test(`subtle contrast color on "${color}" subtle background tint should pass AA guidelines`, async ({ page }) => {
await page.setContent(
`${styleTestHelpers}
<main class="ion-color-${color}">
- <p class="ion-color ion-background-opacity-16">Hello World</p>
+ <p class="ion-color-subtle-background-tint">Hello World</p>
</main>`,
config
);
@@ -153,3 +201,36 @@ configs({ modes: ['ionic-md'], directions: ['ltr'], palettes: ['light', 'dark']
}
});
});
+
+configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ config, title }) => {
+ test.describe(title('palette colors: custom'), () => {
+ test(`overriding secondary color with foreground variant should style text properly`, async ({ page }) => {
+ await page.setContent(
+ `${styleTestHelpers}
+
+ <style>
+ :root {
+ --ion-color-secondary: #ff6c52;
+ --ion-color-secondary-rgb: 255,108,82;
+ --ion-color-secondary-contrast: #000000;
+ --ion-color-secondary-contrast-rgb: 0,0,0;
+ --ion-color-secondary-shade: #e05f48;
+ --ion-color-secondary-tint: #ff7b63;
+ --ion-color-secondary-foreground: #e05f48;
+ }
+ </style>
+
+ <main class="ion-color-secondary">
+ <p class="ion-color">Hello World</p>
+ </main>`,
+ config
+ );
+
+ const paragraph = await page.locator('p');
+ const color = await paragraph.evaluate((el) => getComputedStyle(el).color);
+
+ // Ensure the color matches --ion-color-secondary-foreground
+ expect(color).toBe('rgb(224, 95, 72)');
+ });
+ });
+});
diff --git a/core/src/themes/native/native.theme.default.scss b/core/src/themes/native/native.theme.default.scss
index 80beeb17bec..22edeb872f6 100644
--- a/core/src/themes/native/native.theme.default.scss
+++ b/core/src/themes/native/native.theme.default.scss
@@ -7,10 +7,12 @@
// Default Ionic Colors
// -------------------------------------------------------------------------------------------
// Color map should provide
-// - base: main color to be used.
-// - contrast: Color that will provide readable text against the base color
-// - shade: 12% darker version of the base color (mix with black)
-// - tint: 10% lighter version of the base color (mix with white)
+// - base: The main color used for backgrounds
+// - base-rgb: The base color in RGB format
+// - contrast: A color that ensures readable text on the base color
+// - contrast-rgb: The contrast color in RGB format
+// - shade: 12% darker version of the base color (mix with black), used for pressed/active states
+// - tint: 10% lighter version of the base color (mix with white), used for focused/hover states
$primary: #0054e9;
$secondary: #0163aa;
@@ -24,58 +26,94 @@ $dark: #222428;
$colors: (
primary: (
- base: $primary,
- contrast: #fff,
- shade: get-color-shade($primary),
- tint: get-color-tint($primary),
+ bold: (
+ base: $primary,
+ base-rgb: color-to-rgb-list($primary),
+ contrast: #fff,
+ contrast-rgb: color-to-rgb-list(#fff),
+ shade: get-color-shade($primary),
+ tint: get-color-tint($primary),
+ ),
),
secondary: (
- base: $secondary,
- contrast: #fff,
- shade: get-color-shade($secondary),
- tint: get-color-tint($secondary),
+ bold: (
+ base: $secondary,
+ base-rgb: color-to-rgb-list($secondary),
+ contrast: #fff,
+ contrast-rgb: color-to-rgb-list(#fff),
+ shade: get-color-shade($secondary),
+ tint: get-color-tint($secondary),
+ ),
),
tertiary: (
- base: $tertiary,
- contrast: #fff,
- shade: get-color-shade($tertiary),
- tint: get-color-tint($tertiary),
+ bold: (
+ base: $tertiary,
+ base-rgb: color-to-rgb-list($tertiary),
+ contrast: #fff,
+ contrast-rgb: color-to-rgb-list(#fff),
+ shade: get-color-shade($tertiary),
+ tint: get-color-tint($tertiary),
+ ),
),
success: (
- base: $success,
- contrast: #000,
- shade: get-color-shade($success),
- tint: get-color-tint($success),
+ bold: (
+ base: $success,
+ base-rgb: color-to-rgb-list($success),
+ contrast: #000,
+ contrast-rgb: color-to-rgb-list(#000),
+ shade: get-color-shade($success),
+ tint: get-color-tint($success),
+ ),
),
warning: (
- base: $warning,
- contrast: #000,
- shade: get-color-shade($warning),
- tint: get-color-tint($warning),
+ bold: (
+ base: $warning,
+ base-rgb: color-to-rgb-list($warning),
+ contrast: #000,
+ contrast-rgb: color-to-rgb-list(#000),
+ shade: get-color-shade($warning),
+ tint: get-color-tint($warning),
+ ),
),
danger: (
- base: $danger,
- contrast: #fff,
- shade: get-color-shade($danger),
- tint: get-color-tint($danger),
+ bold: (
+ base: $danger,
+ base-rgb: color-to-rgb-list($danger),
+ contrast: #fff,
+ contrast-rgb: color-to-rgb-list(#fff),
+ shade: get-color-shade($danger),
+ tint: get-color-tint($danger),
+ ),
),
light: (
- base: $light,
- contrast: #000,
- shade: get-color-shade($light),
- tint: get-color-tint($light),
+ bold: (
+ base: $light,
+ base-rgb: color-to-rgb-list($light),
+ contrast: #000,
+ contrast-rgb: color-to-rgb-list(#000),
+ shade: get-color-shade($light),
+ tint: get-color-tint($light),
+ ),
),
medium: (
- base: $medium,
- contrast: #fff,
- shade: get-color-shade($medium),
- tint: get-color-tint($medium),
+ bold: (
+ base: $medium,
+ base-rgb: color-to-rgb-list($medium),
+ contrast: #fff,
+ contrast-rgb: color-to-rgb-list(#fff),
+ shade: get-color-shade($medium),
+ tint: get-color-tint($medium),
+ ),
),
dark: (
- base: $dark,
- contrast: #fff,
- shade: get-color-shade($dark),
- tint: get-color-tint($dark),
+ bold: (
+ base: $dark,
+ base-rgb: color-to-rgb-list($dark),
+ contrast: #fff,
+ contrast-rgb: color-to-rgb-list(#fff),
+ shade: get-color-shade($dark),
+ tint: get-color-tint($dark),
+ ),
),
);
diff --git a/core/src/themes/native/test/colors/index.html b/core/src/themes/native/test/colors/index.html
index 10ee3bf2430..aa535a56e49 100644
--- a/core/src/themes/native/test/colors/index.html
+++ b/core/src/themes/native/test/colors/index.html
@@ -46,7 +46,7 @@
}
.ion-color {
- color: var(--ion-color-base);
+ color: var(--ion-color-foreground);
}
.ion-color-background {
@@ -66,17 +66,17 @@
.ion-color-background-08 {
background: rgb(var(--ion-color-base-rgb), 0.08);
- color: var(--ion-color-base);
+ color: var(--ion-color-foreground);
}
.ion-color-background-12 {
background: rgb(var(--ion-color-base-rgb), 0.12);
- color: var(--ion-color-base);
+ color: var(--ion-color-foreground);
}
.ion-color-background-16 {
background: rgb(var(--ion-color-base-rgb), 0.16);
- color: var(--ion-color-base);
+ color: var(--ion-color-foreground);
}
</style>
</head>
diff --git a/core/src/themes/native/test/colors/theme.e2e.ts b/core/src/themes/native/test/colors/theme.e2e.ts
index 0595e39dcdc..10be53211c3 100644
--- a/core/src/themes/native/test/colors/theme.e2e.ts
+++ b/core/src/themes/native/test/colors/theme.e2e.ts
@@ -31,7 +31,7 @@ const styleTestHelpers = `
background: rgba(var(--ion-color-base-rgb), 0.16);
}
.ion-color {
- color: var(--ion-color-base);
+ color: var(--ion-color-foreground);
}
.ion-color-contrast {
color: var(--ion-color-contrast);
@@ -52,7 +52,7 @@ const styleTestHelpers = `
configs({ modes: ['md'], directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ config, title }) => {
const colors = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
- test.describe(title('theme'), () => {
+ test.describe(title('palette colors: bold'), () => {
test.beforeEach(({ skip }) => {
skip.browser('firefox', 'Color contrast ratio is consistent across browsers');
skip.browser('webkit', 'Color contrast ratio is consistent across browsers');
@@ -227,3 +227,66 @@ configs({ modes: ['md'], directions: ['ltr'], palettes: ['high-contrast', 'high-
});
}
);
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
+ test.describe(title('colors: custom'), () => {
+ // TODO(): this test can be removed when foreground is a required variant
+ // for ios and md themes
+ test(`overriding secondary color without foreground variant should style text properly`, async ({ page }) => {
+ await page.setContent(
+ `${styleTestHelpers}
+
+ <style>
+ :root {
+ --ion-color-secondary: #ff6c52;
+ --ion-color-secondary-rgb: 255,108,82;
+ --ion-color-secondary-contrast: #000000;
+ --ion-color-secondary-contrast-rgb: 0,0,0;
+ --ion-color-secondary-shade: #e05f48;
+ --ion-color-secondary-tint: #ff7b63;
+ }
+ </style>
+
+ <main class="ion-color-secondary">
+ <p class="ion-color">Hello World</p>
+ </main>`,
+ config
+ );
+
+ const paragraph = await page.locator('p');
+ const color = await paragraph.evaluate((el) => getComputedStyle(el).color);
+
+ // Ensure the color matches --ion-color-secondary
+ expect(color).toBe('rgb(255, 108, 82)');
+ });
+
+ test(`overriding secondary color with foreground variant should style text properly`, async ({ page }) => {
+ await page.setContent(
+ `${styleTestHelpers}
+
+ <style>
+ :root {
+ --ion-color-secondary: #ff6c52;
+ --ion-color-secondary-rgb: 255,108,82;
+ --ion-color-secondary-contrast: #000000;
+ --ion-color-secondary-contrast-rgb: 0,0,0;
+ --ion-color-secondary-shade: #e05f48;
+ --ion-color-secondary-tint: #ff7b63;
+ --ion-color-secondary-foreground: #e05f48;
+ }
+ </style>
+
+ <main class="ion-color-secondary">
+ <p class="ion-color">Hello World</p>
+ </main>`,
+ config
+ );
+
+ const paragraph = await page.locator('p');
+ const color = await paragraph.evaluate((el) => getComputedStyle(el).color);
+
+ // Ensure the color matches --ion-color-secondary-foreground
+ expect(color).toBe('rgb(224, 95, 72)');
+ });
+ });
+});