Merge pull request #7168 from IgniteUI/simeonoff/fix-7167

fix(calendar): add current hover month text color

Author: simeonoff

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

@@ -177,7 +177,7 @@
         &:hover,
         &:focus {
             @extend %cal-value--month-hover !optional;
-            @extend %cal-value--month-current !optional;
+            @extend %cal-value--month-current-hover !optional;
         }
     }
 

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

@@ -35,11 +35,14 @@
 /// @param {Color} $weekend-text-color [null] - The text color for weekend days.
 ///
 /// @param {Color} $year-current-text-color [null] - The text color for the current/selected year.
-/// @param {Color} $month-current-text-color [null]- The text color for the current/selected month.
 ///
-/// @param {Color} $year-hover-text-color [null] - The year hover text color.
+/// @param {Color} $month-current-text-color [null]- The text color for the current/selected month.
+/// @param {Color} $month-hover-current-text-color [null]- The text color for the current/selected month on hover.
 /// @param {Color} $month-hover-text-color [null] - The month hover text color.
 /// @param {Color} $month-hover-background [null] - The month hover background color.
+/// @param {border-radius} $month-border-radius [null] - The border radius used for the outline outline of the month.
+///
+/// @param {Color} $year-hover-text-color [null] - The year hover text color.
 ///
 /// @param {Color} $date-selected-background [null] - The background color for the selected date.
 /// @param {Color} $date-selected-text-color [null] - The text color for the selected date.
@@ -56,7 +59,6 @@
 ///
 /// @param {border-radius} $border-radius [null] - The border radius used for the outline of the calendar.
 /// @param {border-radius} $date-border-radius [null] - The border radius used for the outline outline of the date.
-/// @param {border-radius} $month-border-radius [null] - The border radius used for the outline outline of the month.
 ///
 /// @requires $default-palette
 /// @requires $light-schema
@@ -100,6 +102,7 @@
 
     $year-hover-text-color: null,
     $month-hover-text-color: null,
+    $month-hover-current-text-color: null,
     $month-hover-background: null,
 
     $date-selected-background: null,
@@ -239,17 +242,15 @@
         $date-special-text-color: text-contrast($date-special-background);
     }
 
-    @if $not-bootstrap-theme {
-        @if not($month-hover-text-color) and $content-background{
-            @if type-of($content-background) == 'color' {
-                $month-hover-text-color: text-contrast($content-background);
-            }
+    @if not($month-hover-text-color) and $month-hover-background {
+        @if type-of($month-hover-background) == 'color' {
+            $month-hover-text-color: text-contrast($month-hover-background);
         }
     }
 
-    @if not($month-hover-text-color) and $month-hover-background {
-        @if type-of($month-hover-text-color) == 'color' {
-            $month-hover-text-color: text-contrast($month-hover-background);
+    @if not($month-hover-current-text-color) and $month-hover-background {
+        @if type-of($month-hover-background) == 'color' {
+            $month-hover-current-text-color: text-contrast($month-hover-background);
         }
     }
 
@@ -289,6 +290,7 @@
 
         year-hover-text-color: $year-hover-text-color,
         month-hover-text-color: $month-hover-text-color,
+        month-hover-current-text-color: $month-hover-current-text-color,
         month-hover-background: $month-hover-background,
 
         date-selected-background: $date-selected-background,
@@ -746,6 +748,10 @@
         color: --var($theme, 'month-current-text-color');
     }
 
+    %cal-value--month-current-hover {
+        color: --var($theme, 'month-hover-current-text-color');
+    }
+
     %cal-value--inactive {
         cursor: pointer;
         color: --var($theme, 'inactive-text-color');

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

@@ -26,9 +26,11 @@
 /// @prop {Map} year-current-text-color [igx-color: ('secondary', 500)] - The text color for the current/selected year.
 /// @prop {Map} year-hover-text-color [igx-color: ('secondary', 500)] - The year hover text color.
 ///
-/// @prop {Map} month-current-text-color [igx-color: ('secondary', 500)]- The text color for the current/selected month.
 /// @prop {Map} month-hover-text-color [igx-color: 'surface', text-contrast: ()] - The month hover text color.
 /// @prop {Map} month-hover-background [igx-color: ('grays', 200)] - The month hover text color.
+/// @prop {Map} month-current-text-color [igx-color: ('secondary', 500)]- The text color for the current/selected month.
+/// @prop {Map} month-hover-current-text-color [igx-color: ('secondary', 500)]- The text color for the current/selected month on hover.
+/// @prop {Number} month-border-radius [1] - The border radius fraction, between 0-1 to be used for calendar.
 ///
 /// @prop {Map} date-selected-background [igx-color: ('secondary', 500)] - The background color for the selected date.
 /// @prop {Map} date-selected-text-color [igx-contrast-color: ('secondary', 500)] - The text color for the selected date.
@@ -49,7 +51,6 @@
 ///
 /// @prop {Number} border-radius [.2] - The border radius fraction, between 0-1 to be used for calendar.
 /// @prop {Number} date-border-radius [1] - The border radius fraction, between 0-1 to be used for calendar.
-/// @prop {Number} month-border-radius [1] - The border radius fraction, between 0-1 to be used for calendar.
 /// @requires {function} extend
 /// @requires {map} $_default-shape-calendar
 /// @see $default-palette
@@ -130,6 +131,10 @@ $_light-calendar: extend(
             igx-color: ('secondary', 500)
         ),
 
+        month-hover-current-text-color: (
+            igx-color: ('secondary', 500)
+        ),
+
         year-hover-text-color: (
             igx-color: ('secondary', 500)
         ),
@@ -223,6 +228,7 @@ $_fluent-calendar: extend(
 /// @prop {Map} date-special-background [igx-color: ('warn'), rgba:.5] - The background color used for special dates.
 ///
 /// @prop {Map} month-hover-text-color [igx-color: ('primary', 500)] - The month hover text color.
+/// @prop {Map} month-hover-current-text-color [igx-color: ('primary', 500)] - The current month hover text color.
 /// @prop {Map} month-hover-background [igx-color: ('grays', 100)] - The month hover text color.
 ///
 /// @prop {Map} picker-text-hover-color [igx-color: ('primary', 500)]-  The hover picker month/year color.
@@ -272,6 +278,10 @@ $_bootstrap-calendar: extend(
             igx-color: ('primary', 500)
         ),
 
+        month-hover-current-text-color: (
+            igx-color: ('primary', 500)
+        ),
+
         month-hover-background: (
             igx-color: ('grays', 100)
         ),