@ng-matero/extensions 20.1.1 → 20.2.1

package/_index.scss

@@ -27,7 +27,6 @@ tooltip-color, tooltip-typography, tooltip-density, tooltip-base, tooltip-overri
 define-density;
 @forward './core/theming/color-api-backwards-compatibility' show color-variants-backwards-compatibility;
 
-@forward './core/tokens/m2-tokens' show m2-tokens-from-theme;
 @forward './core/tokens/m3-system' show system-level-colors,
 system-level-typography, system-level-elevation, system-level-shape,
 system-level-motion, system-level-state, theme, theme-overrides;

package/alert/_alert-theme.scss

@@ -5,47 +5,39 @@
 @use './m3-alert';
 
 @mixin base($theme) {
+  $tokens: map.get(m2-alert.get-tokens($theme), base);
   @if mat.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-alert.get-tokens($theme), base));
-  }
-  @else {
-    @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-alert.get-unthemable-tokens());
-    }
+    $tokens: map.get(m3-alert.get-tokens($theme), base);
   }
+
+  @include token-utils.values($tokens);
 }
 
 @mixin color($theme) {
+  $tokens: map.get(m2-alert.get-tokens($theme), color);
   @if mat.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-alert.get-tokens($theme), color));
-  }
-  @else {
-    @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-alert.get-color-tokens($theme));
-    }
+    $tokens: map.get(m3-alert.get-tokens($theme), color);
   }
+
+  @include token-utils.values($tokens);
 }
 
 @mixin typography($theme) {
+  $tokens: map.get(m2-alert.get-tokens($theme), typography);
   @if mat.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-alert.get-tokens($theme), typography));
-  }
-  @else {
-    @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-alert.get-typography-tokens($theme));
-    }
+    $tokens: map.get(m3-alert.get-tokens($theme), typography);
   }
+
+  @include token-utils.values($tokens);
 }
 
 @mixin density($theme) {
+  $tokens: map.get(m2-alert.get-tokens($theme), density);
   @if mat.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-alert.get-tokens($theme), density));
-  }
-  @else {
-    @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-alert.get-density-tokens($theme));
-    }
+    $tokens: map.get(m3-alert.get-tokens($theme), density);
   }
+
+  @include token-utils.values($tokens);
 }
 
 /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
@@ -53,7 +45,7 @@
   @return (
     (
       namespace: alert,
-      tokens: token-utils.get-overrides(m3-alert.get-tokens(), alert),
+      tokens: token-utils.get-overrides(m3-alert.get-tokens(), alert)
     ),
   );
 }
@@ -68,8 +60,7 @@
     @include color($theme);
     @include density($theme);
     @include typography($theme);
-  }
-  @else {
+  } @else {
     @include base($theme);
     @if mat.theme-has($theme, color) {
       @include color($theme);

package/alert/_m2-alert.scss

@@ -1,59 +1,42 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use '@angular/material' as mat;
 @use '../core/tokens/m2-utils';
 
-// 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 (
-    alert-container-shape: 4px,
-  );
-}
+@function get-tokens($theme) {
+  $system: m2-utils.get-system($theme);
 
-// Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
-  $is-dark: mat.get-theme-type($theme) == dark;
+  $is-dark: false;
+  @if meta.type-of($theme) == 'map' {
+    $is-dark: mat.get-theme-type($theme) == dark;
+  }
 
   @return (
-    alert-outline-color: transparent,
-    alert-background-color: mat.m2-get-color-from-palette(mat.$m2-gray-palette, if($is-dark, 900, 100)),
-    alert-text-color: mat.get-theme-color($theme, foreground, text),
-
-    alert-info-outline-color: transparent,
-    alert-info-background-color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, if($is-dark, 900, 100)),
-    alert-info-text-color: mat.get-theme-color($theme, foreground, text),
-
-    alert-success-outline-color: transparent,
-    alert-success-background-color: mat.m2-get-color-from-palette(mat.$m2-green-palette, if($is-dark, 900, 100)),
-    alert-success-text-color: mat.get-theme-color($theme, foreground, text),
-
-    alert-warning-outline-color: transparent,
-    alert-warning-background-color: mat.m2-get-color-from-palette(mat.$m2-amber-palette, if($is-dark, 900, 100)),
-    alert-warning-text-color: mat.get-theme-color($theme, foreground, text),
-
-    alert-danger-outline-color: transparent,
-    alert-danger-background-color: mat.m2-get-color-from-palette(mat.$m2-red-palette, if($is-dark, 900, 100)),
-    alert-danger-text-color: mat.get-theme-color($theme, foreground, text),
-  );
-}
-
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
-  @return ();
-}
-
-// Tokens that can be configured through Angular Material's density theming API.
-@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 mat.private-deep-merge-all(
-    get-unthemable-tokens(),
-    get-color-tokens(m2-utils.$placeholder-color-config),
-    get-typography-tokens(m2-utils.$placeholder-typography-config),
-    get-density-tokens(m2-utils.$placeholder-density-config)
-  );
+    base: (
+      alert-container-shape: 4px,
+    ),
+    color: (
+      alert-outline-color: transparent,
+      alert-background-color: mat.m2-get-color-from-palette(mat.$m2-gray-palette, if($is-dark, 900, 100)),
+      alert-text-color: map.get($system, on-surface),
+
+      alert-info-outline-color: transparent,
+      alert-info-background-color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, if($is-dark, 900, 100)),
+      alert-info-text-color: map.get($system, on-surface),
+
+      alert-success-outline-color: transparent,
+      alert-success-background-color: mat.m2-get-color-from-palette(mat.$m2-green-palette, if($is-dark, 900, 100)),
+      alert-success-text-color: map.get($system, on-surface),
+
+      alert-warning-outline-color: transparent,
+      alert-warning-background-color: mat.m2-get-color-from-palette(mat.$m2-amber-palette, if($is-dark, 900, 100)),
+      alert-warning-text-color: map.get($system, on-surface),
+
+      alert-danger-outline-color: transparent,
+      alert-danger-background-color: mat.m2-get-color-from-palette(mat.$m2-red-palette, if($is-dark, 900, 100)),
+      alert-danger-text-color: map.get($system, on-surface),
+    ),
+    typography: (),
+    density: ()
+  )
 }

