@ng-matero/extensions 17.3.4 → 18.0.0

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

@@ -1,7 +1,6 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 @use '../../token-utils';
-@use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mtx, alert);
@@ -22,13 +21,13 @@ $prefix: (mtx, alert);
     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)),
+    info-background-color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, if($is-dark, 900, 500)),
     info-text-color: white,
-    success-background-color: mat.get-color-from-palette(mat.$green-palette, if($is-dark, 900, 500)),
+    success-background-color: mat.m2-get-color-from-palette(mat.$m2-green-palette, if($is-dark, 900, 500)),
     success-text-color: white,
-    warning-background-color: mat.get-color-from-palette(mat.$orange-palette, if($is-dark, 900, 500)),
+    warning-background-color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, if($is-dark, 900, 500)),
     warning-text-color: white,
-    danger-background-color: mat.get-color-from-palette(mat.$red-palette, if($is-dark, 900, 500)),
+    danger-background-color: mat.m2-get-color-from-palette(mat.$m2-red-palette, if($is-dark, 900, 500)),
     danger-text-color: white,
   );
 }
@@ -46,7 +45,7 @@ $prefix: (mtx, alert);
 // 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 sass-utils.deep-merge-all(
+  @return mat.private-deep-merge-all(
     get-unthemable-tokens(),
     get-color-tokens(token-utils.$placeholder-color-config),
     get-typography-tokens(token-utils.$placeholder-typography-config),

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

@@ -3,7 +3,6 @@
 @use 'sass:meta';
 @use '@angular/material' as mat;
 @use '../../token-utils';
-@use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mtx, colorpicker);
@@ -25,7 +24,7 @@ $prefix: (mtx, colorpicker);
   $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, (
+  @return mat.private-merge-all($toggle-tokens, (
     toggle-icon-color: $inactive-icon-color
   ));
 }
@@ -43,7 +42,7 @@ $prefix: (mtx, colorpicker);
 // 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 sass-utils.deep-merge-all(
+  @return mat.private-deep-merge-all(
     get-unthemable-tokens(),
     get-color-tokens(token-utils.$placeholder-color-config),
     get-typography-tokens(token-utils.$placeholder-typography-config),

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

@@ -4,7 +4,6 @@
 @use '@material/elevation/elevation-theme' as mdc-elevation;
 @use '@angular/material' as mat;
 @use '../../token-utils';
-@use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mtx, datetimepicker);
@@ -15,7 +14,7 @@ $_today-fade-amount: .2;
 @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-background-color: mat.private-safe-color-change($palette-color, $alpha: .3);
   $active-disabled-color: null;
 
   @if (meta.type-of($palette-color) == color) {
@@ -39,11 +38,11 @@ $_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: sass-utils.safe-color-change($palette-color, $alpha: .2),
+    time-input-active-state-background-color: mat.private-safe-color-change($palette-color, $alpha: .2),
     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-input-focus-state-placeholder-text-color: mat.private-safe-color-change($palette-color, $alpha: .6),
 
-    time-ampm-selected-state-background-color: sass-utils.safe-color-change($palette-color, $alpha: .2),
+    time-ampm-selected-state-background-color: mat.private-safe-color-change($palette-color, $alpha: .2),
   );
 }
 
