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)');
+    });
+  });
+});