docs(material/progress-spinner): Update description and examples for color input description on API page (#29332)

Author: amysorto

src/components-examples/material/progress-spinner/progress-spinner-configurable/progress-spinner-configurable-example.html

@@ -2,21 +2,6 @@
   <mat-card-content>
     <h2 class="example-h2">Progress spinner configuration</h2>
 
-    <section class="example-section">
-      <label class="example-margin">Color:</label>
-      <mat-radio-group [(ngModel)]="color">
-        <mat-radio-button class="example-margin" value="primary">
-          Primary
-        </mat-radio-button>
-        <mat-radio-button class="example-margin" value="accent">
-          Accent
-        </mat-radio-button>
-        <mat-radio-button class="example-margin" value="warn">
-          Warn
-        </mat-radio-button>
-      </mat-radio-group>
-    </section>
-
     <section class="example-section">
       <label class="example-margin">Mode:</label>
       <mat-radio-group [(ngModel)]="mode">
@@ -46,7 +31,6 @@ <h2 class="example-h2">Result</h2>
 
     <mat-progress-spinner
         class="example-margin"
-        [color]="color"
         [mode]="mode"
         [value]="value">
     </mat-progress-spinner>

src/components-examples/material/progress-spinner/progress-spinner-configurable/progress-spinner-configurable-example.ts

@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import {ThemePalette} from '@angular/material/core';
 import {ProgressSpinnerMode, MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatSliderModule} from '@angular/material/slider';
 import {FormsModule} from '@angular/forms';
@@ -17,7 +16,6 @@ import {MatCardModule} from '@angular/material/card';
   imports: [MatCardModule, MatRadioModule, FormsModule, MatSliderModule, MatProgressSpinnerModule],
 })
 export class ProgressSpinnerConfigurableExample {
-  color: ThemePalette = 'primary';
   mode: ProgressSpinnerMode = 'determinate';
   value = 50;
 }

src/material/progress-spinner/progress-spinner.md

@@ -17,11 +17,6 @@ which can be a whole number between 0 and 100.
 
 In "indeterminate" mode, the `value` property is ignored.
 
-
-### Theming
-The color of a progress-spinner can be changed by using the `color` property. By default,
-progress-spinners use the theme's primary color. This can be changed to `'accent'` or `'warn'`.
-
 ### Accessibility
 
 `MatLegacyProgressSpinner` implements the ARIA `role="progressbar"` pattern. By default, the spinner

src/material/progress-spinner/progress-spinner.ts

@@ -27,7 +27,13 @@ export type ProgressSpinnerMode = 'determinate' | 'indeterminate';
 
 /** Default `mat-progress-spinner` options that can be overridden. */
 export interface MatProgressSpinnerDefaultOptions {
-  /** Default color of the spinner. */
+  /**
+   * Default theme color of the progress spinner. This API is supported in M2 themes only, it
+   * has no effect in M3 themes.
+   *
+   * For information on applying color variants in M3, see
+   * https://material.angular.io/guide/theming#using-component-color-variants.
+   */
   color?: ThemePalette;
   /** Diameter of the spinner. */
   diameter?: number;
@@ -95,7 +101,13 @@ export class MatProgressSpinner {
   _noopAnimations: boolean;
 
   // TODO: should be typed as `ThemePalette` but internal apps pass in arbitrary strings.
-  /** Theme palette color of the progress spinner. */
+  /**
+   * Theme color of the progress spinner. This API is supported in M2 themes only, it
+   * has no effect in M3 themes.
+   *
+   * For information on applying color variants in M3, see
+   * https://material.angular.io/guide/theming#using-component-color-variants.
+   */
   @Input()
   get color() {
     return this._color || this._defaultColor;