docs: remove color property from remaining examples and overview pages and make description comment consistent across components (#29345)

(cherry picked from commit e9d1c7a)

Author: amysorto

src/components-examples/material/expansion/expansion-steps/expansion-steps-example.html

@@ -19,7 +19,7 @@
     </mat-form-field>
     <!-- #docregion action-bar -->
     <mat-action-row>
-      <button mat-button color="primary" (click)="nextStep()">Next</button>
+      <button mat-button (click)="nextStep()">Next</button>
     </mat-action-row>
     <!-- #enddocregion action-bar -->
   </mat-expansion-panel>
@@ -39,8 +39,8 @@
     </mat-form-field>
 
     <mat-action-row>
-      <button mat-button color="warn" (click)="prevStep()">Previous</button>
-      <button mat-button color="primary" (click)="nextStep()">Next</button>
+      <button mat-button (click)="prevStep()">Previous</button>
+      <button mat-button (click)="nextStep()">Next</button>
     </mat-action-row>
   </mat-expansion-panel>
 
@@ -60,8 +60,8 @@
     <mat-datepicker #picker></mat-datepicker>
 
     <mat-action-row>
-      <button mat-button color="warn" (click)="prevStep()">Previous</button>
-      <button mat-button color="primary" (click)="nextStep()">End</button>
+      <button mat-button (click)="prevStep()">Previous</button>
+      <button mat-button (click)="nextStep()">End</button>
     </mat-action-row>
   </mat-expansion-panel>
 </mat-accordion>

src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.html

@@ -1,6 +1,6 @@
 @if (shouldRun) {
   <div class="example-container" [class.example-is-mobile]="mobileQuery.matches">
-    <mat-toolbar color="primary" class="example-toolbar">
+    <mat-toolbar class="example-toolbar">
       <button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>
       <h1 class="example-app-name">Responsive App</h1>
     </mat-toolbar>

src/material/badge/badge.ts

@@ -84,8 +84,11 @@ export class _MatBadgeStyleLoader {}
 })
 export class MatBadge implements OnInit, OnDestroy {
   /**
-   * The color of the badge. Can be `primary`, `accent`, or `warn`.
-   * Not recommended in M3, for more information see https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants.
+   * Theme color of the badge. 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('matBadgeColor')
   get color(): ThemePalette {

src/material/button/fab.ts

@@ -27,6 +27,13 @@ import {ThemePalette} from '@angular/material/core';
 
 /** Default FAB options that can be overridden. */
 export interface MatFabDefaultOptions {
+  /**
+   * Default theme color of the button. 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;
 }
 

src/material/checkbox/checkbox-config.ts

@@ -11,8 +11,10 @@ import {ThemePalette} from '@angular/material/core';
 /** Default `mat-checkbox` options that can be overridden. */
 export interface MatCheckboxDefaultOptions {
   /**
-   * Default theme color palette to be used for checkboxes. This API is supported in M2 themes
-   * only, it has no effect in M3 themes. For information on applying color variants in M3, see
+   * Default theme color of the checkbox. 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;

src/material/checkbox/checkbox.md

@@ -58,14 +58,6 @@ Default behavior of `mat-checkbox`. Always set `indeterminate` to `false`
 when user click on the `mat-checkbox`.
 This matches the behavior of native `<input type="checkbox">`.
 
-### Theming
-
-The color of a `<mat-checkbox>` can be changed by specifying a `$color-variant` when applying the
-`mat.checkbox-theme` or `mat.checkbox-color` mixins (see the
-[theming guide](/guide/theming#using-component-color-variants) to learn more.) By default,
-checkboxes use the theme's primary palette. This can be changed to `'secondary'`, `'tertiary'`,
-or `'error'`.
-
 ### Accessibility
 
 `MatCheckbox` uses an internal `<input type="checkbox">` to provide an accessible experience.

src/material/chips/chips.md

@@ -114,14 +114,6 @@ Use the `MAT_CHIPS_DEFAULT_OPTIONS` token to specify default options for the chi
 })
 ```
 
-### Theming
-
-The color of a `<mat-datepicker>` can be changed by specifying a `$color-variant` when applying the
-`mat.datepicker-theme` or `mat.datepicker-color` mixins (see the
-[theming guide](/guide/theming#using-component-color-variants) to learn more.) By default, the
-datepicker uses the theme's primary palette. This can be changed to `'secondary'`, `'tertiary'`,
-or `'error'`.
-
 ### Interaction Patterns
 
 The chips components support 3 user interaction patterns, each with its own container and chip elements:

src/material/datepicker/datepicker-base.ts

@@ -325,7 +325,9 @@ export interface MatDatepickerPanel<
   closedStream: EventEmitter<void>;
   /**
    * Color palette to use on the datepicker's calendar. This API is supported in M2 themes only, it
-   * has no effect in M3 themes. For information on applying color variants in M3, see
+   * 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;
@@ -379,9 +381,11 @@ export abstract class MatDatepickerBase<
   @Input() startView: 'month' | 'year' | 'multi-year' = 'month';
 
   /**
-   * Color palette to use on the datepicker's calendar. 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
+   * Theme color of the datepicker's calendar. 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(): ThemePalette {

src/material/datepicker/datepicker.md

@@ -131,14 +131,6 @@ As with other types of `<input>`, the datepicker works with `@angular/forms` dir
 
 <!-- example(datepicker-value) -->
 
-### Changing the datepicker colors
-
-The color of the datepicker can be changed by specifying a `$color-variant` when applying the
-`mat.datepicker-theme` or `mat.datepicker-color` mixins (see the
-[theming guide](/guide/theming#using-component-color-variants) to learn more.) By default, the
-datepicker uses the theme's primary palette. This can be changed to `'secondary'`, `'tertiary'`, or
-`'error'`.
-
 ### Date validation
 
 There are three properties that add date validation to the datepicker input. The first two are the

src/material/form-field/form-field.ts

@@ -73,8 +73,10 @@ export interface MatFormFieldDefaultOptions {
   /** Default form field appearance style. */
   appearance?: MatFormFieldAppearance;
   /**
-   * Default color of the form field. This API is supported in M2 themes only, it has no effect in
-   * M3 themes. For information on applying color variants in M3, see
+   * Default theme color of the form field. 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;