[AAE-6822] Customize background and text colors (#2431)

* [AAE-6822] Customize background and text colors

* [AAE-6822] Quick fix for search control

* Reverted dotenv-expand

app/src/app/components/search/search-input-control/search-input-control.component.scss

@@ -7,6 +7,10 @@ $top-margin: 12px;
   padding-left: 15px;
   box-sizing: border-box;
 
+  .mat-form-field {
+    font-size: 16px;
+  }
+
   .mat-form-field-underline {
     display: none;
   }

app/src/app/ui/dynamic-theme/custom-background-color.scss

@@ -0,0 +1,16 @@
+@function get-custom-backgrond-color($background-color, $theme) {
+    $background: map-get($theme, background);
+
+    $card: map-get($background, card);
+
+    $new-card-color: lighten($background-color, 10%);
+    $new-selected-button: lighten($background-color, 5%);
+
+    $background: map_merge($background, (background: $background-color));
+    $background: map_merge($background, (card: $new-card-color));
+    $background: map_merge($background, (modal: $new-card-color));
+    $background: map_merge($background, (dialog: $new-card-color));
+    $background: map_merge($background, (selected-button: $new-selected-button));
+
+    @return $background;
+}

app/src/app/ui/dynamic-theme/custom-text-color.scss

@@ -0,0 +1,8 @@
+@function get-custom-text-color($text-color, $theme) {
+    $foreground: map-get($custom-theme, foreground);
+
+    $foreground: map_merge($foreground, (text: $text-color));
+    $foreground: map_merge($foreground, (secondary-text: $text-color));
+
+    @return $foreground;
+}

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

@@ -3,9 +3,13 @@
 @import "./dynamic-theme/theme-configuration";
 @import "./dynamic-theme/typography";
 @import "./dynamic-theme/custom-theme-palettes";
+@import "./dynamic-theme/custom-background-color";
+@import "./dynamic-theme/custom-text-color";
 
 $primary-color: map-get($theme-config, 'primary-color');
 $accent-color: map-get($theme-config, 'accent-color');
+$background-color: map-get($theme-config, 'background-color');
+$text-color: map-get($theme-config, 'text-color');
 $base-font-size: map-get($theme-config, 'base-font-size');
 $font-family: map-get($theme-config, 'font-family');
 
@@ -24,6 +28,16 @@ $custom-theme: mat-light-theme(
   map-get($palettes, warning),
 );
 
+@if $background-color {
+  $custom-background: get-custom-backgrond-color($background-color, $custom-theme);
+  $custom-theme: map_merge($custom-theme, (background: $custom-background));
+}
+
+@if $text-color {
+  $custom-foreground: get-custom-text-color($text-color, $custom-theme);
+  $custom-theme: map_merge($custom-theme, (foreground: $custom-foreground));
+}
+
 @mixin custom-theme($theme) {
   @include angular-material-theme($theme);
 

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

@@ -2,11 +2,13 @@
     Specify theme parameters e.g.:
 
     $theme-config: (
-         primary-color: #5a9d6b,
+        primary-color: #5175d2,
-         accent-color: #d14ceb,
+        background-color: #FAFAFA,
-         base-font-size: 20px,
+        text-color: #793942,
-         font-family: Cursive
+        accent-color: #C64F73,
-     );
+        base-font-size: 26px,
+        font-family: Cursive
+    );
 */
 
 ${THEME_CONFIGURATION}

package-lock.json

@@ -7418,9 +7418,9 @@
       "dev": true
     },
     "dotenv-expand": {
-      "version": "8.0.1",
+      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-8.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
-      "integrity": "sha512-j/Ih7bIERDR5PzI89Zu8ayd3tXZ6E3dbY0ljQ9Db0K87qBO8zdLsi2dIvDHMWtjC3Yxb8XixOTHAtia0fDHRpg==",
+      "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
       "dev": true
     },
     "duplexify": {

package.json

@@ -87,7 +87,7 @@
     "connect-history-api-fallback": "^1.6.0",
     "cspell": "^5.16.0",
     "dotenv": "8.2.0",
-    "dotenv-expand": "8.0.1",
+    "dotenv-expand": "^5.1.0",
     "envsub": "^4.0.7",
     "eslint": "^7.6.0",
     "eslint-plugin-import": "^2.25.4",