feat(docz-theme-default): add blockquote component

Author: pedronauck

packages/docz-theme-default/README.md

@@ -105,6 +105,9 @@ const config = {
     codeBg: colors.grayExtraLight,
     codeColor: colors.gray,
     preBg: colors.grayExtraLight,
+    blockquoteBg: colors.grayExtraLight,
+    blockquoteBorder: colors.grayLight,
+    blockquoteColor: colors.gray,
   },
   /**
    * Styles
@@ -173,6 +176,12 @@ const config = {
       fontFamily: '"Source Code Pro", monospace',
       fontSize: 14,
     },
+    blockquote: {
+      margin: '25px 0',
+      padding: '20px',
+      fontStyle: 'italic',
+      fontSize: 18,
+    },
   }
 }
 ```

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

@@ -0,0 +1,13 @@
+import styled from 'react-emotion'
+
+export const Blockquote = styled('blockquote')`
+  background: ${p => p.theme.docz.colors.blockquoteBg};
+  border-left: 5px solid ${p => p.theme.docz.colors.blockquoteBorder};
+  color: ${p => p.theme.docz.colors.blockquoteColor};
+  ${p => p.theme.docz.styles.blockquote};
+
+  & > p {
+    margin: 0;
+    color: ${p => p.theme.docz.colors.blockquoteColor};
+  }
+`

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

@@ -4,6 +4,7 @@ export { H3 } from './H3'
 export { H4 } from './H4'
 export { H5 } from './H5'
 export { H6 } from './H6'
+export { Blockquote } from './Blockquote'
 export { InlineCode } from './InlineCode'
 export { Link } from './Link'
 export { List } from './List'

packages/docz-theme-default/src/index.tsx

@@ -19,6 +19,7 @@ const Theme = () => (
             page: components.Page,
             notFound: components.NotFound,
             render: components.Render,
+            blockquote: components.Blockquote,
             h1: components.H1,
             h2: components.H2,
             h3: components.H3,

packages/docz-theme-default/src/styles/index.ts

@@ -62,4 +62,10 @@ export const styles = {
     fontFamily: '"Source Code Pro", monospace',
     fontSize: 14,
   },
+  blockquote: {
+    margin: '25px 0',
+    padding: '20px',
+    fontStyle: 'italic',
+    fontSize: 18,
+  },
 }

packages/docz-theme-default/src/styles/modes.ts

@@ -19,6 +19,9 @@ export const light = {
   codeBg: lighten(0.02, colors.grayExtraLight),
   codeColor: colors.gray,
   preBg: colors.grayExtraLight,
+  blockquoteBg: colors.grayExtraLight,
+  blockquoteBorder: colors.grayLight,
+  blockquoteColor: colors.gray,
 }
 
 export const dark = {
@@ -39,4 +42,7 @@ export const dark = {
   codeBg: colors.gray,
   codeColor: colors.grayExtraLight,
   preBg: colors.grayDark,
+  blockquoteBg: colors.grayDark,
+  blockquoteBorder: colors.gray,
+  blockquoteColor: colors.gray,
 }