@@ -80,7 +79,7 @@ $_today-fade-amount: .2;
   $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, (
+  @return mat.private-merge-all($calendar-tokens, $toggle-tokens, (
     toggle-icon-color: $inactive-icon-color,
     calendar-body-label-text-color: $secondary-text-color,
     // calendar-period-button-icon-color: $inactive-icon-color,
@@ -110,7 +109,7 @@ $_today-fade-amount: .2;
     time-input-background-color: $divider-color,
     time-input-focus-state-background-color: mat.get-theme-color($theme, background, background),
     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-text-color: mat.private-safe-color-change($text-color, $alpha: .75),
     time-ampm-outline-color: $hint-text-color,
     time-ampm-selected-state-text-color: $text-color,
   ));
@@ -143,7 +142,7 @@ $_today-fade-amount: .2;
 // 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 sass-utils.deep-merge-all(
+  @return mat.private-deep-merge-all(
     get-unthemable-tokens(),
     get-color-tokens(token-utils.$placeholder-color-config),
     get-typography-tokens(token-utils.$placeholder-typography-config),

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/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mtx, drawer);
@@ -11,6 +11,7 @@ $prefix: (mtx, drawer);
 @function get-unthemable-tokens() {
   @return (
     container-shape: 0,
+    container-elevation-shadow: mdc-elevation.elevation-box-shadow(16),
   );
 }
 
@@ -35,7 +36,7 @@ $prefix: (mtx, drawer);
 // 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 sass-utils.deep-merge-all(
+  @return mat.private-deep-merge-all(
     get-unthemable-tokens(),
     get-color-tokens(token-utils.$placeholder-color-config),
     get-typography-tokens(token-utils.$placeholder-typography-config),

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

@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
+@use '@material/elevation' as mdc-elevation;
 @use '../../token-utils';
-@use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mtx, grid);
@@ -12,6 +12,7 @@ $prefix: (mtx, grid);
   @return (
     container-shape: 0,
     table-cell-min-width: 80px,
+    column-menu-elevation-shadow: mdc-elevation.elevation-box-shadow(8),
   );
 }
 
@@ -22,7 +23,7 @@ $prefix: (mtx, grid);
   $divider-color: mat.get-theme-color($theme, foreground, divider);
 
   @return (
-    outline-color: sass-utils.safe-color-change($text-color, $alpha: .2),
+    outline-color: mat.private-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),
@@ -61,7 +62,7 @@ $prefix: (mtx, grid);
 // 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 sass-utils.deep-merge-all(
+  @return mat.private-deep-merge-all(
     get-unthemable-tokens(),
     get-color-tokens(token-utils.$placeholder-color-config),
     get-typography-tokens(token-utils.$placeholder-typography-config),

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

@@ -3,7 +3,6 @@
 @use 'sass:meta';
 @use '@angular/material' as mat;
 @use '../../token-utils';
-@use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mtx, loader);
@@ -19,7 +18,7 @@ $prefix: (mtx, loader);
   $background-color: mat.get-theme-color($theme, background, background);
 
   @return (
-    backdrop-background-color: sass-utils.safe-color-change($background-color, $alpha: .75),
+    backdrop-background-color: mat.private-safe-color-change($background-color, $alpha: .75),
   );
 }
 
@@ -36,7 +35,7 @@ $prefix: (mtx, loader);
 // 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 sass-utils.deep-merge-all(
+  @return mat.private-deep-merge-all(
     get-unthemable-tokens(),
     get-color-tokens(token-utils.$placeholder-color-config),
     get-typography-tokens(token-utils.$placeholder-typography-config),

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

@@ -1,7 +1,6 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 @use '../../token-utils';
-@use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mtx, popover);
@@ -36,7 +35,7 @@ $prefix: (mtx, popover);
 // 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 sass-utils.deep-merge-all(
+  @return mat.private-deep-merge-all(
     get-unthemable-tokens(),
     get-color-tokens(token-utils.$placeholder-color-config),
     get-typography-tokens(token-utils.$placeholder-typography-config),

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

@@ -1,7 +1,6 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 @use '../../token-utils';
-@use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mtx, progress);
@@ -22,13 +21,13 @@ $prefix: (mtx, progress);
     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-indicator-color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, if($is-dark, 900, 500)),
     info-text-color: white,
-    success-indicator-color: mat.get-color-from-palette(mat.$green-palette, if($is-dark, 900, 500)),
+    success-indicator-color: mat.m2-get-color-from-palette(mat.$m2-green-palette, if($is-dark, 900, 500)),
     success-text-color: white,
-    warning-indicator-color: mat.get-color-from-palette(mat.$orange-palette, if($is-dark, 900, 500)),
+    warning-indicator-color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, if($is-dark, 900, 500)),
     warning-text-color: white,
