Merge pull request #5719 from IgniteUI/fix-fluent-calendar

fix(calendar): Make the fluent calendar to work with the new range selection

Author: Lipata

projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss

@@ -64,6 +64,10 @@
         @extend %cal-value--current !optional;
     }
 
+    @include e(date, $mods: ('selected', 'current')) {
+        @extend %cal-value--current--selected !optional;
+    }
+
     @include e(date, 'weekend') {
         @extend %cal-value !optional;
         @extend %cal-value--weekend !optional;

projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss

@@ -295,6 +295,17 @@
     $cal-row-margin: em(2px) 0;
     $selected-hover-color: text-contrast(map-get($theme, 'date-selected-background'));
 
+    $current-color-variant: map-get((
+        material: --var($theme, 'date-selected-background'),
+        fluent:--var($theme, 'date-current-bg-color')
+    ), map-get($theme, variant));
+
+    $current-text-color-variant: map-get((
+        material: --var($theme, 'date-selected-text-color'),
+        fluent:--var($theme, 'date-current-text-color')
+    ), map-get($theme, variant));
+
+
     %cal-display {
         display: flex;
         flex-flow: column nowrap;
@@ -361,7 +372,7 @@
         }
 
         [dir='rtl'] & {
-            transform: scaleX(-1);
+            transform: scaleX(-1)
         }
     }
 
@@ -418,10 +429,10 @@
         justify-content: center;
         align-items: center;
         flex-grow: 1;
+        flex-basis: 14.28%;
         color: --var($theme, 'content-text-color');
         cursor: pointer;
         outline: none;
-        flex-basis: 14.28%;
         // transition: background .15s ease-out;
 
         &:hover,
@@ -518,20 +529,6 @@
         color: --var($theme, 'inactive-text-color');
     }
 
-    %cal-value--current {
-        color: --var($theme, 'date-current-text-color');
-        background: --var($theme, 'date-current-bg-color')!important;
-        font-weight: $cal-value-fw !important;
-
-        &:hover {
-            background: --var($theme, 'date-current-bg-color')!important;
-        }
-
-        &:focus {
-            background: --var($theme, 'date-current-bg-color')!important;
-        }
-    }
-
     %cal-value--special {
         %cal-value-content {
             background: --var($theme, 'date-special-background');
@@ -550,6 +547,37 @@
         }
     }
 
+    %cal-value--current {
+        %cal-value-content {
+            color: --var($theme, 'date-current-text-color');
+            font-weight: $cal-value-fw ;
+            background: --var($theme, 'date-current-bg-color');
+
+            &:hover {
+                background: --var($theme, 'date-current-bg-color');
+            }
+
+            &:focus {
+                background: --var($theme, 'date-current-bg-color');
+            }
+        }
+    }
+
+    %cal-value--current--selected {
+        %cal-value-content {
+            color: $current-text-color-variant;
+            background: $current-color-variant;
+
+            &:hover {
+                background: $current-color-variant;
+            }
+
+            &:focus {
+                background: $current-color-variant;
+            }
+        }
+    }
+
     %cal-value--disabled {
         pointer-events: none;
         cursor: not-allowed;

projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss

@@ -48,6 +48,7 @@
 
         %cal-value {
             color: --var($theme, 'content-text-color');
+            flex-basis: 14.28%;
         }
 
         %cal-value--label {

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_calendar.scss

@@ -41,6 +41,7 @@
 $_light-calendar: extend(
     $_default-shape-calendar,
     (
+        variant: 'material',
         content-background: (
             igx-color: 'surface'
         ),
@@ -125,8 +126,13 @@ $_light-calendar: extend(
         ),
 
         date-current-bg-color: transparent,
-        date-current-bg-hover-color: transparent,
-        date-current-bg-focus-color: transparent,
+
+        date-current-bg-hover-color: (
+            igx-contrast-color: ('secondary', 500)
+        ),
+        date-current-bg-focus-color: (
+            igx-contrast-color: ('secondary', 500)
+        ),
 
         date-hover-background: (
             igx-color: ('grays', 200)
@@ -170,6 +176,7 @@ $_fluent-calendar: extend(
     $_light-calendar,
     $_fluent-shape-calendar,
     (
+        variant: 'fluent',
         date-current-text-color: #fff,
 
         date-current-bg-color: (