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

package/core/tokens/m2/mat/_expansion.scss

@@ -0,0 +1,90 @@
+@use 'sass:map';
+@use '../../token-utils';
+@use '../../../theming/theming';
+@use '../../../style/sass-utils';
+@use '../../../typography/typography-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, expansion);
+
+// 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-shape: 4px,
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $foreground: map.get($config, foreground);
+  $background: map.get($config, background);
+
+  @return (
+    container-background-color: theming.get-color-from-palette($background, card),
+    container-text-color: theming.get-color-from-palette($foreground, text),
+    actions-divider-color: theming.get-color-from-palette($foreground, divider),
+    header-hover-state-layer-color: theming.get-color-from-palette($background, hover),
+    header-focus-state-layer-color: theming.get-color-from-palette($background, hover),
+    header-disabled-state-text-color: theming.get-color-from-palette($foreground, disabled-button),
+    header-text-color: theming.get-color-from-palette($foreground, text),
+    header-description-color: theming.get-color-from-palette($foreground, secondary-text),
+    header-indicator-color: theming.get-color-from-palette($foreground, secondary-text),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  $fallback-font-family: typography-utils.font-family($config);
+
+  @return (
+    header-text-font: typography-utils.font-family($config, subheading-1) or $fallback-font-family,
+    header-text-size: typography-utils.font-size($config, subheading-1),
+    header-text-weight: typography-utils.font-weight($config, subheading-1),
+
+    // TODO(crisbeto): these two properties weren't set at all before the introduction of tokens,
+    // but it's inconsistent not to provide them since the container sets all of them. Eventually
+    // we should change the values to use come from `subheading-1`.
+    header-text-line-height: inherit,
+    header-text-tracking: inherit,
+
+    container-text-font: typography-utils.font-family($config, body-1) or $fallback-font-family,
+    container-text-line-height: typography-utils.line-height($config, body-1),
+    container-text-size: typography-utils.font-size($config, body-1),
+    container-text-tracking: typography-utils.letter-spacing($config, body-1),
+    container-text-weight: typography-utils.font-weight($config, body-1),
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  $scale: theming.clamp-density($config, -3);
+  $collapsed-scale: (
+    0: 48px,
+    -1: 44px,
+    -2: 40px,
+    -3: 36px,
+  );
+  $expanded-scale: (
+    0: 64px,
+    -1: 60px,
+    -2: 56px,
+    -3: 48px,
+  );
+
+  @return (
+    header-collapsed-state-height: map.get($collapsed-scale, $scale),
+    header-expanded-state-height: map.get($expanded-scale, $scale),
+  );
+}
+
+// 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-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

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

@@ -0,0 +1,63 @@
+@use 'sass:map';
+@use '../../token-utils';
+@use '../../../typography/typography-utils';
+@use '../../../theming/theming';
+@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($config) {
+  $foreground: map.get($config, foreground);
+  $background: map.get($config, background);
+
+  @return (
+    text-color: theming.get-color-from-palette($foreground, hint-text),
+    state-layer-color: theming.get-color-from-palette($background, focused-button),
+    selected-state-text-color: theming.get-color-from-palette($foreground, secondary-text),
+    selected-state-background-color: theming.get-color-from-palette($background, selected-button),
+    disabled-state-text-color: theming.get-color-from-palette($foreground, disabled-button),
+    disabled-state-background-color:
+      theming.get-color-from-palette($background, disabled-button-toggle),
+    disabled-selected-state-background-color:
+      theming.get-color-from-palette($background, selected-disabled-button)
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  @return (
+    // TODO(crisbeto): other components have tokens for all typography dimensions (font weight,
+    // letter spacing etc). The button toggle only has the font to match what it had in the
+    // old theming API and to reduce internal breakages. We should introduce more typography
+    // tokens at some point.
+    text-font: typography-utils.font-family($config),
+  );
+}
+
+// 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 sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

package/core/tokens/m2/mat/_sidenav.scss

@@ -0,0 +1,65 @@
+@use 'sass:color';
+@use 'sass:map';
+@use 'sass:meta';
+@use '../../token-utils';
+@use '../../../theming/theming';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, sidenav);
+
+// 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 (
+    // Currently zero, but it appears to be relevant for M3.
+    // See: https://m3.material.io/components/navigation-drawer/overview
+    container-shape: 0,
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $is-dark: map.get($config, is-dark);
+  $foreground: map.get($config, foreground);
+  $background: map.get($config, background);
+  $scrim-opacity: 0.6;
+  $scrim-color: theming.get-color-from-palette($background, card, $scrim-opacity);
+  $fallback-scrim-color: if($is-dark, rgba(#fff, $scrim-opacity), rgba(#000, $scrim-opacity));
+
+  @return (
+    container-divider-color: theming.get-color-from-palette($foreground, divider),
+    container-background-color: theming.get-color-from-palette($background, dialog),
+    container-text-color: theming.get-color-from-palette($foreground, text),
+    content-background-color: theming.get-color-from-palette($background, background),
+    content-text-color: theming.get-color-from-palette($foreground, text),
+
+    // We use invert() here to have the darken the background color expected to be used.
+    // If the background is light, we use a dark backdrop. If the background is dark, we
+    // use a light backdrop. If the value isn't a color, Sass will throw an error so we
+    // fall back to something generic.
+    scrim-color: if(meta.type-of($scrim-color) == color,
+      color.invert($scrim-color), $fallback-scrim-color),
+  );
+}
+
+// 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 sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

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

@@ -0,0 +1,87 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use '../../token-utils';
+@use '../../../typography/typography-utils';
+@use '../../../theming/theming';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, standard-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 (
+    shape: 4px,
+    hover-state-layer-opacity: 0.04,
+    focus-state-layer-opacity: 0.12,
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $foreground: map.get($config, foreground);
+  $background: map.get($config, background);
+  $theme-divider-color: theming.get-color-from-palette($foreground, divider);
+
+  // By default the theme usually has an rgba color for the dividers, which can
+  // stack up with the background of a button toggle. This can cause the border
+  // of a selected toggle to look different from an deselected one. We use a solid
+  // color to ensure that the border always stays the same.
+  $divider-color: if(meta.type-of($theme-divider-color) == color,
+    theming.private-rgba-to-hex($theme-divider-color, map.get($background, card)),
+    $theme-divider-color
+  );
+
+  @return (
+    text-color: theming.get-color-from-palette($foreground, text),
+    background-color: theming.get-color-from-palette($background, card),
+    state-layer-color: theming.get-color-from-palette($background, focused-button, 1),
+    selected-state-background-color: theming.get-color-from-palette($background, selected-button),
+    selected-state-text-color: theming.get-color-from-palette($foreground, text),
+    disabled-state-text-color: theming.get-color-from-palette($foreground, disabled-button),
+    disabled-state-background-color: theming.get-color-from-palette($background, card),
+    disabled-selected-state-text-color: theming.get-color-from-palette($foreground, text),
+    disabled-selected-state-background-color:
+      theming.get-color-from-palette($background, selected-disabled-button),
+    divider-color: $divider-color,
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  @return (
+    // TODO(crisbeto): other components have tokens for all typography dimensions (font weight,
+    // letter spacing etc). The button toggle only has the font to match what it had in the
+    // old theming API and to reduce internal breakages. We should introduce more typography
+    // tokens at some point.
+    text-font: typography-utils.font-family($config),
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  $density-scale: theming.clamp-density($config, -4);
+  $size-scale: (
+    0: 48px,
+    -1: 44px,
+    -2: 40px,
+    -3: 36px,
+    -4: 24px,
+  );
+
+  @return (
+    height: map.get($size-scale, $density-scale)
+  );
+}
+
+// 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-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

package/core/tokens/m2/mat/_toolbar.scss

@@ -0,0 +1,79 @@
+@use 'sass:map';
+@use '../../token-utils';
+@use '../../../typography/typography-utils';
+@use '../../../theming/theming';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, toolbar);
+
+// 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($config) {
+  $foreground: map.get($config, foreground);
+  $background: map.get($config, background);
+
+  @return private-get-color-palette-color-tokens(
+    $background-color: theming.get-color-from-palette($background, app-bar),
+    $text-color: theming.get-color-from-palette($foreground, text),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  @return (
+    title-text-font: typography-utils.font-family($config, title) or
+      typography-utils.font-family($config),
+    title-text-line-height: typography-utils.line-height($config, title),
+    title-text-size: typography-utils.font-size($config, title),
+    title-text-tracking: typography-utils.letter-spacing($config, title),
+    title-text-weight: typography-utils.font-weight($config, title),
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  $density-scale: theming.clamp-density($config, -3);
+  $standard-scale: (
+    0: 64px,
+    -1: 60px,
+    -2: 56px,
+    -3: 52px,
+  );
+
+  $mobile-scale: (
+    0: 56px,
+    -1: 52px,
+    -2: 48px,
+    -3: 44px,
+  );
+
+  @return (
+    standard-height: map.get($standard-scale, $density-scale),
+    mobile-height: map.get($mobile-scale, $density-scale),
+  );
+}
+
+// Generates the tokens used to theme the toolbar based on a palette.
+@function private-get-color-palette-color-tokens($background-color, $text-color) {
+  @return (
+    container-background-color: $background-color,
+    container-text-color: $text-color,
+  );
+}
+
+// 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-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

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