Update typography

Author: gesseekur

.storybook/preview.js

@@ -64,8 +64,8 @@ addDecorator(() => ({
 
 addParameters({
   backgrounds: [
-    { name: "light", value: "#fff" },
+    { name: "white", value: "#fff" },
     { name: "dark-blue", value: "#184f90" },
-    { name: "primary", value: "#05c0a5"}
+    { name: "light-green", value: "#cdf4ee"}
   ]
 });

.storybook/webpack.config.js

@@ -2,6 +2,7 @@ const path = require("path");
 
 // Export a function. Accept the base config as the only param.
 module.exports = async ({ config, mode }) => {
+  // storybookBaseConfig.output.publicPath = 'http://localhost:6006/'
   config.resolve.extensions.push(".vue");
   config.resolve.alias["@"] = path.resolve(__dirname, "../src");
   // `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION'

package-lock.json

@@ -17,13 +17,11 @@
     "build:umd": "rollup --config build/rollup.config.js --format umd --file dist/mew-components.umd.js",
     "build:es": "rollup --config build/rollup.config.js --format es --file dist/mew-components.esm.js",
     "build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/mew-components.min.js",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "start-storybook -p 6006 -c .storybook watch-css -s ./src",
     "build-storybook": "build-storybook -c .storybook -o .out",
     "deploy-storybook": "storybook-to-ghpages"
   },
   "dependencies": {
-    "@storybook/addon-viewport": "^5.3.17",
-    "@storybook/source-loader": "^5.3.17",
     "all": "0.0.0",
     "core-js": "^2.6.5",
     "fibers": "^4.0.2",
@@ -40,6 +38,8 @@
     "@storybook/addon-links": "^5.3.17",
     "@storybook/addon-docs": "^5.3.18",
     "@storybook/addon-knobs": "^5.3.18",
+    "@storybook/addon-viewport": "^5.3.17",
+    "@storybook/source-loader": "^5.3.17",
     "@storybook/addons": "^5.3.17",
     "@storybook/storybook-deployer": "^2.8.3",
     "@storybook/vue": "^5.3.17",
@@ -62,7 +62,8 @@
     "sass-loader": "^7.1.0",
     "vue-cli-plugin-vuetify": "^0.6.3",
     "vue-template-compiler": "^2.6.10",
-    "vuetify-loader": "^1.2.2"
+    "vuetify-loader": "^1.2.2",
+    "file-loader": "^6.0.0"
   },
   "files": [
     "dist/*",

package.json

@@ -24,11 +24,17 @@ export default {
 
 <style lang="scss">
 @import "@/global.scss";
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
 
 * {
   color: var(--v-info-base);
 }
 
+html,
+body {
+  font-family: "Roboto", sans-serif;
+}
+
 .v-application {
   code {
     color: var(--v-cerise-base) !important;

src/App.vue

@@ -27,7 +27,7 @@
 
 <script>
 export default {
-  name: "MewButton",
+  name: "MewsButton",
   props: {
     title: String,
     icon: String,
@@ -90,6 +90,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
+
 .v-application {
   .v-btn {
     border-radius: 6px !important;

src/components/MewButton/MewButton.vue

@@ -29,4 +29,4 @@ $checkbox--inactive--font-color: $label--inactive--color;
 
 .line-height--medium {
   line-height: 20px;
-}
+}

src/global.scss

@@ -0,0 +1,35 @@
+// mew typography
+.mew-title {
+  font-size: 50px;
+  font-weight: 700;
+}
+
+.mew-subtitle {
+  font-size: 30px;
+  font-weight: 700;
+}
+
+.mew-heading-1 {
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.mew-heading-2 {
+  font-size: 22px;
+  font-weight: 700;
+}
+
+.mew-heading-3 {
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.mew-body {
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.mew-caption {
+  font-size: 12px;
+  font-weight: 700;
+}

src/typography.scss

@@ -0,0 +1,82 @@
+export default {
+  title: "Typography"
+};
+
+export const All = () => ({
+  data() {
+    return {
+      mewTitle: {
+        fontSize: "50px",
+        fontWeight: 700
+      },
+      mewSubtitle: {
+        fontSize: "30px",
+        fontWeight: 700
+      },
+      mewHeading1: {
+        fontSize: "24px",
+        fontWeight: 700
+      },
+      mewHeading2: {
+        fontSize: "22px",
+        fontWeight: 700
+      },
+      mewHeading3: {
+        fontSize: "16px",
+        fontWeight: 700
+      },
+      mewBody: {
+        fontSize: "14px",
+        fontWeight: 400
+      },
+      mewCaption: {
+        fontSize: "12px",
+        fontWeight: 700
+      },
+      markupStyle: {
+        color: "#cfcfcf",
+        fontSize: "12px",
+        fontWeight: 700
+      },
+      headerStyle: {
+        color: "#05c0a5",
+        textTransform: "uppercase",
+        paddingBottom: "10px"
+      }
+    };
+  },
+  template: `
+    <div>
+    <br/>
+    <h3 :style="{paddingBottom: '10px'}"><span :style="headerStyle">font-family:</span> <span :style="{ fontWeight: 400 }">Roboto</span></h3>
+    <h3 :style="headerStyle">classes</h3>
+    <div :style="mewBody, { fontWeight: 400 }">.font-weight-regular</div>
+    <div :style="markupStyle">font-weight: 400</div>
+    <br />
+    <div :style="mewBody, { fontWeight: 500 }">.font-weight-medium</div>
+    <div :style="markupStyle">font-weight: 500</div>
+    <br />
+    <div :style="mewBody, { fontWeight: 700 }">.font-weight-bold</div>
+    <div :style="markupStyle">font-weight: 700</div>
+    <div :style="mewTitle">.mew-title</div>
+    <div :style="markupStyle">font-size: 50px; font-weight: 700</div>
+    <br />
+    <div :style="mewSubtitle">.mew-subtitle</div>
+    <div :style="markupStyle">font-size: 30px; font-weight: 700</div>
+    <br />
+    <div :style="mewHeading1">.mew-heading-1</div>
+    <div :style="markupStyle">font-size: 24px; font-weight: 700</div>
+    <br />
+    <div :style="mewHeading2">.mew-heading-2</div>
+    <div :style="markupStyle">font-size: 22px; font-weight: 700</div>
+    <br />
+    <div :style="mewHeading3">.mew-heading-3</div>
+    <div :style="markupStyle">font-size: 16px; font-weight: 700</div>
+    <br />
+    <div :style="mewBody">.mew-body</div>
+    <div :style="markupStyle">font-size: 14px; font-weight: 400</div>
+    <br />
+    <div :style="mewCaption">.mew-caption</div>
+    <div :style="markupStyle">font-size: 12px; font-weight: 700</div>
+  </div>`
+});