feat(badge): add hue property for the ionic theme (#30307)

Issue number: internal

---------

## What is the current behavior?
The badge component does not support the `hue` property.

## What is the new behavior?
Adds support for the `subtle` hue for the badge. Defaults to `subtle`
when the badge contains icon or text. Defaults to `bold` when the badge
is empty or when it is inside of a button or tab button.

## Does this introduce a breaking change?
- [ ] Yes
- [x] No

Author: brandyscarney

core/api.txt

@@ -314,6 +314,7 @@ ion-backdrop,event,ionBackdropTap,void,true
 
 ion-badge,shadow
 ion-badge,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-badge,prop,hue,"bold" | "subtle" | undefined,undefined,false,false
 ion-badge,prop,mode,"ios" | "md",undefined,false,false
 ion-badge,prop,shape,"round | rectangular" | "soft" | undefined,undefined,false,false
 ion-badge,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall" | undefined,undefined,false,false

core/src/components.d.ts

@@ -429,6 +429,10 @@ export namespace Components {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
+        /**
+          * Set to `"bold"` for a badge with vibrant, bold colors or to `"subtle"` for a badge with muted, subtle colors.  Only applies to the `ionic` theme.
+         */
+        "hue"?: 'bold' | 'subtle';
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -5870,6 +5874,10 @@ declare namespace LocalJSX {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
+        /**
+          * Set to `"bold"` for a badge with vibrant, bold colors or to `"subtle"` for a badge with muted, subtle colors.  Only applies to the `ionic` theme.
+         */
+        "hue"?: 'bold' | 'subtle';
         /**
           * The mode determines the platform behaviors of the component.
          */

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,6 +18,32 @@
   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)};
+  --color: #{globals.ion-color(primary, contrast, $subtle: true)};
+}
+
+:host(.badge-subtle.ion-color) {
+  background: globals.current-color(base, $subtle: true);
+  color: globals.current-color(contrast, $subtle: true);
+}
+
 // Badge Shapes
 // --------------------------------------------------
 

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/badge.tsx

@@ -28,6 +28,14 @@ export class Badge implements ComponentInterface {
    */
   @Prop({ reflect: true }) color?: Color;
 
+  /**
+   * Set to `"bold"` for a badge with vibrant, bold colors or to `"subtle"` for
+   * a badge with muted, subtle colors.
+   *
+   * Only applies to the `ionic` theme.
+   */
+  @Prop() hue?: 'bold' | 'subtle';
+
   /**
    * Set to `"rectangular"` for non-rounded corners.
    * Set to `"soft"` for slightly rounded corners.
@@ -87,7 +95,33 @@ export class Badge implements ComponentInterface {
     return size;
   }
 
+  // The 'subtle' hue is the default for badges containing text or icons
+  // The 'bold' hue is used when inside of an avatar, button, tab button,
+  // or when the badge is empty (no text or icon).
+  private getHue(): string | undefined {
+    const { hue } = this;
+
+    if (hue !== undefined) {
+      return hue;
+    }
+
+    const inAvatar = hostContext('ion-avatar', this.el);
+    const inButton = hostContext('ion-button', this.el);
+    const inTabButton = hostContext('ion-tab-button', this.el);
+    const hasContent = this.el.textContent?.trim() !== '' || this.el.querySelector('ion-icon') !== null;
+
+    // Return 'bold' if the badge is inside an avatar, button, tab button,
+    // or has no content
+    if (inAvatar || inButton || inTabButton || !hasContent) {
+      return 'bold';
+    }
+
+    // Return 'subtle' if the badge contains visible text or an icon
+    return 'subtle';
+  }
+
   render() {
+    const hue = this.getHue();
     const shape = this.getShape();
     const size = this.getSize();
     const theme = getIonTheme(this);
@@ -96,6 +130,7 @@ export class Badge implements ComponentInterface {
       <Host
         class={createColorClasses(this.color, {
           [theme]: true,
+          [`badge-${hue}`]: hue !== undefined,
           [`badge-${shape}`]: shape !== undefined,
           [`badge-${size}`]: size !== undefined,
           [`badge-vertical-${this.vertical}`]: this.vertical !== undefined,