From ce29b3660548b904667a20d45e618e06d0c6e5bf Mon Sep 17 00:00:00 2001
From: swapnil-verma-gl <92505353+swapnil-verma-gl@users.noreply.github.com>
Date: Fri, 17 Feb 2023 22:40:35 +0530
Subject: [PATCH] [ACS-4259] Updated CSS rules for DateTimePicker (#2986)

* Updated CSS rules for DateTimePicker to show which date is currently focused on when navigating using the keyboard.

* [ACS-4259] Added variables for CSS colors

* [ACS-4259] Updated CSS color variable names to be more generic and not include the colors themselves.

* [ACS-4259] Added CSS variables for white background used in datetimepicker cell background

* [ACS-4259] Resolved typo

* [ACS-4259] Added CSS variables for datetimepicker cell selected background color and cell focus background color
---
 .../aca-content/src/lib/ui/overrides/ay11.scss     | 14 +++++++++++---
 .../src/lib/ui/variables/variables.scss            | 10 ++++++++++
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/projects/aca-content/src/lib/ui/overrides/ay11.scss b/projects/aca-content/src/lib/ui/overrides/ay11.scss
index 19a06dc87a..17ba333949 100644
--- a/projects/aca-content/src/lib/ui/overrides/ay11.scss
+++ b/projects/aca-content/src/lib/ui/overrides/ay11.scss
@@ -157,13 +157,21 @@
     }
   }
 
+  .mat-datetimepicker-calendar-body-active .mat-datetimepicker-calendar-body-cell-content {
+    outline: 2px solid var(--theme-datetimepicker-cell-focus-border);
+  }
+
   .mat-datetimepicker-calendar-body-active .mat-datetimepicker-calendar-body-cell-content:not(.mat-datetimepicker-calendar-body-selected) {
-    background-color: white !important;
-    outline: 2px solid var(--theme-blue-button-color);
+    background-color: var(--theme-datetimepicker-cell-background) !important;
+  }
+
+  .mat-datetimepicker-calendar-body-active .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected {
+    background-color: var(--theme-datetimepicker-cell-focus-background);
+    color: var(--theme-datetimepicker-font-color);
   }
 
   .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected {
-    background-color: #2254b2;
+    background-color: var(--theme-datetimepicker-selected-date-background);
   }
 
   .mat-expansion-panel .mat-expansion-panel-header {
diff --git a/projects/aca-content/src/lib/ui/variables/variables.scss b/projects/aca-content/src/lib/ui/variables/variables.scss
index 51def246b9..24dbd50686 100644
--- a/projects/aca-content/src/lib/ui/variables/variables.scss
+++ b/projects/aca-content/src/lib/ui/variables/variables.scss
@@ -41,6 +41,11 @@ $black-heading: #4e4c4c;
 $grey-dropdown-background: #eee;
 $grey-divider: rgba(0,0,0,.22);
 $pagination-background-color: #ffffff;
+$datetimepicker-font-color: rgba(black, 0.87);
+$datetimepicker-selected-date-background: #2254b2;
+$datetimepicker-cell-background-color: #ffffff;
+$datetimepicker-cell-focus-border-color: #1F74DB;
+$datetimepicker-cell-focus-background-color: rgba(33, 33, 33, 0.12);
 
 $defaults: (
   --theme-primary-color: mat.get-color-from-palette($primary),
@@ -73,6 +78,11 @@ $defaults: (
   --theme-about-panel-border-color: $grey-background,
   --theme-about-panel-background-color: #ffffff,
   --theme-about-panel-title-color: #212121,
+  --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-datetimepicker-cell-focus-border: $datetimepicker-cell-focus-border-color,
+  --theme-datetimepicker-cell-focus-background: $datetimepicker-cell-focus-background-color
 );
 
 // propagates SCSS variables into the CSS variables scope