diff --git a/core/scripts/testing/scripts.js b/core/scripts/testing/scripts.js
index a4b2d46e7e3..1fe2acdf717 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 9bea2e780d6..5dbeecab0ed 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');
-
-        // 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);
-
-            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');
+      // 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];
+
+      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);
+        }
+      });
+
+      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})  {
-
-        console.log('Generating Utility-Classes...');
-        
-        // Arrays to store specific utility classes
-        const typographyUtilityClasses = [];
-        const otherUtilityClasses = [];
-
-        // Generate utility classes for each token
-        dictionary.allTokens.map((prop) => {
-
-            const tokenCategory = prop.attributes.category;
-
-            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);
-            
-            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));
-
-            } 
-
-            let utilityClass = '';
-
-            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);
-            }
-
-            return otherUtilityClasses.push(utilityClass);
-        });
-
-        // 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');
+    format: async function ({ dictionary, file }) {
+
+      console.log('Generating Utility-Classes...');
+
+      // Arrays to store specific utility classes
+      const typographyUtilityClasses = [];
+      const otherUtilityClasses = [];
+
+      // Generate utility classes for each token
+      dictionary.allTokens.map((prop) => {
+
+        const tokenCategory = prop.attributes.category;
+
+        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);
+
+        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));
+        }
+
+        let utilityClass = '';
+
+        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);
+        }
+
+        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 56ba2ef7378..c2709ff3c69 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 93f21d2e6e0..2b020df62c7 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 31e9129bb90..9f80bbc64e3 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 146b156bc75..9d3e83a2165 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 3501257572b..b7e3748487d 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 5052cc80064..bc2b73400f2 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 5e3cf1a2bb3..038dd0a4524 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 80ae4048c0c..fdab7b2ca35 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 29f6da7fc7f..e5a5227bd1f 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 1ed2f478220..866c6a22afb 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 36f2372c38a..9d16b5c3b3f 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 d7c262feab0..e001ea27545 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 9f66f1ffe46..d71a3e63b4a 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 3ada397f690..4c97d97c45a 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 d3d84a0e765..032840980a6 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 d7c262feab0..e001ea27545 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 9f66f1ffe46..d71a3e63b4a 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 3ada397f690..4c97d97c45a 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 91becd47c1f..ba71f568298 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 90459e325b6..8fe4f788de4 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 a590e1dcbb7..50c492bd919 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 588485561de..7487fe6f59b 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 f594fbba08c..11d68038f01 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 f9f69cb4562..52ffd199147 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 87d3c902677..0f7d1163964 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 b899a2b41b1..6978b2ed004 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 111efa1f55d..6a61e55fe79 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 3e341a80643..cd65dd254c9 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 2bf53f43504..ed04a2d4f74 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 cec631d3255..2445f6967f8 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 cc10e90ac63..7e8354ba503 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 4da87bd2f71..582be5aa685 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 3ceb26954cb..8de4bb78ea0 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 1763a28a543..f8074d70f53 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 a63bbf593ed..e9608f9e509 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 3b918a6f5af..9840cc32651 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 319be1c02fe..acb2218c861 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 be40dec90ce..5e945e6413a 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 146f1126e45..644d144a375 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 063a168700a..5be0ee388ef 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 8a807a476b5..a269475af43 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 97e08e89ce9..af4c54bc9bd 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 0786d8c8533..50abe100c89 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 d05eed7ceb2..5a81895f4f4 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 d05eed7ceb2..5a81895f4f4 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 61c667b297f..8bd4692c1fc 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 a6ac8ac146c..a29e1b78f4b 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 479c2a55035..751794238e9 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 8a37216d5ec..6d33fb1db18 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 77da70434ac..1b297ec7fd8 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 624f4b9262c..b598c4e8e57 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 61c667b297f..8bd4692c1fc 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 a6ac8ac146c..a29e1b78f4b 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 479c2a55035..751794238e9 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 511cd20b07b..fa5c919266b 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 8a2f4cc8eb5..2e61cbd0760 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 09107b4f20e..ff3977424a3 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 7c0b0dc0662..aab26630648 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 f6bd27ead26..d7d77a0e28a 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 166a9813d49..296cbad7e42 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 07f694d200d..074729207e2 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 a0ecc5a2fe9..f0b0c4536fa 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 2eb485718c6..8fd7e5d7127 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 dbaf9913a5d..3918ea3f6df 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 12d14adde57..d785577ab00 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);
+}