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

Author: amysorto

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

@@ -2,21 +2,6 @@
   <mat-card-content>
     <h2 class="example-h2">Progress bar 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">
@@ -61,7 +46,6 @@ <h2 class="example-h2">Result</h2>
     <section class="example-section">
       <mat-progress-bar
           class="example-margin"
-          [color]="color"
           [mode]="mode"
           [value]="value"
           [bufferValue]="bufferValue">

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

@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import {ThemePalette} from '@angular/material/core';
 import {ProgressBarMode, MatProgressBarModule} from '@angular/material/progress-bar';
 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, MatProgressBarModule],
 })
 export class ProgressBarConfigurableExample {
-  color: ThemePalette = 'primary';
   mode: ProgressBarMode = 'determinate';
   value = 50;
   bufferValue = 75;

src/material/progress-bar/progress-bar.md

@@ -4,15 +4,15 @@
 The progress-bar supports four modes: determinate, indeterminate, buffer and query.
 
 #### Determinate
-Operations where the percentage of the operation complete is known should use the 
+Operations where the percentage of the operation complete is known should use the
 determinate indicator.
 
 <!-- example(progress-bar-determinate) -->
 
 This is the default mode and the progress is represented by the `value` property.
 
 #### Indeterminate
-Operations where the user is asked to wait while something finishes and it’s 
+Operations where the user is asked to wait while something finishes and it’s
 not necessary to indicate how long it will take should use the indeterminate indicator.
 
 <!-- example(progress-bar-indeterminate) -->
@@ -24,7 +24,7 @@ Use the `buffer` mode of the progress-bar to indicate some activity or loading f
 
 <!-- example(progress-bar-buffer) -->
 
-In "buffer" mode, `value` determines the progress of the primary bar while the `bufferValue` is 
+In "buffer" mode, `value` determines the progress of the primary bar while the `bufferValue` is
 used to show the additional buffering progress.
 
 #### Query
@@ -33,14 +33,10 @@ Use the `query` mode of the progress-bar to indicate pre-loading before the actu
 
 <!-- example(progress-bar-query) -->
 
-In "query" mode, the progress-bar renders as an inverted "indeterminate" bar. Once the response 
+In "query" mode, the progress-bar renders as an inverted "indeterminate" bar. Once the response
 progress is available, the `mode` should be changed to determinate to convey the progress. In
 this mode the `value` property is ignored.
 
-### Theming
-The color of a progress-bar can be changed by using the `color` property. By default, progress-bars
-use the theme's primary color. This can be changed to `'accent'` or `'warn'`.  
-
 ### Accessibility
 
 `MatProgressBar` implements the ARIA `role="progressbar"` pattern. By default, the progress bar

src/material/progress-bar/progress-bar.ts

@@ -35,7 +35,13 @@ export interface ProgressAnimationEnd {
 
 /** Default `mat-progress-bar` options that can be overridden. */
 export interface MatProgressBarDefaultOptions {
-  /** Default color of the progress bar. */
+  /**
+   * Default theme color of the progress bar. 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;
 
   /** Default mode of the progress bar. */
@@ -128,7 +134,13 @@ export class MatProgressBar implements AfterViewInit, OnDestroy {
   _isNoopAnimation = false;
 
   // TODO: should be typed as `ThemePalette` but internal apps pass in arbitrary strings.
-  /** Theme palette color of the progress bar. */
+  /**
+   * Theme color of the progress bar. 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;