diff --git a/src/material-experimental/mdc-dialog/_dialog-theme.scss b/src/material-experimental/mdc-dialog/_dialog-theme.scss index 3bf5982b0ffe..77a01d146912 100644 --- a/src/material-experimental/mdc-dialog/_dialog-theme.scss +++ b/src/material-experimental/mdc-dialog/_dialog-theme.scss @@ -1,31 +1,12 @@ -@use 'sass:map'; @use '@material/dialog' as mdc-dialog; -@use '@material/dialog/dialog-theme' as mdc-dialog-theme; -@use '@material/theme/theme-color' as mdc-theme-color; -@use '@material/typography' as mdc-typography; @use '../mdc-helpers/mdc-helpers'; @use '../../material/core/typography/typography'; @use '../../material/core/theming/theming'; @mixin color($config-or-theme) { $config: theming.get-color-config($config-or-theme); - @include mdc-helpers.mat-using-mdc-theme($config) { - .mat-mdc-dialog-container { - $surface: mdc-theme-color.$surface; - $on-surface: mdc-theme-color.$on-surface; - $text-emphasis-high: mdc-theme-color.text-emphasis(high); - $text-emphasis-medium: mdc-theme-color.text-emphasis(medium); - - @include mdc-dialog-theme.theme(( - container-color: $surface, - container-elevation: 24, - container-shadow-color: $on-surface, - with-divider-divider-color: rgba($on-surface, mdc-dialog.$scroll-divider-opacity), - subhead-color: rgba($on-surface, $text-emphasis-high), - supporting-text-color: rgba($on-surface, $text-emphasis-medium), - )); - } + @include mdc-dialog.core-styles($query: mdc-helpers.$mat-theme-styles-query); } } @@ -33,24 +14,7 @@ $config: typography.private-typography-to-2018-config( theming.get-typography-config($config-or-theme)); @include mdc-helpers.mat-using-mdc-typography($config) { - .mat-mdc-dialog-container { - $styles: mdc-typography.$styles; - $headline6: map.get($styles, headline6); - - @include mdc-dialog-theme.theme(( - subhead-font: map.get($headline6, font-family), - subhead-line-height: map.get($styles, headline6, line-height), - subhead-size: map.get($styles, headline6, font-size), - subhead-weight: map.get($styles, headline6, font-weight), - subhead-tracking: map.get($styles, headline6, letter-spacing), - - supporting-text-font: map.get($styles, body1, font-family), - supporting-text-line-height: map.get($styles, body1, line-height), - supporting-text-size: map.get($styles, body1, font-size), - supporting-text-weight: map.get($styles, body1, font-weight), - supporting-text-tracking: map.get($styles, body1, letter-spacing), - )); - } + @include mdc-dialog.core-styles($query: mdc-helpers.$mat-typography-styles-query); } } diff --git a/src/material-experimental/mdc-dialog/dialog.scss b/src/material-experimental/mdc-dialog/dialog.scss index 55f2dca5272a..3fde7c85f592 100644 --- a/src/material-experimental/mdc-dialog/dialog.scss +++ b/src/material-experimental/mdc-dialog/dialog.scss @@ -1,33 +1,7 @@ @use '@material/dialog' as mdc-dialog; -@use '@material/dialog/dialog-theme' as mdc-dialog-theme; @use '../mdc-helpers/mdc-helpers'; @use './mdc-dialog-structure-overrides'; -// Theme map with values for variables that will be overriden in the theme. -// MDC's theming system requires non-null values for the slots to be inserted -// and included as default values. -$_dialog-initial-theme: ( - // Color - container-color: white, - container-elevation: 24, - container-shadow-color: black, - with-divider-divider-color: black, - subhead-color: black, - supporting-text-color: black, - - // Typography - subhead-font: 'Arial', - subhead-line-height: 14px, - subhead-size: 14px, - subhead-weight: 500, - subhead-tracking: 1px, - supporting-text-font: 'Arial', - supporting-text-line-height: 14px, - supporting-text-size: 14px, - supporting-text-weight: 500, - supporting-text-tracking: 1px, -); - // Dialog content max height. This has been copied from the standard dialog // and is needed to make the dialog content scrollable. $mat-dialog-content-max-height: 65vh !default; @@ -42,12 +16,6 @@ $mat-dialog-button-horizontal-margin: 8px !default; @include mdc-dialog-structure-overrides.private-dialog-structure-overrides( $mat-dialog-content-max-height); -// Apply the theming slots to the container using an initial set of -// values that will be overridden in the theme styles. -.mat-mdc-dialog-container { - @include mdc-dialog-theme.theme-styles($_dialog-initial-theme); -} - // The dialog container is focusable. We remove the default outline shown in browsers. .mat-mdc-dialog-container { outline: 0;