diff --git a/core/scripts/testing/styles.css b/core/scripts/testing/styles.css
index c614502482..e336d995c3 100644
--- a/core/scripts/testing/styles.css
+++ b/core/scripts/testing/styles.css
@@ -56,7 +56,7 @@ html.ios.ios {
html.ionic,
html.ionic.ios,
html.ionic.md {
- --ionic-global-background-color: var(--background);
+ --ion-background-color: var(--background);
--ion-font-family: initial;
}
diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-ionic-md-ltr-light-Mobile-Chrome-linux.png
index c3fd547399..8b02603dcb 100644
Binary files a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 77ab887502..96517af6ff 100644
Binary files a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-ionic-md-ltr-light-Mobile-Safari-linux.png
index b8a4ff74d9..116c8b4f48 100644
Binary files a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-ltr-light-Mobile-Chrome-linux.png
index ac99223a9f..a07e1a73c3 100644
Binary files a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 5f2c612ac9..1c23c01ea8 100644
Binary files a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-ltr-light-Mobile-Safari-linux.png
index aa1f0ba935..c88f104157 100644
Binary files a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 6b254e5e8d..eddcd411a8 100644
Binary files a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 7602fddaec..6ba4fdd358 100644
Binary files a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-rtl-light-Mobile-Safari-linux.png
index 09299b7d94..4b8476caa6 100644
Binary files a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 0af4684a7c..f280660724 100644
Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 835923bc1e..b9435fe708 100644
Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-ionic-md-ltr-light-Mobile-Safari-linux.png
index c074234ede..7f83f35168 100644
Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png
index c3fd547399..8b02603dcb 100644
Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 77ab887502..96517af6ff 100644
Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-ionic-md-ltr-light-Mobile-Safari-linux.png
index b8a4ff74d9..116c8b4f48 100644
Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 3381b75189..b5c6ffceec 100644
Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-ionic-md-ltr-light-Mobile-Firefox-linux.png
index e233782a58..aa3b0dac6c 100644
Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-ionic-md-ltr-light-Mobile-Safari-linux.png
index b6ec650fcd..0d3a026be2 100644
Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png
index ce7077a341..9e85eb58c6 100644
Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png
index c802393cac..8f00b6f91d 100644
Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-ionic-md-ltr-light-Mobile-Safari-linux.png
index dbeec485bc..de794aa245 100644
Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png
index d5f446023f..25fb910d32 100644
Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png
index f7a23b125f..d2e3389272 100644
Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-ionic-md-ltr-light-Mobile-Safari-linux.png
index 908bcb1d89..e6ac38163c 100644
Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 6a43af7e94..972171dfd6 100644
Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 52c75483d1..97d86b57bf 100644
Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-ionic-md-ltr-light-Mobile-Safari-linux.png
index 13f9f97c12..1e48040f52 100644
Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 9cd4dd7932..81a79c6658 100644
Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png
index a51dd78b11..a01c47c7af 100644
Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-ionic-md-ltr-light-Mobile-Safari-linux.png
index 39b8b98e7c..b9de4abb84 100644
Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 82b95add1c..711a6ac833 100644
Binary files a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 5d8ec45269..0c45153c6f 100644
Binary files a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Safari-linux.png
index 97108ebcae..9689484cfd 100644
Binary files a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/css/ionic/core.ionic.scss b/core/src/css/ionic/core.ionic.scss
index c37196451b..a8080f2340 100644
--- a/core/src/css/ionic/core.ionic.scss
+++ b/core/src/css/ionic/core.ionic.scss
@@ -4,9 +4,6 @@
// --------------------------------------------------
:root {
- --ionic-global-background-color: #{globals.$ion-primitives-neutral-100};
- --ionic-global-text-color: #{globals.$ion-primitives-neutral-900};
-
/**
* Set the theme colors from the
* `ionic.theme.default.scss` file.
@@ -26,8 +23,8 @@ html {
}
body {
- background: var(--ionic-global-background-color);
- color: var(--ionic-global-text-color);
+ background: var(--ion-background-color);
+ color: var(--ion-text-color);
}
body.backdrop-no-scroll {
@@ -312,7 +309,7 @@ ion-accordion > [slot="header"] .ion-accordion-toggle-icon {
}
ion-accordion.accordion-animated > [slot="header"] .ion-accordion-toggle-icon {
- transition: 300ms transform cubic-bezier(0.25, 0.8, 0.5, 1);
+ transition: globals.$ion-transition-time-300 transform globals.$ion-transition-curve-quick;
}
@media (prefers-reduced-motion: reduce) {
@@ -376,8 +373,8 @@ ion-input input::-webkit-date-and-time-value {
* sized grid interface.
*/
.ion-datetime-button-overlay ion-datetime.datetime-grid {
- width: 320px;
- min-height: 320px;
+ width: calc(#{globals.$ion-scale-7400} + #{globals.$ion-space-600});
+ min-height: calc(#{globals.$ion-scale-7400} + #{globals.$ion-space-600});
}
// Popover Styles
diff --git a/core/src/css/ionic/ionic-swiper.ionic.scss b/core/src/css/ionic/ionic-swiper.ionic.scss
index 9de90bbf89..c81df99136 100644
--- a/core/src/css/ionic/ionic-swiper.ionic.scss
+++ b/core/src/css/ionic/ionic-swiper.ionic.scss
@@ -1,15 +1,15 @@
-@use "../../foundations/ionic.vars.scss" as tokens;
+@use "../../themes/ionic/ionic.globals.scss" as globals;
// Slides
// --------------------------------------------------
.swiper {
- --bullet-background: #{tokens.$ion-primitives-neutral-800};
- --bullet-background-active: #{tokens.$ion-semantics-primary-base};
- --progress-bar-background: rgba(#010408, 0.25);
- --progress-bar-background-active: #{tokens.$ion-semantics-primary-600};
- --scroll-bar-background: rgba(#010408, 0.1);
- --scroll-bar-background-active: rgba(#010408, 0.5);
+ --bullet-background: #{globals.$ion-primitives-neutral-800};
+ --bullet-background-active: #{globals.$ion-semantics-primary-base};
+ --progress-bar-background: #{globals.$ion-bg-neutral-boldest-default-rgb};
+ --progress-bar-background-active: #{globals.$ion-semantics-primary-600};
+ --scroll-bar-background: #{globals.$ion-bg-neutral-boldest-default-rgb};
+ --scroll-bar-background-active: #{globals.$ion-bg-neutral-boldest-press-rgb};
/**
* @prop --bullet-background: Background of the pagination bullets
* @prop --bullet-background-active: Background of the active pagination bullet
@@ -70,6 +70,8 @@
}
.swiper .swiper-slide {
+ @include globals.typography(globals.$ion-heading-h6-bold);
+
// Center slide text vertically
display: flex;
position: relative;
@@ -81,8 +83,6 @@
width: 100%;
height: 100%;
- font-size: 18px;
-
text-align: center;
box-sizing: border-box;
}
diff --git a/core/src/css/ionic/link.ionic.scss b/core/src/css/ionic/link.ionic.scss
index 1312ace329..8862faf083 100644
--- a/core/src/css/ionic/link.ionic.scss
+++ b/core/src/css/ionic/link.ionic.scss
@@ -9,13 +9,13 @@
gap: globals.$ion-space-100;
- transition: color 0.2s ease-in-out;
+ transition: color globals.$ion-transition-time-200 ease-in-out;
font-weight: globals.$ion-font-weight-regular;
text-decoration-color: inherit;
- text-underline-offset: 2px;
+ text-underline-offset: globals.$ion-scale-050;
cursor: pointer;
@@ -51,8 +51,7 @@
&:focus,
&.ion-focused {
- outline: 2px solid globals.$ion-text-link-default;
- outline-offset: 2px;
+ @include globals.focused-state(null, null, globals.$ion-text-link-default);
text-decoration: underline;
}
@@ -97,10 +96,7 @@ a.ionic-link,
&:focus,
&.ion-focused {
- outline: 2px solid globals.$ion-text-link-default;
- outline-offset: 2px;
-
- color: currentColor;
+ @include globals.focused-state(null, null, globals.$ion-text-link-default);
text-decoration: none;
}
diff --git a/core/src/themes/ionic/test/colors/index.html b/core/src/themes/ionic/test/colors/index.html
index b2f0048c79..755d64c0e9 100644
--- a/core/src/themes/ionic/test/colors/index.html
+++ b/core/src/themes/ionic/test/colors/index.html
@@ -7,7 +7,7 @@
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
-
+