package/colorpicker/_colorpicker-theme.scss

@@ -6,59 +6,53 @@
 @use './m3-colorpicker';
 
 @mixin base($theme) {
+  $tokens: map.get(m2-colorpicker.get-tokens($theme), base);
   @if mat.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-colorpicker.get-tokens($theme), base));
-  }
-  @else {
-    @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-colorpicker.get-unthemable-tokens());
-    }
+    $tokens: map.get(m3-colorpicker.get-tokens($theme), base);
   }
+
+  @include token-utils.values($tokens);
 }
 
 @mixin color($theme, $color-variant: null) {
+  $tokens: map.get(m2-colorpicker.get-tokens($theme), color);
   @if mat.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-colorpicker.get-tokens($theme), color));
+    $tokens: map.get(m3-colorpicker.get-tokens($theme, $color-variant), color);
   }
-  @else {
-    @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-colorpicker.get-color-tokens($theme));
-    }
 
+  @include token-utils.values($tokens);
+
+  @if mat.get-theme-version($theme) != 1 {
     .mtx-colorpicker-toggle-active {
       &.mat-accent {
-        $accent-tokens: m2-colorpicker.private-get-toggle-color-palette-color-tokens($theme, accent);
-        @include token-utils.create-token-values-mixed($accent-tokens);
+        $tokens: m2-colorpicker.private-get-color-palette-color-tokens($theme, secondary);
+        @include token-utils.values($tokens);
       }
 
       &.mat-warn {
-        $warn-tokens: m2-colorpicker.private-get-toggle-color-palette-color-tokens($theme, warn);
-        @include token-utils.create-token-values-mixed($warn-tokens);
+        $tokens: m2-colorpicker.private-get-color-palette-color-tokens($theme, error);
+        @include token-utils.values($tokens);
       }
     }
   }
 }
 
 @mixin typography($theme) {
+  $tokens: map.get(m2-colorpicker.get-tokens($theme), typography);
   @if mat.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-colorpicker.get-tokens($theme), typography));
-  }
-  @else {
-    @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-colorpicker.get-typography-tokens($theme));
-    }
+    $tokens: map.get(m3-colorpicker.get-tokens($theme), typography);
   }
+
+  @include token-utils.values($tokens);
 }
 
 @mixin density($theme) {
+  $tokens: map.get(m2-colorpicker.get-tokens($theme), density);
   @if mat.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-colorpicker.get-tokens($theme), density));
-  }
-  @else {
-    @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-colorpicker.get-density-tokens($theme));
-    }
+    $tokens: map.get(m3-colorpicker.get-tokens($theme), density);
   }
+
+  @include token-utils.values($tokens);
 }
 
 /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
@@ -66,7 +60,7 @@
   @return (
     (
       namespace: colorpicker,
-      tokens: token-utils.get-overrides(m3-colorpicker.get-tokens(), colorpicker),
+      tokens: token-utils.get-overrides(m3-colorpicker.get-tokens(), colorpicker)
     ),
   );
 }
@@ -81,8 +75,7 @@
     @include color($theme, $color-variant);
     @include density($theme);
     @include typography($theme);
