From 1400bc48053d10e134a755e07a715e8e8ed896c3 Mon Sep 17 00:00:00 2001
From: Michael Prentice <splaktar@gmail.com>
Date: Wed, 28 Mar 2018 17:51:35 -0400
Subject: [PATCH] fix(select): options panel theme supports dark mode

Fixes #3379.
---
 .../select/demoSelectedText/index.html        | 22 ++++++++--------
 .../select/demoSelectedText/script.js         | 25 ++++++++++---------
 src/components/select/select-theme.scss       | 12 ++++-----
 3 files changed, 29 insertions(+), 30 deletions(-)

diff --git a/src/components/select/demoSelectedText/index.html b/src/components/select/demoSelectedText/index.html
index 4cd434b07a..fbefc8f5d6 100644
--- a/src/components/select/demoSelectedText/index.html
+++ b/src/components/select/demoSelectedText/index.html
@@ -1,15 +1,13 @@
 <div ng-controller="SelectedTextController" class="md-padding" ng-cloak>
-  <div>
-    <h1 class="md-title">Pick an item below</h1>
-    <div layout="row">
-      <md-input-container>
-        <label>Items</label>
-        <md-select ng-model="selectedItem" md-selected-text="getSelectedText()">
-          <md-optgroup label="items">
-            <md-option ng-value="item" ng-repeat="item in items">Item {{item}}</md-option>
-          </md-optgroup>
-        </md-select>
-      </md-input-container>
-    </div>
+  <h1 class="md-title">Pick an item below</h1>
+  <div layout="row">
+    <md-input-container>
+      <label>Items</label>
+      <md-select ng-model="selectedItem" md-selected-text="getSelectedText()">
+        <md-optgroup label="items">
+          <md-option ng-repeat="item in items" ng-value="item">Item {{item}}</md-option>
+        </md-optgroup>
+      </md-select>
+    </md-input-container>
   </div>
 </div>
diff --git a/src/components/select/demoSelectedText/script.js b/src/components/select/demoSelectedText/script.js
index fb8a7d32ed..d25ec0b4c6 100644
--- a/src/components/select/demoSelectedText/script.js
+++ b/src/components/select/demoSelectedText/script.js
@@ -1,13 +1,14 @@
 angular
-    .module('selectDemoSelectedText', ['ngMaterial'])
-    .controller('SelectedTextController', function($scope) {
-      $scope.items = [1, 2, 3, 4, 5, 6, 7];
-      $scope.selectedItem;
-      $scope.getSelectedText = function() {
-        if ($scope.selectedItem !== undefined) {
-          return "You have selected: Item " + $scope.selectedItem;
-        } else {
-          return "Please select an item";
-        }
-      };
-    });
+  .module('selectDemoSelectedText', ['ngMaterial'])
+  .controller('SelectedTextController', function ($scope) {
+    $scope.items = [1, 2, 3, 4, 5, 6, 7];
+    $scope.selectedItem = undefined;
+
+    $scope.getSelectedText = function () {
+      if ($scope.selectedItem !== undefined) {
+        return "You have selected: Item " + $scope.selectedItem;
+      } else {
+        return "Please select an item";
+      }
+    };
+  });
diff --git a/src/components/select/select-theme.scss b/src/components/select/select-theme.scss
index 3a24487838..972def5986 100644
--- a/src/components/select/select-theme.scss
+++ b/src/components/select/select-theme.scss
@@ -116,25 +116,25 @@ md-select.md-THEME_NAME-theme {
 
 md-select-menu.md-THEME_NAME-theme {
   md-content {
-    background: '{{background-A100}}';
+    background-color: '{{background-hue-1}}';
 
     md-optgroup {
-      color: '{{background-600-0.87}}';
+      color: '{{foreground-2}}';
     }
 
     md-option {
-      color: '{{background-900-0.87}}';
+      color: '{{foreground-1}}';
 
       &[disabled] {
         .md-text {
-          color: '{{background-400-0.87}}';
+          color: '{{foreground-3}}';
         }
       }
 
       &:not([disabled]) {
         &:focus,
         &:hover {
-          background: '{{background-200}}'
+          background-color: '{{background-500-0.18}}'
         }
       }
 
@@ -158,6 +158,6 @@ md-select-menu.md-THEME_NAME-theme {
   @include checkbox-primary('[selected]');
 
   md-option .md-text {
-    color: '{{background-900-0.87}}';
+    color: '{{foreground-1}}';
   }
 }