[AAE-11496] Move 'content-plugin' to projects folder as 'aca-content' (#2817)

* [AAE-11496] Move content-plugin to projects

* Fix unit test

projects/aca-content/src/lib/ui/dynamic-theme/custom-background-color.scss

@@ -0,0 +1,16 @@
+@function get-custom-background-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;
+}

projects/aca-content/src/lib/ui/dynamic-theme/custom-palette-creator.scss

@@ -0,0 +1,138 @@
+@use "sass:math";
+
+@function multiply($fore, $back) {
+    $red: red($back) * red($fore) / 255;
+    $green: green($back) * green($fore) / 255;
+    $blue: blue($back) * blue($fore) / 255;
+
+    @return rgb($red, $green, $blue);
+}
+
+@function getColorLuminance($color) {
+  $colors: (
+    'red': red($color),
+    'green': green($color),
+    'blue': blue($color)
+  );
+
+  @each $name, $value in $colors {
+    $adjusted: 0;
+    $value: $value / 255;
+
+    @if $value < 0.03928 {
+      $value: $value / 12.92;
+    } @else {
+      $value: ($value + .055) / 1.055;
+      $value: math.pow($value, 2.4);
+    }
+
+    $colors: map-merge($colors, ($name: $value));
+  }
+
+  @return (map-get($colors, 'red') * .2126) + (map-get($colors, 'green') * .7152) + (map-get($colors, 'blue') * .0722);
+}
+
+@function createTextColor($color, $colorType: 'primary') {
+    $red: red($color);
+    $green: green($color);
+    $blue: blue($color);
+
+    $lightText: $light-primary-text;
+    $darkText: $dark-primary-text;
+
+    @if ($colorType == 'accent') {
+        $lightText: $light-secondary-text;
+        $darkText: $dark-secondary-text;
+    }
+
+    $lightTextLuminance: getColorLuminance($lightText);
+    $darkTextLuminance: getColorLuminance($darkText);
+    $backgroundColorLuminance: getColorLuminance($color);
+
+    $lightTextLuminance: $lightTextLuminance + 0.5;
+    $darkTextLuminance: $darkTextLuminance + 0.5;
+    $backgroundColorLuminance: $backgroundColorLuminance + 0.5;
+
+    $luminanceContrastForLightText: $lightTextLuminance / $backgroundColorLuminance;
+    $luminanceContrastForDarkText: $backgroundColorLuminance / $darkTextLuminance;
+
+    $textColour: $lightText;
+
+    @if ($luminanceContrastForDarkText > $luminanceContrastForLightText) {
+        $textColour: $darkText;
+    }
+
+    @return $textColour;
+}
+
+@function createColorPalette($color, $colorType: 'primary') {
+    $light: #fff;
+    $dark: multiply($color, $color);
+
+    $color50:  mix($light, $color, 88%);
+    $color100:  mix($light, $color, 70%);
+    $color200:  mix($light, $color, 50%);
+    $color300:  mix($light, $color, 30%);
+    $color400:  mix($light, $color, 15%);
+    $color500:  mix($light, $color, 0%);
+    $color600:  mix($dark, $color, 13%);
+    $color700:  mix($dark, $color, 30%);
+    $color800:  mix($dark, $color, 46%);
+    $color900:  mix($dark, $color, 75%);
+
+    $colorA100: lighten(saturate(mix($dark, $color, 15%), 80%), 45.6%);
+    $colorA200: lighten(saturate(mix($dark, $color, 15%), 80%), 35.6%);
+    $colorA400: lighten(saturate(mix($dark, $color, 15%), 100%), 25.6%);
+    $colorA700: lighten(saturate(mix($dark, $color, 15%), 100%), 20.5%);
+
+    $contrast50: createTextColor($color50, $colorType);
+    $contrast100: createTextColor($color100, $colorType);
+    $contrast200: createTextColor($color200, $colorType);
+    $contrast300: createTextColor($color300, $colorType);
+    $contrast400: createTextColor($color400, $colorType);
+    $contrast500: createTextColor($color500, $colorType);
+    $contrast600: createTextColor($color600, $colorType);
+    $contrast700: createTextColor($color700, $colorType);
+    $contrast800: createTextColor($color800, $colorType);
+    $contrast900: createTextColor($color900, $colorType);
+
+    $contrastA100: createTextColor($colorA100, $colorType);
+    $contrastA200: createTextColor($colorA200, $colorType);
+    $contrastA400: createTextColor($colorA400, $colorType);
+    $contrastA700: createTextColor($colorA700, $colorType);
+
+    $palette: (
+        50: $color50,
+        100: $color50,
+        200: $color50,
+        300: $color50,
+        400: $color400,
+        500: $color500,
+        600: $color600,
+        700: $color700,
+        800: $color800,
+        900: $color900,
+        A100: $colorA100,
+        A200: $colorA200,
+        A400: $colorA400,
+        A700: $colorA700,
+        contrast: (
+            50: $contrast50,
+            100: $contrast100,
+            200: $contrast200,
+            300: $contrast300,
+            400: $contrast400,
+            500: $contrast500,
+            600: $contrast600,
+            700: $contrast700,
+            800: $contrast800,
+            900: $contrast900,
+            A100: $contrastA100,
+            A200: $contrastA200,
+            A400: $contrastA400,
+            A700: $contrastA700
+        )
+    );
+
+    @return $palette;
+}

