@ng-matero/extensions 14.6.2 → 15.0.0

package/core/style/_private.scss

@@ -1,20 +1,20 @@
 @use 'sass:map';
 @use './elevation';
 
-@mixin private-theme-elevation($zValue, $config, $opacity: elevation.$opacity) {
+@mixin private-theme-elevation($zValue, $config) {
   $foreground: map.get($config, foreground);
   $elevation-color: map.get($foreground, elevation);
   $elevation-color-or-default: if($elevation-color == null, elevation.$color, $elevation-color);
 
-  @include elevation.elevation($zValue, $elevation-color-or-default, $opacity);
+  @include elevation.elevation($zValue, $elevation-color-or-default);
 }
 
-@mixin private-theme-overridable-elevation($zValue, $config, $opacity: elevation.$opacity) {
+@mixin private-theme-overridable-elevation($zValue, $config) {
   $foreground: map.get($config, foreground);
   $elevation-color: map.get($foreground, elevation);
   $elevation-color-or-default: if($elevation-color == null, elevation.$color, $elevation-color);
 
-  @include elevation.overridable-elevation($zValue, $elevation-color-or-default, $opacity);
+  @include elevation.overridable-elevation($zValue, $elevation-color-or-default);
 }
 
 // If the mat-animation-noop class is present on the components root element,
@@ -22,20 +22,11 @@
 // NOTE: Currently this mixin should only be used with components that do not
 // have any projected content.
 @mixin private-animation-noop() {
-  // @at-root is used to steps outside of the hierarchy of the scss rules. This is
-  // done to allow a class to be added to be added to base of the scss nesting
-  // context.
-  // For example:
-  // .my-root {
-  //   .my-subclass {
-  //      @include mat-private-animation-noop();
-  //    }
-  // }
-  // results in:
-  // ._mat-animation-noopable.my-root .my-subclass { ... }
-  @at-root ._mat-animation-noopable#{&} {
-    transition: none;
-    animation: none;
+  &._mat-animation-noopable {
+    // Use !important here since we don't know what context this mixin will
+    // be included in and MDC can have some really specific selectors.
+    transition: none !important;
+    animation: none !important;
     @content;
   }
 }

package/core/style/_variables.scss

@@ -4,7 +4,7 @@ $xsmall: 'max-width: 599px';
 $small: 'max-width: 959px';
 
 // TODO: Revisit all z-indices before beta
-// z-index master list
+// z-index main list
 
 $z-index-fab: 20 !default;
 $z-index-drawer: 100 !default;

package/core/style/_vendor-prefixes.scss

@@ -1,10 +1,8 @@
-/* stylelint-disable value-no-vendor-prefix */
-/* stylelint-disable selector-no-vendor-prefix */
 /* stylelint-disable property-no-vendor-prefix */
+/* stylelint-disable selector-no-vendor-prefix */
 // stylelint-disable material/no-prefixes
 @mixin user-select($value) {
   -webkit-user-select: $value;
-  -moz-user-select: $value;
   user-select: $value;
 }
 
@@ -28,33 +26,22 @@
   }
 }
 
-@mixin cursor-grab {
-  cursor: -webkit-grab;
-  cursor: grab;
-}
-
-@mixin cursor-grabbing {
-  cursor: -webkit-grabbing;
-  cursor: grabbing;
-}
-
 @mixin backface-visibility($value) {
   -webkit-backface-visibility: $value;
   backface-visibility: $value;
 }
 
