fix(docz-theme-default): use theme getter instead of literal obj access

packages/docz-theme-default/src/components/shared/Main/index.tsx

@@ -1,7 +1,8 @@
 import { SFC } from 'react'
-import { Global, css, jsx } from '@emotion/core'
+import { Global, jsx } from '@emotion/core'
 import styled from '@emotion/styled'
-import get from 'lodash.get'
+
+import { styles } from '../../../styles/global'
 
 const Wrapper = styled('div')`
   display: flex;
@@ -14,13 +15,7 @@ interface MainProps {
 
 export const Main: SFC<MainProps> = props => (
   <Wrapper>
-    <Global
-      styles={css`
-        body {
-          ${get(props, 'config.themeConfig.styles.body')}
-        }
-      `}
-    />
+    <Global styles={styles(props)} />
     {props.children}
   </Wrapper>
 )

packages/docz-theme-default/src/components/shared/Sidebar/Hamburguer.tsx

@@ -3,6 +3,7 @@ import { jsx } from '@emotion/core'
 import styled from '@emotion/styled'
 
 import { get } from '@utils/theme'
+import { mq } from '@styles/responsive'
 
 interface OpenProps {
   opened: boolean
@@ -90,10 +91,9 @@ const ToggleButton = styled.button<OpenProps>`
     background: ${p => sidebarPrimary(p) || primaryColor(p)};
   }
 
-  ${p =>
-    p.theme.docz.mq({
-      display: ['block', 'block', 'block', 'none'],
-    })};
+  ${mq({
+    display: ['block', 'block', 'block', 'none'],
+  })};
 `
 
 interface HamburguerProps extends OpenProps {

packages/docz-theme-default/src/components/shared/Sidebar/MenuLink.tsx

@@ -38,7 +38,7 @@ const Wrapper = styled.div<WrapperProps>`
   ${p => p.active && activeWrapper};
 `
 
-export const linkStyle = ({ colors }: any) => css`
+export const linkStyle = (colors: any) => css`
   position: relative;
   display: block;
   padding: 4px 24px;
@@ -62,7 +62,7 @@ export const linkStyle = ({ colors }: any) => css`
 `
 
 const LinkAnchor = styled('a')`
-  ${p => linkStyle(p.theme.docz)};
+  ${p => linkStyle(get('colors')(p))};
 `
 
 export const getActiveFromClass = (el: HTMLElement | null) =>

packages/docz-theme-default/src/components/shared/Sidebar/index.tsx

@@ -13,7 +13,7 @@ import { Docz } from './Docz'
 import { Hamburguer } from './Hamburguer'
 
 import { get } from '@utils/theme'
-import { breakpoints } from '@styles/responsive'
+import { mq, breakpoints } from '@styles/responsive'
 
 interface WrapperProps {
   opened: boolean
@@ -24,11 +24,6 @@ const sidebarBg = get('colors.sidebarBg')
 const sidebarText = get('colors.sidebarText')
 const sidebarBorder = get('colors.sidebarBorder')
 
-const position = (p: WrapperProps) =>
-  p.theme.docz.mq({
-    position: ['absolute', 'absolute', 'absolute', 'relative'],
-  })
-
 const Wrapper = styled.div<WrapperProps>`
   position: relative;
   width: 280px;
@@ -37,8 +32,11 @@ const Wrapper = styled.div<WrapperProps>`
   background: ${sidebarBg};
   transition: transform 0.2s, background 0.3s;
   z-index: 1000;
-  ${position};
+
   ${get('styles.sidebar')};
+  ${mq({
+    position: ['absolute', 'absolute', 'absolute', 'relative'],
+  })};
 
   dl {
     padding: 0;

packages/docz-theme-default/src/components/ui/CodeMirror/index.tsx

@@ -7,6 +7,7 @@ import styled from '@emotion/styled'
 import * as themes from '@styles/codemirror'
 import { get } from '@utils/theme'
 import { global } from './ps-scrollbar'
+import { mq } from '@styles/responsive'
 
 import 'codemirror/mode/markdown/markdown'
 import 'codemirror/mode/javascript/javascript'
@@ -31,7 +32,7 @@ const preStyles = get('styles.pre')
 const EditorStyled = styled(BaseCodeMirror)`
   ${themes.dark()};
   ${themes.light()};
-  ${p => p.theme.docz.mq(preStyles(p))};
+  ${p => mq(preStyles(p))};
   position: relative;
   flex: 1;
 
@@ -41,7 +42,7 @@ const EditorStyled = styled(BaseCodeMirror)`
   }
 
   .CodeMirror pre {
-    ${p => p.theme.docz.mq(preStyles(p))};
+    ${p => mq(preStyles(p))};
   }
 
   .CodeMirror-gutters {

packages/docz-theme-default/src/components/ui/H1.tsx

@@ -1,11 +1,12 @@
 import styled from '@emotion/styled'
 import { get } from '@utils/theme'
+import { mq } from '@styles/responsive'
 
 export const H1 = styled('h1')`
   position: relative;
   display: table;
   margin: 30px 0;
