diff --git a/core/scripts/testing/scripts.js b/core/scripts/testing/scripts.js
index a4b2d46e7e..1fe2acdf71 100644
--- a/core/scripts/testing/scripts.js
+++ b/core/scripts/testing/scripts.js
@@ -47,6 +47,11 @@
       linkTag.setAttribute('href', '/css/ionic/bundle.ionic.css');
       document.head.appendChild(linkTag);
     }
+
+    const defaultThemeLinkTag = document.querySelector('link[href*="css/ionic.bundle.css"]');
+    if (defaultThemeLinkTag) {
+      defaultThemeLinkTag.remove();
+    }
   }
 
   window.Ionic = window.Ionic || {};
diff --git a/core/scripts/tokens/index.js b/core/scripts/tokens/index.js
index 9bea2e780d..5dbeecab0e 100644
--- a/core/scripts/tokens/index.js
+++ b/core/scripts/tokens/index.js
@@ -12,6 +12,7 @@
     generateTypographyOutput,
     generateValue,
     generateColorUtilityClasses,
+    generateDefaultSpaceUtilityClasses,
     generateSpaceUtilityClasses,
     removeConsecutiveRepeatedWords,
     setPrefixValue,
@@ -23,136 +24,138 @@
   } = require('./utils.js');
 
   const StyleDictionary = (await import('style-dictionary')).default;
