diff --git a/.github/workflows/actions/build-core-stencil-prerelease/action.yml b/.github/workflows/actions/build-core-stencil-prerelease/action.yml
index 070f84c4c3e..e685e789182 100644
--- a/.github/workflows/actions/build-core-stencil-prerelease/action.yml
+++ b/.github/workflows/actions/build-core-stencil-prerelease/action.yml
@@ -29,4 +29,4 @@ runs:
       with:
         name: ionic-core
         output: core/CoreBuild.zip
-        paths: core/dist core/components core/src/foundations core/css core/hydrate core/loader core/src/components.d.ts
+        paths: core/dist core/components core/src/foundations core/css core/themes core/hydrate core/loader core/src/components.d.ts
diff --git a/.github/workflows/actions/build-core/action.yml b/.github/workflows/actions/build-core/action.yml
index b0ec39decf8..bd63eced900 100644
--- a/.github/workflows/actions/build-core/action.yml
+++ b/.github/workflows/actions/build-core/action.yml
@@ -33,4 +33,4 @@ runs:
         output: core/CoreBuild.zip
         # Include generated proxy files from Stencil output targets so
         # framework builds can detect when they need to be updated
-        paths: core/dist core/components core/src/foundations core/css core/hydrate core/loader core/src/components.d.ts core/api.txt packages/angular/src/directives/proxies.ts packages/angular/src/directives/proxies-list.ts packages/angular/standalone/src/directives/proxies.ts packages/vue/src/proxies.ts packages/react/src/components/proxies.ts packages/react/src/components/inner-proxies.ts packages/react/src/components/routing-proxies.ts
+        paths: core/dist core/components core/src/foundations core/css core/themes core/hydrate core/loader core/src/components.d.ts core/api.txt packages/angular/src/directives/proxies.ts packages/angular/src/directives/proxies-list.ts packages/angular/standalone/src/directives/proxies.ts packages/vue/src/proxies.ts packages/react/src/components/proxies.ts packages/react/src/components/inner-proxies.ts packages/react/src/components/routing-proxies.ts
diff --git a/.gitignore b/.gitignore
index e610d8a11dd..820ec84a8c0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,6 +23,7 @@ temp/
 core/theme-builder/
 core/test-components/
 core/css/
+core/themes/
 $RECYCLE.BIN/
 
 .DS_Store
