From f18fd940850efaa549603b775f006293cfaa1f38 Mon Sep 17 00:00:00 2001
From: tomasz hanaj <12088991+tomaszhanaj@users.noreply.github.com>
Date: Thu, 16 Feb 2023 01:46:41 +0100
Subject: [PATCH] [AAE-12668] refactored typography for themes (#8268)

* AAE-12668 refactored typography for themes

* AAE-12668 added missing spaces

* AAE-12668 removed parenthesis causing lint error
---
 demo-shell/src/custom-style-dev.scss          | 14 +++++---
 lib/core/src/lib/styles/_index.scss           | 32 ++++++++++---------
 .../lib/styles/prebuilt/adf-blue-orange.scss  |  5 +--
 .../lib/styles/prebuilt/adf-blue-purple.scss  |  5 +--
 .../lib/styles/prebuilt/adf-cyan-orange.scss  |  5 +--
 .../lib/styles/prebuilt/adf-cyan-purple.scss  |  5 +--
 .../lib/styles/prebuilt/adf-green-orange.scss |  5 +--
 .../lib/styles/prebuilt/adf-green-purple.scss |  5 +--
 .../lib/styles/prebuilt/adf-indigo-pink.scss  |  5 +--
 .../styles/prebuilt/adf-pink-bluegrey.scss    |  5 +--
 .../lib/styles/prebuilt/adf-purple-green.scss |  5 +--
 11 files changed, 53 insertions(+), 38 deletions(-)

diff --git a/demo-shell/src/custom-style-dev.scss b/demo-shell/src/custom-style-dev.scss
index 77f51c5fe12..7509f6800d1 100644
--- a/demo-shell/src/custom-style-dev.scss
+++ b/demo-shell/src/custom-style-dev.scss
@@ -1,6 +1,7 @@
 @use '@angular/material' as mat;
 @import '../../lib/core/src/lib/styles/index';
-@include mat.core($alfresco-typography);
+@import '../../lib/core/src/lib/styles/typography';
+@include mat.core;
 
 $primary: mat.define-palette($alfresco-accent-orange);
 $accent: mat.define-palette($alfresco-accent-purple);
@@ -10,21 +11,24 @@ $theme: mat.define-light-theme(
         color: (
             primary: $primary,
             accent: $accent,
-        )
+        ),
+        typography: $alfresco-typography
     )
 );
 
 @include mat.all-component-themes($theme);
 @include alfresco-material-theme($theme);
 
+$typography: map-get($theme, typography);
+
 body,
 html {
     margin: 0;
     height: 100%;
     overflow: hidden;
-    font-size: mat.font-size($alfresco-typography, body-1);
-    font-family: mat.font-family($alfresco-typography);
-    line-height: mat.line-height($alfresco-typography, body-1);
+    font-size: mat.font-size($typography, body-1);
+    font-family: mat.font-family($typography);
+    line-height: mat.line-height($typography, body-1);
 }
 
 body {
diff --git a/lib/core/src/lib/styles/_index.scss b/lib/core/src/lib/styles/_index.scss
index 0ab200456da..4e089f7fd5e 100644
--- a/lib/core/src/lib/styles/_index.scss
+++ b/lib/core/src/lib/styles/_index.scss
@@ -4,7 +4,8 @@
 /* stylelint-disable scss/no-global-function-names */
 /* stylelint-disable scss/at-import-partial-extension */
 @import './default-class';
-@import './theming';
+@import '../styles/colors';
+@import '../styles/mixins';
 @import '../form/components/widgets/form.theme';
 @import '../clipboard/clipboard.theme';
 @import './snackbar.theme';
@@ -21,6 +22,7 @@
     $warn: map-get($theme, warn);
     $accent: map-get($theme, accent);
     $primary: map-get($theme, primary);
+    $typography: map-get($theme, typography);
 
     // map SCSS variables to expose as CSS variables
     $defaults: (
@@ -81,20 +83,20 @@
         --theme-unselected-chip-bg-color: mat.get-color-from-palette($background, unselected-chip),
         --theme-status-bar-bg-color: mat.get-color-from-palette($background, status-bar),
         // fonts
-        --theme-font-family: mat.font-family($alfresco-typography),
-        --theme-body-1-font-size: mat.font-size($alfresco-typography, body-1),
-        --theme-body-2-font-size: mat.font-size($alfresco-typography, body-2),
-        --theme-body-1-line-height: mat.line-height($alfresco-typography, body-1),
-        --theme-display-1-font-size: mat.font-size($alfresco-typography, display-1),
-        --theme-display-3-font-size: mat.font-size($alfresco-typography, display-3),
-        --theme-display-4-font-size: mat.font-size($alfresco-typography, display-4),
-        --theme-caption-font-size: mat.font-size($alfresco-typography, caption),
-        --theme-title-font-size: mat.font-size($alfresco-typography, title),
-        --theme-subheading-1-font-size: mat.font-size($alfresco-typography, subheading-1),
-        --theme-subheading-2-font-size: mat.font-size($alfresco-typography, subheading-2),
-        --theme-button-font-size: mat.font-size($alfresco-typography, button),
-        --theme-headline-font-size: mat.font-size($alfresco-typography, headline),
-        --theme-headline-line-height: mat.line-height($alfresco-typography, headline),
+        --theme-font-family: mat.font-family($typography),
+        --theme-body-1-font-size: mat.font-size($typography, body-1),
+        --theme-body-2-font-size: mat.font-size($typography, body-2),
+        --theme-body-1-line-height: mat.line-height($typography, body-1),
+        --theme-display-1-font-size: mat.font-size($typography, display-1),
+        --theme-display-3-font-size: mat.font-size($typography, display-3),
+        --theme-display-4-font-size: mat.font-size($typography, display-4),
+        --theme-caption-font-size: mat.font-size($typography, caption),
+        --theme-title-font-size: mat.font-size($typography, title),
+        --theme-subheading-1-font-size: mat.font-size($typography, subheading-1),
+        --theme-subheading-2-font-size: mat.font-size($typography, subheading-2),
+        --theme-button-font-size: mat.font-size($typography, button),
+        --theme-headline-font-size: mat.font-size($typography, headline),
+        --theme-headline-line-height: mat.line-height($typography, headline),
 
         --theme-adf-icon-1-font-size: map-get($custom-css-variables, 'theme-adf-icon-1-font-size'),
         --theme-adf-picture-1-font-size: map-get($custom-css-variables, 'theme-adf-picture-1-font-size'),
diff --git a/lib/core/src/lib/styles/prebuilt/adf-blue-orange.scss b/lib/core/src/lib/styles/prebuilt/adf-blue-orange.scss
index 6c4adf74d77..34fddc4c593 100644
--- a/lib/core/src/lib/styles/prebuilt/adf-blue-orange.scss
+++ b/lib/core/src/lib/styles/prebuilt/adf-blue-orange.scss
@@ -1,7 +1,7 @@
 @use '@angular/material' as mat;
 @import '../theming';
 @import './all-theme';
-@include mat.core($alfresco-typography);
+@include mat.core;
 
 $primary: mat.define-palette($alfresco-ecm-blue);
 $accent: mat.define-palette($alfresco-accent-orange);
@@ -11,7 +11,8 @@ $theme: mat.define-light-theme(
         color: (
             primary: $primary,
             accent: $accent,
-        )
+        ),
+        typography: $alfresco-typography
     )
 );
 
