@angular/material 20.0.0-next.5 → 20.0.0-next.7

package/button/_button-theme.scss

@@ -1,111 +1,29 @@
-@use '../core/theming/theming';
+@use '../core/style/sass-utils';
 @use '../core/theming/inspection';
+@use '../core/theming/theming';
 @use '../core/theming/validation';
 @use '../core/tokens/token-utils';
 @use '../core/typography/typography';
-@use '../core/tokens/m2/mat/filled-button' as tokens-mat-filled-button;
-@use '../core/tokens/m2/mat/outlined-button' as tokens-mat-outlined-button;
-@use '../core/tokens/m2/mat/protected-button' as tokens-mat-protected-button;
-@use '../core/tokens/m2/mat/text-button' as tokens-mat-text-button;
-@use '../core/tokens/m2/mat/tonal-button' as tokens-mat-tonal-button;
-@use '../core/style/sass-utils';
+@use './m2-button';
+@use './m3-button';
 
-@mixin _text-button-variant($theme, $palette) {
+@mixin _button-variant($theme, $palette) {
   $mat-tokens: if(
     $palette,
-    tokens-mat-text-button.private-get-color-palette-color-tokens($theme, $palette),
-    tokens-mat-text-button.get-color-tokens($theme)
+    m2-button.private-get-color-palette-color-tokens($theme, $palette),
+    m2-button.get-color-tokens($theme)
   );
 
-  @include token-utils.create-token-values-mixed(tokens-mat-text-button.$prefix, $mat-tokens);
+  @include token-utils.create-token-values-mixed(m2-button.$prefix, $mat-tokens);
 }
 
-@mixin _filled-button-variant($theme, $palette) {
-  $mat-tokens: if(
-    $palette,
-    tokens-mat-filled-button.private-get-color-palette-color-tokens($theme, $palette),
-    tokens-mat-filled-button.get-color-tokens($theme)
-  );
-
-  @include token-utils.create-token-values-mixed(tokens-mat-filled-button.$prefix, $mat-tokens);
-}
-
-@mixin _protected-button-variant($theme, $palette) {
-  $mat-tokens: if(
-    $palette,
-    tokens-mat-protected-button.private-get-color-palette-color-tokens($theme, $palette),
-    tokens-mat-protected-button.get-color-tokens($theme)
-  );
-
-  @include token-utils.create-token-values-mixed(tokens-mat-protected-button.$prefix, $mat-tokens);
-}
-
-@mixin _outlined-button-variant($theme, $palette) {
-  $mat-tokens: if(
-    $palette,
-    tokens-mat-outlined-button.private-get-color-palette-color-tokens($theme, $palette),
-    tokens-mat-outlined-button.get-color-tokens($theme)
-  );
-
-  @include token-utils.create-token-values-mixed(tokens-mat-outlined-button.$prefix, $mat-tokens);
-}
-
-@mixin _tonal-button-variant($theme, $palette) {
-  @include token-utils.create-token-values-mixed(tokens-mat-tonal-button.$prefix, if(
-    $palette,
-    tokens-mat-tonal-button.private-get-color-palette-color-tokens($theme, $palette),
-    tokens-mat-tonal-button.get-color-tokens($theme)
-  ));
-}
-
-
 @mixin _theme-from-tokens($tokens, $options...) {
   @include validation.selector-defined(
     'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
   );
   $mat-text-button-tokens: token-utils.get-tokens-for(
-    $tokens,
-    tokens-mat-text-button.$prefix,
-    $options...
-  );
-  $mat-protected-button-tokens: token-utils.get-tokens-for(
-    $tokens,
-    tokens-mat-protected-button.$prefix,
-    $options...
-  );
-  $mat-filled-button-tokens: token-utils.get-tokens-for(
-    $tokens,
-    tokens-mat-filled-button.$prefix,
-    $options...
-  );
-  $mat-outlined-button-tokens: token-utils.get-tokens-for(
-    $tokens,
-    tokens-mat-outlined-button.$prefix,
-    $options...
-  );
-  $mat-tonal-button-tokens: token-utils.get-tokens-for(
-    $tokens,
-    tokens-mat-tonal-button.$prefix,
-    $options...
-  );
-
-  @include token-utils.create-token-values(tokens-mat-text-button.$prefix, $mat-text-button-tokens);
-  @include token-utils.create-token-values(
-    tokens-mat-protected-button.$prefix,
-    $mat-protected-button-tokens
-  );
-  @include token-utils.create-token-values(
-    tokens-mat-filled-button.$prefix,
-    $mat-filled-button-tokens
-  );
-  @include token-utils.create-token-values(
-    tokens-mat-outlined-button.$prefix,
-    $mat-outlined-button-tokens
-  );
-  @include token-utils.create-token-values(
-    tokens-mat-tonal-button.$prefix,
-    $mat-tonal-button-tokens
-  );
+    $tokens, m2-button.$prefix, $options...);
+  @include token-utils.create-token-values(m2-button.$prefix, $mat-text-button-tokens);
 }
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
@@ -117,25 +35,7 @@
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        tokens-mat-text-button.$prefix,
-        tokens-mat-text-button.get-unthemable-tokens()
-      );
-      @include token-utils.create-token-values-mixed(
-        tokens-mat-filled-button.$prefix,
-        tokens-mat-filled-button.get-unthemable-tokens()
-      );
-      @include token-utils.create-token-values-mixed(
-        tokens-mat-protected-button.$prefix,
-        tokens-mat-protected-button.get-unthemable-tokens()
-      );
-      @include token-utils.create-token-values-mixed(
-        tokens-mat-outlined-button.$prefix,
-        tokens-mat-outlined-button.get-unthemable-tokens()
-      );
-      @include token-utils.create-token-values-mixed(
-        tokens-mat-tonal-button.$prefix,
-        tokens-mat-tonal-button.get-unthemable-tokens()
-      );
+        m2-button.$prefix, m2-button.get-unthemable-tokens());
     }
   }
 }
