Merge branch 'next' into test-jess-new

core/api.txt

@@ -185,7 +185,7 @@ ion-app,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-avatar,shadow
 ion-avatar,prop,mode,"ios" | "md",undefined,false,false
 ion-avatar,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
-ion-avatar,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | undefined,undefined,false,false
+ion-avatar,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall" | undefined,undefined,false,false
 ion-avatar,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-avatar,css-prop,--border-radius,ionic
 ion-avatar,css-prop,--border-radius,ios
@@ -989,19 +989,25 @@ ion-item,css-prop,--background,md
 ion-item,css-prop,--background-activated,ionic
 ion-item,css-prop,--background-activated,ios
 ion-item,css-prop,--background-activated,md
+ion-item,css-prop,--background-activated-opacity,ionic
 ion-item,css-prop,--background-activated-opacity,ios
 ion-item,css-prop,--background-activated-opacity,md
+ion-item,css-prop,--background-focused,ionic
 ion-item,css-prop,--background-focused,ios
 ion-item,css-prop,--background-focused,md
+ion-item,css-prop,--background-focused-opacity,ionic
 ion-item,css-prop,--background-focused-opacity,ios
 ion-item,css-prop,--background-focused-opacity,md
+ion-item,css-prop,--background-hover,ionic
 ion-item,css-prop,--background-hover,ios
 ion-item,css-prop,--background-hover,md
+ion-item,css-prop,--background-hover-opacity,ionic
 ion-item,css-prop,--background-hover-opacity,ios
 ion-item,css-prop,--background-hover-opacity,md
 ion-item,css-prop,--border-color,ionic
 ion-item,css-prop,--border-color,ios
 ion-item,css-prop,--border-color,md
+ion-item,css-prop,--border-radius,ionic
 ion-item,css-prop,--border-radius,ios
 ion-item,css-prop,--border-radius,md
 ion-item,css-prop,--border-style,ionic
@@ -1010,30 +1016,43 @@ ion-item,css-prop,--border-style,md
 ion-item,css-prop,--border-width,ionic
 ion-item,css-prop,--border-width,ios
 ion-item,css-prop,--border-width,md
+ion-item,css-prop,--color,ionic
 ion-item,css-prop,--color,ios
 ion-item,css-prop,--color,md
+ion-item,css-prop,--color-activated,ionic
 ion-item,css-prop,--color-activated,ios
 ion-item,css-prop,--color-activated,md
+ion-item,css-prop,--color-focused,ionic
 ion-item,css-prop,--color-focused,ios
 ion-item,css-prop,--color-focused,md
+ion-item,css-prop,--color-hover,ionic
 ion-item,css-prop,--color-hover,ios
 ion-item,css-prop,--color-hover,md
+ion-item,css-prop,--detail-icon-color,ionic
 ion-item,css-prop,--detail-icon-color,ios
 ion-item,css-prop,--detail-icon-color,md
+ion-item,css-prop,--detail-icon-font-size,ionic
 ion-item,css-prop,--detail-icon-font-size,ios
 ion-item,css-prop,--detail-icon-font-size,md
+ion-item,css-prop,--detail-icon-opacity,ionic
 ion-item,css-prop,--detail-icon-opacity,ios
 ion-item,css-prop,--detail-icon-opacity,md
+ion-item,css-prop,--inner-border-width,ionic
 ion-item,css-prop,--inner-border-width,ios
 ion-item,css-prop,--inner-border-width,md
+ion-item,css-prop,--inner-box-shadow,ionic
 ion-item,css-prop,--inner-box-shadow,ios
 ion-item,css-prop,--inner-box-shadow,md
+ion-item,css-prop,--inner-padding-bottom,ionic
 ion-item,css-prop,--inner-padding-bottom,ios
 ion-item,css-prop,--inner-padding-bottom,md
