@angular/material 20.0.0-next.1 → 20.0.0-next.10

package/core/tokens/m2/_index.scss

@@ -1,187 +0,0 @@
-@use 'sass:map';
-@use 'sass:meta';
-@use '../../style/sass-utils';
-@use './mat/app' as tokens-mat-app;
-@use './mat/autocomplete' as tokens-mat-autocomplete;
-@use './mat/badge' as tokens-mat-badge;
-@use './mat/text-button' as tokens-mat-text-button;
-@use './mat/protected-button' as tokens-mat-protected-button;
-@use './mat/filled-button' as tokens-mat-filled-button;
-@use './mat/outlined-button' as tokens-mat-outlined-button;
-@use './mat/dialog' as tokens-mat-dialog;
-@use './mat/bottom-sheet' as tokens-mat-bottom-sheet;
-@use './mat/card' as tokens-mat-card;
-@use './mat/chip' as tokens-mat-chip;
-@use './mat/datepicker' as tokens-mat-datepicker;
-@use './mat/divider' as tokens-mat-divider;
-@use './mat/expansion' as tokens-mat-expansion;
-@use './mat/fab' as tokens-mat-fab;
-@use './mat/fab-small' as tokens-mat-fab-small;
-@use './mat/form-field' as tokens-mat-form-field;
-@use './mat/grid-list' as tokens-mat-grid-list;
-@use './mat/icon' as tokens-mat-icon;
-@use './mat/icon-button' as tokens-mat-icon-button;
-@use './mat/list' as tokens-mat-list;
-@use './mat/menu' as tokens-mat-menu;
-@use './mat/option' as tokens-mat-option;
-@use './mat/optgroup' as tokens-mat-optgroup;
-@use './mat/paginator' as tokens-mat-paginator;
-@use './mat/checkbox' as tokens-mat-checkbox;
-@use './mat/full-pseudo-checkbox' as tokens-mat-full-pseudo-checkbox;
-@use './mat/minimal-pseudo-checkbox' as tokens-mat-minimal-pseudo-checkbox;
-@use './mat/radio' as tokens-mat-radio;
-@use './mat/ripple' as tokens-mat-ripple;
-@use './mat/select' as tokens-mat-select;
-@use './mat/sidenav' as tokens-mat-sidenav;
-@use './mat/slider' as tokens-mat-slider;
-@use './mat/switch' as tokens-mat-switch;
-@use './mat/snack-bar' as tokens-mat-snack-bar;
-@use './mat/sort' as tokens-mat-sort;
-@use './mat/standard-button-toggle' as tokens-mat-button-toggle;
-@use './mat/stepper' as tokens-mat-stepper;
-@use './mat/tab-header' as tokens-mat-tab-header;
-@use './mat/tab-header-with-background' as tokens-mat-tab-header-with-background;
-@use './mat/table' as tokens-mat-table;
-@use './mat/toolbar' as tokens-mat-toolbar;
-@use './mat/tree' as tokens-mat-tree;
-@use './mat/timepicker' as tokens-mat-timepicker;
-@use './mdc/checkbox' as tokens-mdc-checkbox;
-@use './mdc/text-button' as tokens-mdc-text-button;
-@use './mdc/protected-button' as tokens-mdc-protected-button;
-@use './mdc/filled-button' as tokens-mdc-filled-button;
-@use './mdc/outlined-button' as tokens-mdc-outlined-button;
-@use './mdc/chip' as tokens-mdc-chip;
-@use './mdc/circular-progress' as tokens-mdc-circular-progress;
-@use './mdc/dialog' as tokens-mdc-dialog;
-@use './mdc/elevated-card' as tokens-mdc-elevated-card;
-@use './mdc/extended-fab' as tokens-mdc-extended-fab;
-@use './mdc/fab' as tokens-mdc-fab;
-@use './mdc/fab-small' as tokens-mdc-fab-small;
-@use './mdc/filled-text-field' as tokens-mdc-filled-text-field;
-@use './mdc/icon-button' as tokens-mdc-icon-button;
-@use './mdc/linear-progress' as tokens-mdc-linear-progress;
-@use './mdc/list' as tokens-mdc-list;
-@use './mdc/outlined-card' as tokens-mdc-outlined-card;
-@use './mdc/outlined-text-field' as tokens-mdc-outlined-text-field;
-@use './mdc/plain-tooltip' as tokens-mdc-plain-tooltip;
-@use './mdc/radio' as tokens-mdc-radio;
-@use './mdc/slider' as tokens-mdc-slider;
-@use './mdc/snack-bar' as tokens-mdc-snack-bar;
-@use './mdc/switch' as tokens-mdc-switch;
-@use './mdc/secondary-navigation-tab' as tokens-mdc-secondary-navigation-tab;
-@use './mdc/tab-indicator' as tokens-mdc-tab-indicator;
-@use '../../theming/inspection';
-
-/// Gets the tokens for the given theme, m2 tokens module, and theming system.
-/// @param {Map} $theme The Angular Material theme object to generate token values from.
-/// @param {String} $module The Sass module containing the token getter functions.
-/// @param {String} $system The theming system to get tokens for. Valid values are: unthemable,
-///     color, typography, density.
-/// @return {Map} The token map by calling the token getter for the given system in the given module
-///    with the given Angular Material theme. Token names are not fully-qualified.
-@function _get-tokens-for-module-and-system($theme, $module, $system) {
-  @if $system == unthemable {
-    @return meta.call(meta.get-function(get-#{$system}-tokens, $module: $module));
-  }
-  @if not inspection.theme-has($theme, $system) {
-    @return ();
-  }
-  @return meta.call(meta.get-function(get-#{$system}-tokens, $module: $module), $theme);
-}
-
-/// Gets the fully qualified tokens map for the given theme and m2 tokens module.
-/// @param {Map} $theme The Angular Material theme object to generate token values from.
-/// @param {String} $module The Sass module containing the token getter functions.
-/// @return {Map} The token map by calling the token getters in the given module with the given
-///     Angular Material theme. Token names are fully-qualified.
-@function _get-tokens-for-module($theme, $module) {
-  $tokens: sass-utils.deep-merge-all(
-    _get-tokens-for-module-and-system($theme, $module, unthemable),
-    _get-tokens-for-module-and-system($theme, $module, color),
-    _get-tokens-for-module-and-system($theme, $module, typography),
-    _get-tokens-for-module-and-system($theme, $module, density)
-  );
-  @return map.set((), map.get(meta.module-variables($module), prefix), $tokens);
-}
-
-/// Gets the full set of M2 tokens for the given theme object.
-/// @param {Map} $theme The Angular Material theme object to generate token values from.
-/// @return {Map} The token map for the given Angular Material theme. Returned format:
-///     (
-///       (fully, qualified, namespace): (
-///         token: value
-///       )
-///     )
-@function m2-tokens-from-theme($theme) {
-  @return sass-utils.deep-merge-all(
-    _get-tokens-for-module($theme, tokens-mat-app),
-    _get-tokens-for-module($theme, tokens-mat-autocomplete),
-    _get-tokens-for-module($theme, tokens-mat-badge),
-    _get-tokens-for-module($theme, tokens-mat-bottom-sheet),
-    _get-tokens-for-module($theme, tokens-mat-button-toggle),
-    _get-tokens-for-module($theme, tokens-mat-card),
-    _get-tokens-for-module($theme, tokens-mat-chip),
-    _get-tokens-for-module($theme, tokens-mat-datepicker),
-    _get-tokens-for-module($theme, tokens-mat-dialog),
-    _get-tokens-for-module($theme, tokens-mat-divider),
-    _get-tokens-for-module($theme, tokens-mat-expansion),
-    _get-tokens-for-module($theme, tokens-mat-fab),
-    _get-tokens-for-module($theme, tokens-mat-fab-small),
-    _get-tokens-for-module($theme, tokens-mat-filled-button),
-    _get-tokens-for-module($theme, tokens-mat-form-field),
-    _get-tokens-for-module($theme, tokens-mat-grid-list),
-    _get-tokens-for-module($theme, tokens-mat-icon-button),
-    _get-tokens-for-module($theme, tokens-mat-icon),
-    _get-tokens-for-module($theme, tokens-mat-menu),
-    _get-tokens-for-module($theme, tokens-mat-optgroup),
-    _get-tokens-for-module($theme, tokens-mat-option),
-    _get-tokens-for-module($theme, tokens-mat-outlined-button),
-    _get-tokens-for-module($theme, tokens-mat-paginator),
-    _get-tokens-for-module($theme, tokens-mat-checkbox),
-    _get-tokens-for-module($theme, tokens-mat-full-pseudo-checkbox),
-    _get-tokens-for-module($theme, tokens-mat-list),
-    _get-tokens-for-module($theme, tokens-mat-minimal-pseudo-checkbox),
-    _get-tokens-for-module($theme, tokens-mat-protected-button),
-    _get-tokens-for-module($theme, tokens-mat-radio),
-    _get-tokens-for-module($theme, tokens-mat-ripple),
-    _get-tokens-for-module($theme, tokens-mat-select),
-    _get-tokens-for-module($theme, tokens-mat-sidenav),
-    _get-tokens-for-module($theme, tokens-mat-slider),
-    _get-tokens-for-module($theme, tokens-mat-switch),
-    _get-tokens-for-module($theme, tokens-mat-snack-bar),
-    _get-tokens-for-module($theme, tokens-mat-sort),
-    _get-tokens-for-module($theme, tokens-mat-stepper),
-    _get-tokens-for-module($theme, tokens-mat-tab-header-with-background),
-    _get-tokens-for-module($theme, tokens-mat-tab-header),
-    _get-tokens-for-module($theme, tokens-mat-table),
-    _get-tokens-for-module($theme, tokens-mat-text-button),
-    _get-tokens-for-module($theme, tokens-mat-toolbar),
-    _get-tokens-for-module($theme, tokens-mat-tree),
-    _get-tokens-for-module($theme, tokens-mat-timepicker),
-    _get-tokens-for-module($theme, tokens-mdc-checkbox),
-    _get-tokens-for-module($theme, tokens-mdc-chip),
-    _get-tokens-for-module($theme, tokens-mdc-circular-progress),
-    _get-tokens-for-module($theme, tokens-mdc-dialog),
-    _get-tokens-for-module($theme, tokens-mdc-elevated-card),
-    _get-tokens-for-module($theme, tokens-mdc-extended-fab),
-    _get-tokens-for-module($theme, tokens-mdc-fab),
-    _get-tokens-for-module($theme, tokens-mdc-fab-small),
-    _get-tokens-for-module($theme, tokens-mdc-filled-button),
-    _get-tokens-for-module($theme, tokens-mdc-filled-text-field),
-    _get-tokens-for-module($theme, tokens-mdc-icon-button),
-    _get-tokens-for-module($theme, tokens-mdc-linear-progress),
-    _get-tokens-for-module($theme, tokens-mdc-list),
-    _get-tokens-for-module($theme, tokens-mdc-outlined-button),
-    _get-tokens-for-module($theme, tokens-mdc-outlined-card),
-    _get-tokens-for-module($theme, tokens-mdc-outlined-text-field),
-    _get-tokens-for-module($theme, tokens-mdc-plain-tooltip),
-    _get-tokens-for-module($theme, tokens-mdc-protected-button),
-    _get-tokens-for-module($theme, tokens-mdc-radio),
-    _get-tokens-for-module($theme, tokens-mdc-slider),
-    _get-tokens-for-module($theme, tokens-mdc-snack-bar),
-    _get-tokens-for-module($theme, tokens-mdc-switch),
-    _get-tokens-for-module($theme, tokens-mdc-tab-indicator),
-    _get-tokens-for-module($theme, tokens-mdc-secondary-navigation-tab),
-    _get-tokens-for-module($theme, tokens-mdc-text-button)
-  );
-}

package/core/tokens/m2/mat/_checkbox.scss

@@ -1,50 +0,0 @@
-@use '../../token-definition';
-@use '../../../theming/theming';
-@use '../../../theming/inspection';
-@use '../../../style/sass-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, checkbox);
-
-// 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) {
-  @return (
-    disabled-label-color: inspection.get-theme-color($theme, foreground, disabled-text),
-    label-text-color: inspection.get-theme-color($theme, foreground, text)
-  );
-}
-
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
-  @return (
-    label-text-font: inspection.get-theme-typography($theme, body-2, font-family),
-    label-text-line-height: inspection.get-theme-typography($theme, body-2, line-height),
-    label-text-size: inspection.get-theme-typography($theme, body-2, font-size),
-    label-text-tracking: inspection.get-theme-typography($theme, body-2, letter-spacing),
-    label-text-weight: inspection.get-theme-typography($theme, body-2, font-weight)
-  );
-}
-
-// Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($theme) {
-  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
-
-  @return (touch-target-display: if($density-scale < -1, none, block));
-}
-
-// 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(
-    get-unthemable-tokens(),
-    get-color-tokens(token-definition.$placeholder-color-config),
-    get-typography-tokens(token-definition.$placeholder-typography-config),
-    get-density-tokens(token-definition.$placeholder-density-config)
-  );
-}

