@angular/material-experimental 16.2.0-next.3 → 16.2.0-next.5

package/_index.scss

@@ -5,8 +5,9 @@
   popover-edit-typography, popover-edit-density, popover-edit-theme;
 
 // Token-based theming API
-@forward './theming/theming' show theme, retheme;
+@forward './theming/theming' show theme, token-defaults;
 @forward './theming/checkbox' show checkbox;
 @forward './theming/card' show card;
+@forward './theming/m3-tokens' show get-m3-tokens;
 
 // Additional public APIs for individual components

package/esm2022/version.mjs

@@ -7,5 +7,5 @@
  */
 import { Version } from '@angular/core';
 /** Current version of the Material experimental package. */
-export const VERSION = new Version('16.2.0-next.3');
+export const VERSION = new Version('16.2.0-next.5');
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVyc2lvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9tYXRlcmlhbC1leHBlcmltZW50YWwvdmVyc2lvbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7O0dBTUc7QUFFSCxPQUFPLEVBQUMsT0FBTyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBRXRDLDREQUE0RDtBQUM1RCxNQUFNLENBQUMsTUFBTSxPQUFPLEdBQUcsSUFBSSxPQUFPLENBQUMsbUJBQW1CLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCBHb29nbGUgTExDIEFsbCBSaWdodHMgUmVzZXJ2ZWQuXG4gKlxuICogVXNlIG9mIHRoaXMgc291cmNlIGNvZGUgaXMgZ292ZXJuZWQgYnkgYW4gTUlULXN0eWxlIGxpY2Vuc2UgdGhhdCBjYW4gYmVcbiAqIGZvdW5kIGluIHRoZSBMSUNFTlNFIGZpbGUgYXQgaHR0cHM6Ly9hbmd1bGFyLmlvL2xpY2Vuc2VcbiAqL1xuXG5pbXBvcnQge1ZlcnNpb259IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG4vKiogQ3VycmVudCB2ZXJzaW9uIG9mIHRoZSBNYXRlcmlhbCBleHBlcmltZW50YWwgcGFja2FnZS4gKi9cbmV4cG9ydCBjb25zdCBWRVJTSU9OID0gbmV3IFZlcnNpb24oJzAuMC4wLVBMQUNFSE9MREVSJyk7XG4iXX0=

package/fesm2022/material-experimental.mjs

@@ -1,7 +1,7 @@
 import { Version } from '@angular/core';
 
 /** Current version of the Material experimental package. */
-const VERSION = new Version('16.2.0-next.3');
+const VERSION = new Version('16.2.0-next.5');
 
 export { VERSION };
 //# sourceMappingURL=material-experimental.mjs.map

