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..7f84c44ea51
--- /dev/null
+++ b/core/src/components/chip/chip.base.scss
@@ -0,0 +1,304 @@
+@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));
+  @include mixins.typography(
+    (
+      font-family: var(--ion-chip-typography-font-family),
+      font-size: var(--ion-chip-typography-font-size),
+      font-weight: var(--ion-chip-typography-font-weight),
+      letter-spacing: var(--ion-chip-typography-letter-spacing),
+      line-height: var(--ion-chip-typography-line-height),
+      text-decoration: var(--ion-chip-typography-text-decoration),
+      text-transform: var(--ion-chip-typography-text-transform),
+    )
+  );
+
+  display: inline-flex;
+  position: relative;
+
+  align-items: center;
+  justify-content: center;
+
+  background: var(--background);
+  color: var(--color);
+
+  line-height: var(--ion-chip-line-height);
+  gap: var(--ion-chip-gap);
+
+  cursor: var(--ion-chip-cursor);
+
+  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.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/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-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 0e3025a0f79..c9ffc31287b 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png
index ccd7040918b..7532436d0e4 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png
index b15fa46f784..6c18f1a4c4a 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-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..a186ec837c1 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..069f36c992f 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..f8532e9caaa 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-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 5549cef1aea..52f0c848b68 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png
index c1916ef28bb..28e5587cbb1 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png
index 0aae6a29150..1031a2f3186 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/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..0660d3e79b2 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..ee0e4309e67 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..877e92cc8dd 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..a806185ae3b 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..40f53f06694 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..f4a469503b5 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..772c6042fdd 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..52ac7cf1474 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..c09bb0a010b 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..a2205574923 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..d8c288f18c9 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..d128d0c2ea7 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..0ffd7bfdac3 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..1f8996aed79 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..6af24a267c9 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..cde3ba1e521 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..26e9edbe944 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..bc9db3a97be 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/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..f9e65e348bb 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..b1b31f545e8 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..b55247971a3 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..47727c3706b 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..92ec6312279 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..9fa218c837f 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..26f195f3122
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..0762a76ba7e
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..e34557cb8ba
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..b8f3e681632
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..84a355bee28
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..f3b083e5cea
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..c814d9f6da0 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..7d8b144a614 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..1311c235d2b 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/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..f2165689223 100644
--- a/core/src/themes/ionic/default.tokens.ts
+++ b/core/src/themes/ionic/default.tokens.ts
@@ -1,9 +1,22 @@
+import * as colorTokens from 'outsystems-design-tokens/tokens/color scheme.json';
+import * as primitiveTokens from 'outsystems-design-tokens/tokens/primitives.json';
+import * as lightTokens from 'outsystems-design-tokens/tokens/theme/light.json';
+import * as typographyTokens from 'outsystems-design-tokens/tokens/typography.json';
+
+import { currentColor, cachedResolveOsToken } 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 tokenMap = {
+  colorTokens,
+  primitiveTokens,
+  lightTokens,
+  typographyTokens,
+};
+
 export const defaultTheme: DefaultTheme = {
   ...baseDefaultTheme,
 
@@ -76,4 +89,119 @@ export const defaultTheme: DefaultTheme = {
     xxxl: 'var(--ion-radii-1000)',
     xxxxl: 'var(--ion-radii-full)',
   },
+
+  components: {
+    IonChip: {
+      margin: '0px',
+      cursor: 'auto',
+
+      padding: {
+        vertical: primitiveTokens.scale['150'].$value,
+        horizontal: primitiveTokens.scale['200'].$value,
+      },
+
+      typography: cachedResolveOsToken(typographyTokens.body.sm.medium.$value, tokenMap),
+      lineHeight: primitiveTokens.font['line-height']['full'].$value,
+      gap: cachedResolveOsToken(primitiveTokens.space['100'].$value, tokenMap),
+
+      // Sizes
+      size: {
+        small: {
+          minHeight: primitiveTokens.scale['600'].$value,
+          font: {
+            size: primitiveTokens.font['font-size']['300'].$value,
+          },
+        },
+        large: {
+          minHeight: primitiveTokens.scale['800'].$value,
+          font: {
+            size: primitiveTokens.font['font-size']['350'].$value,
+          },
+        },
+      },
+
+      // States
+      state: {
+        disabled: {
+          opacity: '0.4',
+        },
+        focus: {
+          ring: {
+            color: lightTokens.primitives.blue['400'].$value,
+            width: primitiveTokens.scale['050'].$value,
+          },
+        },
+      },
+
+      // Shapes
+      shape: {
+        soft: {
+          border: {
+            radius: primitiveTokens.scale['100'].$value,
+          },
+        },
+        round: {
+          border: {
+            radius: primitiveTokens.scale['400'].$value,
+          },
+        },
+        rectangular: {
+          border: {
+            radius: primitiveTokens.scale['0'].$value,
+          },
+        },
+      },
+
+      // Hues
+      hue: {
+        bold: {
+          bg: cachedResolveOsToken(colorTokens.bg.neutral.bold.default, tokenMap),
+          color: cachedResolveOsToken(colorTokens.bg.surface.default, tokenMap),
+
+          // Any of the semantic colors like primary, secondary, etc.
+          semantic: {
+            color: currentColor('contrast'),
+            bg: currentColor('base'),
+          },
+        },
+
+        subtle: {
+          bg: cachedResolveOsToken(lightTokens.primitives.neutral['100'], tokenMap),
+          color: lightTokens.primitives.neutral['800'].$value,
+
+          semantic: {
+            color: currentColor('contrast', null, true), // ADD THIS TO THE COMPONENT SCSS
+            bg: currentColor('base', null, true), // ADD THIS TO THE COMPONENT SCSS
+          },
+        },
+      },
+
+      // Variants
+      variant: {
+        outline: {
+          border: {
+            color: {
+              bold: cachedResolveOsToken(colorTokens.text.default, tokenMap),
+              subtle: cachedResolveOsToken(lightTokens.primitives.neutral['300'], tokenMap),
+            },
+
+            width: primitiveTokens.scale['025'].$value,
+          },
+
+          semantic: {
+            border: {
+              color: {
+                bold: currentColor('shade'),
+                subtle: currentColor('shade', null, true),
+              },
+            },
+          },
+        },
+      },
+
+      icon: {
+        size: primitiveTokens.font['font-size']['400'].$value,
+      },
+    },
+  },
 };
