feat(core): add ionic colors (#29707)

Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>

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

@@ -1,3 +1,4 @@
+@use "../../themes/functions.color" as color;
 @import "../../themes/mixins";
 @import "./badge.common.vars";
 
@@ -43,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.ionic.scss

@@ -5,10 +5,8 @@
 // --------------------------------------------------
 
 :host {
-  // TODO(ROU-10872): replace this value the color function
-  --background: #{globals.$ionic-color-blue-700};
-  // TODO(ROU-10872): replace this value the color function
-  --color: #{globals.$ionic-color-base-white};
+  --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};

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/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`));
+    });
+  });
+});

core/src/components/item-sliding/test/icons/index.html

@@ -47,7 +47,7 @@
                 <ion-icon slot="start" name="archive"></ion-icon>
                 Archive
               </ion-item-option>
-              <ion-item-option color="secondary" expandable>
+              <ion-item-option color="primary" expandable>
                 <ion-icon slot="start" name="bookmark"></ion-icon>
                 Save
               </ion-item-option>
@@ -63,7 +63,7 @@
                 <ion-icon slot="end" name="archive"></ion-icon>
                 Archive
               </ion-item-option>
-              <ion-item-option color="secondary" expandable>
+              <ion-item-option color="primary" expandable>
                 <ion-icon slot="end" name="bookmark"></ion-icon>
                 Save
               </ion-item-option>
@@ -83,7 +83,7 @@
                 <ion-icon slot="top" name="archive"></ion-icon>
                 Archive
               </ion-item-option>
-              <ion-item-option color="secondary" expandable>
+              <ion-item-option color="primary" expandable>
                 <ion-icon slot="top" name="bookmark"></ion-icon>
                 Save
               </ion-item-option>
@@ -103,7 +103,7 @@
                 <ion-icon slot="bottom" name="archive"></ion-icon>
                 Archive
               </ion-item-option>
-              <ion-item-option color="secondary" expandable>
+              <ion-item-option color="primary" expandable>
                 <ion-icon slot="bottom" name="bookmark"></ion-icon>
                 Save
               </ion-item-option>