@ng-matero/extensions 18.1.0 → 18.1.2

package/checkbox-group/checkbox-group.d.ts

@@ -5,9 +5,9 @@ import { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';
 import { MtxCheckboxGroupOption } from './interfaces';
 import * as i0 from "@angular/core";
 export declare class MtxCheckboxBase {
-    label?: any | undefined;
-    value?: any | undefined;
-    constructor(label?: any | undefined, value?: any | undefined);
+    label?: any;
+    value?: any;
+    constructor(label?: any, value?: any);
 }
 export declare class MtxCheckboxGroup implements AfterViewInit, OnDestroy, ControlValueAccessor {
     private _changeDetectorRef;

package/core/m2/_typography.scss

@@ -0,0 +1,172 @@
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
+@use 'sass:string';
+
+$_default-font-family: string.unquote('Roboto, sans-serif');
+
+@function _px-to-rem($px) {
+  @return math.div($px, 16px) * 1rem;
+}
+
+@function _get-letter-spacing($tracking, $font-size) {
+  @return math.div($tracking, $font-size * 16) * 1em;
+}
+
+$_mdc-levels: (
+  headline1: (
+    font-family: $_default-font-family,
+    font-size: _px-to-rem(96px),
+    line-height: _px-to-rem(96px),
+    font-weight: 300,
+    letter-spacing: _get-letter-spacing(-1.5, 6),
+    text-decoration: inherit,
+    text-transform: inherit,
+  ),
+  headline2: (
+    font-family: $_default-font-family,
+    font-size: _px-to-rem(60px),
+    line-height: _px-to-rem(60px),
+    font-weight: 300,
+    letter-spacing: _get-letter-spacing(-0.5, 3.75),
+    text-decoration: inherit,
+    text-transform: inherit,
+  ),
+  headline3: (
+    font-family: $_default-font-family,
+    font-size: _px-to-rem(48px),
+    line-height: _px-to-rem(50px),
+    font-weight: 400,
+    letter-spacing: normal,
+    text-decoration: inherit,
+    text-transform: inherit,
+  ),
+  headline4: (
+    font-family: $_default-font-family,
+    font-size: _px-to-rem(34px),
+    line-height: _px-to-rem(40px),
+    font-weight: 400,
+    letter-spacing: _get-letter-spacing(0.25, 2.125),
+    text-decoration: inherit,
+    text-transform: inherit,
+  ),
+  headline5: (
+    font-family: $_default-font-family,
+    font-size: _px-to-rem(24px),
+    line-height: _px-to-rem(32px),
+    font-weight: 400,
+    letter-spacing: normal,
+    text-decoration: inherit,
+    text-transform: inherit,
+  ),
+  headline6: (
+    font-family: $_default-font-family,
+    font-size: _px-to-rem(20px),
+    line-height: _px-to-rem(32px),
+    font-weight: 500,
+    letter-spacing: _get-letter-spacing(0.25, 1.25),
+    text-decoration: inherit,
+    text-transform: inherit,
+  ),
+  subtitle1: (
+    font-family: $_default-font-family,
+    font-size: _px-to-rem(16px),
+    line-height: _px-to-rem(28px),
+    font-weight: 400,
+    letter-spacing: _get-letter-spacing(0.15, 1),
+    text-decoration: inherit,
+    text-transform: inherit,
+  ),
+  subtitle2: (
+    font-family: $_default-font-family,
+    font-size: _px-to-rem(14px),
+    line-height: _px-to-rem(22px),
+    font-weight: 500,
+    letter-spacing: _get-letter-spacing(0.1, 0.875),
+    text-decoration: inherit,
+    text-transform: inherit,
+  ),
+  body1: (
+    font-family: $_default-font-family,
+    font-size: _px-to-rem(16px),
+    line-height: _px-to-rem(24px),
+    font-weight: 400,
+    letter-spacing: _get-letter-spacing(0.5, 1),
+    text-decoration: inherit,
+    text-transform: inherit,
+  ),
+  body2: (
+    font-family: $_default-font-family,
+    font-size: _px-to-rem(14px),
+    line-height: _px-to-rem(20px),
+    font-weight: 400,
+    letter-spacing: _get-letter-spacing(0.25, 0.875),
+    text-decoration: inherit,
+    text-transform: inherit,
+  ),
+  caption: (
+    font-family: $_default-font-family,
+    font-size: _px-to-rem(12px),
+    line-height: _px-to-rem(20px),
+    font-weight: 400,
+    letter-spacing: _get-letter-spacing(0.4, 0.75),
+    text-decoration: inherit,
+    text-transform: inherit,
+  ),
+  button: (
+    font-family: $_default-font-family,
+    font-size: _px-to-rem(14px),
+    line-height: _px-to-rem(36px),
+    font-weight: 500,
+    letter-spacing: _get-letter-spacing(1.25, 0.875),
+    text-decoration: none,
+    text-transform: uppercase,
+  ),
+  overline: (
+    font-family: $_default-font-family,
+    font-size: _px-to-rem(12px),
+    line-height: _px-to-rem(32px),
+    font-weight: 500,
+    letter-spacing: _get-letter-spacing(2, 0.75),
+    text-decoration: none,
+    text-transform: uppercase,
+  ),
+);
+
+/// Defines a typography level from the Material Design spec.
+/// @param {String} $font-size The font-size for this level.
+/// @param {String | Number} $line-height The line-height for this level.
+/// @param {String | Number} $font-weight The font-weight for this level.
+/// @param {String} $font-family The font-family for this level.
+/// @param {String} $letter-spacing The letter-spacing for this level.
+/// @returns {Map} A map representing the definition of this typographic level.
+@function define-typography-level(
+  $font-size,
+  $line-height: $font-size,
+  $font-weight: 400,
+  $font-family: null,
+  $letter-spacing: normal) {
+
+  @return (
+    font-size: $font-size,
+    line-height: $line-height,
+    font-weight: $font-weight,
+    font-family: $font-family,
+    letter-spacing: $letter-spacing
+  );
+}
+
+// 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-levels, $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)
+  );
+}

