From 078428459722e7230d227723e88d39544c6be5db Mon Sep 17 00:00:00 2001
From: Amy Sorto <8575252+amysorto@users.noreply.github.com>
Date: Thu, 27 Jun 2024 15:21:55 +0000
Subject: [PATCH] docs: remove color property from remaining examples and
 overview pages and make description comment consistent across components

---
 .../expansion-steps/expansion-steps-example.html     | 10 +++++-----
 .../sidenav-responsive-example.html                  |  2 +-
 src/material/badge/badge.ts                          |  7 +++++--
 src/material/button/fab.ts                           |  7 +++++++
 src/material/checkbox/checkbox-config.ts             |  6 ++++--
 src/material/checkbox/checkbox.md                    |  8 --------
 src/material/chips/chips.md                          |  8 --------
 src/material/datepicker/datepicker-base.ts           | 12 ++++++++----
 src/material/datepicker/datepicker.md                |  8 --------
 src/material/form-field/form-field.ts                |  6 ++++--
 tools/public_api_guard/material/button.md            |  1 -
 11 files changed, 34 insertions(+), 41 deletions(-)

diff --git a/src/components-examples/material/expansion/expansion-steps/expansion-steps-example.html b/src/components-examples/material/expansion/expansion-steps/expansion-steps-example.html
index cbeed271fb98..1d69f7ec43fb 100644
--- a/src/components-examples/material/expansion/expansion-steps/expansion-steps-example.html
+++ b/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>
diff --git a/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.html b/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.html
index 7a51a65fc95f..4fbab4fc2719 100644
--- a/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.html
+++ b/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>
diff --git a/src/material/badge/badge.ts b/src/material/badge/badge.ts
index 4b8676981409..74789e31d8cc 100644
--- a/src/material/badge/badge.ts
+++ b/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 {
diff --git a/src/material/button/fab.ts b/src/material/button/fab.ts
index 43c6f8114243..ae7652801284 100644
--- a/src/material/button/fab.ts
+++ b/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;
 }
 
diff --git a/src/material/checkbox/checkbox-config.ts b/src/material/checkbox/checkbox-config.ts
index 9c5aeb561b79..bef49ab5856f 100644
--- a/src/material/checkbox/checkbox-config.ts
+++ b/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;
diff --git a/src/material/checkbox/checkbox.md b/src/material/checkbox/checkbox.md
index 63e1b8a7a792..0260fa3cf6dd 100644
--- a/src/material/checkbox/checkbox.md
+++ b/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.
diff --git a/src/material/chips/chips.md b/src/material/chips/chips.md
index 7cfb9a44d7ec..c4869f0f4dd1 100644
--- a/src/material/chips/chips.md
+++ b/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:
diff --git a/src/material/datepicker/datepicker-base.ts b/src/material/datepicker/datepicker-base.ts
index b22a52399580..449d08d068fc 100644
--- a/src/material/datepicker/datepicker-base.ts
+++ b/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 {
diff --git a/src/material/datepicker/datepicker.md b/src/material/datepicker/datepicker.md
index 0d5c1e99d1a2..e00ab5073998 100644
--- a/src/material/datepicker/datepicker.md
+++ b/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
diff --git a/src/material/form-field/form-field.ts b/src/material/form-field/form-field.ts
index 2706d2260522..7a181c0639e5 100644
--- a/src/material/form-field/form-field.ts
+++ b/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;
diff --git a/tools/public_api_guard/material/button.md b/tools/public_api_guard/material/button.md
index ed467daf7477..5e08b7fb90a0 100644
--- a/tools/public_api_guard/material/button.md
+++ b/tools/public_api_guard/material/button.md
@@ -93,7 +93,6 @@ export class MatFabButton extends MatButtonBase {
 
 // @public
 export interface MatFabDefaultOptions {
-    // (undocumented)
     color?: ThemePalette;
 }