@ng-matero/extensions 17.1.4 → 17.2.1

package/_index.scss

@@ -23,6 +23,8 @@ split-color, split-typography, split-density, split-base;
 @forward './tooltip/tooltip-theme' as tooltip-* show tooltip-theme,
 tooltip-color, tooltip-typography, tooltip-density, tooltip-base;
 
+@forward './core/tokens/m2' show m2-tokens-from-theme;
+
 @forward './core/theming/all-theme' show all-component-themes, all-component-bases;
 @forward './core/color/all-color' show all-component-colors;
 @forward './core/typography/all-typography' show all-component-typographies;

package/alert/_alert-theme.scss

@@ -1,11 +1,14 @@
+@use 'sass:map';
 @use '@angular/material' as mat;
 @use '../core/style/sass-utils';
+@use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mtx/alert' as tokens-mtx-alert;
 
 @mixin base($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(mat.get-theme-tokens($theme, base));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   }
   @else {
     @include sass-utils.current-selector-or-root() {
@@ -17,7 +20,7 @@
 
 @mixin color($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(mat.get-theme-tokens($theme, color));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   }
   @else {
     @include sass-utils.current-selector-or-root() {
@@ -29,14 +32,14 @@
 
 @mixin typography($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(mat.get-theme-tokens($theme, typography));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   }
   @else {}
 }
 
 @mixin density($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(mat.get-theme-tokens($theme, density));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   }
   @else {}
 }
@@ -44,7 +47,7 @@
 @mixin theme($theme) {
   @include mat.private-check-duplicate-theme-styles($theme, 'mtx-alert') {
     @if mat.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(mat.get-theme-tokens($theme));
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
     }
     @else {
       @include base($theme);
@@ -62,6 +65,8 @@
 }
 
 @mixin _theme-from-tokens($tokens) {
+  @include validation.selector-defined(
+    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   @if ($tokens != ()) {
     @include token-utils.create-token-values(tokens-mtx-alert.$prefix,
       map.get($tokens, tokens-mtx-alert.$prefix));

package/alert/alert.scss

@@ -6,9 +6,12 @@
   display: block;
   padding: 12px 20px;
   margin-bottom: 16px;
-  border: 1px solid transparent;
 
   @include token-utils.use-tokens(tokens-mtx-alert.$prefix, tokens-mtx-alert.get-token-slots()) {
+    $border-color: token-utils.get-token-variable(outline-color);
+
+    border: 1px solid var($border-color);
+
     @include token-utils.create-token-slot(border-radius, container-shape);
     @include token-utils.create-token-slot(background-color, background-color);
     @include token-utils.create-token-slot(color, text-color);

package/colorpicker/_colorpicker-theme.scss

@@ -2,12 +2,14 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 @use '../core/style/sass-utils';
+@use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mtx/colorpicker' as tokens-mtx-colorpicker;
 
 @mixin base($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(mat.get-theme-tokens($theme, base));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   }
   @else {
     @include sass-utils.current-selector-or-root() {
@@ -19,7 +21,7 @@
 
 @mixin color($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(mat.get-theme-tokens($theme, color));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   }
   @else {
     @include sass-utils.current-selector-or-root() {
@@ -43,14 +45,14 @@
 
 @mixin typography($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(mat.get-theme-tokens($theme, typography));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   }
   @else {}
 }
 
 @mixin density($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(mat.get-theme-tokens($theme, density));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   }
   @else {}
 }
@@ -58,7 +60,7 @@
 @mixin theme($theme) {
   @include mat.private-check-duplicate-theme-styles($theme, 'mtx-colorpicker') {
     @if mat.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(mat.get-theme-tokens($theme));
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
     }
     @else {
       @include base($theme);
@@ -76,6 +78,8 @@
 }
 
 @mixin _theme-from-tokens($tokens) {
+  @include validation.selector-defined(
+    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   @if ($tokens != ()) {
     @include token-utils.create-token-values(tokens-mtx-colorpicker.$prefix,
       map.get($tokens, tokens-mtx-colorpicker.$prefix));

package/colorpicker/colorpicker.d.ts

@@ -1,7 +1,7 @@
 import { Directionality } from '@angular/cdk/bidi';
 import { Overlay, ScrollStrategy } from '@angular/cdk/overlay';
-import { ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, NgZone, OnChanges, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core';
-import { CanColor, ThemePalette } from '@angular/material/core';
+import { ChangeDetectorRef, EventEmitter, InjectionToken, NgZone, OnChanges, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core';
+import { ThemePalette } from '@angular/material/core';
 import { Subject } from 'rxjs';
 import { ColorEvent } from 'ngx-color';
 import { ColorFormat, MtxColorpickerInput } from './colorpicker-input';
@@ -18,20 +18,15 @@ export declare const MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER: {
     deps: (typeof Overlay)[];
     useFactory: typeof MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY;
 };
-/** @docs-private */
-declare const _MtxColorpickerContentBase: import("@angular/material/core")._Constructor<CanColor> & import("@angular/material/core")._AbstractConstructor<CanColor> & {
-    new (_elementRef: ElementRef): {
-        _elementRef: ElementRef;
-    };
-};
-export declare class MtxColorpickerContent extends _MtxColorpickerContentBase implements OnDestroy, CanColor {
+export declare class MtxColorpickerContent implements OnDestroy {
     private _changeDetectorRef;
+    color: ThemePalette;
     picker: MtxColorpicker;
     /** Current state of the animation. */
     _animationState: 'enter-dropdown' | 'void';
     /** Emits when an animation has finished. */
     readonly _animationDone: Subject<void>;
-    constructor(elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef);
+    constructor(_changeDetectorRef: ChangeDetectorRef);
     _startExitAnimation(): void;
     ngOnDestroy(): void;
     getColorString(e: ColorEvent): string;
@@ -129,4 +124,3 @@ export declare class MtxColorpicker implements OnChanges, OnDestroy {
     static ngAcceptInputType_restoreFocus: unknown;
     static ngAcceptInputType_opened: unknown;
 }
-export {};

package/core/style/_sass-utils.scss

@@ -1,4 +1,5 @@
 @use 'sass:color';
+@use 'sass:list';
 @use 'sass:map';
 @use 'sass:meta';
 
@@ -59,3 +60,21 @@
   $args: meta.keywords($args);
   @return if(meta.type-of($color) == 'color', color.change($color, $args...), $color);
 }
+
+/// Gets the given arguments as a map of keywords and validates that only supported arguments were
+/// passed.
+/// @param {ArgList} $args The arguments to convert to a keywords map.
+/// @param {List} $supported-args The supported argument names.
+/// @return {Map} The $args as a map of argument name to argument value.
+@function validate-keyword-args($args, $supported-args) {
+  @if list.length($args) > 0 {
+    @error #{'Expected keyword args, but got positional args: '}#{$args};
+  }
+  $kwargs: meta.keywords($args);
+  @each $arg, $v in $kwargs {
+    @if list.index($supported-args, $arg) == null {
+      @error #{'Unsupported argument '}#{$arg}#{'. Valid arguments are: '}#{$supported-args};
+    }
+  }
+  @return $kwargs;
+}

package/core/theming/_inspection.scss

@@ -0,0 +1,38 @@
+@use 'sass:list';
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+$_internals: _mat-theming-internals-do-not-access;
+
+/// Validates that the given value is a versioned theme object.
+/// @param {Any} $theme The theme object to validate.
+/// @return {Boolean|Null} true if the theme has errors, else null.
+@function _validate-theme-object($theme) {
+  $err: mat.private-validate-type($theme, 'map') or
+        map.get($theme, $_internals, theme-version) == null;
+  @return if($err, true, null);
+}
+
+/// Gets the set of tokens from the given theme, limited to those affected by the requested theming
+/// systems.
+/// @param {Map} $theme The theme to get tokens from.
+/// @param {String...} $systems The theming systems to get tokens for. Valid values are: color,
+///   typography, density, base. If no systems are passed, all tokens will be returned.
+/// @return {Map} The requested tokens for the theme.
+@function get-theme-tokens($theme, $systems...) {
+  $systems: if(list.length($systems) == 0, (color, typography, density, base), $systems);
+  $err: _validate-theme-object($theme);
+  @if $err {
+    @error #{'Expected $theme to be an Angular Material theme object. Got:'} $theme;
+  }
+  $err: mat.private-validate-allowed-values($systems, color, typography, density, base);
+  @if $err {
+    @error #{'Expected $systems to contain valid system names (color, typography, density, or'}
+    #{'base). Got invalid system names:'} $err;
+  }
+  $result: ();
+  @each $system in $systems {
+    $result: map.deep-merge($result, map.get($theme, $_internals, '#{$system}-tokens') or ());
+  }
+  @return $result;
+}

package/core/theming/_validation.scss

@@ -0,0 +1,5 @@
+@mixin selector-defined($msg) {
+  @if #{&} == '' {
+    @error $msg;
+  }
+}

package/core/tokens/_token-utils.scss

@@ -1,11 +1,16 @@
+@use 'sass:list';
 @use 'sass:map';
 @use '@material/elevation/elevation-theme' as mdc-elevation-theme;
 @use '@material/theme/custom-properties' as mdc-custom-properties;
 @use '@material/theme/theme' as mdc-theme;
 @use '@material/theme/keys' as mdc-keys;
 @use '@angular/material' as mat;
+@use '../style/sass-utils';
 @use '../typography/typography';
 
+// Indicates whether we're building internally. Used for backwards compatibility.
+$private-is-internal-build: false;
+
 $_placeholder-color-palette: mat.define-palette(mat.$red-palette);
 
 // Placeholder color config that can be passed to token getter functions when generating token
@@ -107,6 +112,28 @@ $_component-prefix: null;
   @return mdc-custom-properties.create-varname('#{$_component-prefix}-#{$token}');
 }
 
+// TODO(crisbeto): should be able to replace the usages of `get-token-variable` with this.
+// Returns a `var()` reference to a specific token. Intended for declarations
+// where the token has to be referenced as a part of a larger expression.
+@function get-token-variable-reference($token, $emit-fallback: false) {
+  @if $_component-prefix == null or $_tokens == null {
+    @error '`get-token-variable-reference` must be used within `use-tokens`';
+  }
+  @if not map.has-key($_tokens, $token) {
+    @error 'Token #{$token} does not exist. Configured tokens are: #{map.keys($_tokens)}';
+  }
+
+  $var: get-token-variable($token);
+  $fallback: if($emit-fallback, map.get($_tokens, $token), null);
+
+  @if ($fallback != null) {
+    @return var($var, $fallback);
+  }
+  @else {
+    @return var($var);
+  }
+}
+
 @mixin create-token-values($prefix, $tokens) {
   @include _configure-token-prefix($prefix...) {
     @include mdc-keys.declare-custom-properties($tokens, $_component-prefix);
@@ -124,3 +151,116 @@ $_component-prefix: null;
     $shadow-color-token: null,
   ));
 }
+
+/// Checks whether a list starts wih a given prefix
+/// @param {List} $list The list value to check the prefix of.
+/// @param {List} $prefix The prefix to check.
+/// @return {Boolean} Whether the list starts with the prefix.
+@function _is-prefix($list, $prefix) {
+  @for $i from 1 through list.length($prefix) {
+    @if list.nth($list, $i) != list.nth($prefix, $i) {
+      @return false;
+    }
+  }
+  @return true;
+}
+
+/// Gets the supported color variants in the given token set for the given prefix.
+/// @param {Map} $tokens The full token map.
+/// @param {List} $prefix The component prefix to get color variants for.
+/// @return {List} The supported color variants.
+@function _supported-color-variants($tokens, $prefix) {
+  $result: ();
+  @each $namespace in map.keys($tokens) {
+    @if list.length($prefix) == list.length($namespace) - 1 and _is-prefix($namespace, $prefix) {
+      $result: list.append($result, list.nth($namespace, list.length($namespace)), comma);
+    }
+  }
+  @return $result;
+}
+
+/// Gets the token values for the given components prefix with the given options.
+/// @param {Map} $tokens The full token map.
+/// @param {List} $prefix The component prefix to get the token values for.
+/// @param {ArgList} Any additional options
+///   Currently the additional supported options are:
+//     - $color-variant - The color variant to use for the component
+//     - $emit-overrides-only - Whether to emit *only* the overrides for the
+//                              specific color variant, or all color styles. Defaults to false.
+/// @throws If given options are invalid
+/// @return {Map} The token values for the requested component.
+@function get-tokens-for($tokens, $prefix, $options...) {
+  $options: sass-utils.validate-keyword-args($options, (color-variant, emit-overrides-only));
+  @if $tokens == () {
+    @return ();
+  }
+  $values: map.get($tokens, $prefix);
+  $color-variant: map.get($options, color-variant);
+  $emit-overrides-only: map.get($options, emit-overrides-only);
+  @if $color-variant == null {
+    @return $values;
+  }
+  $overrides: map.get($tokens, list.append($prefix, $color-variant));
+  @if $overrides == null {
+    @error #{'Invalid color variant: '}#{$color-variant}#{'. Supported color variants are: '}#{
+      _supported-color-variants($tokens, $prefix)
+    }#{'.'};
+  }
+  @return if($emit-overrides-only, $overrides, map.merge($values, $overrides));
+}
+
+/// Emits new token values for the given tokens.
+/// Verifies that the tokens passed in are valid tokens.
+/// New token values are emitted under the current selector or root.
+@mixin batch-create-token-values(
+  $tokens: (),
+  $mat-prefix: '',
+  $mdc-prefix: '',
+  $mat-tokens: (),
+  $mdc-tokens: ()
+) {
+  $custom-mat-tokens: ();
+  $custom-mdc-tokens: ();
+
+  $mat-token-names: map.keys($mat-tokens);
+  $mdc-token-names: map.keys($mdc-tokens);
+  $valid-token-names: _get-valid-token-names($mat-tokens, $mdc-tokens);
+
+  @each $name, $value in $tokens {
+    $is-mat-token: list.index($mat-token-names, $name) != null;
+    $is-mdc-token: list.index($mdc-token-names, $name) != null;
+
+    @if ($is-mat-token) {
+      $custom-mat-tokens: map.set($custom-mat-tokens, $name, $value);
+    }
+
+    @if ($is-mdc-token) {
+      $custom-mdc-tokens: map.set($custom-mdc-tokens, $name, $value);
+    }
+
+    @if (list.index($valid-token-names, $name) == null) {
+      @error (
+        'Invalid token: "' + $name + '"'
+        'Valid tokens include: ' $valid-token-names
+      );
+    }
+  }
+
+  @include sass-utils.current-selector-or-root() {
+    @include create-token-values($mat-prefix, $custom-mat-tokens);
+    @include create-token-values($mdc-prefix, $custom-mdc-tokens);
+  }
+}
+
+/// Returns the union of token names whose values are not null.
+@function _get-valid-token-names($mat-tokens, $mdc-tokens) {
+  $mat-and-mdc-tokens: map.merge($mat-tokens, $mdc-tokens);
+
+  @each $name, $value in $mat-and-mdc-tokens {
+    @if ($value == null) {
+      $mat-and-mdc-tokens: map.remove($mat-and-mdc-tokens, $name);
+    }
+  }
+
+  @return map.keys($mat-and-mdc-tokens);
+}

package/core/tokens/m2/_index.scss

@@ -1,6 +1,17 @@
 @use 'sass:map';
 @use 'sass:meta';
+@use '@angular/material' as mat;
 @use '../../style/sass-utils';
+@use './mtx/alert' as tokens-mtx-alert;
+@use './mtx/colorpicker' as tokens-mtx-colorpicker;
+@use './mtx/datetimepicker' as tokens-mtx-datetimepicker;
+@use './mtx/drawer' as tokens-mtx-drawer;
+@use './mtx/grid' as tokens-mtx-grid;
+@use './mtx/loader' as tokens-mtx-loader;
+@use './mtx/popover' as tokens-mtx-popover;
+@use './mtx/progress' as tokens-mtx-progress;
+@use './mtx/select' as tokens-mtx-select;
+@use './mtx/split' as tokens-mtx-split;
 
 /// Gets the tokens for the given theme, m2 tokens module, and theming system.
 /// @param {Map} $theme The Angular Material theme object to generate token values from.
@@ -14,11 +25,11 @@
     @return meta.call(
         meta.get-function(get-#{$system}-tokens, $module: $module));
   }
-  @if not map.get($theme, $system) {
+  @if not mat.theme-has($theme, $system) {
     @return ();
   }
   @return meta.call(
-      meta.get-function(get-#{$system}-tokens, $module: $module), map.get($theme, $system));
+      meta.get-function(get-#{$system}-tokens, $module: $module), $theme);
 }
 
 /// Gets the fully qualified tokens map for the given theme and m2 tokens module.
@@ -45,5 +56,15 @@
 ///     )
 @function m2-tokens-from-theme($theme) {
   @return sass-utils.deep-merge-all(
+    _get-tokens-for-module($theme, tokens-mtx-alert),
+    _get-tokens-for-module($theme, tokens-mtx-colorpicker),
+    _get-tokens-for-module($theme, tokens-mtx-datetimepicker),
+    _get-tokens-for-module($theme, tokens-mtx-drawer),
+    _get-tokens-for-module($theme, tokens-mtx-grid),
+    _get-tokens-for-module($theme, tokens-mtx-loader),
+    _get-tokens-for-module($theme, tokens-mtx-popover),
+    _get-tokens-for-module($theme, tokens-mtx-progress),
+    _get-tokens-for-module($theme, tokens-mtx-select),
+    _get-tokens-for-module($theme, tokens-mtx-split),
   );
 }

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

@@ -19,6 +19,7 @@ $prefix: (mtx, alert);
   $is-dark: mat.get-theme-type($theme) == dark;
 
   @return (
+    outline-color: transparent,
     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)),

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

@@ -1,6 +1,7 @@
 @use 'sass:color';
 @use 'sass:map';
 @use 'sass:meta';
+@use '@material/elevation/elevation-theme' as mdc-elevation;
 @use '@angular/material' as mat;
 @use '../../token-utils';
 @use '../../../style/sass-utils';
@@ -39,7 +40,7 @@ $_today-fade-amount: .2;
 
     time-input-active-state-text-color: $palette-color,
     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-outline-color: $palette-color,
     time-input-focus-state-placeholder-text-color: sass-utils.safe-color-change($palette-color, $alpha: .6),
 
     time-ampm-selected-state-background-color: sass-utils.safe-color-change($palette-color, $alpha: .2),
@@ -56,7 +57,11 @@ $_today-fade-amount: .2;
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
   @return (
+    container-elevation-shadow: mdc-elevation.elevation-box-shadow(4),
+    container-touch-elevation-shadow: mdc-elevation.elevation-box-shadow(24),
     container-shape: 4px,
+    container-touch-shape: 4px,
+    selector-container-shape: 4px,
   );
 }
 
@@ -81,7 +86,7 @@ $_today-fade-amount: .2;
     // calendar-period-button-icon-color: $inactive-icon-color,
     // calendar-navigation-button-icon-color: $inactive-icon-color,
     calendar-header-text-color: white,
-    calendar-header-divider-color: $divider-color,
+    calendar-header-divider-color: transparent,
     calendar-table-header-text-color: $secondary-text-color,
 
     // Note: though it's not text, the border is a hint about the fact
@@ -93,8 +98,8 @@ $_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: mat.get-theme-color($theme, background, card),
-    calendar-container-text-color: $text-color,
+    container-background-color: mat.get-theme-color($theme, background, card),
+    container-text-color: $text-color,
 
     clock-dial-background-color: $divider-color,
     clock-cell-text-color: $text-color,
@@ -104,9 +109,9 @@ $_today-fade-amount: .2;
     time-input-text-color: $text-color,
     time-input-background-color: $divider-color,
     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-input-warn-state-outline-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-outline-color: $hint-text-color,
     time-ampm-selected-state-text-color: $text-color,
   ));
 }

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

@@ -27,8 +27,9 @@ $prefix: (mtx, grid);
     column-menu-divider-color: $divider-color,
     table-footer-background-color: mat.get-theme-color($theme, background, app-bar),
     table-row-striped-background-color: if($is-dark, #3a3a3a, #f5f5f5),
-    table-row-hover-background-color: if($is-dark, #2a2a2a, #e5e5e5),
-    table-row-selected-background-color: if($is-dark, #2a2a2a, #e5e5e5),
+    table-row-hover-background-color: if($is-dark, #2a2a2a, #eee),
+    table-row-selected-background-color: if($is-dark, #2a2a2a, #eee),
+    table-row-selected-hover-background-color: if($is-dark, #1a1a1a, #e0e0e0),
     table-cell-selected-outline-color: mat.get-theme-color($theme, accent),
     resizable-handle-active-background-color: mat.get-theme-color($theme, primary),
     resizable-handle-hover-background-color: mat.get-theme-color($theme, primary),

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

@@ -17,9 +17,9 @@ $prefix: (mtx, popover);
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
+    outline-color: mat.get-theme-color($theme, foreground, divider),
     background-color: mat.get-theme-color($theme, background, card),
     text-color: mat.get-theme-color($theme, foreground, text),
-    arrow-outline-color: mat.get-theme-color($theme, foreground, divider),
   );
 }
 

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

@@ -40,7 +40,7 @@ $prefix: (mtx, select);
     disabled-text-color: $hint-text-color,
 
     multiple-value-background-color: mat.get-theme-color($theme, background, unselected-chip),
-    multiple-value-border-color: $divider-color,
+    multiple-value-outline-color: $divider-color,
     multiple-value-icon-hover-background-color: $divider-color,
 
     clear-icon-color: $secondary-text-color,

package/datetimepicker/_datetimepicker-theme.scss

@@ -1,6 +1,8 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 @use '../core/style/sass-utils';
+@use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mtx/datetimepicker' as tokens-mtx-datetimepicker;
 
@@ -13,7 +15,7 @@
 
 @mixin base($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(mat.get-theme-tokens($theme, base));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   }
   @else {
     @include sass-utils.current-selector-or-root() {
@@ -23,9 +25,9 @@
   }
 }
 
-@mixin color($theme) {
+@mixin color($theme, $options...) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(mat.get-theme-tokens($theme, color));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   }
   @else {
     @include sass-utils.current-selector-or-root() {
@@ -59,7 +61,7 @@
 
 @mixin typography($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(mat.get-theme-tokens($theme, typography));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   }
   @else {
     @include sass-utils.current-selector-or-root() {
@@ -71,15 +73,15 @@
 
 @mixin density($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(mat.get-theme-tokens($theme, density));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   }
   @else {}
 }
 
-@mixin theme($theme) {
+@mixin theme($theme, $options...) {
   @include mat.private-check-duplicate-theme-styles($theme, 'mtx-datetimepicker') {
     @if mat.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(mat.get-theme-tokens($theme));
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
     }
     @else {
       @include base($theme);
@@ -96,9 +98,9 @@
   }
 }
 
-@mixin _theme-from-tokens($tokens) {
-  @if ($tokens != ()) {
-    @include token-utils.create-token-values(tokens-mtx-datetimepicker.$prefix,
-      map.get($tokens, tokens-mtx-datetimepicker.$prefix));
-  }
+@mixin _theme-from-tokens($tokens, $options...) {
+  @include validation.selector-defined(
+    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
+  $mtx-datetimepicker-tokens: token-utils.get-tokens-for($tokens, tokens-mtx-datetimepicker.$prefix, $options...);
+  @include token-utils.create-token-values(tokens-mtx-datetimepicker.$prefix, $mtx-datetimepicker-tokens);
 }