@@ -150,80 +50,24 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include _text-button-variant($theme, null);
-      @include _filled-button-variant($theme, null);
-      @include _tonal-button-variant($theme, null);
-      @include _protected-button-variant($theme, null);
-      @include _outlined-button-variant($theme, null);
-    }
-
-    .mat-mdc-button {
-      &.mat-primary {
-        @include _text-button-variant($theme, primary);
-      }
-
-      &.mat-accent {
-        @include _text-button-variant($theme, accent);
-      }
-
-      &.mat-warn {
-        @include _text-button-variant($theme, warn);
-      }
-    }
-
-    .mat-mdc-unelevated-button {
-      &.mat-primary {
-        @include _filled-button-variant($theme, primary);
-      }
-
-      &.mat-accent {
-        @include _filled-button-variant($theme, accent);
-      }
-
-      &.mat-warn {
-        @include _filled-button-variant($theme, warn);
-      }
-    }
-
-    .mat-mdc-raised-button {
-      &.mat-primary {
-        @include _protected-button-variant($theme, primary);
-      }
-
-      &.mat-accent {
-        @include _protected-button-variant($theme, accent);
-      }
-
-      &.mat-warn {
-        @include _protected-button-variant($theme, warn);
-      }
-    }
-
-    .mat-mdc-outlined-button {
-      &.mat-primary {
-        @include _outlined-button-variant($theme, primary);
-      }
-
-      &.mat-accent {
-        @include _outlined-button-variant($theme, accent);
-      }
-
-      &.mat-warn {
-        @include _outlined-button-variant($theme, warn);
-      }
+      @include _button-variant($theme, null);
     }
 
+    .mat-mdc-button,
+    .mat-mdc-unelevated-button,
+    .mat-mdc-raised-button,
+    .mat-mdc-outlined-button,
     .mat-tonal-button {
       &.mat-primary {
-        @include _tonal-button-variant($theme, primary);
+        @include _button-variant($theme, primary);
       }
 
       &.mat-accent {
-        @include _tonal-button-variant($theme, accent);
+        @include _button-variant($theme, accent);
       }
 
       &.mat-warn {
-        @include _tonal-button-variant($theme, warn);
+        @include _button-variant($theme, warn);
       }
     }
   }
