diff --git a/core/api.txt b/core/api.txt
index 808c1d66a6..f956418247 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -185,7 +185,7 @@ ion-app,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-avatar,shadow
 ion-avatar,prop,mode,"ios" | "md",undefined,false,false
 ion-avatar,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
-ion-avatar,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | undefined,undefined,false,false
+ion-avatar,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall" | undefined,undefined,false,false
 ion-avatar,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-avatar,css-prop,--border-radius,ionic
 ion-avatar,css-prop,--border-radius,ios
@@ -989,19 +989,25 @@ ion-item,css-prop,--background,md
 ion-item,css-prop,--background-activated,ionic
 ion-item,css-prop,--background-activated,ios
 ion-item,css-prop,--background-activated,md
+ion-item,css-prop,--background-activated-opacity,ionic
 ion-item,css-prop,--background-activated-opacity,ios
 ion-item,css-prop,--background-activated-opacity,md
+ion-item,css-prop,--background-focused,ionic
 ion-item,css-prop,--background-focused,ios
 ion-item,css-prop,--background-focused,md
+ion-item,css-prop,--background-focused-opacity,ionic
 ion-item,css-prop,--background-focused-opacity,ios
 ion-item,css-prop,--background-focused-opacity,md
+ion-item,css-prop,--background-hover,ionic
 ion-item,css-prop,--background-hover,ios
 ion-item,css-prop,--background-hover,md
+ion-item,css-prop,--background-hover-opacity,ionic
 ion-item,css-prop,--background-hover-opacity,ios
 ion-item,css-prop,--background-hover-opacity,md
 ion-item,css-prop,--border-color,ionic
 ion-item,css-prop,--border-color,ios
 ion-item,css-prop,--border-color,md
+ion-item,css-prop,--border-radius,ionic
 ion-item,css-prop,--border-radius,ios
 ion-item,css-prop,--border-radius,md
 ion-item,css-prop,--border-style,ionic
@@ -1010,30 +1016,43 @@ ion-item,css-prop,--border-style,md
 ion-item,css-prop,--border-width,ionic
 ion-item,css-prop,--border-width,ios
 ion-item,css-prop,--border-width,md
+ion-item,css-prop,--color,ionic
 ion-item,css-prop,--color,ios
 ion-item,css-prop,--color,md
+ion-item,css-prop,--color-activated,ionic
 ion-item,css-prop,--color-activated,ios
 ion-item,css-prop,--color-activated,md
+ion-item,css-prop,--color-focused,ionic
 ion-item,css-prop,--color-focused,ios
 ion-item,css-prop,--color-focused,md
+ion-item,css-prop,--color-hover,ionic
 ion-item,css-prop,--color-hover,ios
 ion-item,css-prop,--color-hover,md
+ion-item,css-prop,--detail-icon-color,ionic
 ion-item,css-prop,--detail-icon-color,ios
 ion-item,css-prop,--detail-icon-color,md
+ion-item,css-prop,--detail-icon-font-size,ionic
 ion-item,css-prop,--detail-icon-font-size,ios
 ion-item,css-prop,--detail-icon-font-size,md
+ion-item,css-prop,--detail-icon-opacity,ionic
 ion-item,css-prop,--detail-icon-opacity,ios
 ion-item,css-prop,--detail-icon-opacity,md
+ion-item,css-prop,--inner-border-width,ionic
 ion-item,css-prop,--inner-border-width,ios
 ion-item,css-prop,--inner-border-width,md
+ion-item,css-prop,--inner-box-shadow,ionic
 ion-item,css-prop,--inner-box-shadow,ios
 ion-item,css-prop,--inner-box-shadow,md
+ion-item,css-prop,--inner-padding-bottom,ionic
 ion-item,css-prop,--inner-padding-bottom,ios
 ion-item,css-prop,--inner-padding-bottom,md
+ion-item,css-prop,--inner-padding-end,ionic
 ion-item,css-prop,--inner-padding-end,ios
 ion-item,css-prop,--inner-padding-end,md
+ion-item,css-prop,--inner-padding-start,ionic
 ion-item,css-prop,--inner-padding-start,ios
 ion-item,css-prop,--inner-padding-start,md
+ion-item,css-prop,--inner-padding-top,ionic
 ion-item,css-prop,--inner-padding-top,ios
 ion-item,css-prop,--inner-padding-top,md
 ion-item,css-prop,--min-height,ionic
@@ -1051,8 +1070,10 @@ ion-item,css-prop,--padding-start,md
 ion-item,css-prop,--padding-top,ionic
 ion-item,css-prop,--padding-top,ios
 ion-item,css-prop,--padding-top,md
+ion-item,css-prop,--ripple-color,ionic
 ion-item,css-prop,--ripple-color,ios
 ion-item,css-prop,--ripple-color,md
+ion-item,css-prop,--transition,ionic
 ion-item,css-prop,--transition,ios
 ion-item,css-prop,--transition,md
 ion-item,part,detail-icon
@@ -2097,8 +2118,11 @@ ion-spinner,prop,duration,number | undefined,undefined,false,false
 ion-spinner,prop,mode,"ios" | "md",undefined,false,false
 ion-spinner,prop,name,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-sharp" | "lines-sharp-small" | "lines-small" | undefined,undefined,false,false
 ion-spinner,prop,paused,boolean,false,false,false
+ion-spinner,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | undefined,undefined,false,false
 ion-spinner,prop,theme,"ios" | "md" | "ionic",undefined,false,false
