@ng-matero/extensions 16.1.3 → 16.2.0

package/core/typography/_typography.scss

@@ -1,6 +1,9 @@
 @use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
 @use 'typography-utils';
 @use '../theming/theming';
+@use '@material/typography' as mdc-typography;
 
 /// Defines a typography level from the Material Design spec.
 /// @param {String} $font-size The font-size for this level.
@@ -47,8 +50,7 @@
 /// @param {Map} $input Configuration for the "input" typographic level.
 /// @returns {Map} A typography config for the application.
 ///
-/// @deprecated Use `mat.define-typography-config` instead.
-///     See https://material.angular.io/guide/mdc-migration for information about migrating.
+/// @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',
@@ -64,7 +66,7 @@
   $body-1:        define-typography-level(14px, 20px, 400),
   $caption:       define-typography-level(12px, 20px, 400),
   $button:        define-typography-level(14px, 14px, 500),
-
+  
   $input:         define-typography-level(inherit, 1.125, 400)
 ) {
 
@@ -98,6 +100,165 @@
   @return map.merge($config, (font-family: $font-family));
 }
 
+// Converts a map containing rem values to a map containing px values.
+@function _rem-to-px($x, $px-per-rem: 16px) {
+  @if meta.type-of($x) == 'map' {
+    @each $key, $val in $x {
+      $x: map.merge($x, ($key: _rem-to-px($val)));
+    }
+    @return $x;
+  }
+  @if meta.type-of($x) == 'number' and math.unit($x) == 'rem' {
+    @return math.div($x, 1rem) * $px-per-rem;
+  }
+  @else {
+    @return $x;
+  }
+}
+
+// Applies the default font family to all levels in a typography config.
+@function _apply-font-family($font-family, $initial-config) {
+  $config: $initial-config;
+
+  @each $key, $level in $config {
+    @if map.get($level, 'font-family') == null {
+      // Sass maps are immutable so we have to re-assign the variable each time.
+      $config: map.set($config, $key, map.set($level, 'font-family', $font-family));
+    }
+  }
+
+  @return map.set($config, 'font-family', $font-family);
+}
+
+// Converts an MDC typography level config to an Angular Material one.
+@function typography-config-level-from-mdc($mdc-level, $font-family: null) {
+  $mdc-level-config: map.get(mdc-typography.$styles, $mdc-level);
+
+  // Explicitly default the font family to null since we'll apply it globally
+  // through the `define-typgraphy-config`/`define-legacy-typography-config`.
+  @return define-typography-level(
+    $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),
+    $letter-spacing: map.get($mdc-level-config, letter-spacing)
+  );
+}
+
+/// Generates an Angular Material typography config based on values from the official Material
+/// Design spec implementation (MDC Web). All arguments are optional, but may be passed to override
+/// the default values. The `mat-typography-level` function can be used to generate a custom
+/// typography level map which can be passed to this function to override one of the default levels.
+/// All default typography sizing generated by this function is in `px` units.
+///
+/// @param {String} $font-family The font family to use for levels where it is not explicitly
+///     specified.
+/// @param {Map} $headline-1 The font settings for the headline-1 font level.
+/// @param {Map} $headline-2 The font settings for the headline-2 font level.
+/// @param {Map} $headline-3 The font settings for the headline-3 font level.
+/// @param {Map} $headline-4 The font settings for the headline-4 font level.
+/// @param {Map} $headline-5 The font settings for the headline-5 font level.
+/// @param {Map} $headline-6 The font settings for the headline-6 font level.
+/// @param {Map} $subtitle-1 The font settings for the subtitle-1 font level.
+/// @param {Map} $subtitle-2 The font settings for the subtitle-2 font level.
+/// @param {Map} $body-1 The font settings for the body-1 font level.
+/// @param {Map} $body-2 The font settings for the body-2 font level.
+/// @param {Map} $caption The font settings for the caption font level.
+/// @param {Map} $button The font settings for the button font level.
+/// @param {Map} $overline The font settings for the overline font level.
+/// @return {Map} A map containing font settings for each of the levels in the Material Design spec.
+@function define-typography-config(
+  // TODO(mmalerba): rename this function to define-typography-config,
+  //  and create a predefined px based config for people that need it.
+  $font-family: mdc-typography.$font-family,
+  $headline-1: null,
+  $headline-2: null,
+  $headline-3: null,
+  $headline-4: null,
+  $headline-5: null,
+  $headline-6: null,
+  $subtitle-1: null,
+  $subtitle-2: null,
+  $body-1: null,
+  $body-2: null,
+  $caption: null,
+  $button: null,
+  $overline: null,
+) {
+  @return _apply-font-family($font-family, (
+    headline-1: $headline-1 or _rem-to-px(typography-config-level-from-mdc(headline1)),
+    headline-2: $headline-2 or _rem-to-px(typography-config-level-from-mdc(headline2)),
+    headline-3: $headline-3 or _rem-to-px(typography-config-level-from-mdc(headline3)),
+    headline-4: $headline-4 or _rem-to-px(typography-config-level-from-mdc(headline4)),
+    headline-5: $headline-5 or _rem-to-px(typography-config-level-from-mdc(headline5)),
+    headline-6: $headline-6 or _rem-to-px(typography-config-level-from-mdc(headline6)),
+    subtitle-1: $subtitle-1 or _rem-to-px(typography-config-level-from-mdc(subtitle1)),
+    subtitle-2: $subtitle-2 or _rem-to-px(typography-config-level-from-mdc(subtitle2)),
+    body-1: $body-1 or _rem-to-px(typography-config-level-from-mdc(body1)),
+    body-2: $body-2 or _rem-to-px(typography-config-level-from-mdc(body2)),
+    caption: $caption or _rem-to-px(typography-config-level-from-mdc(caption)),
+    button: $button or _rem-to-px(typography-config-level-from-mdc(button)),
+    overline: $overline or _rem-to-px(typography-config-level-from-mdc(overline)),
+  ));
+}
+
+/// Generates an Angular Material typography config based on values from the official Material
+/// Design spec implementation (MDC Web). All arguments are optional, but may be passed to override
+/// the default values. The `mat-typography-level` function can be used to generate a custom
+/// typography level map which can be passed to this function to override one of the default levels.
+/// All default typography sizing generated by this function is in `rem` units.
+///
+/// @param {String} $font-family The font family to use for levels where it is not explicitly
+///     specified.
+/// @param {Map} $headline-1 The font settings for the headline-1 font level.
+/// @param {Map} $headline-2 The font settings for the headline-2 font level.
+/// @param {Map} $headline-3 The font settings for the headline-3 font level.
+/// @param {Map} $headline-4 The font settings for the headline-4 font level.
+/// @param {Map} $headline-5 The font settings for the headline-5 font level.
+/// @param {Map} $headline-6 The font settings for the headline-6 font level.
+/// @param {Map} $subtitle-1 The font settings for the subtitle-1 font level.
+/// @param {Map} $subtitle-2 The font settings for the subtitle-2 font level.
+/// @param {Map} $body-1 The font settings for the body-1 font level.
+/// @param {Map} $body-2 The font settings for the body-2 font level.
+/// @param {Map} $caption The font settings for the caption font level.
+/// @param {Map} $button The font settings for the button font level.
+/// @param {Map} $overline The font settings for the overline font level.
+/// @return {Map} A map containing font settings for each of the levels in the Material Design spec.
+@function define-rem-typography-config(
+  // TODO(mmalerba): rename this function to define-typography-config,
+  //  and create a predefined px based config for people that need it.
+  $font-family: mdc-typography.$font-family,
+  $headline-1: null,
+  $headline-2: null,
+  $headline-3: null,
+  $headline-4: null,
+  $headline-5: null,
+  $headline-6: null,
+  $subtitle-1: null,
+  $subtitle-2: null,
+  $body-1: null,
+  $body-2: null,
+  $caption: null,
+  $button: null,
+  $overline: null,
+) {
+  @return _apply-font-family($font-family, (
+    headline-1: $headline-1 or typography-config-level-from-mdc(headline1),
+    headline-2: $headline-2 or typography-config-level-from-mdc(headline2),
+    headline-3: $headline-3 or typography-config-level-from-mdc(headline3),
+    headline-4: $headline-4 or typography-config-level-from-mdc(headline4),
+    headline-5: $headline-5 or typography-config-level-from-mdc(headline5),
+    headline-6: $headline-6 or typography-config-level-from-mdc(headline6),
+    subtitle-1: $subtitle-1 or typography-config-level-from-mdc(subtitle1),
+    subtitle-2: $subtitle-2 or typography-config-level-from-mdc(subtitle2),
+    body-1: $body-1 or typography-config-level-from-mdc(body1),
+    body-2: $body-2 or typography-config-level-from-mdc(body2),
+    caption: $caption or typography-config-level-from-mdc(caption),
+    button: $button or typography-config-level-from-mdc(button),
+    overline: $overline or typography-config-level-from-mdc(overline),
+  ));
+}
+
 // 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;
