feat(list): Add mixin for disabled text opacity (#4861)

Author: patrickrodee

packages/mdc-list/README.md

@@ -411,6 +411,8 @@ Mixin | Description
 `mdc-list-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to list item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
 `mdc-list-divider-color($color)` | Sets divider ink color.
 `mdc-list-group-subheader-ink-color($color)` | Sets ink color of subheader text within list group.
+`mdc-list-item-disabled-text-color($color`) | Sets the color of the text when the list item is disabled.
+`mdc-list-item-disabled-text-opacity($opacity`) | Sets the opacity of the text when the list item is disabled.
 
 ### Accessibility
 

packages/mdc-list/_mixins.scss

@@ -63,6 +63,8 @@
   @include mdc-list-item-graphic-ink-color(text-icon-on-background, $query);
   @include mdc-list-item-meta-ink-color(text-hint-on-background, $query);
   @include mdc-list-group-subheader-ink-color(text-primary-on-background, $query);
+  @include mdc-list-item-disabled-text-opacity($mdc-list-text-disabled-opacity, $query);
+  @include mdc-list-item-disabled-text-color($mdc-list-text-disabled-color, $query);
 
   .mdc-list--dense {
     @include mdc-feature-targets($feat-structure) {
@@ -86,10 +88,6 @@
     @include mdc-list-item-graphic-ink-color(primary, $query);
   }
 
-  .mdc-list-item--disabled {
-    @include mdc-list-item-primary-text-ink-color(text-disabled-on-background, $query);
-  }
-
   .mdc-list-item__graphic {
     @include mdc-feature-targets($feat-structure) {
       @include mdc-list-graphic-size_(24px);
@@ -393,6 +391,26 @@
   }
 }
 
+@mixin mdc-list-item-disabled-text-opacity($opacity, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+
+  .mdc-list-item--disabled .mdc-list-item__text {
+    @include mdc-feature-targets($feat-color) {
+      opacity: $opacity;
+    }
+  }
+}
+
+@mixin mdc-list-item-disabled-text-color($color, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+
+  .mdc-list-item--disabled .mdc-list-item__text {
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-theme-prop(color, $color);
+    }
+  }
+}
+
 //
 // Private
 //

packages/mdc-list/_variables.scss

@@ -22,3 +22,5 @@ $mdc-list-divider-color-on-light-bg: rgba(0, 0, 0, .12) !default;
 $mdc-list-divider-color-on-dark-bg: rgba(255, 255, 255, .2) !default;
 $mdc-list-side-padding: 16px !default;
 $mdc-list-text-offset: 72px !default;
+$mdc-list-text-disabled-opacity: mdc-theme-text-emphasis(disabled) !default;
+$mdc-list-text-disabled-color: on-surface !default;

packages/mdc-menu/_mixins.scss

@@ -66,17 +66,6 @@
       }
     }
 
-    // Target Windows high-contrast mode.
-    @media screen and (-ms-high-contrast: active) {
-      .mdc-list-item--disabled {
-        @include mdc-feature-targets($feat-structure) {
-          // Decrease opacity of the list item, not just the text color,
-          // or disabled items won't be differentiated in high contrast mode.
-          opacity: mdc-theme-text-emphasis(disabled);
-        }
-      }
-    }
-
     //stylelint-disable selector-no-qualifying-type
     a.mdc-list-item .mdc-list-item__text,
     a.mdc-list-item .mdc-list-item__graphic {