@ng-matero/extensions 17.1.4 → 17.2.0

package/core/theming/m3/_m3-tokens.scss

@@ -0,0 +1,308 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+@use '@angular/material' as mat;
+@use '@material/tokens/v0_161' as mdc-tokens;
+@use './m3-density';
+@use './custom-tokens';
+@use './format-tokens';
+@use '../../tokens/m2';
+
+/// 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;
+}
+
+/// 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)} $m3-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, $m3-values, $slots, $variant: null) {
+  $result: ();
+  @if $variant == null and meta.type-of($m3-values) == 'list' and list.length($m3-values == 2) {
+    $variants: list.nth($m3-values, 2);
+    $m3-values: list.nth($m3-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($m3-values), $used-token-names);
+  $prefix: if($variant == null, $prefix, list.append($prefix, $variant));
+  @return map.merge($result, ($prefix: $used-m3-tokens));
+}
+
+/// Generates tokens for the given palette with the given prefix.
+/// @param {Map} $palette The palette to generate tokens for
+/// @param {String} $prefix The key prefix used to name the tokens
+/// @return {Map} A set of tokens for the given palette
+@function _generate-palette-tokens($palette, $prefix) {
+  $palette: map.remove($palette, neutral, neutral-variant);
+  $result: ();
+  @each $hue, $value in $palette {
+    $result: map.set($result, '#{$prefix}#{$hue}', $value);
+  }
+  @return $result;
+}
+
+/// Creates a set of `md-ref-palette` tokens from the given palettes. (See
+/// https://github.com/material-components/material-components-web/blob/master/packages/mdc-tokens/v0_161/_md-ref-palette.scss)
+/// @param {Map} $primary The primary palette
+/// @param {Map} $secondary The secondary palette
+/// @param {Map} $tertiary The tertiary palette
+/// @param {Map} $error The error palette
+/// @return {Map} A set of `md-ref-palette` tokens
+@function _generate-ref-palette-tokens($primary, $tertiary, $error) {
+  @return mat.private-merge-all(
+      (black: #000, white: #fff),
+      _generate-palette-tokens($primary, primary),
+      _generate-palette-tokens(map.get($primary, secondary), secondary),
+      _generate-palette-tokens($tertiary, tertiary),
+      _generate-palette-tokens(map.get($primary, neutral), neutral),
+      _generate-palette-tokens(map.get($primary, neutral-variant), neutral-variant),
+      _generate-palette-tokens($error, error),
+  );
+}
+
+/// Creates a set of `md-ref-typeface` tokens from the given palettes. (See
+/// https://github.com/material-components/material-components-web/blob/master/packages/mdc-tokens/v0_161/_md-ref-typeface.scss)
+/// @param {List|String} $brand The font-family to use for brand text
+/// @param {List|String} $plain The font-family to use for plain text
+/// @param {String} $bold The font-weight to use for bold text
+/// @param {String} $medium The font-weight to use for medium text
+/// @param {String} $regular The font-weight to use for regular text
+/// @return {Map} A set of `md-ref-typeface` tokens
+@function _generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular) {
+  @return (
+    brand: $brand,
+    plain: $plain,
+    weight-bold: $bold,
+    weight-medium: $medium,
+    weight-regular: $regular,
+  );
+}
+
+/// At the time of writing, some color tokens (e.g. disabled state) are defined as a solid color
+/// token and a separate opacity token. This function applies the opacity to the color and drops the
+/// opacity key from the map. Can be removed once b/213331407 is resolved.
+/// @param {Map} $tokens The map of tokens currently being generated
+/// @param {Map} $all-tokens A map of all tokens, including hardcoded values
+/// @param {List} $pairs Pairs of color token names and their opacities. Should be in the shape of
+/// `((color: 'color-key', opacity: 'opacity-key'))`.
+/// @return {Map} The initial tokens with the combined color values.
+@function _combine-color-tokens($tokens, $opacity-lookup, $pairs) {
+  $result: $tokens;
+
+  @each $pair in $pairs {
+    $color-key: map.get($pair, color);
+    $opacity-key: map.get($pair, opacity);
+    $color: map.get($tokens, $color-key);
+    $opacity: map.get($opacity-lookup, $opacity-key);
+
+    @if meta.type-of($color) == 'color' {
+      @if meta.type-of($opacity) != 'number' {
+        @error 'Cannot find valid opacity value for color token "#{$color-key}"';
+      }
+
+      $result: map.remove($result, $opacity-key);
+      $result: map.set($result, $color-key, rgba($color, $opacity));
+    }
+  }
+
+  @return $result;
+}
+
+/// Generates a set of namespaced tokens for all components.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $include-non-systemized Whether to include non-systemized tokens
+/// @return {Map} A map of namespaced tokens
+@function _generate-tokens($systems, $include-non-systemized: false) {
+  $systems: map.merge((
+    md-sys-color: (),
+    md-sys-elevation: (),
+    md-sys-motion: (),
+    md-sys-shape: (),
+    md-sys-state: (),
+    md-sys-typescale: ()
+  ), $systems);
+  $exclude-hardcoded: not $include-non-systemized;
+
+  // DO NOT REMOVE
+  // This function is used internally.
+  $systems: format-tokens.private-format-tokens($systems);
+
+  // TODO(mmalerba): Refactor this to not depend on the legacy theme when moving out of
+  //  material-experimental. This is a hack for now because there is no good way to get the token
+  //  slots in material-experimental without exposing them all from material.
+  $fake-theme: mat.define-light-theme((
+    color: (
+      primary: mat.define-palette(mat.$red-palette),
+      accent: mat.define-palette(mat.$red-palette),
+      warn: mat.define-palette(mat.$red-palette),
+    ),
+    typography: mat.define-typography-config(),
+    density: 0
+  ));
+  $token-slots: m2.m2-tokens-from-theme($fake-theme);
+
+  // TODO(mmalerba): Fill in remaining tokens.
+  $result: mat.private-deep-merge-all(
+    _namespace-tokens(
+      (mtx, alert),
+      custom-tokens.alert($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mtx, colorpicker),
+      custom-tokens.colorpicker($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mtx, datetimepicker),
+      custom-tokens.datetimepicker($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mtx, drawer),
+      custom-tokens.drawer($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mtx, grid),
+      custom-tokens.grid($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mtx, loader),
+      custom-tokens.loader($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mtx, popover),
+      custom-tokens.popover($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mtx, progress),
+      custom-tokens.progress($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mtx, select),
+      custom-tokens.select($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mtx, split),
+      custom-tokens.split($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+  );
+
+  // Strip out tokens that are systemized by our made up density system.
+  @each $namespace, $tokens in $result {
+    @each $token, $value in $tokens {
+      @if m3-density.is-systemized($namespace, $token) {
+        $tokens: map.remove($tokens, $token);
+      }
+    }
+    $result: map.set($result, $namespace, $tokens);
+  }
+  @return $result;
+}
+
+/// Generates a set of namespaced color tokens for all components.
+/// @param {String} $type The type of theme system (light or dark)
+/// @param {Map} $primary The primary palette
+/// @param {Map} $tertiary The tertiary palette
+/// @param {Map} $error The error palette
+/// @return {Map} A map of namespaced color tokens
+@function generate-color-tokens($type, $primary, $tertiary, $error) {
+  $ref: (
+    md-ref-palette: _generate-ref-palette-tokens($primary, $tertiary, $error)
+  );
+  $sys-color: if($type == dark,
+    mdc-tokens.md-sys-color-values-dark($ref),
+    mdc-tokens.md-sys-color-values-light($ref));
+  @return _generate-tokens(map.merge($ref, (
+    md-sys-color: $sys-color,
+    // Because the elevation values are always combined with color values to create the box shadow,
+    // elevation needs to be part of the color dimension.
+    md-sys-elevation: mdc-tokens.md-sys-elevation-values(),
+    // Because the state values are sometimes combined with color values to create rgba colors,
+    // state needs to be part of color dimension.
+    // TODO(mmalerba): If at some point we remove the need for these combined values, we can move
+    //  state to the base dimension.
+    md-sys-state: mdc-tokens.md-sys-state-values(),
+  )));
+}
+
+/// Generates a set of namespaced color tokens for all components.
+/// @param {String|List} $brand The brand font-family
+/// @param {String|List} $plain The plain fort-family
+/// @param {String|Number} $bold The bold font-weight
+/// @param {String|Number} $medium The medium font-weight
+/// @param {String|Number} $regular The regular font-weight
+/// @return {Map} A map of namespaced typography tokens
+@function generate-typography-tokens($brand, $plain, $bold, $medium, $regular) {
+  $ref: (
+    md-ref-typeface: _generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular)
+  );
+  @return _generate-tokens((
+    md-sys-typescale: mdc-tokens.md-sys-typescale-values($ref)
+  ));
+}
+
+/// Generates a set of namespaced density tokens for all components.
+/// @param {String|Number} $scale The regular font-weight
+/// @return {Map} A map of namespaced density tokens
+@function generate-density-tokens($scale) {
+  @return m3-density.get-tokens-for-scale($scale);
+}
+
+/// Generates a set of namespaced tokens not related to color, typography, or density for all
+/// components.
+/// @return {Map} A map of namespaced tokens not related to color, typography, or density
+@function generate-base-tokens() {
+  // TODO(mmalerba): Exclude density tokens once implemented.
+  @return _generate-tokens((
+    md-sys-motion: mdc-tokens.md-sys-motion-values(),
+    md-sys-shape: mdc-tokens.md-sys-shape-values(),
+  ), $include-non-systemized: true);
+}

package/core/tokens/_token-utils.scss

@@ -1,11 +1,16 @@
+@use 'sass:list';
 @use 'sass:map';
 @use '@material/elevation/elevation-theme' as mdc-elevation-theme;
 @use '@material/theme/custom-properties' as mdc-custom-properties;
 @use '@material/theme/theme' as mdc-theme;
 @use '@material/theme/keys' as mdc-keys;
 @use '@angular/material' as mat;
+@use '../style/sass-utils';
 @use '../typography/typography';
 
+// Indicates whether we're building internally. Used for backwards compatibility.
+$private-is-internal-build: false;
+
 $_placeholder-color-palette: mat.define-palette(mat.$red-palette);
 
 // Placeholder color config that can be passed to token getter functions when generating token
@@ -107,6 +112,28 @@ $_component-prefix: null;
   @return mdc-custom-properties.create-varname('#{$_component-prefix}-#{$token}');
 }
 
