feat: set font-family with CSSReset

codebender828 · codebender828 · commit c5ddd66aedec · 2020-09-26T20:54:20.000+08:00
diff --git a/.storybook/components/Canvas.vue b/.storybook/components/Canvas.vue
@@ -48,6 +48,7 @@ import {
   CBox,
   CIconButton,
   CColorModeProvider } from '../../packages/chakra-ui-core/src'
+
 export default {
   name: 'Canvas',
   components: {
diff --git a/.storybook/config.js b/.storybook/config.js
@@ -2,9 +2,8 @@ import { configure, addDecorator, addParameters } from '@storybook/vue';
 import Vue from 'vue'
 import VueLive from 'vue-live'
 import Lorem from 'vue-lorem-ipsum'
-import Chakra, { CThemeProvider, CColorModeProvider, CReset } from '../packages/chakra-ui-core/src'
+import Chakra from '../packages/chakra-ui-core/src'
 import Canvas from './components/Canvas.vue'
-import theme from '../packages/chakra-ui-core/src/lib/theme'
 import storyBookTheme from './theme'
 
 import {
@@ -38,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: {
@@ -75,16 +81,11 @@ addParameters({
 
 addDecorator(() => ({
   template: `
-    <Canvas :theme="theme">
+    <Canvas>
       <story/>
     </Canvas>
   `,
-  data() {
-    return {
-      theme,
-    }
-  },
-  components: { CThemeProvider, CColorModeProvider, CReset, Canvas }
+  components: { Canvas }
 }));
 
 // For playground
diff --git a/packages/chakra-ui-core/src/CReset/CReset.js b/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': {