-@mixin position-sticky($important: false) {
-  position: -webkit-sticky #{if($important, '!important', '')};
-  position: sticky #{if($important, '!important', '')};
-}
-
-@mixin private-color-adjust($value) {
+@mixin color-adjust($value) {
   -webkit-print-color-adjust: $value;
-  print-color-adjust: $value;
+  color-adjust: $value;
 }
 
 @mixin private-background-clip($value) {
   -webkit-background-clip: $value;
   background-clip: $value;
 }
-// stylelint-enable
+
+@mixin clip-path($value) {
+  -webkit-clip-path: $value;
+  clip-path: $value;
+}

package/core/theming/_all-theme.scss

@@ -0,0 +1,38 @@
+// Import all the theming functionality.
+@use '../../alert/alert-theme';
+@use '../../colorpicker/colorpicker-theme';
+@use '../../datetimepicker/datetimepicker-theme';
+@use '../../drawer/drawer-theme';
+@use '../../grid/grid-theme';
+@use '../../loader/loader-theme';
+@use '../../popover/popover-theme';
+@use '../../progress/progress-theme';
+@use '../../select/select-theme';
+@use '../../slider/slider-theme';
+@use '../../split/split-theme';
+@use '../../tooltip/tooltip-theme';
+@use './theming';
+
+// Create a theme.
+@mixin all-component-themes($theme-or-color-config) {
+  $dedupe-key: 'angular-material-extensions-theme';
+  @include theming.private-check-duplicate-theme-styles($theme-or-color-config, $dedupe-key) {
+    @include alert-theme.theme($theme-or-color-config);
+    @include colorpicker-theme.theme($theme-or-color-config);
+    @include datetimepicker-theme.theme($theme-or-color-config);
+    @include drawer-theme.theme($theme-or-color-config);
+    @include grid-theme.theme($theme-or-color-config);
+    @include loader-theme.theme($theme-or-color-config);
+    @include popover-theme.theme($theme-or-color-config);
+    @include progress-theme.theme($theme-or-color-config);
+    @include select-theme.theme($theme-or-color-config);
+    @include slider-theme.theme($theme-or-color-config);
+    @include split-theme.theme($theme-or-color-config);
+    @include tooltip-theme.theme($theme-or-color-config);
+  }
+}
+
+// @deprecated Use `all-component-themes`.
+@mixin material-extensions-theme($theme-or-color-config) {
+  @include all-component-themes($theme-or-color-config);
+}

package/core/theming/_palette.scss

@@ -703,7 +703,7 @@ $dark-theme-background-palette: (
   selected-disabled-button: map.get($grey-palette, 800),
   disabled-button-toggle: black,
   unselected-chip: map.get($grey-palette, 700),
-  disabled-list-option: black,
+  disabled-list-option: rgba(white, .12),
   tooltip: map.get($grey-palette, 700),
 );
 

package/core/theming/_theming.scss

@@ -2,7 +2,6 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'palette';
-@use '../density/private/compatibility';
 
 // Whether duplication warnings should be disabled. Warnings enabled by default.
 $theme-ignore-duplication-warnings: false !default;
@@ -12,7 +11,22 @@ $_generate-default-density: true !default;
 
 // Warning that will be printed if duplicated styles are generated by a 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';
+  'guide. https://github.com/angular/components/blob/main/guides/duplicate-theming-styles.md';
+
+// Warning that will be printed if the legacy theming API is used.
+$_legacy-theme-warning: 'Angular Material themes should be created from a map containing the ' +
+  'keys "color", "typography", and "density". The color value should be a map containing the ' +
+  'palette values for "primary", "accent", and "warn". ' +
+  'See https://material.angular.io/guide/theming for more information.';
+
+// Flag whether theme config getter functions should warn if a key is expected to exist but not
+// present in the config. This can be transformed internally in Google to ensure all clients have
+// comprehensive theme configurations.
+$_enable-strict-theme-config: false;
+
+// Flag whether to disable theme definitions copying color values to the top-level theme config.
+// This copy is to preserve backwards compatibility.
+$_disable-color-backwards-compatibility: false;
 
 // These variable are not intended to be overridden externally. They use `!default` to
 // avoid being reset every time this file is imported.
@@ -20,6 +34,17 @@ $_emitted-color: () !default;
 $_emitted-typography: () !default;
 $_emitted-density: () !default;
 
+/// Extracts a color from a palette or throws an error if it doesn't exist.
+/// @param {Map} $palette The palette from which to extract a color.
+/// @param {String | Number} $hue The hue for which to get the color.
+@function _get-color-from-palette($palette, $hue) {
+  @if map.has-key($palette, $hue) {
+    @return map.get($palette, $hue);
+  }
+
+  @error 'Hue "' + $hue + '" does not exist in palette. Available hues are: ' + map.keys($palette);
+}
+
 /// For a given hue in a palette, return the contrast color from the map of contrast palettes.
 /// @param {Map} $palette The palette from which to extract a color.
 /// @param {String | Number} $hue The hue for which to get a contrast color.
@@ -41,10 +66,10 @@ $text: $default) {
   $result: map.merge(
     $base-palette,
     (
-      default: map.get($base-palette, $default),
-      lighter: map.get($base-palette, $lighter),
-      darker: map.get($base-palette, $darker),
-      text: map.get($base-palette, $text),
+      default: _get-color-from-palette($base-palette, $default),
+      lighter: _get-color-from-palette($base-palette, $lighter),
+      darker: _get-color-from-palette($base-palette, $darker),
+      text: _get-color-from-palette($base-palette, $text),
       default-contrast: get-contrast-color-from-palette($base-palette, $default),
       lighter-contrast: get-contrast-color-from-palette($base-palette, $lighter),
       darker-contrast: get-contrast-color-from-palette($base-palette, $darker)
@@ -66,7 +91,7 @@ $text: $default) {
 
 /// Gets a color from a theme palette (the output of mat-palette).
 /// The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured
-/// hues (default, lighter, darker), or any of the aforementioned prefixed with "-contrast".
+/// hues (default, lighter, darker), or any of the aforementioned suffixed with "-contrast".
 ///
 /// @param {Map} $palette The palette from which to extract a color.
 /// @param {String | Number} $hue The hue from the palette to use. If this is a value between 0
@@ -159,6 +184,7 @@ $text: $default) {
   // If the legacy pattern is used, we generate a container object only with a light-themed
   // configuration for the `color` theming part.
   @if $accent != null {
+    @warn $_legacy-theme-warning;
     @return private-create-backwards-compatibility-theme(_mat-validate-theme((
       _is-legacy-theme: true,
       color: _mat-create-light-color-config($primary, $accent, $warn),
@@ -199,6 +225,7 @@ $text: $default) {
   // If the legacy pattern is used, we generate a container object only with a dark-themed
   // configuration for the `color` theming part.
   @if $accent != null {
+    @warn $_legacy-theme-warning;
     @return private-create-backwards-compatibility-theme(_mat-validate-theme((
       _is-legacy-theme: true,
       color: _mat-create-dark-color-config($primary, $accent, $warn),
@@ -239,6 +266,9 @@ $text: $default) {
   @if map.has-key($theme, color) {
     @return map.get($theme, color);
   }
+  @else if ($_enable-strict-theme-config) {
+    @error 'Angular Material theme configuration is missing a "color" value';
+  }
   @return $default;
 }
 
@@ -258,6 +288,9 @@ $text: $default) {
   @if map.has-key($theme-or-config, density) {
     @return map.get($theme-or-config, density);
   }
+  @else if ($_enable-strict-theme-config) {
+    @error 'Angular Material theme configuration is missing a "density" value';
+  }
   @return $default;
 }
 
@@ -278,6 +311,9 @@ $text: $default) {
   @if (map.has-key($theme-or-config, typography)) {
     @return map.get($theme-or-config, typography);
   }
+  @else if ($_enable-strict-theme-config) {
+    @error 'Angular Material theme configuration is missing a "typography" value';
+  }
   @return $default;
 }
 
@@ -295,7 +331,7 @@ $text: $default) {
 //
 // 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. `all-component-themes` and `all-mdc-component-themes`) without causing any
+// (e.g. `all-component-themes` and `all-legacy-component-themes`) without causing any
 // style duplication.
 @mixin private-check-duplicate-theme-styles($theme-or-color-config, $id) {
   $theme: private-legacy-get-theme($theme-or-color-config);
@@ -354,21 +390,8 @@ $text: $default) {
   $orig-mat-theme-ignore-duplication-warnings: $theme-ignore-duplication-warnings;
   $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.
-  compatibility.$private-density-generate-at-root: private-is-legacy-constructed-theme($theme);
-  compatibility.$private-density-generate-styles: not $duplicate-legacy-density;
-
   @content;
   $theme-ignore-duplication-warnings: $orig-mat-theme-ignore-duplication-warnings !global;
-
-  compatibility.$private-density-generate-at-root: false;
-  compatibility.$private-density-generate-styles: true;
 }
 
 // Checks whether the given value resolves to a theme object. Theme objects are always
@@ -405,7 +428,7 @@ $text: $default) {
 // 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 private-create-backwards-compatibility-theme($theme) {
-  @if not map.get($theme, color) {
+  @if ($_disable-color-backwards-compatibility or not map.get($theme, color)) {
     @return $theme;
   }
   $color: map.get($theme, color);
@@ -423,8 +446,18 @@ $text: $default) {
   @if private-is-theme-object($theme-or-color-config) {
     @return $theme-or-color-config;
   }
+
+  @warn $_legacy-theme-warning;
   @return private-create-backwards-compatibility-theme((
     _is-legacy-theme: true,
     color: $theme-or-color-config
   ));
 }
+
+// Approximates an rgba color into a solid hex color, given a background color.
+@function private-rgba-to-hex($color, $background-color) {
+  // We convert the rgba color into a solid one by taking the opacity from the rgba
+  // value and using it to determine the percentage of the background to put
+  // into foreground when mixing the colors together.
+  @return mix($background-color, rgba($color, 1), (1 - opacity($color)) * 100%);
+}

package/core/typography/_typography.scss

@@ -8,7 +8,7 @@
 /// @param {String | Number} $font-weight The font-weight for this level.
 /// @param {String} $font-family The font-family for this level.
 /// @param {String} $letter-spacing The letter-spacing for this level.
-/// @returns {Map} A map representing the definition of this typpographic level.
+/// @returns {Map} A map representing the definition of this typographic level.
 @function define-typography-level(
   $font-size,
   $line-height: $font-size,
@@ -46,7 +46,11 @@
 /// @param {Map} $button Configuration for the "button" typographic level.
 /// @param {Map} $input Configuration for the "input" typographic level.
 /// @returns {Map} A typography config for the application.
-@function define-typography-config(
+///
+/// @deprecated Use `mat.define-typography-config` instead.
+///     See https://material.angular.io/guide/mdc-migration for information about migrating.
+/// @breaking-change 17.0.0
+@function define-legacy-typography-config(
   $font-family:   'Roboto, "Helvetica Neue", sans-serif',
   $display-4:     define-typography-level(112px, 112px, 300, $letter-spacing: -.05em),
   $display-3:     define-typography-level(56px, 56px, 400, $letter-spacing: -.02em),
@@ -136,7 +140,7 @@
         $non-null-args: map.merge($non-null-args, ($key: $value));
       }
     }
-    @return define-typography-config($non-null-args...);
+    @return define-legacy-typography-config($non-null-args...);
   }
   @return $config;
 }
@@ -165,7 +169,7 @@
       body-2: map.get($config, body-1),
       button: map.get($config, button),
       caption: map.get($config, caption),
-      overline: if(map.get($config, overline), map.get($config, overline), define-typography-level(12px, 32px, 500))
+      overline: if(map.get($config, overline), map.get($config, overline),define-typography-level(12px, 32px, 500))
     );
   }
   @return $config;
@@ -176,27 +180,185 @@
 /// @param {String} $selector Ancestor selector under which native elements, such as h1, will
 ///     be styled.
 @mixin typography-hierarchy($config-or-theme, $selector: '.mat-typography') {
+  $config: private-typography-to-2018-config(theming.get-typography-config($config-or-theme));
+
+  // Note that it seems redundant to prefix the class rules with the `$selector`, however it's
+  // necessary if we want to allow people to overwrite the tag selectors. This is due to
+  // selectors like `#{$selector} h1` being more specific than ones like `.mat-title`.
+  .mat-h1,
+  .mat-headline-5,
+  #{$selector} .mat-h1,
+  #{$selector} .mat-headline-5,
+  #{$selector} h1 {
+    @include typography-utils.typography-level($config, headline-5);
+
+    margin: 0 0 16px;
+  }
+
+  .mat-h2,
+  .mat-headline-6,
+  #{$selector} .mat-h2,
+  #{$selector} .mat-headline-6,
+  #{$selector} h2 {
+    @include typography-utils.typography-level($config, headline-6);
+
+    margin: 0 0 16px;
+  }
+
+  .mat-h3,
+  .mat-subtitle-1,
+  #{$selector} .mat-h3,
+  #{$selector} .mat-subtitle-1,
+  #{$selector} h3 {
+    @include typography-utils.typography-level($config, subtitle-1);
+
+    margin: 0 0 16px;
+  }
+
+  .mat-h4,
+  .mat-body-1,
+  #{$selector} .mat-h4,
+  #{$selector} .mat-body-1,
+  #{$selector} h4 {
+    @include typography-utils.typography-level($config, body-1);
+
+    margin: 0 0 16px;
+  }
+
+  // Note: the spec doesn't have anything that would correspond to h5 and h6, but we add these for
+  // consistency. The font sizes come from the Chrome user agent styles which have h5 at 0.83em
+  // and h6 at 0.67em.
+  .mat-h5,
+  #{$selector} .mat-h5,
+  #{$selector} h5 {
+    @include typography-utils.font-shorthand(
+
+      calc(#{typography-utils.font-size($config, body-2)} * .83),
+      typography-utils.font-weight($config, body-2),
+      typography-utils.line-height($config, body-2),
+      typography-utils.font-family($config, body-2)
+    );
+
+    margin: 0 0 12px;
+  }
+
+  .mat-h6,
+  #{$selector} .mat-h6,
+  #{$selector} h6 {
+    @include typography-utils.font-shorthand(
+
+      calc(#{typography-utils.font-size($config, body-2)} * .67),
+      typography-utils.font-weight($config, body-2),
+      typography-utils.line-height($config, body-2),
+      typography-utils.font-family($config, body-2)
+    );
+
+    margin: 0 0 12px;
+  }
+
+  .mat-body-strong,
+  .mat-subtitle-2,
+  #{$selector} .mat-body-strong,
+  #{$selector} .mat-subtitle-2 {
+    @include typography-utils.typography-level($config, subtitle-2);
+  }
+
+  .mat-body,
+  .mat-body-2,
+  #{$selector} .mat-body,
+  #{$selector} .mat-body-2,
+  #{$selector} {
+    @include typography-utils.typography-level($config, body-2);
+
+    p {
+      margin: 0 0 12px;
+    }
+  }
+
+  .mat-small,
+  .mat-caption,
+  #{$selector} .mat-small,
+  #{$selector} .mat-caption {
+    @include typography-utils.typography-level($config, caption);
+  }
+
+  .mat-headline-1,
+  #{$selector} .mat-headline-1 {
+    @include typography-utils.typography-level($config, headline-1);
+
+    margin: 0 0 56px;
+  }
+
+  .mat-headline-2,
+  #{$selector} .mat-headline-2 {
+    @include typography-utils.typography-level($config, headline-2);
+
+    margin: 0 0 64px;
+  }
+
+  .mat-headline-3,
+  #{$selector} .mat-headline-3 {
+    @include typography-utils.typography-level($config, headline-3);
+
+    margin: 0 0 64px;
+  }
+
+  .mat-headline-4,
+  #{$selector} .mat-headline-4 {
+    @include typography-utils.typography-level($config, headline-4);
+
+    margin: 0 0 64px;
+  }
+}
+
+/// Emits baseline typographic styles based on a given config.
+/// @param {Map} $config-or-theme A typography config for an entire theme.
+/// @param {String} $selector Ancestor selector under which native elements, such as h1, will
+///     be styled.
+/// @deprecated Use `mat.typography-hierarchy` instead.
+///     See https://material.angular.io/guide/mdc-migration for information about migrating.
+/// @breaking-change 17.0.0
+@mixin legacy-typography-hierarchy($config-or-theme, $selector: '.mat-typography') {
   $config: private-typography-to-2014-config(theming.get-typography-config($config-or-theme));
 
-  .mat-h1, .mat-headline, #{$selector} h1 {
+  // Note that it seems redundant to prefix the class rules with the `$selector`, however it's
+  // necessary if we want to allow people to overwrite the tag selectors. This is due to
+  // selectors like `#{$selector} h1` being more specific than ones like `.mat-title`.
+  .mat-h1,
+  .mat-headline,
+  #{$selector} .mat-h1,
+  #{$selector} .mat-headline,
+  #{$selector} h1 {
     @include typography-utils.typography-level($config, headline);
 
     margin: 0 0 16px;
   }
 
