fix(autocomplete,select): inconsistent disabled option coloring (#6640)

* Fixes a selected and disabled option in the autocomplete not showing as disabled until it is hovered.
* Fixes the disabled and selected options in `md-select` using the theme color, instead of the disabled color.
* Fixes the disabled state of an option not being passed down to its checkbox.

Fixes #6638.

Author: crisbeto

src/lib/autocomplete/_autocomplete-theme.scss

@@ -8,14 +8,15 @@
     background: mat-color($background, card);
     color: mat-color($foreground, text);
 
-    .mat-option {
-      // Selected options in autocompletes should not be gray, but we
-      // only want to override the background for selected options if
-      // they are *not* in hover or focus state. This change has to be
-      // made here because base option styles are shared between the
-      // autocomplete and the select.
-      &.mat-selected:not(.mat-active):not(:hover) {
-        background: mat-color($background, card);
+    // Selected options in autocompletes should not be gray, but we
+    // only want to override the background for selected options if
+    // they are *not* in hover or focus state. This change has to be
+    // made here because base option styles are shared between the
+    // autocomplete and the select.
+    .mat-option.mat-selected:not(.mat-active):not(:hover) {
+      background: mat-color($background, card);
+
+      &:not(.mat-option-disabled) {
         color: mat-color($foreground, text);
       }
     }

src/lib/core/option/_option-theme.scss

@@ -12,24 +12,25 @@
   .mat-option {
     color: mat-color($foreground, text);
 
-    &:hover:not(.mat-option-disabled), &:focus:not(.mat-option-disabled) {
+    &:hover:not(.mat-option-disabled),
+    &:focus:not(.mat-option-disabled) {
       background: mat-color($background, hover);
     }
 
-    .mat-primary &.mat-selected {
+    .mat-primary &.mat-selected:not(.mat-option-disabled) {
       color: mat-color($primary);
     }
 
-    .mat-accent &.mat-selected {
+    .mat-accent &.mat-selected:not(.mat-option-disabled) {
       color: mat-color($accent);
     }
 
-    .mat-warn &.mat-selected {
+    .mat-warn &.mat-selected:not(.mat-option-disabled) {
       color: mat-color($warn);
     }
 
     // In multiple mode there is a checkbox to show that the option is selected.
-    &.mat-selected:not(.mat-option-multiple) {
+    &.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {
       background: mat-color($background, hover);
     }
 

src/lib/core/option/option.html

@@ -1,8 +1,8 @@
 <span [ngSwitch]="_isCompatibilityMode" *ngIf="multiple">
   <mat-pseudo-checkbox class="mat-option-pseudo-checkbox" *ngSwitchCase="true"
-      [state]="selected ? 'checked' : ''"></mat-pseudo-checkbox>
+      [state]="selected ? 'checked' : ''" [disabled]="disabled"></mat-pseudo-checkbox>
   <md-pseudo-checkbox class="mat-option-pseudo-checkbox" *ngSwitchDefault
-      [state]="selected ? 'checked' : ''"></md-pseudo-checkbox>
+      [state]="selected ? 'checked' : ''" [disabled]="disabled"></md-pseudo-checkbox>
 </span>
 
 <ng-content></ng-content>