diff --git a/src/material-experimental/mdc-dialog/_dialog-theme.scss b/src/material-experimental/mdc-dialog/_dialog-theme.scss index 77a01d146912..3bf5982b0ffe 100644 --- a/src/material-experimental/mdc-dialog/_dialog-theme.scss +++ b/src/material-experimental/mdc-dialog/_dialog-theme.scss @@ -1,12 +1,31 @@ +@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) { - @include mdc-dialog.core-styles($query: mdc-helpers.$mat-theme-styles-query); + .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), + )); + } } } @@ -14,7 +33,24 @@ $config: typography.private-typography-to-2018-config( theming.get-typography-config($config-or-theme)); @include mdc-helpers.mat-using-mdc-typography($config) { - @include mdc-dialog.core-styles($query: mdc-helpers.$mat-typography-styles-query); + .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), + )); + } } } diff --git a/src/material-experimental/mdc-dialog/dialog.scss b/src/material-experimental/mdc-dialog/dialog.scss index 3fde7c85f592..55f2dca5272a 100644 --- a/src/material-experimental/mdc-dialog/dialog.scss +++ b/src/material-experimental/mdc-dialog/dialog.scss @@ -1,7 +1,33 @@ @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; @@ -16,6 +42,12 @@ $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;