docs: Update references to M2 theming guide color variants section and add link to styling tab for color input descriptions (#30282)

amysorto · amysorto · commit 258535035bdc · 2025-01-08T13:28:53.000-05:00
(cherry picked from commit 64c07fb)
diff --git a/guides/material-2.md b/guides/material-2.md
@@ -1103,7 +1103,7 @@ the APIs for both are largely the same. However, there are a few differences to
   mixins should be wrapped in a selector. If your app includes such an `@include` at the root level,
   we recommend wrapping it in `html { ... }`
 - M3 has a different API for setting the color variant of a component (see
-  [using component color variants](https://material.angular.io/guide/theming#using-component-color-variants)
+  [using component color variants](#optional-add-backwards-compatibility-styles-for-color-variants)
   for more).
 - The `backgroundColor` property of `<mat-tab-group>` is not supported, and should not be used with
   M3 themes.
diff --git a/src/material/badge/badge.ts b/src/material/badge/badge.ts
@@ -81,10 +81,10 @@ export class MatBadge implements OnInit, OnDestroy {
 
   /**
    * Theme color of the badge. This API is supported in M2 themes only, it
-   * has no effect in M3 themes.
+   * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/badge/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/theming#using-component-color-variants.
+   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input('matBadgeColor')
   get color(): ThemePalette {
diff --git a/src/material/button/button-base.ts b/src/material/button/button-base.ts
@@ -108,10 +108,10 @@ export class MatButtonBase implements AfterViewInit, OnDestroy {
 
   /**
    * Theme color of the button. This API is supported in M2 themes only, it has
-   * no effect in M3 themes.
+   * no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/button/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/theming#using-component-color-variants.
+   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input() color?: string | null;
 
diff --git a/src/material/button/fab.ts b/src/material/button/fab.ts
@@ -24,10 +24,10 @@ import {ThemePalette} from '@angular/material/core';
 export interface MatFabDefaultOptions {
   /**
    * Default theme color of the button. This API is supported in M2 themes
-   * only, it has no effect in M3 themes.
+   * only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/button/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/theming#using-component-color-variants
+   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants.
    */
   color?: ThemePalette;
 }
diff --git a/src/material/checkbox/checkbox-config.ts b/src/material/checkbox/checkbox-config.ts
@@ -12,10 +12,10 @@ import {ThemePalette} from '@angular/material/core';
 export interface MatCheckboxDefaultOptions {
   /**
    * Default theme color of the checkbox. This API is supported in M2 themes
-   * only, it has no effect in M3 themes.
+   * only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/checkbox/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/theming#using-component-color-variants
+   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   color?: ThemePalette;
 
diff --git a/src/material/checkbox/checkbox.ts b/src/material/checkbox/checkbox.ts
@@ -222,10 +222,10 @@ export class MatCheckbox
   // the lack of type checking previously and assigning random strings.
   /**
    * Theme color of the checkbox. This API is supported in M2 themes only, it
-   * has no effect in M3 themes.
+   * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/checkbox/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/theming#using-component-color-variants.
+   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input() color: string | undefined;
 
diff --git a/src/material/chips/chip.ts b/src/material/chips/chip.ts
@@ -178,10 +178,10 @@ export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck
   // TODO: should be typed as `ThemePalette` but internal apps pass in arbitrary strings.
   /**
    * Theme color of the chip. This API is supported in M2 themes only, it has no
-   * effect in M3 themes.
+   * effect in M3 themes. For color customization in M3, see https://material.angular.io/components/chips/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/theming#using-component-color-variants.
+   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input() color?: string | null;
 
diff --git a/src/material/datepicker/datepicker-base.ts b/src/material/datepicker/datepicker-base.ts
@@ -150,10 +150,10 @@ export class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>>
 
   /**
    * Theme color of the internal calendar. This API is supported in M2 themes
-   * only, it has no effect in M3 themes.
+   * only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/datepicker/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/theming#using-component-color-variants.
+   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input() color: ThemePalette;
 
@@ -324,10 +324,10 @@ 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.
+   * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/datepicker/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/theming#using-component-color-variants
+   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   color: ThemePalette;
   /** The input element the datepicker is associated with. */
@@ -387,10 +387,10 @@ export abstract class MatDatepickerBase<
 
   /**
    * Theme color of the datepicker's calendar. This API is supported in M2 themes only, it
-   * has no effect in M3 themes.
+   * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/datepicker/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/theming#using-component-color-variants.
+   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input()
   get color(): ThemePalette {
diff --git a/src/material/form-field/form-field.ts b/src/material/form-field/form-field.ts
@@ -74,10 +74,10 @@ export interface MatFormFieldDefaultOptions {
   appearance?: MatFormFieldAppearance;
   /**
    * Default theme color of the form field. This API is supported in M2 themes only, it has no
-   * effect in M3 themes.
+   * effect in M3 themes. For color customization in M3, see https://material.angular.io/components/form-field/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/theming#using-component-color-variants
+   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   color?: ThemePalette;
   /** Whether the required marker should be hidden by default. */
@@ -225,10 +225,10 @@ export class MatFormField
 
   /**
    * Theme color of the form field. This API is supported in M2 themes only, it
-   * has no effect in M3 themes.
+   * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/form-field/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/theming#using-component-color-variants.
+   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input() color: ThemePalette = 'primary';
 
diff --git a/src/material/icon/icon.ts b/src/material/icon/icon.ts
@@ -32,10 +32,10 @@ import {MatIconRegistry} from './icon-registry';
 export interface MatIconDefaultOptions {
   /**
    * Theme color of the icon. This API is supported in M2 themes only, it
-   * has no effect in M3 themes.
+   * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/icon/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/theming#using-component-color-variants.
+   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   color?: ThemePalette;
   /** Font set that the icon is a part of. */
@@ -159,10 +159,10 @@ export class MatIcon implements OnInit, AfterViewChecked, OnDestroy {
 
   /**
    * Theme color of the icon. This API is supported in M2 themes only, it
-   * has no effect in M3 themes.
+   * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/icon/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/theming#using-component-color-variants.
+   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input()
   get color() {
diff --git a/src/material/list/list-option.ts b/src/material/list/list-option.ts
@@ -133,10 +133,11 @@ export class MatListOption extends MatListItemBase implements ListOption, OnInit
 
   /**
    * Theme color of the list option. This sets the color of the checkbox/radio.
-   * This API is supported in M2 themes only, it has no effect in M3 themes.
+   * This API is supported in M2 themes only, it has no effect in M3 themes. For color customization
+   * in M3, see https://material.angular.io/components/list/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/theming#using-component-color-variants.
+   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input()
   get color(): ThemePalette {
diff --git a/src/material/list/selection-list.ts b/src/material/list/selection-list.ts
@@ -103,10 +103,10 @@ export class MatSelectionList
   /**
    * Theme color of the selection list. This sets the checkbox color for all
    * list options. This API is supported in M2 themes only, it has no effect in
-   * M3 themes.
+   * M3 themes. For color customization in M3, see https://material.angular.io/components/list/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/theming#using-component-color-variants.
+   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input() color: ThemePalette = 'accent';
 
diff --git a/src/material/paginator/paginator.ts b/src/material/paginator/paginator.ts
@@ -124,10 +124,10 @@ export class MatPaginator implements OnInit, OnDestroy {
 
   /**
    * Theme color of the underlying form controls. This API is supported in M2
-   * themes only,it has no effect in M3 themes.
+   * themes only,it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/paginator/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/theming#using-component-color-variants.
+   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input() color: ThemePalette;
 
diff --git a/src/material/progress-bar/progress-bar.ts b/src/material/progress-bar/progress-bar.ts
@@ -36,10 +36,10 @@ export interface ProgressAnimationEnd {
 export interface MatProgressBarDefaultOptions {
   /**
    * Default theme color of the progress bar. This API is supported in M2 themes only,
-   * it has no effect in M3 themes.
+   * it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/progress-bar/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/theming#using-component-color-variants.
+   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   color?: ThemePalette;
 
@@ -139,10 +139,10 @@ export class MatProgressBar implements AfterViewInit, OnDestroy {
   // TODO: should be typed as `ThemePalette` but internal apps pass in arbitrary strings.
   /**
    * Theme color of the progress bar. This API is supported in M2 themes only, it
-   * has no effect in M3 themes.
+   * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/progress-bar/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/theming#using-component-color-variants.
+   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input()
   get color() {
diff --git a/src/material/progress-spinner/progress-spinner.ts b/src/material/progress-spinner/progress-spinner.ts
@@ -28,10 +28,10 @@ export type ProgressSpinnerMode = 'determinate' | 'indeterminate';
 export interface MatProgressSpinnerDefaultOptions {
   /**
    * Default theme color of the progress spinner. This API is supported in M2 themes only, it
-   * has no effect in M3 themes.
+   * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/progress-spinner/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/theming#using-component-color-variants.
+   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   color?: ThemePalette;
   /** Diameter of the spinner. */
@@ -103,10 +103,10 @@ export class MatProgressSpinner {
   // TODO: should be typed as `ThemePalette` but internal apps pass in arbitrary strings.
   /**
    * Theme color of the progress spinner. This API is supported in M2 themes only, it
-   * has no effect in M3 themes.
+   * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/progress-spinner/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/theming#using-component-color-variants.
+   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input()
   get color() {
diff --git a/src/material/radio/radio.ts b/src/material/radio/radio.ts
@@ -79,10 +79,10 @@ export const MAT_RADIO_GROUP = new InjectionToken<MatRadioGroup>('MatRadioGroup'
 export interface MatRadioDefaultOptions {
   /**
    * Theme color of the radio button. This API is supported in M2 themes only, it
-   * has no effect in M3 themes.
+   * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/radio/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/theming#using-component-color-variants.
+   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   color: ThemePalette;
 
@@ -169,10 +169,10 @@ export class MatRadioGroup implements AfterContentInit, OnDestroy, ControlValueA
 
   /**
    * Theme color of the radio buttons in the group. This API is supported in M2
-   * themes only, it has no effect in M3 themes.
+   * themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/radio/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/theming#using-component-color-variants.
+   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input() color: ThemePalette;
 
@@ -523,10 +523,10 @@ export class MatRadioButton implements OnInit, AfterViewInit, DoCheck, OnDestroy
 
   /**
    * Theme color of the radio button. This API is supported in M2 themes only, it
-   * has no effect in M3 themes.
+   * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/radio/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/theming#using-component-color-variants.
+   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input()
   get color(): ThemePalette {
diff --git a/src/material/slide-toggle/slide-toggle-config.ts b/src/material/slide-toggle/slide-toggle-config.ts
@@ -15,10 +15,10 @@ export interface MatSlideToggleDefaultOptions {
 
   /**
    * Default theme color of the slide toggle. This API is supported in M2 themes only,
-   * it has no effect in M3 themes.
+   * it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/slide-toggle/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/theming#using-component-color-variants.
+   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   color?: ThemePalette;
 
diff --git a/src/material/slide-toggle/slide-toggle.ts b/src/material/slide-toggle/slide-toggle.ts
@@ -158,10 +158,10 @@ export class MatSlideToggle
   // the lack of type checking previously and assigning random strings.
   /**
    * Theme color of the slide toggle. This API is supported in M2 themes only,
-   * it has no effect in M3 themes.
+   * it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/slide-toggle/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/theming#using-component-color-variants.
+   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input() color: string | undefined;
 
diff --git a/src/material/slider/slider.ts b/src/material/slider/slider.ts
@@ -149,10 +149,10 @@ export class MatSlider implements AfterViewInit, OnDestroy, _MatSlider {
 
   /**
    * Theme color of the slider. This API is supported in M2 themes only, it
-   * has no effect in M3 themes.
+   * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/slider/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/theming#using-component-color-variants.
+   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input()
   color: ThemePalette;
diff --git a/src/material/stepper/step-header.ts b/src/material/stepper/step-header.ts
@@ -76,10 +76,10 @@ export class MatStepHeader extends CdkStepHeader implements AfterViewInit, OnDes
 
   /**
    * Theme color of the step header. This API is supported in M2 themes only, it
-   * has no effect in M3 themes.
+   * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/stepper/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/theming#using-component-color-variants.
+   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input() color: ThemePalette;
 
diff --git a/src/material/stepper/stepper.ts b/src/material/stepper/stepper.ts
@@ -70,10 +70,10 @@ export class MatStep extends CdkStep implements ErrorStateMatcher, AfterContentI
 
   /**
    * Theme color for the particular step. This API is supported in M2 themes
-   * only, it has no effect in M3 themes.
+   * only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/stepper/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/theming#using-component-color-variants.
+   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input() color: ThemePalette;
 
@@ -167,10 +167,10 @@ export class MatStepper extends CdkStepper implements AfterContentInit {
 
   /**
    * Theme color for all of the steps in stepper. This API is supported in M2
-   * themes only, it has no effect in M3 themes.
+   * themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/stepper/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/theming#using-component-color-variants.
+   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input() color: ThemePalette;
 
diff --git a/src/material/tabs/tab-group.ts b/src/material/tabs/tab-group.ts
diff --git a/src/material/tabs/tab-nav-bar/tab-nav-bar.ts b/src/material/tabs/tab-nav-bar/tab-nav-bar.ts
diff --git a/src/material/toolbar/toolbar.ts b/src/material/toolbar/toolbar.ts

Original file line number	Diff line number	Diff line change
`@@ -24,10 +24,10 @@ import {ThemePalette} from '@angular/material/core';`
`24`	`24`	`export interface MatFabDefaultOptions {`
`25`	`25`	`/**`
`26`	`26`	`* Default theme color of the button. This API is supported in M2 themes`
`27`		`- * only, it has no effect in M3 themes.`
	`27`	`+ * only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/button/styling.`
`28`	`28`	`*`
`29`	`29`	`* For information on applying color variants in M3, see`
`30`		`- * https://material.angular.io/guide/theming#using-component-color-variants`
	`30`	`+ * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants.`
`31`	`31`	`*/`
`32`	`32`	`color?: ThemePalette;`
`33`	`33`	`}`