feat: give component examples a theme specific background (#316)

* adding in theme background aware doc examples

* moving 'rtl' up to remove redundant div

Author: codepretty

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx

@@ -687,13 +687,24 @@ 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}
+                  dir={showRtl ? 'rtl' : undefined}
+                  className={`rendered-example ${this.getKebabExamplePath()}`}
+                  style={{
+                    padding: '2rem',
+                    backgroundColor: siteVariables.bodyBackground,
+                    color: siteVariables.bodyColor,
+                  }}
+                >
+                  {exampleElement}
+                </Grid.Column>
+              )
+            }}
+          />
           <Grid.Column width={16} style={{ padding: 0, background: EDITOR_BACKGROUND_COLOR }}>
             {this.renderJSX()}
             {this.renderError()}

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

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

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