+ion-item,css-prop,--inner-padding-end,ionic
 ion-item,css-prop,--inner-padding-end,ios
 ion-item,css-prop,--inner-padding-end,md
+ion-item,css-prop,--inner-padding-start,ionic
 ion-item,css-prop,--inner-padding-start,ios
 ion-item,css-prop,--inner-padding-start,md
+ion-item,css-prop,--inner-padding-top,ionic
 ion-item,css-prop,--inner-padding-top,ios
 ion-item,css-prop,--inner-padding-top,md
 ion-item,css-prop,--min-height,ionic
@@ -1051,8 +1070,10 @@ ion-item,css-prop,--padding-start,md
 ion-item,css-prop,--padding-top,ionic
 ion-item,css-prop,--padding-top,ios
 ion-item,css-prop,--padding-top,md
+ion-item,css-prop,--ripple-color,ionic
 ion-item,css-prop,--ripple-color,ios
 ion-item,css-prop,--ripple-color,md
+ion-item,css-prop,--transition,ionic
 ion-item,css-prop,--transition,ios
 ion-item,css-prop,--transition,md
 ion-item,part,detail-icon
@@ -2097,8 +2118,11 @@ ion-spinner,prop,duration,number | undefined,undefined,false,false
 ion-spinner,prop,mode,"ios" | "md",undefined,false,false
 ion-spinner,prop,name,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-sharp" | "lines-sharp-small" | "lines-small" | undefined,undefined,false,false
 ion-spinner,prop,paused,boolean,false,false,false
+ion-spinner,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | undefined,undefined,false,false
 ion-spinner,prop,theme,"ios" | "md" | "ionic",undefined,false,false
-ion-spinner,css-prop,--color
+ion-spinner,css-prop,--color,ionic
+ion-spinner,css-prop,--color,ios
+ion-spinner,css-prop,--color,md
 
 ion-split-pane,shadow
 ion-split-pane,prop,contentId,string | undefined,undefined,false,true

core/src/components.d.ts

