@angular/material 20.0.0-next.5 → 20.0.0-next.7

package/core/style/_menu-common.scss

@@ -1,94 +0,0 @@
-@use '@angular/cdk';
-
-@use './list-common';
-@use './layout-common';
-
-// The mixins below are shared between mat-menu and mat-select
-
-// menu width must be a multiple of 56px
-$overlay-min-width: 112px !default;   // 56 * 2
-$overlay-max-width: 280px !default;   // 56 * 5
-
-$item-height: 48px !default;
-$side-padding: 16px !default;
-$icon-margin: 16px !default;
-
-
-@mixin base() {
-  min-width: $overlay-min-width;
-  max-width: $overlay-max-width;
-  overflow: auto;
-}
-
-@mixin item-base() {
-  @include list-common.truncate-line();
-
-  // Needs to be a block for the ellipsis to work.
-  display: block;
-  line-height: $item-height;
-  height: $item-height;
-  padding: 0 $side-padding;
-
-  text-align: left;
-  text-decoration: none;   // necessary to reset anchor tags
-
-  // Required for Edge not to show scrollbars when setting the width manually. See #12112.
-  max-width: 100%;
-
-  &[disabled] {
-    cursor: default;
-  }
-
-  [dir='rtl'] & {
-    text-align: right;
-  }
-
-  .mat-icon {
-    margin-right: $icon-margin;
-    vertical-align: middle;
-
-    svg {
-      vertical-align: top;
-    }
-
-    [dir='rtl'] & {
-      margin-left: $icon-margin;
-      margin-right: 0;
-    }
-  }
-}
-
-@mixin item-submenu-icon($item-spacing, $icon-size) {
-  width: $icon-size;
-  height: 10px;
-  fill: currentColor;
-
-  // We use `padding` here, because the margin can collapse depending on the other content.
-  padding-left: $item-spacing;
-
-  [dir='rtl'] & {
-    padding-right: $item-spacing;
-    padding-left: 0;
-
-    // Invert the arrow direction.
-    polygon {
-      transform: scaleX(-1);
-      transform-origin: center;
-    }
-  }
-
-  // Fix for Chromium-based browsers blending in the `currentColor` with the background.
-  @include cdk.high-contrast {
-    fill: CanvasText;
-  }
-}
-
-@mixin item-ripple() {
-  @include layout-common.fill;
-
-  // Prevent any pointer events on the ripple container for a menu item. The ripple container is
-  // not the trigger element for the ripples and can be therefore disabled like that. Disabling
-  // the pointer events ensures that there is no `click` event that can bubble up and cause
-  // the menu panel to close.
-  pointer-events: none;
-}

package/core/theming/_palette-deprecated.scss

@@ -1,76 +0,0 @@
-@use './palette';
-
-// @deprecated Use `$red-palette` instead
-$red: palette.$red-palette;
-
-// @deprecated Use `$pink-palette` instead
-$pink: palette.$pink-palette;
-
-// @deprecated Use `$indigo-palette` instead
-$indigo: palette.$indigo-palette;
-
-// @deprecated Use `$purple-palette` instead.
-$purple: palette.$purple-palette;
-
-// @deprecated Use `$deep-purple-palette` instead.
-$deep-purple: palette.$deep-purple-palette;
-
-// @deprecated Use `$blue-palette` instead.
-$blue: palette.$blue-palette;
-
-// @deprecated Use `$light-blue-palette` instead.
-$light-blue: palette.$light-blue-palette;
-
-// @deprecated Use `$cyan-palette` instead.
-$cyan: palette.$cyan-palette;
-
-// @deprecated Use `$teal-palette` instead.
-$teal: palette.$teal-palette;
-
-// @deprecated Use `$green-palette` instead.
-$green: palette.$green-palette;
-
-// @deprecated Use `$light-green-palette` instead.
-$light-green: palette.$light-green-palette;
-
-// @deprecated Use `$lime-palette` instead.
-$lime: palette.$lime-palette;
-
-// @deprecated Use `$yellow-palette` instead.
-$yellow: palette.$yellow-palette;
-
-// @deprecated Use `$amber-palette` instead.
-$amber: palette.$amber-palette;
-
-// @deprecated Use `$orange-palette` instead.
-$orange: palette.$orange-palette;
-
-// @deprecated Use `$deep-orange-palette` instead.
-$deep-orange: palette.$deep-orange-palette;
-
-// @deprecated Use `$brown-palette` instead.
-$brown: palette.$brown-palette;
-
-// @deprecated Use `$grey-palette` instead.
-$grey: palette.$grey-palette;
-
-// @deprecated Use `$gray-palette` instead.
-$gray: palette.$gray-palette;
-
-// @deprecated Use `$blue-grey-palette` instead.
-$blue-grey: palette.$blue-grey-palette;
-
-// @deprecated Use `$blue-gray-palette` instead.
-$blue-gray: palette.$blue-gray-palette;
-
-// @deprecated Use `$light-theme-background-palette` instead.
-$light-theme-background: palette.$light-theme-background-palette;
-
-// @deprecated Use `$dark-theme-background-palette` instead.
-$dark-theme-background: palette.$dark-theme-background-palette;
-
-// @deprecated Use `$light-theme-foreground-palette` instead.
-$light-theme-foreground: palette.$light-theme-foreground-palette;
-
-// @deprecated Use `$dark-theme-foreground-palette` instead.
-$dark-theme-foreground: palette.$dark-theme-foreground-palette;

