Theming: add the bodyBackgroundDarker semantic slot

common/changes/@uifabric/styling/phkuo-bodyBg2slot_2018-05-23-00-37.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/styling",
+      "comment": "add new semantic slot",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/styling",
+  "email": "phkuo@microsoft.com"
+}

common/changes/@uifabric/variants/phkuo-bodyBg2slot_2018-05-23-00-37.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/variants",
+      "comment": "update variants algorithm for new semantic slot",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/variants",
+  "email": "phkuo@microsoft.com"
+}

common/changes/office-ui-fabric-react/phkuo-bodyBg2slot_2018-05-23-00-37.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "add new semantic slot",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "phkuo@microsoft.com"
+}

packages/office-ui-fabric-react/src/common/_semanticSlots.scss

@@ -1,5 +1,6 @@
 /* Base slots */
 $bodyBackgroundColor: "[theme:bodyBackground, default: #ffffff]";
+$bodyFrameBackgroundColor: "[theme:bodyFrameBackground, default: #ffffff]";
 $bodyTextColor: "[theme:bodyText, default: #333333]";
 $bodyTextCheckedColor: "[theme:bodyTextChecked, default: #000000]";
 $bodySubtextColor: "[theme:bodySubtext, default: #666666]";

packages/office-ui-fabric-react/src/components/MarqueeSelection/__snapshots__/MarqueeSelection.test.tsx.snap

@@ -208,6 +208,7 @@ exports[`MarqueeSelection renders MarqueeSelection correctly 1`] = `
             "blockingBackground": "rgba(234, 67, 0, .2)",
             "bodyBackground": "#ffffff",
             "bodyDivider": "#c8c8c8",
+            "bodyFrameBackground": "#ffffff",
             "bodySubtext": "#666666",
             "bodyText": "#333333",
             "bodyTextChecked": "#000000",

packages/styling/src/interfaces/ISemanticColors.ts

@@ -56,6 +56,13 @@ export interface ISemanticColors {
    */
   bodyBackground: string;
 
+  /**
+   * A special semantic slot that will always be the same or darker (not necessarily stronger) than the bodyBackground slot, even in
+   * an inverted theme. This is used for zones near the edge of the page, to provide a vignetting effect. This is especially effective
+   * with zones near the edge of the page in stronger themes or if it uses a variant theme.
+   */
+  bodyFrameBackground: string;
+
   /**
    * The default color for text.
    */

packages/styling/src/styles/theme.ts

@@ -125,10 +125,10 @@ export function createTheme(theme: IPartialTheme, depComments: boolean = false):
 
 // Generates all the semantic slot colors based on the Fabric palette.
 // We'll use these as fallbacks for semantic slots that the passed in theme did not define.
-// This does NOT fix deprecated slots.
 function _makeSemanticColorsFromPalette(p: IPalette, isInverted: boolean, depComments: boolean): ISemanticColors {
   let toReturn: ISemanticColors = {
     bodyBackground: p.white,
+    bodyFrameBackground: p.white,
     bodyText: p.neutralPrimary,
     bodyTextChecked: p.black,
     bodySubtext: p.neutralSecondary,
@@ -185,7 +185,7 @@ function _makeSemanticColorsFromPalette(p: IPalette, isInverted: boolean, depCom
     link: p.themePrimary,
     linkHovered: p.themeDarker,
 
-    // Deprecated slots, fixed by _fixDeprecatedSlots() later
+    // Deprecated slots, second pass by _fixDeprecatedSlots() later for self-referential slots
     listTextColor: '',
     menuItemBackgroundChecked: p.neutralLight
   };

packages/variants/src/variants.ts

@@ -64,7 +64,8 @@ export function getNeutralVariant(theme: IPartialTheme): ITheme {
   };
 
   const partialSemantic: Partial<ISemanticColors> = {
-    bodyBackground: p.neutralLighter
+    bodyBackground: p.neutralLighter,
+    bodyFrameBackground: !fullTheme.isInverted ? p.neutralLight : p.neutralLighterAlt
   };
 
   return makeThemeFromPartials(theme, partialPalette, partialSemantic);
@@ -115,6 +116,7 @@ export function getSoftVariant(theme: IPartialTheme): ITheme {
 
   const partialSemantic: Partial<ISemanticColors> = {
     bodyBackground: p.themeLighter,
+    bodyFrameBackground: !fullTheme.isInverted ? p.themeLight : p.themeLighterAlt,
 
     inputBorder: p.themeLighter,
     // inputBorderHovered: p.neutralPrimary,
@@ -179,6 +181,8 @@ export function getStrongVariant(theme: IPartialTheme): ITheme {
 
   const partialSemantic: Partial<ISemanticColors> = {
     bodyBackground: p.themePrimary,
+    bodyFrameBackground: !fullTheme.isInverted ? p.themeDarkAlt : p.themeSecondary,
+
     bodyText: p.white,
     bodySubtext: p.white,