feat(item-option): add hue property for the ionic theme (#30332)

Issue number: internal

---------

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

## What is the new behavior?
Adds support for the `subtle` hue for the item option. Defaults to
`subtle`.

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

Author: brandyscarney

core/api.txt

@@ -1190,6 +1190,7 @@ ion-item-option,prop,disabled,boolean,false,false,false
 ion-item-option,prop,download,string | undefined,undefined,false,false
 ion-item-option,prop,expandable,boolean,false,false,false
 ion-item-option,prop,href,string | undefined,undefined,false,false
+ion-item-option,prop,hue,"bold" | "subtle" | undefined,'subtle',false,false
 ion-item-option,prop,mode,"ios" | "md",undefined,false,false
 ion-item-option,prop,rel,string | undefined,undefined,false,false
 ion-item-option,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false

core/src/components.d.ts

@@ -1704,6 +1704,10 @@ export namespace Components {
           * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
          */
         "href": string | undefined;
+        /**
+          * Set to `"bold"` for an option with vibrant, bold colors or to `"subtle"` for an option with muted, subtle colors.  Only applies to the `ionic` theme.
+         */
+        "hue"?: 'bold' | 'subtle';
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -7204,6 +7208,10 @@ declare namespace LocalJSX {
           * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
          */
         "href"?: string | undefined;
+        /**
+          * Set to `"bold"` for an option with vibrant, bold colors or to `"subtle"` for an option 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/item-option/item-option.scss renamed to core/src/components/item-option/item-option.common.scss

@@ -1,30 +1,19 @@
-@import "./item-option.vars";
+@import "../../themes/mixins";
 
-// Item Option
+// Common Item Option
 // --------------------------------------------------
 
 :host {
   /**
    * @prop --background: Background of the item option
    * @prop --color: Color of the item option
    */
-  --background: #{ion-color(primary, base)};
-  --color: #{ion-color(primary, contrast)};
-
   background: var(--background);
   color: var(--color);
-
-  font-family: $font-family-base;
-}
-
-:host(.ion-color) {
-  background: current-color(base);
-  color: current-color(contrast);
 }
 
 .button-native {
   @include text-inherit();
-  @include padding(0, 0.7em);
 
   display: inline-block;
 
@@ -72,23 +61,6 @@
   flex-shrink: 0;
 }
 
-::slotted([slot="start"]) {
-  @include margin(0, 5px, 0, 0);
-}
-
-::slotted([slot="end"]) {
-  @include margin(0, 0, 0, 5px);
-}
-
-::slotted([slot="icon-only"]) {
-  @include padding(0);
-  @include margin(0, 10px);
-
-  min-width: 0.9em;
-
-  font-size: 1.8em;
-}
-
 // Item Expandable Animation
 // --------------------------------------------------
 
@@ -100,7 +72,7 @@
   transition-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
 }
 
-// Item Disabled Styling
+// Item Option: Disabled
 // --------------------------------------------------
 
 :host(.item-option-disabled) {
@@ -109,6 +81,5 @@
 
 :host(.item-option-disabled) .button-native {
   cursor: default;
-  opacity: 0.5;
   pointer-events: none;
 }

core/src/components/item-option/item-option.ionic.scss

@@ -1,5 +1,5 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
-@import "./item-option";
+@use "./item-option.common";
 
 // Ionic Item Option
 // --------------------------------------------------
@@ -29,11 +29,11 @@
 }
 
 ::slotted([slot="start"]) {
-  @include margin(0, globals.$ion-space-100, 0, 0);
+  @include globals.margin(0, globals.$ion-space-100, 0, 0);
 }
 
 ::slotted([slot="end"]) {
-  @include margin(0, 0, 0, globals.$ion-space-100);
+  @include globals.margin(0, 0, 0, globals.$ion-space-100);
 }
 
 ::slotted(ion-icon),
@@ -75,3 +75,31 @@
 :host(.item-option-disabled) .button-native {
   opacity: 1;
 }
+
+// Subtle Item Option
+// --------------------------------------------------
+
+:host(.item-option-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)};
+}
+
+:host(.item-option-subtle.ion-color) {
+  background: globals.current-color(base, $subtle: true);
+  color: globals.current-color(contrast, $subtle: true);
+}
+
+// Bold Item Option
+// --------------------------------------------------
+
+:host(.item-option-bold) {
+  --background: #{globals.ion-color(primary, base)};
+  --background-activated: #{globals.ion-color(primary, shade)};
+  --color: #{globals.ion-color(primary, contrast)};
+}
+
+:host(.item-option-bold.ion-color) {
+  background: globals.current-color(base);
+  color: globals.current-color(contrast);
+}

core/src/components/item-option/item-option.ios.scss

@@ -1,4 +1,4 @@
-@import "./item-option";
+@import "./item-option.native";
 @import "./item-option.ios.vars";
 
 // iOS Item Option

core/src/components/item-option/item-option.md.scss

@@ -1,4 +1,4 @@
-@import "./item-option";
+@import "./item-option.native";
 @import "./item-option.md.vars";
 
 // Material Design Item Option

core/src/components/item-option/item-option.native.scss

@@ -0,0 +1,46 @@
+@import "../../themes/native/native.globals";
+@import "./item-option.vars";
+@import "./item-option.common";
+
+// Native Item Option
+// --------------------------------------------------
+
+:host {
+  --background: #{ion-color(primary, base)};
+  --color: #{ion-color(primary, contrast)};
+
+  font-family: $font-family-base;
+}
+
+:host(.ion-color) {
+  background: current-color(base);
+  color: current-color(contrast);
+}
+
+.button-native {
+  @include padding(0, 0.7em);
+}
+
+::slotted([slot="start"]) {
+  @include margin(0, 5px, 0, 0);
+}
+
+::slotted([slot="end"]) {
+  @include margin(0, 0, 0, 5px);
+}
+
+::slotted([slot="icon-only"]) {
+  @include padding(0);
+  @include margin(0, 10px);
+
+  min-width: 0.9em;
+
+  font-size: 1.8em;
+}
+
+// Item Option: Disabled
+// --------------------------------------------------
+
+:host(.item-option-disabled) .button-native {
+  opacity: 0.5;
+}

core/src/components/item-option/item-option.tsx

@@ -62,6 +62,14 @@ export class ItemOption implements ComponentInterface, AnchorInterface, ButtonIn
    */
   @Prop() href: string | undefined;
 
+  /**
+   * Set to `"bold"` for an option with vibrant, bold colors or to `"subtle"` for
+   * an option with muted, subtle colors.
+   *
+   * Only applies to the `ionic` theme.
+   */
+  @Prop() hue?: 'bold' | 'subtle' = 'subtle';
+
   /**
    * Specifies the relationship of the target object to the link object.
    * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
@@ -113,7 +121,7 @@ export class ItemOption implements ComponentInterface, AnchorInterface, ButtonIn
   }
 
   render() {
-    const { disabled, expandable, href } = this;
+    const { disabled, expandable, href, hue } = this;
     const TagType = href === undefined ? 'button' : ('a' as any);
     const theme = getIonTheme(this);
     const shape = this.getShape();
@@ -133,6 +141,7 @@ export class ItemOption implements ComponentInterface, AnchorInterface, ButtonIn
         class={createColorClasses(this.color, {
           [theme]: true,
           [`item-option-${shape}`]: shape !== undefined,
+          [`item-option-${hue}`]: hue !== undefined,
           'item-option-disabled': disabled,
           'item-option-expandable': expandable,
           'ion-activatable': true,