diff --git a/src/material/_index.scss b/src/material/_index.scss index b60ee7383b2f..223bcad6b8b8 100644 --- a/src/material/_index.scss +++ b/src/material/_index.scss @@ -130,7 +130,8 @@ menu-base; stepper-typography, stepper-density, stepper-base; @forward './table/table-theme' as table-* show table-theme, table-color, table-typography, table-density, table-base; -@forward './tabs/tabs-theme' as tabs-* show tabs-theme, tabs-color, tabs-typography, tabs-density; +@forward './tabs/tabs-theme' as tabs-* show tabs-theme, tabs-color, tabs-typography, tabs-density, + tabs-base; @forward './toolbar/toolbar-theme' as toolbar-* show toolbar-theme, toolbar-color, toolbar-typography, toolbar-density, toolbar-base; @forward './tooltip/tooltip-theme' as tooltip-* show tooltip-theme, tooltip-color, diff --git a/src/material/tabs/_tabs-common.scss b/src/material/tabs/_tabs-common.scss index c2df07afeaaf..6f70bb725a95 100644 --- a/src/material/tabs/_tabs-common.scss +++ b/src/material/tabs/_tabs-common.scss @@ -215,11 +215,6 @@ $mat-tab-animation-duration: 500ms !default; overflow: hidden; position: relative; flex-shrink: 0; - - @include mdc-tab-indicator-theme.theme(tokens-mdc-tab-indicator.get-unthemable-tokens()); - @include mdc-tab-theme.secondary-navigation-tab-theme(tokens-mdc-tab.get-unthemable-tokens()); - @include token-utils.create-token-values( - tokens-mat-tab-header.$prefix, tokens-mat-tab-header.get-unthemable-tokens()); } .mdc-tab-indicator .mdc-tab-indicator__content { @@ -352,11 +347,6 @@ $mat-tab-animation-duration: 500ms !default; @mixin paginated-tab-header-with-background($header-selector, $tab-selector) { &.mat-tabs-with-background { - @include token-utils.create-token-values( - tokens-mat-tab-header-with-background.$prefix, - tokens-mat-tab-header-with-background.get-unthemable-tokens() - ); - @include token-utils.use-tokens( tokens-mat-tab-header-with-background.$prefix, tokens-mat-tab-header-with-background.get-token-slots() diff --git a/src/material/tabs/_tabs-theme.scss b/src/material/tabs/_tabs-theme.scss index aea524c2c8e7..eea4b3414588 100644 --- a/src/material/tabs/_tabs-theme.scss +++ b/src/material/tabs/_tabs-theme.scss @@ -1,5 +1,6 @@ @use '@material/tab-indicator/tab-indicator-theme' as mdc-tab-indicator-theme; @use '@material/tab/tab-theme' as mdc-tab-theme; +@use '../core/style/sass-utils'; @use '../core/tokens/m2/mdc/tab' as tokens-mdc-tab; @use '../core/tokens/m2/mdc/tab-indicator' as tokens-mdc-tab-indicator; @use '../core/tokens/m2/mat/tab-header' as tokens-mat-tab-header; @@ -9,6 +10,19 @@ @use '../core/typography/typography'; @use '../core/tokens/token-utils'; +@mixin base($theme) { + @include sass-utils.current-selector-or-root() { + @include mdc-tab-indicator-theme.theme(tokens-mdc-tab-indicator.get-unthemable-tokens()); + @include mdc-tab-theme.secondary-navigation-tab-theme(tokens-mdc-tab.get-unthemable-tokens()); + @include token-utils.create-token-values( + tokens-mat-tab-header.$prefix, tokens-mat-tab-header.get-unthemable-tokens()); + @include token-utils.create-token-values( + tokens-mat-tab-header-with-background.$prefix, + tokens-mat-tab-header-with-background.get-unthemable-tokens() + ); + } +} + @mixin color($theme) { .mat-mdc-tab-group, .mat-mdc-tab-nav-bar { @include _palette-styles($theme, primary); @@ -77,6 +91,7 @@ @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-tabs') { + @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); }