-  .mat-h2, .mat-title, #{$selector} h2 {
+  .mat-h2,
+  .mat-title,
+  #{$selector} .mat-h2,
+  #{$selector} .mat-title,
+  #{$selector} h2 {
     @include typography-utils.typography-level($config, title);
 
     margin: 0 0 16px;
   }
 
-  .mat-h3, .mat-subheading-2, #{$selector} h3 {
+  .mat-h3,
+  .mat-subheading-2,
+  #{$selector} .mat-h3,
+  #{$selector} .mat-subheading-2,
+  #{$selector} h3 {
     @include typography-utils.typography-level($config, subheading-2);
 
     margin: 0 0 16px;
   }
 
-  .mat-h4, .mat-subheading-1, #{$selector} h4 {
+  .mat-h4,
+  .mat-subheading-1,
+  #{$selector} .mat-h4,
+  #{$selector} .mat-subheading-1,
+  #{$selector} h4 {
     @include typography-utils.typography-level($config, subheading-1);
 
     margin: 0 0 16px;
@@ -205,7 +367,9 @@
   // Note: the spec doesn't have anything that would correspond to h5 and h6, but we add these for
   // consistency. The font sizes come from the Chrome user agent styles which have h5 at 0.83em
   // and h6 at 0.67em.
-  .mat-h5, #{$selector} h5 {
+  .mat-h5,
+  #{$selector} .mat-h5,
+  #{$selector} h5 {
     @include typography-utils.font-shorthand(
 
       calc(#{typography-utils.font-size($config, body-1)} * .83),
@@ -217,7 +381,9 @@
     margin: 0 0 12px;
   }
 
-  .mat-h6, #{$selector} h6 {
+  .mat-h6,
+  #{$selector} .mat-h6,
+  #{$selector} h6 {
     @include typography-utils.font-shorthand(
 
       calc(#{typography-utils.font-size($config, body-1)} * .67),
@@ -230,11 +396,17 @@
   }
 
   .mat-body-strong,
-  .mat-body-2 {
+  .mat-body-2,
+  #{$selector} .mat-body-strong,
+  #{$selector} .mat-body-2 {
     @include typography-utils.typography-level($config, body-2);
   }
 
-  .mat-body, .mat-body-1, #{$selector} {
+  .mat-body,
+  .mat-body-1,
+  #{$selector} .mat-body,
+  #{$selector} .mat-body-1,
+  #{$selector} {
     @include typography-utils.typography-level($config, body-1);
 
     p {
@@ -243,29 +415,35 @@
   }
 
   .mat-small,
-  .mat-caption {
+  .mat-caption,
+  #{$selector} .mat-small,
+  #{$selector} .mat-caption {
     @include typography-utils.typography-level($config, caption);
   }
 
-  .mat-display-4, #{$selector} .mat-display-4 {
+  .mat-display-4,
+  #{$selector} .mat-display-4 {
     @include typography-utils.typography-level($config, display-4);
 
     margin: 0 0 56px;
   }
 
-  .mat-display-3, #{$selector} .mat-display-3 {
+  .mat-display-3,
+  #{$selector} .mat-display-3 {
     @include typography-utils.typography-level($config, display-3);
 
     margin: 0 0 64px;
   }
 
