feat(button): add the subtle hue

BREAKING.md

@@ -64,11 +64,12 @@ The following breaking changes apply to `ion-button`:
 7. The `ios` button follows iOS 17 for its font, icons and disabled state. <sup>[7](#version-10x-button-ios-17)</sup>
 8. A badge without a `vertical` position now has a gap between it and the label, and no longer makes the button taller than its `min.height`. To remove the gap, set `IonButton.size.<size>.badge.margin.start` for global styles or `--ion-button-size-<size>-badge-margin-start` for component-specific styles to `0`.
 9. A button with an icon in the `icon-only` slot now shows only that icon and any badge with a `vertical` position. Text, elements in the `start` and `end` slots, and other content are hidden. Hidden text still names the button for assistive technology. To show other content, remove the `icon-only` slot and use the `start` or `end` slot for the icon.
-10. CSS variables have been replaced. <sup>[10](#version-10x-button-replaced-css-variables)</sup>
-11. `--padding-*` CSS variables are no longer part of the documented public API (but remain functional). <sup>[11](#version-10x-button-padding-variables)</sup>
-12. The fill, size, shape and expand classes have been renamed. <sup>[12](#version-10x-button-renamed-classes)</sup>
-13. The `default` size has been deprecated. <sup>[13](#version-10x-button-deprecated-default-size)</sup>
-14. Theme classes (`ion-button.md`, `ion-button.ios`) are no longer supported. <sup>[14](#version-10x-button-theme-classes)</sup>
+10. The text of `outline` buttons in `md` and `ios` now uses the color's darker `foreground` variant instead of `base`, matching `clear` buttons, since it sits on the page rather than on a fill of the color. In `ios`, `clear` buttons with a `color` also keep `foreground` on hover and focus. To revert, set `IonButton.hue.bold.outline.<state>.color` (`.semantic.<state>.color` with a `color`) for global styles or `--ion-button-hue-bold-outline-<state>-color` (`--ion-button-hue-bold-outline-semantic-<state>-color`) for component-specific styles to the color's `base`.
+11. CSS variables have been replaced. <sup>[11](#version-10x-button-replaced-css-variables)</sup>
+12. `--padding-*` CSS variables are no longer part of the documented public API (but remain functional). <sup>[12](#version-10x-button-padding-variables)</sup>
+13. The fill, size, shape and expand classes have been renamed. <sup>[13](#version-10x-button-renamed-classes)</sup>
+14. The `default` size has been deprecated. <sup>[14](#version-10x-button-deprecated-default-size)</sup>
+15. Theme classes (`ion-button.md`, `ion-button.ios`) are no longer supported. <sup>[15](#version-10x-button-theme-classes)</sup>
 
 <h5 id="version-10x-button-md-material-design-2">Material Design 2 in <code>md</code></h5>
 

core/api.txt

@@ -439,6 +439,7 @@ ion-button,prop,expand,"block" | "full" | undefined,undefined,false,true
 ion-button,prop,fill,"clear" | "default" | "outline" | "solid" | undefined,undefined,false,true
 ion-button,prop,form,HTMLFormElement | string | undefined,undefined,false,false
 ion-button,prop,href,string | undefined,undefined,false,false
+ion-button,prop,hue,"bold" | "subtle" | undefined,undefined,false,false
 ion-button,prop,mode,"ios" | "md",undefined,false,false
 ion-button,prop,rel,string | undefined,undefined,false,false
 ion-button,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
@@ -571,6 +572,126 @@ ion-button,css-prop,--ion-button-hue-bold-solid-semantic-hover-color
 ion-button,css-prop,--ion-button-hue-bold-solid-semantic-ripple-effect-color
 ion-button,css-prop,--ion-button-hue-bold-solid-semantic-ripple-effect-opacity
 ion-button,css-prop,--ion-button-hue-bold-solid-strong-font-weight
+ion-button,css-prop,--ion-button-hue-subtle-clear-activated-background
+ion-button,css-prop,--ion-button-hue-subtle-clear-activated-box-shadow
+ion-button,css-prop,--ion-button-hue-subtle-clear-activated-color
+ion-button,css-prop,--ion-button-hue-subtle-clear-activated-opacity
+ion-button,css-prop,--ion-button-hue-subtle-clear-default-background
+ion-button,css-prop,--ion-button-hue-subtle-clear-default-border-color
+ion-button,css-prop,--ion-button-hue-subtle-clear-default-border-style
+ion-button,css-prop,--ion-button-hue-subtle-clear-default-border-width
+ion-button,css-prop,--ion-button-hue-subtle-clear-default-box-shadow
+ion-button,css-prop,--ion-button-hue-subtle-clear-default-color
+ion-button,css-prop,--ion-button-hue-subtle-clear-default-font-weight
+ion-button,css-prop,--ion-button-hue-subtle-clear-disabled-background
+ion-button,css-prop,--ion-button-hue-subtle-clear-disabled-border-color
+ion-button,css-prop,--ion-button-hue-subtle-clear-disabled-box-shadow
+ion-button,css-prop,--ion-button-hue-subtle-clear-disabled-color
+ion-button,css-prop,--ion-button-hue-subtle-clear-disabled-opacity
+ion-button,css-prop,--ion-button-hue-subtle-clear-focus-background
+ion-button,css-prop,--ion-button-hue-subtle-clear-focus-box-shadow
+ion-button,css-prop,--ion-button-hue-subtle-clear-focus-color
+ion-button,css-prop,--ion-button-hue-subtle-clear-hover-background
+ion-button,css-prop,--ion-button-hue-subtle-clear-hover-box-shadow
+ion-button,css-prop,--ion-button-hue-subtle-clear-hover-color
+ion-button,css-prop,--ion-button-hue-subtle-clear-hover-opacity
+ion-button,css-prop,--ion-button-hue-subtle-clear-ripple-effect-color
+ion-button,css-prop,--ion-button-hue-subtle-clear-ripple-effect-opacity
+ion-button,css-prop,--ion-button-hue-subtle-clear-semantic-activated-background
+ion-button,css-prop,--ion-button-hue-subtle-clear-semantic-activated-color
+ion-button,css-prop,--ion-button-hue-subtle-clear-semantic-default-background
+ion-button,css-prop,--ion-button-hue-subtle-clear-semantic-default-border-color
+ion-button,css-prop,--ion-button-hue-subtle-clear-semantic-default-color
+ion-button,css-prop,--ion-button-hue-subtle-clear-semantic-disabled-background
+ion-button,css-prop,--ion-button-hue-subtle-clear-semantic-disabled-border-color
+ion-button,css-prop,--ion-button-hue-subtle-clear-semantic-disabled-color
+ion-button,css-prop,--ion-button-hue-subtle-clear-semantic-focus-background
+ion-button,css-prop,--ion-button-hue-subtle-clear-semantic-focus-color
+ion-button,css-prop,--ion-button-hue-subtle-clear-semantic-hover-background
+ion-button,css-prop,--ion-button-hue-subtle-clear-semantic-hover-color
+ion-button,css-prop,--ion-button-hue-subtle-clear-semantic-ripple-effect-color
+ion-button,css-prop,--ion-button-hue-subtle-clear-semantic-ripple-effect-opacity
+ion-button,css-prop,--ion-button-hue-subtle-clear-strong-font-weight
+ion-button,css-prop,--ion-button-hue-subtle-outline-activated-background
+ion-button,css-prop,--ion-button-hue-subtle-outline-activated-box-shadow
+ion-button,css-prop,--ion-button-hue-subtle-outline-activated-color
+ion-button,css-prop,--ion-button-hue-subtle-outline-activated-opacity
+ion-button,css-prop,--ion-button-hue-subtle-outline-default-background
+ion-button,css-prop,--ion-button-hue-subtle-outline-default-border-color
+ion-button,css-prop,--ion-button-hue-subtle-outline-default-border-style
+ion-button,css-prop,--ion-button-hue-subtle-outline-default-border-width
+ion-button,css-prop,--ion-button-hue-subtle-outline-default-box-shadow
+ion-button,css-prop,--ion-button-hue-subtle-outline-default-color
+ion-button,css-prop,--ion-button-hue-subtle-outline-default-font-weight
+ion-button,css-prop,--ion-button-hue-subtle-outline-disabled-background
+ion-button,css-prop,--ion-button-hue-subtle-outline-disabled-border-color
+ion-button,css-prop,--ion-button-hue-subtle-outline-disabled-box-shadow
+ion-button,css-prop,--ion-button-hue-subtle-outline-disabled-color
+ion-button,css-prop,--ion-button-hue-subtle-outline-disabled-opacity
+ion-button,css-prop,--ion-button-hue-subtle-outline-focus-background
+ion-button,css-prop,--ion-button-hue-subtle-outline-focus-box-shadow
+ion-button,css-prop,--ion-button-hue-subtle-outline-focus-color
+ion-button,css-prop,--ion-button-hue-subtle-outline-hover-background
+ion-button,css-prop,--ion-button-hue-subtle-outline-hover-box-shadow
+ion-button,css-prop,--ion-button-hue-subtle-outline-hover-color
+ion-button,css-prop,--ion-button-hue-subtle-outline-hover-opacity
+ion-button,css-prop,--ion-button-hue-subtle-outline-ripple-effect-color
+ion-button,css-prop,--ion-button-hue-subtle-outline-ripple-effect-opacity
+ion-button,css-prop,--ion-button-hue-subtle-outline-semantic-activated-background
+ion-button,css-prop,--ion-button-hue-subtle-outline-semantic-activated-color
+ion-button,css-prop,--ion-button-hue-subtle-outline-semantic-default-background
+ion-button,css-prop,--ion-button-hue-subtle-outline-semantic-default-border-color
+ion-button,css-prop,--ion-button-hue-subtle-outline-semantic-default-color
+ion-button,css-prop,--ion-button-hue-subtle-outline-semantic-disabled-background
+ion-button,css-prop,--ion-button-hue-subtle-outline-semantic-disabled-border-color
+ion-button,css-prop,--ion-button-hue-subtle-outline-semantic-disabled-color
+ion-button,css-prop,--ion-button-hue-subtle-outline-semantic-focus-background
+ion-button,css-prop,--ion-button-hue-subtle-outline-semantic-focus-color
+ion-button,css-prop,--ion-button-hue-subtle-outline-semantic-hover-background
+ion-button,css-prop,--ion-button-hue-subtle-outline-semantic-hover-color
+ion-button,css-prop,--ion-button-hue-subtle-outline-semantic-ripple-effect-color
+ion-button,css-prop,--ion-button-hue-subtle-outline-semantic-ripple-effect-opacity
+ion-button,css-prop,--ion-button-hue-subtle-outline-strong-font-weight
+ion-button,css-prop,--ion-button-hue-subtle-solid-activated-background
+ion-button,css-prop,--ion-button-hue-subtle-solid-activated-box-shadow
+ion-button,css-prop,--ion-button-hue-subtle-solid-activated-color
+ion-button,css-prop,--ion-button-hue-subtle-solid-activated-opacity
+ion-button,css-prop,--ion-button-hue-subtle-solid-default-background
+ion-button,css-prop,--ion-button-hue-subtle-solid-default-border-color
+ion-button,css-prop,--ion-button-hue-subtle-solid-default-border-style
+ion-button,css-prop,--ion-button-hue-subtle-solid-default-border-width
+ion-button,css-prop,--ion-button-hue-subtle-solid-default-box-shadow
+ion-button,css-prop,--ion-button-hue-subtle-solid-default-color
+ion-button,css-prop,--ion-button-hue-subtle-solid-default-font-weight
+ion-button,css-prop,--ion-button-hue-subtle-solid-disabled-background
+ion-button,css-prop,--ion-button-hue-subtle-solid-disabled-border-color
+ion-button,css-prop,--ion-button-hue-subtle-solid-disabled-box-shadow
+ion-button,css-prop,--ion-button-hue-subtle-solid-disabled-color
+ion-button,css-prop,--ion-button-hue-subtle-solid-disabled-opacity
+ion-button,css-prop,--ion-button-hue-subtle-solid-focus-background
+ion-button,css-prop,--ion-button-hue-subtle-solid-focus-box-shadow
+ion-button,css-prop,--ion-button-hue-subtle-solid-focus-color
+ion-button,css-prop,--ion-button-hue-subtle-solid-hover-background
+ion-button,css-prop,--ion-button-hue-subtle-solid-hover-box-shadow
+ion-button,css-prop,--ion-button-hue-subtle-solid-hover-color
+ion-button,css-prop,--ion-button-hue-subtle-solid-hover-opacity
+ion-button,css-prop,--ion-button-hue-subtle-solid-ripple-effect-color
+ion-button,css-prop,--ion-button-hue-subtle-solid-ripple-effect-opacity
+ion-button,css-prop,--ion-button-hue-subtle-solid-semantic-activated-background
+ion-button,css-prop,--ion-button-hue-subtle-solid-semantic-activated-color
+ion-button,css-prop,--ion-button-hue-subtle-solid-semantic-default-background
+ion-button,css-prop,--ion-button-hue-subtle-solid-semantic-default-border-color
+ion-button,css-prop,--ion-button-hue-subtle-solid-semantic-default-color
+ion-button,css-prop,--ion-button-hue-subtle-solid-semantic-disabled-background
+ion-button,css-prop,--ion-button-hue-subtle-solid-semantic-disabled-border-color
+ion-button,css-prop,--ion-button-hue-subtle-solid-semantic-disabled-color
+ion-button,css-prop,--ion-button-hue-subtle-solid-semantic-focus-background
+ion-button,css-prop,--ion-button-hue-subtle-solid-semantic-focus-color
+ion-button,css-prop,--ion-button-hue-subtle-solid-semantic-hover-background
+ion-button,css-prop,--ion-button-hue-subtle-solid-semantic-hover-color
+ion-button,css-prop,--ion-button-hue-subtle-solid-semantic-ripple-effect-color
+ion-button,css-prop,--ion-button-hue-subtle-solid-semantic-ripple-effect-opacity
+ion-button,css-prop,--ion-button-hue-subtle-solid-strong-font-weight
 ion-button,css-prop,--ion-button-letter-spacing
 ion-button,css-prop,--ion-button-margin-bottom
 ion-button,css-prop,--ion-button-margin-end

core/src/components.d.ts

@@ -629,6 +629,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 a button with vibrant, bold colors or to `"subtle"` for a button with muted, subtle colors.  Defaults to `"bold"` if both the hue property and theme config are unset.
+         */
+        "hue"?: Hue;
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -6488,6 +6492,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 a button with vibrant, bold colors or to `"subtle"` for a button with muted, subtle colors.  Defaults to `"bold"` if both the hue property and theme config are unset.
+         */
+        "hue"?: Hue;
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -10493,6 +10501,7 @@ declare namespace LocalJSX {
         "disabled": boolean;
         "expand": IonButtonExpand;
         "fill": IonButtonFill | 'default';
+        "hue": Hue;
         "routerDirection": RouterDirection;
         "download": string | undefined;
         "href": string | undefined;