@@ -121,18 +282,19 @@
   }
   @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),
+        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 {
@@ -155,21 +317,27 @@
   }
   @if 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),
-
-      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),define-typography-level(12px, 32px, 500))
+        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-famiy: 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),
+            define-typography-level(12px, 32px, 500)
+        )
     );
   }
   @return $config;
@@ -232,7 +400,7 @@
   #{$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),
@@ -246,7 +414,7 @@
   #{$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),
@@ -315,8 +483,7 @@
 /// @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.
+/// @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));
@@ -371,7 +538,7 @@
   #{$selector} .mat-h5,
   #{$selector} h5 {
     @include typography-utils.font-shorthand(
-
+       
       calc(#{typography-utils.font-size($config, body-1)} * .83),
       typography-utils.font-weight($config, body-1),
       typography-utils.line-height($config, body-1),
@@ -385,7 +552,7 @@
   #{$selector} .mat-h6,
   #{$selector} h6 {
     @include typography-utils.font-shorthand(
-
+       
       calc(#{typography-utils.font-size($config, body-1)} * .67),
       typography-utils.font-weight($config, body-1),
       typography-utils.line-height($config, body-1),

package/datetimepicker/_datetimepicker-theme.scss

@@ -1,209 +1,54 @@
 @use 'sass:map';
 @use '../core/theming/theming';
-@use '../core/theming/palette';
-@use '../core/style/private';
 @use '../core/typography/typography';
-@use '../core/typography/typography-utils';
+@use '../core/style/sass-utils';
+@use '../core/tokens/token-utils';
+@use '../core/tokens/m2/mtx/datetimepicker' as tokens-mtx-datetimepicker;
 
-$selected-today-box-shadow-width: 1px;
-$calendar-body-font-size: 13px !default;
-$calendar-weekday-table-font-size: 11px !default;
-$clock-font-size: 14px !default;
+@mixin _calendar-color($config, $palette) {
+  $palette-color: theming.get-color-from-palette(map.get($config, $palette));
+  $calendar-tokens: tokens-mtx-datetimepicker.private-get-calendar-color-palette-color-tokens($config, $palette);
+
+  @include token-utils.create-token-values(tokens-mtx-datetimepicker.$prefix, $calendar-tokens);
+}
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
-  $is-dark-theme: map.get($config, is-dark);
-  $primary: map.get($config, primary);
-  $accent: map.get($config, accent);
-  $warn: map.get($config, warn);
-  $background: map.get($config, background);
-  $foreground: map.get($config, foreground);
-  $disabled-color: theming.get-color-from-palette($foreground, disabled-text);
-
-  .mtx-datetimepicker-content {
-    background-color: theming.get-color-from-palette($background, card);
-    color: theming.get-color-from-palette($foreground, text);
-
-    @include private.private-theme-elevation(8, $config);
-  }
-
-  .mtx-calendar-header {
-    background-color: theming.get-color-from-palette($primary);
-    color: white;
-  }
-
-  .mtx-calendar-body-label {
-    color: theming.get-color-from-palette($foreground, secondary-text);
-  }
-
-  .mtx-calendar-table-header {
-    color: theming.get-color-from-palette($foreground, hint-text);
-  }
-
-  .mtx-calendar-body-cell-content {
-    color: theming.get-color-from-palette($foreground, text);
-
-    &.mtx-calendar-body-selected {
-      background-color: theming.get-color-from-palette($primary);
-      color: white;
-
-      &.mtx-calendar-body-today {
-        box-shadow:
-          inset 0 0 0 $selected-today-box-shadow-width
-          theming.get-color-from-palette($primary, default-contrast);
-      }
-    }
-
-    &:not(.mtx-calendar-body-selected) {
-      &.mtx-calendar-body-today {
-        border-color: theming.get-color-from-palette($foreground, hint-text);
-      }
-    }
-  }
-
-  .mtx-calendar-body-cell:not(.mtx-calendar-body-disabled):hover,
-  .mtx-calendar-body-active {
-    & > .mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected) {
-      background-color: theming.get-color-from-palette($primary, .3);
-    }
-  }
-
-  .mtx-calendar-body-disabled {
-    > .mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected) {
-      color: $disabled-color;
-    }
-
-    > .mtx-calendar-body-today:not(.mtx-calendar-body-selected) {
-      border-color: $disabled-color;
-    }
-
-    > .mtx-calendar-body-selected {
-      background-color: theming.get-color-from-palette($primary, .4);
-    }
-  }
-
-  .mtx-calendar-previous-button,
-  .mtx-calendar-next-button {
-    &.disabled {
-      color: $disabled-color;
-    }
-  }
-
-  .mtx-clock-wrapper {
-    background-color: theming.get-color-from-palette($foreground, divider);
-  }
-
-  .mtx-clock-center {
-    background-color: theming.get-color-from-palette($primary);
-  }
 
-  .mtx-clock-hand {
-    background-color: theming.get-color-from-palette($primary);
-
-    &::before {
-      background-color: theming.get-color-from-palette($primary);
-    }
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mtx-datetimepicker.$prefix,
+      tokens-mtx-datetimepicker.get-color-tokens($config));
   }
 
-  .mtx-clock-cell {
-    color: theming.get-color-from-palette($foreground, text);
-
-    &.mtx-clock-cell-selected {
-      background-color: theming.get-color-from-palette($primary);
-      color: white;
-    }
-
-    &:not(.mtx-clock-cell-selected, .mtx-clock-cell-disabled):hover {
-      background-color: theming.get-color-from-palette($background, hover);
+  .mtx-datetimepicker-content {
+    &.mat-accent {
+      @include _calendar-color($config, accent);
     }
 
-    &.mtx-clock-cell-disabled {
-      color: $disabled-color;
+    &.mat-warn {
+      @include _calendar-color($config, warn);
     }
   }
 
   .mtx-datetimepicker-toggle-active {
-    color: theming.get-color-from-palette($primary);
-
     &.mat-accent {
-      color: theming.get-color-from-palette($accent);
+      $accent-tokens: tokens-mtx-datetimepicker.private-get-toggle-color-palette-color-tokens($config, accent);
+      @include token-utils.create-token-values(tokens-mtx-datetimepicker.$prefix, $accent-tokens);
     }
 
     &.mat-warn {
-      color: theming.get-color-from-palette($warn);
-    }
-  }
-
-  .mtx-time-input {
-    color: theming.get-color-from-palette($foreground, text);
-    background-color: theming.get-color-from-palette($background, disabled-button);
-
-    &.mtx-time-input-active {
-      color: theming.get-color-from-palette($primary);
-      background-color: theming.get-color-from-palette($primary, .2);
-
-      &:focus {
-        border-color: theming.get-color-from-palette($primary);
-        background-color: theming.get-color-from-palette($background, background);
-
-        &::placeholder {
-          color: theming.get-color-from-palette($primary, .6);
-        }
-      }
-    }
-
-    &.mtx-time-input-warning {
-      border-color: theming.get-color-from-palette($warn);
-    }
-  }
-
-  .mtx-time-ampm {
-    .mtx-time-am,
-    .mtx-time-pm {
-      --mdc-text-button-label-text-color: #{theming.get-color-from-palette($foreground, text, .75)};
-
-      border-color: theming.get-color-from-palette($foreground, hint-text);
-
-      &.mtx-time-ampm-active {
-        --mdc-text-button-label-text-color: #{theming.get-color-from-palette($foreground, text)};
-        --mdc-typography-button-font-weight: 500;
-
-        background-color: theming.get-color-from-palette($accent, .2);
-      }
+      $warn-tokens: tokens-mtx-datetimepicker.private-get-toggle-color-palette-color-tokens($config, warn);
+      @include token-utils.create-token-values(tokens-mtx-datetimepicker.$prefix, $warn-tokens);
     }
   }
 }
 
 @mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2014-config(
-    theming.get-typography-config($config-or-theme)
-  );
-
-  .mtx-calendar {
-    font-family: typography-utils.font-family($config);
-  }
-
-  .mtx-calendar-body {
-    font-size: $calendar-body-font-size;
-  }
+  $config: typography.private-typography-to-2014-config(theming.get-typography-config($config-or-theme));
 
-  .mtx-calendar-body-label,
-  .mtx-calendar-period-button {
-    font: {
-      size: typography-utils.font-size($config, button);
-      weight: typography-utils.font-weight($config, button);
-    }
-  }
-
-  .mtx-calendar-table-header th {
-    font: {
-      size: $calendar-weekday-table-font-size;
-      weight: typography-utils.font-weight($config, body-1);
-    }
-  }
-
-  .mtx-clock {
-    font-size: $clock-font-size;
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mtx-datetimepicker.$prefix,
+      tokens-mtx-datetimepicker.get-typography-tokens($config));
   }
 }
 
@@ -211,18 +56,21 @@ $clock-font-size: 14px !default;
 
 @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: theming.get-typography-config($theme);
 
-    @if $color != null {
+    @if $color !=null {
       @include color($color);
     }
-    @if $density != null {
+
+    @if $density !=null {
       @include density($density);
     }
-    @if $typography != null {
+
+    @if $typography !=null {
       @include typography($typography);
     }
   }

package/datetimepicker/calendar-body.scss

@@ -1,5 +1,6 @@
 @use 'sass:math';
-@use '../core/style/private';
+@use '../core/tokens/token-utils';
+@use '../core/tokens/m2/mtx/datetimepicker' as tokens-mtx-datetimepicker;
 
 $calendar-body-label-padding-start: 5% !default;
 $calendar-body-label-side-padding: math.div(33%, 7) !default;
@@ -13,16 +14,48 @@ $calendar-body-cell-radius: 999px !default;
 $calendar-body-min-size: 7 * $calendar-body-cell-min-size !default;
 $calendar-body-cell-content-size: 100% - $calendar-body-cell-content-margin * 2 !default;
 
+$_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token-slots();
+
+// Styles for a highlighted calendar cell (e.g. hovered or focused).
+@mixin _highlighted-cell($token-name) {
+  &>.mtx-calendar-body-cell-content {
+    @include _unselected-cell {
+      @include token-utils.create-token-slot(background-color, $token-name);
+    }
+  }
+}
+
+// Utility mixin to target cells that aren't selected. Used to make selector easier to follow.
+@mixin _unselected-cell {
+  &:not(.mtx-calendar-body-selected) {
+    @content;
+  }
+}
+
 .mtx-calendar-body {
   min-width: $calendar-body-min-size;
 }
 
+.mtx-calendar-body-today {
+  @include _unselected-cell {
+    @include token-utils.use-tokens($_tokens...) {
+      @include token-utils.create-token-slot(border-color, calendar-date-today-outline-color);
+    }
+  }
+}
+
 .mtx-calendar-body-label {
   height: 0;
   line-height: 0;
   text-align: left;
   padding: $calendar-body-cell-padding $calendar-body-label-side-padding;
 
+  @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(font-size, calendar-body-label-text-size);
+    @include token-utils.create-token-slot(font-weight, calendar-body-label-text-weight);
+    @include token-utils.create-token-slot(color, calendar-body-label-text-color);
+  }
+
   [dir='rtl'] & {
     text-align: right;
   }
@@ -42,6 +75,16 @@ $calendar-body-cell-content-size: 100% - $calendar-body-cell-content-margin * 2
 .mtx-calendar-body-disabled {
   cursor: default;
   pointer-events: none;
+
+  @include token-utils.use-tokens($_tokens...) {
+    >.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected) {
+      @include token-utils.create-token-slot(color, calendar-date-disabled-state-text-color);
+    }
+
+    >.mtx-calendar-body-today:not(.mtx-calendar-body-selected) {
+      @include token-utils.create-token-slot(border-color, calendar-date-disabled-state-text-color);
+    }
+  }
 }
 
 .mtx-calendar-body-cell-content {
@@ -56,4 +99,41 @@ $calendar-body-cell-content-size: 100% - $calendar-body-cell-content-margin * 2
   height: $calendar-body-cell-content-size;
   border: $calendar-body-cell-content-border-width solid transparent;
   border-radius: $calendar-body-cell-radius;
+
+  @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(color, calendar-date-text-color);
+    @include token-utils.create-token-slot(border-color, calendar-date-outline-color);
+  }
+}
+
+// TODO: cdk-keyboard-focused, cdk-program-focused
+.mtx-calendar-body-active {
+  @include token-utils.use-tokens($_tokens...) {
+    @include _highlighted-cell(calendar-date-focus-state-background-color);
+  }
+}
+
+@media (hover: hover) {
+  .mtx-calendar-body-cell:not(.mtx-calendar-body-disabled):hover {
+    @include token-utils.use-tokens($_tokens...) {
+      @include _highlighted-cell(calendar-date-hover-state-background-color);
+    }
+  }
+}
+
+.mtx-calendar-body-selected {
+  @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(background-color, calendar-date-selected-state-background-color);
+    @include token-utils.create-token-slot(color, calendar-date-selected-state-text-color);
+
+    .mtx-calendar-body-disabled>& {
+      @include token-utils.create-token-slot(background-color, calendar-date-selected-disabled-state-background-color);
+    }
+
+    &.mtx-calendar-body-today {
+      $shadow: token-utils.get-token-variable(calendar-date-today-selected-state-outline-color);
+
+      box-shadow: inset 0 0 0 1px var(#{$shadow});
+    }
+  }
 }