[ACS-9670] Add white background to login screen (#4589)

* [ACS-9670] Add white background to login screen

* [ACS-9670] Move white color to separate variable

* [ACS-9670] Add missing change

app/src/app/components/login/app-login.component.ts

@@ -31,6 +31,13 @@ import { AppSettingsService } from '@alfresco/aca-shared';
   standalone: true,
   imports: [LoginComponent, TranslateModule],
   templateUrl: './app-login.component.html',
+  styles: [
+    `
+      .adf-login {
+        background-color: var(--theme-white-background);
+      }
+    `
+  ],
   encapsulation: ViewEncapsulation.None
 })
 export class AppLoginComponent {

projects/aca-content/src/lib/components/knowledge-retrieval/search-ai/search-ai-results/search-ai-results.component.scss

@@ -8,7 +8,7 @@
       align-items: center;
       height: 100%;
       width: 100%;
-      background-color: white;
+      background-color: var(--theme-white-background);
       border-top: 1px solid var(--theme-grey-background-color);
       padding-top: 28px;
 

projects/aca-content/src/lib/components/view-profile/view-profile.component.scss

@@ -93,7 +93,7 @@ app-view-profile {
       height: 30px;
       margin: 1rem;
       margin-left: 0.5rem;
-      color: white;
+      color: var(--theme-white-background);
       background-color: var(--theme-blue-button-color);
       font-weight: 600;
     }

projects/aca-content/src/lib/ui/overrides/ay11.scss

@@ -63,7 +63,7 @@
     }
 
     &:focus-visible {
-      background-color: white;
+      background-color: var(--theme-white-background);
 
       .mdc-list-item__content {
         @include mixins.rounded-border;
@@ -95,11 +95,11 @@
       &:focus-visible {
         @include mixins.rounded-border;
 
-        background-color: white;
+        background-color: var(--theme-white-background);
       }
 
       &.cdk-keyboard-focused:not([disabled]) {
-        background-color: white;
+        background-color: var(--theme-white-background);
       }
     }
   }
@@ -199,12 +199,12 @@
       &:focus-visible {
         @include mixins.rounded-border;
 
-        background-color: white;
+        background-color: var(--theme-white-background);
       }
     }
 
     &.cdk-keyboard-focused:not([aria-disabled='true']) {
-      background-color: white;
+      background-color: var(--theme-white-background);
 
       @include mixins.rounded-border;
     }
@@ -215,7 +215,7 @@
 
     .mat-mdc-simple-snack-bar,
     .mat-mdc-snack-bar-action {
-      color: white;
+      color: var(--theme-white-background);
     }
   }
 

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

@@ -239,16 +239,16 @@ mat-toolbar#{ms.$mat-toolbar}#{ms.$mat-toolbar-single-row} {
 
 mat-snack-bar-container {
   #{ms.$mat-button}#{ms.$mat-unthemed} {
-    --mdc-text-button-label-text-color: #fff;
+    --mdc-text-button-label-text-color: var(--theme-white-background);
   }
 }
 
 .adf-warning-snackbar,
 .adf-info-snackbar,
 .adf-error-snackbar {
-  --mat-mdc-snack-bar-button-color: #fff;
+  --mat-mdc-snack-bar-button-color: var(--theme-white-background);
-  --mdc-snackbar-supporting-text-color: #fff;
+  --mdc-snackbar-supporting-text-color: var(--theme-white-background);
-  --mdc-text-button-label-text-color: #fff;
+  --mdc-text-button-label-text-color: var(--theme-white-background);
 }
 
 .adf-warning-snackbar {

projects/aca-content/src/lib/ui/variables/variables.scss

@@ -34,7 +34,7 @@ $theme-dropdown-background-hover: darken($background-color, 10%);
 $grey-divider: rgba(0, 0, 0, 0.22);
 $datetimepicker-font-color: rgba(black, 0.87);
 $datetimepicker-selected-date-background: #2254b2;
-$datetimepicker-cell-background-color: #fff;
+$white-background: #fff;
 $datetimepicker-cell-focus-border-color: #1f74db;
 $sidenav-background-color: $background-color;
 $selected-text-color: #212121;
@@ -92,7 +92,7 @@ $defaults: (
   --theme-about-panel-title-color: mat.m2-get-color-from-palette($foreground, text),
   --theme-datetimepicker-font-color: $datetimepicker-font-color,
   --theme-datetimepicker-selected-date-background: $datetimepicker-selected-date-background,
-  --theme-datetimepicker-cell-background: $datetimepicker-cell-background-color,
+  --theme-white-background: $white-background,
   --theme-datetimepicker-cell-focus-border: $datetimepicker-cell-focus-border-color,
   --theme-sidenav-background-color: $sidenav-background-color,
   --theme-selected-text-color: $selected-text-color,

projects/aca-shared/src/lib/components/open-in-app/open-in-app.component.scss

@@ -11,7 +11,7 @@ aca-open-in-app {
       height: 48px;
       overflow-x: hidden;
       font-size: 16px;
-      color: white;
+      color: var(--theme-white-background);
       font-weight: 600;
 
       &:focus-visible {