package/core/style/_elevation.scss

@@ -0,0 +1,167 @@
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
+@use 'sass:string';
+
+$_umbra-opacity: 0.2;
+$_penumbra-opacity: 0.14;
+$_ambient-opacity: 0.12;
+
+$_umbra-map: (
+  0: '0px 0px 0px 0px',
+  1: '0px 2px 1px -1px',
+  2: '0px 3px 1px -2px',
+  3: '0px 3px 3px -2px',
+  4: '0px 2px 4px -1px',
+  5: '0px 3px 5px -1px',
+  6: '0px 3px 5px -1px',
+  7: '0px 4px 5px -2px',
+  8: '0px 5px 5px -3px',
+  9: '0px 5px 6px -3px',
+  10: '0px 6px 6px -3px',
+  11: '0px 6px 7px -4px',
+  12: '0px 7px 8px -4px',
+  13: '0px 7px 8px -4px',
+  14: '0px 7px 9px -4px',
+  15: '0px 8px 9px -5px',
+  16: '0px 8px 10px -5px',
+  17: '0px 8px 11px -5px',
+  18: '0px 9px 11px -5px',
+  19: '0px 9px 12px -6px',
+  20: '0px 10px 13px -6px',
+  21: '0px 10px 13px -6px',
+  22: '0px 10px 14px -6px',
+  23: '0px 11px 14px -7px',
+  24: '0px 11px 15px -7px',
+);
+
+$_penumbra-map: (
+  0: '0px 0px 0px 0px',
+  1: '0px 1px 1px 0px',
+  2: '0px 2px 2px 0px',
+  3: '0px 3px 4px 0px',
+  4: '0px 4px 5px 0px',
+  5: '0px 5px 8px 0px',
+  6: '0px 6px 10px 0px',
+  7: '0px 7px 10px 1px',
+  8: '0px 8px 10px 1px',
+  9: '0px 9px 12px 1px',
+  10: '0px 10px 14px 1px',
+  11: '0px 11px 15px 1px',
+  12: '0px 12px 17px 2px',
+  13: '0px 13px 19px 2px',
+  14: '0px 14px 21px 2px',
+  15: '0px 15px 22px 2px',
+  16: '0px 16px 24px 2px',
+  17: '0px 17px 26px 2px',
+  18: '0px 18px 28px 2px',
+  19: '0px 19px 29px 2px',
+  20: '0px 20px 31px 3px',
+  21: '0px 21px 33px 3px',
+  22: '0px 22px 35px 3px',
+  23: '0px 23px 36px 3px',
+  24: '0px 24px 38px 3px',
+);
+
+$_ambient-map: (
+  0: '0px 0px 0px 0px',
+  1: '0px 1px 3px 0px',
+  2: '0px 1px 5px 0px',
+  3: '0px 1px 8px 0px',
+  4: '0px 1px 10px 0px',
+  5: '0px 1px 14px 0px',
+  6: '0px 1px 18px 0px',
+  7: '0px 2px 16px 1px',
+  8: '0px 3px 14px 2px',
+  9: '0px 3px 16px 2px',
+  10: '0px 4px 18px 3px',
+  11: '0px 4px 20px 3px',
+  12: '0px 5px 22px 4px',
+  13: '0px 5px 24px 4px',
+  14: '0px 5px 26px 4px',
+  15: '0px 6px 28px 5px',
+  16: '0px 6px 30px 5px',
+  17: '0px 6px 32px 5px',
+  18: '0px 7px 34px 6px',
+  19: '0px 7px 36px 6px',
+  20: '0px 8px 38px 7px',
+  21: '0px 8px 40px 7px',
+  22: '0px 8px 42px 7px',
+  23: '0px 9px 44px 8px',
+  24: '0px 9px 46px 8px',
+);
+
+// A collection of mixins and CSS classes that can be used to apply elevation to a material
+// element.
+// See: https://material.io/design/environment/elevation.html
+// Examples:
+//
+//
+// .mat-foo {
+//   @include $mat-elevation(2);
+//
+//   &:active {
+//     @include $mat-elevation(8);
+//   }
+// }
+//
+// <div id="external-card" class="mat-elevation-z2"><p>Some content</p></div>
+//
+// For an explanation of the design behind how elevation is implemented, see the design doc at
+// https://goo.gl/Kq0k9Z.
+
+// The default color for elevation shadows.
+$color: black !default;
+
+// Prefix for elevation-related selectors.
+$prefix: 'mat-elevation-z';
+
+// Applies the correct css rules to an element to give it the elevation specified by $zValue.
+// The $zValue must be between 0 and 24.
+@mixin elevation($zValue, $color: $color, $opacity: null) {
+  box-shadow: get-box-shadow($zValue, $color, $opacity);
+}
+
+// Applies the elevation to an element in a manner that allows
+// consumers to override it via the Material elevation classes.
+@mixin overridable-elevation($zValue, $color: $color, $opacity: null) {
+  &:not([class*='#{$prefix}']) {
+    @include elevation($zValue, $color, $opacity);
+  }
+}
+
+// Gets the box shadow value for a specific elevation.
+@function get-box-shadow($zValue, $shadow-color: black, $opacity: null) {
+  @if $zValue == null {
+    @return null;
+  }
+
+  @if meta.type-of($zValue) != number or not math.is-unitless($zValue) {
+    @error '$zValue must be a unitless number, but received `#{$zValue}`';
+  }
+
+  @if $zValue < 0 or $zValue > 24 {
+    @error '$zValue must be between 0 and 24, but received `#{$zValue}`';
+  }
+
+  $umbra-z-value: map.get($_umbra-map, $zValue);
+  $penumbra-z-value: map.get($_penumbra-map, $zValue);
+  $ambient-z-value: map.get($_ambient-map, $zValue);
+
+  $color-opacity: if($opacity != null, $opacity, 1);
+  $umbra-color: _compute-color-opacity($shadow-color, $_umbra-opacity * $color-opacity);
+  $penumbra-color: _compute-color-opacity($shadow-color, $_penumbra-opacity * $color-opacity);
+  $ambient-color: _compute-color-opacity($shadow-color, $_ambient-opacity * $color-opacity);
+
+  @return string.unquote('#{$umbra-z-value} #{$umbra-color}, #{$penumbra-z-value} ' +
+          '#{$penumbra-color}, #{$ambient-z-value} #{$ambient-color}');
+}
+
+@function _compute-color-opacity($color, $opacity) {
+  @if meta.type-of($color) == color and $opacity != null {
+    @return rgba($color, $opacity);
+  }
+  @else {
+    @return $color;
+  }
+}

