refactor(calendar): add hover and focus styles for inactive and weekend states across themes

Author: desig9stein

src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss

@@ -71,10 +71,6 @@ $border-size: rem(1px);
     color: var-get($theme, 'weekday-color');
 }
 
-[part~='weekend'] {
-    color: var-get($theme, 'weekend-color');
-}
-
 [part~='date'] {
     height: var-get($theme, 'size');
     border-top: $border-size solid transparent;
@@ -143,13 +139,17 @@ $border-size: rem(1px);
         border-color: var-get($theme, 'date-focus-border-color');
     }
 
-    &[part~='inactive'][part~='preview']:not([part~='disabled']),
-    &[part~='inactive'][part~='range']:not([part~='first'], [part~='last']) {
-        color: var-get($theme, 'date-selected-range-foreground');
-    }
 
-    &[part~='inactive']:not([part~='disabled']) {
+    &[part~='inactive']:not([part~='selected'][part~='range'], [part~='range'], [part~='disabled'], [part~='first'], [part~='last'])  {
         color: var-get($theme, 'inactive-color');
+
+        &:hover {
+            color: var-get($theme, 'date-hover-foreground');
+        }
+
+        &:focus {
+            color:  var-get($theme, 'date-focus-foreground');
+        }
     }
 
     &[part~='preview'][part~='first'],
@@ -189,6 +189,18 @@ $border-size: rem(1px);
         color: var-get($theme, 'date-hover-foreground');
     }
 
+    &[part~='weekend']:not([part~='selected'][part~='range'], [part~='current'], [part~='special'], [part~='selected'], [part~='preview'], [part~='disabled']) {
+        color: var-get($theme, 'weekend-color');
+
+        &:hover {
+            color: var-get($theme, 'date-hover-foreground');
+        }
+
+        &:focus {
+            color:  var-get($theme, 'date-focus-foreground');
+        }
+    }
+
     &[part~='range'][part~='selected']:not([part~='current'], [part~='special'], [part~='first'], [part~='last'], [part~='first'][part~='last']),
     &[part~='range'][part~='preview']:not([part~='current'], [part~='special'], [part~='first'], [part~='last'], [part~='disabled'], [part~='first'][part~='last']) {
         color: var-get($theme, 'date-selected-range-foreground');

src/components/calendar/themes/shared/indigo/days-view.indigo.scss

@@ -105,8 +105,16 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
         background: var-get($theme, 'date-hover-background');
     }
 
-    &[part~='inactive']:not([part~='selected'][part~='range'] , [part~='disabled']) {
+    &[part~='inactive']:not([part~='selected'][part~='range'], [part~='disabled']) {
         color: var-get($theme, 'inactive-color');
+
+        &:hover {
+            color: var-get($theme, 'date-hover-foreground');
+        }
+
+        &:focus {
+            color:  var-get($theme, 'date-focus-foreground');
+        }
     }
 
     &[part~='disabled']:not([part~='selected'],[part~='special'],[part~='current']) {
@@ -132,8 +140,16 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
         border-color: var-get($theme, 'date-focus-border-color');
     }
 
-    [part~='weekend'] {
+    &[part~='weekend']:not([part~='selected'][part~='range'], [part~='current'], [part~='special'], [part~='selected'], [part~='disabled']) {
         color: var-get($theme, 'weekend-color');
+
+        &:hover {
+            color: var-get($theme, 'date-hover-foreground');
+        }
+
+        &:focus {
+            color:  var-get($theme, 'date-focus-foreground');
+        }
     }
 
     &[part~='selected'] {

src/components/calendar/themes/shared/material/days-view.material.scss

@@ -108,8 +108,15 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
 
     &[part~='inactive']:not([part~='selected'][part~='range'], [part~='disabled']) {
         color: var-get($theme, 'inactive-color');
-    }
 
+        &:hover {
+            color: var-get($theme, 'date-hover-foreground');
+        }
+
+        &:focus {
+            color:  var-get($theme, 'date-focus-foreground');
+        }
+    }
 
     &[part~='disabled']:not([part~='selected'],[part~='special'],[part~='current']) {
         color: var-get($theme, 'date-disabled-foreground');
@@ -135,8 +142,16 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
         border-color: var-get($theme, 'date-focus-border-color');
     }
 
-    &[part~='weekend'] {
+    &[part~='weekend']:not([part~='selected'][part~='range'], [part~='current'], [part~='special'], [part~='selected'], [part~='disabled']) {
         color: var-get($theme, 'weekend-color');
+
+        &:hover {
+            color: var-get($theme, 'date-hover-foreground');
+        }
+
+        &:focus {
+            color:  var-get($theme, 'date-focus-foreground');
+        }
     }
 
     &[part~='selected'] {