[ACA-2695] Change and refactor theme (#1375)

src/app/ui/application.scss

@@ -1,7 +1,7 @@
 @import 'mixins';
 @import 'theme';
 
-$foreground: map-get($theme, foreground);
+$foreground: map-get($custom-theme, foreground);
 
 html,
 body {

src/app/ui/colors.scss

@@ -0,0 +1,98 @@
+$aca-primary-blue: (
+  50: #e0ebf6,
+  100: #b3ccea,
+  200: #80aadc,
+  300: #4d88cd,
+  400: #266fc3,
+  500: #0055b8,
+  600: #004eb1,
+  700: #0044a8,
+  800: #003ba0,
+  900: #002a91,
+  A100: #0055b8,
+  A200: #0a1f8f,
+  A400: #2a7de1,
+  A700: #00c1de,
+  contrast: (
+    50: #000000,
+    100: #000000,
+    200: #000000,
+    300: #ffffff,
+    400: #ffffff,
+    500: #ffffff,
+    600: #ffffff,
+    700: #ffffff,
+    800: #ffffff,
+    900: #ffffff,
+    A100: #ffffff,
+    A200: #ffffff,
+    A400: #ffffff,
+    A700: #000000
+  )
+);
+
+$aca-accent-green: (
+  50: #e7f3e7,
+  100: #c2e1c2,
+  200: #9acd9a,
+  300: #72b971,
+  400: #53aa52,
+  500: #359b34,
+  600: #30932f,
+  700: #288927,
+  800: #227f21,
+  900: #166d15,
+  A100: #359b34,
+  A200: #00754a,
+  A400: #76bc21,
+  A700: #c2e76b,
+  contrast: (
+    50: #000000,
+    100: #000000,
+    200: #000000,
+    300: #000000,
+    400: #000000,
+    500: #ffffff,
+    600: #ffffff,
+    700: #ffffff,
+    800: #ffffff,
+    900: #ffffff,
+    A100: #ffffff,
+    A200: #ffffff,
+    A400: #000000,
+    A700: #000000
+  )
+);
+
+$aca-warn: (
+  50: #f6e1e5,
+  100: #eab5bf,
+  200: #dc8495,
+  300: #cd526a,
+  400: #c32d4a,
+  500: #b8082a,
+  600: #b10725,
+  700: #a8061f,
+  800: #a00419,
+  900: #91020f,
+  A100: #b8082a,
+  A200: #db0f36,
+  A400: #ff5252,
+  A700: #ff8a80,
+  contrast: (
+    50: #000000,
+    100: #000000,
+    200: #000000,
+    300: #ffffff,
+    400: #ffffff,
+    500: #ffffff,
+    600: #ffffff,
+    700: #ffffff,
+    800: #ffffff,
+    900: #ffffff,
+    A100: #ffffff,
+    A200: #ffffff,
+    A400: #ffffff,
+    A700: #000000
+  )
+);

src/app/ui/custom-theme.scss

@@ -16,46 +16,18 @@
 @import './overrides/adf-style-fixes.theme';
 
 @import 'snackbar';
-
+@import 'colors';
-$grey-scale: (
-  50: #e0e0e0,
-  100: #b3b3b3,
-  200: #808080,
-  300: #4d4d4d,
-  400: #262626,
-  500: #000000,
-  600: #000000,
-  700: #000000,
-  800: #000000,
-  900: #000000,
-  A100: #a6a6a6,
-  A200: #8c8c8c,
-  A400: #737373,
-  A700: #666666,
-  contrast: (
-    50: #000000,
-    100: #000000,
-    200: #000000,
-    300: #ffffff,
-    400: #ffffff,
-    500: #ffffff,
-    600: #ffffff,
-    700: #ffffff,
-    800: #ffffff,
-    900: #ffffff,
-    A100: #000000,
-    A200: #000000,
-    A400: #ffffff,
-    A700: #ffffff
-  )
-);
 
 @include mat-core();
 
-$custom-theme-primary: mat-palette($grey-scale, A400);
+$custom-theme-primary: mat-palette($aca-primary-blue, A100);
-$custom-theme-accent: mat-palette($alfresco-accent-orange);
+$custom-theme-accent: mat-palette($aca-accent-green, A200);
-$custom-theme-warn: mat-palette($alfresco-warn);
+$custom-theme-warn: mat-palette($aca-warn, A100);
-$custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent);
+$custom-theme: mat-light-theme(
+  $custom-theme-primary,
+  $custom-theme-accent,
+  $custom-theme-warn
+);
 $foreground: map-get($custom-theme, foreground);
 $warn: map-get($custom-theme, warn);
 
@@ -74,6 +46,10 @@ $warn: map-get($custom-theme, warn);
   @include app-create-menu-theme($theme);
   @include adf-style-fixes($theme);
 
+  @include angular-material-theme($theme);
+  @include adf-content-services-theme($theme);
+  @include adf-core-theme($theme);
+
   .mat-toolbar {
     color: var(--theme-text-color, rgba(0, 0, 0, 0.54));
   }

src/app/ui/theme.scss

@@ -7,18 +7,8 @@
 
 @include mat-core($alfresco-typography);
 
-$primary: mat-palette($alfresco-accent-orange);
-$accent: mat-palette($alfresco-ecm-blue);
-$warn: mat-palette($alfresco-warn);
-$theme: mat-light-theme($primary, $accent, $warn);
-
-@include angular-material-theme($theme);
-
-@include adf-content-services-theme($theme);
-@include adf-core-theme($theme);
-
 // fixes [ACA-2069]
-$primary: map-get($theme, primary);
+$primary: map-get($custom-theme, primary);
 .mat-slide-toggle.mat-primary.mat-checked:not(.mat-disabled) {
   .mat-slide-toggle-thumb,
   .mat-slide-toggle-ripple .mat-ripple-element {