From fbccbb5a987a43d1bc9aebb8f21dfc8ec66b13f9 Mon Sep 17 00:00:00 2001
From: Vito Albano <vito.albano@alfresco.com>
Date: Wed, 22 Feb 2023 13:37:07 +0000
Subject: [PATCH] Fixed error on custom style and added doc for BC (#8297)

---
 demo-shell/src/custom-style-dev.scss |  1 +
 docs/upgrade-guide/upgrade50-60.md   | 37 ++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+)

diff --git a/demo-shell/src/custom-style-dev.scss b/demo-shell/src/custom-style-dev.scss
index 7509f6800d1..7249e1c8845 100644
--- a/demo-shell/src/custom-style-dev.scss
+++ b/demo-shell/src/custom-style-dev.scss
@@ -11,6 +11,7 @@ $theme: mat.define-light-theme(
         color: (
             primary: $primary,
             accent: $accent,
+            warn: $warn
         ),
         typography: $alfresco-typography
     )
diff --git a/docs/upgrade-guide/upgrade50-60.md b/docs/upgrade-guide/upgrade50-60.md
index 9498d249593..25aca1c346d 100644
--- a/docs/upgrade-guide/upgrade50-60.md
+++ b/docs/upgrade-guide/upgrade50-60.md
@@ -34,6 +34,7 @@ project.
     -   [New Classes or Services](#new-classes-or-services)
     -   [Properties and methods](#properties-and-methods)
     -   [Component selectors](#component-selectors)
+-   [Theme changes](#theme-changes) 
 
 ## Library updates
 
@@ -251,3 +252,39 @@ To build a similar logic to the one in ```UserInfoComponent``` check implementat
 ### Properties and methods
 
 ### Component selectors
+
+## Theme changes
+
+v6.0.0 has improved the way that typography is injected into the ADF theme. Now the typography of ADF is taken from the material theme following the material design specifications : 
+
+before v6.0.0
+```
+@include mat-core($typography);
+$primary: mat.define-palette($primary);
+$accent: mat.define-palette($accent);
+$warn: mat.define-palette($warn);
+$theme:   mat-light-theme($primary, $accent, $warn);
+
+```
+typography was already predefined inside ADF theme but this will prevent to inject different typography.
+
+v6.0.0 and after 
+```
+$typography: mat.define-typography-config(
+   ...define your typography following material specifications
+);
+
+$primary: mat.define-palette($primary);
+$accent: mat.define-palette($accent);
+$warn: mat.define-palette($warn);
+$theme: mat.define-light-theme(
+    (
+        color: (
+            primary: $primary,
+            accent: $accent,
+            warn: $warn
+        ),
+        typography: $typography
+    )
+);
+```