[MDL2]: Dropdown and ContextualMenu style updates

src/common/_semanticColorVariables.scss

@@ -1,4 +1,4 @@
-$focusedBorderColor: $ms-color-neutralSecondaryAlt;
+$focusedBorderColor: $ms-color-neutralSecondary;
 
 $bodyBackgroundColor: $ms-color-white;
 $bodyForegroundColor: $ms-color-neutralPrimary;

src/components/ContextualMenu/ContextualMenu.scss

@@ -1,9 +1,9 @@
 @import '../../common/common';
 
 $ContextualMenu-background: $ms-color-white;
-$ContextualMenu-itemHover: $ms-color-neutralLight;
+$ContextualMenu-itemHover: $ms-color-neutralLighter;
 $ContextualMenu-expandedItemBackground: $ms-color-neutralQuaternaryAlt;
-$ContextualMenu-itemHeight: 40px;
+$ContextualMenu-itemHeight: 36px;
 $ContextualMenu-iconWidth: 24px;
 
 .ms-ContextualMenu {
@@ -40,15 +40,22 @@ $ContextualMenu-iconWidth: 24px;
   height: $ContextualMenu-itemHeight;
   line-height: $ContextualMenu-itemHeight;
   display: block;
+  cursor: pointer;
   @include text-align(left);
 
   &:hover:not([disabled]) {
     background: $ContextualMenu-itemHover;
   }
 
+  .is-focusVisible &:focus {
+    background: $ContextualMenu-itemHover;
+  }
+
   &.is-expanded,
   &.is-expanded:hover {
     background: $ContextualMenu-expandedItemBackground;
+    color: $ms-color-black;
+    font-weight: $ms-font-weight-semibold;
   }
 }
 

src/components/Dropdown/Dropdown.scss

@@ -7,6 +7,9 @@
 // --------------------------------------------------
 // Dropdown styles
 
+$Dropdown-selectedItem-bg: $ms-color-neutralQuaternaryAlt;
+$Dropdown-selectedItem-hover-bg: $ms-color-neutralLighter;
+
 // Mixin for high contrast mode link states
 @mixin highContrastListItemState {
   @media screen and (-ms-high-contrast: active) {
@@ -27,12 +30,9 @@
 }
 
 .ms-Dropdown {
-  @include ms-baseFont;
   @include ms-u-normalize;
-  color: $ms-color-neutralPrimary;
+  @include ms-font-m;
 
-  font-size: $ms-font-size-m;
-  font-weight: $ms-font-weight-regular;
   margin-bottom: 10px;
   position: relative;
   outline: 0;
@@ -50,7 +50,7 @@
   &:hover,
   &:active {
     .ms-Dropdown-title {
-      border-color: $ms-color-neutralSecondaryAlt;
+      border-color: $ms-color-themePrimary;
     }
   }
 
@@ -205,15 +205,20 @@
   }
 
   &:hover {
-    background-color: $ms-color-neutralLight;
+    background-color: $Dropdown-selectedItem-hover-bg;
     color: $ms-color-black;
 
     @include highContrastListItemState;
   }
 
+  @include focus-border();
+
+  &:focus {
+    background-color: $ms-color-neutralLighter;
+  }
+
   &:active {
-    background-color: $ms-color-neutralLight;
-    border-color: $ms-color-themePrimary;
+    background-color: $Dropdown-selectedItem-hover-bg;
     color: $ms-color-black;
   }
 
@@ -229,12 +234,14 @@
 // Use .is-selected instead.
 .ms-Dropdown-item.is-selected,
 .ms-Dropdown-item.ms-Dropdown-item--selected {
-  background-color: $ms-color-themeLight;
+  background-color: $Dropdown-selectedItem-bg;
   color: $ms-color-black;
 
   &:hover {
-    background-color: $ms-color-themeLight;
+    background-color: $Dropdown-selectedItem-bg;
   }
 
+  @include focus-border();
+
   @include highContrastListItemState;
 }

src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Checkmarks.Example.tsx

@@ -40,23 +40,20 @@ export class ContextualMenuCheckmarksExample extends React.Component<any, IConte
             [
               {
                 key: keys[0],
-                icon: 'CirclePlus',
                 name: 'New',
                 canCheck: true,
                 isChecked: selection[keys[0]],
                 onClick: this._onToggleSelect
               },
               {
                 key: keys[1],
-                icon: 'Share',
                 name: 'Share',
                 canCheck: true,
                 isChecked: selection[keys[1]],
                 onClick: this._onToggleSelect
               },
               {
                 key: keys[2],
-                icon: 'CellPhone',
                 name: 'Mobile',
                 canCheck: true,
                 isChecked: selection[keys[2]],
@@ -69,23 +66,20 @@ export class ContextualMenuCheckmarksExample extends React.Component<any, IConte
 
               {
                 key: keys[3],
-                icon: 'Print',
                 name: 'Print',
                 canCheck: true,
                 isChecked: selection[keys[3]],
                 onClick: this._onToggleSelect
               },
               {
                 key: keys[4],
-                icon: 'MusicInCollectionFill',
                 name: 'Music',
                 canCheck: true,
                 isChecked: selection[keys[4]],
                 onClick: this._onToggleSelect
               },
               {
                 key: keys[5],
-                icon: 'CirclePlus',
                 items: [
                   {
                     key: keys[6],