-  ${p => p.theme.docz.mq(p.theme.docz.styles.h1)};
+  ${p => mq(get('styles.h1')(p))};
 
   &:before {
     position: absolute;

packages/docz-theme-default/src/components/ui/H2.tsx

@@ -6,6 +6,7 @@ import Hash from 'react-feather/dist/icons/hash'
 import { Link } from 'docz'
 
 import { get } from '@utils/theme'
+import { mq } from '@styles/responsive'
 
 const Icon = styled(Hash)`
   position: absolute;
@@ -21,7 +22,7 @@ const Heading = styled('h2')`
   position: relative;
   border-bottom: 1px dashed ${get('colors.border')};
   padding-bottom: 5px;
-  ${p => p.theme.docz.mq(get('styles.h2')(p))};
+  ${p => mq(get('styles.h2')(p))};
 
   &:hover ${Icon.toString()} {
     opacity: 1;

packages/docz-theme-default/src/components/ui/H3.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled'
 import { get } from '@utils/theme'
+import { mq } from '@styles/responsive'
 
 export const H3 = styled('h3')`
-  ${p => p.theme.docz.mq(get('styles.h3')(p))};
+  ${p => mq(get('styles.h3')(p))};
 `

packages/docz-theme-default/src/components/ui/H4.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled'
 import { get } from '@utils/theme'
+import { mq } from '@styles/responsive'
 
 export const H4 = styled('h4')`
-  ${p => p.theme.docz.mq(get('styles.h4')(p))};
+  ${p => mq(get('styles.h4')(p))};
 `

packages/docz-theme-default/src/components/ui/H5.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled'
 import { get } from '@utils/theme'
+import { mq } from '@styles/responsive'
 
 export const H5 = styled('h5')`
-  ${p => p.theme.docz.mq(get('styles.h5')(p))};
+  ${p => mq(get('styles.h5')(p))};
 `

packages/docz-theme-default/src/components/ui/H6.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled'
 import { get } from '@utils/theme'
+import { mq } from '@styles/responsive'
 
 export const H6 = styled('h6')`
-  ${p => p.theme.docz.mq(get('styles.h6')(p))};
+  ${p => mq(get('styles.h6')(p))};
 `

packages/docz-theme-default/src/components/ui/Hr.tsx

@@ -1,12 +1,12 @@
 import styled from '@emotion/styled'
 import { get } from '@utils/theme'
+import { mq } from '@styles/responsive'
 
 export const Hr = styled('hr')`
   border: none;
   border-top: 1px dashed ${get('colors.border')};
 
-  ${p =>
-    p.theme.docz.mq({
-      margin: ['30px 0', '50px 0'],
-    })};
+  ${mq({
+    margin: ['30px 0', '50px 0'],
+  })};
 `

packages/docz-theme-default/src/components/ui/InlineCode.tsx

@@ -1,8 +1,9 @@
 import styled from '@emotion/styled'
 import { get } from '@utils/theme'
+import { mq } from '@styles/responsive'
 
 export const InlineCode = styled('code')`
   background: ${get('colors.codeBg')};
   color: ${get('colors.codeColor')};
-  ${p => p.theme.docz.mq(p.theme.docz.styles.code)};
+  ${p => mq(get('styles.code')(p))};
 `

packages/docz-theme-default/src/components/ui/OrderedList.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled'
 import { get } from '@utils/theme'
+import { mq } from '@styles/responsive'
 
 export const OrderedList = styled('ol')`
   list-style: none;
@@ -17,5 +18,5 @@ export const OrderedList = styled('ol')`
     margin-right: 5px;
   }
 
-  ${p => p.theme.docz.mq(p.theme.docz.styles.ol)};
+  ${p => mq(get('styles.ol')(p))};
 `

packages/docz-theme-default/src/components/ui/Page.tsx

@@ -8,6 +8,7 @@ import styled from '@emotion/styled'
 import { ButtonLink } from './Button'
 import { GithubLink, Sidebar, Main } from '../shared'
 import { get } from '@utils/theme'
+import { mq } from '@styles/responsive'
 
 const Wrapper = styled('div')`
   flex: 1;
@@ -20,7 +21,7 @@ const Wrapper = styled('div')`
 export const Container = styled('div')`
   box-sizing: border-box;
   margin: 0 auto;
-  ${p => p.theme.docz.mq(p.theme.docz.styles.container)};
+  ${p => mq(get('styles.container')(p))};
 `
 
 const EditPage = styled(ButtonLink.withComponent('a'))`
@@ -41,15 +42,14 @@ const EditPage = styled(ButtonLink.withComponent('a'))`
 
   &:hover {
     opacity: 1;
-    background: ${p => lighten(0.1, p.theme.docz.colors.border)};
+    background: ${p => lighten(0.1, get('colors.border')(p))};
   }
 
-  ${p =>
-    p.theme.docz.mq({
-      visibility: ['hidden', 'hidden', 'visible'],
-      top: [0, -60, 32],
-      right: [0, 0, 40],
-    })};
+  ${mq({
+    visibility: ['hidden', 'hidden', 'visible'],
+    top: [0, -60, 32],
+    right: [0, 0, 40],
+  })};
 `
 
 const EditIcon = styled(Edit)<{ width: number }>`

packages/docz-theme-default/src/components/ui/Render/index.tsx

@@ -22,6 +22,7 @@ import { ActionButton, ClipboardAction } from '../Editor/elements'
 
 import { localStorage } from '@utils/local-storage'
 import { get as themeGet } from '@utils/theme'
+import { mq } from '@styles/responsive'
 
 interface OverlayProps {
   full: boolean
@@ -67,7 +68,7 @@ const StyledPreview = styled(LivePreview)`
   position: relative;
   box-sizing: border-box;
   width: 100%;
-  ${p => p.theme.docz.mq(p.theme.docz.styles.playground)};
+  ${p => mq(themeGet('styles.playground')(p))};
 `
 
 const StyledError = styled(LiveError)`
@@ -110,7 +111,7 @@ const Actions = styled('div')<WithRadiusProps>`
   justify-content: flex-end;
   padding: 0 5px;
   background: ${p =>
-    p.theme.docz.mode === 'light'
+    themeGet('mode')(p) === 'light'
       ? lighten(0.13, borderColor(p))
       : darken(0.04, borderColor(p))};
   border-left: 1px solid ${themeGet('colors.border')};

packages/docz-theme-default/src/components/ui/Table.tsx

@@ -3,16 +3,16 @@ import { jsx } from '@emotion/core'
 import styled from '@emotion/styled'
 
 import { get } from '@utils/theme'
+import { mq } from '@styles/responsive'
 
 const Wrapper = styled('div')`
   overflow-x: auto;
   padding: 2px;
 
-  ${p =>
-    p.theme.docz.mq({
-      marginBottom: [20, 40],
-      maxWidth: ['calc(100vw - 40px)', 'calc(100vw - 80px)', '100%'],
-    })};
+  ${mq({
+    marginBottom: [20, 40],
+    maxWidth: ['calc(100vw - 40px)', 'calc(100vw - 80px)', '100%'],
+  })};
 `
 
 const TableStyled = styled('table')`
@@ -26,7 +26,7 @@ const TableStyled = styled('table')`
   border-radius: ${get('radii')};
   font-size: 14px;
   color: ${get('colors.tableColor')};
-  ${p => p.theme.docz.mq(p.theme.docz.styles.table)};
+  ${p => mq(get('styles.table')(p))};
 
   & thead {
     color: ${get('colors.theadColor')};
@@ -38,38 +38,33 @@ const TableStyled = styled('table')`
     padding: 20px 20px;
 
     &:nth-of-type(1) {
-      ${p =>
-        p.theme.docz.mq({
-          width: ['20%', '20%', '20%', 'auto'],
-        })};
+      ${mq({
+        width: ['20%', '20%', '20%', 'auto'],
+      })};
     }
 
     &:nth-of-type(2) {
-      ${p =>
-        p.theme.docz.mq({
-          width: ['10%', '10%', '10%', 'auto'],
-        })};
+      ${mq({
+        width: ['10%', '10%', '10%', 'auto'],
+      })};
     }
 
     &:nth-of-type(3) {
-      ${p =>
-        p.theme.docz.mq({
-          width: ['10%', '10%', '10%', 'auto'],
-        })};
+      ${mq({
+        width: ['10%', '10%', '10%', 'auto'],
+      })};
     }
 
     &:nth-of-type(4) {
-      ${p =>
-        p.theme.docz.mq({
-          width: ['10%', '10%', '10%', 'auto'],
-        })};
+      ${mq({
+        width: ['10%', '10%', '10%', 'auto'],
+      })};
     }
 
     &:nth-of-type(5) {
-      ${p =>
-        p.theme.docz.mq({
-          width: ['20%', '20%', '20%', 'auto'],
-        })};
+      ${mq({
+        width: ['20%', '20%', '20%', 'auto'],
+      })};
     }
   }
 
@@ -84,7 +79,7 @@ const TableStyled = styled('table')`
     border-top: 1px solid ${get('colors.border')};
   }
 
-  ${p => p.theme.docz.mq(p.theme.docz.styles.table)};
+  ${p => mq(get('styles.table')(p))};
 `
 
 export const Table = (props: React.TableHTMLAttributes<any>) => (