@angular/material-experimental 17.1.0 → 17.2.0-next.0

package/theming/_definition.scss

@@ -38,24 +38,23 @@ $theme-version: 1;
   }
 
   $type: map.get($config, theme-type) or light;
-  $primary: map.get($config, primary) or m3-palettes.$purple-palette;
-  $secondary: map.get($config, secondary) or $primary;
-  $tertiary: map.get($config, tertiary) or $secondary;
+  $primary: map.get($config, primary) or m3-palettes.$violet-palette;
+  $tertiary: map.get($config, tertiary) or $primary;
 
   @return (
     $internals: (
       theme-version: $theme-version,
       theme-type: $type,
       palettes: (
-        primary: map.remove($primary, neutral, neutral-variant),
-        secondary: map.remove($secondary, neutral, neutral-variant),
-        tertiary: map.remove($tertiary, neutral, neutral-variant),
+        primary: map.remove($primary, neutral, neutral-variant, secondary),
+        secondary: map.get($primary, secondary),
+        tertiary: map.remove($tertiary, neutral, neutral-variant, secondary),
         neutral: map.get($primary, neutral),
         neutral-variant: map.get($primary, neutral-variant),
-        error: map.remove(m3-palettes.$red-palette, neutral, neutral-variant),
+        error: m3-palettes.$private-error-palette,
       ),
       color-tokens: m3-tokens.generate-color-tokens(
-          $type, $primary, $secondary, $tertiary, m3-palettes.$red-palette)
+          $type, $primary, $tertiary, m3-palettes.$private-error-palette)
     )
   );
 }

package/theming/_m3-density.scss

@@ -27,6 +27,7 @@ $_density-tokens: (
   (mdc, elevated-card): (),
   (mdc, extended-fab): (),
   (mdc, fab): (),
+  (mdc, fab-small): (),
   (mdc, filled-text-field): (),
   (mdc, text-button): (
     container-height: (40px, 36px, 32px, 28px),
@@ -41,7 +42,8 @@ $_density-tokens: (
     container-height: (40px, 36px, 32px, 28px),
   ),
   (mdc, icon-button): (
-    state-layer-size: (48px, 44px, 40px, 36px, 32px, 28px),
+    // The size caps out at 24px, because anything lower will be smaller than the icon.
+    state-layer-size: (40px, 36px, 32px, 28px, 24px, 24px),
   ),
   (mdc, linear-progress): (),
   (mdc, list): (
@@ -68,13 +70,19 @@ $_density-tokens: (
   (mat, badge): (),
   (mat, bottom-sheet): (),
   (mat, card): (),
+  (mat, checkbox): (
+    touch-target-display: (block, block, none, none),
+  ),
+  (mat, dialog): (),
   (mat, datepicker): (),
   (mat, divider): (),
   (mat, expansion): (
     header-collapsed-state-height: (48px, 44px, 40px, 36px),
     header-expanded-state-height: (64px, 60px, 56px, 48px),
   ),
-  (mat, fab): (),
+  (mat, fab): (
+    touch-target-display: (block, block, none, none),
+  ),
   (mat, form-field): (
     container-height: (56px, 52px, 48px, 44px, 40px, 36px),
     filled-label-display: (block, block, none, none, none, none),
@@ -84,14 +92,32 @@ $_density-tokens: (
   ),
   (mat, grid-list): (),
   (mat, icon): (),
-  (mat, icon-button): (),
+  (mat, icon-button): (
+    touch-target-display: (block, block, none, none),
+  ),
+  (mat, text-button): (
+    touch-target-display: (block, block, none, none),
+  ),
+  (mat, protected-button): (
+    touch-target-display: (block, block, none, none),
+  ),
+  (mat, filled-button): (
+    touch-target-display: (block, block, none, none),
+  ),
+  (mat, outlined-button): (
+    touch-target-display: (block, block, none, none),
+  ),
   (mat, menu): (),
   (mat, optgroup): (),
   (mat, option): (),
+  (mat, full-pseudo-checkbox): (),
+  (mat, minimal-pseudo-checkbox): (),
   (mat, paginator): (
     container-size: (56px, 52px, 48px, 40px),
   ),
-  (mat, radio): (),
+  (mat, radio): (
+    touch-target-display: (block, block, none, none),
+  ),
   (mat, ripple): (),
   (mat, select): (),
   (mat, sidenav): (),