use background color for disabled items

Author: sllethe

src/lib/core/theming/_palette.scss

@@ -659,6 +659,7 @@ $mat-light-theme-background: (
   selected-button: map_get($mat-grey, 300),
   selected-disabled-button: map_get($mat-grey, 400),
   disabled-button-toggle: map_get($mat-grey, 200),
+        disabled-list-option: map_get($mat-grey, 200),
 );
 
 // Background palette for dark themes.
@@ -675,6 +676,7 @@ $mat-dark-theme-background: (
   selected-button: map_get($mat-grey, 900),
   selected-disabled-button: map_get($mat-grey, 800),
   disabled-button-toggle: map_get($mat-grey, 1000),
+        disabled-list-option: map_get($mat-grey, 1000),
 );
 
 // Foreground palette for light themes.

src/lib/list/_list-theme.scss

@@ -20,10 +20,10 @@
     .mat-subheader {
       color: mat-color($foreground, secondary-text);
     }
+  }
 
-    .mat-list-item-disabled {
-      background: #ededed;
-    }
+  .mat-list-item-disabled {
+    background-color: mat-color($background, disabled-list-option);
   }
 
   .mat-divider {
@@ -73,10 +73,6 @@
     .mat-subheader {
       @include mat-typography-level-to-styles($config, body-2);
     }
-
-    .mat-list-item-disabled {
-      background: #ededed;
-    }
   }
 
   // Dense list
@@ -94,9 +90,5 @@
     .mat-subheader {
       font: mat-font-weight($config, body-2) mat-font-size($config, caption) $font-family;
     }
-
-    .mat-list-item-disabled {
-      background: #ededed;
-    }
   }
 }

src/lib/list/list-option.ts

@@ -20,6 +20,7 @@ import {
   OnDestroy,
   EventEmitter,
   Output,
+  HostBinding,
   ChangeDetectorRef
 } from '@angular/core';
 import {coerceBooleanProperty, MdLine, MdLineSetter} from '../core';
@@ -80,6 +81,7 @@ export class MdListOption implements AfterContentInit, OnDestroy, Focusable {
   @Input() checkboxPosition: 'before' | 'after' = 'after';
 
   /** Whether the option is disabled. */
+  @HostBinding('class.mat-list-item-disabled')
   @Input()
   get disabled() { return (this.selectionList && this.selectionList.disabled) || this._disabled; }
   set disabled(value: any) { this._disabled = coerceBooleanProperty(value); }