diff --git a/lib/core/src/lib/styles/prebuilt/adf-blue-purple.scss b/lib/core/src/lib/styles/prebuilt/adf-blue-purple.scss
index 45dc967cf49..52b17c8a111 100644
--- a/lib/core/src/lib/styles/prebuilt/adf-blue-purple.scss
+++ b/lib/core/src/lib/styles/prebuilt/adf-blue-purple.scss
@@ -1,7 +1,7 @@
 @use '@angular/material' as mat;
 @import '../theming';
 @import './all-theme';
-@include mat.core($alfresco-typography);
+@include mat.core;
 
 $primary: mat.define-palette(mat.$pink-palette, 700, 500, 900);
 $accent: mat.define-palette($alfresco-accent-purple);
@@ -11,7 +11,8 @@ $theme: mat.define-light-theme(
         color: (
             primary: $primary,
             accent: $accent,
-        )
+        ),
+        typography: $alfresco-typography
     )
 );
 
diff --git a/lib/core/src/lib/styles/prebuilt/adf-cyan-orange.scss b/lib/core/src/lib/styles/prebuilt/adf-cyan-orange.scss
index 6bc36a0a3f6..61c9f8e9029 100644
--- a/lib/core/src/lib/styles/prebuilt/adf-cyan-orange.scss
+++ b/lib/core/src/lib/styles/prebuilt/adf-cyan-orange.scss
@@ -1,7 +1,7 @@
 @use '@angular/material' as mat;
 @import '../theming';
 @import './all-theme';
-@include mat.core($alfresco-typography);
+@include mat.core;
 
 $primary: mat.define-palette($alfresco-ecm-cyan);
 $accent: mat.define-palette($alfresco-accent-orange);
@@ -11,7 +11,8 @@ $theme: mat.define-light-theme(
         color: (
             primary: $primary,
             accent: $accent,
-        )
+        ),
+        typography: $alfresco-typography
     )
 );
 
diff --git a/lib/core/src/lib/styles/prebuilt/adf-cyan-purple.scss b/lib/core/src/lib/styles/prebuilt/adf-cyan-purple.scss
index 9389d1e1fd0..d4e2d15a550 100644
--- a/lib/core/src/lib/styles/prebuilt/adf-cyan-purple.scss
+++ b/lib/core/src/lib/styles/prebuilt/adf-cyan-purple.scss
@@ -1,7 +1,7 @@
 @use '@angular/material' as mat;
 @import '../theming';
 @import './all-theme';
-@include mat.core($alfresco-typography);
+@include mat.core;
 
 $primary: mat.define-palette($alfresco-ecm-cyan);
 $accent: mat.define-palette($alfresco-accent-purple);
