diff --git a/common/changes/phkuo-semanticMenus_2017-04-28-20-45.json b/common/changes/phkuo-semanticMenus_2017-04-28-20-45.json
new file mode 100644
index 00000000000000..8b6f0c6a83cf18
--- /dev/null
+++ b/common/changes/phkuo-semanticMenus_2017-04-28-20-45.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Shifting the ContextMenu over to semantic slots for colors.",
+      "type": "patch"
+    }
+  ],
+  "email": "phkuo@microsoft.com"
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/common/_semanticColorVariables.scss b/packages/office-ui-fabric-react/src/common/_semanticColorVariables.scss
index 63b2047422cec2..dd5d9ccdeb2722 100644
--- a/packages/office-ui-fabric-react/src/common/_semanticColorVariables.scss
+++ b/packages/office-ui-fabric-react/src/common/_semanticColorVariables.scss
@@ -28,3 +28,58 @@ $selectedActiveBackgroundColor: $ms-color-neutralTertiaryAlt;
 $selectedActiveForegroundColor: $ms-color-neutralPrimary;
 
 $dividerColor: $ms-color-neutralLight;
+
+// *** New semantic slots
+// todo: convert to theme tokens
+
+/*** BASIC ***/
+$bodyBackgroundColor: $ms-color-white;
+$bodyTextColor: $ms-color-neutralPrimary;
+$bodySubtextColor: $ms-color-neutralSecondary;
+
+$disabledBackgroundColor: $ms-color-neutralLighter;
+$disabledTextColor: $ms-color-neutralTertiary;
+$disabledSubtextColor: $ms-color-neutralTertiaryAlt;
+
+$focusBorderColor: $ms-color-black;
+
+// $errorBackgroundColor: todo
+$errorTextColor: $ms-color-redDark;
+
+/*** Text fields ***/
+$fieldBackgroundColor: $ms-color-white;
+$fieldTextColor: $ms-color-neutralPrimary;
+
+$fieldBorderColor: $ms-color-neutralTertiaryAlt;
+$fieldBorderHoverColor: $ms-color-neutralSecondaryAlt;
+$fieldBorderFocusColor: $ms-color-themePrimary;
+
+$fieldPlaceholderColor: $ms-color-neutralTertiary;
+
+/*** State controls ***/
+$controlBackgroundColor: $ms-color-white;
+$controlBackgroundSelectedColor: $ms-color-themePrimary;
+$controlBackgroundSelectedHoverColor: $ms-color-themeSecondary;
+
+$controlForegroundColor: $ms-color-neutralPrimary;
+$controlForegroundHoverColor: $ms-color-black;
+$controlForegroundSelectedColor: $ms-color-white;
+
+$controlBorderUnselectedColor: $ms-color-neutralSecondaryAlt;
+$controlBorderUnselectedHoverColor: $ms-color-black;
+// $controlBorderSelectedColor: unused
+$controlBorderSelectedHoverColor: $ms-color-themePrimary;
+
+/*** Menus ***/
+$menuBackgroundColor: $ms-color-white;
+$menuBackgroundHoverColor: $ms-color-neutralLighter;
+$menuBackgroundSelectedColor: $ms-color-neutralQuaternaryAlt;
+
+$menuTextColor: $ms-color-neutralPrimary;
+$menuTextSelectedColor: $ms-color-black;
+
+$menuIconColor: $ms-color-themePrimary;
+
+$menuHeaderColor: $ms-color-themePrimary;
+
+$menuDividerColor: $ms-color-neutralLight;
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.scss b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.scss
index 900c080d0fd382..ef961c9540aae5 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.scss
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.scss
@@ -1,13 +1,28 @@
 @import '../../common/common';
 
-$ContextualMenu-background: $ms-color-white;
-$ContextualMenu-itemHover: $ms-color-neutralLighter;
-$ContextualMenu-expandedItemBackground: $ms-color-neutralQuaternaryAlt;
+
+
 $ContextualMenu-itemHeight: 36px;
 $ContextualMenu-iconWidth: 14px;
 
+// component slots
+$ContextualMenu-background-color: $menuBackgroundColor;
+$ContextualMenu-background-hover-color: $menuBackgroundHoverColor;
+$ContextualMenu-background-selected-color: $menuBackgroundSelectedColor;
+
+$ContextualMenu-text-color: $menuTextColor;
+$ContextualMenu-text-selected-color: $menuTextSelectedColor;
+
+$ContextualMenu-icon-color: $menuIconColor;
+
+$ContextualMenu-header-color: $menuHeaderColor;
+
+$ContextualMenu-divider-color: $menuDividerColor;
+
+$ContextualMenu-text-disabled: $disabledTextColor;
+
 .root {
-  background-color: $ContextualMenu-background;
+  background-color: $ContextualMenu-background-color;
   min-width: 180px;
 }
 
@@ -20,7 +35,7 @@ $ContextualMenu-iconWidth: 14px;
 
 .item {
   @include ms-font-m;
-  color: $ms-color-neutralPrimary;
+  color: $ContextualMenu-text-color;
   height: $ContextualMenu-itemHeight;
   position: relative;
   box-sizing: border-box;
@@ -42,26 +57,26 @@ $ContextualMenu-iconWidth: 14px;
   @include text-align(left);
 
   &:hover:not([disabled]) {
-    background: $ContextualMenu-itemHover;
+    background: $ContextualMenu-background-hover-color;
   }
   &.isDisabled,
   &[disabled] {
-    color: $ms-color-neutralTertiaryAlt;
+    color: $ContextualMenu-text-disabled;
     cursor: default;
     pointer-events: none;
     .icon {
-      color: $ms-color-neutralTertiaryAlt;
+      color: $ContextualMenu-text-disabled;
     }
   }
 
   :global(.is-focusVisible) &:focus {
-    background: $ContextualMenu-itemHover;
+    background: $ContextualMenu-background-hover-color;
   }
 
   &.isExpanded,
   &.isExpanded:hover {
-    background: $ContextualMenu-expandedItemBackground;
-    color: $ms-color-black;
+    background: $ContextualMenu-background-selected-color;
+    color: $ContextualMenu-text-selected-color;
     font-weight: $ms-font-weight-semibold;
   }
 }
@@ -70,7 +85,7 @@ $ContextualMenu-iconWidth: 14px;
   @include focus-border();
   @include ms-font-s;
   font-weight: $ms-font-weight-semibold;
-  color: $ms-color-themePrimary;
+  color: $ContextualMenu-header-color;
   background: none;
   border: none;
   height: $ContextualMenu-itemHeight;
@@ -105,7 +120,7 @@ a.link {
 .divider {
   display: block;
   height: 1px;
-  background-color: $dividerColor;
+  background-color: $ContextualMenu-divider-color;
   position: relative;
 }
 
@@ -120,7 +135,7 @@ a.link {
 }
 
 .iconColor {
-  color: $ms-color-themePrimary;
+  color: $ContextualMenu-icon-color;
 }
 
 .itemText {