[AAE-6823] Customize font (#2423)

* [AAE-6823] Customize font

* Fix for adf vars

* update

* update

* update

* update

* [AAE-6823] Custom fonts

* [AAE-6823] Create new css var for new button

* [AAE-6823] Cleaning code

* [AAE-6823] Changed configuration to tpl

* [AAE-6823] Cleaning code

* [AAE-6823] Cleaning code

app/src/app/app.component.ts

@@ -45,7 +45,8 @@ import {
   SnackbarErrorAction,
   CloseModalDialogsAction,
   SetRepositoryInfoAction,
-  getCustomCssPath
+  getCustomCssPath,
+  getCustomWebFontPath
 } from '@alfresco/aca-shared/store';
 import { filter, takeUntil } from 'rxjs/operators';
 import { RouterExtensionService, AppService, ContentApiService } from '@alfresco/aca-shared';
@@ -99,6 +100,7 @@ export class AppComponent implements OnInit, OnDestroy {
     this.loadAppSettings();
 
     this.loadCustomCss();
+    this.loadCustomWebFont();
 
     const { router, pageTitle } = this;
 
@@ -203,12 +205,24 @@ export class AppComponent implements OnInit, OnDestroy {
   private loadCustomCss(): void {
     this.store.select(getCustomCssPath).subscribe((cssPath) => {
       if (cssPath) {
-        const cssLinkElement = document.createElement('link');
+        this.createLink(cssPath);
-        cssLinkElement.setAttribute('rel', 'stylesheet');
-        cssLinkElement.setAttribute('type', 'text/css');
-        cssLinkElement.setAttribute('href', cssPath);
-        document.head.appendChild(cssLinkElement);
       }
     });
   }
+
+  private loadCustomWebFont(): void {
+    this.store.select(getCustomWebFontPath).subscribe((fontUrl) => {
+      if (fontUrl) {
+        this.createLink(fontUrl);
+      }
+    });
+  }
+
+  private createLink(url: string): void {
+    const cssLinkElement = document.createElement('link');
+    cssLinkElement.setAttribute('rel', 'stylesheet');
+    cssLinkElement.setAttribute('type', 'text/css');
+    cssLinkElement.setAttribute('href', url);
+    document.head.appendChild(cssLinkElement);
+  }
 }

app/src/app/components/create-menu/create-menu.component.scss

@@ -7,7 +7,7 @@
     width: 100%;
     height: 37.5px;
     border-radius: 4px;
-    font-size: 12.7px;
+    font-size: var(--new-button-font-size);
     font-weight: normal;
     text-transform: uppercase;
     margin-top: 10px;
@@ -71,7 +71,7 @@
         display: flex;
         flex-direction: row;
         align-items: center;
-        font-size: 14px;
+        font-size: var(--theme-button-font-size);
         color: var(--theme-secondary-text-color);
         line-height: 48px;
         box-shadow: none;

app/src/app/store/initial-state.ts

@@ -32,6 +32,7 @@ export const INITIAL_APP_STATE: AppState = {
   logoPath: 'assets/images/alfresco-logo-white.svg',
   headerImagePath: 'assets/images/mastHead-bg-shapesPattern.svg',
   customCssPath: '',
+  webFontPath: '',
   sharedUrl: '',
   user: {
     isAdmin: null,

app/src/app/ui/application.scss

@@ -1,5 +1,6 @@
 @import 'mixins';
 @import 'theme';
+@import 'variables/font-family';
 
 $foreground: map-get($custom-theme, foreground);
 
@@ -7,7 +8,7 @@ html,
 body {
   @include flex-column;
   font-size: 14px;
-  font-family: 'Muli', sans-serif;
+  font-family: $default-font-family;
   color: mat-color($foreground, text, 0.87);
   margin: 0;
 

app/src/app/ui/custom-theme-palettes.scss

@@ -1,6 +0,0 @@
-@use '~@angular/material/theming';
-@import './colors';
-
-$mat-primary-palette: mat-palette($aca-primary-blue, A100);
-$mat-accent-palette: mat-palette($aca-accent-green, A200);
-$mat-warn-palette: mat-palette($aca-warn, A100);

app/src/app/ui/custom-theme.scss

@@ -1,8 +1,12 @@
 @import '~@angular/material/theming';
 @import './overrides/adf-style-fixes.theme';
-@import './custom-theme-palettes';
+@import './colors';
 
-@include mat-core();
+$mat-primary-palette: mat-palette($aca-primary-blue, A100);
+$mat-accent-palette: mat-palette($aca-accent-green, A200);
+$mat-warn-palette: mat-palette($aca-warn, A100);
+
+@include mat-core($alfresco-typography);
 
 $custom-theme: mat-light-theme(
   $mat-primary-palette,
@@ -10,72 +14,8 @@ $custom-theme: mat-light-theme(
   $mat-warn-palette
 );
 
-$foreground: map-get($custom-theme, foreground);
-$background: map-get($custom-theme, background);
-$warn: map-get($custom-theme, warn);
-$accent: map-get($custom-theme, accent);
-$primary: map-get($custom-theme, primary);
-
 @mixin custom-theme($theme) {
   @include angular-material-theme($theme);
   @include adf-core-theme($theme);
   @include adf-style-fixes($theme);
-
-  .mat-toolbar {
-    color: var(--theme-text-color, rgba(0, 0, 0, 0.54));
-  }
-}
-
-//Custom variables - ACA specific styling:
-$document-list-selection-color: mat-color($alfresco-ecm-blue, 500);
-$document-list-background: white;
-$data-table-dividers-wrapper-border: none;
-$data-table-thumbnail-width: 35px;
-$data-table-cell-min-width: 150px;
-$data-table-cell-min-width--no-grow: 120px;
-$data-table-cell-min-width--fileSize: 110px !important;
-$data-table-cell-text-color: mat-color($foreground, text, 0.54);
-$data-table-cell-link-color: mat-color($foreground, text);
-$data-table-hover-color: #e3fafd;
-$data-table-selection-color: #e3fafd;
-
-$adf-pagination--border: 1px solid mat-color($foreground, text, 0.07);
-$adf-pagination__empty--height: 0;
-
-$adf-toolbar-single-row-height: 48px;
-$adf-toolbar-padding: 14px;
-
-$adf-upload-dragging-color: unset;
-$adf-upload-dragging-border: 1px solid #00bcd4;
-$adf-upload-dragging-background: #e0f7fa;
-$adf-upload-dragging-level1-color: unset;
-$adf-upload-dragging-level1-border: none;
-
-$adf-permission-list-width: 100%;
-
-$defaults: (
-  --theme-primary-color: mat-color($primary),
-  --theme-primary-color-default-contrast: mat-color($primary, default-contrast),
-  --theme-warn-color: mat-color($warn),
-  --theme-accent-color: mat-color($accent),
-  --theme-background-color: mat-color($background, background),
-  --theme-text-color: mat-color($foreground, text, 0.54),
-  --theme-text-bold-color: mat-color($foreground, text, 0.87),
-  --theme-title-color: mat-color($foreground, text, 0.87),
-  --theme-text-disabled-color: mat-color($foreground, text, 0.38),
-  --theme-border-color: mat-color($foreground, text, 0.07),
-  --header-background-image: url('/assets/images/mastHead-bg-shapesPattern.svg'),
-  --theme-card-background-color: mat-color($background, card),
-  --theme-foreground-text-color: mat-color($foreground, text, 0.72),
-  --theme-foreground-text-bold-color: mat-color($foreground, text, 0.87),
-  --theme-secondary-text-color: mat-color($foreground, secondary-text),
-  --theme-divider-color: mat-color($foreground, divider, 0.07),
-  --theme-dialog-background-color: mat-color($background, dialog)
-);
-
-// propagates SCSS variables into the CSS variables scope
-:root {
-  @each $name, $value in $defaults {
-    #{$name}: #{$value};
-  }
 }

app/src/app/ui/dynamic-theme/custom-theme-palettes.scss

@@ -0,0 +1,28 @@
+@import '../colors';
+@import './custom-palette-creator.scss';
+
+@function get-mat-palettes($primary-color, $accent-color) {
+    $mat-primary-palette: null;
+    @if $primary-color {
+        $custom-theme-primary-palette: createColorPalette($primary-color, 'primary');
+        $mat-primary-palette: mat-palette($custom-theme-primary-palette, 500);
+    } @else {
+        $mat-primary-palette: mat-palette($aca-primary-blue, A100);
+    }
+
+    $mat-accent-palette: null;
+    @if $accent-color {
+        $custom-theme-accent-palette: createColorPalette($accent-color, 'accent');
+        $mat-accent-palette: mat-palette($custom-theme-accent-palette, 500);
+    } @else {
+        $mat-accent-palette: mat-palette($aca-accent-green, A200);
+    }
+
+    $mat-warn-palette: mat-palette($aca-warn, A100);
+
+    @return (
+        primary: $mat-primary-palette,
+        accent: $mat-accent-palette,
+        warning: $mat-warn-palette,
+    )
+}

app/src/app/ui/dynamic-theme/custom-theme-palettes.scss.tpl

@@ -1,12 +0,0 @@
-@import './colors';
-@import './dynamic-theme/custom-palette-creator.scss';
-
-$primary: ${PRIMARY_COLOR};
-$accent: ${ACCENT_COLOR};
-
-$custom-theme-primary-palette: createColorPalette($primary, 'primary');
-$custom-theme-accent-palette: createColorPalette($accent, 'accent');
-
-$mat-primary-palette: mat-palette($custom-theme-primary-palette, 500);
-$mat-accent-palette: mat-palette($custom-theme-accent-palette, 500);
-$mat-warn-palette: mat-palette($aca-warn, A100);

app/src/app/ui/dynamic-theme/custom-theme.scss.tpl

@@ -0,0 +1,42 @@
+@import '~@angular/material/theming';
+@import './overrides/adf-style-fixes.theme';
+@import "./dynamic-theme/theme-configuration";
+@import "./dynamic-theme/typography";
+@import "./dynamic-theme/custom-theme-palettes";
+
+$primary-color: map-get($theme-config, 'primary-color');
+$accent-color: map-get($theme-config, 'accent-color');
+$base-font-size: map-get($theme-config, 'base-font-size');
+$font-family: map-get($theme-config, 'font-family');
+
+$alfresco-typography: get-mat-typography(
+  $base-font-size,
+  $font-family,
+  $alfresco-typography
+);
+
+@include mat-core($alfresco-typography);
+
+$palettes: get-mat-palettes($primary-color, $accent-color);
+$custom-theme: mat-light-theme(
+  map-get($palettes, primary),
+  map-get($palettes, accent),
+  map-get($palettes, warning),
+);
+
+@mixin custom-theme($theme) {
+  @include angular-material-theme($theme);
+
+  @if $base-font-size {
+    @include adf-core-theme($theme, get-custom-adf-font-sizes());
+    @include base-font-size($base-font-size);
+  } @else {
+    @include adf-core-theme($theme);
+  }
+
+  @if $font-family {
+    @include base-font-family($font-family);
+  }
+
+  @include adf-style-fixes($theme);
+}

app/src/app/ui/dynamic-theme/theme-configuration.scss.tpl

@@ -0,0 +1,12 @@
+/*
+    Specify theme parameters e.g.:
+
+    $theme-config: (
+         primary-color: #5a9d6b,
+         accent-color: #d14ceb,
+         base-font-size: 20px,
+         font-family: Cursive
+     );
+*/
+
+${THEME_CONFIGURATION}

app/src/app/ui/dynamic-theme/typography.scss

@@ -0,0 +1,62 @@
+@import '../variables/font-family.scss';
+
+@function get-mat-typography(
+    $base-font-size,
+    $font-family,
+    $default-typography
+) {
+    $custom-typography: $default-typography;
+
+    @if $base-font-size {
+        $custom-typography: mat-typography-config(
+            $display-4:     mat-typography-level(8rem, 8rem, 300),
+            $display-3:     mat-typography-level(4rem, 4rem, 400),
+            $display-2:     mat-typography-level(3.21rem, 3.21rem, 400),
+            $display-1:     mat-typography-level(2.42rem, 2.85rem, 400),
+            $headline:      mat-typography-level(1.71rem, 2.28rem, 400),
+            $title:         mat-typography-level(1.42rem, 2.28rem, 500),
+            $subheading-2:  mat-typography-level(1.14rem, 2rem, 400),
+            $subheading-1:  mat-typography-level(1.07rem, 1.71rem, 400),
+            $body-2:        mat-typography-level(1rem, 1.71rem, 500),
+            $body-1:        mat-typography-level(1rem, 1.42rem, 400),
+            $caption:       mat-typography-level(0.86rem, 1.42rem, 400),
+            $button:        mat-typography-level(1rem, 1rem, 500),
+            $font-family:   $default-font-family,
+            $input:         mat-typography-level(1.14em, 1.25, 400)
+        );
+    }
+
+    @if $font-family {
+        @each $key, $level in $custom-typography {
+            @if (type-of($level) == 'map') {
+                $new-level: map-merge($level, (font-family: $font-family));
+                $custom-typography: map-merge($custom-typography, ($key: $new-level));
+            }
+        }
+
+        $custom-typography: map-merge($custom-typography, (font-family: $font-family));
+    }
+
+    @return $custom-typography;
+};
+
+@function get-custom-adf-font-sizes() {
+    @return (
+        'theme-adf-icon-1-font-size': 1.2rem,
+        'theme-adf-picture-1-font-size': 1.28rem,
+        'theme-adf-task-footer-font-size': 1.28rem,
+        'theme-adf-task-title-font-size': 1.28rem
+    )
+};
+
+@mixin base-font-size($font-size) {
+    html, body {
+        font-size: $font-size !important;
+    }
+};
+
+@mixin base-font-family($font-family) {
+    html, body {
+        font-family: $font-family !important;
+    }
+};

app/src/app/ui/theme.scss

@@ -1,8 +1,10 @@
 @import '~@angular/material/theming';
 @import '~@alfresco/adf-core/theming';
-@import 'custom-theme';
 
-@include mat-core($alfresco-typography);
+@import 'custom-theme';
+@import 'variables/variables';
+
+@include custom-theme($custom-theme);
 
 // fixes [ACA-2069]
 $primary: map-get($custom-theme, primary);
@@ -16,4 +18,6 @@ $primary: map-get($custom-theme, primary);
   }
 }
 
-@include custom-theme($custom-theme);
+.mat-toolbar {
+  color: var(--theme-text-color, rgba(0, 0, 0, 0.54));
+}

app/src/app/ui/variables/font-family.scss

@@ -0,0 +1 @@
+$default-font-family: "Muli", "Helvetica", "Arial", sans-serif;

app/src/app/ui/variables/variables.scss

@@ -0,0 +1,62 @@
+$warn: map-get($custom-theme, warn);
+$accent: map-get($custom-theme, accent);
+$primary: map-get($custom-theme, primary);
+
+$foreground: map-get($custom-theme, foreground);
+$background: map-get($custom-theme, background);
+
+//Custom variables - ACA specific styling:
+$document-list-selection-color: mat-color($alfresco-ecm-blue, 500);
+$document-list-background: white;
+$data-table-dividers-wrapper-border: none;
+$data-table-thumbnail-width: 35px;
+$data-table-cell-min-width: 150px;
+$data-table-cell-min-width--no-grow: 120px;
+$data-table-cell-min-width--fileSize: 110px !important;
+$data-table-cell-text-color: mat-color($foreground, text, 0.54);
+$data-table-cell-link-color: mat-color($foreground, text);
+$data-table-hover-color: #e3fafd;
+$data-table-selection-color: #e3fafd;
+
+$adf-pagination--border: 1px solid mat-color($foreground, text, 0.07);
+$adf-pagination__empty--height: 0;
+
+$adf-toolbar-single-row-height: 48px;
+$adf-toolbar-padding: 14px;
+
+$adf-upload-dragging-color: unset;
+$adf-upload-dragging-border: 1px solid #00bcd4;
+$adf-upload-dragging-background: #e0f7fa;
+$adf-upload-dragging-level1-color: unset;
+$adf-upload-dragging-level1-border: none;
+
+$adf-permission-list-width: 100%;
+
+$defaults: (
+  --theme-primary-color: mat-color($primary),
+  --theme-primary-color-default-contrast: mat-color($primary, default-contrast),
+  --theme-warn-color: mat-color($warn),
+  --theme-accent-color: mat-color($accent),
+  --theme-background-color: mat-color($background, background),
+  --theme-text-color: mat-color($foreground, text, 0.54),
+  --theme-text-bold-color: mat-color($foreground, text, 0.87),
+  --theme-title-color: mat-color($foreground, text, 0.87),
+  --theme-text-disabled-color: mat-color($foreground, text, 0.38),
+  --theme-border-color: mat-color($foreground, text, 0.07),
+  --header-background-image: url('/assets/images/mastHead-bg-shapesPattern.svg'),
+  --theme-card-background-color: mat-color($background, card),
+  --theme-foreground-text-color: mat-color($foreground, text, 0.72),
+  --theme-foreground-text-bold-color: mat-color($foreground, text, 0.87),
+  --theme-secondary-text-color: mat-color($foreground, secondary-text),
+  --theme-divider-color: mat-color($foreground, divider, 0.07),
+  --theme-dialog-background-color: mat-color($background, dialog),
+
+  --new-button-font-size: 0.9rem,
+);
+
+// propagates SCSS variables into the CSS variables scope
+:root {
+  @each $name, $value in $defaults {
+    #{$name}: #{$value};
+  }
+}

app/src/styles.scss

@@ -1,11 +1,12 @@
 /* You can add global styles to this file, and also import other style files */
 @import '~@alfresco/adf-core/prebuilt-themes/adf-blue-orange.css';
 @import 'app/ui/application';
+@import './app/ui/variables/font-family';
 
 body,
 html {
   height: 100%;
-  font-family: 'Muli', 'Helvetica', 'Arial', sans-serif !important;
+  font-family: $default-font-family;
 }
 
 body {

projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss

@@ -8,7 +8,7 @@
     align-items: center;
     flex: 0 0 65px;
     flex-basis: 48px;
-    background: #fafafa;
+    background: var(--theme-background-color);
     border-bottom: 1px solid var(--theme-border-color, rgba(0, 0, 0, 0.07));
     padding: 0 24px;
   }

projects/aca-shared/store/src/selectors/app.selectors.ts

@@ -33,6 +33,7 @@ export const getHeaderTextColor = createSelector(selectApp, (state) => state.hea
 export const getAppName = createSelector(selectApp, (state) => state.appName);
 export const getLogoPath = createSelector(selectApp, (state) => state.logoPath);
 export const getCustomCssPath = createSelector(selectApp, (state) => state.customCssPath);
+export const getCustomWebFontPath = createSelector(selectApp, (state) => state.webFontPath);
 export const getHeaderImagePath = createSelector(selectApp, (state) => state.headerImagePath);
 export const getUserProfile = createSelector(selectApp, (state) => state.user);
 export const getCurrentFolder = createSelector(selectApp, (state) => state.navigation.currentFolder);

projects/aca-shared/store/src/states/app.state.ts

@@ -32,6 +32,7 @@ export interface AppState {
   headerTextColor: string;
   logoPath: string;
   customCssPath: string;
+  webFontPath: string;
   headerImagePath: string;
   sharedUrl: string;
   currentNodeVersion: VersionEntry;