fix(DatePicker,DateRangePicker): fix the background color error when …

…the cell is hovered (#3018)

src/Calendar/TableHeaderRow.tsx

@@ -23,10 +23,10 @@ const TableHeaderRow: RsRefForwardingComponent<'div', TableHeaderRowProps> = Rea
 
     return (
       <Component role="row" {...rest} ref={ref} className={classes}>
-        {showWeekNumbers && <div className={prefix('cell')} role="columnheader" />}
+        {showWeekNumbers && <div className={prefix('header-cell')} role="columnheader" />}
         {items.map(key => (
-          <div key={key} className={prefix('cell')} role="columnheader">
-            <span className={prefix('cell-content')}>{locale?.[key]}</span>
+          <div key={key} className={prefix('header-cell')} role="columnheader">
+            <span className={prefix('header-cell-content')}>{locale?.[key]}</span>
           </div>
         ))}
       </Component>

src/Calendar/styles/index.less

@@ -370,7 +370,8 @@
   }
 }
 
-.rs-calendar-table-cell {
+.rs-calendar-table-cell,
+.rs-calendar-table-header-cell {
   display: table-cell;
   width: 1%;
   padding: @calendar-table-cell-padding 0;
@@ -418,21 +419,19 @@
 }
 
 // Table header row
-.rs-calendar-table-header-row {
-  .rs-calendar-table-cell-content {
-    color: var(--rs-text-secondary);
-    font-size: @font-size-small;
-    line-height: @line-height-small;
-    padding-top: 2px;
-    padding-bottom: 2px;
-
-    &,
-    &:hover,
-    &:focus,
-    &:hover:focus {
-      background: none;
-      cursor: auto;
-    }
+.rs-calendar-table-header-cell-content {
+  color: var(--rs-text-secondary);
+  font-size: @font-size-small;
+  line-height: @line-height-small;
+  padding-top: 2px;
+  padding-bottom: 2px;
+
+  &,
+  &:hover,
+  &:focus,
+  &:hover:focus {
+    background: none;
+    cursor: auto;
   }
 }
 

src/DatePicker/styles/index.less

@@ -2,6 +2,7 @@
 @import '../../styles/mixins/listbox';
 @import '../../Button/styles/mixin';
 @import '../../Picker/styles/mixin';
+@import 'mixin';
 
 // DatePicker Picker
 // ----------------------
@@ -91,6 +92,10 @@
       .listbox-option-active();
     }
 
+    .rs-calendar-month-dropdown-cell-active .rs-calendar-month-dropdown-cell-content:hover {
+      .calendar-cell-selected-hover();
+    }
+
     .rs-calendar-table-header-row .rs-calendar-table-cell-content {
       height: 24px;
       padding-top: 0;
@@ -109,6 +114,10 @@
       .listbox-option-active();
     }
 
+    .rs-calendar-table-cell-selected:hover .rs-calendar-table-cell-content {
+      .calendar-cell-selected-hover();
+    }
+
     .rs-calendar-month-dropdown-scroll {
       height: 227px;
     }

src/DatePicker/styles/mixin.less

@@ -0,0 +1,8 @@
+.calendar-cell-selected-hover() {
+  background-color: var(--rs-calendar-cell-selected-hover-bg);
+  color: var(--rs-calendar-date-selected-text);
+
+  .high-contrast-mode({
+    color: var(--rs-calendar-date-selected-text);
+  });
+}

src/styles/color-modes/dark.less

@@ -339,6 +339,7 @@
   --rs-calendar-range-bg: fade(@H900-dark, 50%);
   --rs-calendar-time-unit-bg: @B600-dark;
   --rs-calendar-date-selected-text: #fff;
+  --rs-calendar-cell-selected-hover-bg: @H700;
 
   // Popover
   --rs-popover-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);

src/styles/color-modes/high-contrast.less

@@ -355,6 +355,7 @@
   --rs-calendar-range-bg: fade(@H900-high-contrast, 50%);
   --rs-calendar-time-unit-bg: @B900-high-contrast;
   --rs-calendar-date-selected-text: @B900-high-contrast;
+  --rs-calendar-cell-selected-hover-bg: @B050-high-contrast;
 
   // Popover
   --rs-popover-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);

src/styles/color-modes/light.less

@@ -348,6 +348,7 @@
   --rs-calendar-range-bg: fade(@H100, 50%);
   --rs-calendar-time-unit-bg: @B050;
   --rs-calendar-date-selected-text: #fff;
+  --rs-calendar-cell-selected-hover-bg: @H700;
 
   // Popover
   --rs-popover-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);