feat(chip): add hue property for the ionic theme (#30308)

Issue number: internal

---------

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

## What is the new behavior?
Adds support for the `bold` and `subtle` hue for the chip. Defaults to
`subtle`.

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

Author: brandyscarney

core/api.txt

@@ -596,17 +596,23 @@ ion-checkbox,part,supporting-text
 ion-chip,shadow
 ion-chip,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-chip,prop,disabled,boolean,false,false,false
+ion-chip,prop,hue,"bold" | "subtle" | undefined,'subtle',false,false
 ion-chip,prop,mode,"ios" | "md",undefined,false,false
 ion-chip,prop,outline,boolean,false,false,false
 ion-chip,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
 ion-chip,prop,size,"large" | "small" | undefined,undefined,false,false
 ion-chip,prop,theme,"ios" | "md" | "ionic",undefined,false,false
+ion-chip,css-prop,--background,ionic
 ion-chip,css-prop,--background,ios
 ion-chip,css-prop,--background,md
+ion-chip,css-prop,--border-radius,ionic
 ion-chip,css-prop,--border-radius,ios
 ion-chip,css-prop,--border-radius,md
+ion-chip,css-prop,--color,ionic
 ion-chip,css-prop,--color,ios
 ion-chip,css-prop,--color,md
+ion-chip,css-prop,--focus-ring-color,ionic
+ion-chip,css-prop,--focus-ring-width,ionic
 
 ion-col,shadow
 ion-col,prop,mode,"ios" | "md",undefined,false,false

core/src/components.d.ts

@@ -807,6 +807,10 @@ export namespace Components {
           * If `true`, the user cannot interact with the chip.
          */
         "disabled": boolean;
+        /**
+          * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip with muted, subtle colors.  Only applies to the `ionic` theme.
+         */
+        "hue"?: 'bold' | 'subtle';
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -6287,6 +6291,10 @@ declare namespace LocalJSX {
           * If `true`, the user cannot interact with the chip.
          */
         "disabled"?: boolean;
+        /**
+          * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip 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/chip/chip.common.scss

@@ -0,0 +1,36 @@
+@import "../../themes/mixins";
+
+// Chip: Common Styles
+// --------------------------------------------------
+
+:host {
+  /**
+   * @prop --background: Background of the chip
+   * @prop --color: Color of the chip
+   * @prop --border-radius: Border radius of the chip
+   */
+  @include font-smoothing();
+
+  display: inline-flex;
+
+  position: relative;
+
+  align-items: center;
+  justify-content: center;
+
+  background: var(--background);
+  color: var(--color);
+
+  cursor: pointer;
+
+  overflow: hidden;
+
+  box-sizing: border-box;
+
+  vertical-align: middle;
+}
+
+:host(.chip-disabled) {
+  cursor: default;
+  pointer-events: none;
+}

core/src/components/chip/chip.ionic.scss

@@ -1,42 +1,26 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./chip.common";
 
 // Ionic Chip
 // --------------------------------------------------
 
 :host {
-  --background: #{globals.$ion-primitives-neutral-100};
-  --color: #{globals.$ion-primitives-neutral-900};
+  /**
+   * @prop --focus-ring-color: Color of the focus ring
+   * @prop --focus-ring-width: Width of the focus ring
+   */
   --focus-ring-color: #{globals.$ion-border-focus-default};
   --focus-ring-width: #{globals.$ion-border-size-050};
 
-  @include globals.font-smoothing;
   @include globals.padding(globals.$ion-space-150, globals.$ion-space-200);
   @include globals.border-radius(var(--border-radius));
 
-  display: inline-flex;
-
-  position: relative;
-
-  align-items: center;
-  justify-content: center;
-
   gap: globals.$ion-space-100;
 
-  background: var(--background);
-  color: var(--color);
-
   font-family: globals.$ion-font-family;
   font-weight: globals.$ion-font-weight-medium;
 
   line-height: globals.$ion-font-line-height-full;
-
-  cursor: pointer;
-
-  overflow: hidden;
-
-  box-sizing: border-box;
-
-  vertical-align: middle;
 }
 
 // Outline Chip
@@ -45,13 +29,6 @@
 :host(.chip-outline) {
   border-width: globals.$ion-border-size-025;
   border-style: globals.$ion-border-style-solid;
-  border-color: globals.$ion-primitives-neutral-100;
-
-  background: transparent;
-}
-
-:host(.chip-outline.ion-color) {
-  border-color: globals.current-color(base, 0.32);
 }
 
 // Chip: Focus
@@ -66,12 +43,20 @@
 // ---------------------------------------------
 
 @media (any-hover: hover) {
-  :host(:hover) {
+  :host(.chip-subtle:hover) {
     --background: #{globals.$ion-primitives-neutral-200};
   }
 
-  :host(.ion-color:hover) {
-    background: globals.current-color(base, 0.12);
+  :host(.chip-bold:hover) {
+    --background: #{globals.$ion-primitives-neutral-1100};
+  }
+
+  :host(.chip-subtle.ion-color:hover) {
+    background: globals.current-color(tint, $subtle: true);
+  }
+
+  :host(.chip-bold.ion-color:hover) {
+    background: globals.current-color(shade);
   }
 }
 
@@ -80,7 +65,6 @@
 
 :host(.chip-disabled) {
   opacity: 0.6;
-  pointer-events: none;
 }
 
 // Chip Shapes
@@ -110,7 +94,7 @@
 :host(.chip-small) {
   min-height: globals.$ion-scale-600;
 
-  font-size: #{globals.$ion-font-size-300};
+  font-size: globals.$ion-font-size-300;
 }
 
 :host(.chip-large) {
@@ -119,18 +103,51 @@
   font-size: globals.$ion-font-size-350;
 }
 
+// Subtle Chip
+// ---------------------------------------------
+
+:host(.chip-subtle) {
+  --background: #{globals.$ion-primitives-neutral-100};
+  --color: #{globals.$ion-primitives-neutral-800};
+}
+
+:host(.chip-outline.chip-subtle) {
+  border-color: globals.$ion-primitives-neutral-300;
+}
+
+// Bold Chip
+// ---------------------------------------------
+
+:host(.chip-bold) {
+  --background: #{globals.$ion-bg-neutral-bold-default};
+  --color: #{globals.$ion-primitives-base-white};
+}
+
+:host(.chip-outline.chip-bold) {
+  // TODO(FW-6450): this is a made up design choice based on a
+  // darker shade of the background color
+  border-color: globals.$ion-primitives-neutral-1200;
+}
+
 // Chip Colors
 // ---------------------------------------------
 
-:host(.ion-color) {
-  background: globals.current-color(base, 0.08);
-  color: globals.current-color(shade);
+// Subtle
+:host(.chip-subtle.ion-color) {
+  background: globals.current-color(base, $subtle: true);
+  color: globals.current-color(contrast, $subtle: true);
+}
+
+:host(.chip-subtle.chip-outline.ion-color) {
+  border-color: globals.current-color(shade, $subtle: true);
 }
 
-:host(.ion-color:focus) {
-  background: globals.current-color(base, 0.12);
+// Bold
+:host(.chip-bold.ion-color) {
+  background: globals.current-color(base);
+  color: globals.current-color(contrast);
 }
 
-:host(.ion-color.ion-activated) {
-  background: globals.current-color(base, 0.16);
+:host(.chip-bold.chip-outline.ion-color) {
+  border-color: globals.current-color(shade);
 }

core/src/components/chip/chip.ios.scss

@@ -1,4 +1,4 @@
-@import "./chip";
+@import "./chip.native";
 @import "./chip.vars";
 
 :host {

core/src/components/chip/chip.md.scss

@@ -1,4 +1,4 @@
-@import "./chip";
+@import "./chip.native";
 @import "./chip.vars";
 
 :host {

core/src/components/chip/chip.scss renamed to core/src/components/chip/chip.native.scss

@@ -1,45 +1,22 @@
 @import "../../themes/native/native.globals";
 @import "./chip.vars";
+@import "./chip.common";
 
 :host {
-  /**
-   * @prop --background: Background of the chip
-   * @prop --color: Color of the chip
-   * @prop --border-radius: Border radius of the chip
-   */
   --background: #{rgba($text-color-rgb, 0.12)};
   --color: #{rgba($text-color-rgb, 0.87)};
 
   @include border-radius(var(--border-radius));
-  @include font-smoothing();
   @include margin(4px);
   @include padding(6px, 12px);
 
-  display: inline-flex;
-
-  position: relative;
-
-  align-items: center;
-
   min-height: 32px;
 
-  background: var(--background);
-  color: var(--color);
-
   font-family: $font-family-base;
-
-  cursor: pointer;
-
-  overflow: hidden;
-
-  vertical-align: middle;
-  box-sizing: border-box;
 }
 
 :host(.chip-disabled) {
-  cursor: default;
   opacity: 0.4;
-  pointer-events: none;
 }
 
 // Chip Colors
@@ -58,6 +35,15 @@
   background: current-color(base, 0.16);
 }
 
+// Chip: Hover
+// ---------------------------------------------
+
+@media (any-hover: hover) {
+  :host(.ion-color:hover) {
+    background: current-color(base, 0.12);
+  }
+}
+
 // Outline Chip
 // ---------------------------------------------
 

core/src/components/chip/chip.tsx

@@ -37,6 +37,14 @@ export class Chip implements ComponentInterface {
    */
   @Prop() disabled = false;
 
+  /**
+   * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for
+   * a chip with muted, subtle colors.
+   *
+   * Only applies to the `ionic` theme.
+   */
+  @Prop() hue?: 'bold' | 'subtle' = 'subtle';
+
   /**
    * Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully
    * rounded corners, or `"rectangular"` for a chip without rounded corners.
@@ -81,9 +89,9 @@ export class Chip implements ComponentInterface {
   }
 
   render() {
+    const { hue } = this;
     const theme = getIonTheme(this);
     const size = this.getSize();
-
     const shape = this.getShape();
 
     return (
@@ -97,6 +105,7 @@ export class Chip implements ComponentInterface {
           'ion-activatable': true,
           'ion-focusable': !this.disabled,
           [`chip-${size}`]: size !== undefined,
+          [`chip-${hue}`]: hue !== undefined,
         })}
       >
         <slot></slot>