@angular/material 16.2.0-next.5 → 16.2.0

package/form-field/_form-field-subscript.scss

@@ -3,8 +3,8 @@
 @use '@material/typography' as mdc-typography;
 @use '@material/textfield/variables' as mdc-textfield-variables;
 
-@use '../core/theming/theming';
-@use '../core/mdc-helpers/mdc-helpers';
+@use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field;
+@use '../core/tokens/token-utils';
 @use './form-field-sizing';
 
 @mixin private-form-field-subscript() {
@@ -66,17 +66,19 @@
   .mat-mdc-form-field-error {
     @include mdc-theme.prop(color, mdc-textfield.$error);
   }
-}
-
-// We need to define our own typography for the subscript because we don't include MDC's
-// helper text in our MDC based form field
-@mixin private-form-field-subscript-typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
 
   // The subscript wrapper has a minimum height to avoid that the form-field
   // jumps when hints or errors are displayed.
   .mat-mdc-form-field-subscript-wrapper,
   .mat-mdc-form-field-bottom-align::before {
-    @include mdc-typography.typography(caption, $query: mdc-helpers.$mdc-typography-styles-query);
+    @include token-utils.use-tokens(tokens-mat-form-field.$prefix,
+      tokens-mat-form-field.get-token-slots()) {
+      @include mdc-typography.smooth-font();
+      @include token-utils.create-token-slot(font-family, subscript-text-font);
+      @include token-utils.create-token-slot(line-height, subscript-text-line-height);
+      @include token-utils.create-token-slot(font-size, subscript-text-size);
+      @include token-utils.create-token-slot(letter-spacing, subscript-text-tracking);
+      @include token-utils.create-token-slot(font-weight, subscript-text-weight);
+    }
   }
 }

package/form-field/_form-field-theme.scss

@@ -1,63 +1,50 @@
-@use '@material/textfield' as mdc-textfield;
-@use '@material/floating-label' as mdc-floating-label;
-@use '@material/notched-outline' as mdc-notched-outline;
-@use '@material/line-ripple' as mdc-line-ripple;
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use '@material/typography/typography' as mdc-typography;
+@use '@material/textfield/filled-text-field-theme' as mdc-filled-text-field-theme;
+@use '@material/textfield/outlined-text-field-theme' as mdc-outlined-text-field-theme;
 
+@use '../core/tokens/m2/mdc/filled-text-field' as tokens-mdc-filled-text-field;
+@use '../core/tokens/m2/mdc/outlined-text-field' as tokens-mdc-outlined-text-field;
+@use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field;
 @use '../core/theming/theming';
 @use '../core/typography/typography';
 @use '../core/mdc-helpers/mdc-helpers';
+@use '../core/style/sass-utils';
+@use '../core/tokens/token-utils';
 @use './form-field-density';
 @use './form-field-subscript';
 @use './form-field-focus-overlay';
 @use './form-field-native-select';
 @use './mdc-text-field-theme-variable-refresh';
 
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
 
