diff --git a/core/api.txt b/core/api.txt
index 40013c461ec..c58798048ea 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -599,20 +599,13 @@ ion-chip,prop,disabled,boolean,false,false,false
 ion-chip,prop,hue,"bold" | "subtle" | undefined,'subtle',false,false
 ion-chip,prop,mode,"ios" | "md",undefined,false,false
 ion-chip,prop,outline,boolean,false,false,false
-ion-chip,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
-ion-chip,prop,size,"large" | "small" | undefined,undefined,false,false
-ion-chip,prop,theme,"ios" | "md" | "ionic",undefined,false,false
-ion-chip,css-prop,--background,ionic
-ion-chip,css-prop,--background,ios
-ion-chip,css-prop,--background,md
-ion-chip,css-prop,--border-radius,ionic
-ion-chip,css-prop,--border-radius,ios
-ion-chip,css-prop,--border-radius,md
-ion-chip,css-prop,--color,ionic
-ion-chip,css-prop,--color,ios
-ion-chip,css-prop,--color,md
-ion-chip,css-prop,--focus-ring-color,ionic
-ion-chip,css-prop,--focus-ring-width,ionic
+ion-chip,prop,shape,"rectangular" | "round" | "soft" | undefined,'round',false,false
+ion-chip,prop,size,"large" | "small" | undefined,'large',false,false
+ion-chip,css-prop,--background
+ion-chip,css-prop,--border-radius
+ion-chip,css-prop,--color
+ion-chip,css-prop,--focus-ring-color
+ion-chip,css-prop,--focus-ring-width
 
 ion-col,shadow
 ion-col,prop,mode,"ios" | "md",undefined,false,false
diff --git a/core/scripts/testing/scripts.js b/core/scripts/testing/scripts.js
index 1fb67341b9d..78acc256a30 100644
--- a/core/scripts/testing/scripts.js
+++ b/core/scripts/testing/scripts.js
@@ -128,10 +128,11 @@ const DEFAULT_THEME = 'md';
       window.Ionic.config = window.Ionic.config || {};
       window.Ionic.config.customTheme = theme;
 
