@ng-matero/extensions 20.2.0 → 20.3.0

package/core/tokens/{_m3-system.scss → _system.scss}

@@ -1,5 +1,7 @@
+@use 'sass:list';
 @use 'sass:map';
 @use 'sass:meta';
+@use '@angular/material' as mat;
 @use '../../alert/m3-alert';
 @use '../../colorpicker/m3-colorpicker';
 @use '../../datetimepicker/m3-datetimepicker';
@@ -15,6 +17,8 @@
 @use '../theming/config-validation';
 @use '../theming/definition';
 @use '../theming/palettes';
+@use '../theming/m2-inspection';
+@use './m2';
 @use './m3';
 
 /// Emits necessary CSS variables for Material's system level values for the values defined in the
@@ -109,6 +113,7 @@
       $regular: map.get($typography, regular-weight) or $regular;
     } @else {
       $plain: $typography;
+      $brand: $typography;
     }
     $typography-config: (
       definition.$internals: (
@@ -183,7 +188,7 @@
       m3.md-sys-shape-values(),
       m3.md-sys-state-values());
 
-  & {
+  @include mat.private-current-selector-or-root {
     @each $name, $value in $overrides {
       @if (map.has-key($sys-names, $name)) {
         --#{$prefix}-#{$name}: #{map.get($overrides, $name)};
@@ -209,7 +214,7 @@
   $sys-colors: map.set($sys-colors, neutral-variant20, map.get($palettes, neutral-variant, 20));
   $sys-colors: map.set($sys-colors, neutral10, map.get($palettes, neutral, 10));
 
-  & {
+  @include mat.private-current-selector-or-root {
     @each $name, $value in $sys-colors {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
     }
@@ -248,7 +253,7 @@
         typography-system-variables-prefix) or definition.$system-level-prefix;
   }
 
-  & {
+  @include mat.private-current-selector-or-root {
     @each $name, $value in m3.md-sys-typescale-values($font-definition) {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
     }
@@ -259,18 +264,19 @@
   $shadow-color: map.get(
       $theme, definition.$internals, palettes, neutral, 0);
 
-  @each $name, $value in m3.md-sys-elevation-values() {
-    $level: map.get($overrides, $name) or $value;
-    $value: elevation.get-box-shadow($level, $shadow-color);
 
-    & {
+  @include mat.private-current-selector-or-root {
+    @each $name, $value in m3.md-sys-elevation-values() {
+      $level: map.get($overrides, $name) or $value;
+      $value: elevation.get-box-shadow($level, $shadow-color);
+
       --#{$prefix}-#{$name}: #{$value};
     }
   }
 }
 
 @mixin system-level-shape($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) {
-  & {
+  @include mat.private-current-selector-or-root {
     @each $name, $value in m3.md-sys-shape-values() {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
     }
@@ -278,7 +284,7 @@
 }
 
 @mixin system-level-state($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) {
-  & {
+  @include mat.private-current-selector-or-root {
     @each $name, $value in m3.md-sys-state-values() {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
     }
@@ -293,3 +299,73 @@
   }
   @return $result;
 }
+
+// Defines Angular Material system variables using M2 values provided by
+// an M2 theme config created with `mat.m2-define-light-theme` or `mat.m2-define-dark-theme`.
+//
+// This enables applications to style custom components with system-level CSS
+// variables instead of creating a separate component theme mixin that relies on
+// the theme config.
+//
+// For example, use `var(--mat-sys-primary)` to get a theme's primary color instead of
+// pulling it from the theme with `m2-get-color-from-palette($primary-palette, default)`.
+//
+// Unlike M3's `mat.theme()`, this mixin does not replace the need to call
+// individual component theme mixins for Angular Material components.
+@mixin m2-theme($theme-config, $overrides: ()) {
+  @if mat.get-theme-version($theme-config) == 1 {
+    @error '`m2-theme` mixin should only be called for M2 theme ' +
+        'configs created with define-light-theme or define-dark-theme';
+  }
+
+  // Check whether any override keys do not match keys in the theme
+  // config system map.
+  $invalid-keys: ();
+  $config-system: map.get($theme-config, _mat-system);
+  @each $key, $value in $overrides {
+    @if (not map.has-key($config-system, $key)) {
+      $invalid-keys: list.append($invalid-keys, $key);
+    }
+  }
+  @if (list.length($invalid-keys) > 0) {
+    @error 'The following overrides are not valid system variables: #{$invalid-keys}. ' +
+        'Valid keys are: #{map.keys($config-system)}';
+  }
+
+  $config: m2-inspection.get-m2-config($theme-config);
+
+  $color: map.get($config, color);
+  @if (m2-inspection.theme-has($theme-config, color)) {
+    $system-colors: if(map.get($color, is-dark),
+      m2.md-sys-color-values-dark($color),
+      m2.md-sys-color-values-light($color),
+    );
+    @include _define-m2-system-vars($system-colors, $overrides);
+
+    $shadow: map.get($theme-config, _mat-system, shadow);
+    $system-elevations: ();
+    @each $name, $value in m2.md-sys-elevation-values() {
+      $level: map.get($overrides, $name) or $value;
+      $value: elevation.get-box-shadow($level, $shadow);
+      $system-elevations: map.set($system-elevations, $name, $value);
+    }
+    @include _define-m2-system-vars($system-elevations, $overrides);
+  }
+
+  $typography: map.get($config, typography);
+  @if ($typography) {
+    $system-typography: m2.md-sys-typescale-values($typography);
+    @include _define-m2-system-vars($system-typography, $overrides);
+  }
+
+  @include _define-m2-system-vars(m2.md-sys-shape-values(), $overrides);
+  @include _define-m2-system-vars(m2.md-sys-state-values(), $overrides);
+}
+
+@mixin _define-m2-system-vars($vars, $overrides) {
+  @include mat.private-current-selector-or-root {
+    @each $name, $value in $vars {
+      --#{definition.$system-fallback-prefix}-#{$name}: #{map.get($overrides, $name) or $value};
+    }
+  }
+}

package/core/tokens/m2/_index.scss

@@ -0,0 +1,6 @@
+@forward './md-sys-color';
+@forward './md-sys-elevation';
+@forward './md-sys-motion';
+@forward './md-sys-shape';
+@forward './md-sys-state';
+@forward './md-sys-typescale';

package/core/tokens/m2/_md-sys-color.scss

@@ -0,0 +1,114 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@function md-sys-color-values-dark($palettes) {
+  @return (
+    primary: map.get($palettes, primary, default),
+    on-primary: map.get($palettes, primary, default-contrast),
+    inverse-primary: map.get($palettes, primary, 600),
+    secondary: map.get($palettes, accent, default),
+    on-secondary: map.get($palettes, accent, default-contrast),
+    inverse-secondary: map.get($palettes, accent, 600),
+    error: map.get($palettes, warn, default),
+    on-error: map.get($palettes, warn, default-contrast),
+    inverse-error: map.get($palettes, warn, 600),
+    shadow: black,
+    surface: map.get(mat.$m2-grey-palette, 800),
+    on-surface: white,
+    surface-variant: #4a4a4a,
+    on-surface-variant: rgba(white, 0.7),
+    background: #303030,
+    inverse-surface: white,
+    inverse-on-surface: rgba(black, 0.87),
+    outline: rgba(white, 0.12),
+    outline-variant: rgba(white, 0.38),
+    error-container: map.get($palettes, warn, default),
+    on-background: white,
+    on-error-container: map.get($palettes, warn, default-contrast),
+    on-primary-container: map.get($palettes, primary, default-contrast),
+    on-primary-fixed: map.get($palettes, primary, default-contrast),
+    on-primary-fixed-variant: map.get($palettes, primary, default-contrast),
+    on-secondary-container: map.get($palettes, accent, default-contrast),
+    on-secondary-fixed: map.get($palettes, accent, default-contrast),
+    on-secondary-fixed-variant: map.get($palettes, accent, default-contrast),
+    on-tertiary: map.get($palettes, accent, default-contrast),
+    on-tertiary-container: map.get($palettes, accent, default-contrast),
+    on-tertiary-fixed: map.get($palettes, accent, default-contrast),
+    on-tertiary-fixed-variant: map.get($palettes, accent, default-contrast),
+    primary-container: map.get($palettes, primary, default),
+    primary-fixed: map.get($palettes, primary, default),
+    primary-fixed-dim: map.get($palettes, primary, default),
+    scrim: black,
+    secondary-container: map.get($palettes, accent, default),
+    secondary-fixed: map.get($palettes, accent, default),
+    secondary-fixed-dim: map.get($palettes, accent, default),
+    surface-bright: map.get(mat.$m2-grey-palette, 800),
+    surface-container: map.get(mat.$m2-grey-palette, 800),
+    surface-container-high: map.get(mat.$m2-grey-palette, 800),
+    surface-container-highest: map.get(mat.$m2-grey-palette, 800),
+    surface-container-low: map.get(mat.$m2-grey-palette, 800),
+    surface-container-lowest: map.get(mat.$m2-grey-palette, 800),
+    surface-dim: map.get(mat.$m2-grey-palette, 800),
+    surface-tint: map.get(mat.$m2-grey-palette, 800),
+    tertiary: map.get($palettes, accent, default),
+    tertiary-container: map.get($palettes, accent, default),
+    tertiary-fixed: map.get($palettes, accent, default),
+    tertiary-fixed-dim: map.get($palettes, accent, default),
+  );
+}
+
+@function md-sys-color-values-light($palettes) {
+  @return (
+    primary: map.get($palettes, primary, default),
+    on-primary: map.get($palettes, primary, default-contrast),
+    inverse-primary: map.get($palettes, primary, 300),
+    secondary: map.get($palettes, accent, default),
+    on-secondary: map.get($palettes, accent, default-contrast),
+    inverse-secondary: map.get($palettes, accent, 300),
+    error: map.get($palettes, warn, default),
+    on-error: map.get($palettes, warn, default-contrast),
+    inverse-error: map.get($palettes, warn, 300),
+    shadow: black,
+    surface: white,
+    on-surface: rgba(black, 0.87),
+    surface-variant: #f6f6f6,
+    on-surface-variant: rgba(black, 0.54),
+    background: map.get(mat.$m2-grey-palette, 50),
+    inverse-surface: map.get(mat.$m2-grey-palette, 800),
+    inverse-on-surface: white,
+    outline: rgba(black, 0.12),
+    outline-variant: rgba(black, 0.38),
+    error-container: map.get($palettes, warn, default),
+    on-background: rgba(black, 0.87),
+    on-error-container: map.get($palettes, warn, default-contrast),
+    on-primary-container: map.get($palettes, primary, default-contrast),
+    on-primary-fixed: map.get($palettes, primary, default-contrast),
+    on-primary-fixed-variant: map.get($palettes, primary, default-contrast),
+    on-secondary-container: map.get($palettes, accent, default-contrast),
+    on-secondary-fixed: map.get($palettes, accent, default-contrast),
+    on-secondary-fixed-variant: map.get($palettes, accent, default-contrast),
+    on-tertiary: map.get($palettes, accent, default-contrast),
+    on-tertiary-container: map.get($palettes, accent, default-contrast),
+    on-tertiary-fixed: map.get($palettes, accent, default-contrast),
+    on-tertiary-fixed-variant: map.get($palettes, accent, default-contrast),
+    primary-container: map.get($palettes, primary, default),
+    primary-fixed: map.get($palettes, primary, default),
+    primary-fixed-dim: map.get($palettes, primary, default),
+    scrim: black,
+    secondary-container: map.get($palettes, accent, default),
+    secondary-fixed: map.get($palettes, accent, default),
+    secondary-fixed-dim: map.get($palettes, accent, default),
+    surface-bright: white,
+    surface-container: white,
+    surface-container-high: white,
+    surface-container-highest: white,
+    surface-container-low: white,
+    surface-container-lowest: white,
+    surface-dim: white,
+    surface-tint: white,
+    tertiary: map.get($palettes, accent, default),
+    tertiary-container: map.get($palettes, accent, default),
+    tertiary-fixed: map.get($palettes, accent, default),
+    tertiary-fixed-dim: map.get($palettes, accent, default),
+  );
+}

package/core/tokens/m2/_md-sys-elevation.scss

@@ -0,0 +1,10 @@
+@function md-sys-elevation-values() {
+  @return (
+    level0: 0,
+    level1: 1,
+    level2: 3,
+    level3: 6,
+    level4: 8,
+    level5: 12
+  );
+}

package/core/tokens/m2/_md-sys-motion.scss

@@ -0,0 +1,30 @@
+@function md-sys-motion-values() {
+  @return (
+    duration-extra-long1: 700ms,
+    duration-extra-long2: 800ms,
+    duration-extra-long3: 900ms,
+    duration-extra-long4: 1000ms,
+    duration-long1: 450ms,
+    duration-long2: 500ms,
+    duration-long3: 550ms,
+    duration-long4: 600ms,
+    duration-medium1: 250ms,
+    duration-medium2: 300ms,
+    duration-medium3: 350ms,
+    duration-medium4: 400ms,
+    duration-short1: 50ms,
+    duration-short2: 100ms,
+    duration-short3: 150ms,
+    duration-short4: 200ms,
+    easing-emphasized: cubic-bezier(0.2, 0, 0, 1),
+    easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15),
+    easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1),
+    easing-legacy: cubic-bezier(0.4, 0, 0.2, 1),
+    easing-legacy-accelerate: cubic-bezier(0.4, 0, 1, 1),
+    easing-legacy-decelerate: cubic-bezier(0, 0, 0.2, 1),
+    easing-linear: cubic-bezier(0, 0, 1, 1),
+    easing-standard: cubic-bezier(0.2, 0, 0, 1),
+    easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1),
+    easing-standard-decelerate: cubic-bezier(0, 0, 0, 1)
+  );
+}

package/core/tokens/m2/_md-sys-shape.scss

@@ -0,0 +1,16 @@
+@function  md-sys-shape-values() {
+  @return (
+    corner-extra-large: 28px,
+    corner-extra-large-top: (28px 28px 0 0),
+    corner-extra-small: 4px,
+    corner-extra-small-top: (4px 4px 0 0),
+    corner-full: 9999px,
+    corner-large: 16px,
+    corner-large-end: (0 16px 16px 0),
+    corner-large-start: (16px 0 0 16px),
+    corner-large-top: (16px 16px 0 0),
+    corner-medium: 12px,
+    corner-none: 0,
+    corner-small: 8px
+  );
+}

package/core/tokens/m2/_md-sys-state.scss

@@ -0,0 +1,8 @@
+@function md-sys-state-values($exclude-hardcoded-values: false) {
+  @return (
+    dragged-state-layer-opacity: 0.16,
+    focus-state-layer-opacity: 0.12,
+    hover-state-layer-opacity: 0.04,
+    pressed-state-layer-opacity: 0.12,
+  );
+}

package/core/tokens/m2/_md-sys-typescale.scss

@@ -0,0 +1,68 @@
+@use 'sass:map';
+@use 'sass:string';
+@use 'sass:meta';
+
+@function md-sys-typescale-values($config) {
+  // Mapping is according to the old 2014 version of the typography spec.
+  $sys-to-config: (
+    body-large: subheading-1,
+    body-medium: body-1,
+    body-small: caption,
+    display-large: display-4,
+    display-medium: display-4,
+    display-small: display-4,
+    headline-large: display-3,
+    headline-medium: display-2,
+    headline-small: display-1,
+    label-large: subheading-2,
+    label-medium: body-2,
+    label-small: button,
+    title-large: headline,
+    title-medium: headline,
+    title-small: title,
+  );
+
+  // If the config is based on the updated 2018 version of the typography spec, then
+  // use the correct config keys mapping.
+  @if (map.get($config, headline-1) != null) {
+    $sys-to-config: (
+      body-large: body-1,
+      body-medium: body-2,
+      body-small: caption,
+      label-large: subtitle-1,
+      label-medium: subtitle-2,
+      label-small: button,
+      display-large: headline-1,
+      display-medium: headline-1,
+      display-small: headline-1,
+      headline-large: headline-2,
+      headline-medium: headline-3,
+      headline-small: headline-4,
+      title-large: headline-5,
+      title-medium: headline-5,
+      title-small: headline-6,
+    );
+  }
+
+  $typography: ();
+  @each $sys-key, $config-key in $sys-to-config {
+    $font: map.get($config, $config-key, font-family);
+    @if (meta.type-of($font) == 'string') {
+      $font: string.unquote($font);
+    }
+    $line-height: map.get($config, $config-key, line-height);
+    $size: map.get($config, $config-key, font-size);
+    $tracking: map.get($config, $config-key, letter-spacing);
+    $weight: map.get($config, $config-key, font-weight);
+    $typography: map.merge($typography, (
+      #{$sys-key}: $weight $size #{'/'} $line-height $font,
+      #{$sys-key}-font: $font,
+      #{$sys-key}-line-height: $line-height,
+      #{$sys-key}-size: $size,
+      #{$sys-key}-tracking: $tracking,
+      #{$sys-key}-weight: $weight,
+    ));
+  }
+
+  @return $typography;
+}

package/core/tokens/m3/_md-sys-color.scss

@@ -1,14 +1,9 @@
-//
-// Design system display name: Material 3
-// Design system version: v0.161
-//
-
 @use 'sass:map';
 
 // Indicates whether alternative tokens should be used
 $_alternate-tokens: false;
 
-@function md-sys-color-values-dark($palettes) {
+@function md-sys-color-values-dark($palettes: ()) {
   $values: (
     background: map.get($palettes, neutral, 6),
     error: map.get($palettes, error, 80),
@@ -63,9 +58,7 @@ $_alternate-tokens: false;
 
   @if ($_alternate-tokens) {
     $values: map.merge($values, (
-      background: map.get($palettes, neutral, 10),
       on-surface-variant: map.get($palettes, neutral-variant, 80),
-      surface: map.get($palettes, neutral, 10),
       surface-bright: #37393b,
       surface-container: #1e1f20,
       surface-container-high: #282a2c,
@@ -80,7 +73,7 @@ $_alternate-tokens: false;
   @return $values;
 }
 
-@function md-sys-color-values-light($palettes) {
+@function md-sys-color-values-light($palettes: ()) {
   $values: (
     background: map.get($palettes, neutral, 98),
     error: map.get($palettes, error, 40),
@@ -136,17 +129,12 @@ $_alternate-tokens: false;
   @if ($_alternate-tokens) {
     $values: map.merge($values, (
       background: map.get($palettes, neutral, 100),
-      on-error-container: map.get($palettes, error, 10),
-      on-primary-container: map.get($palettes, primary, 10),
-      on-secondary-container: map.get($palettes, secondary, 10),
-      on-tertiary-container: map.get($palettes, tertiary, 10),
       surface: map.get($palettes, neutral, 100),
       surface-bright: map.get($palettes, neutral, 100),
       surface-container: #f0f4f9,
       surface-container-high: #e9eef6,
       surface-container-highest: #dde3ea,
       surface-container-low: #f8fafd,
-      surface-container-lowest: map.get($palettes, primary, 100),
       surface-dim: #d3dbe5,
       surface-tint: #6991d6,
     ));

package/core/tokens/m3/_md-sys-typescale.scss

@@ -8,7 +8,7 @@
 // Indicates whether alternative tokens should be used
 $_alternate-tokens: false;
 
-@function md-sys-typescale-values($typography) {
+@function md-sys-typescale-values($typography: ()) {
   $plain: map.get($typography, plain);
   $brand: map.get($typography, brand);
   $bold: map.get($typography, bold);

package/core/tokens/m3/_theme.scss

@@ -1,4 +1,3 @@
-@use '../../theming/palettes';
 @use './md-sys-color';
 @use './md-sys-elevation';
 @use './md-sys-shape';
@@ -17,31 +16,20 @@
   @return $new-map;
 }
 
-/// Map key used to store internals of theme config.
-$internals: _mat-theming-internals-do-not-access;
-
-$placeholder-palettes: md-sys-color.md-sys-color-values-light(palettes.$blue-palette);
-$placeholder-palettes: map.set($placeholder-palettes, primary, palettes.$blue-palette);
-$app-vars: (
-  'md-sys-color': _create-system-app-vars-map(
-      md-sys-color.md-sys-color-values-light($placeholder-palettes)),
-  'md-sys-typescale': _create-system-app-vars-map(md-sys-typescale.md-sys-typescale-values((
-    brand: (Roboto),
-    plain: (Roboto),
-    bold: 700,
-    medium: 500,
-    regular: 400
-  ))),
-  'md-sys-elevation': _create-system-app-vars-map(md-sys-elevation.md-sys-elevation-values()),
-  'md-sys-state': _create-system-app-vars-map(md-sys-state.md-sys-state-values()),
-  'md-sys-shape': _create-system-app-vars-map(md-sys-shape.md-sys-shape-values()),
-  // Add a subset of palette-specific colors used by components instead of system values
-  'md-ref-palette': _create-system-app-vars-map(
-      (
-        neutral10: '', // Form field native select option text color
-        neutral-variant20: '', // Sidenav scrim (container background shadow when opened),
-      )
+$_sys-maps: (
+  md-sys-color.md-sys-color-values-light(),
+  md-sys-typescale.md-sys-typescale-values(),
+  md-sys-elevation.md-sys-elevation-values(),
+  md-sys-state.md-sys-state-values(),
+  md-sys-shape.md-sys-shape-values(),
+  (
+    neutral10: '', // Form field native select option text color
+    neutral-variant20: '', // Sidenav scrim (container background shadow when opened),
   ),
 );
 
-$sys-theme: ($internals: $app-vars);
+$_system: (density-scale: 0);
+@each $sys-map in $_sys-maps {
+  $_system: map.merge($_system, _create-system-app-vars-map($sys-map));
+}
+$sys-theme: (_mat-system: $_system);

package/core/typography/_versioning.scss

@@ -0,0 +1,91 @@
+@use 'sass:map';
+@use '../m2/typography' as m2-typography;
+
+// Whether a config is for the Material Design 2018 typography system.
+@function private-typography-is-2018-config($config) {
+  @return map.get($config, headline-1) != null;
+}
+
+// Whether a config is for the Material Design 2014 typography system.
+@function private-typography-is-2014-config($config) {
+  @return map.get($config, headline) != null;
+}
+
+// Given a config for either the 2014 or 2018 Material Design typography system,
+// produces a normalized typography config for the 2014 Material Design typography system.
+// 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles
+// 2018 - https://material.io/design/typography/the-type-system.html#type-scale
+//
+// Components using this function should be migrated to normalize to the 2018 style config instead.
+// New components should not use this function.
+@function private-typography-to-2014-config($config) {
+  @if $config == null {
+    @return null;
+  }
+  @if not private-typography-is-2014-config($config) {
+    $args: (
+      display-4: map.get($config, headline-1),
+      display-3: map.get($config, headline-2),
+      display-2: map.get($config, headline-3),
+      display-1: map.get($config, headline-4),
+      headline: map.get($config, headline-5),
+      title: map.get($config, headline-6),
+      subheading-2: map.get($config, subtitle-1),
+      subheading-1: map.get($config, subtitle-2),
+      body-2: map.get($config, body-1),
+      body-1: map.get($config, body-2),
+      button: map.get($config, button),
+      caption: map.get($config, caption),
+      font-family: map.get($config, font-family),
+    );
+    $non-null-args: ();
+    @each $key, $value in $args {
+      @if $value != null {
+        $non-null-args: map.merge($non-null-args, ($key: $value));
+      }
+    }
+    @return m2-typography.define-legacy-typography-config($non-null-args...);
+  }
+  @return $config;
+}
+
+// Given a config for either the 2014 or 2018 Material Design typography system,
+// produces a normalized typography config for the 2018 Material Design typography system.
+// 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles
+// 2018 - https://material.io/design/typography/the-type-system.html#type-scale
+//
+// The $force option is used to allow components to specify that they want to re-map the keys, even
+// if the 2018 keys are already present. This allows those components to preserve the (incorrect)
+// behavior they had previously, when they called `private-typography-to-2014-config`. Eventually we
+// should clean this up, remove the $force option, and reconcile any screen diffs.
+@function private-typography-to-2018-config($config, $force: false) {
+  @if $config == null {
+    @return null;
+  }
+  @if $force or not private-typography-is-2018-config($config) {
+    @return (
+      headline-1: map.get($config, display-4),
+      headline-2: map.get($config, display-3),
+      headline-3: map.get($config, display-2),
+      headline-4: map.get($config, display-1),
+      headline-5: map.get($config, headline),
+      headline-6: map.get($config, title),
+      subtitle-1: map.get($config, subheading-2),
+      font-family: map.get($config, font-family),
+
+      // These mappings are odd, but body-2 in the 2014 system actually looks closer to subtitle-2
+      // in the 2018 system, and subeading-1 in the 2014 system looks more like body-1 in the 2018
+      // system.
+      subtitle-2: map.get($config, body-2),
+      body-1: map.get($config, subheading-1),
+
+      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),
+        m2-typography.define-typography-level(12px, 32px, 500)
+      )
+    );
+  }
+  @return $config;
+}

package/datetimepicker/_datetimepicker-theme.scss

@@ -60,7 +60,7 @@
     (
       namespace: datetimepicker,
       tokens: token-utils.get-overrides(m3-datetimepicker.get-tokens(), datetimepicker)
-    )
+    ),
   );
 }
 

package/datetimepicker/index.d.ts

@@ -150,6 +150,8 @@ declare class MtxCalendarBody implements OnChanges {
     label: string;
     /** The cells to display in the table. */
     rows: MtxCalendarCell[][];
+    /** Whether to show week numbers */
+    showWeekNumbers: boolean;
     /**
      * The aspect ratio (width / height) to use for the cells in the table. This aspect ratio will be
      * maintained even as the table resizes.
@@ -187,7 +189,8 @@ declare class MtxCalendarBody implements OnChanges {
     ngOnChanges(changes: SimpleChanges): void;
     _focusActiveCell(movePreview?: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxCalendarBody, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MtxCalendarBody, "[mtx-calendar-body]", ["mtxCalendarBody"], { "label": { "alias": "label"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "cellAspectRatio": { "alias": "cellAspectRatio"; "required": false; }; "todayValue": { "alias": "todayValue"; "required": false; }; "selectedValue": { "alias": "selectedValue"; "required": false; }; "labelMinRequiredCells": { "alias": "labelMinRequiredCells"; "required": false; }; "numCols": { "alias": "numCols"; "required": false; }; "allowDisabledSelection": { "alias": "allowDisabledSelection"; "required": false; }; "activeCell": { "alias": "activeCell"; "required": false; }; }, { "selectedValueChange": "selectedValueChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxCalendarBody, "[mtx-calendar-body]", ["mtxCalendarBody"], { "label": { "alias": "label"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; }; "cellAspectRatio": { "alias": "cellAspectRatio"; "required": false; }; "todayValue": { "alias": "todayValue"; "required": false; }; "selectedValue": { "alias": "selectedValue"; "required": false; }; "labelMinRequiredCells": { "alias": "labelMinRequiredCells"; "required": false; }; "numCols": { "alias": "numCols"; "required": false; }; "allowDisabledSelection": { "alias": "allowDisabledSelection"; "required": false; }; "activeCell": { "alias": "activeCell"; "required": false; }; }, { "selectedValueChange": "selectedValueChange"; }, never, never, true, never>;
+    static ngAcceptInputType_showWeekNumbers: unknown;
 }
 
 /**