@ionic/core 8.2.3-dev.11721064272.19e3ddfd → 8.2.3-dev.11723022900.1196a7bf

package/dist/collection/components/avatar/avatar.ionic.css

@@ -163,15 +163,27 @@
   border: var(--ionic-border-size-025, 1px) var(--ionic-border-style-solid, solid) var(--ionic-color-neutral-800, #626262);
 }
 
+/* 2-Extra Small */
+:host(.avatar-xxsmall) {
+  --padding-end: var(--ionic-space-050, 2px);
+  --padding-start: var(--ionic-space-050, 2px);
+  width: var(--ionic-scale-400, 16px);
+  height: var(--ionic-scale-400, 16px);
+  font-size: var(--ionic-font-size-300, 0.75rem);
+  line-height: var(--ionic-line-height-500, 20px);
+}
+
+/* Extra Small */
 :host(.avatar-xsmall) {
   --padding-end: var(--ionic-space-050, 2px);
   --padding-start: var(--ionic-space-050, 2px);
   width: var(--ionic-scale-600, 24px);
   height: var(--ionic-scale-600, 24px);
   font-size: var(--ionic-font-size-300, 0.75rem);
-  line-height: var(--ionic-line-height-400, 16px);
+  line-height: var(--ionic-line-height-500, 20px);
 }
 
+/* Small */
 :host(.avatar-small) {
   --padding-end: var(--ionic-space-150, 6px);
   --padding-start: var(--ionic-space-150, 6px);
@@ -181,6 +193,7 @@
   line-height: var(--ionic-line-height-600, 24px);
 }
 
+/* Medium */
 :host(.avatar-medium) {
   --padding-end: var(--ionic-space-200, 8px);
   --padding-start: var(--ionic-space-200, 8px);
@@ -189,6 +202,7 @@
   font-size: var(--ionic-font-size-450, 1.125rem);
 }
 
+/* Large */
 :host(.avatar-large) {
   --padding-end: var(--ionic-space-250, 10px);
   --padding-start: var(--ionic-space-250, 10px);
@@ -197,6 +211,7 @@
   font-size: var(--ionic-font-size-500, 1.25rem);
 }
 
+/* Extra Large */
 :host(.avatar-xlarge) {
   --padding-end: var(--ionic-space-300, 12px);
   --padding-start: var(--ionic-space-300, 12px);
@@ -205,6 +220,7 @@
   font-size: var(--ionic-font-size-550, 1.375rem);
 }
 