package/core/tokens/_m3-tokens.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
-@use '@material/tokens/v0_161' as mdc-tokens;
 @use '@angular/material' as mat;
 @use './m3';
+@use './m3/definitions' as m3-token-definitions;
 @use '../tokens/m2' as m2-tokens;
 @use './density';
 @use './format-tokens';
@@ -20,7 +20,7 @@
 }
 
 /// Creates a set of `md-ref-palette` tokens from the given palettes. (See
-/// https://github.com/material-components/material-components-web/blob/master/packages/mdc-tokens/v0_161/_md-ref-palette.scss)
+/// ./m3/definitions/_md-ref-palette.scss)
 /// @param {Map} $primary The primary palette
 /// @param {Map} $secondary The secondary palette
 /// @param {Map} $tertiary The tertiary palette
@@ -39,7 +39,7 @@
 }
 
 /// Creates a set of `md-ref-typeface` tokens from the given palettes. (See
-/// https://github.com/material-components/material-components-web/blob/master/packages/mdc-tokens/v0_161/_md-ref-typeface.scss)
+/// ./m3/definitions/_md-ref-typeface.scss)
 /// @param {List|String} $brand The font-family to use for brand text
 /// @param {List|String} $plain The font-family to use for plain text
 /// @param {String} $bold The font-weight to use for bold text
