MDL2: Fabric-core ver bump

package.json

@@ -22,7 +22,7 @@
     "gulp-util": "3.0.7",
     "gutil": "1.6.4",
     "highlight.js": "9.4.0",
-    "office-ui-fabric-core": "^3.1.0",
+    "office-ui-fabric-core": "^4.0.0",
     "react-addons-test-utils": "^15.1.0",
     "react-highlight": "0.8.0",
     "source-map-loader": "0.1.5",

src/common/_common.scss

@@ -3,5 +3,4 @@
 @import './themeOverrides';
 @import './focusBorder';
 @import './semanticColorVariables';
-@import './fabricExtraIcons';
 

src/components/Breadcrumb/Breadcrumb.scss

@@ -47,6 +47,7 @@ $Breadcrumb-itemMaxWidth-sm: 116px;
     .ms-Breadcrumb-itemLink {
       @include focus-border;
       @include ms-font-xl;
+      color: $ms-color-neutralPrimary;
       display: inline-block;
       padding: 0 4px;
       max-width: $Breadcrumb-itemMaxWidth;

src/components/Button/Button.scss

@@ -13,6 +13,7 @@
   @include focus-border();
   @include ms-font-m;
   @include ms-u-normalize;
+  color: $ms-color-neutralPrimary;
   background-color: $ms-color-neutralLighter;
   border: 1px solid $ms-color-neutralLighter;
   cursor: pointer;

src/components/Callout/Callout.scss

@@ -51,17 +51,20 @@ $Callout-beak-slant-width: 28px;
 .ms-Callout-title {
   margin: 0;
   @include ms-font-xl;
+  color: $ms-color-neutralPrimary;
   font-weight: $ms-font-weight-semilight;
 }
 
 .ms-Callout-subText {
   margin: 0;
   @include ms-font-s;
+  color: $ms-color-neutralPrimary;
   font-weight: $ms-font-weight-semilight;
 }
 
 .ms-Callout-link {
   @include ms-font-m;
+  color: $ms-color-neutralPrimary;
 }
 
 .ms-Callout-actions {

src/components/CommandBar/CommandBar.scss

@@ -43,6 +43,7 @@ $SearchBox-sidePadding: 8px; // padding in input on left and right sides without
 
 .ms-CommandBar {
   @include ms-font-m;
+  color: $ms-color-neutralPrimary;
 
   position: relative;
   background-color: $ms-color-neutralLighter;
@@ -99,6 +100,7 @@ $SearchBox-sidePadding: 8px; // padding in input on left and right sides without
 @mixin CommandBarItem-text {
   @include focus-border(2px);
   @include ms-font-m;
+  color: $ms-color-neutralPrimary;
 
   position: relative;
   background: none;

src/components/ContextualMenu/ContextualMenu.scss

@@ -22,6 +22,7 @@ $ContextualMenu-iconWidth: 14px;
 
 .ms-ContextualMenu-item {
   @include ms-font-m;
+  color: $ms-color-neutralPrimary;
 
   position: relative;
   box-sizing: border-box;

src/components/DatePicker/DatePicker.scss

@@ -112,6 +112,7 @@
 .ms-DatePicker-year {
   display: inline-block;
   @include ms-font-xl;
+  color: $ms-color-neutralPrimary;
   margin-top: -1px;
 
   &:hover {
@@ -155,6 +156,7 @@
   padding: 0;
   line-height: 40px;
   @include ms-font-m-plus;
+  color: $ms-color-neutralPrimary;
 }
 
 
@@ -268,6 +270,7 @@
 .ms-DatePicker-currentDecade {
   display: block;
   @include ms-font-xl;
+  color: $ms-color-neutralPrimary;
   height: 40px;
   line-height: 42px;
   @include margin-left(15px);
@@ -325,6 +328,7 @@
   color: $ms-color-themePrimary;
   cursor: pointer;
   @include ms-font-s-plus;
+  color: $ms-color-neutralPrimary;
   height: 30px;
   line-height: 30px;
   padding: 0 10px;

src/components/Dialog/Dialog.scss

@@ -94,6 +94,7 @@ $Dialog-default-max-width: 340px;
   margin: 0;
   display: table-cell;
   @include ms-font-xl;
+  color: $ms-color-neutralPrimary;
   padding: 20px 28px 20px;
   width: 100%;
 }
@@ -122,6 +123,7 @@ $Dialog-default-max-width: 340px;
   margin: 0 0 20px 0;
   padding-top: 8px;
   @include ms-font-s;
+  color: $ms-color-neutralPrimary;
   font-weight: $ms-font-weight-semilight;
   line-height: 1.5;
 }

src/components/DocumentCard/DocumentCardActivity.scss

@@ -59,6 +59,7 @@ $ms-DocumentCardActivity-personaTextGutter: 8px;
 .ms-DocumentCardActivity-activity {
   display: block;
   @include ms-font-s;
+  color: $ms-color-neutralPrimary;
   line-height: 14px;
   height: 14px;
   overflow: hidden;

src/components/DocumentCard/DocumentCardLocation.scss

@@ -2,6 +2,7 @@
 
 .ms-DocumentCardLocation {
   @include ms-font-s;
+  color: $ms-color-neutralPrimary;
   display: block;
   padding: 8px 16px;
   position: relative;

src/components/DocumentCard/DocumentCardTitle.scss

@@ -4,6 +4,7 @@
   padding: 8px 16px;
   display: block;
   @include ms-font-l;
+  color: $ms-color-neutralPrimary;
   height: 36px; // Two lines of text, making sure the third line is hidden
   line-height: 20px;
   overflow: hidden;

src/components/Dropdown/Dropdown.scss

@@ -32,6 +32,7 @@ $Dropdown-selectedItem-hover-bg: $ms-color-neutralLighter;
 .ms-Dropdown {
   @include ms-u-normalize;
   @include ms-font-m;
+  color: $ms-color-neutralPrimary;
 
   margin-bottom: 10px;
   position: relative;

src/components/MessageBar/MessageBar.scss

@@ -40,6 +40,7 @@ $MessageBar-padding: 8px;
 
 .ms-MessageBar-text {
   @include ms-font-s;
+  color: $ms-color-neutralPrimary;
   min-width: 0;
   display: flex;
 }

src/components/Panel/Panel.scss

@@ -314,6 +314,7 @@ $CommandBarHeight: 40px;
 // Header text at the top of the panel.
 .ms-Panel-headerText {
   @include ms-font-xl;
+  color: $ms-color-neutralPrimary;
   margin: 10px 0;
   padding: 4px 0;
   line-height: 1;

src/components/PeoplePicker/PeoplePicker.scss

@@ -30,6 +30,7 @@ $personaItemHeight: 42px;
 .ms-PeoplePicker {
   @include ms-font-m;
   @include ms-u-normalize;
+  color: $ms-color-neutralPrimary;
   background-color: $ms-color-white;
   margin-bottom: 10px;
   position: relative;

src/components/SearchBox/SearchBox.scss

@@ -14,6 +14,7 @@ $SearchBox-height: 36px;
 .ms-SearchBox {
   @include ms-font-m;
   @include ms-u-normalize;
+  color: $ms-color-neutralPrimary;
   position: relative;
   margin-bottom: 10px;
   display: inline-block;

src/components/Toggle/Toggle.scss

@@ -22,6 +22,7 @@
   @include ms-baseFont;
   @include ms-font-m;
   @include ms-u-normalize;
+  color: $ms-color-neutralPrimary;
 
   position: relative;
   display: block;

src/demo/pages/DetailsListPage/examples/DetailsList.Advanced.Example.tsx

@@ -355,15 +355,15 @@ export class DetailsListAdvancedExample extends React.Component<any, IDetailsLis
       {
         key: 'aToZ',
         name: 'A to Z',
-        icon: 'Up',
+        icon: 'SortUp',
         canCheck: true,
         isChecked: column.isSorted && !column.isSortedDescending,
         onClick: () => this._onSortColumn(column.key, false)
       },
       {
         key: 'zToA',
         name: 'Z to A',
-        icon: 'Down',
+        icon: 'SortDown',
         canCheck: true,
         isChecked: column.isSorted && column.isSortedDescending,
         onClick: () => this._onSortColumn(column.key, true)

src/demo/pages/GettingStartedPage/GettingStartedPage.scss

@@ -19,7 +19,6 @@
 
 .ms-GettingStartedPage-banner {
   background: $ms-color-neutralLight;
-  color: white;
   padding: 1px 20px;
   margin: -20px;
   margin-bottom: 20px;