-// Mixin that overwrites the default MDC text-field color styles to be based on
-// the given theme palette. The MDC text-field is styled using `primary` by default.
-@mixin _color-styles($palette-name,
-  $query: mdc-helpers.$mdc-theme-styles-query) {
-  $orig-focused-label-color: mdc-textfield.$focused-label-color;
-  mdc-textfield.$focused-label-color: rgba(mdc-theme-color.prop-value($palette-name), 0.87);
-
-  @include mdc-textfield.caret-color($palette-name, $query);
-  @include mdc-textfield.line-ripple-color($palette-name, $query);
-
-  .mdc-text-field--focused {
-    @include mdc-textfield.focused_($query);
-  }
-
-  .mdc-text-field--invalid {
-    @include mdc-textfield.invalid_($query);
-  }
-
-  .mdc-text-field--outlined {
-    @include mdc-textfield.focused-outline-color($palette-name, $query);
+  @include sass-utils.current-selector-or-root() {
+    @include mdc-filled-text-field-theme.theme(
+      tokens-mdc-filled-text-field.get-color-tokens($config));
+    @include mdc-outlined-text-field-theme.theme(
+      tokens-mdc-outlined-text-field.get-color-tokens($config));
+    @include token-utils.create-token-values(tokens-mat-form-field.$prefix,
+      tokens-mat-form-field.get-color-tokens($config));
   }
 
-  mdc-textfield.$focused-label-color: $orig-focused-label-color;
-}
-
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
   @include mdc-helpers.using-mdc-theme($config) {
     @include mdc-text-field-theme-variable-refresh.private-text-field-refresh-theme-variables() {
-      @include mdc-textfield.without-ripple($query: mdc-helpers.$mdc-theme-styles-query);
-      @include mdc-floating-label.core-styles($query: mdc-helpers.$mdc-theme-styles-query);
-      @include mdc-notched-outline.core-styles($query: mdc-helpers.$mdc-theme-styles-query);
-      @include mdc-line-ripple.core-styles($query: mdc-helpers.$mdc-theme-styles-query);
       @include form-field-subscript.private-form-field-subscript-color();
       @include form-field-focus-overlay.private-form-field-focus-overlay-color();
       @include form-field-native-select.private-form-field-native-select-color($config);
 
       .mat-mdc-form-field.mat-accent {
-        @include _color-styles(secondary);
+        @include mdc-filled-text-field-theme.theme(
+          tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($config, accent));
+        @include mdc-outlined-text-field-theme.theme(
+          tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($config, accent));
       }
 
       .mat-mdc-form-field.mat-warn {
-        @include _color-styles(error);
+        @include mdc-filled-text-field-theme.theme(
+          tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($config, warn));
+        @include mdc-outlined-text-field-theme.theme(
+          tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($config, warn));
       }
 
       // This fixes an issue where the notch appears to be thicker than the rest of the outline when
@@ -68,15 +55,16 @@
       // Note: class name is repeated to achieve sufficient specificity over the various MDC states.
       // (hover, focus, etc.)
       // TODO(mmalerba): port this fix into MDC
+      // TODO(crisbeto): move this into the structural styles
       .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field {
-        &.mat-mdc-form-field .mdc-notched-outline__notch {
+        &.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch {
           border-left: 1px solid transparent;
         }
       }
 
       [dir='rtl'] {
         .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field {
-          &.mat-mdc-form-field .mdc-notched-outline__notch {
+          &.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch {
             border-left: none;
             border-right: 1px solid transparent;
           }
@@ -89,38 +77,14 @@
 @mixin typography($config-or-theme) {
   $config: typography.private-typography-to-2018-config(
       theming.get-typography-config($config-or-theme));
-  @include mdc-helpers.using-mdc-typography($config) {
-    @include mdc-textfield.without-ripple($query: mdc-helpers.$mdc-typography-styles-query);
-    @include mdc-floating-label.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
-    @include mdc-notched-outline.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
-    @include mdc-line-ripple.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
-    @include form-field-subscript.private-form-field-subscript-typography($config);
-
-    // MDC uses `subtitle1` for the input value, placeholder and floating label. The spec
-    // shows `body1` for text fields though, so we manually override the typography.
-    // Note: Form controls inherit the typography from the parent form field.
-    .mat-mdc-form-field,
-    .mat-mdc-floating-label {
-      @include mdc-typography.typography(body1, $query: mdc-helpers.$mdc-typography-styles-query);
-    }
 
-    // Above, we updated the floating label to use the `body1` typography level. The MDC notched
-    // outline overrides this accidentally (only when the label floats) to a `rem`-based value.
-    // This results in different label widths when floated/docked and ultimately breaks the notch
-    // width as it has been measured in the docked state (where `body1` is applied). We try to
-    // unset these styles set by the `mdc-notched-outline`:
-    // https://github.com/material-components/material-components-web/blob/master/packages/mdc-notched-outline/_mixins.scss#L272-L292.
-    .mat-mdc-form-field .mdc-text-field--outlined {
-      // For the non-upgraded notch label (i.e. when rendered on the server), also
-      // use the correct `body1` typography level.
-      .mdc-floating-label--float-above {
-        font-size: calc(#{
-            mdc-typography.get-size(body1)} * var(--mat-mdc-form-field-floating-label-scale, 0.75));
-      }
-      .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
-        font-size: mdc-typography.get-size(body1);
-      }
-    }
+  @include sass-utils.current-selector-or-root() {
+    @include mdc-filled-text-field-theme.theme(
+      tokens-mdc-filled-text-field.get-typography-tokens($config));
+    @include mdc-outlined-text-field-theme.theme(
+      tokens-mdc-outlined-text-field.get-typography-tokens($config));
+    @include token-utils.create-token-values(tokens-mat-form-field.$prefix,
+      tokens-mat-form-field.get-typography-tokens($config));
   }
 }
 

package/form-field/_mdc-text-field-structure-overrides.scss

@@ -1,4 +1,8 @@
 @use '@material/textfield/variables' as mdc-textfield-variables;
+@use '@material/typography/typography' as mdc-typography;
+@use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field;
+@use '../core/tokens/token-utils';
+@use '../core/style/vendor-prefixes';
 
 // Mixin that can be included to override the default MDC text-field
 // styles to fit our needs. See individual comments for context on why
@@ -13,6 +17,7 @@
   // Note: We increase specificity here because the MDC textfield seems to override this,
   // depending on the CSS order, with an affix selector joint with the input.
   .mat-mdc-form-field-input-control.mat-mdc-form-field-input-control {
+    @include mdc-typography.smooth-font();
     font: inherit;
     letter-spacing: inherit;
     text-decoration: inherit;
@@ -21,6 +26,8 @@
   }
 
   .mat-mdc-form-field .mat-mdc-floating-label.mdc-floating-label {
+    @include mdc-typography.smooth-font();
+
     // In order to ensure proper alignment of the floating label, we reset its line-height.
     // The line-height is not important as the element is absolutely positioned and only has one
     // line of text.
@@ -86,6 +93,17 @@
     }
   }
 
+  // Before the switch to the tokens MDC was setting a specific placeholder color when the input
+  // is disabled, but now there's no token for it so we need to implement it ourselves.
+  .mat-form-field-disabled .mdc-text-field__input {
+    @include vendor-prefixes.input-placeholder {
+      @include token-utils.use-tokens(
+        tokens-mat-form-field.$prefix, tokens-mat-form-field.get-token-slots()) {
+        @include token-utils.create-token-slot(color, disabled-input-text-placeholder-color);
+      }
+    }
+  }
+
   // The default MDC text-field implementation does not support labels which always float.
   // MDC only renders the placeholder if the input is focused. We extend this to show the
   // placeholder if the form-field label is set to always float.

package/grid-list/_grid-list-theme.scss

@@ -1,7 +1,8 @@
 @use '../core/theming/theming';
 @use '../core/typography/typography';
-@use '../core/typography/typography-utils';
-@use '../core/style/list-common';
+@use '../core/tokens/m2/mat/grid-list' as tokens-mat-grid-list;
+@use '../core/style/sass-utils';
+@use '../core/tokens/token-utils';
 
 
 // Include this empty mixin for consistency with the other components.
@@ -10,10 +11,10 @@
 @mixin typography($config-or-theme) {
   $config: typography.private-typography-to-2014-config(
       theming.get-typography-config($config-or-theme));
-  .mat-grid-tile-header,
-  .mat-grid-tile-footer {
-    @include list-common.base(typography-utils.font-size($config, caption));
-    font-size: typography-utils.font-size($config, body-1);
+
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-grid-list.$prefix,
+      tokens-mat-grid-list.get-typography-tokens($config));
   }
 }
 

package/icon/_icon-theme.scss

@@ -1,25 +1,35 @@
 @use 'sass:map';
 @use '../core/theming/theming';
+@use '../core/tokens/m2/mat/icon' as tokens-mat-icon;
+@use '../core/tokens/token-utils';
+@use '../core/style/sass-utils';
+
+@mixin _palette-colors($config, $palette-name) {
+  $palette: map.get($config, $palette-name);
+  $color: theming.get-color-from-palette($palette, text);
+  $tokens: tokens-mat-icon.private-get-icon-color-tokens($color);
+  @include token-utils.create-token-values(tokens-mat-icon.$prefix, $tokens);
+}
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
-  $primary: map.get($config, primary);
-  $accent: map.get($config, accent);
-  $warn: map.get($config, warn);
-  $background: map.get($config, background);
-  $foreground: map.get($config, foreground);
+
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-icon.$prefix,
+      tokens-mat-icon.get-color-tokens($config));
+  }
 
   .mat-icon {
     &.mat-primary {
-      color: theming.get-color-from-palette($primary, text);
+      @include _palette-colors($config, primary);
     }
 
     &.mat-accent {
-      color: theming.get-color-from-palette($accent, text);
+      @include _palette-colors($config, accent);
     }
 
     &.mat-warn {
-      color: theming.get-color-from-palette($warn, text);
+      @include _palette-colors($config, warn);
     }
   }
 }