From c00c7643b159b0ea487f0481a51cfbbe4a8f0181 Mon Sep 17 00:00:00 2001 From: tomasz hanaj <12088991+tomaszhanaj@users.noreply.github.com> Date: Thu, 16 Feb 2023 14:38:34 +0100 Subject: [PATCH] AAE-12716 updated the typography documentation (#8277) * AAE-12716 updated the typography documentation * tests trigger --- docs/user-guide/theming.md | 33 ++++++++++++--------- docs/user-guide/typography.md | 54 +++++++++++++++++++++-------------- 2 files changed, 53 insertions(+), 34 deletions(-) diff --git a/docs/user-guide/theming.md b/docs/user-guide/theming.md index f1a83904aa..a573046619 100644 --- a/docs/user-guide/theming.md +++ b/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); diff --git a/docs/user-guide/typography.md b/docs/user-guide/typography.md index 271c4f3c52..0cac3e5daf 100644 --- a/docs/user-guide/typography.md +++ b/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 ``` - +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) \ No newline at end of file +for more details about typography refer to [Material 2 documentation](https://github.com/angular/material2/blob/master/guides/typography.md)