-      // Re-apply the global theme
+      // Re-apply the global theme, needed for Playwright tests
       if (window.Ionic.config.get && window.Ionic.config.set) {
         const themeModule = await import('/themes/utils/theme.js');
         themeModule.applyGlobalTheme(theme);
+        themeModule.applyComponentsTheme(theme);
       }
     } catch (error) {
       console.error(`Failed to load theme tokens for ${themeName}:`, error);
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 5119829a658..717f2b1d704 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -872,7 +872,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip with muted, subtle colors.  Only applies to the `ionic` theme.
+          * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip with muted, subtle colors.  Defaults to `"subtle"`.
           * @default 'subtle'
          */
         "hue"?: 'bold' | 'subtle';
@@ -886,17 +886,15 @@ export namespace Components {
          */
         "outline": boolean;
         /**
-          * Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully rounded corners, or `"rectangular"` for a chip without rounded corners. Defaults to `"round"` for the `"ionic"` theme and `"soft"` for all other themes.
+          * Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully rounded corners, or `"rectangular"` for a chip without rounded corners.  Defaults to `"round"`.
+          * @default 'round'
          */
         "shape"?: 'soft' | 'round' | 'rectangular';
         /**
-          * Set to `"small"` for a chip with less height and padding.  Defaults to `"large"` for the ionic theme, and  undefined for all other themes.
+          * Set to `"small"` for a chip with less height and padding.  Defaults to `"large"`.
+          * @default 'large'
          */
         "size"?: 'small' | 'large';
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonCol {
         /**
@@ -6846,7 +6844,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip with muted, subtle colors.  Only applies to the `ionic` theme.
+          * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip with muted, subtle colors.  Defaults to `"subtle"`.
           * @default 'subtle'
          */
         "hue"?: 'bold' | 'subtle';
@@ -6860,17 +6858,15 @@ declare namespace LocalJSX {
          */
         "outline"?: boolean;
         /**
-          * Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully rounded corners, or `"rectangular"` for a chip without rounded corners. Defaults to `"round"` for the `"ionic"` theme and `"soft"` for all other themes.
+          * Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully rounded corners, or `"rectangular"` for a chip without rounded corners.  Defaults to `"round"`.
+          * @default 'round'
          */
         "shape"?: 'soft' | 'round' | 'rectangular';
         /**
-          * Set to `"small"` for a chip with less height and padding.  Defaults to `"large"` for the ionic theme, and  undefined for all other themes.
+          * Set to `"small"` for a chip with less height and padding.  Defaults to `"large"`.
+          * @default 'large'
          */
         "size"?: 'small' | 'large';
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonCol {
         /**
diff --git a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-ios-ltr-Mobile-Chrome-linux.png
index f51c458afe7..284f38092cb 100644
Binary files a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-ios-ltr-Mobile-Firefox-linux.png
index 012a7016eb4..99ef721594b 100644
Binary files a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-ios-ltr-Mobile-Safari-linux.png
index 12ae7ea574b..12e2cd16049 100644
Binary files a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-md-ltr-Mobile-Chrome-linux.png
index ca57defd1e0..e5d146d54ed 100644
Binary files a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-md-ltr-Mobile-Firefox-linux.png
index b5717fbdc0e..c69ff21a455 100644
Binary files a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-md-ltr-Mobile-Safari-linux.png
index 6de56eaa3cd..639faad1fa1 100644
Binary files a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/chip.base.scss b/core/src/components/chip/chip.base.scss
new file mode 100644
index 00000000000..148f633f7be
--- /dev/null
+++ b/core/src/components/chip/chip.base.scss
@@ -0,0 +1,297 @@
+@use "../../themes/mixins" as mixins;
+@use "../../themes/functions.color" as colors;
+
+// Chip: Common Styles
+// --------------------------------------------------
+
+:host {
+  /**
+   * @prop --background: Background of the chip
+   * @prop --border-radius: Border radius of the chip
+   * @prop --color: Color of the chip
+   * @prop --focus-ring-color: Color of the focus ring
+   * @prop --focus-ring-width: Width of the focus ring
+   */
+  --background: initial;
+  --color: initial;
+  --focus-ring-color: var(--ion-chip-state-focus-ring-color);
+  --focus-ring-width: var(--ion-chip-state-focus-ring-width);
+
+  @include mixins.font-smoothing();
+  @include mixins.border-radius(var(--border-radius));
+  @include mixins.margin(var(--ion-chip-margin));
+  @include mixins.padding(var(--ion-chip-padding-vertical), var(--ion-chip-padding-horizontal));
+
+  display: inline-flex;
+  position: relative;
+
+  align-items: center;
+  justify-content: center;
+
+  background: var(--background);
+  color: var(--color);
+
+  font-weight: var(--ion-chip-font-weight);
+
+  letter-spacing: var(--ion-chip-letter-spacing);
+
+  line-height: var(--ion-chip-line-height);
+
+  cursor: var(--ion-chip-cursor);
+  gap: var(--ion-chip-gap);
+
+  overflow: hidden;
+  vertical-align: middle;
+  box-sizing: border-box;
+}
+
+// Chip Sizes
+// ---------------------------------------------
+
+:host(.chip-small) {
+  min-height: var(--ion-chip-size-small-min-height);
+
+  font-size: var(--ion-chip-size-small-font-size);
+}
+
+:host(.chip-large) {
+  min-height: var(--ion-chip-size-large-min-height);
+
+  font-size: var(--ion-chip-size-large-font-size);
+}
+
+// Chip Shapes
+// ---------------------------------------------
+
+:host(.chip-soft) {
+  --border-radius: var(--ion-chip-shape-soft-border-radius);
+}
+
+:host(.chip-round) {
+  --border-radius: var(--ion-chip-shape-round-border-radius);
+}
+
+:host(.chip-rectangular) {
+  --border-radius: var(--ion-chip-shape-rectangular-border-radius);
+}
+
+// Chip Hues
+// ---------------------------------------------
+
+// Bold
+:host(.chip-bold) {
+  --background: var(--ion-chip-hue-bold-bg);
+  --color: var(--ion-chip-hue-bold-color);
+}
+
+// Bold Colors
+:host(.chip-bold.ion-color) {
+  background: var(--ion-chip-hue-bold-semantic-bg);
+  color: var(--ion-chip-hue-bold-semantic-color);
+}
+
+// Subtle
+:host(.chip-subtle) {
+  --background: var(--ion-chip-hue-subtle-bg);
+  --color: var(--ion-chip-hue-subtle-color);
+}
+
+// Subtle Colors
+:host(.chip-subtle.ion-color) {
+  background: var(--ion-chip-hue-subtle-semantic-bg);
+  color: var(--ion-chip-hue-subtle-semantic-color);
+}
+
+// Chip Variants
+// ---------------------------------------------
+
+// Outline
+:host(.chip-outline) {
+  border-width: var(--ion-chip-variant-outline-border-width);
+  border-style: solid;
+}
+
+:host(.chip-outline.chip-bold) {
+  --background: var(--ion-chip-variant-outline-bg, var(--ion-chip-hue-bold-bg));
+
+  border-color: var(--ion-chip-variant-outline-border-color-bold);
+}
+
+:host(.chip-outline.chip-bold.ion-color) {
+  border-color: var(--ion-chip-variant-outline-semantic-border-color-bold);
+
+  background: var(--ion-chip-variant-outline-bg, var(--ion-chip-hue-bold-semantic-bg));
+}
+
+:host(.chip-outline.chip-subtle) {
+  --background: var(--ion-chip-variant-outline-bg, var(--ion-chip-hue-subtle-bg));
+
+  border-color: var(--ion-chip-variant-outline-border-color-subtle);
+}
+
+:host(.chip-outline.chip-subtle.ion-color) {
+  border-color: var(--ion-chip-variant-outline-semantic-border-color-subtle);
+
+  background: var(--ion-chip-variant-outline-bg, var(--ion-chip-hue-subtle-semantic-bg));
+}
+
+// Chip States
+// ---------------------------------------------
+
+// Disabled
+:host(.chip-disabled) {
+  cursor: default;
+  opacity: var(--ion-chip-state-disabled-opacity);
+  pointer-events: none;
+}
+
+// Focus
+:host(.ion-focused) {
+  @include mixins.focused-state(var(--focus-ring-width), $color: var(--focus-ring-color));
+}
+
+:host(.ion-focused.chip-bold) {
+  --background: var(--ion-chip-hue-bold-state-focus-bg, var(--ion-chip-hue-bold-bg));
+}
+
+:host(.ion-focused.chip-bold.ion-color) {
+  background: var(--ion-chip-hue-bold-semantic-state-focus-bg, var(--ion-chip-hue-bold-semantic-bg));
+}
+
+:host(.ion-focused.chip-outline.chip-bold) {
+  --background: var(
+    --ion-chip-variant-outline-state-focus-bg-bold,
+    var(--ion-chip-variant-outline-bg, var(--ion-chip-hue-bold-bg))
+  );
+}
+
+:host(.ion-focused.chip-subtle) {
+  --background: var(--ion-chip-hue-subtle-state-focus-bg, var(--ion-chip-hue-subtle-bg));
+}
+
+:host(.ion-focused.chip-subtle.ion-color) {
+  background: var(--ion-chip-hue-subtle-semantic-state-focus-bg, var(--ion-chip-hue-subtle-semantic-bg));
+}
+
+:host(.ion-focused.chip-outline.chip-subtle) {
+  --background: var(
+    --ion-chip-variant-outline-state-focus-bg-subtle,
+    var(--ion-chip-variant-outline-bg, var(--ion-chip-hue-subtle-bg))
+  );
+}
+
+// Activated
+:host(.ion-activated.chip-bold) {
+  --background: var(--ion-chip-hue-bold-state-activated-bg, var(--ion-chip-hue-bold-bg));
+}
+
+:host(.ion-activated.chip-bold.ion-color) {
+  background: var(--ion-chip-hue-bold-semantic-state-activated-bg, var(--ion-chip-hue-bold-semantic-bg));
+}
+
+:host(.ion-activated.chip-outline.chip-bold) {
+  --background: var(
+    --ion-chip-variant-outline-state-activated-bg-bold,
+    var(--ion-chip-variant-outline-bg, var(--ion-chip-hue-bold-bg))
+  );
+}
+
+:host(.ion-activated.chip-subtle) {
+  --background: var(--ion-chip-hue-subtle-state-activated-bg, var(--ion-chip-hue-subtle-bg));
+}
+
+:host(.ion-activated.chip-subtle.ion-color) {
+  background: var(--ion-chip-hue-subtle-semantic-state-activated-bg, var(--ion-chip-hue-subtle-semantic-bg));
+}
+
+:host(.ion-activated.chip-outline.chip-subtle) {
+  --background: var(
+    --ion-chip-variant-outline-state-activated-bg-subtle,
+    var(--ion-chip-variant-outline-bg, var(--ion-chip-hue-subtle-bg))
+  );
+}
+
+// Hover
+@media (any-hover: hover) {
+  :host(.chip-bold:hover) {
+    --background: var(--ion-chip-hue-bold-state-hover-bg, var(--ion-chip-hue-bold-bg));
+  }
+
+  :host(.chip-bold.ion-color:hover) {
+    background: var(--ion-chip-hue-bold-semantic-state-hover-bg, var(--ion-chip-hue-bold-semantic-bg));
+  }
+
+  :host(.chip-outline.chip-bold:not(.ion-color):hover) {
+    --background: var(
+      --ion-chip-variant-outline-state-hover-bg-bold,
+      var(--ion-chip-variant-outline-bg, var(--ion-chip-hue-bold-bg))
+    );
+  }
+
+  :host(.chip-subtle:hover) {
+    --background: var(--ion-chip-hue-subtle-state-hover-bg, var(--ion-chip-hue-subtle-bg));
+  }
+
+  :host(.chip-subtle.ion-color:hover) {
+    background: var(--ion-chip-hue-subtle-semantic-state-hover-bg, var(--ion-chip-hue-subtle-semantic-bg));
+  }
+
+  :host(.chip-outline.chip-subtle:not(.ion-color):hover) {
+    --background: var(
+      --ion-chip-variant-outline-state-hover-bg-subtle,
+      var(--ion-chip-variant-outline-bg, var(--ion-chip-hue-subtle-bg))
+    );
+  }
+}
+
+// Chip Slotted Elements
+// ---------------------------------------------
+
+// Icon
+::slotted(ion-icon) {
+  font-size: var(--ion-chip-icon-size);
+}
+
+:host(:not(.ion-color)) ::slotted(ion-icon) {
+  color: var(--ion-chip-icon-color);
+}
+
+::slotted(ion-icon:first-child) {
+  @include mixins.margin(
+    var(--ion-chip-icon-first-child-margin-vertical),
+    var(--ion-chip-icon-first-child-margin-end),
+    $start: var(--ion-chip-icon-first-child-margin-start)
+  );
+}
+
+::slotted(ion-icon:last-child) {
+  @include mixins.margin(
+    var(--ion-chip-icon-last-child-margin-vertical),
+    var(--ion-chip-icon-last-child-margin-end),
+    $start: var(--ion-chip-icon-last-child-margin-start)
+  );
+}
+
+// Avatar
+::slotted(ion-avatar) {
+  flex-shrink: 0;
+
+  width: var(--ion-chip-avatar-size, revert-layer);
+  height: var(--ion-chip-avatar-size, revert-layer);
+}
+
+::slotted(ion-avatar:first-child) {
+  @include mixins.margin(
+    var(--ion-chip-avatar-first-child-margin-vertical),
+    $end: var(--ion-chip-avatar-first-child-margin-end),
+    $start: var(--ion-chip-avatar-first-child-margin-start)
+  );
+}
+
+::slotted(ion-avatar:last-child) {
+  @include mixins.margin(
+    var(--ion-chip-avatar-last-child-margin-vertical),
+    $end: var(--ion-chip-avatar-last-child-margin-end),
+    $start: var(--ion-chip-avatar-last-child-margin-start)
+  );
+}
diff --git a/core/src/components/chip/chip.common.scss b/core/src/components/chip/chip.common.scss
deleted file mode 100644
index a0a716aa1b4..00000000000
--- a/core/src/components/chip/chip.common.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-@import "../../themes/mixins";
-
-// Chip: Common Styles
-// --------------------------------------------------
-
-:host {
-  /**
-   * @prop --background: Background of the chip
-   * @prop --color: Color of the chip
-   * @prop --border-radius: Border radius of the chip
-   */
-  @include font-smoothing();
-
-  display: inline-flex;
-
-  position: relative;
-
-  align-items: center;
-  justify-content: center;
-
-  background: var(--background);
-  color: var(--color);
-
-  cursor: pointer;
-
-  overflow: hidden;
-
-  box-sizing: border-box;
-
-  vertical-align: middle;
-}
-
-:host(.chip-disabled) {
-  cursor: default;
-  pointer-events: none;
-}
diff --git a/core/src/components/chip/chip.interfaces.ts b/core/src/components/chip/chip.interfaces.ts
new file mode 100644
index 00000000000..9f0c288ba99
--- /dev/null
+++ b/core/src/components/chip/chip.interfaces.ts
@@ -0,0 +1,153 @@
+export type IonChip = {
+  cursor?: string;
+  margin: string | number;
+
+  fontWeight?: string | number;
+  gap?: string | number;
+  lineHeight?: string | number;
+  letterSpacing?: string | number;
+
+  padding?: {
+    vertical: string | number;
+    horizontal: string | number;
+  };
+
+  // Sizes
+  size: {
+    small: IonChipSizeDefinition;
+    large: IonChipSizeDefinition;
+  };
+
+  // States
+  state?: {
+    disabled?: {
+      opacity: string | number;
+    };
+
+    focus?: {
+      ring?: {
+        color: string;
+        width?: string | number;
+      };
+    };
+  };
+
+  // Shapes
+  shape: {
+    soft: IonChipShapeDefinition;
+    round: IonChipShapeDefinition;
+    rectangular: IonChipShapeDefinition;
+  };
+
+  // Hues
+  hue: {
+    bold: IonChipHueDefinition;
+    subtle: IonChipHueDefinition;
+  };
+
+  // Variants
+
+  variant?: {
+    outline: {
+      bg?: string;
+
+      border: {
+        color?: HueRef;
+        width?: string | number;
+      };
+
+      // Any of the semantic colors like primary, secondary, etc.
+      semantic?: {
+        bg?: HueRef;
+
+        border?: {
+          color?: HueRef;
+        };
+      };
+
+      state?: IonChipVariantState;
+    };
+  };
+
+  icon: IonChipIconDefinition;
+  avatar?: IonChipMediaDefinition;
+};
+
+type IonChipSizeDefinition = {
+  minHeight: string | number;
+
+  font: {
+    size: string | number;
+  };
+};
+
+type IonChipShapeDefinition = {
+  border: {
+    radius: string | number;
+  };
+};
+
+type IonChipHueDefinition = {
+  bg: string;
+  color: string;
+
+  semantic?: {
+    bg?: string;
+    color?: string;
+    state?: IonChipInteractionStates;
+  };
+
+  state?: IonChipInteractionStates;
+};
+
+type IonChipInteractionStates = {
+  focus?: {
+    bg?: string;
+  };
+
+  hover?: {
+    bg?: string;
+  };
+
+  activated?: {
+    bg?: string;
+  };
+};
+
+type IonChipVariantState = {
+  focus?: {
+    bg?: HueRef;
+  };
+  hover?: {
+    bg?: HueRef;
+  };
+  activated?: {
+    bg?: HueRef;
+  };
+};
+
+type HueRef = {
+  bold?: string;
+  subtle?: string;
+};
+
+type IonChipMediaDefinition = {
+  size: string | number;
+
+  // Styles for the media component only if it is the first element in the slot
+  firstChild?: IonChipMediaMargin;
+  // Styles for the media component only if it is the last element in the slot
+  lastChild?: IonChipMediaMargin;
+};
+
+type IonChipMediaMargin = {
+  margin?: {
+    vertical?: string | number;
+    start?: string | number;
+    end?: string | number;
+  };
+};
+
+type IonChipIconDefinition = IonChipMediaDefinition & {
+  color?: string;
+};
diff --git a/core/src/components/chip/chip.ionic.scss b/core/src/components/chip/chip.ionic.scss
deleted file mode 100644
index 999fdf98f71..00000000000
--- a/core/src/components/chip/chip.ionic.scss
+++ /dev/null
@@ -1,131 +0,0 @@
-@use "../../themes/ionic/ionic.globals.scss" as globals;
-@use "./chip.common";
-
-// Ionic Chip
-// --------------------------------------------------
-
-:host {
-  /**
-   * @prop --focus-ring-color: Color of the focus ring
-   * @prop --focus-ring-width: Width of the focus ring
-   */
-  --focus-ring-color: #{globals.$ion-border-focus-default};
-  --focus-ring-width: #{globals.$ion-border-size-050};
-
-  @include globals.padding(globals.$ion-space-150, globals.$ion-space-200);
-  @include globals.border-radius(var(--border-radius));
-  @include globals.typography(globals.$ion-body-sm-medium);
-
-  gap: globals.$ion-space-100;
-
-  line-height: globals.$ion-font-line-height-full;
-
-  cursor: auto;
-}
-
-// Outline Chip
-// ---------------------------------------------
-
-:host(.chip-outline) {
-  border-width: globals.$ion-border-size-025;
-  border-style: globals.$ion-border-style-solid;
-}
-
-// Chip: Focus
-// ---------------------------------------------
-
-:host(.ion-focused) {
-  @include globals.focused-state(null, null, var(--focus-ring-color));
-}
-
-// Chip: Disabled
-// ---------------------------------------------
-
-:host(.chip-disabled)::after {
-  @include globals.disabled-state();
-}
-
-// Chip Shapes
-// ---------------------------------------------
-
-:host(.chip-soft) {
-  --border-radius: #{globals.$ion-border-radius-100};
-}
-
-:host(.chip-round) {
-  --border-radius: #{globals.$ion-border-radius-400};
-}
-
-:host(.chip-rectangular) {
-  --border-radius: #{globals.$ion-border-radius-0};
-}
-
-// Chip Icon
-// ---------------------------------------------
-::slotted(ion-icon) {
-  font-size: globals.$ion-font-size-400;
-}
-
-// Size
-// ---------------------------------------------
-
-:host(.chip-small) {
-  min-height: globals.$ion-scale-600;
-
-  font-size: globals.$ion-font-size-300;
-}
-
-:host(.chip-large) {
-  min-height: globals.$ion-scale-800;
-
-  font-size: globals.$ion-font-size-350;
-}
-
-// Subtle Chip
-// ---------------------------------------------
-
-:host(.chip-subtle) {
-  --background: #{globals.$ion-primitives-neutral-100};
-  --color: #{globals.$ion-primitives-neutral-800};
-}
-
-:host(.chip-outline.chip-subtle) {
-  border-color: globals.$ion-primitives-neutral-300;
-}
-
-// Bold Chip
-// ---------------------------------------------
-
-:host(.chip-bold) {
-  --background: #{globals.$ion-bg-neutral-bold-default};
-  --color: #{globals.$ion-bg-surface-default};
-}
-
-:host(.chip-outline.chip-bold) {
-  // TODO(FW-6450): this is a made up design choice based on a
-  // darker shade of the background color
-  border-color: globals.$ion-text-default;
-}
-
-// Chip Colors
-// ---------------------------------------------
-
-// Subtle
-:host(.chip-subtle.ion-color) {
-  background: globals.current-color(base, $subtle: true);
-  color: globals.current-color(contrast, $subtle: true);
-}
-
-:host(.chip-subtle.chip-outline.ion-color) {
-  border-color: globals.current-color(shade, $subtle: true);
-}
-
-// Bold
-:host(.chip-bold.ion-color) {
-  background: globals.current-color(base);
-  color: globals.current-color(contrast);
-}
-
-:host(.chip-bold.chip-outline.ion-color) {
-  border-color: globals.current-color(shade);
-}
diff --git a/core/src/components/chip/chip.ios.scss b/core/src/components/chip/chip.ios.scss
deleted file mode 100644
index e1e9b30808d..00000000000
--- a/core/src/components/chip/chip.ios.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@import "./chip.native";
-@import "./chip.vars";
-
-:host {
-  /**
-   * Main content should be prioritized on iOS,
-   * so we set max font size for chips.
-   * We add a min font size to keep the text legible.
-   */
-  font-size: clamp(13px, $chip-base-font-size-rem, 22px);
-}
-
-// Chip Shapes
-// ---------------------------------------------
-
-:host(.chip-soft) {
-  --border-radius: 10px;
-}
-
-:host(.chip-round) {
-  --border-radius: 999px;
-}
-
-:host(.chip-rectangular) {
-  --border-radius: 0px;
-}
diff --git a/core/src/components/chip/chip.md.scss b/core/src/components/chip/chip.md.scss
deleted file mode 100644
index d27884bb9f8..00000000000
--- a/core/src/components/chip/chip.md.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@import "./chip.native";
-@import "./chip.vars";
-
-:host {
-  font-size: $chip-base-font-size-rem;
-}
-
-// Chip Shapes
-// ---------------------------------------------
-
-:host(.chip-soft) {
-  --border-radius: 8px;
-}
-
-:host(.chip-round) {
-  --border-radius: 999px;
-}
-
-:host(.chip-rectangular) {
-  --border-radius: 0px;
-}
diff --git a/core/src/components/chip/chip.native.scss b/core/src/components/chip/chip.native.scss
deleted file mode 100644
index d07f3d33ea2..00000000000
--- a/core/src/components/chip/chip.native.scss
+++ /dev/null
@@ -1,143 +0,0 @@
-@import "../../themes/native/native.globals";
-@import "./chip.vars";
-@import "./chip.common";
-
-:host {
-  --background: #{rgba($text-color-rgb, 0.12)};
-  --color: #{rgba($text-color-rgb, 0.87)};
-
-  @include border-radius(var(--border-radius));
-  @include margin(4px);
-  @include padding(6px, 12px);
-
-  min-height: 32px;
-
-  font-family: $font-family-base;
-}
-
-:host(.chip-disabled) {
-  opacity: 0.4;
-}
-
-// Chip Colors
-// ---------------------------------------------
-
-:host(.ion-color) {
-  background: current-color(base, 0.08);
-  color: current-color(shade);
-}
-
-:host(.ion-color:focus) {
-  background: current-color(base, 0.12);
-}
-
-:host(.ion-color.ion-activated) {
-  background: current-color(base, 0.16);
-}
-
-// Chip: Hover
-// ---------------------------------------------
-
-@media (any-hover: hover) {
-  :host(.ion-color:hover) {
-    background: current-color(base, 0.12);
-  }
-}
-
-// Outline Chip
-// ---------------------------------------------
-
-:host(.chip-outline) {
-  border-width: 1px;
-  border-style: solid;
-}
-
-:host(.chip-outline) {
-  border-color: rgba($text-color-rgb, 0.32);
-
-  background: transparent;
-}
-
-:host(.chip-outline.ion-color) {
-  border-color: current-color(base, 0.32);
-}
-
-:host(.chip-outline:not(.ion-color):focus) {
-  background: rgba($text-color-rgb, 0.04);
-}
-
-:host(.chip-outline.ion-activated:not(.ion-color)) {
-  background: rgba($text-color-rgb, 0.08);
-}
-
-// Chip Icon
-// ---------------------------------------------
-
-::slotted(ion-icon) {
-  font-size: $chip-icon-size;
-}
-
-:host(:not(.ion-color)) ::slotted(ion-icon) {
-  color: rgba($text-color-rgb, 0.54);
-}
-
-::slotted(ion-icon:first-child) {
-  @include margin(-4px, 8px, -4px, -4px);
-}
-
-::slotted(ion-icon:last-child) {
-  @include margin(-4px, -4px, -4px, 8px);
-}
-
-// Chip Avatar
-// ---------------------------------------------
-
-::slotted(ion-avatar) {
-  flex-shrink: 0;
-
-  width: $chip-avatar-size;
-  height: $chip-avatar-size;
-}
-
-::slotted(ion-avatar:first-child) {
-  @include margin(-4px, 8px, -4px, -8px);
-}
-
-::slotted(ion-avatar:last-child) {
-  @include margin(-4px, -8px, -4px, 8px);
-}
-
-// Chip: Focus
-// ---------------------------------------------
-
-:host(:focus) {
-  outline: none;
-}
-
-:host(:focus) {
-  --background: #{rgba($text-color-rgb, 0.16)};
-}
-
-// Chip: Activated
-// ---------------------------------------------
-
-:host(.ion-activated) {
-  --background: #{rgba($text-color-rgb, 0.2)};
-}
-
-// Chip: Hover
-// ---------------------------------------------
-
-@media (any-hover: hover) {
-  :host(:hover) {
-    --background: #{rgba($text-color-rgb, 0.16)};
-  }
-
-  :host(.ion-color:hover) {
-    background: current-color(base, 0.12);
-  }
-
-  :host(.chip-outline:not(.ion-color):hover) {
-    background: rgba($text-color-rgb, 0.04);
-  }
-}
diff --git a/core/src/components/chip/chip.tsx b/core/src/components/chip/chip.tsx
index bbd30e823cb..ad698c14ebc 100644
--- a/core/src/components/chip/chip.tsx
+++ b/core/src/components/chip/chip.tsx
@@ -1,22 +1,16 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
-import { printIonWarning } from '@utils/logging';
 import { createColorClasses } from '@utils/theme';
 
-import { getIonTheme } from '../../global/ionic-global';
+import { config } from '../../global/config';
 import type { Color } from '../../interface';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  */
 @Component({
   tag: 'ion-chip',
-  styleUrls: {
-    ios: 'chip.ios.scss',
-    md: 'chip.md.scss',
-    ionic: 'chip.ionic.scss',
-  },
+  styleUrl: 'chip.base.scss',
   shadow: true,
 })
 export class Chip implements ComponentInterface {
@@ -41,64 +35,33 @@ export class Chip implements ComponentInterface {
    * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for
    * a chip with muted, subtle colors.
    *
-   * Only applies to the `ionic` theme.
+   * Defaults to `"subtle"`.
    */
   @Prop() hue?: 'bold' | 'subtle' = 'subtle';
 
   /**
    * Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully
    * rounded corners, or `"rectangular"` for a chip without rounded corners.
-   * Defaults to `"round"` for the `"ionic"` theme and `"soft"` for all other themes.
+   *
+   * Defaults to `"round"`.
    */
-  @Prop() shape?: 'soft' | 'round' | 'rectangular';
-
-  /**
-   * Set the shape based on the theme
-   */
-  private getShape(): string {
-    const theme = getIonTheme(this);
-    const { shape } = this;
-
-    if (shape === undefined) {
-      return theme === 'ionic' ? 'round' : 'soft';
-    }
-
-    return shape;
-  }
+  @Prop() shape?: 'soft' | 'round' | 'rectangular' = 'round';
 
   /**
    * Set to `"small"` for a chip with less height and padding.
    *
-   * Defaults to `"large"` for the ionic theme, and  undefined for all other themes.
+   * Defaults to `"large"`.
    */
-  @Prop() size?: 'small' | 'large';
-
-  private getSize() {
-    const theme = getIonTheme(this);
-    const { size } = this;
-
-    if (theme === 'ionic') {
-      return size !== undefined ? size : 'large';
-      // TODO(ROU-10695): remove the size !== undefined when we add support for
-      // the `ios` and `md` themes.
-    } else if (size !== undefined) {
-      printIonWarning(`The "${size}" size is not supported in the ${theme} theme.`);
-    }
-
-    return undefined;
-  }
+  @Prop() size?: 'small' | 'large' = 'large';
 
   render() {
-    const { hue } = this;
-    const theme = getIonTheme(this);
-    const size = this.getSize();
-    const shape = this.getShape();
+    const { hue, size, shape } = this;
+    const useRippleEffect = config.getBoolean('rippleEffect', false);
 
     return (
       <Host
         aria-disabled={this.disabled ? 'true' : null}
         class={createColorClasses(this.color, {
-          [theme]: true,
           [`chip-${shape}`]: true,
           'chip-outline': this.outline,
           'chip-disabled': this.disabled,
@@ -109,7 +72,7 @@ export class Chip implements ComponentInterface {
         })}
       >
         <slot></slot>
-        {theme === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+        {useRippleEffect && <ion-ripple-effect></ion-ripple-effect>}
       </Host>
     );
   }
diff --git a/core/src/components/chip/chip.vars.scss b/core/src/components/chip/chip.vars.scss
deleted file mode 100644
index d0bf28bfbde..00000000000
--- a/core/src/components/chip/chip.vars.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@use "sass:math";
-
-/// @prop - Unitless font size of the chip before scaling
-$chip-base-font-size: 14;
-
-/// @prop - Font size of the chip in rem before scaling
-$chip-base-font-size-rem: #{math.div($chip-base-font-size, 16)}rem;
-
-/// @prop - Size of an icon within a chip (in em to scale as the font size of the chip scales)
-$chip-icon-size: math.div(20em, $chip-base-font-size);
-
-/// @prop - Size of an avatar within a chip (in em to scale as the font size of the chip scales)
-$chip-avatar-size: math.div(24em, $chip-base-font-size);
diff --git a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Chrome-linux.png
index 646e44afae0..9ea90e30a89 100644
Binary files a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Firefox-linux.png
index 36fe05f437b..a0dc1fd2b0f 100644
Binary files a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Safari-linux.png
index d8fb22b8249..779612249f5 100644
Binary files a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Safari-linux.png and b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Chrome-linux.png
index 46b0d64d243..ea3f6e22478 100644
Binary files a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Firefox-linux.png
index 2215aa14fbb..d70aa347251 100644
Binary files a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Safari-linux.png
index 783f972cfc9..8eb3ee76c89 100644
Binary files a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Chrome-linux.png
index 85840a56159..8181c8d900e 100644
Binary files a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Firefox-linux.png
index e8b5a9b0e3b..920f2ef5947 100644
Binary files a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Safari-linux.png
index b59d0d02838..f44b056554b 100644
Binary files a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Safari-linux.png and b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-ltr-Mobile-Chrome-linux.png
index e45c27dbaab..c046b540060 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-ltr-Mobile-Firefox-linux.png
index 56993cd528f..37e25daa4ae 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-ltr-Mobile-Safari-linux.png
index c59b9d656c3..adbfb8213ab 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-rtl-Mobile-Chrome-linux.png
index 2ed567211cc..96e179654f4 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-rtl-Mobile-Firefox-linux.png
index 72f9d08d553..2ce4eb9609b 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-rtl-Mobile-Safari-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-rtl-Mobile-Safari-linux.png
index f9133451fcb..0ad4e270b49 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-descender-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-descender-ios-ltr-Mobile-Chrome-linux.png
index ec49fe832c7..38d6c6bbe15 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-descender-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-descender-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-descender-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-descender-ios-ltr-Mobile-Firefox-linux.png
index 4cba9b1d1bc..9108e922cb6 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-descender-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-descender-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-descender-ios-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-descender-ios-ltr-Mobile-Safari-linux.png
index b2d0f2e5668..fba79ce69ff 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-descender-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-descender-ios-ltr-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 c2fbbb99b68..3e54172e048 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 824ca487fe3..50f54c3b6d2 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 4c3cef1d217..8dd0001f13b 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
index ad04f41112e..741f73e0bba 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png 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
index 7cd37a23021..030044bf586 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png 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
index 5dbdb768c82..bdb65ef1b21 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ionic-md-ltr-light-Mobile-Safari-linux.png 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-outline-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ios-ltr-Mobile-Chrome-linux.png
index ea276cd75bf..92cfd65713a 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ios-ltr-Mobile-Firefox-linux.png
index 174d0b9e29d..ad6a1db2537 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ios-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ios-ltr-Mobile-Safari-linux.png
index ad23473fd8f..bcae128b8d7 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ios-ltr-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 4507a303ed9..64d2f5523c5 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 f58258afa3e..a22f3b998a3 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 9da99e5fc72..c313dae4a1c 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/chip/test/hue/chip.e2e.ts b/core/src/components/chip/test/hue/chip.e2e.ts
index 8b4384e0b04..05d774dc69c 100644
--- a/core/src/components/chip/test/hue/chip.e2e.ts
+++ b/core/src/components/chip/test/hue/chip.e2e.ts
@@ -1,7 +1,10 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => {
+/**
+ * This behavior does not vary across directions.
+ */
+configs({ directions: ['ltr'], modes: ['ionic-md', 'md', 'ios'] }).forEach(({ config, screenshot, title }) => {
   test.describe(title('chip: hue'), () => {
     test('should render subtle chips', async ({ page }) => {
       await page.setContent(
@@ -14,86 +17,86 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
         </style>
 
         <div id="container">
-          <ion-chip>
+          <ion-chip hue="subtle">
             <ion-icon name="logo-ionic"></ion-icon>
             <ion-label>Chip</ion-label>
           </ion-chip>
-          <ion-chip color="primary">
+          <ion-chip hue="subtle" color="primary">
             <ion-icon name="logo-ionic"></ion-icon>
             <ion-label>Chip</ion-label>
           </ion-chip>
-          <ion-chip color="secondary">
+          <ion-chip hue="subtle" color="secondary">
             <ion-icon name="logo-ionic"></ion-icon>
             <ion-label>Chip</ion-label>
           </ion-chip>
-          <ion-chip color="tertiary">
+          <ion-chip hue="subtle" color="tertiary">
             <ion-icon name="logo-ionic"></ion-icon>
             <ion-label>Chip</ion-label>
           </ion-chip>
-          <ion-chip color="success">
+          <ion-chip hue="subtle" color="success">
             <ion-icon name="logo-ionic"></ion-icon>
             <ion-label>Chip</ion-label>
           </ion-chip>
-          <ion-chip color="warning">
+          <ion-chip hue="subtle" color="warning">
             <ion-icon name="logo-ionic"></ion-icon>
             <ion-label>Chip</ion-label>
           </ion-chip>
-          <ion-chip color="danger">
+          <ion-chip hue="subtle" color="danger">
             <ion-icon name="logo-ionic"></ion-icon>
             <ion-label>Chip</ion-label>
           </ion-chip>
-          <ion-chip color="light">
+          <ion-chip hue="subtle" color="light">
             <ion-icon name="logo-ionic"></ion-icon>
             <ion-label>Chip</ion-label>
           </ion-chip>
-          <ion-chip color="medium">
+          <ion-chip hue="subtle" color="medium">
             <ion-icon name="logo-ionic"></ion-icon>
             <ion-label>Chip</ion-label>
           </ion-chip>
-          <ion-chip color="dark">
+          <ion-chip hue="subtle" color="dark">
             <ion-icon name="logo-ionic"></ion-icon>
             <ion-label>Chip</ion-label>
           </ion-chip>
 
           <br>
 
-          <ion-chip outline>
+          <ion-chip hue="subtle" outline>
             <ion-icon name="logo-ionic"></ion-icon>
             <ion-label>Chip</ion-label>
           </ion-chip>
-          <ion-chip outline color="primary">
+          <ion-chip hue="subtle" outline color="primary">
             <ion-icon name="logo-ionic"></ion-icon>
             <ion-label>Chip</ion-label>
           </ion-chip>
-          <ion-chip outline color="secondary">
+          <ion-chip hue="subtle" outline color="secondary">
             <ion-icon name="logo-ionic"></ion-icon>
             <ion-label>Chip</ion-label>
           </ion-chip>
-          <ion-chip outline color="tertiary">
+          <ion-chip hue="subtle" outline color="tertiary">
             <ion-icon name="logo-ionic"></ion-icon>
             <ion-label>Chip</ion-label>
           </ion-chip>
-          <ion-chip outline color="success">
+          <ion-chip hue="subtle" outline color="success">
             <ion-icon name="logo-ionic"></ion-icon>
             <ion-label>Chip</ion-label>
           </ion-chip>
-          <ion-chip outline color="warning">
+          <ion-chip hue="subtle" outline color="warning">
             <ion-icon name="logo-ionic"></ion-icon>
             <ion-label>Chip</ion-label>
           </ion-chip>
-          <ion-chip outline color="danger">
+          <ion-chip hue="subtle" outline color="danger">
             <ion-icon name="logo-ionic"></ion-icon>
             <ion-label>Chip</ion-label>
           </ion-chip>
-          <ion-chip outline color="light">
+          <ion-chip hue="subtle" outline color="light">
             <ion-icon name="logo-ionic"></ion-icon>
             <ion-label>Chip</ion-label>
           </ion-chip>
-          <ion-chip outline color="medium">
+          <ion-chip hue="subtle" outline color="medium">
             <ion-icon name="logo-ionic"></ion-icon>
             <ion-label>Chip</ion-label>
           </ion-chip>
-          <ion-chip outline color="dark">
+          <ion-chip hue="subtle" outline color="dark">
             <ion-icon name="logo-ionic"></ion-icon>
             <ion-label>Chip</ion-label>
           </ion-chip>
diff --git a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png
index bc41a89108e..32c577f2c86 100644
Binary files a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png
index a908d4bb4b6..afa8091089f 100644
Binary files a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png
index 72218447f57..9bcf387d642 100644
Binary files a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..5873bc349d8
Binary files /dev/null and b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d97511768b3
Binary files /dev/null and b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ios-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..80d48e01c08
Binary files /dev/null and b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-md-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..aed48ff080d
Binary files /dev/null and b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-md-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..7b14b769b98
Binary files /dev/null and b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-md-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..1726677cee2
Binary files /dev/null and b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png
index a7b9a077943..f5aba57122c 100644
Binary files a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png
index cb62d574b64..6994ae6cb74 100644
Binary files a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png
index 773868a466f..6d8d4cb5870 100644
Binary files a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..6986287feda
Binary files /dev/null and b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..50ac26b83f3
Binary files /dev/null and b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ios-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..558152f3aad
Binary files /dev/null and b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-md-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..87e57bea868
Binary files /dev/null and b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-md-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..603445689d9
Binary files /dev/null and b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-md-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..36ba6afbd31
Binary files /dev/null and b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/hue/index.html b/core/src/components/chip/test/hue/index.html
index a7cfcd29fea..db62b0e531c 100644
--- a/core/src/components/chip/test/hue/index.html
+++ b/core/src/components/chip/test/hue/index.html
@@ -31,86 +31,86 @@
       <ion-content class="ion-padding">
         <h2>Chip Hue: Subtle</h2>
 
-        <ion-chip>
+        <ion-chip hue="subtle">
           <ion-icon name="logo-ionic"></ion-icon>
           <ion-label>Chip</ion-label>
         </ion-chip>
-        <ion-chip color="primary">
+        <ion-chip hue="subtle" color="primary">
           <ion-icon name="logo-ionic"></ion-icon>
           <ion-label>Chip</ion-label>
         </ion-chip>
-        <ion-chip color="secondary">
+        <ion-chip hue="subtle" color="secondary">
           <ion-icon name="logo-ionic"></ion-icon>
           <ion-label>Chip</ion-label>
         </ion-chip>
-        <ion-chip color="tertiary">
+        <ion-chip hue="subtle" color="tertiary">
           <ion-icon name="logo-ionic"></ion-icon>
           <ion-label>Chip</ion-label>
         </ion-chip>
-        <ion-chip color="success">
+        <ion-chip hue="subtle" color="success">
           <ion-icon name="logo-ionic"></ion-icon>
           <ion-label>Chip</ion-label>
         </ion-chip>
-        <ion-chip color="warning">
+        <ion-chip hue="subtle" color="warning">
           <ion-icon name="logo-ionic"></ion-icon>
           <ion-label>Chip</ion-label>
         </ion-chip>
-        <ion-chip color="danger">
+        <ion-chip hue="subtle" color="danger">
           <ion-icon name="logo-ionic"></ion-icon>
           <ion-label>Chip</ion-label>
         </ion-chip>
-        <ion-chip color="light">
+        <ion-chip hue="subtle" color="light">
           <ion-icon name="logo-ionic"></ion-icon>
           <ion-label>Chip</ion-label>
         </ion-chip>
-        <ion-chip color="medium">
+        <ion-chip hue="subtle" color="medium">
           <ion-icon name="logo-ionic"></ion-icon>
           <ion-label>Chip</ion-label>
         </ion-chip>
-        <ion-chip color="dark">
+        <ion-chip hue="subtle" color="dark">
           <ion-icon name="logo-ionic"></ion-icon>
           <ion-label>Chip</ion-label>
         </ion-chip>
 
         <br />
 
-        <ion-chip outline>
+        <ion-chip hue="subtle" outline>
           <ion-icon name="logo-ionic"></ion-icon>
           <ion-label>Chip</ion-label>
         </ion-chip>
-        <ion-chip outline color="primary">
+        <ion-chip hue="subtle" outline color="primary">
           <ion-icon name="logo-ionic"></ion-icon>
           <ion-label>Chip</ion-label>
         </ion-chip>
-        <ion-chip outline color="secondary">
+        <ion-chip hue="subtle" outline color="secondary">
           <ion-icon name="logo-ionic"></ion-icon>
           <ion-label>Chip</ion-label>
         </ion-chip>
-        <ion-chip outline color="tertiary">
+        <ion-chip hue="subtle" outline color="tertiary">
           <ion-icon name="logo-ionic"></ion-icon>
           <ion-label>Chip</ion-label>
         </ion-chip>
-        <ion-chip outline color="success">
+        <ion-chip hue="subtle" outline color="success">
           <ion-icon name="logo-ionic"></ion-icon>
           <ion-label>Chip</ion-label>
         </ion-chip>
-        <ion-chip outline color="warning">
+        <ion-chip hue="subtle" outline color="warning">
           <ion-icon name="logo-ionic"></ion-icon>
           <ion-label>Chip</ion-label>
         </ion-chip>
-        <ion-chip outline color="danger">
+        <ion-chip hue="subtle" outline color="danger">
           <ion-icon name="logo-ionic"></ion-icon>
           <ion-label>Chip</ion-label>
         </ion-chip>
-        <ion-chip outline color="light">
+        <ion-chip hue="subtle" outline color="light">
           <ion-icon name="logo-ionic"></ion-icon>
           <ion-label>Chip</ion-label>
         </ion-chip>
-        <ion-chip outline color="medium">
+        <ion-chip hue="subtle" outline color="medium">
           <ion-icon name="logo-ionic"></ion-icon>
           <ion-label>Chip</ion-label>
         </ion-chip>
-        <ion-chip outline color="dark">
+        <ion-chip hue="subtle" outline color="dark">
           <ion-icon name="logo-ionic"></ion-icon>
           <ion-label>Chip</ion-label>
         </ion-chip>
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 3646aa50e2a..62871a92743 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 89bf78e8d11..49952449dae 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Safari-linux.png
index f59ba027ce4..eec69522a69 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ios-ltr-Mobile-Chrome-linux.png
index e6f6fb19943..9da8d80643c 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ios-ltr-Mobile-Firefox-linux.png
index e8434653e14..669d754f2c4 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ios-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ios-ltr-Mobile-Safari-linux.png
index 598f6996fde..fb734a06235 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-md-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-md-ltr-Mobile-Chrome-linux.png
index ebcf736864c..e3a088bda68 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-md-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-md-ltr-Mobile-Firefox-linux.png
index c0bb84d7873..94549155542 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-md-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-md-ltr-Mobile-Safari-linux.png
index eb476c51006..34d8455fba5 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-md-ltr-Mobile-Safari-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png
index bc3a2866132..e5d40017b91 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png
index b63225147cb..9503a3fd01c 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png
index 55799998c2b..6c3cc5f466e 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ios-ltr-Mobile-Chrome-linux.png
index 48f01905a44..ed3dd5060e8 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ios-ltr-Mobile-Firefox-linux.png
index bbe4d087971..31510baa10f 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ios-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ios-ltr-Mobile-Safari-linux.png
index a7a65e7db12..9cc33192197 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-md-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-md-ltr-Mobile-Chrome-linux.png
index 610ca6b68b1..bcf474273ee 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-md-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-md-ltr-Mobile-Firefox-linux.png
index ad7bc33d219..bdbbd3fec9d 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-md-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-md-ltr-Mobile-Safari-linux.png
index 462f0453208..9aea5cae927 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-md-ltr-Mobile-Safari-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Chrome-linux.png
index f54f3d64656..705f7ce683a 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 296c0b27d4e..8c3f2160828 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Safari-linux.png
index 34c94be1800..5290533bed1 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ios-ltr-Mobile-Chrome-linux.png
index f909af54ca4..eaf290f1586 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ios-ltr-Mobile-Firefox-linux.png
index 34610c5bd47..7c19509de71 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ios-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ios-ltr-Mobile-Safari-linux.png
index f0c1291ff9c..dc45573d7c4 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-md-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-md-ltr-Mobile-Chrome-linux.png
index 1b7d9943f93..e5735f8e077 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-md-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-md-ltr-Mobile-Firefox-linux.png
index 3bb49713164..b24d91b3828 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-md-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-md-ltr-Mobile-Safari-linux.png
index 0fdb495b03c..9af03b13f3d 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-md-ltr-Mobile-Safari-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png
index c78e9eac5f8..7759189da6b 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png
index e4e95cbc3c9..250a59195ba 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Safari-linux.png
index ba74bc360c3..9fe8b6861de 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ios-ltr-Mobile-Chrome-linux.png
index ebf73aa5555..be45b4127ee 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ios-ltr-Mobile-Firefox-linux.png
index e789b3e5f6d..391596268e9 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ios-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ios-ltr-Mobile-Safari-linux.png
index 94e21ae041f..3deb1ed7f0a 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-md-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-md-ltr-Mobile-Chrome-linux.png
index 261db3a2802..e19640b6ba1 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-md-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-md-ltr-Mobile-Firefox-linux.png
index b0b8277c3ed..90953799c30 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-md-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-md-ltr-Mobile-Safari-linux.png
index fbab326cddb..240c60857b7 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-md-ltr-Mobile-Safari-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/shape/index.html b/core/src/components/chip/test/shape/index.html
index d2bac4b4281..165d2a9feaa 100644
--- a/core/src/components/chip/test/shape/index.html
+++ b/core/src/components/chip/test/shape/index.html
@@ -12,18 +12,6 @@
     <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>
-
-    <style>
-      /*
-       * This style is applied to make the shape stand out more
-       * in the e2e tests, but it shouldn't be applied to the ios or
-       * md themes as those use an rgb value for the chip background
-       */
-      .ionic ion-content {
-        --background: #222;
-        --color: #fff;
-      }
-    </style>
   </head>
 
   <body>
diff --git a/core/src/components/chip/test/size/chip.e2e.ts b/core/src/components/chip/test/size/chip.e2e.ts
index 49240d225d9..aaa26e1effe 100644
--- a/core/src/components/chip/test/size/chip.e2e.ts
+++ b/core/src/components/chip/test/size/chip.e2e.ts
@@ -2,9 +2,9 @@ import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
 /**
- * This behavior does not vary across modes/directions.
+ * This behavior does not vary across directions.
  */
-configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ionic-md', 'md', 'ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('chip: size'), () => {
     test('should render small chip', async ({ page }) => {
       await page.setContent(
diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 3e10a87b8c3..d58439ca945 100644
Binary files a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png
index ba8298ae0c4..b76cdb2a9ad 100644
Binary files a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png
index 033ea40bb27..abd17cff824 100644
Binary files a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..31592e8e2a4
Binary files /dev/null and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..fd668a4bf95
Binary files /dev/null and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ios-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..4e51fb7d176
Binary files /dev/null and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-md-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..4c71cc22f72
Binary files /dev/null and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-md-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..e156a9601bf
Binary files /dev/null and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-md-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..992582a63b0
Binary files /dev/null and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 73f92742a79..4c77a7639ca 100644
Binary files a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png
index cf60ee26e78..bb690fede89 100644
Binary files a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png
index 1711cc02f29..295cf3954a2 100644
Binary files a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..298f73d9774
Binary files /dev/null and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..2bd39b75094
Binary files /dev/null and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ios-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f510160f47f
Binary files /dev/null and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-md-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..679f6147264
Binary files /dev/null and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-md-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..c04ea982cda
Binary files /dev/null and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-md-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..ff673cd1a53
Binary files /dev/null and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/states/chip.e2e.ts b/core/src/components/chip/test/states/chip.e2e.ts
index 6d7b3c50a0c..971fdb742c8 100644
--- a/core/src/components/chip/test/states/chip.e2e.ts
+++ b/core/src/components/chip/test/states/chip.e2e.ts
@@ -1,22 +1,64 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  /**
-   * This behavior does not vary across modes/directions.
-   */
+/**
+ * This behavior does not vary across directions.
+ *
+ * `md` does not differ from `ios`.
+ */
+configs({ modes: ['ios', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('chip: states'), () => {
     test('should render disabled state', async ({ page }) => {
       await page.setContent(
-        `<ion-chip disabled="true">
-          <ion-label>Disabled</ion-label>
-        </ion-chip>`,
+        `
+          // Adding margin so chips aren't overlapping
+          <style>
+            ion-chip {
+              margin: 4px 0;
+            }
+          </style>
+
+          <div id="container">
+            <ion-chip disabled="true" hue="subtle">
+              <ion-label>Disabled</ion-label>
+            </ion-chip>
+            <ion-chip disabled="true" hue="bold">
+              <ion-label>Disabled</ion-label>
+            </ion-chip>
+          </div>
+        `,
         config
       );
 
-      const chip = page.locator('ion-chip');
+      const container = page.locator('#container');
 
-      await expect(chip).toHaveScreenshot(screenshot(`chip-disabled`));
+      await expect(container).toHaveScreenshot(screenshot(`chip-disabled`));
+    });
+    test('should render focus state', async ({ page }) => {
+      await page.setContent(
+        `
+          // Adding margin so chips aren't overlapping
+          <style>
+            ion-chip {
+              margin: 4px 0;
+            }
+          </style>
+
+          <div id="container">
+            <ion-chip class="ion-focused" hue="subtle">
+              <ion-label>Focused</ion-label>
+            </ion-chip>
+            <ion-chip class="ion-focused" hue="bold">
+              <ion-label>Focused</ion-label>
+            </ion-chip>
+          </div>
+        `,
+        config
+      );
+
+      const container = page.locator('#container');
+
+      await expect(container).toHaveScreenshot(screenshot(`chip-focused`));
     });
     test('should custom chip', async ({ page }) => {
       await page.setContent(
@@ -41,25 +83,3 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
     });
   });
 });
-
-configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  /**
-   * This behavior only applies to Ionic Theme.
-   */
-  test.describe(title('chip: focus state'), () => {
-    test('should render focus state', async ({ page }) => {
-      await page.setContent(
-        `<div id="container" class="ion-padding">
-          <ion-chip class="ion-focused">
-            <ion-label>Focused</ion-label>
-          </ion-chip>
-        </div>`,
-        config
-      );
-
-      const chip = page.locator('#container');
-
-      await expect(chip).toHaveScreenshot(screenshot(`chip-focused`));
-    });
-  });
-});
diff --git a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..b88319a45de
Binary files /dev/null and b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..e30a8ac0918
Binary files /dev/null and b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-custom-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-custom-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..2e1b9e1dae4
Binary files /dev/null and b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-custom-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-custom-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-custom-ios-ltr-Mobile-Chrome-linux.png
index 0079f6ec5dd..4cf13e00481 100644
Binary files a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-custom-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-custom-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-custom-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-custom-ios-ltr-Mobile-Firefox-linux.png
index 550b55dc181..5ffc98d44c3 100644
Binary files a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-custom-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-custom-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-custom-ios-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-custom-ios-ltr-Mobile-Safari-linux.png
index 868b2a32007..1fbb4ebd26a 100644
Binary files a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-custom-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-custom-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..59b519cef40
Binary files /dev/null and b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..901f02a3269
Binary files /dev/null and b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..b23899cf719
Binary files /dev/null and b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-disabled-ios-ltr-Mobile-Chrome-linux.png
index 31ee262fa9f..4f7935293f0 100644
Binary files a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-disabled-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-disabled-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-disabled-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-disabled-ios-ltr-Mobile-Firefox-linux.png
index 914fa41bb4c..ad5678c4056 100644
Binary files a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-disabled-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-disabled-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-disabled-ios-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-disabled-ios-ltr-Mobile-Safari-linux.png
index cd256ffdb66..28d898a58c7 100644
Binary files a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-disabled-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-disabled-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 462dd5a1fb4..663f7387219 100644
Binary files a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 0ef08c63092..448ff476ba5 100644
Binary files a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Safari-linux.png
index e9adf29fc8b..2409ea89074 100644
Binary files a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..c808146c123
Binary files /dev/null and b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..06871fcd0c3
Binary files /dev/null and b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ios-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..1701aa2da00
Binary files /dev/null and b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/theme-ionic/index.html b/core/src/components/chip/test/theme-ionic/index.html
deleted file mode 100644
index 2d424f07c2b..00000000000
--- a/core/src/components/chip/test/theme-ionic/index.html
+++ /dev/null
@@ -1,96 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr" theme="ionic">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Chip - Ionic States</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-content>
-        <h2>Info Chip</h2>
-
-        <h3>Default</h3>
-        <p>
-          <ion-chip>
-            <ion-label>Default</ion-label>
-          </ion-chip>
-        </p>
-
-        <h3>Focus</h3>
-        <p>
-          <ion-chip class="ion-focused">
-            <ion-label>Focused</ion-label>
-          </ion-chip>
-        </p>
-
-        <h3>Disabled</h3>
-        <p>
-          <ion-chip disabled>
-            <ion-label>Disabled</ion-label>
-          </ion-chip>
-        </p>
-
-        <h3>Outline</h3>
-        <p>
-          <ion-chip outline="true">
-            <ion-label>Default</ion-label>
-          </ion-chip>
-
-          <ion-chip class="ion-focused" outline="true">
-            <ion-label>Focus</ion-label>
-          </ion-chip>
-        </p>
-
-        <h3>Shapes</h3>
-        <p>
-          <ion-chip shape="soft">
-            <ion-label>Soft</ion-label>
-          </ion-chip>
-          <ion-chip shape="round">
-            <ion-label>Round</ion-label>
-          </ion-chip>
-          <ion-chip shape="rectangular">
-            <ion-label>Rectangular</ion-label>
-          </ion-chip>
-        </p>
-
-        <h3>With Icon</h3>
-        <p>
-          <ion-chip>
-            <ion-icon icon="calendar"></ion-icon>
-            <ion-label>Icon</ion-label>
-          </ion-chip>
-          <ion-chip>
-            <ion-label>Icon</ion-label>
-            <ion-icon icon="calendar"></ion-icon>
-          </ion-chip>
-        </p>
-      </ion-content>
-    </ion-app>
-
-    <style>
-      h2,
-      h3 {
-        padding-left: 16px;
-      }
-
-      p {
-        padding-left: 8px;
-      }
-
-      ion-chip + ion-chip {
-        margin-inline-start: 16px;
-      }
-    </style>
-  </body>
-</html>
diff --git a/core/src/global/ionic-global.ts b/core/src/global/ionic-global.ts
index 4d57b33a22d..f8821059bd6 100644
--- a/core/src/global/ionic-global.ts
+++ b/core/src/global/ionic-global.ts
@@ -1,10 +1,10 @@
 import { Build, getMode, setMode, getElement } from '@stencil/core';
 import { printIonWarning } from '@utils/logging';
-import { applyGlobalTheme, getCustomTheme } from '@utils/theme';
+import { applyComponentsTheme, applyGlobalTheme, getCustomTheme } from '@utils/theme';
 
 import type { IonicConfig, Mode, Theme } from '../interface';
 import { defaultTheme as baseTheme } from '../themes/base/default.tokens';
-import type { BaseTheme } from '../themes/themes.interfaces';
+import type { DefaultTheme } from '../themes/themes.interfaces';
 import { shouldUseCloseWatcher } from '../utils/hardware-back-button';
 import { isPlatform, setupPlatforms } from '../utils/platform';
 
@@ -147,17 +147,33 @@ export const initialize = (userConfig: IonicConfig = {}) => {
   doc.documentElement.setAttribute('theme', defaultTheme);
   doc.documentElement.classList.add(defaultTheme);
 
-  const customTheme: BaseTheme | undefined = getCustomTheme(configObj.customTheme, defaultMode);
+  const customTheme: DefaultTheme | undefined = getCustomTheme(configObj.customTheme, defaultMode);
 
   // Apply base theme, or combine with custom theme if provided
   if (customTheme) {
     const combinedTheme = applyGlobalTheme(baseTheme, customTheme);
+    // Component styles must be applied after global styles in order
+    // to ensure CSS variables are available for components
+    // like the semantic colors (e.g., --ion-color-shade)
+    applyComponentsTheme(combinedTheme);
     config.set('customTheme', combinedTheme);
   } else {
     applyGlobalTheme(baseTheme);
+    // Component styles must be applied after global styles in order
+    // to ensure CSS variables are available for components
+    // like the semantic colors (e.g., --ion-color-shade)
+    applyComponentsTheme(baseTheme);
     config.set('customTheme', baseTheme);
   }
 
+  // Apply any config values from the custom theme
+  const customConfig = customTheme?.config;
+  if (customConfig) {
+    Object.entries(customConfig).forEach(([key, value]) => {
+      config.set(key as keyof IonicConfig, value);
+    });
+  }
+
   if (config.getBoolean('_testing')) {
     config.set('animated', false);
   }
diff --git a/core/src/themes/ionic/default.tokens.ts b/core/src/themes/ionic/default.tokens.ts
index debcac4092b..c0853fe2d7e 100644
--- a/core/src/themes/ionic/default.tokens.ts
+++ b/core/src/themes/ionic/default.tokens.ts
@@ -1,3 +1,4 @@
+import { rgba, currentColor } from '../../utils/theme';
 import { defaultTheme as baseDefaultTheme } from '../base/default.tokens';
 import type { DefaultTheme } from '../themes.interfaces';
 
@@ -76,4 +77,120 @@ export const defaultTheme: DefaultTheme = {
     xxxl: 'var(--ion-radii-1000)',
     xxxxl: 'var(--ion-radii-full)',
   },
+
+  components: {
+    IonChip: {
+      margin: 'var(--ion-spacing-0)',
+      cursor: 'auto',
+
+      padding: {
+        vertical: 'var(--ion-spacing-xs)',
+        horizontal: 'var(--ion-spacing-sm)',
+      },
+
+      lineHeight: '100%',
+      fontWeight: 500,
+      letterSpacing: '0%',
+      gap: 'var(--ion-spacing-xxs)',
+
+      // Sizes
+      size: {
+        small: {
+          minHeight: 'var(--ion-scaling-xs)',
+          font: {
+            size: 'var(--ion-font-size-xs)',
+          },
+        },
+        large: {
+          minHeight: 'var(--ion-scaling-md)',
+          font: {
+            size: 'var(--ion-font-size-sm)',
+          },
+        },
+      },
+
+      // States
+      state: {
+        disabled: {
+          opacity: '0.4',
+        },
+        focus: {
+          ring: {
+            color: '#b5c0f7',
+            width: 'var(--ion-border-width-xxs)',
+          },
+        },
+      },
+
+      // Shapes
+      shape: {
+        soft: {
+          border: {
+            radius: 'var(--ion-radii-sm)',
+          },
+        },
+        round: {
+          border: {
+            radius: 'var(--ion-radii-xl)',
+          },
+        },
+        rectangular: {
+          border: {
+            radius: 'var(--ion-radii-xxxxs)',
+          },
+        },
+      },
+
+      // Hues
+      hue: {
+        bold: {
+          bg: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.12),
+          color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.87),
+
+          // Any of the semantic colors like primary, secondary, etc.
+          semantic: {
+            color: currentColor('contrast'),
+            bg: currentColor('base'),
+          },
+        },
+
+        subtle: {
+          bg: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.05),
+          color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.6),
+
+          semantic: {
+            color: currentColor('contrast', null, true),
+            bg: currentColor('base', null, true),
+          },
+        },
+      },
+
+      // Variants
+      variant: {
+        outline: {
+          border: {
+            color: {
+              bold: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.32),
+              subtle: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.16),
+            },
+
+            width: '1px',
+          },
+
+          semantic: {
+            border: {
+              color: {
+                bold: currentColor('shade'),
+                subtle: currentColor('shade', null, true),
+              },
+            },
+          },
+        },
+      },
+
+      icon: {
+        size: 'var(--ion-scaling-xxxs)',
+      },
+    },
+  },
 };
diff --git a/core/src/themes/ionic/light.tokens.ts b/core/src/themes/ionic/light.tokens.ts
index 94c96baeb90..7ba096eeca7 100644
--- a/core/src/themes/ionic/light.tokens.ts
+++ b/core/src/themes/ionic/light.tokens.ts
@@ -2,7 +2,9 @@ import type { LightTheme } from '../themes.interfaces';
 
 export const lightTheme: LightTheme = {
   backgroundColor: '#ffffff',
+  backgroundColorRgb: '255, 255, 255',
   textColor: '#000000',
+  textColorRgb: '0, 0, 0',
 
   components: {
     IonCard: {
diff --git a/core/src/themes/ios/default.tokens.ts b/core/src/themes/ios/default.tokens.ts
index 266191a1cb8..fb89ae8419f 100644
--- a/core/src/themes/ios/default.tokens.ts
+++ b/core/src/themes/ios/default.tokens.ts
@@ -1,9 +1,14 @@
+import { rgba, currentColor, clamp } from '../../utils/theme';
 import { defaultTheme as baseDefaultTheme } from '../base/default.tokens';
 import type { DefaultTheme } from '../themes.interfaces';
 
 import { darkTheme } from './dark.tokens';
 import { lightTheme } from './light.tokens';
 
+const fontSizes = {
+  chipBase: 14,
+};
+
 export const defaultTheme: DefaultTheme = {
   ...baseDefaultTheme,
 
@@ -71,4 +76,238 @@ export const defaultTheme: DefaultTheme = {
     xxxl: 'var(--ion-radii-500)',
     xxxxl: 'var(--ion-radii-full)',
   },
+
+  components: {
+    IonChip: {
+      margin: 'var(--ion-spacing-xxs)',
+      cursor: 'pointer',
+
+      padding: {
+        vertical: 'var(--ion-spacing-xs)',
+        horizontal: 'var(--ion-spacing-md)',
+      },
+
+      // Sizes
+      size: {
+        small: {
+          minHeight: 'var(--ion-scaling-xs)',
+
+          font: {
+            size: clamp(
+              'var(--ion-font-size-xs)',
+              `${((fontSizes.chipBase - 2) / 16).toFixed(2)}rem`,
+              'var(--ion-font-size-xl)'
+            ),
+          },
+        },
+
+        large: {
+          minHeight: 'var(--ion-scaling-md)',
+
+          font: {
+            size: clamp('13px', `${(fontSizes.chipBase / 16).toFixed(2)}rem`, '22px'),
+          },
+        },
+      },
+
+      // States
+      state: {
+        disabled: {
+          opacity: '0.4',
+        },
+      },
+
+      // Shapes
+      shape: {
+        soft: {
+          border: {
+            radius: 'var(--ion-radii-md)',
+          },
+        },
+
+        round: {
+          border: {
+            radius: 'var(--ion-radii-xxxxl)',
+          },
+        },
+
+        rectangular: {
+          border: {
+            radius: 'var(--ion-radii-xxxxs)',
+          },
+        },
+      },
+
+      // Hues
+      hue: {
+        bold: {
+          bg: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.12),
+          color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.87),
+
+          // Any of the semantic colors like primary, secondary, etc.
+          semantic: {
+            bg: currentColor('base', 0.08),
+            color: currentColor('shade'),
+
+            state: {
+              focus: {
+                bg: currentColor('base', 0.12),
+              },
+
+              hover: {
+                bg: currentColor('base', 0.12),
+              },
+
+              activated: {
+                bg: currentColor('base', 0.16),
+              },
+            },
+          },
+
+          // default non-semantic states
+          state: {
+            focus: {
+              bg: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.16),
+            },
+
+            activated: {
+              bg: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.2),
+            },
+
+            hover: {
+              bg: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.16),
+            },
+          },
+        },
+
+        subtle: {
+          bg: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.05),
+          color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.6),
+
+          semantic: {
+            bg: currentColor('base', null, true),
+            color: currentColor('contrast', null, true),
+
+            state: {
+              focus: {
+                bg: currentColor('base', 0.6, true),
+              },
+
+              hover: {
+                bg: currentColor('base', 0.6, true),
+              },
+
+              activated: {
+                bg: currentColor('base', 0.8, true),
+              },
+            },
+          },
+
+          // default non-semantic states
+          state: {
+            focus: {
+              bg: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.1),
+            },
+
+            activated: {
+              bg: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.14),
+            },
+
+            hover: {
+              bg: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.1),
+            },
+          },
+        },
+      },
+
+      // Variants
+      variant: {
+        outline: {
+          bg: 'transparent',
+
+          border: {
+            color: {
+              bold: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.32),
+              subtle: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.16),
+            },
+
+            width: 'var(--ion-border-width-xxs)',
+          },
+
+          semantic: {
+            border: {
+              color: {
+                bold: currentColor('base', 0.32),
+                subtle: currentColor('base', 0.12),
+              },
+            },
+          },
+
+          state: {
+            focus: {
+              bg: {
+                bold: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.04),
+                subtle: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.04),
+              },
+            },
+
+            hover: {
+              bg: {
+                bold: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.04),
+                subtle: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.04),
+              },
+            },
+
+            activated: {
+              bg: {
+                bold: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.08),
+                subtle: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.04),
+              },
+            },
+          },
+        },
+      },
+
+      icon: {
+        size: `${(20 / fontSizes.chipBase).toFixed(2)}em`,
+        color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.54),
+
+        firstChild: {
+          margin: {
+            vertical: '-4px',
+            start: '-4px',
+            end: 'var(--ion-spacing-sm)',
+          },
+        },
+
+        lastChild: {
+          margin: {
+            vertical: '-4px',
+            start: 'var(--ion-spacing-sm)',
+            end: '-4px',
+          },
+        },
+      },
+
+      avatar: {
+        size: `${(24 / fontSizes.chipBase).toFixed(2)}em`,
+
+        firstChild: {
+          margin: {
+            vertical: '-4px',
+            start: '-8px',
+            end: 'var(--ion-spacing-sm)',
+          },
+        },
+
+        lastChild: {
+          margin: {
+            vertical: '-4px',
+            start: 'var(--ion-spacing-sm)',
+            end: '-8px',
+          },
+        },
+      },
+    },
+  },
 };