@@ -11,7 +11,8 @@ $theme: mat.define-light-theme(
         color: (
             primary: $primary,
             accent: $accent,
-        )
+        ),
+        typography: $alfresco-typography
     )
 );
 
diff --git a/lib/core/src/lib/styles/prebuilt/adf-green-orange.scss b/lib/core/src/lib/styles/prebuilt/adf-green-orange.scss
index fd75c8a49db..9bd7163d875 100644
--- a/lib/core/src/lib/styles/prebuilt/adf-green-orange.scss
+++ b/lib/core/src/lib/styles/prebuilt/adf-green-orange.scss
@@ -1,7 +1,7 @@
 @use '@angular/material' as mat;
 @import '../theming';
 @import './all-theme';
-@include mat.core($alfresco-typography);
+@include mat.core;
 
 $primary: mat.define-palette($alfresco-bpm-green);
 $accent: mat.define-palette($alfresco-accent-orange);
@@ -11,7 +11,8 @@ $theme: mat.define-light-theme(
         color: (
             primary: $primary,
             accent: $accent,
-        )
+        ),
+        typography: $alfresco-typography
     )
 );
 
diff --git a/lib/core/src/lib/styles/prebuilt/adf-green-purple.scss b/lib/core/src/lib/styles/prebuilt/adf-green-purple.scss
index 648f3ad6001..81e1c0a36dd 100644
--- a/lib/core/src/lib/styles/prebuilt/adf-green-purple.scss
+++ b/lib/core/src/lib/styles/prebuilt/adf-green-purple.scss
@@ -1,7 +1,7 @@
 @use '@angular/material' as mat;
 @import '../theming';
 @import './all-theme';
-@include mat.core($alfresco-typography);
+@include mat.core;
 
 $primary: mat.define-palette($alfresco-bpm-green);
 $accent: mat.define-palette($alfresco-accent-purple);
@@ -11,7 +11,8 @@ $theme: mat.define-light-theme(
         color: (
             primary: $primary,
             accent: $accent,
-        )
+        ),
+        typography: $alfresco-typography
     )
 );
 
diff --git a/lib/core/src/lib/styles/prebuilt/adf-indigo-pink.scss b/lib/core/src/lib/styles/prebuilt/adf-indigo-pink.scss
index 4b627f4d02b..aaba218265f 100644
--- a/lib/core/src/lib/styles/prebuilt/adf-indigo-pink.scss
+++ b/lib/core/src/lib/styles/prebuilt/adf-indigo-pink.scss
@@ -2,7 +2,7 @@
 @use '@angular/material' as mat;
 @import '../theming';
 @import './all-theme';
-@include mat.core($alfresco-typography);
+@include mat.core;
 
 $primary: mat.define-palette(mat.$indigo-palette);
 $accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
@@ -12,7 +12,8 @@ $theme: mat.define-light-theme(
         color: (
             primary: $primary,
             accent: $accent,
-        )
+        ),
+        typography: $alfresco-typography
     )
 );
 
diff --git a/lib/core/src/lib/styles/prebuilt/adf-pink-bluegrey.scss b/lib/core/src/lib/styles/prebuilt/adf-pink-bluegrey.scss
index 7a45856f5c4..a107e834de9 100644
--- a/lib/core/src/lib/styles/prebuilt/adf-pink-bluegrey.scss
+++ b/lib/core/src/lib/styles/prebuilt/adf-pink-bluegrey.scss
@@ -2,7 +2,7 @@
 @use '@angular/material' as mat;
 @import '../theming';
 @import './all-theme';
-@include mat.core($alfresco-typography);
+@include mat.core;
 
 $primary: mat.define-palette(mat.$pink-palette, 700, 500, 900);
 $accent: mat.define-palette(mat.$blue-grey-palette, A200, A100, A400);
@@ -12,7 +12,8 @@ $theme: mat.define-dark-theme(
         color: (
             primary: $primary,
             accent: $accent,
-        )
+        ),
+        typography: $alfresco-typography
     )
 );
 
diff --git a/lib/core/src/lib/styles/prebuilt/adf-purple-green.scss b/lib/core/src/lib/styles/prebuilt/adf-purple-green.scss
index aa1b89e6cb8..eb8d5aa8d72 100644
--- a/lib/core/src/lib/styles/prebuilt/adf-purple-green.scss
+++ b/lib/core/src/lib/styles/prebuilt/adf-purple-green.scss
@@ -2,7 +2,7 @@
 @use '@angular/material' as mat;
 @import '../theming';
 @import './all-theme';
-@include mat.core($alfresco-typography);
+@include mat.core;
 
 $primary: mat.define-palette(mat.$purple-palette, 700, 500, 800);
 $accent: mat.define-palette(mat.$green-palette, A200, A100, A400);
@@ -12,7 +12,8 @@ $theme: mat.define-dark-theme(
         color: (
             primary: $primary,
             accent: $accent,
-        )
+        ),
+        typography: $alfresco-typography
     )
 );