refactor(badge): only apply the color / background to hue classes

Author: brandyscarney

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

@@ -43,11 +43,6 @@
   vertical-align: baseline;
 }
 
-:host(.ion-color) {
-  background: #{color.current-color(base)};
-  color: #{color.current-color(contrast)};
-}
-
 // Badge (hint)
 // --------------------------------------------------
 

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

@@ -5,8 +5,6 @@
 // --------------------------------------------------
 
 :host {
-  --background: #{globals.ion-color(primary, base)};
-  --color: #{globals.ion-color(primary, contrast)};
   --padding-start: #{globals.$ion-space-200};
   --padding-end: #{globals.$ion-space-200};
   --padding-top: #{globals.$ion-space-0};
@@ -20,12 +18,24 @@
   font-weight: globals.$ion-font-weight-medium;
 }
 
+// Bold Badge
+// --------------------------------------------------
+
+:host(.badge-bold) {
+  --background: #{globals.ion-color(primary, base)};
+  --color: #{globals.ion-color(primary, contrast)};
+}
+
+:host(.badge-bold.ion-color) {
+  background: globals.current-color(base);
+  color: globals.current-color(contrast);
+}
+
 // Subtle Badge
 // --------------------------------------------------
 
 :host(.badge-subtle) {
   --background: #{globals.ion-color(primary, base, $subtle: true)};
-  --background-activated: #{globals.ion-color(primary, shade, $subtle: true)};
   --color: #{globals.ion-color(primary, contrast, $subtle: true)};
 }
 

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

@@ -12,6 +12,11 @@
   font-family: $font-family-base;
 }
 
+:host(.ion-color) {
+  background: current-color(base);
+  color: current-color(contrast);
+}
+
 // TODO(ROU-10747): Review size styles when sizes are defined for native themes.
 :host([vertical]:not(.in-button):not(.in-tab-button)),
 :host(:empty) {

core/src/components/badge/test/hue/index.html

@@ -24,6 +24,7 @@
 
       <ion-content id="content">
         <h2>Badge Hue: Subtle</h2>
+        <ion-badge>99</ion-badge>
         <ion-badge color="primary">99</ion-badge>
         <ion-badge color="secondary">99</ion-badge>
         <ion-badge color="tertiary">99</ion-badge>
@@ -36,6 +37,7 @@ <h2>Badge Hue: Subtle</h2>
 
         <br />
 
+        <ion-badge><ion-icon name="logo-ionic"></ion-icon></ion-badge>
         <ion-badge color="primary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
         <ion-badge color="secondary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
         <ion-badge color="tertiary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
@@ -47,6 +49,7 @@ <h2>Badge Hue: Subtle</h2>
         <ion-badge color="dark"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
 
         <h2>Badge Hue: Bold</h2>
+        <ion-badge hue="bold">99</ion-badge>
         <ion-badge hue="bold" color="primary">99</ion-badge>
         <ion-badge hue="bold" color="secondary">99</ion-badge>
         <ion-badge hue="bold" color="tertiary">99</ion-badge>
@@ -59,6 +62,7 @@ <h2>Badge Hue: Bold</h2>
 
         <br />
 
+        <ion-badge hue="bold"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
         <ion-badge hue="bold" color="primary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
         <ion-badge hue="bold" color="secondary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
         <ion-badge hue="bold" color="tertiary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>