-  .mat-display-2, #{$selector} .mat-display-2 {
+  .mat-display-2,
+  #{$selector} .mat-display-2 {
     @include typography-utils.typography-level($config, display-2);
 
     margin: 0 0 64px;
   }
 
-  .mat-display-1, #{$selector} .mat-display-1 {
+  .mat-display-1,
+  #{$selector} .mat-display-1 {
     @include typography-utils.typography-level($config, display-1);
 
     margin: 0 0 64px;

package/datetimepicker/_datetimepicker-theme.import.scss

@@ -1,4 +1,4 @@
 @forward 'datetimepicker-theme' hide $selected-today-box-shadow-width, $calendar-body-font-size,
   $calendar-weekday-table-font-size, $calendar-header-font-size, $clock-font-size,
   color, theme, typography;
-@forward 'datetimepicker-theme' as mtx-datetimepicker-* hide mtx-datetimepicker-density;
+@forward 'datetimepicker-theme' as mtx-datetimepicker-*;

package/datetimepicker/_datetimepicker-theme.scss

@@ -203,21 +203,20 @@ $clock-font-size: 14px !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);
   @include theming.private-check-duplicate-theme-styles($theme, 'mtx-datetimepicker') {
     $color: theming.get-color-config($theme);
     $density: theming.get-density-config($theme);
-    $typography-default: typography.define-typography-config();
-    $typography: theming.get-typography-config($theme, $typography-default);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);
     }
     @if $density != null {
-      @include _density($density);
+      @include density($density);
     }
     @if $typography != null {
       @include typography($typography);