@angular/material-experimental 13.2.0 → 13.2.1

package/mdc-button/_button-theme.scss

@@ -34,7 +34,6 @@
 @mixin _outlined-button-variant($color) {
   @include mdc-button-outlined-theme.theme((
     label-text-color: $color,
-    outline-color: $color,
   ));
 }
 
@@ -140,6 +139,10 @@
     }
 
     .mat-mdc-outlined-button {
+      @include mdc-button-outlined-theme.theme((
+        outline-color: rgba(mdc-theme-color.prop-value(on-surface), 0.12)
+      ));
+
       &.mat-unthemed {
         @include _outlined-button-variant($on-surface);
       }
@@ -161,9 +164,9 @@
           // We need to pass both the disabled and enabled values, because the enabled
           // ones apply to anchors while the disabled ones are for buttons.
           label-text-color: $disabled-ink-color,
-          outline-color: $disabled-ink-color,
           disabled-label-text-color: $disabled-ink-color,
-          disabled-outline-color: $disabled-ink-color,
+          outline-color: rgba($on-surface, 0.12),
+          disabled-outline-color: rgba($on-surface, 0.12),
         ));
       }
     }

package/mdc-checkbox/_checkbox-private.scss

@@ -0,0 +1,46 @@
+@use 'sass:map';
+@use 'sass:color';
+@use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
+@use '@material/theme/theme-color' as mdc-theme-color;
+
+// Configuration used to define the theme-related CSS variables.
+$private-checkbox-theme-config: map.merge(mdc-checkbox-theme.$light-theme, (
+  // Exclude all of the ripple-related styles.
+  selected-focus-state-layer-color: null,
+  selected-focus-state-layer-opacity: null,
+  selected-hover-state-layer-color: null,
+  selected-hover-state-layer-opacity: null,
+  selected-pressed-state-layer-color: null,
+  selected-pressed-state-layer-opacity: null,
+  unselected-focus-state-layer-color: null,
+  unselected-focus-state-layer-opacity: null,
+  unselected-hover-state-layer-color: null,
+  unselected-hover-state-layer-opacity: null,
+  unselected-pressed-state-layer-color: null,
+  unselected-pressed-state-layer-opacity: null,
+));
+
+// Mixin that includes the checkbox theme styles with a given palette.
+// By default, the MDC checkbox always uses the `secondary` palette.
+@mixin private-checkbox-styles-with-color($color, $mdc-color) {
+  $on-surface: mdc-theme-color.prop-value(on-surface);
+  $border-color: rgba($on-surface, color.opacity(mdc-checkbox-theme.$border-color));
+  $disabled-color: rgba($on-surface, color.opacity(mdc-checkbox-theme.$disabled-color));
+
+  @include mdc-checkbox-theme.theme((
+    selected-checkmark-color: mdc-theme-color.prop-value(on-#{$mdc-color}),
+
+    selected-focus-icon-color: $color,
+    selected-hover-icon-color: $color,
+    selected-icon-color: $color,
+    selected-pressed-icon-color: $color,
+    unselected-focus-icon-color: $color,
+    unselected-hover-icon-color: $color,
+
+    disabled-selected-icon-color: $disabled-color,
+    disabled-unselected-icon-color: $disabled-color,
+
+    unselected-icon-color: $border-color,
+    unselected-pressed-icon-color: $border-color,
+  ));
+}

package/mdc-checkbox/_checkbox-theme.scss

@@ -9,32 +9,7 @@
 @use '../../material/core/typography/typography';
 @use '../../material/core/theming/theming';
 @use '../../material/core/ripple/ripple-theme';
-
-
-// Mixin that includes the checkbox theme styles with a given palette.
-// By default, the MDC checkbox always uses the `secondary` palette.
-@mixin private-checkbox-styles-with-color($color, $mdc-color) {
-  $on-surface: mdc-theme-color.prop-value(on-surface);
-  $border-color: rgba($on-surface, color.opacity(mdc-checkbox-theme.$border-color));
-  $disabled-color: rgba($on-surface, color.opacity(mdc-checkbox-theme.$disabled-color));
-
-  @include mdc-checkbox-theme.theme((
-    selected-checkmark-color: mdc-theme-color.prop-value(on-#{$mdc-color}),
-
-    selected-focus-icon-color: $color,
-    selected-hover-icon-color: $color,
-    selected-icon-color: $color,
-    selected-pressed-icon-color: $color,
-    unselected-focus-icon-color: $color,
-    unselected-hover-icon-color: $color,
-
-    disabled-selected-icon-color: $disabled-color,
-    disabled-unselected-icon-color: $disabled-color,
-
-    unselected-icon-color: $border-color,
-    unselected-pressed-icon-color: $border-color,
-  ));
-}
+@use './checkbox-private';
 
 // Apply ripple colors to the MatRipple element and the MDC ripple element when the
 // checkbox is selected.
@@ -77,17 +52,17 @@
       // class for accent and warn style, and applying the appropriate overrides below. Since we
       // don't use MDC's ripple, we also need to set the color for our replacement ripple.
       &.mat-primary {
-        @include private-checkbox-styles-with-color($primary, primary);
+        @include checkbox-private.private-checkbox-styles-with-color($primary, primary);
         @include _selected-ripple-colors($primary, primary);
       }
 
       &.mat-accent {
-        @include private-checkbox-styles-with-color($accent, secondary);
+        @include checkbox-private.private-checkbox-styles-with-color($accent, secondary);
         @include _selected-ripple-colors($accent, secondary);
       }
 
       &.mat-warn {
-        @include private-checkbox-styles-with-color($warn, error);
+        @include checkbox-private.private-checkbox-styles-with-color($warn, error);
         @include _selected-ripple-colors($warn, error);
       }
     }

package/mdc-list/_list-option-theme.scss

@@ -1,14 +1,14 @@
 @use '@material/checkbox' as mdc-checkbox;
-@use '../mdc-checkbox/checkbox-theme';
+@use '../mdc-checkbox/checkbox-private';
 @use '../mdc-helpers/mdc-helpers';
 @use './list-option-trailing-avatar-compat';
 
 // Mixin that overrides the selected item and checkbox colors for list options. By
 // default, the MDC list uses the `primary` color for list items. The MDC checkbox
 // inside list options by default uses the `primary` color too.
-@mixin private-list-option-color-override($color, $mdcColor) {
+@mixin private-list-option-color-override($color, $mdc-color) {
   & .mdc-list-item__start, & .mdc-list-item__end {
-    @include checkbox-theme.private-checkbox-styles-with-color($color, $mdcColor);
+    @include checkbox-private.private-checkbox-styles-with-color($color, $mdc-color);
   }
 }
 

package/mdc-list/_list-option-trailing-avatar-compat.scss

@@ -3,6 +3,7 @@
 @use '@material/density/functions' as density-functions;
 @use '@material/list/evolution-mixins' as mdc-list;
 @use '@material/list/evolution-variables' as mdc-list-variables;
+@use '../mdc-helpers/mdc-helpers';
 
 // For compatibility with the non-MDC selection list, we support avatars that are
 // shown at the end of the list option. This is not supported by the MDC list as the
@@ -15,19 +16,21 @@
 @mixin core-styles($query) {
   $feat-structure: feature-targeting.create-target($query, structure);
 
-  .mat-mdc-list-option-with-trailing-avatar {
-    @include mdc-list.item-end-spacing(16px, $query: $query);
-    @include mdc-list.item-end-size(40px, $query: $query);
+  @include mdc-helpers.disable-fallback-declarations {
+    .mat-mdc-list-option-with-trailing-avatar {
+      @include mdc-list.item-end-spacing(16px, $query: $query);
+      @include mdc-list.item-end-size(40px, $query: $query);
 
-    &.mdc-list-item--with-two-lines {
-      .mdc-list-item__primary-text {
-        @include typography.text-baseline($top: 32px, $bottom: 20px, $query: $query);
+      &.mdc-list-item--with-two-lines {
+        .mdc-list-item__primary-text {
+          @include typography.text-baseline($top: 32px, $bottom: 20px, $query: $query);
+        }
       }
-    }
 
-    .mdc-list-item__end {
-      @include feature-targeting.targets($feat-structure) {
-        border-radius: 50%;
+      .mdc-list-item__end {
+        @include feature-targeting.targets($feat-structure) {
+          border-radius: 50%;
+        }
       }
     }
   }
@@ -46,8 +49,10 @@
     $property-name: height,
   );
 
-  .mat-mdc-list-option-with-trailing-avatar {
-    @include mdc-list.one-line-item-height($one-line-tall-height);
-    @include mdc-list.two-line-item-height($two-line-tall-height);
+  @include mdc-helpers.disable-fallback-declarations {
+    .mat-mdc-list-option-with-trailing-avatar {
+      @include mdc-list.one-line-item-height($one-line-tall-height);
+      @include mdc-list.two-line-item-height($two-line-tall-height);
+    }
   }
 }

package/mdc-list/_list-theme.scss

@@ -16,11 +16,10 @@
   $accent: theming.get-color-from-palette(map.get($config, accent));
   $warn: theming.get-color-from-palette(map.get($config, warn));
 
-  // MDC's state styles are tied in with their ripple. Since we don't use the MDC
-  // ripple, we need to add the hover, focus and selected states manually.
-  @include interactive-list-theme.private-interactive-list-item-state-colors($config);
-
   @include mdc-helpers.mat-using-mdc-theme($config) {
+    // MDC's state styles are tied in with their ripple. Since we don't use the MDC
+    // ripple, we need to add the hover, focus and selected states manually.
+    @include interactive-list-theme.private-interactive-list-item-state-colors($config);
     @include mdc-list.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
 
     .mat-mdc-list-option {
@@ -38,13 +37,15 @@
 @mixin density($config-or-theme) {
   $density-scale: theming.get-density-config($config-or-theme);
 
-  .mat-mdc-list-item {
-    @include mdc-list.one-line-item-density($density-scale);
-    @include mdc-list.two-line-item-density($density-scale);
-    @include mdc-list.three-line-item-density($density-scale);
-  }
+  @include mdc-helpers.disable-fallback-declarations {
+    .mat-mdc-list-item {
+      @include mdc-list.one-line-item-density($density-scale);
+      @include mdc-list.two-line-item-density($density-scale);
+      @include mdc-list.three-line-item-density($density-scale);
+    }
 
-  @include list-option-theme.private-list-option-density-styles($density-scale);
+    @include list-option-theme.private-list-option-density-styles($density-scale);
+  }
 }
 
 @mixin typography($config-or-theme) {