Merge branch 'release/css-props' of https://github.com/chakra-ui/chakra-ui-vue into release/css-props

Author: codebender828

.storybook/config.js

@@ -37,6 +37,13 @@ import {
 } from '@fortawesome/free-brands-svg-icons'
 
 Vue.use(Chakra, {
+  extendTheme: {
+    fonts: {
+      heading: "'Comic Sans MS'",
+      body: "'Comic Sans MS'",
+      monospace: "'Comic Sans MS'"
+    }
+  },
   icons: {
     iconPack: 'fa',
     iconSet: {

packages/chakra-ui-core/src/CReset/CReset.js

@@ -15,13 +15,15 @@ const defaultConfig = theme => ({
     color: theme.colors.gray[800],
     bg: undefined,
     borderColor: theme.colors.gray[200],
-    placeholderColor: theme.colors.gray[400]
+    placeholderColor: theme.colors.gray[400],
+    fontFamily: theme.fonts.body
   },
   dark: {
     color: theme.colors.whiteAlpha[900],
     bg: theme.colors.gray[800],
     borderColor: theme.colors.whiteAlpha[300],
-    placeholderColor: theme.colors.whiteAlpha[400]
+    placeholderColor: theme.colors.whiteAlpha[400],
+    fontFamily: theme.fonts.body
   }
 })
 
@@ -59,13 +61,14 @@ const CReset = {
     }
   },
   created () {
-    const { color, bg, borderColor, placeholderColor } = this.styleConfig[this.colorMode]
+    const { color, bg, borderColor, placeholderColor, fontFamily } = this.styleConfig[this.colorMode]
     useTailwindPreflight(this.theme)
     injectGlobal({
       html: {
         lineHeight: 1.5,
         color,
-        backgroundColor: bg
+        backgroundColor: bg,
+        fontFamily
       },
 
       '*, *::before, *::after': {