@ng-matero/extensions 19.4.0 → 20.0.0

package/datetimepicker/calendar-body.scss

@@ -1,9 +1,10 @@
 @use 'sass:math';
 @use '@angular/cdk';
-
 @use '../core/style/button-common';
 @use '../core/tokens/token-utils';
-@use '../core/tokens/m2/mtx/datetimepicker' as tokens-mtx-datetimepicker;
+@use './m3-datetimepicker';
+
+$fallbacks: m3-datetimepicker.get-tokens();
 
 $calendar-body-label-padding-start: 5% !default;
 // We don't want the label to jump around when we switch between month and year views, so we use
@@ -21,13 +22,11 @@ $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 {
+  & > .mtx-calendar-body-cell-content {
     @include _unselected-cell {
-      @include token-utils.create-token-slot(background-color, $token-name);
+      background-color: token-utils.slot($token-name, $fallbacks);
     }
   }
 }
@@ -45,9 +44,7 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
 
 .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);
-    }
+    border-color: token-utils.slot(datetimepicker-calendar-date-today-outline-color, $fallbacks);
   }
 }
 
@@ -57,12 +54,9 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
   text-align: left;
   padding-left: $calendar-body-label-side-padding;
   padding-right: $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);
-  }
+  font-size: token-utils.slot(datetimepicker-calendar-body-label-text-size, $fallbacks);
+  font-weight: token-utils.slot(datetimepicker-calendar-body-label-text-weight, $fallbacks);
+  color: token-utils.slot(datetimepicker-calendar-body-label-text-color, $fallbacks);
 
   [dir='rtl'] & {
     text-align: right;
@@ -73,10 +67,7 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
   height: 0;
   line-height: 0;
   font-weight: 400;
-
-  @include token-utils.use-tokens($_tokens...) {
-    @include token-utils.create-token-slot(color, calendar-body-week-number-text-color);
-  }
+  color: token-utils.slot(datetimepicker-calendar-body-week-number-text-color, $fallbacks);
 }
 
 .mtx-calendar-body-cell-container {
@@ -94,14 +85,10 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
   background: none;
   text-align: center;
   outline: none;
-  font-family: inherit;
   margin: 0;
-
   // Needs to be repeated here in order to override the user agent styles.
-  @include token-utils.use-tokens($_tokens...) {
-    @include token-utils.create-token-slot(font-family, calendar-text-font);
-    @include token-utils.create-token-slot(font-size, calendar-text-size);
-  }
+  font-family: token-utils.slot(datetimepicker-calendar-text-font, $fallbacks);
+  font-size: token-utils.slot(datetimepicker-calendar-text-size, $fallbacks);
 
   @include button-common.reset();
 }
@@ -110,14 +97,12 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
   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-cell-content:not(.mtx-calendar-body-selected) {
+    color: token-utils.slot(datetimepicker-calendar-date-disabled-state-text-color, $fallbacks);
+  }
 
-    >.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-today:not(.mtx-calendar-body-selected) {
+    border-color: token-utils.slot(datetimepicker-calendar-date-disabled-state-text-color, $fallbacks);
   }
 
   // Fade out the disabled cells so that they can be distinguished from the enabled ones. Note that
@@ -146,11 +131,8 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
 
   // Choosing a value clearly larger than the height ensures we get the correct capsule shape.
   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);
-  }
+  color: token-utils.slot(datetimepicker-calendar-date-text-color, $fallbacks);
+  border-color: token-utils.slot(datetimepicker-calendar-date-outline-color, $fallbacks);
 
   // Increase specificity because focus indicator styles are part of the `mat-core` mixin and can
   // potentially overwrite the absolute position of the container.