@@ -126,8 +126,8 @@ $_cached-token-slots: null;
 
 @function _get-sys-color($type, $ref) {
   $mdc-sys-color: if($type == dark,
-    mdc-tokens.md-sys-color-values-dark($ref),
-    mdc-tokens.md-sys-color-values-light($ref));
+    m3-token-definitions.md-sys-color-values-dark($ref),
+    m3-token-definitions.md-sys-color-values-light($ref));
 
   @if (mat.$private-use-system-color-variables) {
     @return (
@@ -283,7 +283,7 @@ $_cached-token-slots: null;
       'title-small-weight': var(--sys-title-small-weight),
     );
   }
-  @return mdc-tokens.md-sys-typescale-values($ref);
+  @return m3-token-definitions.md-sys-typescale-values($ref);
 }
 
 /// Generates a set of namespaced color tokens for all components.
@@ -306,12 +306,12 @@ $_cached-token-slots: null;
     md-sys-color: $sys-color,
     // Because the elevation values are always combined with color values to create the box shadow,
     // elevation needs to be part of the color dimension.
-    md-sys-elevation: mdc-tokens.md-sys-elevation-values(),
+    md-sys-elevation: m3-token-definitions.md-sys-elevation-values(),
     // Because the state values are sometimes combined with color values to create rgba colors,
     // state needs to be part of color dimension.
     // TODO(mmalerba): If at some point we remove the need for these combined values, we can move
     //  state to the base dimension.
-    md-sys-state: mdc-tokens.md-sys-state-values(),
+    md-sys-state: m3-token-definitions.md-sys-state-values(),
   )));
 }
 
@@ -347,7 +347,7 @@ $_cached-token-slots: null;
 @function generate-base-tokens() {
   // TODO(mmalerba): Exclude density tokens once implemented.
   @return _generate-tokens((
-    md-sys-motion: mdc-tokens.md-sys-motion-values(),
-    md-sys-shape: mdc-tokens.md-sys-shape-values(),
+    md-sys-motion: m3-token-definitions.md-sys-motion-values(),
+    md-sys-shape: m3-token-definitions.md-sys-shape-values(),
   ), $include-non-systemized: true);
 }

package/core/tokens/_token-utils.scss

@@ -1,12 +1,12 @@
 @use 'sass:list';
 @use 'sass:map';
 @use 'sass:meta';
-@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 'sass:string';
+@use 'sass:color';
+@use 'sass:math';
 @use '@angular/material' as mat;
-@use '../typography/typography';
+@use '../style/elevation';
+@use '../m2/typography' as m2-typography;
 
 // Indicates whether we're building internally. Used for backwards compatibility.
 $private-is-internal-build: false;
@@ -24,7 +24,7 @@ $placeholder-color-config: (
   background: mat.$m2-light-theme-background-palette,
 );
 
-$_placeholder-typography-level-config: typography.typography-config-level-from-mdc(body1);
+$_placeholder-typography-level-config: m2-typography.typography-config-level-from-mdc(body1);
 
 // Placeholder typography config that can be passed to token getter functions when generating token
 // slots.
