fix: font family for components

Author: codebender828

.storybook/config.js

@@ -1,12 +1,19 @@
-import { configure, addDecorator } from '@storybook/vue';
+import { configure, addDecorator, addParameters } from '@storybook/vue';
 import Vue from 'vue'
-import ThemeProvider from 'kiwi'
+import { ThemeProvider } from 'kiwi'
 import theme from '../src/lib/theme'
 import icons from '../src/lib/plugin/iconsPaths'
 import Kiwi from '../src/lib/plugin'
+import storyBookTheme from './theme'
 
 Vue.use(Kiwi)
 
+addParameters({
+  options: {
+   theme: storyBookTheme
+ }
+})
+
 addDecorator(() => ({
   template: `
     <ThemeProvider :theme="theme" :icons="icons" color-mode="light">

.storybook/theme.js

@@ -4,5 +4,5 @@ export default create({
   base: 'light',
   brandTitle: 'Kiwi UI Storybook',
   brandUrl: 'https://github.com/codebender828/kiwi-ui',
-  brandImage: 'https://res.cloudinary.com/xtellar/image/upload/v1575300763/kiwi-ui/kiwi-ui-logo-h_w4ltfh.svg',
+  brandImage: 'https://res.cloudinary.com/xtellar/image/upload/v1575300764/kiwi-ui/kiwi-ui-logo-h_y75i1x.png'
 });

packages/kiwi-ui/package.json

@@ -10,6 +10,7 @@
   "private": false,
   "scripts": {
     "build": "rollup -c && rollup -c --environment MINIFY",
+    "build:watch": "rollup -c --watch",
     "test": "echo testing ...",
     "clean": "rm -rf ./dist"
   },
@@ -27,4 +28,4 @@
     "core-js": "^3.4.5"
   },
   "gitHead": "bac5958955c86e8078fe444ee2738145b894af1d"
-}
+}

packages/kiwi-ui/src/Alert/index.js

@@ -41,6 +41,7 @@ const Alert = {
 
     return h(Box, {
       props: {
+        fontFamily: 'body',
         ...alertStyles,
         ...forwardProps(this.$props)
       },

packages/kiwi-ui/src/Badge/index.js

@@ -33,6 +33,7 @@ export default {
         d: 'inline-block',
         textTransform: 'uppercase',
         fontSize: 'xs',
+        fontFamily: 'body',
         px: 1,
         rounded: 'sm',
         fontWeight: 'bold',

packages/kiwi-ui/src/Text/index.js

@@ -16,6 +16,7 @@ export default {
     return h(Box, {
       props: {
         as: this.as,
+        fontFamily: this.as === 'kbd' ? 'mono' : 'body',
         ...forwardProps(this.$props)
       }
     }, this.$slots.default)