+// TODO(crisbeto): should be able to replace the usages of `get-token-variable` with this.
+// Returns a `var()` reference to a specific token. Intended for declarations
+// where the token has to be referenced as a part of a larger expression.
+@function get-token-variable-reference($token, $emit-fallback: false) {
+  @if $_component-prefix == null or $_tokens == null {
+    @error '`get-token-variable-reference` must be used within `use-tokens`';
+  }
+  @if not map.has-key($_tokens, $token) {
+    @error 'Token #{$token} does not exist. Configured tokens are: #{map.keys($_tokens)}';
+  }
+
+  $var: get-token-variable($token);
+  $fallback: if($emit-fallback, map.get($_tokens, $token), null);
+
+  @if ($fallback != null) {
+    @return var($var, $fallback);
+  }
+  @else {
+    @return var($var);
+  }
+}
+
 @mixin create-token-values($prefix, $tokens) {
   @include _configure-token-prefix($prefix...) {
     @include mdc-keys.declare-custom-properties($tokens, $_component-prefix);
@@ -124,3 +151,116 @@ $_component-prefix: null;
     $shadow-color-token: null,
   ));
 }
+
+/// Checks whether a list starts wih a given prefix
+/// @param {List} $list The list value to check the prefix of.
+/// @param {List} $prefix The prefix to check.
+/// @return {Boolean} Whether the list starts with the prefix.
+@function _is-prefix($list, $prefix) {
+  @for $i from 1 through list.length($prefix) {
+    @if list.nth($list, $i) != list.nth($prefix, $i) {
+      @return false;
+    }
+  }
+  @return true;
+}
+
+/// Gets the supported color variants in the given token set for the given prefix.
+/// @param {Map} $tokens The full token map.
+/// @param {List} $prefix The component prefix to get color variants for.
+/// @return {List} The supported color variants.
+@function _supported-color-variants($tokens, $prefix) {
+  $result: ();
+  @each $namespace in map.keys($tokens) {
+    @if list.length($prefix) == list.length($namespace) - 1 and _is-prefix($namespace, $prefix) {
+      $result: list.append($result, list.nth($namespace, list.length($namespace)), comma);
+    }
+  }
+  @return $result;
+}
+
+/// Gets the token values for the given components prefix with the given options.
+/// @param {Map} $tokens The full token map.
+/// @param {List} $prefix The component prefix to get the token values for.
+/// @param {ArgList} Any additional options
+///   Currently the additional supported options are:
+//     - $color-variant - The color variant to use for the component
+//     - $emit-overrides-only - Whether to emit *only* the overrides for the
+//                              specific color variant, or all color styles. Defaults to false.
+/// @throws If given options are invalid
+/// @return {Map} The token values for the requested component.
+@function get-tokens-for($tokens, $prefix, $options...) {
+  $options: sass-utils.validate-keyword-args($options, (color-variant, emit-overrides-only));
+  @if $tokens == () {
+    @return ();
+  }
+  $values: map.get($tokens, $prefix);
+  $color-variant: map.get($options, color-variant);
+  $emit-overrides-only: map.get($options, emit-overrides-only);
+  @if $color-variant == null {
+    @return $values;
+  }
+  $overrides: map.get($tokens, list.append($prefix, $color-variant));
+  @if $overrides == null {
+    @error #{'Invalid color variant: '}#{$color-variant}#{'. Supported color variants are: '}#{
+      _supported-color-variants($tokens, $prefix)
+    }#{'.'};
+  }
+  @return if($emit-overrides-only, $overrides, map.merge($values, $overrides));
+}
+
+/// Emits new token values for the given tokens.
+/// Verifies that the tokens passed in are valid tokens.
+/// New token values are emitted under the current selector or root.
+@mixin batch-create-token-values(
+  $tokens: (),
+  $mat-prefix: '',
+  $mdc-prefix: '',
+  $mat-tokens: (),
+  $mdc-tokens: ()
+) {
+  $custom-mat-tokens: ();
+  $custom-mdc-tokens: ();
+
+  $mat-token-names: map.keys($mat-tokens);
+  $mdc-token-names: map.keys($mdc-tokens);
+  $valid-token-names: _get-valid-token-names($mat-tokens, $mdc-tokens);
+
+  @each $name, $value in $tokens {
+    $is-mat-token: list.index($mat-token-names, $name) != null;
+    $is-mdc-token: list.index($mdc-token-names, $name) != null;
+
+    @if ($is-mat-token) {
+      $custom-mat-tokens: map.set($custom-mat-tokens, $name, $value);
+    }
+
+    @if ($is-mdc-token) {
+      $custom-mdc-tokens: map.set($custom-mdc-tokens, $name, $value);
+    }
+
+    @if (list.index($valid-token-names, $name) == null) {
+      @error (
+        'Invalid token: "' + $name + '"'
+        'Valid tokens include: ' $valid-token-names
+      );
+    }
+  }
+
+  @include sass-utils.current-selector-or-root() {
+    @include create-token-values($mat-prefix, $custom-mat-tokens);
+    @include create-token-values($mdc-prefix, $custom-mdc-tokens);
+  }
+}
+
+/// Returns the union of token names whose values are not null.
+@function _get-valid-token-names($mat-tokens, $mdc-tokens) {
+  $mat-and-mdc-tokens: map.merge($mat-tokens, $mdc-tokens);
+
+  @each $name, $value in $mat-and-mdc-tokens {
+    @if ($value == null) {
+      $mat-and-mdc-tokens: map.remove($mat-and-mdc-tokens, $name);
+    }
+  }
+
+  @return map.keys($mat-and-mdc-tokens);
+}