@@ -54,27 +54,33 @@ $placeholder-density-config: 0;
 $_tokens: null;
 $_component-prefix: null;
 
-@mixin _configure-token-prefix($first, $rest...) {
-  $_component-prefix: '' !global;
-  @each $item in $rest {
-    $_component-prefix:
-      if($_component-prefix == '', $item, '#{$_component-prefix}-#{$item}') !global;
-  }
-  @include mdc-custom-properties.configure($varname-prefix: $first) {
-    @content;
-  }
-  $_component-prefix: null !global;
-}
-
 // Sets the token prefix and map to use when creating token slots.
 @mixin use-tokens($prefix, $tokens) {
+  $_component-prefix: $prefix !global;
   $_tokens: $tokens !global;
-  @include _configure-token-prefix($prefix...) {
-    @content;
-  }
+
+  @content;
+
+  $_component-prefix: null !global;
   $_tokens: null !global;
 }
 
+// Combines a prefix and a string to generate a CSS variable name for a token.
+@function _get-css-variable($prefix, $name) {
+  @if $prefix == null or $name == null {
+    @error 'Must specify both prefix and name when generating token';
+  }
+
+  $string-prefix: '';
+
+  // Prefixes are lists so we need to combine them.
+  @each $part in $prefix {
+    $string-prefix: if($string-prefix == '', $part, '#{$string-prefix}-#{$part}');
+  }
+
+  @return string.unquote('--#{$string-prefix}-#{$name}');
+}
+
 // Emits a slot for the given token, provided that it has a non-null value in the token map passed
 // to `use-tokens`.
 @mixin create-token-slot($property, $token, $emit-fallback: false) {
@@ -94,8 +100,10 @@ $_component-prefix: null;
       $fallback: $emit-fallback;
     }
 
-    $value: mdc-custom-properties.create('#{$_component-prefix}-#{$token}', $fallback: $fallback);
-    @include mdc-theme.property($property, $value);
+    $var-name: _get-css-variable($_component-prefix, $token);
+    $var-reference: if($fallback == null, var(#{$var-name}), var(#{$var-name}, #{$fallback}));
+
+    #{$property}: #{$var-reference};
   }
 }
 
@@ -109,7 +117,7 @@ $_component-prefix: null;
     @error 'Token #{$token} does not exist. Configured tokens are: #{map.keys($_tokens)}';
   }
 
-  @return mdc-custom-properties.create-varname('#{$_component-prefix}-#{$token}');
+  @return _get-css-variable($_component-prefix, $token);
 }
 
 // TODO(crisbeto): should be able to replace the usages of `get-token-variable` with this.
@@ -134,12 +142,29 @@ $_component-prefix: null;
   }
 }
 
+// Outputs a map of tokens under a specific prefix.
 @mixin create-token-values($prefix, $tokens) {
-  @include _configure-token-prefix($prefix...) {
-    @include mdc-keys.declare-custom-properties($tokens, $_component-prefix);
+  @if $tokens != null {
+    @each $key, $value in $tokens {
+      @if $value != null {
+        #{_get-css-variable($prefix, $key)}: #{$value};
+      }
+    }
   }
 }
 
+/// Gets all the MDC token values for a specific component. This function serves as single
+/// point at which we directly reference a specific version of the MDC tokens.
+/// @param {String} $component Name of the component for which to get the tokens
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {List} Map of token names to values
+@function get-mdc-tokens($component, $systems, $exclude-hardcoded) {
+  $full-name: 'md-comp-' + $component + '-values';
+  $fn: meta.get-function($name: $full-name, $module: 'm3-token-definitions');
+  @return meta.call($fn, $systems, $exclude-hardcoded);
+}
+
 // MDC doesn't currently handle elevation tokens properly. As a temporary workaround we can combine
 // the elevation and shadow-color tokens into a full box-shadow and use it as the value for the
 // elevation token.
@@ -147,7 +172,7 @@ $_component-prefix: null;
   $elevation: map.get($tokens, $elevation-token);
   $shadow-color: map.get($tokens, $shadow-color-token);
   @return map.merge($tokens, (
-    $elevation-token: mdc-elevation-theme.elevation-box-shadow($elevation, $shadow-color),
+    $elevation-token: elevation.get-box-shadow($elevation, $shadow-color),
     $shadow-color-token: null,
   ));
 }