@@ -237,24 +81,8 @@
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        tokens-mat-text-button.$prefix,
-        tokens-mat-text-button.get-typography-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        tokens-mat-filled-button.$prefix,
-        tokens-mat-filled-button.get-typography-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        tokens-mat-protected-button.$prefix,
-        tokens-mat-protected-button.get-typography-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        tokens-mat-outlined-button.$prefix,
-        tokens-mat-outlined-button.get-typography-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        tokens-mat-tonal-button.$prefix,
-        tokens-mat-tonal-button.get-typography-tokens($theme)
+        m2-button.$prefix,
+        m2-button.get-typography-tokens($theme)
       );
     }
   }
@@ -264,28 +92,13 @@
 /// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    @include token-utils.create-token-values(
+        m3-button.$prefix, m3-button.get-density-tokens($theme));
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        tokens-mat-text-button.$prefix,
-        tokens-mat-text-button.get-density-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        tokens-mat-filled-button.$prefix,
-        tokens-mat-filled-button.get-density-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        tokens-mat-protected-button.$prefix,
-        tokens-mat-protected-button.get-density-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        tokens-mat-outlined-button.$prefix,
-        tokens-mat-outlined-button.get-density-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        tokens-mat-tonal-button.$prefix,
-        tokens-mat-tonal-button.get-density-tokens($theme)
+        m2-button.$prefix,
+        m2-button.get-density-tokens($theme)
       );
     }
   }
@@ -293,37 +106,10 @@
 
 /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
 @function _define-overrides() {
-  $mat-filled-button-tokens: tokens-mat-filled-button.get-token-slots();
-  $mat-outlined-button-tokens: tokens-mat-outlined-button.get-token-slots();
-  $mat-protected-button-tokens: tokens-mat-protected-button.get-token-slots();
-  $mat-text-button-tokens: tokens-mat-text-button.get-token-slots();
-  $mat-tonal-button-tokens: tokens-mat-tonal-button.get-token-slots();
-
   @return (
     (
-      namespace: tokens-mat-filled-button.$prefix,
-      tokens: $mat-filled-button-tokens,
-      prefix: 'filled-',
-    ),
-    (
-      namespace: tokens-mat-outlined-button.$prefix,
-      tokens: $mat-outlined-button-tokens,
-      prefix: 'outlined-',
-    ),
-    (
-      namespace: tokens-mat-protected-button.$prefix,
-      tokens: $mat-protected-button-tokens,
-      prefix: 'protected-',
-    ),
-    (
-      namespace: tokens-mat-text-button.$prefix,
-      tokens: $mat-text-button-tokens,
-      prefix: 'text-',
-    ),
-    (
-      namespace: tokens-mat-tonal-button.$prefix,
-      tokens: $mat-tonal-button-tokens,
-      prefix: 'tonal-',
+      namespace: m2-button.$prefix,
+      tokens: m2-button.get-token-slots(),
     ),
   );
 }
@@ -343,6 +129,9 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-button') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
     } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {

package/button/_fab-theme.scss

@@ -2,9 +2,8 @@
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/theming/validation';
-@use '../core/tokens/m2/mat/extended-fab' as tokens-mat-extended-fab;
-@use '../core/tokens/m2/mat/fab' as tokens-mat-fab;
-@use '../core/tokens/m2/mat/fab-small' as tokens-mat-fab-small;
+@use './m2-fab';
+@use './m3-fab';
 @use '../core/tokens/token-utils';
 @use '../core/typography/typography';
 
@@ -17,16 +16,8 @@
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        tokens-mat-fab.$prefix,
-        tokens-mat-fab.get-unthemable-tokens()
-      );
-      @include token-utils.create-token-values-mixed(
-        tokens-mat-fab-small.$prefix,
-        tokens-mat-fab-small.get-unthemable-tokens()
-      );
-      @include token-utils.create-token-values-mixed(
-        tokens-mat-extended-fab.$prefix,
-        tokens-mat-extended-fab.get-unthemable-tokens()
+        m2-fab.$prefix,
+        m2-fab.get-unthemable-tokens()
       );
     }
   }