@@ -164,35 +146,28 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
 }
 
 .mtx-calendar-body-active {
-  @include token-utils.use-tokens($_tokens...) {
-    .cdk-keyboard-focused &,
-    .cdk-program-focused & {
-      @include _highlighted-cell(calendar-date-focus-state-background-color);
-    }
+  .cdk-keyboard-focused &,
+  .cdk-program-focused & {
+    @include _highlighted-cell(datetimepicker-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);
-    }
+    @include _highlighted-cell(datetimepicker-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);
-    }
+  background-color: token-utils.slot(datetimepicker-calendar-date-selected-state-background-color, $fallbacks);
+  color: token-utils.slot(datetimepicker-calendar-date-selected-state-text-color, $fallbacks);
 
-    &.mtx-calendar-body-today {
-      $shadow-color: token-utils.get-token-variable(calendar-date-today-selected-state-outline-color);
+  .mtx-calendar-body-disabled > & {
+    background-color: token-utils.slot(datetimepicker-calendar-date-selected-disabled-state-background-color, $fallbacks);
+  }
 
-      box-shadow: inset 0 0 0 1px #{$shadow-color};
-    }
+  &.mtx-calendar-body-today {
+    box-shadow: inset 0 0 0 1px
+      token-utils.slot(datetimepicker-calendar-date-today-selected-state-outline-color, $fallbacks);
   }
 }

package/datetimepicker/calendar.scss

@@ -1,5 +1,7 @@
 @use '../core/tokens/token-utils';
-@use '../core/tokens/m2/mtx/datetimepicker' as tokens-mtx-datetimepicker;
+@use './m3-datetimepicker';
+
+$fallbacks: m3-datetimepicker.get-tokens();
 
 $calendar-padding: 8px !default;
 
@@ -17,7 +19,8 @@ $calendar-next-icon-transform: translateX(-2px) rotate(45deg);
 
 $landscape-calendar-header-width: 144px;
 
