fix(calendar): update weekend date styles in range preview mode

- Added new styles for weekend and weekend-active states in date range preview. Ensured proper hover and focus color

Author: desig9stein

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

@@ -183,6 +183,14 @@
             @extend %date-range-preview-inactive !optional;
         }
 
+        @include e(date, $mods: ('range-preview', 'weekend')) {
+            @extend %date-range-preview-weekend !optional;
+        }
+
+        @include e(date, $mods: ('range-preview', 'weekend', 'active')) {
+            @extend %date-range-preview-weekend-active !optional;
+        }
+
         @include e(date, $mods: ('range-preview', 'current')) {
             @extend %date-range-preview-current !optional;
         }

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

@@ -1772,6 +1772,22 @@
         }
     }
 
+    %date-range-preview-weekend {
+        %date-inner {
+            color: var-get($theme, 'weekend-color');
+
+            &:hover {
+                color: var-get($theme, 'date-hover-foreground');
+            }
+        }
+    }
+
+    %date-range-preview-weekend-active {
+        %date-inner {
+            color: var-get($theme, 'date-focus-foreground');
+        }
+    }
+
     %date-range-preview-inactive {
         %date-inner {
             color: var-get($theme, 'inactive-color');