-    danger-indicator-color: mat.get-color-from-palette(mat.$red-palette, if($is-dark, 900, 500)),
+    danger-indicator-color: mat.m2-get-color-from-palette(mat.$m2-red-palette, if($is-dark, 900, 500)),
     danger-text-color: white,
   );
 }
@@ -48,7 +47,7 @@ $prefix: (mtx, progress);
 // 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 sass-utils.deep-merge-all(
+  @return mat.private-deep-merge-all(
     get-unthemable-tokens(),
     get-color-tokens(token-utils.$placeholder-color-config),
     get-typography-tokens(token-utils.$placeholder-typography-config),

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

@@ -2,9 +2,9 @@
 @use 'sass:math';
 @use '@material/textfield' as mdc-textfield;
 @use '@material/density' as mdc-density;
+@use '@material/elevation' as mdc-elevation;
 @use '@angular/material' as mat;
 @use '../../token-utils';
-@use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mtx, select);
@@ -21,6 +21,7 @@ $prefix: (mtx, select);
 @function get-unthemable-tokens() {
   @return (
     container-shape: 4px,
+    container-elevation-shadow: mdc-elevation.elevation-box-shadow(8),
   );
 }
 
@@ -73,7 +74,7 @@ $prefix: (mtx, select);
 // 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 sass-utils.deep-merge-all(
