igniteui-theming 6.0.0 → 6.0.2

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

@@ -12,25 +12,21 @@
 /// @prop {Map} content-foreground [color: ('gray', 900)] - The foreground color of the days, months and years views.
 /// @prop {Map} content-background [color: 'surface'] - The background color of the days, months and years views.
 /// @prop {Map} picker-background [color: 'surface'] - The background color of the month and year pickers.
-/// @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} 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.
-/// @prop {Map} year-hover-foreground [contrast-color: ('gray', 200)] - 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-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the year in years view.
 /// @prop {Map} navigation-color [color: ('gray', 800)] - the color of the buttons responsible for navigation.
 /// @prop {Map} navigation-hover-color [color: ('secondary', 500)] - The :hover color of the buttons responsible for navigation.
 /// @prop {Map} navigation-focus-color [color: ('secondary', 500)] - The :focus color of the buttons responsible for navigation.
-/// @prop {Map} month-hover-foreground [contrast-color: ('gray', 200)] -  The :hover foreground color of the month inside the months view.
-/// @prop {Map} month-hover-background [color: ('gray', 200)] - The :hover background color of the month inside the months view.
-/// @prop {Map} date-hover-foreground [color: 'gray', 900] - The :hover foreground color of a date.
-/// @prop {Map} date-focus-foreground [color: 'gray', 900] - The :focus foreground color of a date.
+/// @prop {Map} date-hover-foreground [color: ('gray', 900)] - The :hover foreground color of a date.
+/// @prop {Map} date-focus-foreground [color: ('gray', 900)] - The :focus foreground color of a date.
 /// @prop {Color} date-current-background [transparent] - The background color of the current date.
 /// @prop {Map} date-current-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the current date.
-/// @prop {Map} date-current-hover-background [color: ('gray', 100)] - The :hover background color of the current date.
 /// @prop {Map} date-current-focus-foreground [color: ('gray', 900)] - The :focus foreground color of the current date.
 /// @prop {Map} date-current-focus-background [color: ('gray', 100)] - The :focus background color of the current date.
 /// @prop {Map} date-selected-range-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the selected range.
@@ -39,21 +35,15 @@
 /// @prop {Map} date-selected-current-range-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the current date in the selected range.
 /// @prop {Map} date-selected-current-range-focus-foreground [color: ('gray', 900)] - The :focus foreground color of the current date in the selected range.
 /// @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.
 /// @prop {Color} date-selected-current-hover-outline [transparent] - The :hover outline color of the current selected date.
 /// @prop {Color} date-selected-current-focus-outline [transparent] - The :focus outline color of the current selected date.
-/// @prop {Map} current-outline-hover-color [color: ('gray', 600)] - The :hover outline color of the current year/month in year/month views.
-/// @prop {Map} current-outline-focus-color [color: ('secondary', 500)] - The :focus outline color of the current year/month in year/month views.
+/// @prop {Map} current-outline-hover-color [color: ('gray', 900)] - The :hover outline color of the current year/month in year/month views.
+/// @prop {Map} current-outline-focus-color [color: ('gray', 900)] - The :focus outline color of the current year/month in year/month views.
 /// @prop {Color} selected-outline-color [transparent] - The outline color of the selected year/month in year/month views.
 /// @prop {Color} selected-hover-outline-color [transparent] - The :hover outline color of the selected year/month in year/month views.
 /// @prop {Color} selected-focus-outline-color [transparent] - The :focus outline color of the selected year/month in year/month views.
-/// @prop {Map} selected-current-hover-outline-color [color: ('gray', 600)] - The :hover outline color of the selected current year/month in year/month views.
-/// @prop {Map} selected-current-focus-outline-color [color: ('secondary', 500)] - The :focus outline color of the selected current year/month in year/month views.
 /// @prop {Color} border-color [transparent] - The calendar border color.
 /// @prop {Color} date-border-color [transparent] - The border color around a date.
 /// @prop {Color} date-hover-border-color [transparent] - The :hover border color around a date.
@@ -63,7 +53,8 @@
 /// @prop {Color} date-selected-focus-border-color [transparent] - The :focus border color of the selected date.
 /// @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)] - The foreground color of disabled dates.
+/// @prop {Map} date-disabled-foreground [color: ('gray', 500, .5)] - The foreground color of disabled dates.
+/// @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.
@@ -113,15 +104,9 @@ $light-calendar: (
         ),
     ),
     year-hover-foreground: (
-        contrast-color: (
-            'gray',
-            200,
-        ),
-    ),
-    year-hover-background: (
         color: (
             'gray',
-            200,
+            900,
         ),
     ),
     navigation-color: (
@@ -142,18 +127,6 @@ $light-calendar: (
             500,
         ),
     ),