projects/aca-content/src/lib/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;
+}

projects/aca-content/src/lib/ui/dynamic-theme/custom-theme-palettes.scss

@@ -0,0 +1,29 @@
+@use '@angular/material' as mat;
+@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.define-palette($custom-theme-primary-palette, 500);
+    } @else {
+        $mat-primary-palette: mat.define-palette($aca-primary-blue, A100);
+    }
+
+    $mat-accent-palette: null;
+    @if $accent-color {
+        $custom-theme-accent-palette: createColorPalette($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-warn-palette: mat.define-palette($aca-warn, A100);
+
+    @return (
+        primary: $mat-primary-palette,
+        accent: $mat-accent-palette,
+        warning: $mat-warn-palette,
+    )
+}

projects/aca-content/src/lib/ui/dynamic-theme/custom-theme.scss.tpl

@@ -0,0 +1,60 @@
+@import '@angular/material/theming';
+@import './overrides/adf-style-fixes.theme';
+@import './overrides/adf-pagination.theme';
+@import './overrides/adf-about.theme.scss';
+@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, 'primaryColor');
+$accent-color: map-get($theme-config, 'accentColor');
+$background-color: map-get($theme-config, 'backgroundColor');
+$text-color: map-get($theme-config, 'textColor');
+$base-font-size: map-get($theme-config, 'baseFontSize');
+$font-family: map-get($theme-config, 'fontFamily');
+
+$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),
+);
+
+@if $background-color {
+  $custom-background: get-custom-background-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);
+
+  @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);
+  @include adf-pagination-theme($theme);
+  @include adf-about-theme($theme);
+}

projects/aca-content/src/lib/ui/dynamic-theme/index.scss

@@ -0,0 +1 @@
+@import '../theme.scss';

projects/aca-content/src/lib/ui/dynamic-theme/theme-configuration.scss.tpl

@@ -0,0 +1,14 @@
+/*
+Specify theme parameters e.g.:
+
+$theme-config: (
+    primaryColor: #5175d2,
+    backgroundColor: #FAFAFA,
+    textColor: #793942,
+    accentColor: #C64F73,
+    baseFontSize: 26px,
+    fontFamily: Cursive
+);
+*/
+
+${THEME_CONFIGURATION}

projects/aca-content/src/lib/ui/dynamic-theme/typography.scss

@@ -0,0 +1,63 @@
+@use '@angular/material' as mat;
+@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.define-typography-config(
+            $display-4:     mat.define-typography-level(8rem, 8rem, 300),
+            $display-3:     mat.define-typography-level(4rem, 4rem, 400),
+            $display-2:     mat.define-typography-level(3.21rem, 3.21rem, 400),
+            $display-1:     mat.define-typography-level(2.42rem, 2.85rem, 400),
+            $headline:      mat.define-typography-level(1.71rem, 2.28rem, 400),
+            $title:         mat.define-typography-level(1.42rem, 2.28rem, 500),
+            $subheading-2:  mat.define-typography-level(1.14rem, 2rem, 400),
+            $subheading-1:  mat.define-typography-level(1.07rem, 1.71rem, 400),
+            $body-2:        mat.define-typography-level(1rem, 1.71rem, 500),
+            $body-1:        mat.define-typography-level(1rem, 1.42rem, 400),
+            $caption:       mat.define-typography-level(0.86rem, 1.42rem, 400),
+            $button:        mat.define-typography-level(1rem, 1rem, 500),
+            $font-family:   $default-font-family,
+            $input:         mat.define-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;
+    }
+};