package/core/tokens/m2/_index.scss

@@ -1,6 +1,17 @@
 @use 'sass:map';
 @use 'sass:meta';
+@use '@angular/material' as mat;
 @use '../../style/sass-utils';
+@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;
 
 /// 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.
@@ -14,11 +25,11 @@
     @return meta.call(
         meta.get-function(get-#{$system}-tokens, $module: $module));
   }
-  @if not map.get($theme, $system) {
+  @if not mat.theme-has($theme, $system) {
     @return ();
   }
   @return meta.call(
-      meta.get-function(get-#{$system}-tokens, $module: $module), map.get($theme, $system));
+      meta.get-function(get-#{$system}-tokens, $module: $module), $theme);
 }
 
 /// Gets the fully qualified tokens map for the given theme and m2 tokens module.
@@ -45,5 +56,15 @@
 ///     )
 @function m2-tokens-from-theme($theme) {
   @return sass-utils.deep-merge-all(
+    _get-tokens-for-module($theme, tokens-mtx-alert),
+    _get-tokens-for-module($theme, tokens-mtx-colorpicker),
+    _get-tokens-for-module($theme, tokens-mtx-datetimepicker),
+    _get-tokens-for-module($theme, tokens-mtx-drawer),
+    _get-tokens-for-module($theme, tokens-mtx-grid),
+    _get-tokens-for-module($theme, tokens-mtx-loader),
+    _get-tokens-for-module($theme, tokens-mtx-popover),
+    _get-tokens-for-module($theme, tokens-mtx-progress),
+    _get-tokens-for-module($theme, tokens-mtx-select),
+    _get-tokens-for-module($theme, tokens-mtx-split),
   );
 }

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

@@ -19,6 +19,7 @@ $prefix: (mtx, alert);
   $is-dark: mat.get-theme-type($theme) == dark;
 
   @return (
+    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)),

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

@@ -1,6 +1,7 @@
 @use 'sass:color';
 @use 'sass:map';
 @use 'sass:meta';
+@use '@material/elevation/elevation-theme' as mdc-elevation;
 @use '@angular/material' as mat;
 @use '../../token-utils';
 @use '../../../style/sass-utils';
@@ -39,7 +40,7 @@ $_today-fade-amount: .2;
 
     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-focus-state-border-color: $palette-color,
+    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-ampm-selected-state-background-color: sass-utils.safe-color-change($palette-color, $alpha: .2),
@@ -56,7 +57,11 @@ $_today-fade-amount: .2;
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
   @return (
+    container-elevation-shadow: mdc-elevation.elevation-box-shadow(4),
+    container-touch-elevation-shadow: mdc-elevation.elevation-box-shadow(24),
     container-shape: 4px,
+    container-touch-shape: 4px,
+    selector-container-shape: 4px,
   );
 }
 
@@ -81,7 +86,7 @@ $_today-fade-amount: .2;
     // calendar-period-button-icon-color: $inactive-icon-color,
     // calendar-navigation-button-icon-color: $inactive-icon-color,
     calendar-header-text-color: white,
-    calendar-header-divider-color: $divider-color,
+    calendar-header-divider-color: transparent,
     calendar-table-header-text-color: $secondary-text-color,
 
     // Note: though it's not text, the border is a hint about the fact
@@ -93,8 +98,8 @@ $_today-fade-amount: .2;
     calendar-date-disabled-state-text-color: $disabled-text-color,
     // calendar-date-preview-state-outline-color: $preview-outline-color,
 
-    calendar-container-background-color: mat.get-theme-color($theme, background, card),
-    calendar-container-text-color: $text-color,
+    container-background-color: mat.get-theme-color($theme, background, card),
+    container-text-color: $text-color,
 
     clock-dial-background-color: $divider-color,
     clock-cell-text-color: $text-color,
@@ -104,9 +109,9 @@ $_today-fade-amount: .2;
     time-input-text-color: $text-color,
     time-input-background-color: $divider-color,
     time-input-focus-state-background-color: mat.get-theme-color($theme, background, background),
-    time-input-warn-state-border-color: mat.get-theme-color($theme, warn),
+    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-border-color: $hint-text-color,
+    time-ampm-outline-color: $hint-text-color,
     time-ampm-selected-state-text-color: $text-color,
   ));
 }

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

