AAE-12716 updated the typography documentation (#8277)

* AAE-12716 updated the typography documentation

* tests trigger

Author: tomaszhanaj

docs/user-guide/theming.md

@@ -70,19 +70,22 @@ When you want more customization than a pre-built theme offers, you can create y
 /*
  *  Include only packages that you are using (and core by default)
  */
+@use '@angular/material' as mat;
 @import '~@angular/material/theming';
 @import '~@alfresco/adf-core/theming';
 
-@include mat-core($alfresco-typography);
+@include mat.core();
 
-$primary: mat-palette($alfresco-accent-orange);
-$accent:  mat-palette($alfresco-accent-purple);
-$warn:    mat-palette($alfresco-warn);
-$theme:   mat-light-theme((
+$primary: mat.define-palette($alfresco-accent-orange);
+$accent:  mat.define-palette($alfresco-accent-purple);
+$warn:    mat.define-palette($alfresco-warn);
+$theme:   mat.define-light-theme((
     color: (
         primary: $primary,
         accent: $accent,
-    )
+        warn: $warn,
+    ),
+    typography: $alfresco-typography
 ));
 
 @include angular-material-theme($theme);
@@ -103,21 +106,25 @@ You can create multiple themes for your application:
 
 @include mat-core($alfresco-typography);
 
-$primary: mat-palette($alfresco-accent-orange);
-$accent:  mat-palette($alfresco-accent-purple);
-$warn:    mat-palette($alfresco-warn);
-$theme:   mat-light-theme((
+$primary: mat.define-palette($alfresco-accent-orange);
+$accent:  mat.define-palette($alfresco-accent-purple);
+$warn:    mat.define-palette($alfresco-warn);
+$theme:   mat.define-light-theme((
     color: (
         primary: $primary,
         accent: $accent,
-    )
+        warn: $warn,
+    ),
+    typography: $alfresco-typography
 ));
 
-$dark-theme:   mat-dark-theme((
+$dark-theme:   mat.define-dark-theme((
     color: (
         primary: $primary,
         accent: $accent,
-    )
+        warn: $warn,
+    ),
+    typography: $alfresco-typography
 ));
 
 @include alfresco-material-theme($theme);

docs/user-guide/typography.md

@@ -14,13 +14,16 @@ To get started you need to include your custom font in the `/src/index.html` hea
 ```html
   <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
 ```
-
+When adding custom typography, please be aware of angular material version
+(there are two different versions of typography levels: 2014 and 2018). Current 
+version is 14.
 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)
  */
+@use '@angular/material' as mat;
 @import '~@angular/material/theming';
 @import '~ng2-alfresco-core/styles/theming';
 @import '~ng2-alfresco-core/styles/index';
@@ -35,29 +38,38 @@ After you need to change your `/src/custom-style.scss` to include the new font:
 @import '~ng2-alfresco-upload/styles/index';
 @import '~ng2-alfresco-userinfo/styles/index';
 
-$custom-typography: mat-typography-config(
+$custom-typography: mat.define-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)
+    $display-4:     mat.define-typography-level(112px, 112px, 300),
+    $display-3:     mat.define-typography-level(56px, 56px, 400),
+    $display-2:     mat.define-typography-level(45px, 48px, 400),
+    $display-1:     mat.define-typography-level(34px, 40px, 400),
+    $headline:      mat.define-typography-level(24px, 32px, 400),
+    $title:         mat.define-typography-level(20px, 32px, 500),
+    $subheading-2:  mat.define-typography-level(16px, 28px, 400),
+    $subheading-1:  mat.define-typography-level(15px, 24px, 400),
+    $body-2:        mat.define-typography-level(14px, 24px, 500),
+    $body-1:        mat.define-typography-level(14px, 20px, 400),
+    $caption:       mat.define-typography-level(12px, 20px, 400),
+    $button:        mat.define-typography-level(14px, 14px, 500),
+    $input:         mat.define-typography-level(16px, 1.25, 400)
 );
 
-@include mat-core($custom-typography);
+@include mat.core();
 
-$primary: mat-palette($alfresco-accent-orange);
-$accent:  mat-palette($alfresco-accent-purple);
-$warn:    mat-palette($alfresco-warn);
-$theme:   mat-light-theme($primary, $accent, $warn);
+$primary: mat.define-palette($alfresco-accent-orange);
+$accent:  mat.define-palette($alfresco-accent-purple);
+$warn:    mat.define-palette($alfresco-warn);
+$theme:   mat.define-light-theme(
+    (
+        color: (
+            primary: $primary,
+            accent: $accent,
+            warn: $warn,
+        ),
+        typography: $custom-typography
+    )
+);
 
 @include angular-material-theme($theme);
 
@@ -75,4 +87,4 @@ $theme:   mat-light-theme($primary, $accent, $warn);
 
 ```
 
-for more details about typography refer to [Material 2 documentation](https://github.com/angular/material2/blob/master/guides/typography.md)
+for more details about typography refer to [Material 2 documentation](https://github.com/angular/material2/blob/master/guides/typography.md)