feat(docz-theme-default): improve theme styles

packages/playgrodd-theme-default/.babelrc

@@ -2,5 +2,8 @@
   "presets": [
     ["@babel/preset-env", { "modules": false }],
     "@babel/preset-react"
+  ],
+  "plugins": [
+    "emotion"
   ]
 }

packages/playgrodd-theme-default/package.json

@@ -5,16 +5,17 @@
   "main": "dist/index.js",
   "umd:main": "dist/index.umd.js",
   "module": "dist/index.m.js",
-  "source": "src/index.tsx",
+  "source": "src/index.jsx",
   "scripts": {
     "dev": "libundler watch",
-    "build": "libundler build -s",
-    "build:prod": "yarn run build -p --hash --gzip"
+    "build": "libundler build --sourcemap --compress"
   },
   "dependencies": {
+    "emotion-normalize": "^7.0.1",
     "playgrodd": "^0.0.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
+    "react-helmet": "^5.2.0",
     "react-router-dom": "^4.2.2"
   },
   "peerDependencies": {
@@ -23,6 +24,7 @@
   "devDependencies": {
     "@babel/core": "7.0.0-beta.42",
     "@babel/preset-env": "^7.0.0-beta.42",
-    "@babel/preset-react": "^7.0.0-beta.42"
+    "@babel/preset-react": "^7.0.0-beta.42",
+    "babel-plugin-emotion": "^9.1.0"
   }
 }

packages/playgrodd-theme-default/src/components/List.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { Link as BaseLink } from 'react-router-dom'
+import styled from 'react-emotion'
+
+import { Docs } from 'playgrodd'
+
+const BORDER_COLOR = '#ced6e0'
+const LINK_COLOR = '#2f3542'
+
+const Sidebar = styled('ul')`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  width: 200px;
+  height: 100vh;
+  border-right: 1px solid ${BORDER_COLOR};
+`
+
+const Link = styled(BaseLink)`
+  display: block;
+  padding: 10px 20px;
+  border-bottom: 1px solid ${BORDER_COLOR};
+  font-size: 14px;
+  font-weight: 700;
+
+  &,
+  &:visited {
+    color: ${LINK_COLOR};
+  }
+`
+
+export const List = () => (
+  <Docs>
+    {docs => (
+      <Sidebar>
+        {docs.map(doc => (
+          <li key={doc.id}>
+            <Link to={doc.route}>{doc.name}</Link>
+          </li>
+        ))}
+      </Sidebar>
+    )}
+  </Docs>
+)

packages/playgrodd-theme-default/src/components/Main.jsx

@@ -0,0 +1,6 @@
+import styled from 'react-emotion'
+
+export const Main = styled('div')`
+  display: flex;
+  height: 100vh;
+`

packages/playgrodd-theme-default/src/components/View.jsx

@@ -0,0 +1,44 @@
+import React, { Fragment } from 'react'
+import styled from 'react-emotion'
+
+import { Preview } from 'playgrodd'
+
+const Container = styled('div')`
+  width: 960px;
+  max-width: 960px;
+  padding: 50px 20px;
+  margin: 0 auto;
+`
+
+const Title = styled('h2')`
+  font-size: 48px;
+  font-weight: 400;
+  margin: 0;
+`
+
+const Description = styled('p')`
+  margin: 0 0 20px;
+`
+
+const Section = styled('div')`
+  margin-top: 50px;
+`
+
+export const View = () => (
+  <Preview>
+    {({ id, name, docDescription, sections }) => (
+      <Container key={id}>
+        <Title>{name}</Title>
+        {docDescription && <Description>{docDescription}</Description>}
+        {sections &&
+          sections.length > 0 &&
+          sections.map(section => (
+            <Section key={section.id}>
+              {section.title && <h3>{section.title}</h3>}
+              <div>{section.render()}</div>
+            </Section>
+          ))}
+      </Container>
+    )}
+  </Preview>
+)

packages/playgrodd-theme-default/src/index.jsx

@@ -0,0 +1,25 @@
+import './styles'
+
+import React, { Fragment } from 'react'
+import { createTheme } from 'playgrodd'
+import { injectGlobal } from 'emotion'
+import { Helmet } from 'react-helmet'
+
+import { List } from './components/List'
+import { View } from './components/View'
+import { Main } from './components/Main'
+
+export const Theme = createTheme(() => (
+  <React.Fragment>
+    <Helmet>
+      <link
+        rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css"
+      />
+    </Helmet>
+    <Main>
+      <List />
+      <View />
+    </Main>
+  </React.Fragment>
+))

packages/playgrodd-theme-default/src/styles.js

@@ -0,0 +1,77 @@
+import { css, injectGlobal } from 'emotion'
+
+const BACKGROUND = '#white'
+const TEXT_COLOR = '#2f3542'
+const LINK_COLOR = '#5352ed'
+
+const selection = css`
+  background: ${LINK_COLOR};
+  color: white;
+`
+
+injectGlobal`
+  @import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700');
+
+  *, *:before, *:after {
+    box-sizing: border-box;
+  }
+
+  ::-moz-selection {
+    ${selection}
+  }
+  ::selection {
+    ${selection}
+  }
+
+  body {
+    font-family: 'Noto Sans', sans-serif;
+    font-size: 16px;
+    line-height: 1.5;
+    background: ${BACKGROUND};
+    overflow-y: scroll;
+    overflow-x: hidden;
+  }
+
+  body {
+    color: transparent;
+  }
+
+  body > *, #root {
+    color: ${TEXT_COLOR};
+  }
+
+  html, body, #root {
+    height: 100vh;
+    min-height: 100vh;
+  }
+
+  a, a:visited, a:active {
+    text-decoration: none;
+    color: ${LINK_COLOR};
+  }
+
+  a:hover {
+    color: ${LINK_COLOR};
+  }
+
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  input:-webkit-autofill:active {
+    transition: color 9999s ease-out, background-color 9999s ease-out;
+    transition-delay: 9999s;
+  }
+
+  input:required,
+  input:invalid {
+    box-shadow: none;
+  }
+
+  button:focus {
+    outline: none !important;
+  }
+
+  select {
+    color: ${TEXT_COLOR};
+  }
+`