package/core/tokens/m2/mat/_chip.scss

@@ -1,63 +0,0 @@
-@use 'sass:map';
-@use '../../token-definition';
-@use '../../../theming/inspection';
-@use '../../../style/sass-utils';
-@use '../../../m2/palette' as m2-palette;
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, chip);
-
-// 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 (
-    disabled-container-opacity: 0.4,
-    trailing-action-opacity: 0.54,
-    trailing-action-focus-opacity: 1,
-    trailing-action-state-layer-color: transparent,
-    selected-trailing-action-state-layer-color: transparent,
-    trailing-action-hover-state-layer-opacity: 0,
-    trailing-action-focus-state-layer-opacity: 0,
-  );
-}
-
-// Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme, $palette-name: null) {
-  $foreground: null;
-  @if $palette-name == null {
-    $is-dark: inspection.get-theme-type($theme) == dark;
-    $grey-50: map.get(m2-palette.$grey-palette, 50);
-    $grey-900: map.get(m2-palette.$grey-palette, 900);
-    $foreground: if($is-dark, $grey-50, $grey-900);
-  }
-  @else {
-    $foreground: inspection.get-theme-color($theme, $palette-name, default-contrast);
-  }
-  @return (
-    // The color of the icon at the end of a disabled chip.
-    selected-disabled-trailing-icon-color: $foreground,
-    // The color of the icon at the end of the chip.
-    selected-trailing-icon-color: $foreground
-  );
-}
-
-// 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 sass-utils.deep-merge-all(
-      get-unthemable-tokens(),
-      get-color-tokens(token-definition.$placeholder-color-config),
-      get-typography-tokens(token-definition.$placeholder-typography-config),
-      get-density-tokens(token-definition.$placeholder-density-config)
-  );
-}

