feat: add storybook theme. version 0.3.0

.storybook/manager.js

@@ -0,0 +1,4 @@
+import { addons } from '@storybook/addons'
+import theme from './theme'
+
+addons.setConfig({ theme })

.storybook/storybook.css

@@ -6,7 +6,7 @@ body,
   display: flex;
   height: 97vh;
   justify-content: center;
-  width: 100vw;
+  width: 100%;
   font-family: -apple-system, BlinkMacSystemFont, 'Source Sans Pro', 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;

.storybook/theme.js

@@ -0,0 +1,37 @@
+import { create } from '@storybook/theming/create'
+
+export default create({
+  base: 'light',
+
+  colorPrimary: '#41b883',
+  colorSecondary: '#35495e',
+
+  // UI
+  appBg: '#F7FAFC',
+  appContentBg: '#EDF2F7',
+  appBorderColor: '#CBD5E0',
+  appBorderRadius: 4,
+
+  // Typography
+  fontBase: '"Open Sans", sans-serif',
+  fontCode: 'monospace',
+
+  // Text colors
+  textColor: '#1A202C',
+  textInverseColor: 'rgba(255,255,255,0.9)',
+
+  // Toolbar default and active colors
+  barTextColor: 'silver',
+  barSelectedColor: '#FFFFFF',
+  barBg: '#35495e',
+
+  // Form colors
+  inputBg: 'white',
+  inputBorder: 'silver',
+  inputTextColor: '#1A202C',
+  inputBorderRadius: 4,
+
+  brandTitle: 'Vue Paycard',
+  brandUrl: 'https://github.com/guastallaigor/vue-paycard',
+  brandImage: 'https://ik.imagekit.io/6xhf1gnexgdgk/vue-paycard_dcDoi3dl0.png'
+})

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-paycard",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": false,
   "description": "Credit card component made with Vue.js",
   "homepage": "https://github.com/guastallaigor/vue-paycard#readme",
@@ -31,6 +31,7 @@
     "@storybook/addon-docs": "^5.3.19",
     "@storybook/addon-knobs": "^5.3.19",
     "@storybook/addons": "^5.3.19",
+    "@storybook/theming": "^5.3.19",
     "@storybook/vue": "^5.3.19",
     "@vue/cli-plugin-babel": "~4.4.0",
     "@vue/cli-plugin-eslint": "~4.4.0",
@@ -93,7 +94,11 @@
     "preset": "@vue/cli-plugin-unit-jest",
     "coverageDirectory": "./coverage/",
     "collectCoverage": true,
-    "coveragePathIgnorePatterns": ["/node_modules/", "/tests/", "/src/assets/"]
+    "coveragePathIgnorePatterns": [
+      "/node_modules/",
+      "/tests/",
+      "/src/assets/"
+    ]
   },
   "gitHooks": {
     "pre-commit": "lint-staged"