package/fesm2022/material-experimental.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"material-experimental.mjs","sources":["../../../../../../src/material-experimental/version.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Version} from '@angular/core';\n\n/** Current version of the Material experimental package. */\nexport const VERSION = new Version('16.2.0-next.3');\n"],"names":[],"mappings":";;AAUA;MACa,OAAO,GAAG,IAAI,OAAO,CAAC,mBAAmB;;;;"}
+{"version":3,"file":"material-experimental.mjs","sources":["../../../../../../src/material-experimental/version.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Version} from '@angular/core';\n\n/** Current version of the Material experimental package. */\nexport const VERSION = new Version('16.2.0-next.5');\n"],"names":[],"mappings":";;AAUA;MACa,OAAO,GAAG,IAAI,OAAO,CAAC,mBAAmB;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/material-experimental",
-  "version": "16.2.0-next.3",
+  "version": "16.2.0-next.5",
   "description": "Experimental components for Angular Material",
   "repository": {
     "type": "git",
@@ -49,12 +49,12 @@
   },
   "peerDependencies": {
     "@angular/animations": "^16.0.0-0 || ^16.1.0-0 || ^16.2.0-0 || ^16.3.0-0 || ^17.0.0-0",
-    "@angular/cdk": "16.2.0-next.3",
+    "@angular/cdk": "16.2.0-next.5",
     "@angular/core": "^16.0.0-0 || ^16.1.0-0 || ^16.2.0-0 || ^16.3.0-0 || ^17.0.0-0",
     "@angular/common": "^16.0.0-0 || ^16.1.0-0 || ^16.2.0-0 || ^16.3.0-0 || ^17.0.0-0",
     "@angular/forms": "^16.0.0-0 || ^16.1.0-0 || ^16.2.0-0 || ^16.3.0-0 || ^17.0.0-0",
     "@angular/platform-browser": "^16.0.0-0 || ^16.1.0-0 || ^16.2.0-0 || ^16.3.0-0 || ^17.0.0-0",
-    "@angular/material": "16.2.0-next.3"
+    "@angular/material": "16.2.0-next.5"
   },
   "dependencies": {
     "tslib": "^2.3.0",

package/theming/_m3-tokens.scss

@@ -0,0 +1,146 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '@material/tokens/v0_161' as mdc-tokens;
+
+/// 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} $m3-values A map of M3 token values for the given prefix.
+/// @param {Map} $slots A map of token slots, with null value indicating the token is not supported.
+/// @return {Map} A map of fully qualified token names to values, for only the supported tokens.
+@function _get-mdc-tokens($prefix, $m3-values, $slots) {
+  $used-token-names: map.keys(_filter-nulls(map.get($slots, $prefix)));
+  $used-m3-tokens: _pick($m3-values, $used-token-names);
+  @return (
+    $prefix: $used-m3-tokens,
+  );
+}
+
+/// Sets all of the standard typography tokens for the given token base name to the given typography
+/// level.
+/// @param {Map} $typography-tokens The MDC system-typescale 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 _get-typography-tokens($typography-tokens, $base-name, $typography-level) {
+  $result: ();
+  @each $prop in (font, line-height, size, tracking, weight) {
+    $result: map.set(
+        $result,
+        #{$base-name}-#{$prop},
+        map.get($typography-tokens, #{$typography-level}-#{$prop}
+        ));
+  }
+  @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;
+}
+
+/// Renames the official checkbox tokens to match the names actually used in MDC's code (which are
+/// different). This is a temporary workaround until MDC updates to use the correct names for the
+/// tokens.
+/// @param {Map} $tokens The map of checkbox tokens with the official tokens names
+/// @return {Map} The given tokens, renamed to be compatible with MDC's token implementation.
+@function _fix-checkbox-token-names($tokens) {
+  $rename-keys: (
+    'selected-icon-color': 'selected-checkmark-color',
+    'selected-disabled-icon-color': 'disabled-selected-checkmark-color',
+    'selected-container-color': 'selected-icon-color',
+    'selected-hover-container-color': 'selected-hover-icon-color',
+    'selected-disabled-container-color': 'disabled-selected-icon-color',
+    'selected-disabled-container-opacity': 'disabled-selected-icon-opacity',
+    'selected-focus-container-color': 'selected-focus-icon-color',
+    'selected-pressed-container-color': 'selected-pressed-icon-color',
+    'unselected-disabled-outline-color': 'disabled-unselected-icon-color',
+    'unselected-disabled-container-opacity': 'disabled-unselected-icon-opacity',
+    'unselected-focus-outline-color': 'unselected-focus-icon-color',
+    'unselected-hover-outline-color': 'unselected-hover-icon-color',
+    'unselected-outline-color': 'unselected-icon-color',
+    'unselected-pressed-outline-color': 'unselected-pressed-icon-color'
+  );
+  @return _rename-map-keys($tokens, $rename-keys);
+}
+
+// TODO(mmalerba): We need a way to accept custom M3 token values generated from MDCs theme builder
+//  or other means. We can't just use them directly without processing them first because we need to
+//  add our made up tokens,
+/// Gets the default token values for M3.
+/// @return The default set of M3 tokens.
+@function get-m3-tokens() {
+  $typography: mdc-tokens.md-sys-typescale-values();
+  $colors: mdc-tokens.md-sys-color-values-light();
+
+  // TODO(mmalerba): Refactor this to not depend on the legacy theme. 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: mat.m2-tokens-from-theme($fake-theme);
+
+  // TODO(mmalerba): Fill in remaining tokens.
+  @return mat.private-merge-all(
+      // Fill in official MDC tokens.
+      _get-mdc-tokens((mdc, checkbox),
+        _fix-checkbox-token-names(mdc-tokens.md-comp-checkbox-values()), $token-slots),
+      _get-mdc-tokens((mdc, elevated-card), mdc-tokens.md-comp-elevated-card-values(),
+        $token-slots),
+      _get-mdc-tokens((mdc, outlined-card), mdc-tokens.md-comp-outlined-card-values(),
+        $token-slots),
+      // Choose values for our made up tokens based on MDC system tokens or sensible hardcoded
+      // values.
+      (
+          (mat, card): mat.private-merge-all(
+            _get-typography-tokens($typography, title-text, title-large),
+            _get-typography-tokens($typography, subtitle-text, title-medium),
+            (
+              subtitle-text-color: map.get($colors, on-surface)
+            )
+        )
+      ),
+  );
+}

package/theming/_theming.scss

@@ -88,27 +88,43 @@ $_error-on-missing-dep: false;
   }
 }
 