package/core/tokens/m2/mat/_dialog.scss

@@ -1,51 +0,0 @@
-@use '../../token-definition';
-@use '../../../style/elevation';
-@use '../../../style/sass-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, dialog);
-
-// 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 (
-    container-elevation-shadow: elevation.get-box-shadow(24),
-    container-max-width: 80vw,
-    container-small-max-width: 80vw,
-    container-min-width: 0,
-    actions-alignment: start,
-    actions-padding: 8px,
-    content-padding: 20px 24px,
-    with-actions-content-padding: 20px 24px,
-
-    // Note: the CSS class is `title` while the M2 tokens call it `subhead`.
-    // M3 calls it `headline` which is what we're aligning with.
-    headline-padding: 0 24px 9px,
-  );
-}
-
-// Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
-  @return ();
-}
-
-// 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 sass-utils.deep-merge-all(
-      get-unthemable-tokens(),
-      get-color-tokens(token-definition.$placeholder-color-config),
-      get-typography-tokens(token-definition.$placeholder-typography-config),
-      get-density-tokens(token-definition.$placeholder-density-config)
-  );
-}

package/core/tokens/m2/mat/_fab-small.scss

@@ -1,108 +0,0 @@
-@use 'sass:meta';
-@use '../../token-definition';
-@use '../../../theming/theming';
-@use '../../../theming/inspection';
-@use '../../../style/sass-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, fab-small);
-
-// 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) {
-  $is-dark: inspection.get-theme-type($theme) == dark;
-
-  @return (
-    // Color of icons and text projected into a FAB.
-    foreground-color: inspection.get-theme-color($theme, foreground, base),
-
-    // Color of the element that shows the hover, focus and pressed states.
-    state-layer-color: inspection.get-theme-color($theme, foreground, base),
-
-    // Color of the element that shows the hover, focus and pressed states while disabled.
-    disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-
-    // Color of the ripple element.
-    ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
-
-    // Opacity of the ripple when the button is hovered.
-    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
-
-    // Opacity of the ripple when the button is focused.
-    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
-
-    // Opacity of the ripple when the button is pressed.
-    pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
-
-    // MDC doesn't have tokens for disabled FABs so we need to implemented them ourselves.
-    // Background color of the container when the FAB is disabled.
-    disabled-state-container-color: inspection.get-theme-color($theme, background, disabled-button,
-      0.12),
-
-    // Color of the icons and projected text when the FAB is disabled.
-    disabled-state-foreground-color: inspection.get-theme-color($theme, foreground, disabled-button,
-      if($is-dark, 0.5, 0.38)),
-  );
-}
-
-// Generates the mapping for the properties that change based on the FAB palette color.
-@function private-get-color-palette-color-tokens($theme, $palette-name) {
-  // Ideally we would derive all values directly from the theme, but it causes a lot of regressions
-  // internally. For now we fall back to the old hardcoded behavior only for internal apps.
-  $foreground-color: null;
-  $state-layer-color: null;
-  $ripple-color: null;
-  $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
-
-  @if (token-definition.$private-is-internal-build or
-      meta.type-of($contrast-color) != 'color') {
-    $is-dark: inspection.get-theme-type($theme) == dark;
-    $container-color: inspection.get-theme-color($theme, $palette-name);
-    $contrast-tone: token-definition.contrast-tone($container-color, $is-dark);
-    $color: if($contrast-tone == 'dark', #000, #fff);
-    $foreground-color: $color;
-    $state-layer-color: $color;
-    $ripple-color: rgba($color, 0.1);
-  }
-  @else {
-    $foreground-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1);
-    $state-layer-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1);
-    $ripple-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 0.1);
-  }
-
-  @return (
-    foreground-color: $foreground-color,
-    state-layer-color: $state-layer-color,
-    ripple-color: $ripple-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) {
-  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
-
-  @return (
-    touch-target-display: if($density-scale < -1, none, block),
-  );
-}
-
-// 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(
-      get-unthemable-tokens(),
-      get-color-tokens(token-definition.$placeholder-color-config),
-      get-typography-tokens(token-definition.$placeholder-typography-config),
-      get-density-tokens(token-definition.$placeholder-density-config)
-  );
-}

