[ADF-1867] Typography Documentation (#2595)

* Typography Documentation

* doc fix after review

docs/README.md

@@ -32,6 +32,7 @@ to the appropriate source file.
 - [Form Stencils with Angular 2](stencils.md)
 - [Angular Material Design](angular-material-design.md)
 - [Theming](theming.md)
+- [Typography](typography.md)
 - [Walkthrough: adding indicators to highlight information about a node](metadata-indicators.md)
 
 <!-- guide end -->

docs/summary.json

@@ -3,5 +3,6 @@
     { "title": "Form Stencils with Angular 2", "file": "stencils.md" },
     { "title": "Angular Material Design", "file": "angular-material-design.md" },
     { "title": "Theming", "file": "theming.md" },
+    { "title": "Typography", "file": "typography.md" },
     { "title": "Walkthrough: adding indicators to highlight information about a node", "file": "metadata-indicators.md" }
-]
+]

docs/theming.md

@@ -20,7 +20,7 @@ Available pre-built themes:
 * `adf-pink-bluegrey.css`
 * `adf-purple-green.css`
 
-If you're using Angular CLI you can include one of the prebuilt theme in yours `styles.css` file:
+If you're using Angular CLI you can include one of the prebuilt theme in your `styles.scss` file:
 ```css
 @import '~ng2-alfresco-core/prebuilt-themes/adf-blue-orange.css';
 ```
@@ -36,7 +36,7 @@ When you want more customization than a pre-built theme offers, you can create y
 
 ```scss
 /*
- *  Include only packages what you are using (and core by default)
+ *  Include only packages that you are using (and core by default)
  */
 @import '~@angular/material/theming';
 @import '~ng2-alfresco-core/styles/theming';
@@ -75,7 +75,7 @@ $theme:   mat-light-theme($primary, $accent, $warn);
 
 ```
 
-Notes: if you are using the Generator or the demo shell you need only to change the`/app/theme.scss` with your set of colors
+Notes: if you are using the Generator or the demo shell you need only to change the`/src/custom-style.scss` with your set of colors
 
 ### Multiple themes
 
@@ -111,14 +111,16 @@ Any component with the  `add-dark-theme` class will use the dark theme, while ot
 
 ## Default reusable class
 
+```css
 .adf-hide-small                 // Display none vieweport <960px
 .adf-hide-xsmall                // Display none vieweport <600px
 
 .adf-primary-color               // Primary color
-.adf-accent-color                // Accent color
-.adf-warn-color                  // Warn color
-.adf-primary-contrast-text-color // Default contrast color for primary color
-.adf-accent-contrast-text-color  // Default contrast color for accent color
-.adf-background-color            // Dialog background color
-.adf-primary-background-color    // Primary background color
-.adf-accent-background-color     // Default background color for accent
+.accent-color                // Accent color
+.warn-color                  // Warn color
+.primary-contrast-text-color // Default contrast color for primary color
+.accent-contrast-text-color  // Default contrast color for accent color
+.background-color            // Dialog background color
+.primary-background-color    // Primary background color
+.accent-background-color     // Default background color for accent
+```

docs/typography.md

@@ -0,0 +1,75 @@
+# ADF Typography
+
+## What is typography?
+
+Typography configuration lets you change the style of the text in your ADF app
+
+## Customization
+
+To get started you need to include your custom font in the `/src/index.html` header:
+
+```html
+  <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
+```
+
+After you need to change your `/src/custom-style.scss` to include the new font:
+
+```scss
+/*
+ *  Include only packages that you are using (and core by default)
+ */
+@import '~@angular/material/theming';
+@import '~ng2-alfresco-core/styles/theming';
+@import '~ng2-alfresco-core/styles/index';
+@import '~ng2-activiti-analytics/styles/index';
+@import '~ng2-activiti-diagrams/styles/index';
+@import '~ng2-activiti-form/styles/index';
+@import '~ng2-activiti-processlist/styles/index';
+@import '~ng2-activiti-tasklist/styles/index';
+@import '~ng2-alfresco-datatable/styles/index';
+@import '~ng2-alfresco-documentlist/styles/index';
+@import '~ng2-alfresco-login/styles/index';
+@import '~ng2-alfresco-upload/styles/index';
+@import '~ng2-alfresco-userinfo/styles/index';
+
+$custom-typography: mat-typography-config(
+    $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif',
+    $display-4:     mat-typography-level(112px, 112px, 300),
+    $display-3:     mat-typography-level(56px, 56px, 400),
+    $display-2:     mat-typography-level(45px, 48px, 400),
+    $display-1:     mat-typography-level(34px, 40px, 400),
+    $headline:      mat-typography-level(24px, 32px, 400),
+    $title:         mat-typography-level(20px, 32px, 500),
+    $subheading-2:  mat-typography-level(16px, 28px, 400),
+    $subheading-1:  mat-typography-level(15px, 24px, 400),
+    $body-2:        mat-typography-level(14px, 24px, 500),
+    $body-1:        mat-typography-level(14px, 20px, 400),
+    $caption:       mat-typography-level(12px, 20px, 400),
+    $button:        mat-typography-level(14px, 14px, 500),
+    $input:         mat-typography-level(16px, 1.25, 400)
+);
+
+@include mat-core($custom-typography);
+
+$primary: mat-palette($alfresco-accent-orange);
+$accent:  mat-palette($alfresco-accent-purple);
+$warn:    mat-palette($alfresco-warn);
+$theme:   mat-light-theme($primary, $accent, $warn);
+
+@include angular-material-theme($theme);
+
+@include alfresco-core-theme($theme);
+@include alfresco-activity-analytics-theme($theme);
+@include alfresco-activity-diagrams-theme($theme);
+@include alfresco-activity-form-theme($theme);
+@include alfresco-activity-processlist-theme($theme);
+@include alfresco-activity-tasklist-theme($theme);
+@include alfresco-datatable-theme($theme);
+@include alfresco-documentlist-theme($theme);
+@include alfresco-login-theme($theme);
+@include alfresco-upload-theme($theme);
+@include alfresco-userinfo-theme($theme);
+
+```
+
+for more details about typography refer to [Material 2 documentation](https://github.com/angular/material2/blob/master/guides/typography.md)