@@ -35,21 +26,11 @@
 @mixin _fab-variant($theme, $palette) {
   $mat-tokens: if(
     $palette,
-    tokens-mat-fab.private-get-color-palette-color-tokens($theme, $palette),
-    tokens-mat-fab.get-color-tokens($theme)
-  );
-
-  @include token-utils.create-token-values-mixed(tokens-mat-fab.$prefix, $mat-tokens);
-}
-
-@mixin _fab-small-variant($theme, $palette) {
-  $mat-tokens: if(
-    $palette,
-    tokens-mat-fab-small.private-get-color-palette-color-tokens($theme, $palette),
-    tokens-mat-fab-small.get-color-tokens($theme)
+    m2-fab.private-get-color-palette-color-tokens($theme, $palette),
+    m2-fab.get-color-tokens($theme)
   );
 
-  @include token-utils.create-token-values-mixed(tokens-mat-fab-small.$prefix, $mat-tokens);
+  @include token-utils.create-token-values-mixed(m2-fab.$prefix, $mat-tokens);
 }
 
 /// Outputs color theme styles for the mat-fab.
@@ -63,13 +44,8 @@
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include _fab-variant($theme, null);
-      @include _fab-small-variant($theme, null);
-      @include token-utils.create-token-values-mixed(
-        tokens-mat-extended-fab.$prefix,
-        tokens-mat-extended-fab.get-color-tokens($theme)
-      );
 
-      .mat-mdc-fab {
+      .mat-mdc-fab, .mat-mdc-mini-fab {
         &.mat-primary {
           @include _fab-variant($theme, primary);
         }
@@ -82,20 +58,6 @@
           @include _fab-variant($theme, warn);
         }
       }
-
-      .mat-mdc-mini-fab {
-        &.mat-primary {
-          @include _fab-small-variant($theme, primary);
-        }
-
-        &.mat-accent {
-          @include _fab-small-variant($theme, accent);
-        }
-
-        &.mat-warn {
-          @include _fab-small-variant($theme, warn);
-        }
-      }
     }
   }
 }
@@ -108,16 +70,8 @@
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        tokens-mat-extended-fab.$prefix,
-        tokens-mat-extended-fab.get-typography-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        tokens-mat-fab.$prefix,
-        tokens-mat-fab.get-typography-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        tokens-mat-fab-small.$prefix,
-        tokens-mat-fab-small.get-typography-tokens($theme)
+        m2-fab.$prefix,
+        m2-fab.get-typography-tokens($theme)
       );
     }
   }
@@ -127,16 +81,12 @@
 /// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    @include token-utils.create-token-values(m3-fab.$prefix, m3-fab.get-density-tokens($theme));
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        tokens-mat-fab.$prefix,
-        tokens-mat-fab.get-density-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        tokens-mat-fab-small.$prefix,
-        tokens-mat-fab-small.get-density-tokens($theme)
+        m2-fab.$prefix,
+        m2-fab.get-density-tokens($theme)
       );
     }
   }
@@ -146,18 +96,8 @@
 @function _define-overrides() {
   @return (
     (
-      namespace: tokens-mat-extended-fab.$prefix,
-      tokens: tokens-mat-extended-fab.get-token-slots(),
-      prefix: 'extended-',
-    ),
-    (
-      namespace: tokens-mat-fab.$prefix,
-      tokens: tokens-mat-fab.get-token-slots(),
-    ),
-    (
-      namespace: tokens-mat-fab-small.$prefix,
-      tokens: tokens-mat-fab-small.get-token-slots(),
-      prefix: 'small-',
+      namespace: m2-fab.$prefix,
+      tokens: m2-fab.get-token-slots(),
     ),
   );
 }
@@ -177,6 +117,9 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-fab') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
     } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
@@ -196,21 +139,6 @@
   @include validation.selector-defined(
     'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
   );