diff --git a/core/package.json b/core/package.json
index 7869748e203..6c0ba934a41 100644
--- a/core/package.json
+++ b/core/package.json
@@ -76,11 +76,12 @@
     "stylelint-order": "^4.1.0"
   },
   "scripts": {
-    "build": "npm run clean && npm run build.css && stencil build --es5 --docs-json dist/docs.json",
+    "build": "npm run clean && npm run build.css && npm run build.themes && stencil build --es5 --docs-json dist/docs.json",
     "build.css": "npm run css.sass && npm run css.minify",
     "build.debug": "npm run clean && stencil build --debug",
     "build.docs.json": "stencil build --docs-json dist/docs.json",
     "build.tokens": "npx build.tokens --config scripts/tokens/index.mjs && npm run prettier.tokens",
+    "build.themes": "esbuild src/themes/*/*.tokens.ts --bundle --format=esm --platform=browser --target=es2017 --outdir=themes --outbase=src/themes && esbuild src/utils/theme.ts --bundle --format=esm --platform=browser --target=es2017 --outfile=themes/utils/theme.js",
     "clean": "node scripts/clean.js",
     "css.minify": "cleancss -O2 -o ./css/ionic.bundle.css ./css/ionic.bundle.css",
     "css.sass": "sass --embed-sources --style compressed src/css:./css",
@@ -94,7 +95,7 @@
     "prerender.e2e": "node scripts/testing/prerender.js",
     "prettier": "prettier \"./src/**/*.{html,ts,tsx,js,jsx,scss}\"",
     "prettier.tokens": "prettier \"./src/foundations/*.{scss, html}\" --write --cache",
-    "start": "npm run build.css && stencil build --dev --watch --serve",
+    "start": "npm run build.css && npm run build.themes && stencil build --dev --watch --serve",
     "test": "npm run test.spec && npm run test.e2e",
     "test.spec": "stencil test --spec --max-workers=2",
     "test.e2e": "npx playwright test",
diff --git a/core/scripts/clean.js b/core/scripts/clean.js
index e6d0a8ceb74..d59ef415a05 100644
--- a/core/scripts/clean.js
+++ b/core/scripts/clean.js
@@ -4,7 +4,8 @@ const path = require('path');
 
 const cleanDirs = [
   'dist',
-  'css'
+  'css',
+  'themes'
 ];
 
 cleanDirs.forEach(dir => {
diff --git a/core/scripts/testing/scripts.js b/core/scripts/testing/scripts.js
index 1fe2acdf717..72b795f099e 100644
--- a/core/scripts/testing/scripts.js
+++ b/core/scripts/testing/scripts.js
@@ -1,3 +1,4 @@
+const DEFAULT_THEME = 'md';
 
 (function() {
 
@@ -15,28 +16,15 @@
   }
 
   /**
-   * The term `palette` is used to as a param to match the
-   * Ionic docs, plus here is already a `ionic:theme` query being
-   * used for `md`, `ios`, and `ionic` themes.
-   */
-  const palette = window.location.search.match(/palette=([a-z]+)/);
-  if (palette && palette[1] !== 'light') {
-    const linkTag = document.createElement('link');
-    linkTag.setAttribute('rel', 'stylesheet');
-    linkTag.setAttribute('type', 'text/css');
-    linkTag.setAttribute('href', `/css/palettes/${palette[1]}.always.css`);
-    document.head.appendChild(linkTag);
-  }
-
-  /**
-  * The `ionic` theme uses a different stylesheet than the `iOS` and `md` themes.
-  * This is to ensure that the `ionic` theme is loaded when the `ionic:theme=ionic`
-  * or when the HTML tag has the `theme="ionic"` attribute. This is useful for
-  * the snapshot tests, where the `ionic` theme is not loaded by default.
+  * The `theme` query param is used to load a specific theme.
+  * This can be `ionic`, `ios`, or `md`. Default to `md` for tests.
   */
-  const themeQuery = window.location.search.match(/ionic:theme=([a-z]+)/);
+  const themeQuery = window.location.search.match(/ionic:theme=([a-z0-9]+)/i);
   const themeAttr = document.documentElement.getAttribute('theme');
+  const themeName = themeQuery?.[1] || themeAttr || DEFAULT_THEME;
 
+  // TODO(): Remove this when the tokens are working for all components
+  // and the themes all use the same bundle
   if ((themeQuery && themeQuery[1] === 'ionic') || themeAttr === 'ionic') {
     const ionicThemeLinkTag = document.querySelector('link[href*="css/ionic/bundle.ionic.css"]');
 
@@ -54,6 +42,51 @@
     }
   }
 
+  /**
+   * The `palette` query param is used to load a specific palette
+   * for the theme. This can be `light`, `dark`, `high-contrast`,
+   * or `high-contrast-dark`. Default to `light` for tests.
+   */
+  const paletteQuery = window.location.search.match(/palette=([a-z]+)/);
+  const paletteName = paletteQuery?.[1] || 'light';
+
+  // Load theme tokens if the theme is valid
+  const validThemes = ['ionic', 'ios', 'md'];
+  if (themeName && validThemes.includes(themeName)) {
+    loadThemeTokens(themeName, paletteName);
+  } else if(themeName) {
+    console.warn(
+      `Unsupported theme "${themeName}". Supported themes are: ${validThemes.join(', ')}. Defaulting to ${DEFAULT_THEME}.`
+    );
+  }
+
+  async function loadThemeTokens(themeName, paletteName) {
+    try {
+      // Load the default tokens for the theme
+      const defaultTokens = await import(`/themes/${themeName}/default.tokens.js`);
+      const theme = defaultTokens.defaultTheme;
+
+      // If a specific palette is requested, modify the palette structure
+      // to set the enabled property to 'always'
+      if (paletteName === 'dark' && theme.palette?.dark) {
+        theme.palette.dark.enabled = 'always';
+      }
+
+      // Apply the theme tokens to Ionic config
+      window.Ionic = window.Ionic || {};
+      window.Ionic.config = window.Ionic.config || {};
+      window.Ionic.config.customTheme = theme;
+
+      // Re-apply the global theme
+      if (window.Ionic.config.get && window.Ionic.config.set) {
+        const themeModule = await import('/themes/utils/theme.js');
+        themeModule.applyGlobalTheme(theme);
+      }
+    } catch (error) {
+      console.error(`Failed to load theme tokens for ${themeName}:`, error);
+    }
+  }
+
   window.Ionic = window.Ionic || {};
   window.Ionic.config = window.Ionic.config || {};
 
diff --git a/core/scripts/testing/styles.css b/core/scripts/testing/styles.css
index 295303dbd1c..708a47e0680 100644
--- a/core/scripts/testing/styles.css
+++ b/core/scripts/testing/styles.css
@@ -36,31 +36,21 @@
   --ion-dynamic-font: var(--ion-default-dynamic-font);
 }
 
+/* TODO(FW-6745): Remove this after adding the md tokens */
 :root,
 html,
-html.md.md {
+html.md.md:not(.ionic) {
   --ion-font-family: Roboto, "mdTestingFont", sans-serif;
   font-family: Roboto, "mdTestingFont", sans-serif;
 }
 
+/* TODO(FW-6744): Remove this after adding the ios tokens */
 :root.ios.ios,
 html.ios.ios {
   --ion-font-family: -apple-system, BlinkMacSystemFont, "iosTestingFont", sans-serif;
   font-family: -apple-system, BlinkMacSystemFont, "iosTestingFont", sans-serif;
 }
 
-/* Override above styles for testing scopes */
-:root.ionic,
-:root.ionic.ios,
-:root.ionic.md,
-html.ionic,
-html.ionic.ios,
-html.ionic.md {
-  /* TODO: remove this with the ionic theme updates */
-  --ion-background-color: var(--background);
-  --ion-font-family: initial;
-}
-
 /**
  * Button styles should only be applied
  * to native buttons that are not part of the
diff --git a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts
index 0a2cc851910..30b2fecb292 100644
--- a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts
+++ b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts
@@ -9,8 +9,8 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           `
           <style>
             /* Background styles to show the border radius */
-            :root {
-              --background: #ccc7c7;
+            .ionic {
+              --ion-background-color: #ccc7c7;
             }
           </style>
           <ion-accordion-group>
@@ -47,8 +47,8 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           `
           <style>
             /* Background styles to show the border radius */
-            :root {
-              --background: #ccc7c7;
+            .ionic {
+              --ion-background-color: #ccc7c7;
             }
           </style>
           <ion-accordion-group value="first">
@@ -87,8 +87,8 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           `
           <style>
             /* Background styles to show the border radius */
-            :root {
-              --background: #ccc7c7;
+            .ionic {
+              --ion-background-color: #ccc7c7;
             }
           </style>
           <ion-accordion-group expand="inset">
@@ -125,8 +125,8 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           `
           <style>
             /* Background styles to show the border radius */
-            :root {
-              --background: #ccc7c7;
+            .ionic {
+              --ion-background-color: #ccc7c7;
             }
           </style>
           <ion-accordion-group value="first" expand="inset">
diff --git a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts
index e3a3f774717..d325a38af5b 100644
--- a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts
+++ b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts
@@ -9,8 +9,8 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           `
           <style>
             /* Background styles to show the border radius */
-            :root {
-              --background: #222;
+            .ionic {
+              --ion-background-color: #222;
             }
           </style>
 
diff --git a/core/src/components/accordion/test/shape/accordion.e2e.ts b/core/src/components/accordion/test/shape/accordion.e2e.ts
index 66d4604a4fc..5dcf6b7d589 100644
--- a/core/src/components/accordion/test/shape/accordion.e2e.ts
+++ b/core/src/components/accordion/test/shape/accordion.e2e.ts
@@ -9,8 +9,8 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           `
           <style>
             /* Background styles to show the border radius */
-            :root {
-              --background: #222;
+            .ionic {
+              --ion-background-color: #222;
             }
           </style>
 
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 0ed6ee88000..d52234c36dd 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 f56113b398e..436673c37b0 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 0af58b78fae..a7b87524af3 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 23e45c60e97..c23c6c5e685 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 0853740b400..4b0522452c3 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 0eabd546d8b..068b19ea332 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-avatar-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Safari-linux.png
index ee42c239a1a..eed25cd7934 100644
Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-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 34097f83c41..b2f8f3b4537 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 727c9de455a..4a23b27548a 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 87c76a158ac..81090f30082 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 0bd619dff5f..7b2c8664f95 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 6ed1f528b80..e2e10959452 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 ab172730f8c..d05621d3d6b 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/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 05747dda212..2f09c6e474c 100644
Binary files a/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 474638cec0d..3921bbbaa6a 100644
Binary files a/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png
index 75067d507e5..89509c32abe 100644
Binary files a/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 6283ee166f8..52108abbc2b 100644
Binary files a/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 726d4f2a4c9..da5298337cf 100644
Binary files a/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png
index afa1b152477..c64acd627b0 100644
Binary files a/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png
index e625e055aac..746d98ffc78 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-small-size-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-small-size-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 8f70214f29b..d532960ca72 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-small-size-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-small-size-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png
index e625e055aac..746d98ffc78 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-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-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 48febda20fb..6f16a83381a 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 7dec2bdc550..9c076a87c21 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 f3fe49a7c0d..ee8dea15807 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 45e5d06f7ae..4d27c81cc57 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 70acab876a1..366385b4251 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 3102989c8fb..b87ee6b8462 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 c1e3c33ee74..32bfc3115d4 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 e18a75136cc..a9ce0b6c3ec 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 97eff68923d..1feeadf2739 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 a8b17a4791a..5af9a875310 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 36f0b39dba8..af6ccca4d57 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 3f9c16c944c..c7234573d16 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 f5f8fa02bd4..1e5a5c1a83c 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 5372d54164f..387e5e2e91c 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 01b8e7cf179..3e2614b3d83 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 f6c410726d7..8dc6ab76c46 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 edabdcdaabe..ccaf5eede00 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 6fd094c6ef6..e4d4cd250a0 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 b8e018aaad4..c7c23f4317e 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 415ac766792..65719ef097b 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 09e6d829921..1493d92687d 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 e279835197c..b33b81ed713 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 ca074ba2410..f08fe8d27ba 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 431e9d1223a..cf18e580324 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 535eb0e7430..f200561a2bf 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 75549dfff55..eab83c75c27 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 1f1658ec350..823978d3707 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 166a7695e17..2ce0a910e94 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 3aa8bb85d6c..c54a4edfa42 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 e85b1014a7b..bfc5cd8922d 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 9e2bc584379..e01c876487d 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 98c3966e9bb..72fd95f9fa9 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 e76fd03332e..96e022eb7bd 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-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 48c53ad2892..b4e33a8ae2a 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 555421a53f5..fd70900a8ae 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 95f6bf41f8a..4d3331e6bad 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 6ecffba5632..0e3025a0f79 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 9a93f1a1f5d..ccd7040918b 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 445a377d9a2..b15fa46f784 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 893d9a54d09..5549cef1aea 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 b97b6483278..c1916ef28bb 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 f516872dee5..0aae6a29150 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/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 5dcb1f428c4..bc41a89108e 100644
Binary files a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png
index d2359b6aae5..a908d4bb4b6 100644
Binary files a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png
index 1bdf444343b..72218447f57 100644
Binary files a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 38131b240e4..a7b9a077943 100644
Binary files a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 2bb05ee71ce..cb62d574b64 100644
Binary files a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png
index 1d67a81c815..773868a466f 100644
Binary files a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 2e44560fab8..85752e73f3b 100644
Binary files a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 32f40090e2c..96bab8ab536 100644
Binary files a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
index e36a00b0d37..a804254716d 100644
Binary files a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-readonly-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-readonly-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 484d875d186..6b718eddda8 100644
Binary files a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-readonly-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-readonly-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-readonly-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-readonly-ionic-md-ltr-light-Mobile-Firefox-linux.png
index f7bbe8d2b6f..d1fa00c7322 100644
Binary files a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-readonly-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-readonly-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-readonly-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-readonly-ionic-md-ltr-light-Mobile-Safari-linux.png
index ded3f2016f6..25397050306 100644
Binary files a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-readonly-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-readonly-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Chrome-linux.png
index a517730186d..1c75edd1410 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 15512806e8d..1741c6053c0 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Safari-linux.png
index 98d476298f1..afcdb26af7b 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 9f2aaaa0a70..6b23ed6d6dd 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 121c068b41f..99545c10b9c 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Safari-linux.png
index 58c735b3a8b..815855e7a29 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 30b62b02c9d..528ebde36b1 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 7d0f32da3af..36a2c8043b1 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-ltr-light-Mobile-Safari-linux.png
index 7704262d1dc..a9cf6572160 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 8557b2c8a60..bcf3e12e56c 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 0ce9bbc73af..7582d0ae362 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-rtl-light-Mobile-Safari-linux.png
index 95dd5aa3b49..cc5babb382f 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-ltr-light-Mobile-Firefox-linux.png
index c549ddb29b5..7108e61318a 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-ltr-light-Mobile-Safari-linux.png
index 8b525b0f517..86698b2cde6 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 867f6571b5c..46a015d2cfe 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-rtl-light-Mobile-Safari-linux.png
index 7c5d9d67d39..e424b8a1a31 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png
index e59af93bae1..41b0dbd4152 100644
Binary files a/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 2d2cdd18d0f..b0ce8bcaa9a 100644
Binary files a/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png
index 8cc5c5368ee..081beea41f2 100644
Binary files a/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 743fb675d51..b52a42391b9 100644
Binary files a/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 482d2c6b380..338788fcabc 100644
Binary files a/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png
index b80a47d2dfe..c45480e6429 100644
Binary files a/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-subtle-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 86ce705c23a..578bc704890 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 449ba805cd6..337196be713 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 683bd122a56..0546369f08b 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 2b2379feb90..18c79b3d0b3 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 189a8ee93cb..879d3db7ee8 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 41a4347879f..68ae819c3de 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 6df11f2435e..19012aa7324 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 998aeb1f261..290a746712d 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 1e336b62a5b..a95b164164d 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 68259c3cfcd..f048d5cf475 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 1833e34643f..e29f93129d5 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 b0b4ad107a6..e5b7ecc557b 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-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 19836857e47..f341a4002b5 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-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-only-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-only-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 07452b7fd18..2374e466e4a 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-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-only-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-only-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Safari-linux.png
index 65d3eea5cd7..9f5d38deeba 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-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-only-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-only-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 3627f5dc171..67245b52699 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-Chrome-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-Chrome-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 5046a89c93f..9710e97e06a 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-only-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Safari-linux.png
index 32a7dfa86a7..5b3fd76d305 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-Safari-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-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-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 e29bc5ec2ce..e22bd29a671 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 a19ca027a50..0129935e49b 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 aff43a83051..bebc292a337 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 9e4a42480ae..2c0ea67f084 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 ba26d7db4c3..4f3e2558ab2 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 ecb9474a699..6590d3b678c 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 26b7119c7c2..3b24c98fb30 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 0353655c15f..babdd9becab 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 f0c8ea98ec7..8fa4fe94d01 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 73b35be022c..b5d0da4993e 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 1150dd7bbff..a4a39977d52 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 61ec26ce3c7..de7d20ac922 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 c5d243c3ae0..4644464ef2c 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 24e379aa4c7..a55442846f7 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 f0164571bff..16989eff571 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 26b7119c7c2..3b24c98fb30 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 0353655c15f..babdd9becab 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 f0c8ea98ec7..8fa4fe94d01 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 4f799fdfdc2..6e2778c607b 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 bbe37ae1765..6fd8a7d1ee9 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 1044c99d07e..f0f93449b0c 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/shape/progress-bar.e2e.ts b/core/src/components/progress-bar/test/shape/progress-bar.e2e.ts
index f4490902119..4d3c3ab47fb 100644
--- a/core/src/components/progress-bar/test/shape/progress-bar.e2e.ts
+++ b/core/src/components/progress-bar/test/shape/progress-bar.e2e.ts
@@ -7,8 +7,8 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
       await page.setContent(
         `
           <style>
-            :root {
-              --background: #ccc7c7;
+            .ionic {
+              --ion-background-color: #ccc7c7;
             }
 
             .container {
@@ -32,8 +32,8 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
       await page.setContent(
         `
           <style>
-            :root {
-              --background: #ccc7c7;
+            .ionic {
+              --ion-background-color: #ccc7c7;
             }
 
             .container {
diff --git a/core/src/components/radio/test/color/radio.e2e.ts-snapshots/radio-color-checked-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/color/radio.e2e.ts-snapshots/radio-color-checked-ionic-md-ltr-light-Mobile-Firefox-linux.png
index e39d894bcfd..1f26839cbe1 100644
Binary files a/core/src/components/radio/test/color/radio.e2e.ts-snapshots/radio-color-checked-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/radio/test/color/radio.e2e.ts-snapshots/radio-color-checked-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/searchbar/test/shape/searchbar.e2e.ts b/core/src/components/searchbar/test/shape/searchbar.e2e.ts
index 7b4f89d9e9b..2f19bef93d7 100644
--- a/core/src/components/searchbar/test/shape/searchbar.e2e.ts
+++ b/core/src/components/searchbar/test/shape/searchbar.e2e.ts
@@ -13,8 +13,8 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
           `
           <style>
             /* Background styles to show the border radius */
-            :root {
-              --background: #000;
+            .ionic {
+              --ion-background-color: #000;
             }
           </style>
 
diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts
index 2a710770a8c..9069cbb8e85 100644
--- a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts
+++ b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts
@@ -10,8 +10,8 @@ configs({ modes: ['ionic-md', 'md', 'ios'] }).forEach(({ title, screenshot, conf
       await page.setContent(
         `
         <style>
-          :root {
-            --background: #ccc7c7;
+          .ionic {
+            --ion-background-color: #ccc7c7;
           }
         </style>
 
diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 21cf1600fce..31341a0a6d8 100644
Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts
index 70e2bbc135d..765744bd761 100644
--- a/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts
+++ b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts
@@ -12,8 +12,8 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
         await page.setContent(
           `
           <style>
-            :root {
-              --background: #ccc7c7;
+            .ionic {
+              --ion-background-color: #ccc7c7;
             }
           </style>
 
@@ -22,12 +22,12 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
               <ion-icon name="triangle-outline"></ion-icon>
               <ion-label>Label</ion-label>
             </ion-tab-button>
-  
+
             <ion-tab-button tab="2">
               <ion-icon name="triangle-outline"></ion-icon>
               <ion-label>Label</ion-label>
             </ion-tab-button>
-  
+
             <ion-tab-button tab="3">
               <ion-icon name="triangle-outline"></ion-icon>
               <ion-label>Label</ion-label>
@@ -48,8 +48,8 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
         await page.setContent(
           `
           <style>
-            :root {
-              --background: #ccc7c7;
+            .ionic {
+              --ion-background-color: #ccc7c7;
             }
           </style>
 
@@ -58,12 +58,12 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
               <ion-icon name="triangle-outline"></ion-icon>
               <ion-label>Label</ion-label>
             </ion-tab-button>
-  
+
             <ion-tab-button tab="2">
               <ion-icon name="triangle-outline"></ion-icon>
               <ion-label>Label</ion-label>
             </ion-tab-button>
-  
+
             <ion-tab-button tab="3">
               <ion-icon name="triangle-outline"></ion-icon>
               <ion-label>Label</ion-label>
@@ -84,8 +84,8 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
         await page.setContent(
           `
           <style>
-            :root {
-              --background: #ccc7c7;
+            .ionic {
+              --ion-background-color: #ccc7c7;
             }
           </style>
 
@@ -94,12 +94,12 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
               <ion-icon name="triangle-outline"></ion-icon>
               <ion-label>Label</ion-label>
             </ion-tab-button>
-  
+
             <ion-tab-button tab="2">
               <ion-icon name="triangle-outline"></ion-icon>
               <ion-label>Label</ion-label>
             </ion-tab-button>
-  
+
             <ion-tab-button tab="3">
               <ion-icon name="triangle-outline"></ion-icon>
               <ion-label>Label</ion-label>
diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ionic-md-ltr-light-Mobile-Chrome-linux.png
index c077219fda2..3835a69db84 100644
Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ionic-md-ltr-light-Mobile-Safari-linux.png
index c1294cb2bc7..83ba57dfc7f 100644
Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 46be20f2080..b4cabe41125 100644
Binary files a/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png
index cd64a2ef029..fa1def4a7f4 100644
Binary files a/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-bold-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-bold-ionic-md-ltr-light-Mobile-Safari-linux.png
index 86025d08f1f..7153f9e1cfa 100644
Binary files a/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-bold-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-bold-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 32236156d28..6bdc5f9b3d6 100644
Binary files a/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png
index ad644ce13a7..2bd3cd19cc9 100644
Binary files a/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png
index e45b306f279..611a4833316 100644
Binary files a/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-subtle-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 818ed38ee14..4c1752ad207 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 d2eeb683ead..604822fbfc7 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-dark-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-dark-Mobile-Firefox-linux.png
index fea30fab9b9..db7f0f76e5e 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-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-dark-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-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-dark-Mobile-Safari-linux.png
index 8abee951269..eddc81b1460 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-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-dark-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-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 d80af02bdca..60f64e2b4a1 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 9581bf51acb..7aa75adf62b 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 9fdb93ca1e7..7e04035bc24 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 2e6152f3d73..46c7377b04d 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-dark-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-dark-Mobile-Firefox-linux.png
index 19ad1126a49..af16e467493 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-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-dark-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-dark-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-dark-Mobile-Safari-linux.png
index d9fc23b03f3..36625a786c7 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-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-dark-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-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 206dcbb8020..9ff1342470e 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 07cf61600c9..640f95ffac6 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 03a4929709a..02ffcd0768d 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/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-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-ionic-md-ltr-dark-Mobile-Chrome-linux.png
index b4433478c4b..1c3696cbe10 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-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-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-ionic-md-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-dark-Mobile-Firefox-linux.png
index 5d0c336e84e..a8315f8e10f 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-dark-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-dark-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-ionic-md-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-dark-Mobile-Safari-linux.png
index a5a95157ed3..7eedc35280b 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-dark-Mobile-Safari-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-dark-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-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-ionic-md-rtl-dark-Mobile-Chrome-linux.png
index f9351e56d62..f5dc1fb0d37 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-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-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-ionic-md-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-dark-Mobile-Firefox-linux.png
index 71ae4dbc6bc..0f9005f1ba3 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-dark-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-dark-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-ionic-md-rtl-dark-Mobile-Safari-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-dark-Mobile-Safari-linux.png
index ad80d2aa38c..7059474461a 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-dark-Mobile-Safari-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/global/ionic-global.ts b/core/src/global/ionic-global.ts
index 507262f3a72..4d57b33a22d 100644
--- a/core/src/global/ionic-global.ts
+++ b/core/src/global/ionic-global.ts
@@ -4,7 +4,6 @@ import { applyGlobalTheme, getCustomTheme } from '@utils/theme';
 
 import type { IonicConfig, Mode, Theme } from '../interface';
 import { defaultTheme as baseTheme } from '../themes/base/default.tokens';
-import { defaultTheme as ionicTheme } from '../themes/ionic/default.tokens';
 import type { BaseTheme } from '../themes/themes.interfaces';
 import { shouldUseCloseWatcher } from '../utils/hardware-back-button';
 import { isPlatform, setupPlatforms } from '../utils/platform';
@@ -156,11 +155,7 @@ export const initialize = (userConfig: IonicConfig = {}) => {
     config.set('customTheme', combinedTheme);
   } else {
     applyGlobalTheme(baseTheme);
-  }
-
-  // TODO(): remove this when we update the ionic theme
-  if (defaultTheme === 'ionic') {
-    applyGlobalTheme(ionicTheme);
+    config.set('customTheme', baseTheme);
   }
 
   if (config.getBoolean('_testing')) {
diff --git a/core/src/themes/base/dark.tokens.ts b/core/src/themes/base/dark.tokens.ts
index 0a185044154..1b611610c66 100644
--- a/core/src/themes/base/dark.tokens.ts
+++ b/core/src/themes/base/dark.tokens.ts
@@ -161,4 +161,62 @@ export const darkTheme: DarkTheme = {
       },
     },
   },
+
+  backgroundColor: '#000000',
+  backgroundColorRgb: '0, 0, 0',
+  textColor: '#ffffff',
+  textColorRgb: '255, 255, 255',
+
+  backgroundColorStep: {
+    50: '#0d0d0d',
+    100: '#1a1a1a',
+    150: '#262626',
+    200: '#333333',
+    250: '#404040',
+    300: '#4d4d4d',
+    350: '#595959',
+    400: '#666666',
+    450: '#737373',
+    500: '#898989',
+    550: '#8c8c8c',
+    600: '#999999',
+    650: '#a6a6a6',
+    700: '#b3b3b3',
+    750: '#bfbfbf',
+    800: '#cccccc',
+    850: '#d9d9d9',
+    900: '#e6e6e6',
+    950: '#f2f2f2',
+  },
+
+  textColorStep: {
+    50: '#f2f2f2',
+    100: '#e6e6e6',
+    150: '#d9d9d9',
+    200: '#cccccc',
+    250: '#bfbfbf',
+    300: '#b3b3b3',
+    350: '#a6a6a6',
+    400: '#999999',
+    450: '#8c8c8c',
+    500: '#808080',
+    550: '#737373',
+    600: '#666666',
+    650: '#595959',
+    700: '#4d4d4d',
+    750: '#404040',
+    800: '#333333',
+    850: '#262626',
+    900: '#1a1a1a',
+    950: '#0d0d0d',
+  },
+
+  components: {
+    IonCard: {
+      background: '#1c1c1d',
+    },
+    IonItem: {
+      background: '#000000',
+    },
+  },
 };
diff --git a/core/src/themes/base/default.tokens.ts b/core/src/themes/base/default.tokens.ts
index e6009c9c4e4..df4d0440b62 100644
--- a/core/src/themes/base/default.tokens.ts
+++ b/core/src/themes/base/default.tokens.ts
@@ -4,24 +4,49 @@ import { darkTheme } from './dark.tokens';
 import { lightTheme } from './light.tokens';
 
 export const defaultTheme: DefaultTheme = {
+  name: 'base',
+
   palette: {
     light: lightTheme,
     dark: darkTheme,
   },
 
+  formHighlight: false,
+  rippleEffect: false,
+
   spacing: {
-    none: '0',
-    xxs: '4px',
-    xs: '6px',
-    sm: '8px',
-    md: '12px',
-    lg: '16px',
-    xl: '24px',
-    xxl: '32px',
+    0: '0px',
+    50: '2px',
+    100: '4px',
+    150: '6px',
+    200: '8px',
+    250: '10px',
+    300: '12px',
+    350: '14px',
+    400: '16px',
+    450: '18px',
+    500: '20px',
+    550: '22px',
+    600: '24px',
+    650: '26px',
+    700: '28px',
+    750: '30px',
+    800: '32px',
+    850: '34px',
+    900: '36px',
+    950: '38px',
+    1000: '40px',
+    1050: '42px',
+    1100: '44px',
+    1150: '46px',
+    1200: '48px',
   },
 
   scaling: {
-    0: '0',
+    0: '0px',
+    25: '1px',
+    50: '2px',
+    75: '3px',
     100: '4px',
     150: '6px',
     200: '8px',
@@ -39,28 +64,53 @@ export const defaultTheme: DefaultTheme = {
     800: '32px',
     850: '34px',
     900: '36px',
+    950: '38px',
+    1000: '40px',
+    1050: '42px',
+    1100: '44px',
+    1150: '46px',
+    1200: '48px',
+    1400: '56px',
+    1600: '64px',
+    1800: '72px',
+    2000: '80px',
+    2400: '96px',
+    2800: '112px',
+    3200: '128px',
+    3400: '136px',
+    3600: '144px',
+    4000: '160px',
+    5000: '200px',
+    6200: '248px',
+    7400: '296px',
+    9000: '360px',
   },
 
   borderWidth: {
-    none: '0',
-    xxs: '1px',
-    xs: '2px',
-    sm: '4px',
-    md: '6px',
-    lg: '8px',
-    xl: '10px',
-    xxl: '12px',
+    0: '0',
+    25: '1px',
+    50: '2px',
+    75: '3px',
+    100: '4px',
+    150: '6px',
+    200: '8px',
+    250: '10px',
+    300: '12px',
+    350: '14px',
+    400: '16px',
   },
 
   radii: {
-    none: '0',
-    xxs: '1px',
-    xs: '2px',
-    sm: '4px',
-    md: '8px',
-    lg: '12px',
-    xl: '16px',
-    xxl: '32px',
+    0: '0px',
+    25: '2px',
+    100: '4px',
+    200: '8px',
+    300: '12px',
+    400: '16px',
+    500: '20px',
+    800: '32px',
+    1000: '40px',
+    full: '999px',
   },
 
   dynamicFont: '-apple-system-body',
diff --git a/core/src/themes/ionic/dark.tokens.ts b/core/src/themes/ionic/dark.tokens.ts
index be0b93d4947..8e7222b581a 100644
--- a/core/src/themes/ionic/dark.tokens.ts
+++ b/core/src/themes/ionic/dark.tokens.ts
@@ -1,5 +1,6 @@
+import { darkTheme as baseDarkTheme } from '../base/dark.tokens';
 import type { DarkTheme } from '../themes.interfaces';
 
 export const darkTheme: DarkTheme = {
-  enabled: 'never',
+  ...baseDarkTheme,
 };
diff --git a/core/src/themes/ionic/default.tokens.ts b/core/src/themes/ionic/default.tokens.ts
index 15df8d0c2c1..3325f7aaef7 100644
--- a/core/src/themes/ionic/default.tokens.ts
+++ b/core/src/themes/ionic/default.tokens.ts
@@ -1,11 +1,117 @@
+import { defaultTheme as baseDefaultTheme } from '../base/default.tokens';
 import type { DefaultTheme } from '../themes.interfaces';
 
 import { darkTheme } from './dark.tokens';
 import { lightTheme } from './light.tokens';
 
 export const defaultTheme: DefaultTheme = {
+  ...baseDefaultTheme,
+
+  name: 'ionic',
+
   palette: {
     light: lightTheme,
     dark: darkTheme,
   },
+
+  formHighlight: false,
+  rippleEffect: false,
+
+  // TODO(FW-6745): see if we can remove this after the md tokens are added
+  fontFamily: 'initial',
+
+  spacing: {
+    0: '0px',
+    50: '2px',
+    100: '4px',
+    150: '6px',
+    200: '8px',
+    250: '10px',
+    300: '12px',
+    350: '14px',
+    400: '16px',
+    450: '18px',
+    500: '20px',
+    550: '22px',
+    600: '24px',
+    650: '26px',
+    700: '28px',
+    750: '30px',
+    800: '32px',
+    850: '34px',
+    900: '36px',
+    950: '38px',
+    1000: '40px',
+    1050: '42px',
+    1100: '44px',
+    1150: '46px',
+    1200: '48px',
+  },
+
+  scaling: {
+    0: '0px',
+    25: '1px',
+    50: '2px',
+    75: '3px',
+    100: '4px',
+    150: '6px',
+    200: '8px',
+    250: '10px',
+    300: '12px',
+    350: '14px',
+    400: '16px',
+    450: '18px',
+    500: '20px',
+    550: '22px',
+    600: '24px',
+    650: '26px',
+    700: '28px',
+    750: '30px',
+    800: '32px',
+    850: '34px',
+    900: '36px',
+    950: '38px',
+    1000: '40px',
+    1050: '42px',
+    1100: '44px',
+    1150: '46px',
+    1200: '48px',
+    1400: '56px',
+    1600: '64px',
+    1800: '72px',
+    2000: '80px',
+    2400: '96px',
+    2800: '112px',
+    3200: '128px',
+    3400: '136px',
+    3600: '144px',
+    4000: '160px',
+    5000: '200px',
+    6200: '248px',
+    7400: '296px',
+    9000: '360px',
+  },
+
+  radii: {
+    0: '0px',
+    25: '2px',
+    100: '4px',
+    200: '8px',
+    300: '12px',
+    400: '16px',
+    500: '20px',
+    800: '32px',
+    1000: '40px',
+    full: '999px',
+  },
+
+  borderWidth: {
+    0: '0',
+    25: '1px',
+    50: '2px',
+    75: '3px',
+    100: '4px',
+    150: '6px',
+    200: '8px',
+  },
 };
diff --git a/core/src/themes/ionic/light.tokens.ts b/core/src/themes/ionic/light.tokens.ts
index 2ef8696a576..94c96baeb90 100644
--- a/core/src/themes/ionic/light.tokens.ts
+++ b/core/src/themes/ionic/light.tokens.ts
@@ -1,151 +1,23 @@
 import type { LightTheme } from '../themes.interfaces';
 
-// TODO(): this should be removed when we update the ionic theme
 export const lightTheme: LightTheme = {
-  color: {
-    primary: {
-      bold: {
-        base: '#105cef', // $ion-bg-primary-base-default
-        contrast: '#ffffff', // $ion-text-inverse
-        shade: '#0d4bc3', // $ion-bg-primary-base-press
-        tint: '#6986f2', // $ion-semantics-primary-600
-        foreground: '#0d4bc3', // $ion-text-primary
-      },
-      subtle: {
-        base: '#f2f4fd', // $ion-bg-primary-subtle-default
-        contrast: '#0d4bc3', // $ion-text-primary
-        shade: '#d0d7fa', // $ion-bg-primary-subtle-press
-        tint: '#e9ecfc', // $ion-semantics-primary-200
-        foreground: '#0d4bc3', // $ion-text-primary
-      },
-    },
-    secondary: {
-      bold: {
-        base: '#0d4bc3', // $ion-bg-info-base-default
-        contrast: '#ffffff', // $ion-text-inverse
-        shade: '#09358a', // $ion-bg-info-base-press
-        tint: '#105cef', // $ion-semantics-info-700
-        foreground: '#0d4bc3', // $ion-text-info
-      },
-      subtle: {
-        base: '#f2f4fd', // $ion-bg-info-subtle-default
-        contrast: '#0d4bc3', // $ion-text-info
-        shade: '#d0d7fa', // $ion-bg-info-subtle-press
-        tint: '#e9ecfc', // $ion-semantics-info-200
-        foreground: '#0d4bc3', // $ion-text-info
-      },
-    },
-    tertiary: {
-      bold: {
-        base: '#7c20f2', // $ion-primitives-violet-700
-        contrast: '#ffffff', // $ion-text-inverse
-        shade: '#711ddd', // $ion-primitives-violet-800
-        tint: '#9a6cf4', // $ion-primitives-violet-600
-        foreground: '#7c20f2', // $ion-primitives-violet-700
-      },
-      subtle: {
-        base: '#f5f2fe', // $ion-primitives-violet-100
-        contrast: '#7c20f2', // $ion-primitives-violet-700
-        shade: '#dcd1fb', // $ion-primitives-violet-300
-        tint: '#eee9fd', // $ion-primitives-violet-200
-        foreground: '#7c20f2', // $ion-primitives-violet-700
-      },
-    },
-    success: {
-      bold: {
-        base: '#126f23', // $ion-bg-success-base-default
-        contrast: '#ffffff', // $ion-text-inverse
-        shade: '#093811', // $ion-bg-success-base-press
-        tint: '#178a2b', // $ion-semantics-success-800
-        foreground: '#126f23', // $ion-text-success
-      },
-      subtle: {
-        base: '#ebf9ec', // $ion-bg-success-subtle-default
-        contrast: '#126f23', // $ion-text-success
-        shade: '#b3ebb7', // $ion-bg-success-subtle-press
-        tint: '#dcf5de', // $ion-semantics-success-200
-        foreground: '#126f23', // $ion-text-success
-      },
-    },
-    warning: {
-      bold: {
-        base: '#ffd600', // $ion-bg-warning-base-default
-        contrast: '#242424', // $ion-text-default
-        shade: '#df9c00', // $ion-bg-warning-base-press
-        tint: '#ffebb1', // $ion-primitives-yellow-300
-        foreground: '#704b02', // $ion-text-warning
-      },
-      subtle: {
-        base: '#fff5db', // $ion-bg-warning-subtle-default
-        contrast: '#704b02', // $ion-text-warning
-        shade: '#ffe07b', // $ion-bg-warning-subtle-press
-        tint: '#fff9ea', // $ion-primitives-yellow-100
-        foreground: '#704b02', // $ion-text-warning
-      },
-    },
-    danger: {
-      bold: {
-        base: '#bf2222', // $ion-bg-danger-base-default
-        contrast: '#ffffff', // $ion-text-inverse
-        shade: '#761515', // $ion-bg-danger-base-press
-        tint: '#e52929', // $ion-semantics-danger-700
-        foreground: '#991b1b', // $ion-text-danger
-      },
-      subtle: {
-        base: '#feeded', // $ion-bg-danger-subtle-default
-        contrast: '#991b1b', // $ion-text-danger
-        shade: '#fcc1c1', // $ion-bg-danger-subtle-press
-        tint: '#fde1e1', // $ion-semantics-danger-200
-        foreground: '#991b1b', // $ion-text-danger
-      },
-    },
-    light: {
-      bold: {
-        base: '#a2a2a2', // $ion-bg-neutral-base-default
-        contrast: '#242424', // $ion-text-default
-        shade: '#8c8c8c', // $ion-primitives-neutral-600
-        tint: '#d5d5d5', // $ion-primitives-neutral-400
-        foreground: '#242424', // $ion-text-default
-      },
-      subtle: {
-        base: '#ffffff', // $ion-bg-neutral-subtlest-default
-        contrast: '#242424', // $ion-text-default
-        shade: '#efefef', // $ion-bg-neutral-subtlest-press
-        tint: '#f5f5f5', // $ion-primitives-neutral-100
-        foreground: '#242424', // $ion-text-default
-      },
-    },
-    medium: {
-      bold: {
-        base: '#3b3b3b', // $ion-bg-neutral-bold-default
-        contrast: '#ffffff', // $ion-text-inverse
-        shade: '#242424', // $ion-bg-neutral-bold-press
-        tint: '#4e4e4e', // $ion-primitives-neutral-900
-        foreground: '#242424', // $ion-text-default
-      },
-      subtle: {
-        base: '#efefef', // $ion-bg-neutral-subtle-default
-        contrast: '#626262', // $ion-text-subtlest
-        shade: '#d5d5d5', // $ion-bg-neutral-subtle-press
-        tint: '#f5f5f5', // $ion-primitives-neutral-100
-        foreground: '#242424', // $ion-text-default
-      },
-    },
-    dark: {
-      bold: {
-        base: '#242424', // $ion-bg-neutral-boldest-default
-        contrast: '#ffffff', // $ion-text-inverse
-        shade: '#111111', // $ion-bg-neutral-boldest-press
-        tint: '#292929', // $ion-primitives-neutral-1100
-        foreground: '#242424', // $ion-text-default
-      },
-      subtle: {
-        base: '#efefef', // $ion-bg-neutral-subtle-default
-        contrast: '#3b3b3b', // $ion-text-subtle
-        shade: '#d5d5d5', // $ion-bg-neutral-subtle-press
-        tint: '#f5f5f5', // $ion-primitives-neutral-100
-        foreground: '#242424', // $ion-text-default
-      },
+  backgroundColor: '#ffffff',
+  textColor: '#000000',
+
+  components: {
+    IonCard: {
+      background: '#ffffff',
+    },
+    IonItem: {
+      background: '#ffffff',
+    },
+    IonTabBar: {
+      background: 'var(--ion-tab-bar-background, #ffffff)',
+      backgroundActivated: 'var(--ion-tab-bar-background-activated, #f2f4fd)',
+      backgroundFocused: 'var(--ion-tab-bar-background-focused, transparent)',
+      color: 'var(--ion-tab-bar-color, #626262)',
+      colorSelected: 'var(--ion-tab-bar-color-selected, #0d4bc3)',
+      borderColor: 'var(--ion-tab-bar-border-color, transparent)',
     },
   },
 };
diff --git a/core/src/themes/ios/dark.tokens.ts b/core/src/themes/ios/dark.tokens.ts
index e69de29bb2d..8e7222b581a 100644
--- a/core/src/themes/ios/dark.tokens.ts
+++ b/core/src/themes/ios/dark.tokens.ts
@@ -0,0 +1,6 @@
+import { darkTheme as baseDarkTheme } from '../base/dark.tokens';
+import type { DarkTheme } from '../themes.interfaces';
+
+export const darkTheme: DarkTheme = {
+  ...baseDarkTheme,
+};
diff --git a/core/src/themes/ios/default.tokens.ts b/core/src/themes/ios/default.tokens.ts
index e69de29bb2d..68641be1598 100644
--- a/core/src/themes/ios/default.tokens.ts
+++ b/core/src/themes/ios/default.tokens.ts
@@ -0,0 +1,16 @@
+import { defaultTheme as baseDefaultTheme } from '../base/default.tokens';
+import type { DefaultTheme } from '../themes.interfaces';
+
+import { darkTheme } from './dark.tokens';
+import { lightTheme } from './light.tokens';
+
+export const defaultTheme: DefaultTheme = {
+  ...baseDefaultTheme,
+
+  name: 'ios',
+
+  palette: {
+    light: lightTheme,
+    dark: darkTheme,
+  },
+};
diff --git a/core/src/themes/ios/light.tokens.ts b/core/src/themes/ios/light.tokens.ts
index e69de29bb2d..b7679b9f553 100644
--- a/core/src/themes/ios/light.tokens.ts
+++ b/core/src/themes/ios/light.tokens.ts
@@ -0,0 +1,3 @@
+import type { LightTheme } from '../themes.interfaces';
+
+export const lightTheme: LightTheme = {};
diff --git a/core/src/themes/md/dark.tokens.ts b/core/src/themes/md/dark.tokens.ts
index e69de29bb2d..8e7222b581a 100644
--- a/core/src/themes/md/dark.tokens.ts
+++ b/core/src/themes/md/dark.tokens.ts
@@ -0,0 +1,6 @@
+import { darkTheme as baseDarkTheme } from '../base/dark.tokens';
+import type { DarkTheme } from '../themes.interfaces';
+
+export const darkTheme: DarkTheme = {
+  ...baseDarkTheme,
+};
diff --git a/core/src/themes/md/default.tokens.ts b/core/src/themes/md/default.tokens.ts
index e69de29bb2d..59e2e5d52ff 100644
--- a/core/src/themes/md/default.tokens.ts
+++ b/core/src/themes/md/default.tokens.ts
@@ -0,0 +1,16 @@
+import { defaultTheme as baseDefaultTheme } from '../base/default.tokens';
+import type { DefaultTheme } from '../themes.interfaces';
+
+import { darkTheme } from './dark.tokens';
+import { lightTheme } from './light.tokens';
+
+export const defaultTheme: DefaultTheme = {
+  ...baseDefaultTheme,
+
+  name: 'md',
+
+  palette: {
+    light: lightTheme,
+    dark: darkTheme,
+  },
+};
diff --git a/core/src/themes/md/light.tokens.ts b/core/src/themes/md/light.tokens.ts
index e69de29bb2d..b7679b9f553 100644
--- a/core/src/themes/md/light.tokens.ts
+++ b/core/src/themes/md/light.tokens.ts
@@ -0,0 +1,3 @@
+import type { LightTheme } from '../themes.interfaces';
+
+export const lightTheme: LightTheme = {};
diff --git a/core/src/themes/test/basic/index.html b/core/src/themes/test/basic/index.html
index 81bfba8139f..9b8e2aeca51 100644
--- a/core/src/themes/test/basic/index.html
+++ b/core/src/themes/test/basic/index.html
@@ -16,11 +16,25 @@
 
     <style>
       .grid {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 40px;
+        margin: 40px 0;
+      }
+
+      .top-row {
+        display: flex;
+        flex-direction: column;
+        gap: 40px;
+        justify-content: center;
+      }
+
+      .bottom-row {
         display: flex;
         flex-wrap: wrap;
+        gap: 40px;
         justify-content: center;
-        gap: 20px;
-        margin: 40px 0;
       }
 
       .column {
@@ -31,31 +45,36 @@
         margin: 0;
       }
 
-      [class^='ion-scaling-'],
-      [class^='ion-spacing-'],
-      [class^='ion-radii-'],
-      [class^='ion-border-width-'] {
+      .ion-border-width,
+      .ion-radius,
+      .ion-scale,
+      .ion-space {
         margin: 10px;
       }
 
-      [class^='ion-scaling-'] {
+      /* Scale Elements */
+      .ion-scale {
         background: #ededed;
       }
 
-      [class^='ion-spacing-'] {
+      /* Space Elements */
+      .ion-space {
         background: #e0ee99;
+        color: #000;
       }
 
-      .spacing-inner {
+      .space-inner {
         background: #ededed;
       }
 
-      [class^='ion-radii-'] {
+      /* Radii Elements */
+      .ion-radius {
         border-width: 2px;
       }
 
-      [class^='ion-radii-'],
-      [class^='ion-border-width-'] {
+      /* Border Width and Radii Elements */
+      .ion-border-width,
+      .ion-radius {
         display: inline-flex;
         align-items: center;
         justify-content: center;
@@ -64,140 +83,6 @@
         height: 100px;
         width: 100px;
       }
-
-      /* Scaling */
-      .ion-scaling-0 {
-        height: var(--ion-scaling-0);
-      }
-      .ion-scaling-100 {
-        height: var(--ion-scaling-100);
-      }
-      .ion-scaling-150 {
-        height: var(--ion-scaling-150);
-      }
-      .ion-scaling-200 {
-        height: var(--ion-scaling-200);
-      }
-      .ion-scaling-250 {
-        height: var(--ion-scaling-250);
-      }
-      .ion-scaling-300 {
-        height: var(--ion-scaling-300);
-      }
-      .ion-scaling-350 {
-        height: var(--ion-scaling-350);
-      }
-      .ion-scaling-400 {
-        height: var(--ion-scaling-400);
-      }
-      .ion-scaling-450 {
-        height: var(--ion-scaling-450);
-      }
-      .ion-scaling-500 {
-        height: var(--ion-scaling-500);
-      }
-      .ion-scaling-550 {
-        height: var(--ion-scaling-550);
-      }
-      .ion-scaling-600 {
-        height: var(--ion-scaling-600);
-      }
-      .ion-scaling-650 {
-        height: var(--ion-scaling-650);
-      }
-      .ion-scaling-700 {
-        height: var(--ion-scaling-700);
-      }
-      .ion-scaling-750 {
-        height: var(--ion-scaling-750);
-      }
-      .ion-scaling-800 {
-        height: var(--ion-scaling-800);
-      }
-      .ion-scaling-850 {
-        height: var(--ion-scaling-850);
-      }
-      .ion-scaling-900 {
-        height: var(--ion-scaling-900);
-      }
-
-      /* Spacing */
-      .ion-spacing-none {
-        padding: var(--ion-spacing-none);
-      }
-      .ion-spacing-xxs {
-        padding: var(--ion-spacing-xxs);
-      }
-      .ion-spacing-xs {
-        padding: var(--ion-spacing-xs);
-      }
-      .ion-spacing-sm {
-        padding: var(--ion-spacing-sm);
-      }
-      .ion-spacing-md {
-        padding: var(--ion-spacing-md);
-      }
-      .ion-spacing-lg {
-        padding: var(--ion-spacing-lg);
-      }
-      .ion-spacing-xl {
-        padding: var(--ion-spacing-xl);
-      }
-      .ion-spacing-xxl {
-        padding: var(--ion-spacing-xxl);
-      }
-
-      /* Radii */
-      .ion-radii-none {
-        border-radius: var(--ion-radii-none);
-      }
-      .ion-radii-xxs {
-        border-radius: var(--ion-radii-xxs);
-      }
-      .ion-radii-xs {
-        border-radius: var(--ion-radii-xs);
-      }
-      .ion-radii-sm {
-        border-radius: var(--ion-radii-sm);
-      }
-      .ion-radii-md {
-        border-radius: var(--ion-radii-md);
-      }
-      .ion-radii-lg {
-        border-radius: var(--ion-radii-lg);
-      }
-      .ion-radii-xl {
-        border-radius: var(--ion-radii-xl);
-      }
-      .ion-radii-xxl {
-        border-radius: var(--ion-radii-xxl);
-      }
-
-      /* Border Width */
-      .ion-border-width-none {
-        border-width: var(--ion-border-width-none);
-      }
-      .ion-border-width-xxs {
-        border-width: var(--ion-border-width-xxs);
-      }
-      .ion-border-width-xs {
-        border-width: var(--ion-border-width-xs);
-      }
-      .ion-border-width-sm {
-        border-width: var(--ion-border-width-sm);
-      }
-      .ion-border-width-md {
-        border-width: var(--ion-border-width-md);
-      }
-      .ion-border-width-lg {
-        border-width: var(--ion-border-width-lg);
-      }
-      .ion-border-width-xl {
-        border-width: var(--ion-border-width-xl);
-      }
-      .ion-border-width-xxl {
-        border-width: var(--ion-border-width-xxl);
-      }
     </style>
   </head>
 
@@ -211,78 +96,80 @@
 
       <ion-content id="content" class="ion-text-center">
         <div class="grid">
-          <div class="column">
-            <h2>Scaling</h2>
-            <div class="ion-scaling-0"></div>
-            <div class="ion-scaling-100"></div>
-            <div class="ion-scaling-150"></div>
-            <div class="ion-scaling-200"></div>
-            <div class="ion-scaling-250"></div>
-            <div class="ion-scaling-300"></div>
-            <div class="ion-scaling-350"></div>
-            <div class="ion-scaling-400"></div>
-            <div class="ion-scaling-450"></div>
-            <div class="ion-scaling-500"></div>
-            <div class="ion-scaling-550"></div>
-            <div class="ion-scaling-600"></div>
-            <div class="ion-scaling-650"></div>
-            <div class="ion-scaling-700"></div>
-            <div class="ion-scaling-750"></div>
-            <div class="ion-scaling-800"></div>
-            <div class="ion-scaling-850"></div>
-            <div class="ion-scaling-900"></div>
-          </div>
-          <div class="column">
-            <h2>Spacing</h2>
-            <div class="ion-spacing-none">
-              <div class="spacing-inner">none</div>
+          <div class="top-row">
+            <div class="column">
+              <h2>Border Width</h2>
+              <div class="ion-border-widths"></div>
             </div>
-            <div class="ion-spacing-xxs">
-              <div class="spacing-inner">xxs</div>
+            <div class="column">
+              <h2>Radii</h2>
+              <div class="ion-radii"></div>
             </div>
-            <div class="ion-spacing-xs">
-              <div class="spacing-inner">xs</div>
-            </div>
-            <div class="ion-spacing-sm">
-              <div class="spacing-inner">sm</div>
-            </div>
-            <div class="ion-spacing-md">
-              <div class="spacing-inner">md</div>
-            </div>
-            <div class="ion-spacing-lg">
-              <div class="spacing-inner">lg</div>
-            </div>
-            <div class="ion-spacing-xl">
-              <div class="spacing-inner">xl</div>
+          </div>
+          <div class="bottom-row">
+            <div class="column">
+              <h2>Scaling</h2>
+              <div class="ion-scales"></div>
             </div>
-            <div class="ion-spacing-xxl">
-              <div class="spacing-inner">xxl</div>
+            <div class="column">
+              <h2>Spacing</h2>
+              <div class="ion-spaces"></div>
             </div>
           </div>
-          <div class="column">
-            <h2>Radii</h2>
-            <div class="ion-radii-none">none</div>
-            <div class="ion-radii-xxs">xxs</div>
-            <div class="ion-radii-xs">xs</div>
-            <div class="ion-radii-sm">sm</div>
-            <div class="ion-radii-md">md</div>
-            <div class="ion-radii-lg">lg</div>
-            <div class="ion-radii-xl">xl</div>
-            <div class="ion-radii-xxl">xxl</div>
-          </div>
-          <div class="column">
-            <h2>Border Width</h2>
-            <div class="ion-border-width-none">none</div>
-            <div class="ion-border-width-xxs">xxs</div>
-            <div class="ion-border-width-xs">xs</div>
-            <div class="ion-border-width-sm">sm</div>
-            <div class="ion-border-width-md">md</div>
-            <div class="ion-border-width-lg">lg</div>
-            <div class="ion-border-width-xl">xl</div>
-            <div class="ion-border-width-xxl">xxl</div>
-          </div>
         </div>
       </ion-content>
     </ion-app>
+
+    <script>
+      const borderWidths = [0, 25, 50, 75, 100, 150, 200, 250, 300, 350, 400];
+      const radii = [0, 25, 100, 200, 300, 400, 500, 800, 1000, 'full'];
+      const scales = [
+        0, 25, 50, 75, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000,
+        1050, 1100, 1150, 1200, 1400, 1600, 1800, 2000, 2400, 2800, 3200, 3400, 3600, 4000,
+      ];
+      const spaces = [
+        0, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000, 1050,
+        1100, 1150, 1200,
+      ];
+
+      // Generate the border width elements
+      borderWidths.forEach((borderWidth) => {
+        const borderWidthEl = document.createElement('div');
+        borderWidthEl.className = `ion-border-width`;
+        borderWidthEl.innerHTML = `${borderWidth}`;
+        document.querySelector('.ion-border-widths').appendChild(borderWidthEl);
+        borderWidthEl.style.borderWidth = `var(--ion-border-width-${borderWidth})`;
+      });
+
+      // Generate the radii elements
+      radii.forEach((radius) => {
+        const radiusEl = document.createElement('div');
+        radiusEl.className = `ion-radius`;
+        radiusEl.innerHTML = `${radius}`;
+        document.querySelector('.ion-radii').appendChild(radiusEl);
+        radiusEl.style.borderRadius = `var(--ion-radii-${radius})`;
+      });
+
+      // Generate the scale elements
+      scales.forEach((scale) => {
+        const scaleEl = document.createElement('div');
+        scaleEl.className = `ion-scale`;
+        document.querySelector('.ion-scales').appendChild(scaleEl);
+        scaleEl.style.height = `var(--ion-scaling-${scale})`;
+      });
+
+      // Generate the space elements
+      spaces.forEach((space) => {
+        const spaceEl = document.createElement('div');
+        spaceEl.className = `ion-space`;
+        const spaceInnerEl = document.createElement('div');
+        spaceInnerEl.className = `space-inner`;
+        spaceInnerEl.innerHTML = `${space}`;
+        spaceEl.appendChild(spaceInnerEl);
+
+        document.querySelector('.ion-spaces').appendChild(spaceEl);
+        spaceEl.style.padding = `var(--ion-spacing-${space})`;
+      });
+    </script>
   </body>
 </html>
diff --git a/core/src/themes/themes.interfaces.ts b/core/src/themes/themes.interfaces.ts
index 3d5ac09a4e0..29653a3ee35 100644
--- a/core/src/themes/themes.interfaces.ts
+++ b/core/src/themes/themes.interfaces.ts
@@ -3,20 +3,56 @@ export type PlatformTheme = Omit<BaseTheme, 'ios' | 'md'>;
 
 // Base tokens for all palettes
 export type BaseTheme = {
+  // CONFIG TOKENS
+  rippleEffect?: boolean;
+  formHighlight?: boolean;
+
+  // GLOBAL THEME TOKENS
+  backgroundColor?: string;
+  backgroundColorRgb?: string;
+  textColor?: string;
+  textColorRgb?: string;
+  backgroundColorStep?: {
+    [key: string]: string;
+  };
+  textColorStep?: {
+    [key: string]: string;
+  };
+
   // SPACE TOKENS
   spacing?: {
-    none?: string;
-    xxs?: string;
-    xs?: string;
-    sm?: string;
-    md?: string;
-    lg?: string;
-    xl?: string;
-    xxl?: string;
+    0?: string;
+    50?: string;
+    100?: string;
+    150?: string;
+    200?: string;
+    250?: string;
+    300?: string;
+    350?: string;
+    400?: string;
+    450?: string;
+    500?: string;
+    550?: string;
+    600?: string;
+    650?: string;
+    700?: string;
+    750?: string;
+    800?: string;
+    850?: string;
+    900?: string;
+    950?: string;
+    1000?: string;
+    1050?: string;
+    1100?: string;
+    1150?: string;
+    1200?: string;
   };
 
   scaling?: {
     0?: string;
+    25?: string;
+    50?: string;
+    75?: string;
     100?: string;
     150?: string;
     200?: string;
@@ -34,29 +70,54 @@ export type BaseTheme = {
     800?: string;
     850?: string;
     900?: string;
+    950?: string;
+    1000?: string;
+    1050?: string;
+    1100?: string;
+    1150?: string;
+    1200?: string;
+    1400?: string;
+    1600?: string;
+    1800?: string;
+    2000?: string;
+    2400?: string;
+    2800?: string;
+    3200?: string;
+    3400?: string;
+    3600?: string;
+    4000?: string;
+    5000?: string;
+    6200?: string;
+    7400?: string;
+    9000?: string;
   };
 
   // APPEARANCE TOKENS
   borderWidth?: {
-    none?: string;
-    xxs?: string;
-    xs?: string;
-    sm?: string;
-    md?: string;
-    lg?: string;
-    xl?: string;
-    xxl?: string;
+    0?: string;
+    25?: string;
+    50?: string;
+    75?: string;
+    100?: string;
+    150?: string;
+    200?: string;
+    250?: string;
+    300?: string;
+    350?: string;
+    400?: string;
   };
 
   radii?: {
-    none?: string;
-    xxs?: string;
-    xs?: string;
-    sm?: string;
-    md?: string;
-    lg?: string;
-    xl?: string;
-    xxl?: string;
+    0?: string;
+    25?: string;
+    100?: string;
+    200?: string;
+    300?: string;
+    400?: string;
+    500?: string;
+    800?: string;
+    1000?: string;
+    full?: string;
   };
 
   // TYPOGRAPHY TOKENS
@@ -138,6 +199,8 @@ export type LightTheme = BaseTheme;
 
 // Default theme interface
 export type DefaultTheme = BaseTheme & {
+  name?: string;
+
   palette?: {
     light?: LightTheme;
     dark?: DarkTheme;
diff --git a/core/src/utils/test/theme.spec.ts b/core/src/utils/test/theme.spec.ts
index 63382768cf4..c5b90603a5e 100644
--- a/core/src/utils/test/theme.spec.ts
+++ b/core/src/utils/test/theme.spec.ts
@@ -204,6 +204,8 @@ describe('generateCSSVars', () => {
           enabled: 'system',
         },
       },
+      rippleEffect: true,
+      formHighlight: true,
       borderWidth: {
         sm: '4px',
       },
@@ -231,21 +233,24 @@ describe('generateCSSVars', () => {
       components: {},
     };
 
-    const css = generateCSSVars(theme);
+    const css = generateCSSVars(theme).replace(/\s/g, '');
 
-    expect(css).toContain('--ion-palette-dark-enabled: system;');
-    expect(css).toContain('--ion-border-width-sm: 4px;');
-    expect(css).toContain('--ion-spacing-md: 12px;');
-    expect(css).toContain('--ion-scaling-0: 0;');
-    expect(css).toContain('--ion-radii-lg: 8px;');
-    expect(css).toContain('--ion-dynamic-font: -apple-system-body;');
-    expect(css).toContain('--ion-font-family: Roboto, "Helvetica Neue", sans-serif;');
-    expect(css).toContain('--ion-font-weights-semi-bold: 600;');
-    expect(css).toContain('--ion-font-sizes-sm: 14px;');
-    expect(css).toContain('--ion-font-sizes-sm-rem: 0.875rem;');
-    expect(css).toContain('--ion-font-sizes-md: 16px;');
-    expect(css).toContain('--ion-font-sizes-md-rem: 1rem;');
-    expect(css).toContain('--ion-line-heights-sm: 1.2;');
+    const expectedCSS = `
+      --ion-border-width-sm: 4px;
+      --ion-spacing-md: 12px;
+      --ion-scaling-0: 0;
+      --ion-radii-lg: 8px;
+      --ion-dynamic-font: -apple-system-body;
+      --ion-font-family: Roboto, "Helvetica Neue", sans-serif;
+      --ion-font-weights-semi-bold: 600;
+      --ion-font-sizes-sm: 14px;
+      --ion-font-sizes-sm-rem: 0.875rem;
+      --ion-font-sizes-md: 16px;
+      --ion-font-sizes-md-rem: 1rem;
+      --ion-line-heights-sm: 1.2;
+    `.replace(/\s/g, '');
+
+    expect(css).toBe(expectedCSS);
   });
 });
 
@@ -521,7 +526,6 @@ describe('generateGlobalThemeCSS', () => {
 
       @media(prefers-color-scheme: dark) {
         :root {
-          --ion-enabled: system;
           --ion-color-primary-bold: #0054e9;
           --ion-color-primary-bold-rgb: 0, 84, 233;
           --ion-color-primary-bold-contrast: #ffffff;
diff --git a/core/src/utils/theme.ts b/core/src/utils/theme.ts
index 419cb99d814..c14a15191a2 100644
--- a/core/src/utils/theme.ts
+++ b/core/src/utils/theme.ts
@@ -86,6 +86,12 @@ export const generateCSSVars = (theme: any, prefix: string = CSS_PROPS_PREFIX):
         key = key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
       }
 
+      // Do not generate CSS variables for excluded keys
+      const excludedKeys = ['enabled', 'ripple-effect', 'form-highlight'];
+      if (excludedKeys.includes(key)) {
+        return [];
+      }
+
       // Special handling for 'base' property - don't add suffix
       if (key === 'base') {
         return [`${prefix.slice(0, -1)}: ${val};`];