@ng-matero/extensions 16.3.2 → 17.1.0

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,41 @@ $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) {
-  $scale: theming.clamp-density($config, -4);
+@function get-density-tokens($theme) {
+  $scale: mat.private-clamp-density(mat.get-theme-density($theme), -4);
   $expand-button-scale: (
     0: 48px,
     -1: 44px,

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

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

@@ -1,57 +1,56 @@
 @use 'sass:map';
+@use 'sass:math';
+@use '@material/textfield' as mdc-textfield;
+@use '@material/density' as mdc-density;
+@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, select);
 
 // Generates the tokens used to theme the option based on a palette.
-@function private-get-color-palette-color-tokens($config, $palette-name) {
-  $palette: map.get($config, $palette-name);
-
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
   @return (
-    option-selected-state-text-color: theming.get-color-from-palette($palette),
+    option-selected-state-text-color: mat.get-theme-color($theme, $palette-name),
   );
 }
 
 // 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);
-  $warn: map.get($config, warn);
-  $text-color: theming.get-color-from-palette($foreground, text);
-  $hint-text-color: theming.get-color-from-palette($foreground, hint-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);
-  $hover-color: theming.get-color-from-palette($background, hover);
-  $palette-tokens: private-get-color-palette-color-tokens($config, primary);
+@function get-color-tokens($theme) {
+  $text-color: mat.get-theme-color($theme, foreground, text);
+  $hint-text-color: mat.get-theme-color($theme, foreground, hint-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);
+  $hover-color: mat.get-theme-color($theme, background, hover);
+  $palette-tokens: private-get-color-palette-color-tokens($theme, primary);
 
   @return map.merge($palette-tokens, (
     container-text-color: $text-color,
     placeholder-text-color: $hint-text-color,
     disabled-text-color: $hint-text-color,
 
-    multiple-value-background-color: theming.get-color-from-palette($background, unselected-chip),
+    multiple-value-background-color: mat.get-theme-color($theme, background, unselected-chip),
     multiple-value-border-color: $divider-color,
     multiple-value-icon-hover-background-color: $divider-color,
 
     clear-icon-color: $secondary-text-color,
-    clear-icon-hover-color: theming.get-color-from-palette($warn),
+    clear-icon-hover-color: mat.get-theme-color($theme, warn),
 
     enabled-arrow-color: $secondary-text-color,
     disabled-arrow-color: $disabled-text-color,
-    invalid-arrow-color: theming.get-color-from-palette($warn),
+    invalid-arrow-color: mat.get-theme-color($theme, warn),
 
-    panel-background-color: theming.get-color-from-palette($background, card),
+    panel-background-color: mat.get-theme-color($theme, background, card),
     panel-divider-color: $divider-color,
     optgroup-label-text-color: $secondary-text-color,
     option-label-text-color: $text-color,
@@ -62,12 +61,12 @@ $prefix: (mtx, select);
 }
 
 // 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/_split.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, split);
 
-@function private-get-color-palette-color-tokens($config, $palette-name) {
-  $palette: map.get($config, $palette-name);
-
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
   @return (
-    gutter-hover-state-background-color: theming.get-color-from-palette($palette, text),
+    gutter-hover-state-background-color: mat.get-theme-color($theme, $palette-name, text),
   );
 }
 
@@ -23,22 +21,21 @@ $prefix: (mtx, split);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $foreground: map.get($config, foreground);
-  $gutter-tokens: private-get-color-palette-color-tokens($config, primary);
+@function get-color-tokens($theme) {
+  $gutter-tokens: private-get-color-palette-color-tokens($theme, primary);
 
   @return sass-utils.merge-all($gutter-tokens, (
-    gutter-background-color: theming.get-color-from-palette($foreground, divider),
+    gutter-background-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/typography/_all-typography.scss

@@ -0,0 +1,40 @@
+@use '@angular/material' as mat;
+@use './typography';
+@use '../../alert/alert-theme';
+@use '../../button/button-theme';
+@use '../../colorpicker/colorpicker-theme';
+@use '../../datetimepicker/datetimepicker-theme';
+@use '../../drawer/drawer-theme';
+@use '../../grid/grid-theme';
+@use '../../loader/loader-theme';
+@use '../../popover/popover-theme';
+@use '../../progress/progress-theme';
+@use '../../select/select-theme';
+@use '../../split/split-theme';
+@use '../../tooltip/tooltip-theme';
+
+// Includes all of the typographic styles.
+@mixin all-component-typographies($theme: null) {
+  // If no actual color configuration has been specified, create a default one.
+  @if not mat.theme-has($theme, typography) {
+    $theme: typography.define-typography-config();
+  }
+
+  @include alert-theme.typography($theme);
+  @include button-theme.typography($theme);
+  @include colorpicker-theme.typography($theme);
+  @include datetimepicker-theme.typography($theme);
+  @include drawer-theme.typography($theme);
+  @include grid-theme.typography($theme);
+  @include loader-theme.typography($theme);
+  @include popover-theme.typography($theme);
+  @include progress-theme.typography($theme);
+  @include select-theme.typography($theme);
+  @include split-theme.typography($theme);
+  @include tooltip-theme.typography($theme);
+}
+
+// @deprecated Use `all-component-typographies`.
+@mixin material-extensions-typography($theme: null) {
+  @include all-component-typographies($theme);
+}