-    month-hover-foreground: (
-        contrast-color: (
-            'gray',
-            200,
-        ),
-    ),
-    month-hover-background: (
-        color: (
-            'gray',
-            200,
-        ),
-    ),
     current-outline-hover-color: (
         color: (
             'gray',
@@ -169,24 +142,6 @@ $light-calendar: (
     selected-outline-color: transparent,
     selected-hover-outline-color: transparent,
     selected-focus-outline-color: transparent,
-    selected-current-outline-color: (
-        color: (
-            'gray',
-            900,
-        ),
-    ),
-    selected-current-outline-hover-color: (
-        color: (
-            'gray',
-            900,
-        ),
-    ),
-    selected-current-outline-focus-color: (
-        color: (
-            'gray',
-            900,
-        ),
-    ),
     date-hover-foreground: (
         color: (
             'gray',
@@ -236,12 +191,6 @@ $light-calendar: (
             900,
         ),
     ),
-    date-current-hover-background: (
-        color: (
-            'gray',
-            100,
-        ),
-    ),
     date-current-focus-foreground: (
         color: (
             'gray',
@@ -255,24 +204,6 @@ $light-calendar: (
         ),
     ),
     date-special-background: transparent,
-    date-special-hover-background: (
-        color: (
-            'gray',
-            100,
-        ),
-    ),
-    date-special-focus-background: (
-        color: (
-            'gray',
-            100,
-        ),
-    ),
-    date-special-range-foreground: (
-        color: (
-            'secondary',
-            900,
-        ),
-    ),
     date-special-range-background: transparent,
     date-special-range-border-color: (
         color: (
@@ -286,28 +217,6 @@ $light-calendar: (
             500,
         ),
     ),
-    date-disabled-background: transparent,
-    date-disabled-current-foreground: (
-        color: (
-            'gray',
-            500,
-        ),
-    ),
-    date-disabled-current-background: transparent,
-    date-disabled-range-foreground: (
-        color: (
-            'gray',
-            500,
-        ),
-    ),
-    date-disabled-range-background: transparent,
-    date-disabled-current-range-foreground: (
-        color: (
-            'gray',
-            500,
-        ),
-    ),
-    date-disabled-current-range-background: transparent,
     week-number-foreground: (
         color: (
             'gray',
@@ -333,7 +242,10 @@ $light-calendar: (
         ),
     ),
     weekend-color: (
-        contrast-color: 'surface',
+        color: (
+            'gray',
+            900,
+        ),
     ),
     border-radius: (
         border-radius: (
@@ -383,6 +295,14 @@ $light-calendar: (
         color: (
             'gray',
             500,
+            0.5,
+        ),
+    ),
+    date-disabled-range-foreground: (
+        color: (
+            'gray',
+            900,
+            0.38,
         ),
     ),
 );
@@ -391,35 +311,34 @@ $light-calendar: (
 /// @type {Map}
 /// @prop {Map} header-foreground [contrast-color: ('secondary', 900)] - The header foreground color.
 /// @prop {Map} header-background [color: ('secondary', 500)] - The header background color.
-/// @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-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} picker-foreground [color: ('gray', 900)] - The foreground color of the month and year pickers.
+/// @prop {Map} year-hover-background [color: ('gray', 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 [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-background [color: ('secondary', 500)] - The 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} 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-current-foreground [contrast-color: ('gray', 200)] - The foreground color of the current month in month view.
+/// @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-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 [color: ('gray', 900)] - 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-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', 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.
@@ -429,6 +348,7 @@ $light-calendar: (
 /// @prop {Map} date-selected-hover-background [color: ('secondary', 700)] - The :hover background color of the selected date.
 /// @prop {Map} date-selected-focus-foreground [contrast-color: ('secondary', 700)] - The :focus foreground color of the selected date.
 /// @prop {Map} date-selected-focus-background [color: ('secondary', 700)] - The :focus background color of the selected date.
+/// @prop {Map} date-current-hover-background [color: ('gray', 100)] - The :hover background color of the current date.
 /// @prop {Map} date-selected-current-foreground [contrast-color: ('secondary', 900)] - The foreground color of the selected current date.
 /// @prop {Map} date-selected-current-background [color: ('secondary', 500)] - The background color of the selected current date.
 /// @prop {Map} date-selected-current-hover-foreground [contrast-color: ('secondary', 700)] - The :hover foreground color of the selected current date.
@@ -436,7 +356,7 @@ $light-calendar: (
 /// @prop {Map} date-selected-current-focus-foreground [contrast-color: ('secondary', 700)] - The :focus foreground color of the selected current date.
 /// @prop {Map} date-selected-current-focus-background [color: ('secondary', 700)] - The :focus background color of the selected current date.
 /// @prop {Map} date-selected-range-foreground [color: ('gray', 900)] - 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: ('secondary', 500, .24)] - The background color of the selected range.
 /// @prop {Map} date-selected-range-hover-background [color: ('gray', 100)] - The :hover background color of the selected range.
 /// @prop {Map} date-selected-range-focus-background [color: ('gray', 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.
@@ -445,9 +365,16 @@ $light-calendar: (
 /// @prop {Map} date-special-foreground [color: ('secondary', 500)] - The foreground color of a special date.
 /// @prop {Map} date-special-hover-foreground [color: ('secondary', 700)] - The foreground color of a special date.
 /// @prop {Map} date-special-focus-foreground [color: ('secondary', 700)] - The foreground 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-hover-background [color: ('gray', 100)] - The :hover background color of a special date in range selection.
+/// @prop {Map} date-special-range-focus-background [color: ('gray', 100)] - The :focus background color of a special date in range selection.
 /// @prop {Map} date-special-border-color [color: ('secondary', 500)] - The outline color around a special date.
+/// @prop {Map} date-special-hover-border-color [color: ('secondary', 700)] - The outline color around a special date.
 /// @prop {Map} current-outline-color [color: ('gray', 900)] - The outline color of the current year/month in year/month views.
-/// @prop {Map} selected-current-outline-color [color: ('gray', 600)] - The outline color of the selected current year/month in year/month views.
+/// @prop {Map} selected-current-outline-color [color: ('gray', 900)] - The outline color of the selected current year/month in year/month views.
+/// @prop {Map} selected-current-outline-hover-color [color: ('gray', 900)] - The :hover outline color of the selected current year/month in year/month views.
+/// @prop {Map} selected-current-outline-focus-color [color: ('gray', 900)] - The :focus outline color of the selected current year/month in year/month views.
 /// @prop {Map} date-current-border-color [color: ('gray', 900)] - The border color of the current date.
 /// @prop {Map} date-current-hover-border-color [color: ('gray', 900)] - The :hover border color of the current date.
 /// @prop {Map} date-current-focus-border-color [color: ('gray', 900)] - The :focus border color of the current date.
@@ -455,7 +382,8 @@ $light-calendar: (
 /// @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 {List} week-number-border-radius [(rem(4px), rem(0), rem(8px))] - The border radius used for the week numbers column.
-/// @prop {List} actions-divider-color [color: ('gray', 200)] - The border color used for the date-picker actions divider.
+/// @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,
@@ -478,24 +406,31 @@ $material-calendar: extend(
                 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: (
@@ -513,13 +448,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: (
@@ -537,34 +472,46 @@ $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: (
-            contrast-color: (
+            color: (
                 'gray',
-                200,
+                900,
             ),
         ),
         month-current-background: (
             color: 'surface',
         ),
         month-current-hover-foreground: (
-            contrast-color: (
+            color: (
                 'gray',
-                200,
+                900,
             ),
         ),
         month-current-hover-background: (
             color: (
                 'gray',
-                200,
+                100,
             ),
         ),
         month-selected-foreground: (
@@ -582,13 +529,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: (
@@ -606,13 +553,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: (
@@ -669,6 +616,12 @@ $material-calendar: extend(
                 700,
             ),
         ),
+        date-current-hover-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
         date-selected-current-foreground: (
             contrast-color: (
                 'secondary',
@@ -714,7 +667,8 @@ $material-calendar: extend(
         date-selected-range-background: (
             color: (
                 'secondary',
-                50,
+                500,
+                0.24,
             ),
         ),
         date-selected-range-hover-background: (
@@ -760,18 +714,66 @@ $material-calendar: extend(
                 700,
             ),
         ),
+        date-special-hover-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        date-special-focus-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        date-special-range-hover-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        date-special-range-focus-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
         date-special-border-color: (
             color: (
                 'secondary',
                 500,
             ),
         ),
+        date-special-hover-border-color: (
+            color: (
+                'secondary',
+                700,
+            ),
+        ),
+        selected-current-outline-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
         current-outline-color: (
             color: (
                 'gray',
                 900,
             ),
         ),
+        selected-current-outline-hover-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        selected-current-outline-focus-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
         date-current-border-color: (
             color: (
                 'gray',
@@ -821,62 +823,77 @@ $material-calendar: extend(
                 200,
             ),
         ),
+        date-special-range-foreground: (
+            color: (
+                'secondary',
+                900,
+            ),
+        ),
     )
 );
 
 /// Generates a fluent calendar schema.
 /// @type {Map}
+/// @prop {Map} month-hover-background [color: ('gray', 200)] - The :hover background color of the month inside the months view.
+/// @prop {Map} year-hover-background [color: ('gray', 200)] - The :hover background color of the year in years view.
+/// @prop {Map} picker-hover-foreground [color: ('primary', 500)] - The :hover foreground color of the month and year pickers.
+/// @prop {Map} picker-focus-foreground [color: ('primary', 500)] - The :focus foreground color of the month and year pickers.
+/// @prop {Map} navigation-hover-color [color: ('primary', 500)] - The :hover color of the buttons responsible for navigation.
+/// @prop {Map} navigation-focus-color [color: ('primary', 500)] - The :focus color of the buttons responsible for navigation.
 /// @prop {Map} date-special-foreground [color: ('gray', 900)] - The foreground color of a special date.
 /// @prop {Map} date-special-hover-foreground [color: ('gray', 900)] - The foreground color of a special date.
 /// @prop {Map} date-special-focus-foreground [color: ('gray', 900)] - The foreground color of a special date.
+/// @prop {Map} date-special-hover-background [color: ('gray', 200)] - The background color of a special date.
+/// @prop {Map} date-special-focus-background [color: ('gray', 200)] - The background color of a special date.
+/// @prop {Map} date-special-range-hover-background [color: ('gray', 200)] - The :hover background color of a special date in range selection.
+/// @prop {Map} date-special-range-focus-background [color: ('gray', 200)] - The :focus background color of a special date in range selection.
 /// @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-current-foreground [contrast-color: ('gray', 100)] - 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 [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', 50)] - The foreground color of the selected year.
+/// @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.
+/// @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 [color: ('gray', 900)] - The foreground color of the selected year.
 /// @prop {Map} year-selected-background [color: ('primary', 50, .3)] - The background color of the selected year.
-/// @prop {Map} year-selected-hover-foreground [contrast-color: ('primary', 100)] - The foreground color of the selected year on :hover.
+/// @prop {Map} year-selected-hover-foreground [color: ('gray', 900)] - The foreground color of the selected year on :hover.
 /// @prop {Map} year-selected-hover-background [color: ('primary', 100, .5)] - The background color of the selected year on :hover.
-/// @prop {Map} year-selected-current-foreground [contrast-color: ('primary', 50)] - The foreground color of the current/selected year.
+/// @prop {Map} year-selected-current-foreground [color: ('gray', 900)] - The foreground color of the current/selected year.
 /// @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 [contrast-color: ('primary', 100)] - The foreground color of the current/selected year on :hover.
+/// @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-current-foreground [contrast-color: ('gray', 100)] - The foreground color of the current month in month view.
+/// @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 [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-selected-foreground [contrast-color: ('primary', 50)] - The foreground color of the selected 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', 200)] - The :hover background color of the current month in month view.
+/// @prop {Map} month-selected-foreground [color: ('gray', 900)] - The foreground color of the selected month in month view.
 /// @prop {Map} month-selected-background [color: ('primary', 50, .3)] - The background color of the selected month in month view.
-/// @prop {Map} month-selected-hover-foreground [contrast-color: ('gray', 100)]- The :hover foreground color of the selected month in month view.
-/// @prop {Map} month-selected-hover-background [color: ('gray', 100, .5)]- The :hover background color of the selected month in month view.
-/// @prop {Map} month-selected-current-foreground [contrast-color: ('primary', 50)] - The foreground color of the current/selected month in month view.
-/// @prop {Map} month-selected-current-background [color: ('primary', 50, .3)]- The background color of the current/selected month in month view.
-/// @prop {Map} month-selected-current-hover-foreground [contrast-color: ('primary', 100)] - The :hover foreground color of the current/selected month in month view.
+/// @prop {Map} month-selected-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the selected month in month view.
+/// @prop {Map} month-selected-hover-background [color: ('gray', 100, .5)] - The :hover background color of the selected month in month view.
+/// @prop {Map} month-selected-current-foreground [color: ('gray', 900)] - The foreground color of the current/selected month in month view.
+/// @prop {Map} month-selected-current-background [color: ('primary', 50, .3)] - The background color of the current/selected month in month view.
+/// @prop {Map} month-selected-current-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the current/selected month in month view.
 /// @prop {Map} month-selected-current-hover-background [color: ('primary', 100, .5)] - The :hover background color of the current/selected month in month view.
-/// @prop {Map} date-hover-foreground [contrast-color: ('gray', 200)] - The :hover foreground color of a date.
-/// @prop {Map} date-hover-background [color: ('gray', 200)] - The :hover background color of adate.
-/// @prop {Map} date-focus-foreground [contrast-color: ('gray', 200)] - The :focus foreground color of a date.
+/// @prop {Map} date-hover-background [color: ('gray', 900)] - The :hover background color of date.
 /// @prop {Map} date-focus-background [color: ('gray', 200)] - The :focus background color of a date.
-/// @prop {Map} picker-foreground [color: ('gray', 900)]- The foreground color of the month and year pickers.
+/// @prop {Map} picker-foreground [color: ('gray', 900)] - The foreground color of the month and year pickers.
 /// @prop {Map} header-foreground [contrast-color: ('primary', 600)] - The header foreground color.
 /// @prop {Map} header-background [color: ('primary', 500)] - The background color of the month and year pickers.
-/// @prop {Map} date-selected-foreground [contrast-color: ('gray', 100)] - The foreground color of the selected date.
+/// @prop {Map} date-selected-foreground [color: ('gray', 900)] - The foreground color of the selected date.
 /// @prop {Map} date-selected-background [color: ('gray', 100)] - The background color of the selected date.
-/// @prop {Map} date-selected-hover-foreground [contrast-color: ('gray', 200)] - The :hover foreground color of the selected date.
+/// @prop {Map} date-selected-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the selected date.
 /// @prop {Map} date-selected-hover-background [color: ('gray', 200)] - The :hover background color of the selected date.
-/// @prop {Map} date-selected-focus-foreground [contrast-color: ('gray', 200)] - The :hover foreground color of the selected date.
+/// @prop {Map} date-selected-focus-foreground [color: ('gray', 900)] - The :hover foreground color of the selected date.
 /// @prop {Map} date-selected-focus-background [color: ('gray', 200)] - The :hover background color of the selected date.
-/// @prop {Map} date-current-foreground [contrast-color: ('primary', 900] - The foreground color of the current date.
+/// @prop {Map} date-current-foreground [contrast-color: ('primary', 900)] - The foreground color of the current date.
 /// @prop {Map} date-current-background [color: ('primary', 500)] - The background color of the current date.
 /// @prop {Map} date-current-hover-foreground [contrast-color: ('primary', 600)] - The :hover foreground color of the current date.
 /// @prop {Map} date-current-hover-background [color: ('gray', 200)] - The :hover background color of the current date.
 /// @prop {Map} date-current-focus-foreground [contrast-color: ('primary', 600)] - The :focus foreground color of the current date.
 /// @prop {Map} date-current-focus-background [color: ('gray', 200)] - The :focus background color of the current date.
 /// @prop {Map} date-selected-current-foreground [contrast-color: ('primary', 600)] - The foreground color of the selected current date.
-/// @prop {Color} date-selected-current-background [transparent] - The background color of the selected current date.
+/// @prop {Map} date-selected-current-background [color: ('gray', 100)] - The background color of the selected current date.
 /// @prop {Map} date-selected-current-hover-foreground [contrast-color: ('primary', 600)] - The :hover foreground color of the selected current date.
 /// @prop {Map} date-selected-current-hover-background [color: ('gray', 200)] - The :hover background color of the selected current date.
 /// @prop {Map} date-selected-current-focus-foreground [contrast-color: ('primary', 600)] - The :focus foreground color of the selected current date.
@@ -891,21 +908,21 @@ $material-calendar: extend(
 /// @prop {Map} date-selected-hover-border-color [color: ('gray', 700)] - The :hover border color of the selected date.
 /// @prop {Map} date-selected-focus-border-color [color: ('gray', 700)] - The :focus border color of the selected date.
 /// @prop {Color} current-outline-color [transparent] - The outline color of the current year/month in year/month views.
+/// @prop {Color} current-outline-hover-color [transparent] - The :hover outline color of the current year/month in year/month views.
+/// @prop {Color} current-outline-focus-color [transparent] - The :focus outline color of the current year/month in year/month views.
 /// @prop {Color} current-hover-outline-color [transparent] - The :hover outline color of the current year/month in year/month views.
 /// @prop {Color} current-focus-outline-color [transparent] - The :focus outline color of the current year/month in year/month views.
-/// @prop {Color} selected-outline-color [transparent] - The outline color of the selected year/month in year/month views.
-/// @prop {Color} selected-hover-outline-color [transparent] - The :hover outline color of the selected year/month in year/month views.
-/// @prop {Color} selected-focus-outline-color [transparent] - The :focus outline color of the selected year/month in year/month views.
 /// @prop {Map} selected-current-outline-color [color: ('gray', 700)] - The outline color of the selected current year/month in year/month views.
-/// @prop {Map} selected-current-hover-outline-color [color: ('gray', 700)] - The :hover outline color of the selected current year/month in year/month views.
-/// @prop {Map} selected-current-focus-outline-color [color: ('gray', 700)] - The :focus outline color of the selected current year/month in year/month views.
-/// @prop {Map} date-selected-range-foreground [contrast-color: ('gray', 100)] - The foreground color of the selected range.
+/// @prop {Map} selected-current-outline-hover-color [color: ('gray', 700)] - The :hover outline color of the selected current year/month in year/month views.
+/// @prop {Map} selected-current-outline-focus-color [color: ('gray', 700)] - The :focus outline color of the selected current year/month in year/month views.
+/// @prop {Map} date-selected-range-foreground [color: ('gray', 900)] - The foreground color of the selected range.
 /// @prop {Map} date-selected-range-background [color: ('gray', 100)] - The background color of the selected range.
 /// @prop {Map} date-selected-range-hover-background [color: ('gray', 200)] - The :hover background color of the selected range.
 /// @prop {Map} date-selected-range-focus-background [color: ('gray', 200)] - The :focus background color of the selected range.
 /// @prop {Map} date-range-border-color [color: ('gray', 700)] - The border color of the selected date.
 /// @prop {Map} date-range-preview-border-color [color: ('gray', 700)] - The border color of the selected date.
 /// @prop {Map} date-special-border-color [color: ('primary', 900)] - The outline color around a special date.
+/// @prop {Map} date-special-hover-border-color [color: ('primary', 900)] - The outline color around a special date.
 /// @prop {Map} date-special-range-border-color [color: ('primary', 900)] - The outline color around a special date in a range selection.
 /// @prop {Color} date-special-current-border-color [transparent] - The outline color around a special date.
 /// @prop {Color} date-current-border-color [transparent] - The border color of the current date.
@@ -918,7 +935,8 @@ $material-calendar: extend(
 /// @prop {List} week-number-border-radius [(rem(0), rem(0), rem(8px))] - The border radius used for the week numbers column.
 /// @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 {List} actions-divider-color [color: ('gray', 200)] - The border color used for the date-picker actions divider.
+/// @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: ('gray', 900)] - The foreground color of a special date in rage selection.
 /// @requires {Map} $light-calendar
 $fluent-calendar: extend(
     $light-calendar,
@@ -937,6 +955,42 @@ $fluent-calendar: extend(
                 rem(32px),
             ),
         ),
+        year-hover-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+        month-hover-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+        picker-hover-foreground: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        picker-focus-foreground: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        navigation-hover-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        navigation-focus-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
         date-special-foreground: (
             color: (
                 'gray',
@@ -979,6 +1033,12 @@ $fluent-calendar: extend(
                 900,
             ),
         ),
+        date-special-hover-border-color: (
+            color: (
+                'primary',
+                900,
+            ),
+        ),
         date-special-range-border-color: (
             color: (
                 'primary',
@@ -986,6 +1046,30 @@ $fluent-calendar: extend(
             ),
         ),
         date-special-current-border-color: transparent,
+        date-special-hover-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+        date-special-focus-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+        date-special-range-hover-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+        date-special-range-focus-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
         header-foreground: (
             contrast-color: (
                 'primary',
@@ -1005,9 +1089,9 @@ $fluent-calendar: extend(
             ),
         ),
         year-current-foreground: (
-            contrast-color: (
+            color: (
                 'gray',
-                100,
+                900,
             ),
         ),
         year-current-background: (
@@ -1017,9 +1101,9 @@ $fluent-calendar: extend(
             ),
         ),
         year-current-hover-foreground: (
-            contrast-color: (
+            color: (
                 'gray',
-                200,
+                900,
             ),
         ),
         year-current-hover-background: (
@@ -1029,9 +1113,9 @@ $fluent-calendar: extend(
             ),
         ),
         year-selected-foreground: (
-            contrast-color: (
-                'primary',
-                50,
+            color: (
+                'gray',
+                900,
             ),
         ),
         year-selected-background: (
@@ -1042,9 +1126,9 @@ $fluent-calendar: extend(
             ),
         ),
         year-selected-hover-foreground: (
-            contrast-color: (
-                'primary',
-                100,
+            color: (
+                'gray',
+                900,
             ),
         ),
         year-selected-hover-background: (
@@ -1055,9 +1139,9 @@ $fluent-calendar: extend(
             ),
         ),
         year-selected-current-foreground: (
-            contrast-color: (
-                'primary',
-                50,
+            color: (
+                'gray',
+                900,
             ),
         ),
         year-selected-current-background: (
@@ -1068,9 +1152,9 @@ $fluent-calendar: extend(
             ),
         ),
         year-selected-current-hover-foreground: (
-            contrast-color: (
-                'primary',
-                100,
+            color: (
+                'gray',
+                900,
             ),
         ),
         year-selected-current-hover-background: (
@@ -1080,10 +1164,16 @@ $fluent-calendar: extend(
                 0.5,
             ),
         ),
+        month-hover-foreground: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
         month-current-foreground: (
-            contrast-color: (
+            color: (
                 'gray',
-                100,
+                900,
             ),
         ),
         month-current-background: (
@@ -1093,9 +1183,9 @@ $fluent-calendar: extend(
             ),
         ),
         month-current-hover-foreground: (
-            contrast-color: (
+            color: (
                 'gray',
-                200,
+                900,
             ),
         ),
         month-current-hover-background: (
@@ -1105,9 +1195,9 @@ $fluent-calendar: extend(
             ),
         ),
         month-selected-foreground: (
-            contrast-color: (
-                'primary',
-                50,
+            color: (
+                'gray',
+                900,
             ),
         ),
         month-selected-background: (
@@ -1118,9 +1208,9 @@ $fluent-calendar: extend(
             ),
         ),
         month-selected-hover-foreground: (
-            contrast-color: (
-                'primary',
-                100,
+            color: (
+                'gray',
+                900,
             ),
         ),
         month-selected-hover-background: (
@@ -1131,9 +1221,9 @@ $fluent-calendar: extend(
             ),
         ),
         month-selected-current-foreground: (
-            contrast-color: (
-                'primary',
-                50,
+            color: (
+                'gray',
+                900,
             ),
         ),
         month-selected-current-background: (
@@ -1144,9 +1234,9 @@ $fluent-calendar: extend(
             ),
         ),
         month-selected-current-hover-foreground: (
-            contrast-color: (
-                'primary',
-                100,
+            color: (
+                'gray',
+                900,
             ),
         ),
         month-selected-current-hover-background: (
@@ -1162,7 +1252,12 @@ $fluent-calendar: extend(
                 600,
             ),
         ),
-        date-selected-current-background: transparent,
+        date-selected-current-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
         date-selected-current-hover-foreground: (
             contrast-color: (
                 'primary',
@@ -1224,9 +1319,9 @@ $fluent-calendar: extend(
             ),
         ),
         date-selected-range-foreground: (
-            contrast-color: (
+            color: (
                 'gray',
-                100,
+                900,
             ),
         ),
         date-selected-range-background: (
@@ -1247,12 +1342,6 @@ $fluent-calendar: extend(
                 200,
             ),
         ),
-        date-hover-foreground: (
-            contrast-color: (
-                'gray',
-                200,
-            ),
-        ),
         date-hover-background: (
             color: (
                 'gray',
@@ -1265,12 +1354,6 @@ $fluent-calendar: extend(
                 200,
             ),
         ),
-        date-focus-foreground: (
-            contrast-color: (
-                'gray',
-                200,
-            ),
-        ),
         date-current-foreground: (
             contrast-color: (
                 'primary',
@@ -1308,9 +1391,9 @@ $fluent-calendar: extend(
             ),
         ),
         date-selected-foreground: (
-            contrast-color: (
+            color: (
                 'gray',
-                100,
+                900,
             ),
         ),
         date-selected-background: (
@@ -1320,9 +1403,9 @@ $fluent-calendar: extend(
             ),
         ),
         date-selected-hover-foreground: (
-            contrast-color: (
+            color: (
                 'gray',
-                200,
+                900,
             ),
         ),
         date-selected-hover-background: (
@@ -1332,9 +1415,9 @@ $fluent-calendar: extend(
             ),
         ),
         date-selected-focus-foreground: (
-            contrast-color: (
+            color: (
                 'gray',
-                200,
+                900,
             ),
         ),
         date-selected-focus-background: (
@@ -1346,9 +1429,6 @@ $fluent-calendar: extend(
         current-outline-color: transparent,
         current-outline-hover-color: transparent,
         current-outline-focus-color: transparent,
-        selected-outline-color: transparent,
-        selected-hover-outline-color: transparent,
-        selected-focus-outline-color: transparent,
         selected-current-outline-color: (
             color: (
                 'gray',
@@ -1441,26 +1521,36 @@ $fluent-calendar: extend(
                 200,
             ),
         ),
+        date-special-range-foreground: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
     )
 );
 
 /// Generates a bootstrap calendar schema.
 /// @type {Map}
+/// @prop {Map} date-special-hover-background [color: ('gray', 200)] - The background color of a special date.
+/// @prop {Map} date-special-focus-background [color: ('gray', 200)] - The background color of a special date.
+/// @prop {Map} date-special-range-hover-background [color: ('gray', 200)] - The :hover background color of a special date in range selection.
+/// @prop {Map} date-special-range-focus-background [color: ('gray', 200)] - The :focus background color of a special date in range selection.
 /// @prop {Map} date-special-foreground [color: ('gray', 900)] - The foreground color of a special date.
 /// @prop {Map} date-special-focus-foreground [color: ('gray', 900)] - The foreground color of a special date.
 /// @prop {Map} date-special-hover-foreground [color: ('gray', 900)] - The foreground color of a special date.
 /// @prop {Map} date-special-border-color [color: ('primary', 800)] - The outline color around a special date.
+/// @prop {Map} date-special-hover-border-color [color: ('primary', 800)] - The outline color around a special date.
 /// @prop {Map} date-special-range-border-color [color: ('primary', 800)] - The outline color around a special date in a range selection.
 /// @prop {Map} header-foreground [contrast-color: ('gray', 100)] - The header foreground color.
 /// @prop {Map} header-background [color: ('gray', 100)] - The header background color.
-/// @prop {Map} navigation-hover-color [color: ('secondary', 500)] - The :hover color of the icon button responsible for month navigation.
-/// @prop {Map} navigation-focus-color [color: ('secondary', 500)] - The :focus color of the icon button responsible for month navigation.
-/// @prop {Map} picker-foreground [color: ('gray', 900)]- The foreground color of the month and year pickers.
+/// @prop {Map} picker-foreground [color: ('gray', 900)] - The foreground color of the month and year pickers.
 /// @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-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 {Color} year-current-background [transparent] - The background color of the current year in years view.
+/// @prop {Map} year-hover-background [color: ('gray', 200)] - The :hover background color of the 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', 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.
 /// @prop {Map} year-selected-background [color: ('primary', 500)] - The background color of the selected year.
 /// @prop {Map} year-selected-hover-foreground [contrast-color: ('primary', 900)] - The foreground color of the selected year on :hover.
@@ -1469,67 +1559,55 @@ $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: ('gray', 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.
+/// @prop {Map} month-current-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the current month in months view.
 /// @prop {Map} month-current-hover-background [color: ('gray', 200)] - The :hover background color of the current month in months view.
 /// @prop {Map} month-selected-foreground [contrast-color: ('primary', 900)] - The foreground color of the selected month in month view.
 /// @prop {Map} month-selected-background [color: ('primary', 500)] - The background color of the selected month in month view.
-/// @prop {Map} month-selected-hover-foreground [contrast-color: ('primary', 900)]- The :hover foreground color of the selected month in month view.
-/// @prop {Map} month-selected-hover-background [color: ('primary', 600)]- The :hover background color of the selected month in month view.
+/// @prop {Map} month-selected-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the selected month in month view.
+/// @prop {Map} month-selected-hover-background [color: ('primary', 600)] - The :hover background color of the selected month in month view.
 /// @prop {Map} month-selected-current-foreground [contrast-color: ('primary', 900)] - The foreground color of the current/selected month in month view.
-/// @prop {Map} month-selected-current-background [color: ('primary', 500)]- The background color of the current/selected month in month view.
+/// @prop {Map} month-selected-current-background [color: ('primary', 500)] - The background color of the current/selected month in month view.
 /// @prop {Map} month-selected-current-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the current/selected month in month view.
 /// @prop {Map} month-selected-current-hover-background [color: ('primary', 600] - The :hover background color of the current/selected month in month view.
-/// @prop {Map} date-hover-foreground [contrast-color: 'gray', 200] - The :hover foreground color of a date.
 /// @prop {Map} date-hover-background [color: ('gray', 200)] - The :hover background color of a date.
-/// @prop {Map} date-focus-foreground [contrast-color: ('gray', 200)] - The :focus foreground color of a date.
 /// @prop {Map} date-focus-background [color: ('gray', 200)] - The :focus background color of a date.
-/// @prop {Map} date-selected-foreground [contrast-color: ('primary', '900')] - The foreground color of the selected date.
+/// @prop {Map} date-selected-foreground [contrast-color: ('primary', 900)] - The foreground color of the selected date.
 /// @prop {Map} date-selected-background [color: ('primary', 500)] - The background color of the selected date.
-/// @prop {Map} date-selected-hover-foreground [contrast-color: ('primary', '900')] - The :hover foreground color of the selected date.
+/// @prop {Map} date-selected-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the selected date.
 /// @prop {Map} date-selected-hover-background [color: ('primary', 600)] - The :hover background color of the selected date.
-/// @prop {Map} date-selected-focus-foreground [contrast-color: ('primary', '900')] - The :focus foreground color of the selected date.
+/// @prop {Map} date-selected-focus-foreground [contrast-color: ('primary', 900)] - The :focus foreground color of the selected date.
 /// @prop {Map} date-selected-focus-background [color: ('primary', 600)] - The :focus background color of the selected date.
-/// @prop {Map} date-selected-current-foreground [color: ('primary', 900)] - The foreground color of the selected current date.
+/// @prop {Map} date-selected-current-foreground [contrast-color: ('primary', 900)] - The foreground color of the selected current date.
 /// @prop {Map} date-selected-current-background [color: ('primary', 500)] - The background color of the selected current date.
-/// @prop {Map} date-selected-current-hover-foreground [color: ('primary', 900)] - The :hover foreground color of the selected current date.
+/// @prop {Map} date-selected-current-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the selected current date.
 /// @prop {Map} date-selected-current-hover-background [color: ('primary', 600)] - The :hover background color of the selected current date.
-/// @prop {Map} date-selected-current-focus-foreground [color: ('primary', 900)] - The :focus foreground color of the selected current date.
-/// @prop {Map} date-selected-current-focus-background [color: ('primary', 500)] - The :focus background color of the selected current date.
-/// @prop {Map} date-selected-current-range-foreground [color: ('gray', 900)] - The foreground color of the current date in the selected range.
+/// @prop {Map} date-selected-current-focus-foreground [date-selected-current-focus-foreground: ('primary', 900)] - The :focus foreground color of the selected current date.
+/// @prop {Map} date-selected-current-focus-background [color: ('primary', 600)] - The :focus background color of the selected current date.
 /// @prop {Color} date-selected-current-range-background [transparent] - The background color of the current date in the selected range.
-/// @prop {Map} date-selected-current-range-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the current date in the selected range.
 /// @prop {Map} date-selected-current-range-hover-background [color: ('gray', 200)] - The :hover background color of the current date in the selected range.
-/// @prop {Map} date-selected-current-range-focus-foreground [color: ('gray', 900)] - The :focus foreground color of the current date in the selected range.
 /// @prop {Map} date-selected-current-range-focus-background [color: ('gray', 200)] - The :focus background color of the current date in the selected range.
 /// @prop {Map} date-selected-range-background [color: ('primary', 500, .24)] - The background color of the selected range.
 /// @prop {Map} date-selected-range-foreground [color: ('gray', 900)] - The foreground color of the selected range.
-/// @prop {Map} date-selected-range-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the selected range.
 /// @prop {Map} date-selected-range-hover-background [color: ('gray', 200)] - The :hover background color of the selected range.
-/// @prop {Map} date-selected-range-focus-foreground [color: ('gray', 900)] - The :focus foreground color of the selected range.
 /// @prop {Map} date-selected-range-focus-background [color: ('gray', 200)] - The :focus background color of the selected range.
 /// @prop {Map} date-current-foreground [color: ('gray', 900)] - The foreground color of the current date.
-/// @prop {Color} date-current-background [transparent] - The background color of the current date.
-/// @prop {Map} date-current-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the current date.
 /// @prop {Map} date-current-hover-background [color: ('gray', 200)] - The :hover background color of the current date.
-/// @prop {Map} date-current-focus-foreground [color: ('gray', 900)] - The :focus foreground color of the current date.
 /// @prop {Map} date-current-focus-background [color: ('gray', 200)] - The :focus background color of the current date.
 /// @prop {Map} current-outline-color [color: ('gray', 900)] - The outline color of the current year/month in year/month views.
 /// @prop {Map} current-hover-outline-color [color: ('gray', 900)] - The :hover outline color of the current year/month in year/month views.
 /// @prop {Map} current-focus-outline-color [color: ('gray', 900)] - The :focus outline color of the current year/month in year/month views.
-/// @prop {Color} selected-outline-color [transparent] - The outline color of the selected year/month in year/month views.
-/// @prop {Color} selected-hover-outline-color [transparent] - The :hover outline color of the selected year/month in year/month views.
-/// @prop {Color} selected-focus-outline-color [transparent] - The :focus outline color of the selected year/month in year/month views.
 /// @prop {Map} selected-current-outline-color [color: ('gray', 900)] - The outline color of the selected current year/month in year/month views.
-/// @prop {Map} selected-current-hover-outline-color [color: ('gray', 900)] - The :hover outline color of the selected current year/month in year/month views.
-/// @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} selected-current-outline-hover-color [color: ('gray', 900)] - The :hover outline color of the selected current year/month in year/month views.
+/// @prop {Map} selected-current-outline-focus-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 {Map} weekday-color [color: ('info', 300)] - The foreground color for weekday labels.
 /// @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.
+/// @prop {List} date-range-border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for the date outline in range selection.
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for the calendar.
 /// @prop {List} month-year-border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for the month/year in month/year view.
 /// @prop {List} week-number-border-radius [(rem(0), rem(0), rem(8px))] - The border radius used for the week numbers column.
@@ -1540,11 +1618,36 @@ $fluent-calendar: extend(
 /// @prop {Map} date-selected-current-border-color [color: ('gray', 900)] - The border color of the selected current date.
 /// @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 {List} actions-divider-color [color: ('gray', 300)] - The border color used for the date-picker actions divider.
+/// @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,
     (
+        date-special-hover-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+        date-special-focus-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+        date-special-range-hover-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+        date-special-range-focus-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
         date-special-foreground: (
             color: (
                 'gray',
@@ -1569,6 +1672,12 @@ $bootstrap-calendar: extend(
                 800,
             ),
         ),
+        date-special-hover-border-color: (
+            color: (
+                'primary',
+                800,
+            ),
+        ),
         date-special-range-border-color: (
             color: (
                 'primary',
@@ -1605,16 +1714,10 @@ $bootstrap-calendar: extend(
                 100,
             ),
         ),
-        navigation-hover-color: (
-            color: (
-                'secondary',
-                500,
-            ),
-        ),
-        navigation-focus-color: (
+        year-hover-background: (
             color: (
-                'secondary',
-                500,
+                'gray',
+                200,
             ),
         ),
         year-current-foreground: (
@@ -1625,9 +1728,9 @@ $bootstrap-calendar: extend(
         ),
         year-current-background: transparent,
         year-current-hover-foreground: (
-            contrast-color: (
+            color: (
                 'gray',
-                200,
+                900,
             ),
         ),
         year-current-hover-background: (
@@ -1684,6 +1787,18 @@ $bootstrap-calendar: extend(
                 600,
             ),
         ),
+        month-hover-foreground: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        month-hover-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
         month-current-foreground: (
             color: (
                 'gray',
@@ -1692,9 +1807,9 @@ $bootstrap-calendar: extend(
         ),
         month-current-background: transparent,
         month-current-hover-foreground: (
-            contrast-color: (
+            color: (
                 'gray',
-                200,
+                900,
             ),
         ),
         month-current-hover-background: (
@@ -1751,24 +1866,12 @@ $bootstrap-calendar: extend(
                 600,
             ),
         ),
-        date-hover-foreground: (
-            contrast-color: (
-                'gray',
-                200,
-            ),
-        ),
         date-hover-background: (
             color: (
                 'gray',
                 200,
             ),
         ),
-        date-focus-foreground: (
-            contrast-color: (
-                'gray',
-                200,
-            ),
-        ),
         date-focus-background: (
             color: (
                 'gray',
@@ -1817,25 +1920,12 @@ $bootstrap-calendar: extend(
                 900,
             ),
         ),
-        date-current-background: transparent,
-        date-current-hover-foreground: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
         date-current-hover-background: (
             color: (
                 'gray',
                 200,
             ),
         ),
-        date-current-focus-foreground: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
         date-current-focus-background: (
             color: (
                 'gray',
@@ -1878,31 +1968,13 @@ $bootstrap-calendar: extend(
                 600,
             ),
         ),
-        date-selected-current-range-foreground: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
         date-selected-current-range-background: transparent,
-        date-selected-current-range-hover-foreground: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
         date-selected-current-range-hover-background: (
             color: (
                 'gray',
                 200,
             ),
         ),
-        date-selected-current-range-focus-foreground: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
         date-selected-current-range-focus-background: (
             color: (
                 'gray',
@@ -1922,24 +1994,12 @@ $bootstrap-calendar: extend(
                 0.24,
             ),
         ),
-        date-selected-range-hover-foreground: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
         date-selected-range-hover-background: (
             color: (
                 'gray',
                 200,
             ),
         ),
-        date-selected-range-focus-foreground: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
         date-selected-range-focus-background: (
             color: (
                 'gray',
@@ -1988,21 +2048,6 @@ $bootstrap-calendar: extend(
                 900,
             ),
         ),
-        current-outline-hover-color: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
-        current-outline-focus-color: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
-        selected-outline-color: transparent,
-        selected-hover-outline-color: transparent,
-        selected-focus-outline-color: transparent,
         selected-current-outline-color: (
             color: (
                 'gray',
@@ -2027,12 +2072,6 @@ $bootstrap-calendar: extend(
                 300,
             ),
         ),
-        weekend-color: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
         week-number-background: transparent,
         month-year-border-radius: (
             border-radius: (
@@ -2076,29 +2115,37 @@ $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.
-/// @prop {Map} picker-foreground [color: 'gray' 700] - The foreground color of the month and year pickers.
+/// @prop {Map} picker-foreground [color: ('gray', 700)] - The foreground color of the month and year pickers.
 /// @prop {Map} picker-background [contrast-color: ('gray', 900)] - The background color of the month and year pickers.
-/// @prop {Map} picker-hover-foreground [color: 'gray' 900] - The :hover foreground color of the month and year pickers.
-/// @prop {Map} picker-focus-foreground [color: 'gray' 900] - The :focus foreground color of the month and year pickers.
+/// @prop {Map} picker-hover-foreground [color: ('primary', 500)] - The :hover foreground color of the month and year pickers.
+/// @prop {Map} picker-focus-foreground [color: ('primary', 500)] - The :focus foreground color of the month and year pickers.
 /// @prop {Map} navigation-color [color: ('gray', 600)] - the color of the buttons responsible for navigation.
 /// @prop {Map} navigation-hover-color [color: ('primary', 500)] - The :hover color of the icon button responsible for month navigation.
 /// @prop {Map} navigation-focus-color [color: ('primary', 500)] - The :focus color of the icon button responsible for month navigation.
 /// @prop {Map} week-number-foreground [color: ('gray', 600)] - 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 {List} week-number-border-radius [(rem(4px), rem(0), rem(8px))] - The border radius used for the week numbers column.
 /// @prop {Map} date-hover-background [color: ('gray', 900, .05)] - The :hover background color of a date.
 /// @prop {Map} date-focus-background [color: ('gray', 900, .05)] - The :focus background color of date.
 /// @prop {Map} date-current-foreground [color: ('gray', 800)] - The foreground color of the current date.
 /// @prop {Map} date-disabled-foreground [color: ('gray', 900, .2)] - The foreground color of disabled dates.
+/// @prop {Map} date-disabled-range-foreground [color: ('gray', 800, .38)] - The foreground color of disabled dates in range selection.
+/// @prop {Map} date-current-hover-background [color: ('gray', 900, .05)] - The :hover background color of the current date.
 /// @prop {Map} date-current-border-color [color: ('primary', 500)] - The border color of the current date.
 /// @prop {Map} date-current-hover-border-color [color: ('primary', 400)] - The :hover border color of the current date.
 /// @prop {Map} date-current-focus-border-color [color: ('primary', 400)] - The :focus border color of the current date.
@@ -2108,6 +2155,8 @@ $bootstrap-calendar: extend(
 /// @prop {Map} date-special-hover-background [color: ('primary', 50)] - The background color of a special date.
 /// @prop {Map} date-special-focus-foreground [color: ('primary', 700)] - The foreground color of a special date.
 /// @prop {Map} date-special-focus-background [color: ('primary', 50)] - The background color of a special date.
+/// @prop {Map} date-special-range-hover-background [color: ('primary', 50)] - The :hover background color of a special date in range selection.
+/// @prop {Map} date-special-range-focus-background [color: ('primary', 50)] - The :focus background color of a special date in range selection.
 /// @prop {Map} date-selected-foreground [contrast-color: ('primary', 500)] - The foreground color of the selected date.
 /// @prop {Map} date-selected-background [color: ('primary', 500)] - The background color of the selected date.
 /// @prop {Map} date-selected-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the selected date.
@@ -2116,32 +2165,33 @@ $bootstrap-calendar: extend(
 /// @prop {Map} date-selected-focus-background [color: ('primary', 400)] - The :focus background color of the selected date.
 /// @prop {Map} date-selected-current-foreground [contrast-color: ('primary', 500)] - The foreground color of the selected current date.
 /// @prop {Map} date-selected-current-background [color: ('primary', 500)] - The background color of the selected current date.
-/// @prop {Map} date-selected-current-hover-foreground [contrast-color: ('primary', 400)] - The :hover foreground color of the selected current date.
+/// @prop {Map} date-selected-current-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the selected current date.
 /// @prop {Map} date-selected-current-hover-background [color: ('primary', 400)] - The :hover background color of the selected current date.
-/// @prop {Map} date-selected-current-focus-foreground [contrast-color: ('primary', 400)] - The :focus foreground color of the selected current date.
+/// @prop {Map} date-selected-current-focus-foreground [contrast-color: ('primary', 900)] - The :focus foreground color of the selected current date.
 /// @prop {Map} date-selected-current-focus-background [color: ('primary', 400)] - The :focus background color of the selected current date.
 /// @prop {Map} date-selected-current-border-color [contrast-color: ('primary', 900, .6)] - The border color of the selected current date.
 /// @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-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.
-/// @prop {Map} date-selected-current-range-hover-background [color: ('gray', 100)] - The :hover background color of the current date in the selected range.
-/// @prop {Map} date-selected-current-range-focus-background [color: ('gray', 900)] - The :focus background color of the current date in the selected range.
+/// @prop {Map} date-selected-current-range-foreground [color: ('gray', 800)] - The foreground color of the current date in 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: ('gray', 900, .05)] - The :hover background color of the selected range.
+/// @prop {Map} date-selected-range-focus-background [color: ('gray', 900, .05)] - The :focus background color of the selected range.
+/// @prop {Map} date-selected-current-range-background [color: ('primary', 300, .02)] - The background color of the current date in the selected range.
+/// @prop {Map} date-selected-current-range-hover-background [color: ('gray', 900, .05)] - The :hover background color of the current date in the selected range.
+/// @prop {Map} date-selected-current-range-focus-background [color: ('gray', 900, .05)] - The :focus background color of the current date in the selected range.
 /// @prop {Map} border-color [color: ('gray', 400)] - The calendar border color.
 /// @prop {Color} date-special-border-color [transparent] - The outline color around a special date.
-/// @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', 900, .05)] - The :hover background color of the year in years view.
+/// @prop {Color} date-special-hover-border-color [transparent] - The outline color around a special date.
+/// @prop {Map} year-hover-background [color: ('gray', 900, .05)] - 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 {Color} year-current-background [transparent]- The background color of the current year in years view.
+/// @prop {Color} year-current-background [transparent] - 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.
-/// @prop {Map} year-current-hover-background [color: ('grey', 900, .05)] - 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.
-/// @prop {Map} year-selected-background [color: ('primary', 500)]- The background color of the selected year in years view.
+/// @prop {Map} year-current-hover-background [color: ('gray', 900, .05)] - The :hover background color of the current year in years view.
+/// @prop {Map} year-selected-foreground [contrast-color: ('primary', 500)] - The foreground color of the selected year.
+/// @prop {Map} year-selected-background [color: ('primary', 500)] - The background color of the selected year in years view.
 /// @prop {Map} year-selected-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the selected year in years view.
-/// @prop {Map} year-selected-hover-background [color: ('primary' 400)] - The :hover background color of the selected year in years view.
+/// @prop {Map} year-selected-hover-background [color: ('primary', 400)] - The :hover background color of the selected year in years view.
 /// @prop {Map} year-selected-current-foreground [contrast-color: ('primary', 500)] - The foreground color of the current/selected year.
 /// @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.
@@ -2150,24 +2200,28 @@ $bootstrap-calendar: extend(
 /// @prop {Map} month-hover-background [color: ('gray', 900, .05)] - The :hover background 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 {Color} month-current-background [transparent] - 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.
-/// @prop {Map} month-current-hover-background [color: ('gray', 900, .05)]- 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', 900, .05)] - The :hover background color of the current month in month view.
 /// @prop {Map} month-selected-foreground [contrast-color: ('primary', 500)] - The foreground color of the selected month in month view.
 /// @prop {Map} month-selected-background [color: ('primary', 500)] - The background color of the selected month in month view.
-/// @prop {Map} month-selected-hover-foreground [contrast-color: ('primary', 900)]- The :hover foreground color of the selected month in month view.
-/// @prop {Map} month-selected-hover-background [color: ('primary', 400)]- The :hover background color of the selected month in month view.
+/// @prop {Map} month-selected-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the selected month in month view.
+/// @prop {Map} month-selected-hover-background [color: ('primary', 400)] - The :hover background color of the selected month in month view.
 /// @prop {Map} month-selected-current-foreground [contrast-color: ('primary', 500)] - The foreground color of the current/selected month in month view.
-/// @prop {Map} month-selected-current-background [color: ('primary', 500)]- The background color of the current/selected month in month view.
+/// @prop {Map} month-selected-current-background [color: ('primary', 500)] - The background color of the current/selected month in month view.
 /// @prop {Map} month-selected-current-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the current/selected month in month view.
 /// @prop {Map} month-selected-current-hover-background [color: ('primary', 400)] - The :hover background color of the current/selected month in month view.
 /// @prop {Map} current-outline-color [color: ('primary', 500)] - The outline color of the current year/month in year/month views.
 /// @prop {Map} current-outline-hover-color [color: ('primary', 400)] - The :hover outline color of the current year/month in year/month views.
 /// @prop {Map} current-outline-focus-color [color: ('primary', 400)] - The :focus outline color of the current year/month in year/month views.
 /// @prop {Map} selected-current-outline-color [contrast-color: ('gray', 900, .6)] - The outline color of the selected current year/month in year/month views.
-/// @prop {Map} selected-current-hover-outline-color [contrast-color: ('gray', 900, .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', 900, .6)] - The :focus outline color of the selected current year/month in year/month views.
+/// @prop {Map} selected-current-outline-hover-color [contrast-color: ('gray', 900, .6)] - The :hover outline color of the selected current year/month in year/month views.
+/// @prop {Map} selected-current-outline-focus-color [contrast-color: ('gray', 900, .6)] - The :focus outline color of the selected current year/month in year/month 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 {List} actions-divider-color [color: ('gray', 400)] - The border color used for the date-picker actions divider.
+/// @prop {List} border-radius [(rem(6px), rem(0), rem(6px))] - The border radius used for calendar.
+/// @prop {List} week-number-border-radius [(rem(4px), rem(0), rem(4px))] - The border radius used for the week numbers column.
+/// @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,
@@ -2185,6 +2239,19 @@ $indigo-calendar: extend(
                 800,
             ),
         ),
+        date-current-hover-background: (
+            color: (
+                'gray',
+                900,
+                0.05,
+            ),
+        ),
+        weekend-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
         content-background: (
             contrast-color: (
                 'gray',
@@ -2217,14 +2284,14 @@ $indigo-calendar: extend(
         ),
         picker-hover-foreground: (
             color: (
-                'gray',
-                900,
+                'primary',
+                500,
             ),
         ),
         picker-focus-foreground: (
             color: (
-                'gray',
-                900,
+                'primary',
+                500,
             ),
         ),
         navigation-color: (
@@ -2262,7 +2329,14 @@ $indigo-calendar: extend(
             border-radius: (
                 rem(4px),
                 rem(0),
-                rem(8px),
+                rem(4px),
+            ),
+        ),
+        border-radius: (
+            border-radius: (
+                rem(6px),
+                rem(0),
+                rem(6px),
             ),
         ),
         date-hover-background: (
@@ -2292,6 +2366,13 @@ $indigo-calendar: extend(
                 0.2,
             ),
         ),
+        date-disabled-range-foreground: (
+            color: (
+                'gray',
+                800,
+                0.38,
+            ),
+        ),
         date-current-border-color: (
             color: (
                 'primary',
@@ -2323,6 +2404,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',
@@ -2347,7 +2441,20 @@ $indigo-calendar: extend(
                 50,
             ),
         ),
+        date-special-range-hover-background: (
+            color: (
+                'primary',
+                50,
+            ),
+        ),
+        date-special-range-focus-background: (
+            color: (
+                'primary',
+                50,
+            ),
+        ),
         date-special-border-color: transparent,
+        date-special-hover-border-color: transparent,
         date-selected-foreground: (
             contrast-color: (
                 'primary',
@@ -2374,7 +2481,7 @@ $indigo-calendar: extend(
         ),
         date-selected-focus-foreground: (
             contrast-color: (
-                'secondary',
+                'primary',
                 900,
             ),
         ),
@@ -2441,6 +2548,12 @@ $indigo-calendar: extend(
                 0.6,
             ),
         ),
+        date-selected-current-range-foreground: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
         date-selected-range-foreground: (
             color: (
                 'gray',
@@ -2495,12 +2608,6 @@ $indigo-calendar: extend(
                 400,
             ),
         ),
-        year-hover-foreground: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
         year-hover-background: (
             color: (
                 'gray',