diff --git a/src/material/_index.scss b/src/material/_index.scss index d58ed5b23e80..fececf4b899f 100644 --- a/src/material/_index.scss +++ b/src/material/_index.scss @@ -52,14 +52,15 @@ @forward './core/typography/all-typography' show all-component-typographies; // Component themes -@forward './core/core-theme' as core-* show core-color, core-theme, core-typography, core-density; -@forward './core/ripple/ripple-theme' as ripple-* show ripple-color, ripple-theme; +@forward './core/core-theme' as core-* show core-color, core-theme, core-typography, core-density, + core-base; +@forward './core/ripple/ripple-theme' as ripple-* show ripple-color, ripple-theme, ripple-base; @forward './core/option/option-theme' as option-* show option-color, option-typography, option-theme, option-density, option-base; @forward './core/option/optgroup-theme' as optgroup-* show optgroup-color, optgroup-typography, optgroup-theme, optgroup-density, optgroup-base; @forward './core/selection/pseudo-checkbox/pseudo-checkbox-theme' as pseudo-checkbox-* show - pseudo-checkbox-color, pseudo-checkbox-typography, pseudo-checkbox-theme; + pseudo-checkbox-color, pseudo-checkbox-typography, pseudo-checkbox-theme, pseudo-checkbox-base; @forward './core/selection/pseudo-checkbox/pseudo-checkbox-common' as pseudo-checkbox-* show pseudo-checkbox-legacy-size; @forward './core/focus-indicators/focus-indicators-theme' as strong-focus-indicators-* show @@ -71,11 +72,11 @@ @forward './bottom-sheet/bottom-sheet-theme' as bottom-sheet-* show bottom-sheet-theme, bottom-sheet-color, bottom-sheet-typography, bottom-sheet-density, bottom-sheet-base; @forward './button/button-theme' as button-* show button-theme, button-color, button-typography, - button-density; + button-density, button-base; @forward './button/fab-theme' as fab-* show fab-color, fab-typography, fab-density, fab-theme, fab-base; @forward './button/icon-button-theme' as icon-button-* show icon-button-color, - icon-button-typography, icon-button-density, icon-button-theme; + icon-button-typography, icon-button-density, icon-button-theme, icon-button-base; @forward './button-toggle/button-toggle-theme' as button-toggle-* show button-toggle-theme, button-toggle-color, button-toggle-typography, button-toggle-density, button-toggle-base; @forward './card/card-theme' as card-* show card-theme, card-color, card-typography, card-density, @@ -90,11 +91,11 @@ dialog-density, dialog-base; @forward './dialog/dialog-legacy-padding' as dialog-* show dialog-legacy-padding; @forward './divider/divider-theme' as divider-* show divider-theme, divider-color, - divider-typography, divider-density; + divider-typography, divider-density, divider-base; @forward './expansion/expansion-theme' as expansion-* show expansion-theme, expansion-color, - expansion-typography, expansion-density; + expansion-typography, expansion-density, expansion-base; @forward './form-field/form-field-theme' as form-field-* show form-field-theme, - form-field-color, form-field-typography, form-field-density; + form-field-color, form-field-typography, form-field-density, form-field-base; @forward './grid-list/grid-list-theme' as grid-list-* show grid-list-theme, grid-list-color, grid-list-typography, grid-list-density, grid-list-base; @forward './icon/icon-theme' as icon-* show icon-theme, icon-color, icon-typography, icon-density, @@ -102,9 +103,9 @@ @forward './input/input-theme' as input-* show input-theme, input-color, input-typography, input-density, input-base; @forward './list/list-theme' as list-* show list-theme, list-color, list-typography, -list-density, list-base; + list-density, list-base; @forward './menu/menu-theme' as menu-* show menu-theme, menu-color, menu-typography, menu-density, -menu-base; + menu-base; @forward './paginator/paginator-theme' as paginator-* show paginator-theme, paginator-color, paginator-typography, paginator-density, paginator-base; @forward './progress-bar/progress-bar-theme' as progress-bar-* show @@ -126,7 +127,8 @@ menu-base; slider-density, slider-base; @forward './snack-bar/snack-bar-theme' as snack-bar-* show snack-bar-theme, snack-bar-color, snack-bar-typography, snack-bar-density, snack-bar-base; -@forward './sort/sort-theme' as sort-* show sort-theme, sort-color, sort-typography, sort-density; +@forward './sort/sort-theme' as sort-* show sort-theme, sort-color, sort-typography, sort-density, + sort-base; @forward './stepper/stepper-theme' as stepper-* show stepper-theme, stepper-color, stepper-typography, stepper-density, stepper-base; @forward './table/table-theme' as table-* show table-theme, table-color, table-typography, @@ -137,7 +139,8 @@ menu-base; toolbar-typography, toolbar-density, toolbar-base; @forward './tooltip/tooltip-theme' as tooltip-* show tooltip-theme, tooltip-color, tooltip-typography, tooltip-density, tooltip-base; -@forward './tree/tree-theme' as tree-* show tree-theme, tree-color, tree-typography, tree-density; +@forward './tree/tree-theme' as tree-* show tree-theme, tree-color, tree-typography, tree-density, + tree-base; // MDC Helpers @forward './core/mdc-helpers/mdc-helpers' as private-* show private-using-mdc-theme, diff --git a/src/material/button/_button-theme.scss b/src/material/button/_button-theme.scss index b7a69099d35b..8443df55319b 100644 --- a/src/material/button/_button-theme.scss +++ b/src/material/button/_button-theme.scss @@ -32,6 +32,8 @@ )); } +@mixin base($theme) {} + @mixin color($theme) { @include mdc-helpers.using-mdc-theme($theme) { $is-dark: inspection.get-theme-type($theme) == dark; @@ -254,6 +256,7 @@ @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-button') { + @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); } diff --git a/src/material/button/_icon-button-theme.scss b/src/material/button/_icon-button-theme.scss index 37db62a952be..b4dea9324d27 100644 --- a/src/material/button/_icon-button-theme.scss +++ b/src/material/button/_icon-button-theme.scss @@ -23,6 +23,8 @@ $_icon-size: 24px; @return if($is-dark, 'light', 'dark'); } +@mixin base($theme) {} + @mixin color($theme) { $color-tokens: tokens-mdc-icon-button.get-color-tokens($theme); $surface: inspection.get-theme-color($theme, background, card); @@ -104,6 +106,7 @@ $_icon-size: 24px; @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-icon-button') { + @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); } diff --git a/src/material/core/_core-theme.scss b/src/material/core/_core-theme.scss index d0553492c553..8a864a24af9c 100644 --- a/src/material/core/_core-theme.scss +++ b/src/material/core/_core-theme.scss @@ -8,6 +8,13 @@ @use './style/elevation'; @use './typography/typography'; +@mixin base($theme) { + @include ripple-theme.base($theme); + @include option-theme.base($theme); + @include optgroup-theme.base($theme); + @include pseudo-checkbox-theme.base($theme); +} + @mixin color($theme) { @include ripple-theme.color($theme); @include option-theme.color($theme); @@ -64,6 +71,7 @@ // there won't be multiple warnings. e.g. if `mat-core-theme` reports a warning, then // the imported themes (such as `mat-ripple-theme`) should not report again. @include theming.private-check-duplicate-theme-styles($theme, 'mat-core') { + @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); } diff --git a/src/material/core/ripple/_ripple-theme.scss b/src/material/core/ripple/_ripple-theme.scss index 00def46ec063..2e7f49039926 100644 --- a/src/material/core/ripple/_ripple-theme.scss +++ b/src/material/core/ripple/_ripple-theme.scss @@ -2,6 +2,8 @@ @use '../theming/theming'; @use '../theming/inspection'; +@mixin base($theme) {} + // Colors for the ripple elements. @mixin color($theme) { $foreground-base: inspection.get-theme-color($theme, foreground, base); @@ -22,6 +24,7 @@ @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-ripple') { + @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); } diff --git a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss index 6ead159aa1df..e24dea856005 100644 --- a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss +++ b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss @@ -19,6 +19,8 @@ } } +@mixin base($theme) {} + @mixin color($theme) { $is-dark-theme: inspection.get-theme-type($theme) == dark; $primary: inspection.get-theme-color($theme, primary); @@ -78,6 +80,7 @@ @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-pseudo-checkbox') { + @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); } diff --git a/src/material/core/theming/_all-theme.scss b/src/material/core/theming/_all-theme.scss index 4d3f32a4ae2f..12d7eefc8607 100644 --- a/src/material/core/theming/_all-theme.scss +++ b/src/material/core/theming/_all-theme.scss @@ -82,6 +82,46 @@ } } +@mixin all-component-bases($theme) { + @include core-theme.base($theme); + @include card-theme.base($theme); + @include progress-bar-theme.base($theme); + @include tooltip-theme.base($theme); + @include form-field-theme.base($theme); + @include input-theme.base($theme); + @include select-theme.base($theme); + @include autocomplete-theme.base($theme); + @include dialog-theme.base($theme); + @include chips-theme.base($theme); + @include slide-toggle-theme.base($theme); + @include radio-theme.base($theme); + @include slider-theme.base($theme); + @include menu-theme.base($theme); + @include list-theme.base($theme); + @include paginator-theme.base($theme); + @include tabs-theme.base($theme); + @include checkbox-theme.base($theme); + @include button-theme.base($theme); + @include icon-button-theme.base($theme); + @include fab-theme.base($theme); + @include snack-bar-theme.base($theme); + @include table-theme.base($theme); + @include progress-spinner-theme.base($theme); + @include badge-theme.base($theme); + @include bottom-sheet-theme.base($theme); + @include button-toggle-theme.base($theme); + @include datepicker-theme.base($theme); + @include divider-theme.base($theme); + @include expansion-theme.base($theme); + @include grid-list-theme.base($theme); + @include icon-theme.base($theme); + @include sidenav-theme.base($theme); + @include stepper-theme.base($theme); + @include sort-theme.base($theme); + @include toolbar-theme.base($theme); + @include tree-theme.base($theme); +} + // @deprecated Use `all-component-themes`. @mixin angular-material-theme($theme) { @include all-component-themes($theme); diff --git a/src/material/divider/_divider-theme.scss b/src/material/divider/_divider-theme.scss index b179d84e559a..58bbcf887a55 100644 --- a/src/material/divider/_divider-theme.scss +++ b/src/material/divider/_divider-theme.scss @@ -4,6 +4,8 @@ @use '../core/tokens/token-utils'; @use '../core/tokens/m2/mat/divider' as tokens-mat-divider; +@mixin base($theme) {} + @mixin color($theme) { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values(tokens-mat-divider.$prefix, @@ -17,6 +19,7 @@ @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-divider') { + @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); } diff --git a/src/material/expansion/_expansion-theme.scss b/src/material/expansion/_expansion-theme.scss index a257410cf229..3978adb98bbb 100644 --- a/src/material/expansion/_expansion-theme.scss +++ b/src/material/expansion/_expansion-theme.scss @@ -5,6 +5,8 @@ @use '../core/tokens/token-utils'; @use '../core/tokens/m2/mat/expansion' as tokens-mat-expansion; +@mixin base($theme) {} + @mixin color($theme) { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values(tokens-mat-expansion.$prefix, @@ -31,6 +33,7 @@ @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-expansion') { + @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); } diff --git a/src/material/form-field/_form-field-theme.scss b/src/material/form-field/_form-field-theme.scss index 5498d1a9ba1f..3ded8312245d 100644 --- a/src/material/form-field/_form-field-theme.scss +++ b/src/material/form-field/_form-field-theme.scss @@ -11,6 +11,8 @@ @use '../core/tokens/token-utils'; @use './form-field-density'; +@mixin base($theme) {} + @mixin color($theme) { @include sass-utils.current-selector-or-root() { @include mdc-filled-text-field-theme.theme( @@ -57,6 +59,7 @@ @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-form-field') { + @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); } diff --git a/src/material/sort/_sort-theme.scss b/src/material/sort/_sort-theme.scss index 8ae16affc0ad..a56bfb9394a6 100644 --- a/src/material/sort/_sort-theme.scss +++ b/src/material/sort/_sort-theme.scss @@ -3,6 +3,8 @@ @use '../core/theming/theming'; @use '../core/theming/inspection'; +@mixin base($theme) {} + @mixin color($theme) { .mat-sort-header-arrow { $table-background: inspection.get-theme-color($theme, background, card); @@ -30,6 +32,7 @@ @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-sort') { + @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); } diff --git a/src/material/tree/_tree-theme.scss b/src/material/tree/_tree-theme.scss index d699bdd98d86..1f365994d124 100644 --- a/src/material/tree/_tree-theme.scss +++ b/src/material/tree/_tree-theme.scss @@ -4,6 +4,8 @@ @use '../core/typography/typography'; @use './tree-variables'; +@mixin base($theme) {} + @mixin color($theme) { .mat-tree { background: inspection.get-theme-color($theme, background, card); @@ -44,6 +46,7 @@ @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-tree') { + @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); }