@@ -202,9 +227,13 @@ $_component-prefix: null;
   }
   $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)
-    }#{'.'};
+    $variants: _supported-color-variants($tokens, $prefix);
+    $secondary-message: if($variants == (),
+      'Mixin does not support color variants',
+      'Supported color variants are: #{$variants}'
+    );
+
+    @error 'Invalid color variant: #{$color-variant}. #{$secondary-message}.';
   }
   @return if($emit-overrides-only, $overrides, map.merge($values, $overrides));
 }
@@ -286,6 +315,7 @@ $_component-prefix: null;
 /// @param {Map} $map The maps whose values will be mapped to new values.
 /// @param {Function} $fn The value mapping function.
 /// @param {Map} A new map with its values updated using the mapping function.
+/* stylelint-disable-next-line scss/no-global-function-names */
 @function map-values($map, $fn) {
   $result: ();
   @each $key, $value in $map {
@@ -339,6 +369,66 @@ $_component-prefix: null;
   @return $result;
 }
 
+/// Inherited function from MDC that computes which contrast tone to use on top of a color.
+/// This is used only in a narrow set of use cases when generating M2 button tokens to maintain
+/// backwards compatibility.
+/// @param {Color} $value Color for which we're calculating the contrast tone.
+/// @param {Boolean} $is-dark Whether the current theme is dark.
+/// @return {Map} Either `dark` or `light`.
+@function contrast-tone($value, $is-dark) {
+  @if ($value == 'dark') {
+    @return 'light';
+  }
+
+  @if ($value == 'light') {
+    @return 'dark';
+  }
+
+  // Fallback if the app is using a non-color palette (e.g. CSS variable based).
+  @if (meta.type-of($value) != 'color') {
+    @return if($is-dark, 'light', 'dark');
+  }
+
+  $minimum-contrast: 3.1;
+  $light-contrast: _contrast($value, #fff);
+  $dark-contrast: _contrast($value, rgba(0, 0, 0, 0.87));
+
+  @if ($light-contrast < $minimum-contrast) and ($dark-contrast > $light-contrast) {
+    @return 'dark';
+  }
+
+  @return 'light';
+}
+
+@function _linear-channel-value($channel-value) {
+  $normalized-channel-value: math.div($channel-value, 255);
+
+  @if ($normalized-channel-value < 0.03928) {
+    @return math.div($normalized-channel-value, 12.92);
+  }
+
+  @return math.pow(math.div($normalized-channel-value + 0.055, 1.055), 2.4);
+}
+
+// Calculate the luminance for a color.
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+@function _luminance($color) {
+  $red: _linear-channel-value(color.red($color));
+  $green: _linear-channel-value(color.green($color));
+  $blue: _linear-channel-value(color.blue($color));
+
+  @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
+}
+
+// Calculate the contrast ratio between two colors.
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+@function _contrast($back, $front) {
+  $back-lum: _luminance($back) + 0.05;
+  $fore-lum: _luminance($front) + 0.05;
+
+  @return math.div(math.max($back-lum, $fore-lum), math.min($back-lum, $fore-lum));
+}
+
 /// Verifies that the token overrides exist and are used in one of the given token maps.
 @mixin _validate-token-overrides($overrides: (), $token-maps) {
   $valid-token-names: ();

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

@@ -1,9 +1,9 @@
 @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/elevation';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mtx, datetimepicker);
@@ -56,8 +56,8 @@ $_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-elevation-shadow: elevation.get-box-shadow(4),
+    container-touch-elevation-shadow: elevation.get-box-shadow(24),
     container-shape: 4px,
     container-touch-shape: 4px,
     selector-container-shape: 4px,

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

@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
-@use '@material/elevation' as mdc-elevation;
 @use '../../token-utils';
+@use '../../../style/elevation';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mtx, drawer);
@@ -11,7 +11,7 @@ $prefix: (mtx, drawer);
 @function get-unthemable-tokens() {
   @return (
     container-shape: 0,
-    container-elevation-shadow: mdc-elevation.elevation-box-shadow(16),
+    container-elevation-shadow: elevation.get-box-shadow(16),
   );
 }