diff --git a/src/dev-app/theme.scss b/src/dev-app/theme.scss index d191f29345fb..fdb80ac2c30d 100644 --- a/src/dev-app/theme.scss +++ b/src/dev-app/theme.scss @@ -75,7 +75,7 @@ $candy-app-theme: mat.define-light-theme(( $density-scales: (-1, -2, minimum, maximum); @each $density in $density-scales { .demo-density-#{$density} { - @include mat.private-all-component-densities($density); + @include mat.all-component-densities($density); @include mat.private-all-legacy-component-densities($density); } } diff --git a/src/material/_index.scss b/src/material/_index.scss index f0864096ccfe..11484e990018 100644 --- a/src/material/_index.scss +++ b/src/material/_index.scss @@ -15,7 +15,7 @@ font-size, line-height, font-weight, letter-spacing, font-family, font-shorthand; // Private/Internal -@forward './core/density/private/all-density' as private-* show private-all-component-densities; +@forward './core/density/private/all-density' show all-component-densities; @forward './legacy-core/density/private/all-density' as private-* show private-all-legacy-component-densities; @forward './core/theming/theming' show private-check-duplicate-theme-styles, @@ -78,18 +78,20 @@ autocomplete-color, autocomplete-typography, autocomplete-density; @forward './legacy-autocomplete/autocomplete-theme' as legacy-autocomplete-* show legacy-autocomplete-theme, legacy-autocomplete-color, legacy-autocomplete-typography; -@forward './badge/badge-theme' as badge-* show badge-theme, badge-color, badge-typography; +@forward './badge/badge-theme' as badge-* show badge-theme, badge-color, badge-typography, + badge-density; @forward './bottom-sheet/bottom-sheet-theme' as bottom-sheet-* show bottom-sheet-theme, - bottom-sheet-color, bottom-sheet-typography; + bottom-sheet-color, bottom-sheet-typography, bottom-sheet-density; @forward './legacy-button/button-theme' as legacy-button-* show legacy-button-theme, legacy-button-color, legacy-button-typography; -@forward './button/button-theme' as button-* show button-theme, button-color, button-typography; +@forward './button/button-theme' as button-* show button-theme, button-color, button-typography, + button-density; @forward './button/fab-theme' as fab-* show fab-color, fab-typography, fab-density, fab-theme; @forward './button/icon-button-theme' as icon-button-* show icon-button-color, icon-button-typography, icon-button-density, icon-button-theme; @forward './button-toggle/button-toggle-theme' as button-toggle-* show button-toggle-theme, - button-toggle-color, button-toggle-typography; + button-toggle-color, button-toggle-typography, button-toggle-density; @forward './card/card-theme' as card-* show card-theme, card-color, card-typography, card-density; @forward './legacy-card/card-theme' as legacy-card-* show legacy-card-theme, legacy-card-color, legacy-card-typography; @@ -102,35 +104,35 @@ @forward './chips/chips-theme' as chips-* show chips-theme, chips-color, chips-typography, chips-density; @forward './datepicker/datepicker-theme' as datepicker-* show datepicker-theme, datepicker-color, - datepicker-typography, datepicker-date-range-colors; + datepicker-typography, datepicker-date-range-colors, datepicker-density; @forward './legacy-dialog/dialog-theme' as legacy-dialog-* show legacy-dialog-theme, legacy-dialog-color, legacy-dialog-typography; @forward './dialog/dialog-theme' as dialog-* show dialog-theme, dialog-color, dialog-typography, dialog-density; @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-typography, divider-density; @forward './expansion/expansion-theme' as expansion-* show expansion-theme, expansion-color, - expansion-typography; + expansion-typography, expansion-density; @forward './form-field/form-field-theme' as form-field-* show form-field-theme, form-field-color, form-field-typography, form-field-density; @forward './legacy-form-field/form-field-theme' as legacy-form-field-* show legacy-form-field-theme, legacy-form-field-color, legacy-form-field-typography; @forward './grid-list/grid-list-theme' as grid-list-* show grid-list-theme, grid-list-color, - grid-list-typography; -@forward './icon/icon-theme' as icon-* show icon-theme, icon-color, icon-typography; + grid-list-typography, grid-list-density; +@forward './icon/icon-theme' as icon-* show icon-theme, icon-color, icon-typography, icon-density; @forward './legacy-input/input-theme' as legacy-input-* show legacy-input-theme, legacy-input-color, legacy-input-typography; @forward './input/input-theme' as input-* show input-theme, input-color, input-typography, input-density; -@forward './list/list-theme' as list-* show list-theme, list-color, list-typography; +@forward './list/list-theme' as list-* show list-theme, list-color, list-typography, list-density; @forward './legacy-list/list-theme' as legacy-list-* show legacy-list-theme, legacy-list-color, legacy-list-typography; -@forward './menu/menu-theme' as menu-* show menu-theme, menu-color, menu-typography; +@forward './menu/menu-theme' as menu-* show menu-theme, menu-color, menu-typography, menu-density; @forward './legacy-menu/menu-theme' as legacy-menu-* show legacy-menu-theme, legacy-menu-color, legacy-menu-typography; @forward './paginator/paginator-theme' as paginator-* show paginator-theme, paginator-color, - paginator-typography; + paginator-typography, paginator-density; @forward './legacy-paginator/paginator-theme' as legacy-paginator-* show legacy-paginator-theme, legacy-paginator-color, legacy-paginator-typography; @forward './legacy-progress-bar/progress-bar-theme' as legacy-progress-bar-* show @@ -138,7 +140,8 @@ @forward './progress-bar/progress-bar-theme' as progress-bar-* show progress-bar-theme, progress-bar-color, progress-bar-typography, progress-bar-density; @forward './progress-spinner/progress-spinner-theme' as progress-spinner-* show - progress-spinner-theme, progress-spinner-color, progress-spinner-typography; + progress-spinner-theme, progress-spinner-color, progress-spinner-typography, + progress-spinner-density; @forward './legacy-progress-spinner/progress-spinner-theme' as legacy-progress-spinner-* show legacy-progress-spinner-theme, legacy-progress-spinner-color, legacy-progress-spinner-typography; @forward './radio/radio-theme' as radio-* show radio-theme, radio-color, radio-typography, @@ -150,21 +153,22 @@ @forward './legacy-select/select-theme' as legacy-select-* show legacy-select-theme, legacy-select-color, legacy-select-typography; @forward './sidenav/sidenav-theme' as sidenav-* show sidenav-theme, sidenav-color, - sidenav-typography; + sidenav-typography, sidenav-density; @forward './legacy-slide-toggle/slide-toggle-theme' as legacy-slide-toggle-* show legacy-slide-toggle-theme, legacy-slide-toggle-color, legacy-slide-toggle-typography; @forward './slide-toggle/slide-toggle-theme' as slide-toggle-* show slide-toggle-theme, slide-toggle-color, slide-toggle-typography, slide-toggle-density; @forward './legacy-slider/slider-theme' as legacy-slider-* show legacy-slider-theme, legacy-slider-color, legacy-slider-typography; -@forward './slider/slider-theme' as slider-* show slider-theme, slider-color, slider-typography; +@forward './slider/slider-theme' as slider-* show slider-theme, slider-color, slider-typography, + slider-density; @forward './snack-bar/snack-bar-theme' as snack-bar-* show snack-bar-theme, snack-bar-color, snack-bar-typography, snack-bar-density; @forward './legacy-snack-bar/snack-bar-theme' as legacy-snack-bar-* show legacy-snack-bar-theme, legacy-snack-bar-color, legacy-snack-bar-typography; -@forward './sort/sort-theme' as sort-* show sort-theme, sort-color, sort-typography; +@forward './sort/sort-theme' as sort-* show sort-theme, sort-color, sort-typography, sort-density; @forward './stepper/stepper-theme' as stepper-* show stepper-theme, stepper-color, - stepper-typography; + stepper-typography, stepper-density; @forward './table/table-theme' as table-* show table-theme, table-color, table-typography, table-density; @forward './legacy-table/table-theme' as legacy-table-* show legacy-table-theme, legacy-table-color, @@ -173,12 +177,12 @@ @forward './legacy-tabs/tabs-theme' as legacy-tabs-* show legacy-tabs-theme, legacy-tabs-color, legacy-tabs-typography; @forward './toolbar/toolbar-theme' as toolbar-* show toolbar-theme, toolbar-color, - toolbar-typography; + toolbar-typography, toolbar-density; @forward './legacy-tooltip/tooltip-theme' as legacy-tooltip-* show legacy-tooltip-theme, legacy-tooltip-color, legacy-tooltip-typography; @forward './tooltip/tooltip-theme' as tooltip-* show tooltip-theme, tooltip-color, tooltip-typography, tooltip-density; -@forward './tree/tree-theme' as tree-* show tree-theme, tree-color, tree-typography; +@forward './tree/tree-theme' as tree-* show tree-theme, tree-color, tree-typography, tree-density; // MDC Helpers @forward './core/mdc-helpers/mdc-helpers' as private-* show private-using-mdc-theme, diff --git a/src/material/badge/_badge-legacy-index.scss b/src/material/badge/_badge-legacy-index.scss index ff49f165a35f..c67c63b256c3 100644 --- a/src/material/badge/_badge-legacy-index.scss +++ b/src/material/badge/_badge-legacy-index.scss @@ -1,3 +1,3 @@ @forward 'badge-theme' hide $default-size, $font-size, $font-weight, $large-size, $small-size, -color, theme, typography; +color, theme, typography, density; @forward 'badge-theme' as mat-badge-* hide mat-badge-density, mat-badge-size; diff --git a/src/material/badge/_badge-theme.import.scss b/src/material/badge/_badge-theme.import.scss index 653f5925701c..31a915c76659 100644 --- a/src/material/badge/_badge-theme.import.scss +++ b/src/material/badge/_badge-theme.import.scss @@ -2,7 +2,7 @@ @forward '../core/typography/typography-utils.import'; @forward '../../cdk/a11y/index.import'; @forward 'badge-theme' hide $default-size, $font-size, $font-weight, $large-size, $small-size, -color, theme, typography; +color, theme, typography, density; @forward 'badge-theme' as mat-badge-* hide mat-badge-density, mat-badge-size; @import '../core/theming/palette'; diff --git a/src/material/badge/_badge-theme.scss b/src/material/badge/_badge-theme.scss index 769eb0dc60a9..5bd2ed9dc3e0 100644 --- a/src/material/badge/_badge-theme.scss +++ b/src/material/badge/_badge-theme.scss @@ -229,7 +229,7 @@ $_badge-structure-emitted: false !default; } } -@mixin _density($config-or-theme) {} +@mixin density($config-or-theme) {} @mixin theme($theme-or-color-config) { $theme: theming.private-legacy-get-theme($theme-or-color-config); @@ -254,7 +254,7 @@ $_badge-structure-emitted: false !default; @include color($color); } @if $density != null { - @include _density($density); + @include density($density); } @if $typography != null { @include typography($typography); diff --git a/src/material/bottom-sheet/_bottom-sheet-legacy-index.scss b/src/material/bottom-sheet/_bottom-sheet-legacy-index.scss index 0039f4c980a1..950504e8acb4 100644 --- a/src/material/bottom-sheet/_bottom-sheet-legacy-index.scss +++ b/src/material/bottom-sheet/_bottom-sheet-legacy-index.scss @@ -1,2 +1,2 @@ -@forward 'bottom-sheet-theme' hide color, theme, typography; +@forward 'bottom-sheet-theme' hide color, theme, typography, density; @forward 'bottom-sheet-theme' as mat-bottom-sheet-* hide mat-bottom-sheet-density; diff --git a/src/material/bottom-sheet/_bottom-sheet-theme.import.scss b/src/material/bottom-sheet/_bottom-sheet-theme.import.scss index 3dec4322c29b..e722de07fc79 100644 --- a/src/material/bottom-sheet/_bottom-sheet-theme.import.scss +++ b/src/material/bottom-sheet/_bottom-sheet-theme.import.scss @@ -1,7 +1,7 @@ @forward '../core/style/private.import'; @forward '../core/theming/theming.import'; @forward '../core/typography/typography-utils.import'; -@forward 'bottom-sheet-theme' hide color, theme, typography; +@forward 'bottom-sheet-theme' hide color, theme, typography, density; @forward 'bottom-sheet-theme' as mat-bottom-sheet-* hide mat-bottom-sheet-density; @import '../core/style/private'; diff --git a/src/material/bottom-sheet/_bottom-sheet-theme.scss b/src/material/bottom-sheet/_bottom-sheet-theme.scss index 5c2f645f7e7a..d75ccde7a298 100644 --- a/src/material/bottom-sheet/_bottom-sheet-theme.scss +++ b/src/material/bottom-sheet/_bottom-sheet-theme.scss @@ -24,7 +24,7 @@ } } -@mixin _density($config-or-theme) {} +@mixin density($config-or-theme) {} @mixin theme($theme-or-color-config) { $theme: theming.private-legacy-get-theme($theme-or-color-config); @@ -37,7 +37,7 @@ @include color($color); } @if $density != null { - @include _density($density); + @include density($density); } @if $typography != null { @include typography($typography); diff --git a/src/material/core/theming/tests/BUILD.bazel b/src/material/core/theming/tests/BUILD.bazel index 55f573fd7ff0..dd77e9ffd842 100644 --- a/src/material/core/theming/tests/BUILD.bazel +++ b/src/material/core/theming/tests/BUILD.bazel @@ -46,7 +46,7 @@ sass_binary( ) build_test( - name = "sass_compile_tetss", + name = "sass_compile_tests", targets = [ ":test-css-variables-theme", ":test-theming-api", diff --git a/src/material/core/theming/tests/test-theming-bundle.scss b/src/material/core/theming/tests/test-theming-bundle.scss index 8507aea818c7..b5fb198f0447 100644 --- a/src/material/core/theming/tests/test-theming-bundle.scss +++ b/src/material/core/theming/tests/test-theming-bundle.scss @@ -7,39 +7,323 @@ // the same themes multiple times. mat.$theme-ignore-duplication-warnings: true; -@include mat.core(); -@include mat.legacy-core(); +// If one of these mixins or function is not available, the compilation will fail and the +// test will be reported as failing. +// Theme creation functions. $theme: mat.define-light-theme(( - color: ( - primary: mat.define-palette(mat.$red-palette), - accent: mat.define-palette(mat.$blue-palette), - ), - density: -2, + color: ( + primary: mat.define-palette(mat.$red-palette), + accent: mat.define-palette(mat.$blue-palette), + ), + typography: mat.define-typography-config(), + density: -2, )); +$dark-theme: mat.define-dark-theme($theme); +$legacy-typography: mat.define-legacy-typography-config(); +$rem-typography: mat.define-rem-typography-config(); -// If one of these mixins is not available, the compilation will fail and the -// test will be reported as failing. +// All-* mixins. @include mat.all-component-themes($theme); -@include mat.all-component-typographies(); @include mat.all-component-colors($theme); +@include mat.all-component-typographies($theme); +@include mat.all-component-densities($theme); + +// Legacy all-* mixins. +@include mat.all-legacy-component-themes($theme); +@include mat.all-legacy-component-colors($theme); +@include mat.all-legacy-component-typographies($theme); + +// Core mixins. +@include mat.core(); +@include mat.strong-focus-indicators(); +@include mat.strong-focus-indicators-theme($theme); -@include mat.private-all-component-densities($theme); -@include mat.private-all-component-densities((density: 0)); -@include mat.private-all-component-densities((density: -1)); -@include mat.private-all-component-densities((density: minimum)); +// Legacy core mixins. +@include mat.legacy-core(); +// Component theme mixins. @include mat.core-theme($theme); +@include mat.core-color($theme); +@include mat.core-typography($theme); +@include mat.core-density($theme); +@include mat.option-theme($theme); +@include mat.option-color($theme); +@include mat.option-typography($theme); +@include mat.option-density($theme); +@include mat.optgroup-theme($theme); +@include mat.optgroup-color($theme); +@include mat.optgroup-typography($theme); +@include mat.optgroup-density($theme); + +@include mat.autocomplete-theme($theme); +@include mat.autocomplete-color($theme); +@include mat.autocomplete-typography($theme); +@include mat.autocomplete-density($theme); + +@include mat.badge-theme($theme); +@include mat.badge-color($theme); +@include mat.badge-typography($theme); +@include mat.badge-density($theme); + +@include mat.bottom-sheet-theme($theme); +@include mat.bottom-sheet-color($theme); +@include mat.bottom-sheet-typography($theme); +@include mat.bottom-sheet-density($theme); + @include mat.button-theme($theme); +@include mat.button-color($theme); +@include mat.button-typography($theme); +@include mat.button-density($theme); +@include mat.icon-button-theme($theme); +@include mat.icon-button-color($theme); +@include mat.icon-button-typography($theme); +@include mat.icon-button-density($theme); +@include mat.fab-theme($theme); +@include mat.fab-color($theme); +@include mat.fab-typography($theme); +@include mat.fab-density($theme); -@include mat.strong-focus-indicators(); -@include mat.strong-focus-indicators-theme($theme); +@include mat.button-toggle-theme($theme); +@include mat.button-toggle-color($theme); +@include mat.button-toggle-typography($theme); +@include mat.button-toggle-density($theme); -// Legacy. -@include mat.all-legacy-component-themes($theme); -@include mat.all-legacy-component-typographies(); -@include mat.all-legacy-component-colors($theme); -@include mat.private-all-legacy-component-densities($theme); -@include mat.private-all-legacy-component-densities((density: 0)); -@include mat.private-all-legacy-component-densities((density: -1)); -@include mat.private-all-legacy-component-densities((density: minimum)); +@include mat.card-theme($theme); +@include mat.card-color($theme); +@include mat.card-typography($theme); +@include mat.card-density($theme); + +@include mat.checkbox-theme($theme); +@include mat.checkbox-color($theme); +@include mat.checkbox-typography($theme); +@include mat.checkbox-density($theme); + +@include mat.chips-theme($theme); +@include mat.chips-color($theme); +@include mat.chips-typography($theme); +@include mat.chips-density($theme); + +@include mat.datepicker-theme($theme); +@include mat.datepicker-color($theme); +@include mat.datepicker-typography($theme); +@include mat.datepicker-density($theme); + +@include mat.dialog-theme($theme); +@include mat.dialog-color($theme); +@include mat.dialog-typography($theme); +@include mat.dialog-density($theme); + +@include mat.divider-theme($theme); +@include mat.divider-color($theme); +@include mat.divider-typography($theme); +@include mat.divider-density($theme); + +@include mat.expansion-theme($theme); +@include mat.expansion-color($theme); +@include mat.expansion-typography($theme); +@include mat.expansion-density($theme); + +@include mat.form-field-theme($theme); +@include mat.form-field-color($theme); +@include mat.form-field-typography($theme); +@include mat.form-field-density($theme); + +@include mat.grid-list-theme($theme); +@include mat.grid-list-color($theme); +@include mat.grid-list-typography($theme); +@include mat.grid-list-density($theme); + +@include mat.icon-theme($theme); +@include mat.icon-color($theme); +@include mat.icon-typography($theme); +@include mat.icon-density($theme); + +@include mat.input-theme($theme); +@include mat.input-color($theme); +@include mat.input-typography($theme); +@include mat.input-density($theme); + +@include mat.list-theme($theme); +@include mat.list-color($theme); +@include mat.list-typography($theme); +@include mat.list-density($theme); + +@include mat.menu-theme($theme); +@include mat.menu-color($theme); +@include mat.menu-typography($theme); +@include mat.menu-density($theme); + +@include mat.paginator-theme($theme); +@include mat.paginator-color($theme); +@include mat.paginator-typography($theme); +@include mat.paginator-density($theme); + +@include mat.progress-bar-theme($theme); +@include mat.progress-bar-color($theme); +@include mat.progress-bar-typography($theme); +@include mat.progress-bar-density($theme); + +@include mat.progress-spinner-theme($theme); +@include mat.progress-spinner-color($theme); +@include mat.progress-spinner-typography($theme); +@include mat.progress-spinner-density($theme); + +@include mat.radio-theme($theme); +@include mat.radio-color($theme); +@include mat.radio-typography($theme); +@include mat.radio-density($theme); + +@include mat.select-theme($theme); +@include mat.select-color($theme); +@include mat.select-typography($theme); +@include mat.select-density($theme); + +@include mat.sidenav-theme($theme); +@include mat.sidenav-color($theme); +@include mat.sidenav-typography($theme); +@include mat.sidenav-density($theme); + +@include mat.slide-toggle-theme($theme); +@include mat.slide-toggle-color($theme); +@include mat.slide-toggle-typography($theme); +@include mat.slide-toggle-density($theme); + +@include mat.slider-theme($theme); +@include mat.slider-color($theme); +@include mat.slider-typography($theme); +@include mat.slider-density($theme); + +@include mat.snack-bar-theme($theme); +@include mat.snack-bar-color($theme); +@include mat.snack-bar-typography($theme); +@include mat.snack-bar-density($theme); + +@include mat.sort-theme($theme); +@include mat.sort-color($theme); +@include mat.sort-typography($theme); +@include mat.sort-density($theme); + +@include mat.stepper-theme($theme); +@include mat.stepper-color($theme); +@include mat.stepper-typography($theme); +@include mat.stepper-density($theme); + +@include mat.table-theme($theme); +@include mat.table-color($theme); +@include mat.table-typography($theme); +@include mat.table-density($theme); + +@include mat.tabs-theme($theme); +@include mat.tabs-color($theme); +@include mat.tabs-typography($theme); +@include mat.tabs-density($theme); + +@include mat.toolbar-theme($theme); +@include mat.toolbar-color($theme); +@include mat.toolbar-typography($theme); +@include mat.toolbar-density($theme); + +@include mat.tooltip-theme($theme); +@include mat.tooltip-color($theme); +@include mat.tooltip-typography($theme); +@include mat.tooltip-density($theme); + +@include mat.tree-theme($theme); +@include mat.tree-color($theme); +@include mat.tree-typography($theme); +@include mat.tree-density($theme); + +// Legacy component theme mixins. +@include mat.legacy-core-theme($theme); +@include mat.legacy-core-color($theme); +@include mat.legacy-option-theme($theme); +@include mat.legacy-option-color($theme); +@include mat.legacy-option-typography($theme); +@include mat.legacy-optgroup-theme($theme); +@include mat.legacy-optgroup-color($theme); +@include mat.legacy-optgroup-typography($theme); + +@include mat.legacy-autocomplete-theme($theme); +@include mat.legacy-autocomplete-color($theme); +@include mat.legacy-autocomplete-typography($theme); + +@include mat.legacy-button-theme($theme); +@include mat.legacy-button-color($theme); +@include mat.legacy-button-typography($theme); + +@include mat.legacy-card-theme($theme); +@include mat.legacy-card-color($theme); +@include mat.legacy-card-typography($theme); + +@include mat.legacy-checkbox-theme($theme); +@include mat.legacy-checkbox-color($theme); +@include mat.legacy-checkbox-typography($theme); + +@include mat.legacy-chips-theme($theme); +@include mat.legacy-chips-color($theme); +@include mat.legacy-chips-typography($theme); + +@include mat.legacy-dialog-theme($theme); +@include mat.legacy-dialog-color($theme); +@include mat.legacy-dialog-typography($theme); + +@include mat.legacy-form-field-theme($theme); +@include mat.legacy-form-field-color($theme); +@include mat.legacy-form-field-typography($theme); + +@include mat.legacy-input-theme($theme); +@include mat.legacy-input-color($theme); +@include mat.legacy-input-typography($theme); + +@include mat.legacy-list-theme($theme); +@include mat.legacy-list-color($theme); +@include mat.legacy-list-typography($theme); + +@include mat.legacy-menu-theme($theme); +@include mat.legacy-menu-color($theme); +@include mat.legacy-menu-typography($theme); + +@include mat.legacy-paginator-theme($theme); +@include mat.legacy-paginator-color($theme); +@include mat.legacy-paginator-typography($theme); + +@include mat.legacy-progress-bar-theme($theme); +@include mat.legacy-progress-bar-color($theme); +@include mat.legacy-progress-bar-typography($theme); + +@include mat.legacy-progress-spinner-theme($theme); +@include mat.legacy-progress-spinner-color($theme); +@include mat.legacy-progress-spinner-typography($theme); + +@include mat.legacy-radio-theme($theme); +@include mat.legacy-radio-color($theme); +@include mat.legacy-radio-typography($theme); + +@include mat.legacy-select-theme($theme); +@include mat.legacy-select-color($theme); +@include mat.legacy-select-typography($theme); + +@include mat.legacy-slide-toggle-theme($theme); +@include mat.legacy-slide-toggle-color($theme); +@include mat.legacy-slide-toggle-typography($theme); + +@include mat.legacy-slider-theme($theme); +@include mat.legacy-slider-color($theme); +@include mat.legacy-slider-typography($theme); + +@include mat.legacy-snack-bar-theme($theme); +@include mat.legacy-snack-bar-color($theme); +@include mat.legacy-snack-bar-typography($theme); + +@include mat.legacy-table-theme($theme); +@include mat.legacy-table-color($theme); +@include mat.legacy-table-typography($theme); + +@include mat.legacy-tabs-theme($theme); +@include mat.legacy-tabs-color($theme); +@include mat.legacy-tabs-typography($theme); + +@include mat.legacy-tooltip-theme($theme); +@include mat.legacy-tooltip-color($theme); +@include mat.legacy-tooltip-typography($theme); diff --git a/src/material/datepicker/_datepicker-legacy-index.scss b/src/material/datepicker/_datepicker-legacy-index.scss index a22c9ae76f2a..8981329d35b9 100644 --- a/src/material/datepicker/_datepicker-legacy-index.scss +++ b/src/material/datepicker/_datepicker-legacy-index.scss @@ -1,6 +1,6 @@ @forward 'datepicker-theme' hide $calendar-body-font-size, $calendar-weekday-table-font-size, $range-fade-amount, $selected-fade-amount, $selected-today-box-shadow-width, $today-fade-amount, -color, date-range-colors, theme, typography; +color, date-range-colors, theme, typography, density; @forward 'datepicker-theme' as mat-* hide $mat-range-fade-amount, $mat-selected-fade-amount, $mat-selected-today-box-shadow-width, $mat-today-fade-amount, mat-color, mat-density, mat-theme, mat-typography, mat-unselected-cell; diff --git a/src/material/datepicker/_datepicker-theme.import.scss b/src/material/datepicker/_datepicker-theme.import.scss index 4859e735daca..bb07fefb7ed3 100644 --- a/src/material/datepicker/_datepicker-theme.import.scss +++ b/src/material/datepicker/_datepicker-theme.import.scss @@ -3,7 +3,7 @@ @forward '../core/typography/typography-utils.import'; @forward 'datepicker-theme' hide $calendar-body-font-size, $calendar-weekday-table-font-size, $range-fade-amount, $selected-fade-amount, $selected-today-box-shadow-width, $today-fade-amount, -color, date-range-colors, theme, typography; +color, date-range-colors, theme, typography, density; @forward 'datepicker-theme' as mat-* hide $mat-range-fade-amount, $mat-selected-fade-amount, $mat-selected-today-box-shadow-width, $mat-today-fade-amount, mat-color, mat-density, mat-theme, mat-typography, mat-unselected-cell; diff --git a/src/material/datepicker/_datepicker-theme.scss b/src/material/datepicker/_datepicker-theme.scss index 083337b27dc9..1828b8fc8cf1 100644 --- a/src/material/datepicker/_datepicker-theme.scss +++ b/src/material/datepicker/_datepicker-theme.scss @@ -252,7 +252,9 @@ $calendar-weekday-table-font-size: 11px !default; } } -@mixin _density($config-or-theme) { +@mixin density($config-or-theme) { + $density-scale: theming.get-density-config($config-or-theme); + // Regardless of the user-passed density, we want the calendar previous/next buttons to remain at // density -2 .mat-calendar-controls { @@ -271,7 +273,7 @@ $calendar-weekday-table-font-size: 11px !default; @include color($color); } @if $density != null { - @include _density($density); + @include density($density); } @if $typography != null { @include typography($typography); diff --git a/src/material/divider/_divider-legacy-index.scss b/src/material/divider/_divider-legacy-index.scss index d3e1bb4e57e1..f0a30732adab 100644 --- a/src/material/divider/_divider-legacy-index.scss +++ b/src/material/divider/_divider-legacy-index.scss @@ -1,3 +1,3 @@ -@forward 'divider-theme' hide color, theme, typography; +@forward 'divider-theme' hide color, theme, typography, density; @forward 'divider-theme' as mat-divider-* hide mat-divider-density; @forward 'divider-offset' as mat-*; diff --git a/src/material/divider/_divider-theme.import.scss b/src/material/divider/_divider-theme.import.scss index 863c37206bc3..a6162b53e2b0 100644 --- a/src/material/divider/_divider-theme.import.scss +++ b/src/material/divider/_divider-theme.import.scss @@ -1,5 +1,5 @@ @forward '../core/theming/theming.import'; -@forward 'divider-theme' hide color, theme, typography; +@forward 'divider-theme' hide color, theme, typography, density; @forward 'divider-theme' as mat-divider-* hide mat-divider-density; @import '../core/theming/palette'; diff --git a/src/material/divider/_divider-theme.scss b/src/material/divider/_divider-theme.scss index 896d9ba2d45f..520b22554723 100644 --- a/src/material/divider/_divider-theme.scss +++ b/src/material/divider/_divider-theme.scss @@ -16,7 +16,7 @@ @mixin typography($config-or-theme) {} -@mixin _density($config-or-theme) {} +@mixin density($config-or-theme) {} @mixin theme($theme-or-color-config) { $theme: theming.private-legacy-get-theme($theme-or-color-config); @@ -29,7 +29,7 @@ @include color($color); } @if $density != null { - @include _density($density); + @include density($density); } @if $typography != null { @include typography($typography); diff --git a/src/material/grid-list/_grid-list-legacy-index.scss b/src/material/grid-list/_grid-list-legacy-index.scss index 058d60f12092..b310d59d55c0 100644 --- a/src/material/grid-list/_grid-list-legacy-index.scss +++ b/src/material/grid-list/_grid-list-legacy-index.scss @@ -1,2 +1,2 @@ -@forward 'grid-list-theme' hide color, theme, typography; +@forward 'grid-list-theme' hide color, theme, typography, density; @forward 'grid-list-theme' as mat-grid-list-* hide mat-grid-list-density; diff --git a/src/material/grid-list/_grid-list-theme.import.scss b/src/material/grid-list/_grid-list-theme.import.scss index 3dfcf1e4199f..d06e6dd51057 100644 --- a/src/material/grid-list/_grid-list-theme.import.scss +++ b/src/material/grid-list/_grid-list-theme.import.scss @@ -1,7 +1,7 @@ @forward '../core/theming/theming.import'; @forward '../core/typography/typography-utils.import'; @forward '../core/style/list-common.import'; -@forward 'grid-list-theme' hide color, theme, typography; +@forward 'grid-list-theme' hide color, theme, typography, density; @forward 'grid-list-theme' as mat-grid-list-* hide mat-grid-list-density; @import '../core/theming/palette'; diff --git a/src/material/grid-list/_grid-list-theme.scss b/src/material/grid-list/_grid-list-theme.scss index 703ada471f70..11aa6d943f85 100644 --- a/src/material/grid-list/_grid-list-theme.scss +++ b/src/material/grid-list/_grid-list-theme.scss @@ -17,7 +17,7 @@ } } -@mixin _density($config-or-theme) {} +@mixin density($config-or-theme) {} @mixin theme($theme-or-color-config) { $theme: theming.private-legacy-get-theme($theme-or-color-config); @@ -30,7 +30,7 @@ @include color($color); } @if $density != null { - @include _density($density); + @include density($density); } @if $typography != null { @include typography($typography); diff --git a/src/material/icon/_icon-legacy-index.scss b/src/material/icon/_icon-legacy-index.scss index d90ca52d8c76..a86990881097 100644 --- a/src/material/icon/_icon-legacy-index.scss +++ b/src/material/icon/_icon-legacy-index.scss @@ -1,2 +1,2 @@ -@forward 'icon-theme' hide color, theme, typography; +@forward 'icon-theme' hide color, theme, typography, density; @forward 'icon-theme' as mat-icon-* hide mat-icon-density; diff --git a/src/material/icon/_icon-theme.import.scss b/src/material/icon/_icon-theme.import.scss index 57b46365c6fd..543b78f9762d 100644 --- a/src/material/icon/_icon-theme.import.scss +++ b/src/material/icon/_icon-theme.import.scss @@ -1,5 +1,5 @@ @forward '../core/theming/theming.import'; -@forward 'icon-theme' hide color, theme, typography; +@forward 'icon-theme' hide color, theme, typography, density; @forward 'icon-theme' as mat-icon-* hide mat-icon-density; @import '../core/theming/theming'; diff --git a/src/material/icon/_icon-theme.scss b/src/material/icon/_icon-theme.scss index be5d5be6e4d5..a938200d4995 100644 --- a/src/material/icon/_icon-theme.scss +++ b/src/material/icon/_icon-theme.scss @@ -26,7 +26,7 @@ @mixin typography($config-or-theme) {} -@mixin _density($config-or-theme) {} +@mixin density($config-or-theme) {} @mixin theme($theme-or-color-config) { $theme: theming.private-legacy-get-theme($theme-or-color-config); @@ -39,7 +39,7 @@ @include color($color); } @if $density != null { - @include _density($density); + @include density($density); } @if $typography != null { @include typography($typography); diff --git a/src/material/sidenav/_sidenav-legacy-index.scss b/src/material/sidenav/_sidenav-legacy-index.scss index a33c0cc10330..9a98d9531157 100644 --- a/src/material/sidenav/_sidenav-legacy-index.scss +++ b/src/material/sidenav/_sidenav-legacy-index.scss @@ -1,2 +1,2 @@ -@forward 'sidenav-theme' hide color, theme, typography; +@forward 'sidenav-theme' hide color, theme, typography, density; @forward 'sidenav-theme' as mat-sidenav-* hide mat-sidenav-density; diff --git a/src/material/sidenav/_sidenav-theme.import.scss b/src/material/sidenav/_sidenav-theme.import.scss index 7280dbcf548a..1ca4d2de17c3 100644 --- a/src/material/sidenav/_sidenav-theme.import.scss +++ b/src/material/sidenav/_sidenav-theme.import.scss @@ -1,6 +1,6 @@ @forward '../core/style/private.import'; @forward '../core/theming/theming.import'; -@forward 'sidenav-theme' hide color, theme, typography; +@forward 'sidenav-theme' hide color, theme, typography, density; @forward 'sidenav-theme' as mat-sidenav-* hide mat-sidenav-density; @import '../core/style/private'; diff --git a/src/material/sidenav/_sidenav-theme.scss b/src/material/sidenav/_sidenav-theme.scss index a0b2726c6e9b..2d023548cef3 100644 --- a/src/material/sidenav/_sidenav-theme.scss +++ b/src/material/sidenav/_sidenav-theme.scss @@ -77,7 +77,7 @@ @mixin typography($config-or-theme) {} -@mixin _density($config-or-theme) {} +@mixin density($config-or-theme) {} @mixin theme($theme-or-color-config) { $theme: theming.private-legacy-get-theme($theme-or-color-config); @@ -90,7 +90,7 @@ @include color($color); } @if $density != null { - @include _density($density); + @include density($density); } @if $typography != null { @include typography($typography); diff --git a/src/material/sort/_sort-legacy-index.scss b/src/material/sort/_sort-legacy-index.scss index 77854b06aac6..c8c62037304b 100644 --- a/src/material/sort/_sort-legacy-index.scss +++ b/src/material/sort/_sort-legacy-index.scss @@ -1,2 +1,2 @@ -@forward 'sort-theme' hide color, theme, typography; +@forward 'sort-theme' hide color, theme, typography, density; @forward 'sort-theme' as mat-sort-* hide mat-sort-density; diff --git a/src/material/sort/_sort-theme.import.scss b/src/material/sort/_sort-theme.import.scss index 36b714f6be06..c6cd25105676 100644 --- a/src/material/sort/_sort-theme.import.scss +++ b/src/material/sort/_sort-theme.import.scss @@ -1,5 +1,5 @@ @forward '../core/theming/theming.import'; -@forward 'sort-theme' hide color, theme, typography; +@forward 'sort-theme' hide color, theme, typography, density; @forward 'sort-theme' as mat-sort-* hide mat-sort-density; @import '../core/theming/theming'; diff --git a/src/material/sort/_sort-theme.scss b/src/material/sort/_sort-theme.scss index b605a441906d..2bfb50249d1b 100644 --- a/src/material/sort/_sort-theme.scss +++ b/src/material/sort/_sort-theme.scss @@ -30,7 +30,7 @@ @mixin typography($config-or-theme) {} -@mixin _density($config-or-theme) {} +@mixin density($config-or-theme) {} @mixin theme($theme-or-color-config) { $theme: theming.private-legacy-get-theme($theme-or-color-config); @@ -43,7 +43,7 @@ @include color($color); } @if $density != null { - @include _density($density); + @include density($density); } @if $typography != null { @include typography($typography);