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

Co-authored-by: Brandy Carney <[email protected]>

Author: thetaPC

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/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png

@@ -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