diff --git a/package.json b/package.json index 3ed922c7f4e3d2..821a1c9d5563bf 100644 --- a/package.json +++ b/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", diff --git a/src/common/_common.scss b/src/common/_common.scss index b655e273130fdc..a047d898ca1671 100644 --- a/src/common/_common.scss +++ b/src/common/_common.scss @@ -3,5 +3,4 @@ @import './themeOverrides'; @import './focusBorder'; @import './semanticColorVariables'; -@import './fabricExtraIcons'; diff --git a/src/common/_fabricExtraIcons.scss b/src/common/_fabricExtraIcons.scss deleted file mode 100644 index 9bc6b96418aa0e..00000000000000 --- a/src/common/_fabricExtraIcons.scss +++ /dev/null @@ -1,4 +0,0 @@ -.ms-Icon--GroupedAscending:before { content: '\EE67'; } -.ms-Icon--GroupedDescending:before { content: '\EE66'; } -.ms-Icon--SortUp:before { content: '\EE68'; } -.ms-Icon--SortDown:before { content: '\EE69'; } \ No newline at end of file diff --git a/src/components/Breadcrumb/Breadcrumb.scss b/src/components/Breadcrumb/Breadcrumb.scss index 57810b22b078a4..52da224092422c 100644 --- a/src/components/Breadcrumb/Breadcrumb.scss +++ b/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; diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index 1c66a5840e1a0d..294a7cfdfebbfb 100644 --- a/src/components/Button/Button.scss +++ b/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; diff --git a/src/components/Callout/Callout.scss b/src/components/Callout/Callout.scss index 62a6f701be7e98..91fee50c3f89fa 100644 --- a/src/components/Callout/Callout.scss +++ b/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 { diff --git a/src/components/CommandBar/CommandBar.scss b/src/components/CommandBar/CommandBar.scss index 37873196a9afa2..20464ae3a45b9e 100644 --- a/src/components/CommandBar/CommandBar.scss +++ b/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; diff --git a/src/components/ContextualMenu/ContextualMenu.scss b/src/components/ContextualMenu/ContextualMenu.scss index 53690997433b1a..641ec962f28902 100644 --- a/src/components/ContextualMenu/ContextualMenu.scss +++ b/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; diff --git a/src/components/DatePicker/DatePicker.scss b/src/components/DatePicker/DatePicker.scss index 1be5ea96e34320..52e3316ac8dda9 100644 --- a/src/components/DatePicker/DatePicker.scss +++ b/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; diff --git a/src/components/Dialog/Dialog.scss b/src/components/Dialog/Dialog.scss index 85002c57df42e1..a5c3bcd92e462e 100644 --- a/src/components/Dialog/Dialog.scss +++ b/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; } diff --git a/src/components/DocumentCard/DocumentCardActivity.scss b/src/components/DocumentCard/DocumentCardActivity.scss index f42563bedc9084..e226b1452a42ae 100644 --- a/src/components/DocumentCard/DocumentCardActivity.scss +++ b/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; diff --git a/src/components/DocumentCard/DocumentCardLocation.scss b/src/components/DocumentCard/DocumentCardLocation.scss index 59db9d3545744a..987b2eed69eccd 100644 --- a/src/components/DocumentCard/DocumentCardLocation.scss +++ b/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; diff --git a/src/components/DocumentCard/DocumentCardTitle.scss b/src/components/DocumentCard/DocumentCardTitle.scss index 5fbba534a6af5f..307c2fc85c704a 100644 --- a/src/components/DocumentCard/DocumentCardTitle.scss +++ b/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; diff --git a/src/components/Dropdown/Dropdown.scss b/src/components/Dropdown/Dropdown.scss index 6726dd565ba0c6..d4b32dda095551 100644 --- a/src/components/Dropdown/Dropdown.scss +++ b/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; diff --git a/src/components/MessageBar/MessageBar.scss b/src/components/MessageBar/MessageBar.scss index 80b21bf4d1d23b..a84b4fe74650d1 100644 --- a/src/components/MessageBar/MessageBar.scss +++ b/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; } diff --git a/src/components/Panel/Panel.scss b/src/components/Panel/Panel.scss index 898769306b8ff0..428ec57fe7b432 100644 --- a/src/components/Panel/Panel.scss +++ b/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; diff --git a/src/components/PeoplePicker/PeoplePicker.scss b/src/components/PeoplePicker/PeoplePicker.scss index f7da0d8676ee07..e098e17840b0a0 100644 --- a/src/components/PeoplePicker/PeoplePicker.scss +++ b/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; diff --git a/src/components/SearchBox/SearchBox.scss b/src/components/SearchBox/SearchBox.scss index 66da6c497df100..0bf875d64f9f62 100644 --- a/src/components/SearchBox/SearchBox.scss +++ b/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; diff --git a/src/components/Toggle/Toggle.scss b/src/components/Toggle/Toggle.scss index 5a064f34b67320..cbedef75253e32 100644 --- a/src/components/Toggle/Toggle.scss +++ b/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; diff --git a/src/demo/pages/DetailsListPage/examples/DetailsList.Advanced.Example.tsx b/src/demo/pages/DetailsListPage/examples/DetailsList.Advanced.Example.tsx index 1f8c780ec64ab0..f66fdb5ad89aa0 100644 --- a/src/demo/pages/DetailsListPage/examples/DetailsList.Advanced.Example.tsx +++ b/src/demo/pages/DetailsListPage/examples/DetailsList.Advanced.Example.tsx @@ -355,7 +355,7 @@ export class DetailsListAdvancedExample extends React.Component this._onSortColumn(column.key, false) @@ -363,7 +363,7 @@ export class DetailsListAdvancedExample extends React.Component this._onSortColumn(column.key, true) diff --git a/src/demo/pages/GettingStartedPage/GettingStartedPage.scss b/src/demo/pages/GettingStartedPage/GettingStartedPage.scss index 67844a70a6a314..194c9fd8b27b2e 100644 --- a/src/demo/pages/GettingStartedPage/GettingStartedPage.scss +++ b/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;