diff --git a/core/src/themes/md/default.tokens.ts b/core/src/themes/md/default.tokens.ts
index 7dcff7c0445..e72e64b42f7 100644
--- a/core/src/themes/md/default.tokens.ts
+++ b/core/src/themes/md/default.tokens.ts
@@ -1,9 +1,14 @@
+import { rgba, currentColor } from '../../utils/theme';
 import { defaultTheme as baseDefaultTheme } from '../base/default.tokens';
 import type { DefaultTheme } from '../themes.interfaces';
 
 import { darkTheme } from './dark.tokens';
 import { lightTheme } from './light.tokens';
 
+const fontSizes = {
+  chipBase: 14,
+};
+
 export const defaultTheme: DefaultTheme = {
   ...baseDefaultTheme,
 
@@ -76,4 +81,233 @@ export const defaultTheme: DefaultTheme = {
     xxxl: 'var(--ion-radii-900)',
     xxxxl: 'var(--ion-radii-full)',
   },
+
+  components: {
+    IonChip: {
+      margin: 'var(--ion-spacing-xxs)',
+      cursor: 'pointer',
+
+      padding: {
+        vertical: 'var(--ion-spacing-xs)',
+        horizontal: 'var(--ion-spacing-md)',
+      },
+
+      // Sizes
+      size: {
+        small: {
+          minHeight: 'var(--ion-scaling-xs)',
+
+          font: {
+            size: `${((fontSizes.chipBase - 2) / 16).toFixed(2)}rem`,
+          },
+        },
+        large: {
+          minHeight: 'var(--ion-scaling-md)',
+
+          font: {
+            size: `${(fontSizes.chipBase / 16).toFixed(2)}rem`,
+          },
+        },
+      },
+
+      // States
+      state: {
+        disabled: {
+          opacity: '0.4',
+        },
+      },
+
+      // Shapes
+      shape: {
+        soft: {
+          border: {
+            radius: 'var(--ion-radii-md)',
+          },
+        },
+
+        round: {
+          border: {
+            radius: 'var(--ion-radii-xxxxl)',
+          },
+        },
+
+        rectangular: {
+          border: {
+            radius: 'var(--ion-radii-xxxxs)',
+          },
+        },
+      },
+
+      // Hues
+      hue: {
+        bold: {
+          bg: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.12),
+          color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.87),
+
+          // Any of the semantic colors like primary, secondary, etc.
+          semantic: {
+            bg: currentColor('base', 0.08),
+            color: currentColor('shade'),
+
+            state: {
+              focus: {
+                bg: currentColor('base', 0.12),
+              },
+
+              hover: {
+                bg: currentColor('base', 0.12),
+              },
+
+              activated: {
+                bg: currentColor('base', 0.16),
+              },
+            },
+          },
+
+          // default non-semantic states
+          state: {
+            focus: {
+              bg: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.16), // default non-semantic focus bg for both hues
+            },
+
+            activated: {
+              bg: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.2),
+            },
+
+            hover: {
+              bg: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.16),
+            },
+          },
+        },
+
+        subtle: {
+          bg: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.05),
+          color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.6),
+
+          semantic: {
+            bg: currentColor('base', null, true),
+            color: currentColor('contrast', null, true),
+
+            state: {
+              focus: {
+                bg: currentColor('base', 0.6, true),
+              },
+
+              hover: {
+                bg: currentColor('base', 0.6, true),
+              },
+
+              activated: {
+                bg: currentColor('base', 0.8, true),
+              },
+            },
+          },
+
+          // default non-semantic states
+          state: {
+            focus: {
+              bg: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.1),
+            },
+
+            activated: {
+              bg: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.14),
+            },
+
+            hover: {
+              bg: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.1),
+            },
+          },
+        },
+      },
+
+      // Variants
+      variant: {
+        outline: {
+          bg: 'transparent',
+
+          border: {
+            color: {
+              bold: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.32),
+              subtle: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.16),
+            },
+
+            width: 'var(--ion-border-width-xxxs)',
+          },
+
+          semantic: {
+            border: {
+              color: {
+                bold: currentColor('base', 0.32),
+                subtle: currentColor('base', 0.12),
+              },
+            },
+          },
+
+          state: {
+            focus: {
+              bg: {
+                bold: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.04),
+                subtle: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.04),
+              },
+            },
+
+            hover: {
+              bg: {
+                bold: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.04),
+                subtle: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.04),
+              },
+            },
+
+            activated: {
+              bg: {
+                bold: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.08),
+                subtle: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.04),
+              },
+            },
+          },
+        },
+      },
+
+      icon: {
+        size: `${(20 / fontSizes.chipBase).toFixed(2)}em`,
+        color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.54),
+
+        firstChild: {
+          margin: {
+            vertical: '-4px',
+            start: '-4px',
+            end: 'var(--ion-spacing-sm)',
+          },
+        },
+
+        lastChild: {
+          margin: {
+            vertical: '-4px',
+            start: 'var(--ion-spacing-sm)',
+            end: '-4px',
+          },
+        },
+      },
+
+      avatar: {
+        size: `${(24 / fontSizes.chipBase).toFixed(2)}em`,
+
+        firstChild: {
+          margin: {
+            vertical: '-4px',
+            start: '-8px',
+            end: 'var(--ion-spacing-sm)',
+          },
+        },
+
+        lastChild: {
+          margin: {
+            vertical: '-4px',
+            start: 'var(--ion-spacing-sm)',
+            end: '-8px',
+          },
+        },
+      },
+    },
+  },
 };