-  $mdc-extended-fab-tokens: token-utils.get-tokens-for(
-    $tokens,
-    tokens-mat-extended-fab.$prefix,
-    $options...
-  );
-  $mat-fab-tokens: token-utils.get-tokens-for($tokens, tokens-mat-fab.$prefix, $options...);
-  $mat-fab-small-tokens: token-utils.get-tokens-for(
-    $tokens,
-    tokens-mat-fab-small.$prefix,
-    $options...
-  );
-  @include token-utils.create-token-values(
-    tokens-mat-extended-fab.$prefix,
-    $mdc-extended-fab-tokens
-  );
-  @include token-utils.create-token-values(tokens-mat-fab.$prefix, $mat-fab-tokens);
-  @include token-utils.create-token-values(tokens-mat-fab-small.$prefix, $mat-fab-small-tokens);
+  $mat-fab-tokens: token-utils.get-tokens-for($tokens, m2-fab.$prefix, $options...);
+  @include token-utils.create-token-values(m2-fab.$prefix, $mat-fab-tokens);
 }

package/button/_icon-button-theme.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use 'sass:math';
-@use '../core/tokens/m2/mat/icon-button' as tokens-mat-icon-button;
+@use './m2-icon-button';
+@use './m3-icon-button';
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
 @use '../core/theming/theming';
@@ -14,8 +15,8 @@
     // Add default values for tokens not related to color, typography, or density.
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        tokens-mat-icon-button.$prefix,
-        tokens-mat-icon-button.get-unthemable-tokens()
+        m2-icon-button.$prefix,
+        m2-icon-button.get-unthemable-tokens()
       );
     }
   }
@@ -24,11 +25,11 @@
 @mixin _icon-button-variant($theme, $palette) {
   $mat-tokens: if(
     $palette,
-    tokens-mat-icon-button.private-get-color-palette-color-tokens($theme, $palette),
-    tokens-mat-icon-button.get-color-tokens($theme)
+    m2-icon-button.private-get-color-palette-color-tokens($theme, $palette),
+    m2-icon-button.get-color-tokens($theme)
   );
 
-  @include token-utils.create-token-values-mixed(tokens-mat-icon-button.$prefix, $mat-tokens);
+  @include token-utils.create-token-values-mixed(m2-icon-button.$prefix, $mat-tokens);
 }
 
 /// Outputs color theme styles for the mat-icon-button.
@@ -65,8 +66,8 @@
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        tokens-mat-icon-button.$prefix,
-        tokens-mat-icon-button.get-typography-tokens($theme)
+        m2-icon-button.$prefix,
+        m2-icon-button.get-typography-tokens($theme)
       );
     }
   }
@@ -74,7 +75,8 @@
 
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    @include token-utils.create-token-values(
+        m3-icon-button.$prefix, m3-icon-button.get-density-tokens($theme));
   } @else {
     $icon-size: 24px;
     $density-scale: inspection.get-theme-density($theme);
@@ -90,8 +92,8 @@
 
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        tokens-mat-icon-button.$prefix,
-        tokens-mat-icon-button.get-density-tokens(
+        m2-icon-button.$prefix,
+        m2-icon-button.get-density-tokens(
             $theme, $exclude: (state-layer-size))
       );
     }
@@ -119,8 +121,8 @@
 @function _define-overrides() {
   @return (
     (
-      namespace: tokens-mat-icon-button.$prefix,
-      tokens: tokens-mat-icon-button.get-token-slots(),
+      namespace: m2-icon-button.$prefix,
+      tokens: m2-icon-button.get-token-slots(),
     ),
   );
 }
@@ -137,6 +139,9 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-icon-button') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
     } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
@@ -157,8 +162,8 @@
     'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
   );
   @if ($tokens != ()) {
-    $mat-tokens: token-utils.get-tokens-for($tokens, tokens-mat-icon-button.$prefix, $options...);
+    $mat-tokens: token-utils.get-tokens-for($tokens, m2-icon-button.$prefix, $options...);
 
-    @include token-utils.create-token-values(tokens-mat-icon-button.$prefix, $mat-tokens);
+    @include token-utils.create-token-values(m2-icon-button.$prefix, $mat-tokens);
   }
 }