+  @return mat.private-deep-merge-all(
     get-unthemable-tokens(),
     get-color-tokens(token-utils.$placeholder-color-config),
     get-typography-tokens(token-utils.$placeholder-typography-config),

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

@@ -3,7 +3,6 @@
 @use 'sass:meta';
 @use '@angular/material' as mat;
 @use '../../token-utils';
-@use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mtx, split);
@@ -24,7 +23,7 @@ $prefix: (mtx, split);
 @function get-color-tokens($theme) {
   $gutter-tokens: private-get-color-palette-color-tokens($theme, primary);
 
-  @return sass-utils.merge-all($gutter-tokens, (
+  @return mat.private-merge-all($gutter-tokens, (
     gutter-background-color: mat.get-theme-color($theme, foreground, divider),
   ));
 }
@@ -42,7 +41,7 @@ $prefix: (mtx, split);
 // 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 sass-utils.deep-merge-all(
+  @return mat.private-deep-merge-all(
     get-unthemable-tokens(),
     get-color-tokens(token-utils.$placeholder-color-config),
     get-typography-tokens(token-utils.$placeholder-typography-config),

package/core/tokens/m3/index.scss

@@ -0,0 +1,45 @@
+@use 'sass:meta';
+@use 'sass:map';
+@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;
+
+$_module-names: (
+  // Custom tokens
+  tokens-mtx-alert,
+  tokens-mtx-colorpicker,
+  tokens-mtx-datetimepicker,
+  tokens-mtx-drawer,
+  tokens-mtx-grid,
+  tokens-mtx-loader,
+  tokens-mtx-popover,
+  tokens-mtx-progress,
+  tokens-mtx-select,
+  tokens-mtx-split,
+);
+
+/// Gets the full set of M3 tokens for the given theme object.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @param {Map} $token-slots Possible token slots
+/// @return {Map} Full set of M3 tokens
+@function get-m3-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: ();
+
+  @each $module-name in $_module-names {
+    $fn: meta.get-function(
+      $name: 'get-tokens',
+      $module: $module-name,
+    );
+    $tokens: map.merge($tokens, meta.call($fn, $systems, $exclude-hardcoded, $token-slots));
+  }
+
+  @return $tokens;
+}

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

@@ -0,0 +1,31 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mtx, alert);
+
+/// Generates custom tokens for the mat-badge.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @param {Map} $token-slots Possible token slots
+/// @return {Map} A set of custom tokens for the mat-badge
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: (
+    container-shape: map.get($systems, md-sys-shape, corner-small),
+
+    outline-color: token-utils.hardcode(transparent, $exclude-hardcoded),
+    background-color: map.get($systems, md-sys-color, surface-container),
+    text-color: map.get($systems, md-sys-color, on-surface),
+    info-background-color: map.get(mat.$blue-palette, 50),
+    info-text-color: token-utils.hardcode(white, $exclude-hardcoded),
+    success-background-color: map.get(mat.$green-palette, 50),
+    success-text-color: token-utils.hardcode(white, $exclude-hardcoded),
+    warning-background-color: map.get(mat.$orange-palette, 50),
+    warning-text-color: token-utils.hardcode(white, $exclude-hardcoded),
+    danger-background-color: map.get(mat.$red-palette, 50),
+    danger-text-color: token-utils.hardcode(white, $exclude-hardcoded),
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

package/core/tokens/m3/mtx/_colorpicker.scss

@@ -0,0 +1,19 @@
+@use 'sass:map';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mtx, colorpicker);
+
+/// Generates custom tokens for the mat-badge.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @param {Map} $token-slots Possible token slots
+/// @return {Map} A set of custom tokens for the mat-badge
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: (
+    toggle-active-state-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+    toggle-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

package/{experimental/theming/_custom-tokens.scss → core/tokens/m3/mtx/_datetimepicker.scss}

@@ -1,56 +1,19 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
-@use '@angular/material-experimental' as matx;
-@use '@material/elevation/elevation-theme' as mdc-elevation;
+@use '@material/elevation' as mdc-elevation;
+@use '../../token-utils';
 
-/// Hardcode the given value, or null if hardcoded values are excluded.
-@function _hardcode($value, $exclude-hardcoded) {
-  @return if($exclude-hardcoded, null, $value);
-}
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mtx, datetimepicker);
 
-/// Sets all of the standard typography tokens for the given token base name to the given typography
-/// level.
+/// Generates custom tokens for the mat-badge.
 /// @param {Map} $systems The MDC system tokens
-/// @param {String} $base-name The token base name to get the typography tokens for
-/// @param {String} $typography-level The typography level to base the token values on
-/// @return {Map} A map containing the typography tokens for the given base token name
-@function _generate-typography-tokens($systems, $base-name, $typography-level) {
-  $result: ();
-  @each $prop in (font, line-height, size, tracking, weight) {
-    $result: map.set($result, #{$base-name}-#{$prop},
-      map.get($systems, md-sys-typescale, #{$typography-level}-#{$prop}));
-  }
-  @return $result;
-}
-
-@function alert($systems, $exclude-hardcoded) {
-  @return (
-    container-shape: map.get($systems, md-sys-shape, corner-small),
-
-    outline-color: _hardcode(transparent, $exclude-hardcoded),
-    background-color: map.get($systems, md-sys-color, surface-container),
-    text-color: map.get($systems, md-sys-color, on-surface),
-    info-background-color: map.get(matx.$m3-blue-palette, 50),
-    info-text-color: _hardcode(white, $exclude-hardcoded),
-    success-background-color: map.get(matx.$m3-green-palette, 50),
-    success-text-color: _hardcode(white, $exclude-hardcoded),
-    warning-background-color: map.get(matx.$m3-orange-palette, 50),
-    warning-text-color: _hardcode(white, $exclude-hardcoded),
-    danger-background-color: map.get(matx.$m3-red-palette, 50),
-    danger-text-color: _hardcode(white, $exclude-hardcoded),
-  );
-}
-
-@function colorpicker($systems, $exclude-hardcoded) {
-  @return (
-    toggle-active-state-icon-color: map.get($systems, md-sys-color, on-surface-variant),
-    toggle-icon-color: map.get($systems, md-sys-color, on-surface-variant),
-  );
-}
-
-@function datetimepicker($systems, $exclude-hardcoded) {
-  @return ((
-    calendar-header-background-color: _hardcode(transparent, $exclude-hardcoded),
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @param {Map} $token-slots Possible token slots
+/// @return {Map} A set of custom tokens for the mat-badge
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: ((
+    calendar-header-background-color: token-utils.hardcode(transparent, $exclude-hardcoded),
     calendar-date-selected-state-text-color: map.get($systems, md-sys-color, on-primary),
     calendar-date-selected-state-background-color: map.get($systems, md-sys-color, primary),
     calendar-date-selected-disabled-state-background-color: mat.private-safe-color-change(
@@ -74,7 +37,7 @@
     calendar-table-header-text-color: map.get($systems, md-sys-color, on-surface),
     calendar-date-today-outline-color: map.get($systems, md-sys-color, primary),
     calendar-date-text-color: map.get($systems, md-sys-color, on-surface),
-    calendar-date-outline-color: _hardcode(transparent, $exclude-hardcoded),
+    calendar-date-outline-color: token-utils.hardcode(transparent, $exclude-hardcoded),
     calendar-date-disabled-state-text-color: mat.private-safe-color-change(
       map.get($systems, md-sys-color, on-surface),
       $alpha: 0.38
@@ -107,8 +70,8 @@
     time-ampm-selected-state-text-color: map.get($systems, md-sys-color, on-tertiary-container),
     time-ampm-selected-state-background-color: map.get($systems, md-sys-color, tertiary-container),
 
-    container-elevation-shadow: _hardcode(mdc-elevation.elevation-box-shadow(0), $exclude-hardcoded),
-    container-touch-elevation-shadow: _hardcode(mdc-elevation.elevation-box-shadow(0), $exclude-hardcoded),
+    container-elevation-shadow: token-utils.hardcode(mdc-elevation.elevation-box-shadow(0), $exclude-hardcoded),
+    container-touch-elevation-shadow: token-utils.hardcode(mdc-elevation.elevation-box-shadow(0), $exclude-hardcoded),
     container-shape: map.get($systems, md-sys-shape, corner-large),
     container-touch-shape: map.get($systems, md-sys-shape, corner-extra-large),
     selector-container-shape: map.get($systems, md-sys-shape, corner-small),
@@ -171,145 +134,6 @@
       time-ampm-selected-state-background-color: map.get($systems, md-sys-color, primary-container),
     )
   ));
-}
-
-@function drawer($systems, $exclude-hardcoded) {
-  @return (
-    container-shape: map.get($systems, md-sys-shape, corner-large),
-
-    container-background-color: map.get($systems, md-sys-color, surface),
-    container-text-color: map.get($systems, md-sys-color, on-surface-variant),
-  );
-}
-
-@function grid($systems, $exclude-hardcoded) {
-  @return (
-    container-shape:  map.get($systems, md-sys-shape, corner-medium),
-    table-cell-min-width: _hardcode(80px, $exclude-hardcoded),
-
-    outline-color: map.get($systems, md-sys-color, outline-variant),
-    column-menu-text-color: map.get($systems, md-sys-color, on-surface-variant),
-    column-menu-divider-color: map.get($systems, md-sys-color, outline-variant),
-    table-footer-background-color: map.get($systems, md-sys-color, surface-container),
-    table-row-striped-background-color: map.get($systems, md-sys-color, surface-container),
-    table-row-hover-background-color: map.get($systems, md-sys-color, secondary-container),
-    table-row-selected-background-color: map.get($systems, md-sys-color, secondary-container),
-    table-row-selected-hover-background-color: map.get($systems, md-sys-color, primary-container),
-    table-cell-selected-outline-color: map.get($systems, md-sys-color, primary),
-    resizable-handle-active-background-color: map.get($systems, md-sys-color, primary),
-    resizable-handle-hover-background-color: map.get($systems, md-sys-color, primary),
-    resizable-handle-disabled-background-color: map.get($systems, md-sys-color, outline-variant),
-  );
-}
-
-@function loader($systems, $exclude-hardcoded) {
-  @return (
-    backdrop-background-color: mat.private-safe-color-change(
-      map.get($systems, md-sys-color, surface),
-      $alpha: 0.75
-    ),
-  );
-}
-
-@function popover($systems, $exclude-hardcoded) {
-  @return (
-    container-shape: map.get($systems, md-sys-shape, corner-extra-small),
-
-    outline-color: map.get($systems, md-sys-color, surface-container),
-    background-color: map.get($systems, md-sys-color, surface-container),
-    text-color: map.get($systems, md-sys-color, on-surface),
-  );
-}
-
-@function progress($systems, $exclude-hardcoded) {
-  @return (
-    container-shape: map.get($systems, md-sys-shape, corner-extra-small),
-
-    track-color: map.get($systems, md-sys-color, surface-container),
-    indicator-color: map.get($systems, md-sys-color, outline-variant),
-    text-color: map.get($systems, md-sys-color, on-surface),
-    info-indicator-color: map.get(matx.$m3-blue-palette, 50),
-    info-text-color:_hardcode(white, $exclude-hardcoded),
-    success-indicator-color: map.get(matx.$m3-green-palette, 50),
-    success-text-color:_hardcode(white, $exclude-hardcoded),
-    warning-indicator-color: map.get(matx.$m3-orange-palette, 50),
-    warning-text-color:_hardcode(white, $exclude-hardcoded),
-    danger-indicator-color: map.get(matx.$m3-red-palette, 50),
-    danger-text-color:_hardcode(white, $exclude-hardcoded),
-  );
-}
-
-@function select($systems, $exclude-hardcoded) {
-  @return ((
-    container-shape: map.get($systems, md-sys-shape, corner-extra-small),
-
-    container-text-color: map.get($systems, md-sys-color, on-surface),
-    placeholder-text-color: mat.private-safe-color-change(
-      map.get($systems, md-sys-color, on-surface),
-      $alpha: 0.38
-    ),
-    disabled-text-color: mat.private-safe-color-change(
-      map.get($systems, md-sys-color, on-surface),
-      $alpha: 0.38
-    ),
-
-    multiple-value-background-color: _hardcode(transparent, $exclude-hardcoded),
-    multiple-value-outline-color: map.get($systems, md-sys-color, outline),
-    multiple-value-icon-hover-background-color: map.get($systems, md-sys-color, outline-variant),
-
-    clear-icon-color: map.get($systems, md-sys-color, on-surface),
-    clear-icon-hover-color: map.get($systems, md-sys-color, error),
-
-    enabled-arrow-color: map.get($systems, md-sys-color, on-surface),
-    disabled-arrow-color: mat.private-safe-color-change(
-      map.get($systems, md-sys-color, on-surface),
-      $alpha: 0.38
-    ),
-    invalid-arrow-color: map.get($systems, md-sys-color, error),
-
-    panel-background-color: map.get($systems, md-sys-color, surface-container),
-    panel-divider-color: map.get($systems, md-sys-color, outline),
-    optgroup-label-text-color: map.get($systems, md-sys-color, on-surface),
-    option-label-text-color: map.get($systems, md-sys-color, on-surface),
-    option-selected-state-background-color: map.get($systems, md-sys-color, secondary-container),
-    option-selected-state-text-color: map.get($systems, md-sys-color, on-surface),
-    option-hover-state-background-color: mat.private-safe-color-change(
-      map.get($systems, md-sys-color, on-surface),
-      $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity)
-    ),
-    option-disabled-state-text-color: mat.private-safe-color-change(
-      map.get($systems, md-sys-color, on-surface),
-      $alpha: 0.38
-    ),
-  ), (
-    // Color variants:
-    primary: (
-      option-selected-state-background-color: map.get($systems, md-sys-color, primary-container),
-    ),
-    secondary: (), // Default, no overrides needed.
-    tertiary: (
-      option-selected-state-background-color: map.get($systems, md-sys-color, tertiary-container),
-    ),
-    error: (
-      option-selected-state-background-color: map.get($systems, md-sys-color, error-container),
-    )
-  ));
-}
 
-@function split($systems, $exclude-hardcoded) {
-  @return ((
-    gutter-background-color: map.get($systems, md-sys-color, outline-variant),
-    gutter-hover-state-background-color: map.get($systems, md-sys-color, primary),
-  ), (
-    primary: (),
-    secondary: (
-      gutter-hover-state-background-color: map.get($systems, md-sys-color, secondary),
-    ),
-    tertiary: (
-      gutter-hover-state-background-color: map.get($systems, md-sys-color, tertiary),
-    ),
-    error: (
-      gutter-hover-state-background-color: map.get($systems, md-sys-color, error),
-    )
-  ));
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
 }