fix(docz-theme-default): some fixes on styles

doczjs · Dec 14, 2018 · a17e914 · a17e914
1 parent b714dc7
commit a17e914
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 65 deletions.
diff --git a/packages/docz-theme-default/src/components/shared/Search/index.tsx b/packages/docz-theme-default/src/components/shared/Search/index.tsx
@@ -8,7 +8,7 @@ import rgba from 'polished/lib/color/rgba'
 import { get } from '@utils/theme'
 
 const sidebarBorder = get('colors.sidebarBorder')
-const sidebarText = get('colors.sidebarText')
+const sidebarText = get('colors.sidebarText', '#2D3747')
 
 const Wrapper = styled('div')`
   display: flex;

diff --git a/packages/docz-theme-default/src/components/ui/Editor/elements.tsx b/packages/docz-theme-default/src/components/ui/Editor/elements.tsx
@@ -10,7 +10,7 @@ import { ButtonSwap } from '../ButtonSwap'
 import { ButtonLink } from '../Button'
 import { get } from '@utils/theme'
 
-const textColor = get('colors.text')
+const textColor = get('colors.text', '#2D3747')
 export const ActionButton = styled(ButtonSwap as any)<any>`
   padding: 4px;
   background: transparent;

diff --git a/packages/docz-theme-default/src/components/ui/Page.tsx b/packages/docz-theme-default/src/components/ui/Page.tsx
@@ -42,7 +42,7 @@ const EditPage = styled(ButtonLink.withComponent('a'))`
 
   &:hover {
     opacity: 1;
-    background: ${p => lighten(0.1, get('colors.border')(p))};
+    background: ${p => lighten(0.1, get('colors.border', '#CED4DE')(p))};
   }
 
   ${mq({

diff --git a/packages/docz-theme-default/src/index.tsx b/packages/docz-theme-default/src/index.tsx
@@ -1,55 +1,49 @@
-import { Fragment } from 'react'
 import { theme, DocPreview, ThemeConfig } from 'docz'
 import { ThemeProvider } from 'emotion-theming'
 import { jsx } from '@emotion/core'
+import get from 'lodash.get'
 import webfont from 'webfontloader'
 
 import { config } from './config'
-import { mq } from './styles/responsive'
 import * as components from './components/ui'
 import * as modes from './styles/modes'
 
 const Theme = () => (
-  <Fragment>
-    <ThemeConfig>
-      {config => (
-        <ThemeProvider
-          theme={(old: any) => ({
-            ...old,
-            docz: {
-              ...config.themeConfig,
-              mq,
-            },
-          })}
-        >
-          <DocPreview
-            components={{
-              page: components.Page,
-              notFound: components.NotFound,
-              render: components.Render,
-              blockquote: components.Blockquote,
-              h1: components.H1,
-              h2: components.H2,
-              h3: components.H3,
-              h4: components.H4,
-              h5: components.H5,
-              h6: components.H6,
-              hr: components.Hr,
-              ul: components.UnorderedList,
-              ol: components.OrderedList,
-              p: components.Paragraph,
-              a: components.Link,
-              inlineCode: components.InlineCode,
-              loading: components.Loading,
-              table: components.Table,
-              pre: components.Pre,
-              tooltip: components.Tooltip,
-            }}
-          />
-        </ThemeProvider>
-      )}
-    </ThemeConfig>
-  </Fragment>
+  <ThemeConfig>
+    {config => (
+      <ThemeProvider
+        theme={prev => ({
+          ...prev,
+          docz: config.themeConfig,
+        })}
+      >
+        <DocPreview
+          components={{
+            page: components.Page,
+            notFound: components.NotFound,
+            render: components.Render,
+            blockquote: components.Blockquote,
+            h1: components.H1,
+            h2: components.H2,
+            h3: components.H3,
+            h4: components.H4,
+            h5: components.H5,
+            h6: components.H6,
+            hr: components.Hr,
+            ul: components.UnorderedList,
+            ol: components.OrderedList,
+            p: components.Paragraph,
+            a: components.Link,
+            inlineCode: components.InlineCode,
+            loading: components.Loading,
+            table: components.Table,
+            pre: components.Pre,
+            tooltip: components.Tooltip,
+          }}
+        />
+      </ThemeProvider>
+    )}
+  </ThemeConfig>
 )
 
 webfont.load({
@@ -63,18 +57,14 @@ webfont.load({
   },
 })
 
-const transform = ({ mode, codemirrorTheme, ...config }: any) => {
-  const selectedMode: any = (modes as any)[mode]
-
-  return {
-    ...config,
-    mode,
-    codemirrorTheme: codemirrorTheme || `docz-${mode}`,
-    colors: {
-      ...selectedMode,
-      ...config.colors,
-    },
-  }
-}
+const enhance = theme(config, ({ mode, codemirrorTheme, ...config }) => ({
+  ...config,
+  mode,
+  codemirrorTheme: codemirrorTheme || `docz-${mode}`,
+  colors: {
+    ...get(modes, mode),
+    ...config.colors,
+  },
+}))
 
-export default theme(config, transform)(Theme)
+export default enhance(Theme)
diff --git a/packages/docz-theme-default/src/styles/responsive.ts b/packages/docz-theme-default/src/styles/responsive.ts
@@ -6,8 +6,9 @@ export const breakpoints = {
   desktop: 1120,
 }
 
-export const mq = facepaint([
-  `@media(min-width: ${breakpoints.mobile}px)`,
-  `@media(min-width: ${breakpoints.tablet}px)`,
-  `@media(min-width: ${breakpoints.desktop}px)`,
-])
+export const mq = (p: any = []) =>
+  facepaint([
+    `@media(min-width: ${breakpoints.mobile}px)`,
+    `@media(min-width: ${breakpoints.tablet}px)`,
+    `@media(min-width: ${breakpoints.desktop}px)`,
+  ])(p)
diff --git a/packages/docz-theme-default/src/utils/theme.ts b/packages/docz-theme-default/src/utils/theme.ts
@@ -1,3 +1,4 @@
 import getter from 'lodash.get'
 
-export const get = (val: string) => (p: any) => getter(p, `theme.docz.${val}`)
+export const get = (val: string, defaultValue?: any) => (p: any) =>
+  getter(p, `theme.docz.${val}`, defaultValue)