-  
+
   // Set the prefix for variables and classes
   setPrefixValue('ion');
 
   // Register a custom file header
   StyleDictionary.registerFileHeader({
-      name: 'custom-header',
-      fileHeader: async (defaultMessages = []) => {
-        return [...defaultMessages, 'Do not edit directly, this file was auto-generated.'];
-      },
+    name: 'custom-header',
+    fileHeader: async (defaultMessages = []) => {
+      return [...defaultMessages, 'Do not edit directly, this file was auto-generated.'];
+    },
   });
 
   // SCSS variables format
   StyleDictionary.registerFormat({
     name: 'scssVariablesFormat',
-    format: async function({ dictionary, file}) {
+    format: async function ({ dictionary, file }) {
 
       console.log('Generating SCSS variables...');
 
-        // Separate typography tokens from the rest
-        const typographyProperties = dictionary.allTokens.filter((prop) => prop.$type === 'typography');
-        const otherProperties = dictionary.allTokens.filter((prop) => prop.$type !== 'typography');
+      // Separate typography tokens from the rest
+      const typographyProperties = dictionary.allTokens.filter((prop) => prop.$type === 'typography');
+      const otherProperties = dictionary.allTokens.filter((prop) => prop.$type !== 'typography');
 
-        // Make sure the reused scss variables are defined first, to avoid compilation errors
-        const sortedProperties = [...otherProperties, ...typographyProperties];
+      // Make sure the reused scss variables are defined first, to avoid compilation errors
+      const sortedProperties = [...otherProperties, ...typographyProperties];
 
-        const prefixedVariables = sortedProperties.map((prop) => {
-          // Remove consecutive repeated words from the token name, like border-border-color
-          const propName = removeConsecutiveRepeatedWords(prop.name);
+      const prefixedVariables = sortedProperties.map((prop) => {
+        // Remove consecutive repeated words from the token name, like border-border-color
+        const propName = removeConsecutiveRepeatedWords(prop.name);
 
-            switch (prop.$type) {
-              case 'boxShadow':
-                  return generateShadowValue(prop, propName);
-              case 'fontFamilies':
-                  return generateFontFamilyValue(prop, propName, 'scss');
-              case 'fontSizes':
-                  return generateFontSizeValue(prop, propName, 'scss');
-              case 'typography':
-                  return generateTypographyOutput(prop, propName, true);
-              default:
-                  return generateValue(prop, propName);
-          }
-        });
+        switch (prop.$type) {
+          case 'boxShadow':
+            return generateShadowValue(prop, propName);
+          case 'fontFamilies':
+            return generateFontFamilyValue(prop, propName, 'scss');
+          case 'fontSizes':
+            return generateFontSizeValue(prop, propName, 'scss');
+          case 'typography':
+            return generateTypographyOutput(prop, propName, true);
+          default:
+            return generateValue(prop, propName);
+        }
+      });
 
-        const fileHeader = await file.options.fileHeader();
-              
-        return [
-            `/*\n${fileHeader.join('\n')}\n*/`,
-            '@use "../themes/functions.sizes" as font;\n',
-            prefixedVariables.join('\n') + '\n',
-        ].join('\n');
+      const fileHeader = await file.options.fileHeader();
+
+      return [
+        `/*\n${fileHeader.join('\n')}\n*/`,
+        '@use "../themes/functions.sizes" as font;\n',
+        prefixedVariables.join('\n') + '\n',
+      ].join('\n');
     },
   });
 
   // Create utility-classes
   StyleDictionary.registerFormat({
     name: 'cssUtilityClassesFormat',
-    format: async function({ dictionary, file})  {
+    format: async function ({ dictionary, file }) {
 
-        console.log('Generating Utility-Classes...');
-        
-        // Arrays to store specific utility classes
-        const typographyUtilityClasses = [];
-        const otherUtilityClasses = [];
+      console.log('Generating Utility-Classes...');
 
-        // Generate utility classes for each token
-        dictionary.allTokens.map((prop) => {
+      // Arrays to store specific utility classes
+      const typographyUtilityClasses = [];
+      const otherUtilityClasses = [];
 
-            const tokenCategory = prop.attributes.category;
+      // Generate utility classes for each token
+      dictionary.allTokens.map((prop) => {
 
-            if (prop.$type === 'fontFamilies' || tokenCategory === 'scale' || tokenCategory === 'backdrop') {
-              // Not creating for the tokens below, as they make no sense to exist as utility-classes.
-              return;
-          }
+        const tokenCategory = prop.attributes.category;
 
-            // Remove consecutive repeated words from the token name, like border-border-color
-            const propName = removeConsecutiveRepeatedWords(prop.name);
-            
-            if (prop.$type === 'typography') {
-                // Typography tokens are handled differently, as each might have a different tokenType
-                return typographyUtilityClasses.push(generateTypographyOutput(prop, propName, false));
-                
-            } else if(tokenCategory.startsWith('round') || tokenCategory.startsWith('rectangular') || tokenCategory.startsWith('soft')) {
-                // Generate utility classes for border-radius shape tokens, as they have their own token json file, based on primitive tokens
-                return otherUtilityClasses.push(generateRadiusUtilityClasses(propName));
+        if (prop.$type === 'fontFamilies' || tokenCategory === 'scale' || tokenCategory === 'backdrop') {
+          // Not creating for the tokens below, as they make no sense to exist as utility-classes.
+          return;
+        }
 
-            } 
+        // Remove consecutive repeated words from the token name, like border-border-color
+        const propName = removeConsecutiveRepeatedWords(prop.name);
 
-            let utilityClass = '';
+        if (prop.$type === 'typography') {
+          // Typography tokens are handled differently, as each might have a different tokenType
+          return typographyUtilityClasses.push(generateTypographyOutput(prop, propName, false));
 
-            switch (tokenCategory) {
-                case 'color':
-                case 'primitives':
-                case 'semantics':
-                case 'text':
-                case 'bg':
-                case 'icon':
-                case 'state':
-                  utilityClass = generateColorUtilityClasses(prop, propName);
-                  break;
-                case 'border-size':
-                  utilityClass = generateBorderSizeUtilityClasses(propName);
-                  break;
-                case 'font':
-                  utilityClass = generateFontUtilityClasses(prop, propName);
-                  break;
-                case 'space':
-                  utilityClass = generateSpaceUtilityClasses(prop, propName);
-                  break;
-                case 'shadow':
-                case 'elevation':
-                  utilityClass = generateShadowUtilityClasses(propName);
-                  break;
-                default:
-                  utilityClass = generateUtilityClasses(tokenCategory, propName);
-            }
+        } else if (tokenCategory.startsWith('round') || tokenCategory.startsWith('rectangular') || tokenCategory.startsWith('soft')) {
+          // Generate utility classes for border-radius shape tokens, as they have their own token json file, based on primitive tokens
+          return otherUtilityClasses.push(generateRadiusUtilityClasses(propName));
+        }
 
-            return otherUtilityClasses.push(utilityClass);
-        });
+        let utilityClass = '';
 
-        // Concatenate typography utility classes at the beginning
-        const finalOutput = typographyUtilityClasses.concat(otherUtilityClasses).join('\n');
+        switch (tokenCategory) {
+          case 'color':
+          case 'primitives':
+          case 'semantics':
+          case 'text':
+          case 'bg':
+          case 'icon':
+          case 'state':
+            utilityClass = generateColorUtilityClasses(prop, propName);
+            break;
+          case 'border-size':
+            utilityClass = generateBorderSizeUtilityClasses(propName);
+            break;
+          case 'font':
+            utilityClass = generateFontUtilityClasses(prop, propName);
+            break;
+          case 'space':
+            utilityClass = generateSpaceUtilityClasses(prop, propName);
+            break;
+          case 'shadow':
+          case 'elevation':
+            utilityClass = generateShadowUtilityClasses(propName);
+            break;
+          default:
+            utilityClass = generateUtilityClasses(tokenCategory, propName);
+        }
 
-        const fileHeader = await file.options.fileHeader();
-              
-        return [
-            `/*\n${fileHeader.join('\n')}\n*/`,
-            '@import "./ionic.vars";\n@import "../themes/mixins";\n',
-            finalOutput,
-        ].join('\n');
+        return otherUtilityClasses.push(utilityClass);
+      });
+
+      const defaultSpaceUtilityClasses = generateDefaultSpaceUtilityClasses();
+      otherUtilityClasses.push(defaultSpaceUtilityClasses);
+
+      // Concatenate typography utility classes at the beginning
+      const finalOutput = typographyUtilityClasses.concat(otherUtilityClasses).join('\n');
+
+      const fileHeader = await file.options.fileHeader();
+
+      return [
+        `/*\n${fileHeader.join('\n')}\n*/`,
+        '@import "./ionic.vars";\n@import "../themes/mixins";\n',
+        finalOutput,
+      ].join('\n');
     },
   });
 
@@ -163,24 +166,24 @@ module.exports = {
   source: ["node_modules/outsystems-design-tokens/tokens/**/*.json"],
   platforms: {
     scss: {
-        transformGroup: "scss",
-        buildPath: './src/foundations/',
-        files: [
-          {
-              destination: "ionic.vars.scss",
-              format: "scssVariablesFormat",
-              options: {
-                  fileHeader: `custom-header`,
-                },
+      transformGroup: "scss",
+      buildPath: './src/foundations/',
+      files: [
+        {
+          destination: "ionic.vars.scss",
+          format: "scssVariablesFormat",
+          options: {
+            fileHeader: `custom-header`,
           },
-          {
-              destination: "ionic.utility.scss",
-              format: "cssUtilityClassesFormat",
-              options: {
-                  fileHeader: `custom-header`
-              }
+        },
+        {
+          destination: "ionic.utility.scss",
+          format: "cssUtilityClassesFormat",
+          options: {
+            fileHeader: `custom-header`
           }
-          ]
+        }
+      ]
     }
   }
 };
diff --git a/core/scripts/tokens/utils.js b/core/scripts/tokens/utils.js
index 56ba2ef737..c2709ff3c6 100644
--- a/core/scripts/tokens/utils.js
+++ b/core/scripts/tokens/utils.js
@@ -125,6 +125,73 @@ function generateColorUtilityClasses(prop, className) {
   .${variablesPrefix}-background-${className} {\n  background-color: $${variablesPrefix}-${prop.name};\n}`;
 }
 
+// Generates margin and padding utility classes to match the token-agnostic
+// utilities provided by the Ionic Framework
+function generateDefaultSpaceUtilityClasses() {
+  const zeroMarginPaddingToken = 'space-0';
+  const defaultMarginPaddingToken = 'space-400';
+
+  const marginPaddingTemplate = (type) => `
+.${variablesPrefix}-no-${type} {
+  --${type}-top: #{$${variablesPrefix}-${zeroMarginPaddingToken}};
+  --${type}-end: #{$${variablesPrefix}-${zeroMarginPaddingToken}};
+  --${type}-bottom: #{$${variablesPrefix}-${zeroMarginPaddingToken}};
+  --${type}-start: #{$${variablesPrefix}-${zeroMarginPaddingToken}};
+
+  @include ${type}($${variablesPrefix}-${zeroMarginPaddingToken});
+};
+
+.${variablesPrefix}-${type} {
+  --${type}-top: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
+  --${type}-end: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
+  --${type}-bottom: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
+  --${type}-start: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
+
+  @include ${type}($${variablesPrefix}-${defaultMarginPaddingToken});
+};
+
+.${variablesPrefix}-${type}-top {
+  --${type}-top: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
+
+  @include ${type}($${variablesPrefix}-${defaultMarginPaddingToken}, null, null, null);
+};
+
+.${variablesPrefix}-${type}-end {
+  --${type}-end: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
+
+  @include ${type}(null, $${variablesPrefix}-${defaultMarginPaddingToken}, null, null);
+};
+
+.${variablesPrefix}-${type}-bottom {
+  --${type}-bottom: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
+
+  @include ${type}(null, null, $${variablesPrefix}-${defaultMarginPaddingToken}, null);
+};
+
+.${variablesPrefix}-${type}-start {
+  --${type}-start: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
+
+  @include ${type}(null, null, null, $${variablesPrefix}-${defaultMarginPaddingToken});
+};
+
+.${variablesPrefix}-${type}-vertical {
+  --${type}-top: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
+  --${type}-bottom: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
+
+  @include ${type}($${variablesPrefix}-${defaultMarginPaddingToken}, null, $${variablesPrefix}-${defaultMarginPaddingToken}, null);
+};
+
+.${variablesPrefix}-${type}-horizontal {
+  --${type}-start: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
+  --${type}-end: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
+
+  @include ${type}(null, $${variablesPrefix}-${defaultMarginPaddingToken}, null, $${variablesPrefix}-${defaultMarginPaddingToken});
+};
+`;
+
+  return `${marginPaddingTemplate('margin')}\n${marginPaddingTemplate('padding')}`;
+}
+
 // Generates a margin or padding based css utility-class from a space Design Token structure
 function generateSpaceUtilityClasses(prop, className) {
   // This exact format is needed so that it compiles the tokens with the expected lint rules
@@ -203,6 +270,7 @@ module.exports = {
     setPrefixValue,
     generateRadiusUtilityClasses,
     generateColorUtilityClasses,
+    generateDefaultSpaceUtilityClasses,
     generateSpaceUtilityClasses,
     removeConsecutiveRepeatedWords,
     generateBorderSizeUtilityClasses,
diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 93f21d2e6e..2b020df62c 100644
Binary files a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 31e9129bb9..9f80bbc64e 100644
Binary files a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Safari-linux.png
index 146b156bc7..9d3e83a216 100644
Binary files a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 3501257572..b7e3748487 100644
Binary files a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 5052cc8006..bc2b73400f 100644
Binary files a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Safari-linux.png
index 5e3cf1a2bb..038dd0a452 100644
Binary files a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 80ae4048c0..fdab7b2ca3 100644
Binary files a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 29f6da7fc7..e5a5227bd1 100644
Binary files a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Safari-linux.png
index 1ed2f47822..866c6a22af 100644
Binary files a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-text-fields-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-text-fields-scale-ios-ltr-Mobile-Chrome-linux.png
index 36f2372c38..9d16b5c3b3 100644
Binary files a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-text-fields-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-text-fields-scale-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Chrome-linux.png
index d7c262feab..e001ea2754 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 9f66f1ffe4..d71a3e63b4 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Safari-linux.png
index 3ada397f69..4c97d97c45 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png
index d3d84a0e76..032840980a 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Chrome-linux.png
index d7c262feab..e001ea2754 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 9f66f1ffe4..d71a3e63b4 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Safari-linux.png
index 3ada397f69..4c97d97c45 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 91becd47c1..ba71f56829 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 90459e325b..8fe4f788de 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Firefox-linux.png
index a590e1dcbb..50c492bd91 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Safari-linux.png
index 588485561d..7487fe6f59 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png
index f594fbba08..11d68038f0 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png
index f9f69cb456..52ffd19914 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png
index 87d3c90267..0f7d116396 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Chrome-linux.png
index b899a2b41b..6978b2ed00 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 111efa1f55..6a61e55fe7 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Safari-linux.png
index 3e341a8064..cd65dd254c 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 2bf53f4350..ed04a2d4f7 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png
index cec631d325..2445f6967f 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Safari-linux.png
index cc10e90ac6..7e8354ba50 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 4da87bd2f7..582be5aa68 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 3ceb26954c..8de4bb78ea 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-ltr-light-Mobile-Safari-linux.png
index 1763a28a54..f8074d70f5 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-rtl-light-Mobile-Chrome-linux.png
index a63bbf593e..e9608f9e50 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 3b918a6f5a..9840cc3265 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-rtl-light-Mobile-Safari-linux.png
index 319be1c02f..acb2218c86 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-ltr-light-Mobile-Chrome-linux.png
index be40dec90c..5e945e6413 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 146f1126e4..644d144a37 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-ltr-light-Mobile-Safari-linux.png
index 063a168700..5be0ee388e 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 8a807a476b..a269475af4 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 97e08e89ce..af4c54bc9b 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-rtl-light-Mobile-Safari-linux.png
index 0786d8c853..50abe100c8 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-default-ionic-md-ltr-light-Mobile-Safari-linux.png
index d05eed7ceb..5a81895f4f 100644
Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-round-ionic-md-ltr-light-Mobile-Safari-linux.png
index d05eed7ceb..5a81895f4f 100644
Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-default-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 61c667b297..8bd4692c1f 100644
Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-default-ionic-md-ltr-light-Mobile-Firefox-linux.png
index a6ac8ac146..a29e1b78f4 100644
Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-default-ionic-md-ltr-light-Mobile-Safari-linux.png
index 479c2a5503..751794238e 100644
Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 8a37216d5e..6d33fb1db1 100644
Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 77da70434a..1b297ec7fd 100644
Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png
index 624f4b9262..b598c4e8e5 100644
Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-round-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 61c667b297..8bd4692c1f 100644
Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-round-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-round-ionic-md-ltr-light-Mobile-Firefox-linux.png
index a6ac8ac146..a29e1b78f4 100644
Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-round-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-round-ionic-md-ltr-light-Mobile-Safari-linux.png
index 479c2a5503..751794238e 100644
Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 511cd20b07..fa5c919266 100644
Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 8a2f4cc8eb..2e61cbd076 100644
Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-soft-ionic-md-ltr-light-Mobile-Safari-linux.png
index 09107b4f20..ff3977424a 100644
Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-soft-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 7c0b0dc066..aab2663064 100644
Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png
index f6bd27ead2..d7d77a0e28 100644
Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Safari-linux.png
index 166a9813d4..296cbad7e4 100644
Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 07f694d200..074729207e 100644
Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png
index a0ecc5a2fe..f0b0c4536f 100644
Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Safari-linux.png
index 2eb485718c..8fd7e5d712 100644
Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/css/ionic/utils.bundle.ionic.scss b/core/src/css/ionic/utils.bundle.ionic.scss
index dbaf9913a5..3918ea3f6d 100644
--- a/core/src/css/ionic/utils.bundle.ionic.scss
+++ b/core/src/css/ionic/utils.bundle.ionic.scss
@@ -1 +1,11 @@
 @forward "../../foundations/ionic.utility";
+
+// The padding utility is not included here because it
+// uses hardcoded pixel values. Instead, the margin
+// and padding related utilities are generated by
+// the design tokens.
+@import "../float-elements";
+@import "../text-alignment";
+@import "../text-transformation";
+@import "../flex-utils";
+@import "../display";
diff --git a/core/src/foundations/ionic.utility.scss b/core/src/foundations/ionic.utility.scss
index 12d14adde5..d785577ab0 100644
--- a/core/src/foundations/ionic.utility.scss
+++ b/core/src/foundations/ionic.utility.scss
@@ -3650,3 +3650,115 @@ Do not edit directly, this file was auto-generated.
 .ion-soft-2xl {
   border-radius: $ion-soft-2xl;
 }
+
+.ion-no-margin {
+  --margin-top: #{$ion-space-0};
+  --margin-end: #{$ion-space-0};
+  --margin-bottom: #{$ion-space-0};
+  --margin-start: #{$ion-space-0};
+
+  @include margin($ion-space-0);
+}
+
+.ion-margin {
+  --margin-top: #{$ion-space-400};
+  --margin-end: #{$ion-space-400};
+  --margin-bottom: #{$ion-space-400};
+  --margin-start: #{$ion-space-400};
+
+  @include margin($ion-space-400);
+}
+
+.ion-margin-top {
+  --margin-top: #{$ion-space-400};
+
+  @include margin($ion-space-400, null, null, null);
+}
+
+.ion-margin-end {
+  --margin-end: #{$ion-space-400};
+
+  @include margin(null, $ion-space-400, null, null);
+}
+
+.ion-margin-bottom {
+  --margin-bottom: #{$ion-space-400};
+
+  @include margin(null, null, $ion-space-400, null);
+}
+
+.ion-margin-start {
+  --margin-start: #{$ion-space-400};
+
+  @include margin(null, null, null, $ion-space-400);
+}
+
+.ion-margin-vertical {
+  --margin-top: #{$ion-space-400};
+  --margin-bottom: #{$ion-space-400};
+
+  @include margin($ion-space-400, null, $ion-space-400, null);
+}
+
+.ion-margin-horizontal {
+  --margin-start: #{$ion-space-400};
+  --margin-end: #{$ion-space-400};
+
+  @include margin(null, $ion-space-400, null, $ion-space-400);
+}
+
+.ion-no-padding {
+  --padding-top: #{$ion-space-0};
+  --padding-end: #{$ion-space-0};
+  --padding-bottom: #{$ion-space-0};
+  --padding-start: #{$ion-space-0};
+
+  @include padding($ion-space-0);
+}
+
+.ion-padding {
+  --padding-top: #{$ion-space-400};
+  --padding-end: #{$ion-space-400};
+  --padding-bottom: #{$ion-space-400};
+  --padding-start: #{$ion-space-400};
+
+  @include padding($ion-space-400);
+}
+
+.ion-padding-top {
+  --padding-top: #{$ion-space-400};
+
+  @include padding($ion-space-400, null, null, null);
+}
+
+.ion-padding-end {
+  --padding-end: #{$ion-space-400};
+
+  @include padding(null, $ion-space-400, null, null);
+}
+
+.ion-padding-bottom {
+  --padding-bottom: #{$ion-space-400};
+
+  @include padding(null, null, $ion-space-400, null);
+}
+
+.ion-padding-start {
+  --padding-start: #{$ion-space-400};
+
+  @include padding(null, null, null, $ion-space-400);
+}
+
+.ion-padding-vertical {
+  --padding-top: #{$ion-space-400};
+  --padding-bottom: #{$ion-space-400};
+
+  @include padding($ion-space-400, null, $ion-space-400, null);
+}
+
+.ion-padding-horizontal {
+  --padding-start: #{$ion-space-400};
+  --padding-end: #{$ion-space-400};
+
+  @include padding(null, $ion-space-400, null, $ion-space-400);
+}