@angular/material 20.0.0-next.4 → 20.0.0-next.6

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

package/core/tokens/m2/mat/_legacy-button-toggle.scss

@@ -1,59 +0,0 @@
-@use '../../token-definition';
-@use '../../../theming/inspection';
-@use '../../../style/sass-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, legacy-button-toggle);
-
-// 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 (
-    height: 36px,
-    shape: 2px,
-    focus-state-layer-opacity: 1,
-  );
-}
-
-// Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
-  @return (
-    text-color: inspection.get-theme-color($theme, foreground, hint-text),
-    state-layer-color: inspection.get-theme-color($theme, background, focused-button),
-    selected-state-text-color: inspection.get-theme-color($theme, foreground, secondary-text),
-    selected-state-background-color: inspection.get-theme-color(
-        $theme, background, selected-button),
-    disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-button),
-    disabled-state-background-color: inspection.get-theme-color(
-        $theme, background, disabled-button-toggle),
-    disabled-selected-state-background-color: inspection.get-theme-color(
-        $theme, background, selected-disabled-button)
-  );
-}
-
-// 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-1, font-family),
-    label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
-    label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
-    label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
-    label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
-  );
-}
-
-// 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/_list.scss

@@ -1,44 +0,0 @@
-@use '../../token-definition';
-@use '../../../style/sass-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, list);
-
-// 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 (
-    // active indicator themable with M3
-    active-indicator-color: transparent,
-    active-indicator-shape: 4px,
-  );
-}
-
-// 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 (
-    list-item-leading-icon-start-space: 16px,
-    list-item-leading-icon-end-space: 32px,
-  );
-}
-
-// 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/_minimal-pseudo-checkbox.scss

@@ -1,43 +0,0 @@
-@use '../../token-definition';
-@use '../../../theming/inspection';
-@use '../../../style/sass-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, minimal-pseudo-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, $palette-name: accent) {
-  $is-dark: inspection.get-theme-type($theme) == dark;
-
-  @return (
-    selected-checkmark-color: inspection.get-theme-color($theme, $palette-name),
-    disabled-selected-checkmark-color: if($is-dark, #686868, #b0b0b0),
-  );
-}
-
-// 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)
-  );
-}