+:host(.avatar-xxsmall.avatar-soft),
 :host(.avatar-xsmall.avatar-soft),
 :host(.avatar-small.avatar-soft) {
   --border-radius: var(--ionic-border-radius-100, 4px);

package/dist/collection/components/avatar/avatar.js

@@ -46,13 +46,13 @@ export class Avatar {
         const theme = getIonTheme(this);
         const size = this.getSize();
         const shape = this.getShape();
-        return (h(Host, { key: 'ce0752a14af73eb2731d916be9522db4312bd8f8', class: {
+        return (h(Host, { key: '169f3e804c30f9eedc8c3cf064af9871bead2f5f', class: {
                 [theme]: true,
                 [`avatar-${size}`]: size !== undefined,
                 [`avatar-${shape}`]: shape !== undefined,
                 [`avatar-image`]: this.hasImage,
                 [`avatar-icon`]: this.hasIcon,
-            } }, h("slot", { key: '9cd3c8e0d4ced7896b8496b75208c938735af1b2' })));
+            } }, h("slot", { key: '67bb5a3c1a6bd33af37141df05663f1685c84286' })));
     }
     static get is() { return "ion-avatar"; }
     static get encapsulation() { return "shadow"; }
@@ -76,15 +76,15 @@ export class Avatar {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "`xsmall` | 'small' | 'medium' | 'large' | 'xlarge'",
-                    "resolved": "\"large\" | \"medium\" | \"small\" | \"xlarge\" | \"xsmall\" | undefined",
+                    "original": "'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | \"xlarge\" | \"xsmall\" | \"xxsmall\" | undefined",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Set to `\"xsmall\"` for the smallest size, `\"small\"` for a compact size, `\"medium\"`\nfor the default height and width, `\"large\"` for a larger size, or `\"xlarge\"` for\nthe largest dimensions.\n\nDefaults to `\"medium\"` for the `ionic` theme, undefined for all other themes."
+                    "text": "Set to `\"xxsmall\"` for the smallest size.\nSet to `\"xsmall\"` for a very small size.\nSet to `\"small\"` for a compact size.\nSet to `\"medium\"` for the default height and width.\nSet to `\"large\"` for a larger size.\nSet to `\"xlarge\"` for the largest dimensions.\n\nDefaults to `\"medium\"` for the `ionic` theme, undefined for all other themes."
                 },
                 "attribute": "size",
                 "reflect": false

package/dist/collection/components/avatar/test/shape/avatar.e2e.js

@@ -73,6 +73,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>
@@ -91,6 +92,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>
@@ -115,6 +119,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>

package/dist/collection/components/avatar/test/size/avatar.e2e.js

@@ -8,6 +8,33 @@ import { configs, test } from "../../../../utils/test/playwright/index";
  */
 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(`

package/dist/collection/components/badge/badge.ionic.css

@@ -64,10 +64,26 @@
  * convert to a unit other than $baselineUnit.
  */
 /**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
  */
 /**
  * Convert a font size to a dynamic font size.
@@ -102,28 +118,6 @@
  * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
  * convert to a unit other than $baselineUnit.
  */
-/**
- * A heuristic that applies CSS to tablet
- * viewports.
- *
- * Usage:
- * @include tablet-viewport() {
- *   :host {
- *     background-color: green;
- *   }
- * }
- */
-/**
- * A heuristic that applies CSS to mobile
- * viewports (i.e. phones, not tablets).
- *
- * Usage:
- * @include mobile-viewport() {
- *   :host {
- *     background-color: blue;
- *   }
- * }
- */
 :host {
   /**
    * @prop --background: Background of the badge
@@ -134,8 +128,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: var(--ion-color-primary, #0054e9);
-  --color: var(--ion-color-primary-contrast, #fff);
   --padding-top: 3px;
   --padding-end: 8px;
   --padding-bottom: 3px;
@@ -152,7 +144,6 @@
   min-width: 10px;
   background: var(--background);
   color: var(--color);
-  font-family: var(--ion-font-family, inherit);
   font-size: 0.8125rem;
   font-weight: bold;
   line-height: 1;
@@ -172,8 +163,10 @@
 }
 
 :host {
-  --padding-start: var(--ionic-space-100, 4px);
-  --padding-end: var(--ionic-space-100, 4px);
+  --background: var(--ion-color-primary, #105cef);
+  --color: var(--ion-color-primary-contrast, #fff);
+  --padding-start: var(--ionic-space-200, 8px);
+  --padding-end: var(--ionic-space-200, 8px);
   --padding-top: var(--ionic-space-0, 0px);
   --padding-bottom: var(--ionic-space-0, 0px);
   display: inline-flex;
@@ -205,6 +198,8 @@
 
 /* 2-Extra Small Badge */
 :host(.badge-xxsmall) {
+  --padding-start: var(--ionic-space-050, 2px);
+  --padding-end: var(--ionic-space-050, 2px);
   min-width: var(--ionic-scale-400, 16px);
   height: var(--ionic-scale-400, 16px);
   font-size: var(--ionic-font-size-300, 0.75rem);
@@ -213,6 +208,8 @@
 
 /* Extra Small Badge */
 :host(.badge-xsmall) {
+  --padding-start: var(--ionic-space-100, 4px);
+  --padding-end: var(--ionic-space-100, 4px);
   min-width: var(--ionic-scale-600, 24px);
   height: var(--ionic-scale-600, 24px);
   font-size: var(--ionic-font-size-350, 0.875rem);
@@ -221,6 +218,8 @@
 
 /* Small Badge */
 :host(.badge-small) {
+  --padding-start: var(--ionic-space-100, 4px);
+  --padding-end: var(--ionic-space-100, 4px);
   min-width: var(--ionic-scale-800, 32px);
   height: var(--ionic-scale-800, 32px);
   font-size: var(--ionic-font-size-400, 1rem);
@@ -237,8 +236,6 @@
 
 /* Large Badge */
 :host(.badge-large) {
-  --padding-start: var(--ionic-space-200, 8px);
-  --padding-end: var(--ionic-space-200, 8px);
   min-width: var(--ionic-scale-1200, 48px);
   height: var(--ionic-scale-1200, 48px);
   font-size: var(--ionic-font-size-500, 1.25rem);
@@ -247,8 +244,6 @@
 
 /* Extra Large Badge */
 :host(.badge-xlarge) {
-  --padding-start: var(--ionic-space-200, 8px);
-  --padding-end: var(--ionic-space-200, 8px);
   min-width: var(--ionic-scale-1400, 56px);
   height: var(--ionic-scale-1400, 56px);
   font-size: var(--ionic-font-size-550, 1.375rem);

package/dist/collection/components/badge/badge.ios.css

@@ -59,6 +59,61 @@
  *   }
  * }
  */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
 :host {
   /**
    * @prop --background: Background of the badge
@@ -69,8 +124,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: var(--ion-color-primary, #0054e9);
-  --color: var(--ion-color-primary-contrast, #fff);
   --padding-top: 3px;
   --padding-end: 8px;
   --padding-bottom: 3px;
@@ -87,7 +140,6 @@
   min-width: 10px;
   background: var(--background);
   color: var(--color);
-  font-family: var(--ion-font-family, inherit);
   font-size: 0.8125rem;
   font-weight: bold;
   line-height: 1;
@@ -106,6 +158,45 @@
   display: none;
 }
 
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+:host {
+  --background: var(--ion-color-primary, #0054e9);
+  --color: var(--ion-color-primary-contrast, #fff);
+  font-family: var(--ion-font-family, inherit);
+}
+
 /**
  * Convert a pixels given value into rem
  * 

package/dist/collection/components/badge/badge.md.css

@@ -59,6 +59,61 @@
  *   }
  * }
  */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
 :host {
   /**
    * @prop --background: Background of the badge
@@ -69,8 +124,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: var(--ion-color-primary, #0054e9);
-  --color: var(--ion-color-primary-contrast, #fff);
   --padding-top: 3px;
   --padding-end: 8px;
   --padding-bottom: 3px;
@@ -87,7 +140,6 @@
   min-width: 10px;
   background: var(--background);
   color: var(--color);
-  font-family: var(--ion-font-family, inherit);
   font-size: 0.8125rem;
   font-weight: bold;
   line-height: 1;
@@ -106,6 +158,45 @@
   display: none;
 }
 
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+:host {
+  --background: var(--ion-color-primary, #0054e9);
+  --color: var(--ion-color-primary-contrast, #fff);
+  font-family: var(--ion-font-family, inherit);
+}
+
 /**
  * Convert a pixels given value into rem
  * 

package/dist/collection/components/badge/test/basic/badge.e2e.js

@@ -3,7 +3,7 @@
  */
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-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);

package/dist/collection/components/button/button.ionic.css

@@ -114,6 +114,22 @@
   margin-inline-start: var(--ionic-space-200, 8px);
 }
 
+:host(.button-solid.ion-color) .button-native {
+  background: var(--ion-color-base);
+  color: var(--ion-color-contrast);
+}
+
+:host(.button-outline.ion-color) .button-native {
+  border-color: var(--ion-color-base);
+  background: transparent;
+  color: var(--ion-color-base);
+}
+
+:host(.button-clear.ion-color) .button-native {
+  background: transparent;
+  color: var(--ion-color-base);
+}
+
 /* Extra Small and Small Button */
 :host(.button-xsmall) ::slotted(ion-icon[slot=start]),
 :host(.button-small) ::slotted(ion-icon[slot=start]) {
@@ -246,6 +262,29 @@
   --background-hover: var(--ionic-color-neutral-100, #f1f1f1);
 }
 
+/**
+ * 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);
+  }
+}
 :host(.button-disabled) {
   --background: var(--ionic-state-disabled, rgba(255, 255, 255, 0.6));
   --border-color: var(--color);
@@ -260,9 +299,9 @@
 }
 
 :host(.button-outline) {
-  --border-color: var(--ionic-color-primary-base, #105cef);
+  --border-color: var(--ion-color-primary, #105cef);
   --background: var(--ionic-color-base-white, #ffffff);
-  --color: var(--ionic-color-primary-base, #105cef);
+  --color: var(--ion-color-primary, #105cef);
 }
 
 :host(.button-clear) {

package/dist/collection/components/button/test/outline/button.e2e.js

@@ -3,8 +3,7 @@
  */
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-// 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);

package/dist/collection/components/button/test/states/button.e2e.js

@@ -14,7 +14,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);
             const button = page.locator('ion-button');
             await expect(button).toHaveScreenshot(screenshot(`button-activated-solid-color`));
@@ -28,7 +28,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);
             const button = page.locator('ion-button');
             await expect(button).toHaveScreenshot(screenshot(`button-activated-outline-color`));
@@ -42,7 +42,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);
             const button = page.locator('ion-button');
             await expect(button).toHaveScreenshot(screenshot(`button-activated-clear-color`));