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 @@ - + @@ -39,8 +39,8 @@ - - + + @@ -60,8 +60,8 @@ - - + + 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) {
- +

Responsive App

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 ``. -### Theming - -The color of a `` 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 `` 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 `` 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; /** * 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 ``, the datepicker works with `@angular/forms` dir -### 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; }