igniteui-theming 6.0.0-beta.11 → 6.0.0-beta.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "6.0.0-beta.11",
+  "version": "6.0.0-beta.13",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "index.js",
   "scripts": {

package/sass/themes/schemas/components/dark/_calendar.scss

@@ -11,8 +11,8 @@
 /// @prop {Map} navigation-hover-color [color: ('secondary', 200)] - The :hover color of the icon button responsible for month navigation.
 /// @prop {Map} navigation-focus-color [color: ('secondary', 200)] - The :focus color of the icon button responsible for month navigation.
 /// @prop {Map} date-special-foreground [color: ('secondary', 200)] - The foreground color of a special date.
-/// @prop {Map} date-special-hover-foreground [color: ('secondary', 200)] - The :hover foreground color of a special date.
-/// @prop {Map} date-special-focus-foreground [color: ('secondary', 200)] - The :focus foreground color of a special date.
+/// @prop {Map} date-special-hover-foreground [color: ('secondary', 100)] - The :hover foreground color of a special date.
+/// @prop {Map} date-special-focus-foreground [color: ('secondary', 100)] - The :focus foreground color of a special date.
 /// @prop {Map} date-special-range-foreground [color: ('secondary', 200)] - The foreground color of a special date in a range selection.
 /// @prop {Map} date-special-border-color [color: ('secondary', 200)] - The outline color around a special date.
 /// @prop {Map} date-special-hover-border-color [color: ('secondary', 100)] - The outline color around a special date.
@@ -48,13 +48,13 @@ $dark-material-calendar: extend(
         date-special-hover-foreground: (
             color: (
                 'secondary',
-                200,
+                100,
             ),
         ),
         date-special-focus-foreground: (
             color: (
                 'secondary',
-                200,
+                100,
             ),
         ),
         date-special-range-foreground: (
@@ -205,7 +205,6 @@ $dark-fluent-calendar: extend(
                 200,
             ),
         ),
-
         year-selected-foreground: (
             contrast-color: (
                 'primary',
@@ -391,6 +390,10 @@ $dark-fluent-calendar: extend(
 
 /// Generates a dark bootstrap calendar schema.
 /// @type {Map}
+/// @prop {Map} year-hover-background [color: ('grey', 100)]- The :hover background color of the year in years view.
+/// @prop {Map} year-current-hover-background [color: ('gray' 100)] - The :hover background color of the current year in years view.
+/// @prop {Map} month-hover-background [color: ('grey', 100)]- The :hover background color of the month in months view.
+/// @prop {Map} month-current-hover-background [color: ('gray', 100)] - The :hover background color of the current month in months view.
 /// @prop {Map} date-special-hover-background [color: ('gray', 100)] - The background color of a special date.
 /// @prop {Map} date-special-focus-background [color: ('gray', 100)] - The background color of a special date.
 /// @prop {Map} date-hover-background [color: 'gray', 100] - The :hover background color of a date.
@@ -412,6 +415,30 @@ $dark-fluent-calendar: extend(
 $dark-bootstrap-calendar: extend(
     $bootstrap-calendar,
     (
+        year-hover-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        year-current-hover-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        month-hover-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        month-current-hover-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
         date-special-hover-background: (
             color: (
                 'gray',
@@ -519,7 +546,6 @@ $dark-bootstrap-calendar: extend(
 
 /// Generates a dark indigo calendar schema.
 /// @type {Map}
-/// @prop {Map} date-special-range-foreground [contrast-color: 'gray', 50] - The foreground color of a special date in rage selection.
 /// @prop {Map} date-hover-foreground [contrast-color: 'gray', 900] - The :hover foreground color of a date.
 /// @prop {Map} date-focus-foreground [contrast-color: 'gray', 900] - The :focus foreground color of a date.
 /// @prop {Map} date-current-hover-foreground [contrast-color: ('gray', 900)] - The :hover foreground color of the current date.
@@ -544,7 +570,9 @@ $dark-bootstrap-calendar: extend(
 /// @prop {Map} date-current-border-color [color: ('primary', 400)] - The border color of the current date.
 /// @prop {Map} date-current-hover-border-color [color: ('primary', 300)] - The :hover border color of the current date.
 /// @prop {Map} date-current-focus-border-color [color: ('primary', 300)] - The :focus border color of the current date.
-/// @prop {Map} date-special-foreground [color: ('primary', 600)] - The foreground color of a special date.
+/// @prop {Map} date-special-range-foreground [(color: 'primary', 50)] - The foreground color of a special date in rage selection.
+/// @prop {Map} date-special-range-background [(color: 'primary', 600, .4)] - The background color of a special date in range selection.
+/// @prop {Map} date-special-foreground [color: ('primary', 50)] - The foreground color of a special date.
 /// @prop {Map} date-special-background [color: ('primary', 600, .4)] - The background color of a special date.
 /// @prop {Map} date-special-hover-foreground [contrast-color: ('primary', 600)] - The foreground color of a special date.
 /// @prop {Map} date-special-hover-background [color: ('primary', 400, .7)] - The background color of a special date.
@@ -557,16 +585,15 @@ $dark-bootstrap-calendar: extend(
 /// @prop {Map} picker-focus-foreground [color: 'primary' 300] - The :focus foreground color of the month and year pickers.
 /// @prop {Map} week-number-foreground [color: ('gray', 500)] - The foreground color of the week number column.
 /// @prop {Map} week-number-background [color: ('gray', 900, .05)] - The background color of the week number column.
+/// @prop {Map} date-selected-range-background [color: ('primary', 400, .2)] - The background color of the selected range.
+/// @prop {Map} selected-current-outline-color [contrast-color: ('gray', 50, .6)] - The outline color of the selected current year/month in year/month views.
+/// @prop {Map} selected-current-hover-outline-color [contrast-color: ('gray', 50, .6)] - The :hover outline color of the selected current year/month in year/month views.
+/// @prop {Map} selected-current-focus-outline-color [contrast-color: ('gray', 50, .6)] - The :focus outline color of the selected current year/month in year/month views.
+
 /// @requires $indigo-calendar
 $dark-indigo-calendar: extend(
     $indigo-calendar,
     (
-        date-special-range-foreground: (
-            color: (
-                'primary',
-                50,
-            ),
-        ),
         date-hover-foreground: (
             contrast-color: (
                 'gray',
@@ -693,15 +720,17 @@ $dark-indigo-calendar: extend(
             ),
         ),
         date-disabled-foreground: (
-            color: (
+            contrast-color: (
                 'gray',
-                500,
+                50,
+                0.4,
             ),
         ),
         date-disabled-range-foreground: (
-            color: (
+            contrast-color: (
                 'gray',
-                500,
+                50,
+                0.4,
             ),
         ),
         date-current-border-color: (
@@ -735,6 +764,19 @@ $dark-indigo-calendar: extend(
                 0.4,
             ),
         ),
+        date-special-range-foreground: (
+            color: (
+                'primary',
+                50,
+            ),
+        ),
+        date-special-range-background: (
+            color: (
+                'primary',
+                600,
+                0.4,
+            ),
+        ),
         date-special-hover-foreground: (
             contrast-color: (
                 'primary',
@@ -803,5 +845,33 @@ $dark-indigo-calendar: extend(
                 0.05,
             ),
         ),
+        date-selected-range-background: (
+            color: (
+                'primary',
+                400,
+                0.2,
+            ),
+        ),
+        selected-current-outline-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.6,
+            ),
+        ),
+        selected-current-outline-hover-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.6,
+            ),
+        ),
+        selected-current-outline-focus-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.6,
+            ),
+        ),
     )
 );

package/sass/themes/schemas/components/light/_calendar.scss

@@ -15,7 +15,7 @@
 /// @prop {Map} picker-hover-foreground [color: 'secondary' 500] - The :hover foreground color of the month and year pickers.
 /// @prop {Map} picker-focus-foreground [color: 'secondary' 500] - The :focus foreground color of the month and year pickers.
 /// @prop {Map} weekday-color [color: ('gray', 500)] - The foreground color of the weekday labels.
-/// @prop {Map} weekend-color [contrast-color: 'surface'] - The foreground color of the weekend days.
+/// @prop {Map} weekend-color [color: ('gray', 900)] - The foreground color of the weekend days.
 /// @prop {Map} inactive-color [color: ('gray', 500)] - The foreground color of the previous and next month dates.
 /// @prop {Map} week-number-foreground [color: ('gray', 500)] - The foreground color of the week number column.
 /// @prop {Map} week-number-background [color: ('gray', 200)] - The background color of the week number column.
@@ -41,7 +41,6 @@
 /// @prop {Color} date-special-background [transparent] - The background color of a special date.
 /// @prop {Map} date-special-hover-background [color: ('gray', 100)] - The background color of a special date.
 /// @prop {Map} date-special-focus-background [color: ('gray', 100)] - The background color of a special date.
-/// @prop {Map} date-special-range-foreground [color: ('secondary', 900)] - The foreground color of a special date in rage selection.
 /// @prop {Color} date-special-range-background [transparent] - The background color of a special date in range selection.
 /// @prop {Map} date-special-range-border-color [color: ('secondary', 900)] - The outline color around a special date in range selection.
 /// @prop {Color} date-selected-current-outline [transparent] - The outline color of the current selected date.
@@ -64,7 +63,7 @@
 /// @prop {Color} date-range-border-color [transparent] - The border color of range selection.
 /// @prop {Map} date-range-preview-border-color [color: ('gray', 300)] - The border color of the range selection in preview state(visible before selecting the end of the range).
 /// @prop {Map} date-disabled-foreground [color: ('gray', 500, .5)] - The foreground color of disabled dates.
-/// @prop {Map} date-disabled-range-foreground [color: ('gray', 500)] - The foreground color of disabled dates in range selection.
+/// @prop {Map} date-disabled-range-foreground [color: ('gray', 900, .38)] - The foreground color of disabled dates in range selection.
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for calendar.
 /// @prop {List} date-border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for the date.
 /// @prop {List} date-range-border-radius [(rem(20px), rem(0), rem(20px))] -The border radius used for the date in range selection.
@@ -268,12 +267,6 @@ $light-calendar: (
             100,
         ),
     ),
-    date-special-range-foreground: (
-        color: (
-            'secondary',
-            900,
-        ),
-    ),
     date-special-range-background: transparent,
     date-special-range-border-color: (
         color: (
@@ -312,7 +305,10 @@ $light-calendar: (
         ),
     ),
     weekend-color: (
-        contrast-color: 'surface',
+        color: (
+            'gray',
+            900,
+        ),
     ),
     border-radius: (
         border-radius: (
@@ -368,7 +364,8 @@ $light-calendar: (
     date-disabled-range-foreground: (
         color: (
             'gray',
-            500,
+            900,
+            0.38,
         ),
     ),
 );
@@ -380,32 +377,36 @@ $light-calendar: (
 /// @prop {Map} picker-foreground [color: 'gray' 900] - The foreground color of the month and year pickers.
 /// @prop {Map} year-focus-foreground [contrast-color: ('secondary', 500)]- The :focus foreground color of the focused year in years view.
 /// @prop {Map} year-focus-background [color: ('secondary', 500)]- The :focus background color of the focused year on in years view.
-/// @prop {Map} year-current-foreground [contrast-color: ('surface')] - The foreground color of the current year.
+/// @prop {Map} year-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the year in years view.
+/// @prop {Map} year-hover-background [color: ('grey', 100)]- The :hover background color of the year in years view.
+/// @prop {Map} year-current-foreground [color: ('gray', 900)] - The foreground color of the current year.
 /// @prop {Map} year-current-background [color: ('surface')]- The background color of the current year in years view.
-/// @prop {Map} year-current-hover-foreground [contrast-color: ('gray', 200)] - The :hover foreground color of the current year in years view.
-/// @prop {Map} year-current-hover-background [color: ('gray' 200)] - The :hover background color of the current year in years view.
+/// @prop {Map} year-current-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the current year in years view.
+/// @prop {Map} year-current-hover-background [color: ('gray' 100)] - The :hover background color of the current year in years view.
 /// @prop {Map} year-selected-foreground [contrast-color: ('secondary', 600)] - The foreground color of the selected year.
 /// @prop {Map} year-selected-background [color: ('secondary', 500)]- The background color of the selected year in years view.
-/// @prop {Map} year-selected-hover-foreground [contrast-color: ('secondary', 600)] - The :hover foreground color of the selected year in years view.
-/// @prop {Map} year-selected-hover-background [color: ('secondary' 600)] - The :hover background color of the selected year in years view.
+/// @prop {Map} year-selected-hover-foreground [contrast-color: ('secondary', 700)] - The :hover foreground color of the selected year in years view.
+/// @prop {Map} year-selected-hover-background [color: ('secondary' 700)] - The :hover background color of the selected year in years view.
 /// @prop {Map} year-selected-current-foreground [contrast-color: ('secondary', 600)] - The foreground color of the current/selected year.
 /// @prop {Map} year-selected-current-background [color: ('secondary', 500)] - The foreground color of the current/selected year.
-/// @prop {Map} year-selected-current-hover-foreground [contrast-color: ('secondary', 600)] - The :hover foreground color of the current/selected year.
-/// @prop {Map} year-selected-current-hover-background [color: ('secondary', 600)] - The :hover background color of the current/selected year.
+/// @prop {Map} year-selected-current-hover-foreground [contrast-color: ('secondary', 700)] - The :hover foreground color of the current/selected year.
+/// @prop {Map} year-selected-current-hover-background [color: ('secondary', 700)] - The :hover background color of the current/selected year.
 /// @prop {Map} month-focus-foreground [contrast-color: ('secondary', 500)] - The :focus foreground color of the month inside the months view.
 /// @prop {Map} month-focus-background [color: ('secondary', 500)] - The :focus background color of the month inside the months view.
+/// @prop {Map} month-hover-foreground [color: ('gray', 900)] -  The :hover foreground color of the month inside the months view.
+/// @prop {Map} month-hover-background [color: ('gray', 100)] - The :hover background color of the month inside the months view.
 /// @prop {Map} month-current-foreground [contrast-color: ('gray', 200)] - The foreground color of the current month in month view.
 /// @prop {Map} month-current-background [color: ('surface')] - The background color of the current month in month view.
-/// @prop {Map} month-current-hover-foreground [contrast-color: ('gray', 200)]- The :hover foreground color of the current month in month view.
-/// @prop {Map} month-current-hover-background [color: ('gray', 200)]- The :hover background color of the current month in month view.
+/// @prop {Map} month-current-hover-foreground [color: ('gray', 900)]- The :hover foreground color of the current month in month view.
+/// @prop {Map} month-current-hover-background [color: ('gray', 100)]- The :hover background color of the current month in month view.
 /// @prop {Map} month-selected-foreground [contrast-color: ('secondary', 600)] - The foreground color of the selected month in month view.
 /// @prop {Map} month-selected-background [color: ('secondary', 500)] - The background color of the selected month in month view.
-/// @prop {Map} month-selected-hover-foreground [contrast-color: ('secondary', 600)]- The :hover foreground color of the selected month in month view.
-/// @prop {Map} month-selected-hover-background [color: ('secondary', 600)]- The :hover background color of the selected month in month view.
+/// @prop {Map} month-selected-hover-foreground [contrast-color: ('secondary', 700)]- The :hover foreground color of the selected month in month view.
+/// @prop {Map} month-selected-hover-background [color: ('secondary', 700)]- The :hover background color of the selected month in month view.
 /// @prop {Map} month-selected-current-foreground [contrast-color: ('secondary', 500)] - The foreground color of the current/selected month in month view.
 /// @prop {Map} month-selected-current-background [color: ('secondary', 500)]- The background color of the current/selected month in month view.
-/// @prop {Map} month-selected-current-hover-foreground [contrast-color: ('secondary', 600)] - The :hover foreground color of the current/selected month in month view.
-/// @prop {Map} month-selected-current-hover-background [color: ('secondary', 600)] - The :hover background color of the current/selected month in month view.
+/// @prop {Map} month-selected-current-hover-foreground [contrast-color: ('secondary', 700)] - The :hover foreground color of the current/selected month in month view.
+/// @prop {Map} month-selected-current-hover-background [color: ('secondary', 700)] - The :hover background color of the current/selected month in month view.
 /// @prop {Map} date-hover-background [color: ('gray', 100)] - The :hover background color of a date.
 /// @prop {Map} date-focus-background [color: ('gray', 100)] - The :focus background color of date.
 /// @prop {Map} date-current-foreground [color: ('gray', 900)] - The foreground color of the current date.
@@ -443,6 +444,7 @@ $light-calendar: (
 /// @prop {Map} date-selected-current-focus-border-color [color: ('gray', 900)] - The :focus border color of the selected current date.
 /// @prop {List} week-number-border-radius [(rem(4px), rem(0), rem(8px))] - The border radius used for the week numbers column.
 /// @prop {Map} actions-divider-color [color: ('gray', 200)] - The border color used for the date-picker actions divider.
+/// @prop {Map} date-special-range-foreground [color: ('secondary', 900)] - The foreground color of a special date in rage selection.
 /// @requires $light-calendar
 $material-calendar: extend(
     $light-calendar,
@@ -465,24 +467,37 @@ $material-calendar: extend(
                 900,
             ),
         ),
+        year-hover-foreground: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        year-hover-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
         year-current-foreground: (
-            contrast-color: (
-                'surface',
+            color: (
+                'gray',
+                900,
             ),
         ),
         year-current-background: (
             color: 'surface',
         ),
         year-current-hover-foreground: (
-            contrast-color: (
+            color: (
                 'gray',
-                200,
+                900,
             ),
         ),
         year-current-hover-background: (
             color: (
                 'gray',
-                200,
+                100,
             ),
         ),
         year-selected-foreground: (
@@ -500,13 +515,13 @@ $material-calendar: extend(
         year-selected-hover-foreground: (
             contrast-color: (
                 'secondary',
-                600,
+                700,
             ),
         ),
         year-selected-hover-background: (
             color: (
                 'secondary',
-                600,
+                700,
             ),
         ),
         year-selected-current-foreground: (
@@ -524,13 +539,25 @@ $material-calendar: extend(
         year-selected-current-hover-foreground: (
             contrast-color: (
                 'secondary',
-                600,
+                700,
             ),
         ),
         year-selected-current-hover-background: (
             color: (
                 'secondary',
-                600,
+                700,
+            ),
+        ),
+        month-hover-foreground: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        month-hover-background: (
+            color: (
+                'gray',
+                100,
             ),
         ),
         month-current-foreground: (
@@ -543,15 +570,15 @@ $material-calendar: extend(
             color: 'surface',
         ),
         month-current-hover-foreground: (
-            contrast-color: (
+            color: (
                 'gray',
-                200,
+                900,
             ),
         ),
         month-current-hover-background: (
             color: (
                 'gray',
-                200,
+                100,
             ),
         ),
         month-selected-foreground: (
@@ -569,13 +596,13 @@ $material-calendar: extend(
         month-selected-hover-foreground: (
             contrast-color: (
                 'secondary',
-                600,
+                700,
             ),
         ),
         month-selected-hover-background: (
             color: (
                 'secondary',
-                600,
+                700,
             ),
         ),
         month-selected-current-foreground: (
@@ -593,13 +620,13 @@ $material-calendar: extend(
         month-selected-current-hover-foreground: (
             contrast-color: (
                 'secondary',
-                600,
+                700,
             ),
         ),
         month-selected-current-hover-background: (
             color: (
                 'secondary',
-                600,
+                700,
             ),
         ),
         date-hover-background: (
@@ -815,6 +842,12 @@ $material-calendar: extend(
                 200,
             ),
         ),
+        date-special-range-foreground: (
+            color: (
+                'secondary',
+                900,
+            ),
+        ),
     )
 );
 
@@ -832,6 +865,7 @@ $material-calendar: extend(
 /// @prop {Map} date-selected-current-border-color [color: ('gray', 700)] - The border color of the selected current date.
 /// @prop {Map} date-selected-current-hover-border-color [color: ('gray', 700)] - The :hover border color of the selected current date.
 /// @prop {Map} date-selected-current-focus-border-color [color: ('gray', 700)] - The :focus border color of the selected current date.
+/// @prop {Map} year-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the year in years view.
 /// @prop {Map} year-current-foreground [color: ('gray', 900)] - The foreground color of the current year.
 /// @prop {Map} year-current-background [color: 'gray', 100) ]- The background color of the current year in years view.
 /// @prop {Map} year-current-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the current year in years view.
@@ -844,6 +878,7 @@ $material-calendar: extend(
 /// @prop {Map} year-selected-current-background [color: ('primary', 50, .3)] - The background color of the current/selected year.
 /// @prop {Map} year-selected-current-hover-foreground [color: ('gray', 900)] - The foreground color of the current/selected year on :hover.
 /// @prop {Map} year-selected-current-hover-background [color: ('primary', 100, .5)] - The background color of the current/selected year on :hover.
+/// @prop {Map} month-hover-foreground [color: ('gray', 900)] -  The :hover foreground color of the month inside the months view.
 /// @prop {Map} month-current-foreground [color: ('gray', 900)] - The foreground color of the current month in month view.
 /// @prop {Map} month-current-background [color: ('gray', 100)] - The background color of the current month in month view.
 /// @prop {Map} month-current-hover-foreground [color: ('gray', 900)]- The :hover foreground color of the current month in month view.
@@ -920,7 +955,7 @@ $material-calendar: extend(
 /// @prop {List} size [(rem(28px), rem(32px), rem(40px))] - The size of the days, months, and years views.
 /// @prop {List} inner-size [(rem(24px), rem(28px), rem(32px))] - The size of the inner element of a date(often used to outline the special date)
 /// @prop {Map} actions-divider-color [color: ('gray', 200)] - The border color used for the date-picker actions divider.
-/// @prop {Map} date-disabled-range-foreground [color: ('gray', 900)] - The foreground color of disabled dates in range selection.
+/// @prop {Map} date-special-range-foreground [color: ('gray', 900)] - The foreground color of a special date in rage selection.
 /// @requires {Map} $light-calendar
 $fluent-calendar: extend(
     $light-calendar,
@@ -1048,6 +1083,12 @@ $fluent-calendar: extend(
                 900,
             ),
         ),
+        year-hover-foreground: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
         year-current-foreground: (
             color: (
                 'gray',
@@ -1124,6 +1165,12 @@ $fluent-calendar: extend(
                 0.5,
             ),
         ),
+        month-hover-foreground: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
         month-current-foreground: (
             color: (
                 'gray',
@@ -1490,7 +1537,7 @@ $fluent-calendar: extend(
                 200,
             ),
         ),
-        date-disabled-range-foreground: (
+        date-special-range-foreground: (
             color: (
                 'gray',
                 900,
@@ -1517,6 +1564,8 @@ $fluent-calendar: extend(
 /// @prop {Map} picker-background [color: ('gray', 100)] - The background color of the month and year pickers.
 /// @prop {Map} year-current-foreground [color: ('gray', 900)] - The foreground color of the current year.
 /// @prop {Color} year-current-background [transparent]- The background color of the current year in years view.
+/// @prop {Map} year-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the year in years view.
+/// @prop {Map} year-hover-background [color: ('grey', 200)]- The :hover background color of the year in years view.
 /// @prop {Map} year-current-hover-foreground [contrast-color: ('gray', 200)] - The :hover foreground color of the current year in years view.
 /// @prop {Map} year-current-hover-background [color: ('gray' 200)] - The :hover background color of the current year in years view.
 /// @prop {Map} year-selected-foreground [contrast-color: ('primary', 900)] - The foreground color of the selected year.
@@ -1527,6 +1576,8 @@ $fluent-calendar: extend(
 /// @prop {Map} year-selected-current-background [color: ('primary', 500)] - The foreground color of the current/selected year.
 /// @prop {Map} year-selected-current-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the current/selected year.
 /// @prop {Map} year-selected-current-hover-background [color: ('primary', 600)] - The :hover background color of the current/selected year.
+/// @prop {Map} month-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the month in months view.
+/// @prop {Map} month-hover-background [color: ('grey', 200)]- The :hover background color of the month in months view.
 /// @prop {Map} month-current-foreground [color: ('gray', 900)] - The foreground color of the current selected month.
 /// @prop {Color} month-current-background [transparent] - The background color of the current selected month.
 /// @prop {Map} month-current-hover-foreground [contrast-color: ('gray', 200)] - The :hover foreground color of the current month in months view.
@@ -1584,7 +1635,6 @@ $fluent-calendar: extend(
 /// @prop {Map} selected-current-focus-outline-color [color: ('gray', 900)] - The :focus outline color of the selected current year/month in year/month views.
 /// @prop {Map} border-color [color: ('gray', 300)] - The calendar border color.
 /// @prop {Map} weekday-color [color: 'info', 300] - The foreground color for weekday labels.
-/// @prop {Map} weekend-color [color: ('gray', 900)] - The foreground color of the weekend days.
 /// @prop {Color} week-number-background [transparent] - The background color of the week number column.
 /// @prop {List} date-border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for the date outline.
 /// @prop {List} date-range-border-radius [(rem(0), rem(0), rem(0))] - The border radius used for the date outline in range selection.
@@ -1599,6 +1649,8 @@ $fluent-calendar: extend(
 /// @prop {Map} date-selected-current-hover-border-color [color: ('gray', 900)] - The :hover border color of the selected current date.
 /// @prop {Map} date-selected-current-focus-border-color [color: ('gray', 900)] - The :focus border color of the selected current date.
 /// @prop {Map} actions-divider-color [color: ('gray', 300)] - The border color used for the date-picker actions divider.
+/// @prop {Map} date-special-range-foreground [color: ('gray', 900)] - The foreground color of a special date in rage selection.
+
 /// @requires {Map} $light-calendar
 $bootstrap-calendar: extend(
     $light-calendar,
@@ -1693,6 +1745,18 @@ $bootstrap-calendar: extend(
                 500,
             ),
         ),
+        year-hover-foreground: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        year-hover-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
         year-current-foreground: (
             color: (
                 'gray',
@@ -1701,9 +1765,9 @@ $bootstrap-calendar: extend(
         ),
         year-current-background: transparent,
         year-current-hover-foreground: (
-            contrast-color: (
+            color: (
                 'gray',
-                200,
+                900,
             ),
         ),
         year-current-hover-background: (
@@ -1760,6 +1824,18 @@ $bootstrap-calendar: extend(
                 600,
             ),
         ),
+        month-hover-foreground: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        month-hover-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
         month-current-foreground: (
             color: (
                 'gray',
@@ -2103,12 +2179,6 @@ $bootstrap-calendar: extend(
                 300,
             ),
         ),
-        weekend-color: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
         week-number-background: transparent,
         month-year-border-radius: (
             border-radius: (
@@ -2152,12 +2222,19 @@ $bootstrap-calendar: extend(
                 300,
             ),
         ),
+        date-special-range-foreground: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
     )
 );
 
 /// Generates an indigo calendar schema.
 /// @type {Map}
 /// @prop {Map} content-foreground [color: ('gray', 800)] - The foreground color of the days, months and years views.
+/// @prop {Map} weekend-color [color: ('gray', 800)] - The foreground color of the weekend days.
 /// @prop {Map} content-background [contrast-color: ('gray', 900)] - The background color of the days, months and years views.
 /// @prop {Map} header-foreground [color: ('gray', 800)] - The header foreground color.
 /// @prop {Map} header-background [contrast-color: ('gray', 900)] - The header background color.
@@ -2201,7 +2278,7 @@ $bootstrap-calendar: extend(
 /// @prop {Map} date-selected-current-hover-border-color [contrast-color: ('primary', 900, .6)] - The :hover border color of the selected current date.
 /// @prop {Map} date-selected-current-focus-border-color [contrast-color: ('primary', 900,. 6)] - The :focus border color of the selected current date.
 /// @prop {Map} date-selected-range-foreground [color: ('gray', 800)] - The foreground color of the selected range.
-/// @prop {Map} date-selected-range-background [color: ('secondary', 50)] - The background color of the selected range.
+/// @prop {Map} date-selected-range-background [color: ('primary', 300, .2)] - The background color of the selected range.
 /// @prop {Map} date-selected-range-hover-background [color: ('secondary', 100)] - The :hover background color of the selected range.
 /// @prop {Map} date-selected-range-focus-background [color: ('secondary', 100)] - The :focus background color of the selected range.
 /// @prop {Color} date-selected-current-range-background [transparent] - The background color of the current date in the selected range.
@@ -2247,6 +2324,8 @@ $bootstrap-calendar: extend(
 /// @prop {List} inner-size [(rem(24px), rem(28px), rem(32px))] - The size of the inner element of a date(often used to outline the special date)
 /// @prop {List} border-radius [(rem(8px), rem(0), rem(8px))] - The border radius used for calendar.
 /// @prop {Map} actions-divider-color [color: ('gray', 400)] - The border color used for the date-picker actions divider.
+/// @prop {Map} date-special-range-foreground [color: ('primary', 500)] - The foreground color of a special date in rage selection.
+/// @prop {Map} date-special-range-background [(color: 'primary', 50, .7)] - The background color of a special date in range selection.
 /// @requires {Map} $light-calendar
 $indigo-calendar: extend(
     $light-calendar,
@@ -2264,6 +2343,12 @@ $indigo-calendar: extend(
                 800,
             ),
         ),
+        weekend-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
         content-background: (
             contrast-color: (
                 'gray',
@@ -2416,6 +2501,19 @@ $indigo-calendar: extend(
                 0.7,
             ),
         ),
+        date-special-range-foreground: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        date-special-range-background: (
+            color: (
+                'primary',
+                50,
+                0.7,
+            ),
+        ),
         date-special-hover-foreground: (
             color: (
                 'primary',
@@ -2538,7 +2636,7 @@ $indigo-calendar: extend(
         date-selected-range-foreground: (
             color: (
                 'gray',
-                800,
+                900,
             ),
         ),
         date-selected-range-background: (
@@ -2605,7 +2703,7 @@ $indigo-calendar: extend(
         year-current-foreground: (
             color: (
                 'gray',
-                800,
+                900,
             ),
         ),
         year-current-background: transparent,
@@ -2686,7 +2784,7 @@ $indigo-calendar: extend(
         month-current-foreground: (
             color: (
                 'gray',
-                800,
+                900,
             ),
         ),
         month-current-background: transparent,