@ng-matero/extensions 16.3.2 → 17.1.0

package/core/color/_all-color.scss

@@ -1,28 +1,17 @@
-@use '../theming/theming';
+@use '@angular/material' as mat;
 @use '../theming/all-theme';
 
 // Includes all of the color styles.
-@mixin all-component-colors($config-or-theme) {
-  // In case a theme object has been passed instead of a configuration for
-  // the color system, extract the color config from the theme object.
-  $config: if(
-    theming.private-is-theme-object($config-or-theme),
-    theming.get-color-config($config-or-theme),
-    $config-or-theme
-  );
-
-  @if $config == null {
+@mixin all-component-colors($theme) {
+  @if not mat.theme-has($theme, color) {
     @error 'No color configuration specified.';
   }
 
-  @include all-theme.all-component-themes((
-    color: $config,
-    typography: null,
-    density: null,
-  ));
+  @include all-theme.all-component-themes(
+      mat.theme-remove($theme, base, typography, density));
 }
 
 // @deprecated Use `all-component-colors`.
-@mixin material-extensions-color($config-or-theme) {
-  @include all-component-colors($config-or-theme);
+@mixin material-extensions-color($theme) {
+  @include all-component-colors($theme);
 }

package/core/datetime/datetime.module.d.ts

@@ -1,3 +1,5 @@
+import { Provider } from '@angular/core';
+import { MtxDatetimeFormats } from './datetime-formats';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/material/core";
 export declare class NativeDatetimeModule {
@@ -5,8 +7,9 @@ export declare class NativeDatetimeModule {
     static ɵmod: i0.ɵɵNgModuleDeclaration<NativeDatetimeModule, never, [typeof i1.NativeDateModule], never>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NativeDatetimeModule>;
 }
+export declare function provideNativeDatetimeAdapter(formats?: MtxDatetimeFormats): Provider[];
 export declare class MtxNativeDatetimeModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxNativeDatetimeModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxNativeDatetimeModule, never, [typeof NativeDatetimeModule, typeof i1.MatNativeDateModule], never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxNativeDatetimeModule, never, never, never>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MtxNativeDatetimeModule>;
 }

package/core/density/_all-density.scss

@@ -1,4 +1,4 @@
-@use '../theming/theming';
+@use '@angular/material' as mat;
 @use '../../alert/alert-theme';
 @use '../../button/button-theme';
 @use '../../colorpicker/colorpicker-theme';
@@ -13,34 +13,26 @@
 @use '../../tooltip/tooltip-theme';
 
 // Includes all of the density styles.
-@mixin all-component-densities($config-or-theme) {
-  // In case a theme object has been passed instead of a configuration for
-  // the color system, extract the color config from the theme object.
-  $config: if(
-    theming.private-is-theme-object($config-or-theme),
-    theming.get-color-config($config-or-theme),
-    $config-or-theme
-  );
-
-  @if $config == null {
+@mixin all-component-densities($theme) {
+  @if not mat.theme-has($theme, density) {
     @error 'No density configuration specified.';
   }
 
-  @include alert-theme.density($config);
-  @include button-theme.density($config);
-  @include colorpicker-theme.density($config);
-  @include datetimepicker-theme.density($config);
-  @include drawer-theme.density($config);
-  @include grid-theme.density($config);
-  @include loader-theme.density($config);
-  @include popover-theme.density($config);
-  @include progress-theme.density($config);
-  @include select-theme.density($config);
-  @include split-theme.density($config);
-  @include tooltip-theme.density($config);
+  @include alert-theme.density($theme);
+  @include button-theme.density($theme);
+  @include colorpicker-theme.density($theme);
+  @include datetimepicker-theme.density($theme);
+  @include drawer-theme.density($theme);
+  @include grid-theme.density($theme);
+  @include loader-theme.density($theme);
+  @include popover-theme.density($theme);
+  @include progress-theme.density($theme);
+  @include select-theme.density($theme);
+  @include split-theme.density($theme);
+  @include tooltip-theme.density($theme);
 }
 
 // @deprecated Use `all-component-densities`.
-@mixin material-extensions-density($config-or-theme) {
-  @include all-component-densities($config-or-theme);
+@mixin material-extensions-density($theme) {
+  @include all-component-densities($theme);
 }

package/core/pipes/is-template-ref.pipe.d.ts

@@ -3,5 +3,5 @@ import * as i0 from "@angular/core";
 export declare class MtxIsTemplateRefPipe implements PipeTransform {
     transform(obj: any): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxIsTemplateRefPipe, never>;
-    static ɵpipe: i0.ɵɵPipeDeclaration<MtxIsTemplateRefPipe, "isTemplateRef", false>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<MtxIsTemplateRefPipe, "isTemplateRef", true>;
 }

package/core/pipes/pipes.module.d.ts

@@ -1,9 +1,9 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./to-observable.pipe";
-import * as i2 from "./is-template-ref.pipe";
-import * as i3 from "@angular/common";
+import * as i1 from "@angular/common";
+import * as i2 from "./to-observable.pipe";
+import * as i3 from "./is-template-ref.pipe";
 export declare class MtxPipesModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxPipesModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxPipesModule, [typeof i1.MtxToObservablePipe, typeof i2.MtxIsTemplateRefPipe], [typeof i3.CommonModule], [typeof i1.MtxToObservablePipe, typeof i2.MtxIsTemplateRefPipe]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxPipesModule, never, [typeof i1.CommonModule, typeof i2.MtxToObservablePipe, typeof i3.MtxIsTemplateRefPipe], [typeof i2.MtxToObservablePipe, typeof i3.MtxIsTemplateRefPipe]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MtxPipesModule>;
 }

package/core/pipes/to-observable.pipe.d.ts

@@ -4,5 +4,5 @@ import * as i0 from "@angular/core";
 export declare class MtxToObservablePipe implements PipeTransform {
     transform(value: Observable<any> | unknown): Observable<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxToObservablePipe, never>;
-    static ɵpipe: i0.ɵɵPipeDeclaration<MtxToObservablePipe, "toObservable", false>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<MtxToObservablePipe, "toObservable", true>;
 }

package/core/style/_sass-utils.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @use 'sass:map';
 @use 'sass:meta';
 
@@ -9,9 +10,14 @@
 /// @content Content to output under the current selector, or root selector if there is no current
 ///     selector.
 @mixin current-selector-or-root($root: html) {
-  @at-root #{& or $root} {
+  @if & {
     @content;
   }
+  @else {
+    #{$root} {
+      @content;
+    }
+  }
 }
 
 /// A version of the standard `map.merge` function that takes a variable number of arguments.
@@ -47,3 +53,9 @@
 @function coerce-to-list($value) {
   @return if(meta.type-of($value) != 'list', ($value,), $value);
 }
+
+/// A version of the Sass `color.change` function that is safe ot use with CSS variables.
+@function safe-color-change($color, $args...) {
+  $args: meta.keywords($args);
+  @return if(meta.type-of($color) == 'color', color.change($color, $args...), $color);
+}

package/core/theming/_all-theme.scss

@@ -1,4 +1,5 @@
 // Import all the theming functionality.
+@use '@angular/material' as mat;
 @use '../../alert/alert-theme';
 @use '../../button/button-theme';
 @use '../../colorpicker/colorpicker-theme';
@@ -11,28 +12,42 @@
 @use '../../select/select-theme';
 @use '../../split/split-theme';
 @use '../../tooltip/tooltip-theme';
-@use './theming';
 
 // Create a theme.
-@mixin all-component-themes($theme-or-color-config) {
+@mixin all-component-themes($theme) {
   $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 button-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 split-theme.theme($theme-or-color-config);
-    @include tooltip-theme.theme($theme-or-color-config);
+  @include mat.private-check-duplicate-theme-styles($theme, $dedupe-key) {
+    @include alert-theme.theme($theme);
+    @include button-theme.theme($theme);
+    @include colorpicker-theme.theme($theme);
+    @include datetimepicker-theme.theme($theme);
+    @include drawer-theme.theme($theme);
+    @include grid-theme.theme($theme);
+    @include loader-theme.theme($theme);
+    @include popover-theme.theme($theme);
+    @include progress-theme.theme($theme);
+    @include select-theme.theme($theme);
+    @include split-theme.theme($theme);
+    @include tooltip-theme.theme($theme);
   }
 }
 
+@mixin all-component-bases($theme) {
+  @include alert-theme.base($theme);
+  @include button-theme.base($theme);
+  @include colorpicker-theme.base($theme);
+  @include datetimepicker-theme.base($theme);
+  @include drawer-theme.base($theme);
+  @include grid-theme.base($theme);
+  @include loader-theme.base($theme);
+  @include popover-theme.base($theme);
+  @include progress-theme.base($theme);
+  @include select-theme.base($theme);
+  @include split-theme.base($theme);
+  @include tooltip-theme.base($theme);
+}
+
 // @deprecated Use `all-component-themes`.
-@mixin material-extensions-theme($theme-or-color-config) {
-  @include all-component-themes($theme-or-color-config);
+@mixin material-extensions-theme($theme) {
+  @include all-component-themes($theme);
 }

package/core/tokens/_token-utils.scss

@@ -3,11 +3,10 @@
 @use '@material/theme/custom-properties' as mdc-custom-properties;
 @use '@material/theme/theme' as mdc-theme;
 @use '@material/theme/keys' as mdc-keys;
-@use '../theming/palette';
-@use '../theming/theming';
+@use '@angular/material' as mat;
 @use '../typography/typography';
 
-$_placeholder-color-palette: theming.define-palette(palette.$red-palette);
+$_placeholder-color-palette: mat.define-palette(mat.$red-palette);
 
 // Placeholder color config that can be passed to token getter functions when generating token
 // slots.
@@ -16,8 +15,8 @@ $placeholder-color-config: (
   accent: $_placeholder-color-palette,
   warn: $_placeholder-color-palette,
   is-dark: false,
-  foreground: palette.$light-theme-foreground-palette,
-  background: palette.$light-theme-background-palette,
+  foreground: mat.$light-theme-foreground-palette,
+  background: mat.$light-theme-background-palette,
 );
 
 $_placeholder-typography-level-config: typography.typography-config-level-from-mdc(body1);

package/core/tokens/m2/mdc/_plain-tooltip.scss

@@ -1,7 +1,4 @@
-@use 'sass:map';
-@use '../../../theming/theming';
-@use '../../../typography/typography-utils';
-@use '../../../mdc-helpers/mdc-helpers';
+@use '@angular/material' as mat;
 @use '../../../style/sass-utils';
 @use '../../token-utils';
 
@@ -15,7 +12,8 @@ $prefix: (mdc, plain-tooltip);
 // `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
 // our CSS.
 @function get-unthemable-tokens() {
-  @return ( // Border radius for the tooltip container.
+  @return (
+    // Border radius for the tooltip container.
     container-shape: 4px,
     // Line height of the tooltip text.
     supporting-text-line-height: 16px,
@@ -25,48 +23,42 @@ $prefix: (mdc, plain-tooltip);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $background: map.get($config, background);
+@function get-color-tokens($theme) {
 
-  @return ( // Color of the tooltip container.
-    container-color: theming.get-color-from-palette($background, tooltip),
+  @return (
+    // Color of the tooltip container.
+    container-color: mat.get-theme-color($theme, background, tooltip),
     // Color of the tooltip text.
     supporting-text-color: #fff,
   );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
-
-  // TODO(amysorto): The earlier implementation of the tooltip used MDC's APIs to create the
-  // typography tokens. As a result, we unintentionally allowed `null` typography configs to be
-  // passed in. Since there a lot of apps that now depend on this pattern, we need this temporary
-  // fallback.
-  @if ($config ==null) {
-    $config: mdc-helpers.private-fallback-typography-from-mdc();
-  }
-
-  @return ( // Font for the tooltip text.
-    supporting-text-font: typography-utils.font-family($config, caption) or typography-utils.font-family($config),
+@function get-typography-tokens($theme) {
+  @return (
+    // Font for the tooltip text.
+    supporting-text-font: mat.get-theme-typography($theme, caption, font-family),
     // Font size for the tooltip text.
-    supporting-text-size: typography-utils.font-size($config, caption),
+    supporting-text-size: mat.get-theme-typography($theme, caption, font-size),
     // Font weight of the tooltip text.
-    supporting-text-weight: typography-utils.font-weight($config, caption),
+    supporting-text-weight: mat.get-theme-typography($theme, caption, font-weight),
     // Tracking (space between letters) of the tooltip text.
-    supporting-text-tracking: typography-utils.letter-spacing($config, caption),
+    supporting-text-tracking: mat.get-theme-typography($theme, caption, letter-spacing),
   );
 }
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($config) {
+@function get-density-tokens($theme) {
   @return ();
 }
 
 // Combines the tokens generated by the above functions into a single map with placeholder values.
 // This is used to create token slots.
 @function get-token-slots() {
-  @return sass-utils.deep-merge-all(get-unthemable-tokens(),
-    get-color-tokens(token-utils.$placeholder-color-config),
-    get-typography-tokens(token-utils.$placeholder-typography-config),
-    get-density-tokens(token-utils.$placeholder-density-config));
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
 }

package/core/tokens/m2/mtx/_alert.scss

@@ -1,8 +1,7 @@
 @use 'sass:map';
+@use '@angular/material' as mat;
 @use '../../token-utils';
-@use '../../../theming/theming';
 @use '../../../style/sass-utils';
-@use '../../../theming/palette';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mtx, alert);
@@ -10,36 +9,36 @@ $prefix: (mtx, alert);
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
-  @return ();
+  @return (
+    container-shape: 4px,
+  );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $foreground: map.get($config, foreground);
-  $background: map.get($config, background);
-  $is-dark-theme: map.get($config, is-dark);
+@function get-color-tokens($theme) {
+  $is-dark: mat.get-theme-type($theme) == dark;
 
   @return (
-    background-color: theming.get-color-from-palette($background, dialog),
-    text-color: theming.get-color-from-palette($foreground, text),
-    info-background-color: theming.get-color-from-palette(palette.$blue-palette, if($is-dark-theme, 900, 500)),
+    background-color: mat.get-theme-color($theme, background, dialog),
+    text-color: mat.get-theme-color($theme, foreground, text),
+    info-background-color: mat.get-color-from-palette(mat.$blue-palette, if($is-dark, 900, 500)),
     info-text-color: white,
-    success-background-color: theming.get-color-from-palette(palette.$green-palette, if($is-dark-theme, 900, 500)),
+    success-background-color: mat.get-color-from-palette(mat.$green-palette, if($is-dark, 900, 500)),
     success-text-color: white,
-    warning-background-color: theming.get-color-from-palette(palette.$orange-palette, if($is-dark-theme, 900, 500)),
+    warning-background-color: mat.get-color-from-palette(mat.$orange-palette, if($is-dark, 900, 500)),
     warning-text-color: white,
-    danger-background-color: theming.get-color-from-palette(palette.$red-palette, if($is-dark-theme, 900, 500)),
+    danger-background-color: mat.get-color-from-palette(mat.$red-palette, if($is-dark, 900, 500)),
     danger-text-color: white,
   );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
+@function get-typography-tokens($theme) {
   @return ();
 }
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($config) {
+@function get-density-tokens($theme) {
   @return ();
 }
 

package/core/tokens/m2/mtx/_colorpicker.scss

@@ -1,18 +1,16 @@
 @use 'sass:color';
 @use 'sass:map';
 @use 'sass:meta';
+@use '@angular/material' as mat;
 @use '../../token-utils';
-@use '../../../theming/theming';
 @use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mtx, colorpicker);
 
-@function private-get-toggle-color-palette-color-tokens($config, $palette-name) {
-  $palette: map.get($config, $palette-name);
-
+@function private-get-toggle-color-palette-color-tokens($theme, $palette-name) {
   @return (
-    toggle-active-state-icon-color: theming.get-color-from-palette($palette, text),
+    toggle-active-state-icon-color: mat.get-theme-color($theme, $palette-name, text),
   );
 }
 
@@ -23,10 +21,9 @@ $prefix: (mtx, colorpicker);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $foreground: map.get($config, foreground);
-  $inactive-icon-color: theming.get-color-from-palette($foreground, icon);
-  $toggle-tokens: private-get-toggle-color-palette-color-tokens($config, primary);
+@function get-color-tokens($theme) {
+  $inactive-icon-color: mat.get-theme-color($theme, foreground, icon);
+  $toggle-tokens: private-get-toggle-color-palette-color-tokens($theme, primary);
 
   @return sass-utils.merge-all($toggle-tokens, (
     toggle-icon-color: $inactive-icon-color
@@ -34,12 +31,12 @@ $prefix: (mtx, colorpicker);
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
+@function get-typography-tokens($theme) {
   @return ();
 }
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($config) {
+@function get-density-tokens($theme) {
   @return ();
 }
 

package/core/tokens/m2/mtx/_datetimepicker.scss

@@ -1,10 +1,9 @@
 @use 'sass:color';
 @use 'sass:map';
 @use 'sass:meta';
+@use '@angular/material' as mat;
 @use '../../token-utils';
-@use '../../../theming/theming';
 @use '../../../style/sass-utils';
-@use '../../../typography/typography-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mtx, datetimepicker);
@@ -12,20 +11,17 @@ $prefix: (mtx, datetimepicker);
 $_selected-fade-amount: .6;
 $_today-fade-amount: .2;
 
-@function private-get-calendar-color-palette-color-tokens($config, $palette-name) {
-  $foreground: map.get($config, foreground);
-  $background: map.get($config, background);
-  $palette: map.get($config, $palette-name);
-  $palette-color: theming.get-color-from-palette($palette);
-  $default-contrast: theming.get-color-from-palette($palette, default-contrast);
-  $active-background-color: theming.get-color-from-palette($palette, .3);
+@function private-get-calendar-color-palette-color-tokens($theme, $palette-name) {
+  $palette-color: mat.get-theme-color($theme, $palette-name);
+  $default-contrast: mat.get-theme-color($theme, $palette-name, default-contrast);
+  $active-background-color: sass-utils.safe-color-change($palette-color, $alpha: .3);
   $active-disabled-color: null;
 
   @if (meta.type-of($palette-color) == color) {
     $active-disabled-color: color.adjust($palette-color, $alpha: -$_selected-fade-amount);
   }
   @else {
-    $active-disabled-color: theming.get-color-from-palette($foreground, disabled-button);
+    $active-disabled-color: mat.get-theme-color($theme, foreground, disabled-button);
   }
 
   @return (
@@ -42,45 +38,40 @@ $_today-fade-amount: .2;
     clock-cell-selected-state-background-color: $palette-color,
 
     time-input-active-state-text-color: $palette-color,
-    time-input-active-state-background-color: theming.get-color-from-palette($palette, .2),
+    time-input-active-state-background-color: sass-utils.safe-color-change($palette-color, $alpha: .2),
     time-input-focus-state-border-color: $palette-color,
-    time-input-focus-state-placeholder-text-color: theming.get-color-from-palette($palette, .6),
+    time-input-focus-state-placeholder-text-color: sass-utils.safe-color-change($palette-color, $alpha: .6),
   );
 }
 
-@function private-get-toggle-color-palette-color-tokens($config, $palette-name) {
-  $palette: map.get($config, $palette-name);
-
+@function private-get-toggle-color-palette-color-tokens($theme, $palette-name) {
   @return (
-    toggle-active-state-icon-color: theming.get-color-from-palette($palette, text),
+    toggle-active-state-icon-color: mat.get-theme-color($theme, $palette-name, text),
   );
 }
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
-  @return ();
+  @return (
+    container-shape: 4px,
+  );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $foreground: map.get($config, foreground);
-  $background: map.get($config, background);
-  $primary: map.get($config, primary);
-  $accent: map.get($config, accent);
-  $warn: map.get($config, warn);
-  $inactive-icon-color: theming.get-color-from-palette($foreground, icon);
-  $text-color: theming.get-color-from-palette($foreground, text);
-  $secondary-text-color: theming.get-color-from-palette($foreground, secondary-text);
-  $disabled-text-color: theming.get-color-from-palette($foreground, disabled-text);
-  $divider-color: theming.get-color-from-palette($foreground, divider);
-  $hint-text-color: theming.get-color-from-palette($foreground, hint-text);
+@function get-color-tokens($theme) {
+  $inactive-icon-color: mat.get-theme-color($theme, foreground, icon);
+  $text-color: mat.get-theme-color($theme, foreground, text);
+  $secondary-text-color: mat.get-theme-color($theme, foreground, secondary-text);
+  $disabled-text-color: mat.get-theme-color($theme, foreground, disabled-text);
+  $divider-color: mat.get-theme-color($theme, foreground, divider);
+  $hint-text-color: mat.get-theme-color($theme, foreground, hint-text);
   $preview-outline-color: $divider-color;
   $today-disabled-outline-color: null;
 
-  $primary-color: theming.get-color-from-palette(map.get($config, primary));
-  $calendar-tokens: private-get-calendar-color-palette-color-tokens($config, primary);
-  $toggle-tokens: private-get-toggle-color-palette-color-tokens($config, primary);
+  $primary-color: mat.get-theme-color($theme, primary);
+  $calendar-tokens: private-get-calendar-color-palette-color-tokens($theme, primary);
+  $toggle-tokens: private-get-toggle-color-palette-color-tokens($theme, primary);
 
   @return sass-utils.merge-all($calendar-tokens, $toggle-tokens, (
     toggle-icon-color: $inactive-icon-color,
@@ -100,46 +91,46 @@ $_today-fade-amount: .2;
     calendar-date-disabled-state-text-color: $disabled-text-color,
     // calendar-date-preview-state-outline-color: $preview-outline-color,
 
-    calendar-container-background-color: theming.get-color-from-palette($background, card),
+    calendar-container-background-color: mat.get-theme-color($theme, background, card),
     calendar-container-text-color: $text-color,
 
     clock-dial-background-color: $divider-color,
     clock-cell-text-color: $text-color,
-    clock-cell-hover-state-background-color: theming.get-color-from-palette($background, hover),
+    clock-cell-hover-state-background-color: mat.get-theme-color($theme, background, hover),
     clock-cell-disabled-state-text-color: $disabled-text-color,
 
     time-input-text-color: $text-color,
     time-input-background-color: $divider-color,
-    time-input-focus-state-background-color: theming.get-color-from-palette($background, background),
-    time-input-warn-state-border-color: theming.get-color-from-palette($warn),
-    time-ampm-text-color: theming.get-color-from-palette($foreground, text, .75),
+    time-input-focus-state-background-color: mat.get-theme-color($theme, background, background),
+    time-input-warn-state-border-color: mat.get-theme-color($theme, warn),
+    time-ampm-text-color: sass-utils.safe-color-change($text-color, $alpha: .75),
     time-ampm-border-color: $hint-text-color,
-    time-ampm-selected-state-text-color: theming.get-color-from-palette($foreground, text),
-    time-ampm-selected-state-background-color: theming.get-color-from-palette($accent, .2),
+    time-ampm-selected-state-text-color: $text-color,
+    time-ampm-selected-state-background-color: mat.get-theme-color($theme, accent, .2),
   ));
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
+@function get-typography-tokens($theme) {
   @return (
-    calendar-text-font: typography-utils.font-family($config),
+    calendar-text-font: mat.get-theme-typography($theme, body-1, font-family),
     calendar-text-size: 13px,
 
-    calendar-body-label-text-size: typography-utils.font-size($config, button),
-    calendar-body-label-text-weight: typography-utils.font-weight($config, button),
+    calendar-body-label-text-size: mat.get-theme-typography($theme, button, font-size),
+    calendar-body-label-text-weight: mat.get-theme-typography($theme, button, font-weight),
 
-    calendar-period-button-text-size: typography-utils.font-size($config, button),
-    calendar-period-button-text-weight: typography-utils.font-weight($config, button),
+    calendar-period-button-text-size: mat.get-theme-typography($theme, button, font-size),
+    calendar-period-button-text-weight: mat.get-theme-typography($theme, button, font-weight),
 
     calendar-table-header-text-size: 11px,
-    calendar-table-header-text-weight: typography-utils.font-weight($config, body-1),
+    calendar-table-header-text-weight: mat.get-theme-typography($theme, body-1, font-weight),
 
     clock-text-size: 14px,
   );
 }
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($config) {
+@function get-density-tokens($theme) {
   @return ();
 }