refactor(material/dialog): switch to tokens API (#26846)

Reworks the dialog to use the new tokens API.

Author: crisbeto

src/material/core/mdc-helpers/_mdc-helpers.scss

@@ -84,13 +84,13 @@ $mat-typography-mdc-level-mappings: (
 }
 
 // Converts an MDC typography level config to an Angular Material one.
-@function typography-config-level-from-mdc($mdc-level) {
+@function typography-config-level-from-mdc($mdc-level, $font-family: null) {
   $mdc-level-config: map.get(mdc-typography.$styles, $mdc-level);
 
-  // Explicitly set the font family to null since we'll apply it globally
+  // Explicitly default the font family to null since we'll apply it globally
   // through the `define-typgraphy-config`/`define-legacy-typography-config`.
   @return typography.define-typography-level(
-    $font-family: null,
+    $font-family: $font-family,
     $font-size: map.get($mdc-level-config, font-size),
     $line-height: map.get($mdc-level-config, line-height),
     $font-weight: map.get($mdc-level-config, font-weight),
@@ -226,6 +226,34 @@ $mat-typography-mdc-level-mappings: (
   mdc-typography.$styles: $orig-mdc-typography-styles;
 }
 
+// Function to create an Angular Material typography config from MDC's predefined typography levels.
+// This is used for components where we accidentally ended up supporting null typography configs
+// that were silently falling back to MDC's typography. At the moment of writing this includes
+// `dialog`, `slider` and `tooltip`.
+// Important! We shouldn't introduce any new usages of this pattern and we should eventually clean
+// up any existing usages.
+@function private-fallback-typography-from-mdc() {
+  // This is very close to what we have in `define-typography-config`, but we can't use it here,
+  // because it would cause a circular import and moving it here doesn't make sense.
+  $font-family: mdc-typography.$font-family;
+  @return (
+    font-family: $font-family,
+    headline-1: typography-config-level-from-mdc(headline1, $font-family),
+    headline-2: typography-config-level-from-mdc(headline2, $font-family),
+    headline-3: typography-config-level-from-mdc(headline3, $font-family),
+    headline-4: typography-config-level-from-mdc(headline4, $font-family),
+    headline-5: typography-config-level-from-mdc(headline5, $font-family),
+    headline-6: typography-config-level-from-mdc(headline6, $font-family),
+    subtitle-1: typography-config-level-from-mdc(subtitle1, $font-family),
+    subtitle-2: typography-config-level-from-mdc(subtitle2, $font-family),
+    body-1: typography-config-level-from-mdc(body1, $font-family),
+    body-2: typography-config-level-from-mdc(body2, $font-family),
+    caption: typography-config-level-from-mdc(caption, $font-family),
+    button: typography-config-level-from-mdc(button, $font-family),
+    overline: typography-config-level-from-mdc(overline, $font-family),
+  );
+}
+
 // Disables MDC's CSS custom property fallbacks for the specified mixin content.
 @mixin disable-mdc-fallback-declarations {
   $previous-value: mdc-theme-css.$enable-fallback-declarations;

src/material/core/tokens/_token-utils.scss

@@ -25,7 +25,7 @@ $_placeholder-typography-level-config: mdc-helpers.typography-config-level-from-
 // Placeholder typography config that can be passed to token getter functions when generating token
 // slots.
 $placeholder-typography-config: (
-  font-family: Roboto,
+  font-family: 'Roboto, sans-serif',
   headline-1: $_placeholder-typography-level-config,
   headline-2: $_placeholder-typography-level-config,
   headline-3: $_placeholder-typography-level-config,

src/material/core/tokens/m2/mdc/_dialog.scss

@@ -0,0 +1,115 @@
+@use 'sass:map';
+@use '../../../theming/theming';
+@use '../../../typography/typography-utils';
+@use '../../../mdc-helpers/mdc-helpers';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, dialog);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+//
+// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
+// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
+// our CSS.
+@function get-unthemable-tokens() {
+  @return (
+    // Height of the container's elevation.
+    container-elevation: 24,
+    // Color of the elevation shadow.
+    container-shadow-color: #000,
+    // Border radius of the container.
+    container-shape: 4px,
+
+    // =============================================================================================
+    // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
+    // =============================================================================================
+    with-divider-divider-height: null,
+    with-divider-divider-color: null,
+    with-icon-icon-size: null,
+    with-icon-icon-color: null,
+    action-label-text-font: null,
+    action-label-text-line-height: null,
+    action-label-text-size: null,
+    action-label-text-weight: null,
+    action-label-text-tracking: null,
+    action-label-text-color: null,
+    action-hover-state-layer-color: null,
+    action-hover-state-layer-opacity: null,
+    action-hover-label-text-color: null,
+    action-focus-state-layer-color: null,
+    action-focus-state-layer-opacity: null,
+    action-focus-label-text-color: null,
+    action-pressed-state-layer-color: null,
+    action-pressed-state-layer-opacity: null,
+    action-pressed-label-text-color: null,
+    headline-color: null,
+    headline-font: null,
+    headline-line-height: null,
+    headline-size: null,
+    headline-tracking: null,
+    headline-weight: null,
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $is-dark: map.get($config, 'is-dark');
+  $background: map.get($config, background);
+  $on-surface: if($is-dark, #fff, #000);
+
+  @return (
+    // Background color of the container.
+    container-color: theming.get-color-from-palette($background, dialog),
+    // Color of the dialog header.
+    subhead-color: rgba($on-surface, 0.87),
+    // Color of the dialog body text.
+    supporting-text-color: rgba($on-surface, 0.6),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  // TODO(crisbeto): The earlier implementation of the dialog used MDC's APIs to create the
+  // typography tokens. As a result, we unintentionally allowed `null` typography configs to be
+  // passed in. Since there a lot of apps that now depend on this pattern, we need this temporary
+  // fallback.
+  @if ($config == null) {
+    $config: mdc-helpers.private-fallback-typography-from-mdc();
+  }
+
+  @return (
+    // Typography of the dialog header.
+    subhead-font: typography-utils.font-family($config, headline-6)
+      or typography-utils.font-family($config),
+    subhead-line-height: typography-utils.line-height($config, headline-6),
+    subhead-size: typography-utils.font-size($config, headline-6),
+    subhead-weight: typography-utils.font-weight($config, headline-6),
+    subhead-tracking: typography-utils.letter-spacing($config, headline-6),
+
+    // Typography of the dialog body text.
+    supporting-text-font: typography-utils.font-family($config, body-1)
+      or typography-utils.font-family($config),
+    supporting-text-line-height: typography-utils.line-height($config, body-1),
+    supporting-text-size: typography-utils.font-size($config, body-1),
+    supporting-text-weight: typography-utils.font-weight($config, body-1),
+    supporting-text-tracking: typography-utils.letter-spacing($config, body-1),
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return token-utils.merge-all(
+          get-unthemable-tokens(),
+          get-color-tokens(token-utils.$placeholder-color-config),
+          get-typography-tokens(token-utils.$placeholder-typography-config),
+          get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

src/material/dialog/_dialog-theme.scss

@@ -1,54 +1,22 @@
-@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 '../core/tokens/m2/mdc/dialog' as tokens-mdc-dialog;
 @use '../core/theming/theming';
-@use '../core/mdc-helpers/mdc-helpers';
 @use '../core/typography/typography';
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
-  $background: map.get($config, background);
 
-  @include mdc-helpers.using-mdc-theme($config) {
-    .mat-mdc-dialog-container {
-      $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: theming.get-color-from-palette($background, dialog),
-        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),
-      ));
-    }
+  .mat-mdc-dialog-container {
+    @include mdc-dialog-theme.theme(tokens-mdc-dialog.get-color-tokens($config));
   }
 }
 
 @mixin typography($config-or-theme) {
   $config: typography.private-typography-to-2018-config(
       theming.get-typography-config($config-or-theme));
-  @include mdc-helpers.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),
-      ));
-    }
+  .mat-mdc-dialog-container {
+    @include mdc-dialog-theme.theme(tokens-mdc-dialog.get-typography-tokens($config));
   }
 }
 

src/material/dialog/dialog.scss

@@ -1,36 +1,9 @@
 @use '@material/dialog' as mdc-dialog;
-@use '@material/dialog/variables' as mdc-dialog-variables;
 @use '@material/dialog/dialog-theme' as mdc-dialog-theme;
-@use './mdc-dialog-structure-overrides';
+@use '@material/theme/custom-properties' as mdc-custom-properties;
+@use '../core/tokens/m2/mdc/dialog' as tokens-mdc-dialog;
 @use '../core/mdc-helpers/mdc-helpers';
-
-// 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,
-
-  // Structure
-  container-shape: mdc-dialog-variables.$shape-radius,
-);
+@use './mdc-dialog-structure-overrides';
 
 // Dialog content max height. This has been copied from the standard dialog
 // and is needed to make the dialog content scrollable.
@@ -39,32 +12,40 @@ $mat-dialog-content-max-height: 65vh !default;
 // don't expose this value as variable.
 $mat-dialog-button-horizontal-margin: 8px !default;
 
+// Note that we disable fallback declarations, but we don't disable fallback
+// values, because there are a lot of internal apps that don't include a proper
+// theme in their tests.
 @include mdc-helpers.disable-mdc-fallback-declarations {
   @include mdc-dialog.static-styles($query: mdc-helpers.$mdc-base-styles-query);
-}
+  @include mdc-dialog-structure-overrides.private-dialog-structure-overrides(
+    $mat-dialog-content-max-height);
 
-@include mdc-dialog-structure-overrides.private-dialog-structure-overrides(
-  $mat-dialog-content-max-height);
+  .mat-mdc-dialog-container {
+    // Add default values for MDC dialog tokens that aren't outputted by the theming API.
+    @include mdc-dialog-theme.theme(tokens-mdc-dialog.get-unthemable-tokens());
 
-.mat-mdc-dialog-container {
-  // Apply the theming slots to the container using an initial set of
-  // values that will be overridden in the theme styles.
-  @include mdc-helpers.disable-mdc-fallback-declarations {
-    @include mdc-dialog-theme.theme-styles($_dialog-initial-theme);
-  }
+    // Apply the theming slots to the container using an initial set of
+    // values that will be overridden in the theme styles.
+    @include mdc-dialog-theme.theme-styles(tokens-mdc-dialog.get-token-slots());
 
-  // The dialog container is focusable. We remove the default outline shown in browsers.
-  outline: 0;
+    // MDC's `theme-styles` generates a variable called `--mdc-dialog-container-elevation-shadow`
+    // (note the `--shadow`) while it uses `--mdc-dialog-container-elevation` to assign the
+    // `box-shadow`. Remap it so the token value is picked up.
+    --mdc-dialog-container-elevation: var(--mdc-dialog-container-elevation-shadow);
 
-  .mdc-dialog__container {
-    transition-duration: var(--mat-dialog-transition-duration, 0ms);
-  }
+    // The dialog container is focusable. We remove the default outline shown in browsers.
+    outline: 0;
 
-  // Angular Material supports disabling all animations when NoopAnimationsModule is imported.
-  // TODO(devversion): Look into using MDC's Sass queries to separate the animation styles and
-  // conditionally add them. Consider the size cost and churn when deciding whether to switch.
-  &._mat-animation-noopable .mdc-dialog__container {
-    transition: none;
+    .mdc-dialog__container {
+      transition-duration: var(--mat-dialog-transition-duration, 0ms);
+    }
+
+    // Angular Material supports disabling all animations when NoopAnimationsModule is imported.
+    // TODO(devversion): Look into using MDC's Sass queries to separate the animation styles and
+    // conditionally add them. Consider the size cost and churn when deciding whether to switch.
+    &._mat-animation-noopable .mdc-dialog__container {
+      transition: none;
+    }
   }
 }