diff --git a/core/src/themes/mixins.scss b/core/src/themes/mixins.scss
index d21c89d2e9f..85fdfabd4e6 100644
--- a/core/src/themes/mixins.scss
+++ b/core/src/themes/mixins.scss
@@ -1,4 +1,5 @@
 @use "./functions.string" as string;
+@use "sass:meta";
 
 /**
  * A heuristic that applies CSS to tablet
@@ -609,3 +610,42 @@
     }
   }
 }
+
+// Mixin that applies focus styles to interactive elements.
+//
+// Example:
+//
+// ```scss
+// :host(.ion-focused) .toggle-icon {
+//   @include mixins.focused-state();
+// }
+// ```
+// --------------------------------------------------
+@mixin focused-state($width: null, $style: solid, $color: null, $addOffset: true) {
+  @if $width == null or $color == null {
+    outline: none;
+  } @else {
+    outline: $width $style $color;
+
+    @if $addOffset {
+      outline-offset: $width;
+    }
+  }
+}
+
+// Typography mixin to be used with typography scss variables (ionic.vars.scss)
+//
+// ex: @include typography($ion-heading-h3-medium);
+//
+// --------------------------------------------------
+@mixin typography($properties) {
+  font-family: map-get($properties, font-family);
+  font-size: map-get($properties, font-size);
+  font-weight: map-get($properties, font-weight);
+
+  letter-spacing: map-get($properties, letter-spacing);
+  line-height: map-get($properties, line-height);
+
+  text-decoration: map-get($properties, text-decoration);
+  text-transform: map-get($properties, text-transform);
+}
diff --git a/core/src/themes/themes.interfaces.ts b/core/src/themes/themes.interfaces.ts
index 6e5e8157e29..2e04ec9b9ae 100644
--- a/core/src/themes/themes.interfaces.ts
+++ b/core/src/themes/themes.interfaces.ts
@@ -1,3 +1,4 @@
+import type { IonChip as IonChipType } from '../components/chip/chip.interfaces';
 import type { IonicConfig } from '../utils/config';
 
 // Platform-specific theme
@@ -211,11 +212,7 @@ export type BaseTheme = {
   };
 
   // COMPONENT OVERRIDES
-  components?: {
-    [key: string]: {
-      [key: string]: string;
-    };
-  };
+  components?: Components;
 
   // COLOR TOKENS
   color?: {
@@ -261,3 +258,13 @@ export type DefaultTheme = BaseTheme & {
 
   config?: IonicConfig;
 };
+
+type Components = {
+  IonChip?: IonChipType;
+
+  IonCard?: any;
+  IonItem?: any;
+  IonTabBar?: any;
+  IonModal?: any;
+  IonToolbar?: any;
+};
diff --git a/core/src/utils/test/theme.spec.ts b/core/src/utils/test/theme.spec.ts
index 9c68d95510d..f21ade1fadd 100644
--- a/core/src/utils/test/theme.spec.ts
+++ b/core/src/utils/test/theme.spec.ts
@@ -5,7 +5,7 @@ import { CardContent } from '../../components/card-content/card-content';
 import { Chip } from '../../components/chip/chip';
 import {
   generateColorClasses,
-  generateComponentThemeCSS,
+  generateComponentsThemeCSS,
   generateCSSVars,
   generateGlobalThemeCSS,
   getClassList,
@@ -557,27 +557,77 @@ describe('generateGlobalThemeCSS', () => {
   });
 });
 
-describe('generateComponentThemeCSS', () => {
-  it('should generate component theme CSS for a given theme', () => {
-    const IonChip = {
-      hue: {
-        subtle: {
-          bg: 'red',
-          color: 'white',
-          borderColor: 'black',
+describe('generateComponentsThemeCSS', () => {
+  it('should generate component theme CSS for a given theme with a single component', () => {
+    const components = {
+      IonChip: {
+        hue: {
+          subtle: {
+            bg: 'red',
+            color: 'white',
+            borderColor: 'black',
+          },
+          bold: {
+            bg: 'blue',
+            color: 'white',
+            borderColor: 'black',
+          },
+        },
+      },
+    };
+
+    const css = generateComponentsThemeCSS(components).replace(/\s/g, '');
+
+    const expectedCSS = `
+      ion-chip {
+        --ion-chip-hue-subtle-bg: red;
+        --ion-chip-hue-subtle-color: white;
+        --ion-chip-hue-subtle-border-color: black;
+        --ion-chip-hue-bold-bg: blue;
+        --ion-chip-hue-bold-color: white;
+        --ion-chip-hue-bold-border-color: black;
+      }
+    `.replace(/\s/g, '');
+
+    expect(css).toBe(expectedCSS);
+  });
+
+  it('should generate component theme CSS for a given theme with multiple components', () => {
+    const components = {
+      IonChip: {
+        hue: {
+          subtle: {
+            bg: 'red',
+            color: 'white',
+            borderColor: 'black',
+          },
+          bold: {
+            bg: 'blue',
+            color: 'white',
+            borderColor: 'black',
+          },
         },
-        bold: {
-          bg: 'blue',
-          color: 'white',
-          borderColor: 'black',
+      },
+      IonBadge: {
+        hue: {
+          subtle: {
+            bg: 'green',
+            color: 'white',
+            borderColor: 'black',
+          },
+          bold: {
+            bg: 'blue',
+            color: 'white',
+            borderColor: 'black',
+          },
         },
       },
     };
 
-    const css = generateComponentThemeCSS(IonChip, 'chip').replace(/\s/g, '');
+    const css = generateComponentsThemeCSS(components).replace(/\s/g, '');
 
     const expectedCSS = `
-      :host(.chip-themed) {
+      ion-chip {
         --ion-chip-hue-subtle-bg: red;
         --ion-chip-hue-subtle-color: white;
         --ion-chip-hue-subtle-border-color: black;
@@ -585,10 +635,27 @@ describe('generateComponentThemeCSS', () => {
         --ion-chip-hue-bold-color: white;
         --ion-chip-hue-bold-border-color: black;
       }
+
+      ion-badge {
+        --ion-badge-hue-subtle-bg: green;
+        --ion-badge-hue-subtle-color: white;
+        --ion-badge-hue-subtle-border-color: black;
+        --ion-badge-hue-bold-bg: blue;
+        --ion-badge-hue-bold-color: white;
+        --ion-badge-hue-bold-border-color: black;
+      }
     `.replace(/\s/g, '');
 
     expect(css).toBe(expectedCSS);
   });
+
+  it('should not generate CSS variables for an empty components object', () => {
+    const components = {};
+
+    const css = generateComponentsThemeCSS(components);
+
+    expect(css).toBe('');
+  });
 });
 
 describe('generateColorClasses', () => {
diff --git a/core/src/utils/theme.ts b/core/src/utils/theme.ts
index aeab9823ec2..9a55e467cc2 100644
--- a/core/src/utils/theme.ts
+++ b/core/src/utils/theme.ts
@@ -81,10 +81,7 @@ export const generateCSSVars = (theme: any, prefix: string = CSS_PROPS_PREFIX):
         return [];
       }
 
-      // if key is camelCase, convert to kebab-case
-      if (key.match(/([a-z])([A-Z])/g)) {
-        key = key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-      }
+      key = convertToKebabCase(key);
 
       // Do not generate CSS variables for excluded keys
       const excludedKeys = ['name', 'enabled', 'config'];
@@ -264,19 +261,14 @@ export const injectCSS = (css: string, target: Element | ShadowRoot = document.h
  * @returns The generated CSS string
  */
 export const generateGlobalThemeCSS = (theme: any): string => {
-  if (typeof theme !== 'object' || Array.isArray(theme)) {
-    console.warn('generateGlobalThemeCSS: Invalid theme object provided', theme);
-    return '';
-  }
-
-  if (Object.keys(theme).length === 0) {
-    console.warn('generateGlobalThemeCSS: Empty theme object provided');
+  const themeValidity = checkThemeValidity(theme, 'generateGlobalThemeCSS');
+  if (!themeValidity) {
     return '';
   }
 
-  // Exclude components and palette from the default tokens
+  // Exclude palette, components, and config from the default tokens
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { palette, components, ...defaultTokens } = theme;
+  const { palette, components, config, ...defaultTokens } = theme;
 
   // Generate CSS variables for the default design tokens
   const defaultTokensCSS = generateCSSVars(defaultTokens);
@@ -358,17 +350,48 @@ export const applyGlobalTheme = (baseTheme: any, userTheme?: any): any => {
  * Generates component's themed CSS class with CSS variables
  * from its theme object
  * @param componentTheme The component's object to generate CSS for (e.g., IonChip { })
- * @param componentName The component name without any prefixes (e.g., 'chip')
+ * @param components An object mapping component names (e.g. `IonChip`) to a nested
+ * design-token configuration. Each configuration can contain arbitrary levels of
+ * token groups (such as `size`, `state`, `shape`, `variant`, etc.), where leaf values
+ * are CSS-compatible values. The structure is recursively flattened into CSS custom
+ * properties using kebab-case keys and an `--ion-<component>-` prefix.
+ *
+ * Example:
+ * ```json
+ * {
+ *   IonChip: {
+ *     size: { small: { height: "24px" } },
+ *     state: { disabled: { opacity: "0.4" } }
+ *   }
+ * }
+ * ```
+ *
+ * Becomes:
+ * ```css
+ * :root ion-chip {
+ *   --ion-chip-size-small-height: 24px;
+ *   --ion-chip-state-disabled-opacity: 0.4;
+ * }
+ * ```
  * @returns string containing the component's themed CSS variables
  */
-export const generateComponentThemeCSS = (componentTheme: any, componentName: string): string => {
-  const cssProps = generateCSSVars(componentTheme, `${CSS_PROPS_PREFIX}${componentName}-`);
+export const generateComponentsThemeCSS = (components: any): string => {
+  let css = '';
 
-  return `
-    :host(.${componentName}-themed) {
-      ${cssProps}
-    }
-  `;
+  for (const [component, componentTokens] of Object.entries(components)) {
+    const componentTag = convertToKebabCase(component);
+    const vars = generateCSSVars(componentTokens, `--${componentTag}-`);
+
+    const componentBlock = `
+      ${componentTag} {
+        ${vars}
+      }
+    `;
+
+    css += componentBlock;
+  }
+
+  return css;
 };
 
 /**
@@ -376,34 +399,20 @@ export const generateComponentThemeCSS = (componentTheme: any, componentName: st
  * @param element The element to apply the theme to
  * @returns true if theme was applied, false otherwise
  */
-export const applyComponentTheme = (element: HTMLElement): void => {
-  const customTheme = (window as any).Ionic?.config?.get?.('customTheme');
-
-  // Convert 'ION-CHIP' to 'ion-chip' and split into parts
-  const parts = element.tagName.toLowerCase().split('-');
-
-  // Get the component name 'chip' from the second part
-  const componentName = parts[1];
-
-  // Convert to 'IonChip' by capitalizing each part
-  const themeLookupName = parts.map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('');
-
-  // Get the component theme from the global custom theme if it exists
-  const componentTheme = customTheme?.components?.[themeLookupName];
-
-  if (componentTheme) {
-    // Add the theme class to the element (e.g., 'chip-themed')
-    const themeClass = `${componentName}-themed`;
-    element.classList.add(themeClass);
+export const applyComponentsTheme = (theme: any): any => {
+  const themeValidity = checkThemeValidity(theme, 'applyComponentsTheme');
+  if (!themeValidity) {
+    return '';
+  }
 
-    // Generate CSS custom properties inside a theme class selector
-    const css = generateComponentThemeCSS(componentTheme, componentName);
+  const { components } = theme;
 
-    // Inject styles into shadow root if available,
-    // otherwise into the element itself
-    const root = element.shadowRoot ?? element;
-    injectCSS(css, root);
+  if (!components) {
+    return '';
   }
+
+  injectCSS(generateComponentsThemeCSS(components));
+  return components;
 };
 
 /**
@@ -471,3 +480,94 @@ export const mix = (baseColor: string, mixColor: string, weight: string): string
   const toHex = (n: number) => n.toString(16).padStart(2, '0');
   return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 };
+
+/**
+ * Converts a string to kebab-case
+ *
+ * @internal
+ * @param str The string to convert (e.g., 'IonChip')
+ * @returns The kebab-case string (e.g., 'ion-chip')
+ */
+const convertToKebabCase = (str: string): string => {
+  // It's already kebab-case
+  if (str.indexOf('-') !== -1) {
+    return str.toLowerCase();
+  }
+
+  return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+};
+
+/**
+ * Verifies that a theme object is valid
+ *
+ * @internal
+ * @param theme The theme object to validate
+ * @param source The source or context where the theme is being validated
+ * @returns A boolean indicating whether the theme is valid
+ */
+const checkThemeValidity = (theme: any, source: string): boolean => {
+  if (typeof theme !== 'object' || Array.isArray(theme)) {
+    console.warn(`${source}: Invalid theme object provided`, theme);
+    return false;
+  }
+
+  if (Object.keys(theme).length === 0) {
+    console.warn(`${source}: Empty theme object provided`);
+    return false;
+  }
+
+  return true;
+};
+
+/**
+ * Mimics the Sass `rgba` function logic to construct CSS rgba() values.
+ *
+ * @internal
+ * @param colorRgb The RGB color components as a string (e.g., '255, 0, 0').
+ * @param alpha The opacity value (0 to 1).
+ * @returns A string containing the CSS rgba() function call.
+ */
+export function rgba(colorRgb: string, alpha: number | string): string {
+  // This directly constructs the rgba() function call using the provided values.
+  return `rgba(${colorRgb}, ${alpha})`;
+}
+
+/**
+ * Mimics the Ionic Framework `current-color` function logic to construct CSS color values.
+ *
+ * @internal
+ * @param variation The color variation (e.g., 'primary', 'secondary', 'base').
+ * @param alpha The opacity value (0 to 1). If null, returns the full color variable.
+ * @param subtle If true, uses the '--ion-color-subtle-' prefix.
+ * @returns A string containing the CSS value (e.g., 'var(--ion-color-primary)' or 'rgba(var(--ion-color-primary-rgb), 0.16)').
+ */
+export function currentColor(variation: string, alpha: number | string | null = null, subtle: boolean = false): string {
+  // 1. Determine the base CSS variable name
+  const variable = subtle ? `--ion-color-subtle-${variation}` : `--ion-color-${variation}`;
+
+  // 2. Handle the case where no alpha is provided
+  if (alpha === null) {
+    // Corresponds to: @return var(#{$variable});
+    return `var(${variable})`;
+  } else {
+    // 3. Handle the case where alpha is provided
+    // Corresponds to: @return rgba(var(#{$variable}-rgb), #{$alpha});
+
+    // NOTE: The resulting string uses the CSS variable for the RGB components
+    // (e.g., '255, 0, 0') and the provided alpha.
+    return `rgba(var(${variable}-rgb), ${alpha})`;
+  }
+}
+
+/**
+ * Mimics the CSS `clamp` function logic.
+ *
+ * @internal
+ * @param min The minimum value
+ * @param val The preferred value
+ * @param max The maximum value
+ * @returns
+ */
+export function clamp(min: number | string, val: number | string, max: number | string): string {
+  return `clamp(${min}, ${val}, ${max})`;
+}
diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
index 91f6426be13..993d6b8d408 100644
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -550,14 +550,14 @@ setting the `checked` property.
 
 
 @ProxyCmp({
-  inputs: ['color', 'disabled', 'hue', 'mode', 'outline', 'shape', 'size', 'theme']
+  inputs: ['color', 'disabled', 'hue', 'mode', 'outline', 'shape', 'size']
 })
 @Component({
   selector: 'ion-chip',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'disabled', 'hue', 'mode', 'outline', 'shape', 'size', 'theme'],
+  inputs: ['color', 'disabled', 'hue', 'mode', 'outline', 'shape', 'size'],
 })
 export class IonChip {
   protected el: HTMLIonChipElement;
diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts
index 5daa62dcd37..349dffdd2ca 100644
--- a/packages/angular/standalone/src/directives/proxies.ts
+++ b/packages/angular/standalone/src/directives/proxies.ts
@@ -618,14 +618,14 @@ export declare interface IonCardTitle extends Components.IonCardTitle {}
 
 @ProxyCmp({
   defineCustomElementFn: defineIonChip,
-  inputs: ['color', 'disabled', 'hue', 'mode', 'outline', 'shape', 'size', 'theme']
+  inputs: ['color', 'disabled', 'hue', 'mode', 'outline', 'shape', 'size']
 })
 @Component({
   selector: 'ion-chip',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'disabled', 'hue', 'mode', 'outline', 'shape', 'size', 'theme'],
+  inputs: ['color', 'disabled', 'hue', 'mode', 'outline', 'shape', 'size'],
   standalone: true
 })
 export class IonChip {