feat(spinner): add recipe and tokens (#31014)

Issue number: internal

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>

Author: thetaPC

BREAKING.md

@@ -19,6 +19,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
   - [Card](#version-9x-card)
   - [Chip](#version-9x-chip)
   - [Grid](#version-9x-grid)
+  - [Spinner](#version-9x-spinner)
 
 <h2 id="version-9x-components">Components</h2>
 
@@ -32,7 +33,14 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 
 <h4 id="version-9x-chip">Chip</h4>
 
-- The `border-radius` of the `ios` and `md` chip now defaults to `10px` and `8px`, respectively, instead of `16px` in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"round"`, or override the `--border-radius` CSS variable to specify a different value.
+- Component CSS variables have been removed. The component now utilizes the centralized Ionic Theming system. Global updates should be managed via the theme tokens file, while component-specific overrides are handled through localized CSS variables.
+   - `--color` is replaced by `IonChip.hue.bold.solid.default` for global styles and `--ion-chip-hue-bold-solid-default-color` for component-specific styles if the chip has a bold hue and solid fill.
+   - `--color` is replaced by `IonChip.hue.bold.outline.default` for global styles and `--ion-chip-hue-bold-outline-default-color` for component-specific styles if the chip has a bold hue and outline fill.
+   - `--color` is replaced by `IonChip.hue.subtle.solid.default` for global styles and `--ion-chip-hue-subtle-solid-default-color` for component-specific styles if the chip has a subtle hue and solid fill.
+   - `--color` is replaced by `IonChip.hue.subtle.outline.default` for global styles and `--ion-chip-hue-subtle-outline-default-color` for component-specific styles if the chip has a subtle hue and outline fill.
+- The `outline` property has been deprecated. To achieve an outlined chip, set the `fill` property to `"outline"`. The class `.chip-outline` has also been updated to `.chip-fill-outline` for clarity.
+- Specific theme classes (e.g., `ion-chip.md`) are no longer supported. Style modifications based on the active theme must be implemented using theme tokens rather than direct class targeting.
+- The `border-radius` of the `ios` and `md` chip now defaults to `10px` and `8px`, respectively, instead of `16px` in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"round"`, or override the `IonChip.shape.round.border.radius` to specify a different value for global styles and `--ion-chip-shape-round-border-radius` for component-specific styles.
 
 <h4 id="version-9x-grid">Grid</h4>
 
@@ -140,4 +148,13 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
     </ion-col>
   </ion-row>
 </ion-grid>
-```
+```
+
+<h4 id="version-9x-spinner">Spinner</h4>
+
+- Component CSS variables have been removed. The component now utilizes the centralized Ionic Theming system. Global updates should be managed via the theme tokens file, while component-specific overrides are handled through localized CSS variables.
+   - `--color` is replaced by `IonSpinner.color` for global styles and
+`--ion-spinner-color` for component-specific styles.
+- CSS classes now include the property name to improve clarity.
+  - `.spinner-[spinner-name]` → `.spinner-name-[spinner-name]`
+- Specific theme classes (e.g., `ion-spinner.md`) are no longer supported. Style modifications based on the active theme must be implemented using theme tokens rather than direct class targeting.

core/api.txt

@@ -602,11 +602,101 @@ 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,css-prop,--border-radius
-ion-chip,css-prop,--color
-ion-chip,css-prop,--focus-ring-color
-ion-chip,css-prop,--focus-ring-style
-ion-chip,css-prop,--focus-ring-width
+ion-chip,css-prop,--ion-chip-avatar-height
+ion-chip,css-prop,--ion-chip-avatar-leading-margin-bottom
+ion-chip,css-prop,--ion-chip-avatar-leading-margin-end
+ion-chip,css-prop,--ion-chip-avatar-leading-margin-start
+ion-chip,css-prop,--ion-chip-avatar-leading-margin-top
+ion-chip,css-prop,--ion-chip-avatar-trailing-margin-bottom
+ion-chip,css-prop,--ion-chip-avatar-trailing-margin-end
+ion-chip,css-prop,--ion-chip-avatar-trailing-margin-start
+ion-chip,css-prop,--ion-chip-avatar-trailing-margin-top
+ion-chip,css-prop,--ion-chip-avatar-width
+ion-chip,css-prop,--ion-chip-font-weight
+ion-chip,css-prop,--ion-chip-gap
+ion-chip,css-prop,--ion-chip-hue-bold-outline-activated-background
+ion-chip,css-prop,--ion-chip-hue-bold-outline-default-background
+ion-chip,css-prop,--ion-chip-hue-bold-outline-default-border-color
+ion-chip,css-prop,--ion-chip-hue-bold-outline-default-border-style
+ion-chip,css-prop,--ion-chip-hue-bold-outline-default-border-width
+ion-chip,css-prop,--ion-chip-hue-bold-outline-default-color
+ion-chip,css-prop,--ion-chip-hue-bold-outline-focus-background
+ion-chip,css-prop,--ion-chip-hue-bold-outline-hover-background
+ion-chip,css-prop,--ion-chip-hue-bold-outline-semantic-activated-background
+ion-chip,css-prop,--ion-chip-hue-bold-outline-semantic-default-background
+ion-chip,css-prop,--ion-chip-hue-bold-outline-semantic-default-border-color
+ion-chip,css-prop,--ion-chip-hue-bold-outline-semantic-default-border-style
+ion-chip,css-prop,--ion-chip-hue-bold-outline-semantic-default-border-width
+ion-chip,css-prop,--ion-chip-hue-bold-outline-semantic-default-color
+ion-chip,css-prop,--ion-chip-hue-bold-outline-semantic-focus-background
+ion-chip,css-prop,--ion-chip-hue-bold-outline-semantic-hover-background
+ion-chip,css-prop,--ion-chip-hue-bold-solid-activated-background
+ion-chip,css-prop,--ion-chip-hue-bold-solid-default-background
+ion-chip,css-prop,--ion-chip-hue-bold-solid-default-color
+ion-chip,css-prop,--ion-chip-hue-bold-solid-focus-background
+ion-chip,css-prop,--ion-chip-hue-bold-solid-hover-background
+ion-chip,css-prop,--ion-chip-hue-bold-solid-semantic-activated-background
+ion-chip,css-prop,--ion-chip-hue-bold-solid-semantic-default-background
+ion-chip,css-prop,--ion-chip-hue-bold-solid-semantic-default-color
+ion-chip,css-prop,--ion-chip-hue-bold-solid-semantic-focus-background
+ion-chip,css-prop,--ion-chip-hue-bold-solid-semantic-hover-background
+ion-chip,css-prop,--ion-chip-hue-subtle-outline-activated-background
+ion-chip,css-prop,--ion-chip-hue-subtle-outline-default-background
+ion-chip,css-prop,--ion-chip-hue-subtle-outline-default-border-color
+ion-chip,css-prop,--ion-chip-hue-subtle-outline-default-border-style
+ion-chip,css-prop,--ion-chip-hue-subtle-outline-default-border-width
+ion-chip,css-prop,--ion-chip-hue-subtle-outline-default-color
+ion-chip,css-prop,--ion-chip-hue-subtle-outline-focus-background
+ion-chip,css-prop,--ion-chip-hue-subtle-outline-hover-background
+ion-chip,css-prop,--ion-chip-hue-subtle-outline-semantic-activated-background
+ion-chip,css-prop,--ion-chip-hue-subtle-outline-semantic-default-background
+ion-chip,css-prop,--ion-chip-hue-subtle-outline-semantic-default-border-color
+ion-chip,css-prop,--ion-chip-hue-subtle-outline-semantic-default-border-style
+ion-chip,css-prop,--ion-chip-hue-subtle-outline-semantic-default-border-width
+ion-chip,css-prop,--ion-chip-hue-subtle-outline-semantic-default-color
+ion-chip,css-prop,--ion-chip-hue-subtle-outline-semantic-focus-background
+ion-chip,css-prop,--ion-chip-hue-subtle-outline-semantic-hover-background
+ion-chip,css-prop,--ion-chip-hue-subtle-solid-activated-background
+ion-chip,css-prop,--ion-chip-hue-subtle-solid-default-background
+ion-chip,css-prop,--ion-chip-hue-subtle-solid-default-color
+ion-chip,css-prop,--ion-chip-hue-subtle-solid-focus-background
+ion-chip,css-prop,--ion-chip-hue-subtle-solid-hover-background
+ion-chip,css-prop,--ion-chip-hue-subtle-solid-semantic-activated-background
+ion-chip,css-prop,--ion-chip-hue-subtle-solid-semantic-default-background
+ion-chip,css-prop,--ion-chip-hue-subtle-solid-semantic-default-color
+ion-chip,css-prop,--ion-chip-hue-subtle-solid-semantic-focus-background
+ion-chip,css-prop,--ion-chip-hue-subtle-solid-semantic-hover-background
+ion-chip,css-prop,--ion-chip-icon-color
+ion-chip,css-prop,--ion-chip-icon-font-size
+ion-chip,css-prop,--ion-chip-icon-leading-margin-bottom
+ion-chip,css-prop,--ion-chip-icon-leading-margin-end
+ion-chip,css-prop,--ion-chip-icon-leading-margin-start
+ion-chip,css-prop,--ion-chip-icon-leading-margin-top
+ion-chip,css-prop,--ion-chip-icon-trailing-margin-bottom
+ion-chip,css-prop,--ion-chip-icon-trailing-margin-end
+ion-chip,css-prop,--ion-chip-icon-trailing-margin-start
+ion-chip,css-prop,--ion-chip-icon-trailing-margin-top
+ion-chip,css-prop,--ion-chip-letter-spacing
+ion-chip,css-prop,--ion-chip-line-height
+ion-chip,css-prop,--ion-chip-margin-bottom
+ion-chip,css-prop,--ion-chip-margin-end
+ion-chip,css-prop,--ion-chip-margin-start
+ion-chip,css-prop,--ion-chip-margin-top
+ion-chip,css-prop,--ion-chip-padding-bottom
+ion-chip,css-prop,--ion-chip-padding-end
+ion-chip,css-prop,--ion-chip-padding-start
+ion-chip,css-prop,--ion-chip-padding-top
+ion-chip,css-prop,--ion-chip-shape-rectangular-border-radius
+ion-chip,css-prop,--ion-chip-shape-round-border-radius
+ion-chip,css-prop,--ion-chip-shape-soft-border-radius
+ion-chip,css-prop,--ion-chip-size-large-font-size
+ion-chip,css-prop,--ion-chip-size-large-min-height
+ion-chip,css-prop,--ion-chip-size-small-font-size
+ion-chip,css-prop,--ion-chip-size-small-min-height
+ion-chip,css-prop,--ion-chip-state-disabled-opacity
+ion-chip,css-prop,--ion-chip-state-focus-ring-color
+ion-chip,css-prop,--ion-chip-state-focus-ring-style
+ion-chip,css-prop,--ion-chip-state-focus-ring-width
 
 ion-col,shadow
 ion-col,prop,mode,"ios" | "md",undefined,false,false
@@ -2309,10 +2399,24 @@ ion-spinner,prop,mode,"ios" | "md",undefined,false,false
 ion-spinner,prop,name,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-sharp" | "lines-sharp-small" | "lines-small" | undefined,undefined,false,false
 ion-spinner,prop,paused,boolean,false,false,false
 ion-spinner,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | undefined,undefined,false,false
-ion-spinner,prop,theme,"ios" | "md" | "ionic",undefined,false,false
-ion-spinner,css-prop,--color,ionic
-ion-spinner,css-prop,--color,ios
-ion-spinner,css-prop,--color,md
+ion-spinner,css-prop,--ion-spinner-circular-stroke-width
+ion-spinner,css-prop,--ion-spinner-color
+ion-spinner,css-prop,--ion-spinner-crescent-stroke-width
+ion-spinner,css-prop,--ion-spinner-dots-stroke-width
+ion-spinner,css-prop,--ion-spinner-lines-sharp-small-stroke-width
+ion-spinner,css-prop,--ion-spinner-lines-sharp-stroke-width
+ion-spinner,css-prop,--ion-spinner-lines-small-stroke-width
+ion-spinner,css-prop,--ion-spinner-lines-stroke-width
+ion-spinner,css-prop,--ion-spinner-size-large-height
+ion-spinner,css-prop,--ion-spinner-size-large-width
+ion-spinner,css-prop,--ion-spinner-size-medium-height
+ion-spinner,css-prop,--ion-spinner-size-medium-width
+ion-spinner,css-prop,--ion-spinner-size-small-height
+ion-spinner,css-prop,--ion-spinner-size-small-width
+ion-spinner,css-prop,--ion-spinner-size-xlarge-height
+ion-spinner,css-prop,--ion-spinner-size-xlarge-width
+ion-spinner,css-prop,--ion-spinner-size-xsmall-height
+ion-spinner,css-prop,--ion-spinner-size-xsmall-width
 
 ion-split-pane,shadow
 ion-split-pane,prop,contentId,string | undefined,undefined,false,true

core/src/components.d.ts

@@ -39,6 +39,7 @@ import { SegmentViewScrollEvent } from "./components/segment-view/segment-view-i
 import { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
 import { SelectModalOption } from "./components/select-modal/select-modal-interface";
 import { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
+import { SpinnerSize } from "./components/spinner/spinner.interfaces";
 import { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
 import { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
 import { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions, ToastSwipeGestureDirection } from "./components/toast/toast-interface";
@@ -77,6 +78,7 @@ export { SegmentViewScrollEvent } from "./components/segment-view/segment-view-i
 export { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
 export { SelectModalOption } from "./components/select-modal/select-modal-interface";
 export { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
+export { SpinnerSize } from "./components/spinner/spinner.interfaces";
 export { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
 export { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
 export { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions, ToastSwipeGestureDirection } from "./components/toast/toast-interface";
@@ -872,11 +874,11 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * The fill for the chip.  Set to `"outline"` for a chip with a border and background. Set to `"solid"` for a chip with a background.  Defaults to `"solid"`.
+          * The fill for the chip.  Set to `"outline"` for a chip with a border and background. Set to `"solid"` for a chip with a background.  Defaults to `"solid"` if both the fill property and theme config are unset.
          */
         "fill"?: 'outline' | 'solid';
         /**
-          * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip with muted, subtle colors.  Defaults to `"subtle"`.
+          * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip with muted, subtle colors.  Defaults to `"subtle"` if both the hue property and theme config are unset.
          */
         "hue"?: 'bold' | 'subtle';
         /**
@@ -890,11 +892,11 @@ export namespace Components {
          */
         "outline": boolean;
         /**
-          * 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.  Defaults to `"round"`.
+          * 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.  Defaults to `"round"` if both the shape property and theme config are unset.
          */
         "shape"?: 'soft' | 'round' | 'rectangular';
         /**
-          * Set to `"small"` for a chip with less height and padding.  Defaults to `"large"`.
+          * Set to `"small"` for a chip with less height and padding.  Defaults to `"large"` if both the size property and theme config are unset.
          */
         "size"?: 'small' | 'large';
     }
@@ -3881,13 +3883,9 @@ export namespace Components {
          */
         "paused": boolean;
         /**
-          * Set to `"xsmall"` for the smallest size. Set to `"small"` for a smaller size. Set to `"medium"` for a medium size. Set to `"large"` for a large size. Set to `"xlarge"` for the largest size.  Defaults to `"xsmall"` for the `ionic` theme, undefined for all other themes.
+          * Set to `"xsmall"` for the smallest size. Set to `"small"` for a smaller size. Set to `"medium"` for a medium size. Set to `"large"` for a large size. Set to `"xlarge"` for the largest size.  Defaults to `"medium"` if both the size property and theme config are unset.
          */
-        "size"?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
+        "size"?: SpinnerSize;
     }
     interface IonSplitPane {
         /**
@@ -6846,11 +6844,11 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * The fill for the chip.  Set to `"outline"` for a chip with a border and background. Set to `"solid"` for a chip with a background.  Defaults to `"solid"`.
+          * The fill for the chip.  Set to `"outline"` for a chip with a border and background. Set to `"solid"` for a chip with a background.  Defaults to `"solid"` if both the fill property and theme config are unset.
          */
         "fill"?: 'outline' | 'solid';
         /**
-          * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip with muted, subtle colors.  Defaults to `"subtle"`.
+          * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip with muted, subtle colors.  Defaults to `"subtle"` if both the hue property and theme config are unset.
          */
         "hue"?: 'bold' | 'subtle';
         /**
@@ -6864,11 +6862,11 @@ declare namespace LocalJSX {
          */
         "outline"?: boolean;
         /**
-          * 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.  Defaults to `"round"`.
+          * 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.  Defaults to `"round"` if both the shape property and theme config are unset.
          */
         "shape"?: 'soft' | 'round' | 'rectangular';
         /**
-          * Set to `"small"` for a chip with less height and padding.  Defaults to `"large"`.
+          * Set to `"small"` for a chip with less height and padding.  Defaults to `"large"` if both the size property and theme config are unset.
          */
         "size"?: 'small' | 'large';
     }
@@ -9911,13 +9909,9 @@ declare namespace LocalJSX {
          */
         "paused"?: boolean;
         /**
-          * Set to `"xsmall"` for the smallest size. Set to `"small"` for a smaller size. Set to `"medium"` for a medium size. Set to `"large"` for a large size. Set to `"xlarge"` for the largest size.  Defaults to `"xsmall"` for the `ionic` theme, undefined for all other themes.
+          * Set to `"xsmall"` for the smallest size. Set to `"small"` for a smaller size. Set to `"medium"` for a medium size. Set to `"large"` for a large size. Set to `"xlarge"` for the largest size.  Defaults to `"medium"` if both the size property and theme config are unset.
          */
-        "size"?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
+        "size"?: SpinnerSize;
     }
     interface IonSplitPane {
         /**

core/src/components/button/button.common.scss

@@ -208,6 +208,10 @@
   pointer-events: none;
 }
 
+::slotted(ion-spinner) {
+  color: currentColor;
+}
+
 // Button Ripple effect
 // --------------------------------------------------
 

core/src/components/button/button.ionic.scss

@@ -166,9 +166,6 @@
 
 // Button with Spinner
 // -------------------------------------------------------------------------------
-::slotted(ion-spinner) {
-  --color: currentColor;
-}
 
 /* Button containing only a spinner */
 ::slotted(ion-spinner[slot="start"]),