@ng-matero/extensions 16.3.1 → 17.0.0

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 ();
 }
 

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

@@ -1,6 +1,6 @@
 @use 'sass:map';
+@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.
@@ -9,27 +9,26 @@ $prefix: (mtx, drawer);
 // 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: 0,
+  );
 }
 
 // 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);
-
+@function get-color-tokens($theme) {
   @return (
-    container-background-color: theming.get-color-from-palette($background, dialog),
-    container-text-color: theming.get-color-from-palette($foreground, text),
+    container-background-color: mat.get-theme-color($theme, background, dialog),
+    container-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($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/_grid.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
+@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.
@@ -9,40 +9,52 @@ $prefix: (mtx, grid);
 // 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: 0,
+    table-cell-min-width: 80px,
+  );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $is-dark-theme: map.get($config, is-dark);
-  $foreground: map.get($config, foreground);
-  $background: map.get($config, background);
-  $primary: map.get($config, primary);
-  $accent: map.get($config, accent);
+@function get-color-tokens($theme) {
+  $is-dark: mat.get-theme-type($theme) == dark;
+  $text-color: mat.get-theme-color($theme, foreground, text);
+  $divider-color: mat.get-theme-color($theme, foreground, divider);
 
   @return (
-    outline-color: theming.get-color-from-palette($foreground, secondary-text, .2),
-    column-menu-text-color: theming.get-color-from-palette($foreground, text),
-    column-menu-divider-color: theming.get-color-from-palette($foreground, divider),
-    table-footer-background-color: theming.get-color-from-palette($background, app-bar),
-    table-row-striped-background-color: if($is-dark-theme, #3a3a3a, #f5f5f5),
-    table-row-hover-background-color: if($is-dark-theme, #2a2a2a, #e5e5e5),
-    table-row-selected-background-color: if($is-dark-theme, #2a2a2a, #e5e5e5),
-    table-cell-selected-outline-color: theming.get-color-from-palette($accent),
-    resizable-handle-active-background-color: theming.get-color-from-palette($primary),
-    resizable-handle-hover-background-color: theming.get-color-from-palette($primary),
-    resizable-handle-disabled-background-color: theming.get-color-from-palette($foreground, divider),
+    outline-color: sass-utils.safe-color-change($text-color, $alpha: .2),
+    column-menu-text-color: $text-color,
+    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-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),
+    resizable-handle-disabled-background-color: $divider-color,
   );
 }
 
 // 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) {
-  @return ();
+@function get-density-tokens($theme) {
+  $scale: mat.private-clamp-density(mat.get-theme-density($theme), -4);
+  $expand-button-scale: (
+    0: 48px,
+    -1: 44px,
+    -2: 40px,
+    -3: 36px,
+    -4: 28px
+  );
+
+  @return (
+    row-expand-button-size: map.get($expand-button-scale, $scale),
+  );
 }
 
 // Combines the tokens generated by the above functions into a single map with placeholder values.

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

@@ -1,8 +1,8 @@
 @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.
@@ -15,21 +15,21 @@ $prefix: (mtx, loader);
 }
 
 // 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) {
+  $background-color: mat.get-theme-color($theme, background, background);
 
   @return (
-    backdrop-background-color: theming.get-color-from-palette($background, background, .75),
+    backdrop-background-color: sass-utils.safe-color-change($background-color, $alpha: .75),
   );
 }
 
 // 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/_popover.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
+@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.
@@ -9,28 +9,27 @@ $prefix: (mtx, popover);
 // 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);
-
+@function get-color-tokens($theme) {
   @return (
-    background-color: theming.get-color-from-palette($background, card),
-    text-color: theming.get-color-from-palette($foreground, text),
-    arrow-outline-color: theming.get-color-from-palette($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),
   );
 }
 
 // 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/_progress.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, progress);
@@ -10,37 +9,39 @@ $prefix: (mtx, progress);
 // 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 (
-    track-color: theming.get-color-from-palette($background, hover),
-    indicator-color: theming.get-color-from-palette($foreground, divider),
-    text-color: theming.get-color-from-palette($foreground, text),
-    info-indicator-color: theming.get-color-from-palette(palette.$blue-palette, if($is-dark-theme, 900, 500)),
+    track-color: mat.get-theme-color($theme, background, hover),
+    indicator-color: mat.get-theme-color($theme, foreground, divider),
+    text-color: mat.get-theme-color($theme, foreground, text),
+    info-indicator-color: mat.get-color-from-palette(mat.$blue-palette, if($is-dark, 900, 500)),
     info-text-color: white,
-    success-indicator-color: theming.get-color-from-palette(palette.$green-palette, if($is-dark-theme, 900, 500)),
+    success-indicator-color: mat.get-color-from-palette(mat.$green-palette, if($is-dark, 900, 500)),
     success-text-color: white,
-    warning-indicator-color: theming.get-color-from-palette(palette.$orange-palette, if($is-dark-theme, 900, 500)),
+    warning-indicator-color: mat.get-color-from-palette(mat.$orange-palette, if($is-dark, 900, 500)),
     warning-text-color: white,
-    danger-indicator-color: theming.get-color-from-palette(palette.$red-palette, if($is-dark-theme, 900, 500)),
+    danger-indicator-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) {
-  @return ();
+@function get-typography-tokens($theme) {
+  @return (
+    text-size: 12px,
+  );
 }
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($config) {
+@function get-density-tokens($theme) {
   @return ();
 }