[AAE-16219] Theming for HxP is not working (#8894)

Alfresco · Sep 8, 2023 · a1b39fb · a1b39fb
1 parent ce881b7
commit a1b39fb
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 31 deletions.
diff --git a/lib/core/custom-theme/material-theme.scss b/lib/core/custom-theme/material-theme.scss
@@ -22,3 +22,17 @@ $custom-theme: mat-light-theme(
 @if $text-color {
     $custom-theme: get-custom-text-color($text-color, $custom-theme);
 }
+
+@if $base-font-size {
+    body,
+    html {
+        font-size: $base-font-size;
+    }
+}
+
+@if $font-family {
+    body,
+    html {
+        font-family: $font-family;
+    }
+}
diff --git a/lib/core/custom-theme/theme/custom-palette-creator.scss b/lib/core/custom-theme/theme/custom-palette-creator.scss
@@ -1,7 +1,6 @@
 @use 'sass:map';
 @use 'sass:math';
 @use 'sass:color';
-@use '../../colors';
 
 @function multiply($fore, $back) {
     $red: color.red($back) * color.red($fore) / 255;

diff --git a/lib/core/custom-theme/theme/custom-theme-palettes.scss b/lib/core/custom-theme/theme/custom-theme-palettes.scss
@@ -1,5 +1,5 @@
 @use '@angular/material' as mat;
-@import '../../colors';
+@import './default-colors.scss';
 @import './custom-palette-creator.scss';
 
 @function get-mat-palettes($primary-color, $accent-color) {
@@ -9,7 +9,7 @@
         $custom-theme-primary-palette: create-color-palette($primary-color, 'primary');
         $mat-primary-palette: mat.define-palette($custom-theme-primary-palette, 500);
     } @else {
-        $mat-primary-palette: mat.define-palette($aca-primary-blue, A100);
+        $mat-primary-palette: mat.define-palette($default-primary, A100);
     }
 
     $mat-accent-palette: null;
@@ -18,14 +18,14 @@
         $custom-theme-accent-palette: create-color-palette($accent-color, 'accent');
         $mat-accent-palette: mat.define-palette($custom-theme-accent-palette, 500);
     } @else {
-        $mat-accent-palette: mat.define-palette($aca-accent-green, A200);
+        $mat-accent-palette: mat.define-palette($default-accent);
     }
 
-    $mat-warn-palette: mat.define-palette($aca-warn, A100);
+    $mat-warn-palette: mat.define-palette($default-warn, A100);
 
     @return (
         primary: $mat-primary-palette,
         accent: $mat-accent-palette,
         warning: $mat-warn-palette,
-    )
+    );
 }
diff --git a/lib/core/custom-theme/theme/default-colors.scss b/lib/core/custom-theme/theme/default-colors.scss
@@ -0,0 +1,26 @@
+/*
+    This file can be replaced by file with your default palettes.
+
+    In order to generate material theme, we need to provide three palettes, 'primary', 'accent' and 'warnign'.
+    If user would like to dynamically create only one palette, e.g. 'primary', in that case we need to provide
+    remaining palettes.
+
+    e.g.
+
+    @use '@angular/material' as mat;
+
+    $default-primary: mat.$indigo-palette;
+    $default-accent: $my-custom-palette;
+    $default-warn: (
+        50: #35041e,
+        100: #dd68a8,
+        contrast: (
+            ...
+        ),
+*/
+
+@use '@angular/material' as mat;
+
+$default-primary: mat.$indigo-palette;
+$default-accent: mat.$pink-palette;
+$default-warn: mat.$red-palette;
diff --git a/lib/core/custom-theme/theme/theme-configuration.scss.tpl b/lib/core/custom-theme/theme/theme-configuration.scss.tpl
@@ -1,14 +1,20 @@
 /*
-Specify theme parameters e.g.:
-
-$theme-config: (
-    primaryColor: #5175d2,
-    backgroundColor: #FAFAFA,
-    textColor: #793942,
-    accentColor: #C64F73,
-    baseFontSize: 26px,
-    fontFamily: Cursive
-);
+    Replace 'THEME_CONFIGURATION' placeholder with your theme configuration using '$theme-config' variable map.
+
+    Specify colors for palettes generation, e.g. if for 'primaryColor' the color is going to be 'red'(#fc0313).
+    Then, we are going to generate 'primary' palette based on the 'red' color.
+    Geenerated pallete is going to be used to create material design theme
+
+    e.g.
+
+    $theme-config: (
+        primaryColor: #5175d2,
+        backgroundColor: #FAFAFA,
+        textColor: #793942,
+        accentColor: #C64F73,
+        baseFontSize: 26px,
+        fontFamily: Cursive
+    );
 */
 
 ${THEME_CONFIGURATION}
diff --git a/lib/core/custom-theme/theme/typography.scss b/lib/core/custom-theme/theme/typography.scss
@@ -1,6 +1,6 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
-@import "../variables/font-family.scss";
+@import '../variables/font-family';
 
 @function get-mat-typography($base-font-size, $font-family) {
     $custom-typography: mat.define-typography-config(
@@ -77,17 +77,3 @@
         '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;
-    }
-}