@@ -27,8 +27,9 @@ $prefix: (mtx, grid);
     column-menu-divider-color: $divider-color,
     table-footer-background-color: mat.get-theme-color($theme, background, app-bar),
     table-row-striped-background-color: if($is-dark, #3a3a3a, #f5f5f5),
-    table-row-hover-background-color: if($is-dark, #2a2a2a, #e5e5e5),
-    table-row-selected-background-color: if($is-dark, #2a2a2a, #e5e5e5),
+    table-row-hover-background-color: if($is-dark, #2a2a2a, #eee),
+    table-row-selected-background-color: if($is-dark, #2a2a2a, #eee),
+    table-row-selected-hover-background-color: if($is-dark, #1a1a1a, #e0e0e0),
     table-cell-selected-outline-color: mat.get-theme-color($theme, accent),
     resizable-handle-active-background-color: mat.get-theme-color($theme, primary),
     resizable-handle-hover-background-color: mat.get-theme-color($theme, primary),

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

@@ -17,9 +17,9 @@ $prefix: (mtx, popover);
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
+    outline-color: mat.get-theme-color($theme, foreground, divider),
     background-color: mat.get-theme-color($theme, background, card),
     text-color: mat.get-theme-color($theme, foreground, text),
-    arrow-outline-color: mat.get-theme-color($theme, foreground, divider),
   );
 }
 

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

@@ -40,7 +40,7 @@ $prefix: (mtx, select);
     disabled-text-color: $hint-text-color,
 
     multiple-value-background-color: mat.get-theme-color($theme, background, unselected-chip),
-    multiple-value-border-color: $divider-color,
+    multiple-value-outline-color: $divider-color,
     multiple-value-icon-hover-background-color: $divider-color,
 
     clear-icon-color: $secondary-text-color,