package/core/tokens/m2/mat/_fab.scss

@@ -1,108 +0,0 @@
-@use 'sass:meta';
-@use '../../token-definition';
-@use '../../../theming/theming';
-@use '../../../theming/inspection';
-@use '../../../style/sass-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, fab);
-
-// 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) {
-  $is-dark: inspection.get-theme-type($theme) == dark;
-
-  @return (
-    // Color of icons and text projected into a FAB.
-    foreground-color: inspection.get-theme-color($theme, foreground, base),
-
-    // Color of the element that shows the hover, focus and pressed states.
-    state-layer-color: inspection.get-theme-color($theme, foreground, base),
-
-    // Color of the element that shows the hover, focus and pressed states while disabled.
-    disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-
-    // Color of the ripple element.
-    ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
-
-    // Opacity of the ripple when the button is hovered.
-    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
-
-    // Opacity of the ripple when the button is focused.
-    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
-
-    // Opacity of the ripple when the button is pressed.
-    pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
-
-    // MDC doesn't have tokens for disabled FABs so we need to implemented them ourselves.
-    // Background color of the container when the FAB is disabled.
-    disabled-state-container-color: inspection.get-theme-color($theme, background, disabled-button,
-      0.12),
-
-    // Color of the icons and projected text when the FAB is disabled.
-    disabled-state-foreground-color: inspection.get-theme-color($theme, foreground, disabled-button,
-      if($is-dark, 0.5, 0.38)),
-  );
-}
-
-// Generates the mapping for the properties that change based on the FAB palette color.
-@function private-get-color-palette-color-tokens($theme, $palette-name) {
-  // Ideally we would derive all values directly from the theme, but it causes a lot of regressions
-  // internally. For now we fall back to the old hardcoded behavior only for internal apps.
-  $foreground-color: null;
-  $state-layer-color: null;
-  $ripple-color: null;
-  $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
-
-  @if (token-definition.$private-is-internal-build or
-      meta.type-of($contrast-color) != 'color') {
-    $is-dark: inspection.get-theme-type($theme) == dark;
-    $container-color: inspection.get-theme-color($theme, $palette-name);
-    $contrast-tone: token-definition.contrast-tone($container-color, $is-dark);
-    $color: if($contrast-tone == 'dark', #000, #fff);
-    $foreground-color: $color;
-    $state-layer-color: $color;
-    $ripple-color: rgba($color, 0.1);
-  }
-  @else {
-    $foreground-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1);
-    $state-layer-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1);
-    $ripple-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 0.1);
-  }
-
-  @return (
-    foreground-color: $foreground-color,
-    state-layer-color: $state-layer-color,
-    ripple-color: $ripple-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) {
-  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
-
-  @return (
-    touch-target-display: if($density-scale < -1, none, block),
-  );
-}
-
-// 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(
-      get-unthemable-tokens(),
-      get-color-tokens(token-definition.$placeholder-color-config),
-      get-typography-tokens(token-definition.$placeholder-typography-config),
-      get-density-tokens(token-definition.$placeholder-density-config)
-  );
-}

