@angular/material 16.2.0-next.2 → 16.2.0-next.4

package/core/tokens/m2/mdc/_extended-fab.scss

@@ -0,0 +1,88 @@
+@use '../../../mdc-helpers/mdc-helpers';
+@use '../../token-utils';
+@use '../../../typography/typography-utils';
+
+@use 'sass:map';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, extended-fab);
+
+@function get-unthemable-tokens() {
+  @return (
+    container-color: null,
+    container-elevation: null,
+    container-height: null,
+    container-shadow-color: null,
+    container-shape: null,
+    container-surface-tint-layer-color: null,
+    focus-container-elevation: null,
+    focus-icon-color: null,
+    focus-label-text-color: null,
+    focus-outline-color: null,
+    focus-outline-width: null,
+    focus-state-layer-color: null,
+    focus-state-layer-opacity: null,
+    hover-container-elevation: null,
+    hover-icon-color: null,
+    hover-label-text-color: null,
+    hover-state-layer-color: null,
+    hover-state-layer-opacity: null,
+    icon-color: null,
+    icon-size: null,
+    label-text-color: null,
+    lowered-container-elevation: null,
+    lowered-focus-container-elevation: null,
+    lowered-hover-container-elevation: null,
+    lowered-pressed-container-elevation: null,
+    pressed-container-elevation: null,
+    pressed-icon-color: null,
+    pressed-label-text-color: null,
+    pressed-ripple-color: null,
+    pressed-ripple-opacity: null,
+    pressed-state-layer-color: null,
+    pressed-state-layer-opacity: null
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  // TODO(wagnermaciel): The earlier implementation of the snack bar used MDC's APIs to create the
+  // typography tokens. As a result, we unintentionally allowed `null` typography configs to be
+  // passed in. Since there a lot of apps that now depend on this pattern, we need this temporary
+  // fallback.
+  @if ($config == null) {
+    $config: mdc-helpers.private-fallback-typography-from-mdc();
+  }
+  @return (
+    label-text-font: typography-utils.font-family($config, button) or
+      typography-utils.font-family($config),
+    label-text-size: typography-utils.font-size($config, button),
+    label-text-tracking: typography-utils.letter-spacing($config, button),
+    label-text-weight: typography-utils.font-weight($config, button)
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  @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 map.merge(
+    get-unthemable-tokens(),
+    map.merge(
+      get-color-tokens(token-utils.$placeholder-color-config),
+      map.merge(
+        get-typography-tokens(token-utils.$placeholder-typography-config),
+        get-density-tokens(token-utils.$placeholder-density-config)
+      )
+    )
+  );
+}

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

@@ -0,0 +1,89 @@
+@use '../../../theming/theming';
+@use '../../token-utils';
+
+@use 'sass:map';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, 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.
+//
+// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
+// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
+// our CSS.
+$height: 56px;
+$mini-height: 40px;
+$shape-radius: 50%;
+$ripple-target: '.mdc-fab__ripple';
+
+@function get-unthemable-tokens() {
+  @return (
+    container-shape: 50%,
+    icon-size: 24px,
+
+    container-elevation: null,
+    container-height: null,
+    container-shadow-color: null,
+    container-surface-tint-layer-color: null,
+    container-width: null,
+
+    focus-container-elevation: null,
+    focus-icon-color: null,
+    focus-outline-color: null,
+    focus-outline-width: null,
+    focus-state-layer-color: null,
+    focus-state-layer-opacity: null,
+
+    hover-container-elevation: null,
+    hover-icon-color: null,
+    hover-state-layer-color: null,
+    hover-state-layer-opacity: null,
+
+    lowered-container-elevation: null,
+    lowered-focus-container-elevation: null,
+    lowered-hover-container-elevation: null,
+    lowered-pressed-container-elevation: null,
+
+    pressed-container-elevation: null,
+    pressed-icon-color: null,
+    pressed-ripple-color: null,
+    pressed-ripple-opacity: null,
+    pressed-state-layer-color: null,
+    pressed-state-layer-opacity: null
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $primary: map.get($config, primary);
+  $surface: theming.get-color-from-palette($primary, default);
+  $on-surface: theming.get-color-from-palette($primary, default-contrast);
+
+  @return (container-color: $surface, icon-color: $on-surface);
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  @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 map.merge(
+    get-unthemable-tokens(),
+    map.merge(
+      get-color-tokens(token-utils.$placeholder-color-config),
+      map.merge(
+        get-typography-tokens(token-utils.$placeholder-typography-config),
+        get-density-tokens(token-utils.$placeholder-density-config)
+      )
+    )
+  );
+}

package/core/typography/_typography-utils.scss

@@ -7,6 +7,15 @@
 
 // Utility for fetching a nested value from a typography config.
 @function _mat-get-type-value($config, $level, $name) {
+  @if meta.type-of($config) != 'map' {
+    @error 'Typography config must be a map. Received #{meta.type-of($config)}.';
+  }
+
+  @if not map.has-key($config, $level) {
+    @error 'Typography config does not have a level called "#{$level}". ' +
+           'Available levels are: #{map.keys($config)}.';
+  }
+
   @return map.get(map.get($config, $level), $name);
 }
 
@@ -42,6 +51,10 @@
 /// @param {Map} $config A typography config.
 /// @param {Map} $level A typography level.
 @function font-family($config, $level: null) {
+  @if meta.type-of($config) != 'map' {
+    @error 'Typography config must be a map. Received #{meta.type-of($config)}.';
+  }
+
   $font-family: map.get($config, font-family);
 
   @if $level != null {