feat(spinner): add recipe and tokens

BREAKING.md

@@ -19,6 +19,8 @@ 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)
+  - [Radio Group](#version-9x-radio-group)
+  - [Spinner](#version-9x-spinner)
 
 <h2 id="version-9x-components">Components</h2>
 
@@ -38,12 +40,6 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 
 - The properties `pull` and `push` have been deprecated and no longer work. A similar look can be achieved with the newly added property `order`.
 
-<h4 id="version-9x-radio-group">Radio Group</h4>
-
-- Converted `ion-radio-group` to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).<br/>
-If you were targeting the internals of `ion-radio-group` in your CSS, you will need to target the `supporting-text`, `helper-text` or `error-text` [Shadow Parts](https://ionicframework.com/docs/theming/css-shadow-parts) instead, or use the provided CSS Variables.<br/>
-Additionally, the `radio-group-wrapper` div element has been removed, causing slotted elements to be direct children of the `ion-radio-group`.
-
 <h5>Example 1: Swap two columns</h5>
 
 **Version up to 8.x**
@@ -140,4 +136,19 @@ 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-radio-group">Radio Group</h4>
+
+- Converted `ion-radio-group` to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).<br/>
+If you were targeting the internals of `ion-radio-group` in your CSS, you will need to target the `supporting-text`, `helper-text` or `error-text` [Shadow Parts](https://ionicframework.com/docs/theming/css-shadow-parts) instead, or use the provided CSS Variables.<br/>
+Additionally, the `radio-group-wrapper` div element has been removed, causing slotted elements to be direct children of the `ion-radio-group`.
+
+<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,6 @@ 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-col,shadow
 ion-col,prop,mode,"ios" | "md",undefined,false,false
@@ -2309,10 +2304,6 @@ 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-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";
@@ -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"`.
          */
-        "size"?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
+        "size"?: SpinnerSize;
     }
     interface IonSplitPane {
         /**
@@ -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"`.
          */
-        "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/chip/chip.scss

@@ -5,19 +5,7 @@
 // --------------------------------------------------
 
 :host {
-  /**
-   * @prop --border-radius: Border radius of the chip
-   * @prop --color: Color of the chip
-   * @prop --focus-ring-color: Color of the focus ring
-   * @prop --focus-ring-style: Style of the focus ring
-   * @prop --focus-ring-width: Width of the focus ring
-   */
-  --focus-ring-color: var(--ion-chip-state-focus-ring-color);
-  --focus-ring-style: var(--ion-chip-state-focus-ring-style);
-  --focus-ring-width: var(--ion-chip-state-focus-ring-width);
-
   @include mixins.font-smoothing();
-  @include mixins.border-radius(var(--border-radius));
   @include mixins.margin(
     var(--ion-chip-margin-top),
     var(--ion-chip-margin-end),
@@ -37,8 +25,6 @@
   align-items: center;
   justify-content: center;
 
-  color: var(--color);
-
   font-weight: var(--ion-chip-font-weight);
 
   letter-spacing: var(--ion-chip-letter-spacing);
@@ -72,15 +58,15 @@
 // ---------------------------------------------
 
 :host(.chip-shape-soft) {
-  --border-radius: var(--ion-chip-shape-soft-border-radius);
+  @include mixins.border-radius(var(--ion-chip-shape-soft-border-radius));
 }
 
 :host(.chip-shape-round) {
-  --border-radius: var(--ion-chip-shape-round-border-radius);
+  @include mixins.border-radius(var(--ion-chip-shape-round-border-radius));
 }
 
 :host(.chip-shape-rectangular) {
-  --border-radius: var(--ion-chip-shape-rectangular-border-radius);
+  @include mixins.border-radius(var(--ion-chip-shape-rectangular-border-radius));
 }
 
 // Chip: Bold Solid
@@ -358,7 +344,11 @@
 
 // Focus
 :host(.ion-focused) {
-  @include mixins.focused-state(var(--focus-ring-width), var(--focus-ring-style), var(--focus-ring-color));
+  @include mixins.focused-state(
+    var(--ion-chip-state-focus-ring-width),
+    var(--ion-chip-state-focus-ring-style),
+    var(--ion-chip-state-focus-ring-color)
+  );
 }
 
 // Chip Slotted Elements

core/src/components/chip/chip.tsx

@@ -81,7 +81,8 @@ export class Chip implements ComponentInterface {
   }
 
   /**
-   * Set the fill based on the custom theme config
+   * Gets the chip fill. Uses the `fill` property if set, otherwise
+   * checks the theme config and falls back to 'solid' if neither is provided.
    */
   get fillValue(): string {
     const fillConfig = config.getObjectValue('IonChip.fill', 'solid') as string;
@@ -91,7 +92,8 @@ export class Chip implements ComponentInterface {
   }
 
   /**
-   * Set the hue based on the custom theme config
+   * Gets the chip hue. Uses the `hue` property if set, otherwise
+   * checks the theme config and falls back to 'subtle' if neither is provided.
    */
   get hueValue(): string {
     const hueConfig = config.getObjectValue('IonChip.hue', 'subtle') as string;
@@ -101,7 +103,8 @@ export class Chip implements ComponentInterface {
   }
 
   /**
-   * Set the shape based on the custom theme config
+   * Gets the chip shape. Uses the `shape` property if set, otherwise
+   * checks the theme config and falls back to 'round' if neither is provided.
    */
   get shapeValue(): string {
     const shapeConfig = config.getObjectValue('IonChip.shape', 'round') as string;
@@ -111,7 +114,8 @@ export class Chip implements ComponentInterface {
   }
 
   /**
-   * Set the size based on the custom theme config
+   * Gets the chip size. Uses the `size` property if set, otherwise
+   * checks the theme config and falls back to 'large' if neither is provided.
    */
   get sizeValue(): string {
     const sizeConfig = config.getObjectValue('IonChip.size', 'large') as string;

core/src/components/spinner/spinner-configs.ts

@@ -1,4 +1,4 @@
-import type { SpinnerConfigs } from './spinner-interface';
+import type { SpinnerDefinitions } from './spinner.interfaces';
 
 const spinners = {
   bubbles: {
@@ -150,5 +150,5 @@ const spinners = {
   },
 };
 
-export const SPINNERS: SpinnerConfigs = spinners;
+export const SPINNERS: SpinnerDefinitions = spinners;
 export type SpinnerTypes = keyof typeof spinners;

core/src/components/spinner/spinner.interfaces.ts

@@ -0,0 +1,78 @@
+export interface SpinnerDefinitions {
+  [spinnerName: string]: SpinnerDefinition;
+}
+
+export interface SpinnerDefinition {
+  dur: number;
+  circles?: number;
+  lines?: number;
+  elmDuration?: boolean;
+  fn: (dur: number, index: number, total: number) => SpinnerData;
+}
+
+interface SpinnerData {
+  r?: number;
+  y1?: number;
+  y2?: number;
+  cx?: number;
+  cy?: number;
+  style: { [key: string]: string | undefined };
+  viewBox?: string;
+  transform?: string;
+}
+
+export type IonSpinnerRecipe = {
+  color?: string;
+
+  lines?: {
+    stroke?: {
+      width?: string;
+    };
+
+    small?: {
+      stroke?: {
+        width?: string;
+      };
+    };
+
+    sharp?: {
+      stroke?: {
+        width?: string;
+      };
+
+      small?: {
+        stroke?: {
+          width?: string;
+        };
+      };
+    };
+  };
+
+  circular?: {
+    stroke?: {
+      width?: string;
+    };
+  };
+
+  crescent?: {
+    stroke?: {
+      width?: string;
+    };
+  };
+
+  // Sizes
+  size?: {
+    [K in SpinnerSize]?: IonSpinnerSizeDefinition;
+  };
+};
+
+type IonSpinnerSizeDefinition = {
+  width?: string;
+  height?: string;
+};
+
+export type IonSpinnerConfig = {
+  size?: SpinnerSize;
+};
+
+export type SpinnerSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';