-  }
-  @else {
+  } @else {
     @include base($theme);
     @if mat.theme-has($theme, color) {
       @include color($theme);

package/colorpicker/_m2-colorpicker.scss

@@ -1,47 +1,24 @@
 @use 'sass:color';
 @use 'sass:map';
-@use '@angular/material' as mat;
 @use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 
-@function private-get-toggle-color-palette-color-tokens($theme, $palette-name) {
+@function get-tokens($theme) {
   @return (
-    colorpicker-toggle-active-state-icon-color: mat.get-theme-color($theme, $palette-name, text),
+    base: (),
+    color: private-get-color-palette-color-tokens($theme, primary),
+    typography: (),
+    density: ()
   );
 }
 
-// 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 ();
-}
-
 // Tokens that can be configured through Angular Material's color theming API.
-@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);
+@function private-get-color-palette-color-tokens($theme, $color-variant) {
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
 
-  @return mat.private-merge-all($toggle-tokens, (
-    colorpicker-toggle-icon-color: $inactive-icon-color
-  ));
-}
-
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
-  @return ();
-}
-
-// Tokens that can be configured through Angular Material's density theming API.
-@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 mat.private-deep-merge-all(
-    get-unthemable-tokens(),
-    get-color-tokens(m2-utils.$placeholder-color-config),
-    get-typography-tokens(m2-utils.$placeholder-typography-config),
-    get-density-tokens(m2-utils.$placeholder-density-config)
+  @return (
+    colorpicker-toggle-active-state-icon-color: map.get($system, primary),
+    colorpicker-toggle-icon-color: map.get($system, on-surface-variant)
   );
 }

package/column-resize/index.d.ts

@@ -233,7 +233,6 @@ declare const _COALESCED_STYLE_SCHEDULER: InjectionToken<_CoalescedStyleSchedule
 declare class _CoalescedStyleScheduler {
     private _currentSchedule;
     private _ngZone;
-    constructor(...args: unknown[]);
     /**
      * Schedules the specified task to run at the end of the current VM turn.
      */

package/core/index.d.ts

@@ -85,8 +85,7 @@ declare abstract class DatetimeAdapter<D> extends DateAdapter<D> {
 }
 
 declare class NativeDatetimeAdapter extends DatetimeAdapter<Date> {
-    /** Inserted by Angular inject() migration for backwards compatibility */
-    constructor(...args: unknown[]);
+    constructor();
     clone(date: Date): Date;
     getHour(date: Date): number;
     getMinute(date: Date): number;

package/core/tokens/_m2-utils.scss

@@ -1,108 +1,25 @@
-@use 'sass:color';
-@use 'sass:math';
+@use 'sass:map';
 @use 'sass:meta';
 @use '@angular/material' as mat;
-@use '../m2/typography';
 
-$_placeholder-color-palette: mat.m2-define-palette(mat.$m2-red-palette);
-
-// Indicates whether we're building internally. Used for backwards compatibility.
-$private-is-internal-build: false;
-
-// Placeholder color config that can be passed to token getter functions when generating token
-// slots.
-$placeholder-color-config: (
-  primary: $_placeholder-color-palette,
-  accent: $_placeholder-color-palette,
-  warn: $_placeholder-color-palette,
-  is-dark: false,
-  foreground: mat.$m2-light-theme-foreground-palette,
-  background: mat.$m2-light-theme-background-palette,
-);
-
-$_placeholder-typography-level-config: typography.typography-config-level-from-mdc(body1);
-
-// Placeholder typography config that can be passed to token getter functions when generating token
-// slots.
-$placeholder-typography-config: (
-  font-family: 'Roboto, sans-serif',
-  headline-1: $_placeholder-typography-level-config,
-  headline-2: $_placeholder-typography-level-config,
-  headline-3: $_placeholder-typography-level-config,
-  headline-4: $_placeholder-typography-level-config,
-  headline-5: $_placeholder-typography-level-config,
-  headline-6: $_placeholder-typography-level-config,
-  subtitle-1: $_placeholder-typography-level-config,
-  subtitle-2: $_placeholder-typography-level-config,
-  body-1: $_placeholder-typography-level-config,
-  body-2: $_placeholder-typography-level-config,
-  caption: $_placeholder-typography-level-config,
-  button: $_placeholder-typography-level-config,
-  overline: $_placeholder-typography-level-config,
-  subheading-1: $_placeholder-typography-level-config,
-  title: $_placeholder-typography-level-config,
-);
-
-// Placeholder density config that can be passed to token getter functions when generating token
-// slots.
-$placeholder-density-config: 0;
-
-/// 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, rgb(0, 0, 0, 0.87));
-
-  @if ($light-contrast < $minimum-contrast) and ($dark-contrast > $light-contrast) {
-    @return 'dark';
+// Gets the theme's system values as a flat map.
+@function get-system($theme) {
+  @if meta.type-of($theme) == map {
+    $system: map.get($theme, _mat-system);
+    @if $system {
+      @return $system;
+    }
+
+    // If the $theme is a typography-config, convert it to a system map.
+    @if map.has-key($theme, body-1) {
+      @return mat.m2-md-sys-typescale-values($theme);
+    }
   }
 
-  @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);
+  // If the $theme is a density scale, convert it to a system map.
+  @if meta.type-of($theme) == 'number' or $theme == minimum or $theme == maximum {
+    @return (density-scale: $theme);
   }
 
-  @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));
+  @return ();
 }

