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

@@ -3881,13 +3881,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";
     }
     interface IonSplitPane {
         /**
@@ -9911,13 +9907,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";
     }
     interface IonSplitPane {
         /**

core/src/components/spinner/spinner.common.scss → core/src/components/spinner/spinner.scss

@@ -1,32 +1,29 @@
-@import "../../themes/mixins";
-// Required to use the current-color function
-@import "../../themes/functions.color";
+@use "../../themes/mixins" as mixins;
+@use "../../themes/functions.color" as colors;
 
-// Spinners
+// Spinner: Common Styles
 // --------------------------------------------------
 
 :host {
   /**
    * @prop --color: Color of the spinner
    */
+  --color: var(--ion-spinner-color);
 
   display: inline-block;
   position: relative;
 
-  width: 28px;
-  height: 28px;
-
   color: var(--color);
 
   user-select: none;
 }
 
 :host(.ion-color) {
-  color: current-color(base);
+  color: colors.current-color(base);
 }
 
 svg {
-  @include transform-origin(center);
+  @include mixins.transform-origin(center);
 
   position: absolute;
 
@@ -45,9 +42,10 @@ svg {
   transform: translateZ(0);
 }
 
-// Spinner: lines / lines-small / lines-sharp / lines-sharp-small
+// Spinner Names
 // --------------------------------------------------
 
+// lines / lines-small / lines-sharp / lines-sharp-small
 :host(.spinner-lines) line,
 :host(.spinner-lines-small) line,
 :host(.spinner-lines-sharp) line,
@@ -63,52 +61,58 @@ svg {
   animation: spinner-fade-out 1s linear infinite;
 }
 
-// Spinner: bubbles
-// --------------------------------------------------
+:host(.spinner-lines) line {
+  stroke-width: var(--ion-spinner-lines-stroke-width);
+}
+
+:host(.spinner-lines-small) line {
+  stroke-width: var(--ion-spinner-lines-small-stroke-width);
+}
+
+:host(.spinner-lines-sharp) line {
+  stroke-width: var(--ion-spinner-lines-sharp-stroke-width);
+}
 
+:host(.spinner-lines-sharp-small) line {
+  stroke-width: var(--ion-spinner-lines-sharp-small-stroke-width);
+}
+
+// bubbles
 :host(.spinner-bubbles) svg {
   animation: spinner-scale-out 1s linear infinite;
   fill: currentColor;
 }
 
-// Spinner: circles
-// --------------------------------------------------
-
+// circles
 :host(.spinner-circles) svg {
   animation: spinner-fade-out 1s linear infinite;
   fill: currentColor;
 }
 
-// Spinner: crescent
-// --------------------------------------------------
-
 :host(.spinner-crescent) circle {
   fill: transparent;
-  stroke-width: 4px;
+  stroke-width: var(--ion-spinner-crescent-stroke-width);
   stroke-dasharray: 128px;
   stroke-dashoffset: 82px;
   stroke: currentColor;
 }
 
+// crescent
 :host(.spinner-crescent) svg {
   animation: spinner-rotate 1s linear infinite;
 }
 
-// Spinner: dots
-// --------------------------------------------------
-
+// dots
 :host(.spinner-dots) circle {
-  stroke-width: 0;
+  stroke-width: var(--ion-spinner-dots-stroke-width);
   fill: currentColor;
 }
 
 :host(.spinner-dots) svg {
   animation: spinner-dots 1s linear infinite;
 }
 
-// Spinner: circular
-// --------------------------------------------------
-
+// circular
 :host(.spinner-circular) svg {
   animation: spinner-circular linear infinite;
 }
@@ -118,13 +122,42 @@ svg {
   stroke: currentColor;
   stroke-dasharray: 80px, 200px;
   stroke-dashoffset: 0px;
-  stroke-width: 5.6;
+  stroke-width: var(--ion-spinner-circular-stroke-width);
   fill: none;
 }
 
-// Spinner: paused
+// Spinner Sizes
+// --------------------------------------------------
+
+:host(.spinner-xsmall) {
+  width: var(--ion-spinner-size-xsmall-width);
+  height: var(--ion-spinner-size-xsmall-height);
+}
+
+:host(.spinner-small) {
+  width: var(--ion-spinner-size-small-width);
+  height: var(--ion-spinner-size-small-height);
+}
+
+:host(.spinner-medium) {
+  width: var(--ion-spinner-size-medium-width);
+  height: var(--ion-spinner-size-medium-height);
+}
+
+:host(.spinner-large) {
+  width: var(--ion-spinner-size-large-width);
+  height: var(--ion-spinner-size-large-height);
+}
+
+:host(.spinner-xlarge) {
+  width: var(--ion-spinner-size-xlarge-width);
+  height: var(--ion-spinner-size-xlarge-height);
+}
+
+// Spinner States
 // --------------------------------------------------
 
+// Paused
 :host(.spinner-paused),
 :host(.spinner-paused) svg,
 :host(.spinner-paused) circle {

core/src/components/spinner/spinner.tsx

@@ -3,7 +3,7 @@ import { Component, Host, Prop, h } from '@stencil/core';
 import { createColorClasses } from '@utils/theme';
 
 import { config } from '../../global/config';
-import { getIonTheme, getIonMode } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
 
 import type { SpinnerTypes } from './spinner-configs';
@@ -12,15 +12,10 @@ import type { SpinnerConfig } from './spinner-interface';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  */
 @Component({
   tag: 'ion-spinner',
-  styleUrls: {
-    ios: 'spinner.native.scss',
-    md: 'spinner.native.scss',
-    ionic: 'spinner.ionic.scss',
-  },
+  styleUrl: 'spinner.scss',
   shadow: true,
 })
 export class Spinner implements ComponentInterface {
@@ -54,7 +49,7 @@ export class Spinner implements ComponentInterface {
    * 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.
+   * Defaults to `"medium"`.
    */
   @Prop() size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 
@@ -67,29 +62,22 @@ export class Spinner implements ComponentInterface {
     return mode === 'ios' ? 'lines' : 'circular';
   }
 
-  private getSize(): string | undefined {
-    const theme = getIonTheme(this);
-    const { size } = this;
-
-    // TODO(ROU-10912): Remove theme check when sizes are defined for all themes.
-    if (theme !== 'ionic') {
-      return undefined;
-    }
-
-    if (size === undefined) {
-      return 'xsmall';
-    }
+  /**
+   * Set the size based on the custom theme config
+   */
+  get sizeValue(): string {
+    const sizeConfig = config.getObjectValue('IonSpinner.size', 'medium') as string;
+    console.log('sizeConfig', sizeConfig);
+    const size = this.size || sizeConfig;
 
     return size;
   }
 
   render() {
-    const self = this;
-    const theme = getIonTheme(self);
-    const spinnerName = self.getName();
-    const size = this.getSize();
+    const { duration: animatedDuration, color, paused, sizeValue } = this;
+    const spinnerName = this.getName();
     const spinner = SPINNERS[spinnerName] ?? SPINNERS['lines'];
-    const duration = typeof self.duration === 'number' && self.duration > 10 ? self.duration : spinner.dur;
+    const duration = typeof animatedDuration === 'number' && animatedDuration > 10 ? animatedDuration : spinner.dur;
     const svgs: SVGElement[] = [];
 
     if (spinner.circles !== undefined) {
@@ -104,11 +92,10 @@ export class Spinner implements ComponentInterface {
 
     return (
       <Host
-        class={createColorClasses(self.color, {
-          [theme]: true,
+        class={createColorClasses(color, {
           [`spinner-${spinnerName}`]: true,
-          'spinner-paused': self.paused || config.getBoolean('_testing'),
-          [`spinner-${size}`]: size !== undefined,
+          'spinner-paused': paused || config.getBoolean('_testing'),
+          [`spinner-${sizeValue}`]: true,
         })}
         role="progressbar"
         style={spinner.elmDuration ? { animationDuration: duration + 'ms' } : {}}

core/src/components/spinner/test/basic/spinner.e2e.ts

@@ -10,7 +10,7 @@ configs().forEach(({ title, screenshot, config }) => {
       test('should not have visual regressions', async ({ page }) => {
         await page.setIonViewport();
 
-        await expect(page).toHaveScreenshot(screenshot(`spinner-basic-diff`));
+        await expect(page).toHaveScreenshot(screenshot('spinner-basic'));
       });
     });
   });