Feature/restore colors in autocomplete and datepicker components (#5435)

apps/client/src/styles/theme.scss

@@ -158,6 +158,12 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
 
   @include mat.all-component-themes($gf-theme-default);
 
+  @include mat.autocomplete-overrides(
+    (
+      background-color: var(--light-background)
+    )
+  );
+
   @include mat.button-overrides(
     (
       outlined-label-text-color: var(--dark-primary-text),
@@ -173,6 +179,12 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
     )
   );
 
+  @include mat.datepicker-overrides(
+    (
+      calendar-container-background-color: var(--light-background)
+    )
+  );
+
   @include mat.dialog-overrides(
     (
       container-color: var(--light-background)
@@ -271,6 +283,18 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
     )
   );
 
+  @include mat.datepicker-overrides(
+    (
+      calendar-container-elevation-shadow: var(
+          --mat-select-container-elevation-shadow
+        ),
+      calendar-date-selected-state-background-color: var(--gf-theme-primary-500),
+      calendar-date-today-selected-state-outline-color: var(
+          --gf-theme-primary-500
+        )
+    )
+  );
+
   @include mat.dialog-overrides(
     (
       container-max-width: 80vw,