-ion-spinner,css-prop,--color
+ion-spinner,css-prop,--color,ionic
+ion-spinner,css-prop,--color,ios
+ion-spinner,css-prop,--color,md
 
 ion-split-pane,shadow
 ion-split-pane,prop,contentId,string | undefined,undefined,false,true
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index c67c590d56..057be08e40 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -340,9 +340,9 @@ export namespace Components {
          */
         "shape"?: 'soft' | 'round' | 'rectangular';
         /**
-          * Set to `"xsmall"` for the smallest size, `"small"` for a compact size, `"medium"` for the default height and width, `"large"` for a larger size, or `"xlarge"` for the largest dimensions.  Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
+          * Set to `"xxsmall"` for the smallest size. Set to `"xsmall"` for a very small size. Set to `"small"` for a compact size. Set to `"medium"` for the default height and width. Set to `"large"` for a larger size. Set to `"xlarge"` for the largest dimensions.  Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
          */
-        "size"?: `xsmall` | 'small' | 'medium' | 'large' | 'xlarge';
+        "size"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -3346,6 +3346,10 @@ export namespace Components {
           * If `true`, the spinner's animation will be paused.
          */
         "paused": boolean;
+        /**
+          * Set to `"xsmall"` for the smallest size. Set to `"small"` for a smaller size. Set to `"medium"` for a medium size. Set to `"large"` for a large size. Set to `"xlarge"` for the largest size.  Defaults to `"xsmall"` for the `ionic` theme, undefined for all other themes.
+         */
+        "size"?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -5596,9 +5600,9 @@ declare namespace LocalJSX {
          */
         "shape"?: 'soft' | 'round' | 'rectangular';
         /**
-          * Set to `"xsmall"` for the smallest size, `"small"` for a compact size, `"medium"` for the default height and width, `"large"` for a larger size, or `"xlarge"` for the largest dimensions.  Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
+          * Set to `"xxsmall"` for the smallest size. Set to `"xsmall"` for a very small size. Set to `"small"` for a compact size. Set to `"medium"` for the default height and width. Set to `"large"` for a larger size. Set to `"xlarge"` for the largest dimensions.  Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
          */
-        "size"?: `xsmall` | 'small' | 'medium' | 'large' | 'xlarge';
+        "size"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -8689,6 +8693,10 @@ declare namespace LocalJSX {
           * If `true`, the spinner's animation will be paused.
          */
         "paused"?: boolean;
+        /**
+          * Set to `"xsmall"` for the smallest size. Set to `"small"` for a smaller size. Set to `"medium"` for a medium size. Set to `"large"` for a large size. Set to `"xlarge"` for the largest size.  Defaults to `"xsmall"` for the `ionic` theme, undefined for all other themes.
+         */
+        "size"?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
         /**
           * The theme determines the visual appearance of the component.
          */
diff --git a/core/src/components/avatar/avatar.scss b/core/src/components/avatar/avatar.common.scss
similarity index 100%
rename from core/src/components/avatar/avatar.scss
rename to core/src/components/avatar/avatar.common.scss
diff --git a/core/src/components/avatar/avatar.ionic.scss b/core/src/components/avatar/avatar.ionic.scss
index 892f67dd60..de3c3e2f8a 100644
--- a/core/src/components/avatar/avatar.ionic.scss
+++ b/core/src/components/avatar/avatar.ionic.scss
@@ -1,5 +1,5 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
-@import "./avatar";
+@import "./avatar.common";
 
 // Ionic Avatar
 // --------------------------------------------------
@@ -30,6 +30,20 @@
 // Avatar Sizes
 // --------------------------------------------------
 
+/* 2-Extra Small */
+:host(.avatar-xxsmall) {
+  --padding-end: #{globals.$ionic-space-050};
+  --padding-start: #{globals.$ionic-space-050};
+
+  width: globals.$ionic-scale-400;
+  height: globals.$ionic-scale-400;
+
+  font-size: globals.$ionic-font-size-300;
+
+  line-height: globals.$ionic-line-height-500;
+}
+
+/* Extra Small */
 :host(.avatar-xsmall) {
   --padding-end: #{globals.$ionic-space-050};
   --padding-start: #{globals.$ionic-space-050};
@@ -39,9 +53,10 @@
 
   font-size: globals.$ionic-font-size-300;
 
-  line-height: globals.$ionic-line-height-400;
+  line-height: globals.$ionic-line-height-500;
 }
 
+/* Small */
 :host(.avatar-small) {
   --padding-end: #{globals.$ionic-space-150};
   --padding-start: #{globals.$ionic-space-150};
@@ -54,6 +69,7 @@
   line-height: globals.$ionic-line-height-600;
 }
 
+/* Medium */
 :host(.avatar-medium) {
   --padding-end: #{globals.$ionic-space-200};
   --padding-start: #{globals.$ionic-space-200};
@@ -64,6 +80,7 @@
   font-size: globals.$ionic-font-size-450;
 }
 
+/* Large */
 :host(.avatar-large) {
   --padding-end: #{globals.$ionic-space-250};
   --padding-start: #{globals.$ionic-space-250};
@@ -74,6 +91,7 @@
   font-size: globals.$ionic-font-size-500;
 }
 
+/* Extra Large */
 :host(.avatar-xlarge) {
   --padding-end: #{globals.$ionic-space-300};
   --padding-start: #{globals.$ionic-space-300};
@@ -87,6 +105,7 @@
 // Avatar Shapes
 // --------------------------------------------------
 
+:host(.avatar-xxsmall.avatar-soft),
 :host(.avatar-xsmall.avatar-soft),
 :host(.avatar-small.avatar-soft) {
   --border-radius: #{globals.$ionic-border-radius-100};
diff --git a/core/src/components/avatar/avatar.ios.scss b/core/src/components/avatar/avatar.ios.scss
index bde09052b2..1f3a00782b 100644
--- a/core/src/components/avatar/avatar.ios.scss
+++ b/core/src/components/avatar/avatar.ios.scss
@@ -1,4 +1,4 @@
-@import "./avatar";
+@import "./avatar.common";
 @import "./avatar.ios.vars";
 
 // iOS Avatar
diff --git a/core/src/components/avatar/avatar.md.scss b/core/src/components/avatar/avatar.md.scss
index 564901d808..200f570704 100644
--- a/core/src/components/avatar/avatar.md.scss
+++ b/core/src/components/avatar/avatar.md.scss
@@ -1,4 +1,4 @@
-@import "./avatar";
+@import "./avatar.common";
 @import "./avatar.md.vars";
 
 // Material Design Avatar
diff --git a/core/src/components/avatar/avatar.tsx b/core/src/components/avatar/avatar.tsx
index 801ac633c9..b961fa3301 100644
--- a/core/src/components/avatar/avatar.tsx
+++ b/core/src/components/avatar/avatar.tsx
@@ -20,13 +20,16 @@ export class Avatar implements ComponentInterface {
   @Element() el!: HTMLElement;
 
   /**
-   * Set to `"xsmall"` for the smallest size, `"small"` for a compact size, `"medium"`
-   * for the default height and width, `"large"` for a larger size, or `"xlarge"` for
-   * the largest dimensions.
+   * Set to `"xxsmall"` for the smallest size.
+   * Set to `"xsmall"` for a very small size.
+   * Set to `"small"` for a compact size.
+   * Set to `"medium"` for the default height and width.
+   * Set to `"large"` for a larger size.
+   * Set to `"xlarge"` for the largest dimensions.
    *
    * Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
    */
-  @Prop() size?: `xsmall` | 'small' | 'medium' | 'large' | 'xlarge';
+  @Prop() size?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 
   /**
    * Set to `"soft"` for an avatar with slightly rounded corners,
diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts b/core/src/components/avatar/test/shape/avatar.e2e.ts
index 8bf6128bb6..d063ee4c44 100644
--- a/core/src/components/avatar/test/shape/avatar.e2e.ts
+++ b/core/src/components/avatar/test/shape/avatar.e2e.ts
@@ -108,6 +108,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           </style>
 
           <div id="container">
+            <ion-avatar shape="soft" size="xxsmall">A</ion-avatar>
             <ion-avatar shape="soft" size="xsmall">AB</ion-avatar>
             <ion-avatar shape="soft" size="small">AB</ion-avatar>
             <ion-avatar shape="soft">AB</ion-avatar>
@@ -132,6 +133,9 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           </style>
 
           <div id="container">
+            <ion-avatar shape="soft" size="xxsmall">
+              <ion-icon name="person-outline"></ion-icon>
+            </ion-avatar>
             <ion-avatar shape="soft" size="xsmall">
               <ion-icon name="person-outline"></ion-icon>
             </ion-avatar>
@@ -162,6 +166,9 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           </style>
 
           <div id="container">
+            <ion-avatar shape="soft" size="xxsmall">
+              <img src="/src/components/avatar/test/avatar.svg"/>
+            </ion-avatar>
             <ion-avatar shape="soft" size="xsmall">
               <img src="/src/components/avatar/test/avatar.svg"/>
             </ion-avatar>
diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
index b3fd1cbdca..df5538ca89 100644
Binary files a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
index e11ec6dcc6..780b8073de 100644
Binary files a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
index f1fcbe8eca..1f20ef93c0 100644
Binary files a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 78d54a7adc..0110fa9908 100644
Binary files a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 70b9f8a910..6d15212350 100644
Binary files a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Safari-linux.png
index b65394b67c..fa8ffa89f1 100644
Binary files a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 93ba05b6f8..241d27a0b6 100644
Binary files a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 4f283a6812..b5d17d90d9 100644
Binary files a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Safari-linux.png
index a509f95a8a..9756da8553 100644
Binary files a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/avatar/test/shape/index.html b/core/src/components/avatar/test/shape/index.html
index 16434a73b3..4eb659b18f 100644
--- a/core/src/components/avatar/test/shape/index.html
+++ b/core/src/components/avatar/test/shape/index.html
@@ -43,6 +43,7 @@
 
         <h2>Soft</h2>
         <div class="container">
+          <ion-avatar shape="soft" size="xxsmall">A</ion-avatar>
           <ion-avatar shape="soft" size="xsmall">AB</ion-avatar>
           <ion-avatar shape="soft" size="small">AB</ion-avatar>
           <ion-avatar shape="soft" size="medium">AB</ion-avatar>
@@ -52,6 +53,7 @@
 
         <h2>Round</h2>
         <div class="container">
+          <ion-avatar shape="round" size="xxsmall">A</ion-avatar>
           <ion-avatar shape="round" size="xsmall">AB</ion-avatar>
           <ion-avatar shape="round" size="small">AB</ion-avatar>
           <ion-avatar shape="round" size="medium">AB</ion-avatar>
@@ -61,6 +63,7 @@
 
         <h2>Rectangular</h2>
         <div class="container">
+          <ion-avatar shape="rectangular" size="xxsmall">A</ion-avatar>
           <ion-avatar shape="rectangular" size="xsmall">AB</ion-avatar>
           <ion-avatar shape="rectangular" size="small">AB</ion-avatar>
           <ion-avatar shape="rectangular" size="medium">AB</ion-avatar>
diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts b/core/src/components/avatar/test/size/avatar.e2e.ts
index 5838519dc5..f605a44195 100644
--- a/core/src/components/avatar/test/size/avatar.e2e.ts
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts
@@ -6,6 +6,51 @@ import { configs, test } from '@utils/test/playwright';
  */
 configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => {
   test.describe(title('avatar: size'), () => {
+    test.describe('xxsmall', () => {
+      test('should not have visual regressions when containing text', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-avatar size="xxsmall">A</ion-avatar>
+        `,
+          config
+        );
+
+        const avatar = page.locator('ion-avatar');
+
+        await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xxsmall-text`));
+      });
+
+      test('should not have visual regressions when containing an icon', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-avatar size="xxsmall">
+            <ion-icon name="person-outline"></ion-icon>
+          </ion-avatar>
+        `,
+          config
+        );
+
+        const avatar = page.locator('ion-avatar');
+
+        await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xxsmall-icon`));
+      });
+
+      test('should not have visual regressions when containing an image', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-avatar size="xxsmall">
+            <img src="/src/components/avatar/test/avatar.svg"/>
+          </ion-avatar>
+        `,
+          config
+        );
+
+        const avatar = page.locator('ion-avatar');
+
+        await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xxsmall-image`));
+      });
+    });
+
     test.describe('xsmall', () => {
       test('should not have visual regressions when containing text', async ({ page }) => {
         await page.setContent(
diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..e28b07799b
Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..68d5a2ae73
Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..0d99b917f3
Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-icon-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-image-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-image-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..55a161fdd4
Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-image-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-image-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-image-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..e4af2bee80
Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-image-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-image-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-image-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..0d34818dd3
Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-image-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..9687f2abfe
Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..c2d3f13a02
Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-text-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..57aa900f90
Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/avatar/test/size/index.html b/core/src/components/avatar/test/size/index.html
index 875d5f7ddf..a06309e282 100644
--- a/core/src/components/avatar/test/size/index.html
+++ b/core/src/components/avatar/test/size/index.html
@@ -43,6 +43,7 @@
 
         <h2>Text</h2>
         <div class="container">
+          <ion-avatar size="xxsmall">A</ion-avatar>
           <ion-avatar size="xsmall">AB</ion-avatar>
           <ion-avatar size="small">AB</ion-avatar>
           <ion-avatar size="medium">AB</ion-avatar>
@@ -52,6 +53,9 @@
 
         <h2>Icons</h2>
         <div class="container">
+          <ion-avatar size="xxsmall">
+            <ion-icon name="person-outline"></ion-icon>
+          </ion-avatar>
           <ion-avatar size="xsmall">
             <ion-icon name="person-outline"></ion-icon>
           </ion-avatar>
@@ -71,6 +75,9 @@
 
         <h2>Images</h2>
         <div class="container">
+          <ion-avatar size="xxsmall">
+            <img src="/src/components/avatar/test/avatar.svg" />
+          </ion-avatar>
           <ion-avatar size="xsmall">
             <img src="/src/components/avatar/test/avatar.svg" />
           </ion-avatar>
diff --git a/core/src/components/badge/badge.scss b/core/src/components/badge/badge.common.scss
similarity index 84%
rename from core/src/components/badge/badge.scss
rename to core/src/components/badge/badge.common.scss
index 22252d5523..b690922a61 100644
--- a/core/src/components/badge/badge.scss
+++ b/core/src/components/badge/badge.common.scss
@@ -1,4 +1,6 @@
-@import "./badge.vars";
+@use "../../themes/functions.color" as color;
+@import "../../themes/mixins";
+@import "./badge.common.vars";
 
 // Badge
 // --------------------------------------------------
@@ -13,8 +15,6 @@
    * @prop --padding-bottom: Bottom padding of the badge
    * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge
    */
-  --background: #{ion-color(primary, base)};
-  --color: #{ion-color(primary, contrast)};
   --padding-top: #{$badge-padding-top};
   --padding-end: #{$badge-padding-end};
   --padding-bottom: #{$badge-padding-bottom};
@@ -30,7 +30,6 @@
   background: var(--background);
   color: var(--color);
 
-  font-family: $font-family-base;
   font-size: $badge-font-size;
   font-weight: $badge-font-weight;
 
@@ -45,8 +44,8 @@
 }
 
 :host(.ion-color) {
-  background: #{current-color(base)};
-  color: #{current-color(contrast)};
+  background: #{color.current-color(base)};
+  color: #{color.current-color(contrast)};
 }
 
 :host(:empty) {
diff --git a/core/src/components/badge/badge.vars.scss b/core/src/components/badge/badge.common.vars.scss
similarity index 93%
rename from core/src/components/badge/badge.vars.scss
rename to core/src/components/badge/badge.common.vars.scss
index 42e3030f84..d6941d1d77 100644
--- a/core/src/components/badge/badge.vars.scss
+++ b/core/src/components/badge/badge.common.vars.scss
@@ -1,4 +1,4 @@
-@import "../../themes/native/native.globals";
+@import "../../themes/functions.font";
 
 // Badge
 // --------------------------------------------------
diff --git a/core/src/components/badge/badge.ionic.scss b/core/src/components/badge/badge.ionic.scss
index 0ec10a3496..a3c452dadb 100644
--- a/core/src/components/badge/badge.ionic.scss
+++ b/core/src/components/badge/badge.ionic.scss
@@ -1,12 +1,14 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
-@import "./badge";
+@use "./badge.common";
 
 // Ionic Badge
 // --------------------------------------------------
 
 :host {
-  --padding-start: #{globals.$ionic-space-100};
-  --padding-end: #{globals.$ionic-space-100};
+  --background: #{globals.ion-color(primary, base)};
+  --color: #{globals.ion-color(primary, contrast)};
+  --padding-start: #{globals.$ionic-space-200};
+  --padding-end: #{globals.$ionic-space-200};
   --padding-top: #{globals.$ionic-space-0};
   --padding-bottom: #{globals.$ionic-space-0};
 
@@ -23,23 +25,23 @@
 
 /* Soft Badge */
 :host(.badge-soft) {
-  @include border-radius(globals.$ionic-border-radius-200);
+  @include globals.border-radius(globals.$ionic-border-radius-200);
 }
 
 :host(.badge-xxsmall.badge-soft),
 :host(.badge-xsmall.badge-soft),
 :host(.badge-small.badge-soft) {
-  @include border-radius(globals.$ionic-border-radius-100);
+  @include globals.border-radius(globals.$ionic-border-radius-100);
 }
 
 /* Round Badge */
 :host(.badge-round) {
-  @include border-radius(globals.$ionic-border-radius-full);
+  @include globals.border-radius(globals.$ionic-border-radius-full);
 }
 
 /* Rectangular Badge */
 :host(.badge-rectangular) {
-  @include border-radius(globals.$ionic-border-radius-0);
+  @include globals.border-radius(globals.$ionic-border-radius-0);
 }
 
 // Badge Sizes
@@ -47,6 +49,9 @@
 
 /* 2-Extra Small Badge */
 :host(.badge-xxsmall) {
+  --padding-start: #{globals.$ionic-space-050};
+  --padding-end: #{globals.$ionic-space-050};
+
   min-width: globals.$ionic-scale-400;
   height: globals.$ionic-scale-400;
 
@@ -57,6 +62,9 @@
 
 /* Extra Small Badge */
 :host(.badge-xsmall) {
+  --padding-start: #{globals.$ionic-space-100};
+  --padding-end: #{globals.$ionic-space-100};
+
   min-width: globals.$ionic-scale-600;
   height: globals.$ionic-scale-600;
 
@@ -67,6 +75,9 @@
 
 /* Small Badge */
 :host(.badge-small) {
+  --padding-start: #{globals.$ionic-space-100};
+  --padding-end: #{globals.$ionic-space-100};
+
   min-width: globals.$ionic-scale-800;
   height: globals.$ionic-scale-800;
 
@@ -87,9 +98,6 @@
 
 /* Large Badge */
 :host(.badge-large) {
-  --padding-start: #{globals.$ionic-space-200};
-  --padding-end: #{globals.$ionic-space-200};
-
   min-width: globals.$ionic-scale-1200;
   height: globals.$ionic-scale-1200;
 
@@ -100,9 +108,6 @@
 
 /* Extra Large Badge */
 :host(.badge-xlarge) {
-  --padding-start: #{globals.$ionic-space-200};
-  --padding-end: #{globals.$ionic-space-200};
-
   min-width: globals.$ionic-scale-1400;
   height: globals.$ionic-scale-1400;
 
diff --git a/core/src/components/badge/badge.ios.scss b/core/src/components/badge/badge.ios.scss
index 68183d96fb..e48c325e12 100644
--- a/core/src/components/badge/badge.ios.scss
+++ b/core/src/components/badge/badge.ios.scss
@@ -1,4 +1,4 @@
-@import "./badge";
+@import "./badge.native";
 @import "./badge.ios.vars";
 
 // iOS Badge
diff --git a/core/src/components/badge/badge.md.scss b/core/src/components/badge/badge.md.scss
index d1038913dc..3d0e94bbde 100644
--- a/core/src/components/badge/badge.md.scss
+++ b/core/src/components/badge/badge.md.scss
@@ -1,4 +1,4 @@
-@import "./badge";
+@import "./badge.native";
 @import "./badge.md.vars";
 
 // Material Design Badge
diff --git a/core/src/components/badge/badge.native.scss b/core/src/components/badge/badge.native.scss
new file mode 100644
index 0000000000..820c5599ae
--- /dev/null
+++ b/core/src/components/badge/badge.native.scss
@@ -0,0 +1,13 @@
+@import "../../themes/native/native.globals.md";
+@import "./badge.common";
+@import "./badge.common.vars";
+
+// Badge
+// --------------------------------------------------
+
+:host {
+  --background: #{ion-color(primary, base)};
+  --color: #{ion-color(primary, contrast)};
+
+  font-family: $font-family-base;
+}
diff --git a/core/src/components/badge/test/basic/badge.e2e.ts b/core/src/components/badge/test/basic/badge.e2e.ts
index 869a55fe50..e6a6a871f9 100644
--- a/core/src/components/badge/test/basic/badge.e2e.ts
+++ b/core/src/components/badge/test/basic/badge.e2e.ts
@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs().forEach(({ config, screenshot, title }) => {
+configs({ modes: ['md', 'ios', 'ionic-md'] }).forEach(({ config, screenshot, title }) => {
   test.describe(title('badge: rendering'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto('/src/components/badge/test/basic', config);
diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..432046d27d
Binary files /dev/null and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..183ec47cd3
Binary files /dev/null and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..66ce6429ad
Binary files /dev/null and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..cea5cb1b57
Binary files /dev/null and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..8212c570d7
Binary files /dev/null and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..96b8921008
Binary files /dev/null and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 117f06854d..9dec6299c5 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
index df43559f40..e622d87976 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png
index 3ac6cd5399..d230f4803a 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 8050298f22..4c40eece2f 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 82086cedb2..ea9923a629 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png
index 20d70ff0bb..c42b32c080 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 1acad845e7..99dbe06825 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
index fe75f921ac..eae2fd09ef 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png
index cb8ad5f3d3..d61f95245e 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 630fde70c5..7ebab3ddc2 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
index a02e73ecf1..2637176a81 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png
index f83e990be2..f65d53021d 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/button.ionic.scss b/core/src/components/button/button.ionic.scss
index 5b28def0f5..2246a9d151 100644
--- a/core/src/components/button/button.ionic.scss
+++ b/core/src/components/button/button.ionic.scss
@@ -69,6 +69,29 @@
   }
 }
 
+// Button Colors
+// --------------------------------------------------
+
+// Solid Button with Color
+:host(.button-solid.ion-color) .button-native {
+  background: globals.current-color(base);
+  color: globals.current-color(contrast);
+}
+
+// Outline Button with Color
+:host(.button-outline.ion-color) .button-native {
+  border-color: globals.current-color(base);
+
+  background: transparent;
+  color: globals.current-color(base);
+}
+
+// Clear Button with Color
+:host(.button-clear.ion-color) .button-native {
+  background: transparent;
+  color: globals.current-color(base);
+}
+
 // Button Sizes
 // -------------------------------------------------------------------------------
 
@@ -231,6 +254,32 @@
   --background-hover: #{globals.$ionic-color-neutral-100};
 }
 
+/**
+ * Only allow overriding of opacity here
+ * as developers should not be overriding
+ * colors when using the color prop.
+ */
+
+:host(.button-solid.ion-color.ion-focused) .button-native::after {
+  background: #{current-color(contrast)};
+}
+
+:host(.button-clear.ion-color.ion-focused) .button-native::after,
+:host(.button-outline.ion-color.ion-focused) .button-native::after {
+  background: #{current-color(base)};
+}
+
+@media (any-hover: hover) {
+  :host(.button-solid.ion-color:hover) .button-native::after {
+    background: #{current-color(contrast)};
+  }
+
+  :host(.button-clear.ion-color:hover) .button-native::after,
+  :host(.button-outline.ion-color:hover) .button-native::after {
+    background: #{current-color(base)};
+  }
+}
+
 // Button: Disabled
 // --------------------------------------------------
 
@@ -257,9 +306,9 @@
 
 // Default Outline Color
 :host(.button-outline) {
-  --border-color: #{globals.$ionic-color-primary-base};
+  --border-color: #{globals.ion-color(primary, base)};
   --background: #{globals.$ionic-color-base-white};
-  --color: #{globals.$ionic-color-primary-base};
+  --color: #{globals.ion-color(primary, base)};
 }
 
 // Clear Button
diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Chrome-linux.png
deleted file mode 100644
index 24abdf612a..0000000000
Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Firefox-linux.png
deleted file mode 100644
index 0eb921b67e..0000000000
Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Safari-linux.png
deleted file mode 100644
index 13b632ef8c..0000000000
Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 3d4929f352..c489f4c236 100644
Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png
index b88ce64c82..320b06a66a 100644
Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png
index 5f94117ad7..5785946a77 100644
Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.ts b/core/src/components/button/test/outline/button.e2e.ts
index 66353049e1..78fe52efaa 100644
--- a/core/src/components/button/test/outline/button.e2e.ts
+++ b/core/src/components/button/test/outline/button.e2e.ts
@@ -1,8 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-// TODO(ROU-5474): add tests for ionic theme
-configs().forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('button: outline'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto(`/src/components/button/test/outline`, config);
diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..d846dc7e59
Binary files /dev/null and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..c4124a7416
Binary files /dev/null and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..8d3436997b
Binary files /dev/null and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..6b83bd8cfb
Binary files /dev/null and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..2b2ee05de2
Binary files /dev/null and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..7a1138ffc7
Binary files /dev/null and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts b/core/src/components/button/test/states/button.e2e.ts
index 5dcff3c089..53c623eb70 100644
--- a/core/src/components/button/test/states/button.e2e.ts
+++ b/core/src/components/button/test/states/button.e2e.ts
@@ -19,7 +19,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md', 'md', 'ios'] }).forEach(({ ti
     test('should render solid button with color', async ({ page }) => {
       await page.setContent(
         `
-        <ion-button color="tertiary" class="ion-activated">Button</ion-button>
+        <ion-button color="warning" class="ion-activated">Button</ion-button>
       `,
         config
       );
@@ -45,7 +45,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md', 'md', 'ios'] }).forEach(({ ti
     test('should render outline button with color', async ({ page }) => {
       await page.setContent(
         `
-        <ion-button color="tertiary" fill="outline" class="ion-activated">Button</ion-button>
+        <ion-button color="warning" fill="outline" class="ion-activated">Button</ion-button>
       `,
         config
       );
@@ -71,7 +71,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md', 'md', 'ios'] }).forEach(({ ti
     test('should render clear button with color', async ({ page }) => {
       await page.setContent(
         `
-        <ion-button color="tertiary" fill="clear" class="ion-activated">Button</ion-button>
+        <ion-button color="warning" fill="clear" class="ion-activated">Button</ion-button>
       `,
         config
       );
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Chrome-linux.png
index d04c6fb561..e06aa96faf 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 97187381d9..3883961209 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Safari-linux.png
index 60463ec4aa..35314d7b09 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ios-ltr-Mobile-Chrome-linux.png
index 8f6b1edbf7..287cbd6c79 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ios-ltr-Mobile-Firefox-linux.png
index 62f417610d..b6f6890c9d 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ios-ltr-Mobile-Safari-linux.png
index c830bf050f..17dc42198b 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Chrome-linux.png
index 9089e92644..754a18bf79 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Firefox-linux.png
index 2071f7bc37..6aaf46d005 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Safari-linux.png
index 2c55d50876..61a9ff44ce 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png
index beb85dc498..ce38b07b2d 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 439eaaa833..db2382acca 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png
index aebfd83a2d..cff442fbde 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Chrome-linux.png
index c7a6a9e3a7..6becba14c5 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Firefox-linux.png
index 977eddb405..05eb3a77db 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Safari-linux.png
index 2400c4730e..3afe06bcd1 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Chrome-linux.png
index a14e88619c..0c70275eea 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Firefox-linux.png
index 1530f03e97..6d9e35c78f 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Safari-linux.png
index 4c1e860ea0..7275a4efeb 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 50ad3cbd7c..941e5dafb5 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 4abf64061f..eee7abb413 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png
index 4756dcb06f..ed309f7290 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Chrome-linux.png
index d5821d9836..cd0aedc7b3 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Firefox-linux.png
index b42fa9acee..088cf917a7 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Safari-linux.png
index 2d5f36cb94..02cf113605 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Chrome-linux.png
index 3affa1e43d..cbe26c2295 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Firefox-linux.png
index 4dd613f9df..1225b21d20 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Safari-linux.png
index 40dac83d93..cdeca5cd7a 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/chip.ionic.scss b/core/src/components/chip/chip.ionic.scss
index cdf1ba1b8c..b8ed01474f 100644
--- a/core/src/components/chip/chip.ionic.scss
+++ b/core/src/components/chip/chip.ionic.scss
@@ -43,10 +43,15 @@
 // ---------------------------------------------
 
 :host(.chip-outline) {
-  --background: transparent;
   border-width: globals.$ionic-border-size-025;
-
+  border-style: globals.$ionic-border-style-solid;
   border-color: globals.$ionic-color-neutral-100;
+
+  background: transparent;
+}
+
+:host(.chip-outline.ion-color) {
+  border-color: globals.current-color(base, 0.32);
 }
 
 // Chip: Focus
@@ -64,6 +69,10 @@
   :host(:hover) {
     --background: #{globals.$ionic-color-neutral-200};
   }
+
+  :host(.ion-color:hover) {
+    background: globals.current-color(base, 0.12);
+  }
 }
 
 // Chip: Disabled
@@ -109,3 +118,19 @@
 
   font-size: globals.$ionic-font-size-350;
 }
+
+// Chip Colors
+// ---------------------------------------------
+
+:host(.ion-color) {
+  background: globals.current-color(base, 0.08);
+  color: globals.current-color(shade);
+}
+
+:host(.ion-color:focus) {
+  background: globals.current-color(base, 0.12);
+}
+
+:host(.ion-color.ion-activated) {
+  background: globals.current-color(base, 0.16);
+}
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts b/core/src/components/chip/test/basic/chip.e2e.ts
index bd30d74b2f..e6f46e4e37 100644
--- a/core/src/components/chip/test/basic/chip.e2e.ts
+++ b/core/src/components/chip/test/basic/chip.e2e.ts
@@ -29,56 +29,6 @@ configs({ modes: ['ios'] }).forEach(({ title, screenshot, config }) => {
 });
 
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  /**
-   * This behavior does not vary across modes/directions.
-   */
-  test.describe(title('chip: outline'), () => {
-    test('should render default outline chip', async ({ page }) => {
-      await page.setContent(
-        `<ion-chip outline="true">
-          <ion-icon name="checkmark-circle"></ion-icon>
-          <ion-label>Icon</ion-label>
-        </ion-chip>`,
-        config
-      );
-
-      const chip = page.locator('ion-chip');
-
-      await expect(chip).toHaveScreenshot(screenshot(`chip-outline`));
-    });
-  });
-  /**
-   * This behavior does not vary across modes/directions.
-   */
-  test.describe(title('chip: color'), () => {
-    test('should render solid color chip', async ({ page }) => {
-      await page.setContent(
-        `<ion-chip color="tertiary">
-          <ion-icon name="checkmark-circle"></ion-icon>
-          <ion-label>Tertiary with Icon</ion-label>
-        </ion-chip>`,
-        config
-      );
-
-      const chip = page.locator('ion-chip');
-
-      await expect(chip).toHaveScreenshot(screenshot(`chip-solid-color`));
-    });
-    test('should render outline color chip', async ({ page }) => {
-      await page.setContent(
-        `<ion-chip outline="true" color="tertiary">
-          <ion-icon name="checkmark-circle"></ion-icon>
-          <ion-label>Tertiary with Icon</ion-label>
-        </ion-chip>`,
-        config
-      );
-
-      const chip = page.locator('ion-chip');
-
-      await expect(chip).toHaveScreenshot(screenshot(`chip-outline-color`));
-    });
-  });
-
   test.describe(title('chip: descenders'), () => {
     test('should not clip descenders in item', async ({ page }) => {
       test.info().annotations.push({
@@ -105,3 +55,52 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
     });
   });
 });
+
+/**
+ * `md` mode does not differ from `ios` mode in chip rendering.
+ */
+configs({ modes: ['ios', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('chip: outline'), () => {
+    test('should render default outline chip', async ({ page }) => {
+      await page.setContent(
+        `<ion-chip outline="true">
+          <ion-icon name="checkmark-circle"></ion-icon>
+          <ion-label>Icon</ion-label>
+        </ion-chip>`,
+        config
+      );
+
+      const chip = page.locator('ion-chip');
+
+      await expect(chip).toHaveScreenshot(screenshot(`chip-outline`));
+    });
+  });
+  test.describe(title('chip: color'), () => {
+    test('should render solid color chip', async ({ page }) => {
+      await page.setContent(
+        `<ion-chip color="success">
+          <ion-icon name="checkmark-circle"></ion-icon>
+          <ion-label>Success with Icon</ion-label>
+        </ion-chip>`,
+        config
+      );
+
+      const chip = page.locator('ion-chip');
+
+      await expect(chip).toHaveScreenshot(screenshot(`chip-solid-color`));
+    });
+    test('should render outline color chip', async ({ page }) => {
+      await page.setContent(
+        `<ion-chip outline="true" color="success">
+          <ion-icon name="checkmark-circle"></ion-icon>
+          <ion-label>Success with Icon</ion-label>
+        </ion-chip>`,
+        config
+      );
+
+      const chip = page.locator('ion-chip');
+
+      await expect(chip).toHaveScreenshot(screenshot(`chip-outline-color`));
+    });
+  });
+});
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..9ee778a3d7
Binary files /dev/null and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..578c1c29a0
Binary files /dev/null and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..36f762dfd6
Binary files /dev/null and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Chrome-linux.png
index 4588103ecd..c6bd7cb918 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Firefox-linux.png
index c26c67ac7c..824ca487fe 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Safari-linux.png
index f7addd5840..03e5bd19e8 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..26fc206e74
Binary files /dev/null and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..8c3213baf1
Binary files /dev/null and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..93649ba387
Binary files /dev/null and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..bcefa78888
Binary files /dev/null and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..a28295cd59
Binary files /dev/null and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..e97ef3e977
Binary files /dev/null and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ios-ltr-Mobile-Chrome-linux.png
index e5baf5f951..c76fc54485 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ios-ltr-Mobile-Firefox-linux.png
index bfd6dcf966..f58258afa3 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ios-ltr-Mobile-Safari-linux.png
index 122f129e32..cab46da75d 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/input.ionic.scss b/core/src/components/input/input.ionic.scss
index 1e0874449f..5891078f03 100644
--- a/core/src/components/input/input.ionic.scss
+++ b/core/src/components/input/input.ionic.scss
@@ -15,6 +15,7 @@
   --placeholder-color: #{tokens.$ionic-color-neutral-800};
   --placeholder-opacity: 1;
   --text-color-invalid: #{tokens.$ionic-color-danger-800};
+  --background: #{tokens.$ionic-color-base-white};
 
   font-size: tokens.$ionic-font-size-350;
 }
@@ -170,7 +171,7 @@
 :host(.input-disabled:not(.ion-valid)) .input-bottom .helper-text,
 :host(.input-disabled) .input-bottom .counter,
 :host(.input-disabled) .label-text-wrapper {
-  color: tokens.$ionic-color-neutral-400;
+  color: tokens.$ionic-color-neutral-500;
 }
 
 :host(.input-disabled.has-focus.ion-valid) {
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 7bc0455bff..5a34bf4675 100644
Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png
index c0cae6be4e..307e4a94d3 100644
Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png
index c650c797c1..db8c2b5ef5 100644
Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 445d42360d..6b2f1ce47c 100644
Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 4728ce8f06..6a25828bfe 100644
Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
index 3b6458be4c..c35d294755 100644
Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/index.html b/core/src/components/item-sliding/test/icons/index.html
index 9469beecbf..e6e1165c21 100644
--- a/core/src/components/item-sliding/test/icons/index.html
+++ b/core/src/components/item-sliding/test/icons/index.html
@@ -47,7 +47,7 @@
                 <ion-icon slot="start" name="archive"></ion-icon>
                 Archive
               </ion-item-option>
-              <ion-item-option color="secondary" expandable>
+              <ion-item-option color="primary" expandable>
                 <ion-icon slot="start" name="bookmark"></ion-icon>
                 Save
               </ion-item-option>
@@ -63,7 +63,7 @@
                 <ion-icon slot="end" name="archive"></ion-icon>
                 Archive
               </ion-item-option>
-              <ion-item-option color="secondary" expandable>
+              <ion-item-option color="primary" expandable>
                 <ion-icon slot="end" name="bookmark"></ion-icon>
                 Save
               </ion-item-option>
@@ -83,7 +83,7 @@
                 <ion-icon slot="top" name="archive"></ion-icon>
                 Archive
               </ion-item-option>
-              <ion-item-option color="secondary" expandable>
+              <ion-item-option color="primary" expandable>
                 <ion-icon slot="top" name="bookmark"></ion-icon>
                 Save
               </ion-item-option>
@@ -103,7 +103,7 @@
                 <ion-icon slot="bottom" name="archive"></ion-icon>
                 Archive
               </ion-item-option>
-              <ion-item-option color="secondary" expandable>
+              <ion-item-option color="primary" expandable>
                 <ion-icon slot="bottom" name="bookmark"></ion-icon>
                 Save
               </ion-item-option>
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png
index ac3984a194..a9379823dc 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 6c209472d5..dbe79406d8 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png
index 9ec35872bc..8f63abf9ac 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Chrome-linux.png
index d8e8002ec6..420ab657a7 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Firefox-linux.png
index e0da75aa51..fadc9a14fd 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Safari-linux.png
index 3a84ff17c8..66f2ea67cd 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Chrome-linux.png
index e7ae836370..30da7afe27 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Firefox-linux.png
index e311c5f213..bbcb284b23 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Safari-linux.png
index cc89525f1e..42ecf020f0 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 0f5ec5e195..535d51c22c 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 8f14e9d01e..c55c03ab23 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Safari-linux.png
index 8877fe0363..1547400f60 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 08d635aff5..dcd5f69b47 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 89f45d88ab..ebcf83ffc1 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Safari-linux.png
index ca82d5616c..350b1c8a70 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 1c10d5c272..a4e65b14e5 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Firefox-linux.png
index c400f94e41..780093421e 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Safari-linux.png
index 0f49259ef8..11c0827656 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 05d0411830..e0b92dbe43 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Firefox-linux.png
index dde082200a..fb73a544b0 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Safari-linux.png
index 282d6c4d36..cf938a4372 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Chrome-linux.png
index d33139344a..7a5afb0de1 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Firefox-linux.png
index e72ff37cb9..14cd840584 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Safari-linux.png
index 7ba159e3aa..126c5ae76c 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 7d1dfbfcf9..8ac2ef880c 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 98138b7503..61aa6459a1 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Safari-linux.png
index 9a1a07e598..21e8c669de 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 406e3cfe55..a3fc5b3225 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Firefox-linux.png
index e3a59da21e..64c7309fef 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Safari-linux.png
index 7d33c96a16..451ab357cc 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/shapes/index.html b/core/src/components/item-sliding/test/shapes/index.html
index f9b70019cb..05fdb9e97d 100644
--- a/core/src/components/item-sliding/test/shapes/index.html
+++ b/core/src/components/item-sliding/test/shapes/index.html
@@ -37,7 +37,7 @@
                 <ion-icon slot="top" name="archive"></ion-icon>
                 Archive
               </ion-item-option>
-              <ion-item-option color="secondary" expandable>
+              <ion-item-option color="primary" expandable>
                 <ion-icon slot="top" name="bookmark"></ion-icon>
                 Save
               </ion-item-option>
@@ -57,7 +57,7 @@
                 <ion-icon slot="top" name="archive"></ion-icon>
                 Archive
               </ion-item-option>
-              <ion-item-option shape="round" color="secondary" expandable>
+              <ion-item-option shape="round" color="primary" expandable>
                 <ion-icon slot="top" name="bookmark"></ion-icon>
                 Save
               </ion-item-option>
@@ -77,7 +77,7 @@
                 <ion-icon slot="top" name="archive"></ion-icon>
                 Archive
               </ion-item-option>
-              <ion-item-option shape="soft" color="secondary" expandable>
+              <ion-item-option shape="soft" color="primary" expandable>
                 <ion-icon slot="top" name="bookmark"></ion-icon>
                 Save
               </ion-item-option>
@@ -97,7 +97,7 @@
                 <ion-icon slot="top" name="archive"></ion-icon>
                 Archive
               </ion-item-option>
-              <ion-item-option shape="rectangular" color="secondary" expandable>
+              <ion-item-option shape="rectangular" color="primary" expandable>
                 <ion-icon slot="top" name="bookmark"></ion-icon>
                 Save
               </ion-item-option>
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 491c2e9d52..18de728436 100644
Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png
index bced0dcfef..eabe5cc2b6 100644
Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png
index bd88d1ad2a..c67529dcf5 100644
Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 7d1dfbfcf9..8ac2ef880c 100644
Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 98138b7503..61aa6459a1 100644
Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Safari-linux.png
index 9a1a07e598..21e8c669de 100644
Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 7d3053e1aa..82164c5948 100644
Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png
index edba932af9..1e6170664e 100644
Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Safari-linux.png
index e2ef49bc96..1d1bb59f1d 100644
Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/states/index.html b/core/src/components/item-sliding/test/states/index.html
index 7ded4bde99..56610f8548 100644
--- a/core/src/components/item-sliding/test/states/index.html
+++ b/core/src/components/item-sliding/test/states/index.html
@@ -29,7 +29,7 @@
               <ion-label>Disabled Options</ion-label>
             </ion-item>
             <ion-item-options>
-              <ion-item-option color="secondary" expandable disabled>
+              <ion-item-option color="primary" expandable disabled>
                 <ion-icon slot="top" name="bookmark"></ion-icon>
                 Label
               </ion-item-option>
diff --git a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 13017458eb..48d55e1653 100644
Binary files a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 3453874d93..d023b9dda3 100644
Binary files a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png
index e530de31be..5b42584330 100644
Binary files a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ios-ltr-Mobile-Chrome-linux.png
index a6cfe2fba7..2a82db0952 100644
Binary files a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ios-ltr-Mobile-Firefox-linux.png
index f36f1a8fcb..e7b1d49897 100644
Binary files a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ios-ltr-Mobile-Safari-linux.png
index bbc2d26fe1..e6b71ca28c 100644
Binary files a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-md-ltr-Mobile-Chrome-linux.png
index 7c41e8d83a..2bae727c4b 100644
Binary files a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-md-ltr-Mobile-Firefox-linux.png
index 9ca9e891ba..aa33b38c90 100644
Binary files a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-md-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-md-ltr-Mobile-Safari-linux.png
index 57aaa57416..665c68a926 100644
Binary files a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.common.scss
similarity index 92%
rename from core/src/components/item/item.scss
rename to core/src/components/item/item.common.scss
index 43bd936529..991cc9d671 100644
--- a/core/src/components/item/item.scss
+++ b/core/src/components/item/item.common.scss
@@ -1,4 +1,5 @@
-@import "./item.vars";
+@import "../../themes/functions.string";
+@import "../../themes/mixins";
 
 // Item
 // --------------------------------------------------
@@ -80,8 +81,6 @@
 
   color: var(--color);
 
-  font-family: $font-family-base;
-
   text-align: initial;
   text-decoration: none;
 
@@ -89,19 +88,6 @@
   box-sizing: border-box;
 }
 
-// Item: Color
-// --------------------------------------------------
-
-:host(.ion-color) .item-native {
-  background: current-color(base);
-  color: current-color(contrast);
-}
-
-:host(.ion-color) .item-native,
-:host(.ion-color) .item-inner {
-  border-color: current-color(shade);
-}
-
 // Item: Activated
 // --------------------------------------------------
 
@@ -115,10 +101,6 @@
   }
 }
 
-:host(.ion-color.ion-activated) .item-native {
-  color: current-color(contrast);
-}
-
 // Item: Focused
 // --------------------------------------------------
 
@@ -132,14 +114,6 @@
   }
 }
 
-:host(.ion-color.ion-focused) .item-native {
-  color: current-color(contrast);
-
-  &::after {
-    background: current-color(contrast);
-  }
-}
-
 // Item: Hover
 // --------------------------------------------------
 
@@ -153,14 +127,6 @@
       opacity: var(--background-hover-opacity);
     }
   }
-
-  :host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native {
-    color: #{current-color(contrast)};
-
-    &::after {
-      background: #{current-color(contrast)};
-    }
-  }
 }
 
 // Item: Interactive
diff --git a/core/src/components/item/item.ionic.scss b/core/src/components/item/item.ionic.scss
index b583dd24c4..63503e4908 100644
--- a/core/src/components/item/item.ionic.scss
+++ b/core/src/components/item/item.ionic.scss
@@ -1,121 +1,66 @@
+@use "./item.common";
 @use "../../themes/ionic/ionic.globals.scss" as globals;
 
 // Item
 // --------------------------------------------------
 
 :host {
-  /**
-    * @prop --background: Background of the item
-    * @prop --background-activated: Background of the item when pressed. Note: setting this will interfere with the Material Design ripple.
-    *
-    * @prop --border-color: Color of the item border
-    * @prop --border-style: Style of the item border
-    * @prop --border-width: Width of the item border
-    *
-    * @prop --min-height: Minimum height of the item
-    *
-    * @prop --padding-bottom: Bottom padding of the item
-    * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item
-    * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item
-    * @prop --padding-top: Top padding of the item
-    *
-    */
   --background: #{globals.$ionic-color-base-white};
   --background-activated: #{globals.$ionic-color-neutral-200};
   --border-color: #{globals.$ionic-color-neutral-300};
   --border-style: #{globals.$ionic-border-style-solid};
-  --border-width: #{globals.$ionic-border-size-025};
+  --border-width: #{0 0 globals.$ionic-border-size-025 0};
   --min-height: #{globals.$ionic-scale-1800};
   --padding-top: #{globals.$ionic-space-200};
   --padding-end: #{globals.$ionic-space-400};
   --padding-bottom: #{globals.$ionic-space-200};
   --padding-start: #{globals.$ionic-space-400};
 
-  @include globals.font-smoothing;
-
-  display: flex;
-
-  position: relative;
-
-  align-items: center;
-  justify-content: space-between;
-
-  outline: none;
-
   font-family: globals.$ionic-font-family;
-
-  text-align: initial;
-  text-decoration: none;
-
-  overflow: hidden;
-  box-sizing: border-box;
 }
 
-// Item: Structure
+// Inner Item
 // --------------------------------------------------
-.item-native {
-  @include globals.padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
-  display: flex;
 
-  align-items: center;
+.item-inner {
+  // This prevents the padding/margin from
+  // being excluded from the height calculation.
+  min-height: initial;
+}
 
-  width: 100%;
+// Ionic Item Slots
+// --------------------------------------------------
 
-  min-height: var(--min-height);
+slot[name="start"]::slotted(*) {
+  @include globals.margin(null, #{globals.$ionic-space-400}, null, null);
+}
 
-  border-bottom-width: var(--border-width);
-  border-bottom-style: var(--border-style);
-  border-bottom-color: var(--border-color);
-
-  background: var(--background);
-
-  overflow: inherit;
-  box-sizing: border-box;
-
-  slot[name="start"]::slotted(*) {
-    @include globals.margin(null, #{globals.$ionic-space-400}, null, null);
-  }
-
-  slot[name="end"]::slotted(*) {
-    @include globals.margin(null, null, null, #{globals.$ionic-space-400});
-  }
-
-  .item-inner,
-  .item-inner .input-wrapper {
-    display: flex;
-
-    flex: 1;
-
-    overflow: inherit;
-    box-sizing: border-box;
-  }
+slot[name="end"]::slotted(*) {
+  @include globals.margin(null, null, null, #{globals.$ionic-space-400});
 }
 
 // Item: Disabled
 // --------------------------------------------------
+
 :host(.item-disabled) {
-  cursor: default;
-  pointer-events: none;
-
-  &::after {
-    @include globals.position(0, 0, 0, 0);
-
-    position: absolute;
-
-    background: #{globals.$ionic-state-disabled};
-
-    content: "";
-  }
+  opacity: 0.6;
 }
 
 // Item: Activated
 // --------------------------------------------------
+
 :host(.ion-activated) .item-native {
   background: var(--background-activated);
 }
 
 // Item: Focused
 // --------------------------------------------------
+
+:host(.ion-focused) .item-native {
+  // This prevents the focus ring from clipping.
+  overflow: visible;
+}
+
 :host(.ion-focused) .item-native::after {
   @include globals.position(0, 0, 0, 0);
 
diff --git a/core/src/components/item/item.ios.scss b/core/src/components/item/item.ios.scss
index ccad159e3e..b6d2b0447d 100644
--- a/core/src/components/item/item.ios.scss
+++ b/core/src/components/item/item.ios.scss
@@ -1,4 +1,4 @@
-@import "./item";
+@import "./item.native";
 @import "./item.ios.vars";
 
 // iOS Item
diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss
index ee0369ee23..7ecb4dd009 100644
--- a/core/src/components/item/item.md.scss
+++ b/core/src/components/item/item.md.scss
@@ -1,5 +1,5 @@
 @use "sass:math";
-@import "./item";
+@import "./item.native";
 @import "./item.md.vars";
 @import "../label/label.md.vars";
 
diff --git a/core/src/components/item/item.native.scss b/core/src/components/item/item.native.scss
new file mode 100644
index 0000000000..eaf5cbf600
--- /dev/null
+++ b/core/src/components/item/item.native.scss
@@ -0,0 +1,53 @@
+@import "./item.common";
+@import "./item.vars";
+
+// Item
+// --------------------------------------------------
+
+:host {
+  font-family: $font-family-base;
+}
+
+// Item: Color
+// --------------------------------------------------
+
+:host(.ion-color) .item-native {
+  background: current-color(base);
+  color: current-color(contrast);
+}
+
+:host(.ion-color) .item-native,
+:host(.ion-color) .item-inner {
+  border-color: current-color(shade);
+}
+
+// Item: Activated
+// --------------------------------------------------
+
+:host(.ion-color.ion-activated) .item-native {
+  color: current-color(contrast);
+}
+
+// Item: Focused
+// --------------------------------------------------
+
+:host(.ion-color.ion-focused) .item-native {
+  color: current-color(contrast);
+
+  &::after {
+    background: current-color(contrast);
+  }
+}
+
+// Item: Hover
+// --------------------------------------------------
+
+@media (any-hover: hover) {
+  :host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native {
+    color: #{current-color(contrast)};
+
+    &::after {
+      background: #{current-color(contrast)};
+    }
+  }
+}
diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png
index a71542b758..958bce384b 100644
Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 098d423b93..b4964ef2e8 100644
Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Safari-linux.png
index d390edeaeb..d45f8dfcce 100644
Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 6b2fa55d02..5e045bd74a 100644
Binary files a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png
index d9dec5a149..19496bf4da 100644
Binary files a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Safari-linux.png
index 3dc4f84d54..3afd58e316 100644
Binary files a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/spinner/spinner.scss b/core/src/components/spinner/spinner.common.scss
similarity index 97%
rename from core/src/components/spinner/spinner.scss
rename to core/src/components/spinner/spinner.common.scss
index 2a8d61bce2..9a8dd1dc8b 100644
--- a/core/src/components/spinner/spinner.scss
+++ b/core/src/components/spinner/spinner.common.scss
@@ -1,4 +1,6 @@
-@import "../../themes/native/native.globals";
+@import "../../themes/functions.string";
+@import "../../themes/functions.color";
+@import "../../themes/mixins";
 
 // Spinners
 // --------------------------------------------------
diff --git a/core/src/components/spinner/spinner.ionic.scss b/core/src/components/spinner/spinner.ionic.scss
new file mode 100644
index 0000000000..ec673b4bc5
--- /dev/null
+++ b/core/src/components/spinner/spinner.ionic.scss
@@ -0,0 +1,38 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./spinner.common";
+
+// Ionic Spinner
+// --------------------------------------------------
+
+// Sizes
+// --------------------------------------------------
+
+/* Extra Small */
+:host(.spinner-xsmall) {
+  width: globals.$ionic-scale-600;
+  height: globals.$ionic-scale-600;
+}
+
+/* Small */
+:host(.spinner-small) {
+  width: globals.$ionic-scale-800;
+  height: globals.$ionic-scale-800;
+}
+
+/* Medium */
+:host(.spinner-medium) {
+  width: globals.$ionic-scale-1000;
+  height: globals.$ionic-scale-1000;
+}
+
+/* Large */
+:host(.spinner-large) {
+  width: globals.$ionic-scale-1200;
+  height: globals.$ionic-scale-1200;
+}
+
+/* Extra Large */
+:host(.spinner-xlarge) {
+  width: globals.$ionic-scale-1400;
+  height: globals.$ionic-scale-1400;
+}
diff --git a/core/src/components/spinner/spinner.tsx b/core/src/components/spinner/spinner.tsx
index 37c94dbe05..98023babf9 100644
--- a/core/src/components/spinner/spinner.tsx
+++ b/core/src/components/spinner/spinner.tsx
@@ -16,7 +16,11 @@ import type { SpinnerConfig } from './spinner-interface';
  */
 @Component({
   tag: 'ion-spinner',
-  styleUrl: 'spinner.scss',
+  styleUrls: {
+    ios: 'spinner.common.scss',
+    md: 'spinner.common.scss',
+    ionic: 'spinner.ionic.scss',
+  },
   shadow: true,
 })
 export class Spinner implements ComponentInterface {
@@ -43,6 +47,18 @@ export class Spinner implements ComponentInterface {
    */
   @Prop() paused = false;
 
+  /**
+   * Set to `"xsmall"` for the smallest size.
+   * Set to `"small"` for a smaller size.
+   * Set to `"medium"` for a medium size.
+   * Set to `"large"` for a large size.
+   * Set to `"xlarge"` for the largest size.
+   *
+   * Defaults to `"xsmall"` for the `ionic` theme, undefined for all other themes.
+   */
+  @Prop() size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+
+  // TODO(ROU-10920): Switch `theme` to `mode`.
   private getName(): SpinnerTypes {
     const spinnerName = this.name || config.get('spinner');
     const theme = getIonTheme(this);
@@ -52,10 +68,27 @@ export class Spinner implements ComponentInterface {
     return theme === 'ios' ? 'lines' : 'circular';
   }
 
+  private getSize(): string | undefined {
+    const theme = getIonTheme(this);
+    const { size } = this;
+
+    // TODO(ROU-10912): Remove theme check when sizes are defined for all themes.
+    if (theme !== 'ionic') {
+      return undefined;
+    }
+
+    if (size === undefined) {
+      return 'xsmall';
+    }
+
+    return size;
+  }
+
   render() {
     const self = this;
     const theme = getIonTheme(self);
     const spinnerName = self.getName();
+    const size = this.getSize();
     const spinner = SPINNERS[spinnerName] ?? SPINNERS['lines'];
     const duration = typeof self.duration === 'number' && self.duration > 10 ? self.duration : spinner.dur;
     const svgs: SVGElement[] = [];
@@ -76,6 +109,7 @@ export class Spinner implements ComponentInterface {
           [theme]: true,
           [`spinner-${spinnerName}`]: true,
           'spinner-paused': self.paused || config.getBoolean('_testing'),
+          [`spinner-${size}`]: size !== undefined,
         })}
         role="progressbar"
         style={spinner.elmDuration ? { animationDuration: duration + 'ms' } : {}}
diff --git a/core/src/components/spinner/test/size/index.html b/core/src/components/spinner/test/size/index.html
new file mode 100644
index 0000000000..f045932d4c
--- /dev/null
+++ b/core/src/components/spinner/test/size/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Spinner - Size</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Spinner - Size</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content">
+        <ion-list>
+          <ion-item>
+            <ion-spinner slot="start"></ion-spinner>
+            <p>Default</p>
+          </ion-item>
+          <ion-item>
+            <ion-spinner slot="start" size="xsmall"></ion-spinner>
+            <p>xsmall</p>
+          </ion-item>
+          <ion-item>
+            <ion-spinner slot="start" size="small"></ion-spinner>
+            <p>small</p>
+          </ion-item>
+          <ion-item>
+            <ion-spinner slot="start" size="medium"></ion-spinner>
+            <p>medium</p>
+          </ion-item>
+          <ion-item>
+            <ion-spinner slot="start" size="large"></ion-spinner>
+            <p>large</p>
+          </ion-item>
+          <ion-item>
+            <ion-spinner slot="start" size="xlarge"></ion-spinner>
+            <p>xlarge</p>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts b/core/src/components/spinner/test/size/spinner.e2e.ts
new file mode 100644
index 0000000000..bb62285cba
--- /dev/null
+++ b/core/src/components/spinner/test/size/spinner.e2e.ts
@@ -0,0 +1,74 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across directions.
+ */
+configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => {
+  test.describe(title('spinner: size'), () => {
+    test('should render xsmall spinner', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-spinner size="xsmall"></ion-spinner>
+      `,
+        config
+      );
+
+      const spinner = page.locator('ion-spinner');
+
+      await expect(spinner).toHaveScreenshot(screenshot(`spinner-size-xsmall`));
+    });
+
+    test('should render small spinner', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-spinner size="small"></ion-spinner>
+      `,
+        config
+      );
+
+      const spinner = page.locator('ion-spinner');
+
+      await expect(spinner).toHaveScreenshot(screenshot(`spinner-size-small`));
+    });
+
+    test('should render medium spinner', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-spinner size="medium"></ion-spinner>
+      `,
+        config
+      );
+
+      const spinner = page.locator('ion-spinner');
+
+      await expect(spinner).toHaveScreenshot(screenshot(`spinner-size-medium`));
+    });
+
+    test('should render large spinner', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-spinner size="large"></ion-spinner>
+      `,
+        config
+      );
+
+      const spinner = page.locator('ion-spinner');
+
+      await expect(spinner).toHaveScreenshot(screenshot(`spinner-size-large`));
+    });
+
+    test('should render xlarge spinner', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-spinner size="xlarge"></ion-spinner>
+      `,
+        config
+      );
+
+      const spinner = page.locator('ion-spinner');
+
+      await expect(spinner).toHaveScreenshot(screenshot(`spinner-size-xlarge`));
+    });
+  });
+});
diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..e72e1059e2
Binary files /dev/null and b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..d111f35881
Binary files /dev/null and b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..ddd9ffde01
Binary files /dev/null and b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..14b3c9113e
Binary files /dev/null and b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..7ced01a6ec
Binary files /dev/null and b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..f8038adcb6
Binary files /dev/null and b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..b4dfd2a063
Binary files /dev/null and b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..eb0a82f44f
Binary files /dev/null and b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..60932bf8b8
Binary files /dev/null and b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..eb4b59c5ba
Binary files /dev/null and b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..f4fbb0aae5
Binary files /dev/null and b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xlarge-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xlarge-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..41e37be72e
Binary files /dev/null and b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xlarge-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..db035b8957
Binary files /dev/null and b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..f4259badfa
Binary files /dev/null and b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xsmall-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xsmall-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..7bc3f22bdb
Binary files /dev/null and b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xsmall-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/css/core.scss b/core/src/css/core.scss
index 5ce82f24a1..a87d31ec62 100644
--- a/core/src/css/core.scss
+++ b/core/src/css/core.scss
@@ -1,21 +1,39 @@
 @use "sass:map";
 @import "../themes/native/native.globals";
+@import "../themes/ionic/ionic.theme.default";
 @import "../components/menu/menu.ios.vars";
 @import "../components/menu/menu.md.vars";
 
+// Ionic Colors
+// --------------------------------------------------
+
 :root {
   /**
-   * Loop through each color object from the
-   * `ionic.theme.default.scss` file
-   * and generate CSS Variables for each color.
+   * Set the theme colors from the
+   * `native.theme.default.scss` file.
    */
+  @include set-theme-colors($colors);
+  @include generate-color-variables();
+
   @each $color-name, $value in $colors {
-    --ion-color-#{$color-name}: #{map.get($value, base)};
-    --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))};
-    --ion-color-#{$color-name}-contrast: #{map.get($value, contrast)};
-    --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};
-    --ion-color-#{$color-name}-shade: #{map.get($value, shade)};
-    --ion-color-#{$color-name}-tint: #{map.get($value, tint)};
+    .ion-color-#{$color-name} {
+      @include generate-color($color-name);
+    }
+  }
+}
+
+:root.ionic {
+  /**
+   * Set the theme colors from the
+   * `ionic.theme.default.scss` file.
+   */
+  @include set-theme-colors($ionic-colors);
+  @include generate-color-variables();
+
+  @each $color-name, $value in $ionic-colors {
+    .ion-color-#{$color-name} {
+      @include generate-color($color-name);
+    }
   }
 }
 
@@ -134,33 +152,6 @@ html.ios ion-modal.modal-card .ion-page {
   border-top-left-radius: var(--border-radius);
 }
 
-// Ionic Colors
-// --------------------------------------------------
-// Generates the color classes and variables based on the
-// colors map
-
-@mixin generate-color($color-name) {
-  $value: map-get($colors, $color-name);
-
-  $base: map-get($value, base);
-  $contrast: map-get($value, contrast);
-  $shade: map-get($value, shade);
-  $tint: map-get($value, tint);
-
-  --ion-color-base: var(--ion-color-#{$color-name}, #{$base}) !important;
-  --ion-color-base-rgb: var(--ion-color-#{$color-name}-rgb, #{color-to-rgb-list($base)}) !important;
-  --ion-color-contrast: var(--ion-color-#{$color-name}-contrast, #{$contrast}) !important;
-  --ion-color-contrast-rgb: var(--ion-color-#{$color-name}-contrast-rgb, #{color-to-rgb-list($contrast)}) !important;
-  --ion-color-shade: var(--ion-color-#{$color-name}-shade, #{$shade}) !important;
-  --ion-color-tint: var(--ion-color-#{$color-name}-tint, #{$tint}) !important;
-}
-
-@each $color-name, $value in $colors {
-  .ion-color-#{$color-name} {
-    @include generate-color($color-name);
-  }
-}
-
 // Page Container Structure
 // --------------------------------------------------
 
diff --git a/core/src/themes/functions.color.scss b/core/src/themes/functions.color.scss
index f3cc87a90d..d0b76600f9 100644
--- a/core/src/themes/functions.color.scss
+++ b/core/src/themes/functions.color.scss
@@ -1,3 +1,9 @@
+// Set the theme colors map to be used by the color functions
+// --------------------------------------------------------------------------------------------
+@mixin set-theme-colors($colorsMap) {
+  $theme-colors: $colorsMap !global;
+}
+
 // Gets the active color's css variable from a variation. Alpha is optional.
 // --------------------------------------------------------------------------------------------
 // Example usage:
@@ -20,7 +26,11 @@
 // ion-color(primary, base, 0.5) => rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5)
 // --------------------------------------------------------------------------------------------
 @function ion-color($name, $variation, $alpha: null, $rgb: null) {
-  $values: map-get($colors, $name);
+  @if not($theme-colors) {
+    @error 'No theme colors set. Please make sure to call set-theme-colors($colorsMap) before using ion-color()';
+  }
+
+  $values: map-get($theme-colors, $name);
   $value: map-get($values, $variation);
   $variable: --ion-color-#{$name}-#{$variation};
 
@@ -45,17 +55,67 @@
 // Mixes a color with black to create its shade.
 // --------------------------------------------------------------------------------------------
 @function get-color-shade($color) {
+  @if (type-of($color) != color) {
+    @return $color;
+  }
   @return mix(#000, $color, 12%);
 }
 
 // Mixes a color with white to create its tint.
 // --------------------------------------------------------------------------------------------
 @function get-color-tint($color) {
+  @if (type-of($color) != color) {
+    @return $color;
+  }
   @return mix(#fff, $color, 10%);
 }
 
 // Converts a color to a comma separated rgb.
 // --------------------------------------------------------------------------------------------
 @function color-to-rgb-list($color) {
+  @if (type-of($color) != color) {
+    @return $color;
+  }
   @return #{red($color)}, #{green($color)}, #{blue($color)};
 }
+
+// Generates the color classes and variables
+// based on the colors map
+// --------------------------------------------------------------------------------------------
+@mixin generate-color($color-name) {
+  @if not($theme-colors) {
+    @error 'No theme colors set. Please make sure to call set-theme-colors($colorsMap) before using ion-color()';
+  }
+
+  $value: map-get($theme-colors, $color-name);
+
+  $base: map-get($value, base);
+  $contrast: map-get($value, contrast);
+  $shade: map-get($value, shade);
+  $tint: map-get($value, tint);
+
+  --ion-color-base: var(--ion-color-#{$color-name}, #{$base}) !important;
+  --ion-color-base-rgb: var(--ion-color-#{$color-name}-rgb, #{color-to-rgb-list($base)}) !important;
+  --ion-color-contrast: var(--ion-color-#{$color-name}-contrast, #{$contrast}) !important;
+  --ion-color-contrast-rgb: var(--ion-color-#{$color-name}-contrast-rgb, #{color-to-rgb-list($contrast)}) !important;
+  --ion-color-shade: var(--ion-color-#{$color-name}-shade, #{$shade}) !important;
+  --ion-color-tint: var(--ion-color-#{$color-name}-tint, #{$tint}) !important;
+}
+
+// Generates the CSS variables for each color
+// based on the colors map
+// --------------------------------------------------------------------------------------------
+@mixin generate-color-variables() {
+  @if not($theme-colors) {
+    @error 'No theme colors set. Please make sure to call set-theme-colors($colorsMap) before using ion-color()';
+  }
+
+  @each $color-name, $value in $theme-colors {
+    --ion-color-#{$color-name}: #{map.get($value, base)};
+    --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))};
+    --ion-color-#{$color-name}-contrast: #{map.get($value, contrast)};
+    --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};
+    --ion-color-#{$color-name}-shade: #{map.get($value, shade)};
+    --ion-color-#{$color-name}-tint: #{map.get($value, tint)};
+  }
+}
diff --git a/core/src/themes/ionic/ionic.globals.scss b/core/src/themes/ionic/ionic.globals.scss
index 693b344968..1e730de8dc 100644
--- a/core/src/themes/ionic/ionic.globals.scss
+++ b/core/src/themes/ionic/ionic.globals.scss
@@ -7,6 +7,12 @@
 // Global Utility Functions
 @forward "../functions.sizes";
 @forward "../functions.string";
+@forward "../functions.color";
+@use "../functions.color" as color;
 
 // Global Font Functions
 @forward "../functions.font";
+
+// Default Theme
+@use "./ionic.theme.default" as ionicTheme;
+@include color.set-theme-colors(ionicTheme.$ionic-colors);
diff --git a/core/src/themes/ionic/ionic.theme.default.scss b/core/src/themes/ionic/ionic.theme.default.scss
new file mode 100644
index 0000000000..da64747d01
--- /dev/null
+++ b/core/src/themes/ionic/ionic.theme.default.scss
@@ -0,0 +1,89 @@
+// Ionic Theme
+// -------------------------------------------------------------------------------------------
+// This file contains the theme variables shared
+// between modes. This should only include variables
+// used to theme the application colors.
+
+// Default Ionic Colors
+// -------------------------------------------------------------------------------------------
+// Color map should provide
+// - base: main color to be used.
+// - contrast: Color that will provide readable text against the base color
+// - shade: 12% darker version of the base color (mix with black)
+// - tint: 10% lighter version of the base color (mix with white)
+
+// TODO(ROU-10778, ROU-10875): Sync the color names to the design system of
+// ios and md. This will allow us to have a single color map.
+$primary: #105cef;
+$secondary: initial;
+$tertiary: initial;
+$success: #1fbd3b;
+$warning: #e18300;
+$danger: #bf2222;
+$light: #f2f4fd;
+$medium: initial;
+$neutral: #626262;
+$dark: initial;
+
+$ionic-colors: (
+  primary: (
+    base: $primary,
+    contrast: #fff,
+    shade: get-color-shade($primary),
+    tint: get-color-tint($primary),
+  ),
+  secondary: (
+    base: $secondary,
+    contrast: $secondary,
+    shade: get-color-shade($secondary),
+    tint: get-color-tint($secondary),
+  ),
+  tertiary: (
+    base: $tertiary,
+    contrast: $tertiary,
+    shade: get-color-shade($tertiary),
+    tint: get-color-tint($tertiary),
+  ),
+  success: (
+    base: $success,
+    contrast: #000,
+    shade: get-color-shade($success),
+    tint: get-color-tint($success),
+  ),
+  warning: (
+    base: $warning,
+    contrast: #000,
+    shade: get-color-shade($warning),
+    tint: get-color-tint($warning),
+  ),
+  danger: (
+    base: $danger,
+    contrast: #fff,
+    shade: get-color-shade($danger),
+    tint: get-color-tint($danger),
+  ),
+  light: (
+    base: $light,
+    contrast: #000,
+    shade: get-color-shade($light),
+    tint: get-color-tint($light),
+  ),
+  medium: (
+    base: $medium,
+    contrast: $medium,
+    shade: get-color-shade($medium),
+    tint: get-color-tint($medium),
+  ),
+  neutral: (
+    base: $neutral,
+    contrast: #fff,
+    shade: get-color-shade($neutral),
+    tint: get-color-tint($neutral),
+  ),
+  dark: (
+    base: $dark,
+    contrast: $dark,
+    shade: get-color-shade($dark),
+    tint: get-color-tint($dark),
+  ),
+);
diff --git a/core/src/themes/ionic/test/colors/index.html b/core/src/themes/ionic/test/colors/index.html
new file mode 100644
index 0000000000..5f990e1fe1
--- /dev/null
+++ b/core/src/themes/ionic/test/colors/index.html
@@ -0,0 +1,256 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Colors</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../dist/ionic/ionic.esm.js"></script>
+    <script>
+      window.Ionic = {
+        config: {
+          theme: 'ionic',
+        },
+      };
+    </script>
+    <link id="palette" rel="stylesheet" />
+
+    <style>
+      .container {
+        display: flex;
+
+        justify-content: center;
+
+        flex-wrap: wrap;
+
+        border-bottom: 1px solid #ddd;
+        padding: 20px 0;
+      }
+
+      .header {
+        width: 100%;
+
+        margin-top: 0;
+      }
+
+      .color-block {
+        display: flex;
+        align-items: center;
+
+        background: var(--ion-color-contrast);
+
+        margin: 4px;
+      }
+
+      .color-block > div {
+        padding: 10px;
+      }
+
+      .ion-color {
+        color: var(--ion-color-base);
+      }
+
+      .ion-color-background {
+        background: var(--ion-color-base);
+        color: var(--ion-color-contrast);
+      }
+
+      .ion-color-background-shade {
+        background: var(--ion-color-shade);
+        color: var(--ion-color-contrast);
+      }
+
+      .ion-color-background-tint {
+        background: var(--ion-color-tint);
+        color: var(--ion-color-contrast);
+      }
+
+      .ion-color-background-08 {
+        background: rgb(var(--ion-color-base-rgb), 0.08);
+        color: var(--ion-color-base);
+      }
+
+      .ion-color-background-12 {
+        background: rgb(var(--ion-color-base-rgb), 0.12);
+        color: var(--ion-color-base);
+      }
+
+      .ion-color-background-16 {
+        background: rgb(var(--ion-color-base-rgb), 0.16);
+        color: var(--ion-color-base);
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Colors</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content" class="ion-text-center" no-bounce>
+        <div class="container">
+          <h3 class="header">Text</h3>
+          <div class="color-block ion-color-primary">
+            <div class="ion-color">Primary</div>
+          </div>
+          <div class="color-block ion-color-success">
+            <div class="ion-color">Success</div>
+          </div>
+          <div class="color-block ion-color-warning">
+            <div class="ion-color">Warning</div>
+          </div>
+          <div class="color-block ion-color-danger">
+            <div class="ion-color">Danger</div>
+          </div>
+          <div class="color-block ion-color-light">
+            <div class="ion-color">Light</div>
+          </div>
+          <div class="color-block ion-color-neutral">
+            <div class="ion-color">Neutral</div>
+          </div>
+        </div>
+
+        <div class="container">
+          <h3 class="header">Background</h3>
+          <div class="color-block ion-color-primary">
+            <div class="ion-color-background">Primary</div>
+          </div>
+          <div class="color-block ion-color-success">
+            <div class="ion-color-background">Success</div>
+          </div>
+          <div class="color-block ion-color-warning">
+            <div class="ion-color-background">Warning</div>
+          </div>
+          <div class="color-block ion-color-danger">
+            <div class="ion-color-background">Danger</div>
+          </div>
+          <div class="color-block ion-color-light">
+            <div class="ion-color-background">Light</div>
+          </div>
+          <div class="color-block ion-color-neutral">
+            <div class="ion-color-background">Neutral</div>
+          </div>
+        </div>
+
+        <div class="container">
+          <h3 class="header">Background Shade</h3>
+          <div class="color-block ion-color-primary">
+            <div class="ion-color-background-shade">Primary</div>
+          </div>
+          <div class="color-block ion-color-success">
+            <div class="ion-color-background-shade">Success</div>
+          </div>
+          <div class="color-block ion-color-warning">
+            <div class="ion-color-background-shade">Warning</div>
+          </div>
+          <div class="color-block ion-color-danger">
+            <div class="ion-color-background-shade">Danger</div>
+          </div>
+          <div class="color-block ion-color-light">
+            <div class="ion-color-background-shade">Light</div>
+          </div>
+          <div class="color-block ion-color-neutral">
+            <div class="ion-color-background-shade">Neutral</div>
+          </div>
+        </div>
+
+        <div class="container">
+          <h3 class="header">Background Tint</h3>
+          <div class="color-block ion-color-primary">
+            <div class="ion-color-background-tint">Primary</div>
+          </div>
+          <div class="color-block ion-color-success">
+            <div class="ion-color-background-tint">Success</div>
+          </div>
+          <div class="color-block ion-color-warning">
+            <div class="ion-color-background-tint">Warning</div>
+          </div>
+          <div class="color-block ion-color-danger">
+            <div class="ion-color-background-tint">Danger</div>
+          </div>
+          <div class="color-block ion-color-light">
+            <div class="ion-color-background-tint">Light</div>
+          </div>
+          <div class="color-block ion-color-neutral">
+            <div class="ion-color-background-tint">Neutral</div>
+          </div>
+        </div>
+
+        <div class="container">
+          <h3 class="header">Background 8%</h3>
+          <div class="color-block ion-color-primary">
+            <div class="ion-color-background-08">Primary</div>
+          </div>
+          <div class="color-block ion-color-success">
+            <div class="ion-color-background-08">Success</div>
+          </div>
+          <div class="color-block ion-color-warning">
+            <div class="ion-color-background-08">Warning</div>
+          </div>
+          <div class="color-block ion-color-danger">
+            <div class="ion-color-background-08">Danger</div>
+          </div>
+          <div class="color-block ion-color-light">
+            <div class="ion-color-background-08">Light</div>
+          </div>
+          <div class="color-block ion-color-neutral">
+            <div class="ion-color-background-08">Neutral</div>
+          </div>
+        </div>
+
+        <div class="container">
+          <h3 class="header">Background 12%</h3>
+          <div class="color-block ion-color-primary">
+            <div class="ion-color-background-12">Primary</div>
+          </div>
+          <div class="color-block ion-color-success">
+            <div class="ion-color-background-12">Success</div>
+          </div>
+          <div class="color-block ion-color-warning">
+            <div class="ion-color-background-12">Warning</div>
+          </div>
+          <div class="color-block ion-color-danger">
+            <div class="ion-color-background-12">Danger</div>
+          </div>
+          <div class="color-block ion-color-light">
+            <div class="ion-color-background-12">Light</div>
+          </div>
+          <div class="color-block ion-color-neutral">
+            <div class="ion-color-background-12">Neutral</div>
+          </div>
+        </div>
+
+        <div class="container">
+          <h3 class="header">Background 16%</h3>
+          <div class="color-block ion-color-primary">
+            <div class="ion-color-background-16">Primary</div>
+          </div>
+          <div class="color-block ion-color-success">
+            <div class="ion-color-background-16">Success</div>
+          </div>
+          <div class="color-block ion-color-warning">
+            <div class="ion-color-background-16">Warning</div>
+          </div>
+          <div class="color-block ion-color-danger">
+            <div class="ion-color-background-16">Danger</div>
+          </div>
+          <div class="color-block ion-color-light">
+            <div class="ion-color-background-16">Light</div>
+          </div>
+          <div class="color-block ion-color-neutral">
+            <div class="ion-color-background-16">Neutral</div>
+          </div>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/core/src/themes/ionic/test/colors/theme.e2e.ts b/core/src/themes/ionic/test/colors/theme.e2e.ts
new file mode 100644
index 0000000000..779ceeb117
--- /dev/null
+++ b/core/src/themes/ionic/test/colors/theme.e2e.ts
@@ -0,0 +1,155 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * Small text is defined as 14pt (~18.5px)
+ * when computing color contrast: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
+ */
+const styleTestHelpers = `
+  <style>
+    main {
+      background: var(--ion-color-contrast);
+      font-size: 14pt;
+    }
+    .ion-background {
+      background: var(--ion-color-base);
+    }
+    .ion-background-shade {
+      background: var(--ion-color-shade);
+    }
+    .ion-background-tint {
+      background: var(--ion-color-tint);
+    }
+    .ion-background-opacity-08 {
+      background: rgba(var(--ion-color-base-rgb), 0.08);
+    }
+    .ion-background-opacity-12 {
+      background: rgba(var(--ion-color-base-rgb), 0.12);
+    }
+    .ion-background-opacity-16 {
+      background: rgba(var(--ion-color-base-rgb), 0.16);
+    }
+    .ion-color {
+      color: var(--ion-color-base);
+    }
+    .ion-color-contrast {
+      color: var(--ion-color-contrast);
+    }
+  </style>
+`;
+
+/**
+ * All colors should be tested in the following scenarios:
+ * 1) The base color as the text color against the contrast color as the background color
+ * 2) The contrast color as the text color against the base color as the background color
+ * 3) The contrast color as the text color against the shade color as the background color
+ * 4) The contrast color as the text color against the tint color as the background color
+ * 5) The base color as the text color against the base color at 0.08 opacity as the background color
+ * 6) The base color as the text color against the base color at 0.12 opacity as the background color
+ * 7) The base color as the text color against the base color at 0.16 opacity as the background color
+ */
+configs({ modes: ['ionic-md'], directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ config, title }) => {
+  const colors = ['primary', 'neutral', 'success', 'warning', 'danger', 'light'];
+
+  test.describe(title('theme'), () => {
+    test.beforeEach(({ skip }) => {
+      skip.browser('firefox', 'Color contrast ratio is consistent across browsers');
+      skip.browser('webkit', 'Color contrast ratio is consistent across browsers');
+    });
+
+    for (const color of colors) {
+      test(`color "${color}" should pass AA guidelines`, async ({ page }) => {
+        await page.setContent(
+          `${styleTestHelpers}
+          <main class="ion-color-${color}">
+            <p class="ion-color">Hello World</p>
+          </main>`,
+          config
+        );
+
+        const results = await new AxeBuilder({ page }).analyze();
+        expect(results.violations).toEqual([]);
+      });
+
+      test(`contrast color on "${color}" background should pass AA guidelines`, async ({ page }) => {
+        await page.setContent(
+          `${styleTestHelpers}
+          <main class="ion-color-${color}">
+            <p class="ion-color-contrast ion-background">Hello World</p>
+          </main>`,
+          config
+        );
+
+        const results = await new AxeBuilder({ page }).analyze();
+        expect(results.violations).toEqual([]);
+      });
+
+      test(`contrast color on "${color}" background shade should pass AA guidelines`, async ({ page }) => {
+        await page.setContent(
+          `${styleTestHelpers}
+          <main class="ion-color-${color}">
+            <p class="ion-color-contrast ion-background-shade">Hello World</p>
+          </main>`,
+          config
+        );
+
+        const results = await new AxeBuilder({ page }).analyze();
+        expect(results.violations).toEqual([]);
+      });
+
+      test(`contrast color on "${color}" background tint should pass AA guidelines`, async ({ page }) => {
+        await page.setContent(
+          `${styleTestHelpers}
+          <main class="ion-color-${color}">
+            <p class="ion-color-contrast ion-background-tint">Hello World</p>
+          </main>`,
+          config
+        );
+
+        const results = await new AxeBuilder({ page }).analyze();
+        expect(results.violations).toEqual([]);
+      });
+
+      test(`color "${color}" on 0.08 opacity background should pass AA guidelines`, async ({ page }) => {
+        await page.setContent(
+          `${styleTestHelpers}
+          <main class="ion-color-${color}">
+            <p class="ion-color ion-background-opacity-08">Hello World</p>
+          </main>`,
+          config
+        );
+
+        const results = await new AxeBuilder({ page }).analyze();
+        expect(results.violations).toEqual([]);
+      });
+
+      test(`color "${color}" on 0.12 opacity background should pass AA guidelines`, async ({ page }) => {
+        await page.setContent(
+          `${styleTestHelpers}
+          <main class="ion-color-${color}">
+            <p class="ion-color ion-background-opacity-12">Hello World</p>
+          </main>`,
+          config
+        );
+
+        const results = await new AxeBuilder({ page }).analyze();
+        expect(results.violations).toEqual([]);
+      });
+
+      // TODO(ROU-10778): Re-enable this test once the colors have been finalized
+      test.skip(`color "${color}" on 0.16 opacity background should pass AA guidelines`, async ({ page }) => {
+        await page.setContent(
+          `${styleTestHelpers}
+          <main class="ion-color-${color}">
+            <p class="ion-color ion-background-opacity-16">Hello World</p>
+          </main>`,
+          config
+        );
+
+        const results = await new AxeBuilder({ page }).analyze();
+        expect(results.violations).toEqual([]);
+      });
+    }
+  });
+});
diff --git a/core/src/themes/ionic/test/default.css b/core/src/themes/ionic/test/default.css
new file mode 100644
index 0000000000..6ee3e1c096
--- /dev/null
+++ b/core/src/themes/ionic/test/default.css
@@ -0,0 +1,57 @@
+/**
+ * Default Colors
+ * -----------------------------------------------------
+ * The default theme uses a white background with
+ * varying shades of black as contrast and the Ionic
+ * primary color as an accent.
+ *
+ * The Ionic colors are already defined in Ionic Framework
+ * and used as fallbacks so they do not need to be defined.
+ *
+ * Looking to create a custom theme? Check out the generator!
+ * https://ionicframework.com/docs/theming/color-generator
+**/
+
+/* :root {
+  --ion-color-primary: #105cef;
+  --ion-color-primary-rgb: 16, 92, 239;
+  --ion-color-primary-contrast: #fff;
+  --ion-color-primary-contrast-rgb: 255, 255, 255;
+  --ion-color-primary-shade: #0e51d2;
+  --ion-color-primary-tint: #286cf1;
+
+  --ion-color-neutral: #626262;
+  --ion-color-neutral-rgb: 98, 98, 98;
+  --ion-color-neutral-contrast: #fff;
+  --ion-color-neutral-contrast-rgb: 255, 255, 255;
+  --ion-color-neutral-shade: #565656;
+  --ion-color-neutral-tint: #727272;
+
+  --ion-color-success: #1fbd3b;
+  --ion-color-success-rgb: 31, 189, 59;
+  --ion-color-success-contrast: #000;
+  --ion-color-success-contrast-rgb: 0, 0, 0;
+  --ion-color-success-shade: #1ba634;
+  --ion-color-success-tint: #35c44f;
+
+  --ion-color-warning: #e18300;
+  --ion-color-warning-rgb: 225, 131, 0;
+  --ion-color-warning-contrast: #000;
+  --ion-color-warning-contrast-rgb: 0, 0, 0;
+  --ion-color-warning-shade: #c67300;
+  --ion-color-warning-tint: #e48f1a;
+
+  --ion-color-danger: #bf2222;
+  --ion-color-danger-rgb: 191, 34, 34;
+  --ion-color-danger-contrast: #fff;
+  --ion-color-danger-contrast-rgb: 255, 255, 255;
+  --ion-color-danger-shade: #a81e1e;
+  --ion-color-danger-tint: #c53838;
+
+  --ion-color-light: #f2f4fd;
+  --ion-color-light-rgb: 242, 244, 253;
+  --ion-color-light-contrast: #000;
+  --ion-color-light-contrast-rgb: 0, 0, 0;
+  --ion-color-light-shade: #d5d7df;
+  --ion-color-light-tint: #f3f5fd;
+} */
diff --git a/core/src/themes/native/native.globals.scss b/core/src/themes/native/native.globals.scss
index b87ed699bd..264098e975 100644
--- a/core/src/themes/native/native.globals.scss
+++ b/core/src/themes/native/native.globals.scss
@@ -13,6 +13,7 @@
 
 // Default Theme
 @import "./native.theme.default";
+@include set-theme-colors($colors);
 
 // Default General
 // --------------------------------------------------
diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
index bc9b1f2cdd..716420d6a8 100644
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -2105,14 +2105,14 @@ export declare interface IonSkeletonText extends Components.IonSkeletonText {}
 
 
 @ProxyCmp({
-  inputs: ['color', 'duration', 'mode', 'name', 'paused', 'theme']
+  inputs: ['color', 'duration', 'mode', 'name', 'paused', 'size', 'theme']
 })
 @Component({
   selector: 'ion-spinner',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'duration', 'mode', 'name', 'paused', 'theme'],
+  inputs: ['color', 'duration', 'mode', 'name', 'paused', 'size', 'theme'],
 })
 export class IonSpinner {
   protected el: HTMLElement;
diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts
index 78255ae950..7084b56195 100644
--- a/packages/angular/standalone/src/directives/proxies.ts
+++ b/packages/angular/standalone/src/directives/proxies.ts
@@ -1892,14 +1892,14 @@ export declare interface IonSkeletonText extends Components.IonSkeletonText {}
 
 @ProxyCmp({
   defineCustomElementFn: defineIonSpinner,
-  inputs: ['color', 'duration', 'mode', 'name', 'paused', 'theme']
+  inputs: ['color', 'duration', 'mode', 'name', 'paused', 'size', 'theme']
 })
 @Component({
   selector: 'ion-spinner',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'duration', 'mode', 'name', 'paused', 'theme'],
+  inputs: ['color', 'duration', 'mode', 'name', 'paused', 'size', 'theme'],
   standalone: true
 })
 export class IonSpinner {
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index 6cee863eb1..301eaa8d26 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -811,7 +811,8 @@ export const IonSpinner = /*@__PURE__*/ defineContainer<JSX.IonSpinner>('ion-spi
   'color',
   'duration',
   'name',
-  'paused'
+  'paused',
+  'size'
 ]);