feat(gatsby-theme-docz): add blockquote styles

doczjs · Jul 1, 2019 · b9f11a1 · b9f11a1
1 parent 7bf03b2
commit b9f11a1
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 0 deletions.
diff --git a/core/gatsby-theme-docz/src/theme/index.js b/core/gatsby-theme-docz/src/theme/index.js
@@ -77,6 +77,20 @@ export default merge(typography, {
     li: {
       marginBottom: 1,
     },
+    blockquote: {
+      my: 4,
+      mx: 0,
+      py: 3,
+      px: 4,
+      bg: 'blockquote.bg',
+      borderLeft: '5px solid #000',
+      borderColor: 'blockquote.border',
+      color: 'blockquote.color',
+      fontStyle: 'italic',
+      '> p': {
+        m: 0,
+      },
+    },
     code: {
       fontFamily: 'monospace',
     },
@@ -93,5 +107,32 @@ export default merge(typography, {
         height: '1.5em',
       },
     },
+    table: {
+      width: '100%',
+      my: 4,
+      borderCollapse: 'separate',
+      borderSpacing: 0,
+      [['th', 'td']]: {
+        textAlign: 'left',
+        py: '4px',
+        pr: '4px',
+        pl: 0,
+        borderColor: 'muted',
+        borderBottomStyle: 'solid',
+      },
+    },
+    th: {
+      verticalAlign: 'bottom',
+      borderBottomWidth: '2px',
+    },
+    td: {
+      verticalAlign: 'top',
+      borderBottomWidth: '1px',
+    },
+    hr: {
+      border: 0,
+      borderBottom: '1px solid',
+      borderColor: 'muted',
+    },
   },
 })
diff --git a/core/gatsby-theme-docz/src/theme/modes.js b/core/gatsby-theme-docz/src/theme/modes.js
@@ -37,6 +37,11 @@ export const light = {
     bg: colors.white,
     border: colors.grayLight,
   },
+  blockquote: {
+    bg: colors.grayExtraLight,
+    border: colors.grayLight,
+    color: colors.gray,
+  },
 }
 
 export const dark = {
@@ -76,4 +81,9 @@ export const dark = {
     bg: colors.dark,
     border: colors.grayDark,
   },
+  blockquote: {
+    bg: colors.grayDark,
+    border: colors.gray,
+    color: colors.gray,
+  },
 }