Feature/new typo system (#2)

* Fix linter

* Adds function to create the basic style for typography

* Includes font from googlefonts

* Changes font family

* Creates typography using mixin

* Unused

* Fix lint

* Fix lint

* Removes unused sass placeholders to generate the typography

* Adds node-sass-utils as dependency

* Adds functions for getting the typography settings from the sass environment at compile time.

* Adds typography data to pug locals to render the specifications on the docs.

* Adds external settings file for typography

* Improves function to generate typography

* Updates style in typography block

* Updates docs templates and mixins

Author: andreamangano

assets/scss/1-settings/_palette.scss

@@ -1,11 +1,10 @@
 $palette-primary: get-palette('primary');
 $palette-neutral: get-palette('neutral');
 
-@function primaryColor($color) {
+@function primary-color($color) {
   @return map-get($palette-primary, $color);
 }
 
-@function neutralColor($color) {
+@function neutral-color($color) {
   @return map-get($palette-neutral, $color);
 }
-

assets/scss/2-tools/mixins/_typography.scss

@@ -5,3 +5,26 @@
     }
   }
 }
+
+@mixin get-typo($tag, $data: null) {
+  @if ($data == null) {
+    $data: get-typo($tag);
+  }
+  @each $key, $value in $data {
+    @if ($key == sizes) {
+      @include responsive-typo($value);
+    } @elseif ($key == 'font-size') {
+      #{$key}: rem-calc($value);
+    } @else {
+      #{$key}: $value;
+    }
+  }
+}
+
+@mixin print-typography() {
+  @each $key, $value in get-typography() {
+    #{$key} {
+      @include get-typo($key, $value);
+    }
+  }
+}

assets/scss/3-generic/_layout-settings.scss

@@ -20,8 +20,7 @@ $v-unit: rem-calc(16);
 $h-unit: rem-calc(16);
 
 // Fonts
-// $base-font-family: 'gotham', sans-serif;
-$base-font-family: 'okomito', sans-serif;
+$base-font-family: 'Roboto', sans-serif;
 $layout-wrapper-sizes: ('medium': 960, 'large': 1050, 'huge': 1200);
 
 $layout-slide-wrapper: rem-calc(900);

assets/scss/4-base/_typography.scss

@@ -1,55 +1 @@
-h1 {
-  @extend %h1;
-  margin: $v-unit * 1.5 0;
-}
-
-h2 {
-  @extend %h2;
-  margin: $v-unit * 1.5 0;
-}
-
-h3 {
-  @extend %h3;
-  margin: $v-unit 0 ($v-unit / 2);
-}
-
-h4 {
-  @extend %h4;
-  margin: $v-unit / 2 0;
-}
-
-h5 {
-  @extend %h5;
-  margin: $v-unit / 2 0;
-}
-
-h6 {
-  @extend %h6;
-  margin: $v-unit / 2 0;
-}
-
-p {
-  @extend %p;
-  margin: $v-unit / 2 0;
-
-  &:first-child {
-    margin-top: 0;
-  }
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-small {
-  // @include moderato;
-}
-
-strong {
-  font-weight: 700;
-}
-
-a {
-  color: currentColor;
-  text-decoration: none;
-}
+@include print-typography();

assets/scss/4-base/placeholders/_typography.scss

@@ -1,10 +1,9 @@
 .layout {
-  color: neutralColor('neutral-highest');
+  color: neutral-color('neutral-highest');
   font-family: $base-font-family;
   font-size: 16px;
-  text-rendering: optimizeLegibility;
   padding: rem-calc(10);
+  text-rendering: optimizeLegibility;
 
-  &__page {
-  }
-}
+  // &__page {}
+}

assets/scss/7-pages/_layout.scss

@@ -13,7 +13,7 @@
   padding-bottom: $v-unit * 4;
 
   &__title {
-    border-bottom: 1px solid neutralColor('low');
+    border-bottom: 1px solid neutral-color('low');
     padding-bottom: $v-unit * 2;
     text-transform: capitalize;
   }
@@ -28,29 +28,58 @@
   }
 
   &__preview {
-    background-color: neutralColor('low');
-    border: 1px solid neutralColor('low');
+    background-color: neutral-color('low');
+    border: 1px solid neutral-color('low');
     padding: ($v-unit * 2) ($h-unit * 2);
   }
 }
 
 .headings-grid {
 
-  &__list {}
+  // &__list {}
 
   &__item {
-    border-bottom: 1px solid neutralColor('low');
-    padding: $v-unit 0;
+    border-bottom: 1px dotted neutral-color('low');
+    padding: $v-unit * 1.5 0;
 
     &:last-child {
       border-bottom: 0;
     }
 
     * {
-      line-height: 1;
       margin: 0;
     }
   }
+
+  &__type {
+    &::before {
+      content: '<';
+    }
+
+    &::after {
+      content: '/>';
+    }
+  }
+
+  &__family {
+    margin-top: $v-unit / 2;
+  }
+
+  &__sizes {
+    background-color: neutral-color('lower');
+    display: inline-flex;
+    margin-top: $v-unit;
+    padding: rem-calc(2 4);
+  }
+
+  &__size {
+    margin-right: $h-unit / 2;
+    text-transform: capitalize;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
 }
 
 .palette-grid {
@@ -69,8 +98,8 @@
 }
 
 .color-box {
-  background-color: neutralColor('lowest');
-  box-shadow: 0 2px 4px rgba(neutralColor('highest'), .2);
+  background-color: neutral-color('lowest');
+  box-shadow: 0 2px 4px rgba(neutral-color('highest'), .2);
 
   &__swatch {
     display: block;
@@ -87,6 +116,6 @@
   }
 
   &__hex {
-    color: neutralColor('medium');
+    color: neutral-color('medium');
   }
 }

assets/scss/docs.scss

@@ -8,7 +8,6 @@
 @import './3-generic/layout-settings';
 
 @import './4-base/fonts/primary';
-@import './4-base/placeholders/typography';
 @import './4-base/typography';
 
 @import './7-pages/layout';

assets/scss/main.scss

@@ -63,6 +63,7 @@
     "cpx": "^1.5.0",
     "imagemin-cli": "^3.0.0",
     "node-sass": "^4.3.0",
+    "node-sass-utils": "^1.1.2",
     "npm-run-all": "^4.0.1",
     "onchange": "^3.2.1",
     "postcss-cli": "^2.6.0",

package.json

@@ -1,4 +1,4 @@
-var palettes = require('./palette');
 var data = require('./../dist/data.json');
-data.palettes = palettes;
-module.exports = data;
+data.palettes = require('./palette');
+data.typography = require('./typography');
+module.exports = data;