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

package/core/tokens/m2/mat/_bottom-sheet.scss

@@ -0,0 +1,56 @@
+@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, bottom-sheet);
+
+// 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 (
+    // TODO: will be necessary for M3.
+    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-text-color: theming.get-color-from-palette($foreground, text),
+    container-background-color: theming.get-color-from-palette($background, dialog),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  @return (
+    container-text-font: typography-utils.font-family($config, body-1) or
+      typography-utils.font-family($config),
+    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) {
+  @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/_datepicker.scss

@@ -0,0 +1,184 @@
+@use 'sass:color';
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:math';
+@use '../../token-utils';
+@use '../../../theming/theming';
+@use '../../../typography/typography-utils';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, datepicker);
+
+$_selected-fade-amount: 0.6;
+$_today-fade-amount: 0.2;
+
+// Utility that produces a range background color from a specific color.
+@function private-get-range-background-color($color) {
+  @return rgba($color, 0.2);
+}
+
+// Utility that produces the overlap selected color from an overlap color.
+@function private-get-default-overlap-selected-color($overlap-color) {
+  @return color.adjust($overlap-color, $lightness: -30%);
+}
+
+// Default range comparison color.
+$private-default-comparison-color: private-get-range-background-color(#f9ab00);
+
+// Default range overlap color.
+$private-default-overlap-color: #a8dab5;
+
+// 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);
+  $primary: map.get($config, primary);
+  $inactive-icon-color: theming.get-color-from-palette($foreground, icon);
+  $text-color: theming.get-color-from-palette($foreground, text);
+  $secondary-text-color: theming.get-color-from-palette($foreground, secondary-text);
+  $disabled-text-color: theming.get-color-from-palette($foreground, disabled-text);
+  $divider-color: theming.get-color-from-palette($foreground, divider);
+  $hint-text-color: theming.get-color-from-palette($foreground, hint-text);
+  $preview-outline-color: $divider-color;
+  $today-disabled-outline-color: null;
+
+  $primary-color: theming.get-color-from-palette(map.get($config, primary));
+  $range-tokens: get-range-color-tokens(private-get-range-background-color($primary-color));
+  $calendar-tokens: private-get-calendar-color-palette-color-tokens($config, primary);
+  $toggle-tokens: private-get-toggle-color-palette-color-tokens($config, primary);
+
+  // The divider color is set under the assumption that it'll be used
+  // for a solid border, but because we're using a dashed border for the
+  // preview range, we need to bump its opacity to ensure that it's visible.
+  @if meta.type-of($preview-outline-color) == color {
+    $preview-outline-opacity: math.min(opacity($preview-outline-color) * 2, 1);
+    $preview-outline-color: rgba($preview-outline-color, $preview-outline-opacity);
+  }
+
+  @if (meta.type-of($hint-text-color) == color) {
+    $today-disabled-outline-color: color.adjust($hint-text-color, $alpha: -$_today-fade-amount);
+  }
+  @else {
+    $today-disabled-outline-color: $disabled-text-color;
+  }
+
+  @return sass-utils.merge-all($calendar-tokens, $toggle-tokens, $range-tokens, (
+    toggle-icon-color: $inactive-icon-color,
+    calendar-body-label-text-color: $secondary-text-color,
+    calendar-period-button-icon-color: $inactive-icon-color,
+    calendar-navigation-button-icon-color: $inactive-icon-color,
+    calendar-header-divider-color: $divider-color,
+    calendar-header-text-color: $secondary-text-color,
+
+    // Note: though it's not text, the border is a hint about the fact
+    // that this is today's date, so we use the hint color.
+    calendar-date-today-outline-color: $hint-text-color,
+    calendar-date-today-disabled-state-outline-color: $today-disabled-outline-color,
+    calendar-date-text-color: $text-color,
+    calendar-date-outline-color: transparent,
+    calendar-date-disabled-state-text-color: $disabled-text-color,
+    calendar-date-preview-state-outline-color: $preview-outline-color,
+
+    range-input-separator-color: $text-color,
+    range-input-disabled-state-separator-color: $disabled-text-color,
+    range-input-disabled-state-text-color: $disabled-text-color,
+
+    calendar-container-background-color: theming.get-color-from-palette($background, card),
+    calendar-container-text-color: $text-color,
+  ));
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  $fallback-font: typography-utils.font-family($config);
+
+  @return (
+    // TODO(crisbeto): the typography tokens for other components set every typography dimension of
+    // an element (e.g. size, weight, line height, letter spacing). These tokens only set the values
+    // that were set in the previous theming API to reduce the amount of subtle screenshot
+    // differences. We should look into introducing the other tokens in a follow-up.
+    calendar-text-font: $fallback-font,
+    calendar-text-size: 13px, // TODO(crisbeto): this doesn't appear to affect anything
+
+    calendar-body-label-text-size: typography-utils.font-size($config, button),
+    calendar-body-label-text-weight: typography-utils.font-weight($config, button),
+
+    calendar-period-button-text-size: typography-utils.font-size($config, button),
+    calendar-period-button-text-weight: typography-utils.font-weight($config, button),
+
+    calendar-header-text-size: 11px,
+    calendar-header-text-weight: typography-utils.font-weight($config, body-1),
+  );
+}
+
+// Gets the tokens map that can be used to override the range colors.
+@function get-range-color-tokens(
+  $range-color,
+  $comparison-color: $private-default-comparison-color,
+  $overlap-color: $private-default-overlap-color,
+  $overlap-selected-color: private-get-default-overlap-selected-color($overlap-color)) {
+
+  @return (
+    calendar-date-in-range-state-background-color: $range-color,
+    calendar-date-in-comparison-range-state-background-color: $comparison-color,
+    calendar-date-in-overlap-range-state-background-color: $overlap-color,
+    calendar-date-in-overlap-range-selected-state-background-color: $overlap-selected-color,
+  );
+}
+
+@function private-get-calendar-color-palette-color-tokens($config, $palette-name) {
+  $foreground: map.get($config, foreground);
+  $palette: map.get($config, $palette-name);
+  $palette-color: theming.get-color-from-palette($palette);
+  $default-contrast: theming.get-color-from-palette($palette, default-contrast);
+  $active-background-color: theming.get-color-from-palette($palette, 0.3);
+  $active-disabled-color: null;
+
+  @if (meta.type-of($palette-color) == color) {
+    $active-disabled-color: color.adjust($palette-color, $alpha: -$_selected-fade-amount);
+  }
+  @else {
+    $active-disabled-color: theming.get-color-from-palette($foreground, disabled-button);
+  }
+
+  @return (
+    calendar-date-selected-state-text-color: $default-contrast,
+    calendar-date-selected-state-background-color: $palette-color,
+    calendar-date-selected-disabled-state-background-color: $active-disabled-color,
+    calendar-date-today-selected-state-outline-color: $default-contrast,
+    calendar-date-focus-state-background-color: $active-background-color,
+    calendar-date-hover-state-background-color: $active-background-color,
+  );
+}
+
+@function private-get-toggle-color-palette-color-tokens($config, $palette-name) {
+  $palette: map.get($config, $palette-name);
+
+  @return (
+    toggle-active-state-icon-color: theming.get-color-from-palette($palette, text),
+  );
+}
+
+
+// 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/_divider.scss

@@ -0,0 +1,45 @@
+@use 'sass:map';
+@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, divider);
+
+// 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 (
+    width: 1px
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $foreground: map.get($config, foreground);
+
+  @return (
+    color: theming.get-color-from-palette($foreground, divider)
+  );
+}
+
+// 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/_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)
+  );
+}