From ef2a3edbccead6daf009075f9b64f78c0932e305 Mon Sep 17 00:00:00 2001 From: Amy Sorto <8575252+amysorto@users.noreply.github.com> Date: Tue, 7 Jan 2025 17:51:08 +0000 Subject: [PATCH] docs: Update references to M2 theming guide color variants section and add link to styling tab for color input descriptions --- guides/material-2.md | 2 +- src/material/badge/badge.ts | 4 ++-- src/material/button/button-base.ts | 4 ++-- src/material/button/fab.ts | 4 ++-- src/material/checkbox/checkbox-config.ts | 4 ++-- src/material/checkbox/checkbox.ts | 4 ++-- src/material/chips/chip.ts | 4 ++-- src/material/datepicker/datepicker-base.ts | 12 ++++++------ src/material/form-field/form-field.ts | 8 ++++---- src/material/icon/icon.ts | 8 ++++---- src/material/list/list-option.ts | 5 +++-- src/material/list/selection-list.ts | 4 ++-- src/material/paginator/paginator.ts | 4 ++-- src/material/progress-bar/progress-bar.ts | 8 ++++---- src/material/progress-spinner/progress-spinner.ts | 8 ++++---- src/material/radio/radio.ts | 12 ++++++------ src/material/slide-toggle/slide-toggle-config.ts | 4 ++-- src/material/slide-toggle/slide-toggle.ts | 4 ++-- src/material/slider/slider.ts | 4 ++-- src/material/stepper/step-header.ts | 4 ++-- src/material/stepper/stepper.ts | 8 ++++---- src/material/tabs/tab-group.ts | 8 ++++---- src/material/tabs/tab-nav-bar/tab-nav-bar.ts | 8 ++++---- src/material/toolbar/toolbar.ts | 4 ++-- 24 files changed, 70 insertions(+), 69 deletions(-) diff --git a/guides/material-2.md b/guides/material-2.md index 5a5809d2bafb..5a908afd6c7c 100644 --- 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 `` 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 index 7a08cbbf9d0a..7c48d1e6033a 100644 --- 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 index 18d61f8b0bba..e1a73952bd0a 100644 --- 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 index 5d9641f5da52..a9edbcd256af 100644 --- 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 index 17c8339f8d92..70ed060f00dd 100644 --- 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 index a4cad5036e76..e3912918f156 100644 --- 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 index df865cb1ad68..e1eecfaef157 100644 --- 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 index 7ccbbbbf3a03..6046c3eb8ace 100644 --- a/src/material/datepicker/datepicker-base.ts +++ b/src/material/datepicker/datepicker-base.ts @@ -150,10 +150,10 @@ export class MatDatepickerContent> /** * 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; /** * 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 index c47904e7faa0..7e871d0bd2bb 100644 --- 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 index 3e80cf730c97..24e8d0be78d6 100644 --- 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 index c0bb4f419eae..c144909d67b6 100644 --- 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 index 0ab2b754d26a..2ba9ce71a1e9 100644 --- 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 index cfa0aeeca3eb..7ea27e892cf3 100644 --- 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 index 9de09605c4c1..bcaa9e4af0c3 100644 --- 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 index a8b805e88224..89eec823123d 100644 --- 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 index fe8469e2e4e5..99b54821b07d 100644 --- a/src/material/radio/radio.ts +++ b/src/material/radio/radio.ts @@ -79,10 +79,10 @@ export const MAT_RADIO_GROUP = new InjectionToken('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 index 359cec3b6bc1..44e3007fcc51 100644 --- 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 index b1fe596d1bb0..7d8a09bf97cc 100644 --- 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 index 74808591eb4a..692cb86a29cd 100644 --- 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 index 8ea45ff83158..38240eb3ced8 100644 --- 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 index 00b588791527..57f01ecbbe40 100644 --- 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 index 20492a9887a3..d585ea3d9cf2 100644 --- a/src/material/tabs/tab-group.ts +++ b/src/material/tabs/tab-group.ts @@ -121,10 +121,10 @@ export class MatTabGroup implements AfterContentInit, AfterContentChecked, OnDes /** * Theme color of the tab group. 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/tabs/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; @@ -214,10 +214,10 @@ export class MatTabGroup implements AfterContentInit, AfterContentChecked, OnDes /** * Theme color of the background of the tab group. 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/tabs/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 * * @deprecated The background color should be customized through Sass theming APIs. * @breaking-change 20.0.0 Remove this input diff --git a/src/material/tabs/tab-nav-bar/tab-nav-bar.ts b/src/material/tabs/tab-nav-bar/tab-nav-bar.ts index feb30ffb6aec..d03f4009af62 100644 --- a/src/material/tabs/tab-nav-bar/tab-nav-bar.ts +++ b/src/material/tabs/tab-nav-bar/tab-nav-bar.ts @@ -111,10 +111,10 @@ export class MatTabNav /** * Theme color of the background of the tab nav. 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/tabs/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 backgroundColor(): ThemePalette { @@ -140,10 +140,10 @@ export class MatTabNav /** * Theme color of the nav bar. 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/tabs/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/toolbar/toolbar.ts b/src/material/toolbar/toolbar.ts index afebe7306507..63e0c554a4f3 100644 --- a/src/material/toolbar/toolbar.ts +++ b/src/material/toolbar/toolbar.ts @@ -50,10 +50,10 @@ export class MatToolbar implements AfterViewInit { // TODO: should be typed as `ThemePalette` but internal apps pass in arbitrary strings. /** * Theme color of the toolbar. 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/toolbar/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;