package/core/theming/_theming-deprecated.scss

@@ -1,27 +0,0 @@
-@use '../m2/theming' as m2-theming;
-@use '../m2/palette' as m2-palette;
-
-// @deprecated Use `get-color-from-palette`.
-@function color($palette, $hue: default, $opacity: null) {
-  @return m2-theming.get-color-from-palette($palette, $hue, $opacity);
-}
-
-// @deprecated Use `get-contrast-color-from-palette`.
-@function contrast($palette, $hue) {
-  @return m2-theming.get-contrast-color-from-palette($palette, $hue);
-}
-
-// @deprecated Use `define-palette`.
-@function palette($base-palette, $default: 500, $lighter: 100, $darker: 700, $text: $default) {
-  @return m2-theming.define-palette($base-palette, $default, $lighter, $darker, $text);
-}
-
-// @deprecated Use `define-light-theme`.
-@function dark-theme($primary, $accent: null, $warn: palette(m2-palette.$red-palette)) {
-  @return m2-theming.define-dark-theme($primary, $accent, $warn);
-}
-
-// @deprecated Use `define-light-theme`.
-@function light-theme($primary, $accent: null, $warn: palette(m2-palette.$red-palette)) {
-  @return m2-theming.define-light-theme($primary, $accent, $warn);
-}

package/core/tokens/_density.scss