@@ -340,9 +340,9 @@ export namespace Components {
          */
         "shape"?: 'soft' | 'round' | 'rectangular';
         /**
-          * Set to `"xsmall"` for the smallest size, `"small"` for a compact size, `"medium"` for the default height and width, `"large"` for a larger size, or `"xlarge"` for the largest dimensions.  Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
+          * Set to `"xxsmall"` for the smallest size. Set to `"xsmall"` for a very small size. Set to `"small"` for a compact size. Set to `"medium"` for the default height and width. Set to `"large"` for a larger size. Set to `"xlarge"` for the largest dimensions.  Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
          */
-        "size"?: `xsmall` | 'small' | 'medium' | 'large' | 'xlarge';
+        "size"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -3346,6 +3346,10 @@ export namespace Components {
           * If `true`, the spinner's animation will be paused.
          */
         "paused": boolean;
+        /**
+          * Set to `"xsmall"` for the smallest size. Set to `"small"` for a smaller size. Set to `"medium"` for a medium size. Set to `"large"` for a large size. Set to `"xlarge"` for the largest size.  Defaults to `"xsmall"` for the `ionic` theme, undefined for all other themes.
+         */
+        "size"?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -5596,9 +5600,9 @@ declare namespace LocalJSX {
          */
         "shape"?: 'soft' | 'round' | 'rectangular';
         /**
-          * Set to `"xsmall"` for the smallest size, `"small"` for a compact size, `"medium"` for the default height and width, `"large"` for a larger size, or `"xlarge"` for the largest dimensions.  Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
+          * Set to `"xxsmall"` for the smallest size. Set to `"xsmall"` for a very small size. Set to `"small"` for a compact size. Set to `"medium"` for the default height and width. Set to `"large"` for a larger size. Set to `"xlarge"` for the largest dimensions.  Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
          */
-        "size"?: `xsmall` | 'small' | 'medium' | 'large' | 'xlarge';
+        "size"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -8689,6 +8693,10 @@ declare namespace LocalJSX {
           * If `true`, the spinner's animation will be paused.
          */
         "paused"?: boolean;
+        /**
+          * Set to `"xsmall"` for the smallest size. Set to `"small"` for a smaller size. Set to `"medium"` for a medium size. Set to `"large"` for a large size. Set to `"xlarge"` for the largest size.  Defaults to `"xsmall"` for the `ionic` theme, undefined for all other themes.
+         */
+        "size"?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
         /**
           * The theme determines the visual appearance of the component.
          */

core/src/components/avatar/avatar.ionic.scss

@@ -1,5 +1,5 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
-@import "./avatar";
+@import "./avatar.common";
 
 // Ionic Avatar
 // --------------------------------------------------
@@ -30,6 +30,20 @@
 // Avatar Sizes
 // --------------------------------------------------
 
+/* 2-Extra Small */
+:host(.avatar-xxsmall) {
+  --padding-end: #{globals.$ionic-space-050};
+  --padding-start: #{globals.$ionic-space-050};
+
+  width: globals.$ionic-scale-400;
+  height: globals.$ionic-scale-400;
+
+  font-size: globals.$ionic-font-size-300;
+
+  line-height: globals.$ionic-line-height-500;
+}
+
+/* Extra Small */
 :host(.avatar-xsmall) {
   --padding-end: #{globals.$ionic-space-050};
   --padding-start: #{globals.$ionic-space-050};
@@ -39,9 +53,10 @@
 
   font-size: globals.$ionic-font-size-300;
 
-  line-height: globals.$ionic-line-height-400;
+  line-height: globals.$ionic-line-height-500;
 }
 
+/* Small */
 :host(.avatar-small) {
   --padding-end: #{globals.$ionic-space-150};
   --padding-start: #{globals.$ionic-space-150};
@@ -54,6 +69,7 @@
   line-height: globals.$ionic-line-height-600;
 }
 
+/* Medium */
 :host(.avatar-medium) {
   --padding-end: #{globals.$ionic-space-200};
   --padding-start: #{globals.$ionic-space-200};
@@ -64,6 +80,7 @@
   font-size: globals.$ionic-font-size-450;
 }
 
+/* Large */
 :host(.avatar-large) {
   --padding-end: #{globals.$ionic-space-250};
   --padding-start: #{globals.$ionic-space-250};
@@ -74,6 +91,7 @@
   font-size: globals.$ionic-font-size-500;
 }
 
+/* Extra Large */
 :host(.avatar-xlarge) {
   --padding-end: #{globals.$ionic-space-300};
   --padding-start: #{globals.$ionic-space-300};
@@ -87,6 +105,7 @@
 // Avatar Shapes
 // --------------------------------------------------
 
+:host(.avatar-xxsmall.avatar-soft),
 :host(.avatar-xsmall.avatar-soft),
 :host(.avatar-small.avatar-soft) {
   --border-radius: #{globals.$ionic-border-radius-100};

core/src/components/avatar/avatar.ios.scss

@@ -1,4 +1,4 @@
-@import "./avatar";
+@import "./avatar.common";
 @import "./avatar.ios.vars";
 
 // iOS Avatar

core/src/components/avatar/avatar.md.scss

@@ -1,4 +1,4 @@
-@import "./avatar";
+@import "./avatar.common";
 @import "./avatar.md.vars";
 
 // Material Design Avatar

core/src/components/avatar/avatar.tsx

@@ -20,13 +20,16 @@ export class Avatar implements ComponentInterface {
   @Element() el!: HTMLElement;
 
   /**
-   * Set to `"xsmall"` for the smallest size, `"small"` for a compact size, `"medium"`
-   * for the default height and width, `"large"` for a larger size, or `"xlarge"` for
-   * the largest dimensions.
+   * Set to `"xxsmall"` for the smallest size.
+   * Set to `"xsmall"` for a very small size.
+   * Set to `"small"` for a compact size.
+   * Set to `"medium"` for the default height and width.
+   * Set to `"large"` for a larger size.
+   * Set to `"xlarge"` for the largest dimensions.
    *
    * Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
    */
-  @Prop() size?: `xsmall` | 'small' | 'medium' | 'large' | 'xlarge';
+  @Prop() size?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 
   /**
    * Set to `"soft"` for an avatar with slightly rounded corners,

core/src/components/avatar/test/shape/avatar.e2e.ts

@@ -108,6 +108,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           </style>
 
           <div id="container">
+            <ion-avatar shape="soft" size="xxsmall">A</ion-avatar>
             <ion-avatar shape="soft" size="xsmall">AB</ion-avatar>
             <ion-avatar shape="soft" size="small">AB</ion-avatar>
             <ion-avatar shape="soft">AB</ion-avatar>
@@ -132,6 +133,9 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           </style>
 
           <div id="container">
+            <ion-avatar shape="soft" size="xxsmall">
+              <ion-icon name="person-outline"></ion-icon>
+            </ion-avatar>
             <ion-avatar shape="soft" size="xsmall">
               <ion-icon name="person-outline"></ion-icon>
             </ion-avatar>
@@ -162,6 +166,9 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           </style>
 
           <div id="container">
+            <ion-avatar shape="soft" size="xxsmall">
+              <img src="/src/components/avatar/test/avatar.svg"/>
+            </ion-avatar>
             <ion-avatar shape="soft" size="xsmall">
               <img src="/src/components/avatar/test/avatar.svg"/>
             </ion-avatar>

core/src/components/avatar/test/shape/index.html

@@ -43,6 +43,7 @@
 
         <h2>Soft</h2>
         <div class="container">
+          <ion-avatar shape="soft" size="xxsmall">A</ion-avatar>
           <ion-avatar shape="soft" size="xsmall">AB</ion-avatar>
           <ion-avatar shape="soft" size="small">AB</ion-avatar>
           <ion-avatar shape="soft" size="medium">AB</ion-avatar>
@@ -52,6 +53,7 @@
 
         <h2>Round</h2>
         <div class="container">
+          <ion-avatar shape="round" size="xxsmall">A</ion-avatar>
           <ion-avatar shape="round" size="xsmall">AB</ion-avatar>
           <ion-avatar shape="round" size="small">AB</ion-avatar>
           <ion-avatar shape="round" size="medium">AB</ion-avatar>
@@ -61,6 +63,7 @@
 
         <h2>Rectangular</h2>
         <div class="container">
+          <ion-avatar shape="rectangular" size="xxsmall">A</ion-avatar>
           <ion-avatar shape="rectangular" size="xsmall">AB</ion-avatar>
           <ion-avatar shape="rectangular" size="small">AB</ion-avatar>
           <ion-avatar shape="rectangular" size="medium">AB</ion-avatar>

core/src/components/avatar/test/size/avatar.e2e.ts

@@ -6,6 +6,51 @@ import { configs, test } from '@utils/test/playwright';
  */
 configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => {
   test.describe(title('avatar: size'), () => {
+    test.describe('xxsmall', () => {
+      test('should not have visual regressions when containing text', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-avatar size="xxsmall">A</ion-avatar>
+        `,
+          config
+        );
+
+        const avatar = page.locator('ion-avatar');
+
+        await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xxsmall-text`));
+      });
+
+      test('should not have visual regressions when containing an icon', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-avatar size="xxsmall">
+            <ion-icon name="person-outline"></ion-icon>
+          </ion-avatar>
+        `,
+          config
+        );
+
+        const avatar = page.locator('ion-avatar');
+
+        await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xxsmall-icon`));
+      });
+
+      test('should not have visual regressions when containing an image', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-avatar size="xxsmall">
+            <img src="/src/components/avatar/test/avatar.svg"/>
+          </ion-avatar>
+        `,
+          config
+        );
+
+        const avatar = page.locator('ion-avatar');
+
+        await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xxsmall-image`));
+      });
+    });
+
     test.describe('xsmall', () => {
       test('should not have visual regressions when containing text', async ({ page }) => {
         await page.setContent(

core/src/components/avatar/test/size/index.html

@@ -43,6 +43,7 @@
 
         <h2>Text</h2>
         <div class="container">
+          <ion-avatar size="xxsmall">A</ion-avatar>
           <ion-avatar size="xsmall">AB</ion-avatar>
           <ion-avatar size="small">AB</ion-avatar>
           <ion-avatar size="medium">AB</ion-avatar>
@@ -52,6 +53,9 @@
 
         <h2>Icons</h2>
         <div class="container">
+          <ion-avatar size="xxsmall">
+            <ion-icon name="person-outline"></ion-icon>
+          </ion-avatar>
           <ion-avatar size="xsmall">
             <ion-icon name="person-outline"></ion-icon>
           </ion-avatar>
@@ -71,6 +75,9 @@
 
         <h2>Images</h2>
         <div class="container">
+          <ion-avatar size="xxsmall">
+            <img src="/src/components/avatar/test/avatar.svg" />
+          </ion-avatar>
           <ion-avatar size="xsmall">
             <img src="/src/components/avatar/test/avatar.svg" />
           </ion-avatar>

core/src/components/badge/badge.common.scss

@@ -1,4 +1,6 @@
-@import "./badge.vars";
+@use "../../themes/functions.color" as color;
+@import "../../themes/mixins";
+@import "./badge.common.vars";
 
 // Badge
 // --------------------------------------------------
@@ -13,8 +15,6 @@
    * @prop --padding-bottom: Bottom padding of the badge
    * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge
    */
-  --background: #{ion-color(primary, base)};
-  --color: #{ion-color(primary, contrast)};
   --padding-top: #{$badge-padding-top};
   --padding-end: #{$badge-padding-end};
   --padding-bottom: #{$badge-padding-bottom};
@@ -30,7 +30,6 @@
   background: var(--background);
   color: var(--color);
 
-  font-family: $font-family-base;
   font-size: $badge-font-size;
   font-weight: $badge-font-weight;
 
@@ -45,8 +44,8 @@
 }
 
 :host(.ion-color) {
-  background: #{current-color(base)};
-  color: #{current-color(contrast)};
+  background: #{color.current-color(base)};
+  color: #{color.current-color(contrast)};
 }
 
 :host(:empty) {

core/src/components/badge/badge.common.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/native/native.globals";
+@import "../../themes/functions.font";
 
 // Badge
 // --------------------------------------------------

core/src/components/badge/badge.ionic.scss

@@ -1,12 +1,14 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
-@import "./badge";
+@use "./badge.common";
 
 // Ionic Badge
 // --------------------------------------------------
 
 :host {
-  --padding-start: #{globals.$ionic-space-100};
-  --padding-end: #{globals.$ionic-space-100};
+  --background: #{globals.ion-color(primary, base)};
+  --color: #{globals.ion-color(primary, contrast)};
+  --padding-start: #{globals.$ionic-space-200};
+  --padding-end: #{globals.$ionic-space-200};
   --padding-top: #{globals.$ionic-space-0};
   --padding-bottom: #{globals.$ionic-space-0};
 
@@ -23,23 +25,23 @@
 
 /* Soft Badge */
 :host(.badge-soft) {
-  @include border-radius(globals.$ionic-border-radius-200);
+  @include globals.border-radius(globals.$ionic-border-radius-200);
 }
 
 :host(.badge-xxsmall.badge-soft),
 :host(.badge-xsmall.badge-soft),
 :host(.badge-small.badge-soft) {
-  @include border-radius(globals.$ionic-border-radius-100);
+  @include globals.border-radius(globals.$ionic-border-radius-100);
 }
 
 /* Round Badge */
 :host(.badge-round) {
-  @include border-radius(globals.$ionic-border-radius-full);
+  @include globals.border-radius(globals.$ionic-border-radius-full);
 }
 
 /* Rectangular Badge */
 :host(.badge-rectangular) {
-  @include border-radius(globals.$ionic-border-radius-0);
+  @include globals.border-radius(globals.$ionic-border-radius-0);
 }
 
 // Badge Sizes
@@ -47,6 +49,9 @@
 
 /* 2-Extra Small Badge */
 :host(.badge-xxsmall) {
+  --padding-start: #{globals.$ionic-space-050};
+  --padding-end: #{globals.$ionic-space-050};
+
   min-width: globals.$ionic-scale-400;
   height: globals.$ionic-scale-400;
 
@@ -57,6 +62,9 @@
 
 /* Extra Small Badge */
 :host(.badge-xsmall) {
+  --padding-start: #{globals.$ionic-space-100};
+  --padding-end: #{globals.$ionic-space-100};
+
   min-width: globals.$ionic-scale-600;
   height: globals.$ionic-scale-600;
 
@@ -67,6 +75,9 @@
 
 /* Small Badge */
 :host(.badge-small) {
+  --padding-start: #{globals.$ionic-space-100};
+  --padding-end: #{globals.$ionic-space-100};
+
   min-width: globals.$ionic-scale-800;
   height: globals.$ionic-scale-800;
 
@@ -87,9 +98,6 @@
 
 /* Large Badge */
 :host(.badge-large) {
-  --padding-start: #{globals.$ionic-space-200};
-  --padding-end: #{globals.$ionic-space-200};
-
   min-width: globals.$ionic-scale-1200;
   height: globals.$ionic-scale-1200;
 
@@ -100,9 +108,6 @@
 
 /* Extra Large Badge */
 :host(.badge-xlarge) {
-  --padding-start: #{globals.$ionic-space-200};
-  --padding-end: #{globals.$ionic-space-200};
-
   min-width: globals.$ionic-scale-1400;
   height: globals.$ionic-scale-1400;
 

core/src/components/badge/badge.ios.scss

@@ -1,4 +1,4 @@
-@import "./badge";
+@import "./badge.native";
 @import "./badge.ios.vars";
 
 // iOS Badge

core/src/components/badge/badge.md.scss

@@ -1,4 +1,4 @@
-@import "./badge";
+@import "./badge.native";
 @import "./badge.md.vars";
 
 // Material Design Badge

core/src/components/badge/badge.native.scss

@@ -0,0 +1,13 @@
+@import "../../themes/native/native.globals.md";
+@import "./badge.common";
+@import "./badge.common.vars";
+
+// Badge
+// --------------------------------------------------
+
+:host {
+  --background: #{ion-color(primary, base)};
+  --color: #{ion-color(primary, contrast)};
+
+  font-family: $font-family-base;
+}

core/src/components/badge/test/basic/badge.e2e.ts

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs().forEach(({ config, screenshot, title }) => {
+configs({ modes: ['md', 'ios', 'ionic-md'] }).forEach(({ config, screenshot, title }) => {
   test.describe(title('badge: rendering'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto('/src/components/badge/test/basic', config);

core/src/components/button/button.ionic.scss

@@ -69,6 +69,29 @@
   }
 }
 
+// Button Colors
+// --------------------------------------------------
+
+// Solid Button with Color
+:host(.button-solid.ion-color) .button-native {
+  background: globals.current-color(base);
+  color: globals.current-color(contrast);
+}
+
+// Outline Button with Color
+:host(.button-outline.ion-color) .button-native {
+  border-color: globals.current-color(base);
+
+  background: transparent;
+  color: globals.current-color(base);
+}
+
+// Clear Button with Color
+:host(.button-clear.ion-color) .button-native {
+  background: transparent;
+  color: globals.current-color(base);
+}
+
 // Button Sizes
 // -------------------------------------------------------------------------------
 
@@ -231,6 +254,32 @@
   --background-hover: #{globals.$ionic-color-neutral-100};
 }
 
+/**
+ * Only allow overriding of opacity here
+ * as developers should not be overriding
+ * colors when using the color prop.
+ */
+
+:host(.button-solid.ion-color.ion-focused) .button-native::after {
+  background: #{current-color(contrast)};
+}
+
+:host(.button-clear.ion-color.ion-focused) .button-native::after,
+:host(.button-outline.ion-color.ion-focused) .button-native::after {
+  background: #{current-color(base)};
+}
+
+@media (any-hover: hover) {
+  :host(.button-solid.ion-color:hover) .button-native::after {
+    background: #{current-color(contrast)};
+  }
+
+  :host(.button-clear.ion-color:hover) .button-native::after,
+  :host(.button-outline.ion-color:hover) .button-native::after {
+    background: #{current-color(base)};
+  }
+}
+
 // Button: Disabled
 // --------------------------------------------------
 
@@ -257,9 +306,9 @@
 
 // Default Outline Color
 :host(.button-outline) {
-  --border-color: #{globals.$ionic-color-primary-base};
+  --border-color: #{globals.ion-color(primary, base)};
   --background: #{globals.$ionic-color-base-white};
-  --color: #{globals.$ionic-color-primary-base};
+  --color: #{globals.ion-color(primary, base)};
 }
 
 // Clear Button

core/src/components/button/test/outline/button.e2e.ts

@@ -1,8 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-// TODO(ROU-5474): add tests for ionic theme
-configs().forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('button: outline'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto(`/src/components/button/test/outline`, config);

core/src/components/button/test/states/button.e2e.ts

@@ -19,7 +19,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md', 'md', 'ios'] }).forEach(({ ti
     test('should render solid button with color', async ({ page }) => {
       await page.setContent(
         `
-        <ion-button color="tertiary" class="ion-activated">Button</ion-button>
+        <ion-button color="warning" class="ion-activated">Button</ion-button>
       `,
         config
       );
@@ -45,7 +45,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md', 'md', 'ios'] }).forEach(({ ti
     test('should render outline button with color', async ({ page }) => {
       await page.setContent(
         `
-        <ion-button color="tertiary" fill="outline" class="ion-activated">Button</ion-button>
+        <ion-button color="warning" fill="outline" class="ion-activated">Button</ion-button>
       `,
         config
       );
@@ -71,7 +71,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md', 'md', 'ios'] }).forEach(({ ti
     test('should render clear button with color', async ({ page }) => {
       await page.setContent(
         `
-        <ion-button color="tertiary" fill="clear" class="ion-activated">Button</ion-button>
+        <ion-button color="warning" fill="clear" class="ion-activated">Button</ion-button>
       `,
         config
       );

core/src/components/chip/chip.ionic.scss

@@ -43,10 +43,15 @@
 // ---------------------------------------------
 
 :host(.chip-outline) {
-  --background: transparent;
   border-width: globals.$ionic-border-size-025;
-
+  border-style: globals.$ionic-border-style-solid;
   border-color: globals.$ionic-color-neutral-100;
+
+  background: transparent;
+}
+
+:host(.chip-outline.ion-color) {
+  border-color: globals.current-color(base, 0.32);
 }
 
 // Chip: Focus
@@ -64,6 +69,10 @@
   :host(:hover) {
     --background: #{globals.$ionic-color-neutral-200};
   }
+
+  :host(.ion-color:hover) {
+    background: globals.current-color(base, 0.12);
+  }
 }
 
 // Chip: Disabled
@@ -109,3 +118,19 @@
 
   font-size: globals.$ionic-font-size-350;
 }
+
+// Chip Colors
+// ---------------------------------------------
+
+:host(.ion-color) {
+  background: globals.current-color(base, 0.08);
+  color: globals.current-color(shade);
+}
+
+:host(.ion-color:focus) {
+  background: globals.current-color(base, 0.12);
+}
+
+:host(.ion-color.ion-activated) {
+  background: globals.current-color(base, 0.16);
+}

core/src/components/chip/test/basic/chip.e2e.ts

@@ -29,56 +29,6 @@ configs({ modes: ['ios'] }).forEach(({ title, screenshot, config }) => {
 });
 
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  /**
-   * This behavior does not vary across modes/directions.
-   */
-  test.describe(title('chip: outline'), () => {
-    test('should render default outline chip', async ({ page }) => {
-      await page.setContent(
-        `<ion-chip outline="true">
-          <ion-icon name="checkmark-circle"></ion-icon>
-          <ion-label>Icon</ion-label>
-        </ion-chip>`,
-        config
-      );
-
-      const chip = page.locator('ion-chip');
-
-      await expect(chip).toHaveScreenshot(screenshot(`chip-outline`));
-    });
-  });
-  /**
-   * This behavior does not vary across modes/directions.
-   */
-  test.describe(title('chip: color'), () => {
-    test('should render solid color chip', async ({ page }) => {
-      await page.setContent(
-        `<ion-chip color="tertiary">
-          <ion-icon name="checkmark-circle"></ion-icon>
-          <ion-label>Tertiary with Icon</ion-label>
-        </ion-chip>`,
-        config
-      );
-
-      const chip = page.locator('ion-chip');
-
-      await expect(chip).toHaveScreenshot(screenshot(`chip-solid-color`));
-    });
-    test('should render outline color chip', async ({ page }) => {
-      await page.setContent(
-        `<ion-chip outline="true" color="tertiary">
-          <ion-icon name="checkmark-circle"></ion-icon>
-          <ion-label>Tertiary with Icon</ion-label>
-        </ion-chip>`,
-        config
-      );
-
-      const chip = page.locator('ion-chip');
-
-      await expect(chip).toHaveScreenshot(screenshot(`chip-outline-color`));
-    });
-  });
-
   test.describe(title('chip: descenders'), () => {
     test('should not clip descenders in item', async ({ page }) => {
       test.info().annotations.push({
@@ -105,3 +55,52 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
     });
   });
 });
+
+/**
+ * `md` mode does not differ from `ios` mode in chip rendering.
+ */
+configs({ modes: ['ios', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('chip: outline'), () => {
+    test('should render default outline chip', async ({ page }) => {
+      await page.setContent(
+        `<ion-chip outline="true">
+          <ion-icon name="checkmark-circle"></ion-icon>
+          <ion-label>Icon</ion-label>
+        </ion-chip>`,
+        config
+      );
+
+      const chip = page.locator('ion-chip');
+
+      await expect(chip).toHaveScreenshot(screenshot(`chip-outline`));
+    });
+  });
+  test.describe(title('chip: color'), () => {
+    test('should render solid color chip', async ({ page }) => {
+      await page.setContent(
+        `<ion-chip color="success">
+          <ion-icon name="checkmark-circle"></ion-icon>
+          <ion-label>Success with Icon</ion-label>
+        </ion-chip>`,
+        config
+      );
+
+      const chip = page.locator('ion-chip');
+
+      await expect(chip).toHaveScreenshot(screenshot(`chip-solid-color`));
+    });
+    test('should render outline color chip', async ({ page }) => {
+      await page.setContent(
+        `<ion-chip outline="true" color="success">
+          <ion-icon name="checkmark-circle"></ion-icon>
+          <ion-label>Success with Icon</ion-label>
+        </ion-chip>`,
+        config
+      );
+
+      const chip = page.locator('ion-chip');
+
+      await expect(chip).toHaveScreenshot(screenshot(`chip-outline-color`));
+    });
+  });
+});