-$_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token-slots();
+$panel-corner: token-utils.slot(datetimepicker-container-shape, $fallbacks);
+$panel-divider: token-utils.slot(datetimepicker-calendar-header-divider-color, $fallbacks);
 
 @mixin landscape-calendar-header {
   .mtx-calendar {
@@ -28,32 +31,18 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
       min-width: $landscape-calendar-header-width;
       padding: 16px 8px;
       border-bottom-width: 0;
+      border-radius: $panel-corner 0 0 $panel-corner;
+      border-right: 1px solid $panel-divider;
 
-      @include token-utils.use-tokens($_tokens...) {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-
-        $border-color: token-utils.get-token-variable(calendar-header-divider-color);
-
-        border-right: 1px solid $border-color;
-
-        @include token-utils.create-token-slot(border-top-left-radius, container-shape);
-        @include token-utils.create-token-slot(border-bottom-left-radius, container-shape);
-
-        [dir='rtl'] & {
-          border-top-left-radius: 0;
-          border-bottom-left-radius: 0;
-          border-right-width: 0;
-          border-left: 1px solid $border-color;
-
-          @include token-utils.create-token-slot(border-top-right-radius, container-shape);
-          @include token-utils.create-token-slot(border-bottom-right-radius, container-shape);
-        }
+      [dir='rtl'] & {
+        border-radius: 0 $panel-corner $panel-corner 0;
+        border-right-width: 0;
+        border-left: 1px solid $panel-divider;
       }
     }
 
-    .mtx-calendar-header-year+.mtx-calendar-header-date-time,
-    .mtx-calendar-header-date+.mtx-calendar-header-time {
+    .mtx-calendar-header-year + .mtx-calendar-header-date-time,
+    .mtx-calendar-header-date + .mtx-calendar-header-time {
       margin-top: 4px;
     }
 
@@ -81,7 +70,7 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
     .mtx-calendar-header-ampm {
       padding: 4px;
 
-      +.mtx-calendar-header-ampm {
+      + .mtx-calendar-header-ampm {
         margin: 0 8px;
       }
     }
@@ -102,24 +91,17 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
     width: $landscape-calendar-header-width;
     height: 100%;
     content: '';
+    border-right: 1px solid $panel-divider;
+    background-color: token-utils.slot(datetimepicker-calendar-header-background-color, $fallbacks);
+    border-bottom-left-radius: $panel-corner;
 
-    @include token-utils.use-tokens($_tokens...) {
-      $border-color: token-utils.get-token-variable(calendar-header-divider-color);
-
-      border-right: 1px solid $border-color;
-
-      @include token-utils.create-token-slot(background-color, calendar-header-background-color);
-      @include token-utils.create-token-slot(border-bottom-left-radius, container-shape);
-
-      [dir='rtl'] & {
-        left: auto;
-        right: 0;
-        border-right-width: 0;
-        border-left: 1px solid $border-color;
-        border-bottom-left-radius: 0;
-
-        @include token-utils.create-token-slot(border-bottom-right-radius, container-shape);
-      }
+    [dir='rtl'] & {
+      left: auto;
+      right: 0;
+      border-right-width: 0;
+      border-left: 1px solid $panel-divider;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: $panel-corner;
     }
   }
 }
@@ -127,29 +109,20 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
 .mtx-calendar {
   display: block;
   outline: none;
-
-  @include token-utils.use-tokens($_tokens...) {
-    @include token-utils.create-token-slot(font-family, calendar-text-font);
-    @include token-utils.create-token-slot(font-size, calendar-text-size);
-  }
+  font-family: token-utils.slot(datetimepicker-calendar-text-font, $fallbacks);
+  font-size: token-utils.slot(datetimepicker-calendar-text-size, $fallbacks);
 }
 
 .mtx-calendar-header {
+  --mat-button-text-container-shape: #{token-utils.slot(datetimepicker-selector-container-shape, $fallbacks)};
+
   box-sizing: border-box;
   padding: 8px;
-
-  @include token-utils.use-tokens($_tokens...) {
-    $border-color: token-utils.get-token-variable(calendar-header-divider-color);
-
-    border-bottom: 1px solid $border-color;
-
-    @include token-utils.create-token-slot(border-top-left-radius, container-shape);
-    @include token-utils.create-token-slot(border-top-right-radius, container-shape);
-    @include token-utils.create-token-slot(background-color, calendar-header-background-color);
-    @include token-utils.create-token-slot(color, calendar-header-text-color);
-
-    @include token-utils.create-token-slot(--mdc-text-button-container-shape, selector-container-shape);
-  }
+  border-bottom: 1px solid $panel-divider;
+  border-top-left-radius: $panel-corner;
+  border-top-right-radius: $panel-corner;
+  background-color: token-utils.slot(datetimepicker-calendar-header-background-color, $fallbacks);
+  color: token-utils.slot(datetimepicker-calendar-header-text-color, $fallbacks);
 
   .mtx-calendar-header-year,
   .mtx-calendar-header-date,
@@ -166,7 +139,7 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
     font-weight: inherit;
     letter-spacing: normal;
     white-space: normal;
-    word-break: break-word;
+    overflow-wrap: anywhere;
 
     .mat-mdc-button-touch-target {
       height: 100%;
@@ -189,7 +162,7 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
 .mtx-calendar-header-minutes,
 .mtx-calendar-header-ampm {
   &:not(.active) {
-    opacity: .6;
+    opacity: 0.6;
   }
 
   &.not-clickable {
@@ -201,7 +174,7 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
   display: inline-flex;
 
   &:not(.active) {
-    opacity: .6;
+    opacity: 0.6;
 
     .mtx-calendar-header-hours,
     .mtx-calendar-header-minutes,
@@ -251,7 +224,7 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
   margin: 0 $calendar-controls-side-margin;
 
   .mat-icon-button:hover .mat-button-focus-overlay {
-    opacity: .04;
+    opacity: 0.04;
   }
 }
 
@@ -263,21 +236,15 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
   border: 0;
   background: transparent;
   box-sizing: border-box;
-
-  @include token-utils.use-tokens($_tokens...) {
-    @include token-utils.create-token-slot(font-size, calendar-period-button-text-size);
-    @include token-utils.create-token-slot(font-weight, calendar-period-button-text-weight);
-  }
+  font-size: token-utils.slot(datetimepicker-calendar-period-button-text-size, $fallbacks);
+  font-weight: token-utils.slot(datetimepicker-calendar-period-button-text-weight, $fallbacks);
 }
 
 .mtx-calendar-previous-button,
 .mtx-calendar-next-button {
   &.disabled {
     pointer-events: none;
-
-    @include token-utils.use-tokens($_tokens...) {
-      @include token-utils.create-token-slot(color, calendar-date-disabled-state-text-color);
-    }
+    color: token-utils.slot(datetimepicker-calendar-date-disabled-state-text-color, $fallbacks);
   }
 
   svg {
@@ -299,10 +266,7 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
 .mtx-calendar-table-header th {
   text-align: center;
   padding: $calendar-padding 0;
-
-  @include token-utils.use-tokens($_tokens...) {
-    @include token-utils.create-token-slot(color, calendar-table-header-text-color);
-    @include token-utils.create-token-slot(font-size, calendar-table-header-text-size);
-    @include token-utils.create-token-slot(font-weight, calendar-table-header-text-weight);
-  }
+  color: token-utils.slot(datetimepicker-calendar-table-header-text-color, $fallbacks);
+  font-size: token-utils.slot(datetimepicker-calendar-table-header-text-size, $fallbacks);
+  font-weight: token-utils.slot(datetimepicker-calendar-table-header-text-weight, $fallbacks);
 }

package/datetimepicker/clock.scss

@@ -1,12 +1,12 @@
 @use '../core/tokens/token-utils';
-@use '../core/tokens/m2/mtx/datetimepicker' as tokens-mtx-datetimepicker;
+@use './m3-datetimepicker';
+
+$fallbacks: m3-datetimepicker.get-tokens();
 
 $clock-min-size: 224px !default;
 $clock-margin: 12px !default;
 $clock-cell-size: 14.1666% !default;
 
-$_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token-slots();
-
 .mtx-clock {
   position: relative;
   display: block;
@@ -15,10 +15,7 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
   box-sizing: border-box;
   user-select: none;
   touch-action: none;
-
-  @include token-utils.use-tokens($_tokens...) {
-    @include token-utils.create-token-slot(font-size, clock-text-size);
-  }
+  font-size: token-utils.slot(datetimepicker-clock-text-size, $fallbacks);
 }
 
 .mtx-clock-wrapper {
@@ -27,10 +24,7 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
   height: 0;
   padding-top: 100%;
   border-radius: 50%;
-
-  @include token-utils.use-tokens($_tokens...) {
-    @include token-utils.create-token-slot(background-color, clock-dial-background-color);
-  }
+  background-color: token-utils.slot(datetimepicker-clock-dial-background-color, $fallbacks);
 }
 
 .mtx-clock-center {
@@ -41,10 +35,7 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
   height: 3%;
   margin: -1.5%;
   border-radius: 50%;
-
-  @include token-utils.use-tokens($_tokens...) {
-    @include token-utils.create-token-slot(background-color, clock-hand-background-color);
-  }
+  background-color: token-utils.slot(datetimepicker-clock-hand-background-color, $fallbacks);
 }
 
 .mtx-clock-hand {
@@ -53,23 +44,18 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
   width: 2px;
   margin: 0 auto;
   transform-origin: bottom;
-
-  @include token-utils.use-tokens($_tokens...) {
-    @include token-utils.create-token-slot(background-color, clock-hand-background-color);
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: -4px;
-      left: -3px; // 8px - 2px / 2
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-
-      @include token-utils.create-token-slot(background-color, clock-hand-background-color);
-    }
+  background-color: token-utils.slot(datetimepicker-clock-hand-background-color, $fallbacks);
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: -4px;
+    left: -3px; // 8px - 2px / 2
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: token-utils.slot(datetimepicker-clock-hand-background-color, $fallbacks);
   }
-
 }
 
 .mtx-clock-hours,
@@ -105,24 +91,19 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
   border-radius: 50%;
   align-items: center;
   cursor: pointer;
+  color: token-utils.slot(datetimepicker-clock-cell-text-color, $fallbacks);
 
-  @include token-utils.use-tokens($_tokens...) {
-    @include token-utils.create-token-slot(color, clock-cell-text-color);
-
-    &.mtx-clock-cell-selected {
-      color: white;
-
-      @include token-utils.create-token-slot(background-color, clock-hand-background-color);
-    }
-
-    &:not(.mtx-clock-cell-selected, .mtx-clock-cell-disabled):hover {
-      @include token-utils.create-token-slot(background-color, clock-cell-hover-state-background-color);
-    }
+  &.mtx-clock-cell-selected {
+    color: white;
+    background-color: token-utils.slot(datetimepicker-clock-hand-background-color, $fallbacks);
+  }
 
-    &.mtx-clock-cell-disabled {
-      pointer-events: none;
+  &:not(.mtx-clock-cell-selected, .mtx-clock-cell-disabled):hover {
+    background-color: token-utils.slot(datetimepicker-clock-cell-hover-state-background-color, $fallbacks);
+  }
 
-      @include token-utils.create-token-slot(color, clock-cell-disabled-state-text-color);
-    }
+  &.mtx-clock-cell-disabled {
+    pointer-events: none;
+    color: token-utils.slot(datetimepicker-clock-cell-disabled-state-text-color, $fallbacks);
   }
 }

package/datetimepicker/datetimepicker-content.scss

@@ -1,7 +1,9 @@
 /* stylelint-disable keyframes-name-pattern */
 @use '@angular/material' as mat;
 @use '../core/tokens/token-utils';
-@use '../core/tokens/m2/mtx/datetimepicker' as tokens-mtx-datetimepicker;
+@use './m3-datetimepicker';
+
+$fallbacks: m3-datetimepicker.get-tokens();
 
 $calendar-padding: 8px;
 $non-touch-calendar-cell-size: 40px;
@@ -84,14 +86,10 @@ $touch-max-height: 850px;
 
 .mtx-datetimepicker-content {
   display: block;
-
-  @include token-utils.use-tokens(tokens-mtx-datetimepicker.$prefix,
-    tokens-mtx-datetimepicker.get-token-slots()) {
-    @include token-utils.create-token-slot(border-radius, container-shape);
-    @include token-utils.create-token-slot(background-color, container-background-color);
-    @include token-utils.create-token-slot(box-shadow, container-elevation-shadow);
-    @include token-utils.create-token-slot(color, container-text-color);
-  }
+  border-radius: token-utils.slot(datetimepicker-container-shape, $fallbacks);
+  background-color: token-utils.slot(datetimepicker-container-background-color, $fallbacks);
+  box-shadow: token-utils.slot(datetimepicker-container-elevation-shadow, $fallbacks);
+  color: token-utils.slot(datetimepicker-container-text-color, $fallbacks);
 
   &.mtx-datetimepicker-content-animations-enabled {
     animation: _mtx-datetimepicker-content-dropdown-enter 120ms cubic-bezier(0, 0, 0.2, 1);
@@ -147,12 +145,8 @@ $touch-max-height: 850px;
 .mtx-datetimepicker-content-touch {
   display: block;
   max-height: 84vh;
-
-  @include token-utils.use-tokens(tokens-mtx-datetimepicker.$prefix,
-    tokens-mtx-datetimepicker.get-token-slots()) {
-    @include token-utils.create-token-slot(box-shadow, container-touch-elevation-shadow);
-    @include token-utils.create-token-slot(border-radius, container-touch-shape);
-  }
+  box-shadow: token-utils.slot(datetimepicker-container-touch-elevation-shadow, $fallbacks);
+  border-radius: token-utils.slot(datetimepicker-container-touch-shape, $fallbacks);
 
   // Allows for the screen reader close button to be seen in touch UI mode.
   position: relative;

package/datetimepicker/datetimepicker-toggle.scss

@@ -1,23 +1,18 @@
 @use '@angular/cdk';
 @use '../core/tokens/token-utils';
-@use '../core/tokens/m2/mtx/datetimepicker' as tokens-mtx-datetimepicker;
+@use './m3-datetimepicker';
 
-$_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token-slots();
+$fallbacks: m3-datetimepicker.get-tokens();
 
 // We support the case where the form field is disabled, but the datetimepicker is not.
 // MDC sets `pointer-events: none` on disabled form fields which prevents clicks on the toggle.
 .mtx-datetimepicker-toggle {
   pointer-events: auto;
-
-  @include token-utils.use-tokens($_tokens...) {
-    @include token-utils.create-token-slot(color, toggle-icon-color);
-  }
+  color: token-utils.slot(datetimepicker-toggle-icon-color, $fallbacks);
 }
 
 .mtx-datetimepicker-toggle-active {
-  @include token-utils.use-tokens($_tokens...) {
-    @include token-utils.create-token-slot(color, toggle-active-state-icon-color);
-  }
+  color: token-utils.slot(datetimepicker-toggle-active-state-icon-color, $fallbacks);
 }
 
 @include cdk.high-contrast(active, off) {