feat(spinner): add recipe and tokens

core/api.txt

@@ -2309,10 +2309,7 @@ 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,--color
 
 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.tsx

@@ -81,7 +81,10 @@ export class Chip implements ComponentInterface {
   }
 
   /**
-   * Set the fill based on the custom theme config
+   * Get the fill by checking the instance property,
+   * falling back to the custom theme config.
+   *
+   * If neither is set, it will use a default value.
    */
   get fillValue(): string {
     const fillConfig = config.getObjectValue('IonChip.fill', 'solid') as string;
@@ -91,7 +94,10 @@ export class Chip implements ComponentInterface {
   }
 
   /**
-   * Set the hue based on the custom theme config
+   * Get the hue by checking the instance property,
+   * falling back to the custom theme config.
+   *
+   * If neither is set, it will use a default value.
    */
   get hueValue(): string {
     const hueConfig = config.getObjectValue('IonChip.hue', 'subtle') as string;
@@ -101,7 +107,10 @@ export class Chip implements ComponentInterface {
   }
 
   /**
-   * Set the shape based on the custom theme config
+   * Get the shape by checking the instance property,
+   * falling back to the custom theme config.
+   *
+   * If neither is set, it will use a default value.
    */
   get shapeValue(): string {
     const shapeConfig = config.getObjectValue('IonChip.shape', 'round') as string;
@@ -111,7 +120,10 @@ export class Chip implements ComponentInterface {
   }
 
   /**
-   * Set the size based on the custom theme config
+   * Get the size by checking the instance property,
+   * falling back to the custom theme config.
+   *
+   * If neither is set, it will use a default value.
    */
   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 { SpinnerTemplates } from './spinner.interfaces';
 
 const spinners = {
   bubbles: {
@@ -150,5 +150,5 @@ const spinners = {
   },
 };
 
-export const SPINNERS: SpinnerConfigs = spinners;
+export const SPINNERS: SpinnerTemplates = spinners;
 export type SpinnerTypes = keyof typeof spinners;

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

@@ -0,0 +1,78 @@
+export interface SpinnerTemplates {
+  [spinnerName: string]: SpinnerTemplate;
+}
+
+export interface SpinnerTemplate {
+  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';