-/// Takes the full list of tokens and a list of components to configure, and outputs all theme
-/// tokens for the configured components.
-/// @param {Map} $tokens A map of all tokens for the current design system.
+/// Takes a list of components to configure, and outputs theme tokens for the configured components.
 /// @param {List} $components The list of component configurations to emit tokens for.
 /// @output CSS variables representing the theme tokens for the given component configs.
-// TODO(mmalerba): Consider an alternate API where `$tokens` is not a separate argument,
-//  but one of the configs in the `$components` list
-@mixin theme($tokens, $components) {
-  @include _theme($tokens, _get-transitive-deps(mat.private-coerce-to-list($components)));
+@mixin theme($components...) {
+  $filtered-components: ();
+  $tokens: null;
+  @each $component in $components {
+    @if (map.get($component, id) == 'mat.token-defaults') {
+      @if $tokens == null {
+        $tokens: map.get($component, tokens);
+      }
+      @else {
+        @error 'mat.token-defaults specified multiple times in call to mat.theme';
+      }
+    }
+    @else {
+      $filtered-components: list.append($filtered-components, $component);
+    }
+  }
+  $tokens: $tokens or ();
+  @if $tokens == () {
+    @each $component in $filtered-components {
+      @if (map.get($component, customizations) or ()) == () {
+        $component-id: map.get($component, id);
+        @warn 'Call to `#{$component-id}()` will produce no output, this is likely a mistake.' +
+          ' Did you mean to:'+
+          '\a  1. Provide default token values with `mat.token-defaults`?' +
+          '\a  2. Specify customizations in the call to `#{$component-id}`?';
+      }
+    }
+  }
+  @include _theme($tokens, $filtered-components);
 }
 
-/// Takes a list of components to configure, and outputs only the theme tokens that are explicitly
-/// customized by the configurations.
-/// @param {List} $components The list of component configurations to emit tokens for.
-/// @output CSS variables representing the theme tokens for the given component configs.
-// TODO(mmalerba): What should we call this?
-//   - update-theme
-//   - adjust-theme
-//   - edit-theme
-//   - override-theme
-//   - retheme
-@mixin retheme($components) {
-  @include _theme((), mat.private-coerce-to-list($components));
+@function token-defaults($tokens) {
+  @return (
+    id: 'mat.token-defaults',
+    tokens: $tokens
+  );
 }