@@ -1,170 +0,0 @@
-@use 'sass:list';
-@use 'sass:map';
-@use '../theming/theming';
-
-/// Maps namespaced tokens to per-density-scale values.
-/// This is used as a temporary solution for density, since Material Design currently does not have
-/// systemized density.
-/// Format:
-/// (
-///   (mat, comp): (
-///     token: (<scale 0 value>, <scale -1 value>, <scale -2 value>, ...),
-///     ...
-///   ),
-///   ...
-/// )
-// TODO(mmalerba): Add density tokens for remaining components.
-$_density-tokens: (
-    (mat, autocomplete): (),
-    (mat, badge): (),
-    (mat, bottom-sheet): (),
-    (mat, card): (),
-    (mat, checkbox): (
-      state-layer-size: (40px, 36px, 32px, 28px),
-      touch-target-display: (block, block, none, none),
-    ),
-    (mat, chip): (
-      container-height: (32px, 28px, 24px),
-    ),
-    (mat, circular-progress): (),
-    (mat, datepicker): (),
-    (mat, dialog): (),
-    (mat, divider): (),
-    (mat, elevated-card): (),
-    (mat, expansion): (
-      header-collapsed-state-height: (48px, 44px, 40px, 36px),
-      header-expanded-state-height: (64px, 60px, 56px, 48px),
-    ),
-    (mat, extended-fab): (),
-    (mat, fab): (
-      touch-target-display: (block, block, none, none),
-    ),
-    (mat, fab-small): (),
-    (mat, filled-button): (
-      touch-target-display: (block, block, none, none),
-      container-height: (40px, 36px, 32px, 28px),
-    ),
-    (mat, filled-text-field): (),
-    (mat, form-field): (
-      container-height: (56px, 52px, 48px, 44px, 40px, 36px),
-      filled-label-display: (block, block, none, none, none, none),
-      container-vertical-padding: (16px, 14px, 12px, 10px, 8px, 6px),
-      filled-with-label-container-padding-top: (24px, 22px, 12px, 10px, 8px, 6px),
-      filled-with-label-container-padding-bottom: (8px, 6px, 12px, 10px, 8px, 6px),
-    ),
-    (mat, full-pseudo-checkbox): (),
-    (mat, grid-list): (),
-    (mat, icon): (),
-    (mat, icon-button): (
-      touch-target-display: (block, block, none, none),
-      // The size caps out at 24px, because anything lower will be smaller than the icon.
-      state-layer-size: (40px, 36px, 32px, 28px, 24px, 24px),
-    ),
-    (mat, linear-progress): (),
-    (mat, list): (
-      list-item-leading-icon-start-space: (16px, 12px, 8px, 4px),
-      list-item-leading-icon-end-space: (16px, 12px, 8px, 4px),
-      list-item-one-line-container-height: (48px, 44px, 40px, 36px, 32px, 24px),
-      list-item-two-line-container-height: (64px, 60px, 56px, 52px, 48px, 48px),
-      list-item-three-line-container-height: (88px, 84px, 80px, 76px, 72px, 56px),
-    ),
-    (mat, menu): (),
-    (mat, minimal-pseudo-checkbox): (),
-    (mat, optgroup): (),
-    (mat, option): (),
-    (mat, outlined-button): (
-      container-height: (40px, 36px, 32px, 28px),
-      touch-target-display: (block, block, none, none),
-    ),
-    (mat, outlined-card): (),
-    (mat, outlined-text-field): (),
-    (mat, paginator): (
-      container-size: (56px, 52px, 48px, 40px),
-      form-field-container-height: (40px, 40px, 40px, 40px, 40px, 36px),
-      form-field-container-vertical-padding: (8px, 8px, 8px, 8px, 8px, 6px),
-      touch-target-display: (block, block, none, none),
-    ),
-    (mat, plain-tooltip): (),
-    (mat, protected-button): (
-      touch-target-display: (block, block, none, none),
-      container-height: (40px, 36px, 32px, 28px),
-    ),
-    (mat, radio): (
-      touch-target-display: (block, block, none, none),
-      state-layer-size: (40px, 36px, 32px, 28px),
-    ),
-    (mat, ripple): (),
-    (mat, secondary-navigation-tab): (
-      container-height: (48px, 44px, 40px, 36px, 32px),
-    ),
-    (mat, select): (
-      arrow-transform: (translateY(-8px), translateY(-8px), none),
-    ),
-    (mat, sidenav): (),
-    (mat, slide-toggle): (),
-    (mat, slider): (),
-    (mat, snack-bar): (),
-    (mat, sort): (),
-    (mat, standard-button-toggle): (
-      height: (40px, 40px, 40px, 36px, 24px),
-    ),
-    (mat, stepper): (
-      header-height: (72px, 68px, 64px, 60px, 42px),
-    ),
-    (mat, switch): (),
-    (mat, tab-header): (),
-    (mat, tab-indicator): (),
-    (mat, table): (
-      header-container-height: (56px, 52px, 48px, 44px, 40px),
-      footer-container-height: (52px, 48px, 44px, 40px, 36px),
-      row-item-container-height: (52px, 48px, 44px, 40px, 36px),
-    ),
-    (mat, text-button): (
-      touch-target-display: (block, block, none, none),
-      container-height: (40px, 36px, 32px, 28px),
-    ),
-    (mat, timepicker): (),
-    (mat, tonal-button): (
-      container-height: (40px, 36px, 32px, 28px),
-      touch-target-display: (block, block, none, none),
-    ),
-    (mat, toolbar): (
-      standard-height: (64px, 60px, 56px, 52px),
-      mobile-height: (56px, 52px, 48px, 44px),
-    ),
-    (mat, tree): (
-      node-min-height: (48px, 44px, 40px, 36px, 28px),
-    ),
-);
-
-/// Gets the value for the given density scale from the given set of density values.
-/// @param {List} $density-values The list of values for each density scale.
-/// @param {Number} $scale The density scale to get the value for.
-/// @return {*} The value for the given scale.
-@function _get-value-for-scale($density-values, $scale) {
-  $scale: theming.clamp-density($scale, -1 * list.length($density-values) + 1);
-  $index: -$scale + 1;
-  @return list.nth($density-values, $index);
-}
-
-/// Gets a map of all density tokens for the given scale
-/// @param {Number} $scale The density scale
-/// @return {Map} Map of all fully qualified density tokens for the given scale.
-@function get-tokens-for-scale($scale) {
-  $result: ();
-  @each $namespace, $tokens in $_density-tokens {
-    @each $token, $density-values in $tokens {
-      $tokens: map.set($tokens, $token, _get-value-for-scale($density-values, $scale));
-    }
-    $result: map.set($result, $namespace, $tokens);
-  }
-  @return $result;
-}
-
-/// Checks whether the given token is systemized by Angular Material's made up density system.
-/// @param {List} $namespace The namespace of the token
-/// @param {String} $token The name of the token
-/// @return {Boolean} Whether the token is systemized by the density system
-@function is-systemized($namespace, $token) {
-  @return map.get($_density-tokens, $namespace, $token) != null;
-}

