style(docz-components): fix live preview background (#1190)

Author: Kerumen

core/docz-components/src/components/Playground/LivePreviewWrapper.tsx

@@ -1,26 +1,29 @@
 /** @jsx jsx */
 import * as React from 'react';
-import { jsx, SxProps } from 'theme-ui';
+import { jsx, SxStyleProp } from 'theme-ui';
 import get from 'lodash/get';
+
 import { Theme } from '../../types';
 
 const styles = {
-  iframe: (showingCode: boolean, height = 'auto') =>
+  wrapper: (showingCode: boolean, height = 'auto') =>
     ({
       height,
       display: 'block',
       minHeight: '100%',
       width: 'calc(100% - 2px)',
+      bg: 'playground.bg',
       border: (t: Theme) =>
         `1px solid ${get(t, 'colors.playground.border', 'none')}`,
       borderRadius: showingCode ? '4px 4px 0 0' : '4px',
-    } as SxProps['sx']),
+    } as SxStyleProp),
 };
+
 type Props = { showingCode: boolean };
 
 export const LivePreviewWrapper: React.FC<Props> = ({
   children,
   showingCode,
 }) => {
-  return <div sx={styles.iframe(showingCode)}>{children}</div>;
+  return <div sx={styles.wrapper(showingCode)}>{children}</div>;
 };

core/docz-components/src/components/Playground/styles.ts

@@ -1,13 +1,14 @@
 import get from 'lodash/get';
 
 import * as mixins from '../../utils/mixins';
+import { Theme } from '../../types';
 import { PrismTheme } from 'prism-react-renderer';
+import { SxStyleProp } from 'theme-ui';
 
 export const editor = (theme: PrismTheme) =>
   ({
     p: 2,
-    border: (t: PrismTheme) =>
-      `1px solid ${get(t, 'colors.border', 'transparent')}`,
+    border: (t: Theme) => `1px solid ${get(t, 'colors.border', 'transparent')}`,
     borderRadius: '0 0 4px 4px',
     background: get(theme, 'plain.backgroundColor', 'none'),
     borderTop: 0,
@@ -18,7 +19,7 @@ export const editor = (theme: PrismTheme) =>
       lineHeight: '1.5em ',
       outline: 'none',
     },
-  } as any);
+  } as SxStyleProp);
 
 export const error = {
   m: 0,
@@ -36,7 +37,6 @@ export const previewWrapper = {
 export const preview = {
   m: 0,
   p: '20px',
-  bg: 'playground.bg',
 };
 
 export const buttons = {