From a409c1f41df4de5f6847894ba991fc63caa18924 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Sat, 21 Nov 2020 16:01:26 +0100 Subject: [PATCH] refactor(material/core): resolve circular dependencies Hopefully the last set of code changes for the Sass module system migration. * Combines `theming/_theming.scss` and `theming/_private.scss`, because they had a circular dependency and since `theming.scss` could be considered a public API, we can't move the utilities out into a shared file. * Changes the `angular-material-density` mixin to include density mixins individually, instead of going through `angular-material-theme`. The previous approach had transient circular dependencies that will turn into hard errors once we switch to the Sass module system. The new approach is in line with what we're doing already inside `angular-material-typography`. * Switches a few MDC function calls to go through `@use` instead of `@import`. For some reason Sass was having a hard time finding the old ones after the files are migrated to the module system. * Passes a variable as a parameter to `mat-mdc-private-dialog-structure-overrides`, instead of expecting it to be available as a global variable. This seems like an oversight. * Fixes several places where mixins were being imported transitevely, rather than explicitly. This will be an error with the Sass module system. --- src/dev-app/theme.scss | 2 +- .../column-resize/_column-resize.scss | 1 - .../mdc-button/_button-theme.scss | 1 + src/material-experimental/mdc-core/_core.scss | 2 +- .../mdc-core/option/_optgroup-theme.scss | 3 +- .../mdc-core/option/_option-theme.scss | 3 +- .../_mdc-dialog-structure-overrides.scss | 4 +- .../mdc-dialog/dialog.scss | 2 +- .../mdc-form-field/_form-field-density.scss | 5 +- .../mdc-form-field/_form-field-subscript.scss | 2 + .../mdc-helpers/_mdc-helpers.scss | 1 - .../mdc-list/_list-theme.scss | 4 +- .../mdc-menu/_menu-theme.scss | 1 + src/material-experimental/mdc-menu/menu.scss | 3 +- .../mdc-paginator/_paginator-theme.scss | 5 +- .../mdc-tabs/_tabs-theme.scss | 1 + .../mdc-theming/_all-theme.scss | 2 +- .../selection/_selection.scss | 2 +- .../autocomplete/_autocomplete-theme.scss | 1 - src/material/badge/_badge-theme.scss | 1 - .../bottom-sheet/_bottom-sheet-theme.scss | 1 - .../button-toggle/_button-toggle-theme.scss | 5 +- src/material/button/_button-theme.scss | 1 - src/material/card/_card-theme.scss | 1 - src/material/checkbox/_checkbox-theme.scss | 1 - src/material/chips/_chips-theme.scss | 1 - src/material/core/color/_all-color.scss | 2 +- .../core/density/private/_all-density.scss | 27 ++- .../focus-indicators/_focus-indicators.scss | 1 - src/material/core/option/_optgroup-theme.scss | 1 - src/material/core/option/_option-theme.scss | 1 - src/material/core/ripple/_ripple.scss | 1 - .../_pseudo-checkbox-theme.scss | 1 - src/material/core/theming/_all-theme.scss | 2 +- src/material/core/theming/_private.scss | 160 ----------------- src/material/core/theming/_theming.scss | 166 +++++++++++++++++- .../core/typography/_all-typography.scss | 1 - .../datepicker/_datepicker-theme.scss | 1 - src/material/dialog/_dialog-theme.scss | 1 - src/material/divider/_divider-theme.scss | 1 - src/material/expansion/_expansion-theme.scss | 1 - .../form-field/_form-field-fill-theme.scss | 1 - .../form-field/_form-field-legacy-theme.scss | 1 - .../form-field/_form-field-outline-theme.scss | 1 - .../_form-field-standard-theme.scss | 1 - .../form-field/_form-field-theme.scss | 5 +- src/material/grid-list/_grid-list-theme.scss | 1 - src/material/icon/_icon-theme.scss | 1 - src/material/input/_input-theme.scss | 1 - src/material/list/_list-theme.scss | 1 - src/material/menu/_menu-theme.scss | 1 - src/material/paginator/_paginator-theme.scss | 5 +- .../progress-bar/_progress-bar-theme.scss | 1 - .../_progress-spinner-theme.scss | 1 - src/material/radio/_radio-theme.scss | 1 - src/material/select/_select-theme.scss | 1 - src/material/sidenav/_sidenav-theme.scss | 1 - .../slide-toggle/_slide-toggle-theme.scss | 1 - src/material/slider/_slider-theme.scss | 1 - src/material/snack-bar/_snack-bar-theme.scss | 1 - src/material/sort/_sort-theme.scss | 1 - src/material/stepper/_stepper-theme.scss | 1 - src/material/table/_table-theme.scss | 1 - src/material/tabs/_tabs-theme.scss | 1 - src/material/toolbar/_toolbar-theme.scss | 1 - src/material/tooltip/_tooltip-theme.scss | 1 - src/material/tree/_tree-theme.scss | 1 - 67 files changed, 220 insertions(+), 237 deletions(-) delete mode 100644 src/material/core/theming/_private.scss diff --git a/src/dev-app/theme.scss b/src/dev-app/theme.scss index 0c0b57964765..91b27fe001ba 100644 --- a/src/dev-app/theme.scss +++ b/src/dev-app/theme.scss @@ -86,7 +86,7 @@ $dark-theme: mat-dark-theme(( // The classes are applied conditionally based on the selected density in the dev-app layout // component. $density-scales: (-1, -2, minimum, maximum); -@each $density in$density-scales { +@each $density in $density-scales { .demo-density-#{$density} { @include angular-material-density($density); @include angular-material-mdc-density($density); diff --git a/src/material-experimental/column-resize/_column-resize.scss b/src/material-experimental/column-resize/_column-resize.scss index 98d14bc7d117..4cb7f2359c6c 100644 --- a/src/material-experimental/column-resize/_column-resize.scss +++ b/src/material-experimental/column-resize/_column-resize.scss @@ -1,6 +1,5 @@ @import '../../material/core/style/variables'; @import '../../material/core/style/vendor-prefixes'; -@import '../../material/core/theming/private'; @import '../../material/core/theming/palette'; @import '../../material/core/theming/theming'; diff --git a/src/material-experimental/mdc-button/_button-theme.scss b/src/material-experimental/mdc-button/_button-theme.scss index f4c61b317309..8a45866656eb 100644 --- a/src/material-experimental/mdc-button/_button-theme.scss +++ b/src/material-experimental/mdc-button/_button-theme.scss @@ -3,6 +3,7 @@ @import '@material/fab/mixins.import'; @import '@material/ripple/mixins.import'; @import '@material/icon-button/mixins.import'; +@import '@material/theme/mixins.import'; @import '../../material/core/ripple/ripple'; @import '../mdc-helpers/mdc-helpers'; diff --git a/src/material-experimental/mdc-core/_core.scss b/src/material-experimental/mdc-core/_core.scss index 589a7f6e4eec..dd6881fa1991 100644 --- a/src/material-experimental/mdc-core/_core.scss +++ b/src/material-experimental/mdc-core/_core.scss @@ -1,4 +1,4 @@ -@import '../../material/core/theming/private'; +@import '../../material/core/theming/theming'; @import './option/option-theme'; @import './option/optgroup-theme'; diff --git a/src/material-experimental/mdc-core/option/_optgroup-theme.scss b/src/material-experimental/mdc-core/option/_optgroup-theme.scss index e31ab03f6292..dee79df87107 100644 --- a/src/material-experimental/mdc-core/option/_optgroup-theme.scss +++ b/src/material-experimental/mdc-core/option/_optgroup-theme.scss @@ -1,8 +1,9 @@ @import '@material/list/mixins.import'; @import '@material/list/variables.import'; @import '@material/theme/functions.import'; +@import '@material/theme/mixins.import'; @import '../../mdc-helpers/mdc-helpers'; -@import '../../../material/core/theming/private'; +@import '../../../material/core/theming/theming'; @mixin mat-mdc-optgroup-color($config-or-theme) { $config: mat-get-color-config($config-or-theme); diff --git a/src/material-experimental/mdc-core/option/_option-theme.scss b/src/material-experimental/mdc-core/option/_option-theme.scss index c1bffebdf518..fa9366abded6 100644 --- a/src/material-experimental/mdc-core/option/_option-theme.scss +++ b/src/material-experimental/mdc-core/option/_option-theme.scss @@ -1,8 +1,9 @@ @import '@material/list/mixins.import'; @import '@material/list/variables.import'; @import '@material/theme/functions.import'; +@import '@material/theme/mixins.import'; @import '../../mdc-helpers/mdc-helpers'; -@import '../../../material/core/theming/private'; +@import '../../../material/core/theming/theming'; @mixin mat-mdc-option-color($config-or-theme) { $config: mat-get-color-config($config-or-theme); diff --git a/src/material-experimental/mdc-dialog/_mdc-dialog-structure-overrides.scss b/src/material-experimental/mdc-dialog/_mdc-dialog-structure-overrides.scss index ef48ce976686..3960b52db15e 100644 --- a/src/material-experimental/mdc-dialog/_mdc-dialog-structure-overrides.scss +++ b/src/material-experimental/mdc-dialog/_mdc-dialog-structure-overrides.scss @@ -1,6 +1,6 @@ // Mixin that can be included to override the default MDC dialog styles to fit // our needs. See individual comments for context on why certain styles need to be modified. -@mixin mat-mdc-private-dialog-structure-overrides() { +@mixin mat-mdc-private-dialog-structure-overrides($content-max-height) { // MDC dialog sets max-height and max-width on the `mdc-dialog__surface` element. This // element is the parent of the portal outlet. This means that the actual user-content // is scrollable, but as per Material Design specification, only the dialog content @@ -10,7 +10,7 @@ // an explicit max-height for the content element, so that the content is scrollable. This // matches the behavior from the non-MDC dialog and is backwards compatible. .mat-mdc-dialog-content { - max-height: $mat-dialog-content-max-height; + max-height: $content-max-height; } .mat-mdc-dialog-container { diff --git a/src/material-experimental/mdc-dialog/dialog.scss b/src/material-experimental/mdc-dialog/dialog.scss index 6d8a2a204a3b..cadf6ddd80cb 100644 --- a/src/material-experimental/mdc-dialog/dialog.scss +++ b/src/material-experimental/mdc-dialog/dialog.scss @@ -12,7 +12,7 @@ $mat-dialog-content-max-height: 65vh !default; $mat-dialog-button-horizontal-margin: 8px !default; @include mdc-dialog-core-styles($query: $mat-base-styles-query); -@include mat-mdc-private-dialog-structure-overrides(); +@include mat-mdc-private-dialog-structure-overrides($mat-dialog-content-max-height); // The dialog container is focusable. We remove the default outline shown in browsers. .mat-mdc-dialog-container { diff --git a/src/material-experimental/mdc-form-field/_form-field-density.scss b/src/material-experimental/mdc-form-field/_form-field-density.scss index 92d78000ee12..0beddde308c8 100644 --- a/src/material-experimental/mdc-form-field/_form-field-density.scss +++ b/src/material-experimental/mdc-form-field/_form-field-density.scss @@ -1,5 +1,6 @@ -@import '@material/density/functions.import'; +@use '@material/density'; @import '@material/textfield/variables.import'; +@import '../../material/core/theming/theming'; @import 'form-field-sizing'; // Mixin that sets the vertical spacing for the infix container of filled form fields. @@ -38,7 +39,7 @@ @mixin mat-mdc-private-form-field-density($config-or-theme) { $density-scale: mat-get-density-config($config-or-theme); // Height of the form field that is based on the current density scale. - $height: mdc-density-prop-value( + $height: density.prop-value( $density-config: $mdc-text-field-density-config, $density-scale: $density-scale, $property-name: height, diff --git a/src/material-experimental/mdc-form-field/_form-field-subscript.scss b/src/material-experimental/mdc-form-field/_form-field-subscript.scss index c4b2ed0a2cb7..c5d27af07daa 100644 --- a/src/material-experimental/mdc-form-field/_form-field-subscript.scss +++ b/src/material-experimental/mdc-form-field/_form-field-subscript.scss @@ -1,3 +1,5 @@ +@import '@material/theme/mixins.import'; +@import '@material/textfield/variables.import'; @import 'form-field-sizing'; @import '../mdc-helpers/mdc-helpers'; diff --git a/src/material-experimental/mdc-helpers/_mdc-helpers.scss b/src/material-experimental/mdc-helpers/_mdc-helpers.scss index e3cd78f260a6..5a3dfb3be981 100644 --- a/src/material-experimental/mdc-helpers/_mdc-helpers.scss +++ b/src/material-experimental/mdc-helpers/_mdc-helpers.scss @@ -8,7 +8,6 @@ @import '@material/typography/variables.import'; @import '../../material/core/style/layout-common'; @import '../../material/core/theming/theming'; -@import '../../material/core/theming/private'; @import '../../material/core/typography/typography'; // A set of standard queries to use with MDC's queryable mixins. diff --git a/src/material-experimental/mdc-list/_list-theme.scss b/src/material-experimental/mdc-list/_list-theme.scss index 6040a81b5c01..1299c23da730 100644 --- a/src/material-experimental/mdc-list/_list-theme.scss +++ b/src/material-experimental/mdc-list/_list-theme.scss @@ -1,4 +1,4 @@ -@import '@material/density/functions.import'; +@use '@material/density'; @import '@material/list/variables.import'; @import '@material/list/mixins.import'; @@ -34,7 +34,7 @@ @mixin mat-mdc-list-density($config-or-theme) { $density-scale: mat-get-density-config($config-or-theme); - $height: mdc-density-prop-value( + $height: density.prop-value( $density-config: $mdc-list-single-line-density-config, $density-scale: $density-scale, $property-name: height, diff --git a/src/material-experimental/mdc-menu/_menu-theme.scss b/src/material-experimental/mdc-menu/_menu-theme.scss index 03bb15b59457..951abdf5e818 100644 --- a/src/material-experimental/mdc-menu/_menu-theme.scss +++ b/src/material-experimental/mdc-menu/_menu-theme.scss @@ -3,6 +3,7 @@ @import '@material/list/mixins.import'; @import '@material/list/variables.import'; @import '@material/theme/functions.import'; +@import '@material/theme/mixins.import'; @import '../mdc-helpers/mdc-helpers'; @mixin mat-mdc-menu-color($config-or-theme) { diff --git a/src/material-experimental/mdc-menu/menu.scss b/src/material-experimental/mdc-menu/menu.scss index ff4e5824dd0f..861066cca39c 100644 --- a/src/material-experimental/mdc-menu/menu.scss +++ b/src/material-experimental/mdc-menu/menu.scss @@ -1,3 +1,4 @@ +@use '@material/density'; @import '@material/menu-surface/mixins.import'; @import '@material/list/mixins.import'; @import '@material/list/variables.import'; @@ -29,7 +30,7 @@ } .mat-mdc-menu-item { - $height: mdc-density-prop-value( + $height: density.prop-value( $density-config: $mdc-list-single-line-density-config, $density-scale: $mdc-list-single-line-density-scale, $property-name: height, diff --git a/src/material-experimental/mdc-paginator/_paginator-theme.scss b/src/material-experimental/mdc-paginator/_paginator-theme.scss index e24956d7dee7..b96a2775d624 100644 --- a/src/material-experimental/mdc-paginator/_paginator-theme.scss +++ b/src/material-experimental/mdc-paginator/_paginator-theme.scss @@ -1,7 +1,8 @@ @import '@material/theme/variables.import'; -@import '@material/typography/variables.import'; -@import '../../material/core/theming/private'; +@import '@material/typography/mixins.import'; +@import '../../material/core/theming/theming'; @import '../../material/core/density/private/compatibility'; +@import '../mdc-helpers/mdc-helpers'; @import './paginator-variables'; @mixin mat-mdc-paginator-color($config-or-theme) { diff --git a/src/material-experimental/mdc-tabs/_tabs-theme.scss b/src/material-experimental/mdc-tabs/_tabs-theme.scss index b543fa3262da..a6b91e3dd5d4 100644 --- a/src/material-experimental/mdc-tabs/_tabs-theme.scss +++ b/src/material-experimental/mdc-tabs/_tabs-theme.scss @@ -1,4 +1,5 @@ @import '@material/theme/functions.import'; +@import '@material/theme/mixins.import'; @import '@material/tab-indicator/mixins.import'; @import '@material/tab/mixins.import'; @import '@material/tab/variables.import'; diff --git a/src/material-experimental/mdc-theming/_all-theme.scss b/src/material-experimental/mdc-theming/_all-theme.scss index d83560955a11..65e5ba07c444 100644 --- a/src/material-experimental/mdc-theming/_all-theme.scss +++ b/src/material-experimental/mdc-theming/_all-theme.scss @@ -19,7 +19,7 @@ @import '../mdc-input/input-theme'; @import '../mdc-form-field/form-field-theme'; @import '../../material/core/core'; -@import '../../material/core/theming/private'; +@import '../../material/core/theming/theming'; @mixin angular-material-mdc-theme($theme-or-color-config) { $dedupe-key: 'angular-material-mdc-theme'; diff --git a/src/material-experimental/selection/_selection.scss b/src/material-experimental/selection/_selection.scss index cb4b5049078d..17b83e563381 100644 --- a/src/material-experimental/selection/_selection.scss +++ b/src/material-experimental/selection/_selection.scss @@ -1,4 +1,4 @@ -@import '../../material/core/theming/private'; +@import '../../material/core/theming/theming'; @mixin mat-selection-theme($theme-or-color-config) { $theme: mat-private-legacy-get-theme($theme-or-color-config); diff --git a/src/material/autocomplete/_autocomplete-theme.scss b/src/material/autocomplete/_autocomplete-theme.scss index ec0d78ddcb3c..a473e1f1f9f2 100644 --- a/src/material/autocomplete/_autocomplete-theme.scss +++ b/src/material/autocomplete/_autocomplete-theme.scss @@ -1,6 +1,5 @@ @import '../core/style/private'; @import '../core/theming/theming'; -@import '../core/theming/private'; @mixin mat-autocomplete-color($config-or-theme) { $config: mat-get-color-config($config-or-theme); diff --git a/src/material/badge/_badge-theme.scss b/src/material/badge/_badge-theme.scss index 8cbb22267873..44613fa7110f 100644 --- a/src/material/badge/_badge-theme.scss +++ b/src/material/badge/_badge-theme.scss @@ -3,7 +3,6 @@ // no style sheet support for directives. @import '../core/theming/palette'; @import '../core/theming/theming'; -@import '../core/theming/private'; @import '../core/typography/typography-utils'; @import '../../cdk/a11y/a11y'; diff --git a/src/material/bottom-sheet/_bottom-sheet-theme.scss b/src/material/bottom-sheet/_bottom-sheet-theme.scss index e3e2a9a34ce2..e3e175ce615d 100644 --- a/src/material/bottom-sheet/_bottom-sheet-theme.scss +++ b/src/material/bottom-sheet/_bottom-sheet-theme.scss @@ -2,7 +2,6 @@ @import '../core/typography/typography-utils'; @import '../core/theming/palette'; @import '../core/theming/theming'; -@import '../core/theming/private'; @mixin mat-bottom-sheet-color($config-or-theme) { $config: mat-get-color-config($config-or-theme); diff --git a/src/material/button-toggle/_button-toggle-theme.scss b/src/material/button-toggle/_button-toggle-theme.scss index c6db2e9962f7..7c2633a40293 100644 --- a/src/material/button-toggle/_button-toggle-theme.scss +++ b/src/material/button-toggle/_button-toggle-theme.scss @@ -2,7 +2,6 @@ @import '../core/style/private'; @import '../core/theming/palette'; @import '../core/theming/theming'; -@import '../core/theming/private'; @import '../core/typography/typography-utils'; @import '../core/density/private/compatibility'; @import './button-toggle-variables'; @@ -92,7 +91,7 @@ } } -@mixin _mat-button-toggle-density($config-or-theme) { +@mixin mat-button-toggle-density($config-or-theme) { $density-scale: mat-get-density-config($config-or-theme); $standard-height: mat-private-density-prop-value( $mat-button-toggle-standard-density-config, $density-scale, height); @@ -115,7 +114,7 @@ @include mat-button-toggle-color($color); } @if $density != null { - @include _mat-button-toggle-density($density); + @include mat-button-toggle-density($density); } @if $typography != null { @include mat-button-toggle-typography($typography); diff --git a/src/material/button/_button-theme.scss b/src/material/button/_button-theme.scss index 34c8711baaf1..9605e5e5bb5a 100644 --- a/src/material/button/_button-theme.scss +++ b/src/material/button/_button-theme.scss @@ -1,7 +1,6 @@ @import '../core/theming/theming'; @import '../core/style/private'; @import '../core/typography/typography-utils'; -@import '../core/theming/private'; $_mat-button-ripple-opacity: 0.1; diff --git a/src/material/card/_card-theme.scss b/src/material/card/_card-theme.scss index 085ae7d5eaa8..c4cd92551cd6 100644 --- a/src/material/card/_card-theme.scss +++ b/src/material/card/_card-theme.scss @@ -1,6 +1,5 @@ @import '../core/theming/palette'; @import '../core/theming/theming'; -@import '../core/theming/private'; @import '../core/style/private'; @import '../core/typography/typography-utils'; diff --git a/src/material/checkbox/_checkbox-theme.scss b/src/material/checkbox/_checkbox-theme.scss index e3282073ff17..f438ee69535e 100644 --- a/src/material/checkbox/_checkbox-theme.scss +++ b/src/material/checkbox/_checkbox-theme.scss @@ -1,5 +1,4 @@ @import '../core/theming/theming'; -@import '../core/theming/private'; @import '../core/typography/typography-utils'; diff --git a/src/material/chips/_chips-theme.scss b/src/material/chips/_chips-theme.scss index a298601e54e4..309a55e058dd 100644 --- a/src/material/chips/_chips-theme.scss +++ b/src/material/chips/_chips-theme.scss @@ -1,7 +1,6 @@ @import '../core/style/private'; @import '../core/theming/palette'; @import '../core/theming/theming'; -@import '../core/theming/private'; @import '../core/typography/typography-utils'; $mat-chip-remove-font-size: 18px; diff --git a/src/material/core/color/_all-color.scss b/src/material/core/color/_all-color.scss index b3f19b1c4dbc..66acb3d41500 100644 --- a/src/material/core/color/_all-color.scss +++ b/src/material/core/color/_all-color.scss @@ -1,5 +1,5 @@ @import '../theming/all-theme'; -@import '../theming/private'; +@import '../theming/theming'; // Includes all of the color styles. @mixin angular-material-color($config-or-theme) { diff --git a/src/material/core/density/private/_all-density.scss b/src/material/core/density/private/_all-density.scss index c73d92b6e09f..d8841e1fd79c 100644 --- a/src/material/core/density/private/_all-density.scss +++ b/src/material/core/density/private/_all-density.scss @@ -1,4 +1,11 @@ -@import '../../theming/private'; +@import '../../theming/theming'; +@import '../../../expansion/expansion-theme'; +@import '../../../stepper/stepper-theme'; +@import '../../../toolbar/toolbar-theme'; +@import '../../../tree/tree-theme'; +@import '../../../paginator/paginator-theme'; +@import '../../../form-field/form-field-theme'; +@import '../../../button-toggle/button-toggle-theme'; // Includes all of the density styles. @mixin angular-material-density($config-or-theme) { @@ -11,9 +18,17 @@ @error 'No density configuration specified.'; } - @include angular-material-theme(( - color: null, - typography: null, - density: $config, - )); + // TODO: COMP-309: Do not use individual mixins. Instead, use the all-theme mixin and only + // specify a `density` config while setting `color` and `typography` to `null`. This is currently + // not possible as it would introduce a circular dependency for density because the `mat-core` + // mixin that is transitively loaded by the `all-theme` file, imports `all-density` which + // would then load `all-theme` again. This ultimately results a circular dependency. + + @include mat-expansion-panel-density($config); + @include mat-stepper-density($config); + @include mat-toolbar-density($config); + @include mat-tree-density($config); + @include mat-paginator-density($config); + @include mat-form-field-density($config); + @include mat-button-toggle-density($config); } diff --git a/src/material/core/focus-indicators/_focus-indicators.scss b/src/material/core/focus-indicators/_focus-indicators.scss index de915cf00fff..36029393a2bc 100644 --- a/src/material/core/focus-indicators/_focus-indicators.scss +++ b/src/material/core/focus-indicators/_focus-indicators.scss @@ -1,5 +1,4 @@ @import '../theming/theming'; -@import '../theming/private'; @import '../style/layout-common'; /// Mixin that turns on strong focus indicators. diff --git a/src/material/core/option/_optgroup-theme.scss b/src/material/core/option/_optgroup-theme.scss index 72961b475db2..763702b92075 100644 --- a/src/material/core/option/_optgroup-theme.scss +++ b/src/material/core/option/_optgroup-theme.scss @@ -1,6 +1,5 @@ @import '../theming/palette'; @import '../theming/theming'; -@import '../theming/private'; @import '../typography/typography-utils'; @mixin mat-optgroup-color($config-or-theme) { diff --git a/src/material/core/option/_option-theme.scss b/src/material/core/option/_option-theme.scss index 1d769dbc5b96..7fc1a8c9d8c7 100644 --- a/src/material/core/option/_option-theme.scss +++ b/src/material/core/option/_option-theme.scss @@ -1,6 +1,5 @@ @import '../theming/palette'; @import '../theming/theming'; -@import '../theming/private'; @import '../typography/typography-utils'; @mixin mat-option-color($config-or-theme) { diff --git a/src/material/core/ripple/_ripple.scss b/src/material/core/ripple/_ripple.scss index a84d250ac11e..45cb40cd0230 100644 --- a/src/material/core/ripple/_ripple.scss +++ b/src/material/core/ripple/_ripple.scss @@ -1,5 +1,4 @@ @import '../theming/theming'; -@import '../theming/private'; @import '../../../cdk/a11y/a11y'; $mat-ripple-color-opacity: 0.1; 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 6d6000096c24..a69b3ac8b5aa 100644 --- a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss +++ b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss @@ -1,5 +1,4 @@ @import '../../theming/theming'; -@import '../../theming/private'; @mixin mat-pseudo-checkbox-color($config-or-theme) { $config: mat-get-color-config($config-or-theme); diff --git a/src/material/core/theming/_all-theme.scss b/src/material/core/theming/_all-theme.scss index 0b6681a75c9a..c800a7222a68 100644 --- a/src/material/core/theming/_all-theme.scss +++ b/src/material/core/theming/_all-theme.scss @@ -34,7 +34,7 @@ @import '../../tree/tree-theme'; @import '../../snack-bar/snack-bar-theme'; @import '../../form-field/form-field-theme'; -@import './private'; +@import './theming'; // Create a theme. @mixin angular-material-theme($theme-or-color-config) { diff --git a/src/material/core/theming/_private.scss b/src/material/core/theming/_private.scss deleted file mode 100644 index bbf38dd902d3..000000000000 --- a/src/material/core/theming/_private.scss +++ /dev/null @@ -1,160 +0,0 @@ -// Warning that will be printed if duplicated styles are generated by a theme. -$_mat-theme-duplicate-warning: 'Read more about how style duplication can be avoided in a ' + - 'dedicated guide. https://github.com/angular/components/blob/master/guides/duplicate-theming-styles.md'; - -// These variable are not intended to be overridden externally. They use `!default` to -// avoid being reset every time this file is imported. -$_mat-theme-emitted-color: () !default; -$_mat-theme-emitted-typography: () !default; -$_mat-theme-emitted-density: () !default; - -// Checks if configurations that have been declared in the given theme have been generated -// before. If so, warnings will be reported. This should notify developers in case duplicate -// styles are accidentally generated due to wrong usage of the all-theme mixins. -// -// Additionally, this mixin controls the default value for the density configuration. By -// default, density styles are generated at scale zero. If the same density styles would be -// generated a second time though, the default value will change to avoid duplicate styles. -// -// The mixin keeps track of all configurations in a list that is scoped to the specified -// id. This is necessary because a given theme can be passed to multiple disjoint theme mixins -// (e.g. `angular-material-theme` and `angular-material-mdc-theme`) without causing any -// style duplication. -@mixin mat-private-check-duplicate-theme-styles($theme-or-color-config, $id) { - $theme: mat-private-legacy-get-theme($theme-or-color-config); - $color-config: mat-get-color-config($theme); - $density-config: mat-get-density-config($theme); - $typography-config: mat-get-typography-config($theme); - // Lists of previous `color`, `density` and `typography` configurations. - $previous-color: map-get($_mat-theme-emitted-color, $id) or (); - $previous-typography: map-get($_mat-theme-emitted-typography, $id) or (); - $previous-density: map-get($_mat-theme-emitted-density, $id) or (); - // Whether duplicate legacy density styles would be generated. - $duplicate-legacy-density: false; - - // Check if the color configuration has been generated before. - @if $color-config != null { - @if index($previous-color, $color-config) != null and - not $mat-theme-ignore-duplication-warnings { - @warn 'The same color styles are generated multiple times. ' + - $_mat-theme-duplicate-warning; - } - $previous-color: append($previous-color, $color-config); - } - - // Check if the typography configuration has been generated before. - @if $typography-config != null { - @if index($previous-typography, $typography-config) != null and - not $mat-theme-ignore-duplication-warnings { - @warn 'The same typography styles are generated multiple times. ' + - $_mat-theme-duplicate-warning; - } - $previous-typography: append($previous-typography, $typography-config); - } - - // Check if the density configuration has been generated before. - @if $density-config != null { - @if index($previous-density, $density-config) != null { - // Only report a warning if density styles would be duplicated for non-legacy theme - // definitions. For legacy themes, we have compatibility logic that avoids duplication - // of default density styles. We don't want to report a warning in those cases. - @if mat-private-is-legacy-constructed-theme($theme) { - $duplicate-legacy-density: true; - } - @else if not $mat-theme-ignore-duplication-warnings { - @warn 'The same density styles are generated multiple times. ' + - $_mat-theme-duplicate-warning; - } - } - $previous-density: append($previous-density, $density-config); - } - - $_mat-theme-emitted-color: map-merge( - $_mat-theme-emitted-color, ($id: $previous-color)) !global; - $_mat-theme-emitted-density: map-merge( - $_mat-theme-emitted-density, ($id: $previous-density)) !global; - $_mat-theme-emitted-typography: map-merge( - $_mat-theme-emitted-typography, ($id: $previous-typography)) !global; - - // Optionally, consumers of this mixin can wrap contents inside so that nested - // duplicate style checks do not report another warning. e.g. if developers include - // the `angular-material-theme` mixin twice, only the top-level duplicate styles check - // should report a warning. Not all individual components should report a warning too. - $orig-mat-theme-ignore-duplication-warnings: $mat-theme-ignore-duplication-warnings; - $mat-theme-ignore-duplication-warnings: true !global; - - // If duplicate default density styles would be generated for a legacy constructed theme, - // we adjust the density generation so that no density styles are generated by default. - // If no default density styles have been generated yet, we ensure that the styles - // are generated at root. For legacy themes our goal is to generate default density - // styles **once** and at root. This matches the old behavior where density styles were - // part of the base component styles (that did not use view encapsulation). - // TODO: Remove this compatibility logic when the legacy theming API is removed. - $mat-private-density-generate-at-root: mat-private-is-legacy-constructed-theme($theme) !global; - $mat-private-density-generate-styles: not $duplicate-legacy-density !global; - - @content; - $mat-theme-ignore-duplication-warnings: $orig-mat-theme-ignore-duplication-warnings !global; - - $mat-private-density-generate-at-root: false !global; - $mat-private-density-generate-styles: true !global; -} - -// Checks whether the given value resolves to a theme object. Theme objects are always -// of type `map` and can optionally only specify `color`, `density` or `typography`. -@function mat-private-is-theme-object($value) { - @return type-of($value) == 'map' and ( - map-has-key($value, color) or - map-has-key($value, density) or - map-has-key($value, typography) or - length($value) == 0 - ); -} - -// Checks whether a given value corresponds to a legacy constructed theme. -@function mat-private-is-legacy-constructed-theme($value) { - @return type-of($value) == 'map' and map-get($value, '_is-legacy-theme'); -} - -// Creates a backwards compatible theme. Previously in Angular Material, theme objects -// contained the color configuration directly. With the recent refactoring of the theming -// system to allow for density and typography configurations, this is no longer the case. -// To ensure that constructed themes which will be passed to custom theme mixins do not break, -// we copy the color configuration and put its properties at the top-level of the theme object. -// Here is an example of a pattern that should still work until it's officially marked as a -// breaking change: -// -// @mixin my-custom-component-theme($theme) { -// .my-comp { -// background-color: mat-color(map-get($theme, primary)); -// } -// } -// -// Note that the `$theme.primary` key does usually not exist since the color configuration -// is stored in `$theme.color` which contains a property for `primary`. This method copies -// the map from `$theme.color` to `$theme` for backwards compatibility. -@function mat-private-create-backwards-compatibility-theme($theme) { - @if not map-get($theme, color) { - @return $theme; - } - $color: map-get($theme, color); - @return map-merge($theme, $color); -} - -// Gets the theme from the given value that is either already a theme, or a color configuration. -// This handles the legacy case where developers pass a color configuration directly to the -// theme mixin. Before we introduced the new pattern for constructing a theme, developers passed -// the color configuration directly to the theme mixins. This can be still the case if developers -// construct a theme manually and pass it to a theme. We support this for backwards compatibility. -// TODO(devversion): remove this in the future. Constructing themes manually is rare, -// and the code can be easily updated to the new API. -@function mat-private-legacy-get-theme($theme-or-color-config) { - @if mat-private-is-theme-object($theme-or-color-config) { - @return $theme-or-color-config; - } - @return mat-private-create-backwards-compatibility-theme(( - _is-legacy-theme: true, - color: $theme-or-color-config - )); -} - diff --git a/src/material/core/theming/_theming.scss b/src/material/core/theming/_theming.scss index a18059329173..e155a0ad5b99 100644 --- a/src/material/core/theming/_theming.scss +++ b/src/material/core/theming/_theming.scss @@ -1,5 +1,4 @@ @import 'palette'; -@import './private'; // Whether duplication warnings should be disabled. Warnings enabled by default. $mat-theme-ignore-duplication-warnings: false !default; @@ -7,6 +6,16 @@ $mat-theme-ignore-duplication-warnings: false !default; // Whether density should be generated by default. $_mat-theme-generate-default-density: true !default; +// Warning that will be printed if duplicated styles are generated by a theme. +$_mat-theme-duplicate-warning: 'Read more about how style duplication can be avoided in a ' + + 'dedicated guide. https://github.com/angular/components/blob/master/guides/duplicate-theming-styles.md'; + +// These variable are not intended to be overridden externally. They use `!default` to +// avoid being reset every time this file is imported. +$_mat-theme-emitted-color: () !default; +$_mat-theme-emitted-typography: () !default; +$_mat-theme-emitted-density: () !default; + // For a given hue in a palette, return the contrast color from the map of contrast palettes. // @param $color-map // @param $hue @@ -236,3 +245,158 @@ $_mat-theme-generate-default-density: true !default; } @return $default; } + + +// +// Private APIs +// + +// Checks if configurations that have been declared in the given theme have been generated +// before. If so, warnings will be reported. This should notify developers in case duplicate +// styles are accidentally generated due to wrong usage of the all-theme mixins. +// +// Additionally, this mixin controls the default value for the density configuration. By +// default, density styles are generated at scale zero. If the same density styles would be +// generated a second time though, the default value will change to avoid duplicate styles. +// +// The mixin keeps track of all configurations in a list that is scoped to the specified +// id. This is necessary because a given theme can be passed to multiple disjoint theme mixins +// (e.g. `angular-material-theme` and `angular-material-mdc-theme`) without causing any +// style duplication. +@mixin mat-private-check-duplicate-theme-styles($theme-or-color-config, $id) { + $theme: mat-private-legacy-get-theme($theme-or-color-config); + $color-config: mat-get-color-config($theme); + $density-config: mat-get-density-config($theme); + $typography-config: mat-get-typography-config($theme); + // Lists of previous `color`, `density` and `typography` configurations. + $previous-color: map-get($_mat-theme-emitted-color, $id) or (); + $previous-typography: map-get($_mat-theme-emitted-typography, $id) or (); + $previous-density: map-get($_mat-theme-emitted-density, $id) or (); + // Whether duplicate legacy density styles would be generated. + $duplicate-legacy-density: false; + + // Check if the color configuration has been generated before. + @if $color-config != null { + @if index($previous-color, $color-config) != null and + not $mat-theme-ignore-duplication-warnings { + @warn 'The same color styles are generated multiple times. ' + + $_mat-theme-duplicate-warning; + } + $previous-color: append($previous-color, $color-config); + } + + // Check if the typography configuration has been generated before. + @if $typography-config != null { + @if index($previous-typography, $typography-config) != null and + not $mat-theme-ignore-duplication-warnings { + @warn 'The same typography styles are generated multiple times. ' + + $_mat-theme-duplicate-warning; + } + $previous-typography: append($previous-typography, $typography-config); + } + + // Check if the density configuration has been generated before. + @if $density-config != null { + @if index($previous-density, $density-config) != null { + // Only report a warning if density styles would be duplicated for non-legacy theme + // definitions. For legacy themes, we have compatibility logic that avoids duplication + // of default density styles. We don't want to report a warning in those cases. + @if mat-private-is-legacy-constructed-theme($theme) { + $duplicate-legacy-density: true; + } + @else if not $mat-theme-ignore-duplication-warnings { + @warn 'The same density styles are generated multiple times. ' + + $_mat-theme-duplicate-warning; + } + } + $previous-density: append($previous-density, $density-config); + } + + $_mat-theme-emitted-color: map-merge( + $_mat-theme-emitted-color, ($id: $previous-color)) !global; + $_mat-theme-emitted-density: map-merge( + $_mat-theme-emitted-density, ($id: $previous-density)) !global; + $_mat-theme-emitted-typography: map-merge( + $_mat-theme-emitted-typography, ($id: $previous-typography)) !global; + + // Optionally, consumers of this mixin can wrap contents inside so that nested + // duplicate style checks do not report another warning. e.g. if developers include + // the `angular-material-theme` mixin twice, only the top-level duplicate styles check + // should report a warning. Not all individual components should report a warning too. + $orig-mat-theme-ignore-duplication-warnings: $mat-theme-ignore-duplication-warnings; + $mat-theme-ignore-duplication-warnings: true !global; + + // If duplicate default density styles would be generated for a legacy constructed theme, + // we adjust the density generation so that no density styles are generated by default. + // If no default density styles have been generated yet, we ensure that the styles + // are generated at root. For legacy themes our goal is to generate default density + // styles **once** and at root. This matches the old behavior where density styles were + // part of the base component styles (that did not use view encapsulation). + // TODO: Remove this compatibility logic when the legacy theming API is removed. + $mat-private-density-generate-at-root: mat-private-is-legacy-constructed-theme($theme) !global; + $mat-private-density-generate-styles: not $duplicate-legacy-density !global; + + @content; + $mat-theme-ignore-duplication-warnings: $orig-mat-theme-ignore-duplication-warnings !global; + + $mat-private-density-generate-at-root: false !global; + $mat-private-density-generate-styles: true !global; +} + +// Checks whether the given value resolves to a theme object. Theme objects are always +// of type `map` and can optionally only specify `color`, `density` or `typography`. +@function mat-private-is-theme-object($value) { + @return type-of($value) == 'map' and ( + map-has-key($value, color) or + map-has-key($value, density) or + map-has-key($value, typography) or + length($value) == 0 + ); +} + +// Checks whether a given value corresponds to a legacy constructed theme. +@function mat-private-is-legacy-constructed-theme($value) { + @return type-of($value) == 'map' and map-get($value, '_is-legacy-theme'); +} + +// Creates a backwards compatible theme. Previously in Angular Material, theme objects +// contained the color configuration directly. With the recent refactoring of the theming +// system to allow for density and typography configurations, this is no longer the case. +// To ensure that constructed themes which will be passed to custom theme mixins do not break, +// we copy the color configuration and put its properties at the top-level of the theme object. +// Here is an example of a pattern that should still work until it's officially marked as a +// breaking change: +// +// @mixin my-custom-component-theme($theme) { +// .my-comp { +// background-color: mat-color(map-get($theme, primary)); +// } +// } +// +// Note that the `$theme.primary` key does usually not exist since the color configuration +// is stored in `$theme.color` which contains a property for `primary`. This method copies +// the map from `$theme.color` to `$theme` for backwards compatibility. +@function mat-private-create-backwards-compatibility-theme($theme) { + @if not map-get($theme, color) { + @return $theme; + } + $color: map-get($theme, color); + @return map-merge($theme, $color); +} + +// Gets the theme from the given value that is either already a theme, or a color configuration. +// This handles the legacy case where developers pass a color configuration directly to the +// theme mixin. Before we introduced the new pattern for constructing a theme, developers passed +// the color configuration directly to the theme mixins. This can be still the case if developers +// construct a theme manually and pass it to a theme. We support this for backwards compatibility. +// TODO(devversion): remove this in the future. Constructing themes manually is rare, +// and the code can be easily updated to the new API. +@function mat-private-legacy-get-theme($theme-or-color-config) { + @if mat-private-is-theme-object($theme-or-color-config) { + @return $theme-or-color-config; + } + @return mat-private-create-backwards-compatibility-theme(( + _is-legacy-theme: true, + color: $theme-or-color-config + )); +} diff --git a/src/material/core/typography/_all-typography.scss b/src/material/core/typography/_all-typography.scss index 14fdf5b27c44..6bfd4058c87c 100644 --- a/src/material/core/typography/_all-typography.scss +++ b/src/material/core/typography/_all-typography.scss @@ -1,5 +1,4 @@ @import './typography'; -@import '../theming/private'; @import '../../autocomplete/autocomplete-theme'; @import '../../badge/badge-theme'; @import '../../bottom-sheet/bottom-sheet-theme'; diff --git a/src/material/datepicker/_datepicker-theme.scss b/src/material/datepicker/_datepicker-theme.scss index d78fdfd4a62e..1f18327d5436 100644 --- a/src/material/datepicker/_datepicker-theme.scss +++ b/src/material/datepicker/_datepicker-theme.scss @@ -1,7 +1,6 @@ @import '../core/style/private'; @import '../core/theming/palette'; @import '../core/theming/theming'; -@import '../core/theming/private'; @import '../core/typography/typography-utils'; diff --git a/src/material/dialog/_dialog-theme.scss b/src/material/dialog/_dialog-theme.scss index 2602024179ea..fb6d8a425807 100644 --- a/src/material/dialog/_dialog-theme.scss +++ b/src/material/dialog/_dialog-theme.scss @@ -1,7 +1,6 @@ @import '../core/style/private'; @import '../core/theming/palette'; @import '../core/theming/theming'; -@import '../core/theming/private'; @import '../core/typography/typography-utils'; diff --git a/src/material/divider/_divider-theme.scss b/src/material/divider/_divider-theme.scss index 87a2be761582..ee88df9163cb 100644 --- a/src/material/divider/_divider-theme.scss +++ b/src/material/divider/_divider-theme.scss @@ -1,6 +1,5 @@ @import '../core/theming/palette'; @import '../core/theming/theming'; -@import '../core/theming/private'; @mixin mat-divider-color($config-or-theme) { $config: mat-get-color-config($config-or-theme); diff --git a/src/material/expansion/_expansion-theme.scss b/src/material/expansion/_expansion-theme.scss index 49fbf6786751..914816ca07d1 100644 --- a/src/material/expansion/_expansion-theme.scss +++ b/src/material/expansion/_expansion-theme.scss @@ -1,7 +1,6 @@ @import '../core/density/private/compatibility'; @import '../core/theming/palette'; @import '../core/theming/theming'; -@import '../core/theming/private'; @import '../core/style/private'; @import '../core/typography/typography-utils'; @import './expansion-variables'; diff --git a/src/material/form-field/_form-field-fill-theme.scss b/src/material/form-field/_form-field-fill-theme.scss index 092b0c89dd29..a20f317f4214 100644 --- a/src/material/form-field/_form-field-fill-theme.scss +++ b/src/material/form-field/_form-field-fill-theme.scss @@ -1,6 +1,5 @@ @import '../core/theming/palette'; @import '../core/theming/theming'; -@import '../core/theming/private'; @import '../core/style/form-common'; @import '../core/typography/typography-utils'; diff --git a/src/material/form-field/_form-field-legacy-theme.scss b/src/material/form-field/_form-field-legacy-theme.scss index 432925da98af..91ff3b23299e 100644 --- a/src/material/form-field/_form-field-legacy-theme.scss +++ b/src/material/form-field/_form-field-legacy-theme.scss @@ -1,6 +1,5 @@ @import '../core/theming/palette'; @import '../core/theming/theming'; -@import '../core/theming/private'; @import '../core/style/form-common'; @import '../core/typography/typography-utils'; diff --git a/src/material/form-field/_form-field-outline-theme.scss b/src/material/form-field/_form-field-outline-theme.scss index 62a4dcd0a61d..088845169d5c 100644 --- a/src/material/form-field/_form-field-outline-theme.scss +++ b/src/material/form-field/_form-field-outline-theme.scss @@ -1,6 +1,5 @@ @import '../core/theming/palette'; @import '../core/theming/theming'; -@import '../core/theming/private'; @import '../core/style/form-common'; @import '../core/typography/typography-utils'; diff --git a/src/material/form-field/_form-field-standard-theme.scss b/src/material/form-field/_form-field-standard-theme.scss index 8ae3d2ae1e60..e46743612574 100644 --- a/src/material/form-field/_form-field-standard-theme.scss +++ b/src/material/form-field/_form-field-standard-theme.scss @@ -1,6 +1,5 @@ @import '../core/theming/palette'; @import '../core/theming/theming'; -@import '../core/theming/private'; @import '../core/style/form-common'; @import '../core/typography/typography-utils'; diff --git a/src/material/form-field/_form-field-theme.scss b/src/material/form-field/_form-field-theme.scss index 13a33db8c334..74ace20528eb 100644 --- a/src/material/form-field/_form-field-theme.scss +++ b/src/material/form-field/_form-field-theme.scss @@ -1,6 +1,5 @@ @import '../core/theming/palette'; @import '../core/theming/theming'; -@import '../core/theming/private'; @import '../core/style/form-common'; @import '../core/typography/typography-utils'; @@ -238,7 +237,7 @@ $mat-form-field-dedupe: 0; @include mat-form-field-outline-typography($config); } -@mixin _mat-form-field-density($config-or-theme) { +@mixin mat-form-field-density($config-or-theme) { $density-scale: mat-get-density-config($config-or-theme); @include mat-private-form-field-legacy-density($density-scale); @include mat-private-form-field-standard-density($density-scale); @@ -257,7 +256,7 @@ $mat-form-field-dedupe: 0; @include mat-form-field-color($color); } @if $density != null { - @include _mat-form-field-density($density); + @include mat-form-field-density($density); } @if $typography != null { @include mat-form-field-typography($typography); diff --git a/src/material/grid-list/_grid-list-theme.scss b/src/material/grid-list/_grid-list-theme.scss index 807e7c5332c6..cb8d98a8b406 100644 --- a/src/material/grid-list/_grid-list-theme.scss +++ b/src/material/grid-list/_grid-list-theme.scss @@ -1,6 +1,5 @@ @import '../core/theming/palette'; @import '../core/theming/theming'; -@import '../core/theming/private'; @import '../core/typography/typography-utils'; @import '../core/style/list-common'; diff --git a/src/material/icon/_icon-theme.scss b/src/material/icon/_icon-theme.scss index d39e1809040d..d9afb7465d83 100644 --- a/src/material/icon/_icon-theme.scss +++ b/src/material/icon/_icon-theme.scss @@ -1,5 +1,4 @@ @import '../core/theming/theming'; -@import '../core/theming/private'; @mixin mat-icon-color($config-or-theme) { $config: mat-get-color-config($config-or-theme); diff --git a/src/material/input/_input-theme.scss b/src/material/input/_input-theme.scss index 271b9a670acc..6e728383df2b 100644 --- a/src/material/input/_input-theme.scss +++ b/src/material/input/_input-theme.scss @@ -1,6 +1,5 @@ @import '../core/theming/palette'; @import '../core/theming/theming'; -@import '../core/theming/private'; @import '../core/style/form-common'; @import '../core/typography/typography-utils'; @import '../core/style/vendor-prefixes'; diff --git a/src/material/list/_list-theme.scss b/src/material/list/_list-theme.scss index 4ed132cfff9f..e49df6cd64c0 100644 --- a/src/material/list/_list-theme.scss +++ b/src/material/list/_list-theme.scss @@ -1,6 +1,5 @@ @import '../core/theming/palette'; @import '../core/theming/theming'; -@import '../core/theming/private'; @import '../core/typography/typography-utils'; @import '../core/style/list-common'; diff --git a/src/material/menu/_menu-theme.scss b/src/material/menu/_menu-theme.scss index 8b55c564b057..24a4777e461f 100644 --- a/src/material/menu/_menu-theme.scss +++ b/src/material/menu/_menu-theme.scss @@ -1,7 +1,6 @@ @import '../core/style/private'; @import '../core/theming/palette'; @import '../core/theming/theming'; -@import '../core/theming/private'; @import '../core/typography/typography-utils'; diff --git a/src/material/paginator/_paginator-theme.scss b/src/material/paginator/_paginator-theme.scss index b4deefc6e0d3..8ca4570552d9 100644 --- a/src/material/paginator/_paginator-theme.scss +++ b/src/material/paginator/_paginator-theme.scss @@ -1,6 +1,5 @@ @import '../core/theming/palette'; @import '../core/theming/theming'; -@import '../core/theming/private'; @import '../core/typography/typography-utils'; @import '../core/density/private/compatibility'; @import './paginator-variables'; @@ -51,7 +50,7 @@ } } -@mixin _mat-paginator-density($config-or-theme) { +@mixin mat-paginator-density($config-or-theme) { $density-scale: mat-get-density-config($config-or-theme); $height: mat-private-density-prop-value($mat-paginator-density-config, $density-scale, height); @@ -73,7 +72,7 @@ @include mat-paginator-color($color); } @if $density != null { - @include _mat-paginator-density($density); + @include mat-paginator-density($density); } @if $typography != null { @include mat-paginator-typography($typography); diff --git a/src/material/progress-bar/_progress-bar-theme.scss b/src/material/progress-bar/_progress-bar-theme.scss index 5acc86872f87..9b1c3ff854ab 100644 --- a/src/material/progress-bar/_progress-bar-theme.scss +++ b/src/material/progress-bar/_progress-bar-theme.scss @@ -1,6 +1,5 @@ @import '../core/theming/palette'; @import '../core/theming/theming'; -@import '../core/theming/private'; @mixin mat-progress-bar-color($config-or-theme) { $config: mat-get-color-config($config-or-theme); diff --git a/src/material/progress-spinner/_progress-spinner-theme.scss b/src/material/progress-spinner/_progress-spinner-theme.scss index d10e26f665fa..d92b92521d02 100644 --- a/src/material/progress-spinner/_progress-spinner-theme.scss +++ b/src/material/progress-spinner/_progress-spinner-theme.scss @@ -1,6 +1,5 @@ @import '../core/theming/palette'; @import '../core/theming/theming'; -@import '../core/theming/private'; @mixin mat-progress-spinner-color($config-or-theme) { $config: mat-get-color-config($config-or-theme); diff --git a/src/material/radio/_radio-theme.scss b/src/material/radio/_radio-theme.scss index e8d379242e26..b211ae2d77ac 100644 --- a/src/material/radio/_radio-theme.scss +++ b/src/material/radio/_radio-theme.scss @@ -1,6 +1,5 @@ @import '../core/theming/palette'; @import '../core/theming/theming'; -@import '../core/theming/private'; @import '../core/typography/typography-utils'; @mixin _mat-radio-color($palette) { diff --git a/src/material/select/_select-theme.scss b/src/material/select/_select-theme.scss index c403ac7b147b..c64a029f682d 100644 --- a/src/material/select/_select-theme.scss +++ b/src/material/select/_select-theme.scss @@ -1,6 +1,5 @@ @import '../core/theming/palette'; @import '../core/theming/theming'; -@import '../core/theming/private'; @import '../core/style/private'; @import '../core/style/form-common'; @import '../core/typography/typography-utils'; diff --git a/src/material/sidenav/_sidenav-theme.scss b/src/material/sidenav/_sidenav-theme.scss index 00c8a274aafc..6360584afad1 100644 --- a/src/material/sidenav/_sidenav-theme.scss +++ b/src/material/sidenav/_sidenav-theme.scss @@ -1,7 +1,6 @@ @import '../core/style/private'; @import '../core/theming/palette'; @import '../core/theming/theming'; -@import '../core/theming/private'; @mixin mat-sidenav-color($config-or-theme) { $config: mat-get-color-config($config-or-theme); diff --git a/src/material/slide-toggle/_slide-toggle-theme.scss b/src/material/slide-toggle/_slide-toggle-theme.scss index cb7b8703a749..9d45d46078ca 100644 --- a/src/material/slide-toggle/_slide-toggle-theme.scss +++ b/src/material/slide-toggle/_slide-toggle-theme.scss @@ -1,7 +1,6 @@ @import '../core/style/private'; @import '../core/theming/palette'; @import '../core/theming/theming'; -@import '../core/theming/private'; @import '../core/typography/typography-utils'; @mixin _mat-slide-toggle-checked($palette, $thumb-checked-hue) { diff --git a/src/material/slider/_slider-theme.scss b/src/material/slider/_slider-theme.scss index 2bf988f99483..facd274e72c0 100644 --- a/src/material/slider/_slider-theme.scss +++ b/src/material/slider/_slider-theme.scss @@ -1,6 +1,5 @@ @import '../core/theming/palette'; @import '../core/theming/theming'; -@import '../core/theming/private'; @import '../core/typography/typography-utils'; @mixin _mat-slider-inner-content-theme($palette) { diff --git a/src/material/snack-bar/_snack-bar-theme.scss b/src/material/snack-bar/_snack-bar-theme.scss index cd8eb2bf13e3..7ead10607829 100644 --- a/src/material/snack-bar/_snack-bar-theme.scss +++ b/src/material/snack-bar/_snack-bar-theme.scss @@ -1,6 +1,5 @@ @import '../core/typography/typography-utils'; @import '../core/theming/theming'; -@import '../core/theming/private'; @import '../core/theming/palette'; @import '../core/style/private'; diff --git a/src/material/sort/_sort-theme.scss b/src/material/sort/_sort-theme.scss index e644a3e8f09f..96dbf3b060c9 100644 --- a/src/material/sort/_sort-theme.scss +++ b/src/material/sort/_sort-theme.scss @@ -1,5 +1,4 @@ @import '../core/theming/theming'; -@import '../core/theming/private'; @mixin mat-sort-color($config-or-theme) { $config: mat-get-color-config($config-or-theme); diff --git a/src/material/stepper/_stepper-theme.scss b/src/material/stepper/_stepper-theme.scss index 9b17f65b0721..e8c197c465b2 100644 --- a/src/material/stepper/_stepper-theme.scss +++ b/src/material/stepper/_stepper-theme.scss @@ -1,6 +1,5 @@ @import '../core/theming/palette'; @import '../core/theming/theming'; -@import '../core/theming/private'; @import '../core/typography/typography-utils'; @import '../core/density/private/compatibility'; @import './stepper-variables'; diff --git a/src/material/table/_table-theme.scss b/src/material/table/_table-theme.scss index d433c9bed052..962f07ca6a13 100644 --- a/src/material/table/_table-theme.scss +++ b/src/material/table/_table-theme.scss @@ -1,6 +1,5 @@ @import '../core/theming/palette'; @import '../core/theming/theming'; -@import '../core/theming/private'; @import '../core/typography/typography-utils'; @mixin mat-table-color($config-or-theme) { diff --git a/src/material/tabs/_tabs-theme.scss b/src/material/tabs/_tabs-theme.scss index b73d32648e50..9bac48ab50c9 100644 --- a/src/material/tabs/_tabs-theme.scss +++ b/src/material/tabs/_tabs-theme.scss @@ -1,6 +1,5 @@ @import '../core/theming/palette'; @import '../core/theming/theming'; -@import '../core/theming/private'; @import '../core/typography/typography-utils'; @mixin mat-tabs-color($config-or-theme) { diff --git a/src/material/toolbar/_toolbar-theme.scss b/src/material/toolbar/_toolbar-theme.scss index deef00a27912..025237fee89b 100644 --- a/src/material/toolbar/_toolbar-theme.scss +++ b/src/material/toolbar/_toolbar-theme.scss @@ -2,7 +2,6 @@ @import '../core/style/variables'; @import '../core/theming/palette'; @import '../core/theming/theming'; -@import '../core/theming/private'; @import '../core/typography/typography-utils'; @import './toolbar-variables'; diff --git a/src/material/tooltip/_tooltip-theme.scss b/src/material/tooltip/_tooltip-theme.scss index 9ab85ec07600..1d5250433687 100644 --- a/src/material/tooltip/_tooltip-theme.scss +++ b/src/material/tooltip/_tooltip-theme.scss @@ -1,6 +1,5 @@ @import '../core/theming/palette'; @import '../core/theming/theming'; -@import '../core/theming/private'; @import '../core/typography/typography-utils'; $mat-tooltip-target-height: 22px; diff --git a/src/material/tree/_tree-theme.scss b/src/material/tree/_tree-theme.scss index 758074e72b67..9f9a059d9934 100644 --- a/src/material/tree/_tree-theme.scss +++ b/src/material/tree/_tree-theme.scss @@ -1,7 +1,6 @@ @import '../core/density/private/compatibility'; @import '../core/theming/palette'; @import '../core/theming/theming'; -@import '../core/theming/private'; @import '../core/typography/typography-utils'; @import './tree-variables';