package/core/tokens/_token-definition.scss

@@ -1,224 +0,0 @@
-@use 'sass:color';
-@use 'sass:list';
-@use 'sass:map';
-@use 'sass:meta';
-@use 'sass:math';
-@use '../m2/palette' as m2-palette;
-@use '../m2/theming' as m2-theming;
-@use '../m2/typography' as m2-typography;
-
-// Indicates whether we're building internally. Used for backwards compatibility.
-$private-is-internal-build: false;
-
-$_placeholder-color-palette: m2-theming.define-palette(m2-palette.$red-palette);
-
-// Placeholder color config that can be passed to token getter functions when generating token
-// slots.
-$placeholder-color-config: (
-  primary: $_placeholder-color-palette,
-  accent: $_placeholder-color-palette,
-  warn: $_placeholder-color-palette,
-  is-dark: false,
-  foreground: m2-palette.$light-theme-foreground-palette,
-  background: m2-palette.$light-theme-background-palette,
-);
-
-$_placeholder-typography-level-config: m2-typography.typography-config-level-from-mdc(body1);
-
-// Placeholder typography config that can be passed to token getter functions when generating token
-// slots.
-$placeholder-typography-config: (
-  font-family: 'Roboto, sans-serif',
-  headline-1: $_placeholder-typography-level-config,
-  headline-2: $_placeholder-typography-level-config,
-  headline-3: $_placeholder-typography-level-config,
-  headline-4: $_placeholder-typography-level-config,
-  headline-5: $_placeholder-typography-level-config,
-  headline-6: $_placeholder-typography-level-config,
-  subtitle-1: $_placeholder-typography-level-config,
-  subtitle-2: $_placeholder-typography-level-config,
-  body-1: $_placeholder-typography-level-config,
-  body-2: $_placeholder-typography-level-config,
-  caption: $_placeholder-typography-level-config,
-  button: $_placeholder-typography-level-config,
-  overline: $_placeholder-typography-level-config,
-  subheading-1: $_placeholder-typography-level-config,
-  title: $_placeholder-typography-level-config,
-);
-
-// Placeholder density config that can be passed to token getter functions when generating token
-// slots.
-$placeholder-density-config: 0;
-
-$_tokens: null;
-$_component-prefix: null;
-$_system-fallbacks: null;
-
-/// Gets the MDC tokens for the given prefix, M3 token values, and supported token slots.
-/// @param {List} $prefix The token prefix for the given tokens.
-/// @param {Map|(Map, Map)} $values A map of M3 token values for the given prefix.
-///  This param may also be a tuple of maps, the first one representing the default M3 token values,
-//   and the second containing overrides for different color variants.
-//   Single map example:
-//     (token1: green, token2: 2px)
-//   Tuple example:
-//     (
-//       (token1: green, token2: 2px),
-//       (
-//         secondary: (token1: blue),
-//         error: (token1: red),
-//       )
-//     )
-/// @param {Map} $slots A map of token slots, with null value indicating the token is not supported.
-/// @param {String|null} $variant The name of the variant the token values are for.
-/// @return {Map} A map of fully qualified token names to values, for only the supported tokens.
-@function namespace-tokens($prefix, $values, $slots, $variant: null) {
-  $result: ();
-  @if $variant == null and meta.type-of($values) == 'list' and list.length($values == 2) {
-    $variants: list.nth($values, 2);
-    $values: list.nth($values, 1);
-    @each $variant, $overrides in $variants {
-
-      $result: map.merge($result, namespace-tokens($prefix, $overrides, $slots, $variant));
-    }
-  }
-  $used-token-names: map.keys(_filter-nulls(map.get($slots, $prefix)));
-  $used-m3-tokens: _pick(_filter-nulls($values), $used-token-names);
-  $prefix: if($variant == null, $prefix, list.append($prefix, $variant));
-  @return map.merge($result, ($prefix: $used-m3-tokens));
-}
-
-/// Hardcode the given value, or null if hardcoded values are excluded.
-@function hardcode($value, $exclude-hardcoded) {
-  @return if($exclude-hardcoded, null, $value);
-}
-
-/// Sets all of the standard typography tokens for the given token base name to the given typography
-/// level.
-/// @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;
-}
-
-/// Maps the values in a map to new values using the given mapping function
-/// @param {Map} $map The maps whose values will be mapped to new values.
-/// @param {Function} $fn The value mapping function.
-/// @param {ArgList} $args Additional arguments to pass to the mapping function.
-/// @return {Map} A new map with its values updated using the mapping function.
-@function map-values($map, $fn, $args...) {
-  $result: ();
-  @each $key, $value in $map {
-    $result: map.set($result, $key, meta.call($fn, $value, $args...));
-  }
-  @return $result;
-}
-
-/// Renames the keys in a map
-/// @param {Map} $map The map whose keys should be renamed
-/// @param {Map} $rename-keys A map of original key to renamed key to apply to $map
-/// @return {Map} The result of applying the given key renames to the given map.
-@function rename-map-keys($map, $rename-keys) {
-  $result: $map;
-  @each $old-key-name, $new-key-name in $rename-keys {
-    @if map.has-key($map, $old-key-name) {
-      $result: map.set($result, $new-key-name, map.get($map, $old-key-name));
-    }
-  }
-  @return $result;
-}
-
-/// Inherited function from MDC that computes which contrast tone to use on top of a color.
-/// This is used only in a narrow set of use cases when generating M2 button tokens to maintain
-/// backwards compatibility.
-/// @param {Color} $value Color for which we're calculating the contrast tone.
-/// @param {Boolean} $is-dark Whether the current theme is dark.
-/// @return {Map} Either `dark` or `light`.
-@function contrast-tone($value, $is-dark) {
-  @if ($value == 'dark') {
-    @return 'light';
-  }
-
-  @if ($value == 'light') {
-    @return 'dark';
-  }
-
-  // Fallback if the app is using a non-color palette (e.g. CSS variable based).
-  @if (meta.type-of($value) != 'color') {
-    @return if($is-dark, 'light', 'dark');
-  }
-
-  $minimum-contrast: 3.1;
-  $light-contrast: _contrast($value, #fff);
-  $dark-contrast: _contrast($value, rgba(0, 0, 0, 0.87));
-
-  @if ($light-contrast < $minimum-contrast) and ($dark-contrast > $light-contrast) {
-    @return 'dark';
-  }
-
-  @return 'light';
-}
-
-@function _linear-channel-value($channel-value) {
-  $normalized-channel-value: math.div($channel-value, 255);
-
-  @if ($normalized-channel-value < 0.03928) {
-    @return math.div($normalized-channel-value, 12.92);
-  }
-
-  @return math.pow(math.div($normalized-channel-value + 0.055, 1.055), 2.4);
-}
-
-// Calculate the luminance for a color.
-// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
-@function _luminance($color) {
-  $red: _linear-channel-value(color.red($color));
-  $green: _linear-channel-value(color.green($color));
-  $blue: _linear-channel-value(color.blue($color));
-
-  @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
-}
-
-// Calculate the contrast ratio between two colors.
-// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
-@function _contrast($back, $front) {
-  $back-lum: _luminance($back) + 0.05;
-  $fore-lum: _luminance($front) + 0.05;
-
-  @return math.div(math.max($back-lum, $fore-lum), math.min($back-lum, $fore-lum));
-}
-
-/// Picks a submap containing only the given keys out the given map.
-/// @param {Map} $map The map to pick from.
-/// @param {List} $keys The map keys to pick.
-/// @return {Map} A submap containing only the given keys.
-@function _pick($map, $keys) {
-  $result: ();
-  @each $key in $keys {
-    @if map.has-key($map, $key) {
-      $result: map.set($result, $key, map.get($map, $key));
-    }
-  }
-  @return $result;
-}
-
-
-/// Filters keys with a null value out of the map.
-/// @param {Map} $map The map to filter.
-/// @return {Map} The given map with all of the null keys filtered out.
-@function _filter-nulls($map) {
-  $result: ();
-  @each $key, $val in $map {
-    @if $val != null {
-      $result: map.set($result, $key, $val);
-    }
-  }
-  @return $result;
-}