Merge pull request #7816 from IgniteUI/SIvanova/fix-indigo-calendar

fix(calendar): fix indigo calendar disabled days

Author: simeonoff

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

@@ -39,49 +39,38 @@ $_dark-bootstrap-calendar: extend(
 
 /// Generates a dark indigo calendar schema.
 /// @type {Map}
-/// @prop {Map} content-text-color [igx-color: ('grays', 700)] - The main content text color.
-/// @prop {Map} inactive-text-color [igx-contrast-color: ('surface'), rgba: .4] - The text color for previous and next month dates.
-/// @prop {Map} label-color [igx-contrast-color: ('surface'), rgba: .4] - The text color for weekday labels.
-/// @prop {Map} weekend-text-color [igx-contrast-color: ('surface'), rgba: .4] - The text color for weekend days.
-/// @prop {Map} date-current-text-color [igx-contrast-color: ('surface')] - The text color for the current date.
-/// @prop {Color} date-current-bg-color [transparent] - The background color for the current date.
+/// @prop {Map} content-text-color [igx-contrast-color: ('surface')] - The main content text color.
+/// @prop {Map} inactive-text-color [igx-color: ('grays', 700)] - The text color for previous and next month dates.
+/// @prop {Map} label-color [igx-color: ('grays', 700)] - The text color for weekday labels.
+/// @prop {Map} weekend-text-color [igx-color: ('grays', 700)] - The text color for weekend days.
 /// @prop {Map} picker-arrow-color [igx-color: ('grays', 800)] - The idle picker arrow color.
 /// @prop {Map} picker-arrow-hover-color [igx-contrast-color: ('surface')] - The picker hover arrow color.
 /// @prop {Map} picker-text-color [igx-color: ('grays', 800)]- The idle picker month/year color.
 /// @prop {Map} picker-text-hover-color [igx-contrast-color: ('surface')]-  The hover picker month/year color.
-/// @prop {Map} month-hover-text-color [igx-contrast-color: ('surface')] - The month hover text color.
-/// @prop {Map} year-hover-text-color [igx-contrast-color: ('surface')] - The year hover text color.
-/// @prop {Map} year-current-text-color [igx-contrast-color: ('surface')] - The text color for the current/selected year.
-/// @prop {Map} month-current-text-color [igx-contrast-color: ('surface')]- The text color for the current/selected month.
-/// @prop {Map} month-hover-current-text-color [igx-contrast-color: ('surface')]- The text color for the current/selected month on hover.
+/// @prop {Map} month-hover-text-color [igx-color: ('primary', 300)] - The month hover text color.
+/// @prop {Map} year-hover-text-color [igx-color: ('primary', 300)] - The year hover text color.
+/// @prop {Map} year-current-text-color [igx-color: ('primary', 300)] - The text color for the current/selected year.
+/// @prop {Map} month-current-text-color [igx-color: ('primary', 300)]- The text color for the current/selected month.
+/// @prop {Map} month-hover-current-text-color [igx-color: ('primary', 300)]- The text color for the current/selected month on hover.
 /// @requires extend
 /// @requires $_indigo-calendar
 $_dark-indigo-calendar: extend(
     $_indigo-calendar,
     (
         content-text-color: (
-            igx-color: ('grays', 700)
+            igx-contrast-color: ('surface')
         ),
 
         inactive-text-color: (
-            igx-contrast-color: ('surface'),
-            rgba: .4
-        ),
-
-        date-current-text-color: (
-            igx-contrast-color: ('surface')
+            igx-color: ('grays', 700)
         ),
 
-        date-current-bg-color: transparent,
-
         label-color: (
-            igx-contrast-color: ('surface'),
-            rgba: .4
+            igx-color: ('grays', 700)
         ),
 
         weekend-text-color: (
-            igx-contrast-color: ('surface'),
-            rgba: .4
+            igx-color: ('grays', 700)
         ),
 
         picker-arrow-color: (
@@ -101,23 +90,23 @@ $_dark-indigo-calendar: extend(
         ),
 
         month-hover-text-color: (
-            igx-contrast-color: ('surface')
+            igx-color: ('primary', 300)
         ),
 
         year-hover-text-color: (
-            igx-contrast-color: ('surface')
+            igx-color: ('primary', 300)
         ),
 
         month-current-text-color: (
-            igx-contrast-color: ('surface')
+            igx-color: ('primary', 300)
         ),
 
         month-hover-current-text-color: (
-            igx-contrast-color: ('surface')
+            igx-color: ('primary', 300)
         ),
 
         year-current-text-color: (
-            igx-contrast-color: ('surface')
+            igx-color: ('primary', 300)
         )
     )
 );

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

@@ -352,10 +352,16 @@ $_bootstrap-calendar: extend(
 
 /// Generates an indigo calendar schema.
 /// @type {Map}
-/// @prop {Map} date-current-text-color [igx-color: ('primary', 500)] - The text color for the current date.
+/// @prop {Map} content-text-color [igx-color: ('grays', 900)] - The main content text color.
+/// @prop {Map} date-current-text-color [igx-color: ('primary', 300)] - The text color for the current date.
 /// @prop {Color} date-current-bg-color [transparent] - The background color for the current date.
 /// @prop {map} date-selected-background [igx-color: ('primary', 500)] - The background color for the selected date.
 /// @prop {Map} date-selected-text-color [igx-contrast-color: ('primary', 500)] - The text color for the selected date.
+/// @prop {Map} date-disabled-text-color [igx-color: ('grays', 300)] - The text color for disabled dates.
+/// @prop {Map} inactive-text-color [igx-color: ('grays', 600)] - The text color for previous and next month dates.
+/// @prop {Map} label-color [igx-color: ('grays', 600)] - The text color for weekday labels.
+/// @prop {Map} weekend-text-color [igx-color: ('grays', 600)] - The text color for weekend days.
+/// @prop {Color} month-hover-background [transparent] - The month hover text color.
 /// @prop {Map} month-hover-text-color [igx-color: ('primary', 500)] - The month hover text color.
 ///
 /// @prop {Number} border-radius [3px] - The border radius used for calendar.
@@ -370,8 +376,12 @@ $_indigo-calendar: extend(
     (
         variant: 'indigo-design',
 
+        content-text-color: (
+            igx-color: ('grays', 900)
+        ),
+
         date-current-text-color: (
-            igx-color: ('primary', 500)
+            igx-color: ('primary', 300)
         ),
 
         date-current-bg-color: transparent,
@@ -384,6 +394,24 @@ $_indigo-calendar: extend(
             igx-contrast-color: ('primary', 500)
         ),
 
+        date-disabled-text-color: (
+            igx-color: ('grays', 300),
+        ),
+
+        inactive-text-color: (
+            igx-color: ('grays', 600)
+        ),
+
+        label-color: (
+            igx-color: ('grays', 600)
+        ),
+
+        weekend-text-color: (
+            igx-color: ('grays', 600)
+        ),
+
+        month-hover-background: transparent,
+
         month-hover-text-color: (
             igx-color: ('primary', 500)
         ),