[AAE-6826] Create SCSS template (#2385)

* [AAE-6826] Create SCSS template

* [AAE-6826] Revert proper name for colours vars.

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

@@ -25,11 +25,11 @@
 
     &:not(.app-create-menu-secondary-button) {
       background-color: var(--theme-accent-color);
-      color: var(--theme-primary-color-default-contrast);
+      color: var(--theme-accent-color-default-contrast);
       margin-top: 0px;
 
       .mat-icon {
-        color: var(--theme-primary-color-default-contrast);
+        color: var(--theme-accent-color-default-contrast);
       }
     }
   }

app/src/app/components/main-action/main-action.component.scss

@@ -2,7 +2,7 @@
     width: 100%;
     border-radius: 4px;
     background-color: var(--theme-accent-color);
-    color: var(--theme-primary-color-default-contrast);
+    color: var(--theme-accent-color-default-contrast);
 }
 
 .main-action-menu-icon {

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

@@ -0,0 +1,6 @@
+@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,13 +1,15 @@
 @import '~@angular/material/theming';
 @import './overrides/adf-style-fixes.theme';
-@import 'colors';
+@import './custom-theme-palettes';
 
 @include mat-core();
 
-$custom-theme-primary: mat-palette($aca-primary-blue, A100);
+$custom-theme: mat-light-theme(
-$custom-theme-accent: mat-palette($aca-accent-green, A200);
+  $mat-primary-palette,
-$custom-theme-warn: mat-palette($aca-warn, A100);
+  $mat-accent-palette,
-$custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);
+  $mat-warn-palette
+);
+
 $foreground: map-get($custom-theme, foreground);
 $background: map-get($custom-theme, background);
 $warn: map-get($custom-theme, warn);

app/src/app/ui/dynamic-theme/custom-palette-creator.scss

@@ -0,0 +1,138 @@
+@import '~sass-math-pow/sass/index';
+
+@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: poly-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;
+}

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

@@ -0,0 +1,12 @@
+@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/index.scss

@@ -0,0 +1,3 @@
+@use '~@angular/material/theming';
+
+@import '../theme.scss';