fix(button): show correct background for activated button with color (#29222)

Updates the solid buttons with color to use the current color's shade.

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

@@ -142,6 +142,7 @@
 
 // Button Shape Rectangular
 // -------------------------------------------------------------------------------
+
 :host(.button-rectangular) {
   --border-radius: #{$button-ionic-rectangular-border};
 }
@@ -168,6 +169,11 @@
   --background-activated: #{ion-color(primary, shade)};
 }
 
+:host(.button-solid.ion-color.ion-activated) .button-native::after {
+  background: #{current-color(shade)};
+}
+
+
 // Fill Outline Button
 // --------------------------------------------------
 

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

@@ -0,0 +1,84 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'], modes: ['ionic-md', 'md', 'ios'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('button: activated'), () => {
+    test('should render solid button', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-button class="ion-activated">Button</ion-button>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`button-activated-solid`));
+    });
+
+    test('should render solid button with color', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-button color="tertiary" class="ion-activated">Button</ion-button>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`button-activated-solid-color`));
+    });
+
+    test('should render outline button', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-button fill="outline" class="ion-activated">Button</ion-button>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`button-activated-outline`));
+    });
+
+    test('should render outline button with color', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-button color="tertiary" fill="outline" class="ion-activated">Button</ion-button>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`button-activated-outline-color`));
+    });
+
+    test('should render clear button', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-button fill="clear" class="ion-activated">Button</ion-button>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`button-activated-clear`));
+    });
+
+    test('should render clear button with color', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-button color="tertiary" fill="clear" class="ion-activated">Button</ion-button>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`button-activated-clear-color`));
+    });
+  });
+});