diff --git a/core/src/themes/ionic/light.tokens.ts b/core/src/themes/ionic/light.tokens.ts
index 94c96baeb90..5b80fa6fb55 100644
--- a/core/src/themes/ionic/light.tokens.ts
+++ b/core/src/themes/ionic/light.tokens.ts
@@ -1,9 +1,169 @@
+import * as colorTokens from 'outsystems-design-tokens/tokens/color scheme.json';
+import * as primitiveTokens from 'outsystems-design-tokens/tokens/primitives.json';
+import * as lightTokens from 'outsystems-design-tokens/tokens/theme/light.json';
+import * as typographyTokens from 'outsystems-design-tokens/tokens/typography.json';
+
+import { cachedResolveOsToken } from '../../utils/theme';
 import type { LightTheme } from '../themes.interfaces';
 
+const tokenMap = {
+  colorTokens,
+  lightTokens,
+  primitiveTokens,
+  typographyTokens,
+};
+
 export const lightTheme: LightTheme = {
   backgroundColor: '#ffffff',
   textColor: '#000000',
 
+  color: {
+    primary: {
+      bold: {
+        base: cachedResolveOsToken(colorTokens.bg.primary.base.default, tokenMap),
+        contrast: cachedResolveOsToken(colorTokens.text.inverse, tokenMap),
+        foreground: cachedResolveOsToken(colorTokens.text.primary, tokenMap),
+        shade: cachedResolveOsToken(colorTokens.bg.primary.base.press, tokenMap),
+        tint: cachedResolveOsToken(colorTokens.semantics.primary['600'], tokenMap),
+      },
+      subtle: {
+        base: cachedResolveOsToken(colorTokens.bg.primary.subtle.default, tokenMap),
+        contrast: cachedResolveOsToken(colorTokens.text.primary, tokenMap),
+        foreground: cachedResolveOsToken(colorTokens.text.primary, tokenMap),
+        shade: cachedResolveOsToken(colorTokens.bg.primary.subtle.press, tokenMap),
+        tint: cachedResolveOsToken(colorTokens.semantics.primary['200'], tokenMap),
+      },
+    },
+    secondary: {
+      bold: {
+        base: cachedResolveOsToken(colorTokens.bg.info.base.default, tokenMap),
+        contrast: cachedResolveOsToken(colorTokens.text.inverse, tokenMap),
+        foreground: cachedResolveOsToken(colorTokens.text.primary, tokenMap),
+        shade: cachedResolveOsToken(colorTokens.bg.info.base.press, tokenMap),
+        tint: cachedResolveOsToken(colorTokens.semantics.info['700'], tokenMap),
+      },
+      subtle: {
+        base: cachedResolveOsToken(colorTokens.bg.info.subtle.default, tokenMap),
+        contrast: cachedResolveOsToken(colorTokens.text.info, tokenMap),
+        foreground: cachedResolveOsToken(colorTokens.text.info, tokenMap),
+        shade: cachedResolveOsToken(colorTokens.bg.info.subtle.press, tokenMap),
+        tint: cachedResolveOsToken(colorTokens.semantics.info['200'], tokenMap),
+      },
+    },
+    tertiary: {
+      bold: {
+        base: cachedResolveOsToken(lightTokens.primitives.violet['700'], tokenMap),
+        contrast: cachedResolveOsToken(colorTokens.text.inverse, tokenMap),
+        foreground: cachedResolveOsToken(lightTokens.primitives.violet['700'], tokenMap),
+        shade: cachedResolveOsToken(lightTokens.primitives.violet['800'], tokenMap),
+        tint: cachedResolveOsToken(colorTokens.semantics.primary['600'], tokenMap),
+      },
+      subtle: {
+        base: cachedResolveOsToken(lightTokens.primitives.violet['100'], tokenMap),
+        contrast: cachedResolveOsToken(lightTokens.primitives.violet['700'], tokenMap),
+        foreground: cachedResolveOsToken(lightTokens.primitives.violet['700'], tokenMap),
+        shade: cachedResolveOsToken(lightTokens.primitives.violet['300'], tokenMap),
+        tint: cachedResolveOsToken(lightTokens.primitives.violet['200'], tokenMap),
+      },
+    },
+    success: {
+      bold: {
+        base: cachedResolveOsToken(colorTokens.bg.success.base.default, tokenMap),
+        contrast: cachedResolveOsToken(colorTokens.text.inverse, tokenMap),
+        foreground: cachedResolveOsToken(colorTokens.text.success, tokenMap),
+        shade: cachedResolveOsToken(colorTokens.bg.success.base.press, tokenMap),
+        tint: cachedResolveOsToken(colorTokens.semantics.success['800'], tokenMap),
+      },
+      subtle: {
+        base: cachedResolveOsToken(colorTokens.bg.success.subtle.default, tokenMap),
+        contrast: cachedResolveOsToken(colorTokens.text.success, tokenMap),
+        foreground: cachedResolveOsToken(colorTokens.text.success, tokenMap),
+        shade: cachedResolveOsToken(colorTokens.bg.success.subtle.press, tokenMap),
+        tint: cachedResolveOsToken(colorTokens.semantics.success['200'], tokenMap),
+      },
+    },
+    warning: {
+      bold: {
+        base: cachedResolveOsToken(colorTokens.bg.warning.base.default, tokenMap),
+        contrast: cachedResolveOsToken(colorTokens.text.default, tokenMap),
+        foreground: cachedResolveOsToken(colorTokens.text.warning, tokenMap),
+        shade: cachedResolveOsToken(colorTokens.bg.warning.base.press, tokenMap),
+        tint: cachedResolveOsToken(lightTokens.primitives.yellow['300'], tokenMap),
+      },
+      subtle: {
+        base: cachedResolveOsToken(colorTokens.bg.warning.subtle.default, tokenMap),
+        contrast: cachedResolveOsToken(colorTokens.text.warning, tokenMap),
+        foreground: cachedResolveOsToken(colorTokens.text.warning, tokenMap),
+        shade: cachedResolveOsToken(colorTokens.bg.warning.subtle.press, tokenMap),
+        tint: cachedResolveOsToken(lightTokens.primitives.yellow['100'], tokenMap),
+      },
+    },
+    danger: {
+      bold: {
+        base: cachedResolveOsToken(colorTokens.bg.danger.base.default, tokenMap),
+        contrast: cachedResolveOsToken(colorTokens.text.inverse, tokenMap),
+        foreground: cachedResolveOsToken(colorTokens.text.danger, tokenMap),
+        shade: cachedResolveOsToken(colorTokens.bg.danger.base.press, tokenMap),
+        tint: cachedResolveOsToken(colorTokens.semantics.danger['700'], tokenMap),
+      },
+      subtle: {
+        base: cachedResolveOsToken(colorTokens.bg.danger.subtle.default, tokenMap),
+        contrast: cachedResolveOsToken(colorTokens.text.danger, tokenMap),
+        foreground: cachedResolveOsToken(colorTokens.text.danger, tokenMap),
+        shade: cachedResolveOsToken(colorTokens.bg.danger.subtle.press, tokenMap),
+        tint: cachedResolveOsToken(colorTokens.semantics.danger['200'], tokenMap),
+      },
+    },
+    light: {
+      bold: {
+        base: cachedResolveOsToken(lightTokens.primitives.base.white, tokenMap),
+        contrast: cachedResolveOsToken(colorTokens.text.default, tokenMap),
+        foreground: cachedResolveOsToken(colorTokens.text.default, tokenMap),
+        shade: cachedResolveOsToken(lightTokens.primitives.neutral['600'], tokenMap),
+        tint: cachedResolveOsToken(lightTokens.primitives.neutral['400'], tokenMap),
+      },
+      subtle: {
+        base: cachedResolveOsToken(colorTokens.bg.neutral.subtlest.default, tokenMap),
+        contrast: cachedResolveOsToken(colorTokens.text.default, tokenMap),
+        foreground: cachedResolveOsToken(colorTokens.text.default, tokenMap),
+        shade: cachedResolveOsToken(colorTokens.bg.neutral.subtlest.press, tokenMap),
+        tint: cachedResolveOsToken(lightTokens.primitives.neutral['100'], tokenMap),
+      },
+    },
+    medium: {
+      bold: {
+        base: cachedResolveOsToken(colorTokens.bg.neutral.bold.default, tokenMap),
+        contrast: cachedResolveOsToken(colorTokens.text.inverse, tokenMap),
+        foreground: cachedResolveOsToken(colorTokens.text.default, tokenMap),
+        shade: cachedResolveOsToken(colorTokens.bg.neutral.bold.press, tokenMap),
+        tint: cachedResolveOsToken(lightTokens.primitives.neutral['900'], tokenMap),
+      },
+      subtle: {
+        base: cachedResolveOsToken(colorTokens.bg.neutral.subtle.default, tokenMap),
+        contrast: cachedResolveOsToken(colorTokens.text.subtlest, tokenMap),
+        foreground: cachedResolveOsToken(colorTokens.text.default, tokenMap),
+        shade: cachedResolveOsToken(colorTokens.bg.neutral.subtle.press, tokenMap),
+        tint: cachedResolveOsToken(lightTokens.primitives.neutral['100'], tokenMap),
+      },
+    },
+    dark: {
+      bold: {
+        base: cachedResolveOsToken(colorTokens.bg.neutral.boldest.default, tokenMap),
+        contrast: cachedResolveOsToken(colorTokens.text.inverse, tokenMap),
+        foreground: cachedResolveOsToken(colorTokens.text.default, tokenMap),
+        shade: cachedResolveOsToken(colorTokens.bg.neutral.boldest.press, tokenMap),
+        tint: cachedResolveOsToken(lightTokens.primitives.neutral['1100'], tokenMap),
+      },
+      subtle: {
+        base: cachedResolveOsToken(colorTokens.bg.neutral.subtle.default, tokenMap),
+        contrast: cachedResolveOsToken(colorTokens.text.subtle, tokenMap),
+        foreground: cachedResolveOsToken(colorTokens.text.default, tokenMap),
+        shade: cachedResolveOsToken(colorTokens.bg.neutral.subtle.press, tokenMap),
+        tint: cachedResolveOsToken(lightTokens.primitives.neutral['100'], tokenMap),
+      },
+    },
+  },
+
   components: {
     IonCard: {
       background: '#ffffff',
diff --git a/core/src/themes/ios/default.tokens.ts b/core/src/themes/ios/default.tokens.ts
index 266191a1cb8..95a5b5a9ad3 100644
--- a/core/src/themes/ios/default.tokens.ts
+++ b/core/src/themes/ios/default.tokens.ts
@@ -1,9 +1,21 @@
+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 colors = {
+  backgroundColor: 'var(--ion-background-color, #fff)',
+  backgroundColorRgb: 'var(--ion-background-color-rgb, 255, 255, 255)',
+  textColor: 'var(--ion-text-color, #000)',
+  textColorRgb: 'var(--ion-text-color-rgb, 0, 0, 0)',
+};
+
+const fontSizes = {
+  chipBase: 14,
+};
+
 export const defaultTheme: DefaultTheme = {
   ...baseDefaultTheme,
 
@@ -71,4 +83,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(colors.textColorRgb, 0.12),
+          color: rgba(colors.textColorRgb, 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(colors.textColorRgb, 0.16),
+            },
+
+            activated: {
+              bg: rgba(colors.textColorRgb, 0.2),
+            },
+
+            hover: {
+              bg: rgba(colors.textColorRgb, 0.16),
+            },
+          },
+        },
+
+        subtle: {
+          bg: rgba(colors.textColorRgb, 0.05),
+          color: rgba(colors.textColorRgb, 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(colors.textColorRgb, 0.1),
+            },
+
+            activated: {
+              bg: rgba(colors.textColorRgb, 0.14),
+            },
+
+            hover: {
+              bg: rgba(colors.textColorRgb, 0.1),
+            },
+          },
+        },
+      },
+
+      // Variants
+      variant: {
+        outline: {
+          bg: 'transparent',
+
+          border: {
+            color: {
+              bold: rgba(colors.textColorRgb, 0.32),
+              subtle: rgba(colors.textColorRgb, 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(colors.textColorRgb, 0.04),
+                subtle: rgba(colors.textColorRgb, 0.04),
+              },
+            },
+
+            hover: {
+              bg: {
+                bold: rgba(colors.textColorRgb, 0.04),
+                subtle: rgba(colors.textColorRgb, 0.04),
+              },
+            },
+
+            activated: {
+              bg: {
+                bold: rgba(colors.textColorRgb, 0.08),
+                subtle: rgba(colors.textColorRgb, 0.04),
+              },
+            },
+          },
+        },
+      },
+
+      icon: {
+        size: `${(20 / fontSizes.chipBase).toFixed(2)}em`,
+        color: rgba(colors.textColorRgb, 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..08910b62c4b 100644
--- a/core/src/themes/md/default.tokens.ts
+++ b/core/src/themes/md/default.tokens.ts
@@ -1,9 +1,21 @@
+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 colors = {
+  backgroundColor: 'var(--ion-background-color, #fff)',
+  backgroundColorRgb: 'var(--ion-background-color-rgb, 255, 255, 255)',
+  textColor: 'var(--ion-text-color, #000)',
+  textColorRgb: 'var(--ion-text-color-rgb, 0, 0, 0)',
+};
+
+const fontSizes = {
+  chipBase: 14,
+};
+
 export const defaultTheme: DefaultTheme = {
   ...baseDefaultTheme,
 
@@ -76,4 +88,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(colors.textColorRgb, 0.12),
+          color: rgba(colors.textColorRgb, 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(colors.textColorRgb, 0.16), // default non-semantic focus bg for both hues
+            },
+
+            activated: {
+              bg: rgba(colors.textColorRgb, 0.2),
+            },
+
+            hover: {
+              bg: rgba(colors.textColorRgb, 0.16),
+            },
+          },
+        },
+
+        subtle: {
+          bg: rgba(colors.textColorRgb, 0.05),
+          color: rgba(colors.textColorRgb, 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(colors.textColorRgb, 0.1),
+            },
+
+            activated: {
+              bg: rgba(colors.textColorRgb, 0.14),
+            },
+
+            hover: {
+              bg: rgba(colors.textColorRgb, 0.1),
+            },
+          },
+        },
+      },
+
+      // Variants
+      variant: {
+        outline: {
+          bg: 'transparent',
+
+          border: {
+            color: {
+              bold: rgba(colors.textColorRgb, 0.32),
+              subtle: rgba(colors.textColorRgb, 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(colors.textColorRgb, 0.04),
+                subtle: rgba(colors.textColorRgb, 0.04),
+              },
+            },
+
+            hover: {
+              bg: {
+                bold: rgba(colors.textColorRgb, 0.04),
+                subtle: rgba(colors.textColorRgb, 0.04),
+              },
+            },
+
+            activated: {
+              bg: {
+                bold: rgba(colors.textColorRgb, 0.08),
+                subtle: rgba(colors.textColorRgb, 0.04),
+              },
+            },
+          },
+        },
+      },
+
+      icon: {
+        size: `${(20 / fontSizes.chipBase).toFixed(2)}em`,
+        color: rgba(colors.textColorRgb, 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..6f76e06e0a2 100644
--- a/core/src/themes/themes.interfaces.ts
+++ b/core/src/themes/themes.interfaces.ts
@@ -211,11 +211,7 @@ export type BaseTheme = {
   };
 
   // COMPONENT OVERRIDES
-  components?: {
-    [key: string]: {
-      [key: string]: string;
-    };
-  };
+  components?: Components;
 
   // COLOR TOKENS
   color?: {
@@ -261,3 +257,261 @@ export type DefaultTheme = BaseTheme & {
 
   config?: IonicConfig;
 };
+
+type Components = {
+  IonChip?: {
+    margin: string | number;
+    cursor?: string;
+
+    padding?: {
+      vertical: string | number;
+      horizontal: string | number;
+    };
+
+    gap?: string | number;
+    lineHeight?: string | number;
+
+    typography?: {
+      [key: string]: string | number;
+    };
+
+    // Sizes
+    size: {
+      small: {
+        minHeight: string | number;
+
+        font: {
+          size: string | number;
+        };
+      };
+
+      large: {
+        minHeight: string | number;
+
+        font: {
+          size: string | number;
+        };
+      };
+    };
+
+    // States
+    state?: {
+      disabled?: {
+        opacity: string | number;
+      };
+
+      focus?: {
+        ring?: {
+          color: string;
+          width?: string | number;
+        };
+      };
+    };
+
+    // Shapes
+    shape: {
+      soft: {
+        border: {
+          radius: string | number;
+        };
+      };
+
+      round: {
+        border: {
+          radius: string | number;
+        };
+      };
+
+      rectangular: {
+        border: {
+          radius: string | number;
+        };
+      };
+    };
+
+    // Hues
+    hue: {
+      bold: {
+        bg: string;
+        color: string;
+
+        // Any of the semantic colors like primary, secondary, etc.
+        semantic: {
+          bg?: string;
+          color: string;
+
+          state?: {
+            focus?: {
+              bg?: string;
+            };
+
+            hover?: {
+              bg?: string;
+            };
+
+            activated?: {
+              bg?: string;
+            };
+          };
+        };
+
+        state?: {
+          focus?: {
+            bg?: string;
+          };
+
+          activated?: {
+            bg: string;
+          };
+
+          hover?: {
+            bg: string;
+          };
+        };
+      };
+
+      subtle: {
+        bg: string;
+        color: string;
+
+        semantic?: {
+          color?: string;
+          bg?: string;
+
+          state?: {
+            focus?: {
+              bg?: string;
+            };
+
+            hover?: {
+              bg?: string;
+            };
+
+            activated?: {
+              bg?: string;
+            };
+          };
+        };
+
+        state?: {
+          focus?: {
+            bg?: string;
+          };
+
+          activated?: {
+            bg: string;
+          };
+
+          hover?: {
+            bg: string;
+          };
+        };
+      };
+    };
+
+    // Variants
+
+    variant: {
+      outline: {
+        bg?: string;
+
+        border: {
+          color?: {
+            bold?: string;
+            subtle?: string;
+          };
+
+          width?: string | number;
+        };
+
+        semantic?: {
+          bg?: {
+            bold?: string;
+            subtle?: string;
+          };
+
+          border?: {
+            color?: {
+              bold?: string;
+              subtle?: string;
+            };
+          };
+        };
+
+        state?: {
+          focus?: {
+            bg?: {
+              bold?: string;
+              subtle?: string;
+            };
+          };
+
+          hover?: {
+            bg?: {
+              bold?: string;
+              subtle?: string;
+            };
+          };
+
+          activated?: {
+            bg?: {
+              bold?: string;
+              subtle?: string;
+            };
+          };
+        };
+      };
+    };
+
+    icon: {
+      size: string | number;
+      color?: string;
+
+      // Styles for the ion-icon only if it is the first element in the slot
+      firstChild?: {
+        margin?: {
+          vertical?: string | number;
+          start?: string | number;
+          end?: string | number;
+        };
+      };
+
+      // Styles for the ion-icon only if it is the last element in the slot
+      lastChild?: {
+        margin?: {
+          vertical?: string | number;
+          start?: string | number;
+          end?: string | number;
+        };
+      };
+    };
+
+    avatar?: {
+      size: string | number | null;
+
+      // Styles for the ion-avatar only if it is the first element in the slot
+      firstChild?: {
+        margin?: {
+          vertical?: string | number;
+          start?: string | number;
+          end?: string | number;
+        };
+      };
+
+      // Styles for the ion-avatar only if it is the last element in the slot
+      lastChild?: {
+        margin?: {
+          vertical?: string | number;
+          start?: string | number;
+          end?: string | number;
+        };
+      };
+    };
+  };
+
+  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..96b835b4003 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,50 @@ 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');
+export const applyComponentsTheme = (theme: any): any => {
+  const themeValidity = checkThemeValidity(theme, 'applyComponentsTheme');
+  if (!themeValidity) {
+    return '';
+  }
+
+  // grab all the default components from theme
+  const { components } = theme;
 
-  // Convert 'ION-CHIP' to 'ion-chip' and split into parts
-  const parts = element.tagName.toLowerCase().split('-');
+  // check if there is no components then return
+  if (!components) {
+    return '';
+  }
 
-  // Get the component name 'chip' from the second part
-  const componentName = parts[1];
+  injectCSS(generateComponentsThemeCSS(components));
+  return components;
 
-  // Convert to 'IonChip' by capitalizing each part
-  const themeLookupName = parts.map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('');
+  // const customTheme = (window as any).Ionic?.config?.get?.('customTheme');
 
-  // Get the component theme from the global custom theme if it exists
-  const componentTheme = customTheme?.components?.[themeLookupName];
+  // // Convert 'ION-CHIP' to 'ion-chip' and split into parts
+  // const parts = element.tagName.toLowerCase().split('-');
 
-  if (componentTheme) {
-    // Add the theme class to the element (e.g., 'chip-themed')
-    const themeClass = `${componentName}-themed`;
-    element.classList.add(themeClass);
+  // // Get the component name 'chip' from the second part
+  // const componentName = parts[1];
 
-    // Generate CSS custom properties inside a theme class selector
-    const css = generateComponentThemeCSS(componentTheme, componentName);
+  // // Convert to 'IonChip' by capitalizing each part
+  // const themeLookupName = parts.map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('');
 
-    // Inject styles into shadow root if available,
-    // otherwise into the element itself
-    const root = element.shadowRoot ?? element;
-    injectCSS(css, root);
-  }
+  // // 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);
+
+  //   // Generate CSS custom properties inside a theme class selector
+  //   const css = generateComponentsThemeCSS(componentTheme, componentName);
+
+  //   // Inject styles into shadow root if available,
+  //   // otherwise into the element itself
+  //   const root = element.shadowRoot ?? element;
+  //   injectCSS(css, root);
+  // }
 };
 
 /**
@@ -471,3 +510,177 @@ 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})`;
+}
+
+// Create a cache to store results
+const cache = new Map<any, any>();
+
+export const cachedResolveOsToken = (tokenPath: any, tokenMap: Record<string, any>): any => {
+  // Use the path/object as the key
+  // (Note: For objects, this caches by reference)
+  if (cache.has(tokenPath)) {
+    return cache.get(tokenPath);
+  }
+
+  // Use your existing resolveOsToken function with the global tokenMap
+  const result = resolveOsToken(tokenPath, tokenMap);
+
+  cache.set(tokenPath, result);
+  return result;
+};
+
+export const resolveOsToken = (tokenPath: any, tokenMap: Record<string, any>): any => {
+  // 1. Handle Objects (like Typography maps)
+  if (typeof tokenPath === 'object' && tokenPath !== null) {
+    // If it's a leaf-node token object, unwrap the $value immediately
+    if ('$value' in tokenPath) {
+      return resolveOsToken(tokenPath.$value, tokenMap);
+    }
+
+    // Otherwise, it's a map of multiple tokens, resolve each key
+    const resolvedObject: Record<string, any> = {};
+    for (const [key, val] of Object.entries(tokenPath)) {
+      resolvedObject[key] = resolveOsToken(val, tokenMap);
+    }
+    return resolvedObject;
+  }
+
+  // 2. Handle Reference Strings: "{category.path.item}"
+  let lookupPath = tokenPath;
+  let isPath = false;
+
+  if (typeof tokenPath === 'string' && tokenPath.startsWith('{') && tokenPath.endsWith('}')) {
+    const reference = tokenPath.slice(1, -1).trim();
+    const [refCategory, ...refPath] = reference.split('.');
+
+    let rootKey: string | null = null;
+    switch (refCategory) {
+      case 'semantics':
+        rootKey = 'colorTokens';
+        break;
+      case 'font':
+        rootKey = 'primitiveTokens';
+        break;
+      case 'primitives':
+        rootKey = 'lightTokens';
+        break;
+      case 'typography':
+        rootKey = 'typographyTokens';
+        break;
+      case 'scale':
+        rootKey = 'primitiveTokens';
+        break; // Added 'scale' based on your example
+    }
+
+    if (!rootKey) return tokenPath;
+
+    lookupPath = `${rootKey}.${refCategory}.${refPath.join('.')}`;
+    isPath = true;
+  }
+
+  // 3. ONLY run the reduce if we have confirmed this is a path to be searched
+  if (isPath) {
+    const value = lookupPath.split('.').reduce((acc: any, key: string) => {
+      if (acc && typeof acc === 'object' && key in acc) {
+        return acc[key];
+      }
+      return undefined;
+    }, tokenMap);
+
+    // Recursively resolve the result of the lookup
+    return resolveOsToken(value, tokenMap);
+  }
+
+  // 4. If it's not a path or a reference, it's a Literal Value (Hex, Font-stack, etc.)
+  return tokenPath;
+};
diff --git a/core/tsconfig.json b/core/tsconfig.json
index 6e2271dfde6..5cefdae6512 100644
--- a/core/tsconfig.json
+++ b/core/tsconfig.json
@@ -34,7 +34,8 @@
       "@utils/*": ["src/utils/*"],
       "@utils/test": ["src/utils/test/utils"],
       "@global/*": ["src/global/*"]
-    }
+    },
+    "resolveJsonModule": true,
   },
   "include": [
     "src",
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 {