From d011db2756286dffc4ec8c4b27b94b37371a826b Mon Sep 17 00:00:00 2001
From: Brigette Lundeen <brlundee@microsoft.com>
Date: Thu, 4 Oct 2018 10:12:40 -0700
Subject: [PATCH 1/2] adding in theme background aware doc examples

---
 .../ComponentExample/ComponentExample.tsx     | 24 +++++++++++++------
 src/themes/teams-dark/siteVariables.ts        |  9 +++++++
 .../teams-high-contrast/siteVariables.ts      |  6 +++++
 src/themes/teams/siteVariables.ts             |  1 +
 4 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
index e7a0fa0c92..b7c05bc270 100644
--- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
+++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
@@ -687,13 +687,23 @@ class ComponentExample extends React.Component<IComponentExampleProps, IComponen
             </Grid.Column>
           )}
 
-          <Grid.Column
-            width={16}
-            className={`rendered-example ${this.getKebabExamplePath()}`}
-            style={{ padding: '2rem' }}
-          >
-            <div dir={showRtl ? 'rtl' : undefined}>{exampleElement}</div>
-          </Grid.Column>
+          <Provider.Consumer
+            render={({ siteVariables }) => {
+              return (
+                <Grid.Column
+                  width={16}
+                  className={`rendered-example ${this.getKebabExamplePath()}`}
+                  style={{
+                    padding: '2rem',
+                    backgroundColor: siteVariables.bodyBackground,
+                    color: siteVariables.bodyColor,
+                  }}
+                >
+                  <div dir={showRtl ? 'rtl' : undefined}>{exampleElement}</div>
+                </Grid.Column>
+              )
+            }}
+          />
           <Grid.Column width={16} style={{ padding: 0, background: EDITOR_BACKGROUND_COLOR }}>
             {this.renderJSX()}
             {this.renderError()}
diff --git a/src/themes/teams-dark/siteVariables.ts b/src/themes/teams-dark/siteVariables.ts
index 51b8027cc6..c981153d78 100644
--- a/src/themes/teams-dark/siteVariables.ts
+++ b/src/themes/teams-dark/siteVariables.ts
@@ -1,6 +1,9 @@
+import { white } from '../teams/siteVariables'
+
 //
 // COLORS
 //
+export const black = '#201f1f'
 export const gray02 = '#bfbfbf'
 export const gray03 = '#a6a6a6'
 export const gray04 = '#808080'
@@ -24,3 +27,9 @@ export const magenta = '#cf6098'
 export const orchid = '#ae3d84'
 export const red = '#d74654'
 export const red08 = '#4f232b'
+
+//
+// SEMANTIC ASSIGNMENTS
+//
+export const bodyBackground = black
+export const bodyColor = white
diff --git a/src/themes/teams-high-contrast/siteVariables.ts b/src/themes/teams-high-contrast/siteVariables.ts
index 96cd019900..8a62bca6f3 100644
--- a/src/themes/teams-high-contrast/siteVariables.ts
+++ b/src/themes/teams-high-contrast/siteVariables.ts
@@ -1,6 +1,12 @@
 import { white } from '../teams/siteVariables'
 
+//
+// COLORS
+//
+export const black = '#000'
+
 //
 // SEMANTIC ASSIGNMENTS
 //
+export const bodyBackground = black
 export const bodyColor = white
diff --git a/src/themes/teams/siteVariables.ts b/src/themes/teams/siteVariables.ts
index ea1fc3af7d..0d20800bc0 100644
--- a/src/themes/teams/siteVariables.ts
+++ b/src/themes/teams/siteVariables.ts
@@ -87,5 +87,6 @@ export const bodyMargin = 0
 export const bodyFontFamily =
   '"Segoe UI", "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji", Helvetica, Arial, sans-serif'
 export const bodyFontSize = '1.4rem'
+export const bodyBackground = white
 export const bodyColor = black
 export const bodyLineHeight = lineHeightBase

From 8d73044581fb33f1146d666bbd1be1ad40e36c49 Mon Sep 17 00:00:00 2001
From: Brigette Lundeen <brlundee@microsoft.com>
Date: Thu, 4 Oct 2018 11:22:20 -0700
Subject: [PATCH 2/2] moving 'rtl' up to remove redundant div

---
 .../ComponentDoc/ComponentExample/ComponentExample.tsx         | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
index b7c05bc270..0b12fd4829 100644
--- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
+++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
@@ -692,6 +692,7 @@ class ComponentExample extends React.Component<IComponentExampleProps, IComponen
               return (
                 <Grid.Column
                   width={16}
+                  dir={showRtl ? 'rtl' : undefined}
                   className={`rendered-example ${this.getKebabExamplePath()}`}
                   style={{
                     padding: '2rem',
@@ -699,7 +700,7 @@ class ComponentExample extends React.Component<IComponentExampleProps, IComponen
                     color: siteVariables.bodyColor,
                   }}
                 >
-                  <div dir={showRtl ? 'rtl' : undefined}>{exampleElement}</div>
+                  {exampleElement}
                 </Grid.Column>
               )
             }}