package/core/tokens/_m3-system.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use 'sass:meta';
+@use '@angular/material' as mat;
 @use '../../alert/m3-alert';
 @use '../../colorpicker/m3-colorpicker';
 @use '../../datetimepicker/m3-datetimepicker';
@@ -183,7 +184,7 @@
       m3.md-sys-shape-values(),
       m3.md-sys-state-values());
 
-  & {
+  @include mat.private-current-selector-or-root {
     @each $name, $value in $overrides {
       @if (map.has-key($sys-names, $name)) {
         --#{$prefix}-#{$name}: #{map.get($overrides, $name)};
@@ -209,7 +210,7 @@
   $sys-colors: map.set($sys-colors, neutral-variant20, map.get($palettes, neutral-variant, 20));
   $sys-colors: map.set($sys-colors, neutral10, map.get($palettes, neutral, 10));
 
-  & {
+  @include mat.private-current-selector-or-root {
     @each $name, $value in $sys-colors {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
     }
@@ -248,7 +249,7 @@
         typography-system-variables-prefix) or definition.$system-level-prefix;
   }
 
-  & {
+  @include mat.private-current-selector-or-root {
     @each $name, $value in m3.md-sys-typescale-values($font-definition) {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
     }
@@ -259,18 +260,19 @@
   $shadow-color: map.get(
       $theme, definition.$internals, palettes, neutral, 0);
 
-  @each $name, $value in m3.md-sys-elevation-values() {
-    $level: map.get($overrides, $name) or $value;
-    $value: elevation.get-box-shadow($level, $shadow-color);
 
-    & {
+  @include mat.private-current-selector-or-root {
+    @each $name, $value in m3.md-sys-elevation-values() {
+      $level: map.get($overrides, $name) or $value;
+      $value: elevation.get-box-shadow($level, $shadow-color);
+
       --#{$prefix}-#{$name}: #{$value};
     }
   }
 }
 
 @mixin system-level-shape($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) {
-  & {
+  @include mat.private-current-selector-or-root {
     @each $name, $value in m3.md-sys-shape-values() {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
     }
@@ -278,7 +280,7 @@
 }
 
 @mixin system-level-state($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) {
-  & {
+  @include mat.private-current-selector-or-root {
     @each $name, $value in m3.md-sys-state-values() {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
     }

package/core/tokens/_token-utils.scss

@@ -69,32 +69,12 @@
   @return _create-var(--mtx-#{$token}, $sys-fallback);
 }
 
-// Outputs a map of tokens.
-@mixin create-token-values($tokens) {
-  @include _create-token-values-internal($tokens, false);
-}
-
-// Outputs a map of tokens under a specific prefix in scenarios where tokens may be mixed with
-// other declarations (e.g. M2 themes). Used to avoid https://sass-lang.com/documentation/breaking-changes/mixed-decls/
-@mixin create-token-values-mixed($tokens) {
-  @include _create-token-values-internal($tokens, true);
-}
-
-@mixin _create-token-values-internal($tokens, $in-place) {
-  @if ($tokens != null) {
-    @if ($in-place) {
-      & {
-        @each $key, $value in $tokens {
-          @if $value != null {
-            --mtx-#{$key}: #{$value};
-          }
-        }
-      }
-    } @else {
-      @each $key, $value in $tokens {
-        @if $value != null {
-          --mtx-#{$key}: #{$value};
-        }
+// Outputs a map of token values as CSS variable definitions.
+@mixin values($tokens) {
+  @include mat.private-current-selector-or-root() {
+    @each $key, $value in $tokens {
+      @if $value != null {
+        --mtx-#{$key}: #{$value};
       }
     }
   }
@@ -125,7 +105,7 @@
         $namespace: list.nth($data, 1);
         $name: list.nth($data, 2);
         $prefixed-name: $namespace + '-' + $name;
-        @include create-token-values(($prefixed-name: $value));
+        @include values(($prefixed-name: $value));
       } @else {
         @error #{'Invalid token name `'}#{$name}#{'`. '}#{'Valid tokens are: '}#{$all-names};
       }