docs(material/tabs): Update description and examples for color input …

…description on API page (#29336)

(cherry picked from commit f7a7289)

src/components-examples/material/tabs/index.ts

@@ -10,7 +10,6 @@ export {TabGroupHeaderBelowExample} from './tab-group-header-below/tab-group-hea
 export {TabGroupLazyLoadedExample} from './tab-group-lazy-loaded/tab-group-lazy-loaded-example';
 export {TabGroupPreserveContentExample} from './tab-group-preserve-content/tab-group-preserve-content-example';
 export {TabGroupStretchedExample} from './tab-group-stretched/tab-group-stretched-example';
-export {TabGroupThemeExample} from './tab-group-theme/tab-group-theme-example';
 export {TabNavBarBasicExample} from './tab-nav-bar-basic/tab-nav-bar-basic-example';
 export {TabGroupPaginatedExample} from './tab-group-paginated/tab-group-paginated-example';
 export {TabGroupInvertedExample} from './tab-group-inverted/tab-group-inverted-example';

src/components-examples/material/tabs/tab-nav-bar-basic/tab-nav-bar-basic-example.html

@@ -1,5 +1,5 @@
 <!-- #docregion mat-tab-nav -->
-<nav mat-tab-nav-bar [backgroundColor]="background" [tabPanel]="tabPanel">
+<nav mat-tab-nav-bar [tabPanel]="tabPanel">
   @for (link of links; track link) {
     <a mat-tab-link
       (click)="activeLink = link"
@@ -10,9 +10,6 @@
 <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
 <!-- #enddocregion mat-tab-nav -->
 
-<button mat-raised-button class="example-action-button" (click)="toggleBackground()">
-  Toggle background
-</button>
 <button mat-raised-button class="example-action-button" (click)="addLink()">
   Add link
 </button>

src/components-examples/material/tabs/tab-nav-bar-basic/tab-nav-bar-basic-example.ts

@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import {ThemePalette} from '@angular/material/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatTabsModule} from '@angular/material/tabs';
 
@@ -16,11 +15,6 @@ import {MatTabsModule} from '@angular/material/tabs';
 export class TabNavBarBasicExample {
   links = ['First', 'Second', 'Third'];
   activeLink = this.links[0];
-  background: ThemePalette = undefined;
-
-  toggleBackground() {
-    this.background = this.background ? undefined : 'primary';
-  }
 
   addLink() {
     this.links.push(`Link ${this.links.length + 1}`);

src/dev-app/tabs/tabs-demo.html

@@ -16,8 +16,6 @@ <h3>Tab group with lazy loaded content</h3>
 <tab-group-lazy-loaded-example></tab-group-lazy-loaded-example>
 <h3>Tab group stretched</h3>
 <tab-group-stretched-example></tab-group-stretched-example>
-<h3>Tab group theming</h3>
-<tab-group-theme-example></tab-group-theme-example>
 <h3>Tab navigation bar basic</h3>
 <tab-nav-bar-basic-example></tab-nav-bar-basic-example>
 <h3>Paginated Tabs</h3>

src/dev-app/tabs/tabs-demo.ts

@@ -22,7 +22,6 @@ import {
   TabGroupPaginatedExample,
   TabGroupPreserveContentExample,
   TabGroupStretchedExample,
-  TabGroupThemeExample,
   TabNavBarBasicExample,
 } from '@angular/components-examples/material/tabs';
 import {ChangeDetectionStrategy, Component} from '@angular/core';
@@ -37,7 +36,6 @@ import {MatTabsModule} from '@angular/material/tabs';
     TabGroupInvertedExample,
     TabGroupPaginatedExample,
     TabNavBarBasicExample,
-    TabGroupThemeExample,
     TabGroupStretchedExample,
     TabGroupPreserveContentExample,
     TabGroupLazyLoadedExample,

src/material/tabs/tab-group.ts

@@ -120,7 +120,13 @@ export class MatTabGroup implements AfterContentInit, AfterContentChecked, OnDes
   /** Subscription to changes in the tab labels. */
   private _tabLabelSubscription = Subscription.EMPTY;
 
-  /** Theme color of the tab group. */
+  /**
+   * Theme color of the tab group. 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()
   color: ThemePalette;
 
@@ -204,7 +210,12 @@ export class MatTabGroup implements AfterContentInit, AfterContentChecked, OnDes
   preserveContent: boolean = false;
 
   /**
-   * Background color of the tab group.
+   * Theme color of the background of the tab group. 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.
+   *
    * @deprecated The background color should be customized through Sass theming APIs.
    * @breaking-change 20.0.0 Remove this input
    */

src/material/tabs/tab-nav-bar/tab-nav-bar.ts

@@ -112,7 +112,13 @@ export class MatTabNav
   /** Query list of all tab links of the tab navigation. */
   @ContentChildren(forwardRef(() => MatTabLink), {descendants: true}) _items: QueryList<MatTabLink>;
 
-  /** Background color of the tab nav. */
+  /**
+   * Theme color of the background of the tab nav. 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 backgroundColor(): ThemePalette {
     return this._backgroundColor;