package/core/tokens/m2/mat/_filled-button.scss

@@ -1,102 +0,0 @@
-@use 'sass:meta';
-@use '../../token-definition';
-@use '../../../theming/theming';
-@use '../../../theming/inspection';
-@use '../../../style/sass-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, filled-button);
-
-// 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 (
-    // Start/end padding of the button.
-    horizontal-padding: 16px,
-
-    // Space between the icon and the button's main content.
-    icon-spacing: 8px,
-
-    // Amount by which to offset the icon so that its presence
-    // doesn't increase throw off the horizontal padding.
-    icon-offset: -4px,
-  );
-}
-
-// Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
-  $is-dark: inspection.get-theme-type($theme) == dark;
-
-  @return (
-    // Color of the element that shows the hover, focus and pressed states.
-    state-layer-color: inspection.get-theme-color($theme, foreground, base),
-
-    // Color of the element that shows the hover, focus and pressed states while disabled.
-    disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-
-    // Color of the ripple element.
-    ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
-
-    // Opacity of the ripple when the button is hovered.
-    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
-
-    // Opacity of the ripple when the button is focused.
-    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
-
-    // Opacity of the ripple when the button is pressed.
-    pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
-  );
-}
-
-// Generates the mapping for the properties that change based on the button palette color.
-@function private-get-color-palette-color-tokens($theme, $palette-name) {
-  $state-layer-color: null;
-  $ripple-color: null;
-  $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
-
-  // Ideally we would derive all values directly from the theme, but it causes a lot of regressions
-  // internally. For now we fall back to the old hardcoded behavior only for internal apps.
-  @if (token-definition.$private-is-internal-build or
-      meta.type-of($contrast-color) != 'color') {
-    $is-dark: inspection.get-theme-type($theme) == dark;
-    $container-color: inspection.get-theme-color($theme, $palette-name);
-    $contrast-tone: token-definition.contrast-tone($container-color, $is-dark);
-    $color: if($contrast-tone == 'dark', #000, #fff);
-    $state-layer-color: $color;
-    $ripple-color: rgba($color, 0.1);
-  }
-  @else {
-    $state-layer-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1);
-    $ripple-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 0.1);
-  }
-
-  @return (
-    state-layer-color: $state-layer-color,
-    ripple-color: $ripple-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) {
-  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
-
-  @return (
-    touch-target-display: if($density-scale < -1, none, block),
-  );
-}
-
-// 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(
-      get-unthemable-tokens(),
-      get-color-tokens(token-definition.$placeholder-color-config),
-      get-typography-tokens(token-definition.$placeholder-typography-config),
-      get-density-tokens(token-definition.$placeholder-density-config)
-  );
-}