fix(react-datepicker-compat): Fix theming issues with all themes and WHCM

packages/react-components/react-datepicker-compat/src/components/Calendar/Calendar.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Backspace, Enter, Escape, PageDown, PageUp, Space } from '@fluentui/keyboard-keys';
 import { useControllableState } from '@fluentui/react-utilities';
-import { mergeClasses } from '@griffel/react';
 import {
   addMonths,
   addYears,
@@ -196,7 +195,7 @@ export const Calendar: React.FunctionComponent<CalendarProps> = React.forwardRef
       return (
         showGoToToday && (
           <button
-            className={mergeClasses('js-goToday', classes.goTodayButton)}
+            className={classes.goTodayButton}
             onClick={onGotoToday}
             onKeyDown={onButtonKeyDown(onGotoToday)}
             type="button"

packages/react-components/react-datepicker-compat/src/components/Calendar/useCalendarStyles.ts

@@ -79,7 +79,7 @@ const useGoTodayButtonStyles = makeStyles({
       color: tokens.colorBrandForeground1,
       cursor: 'pointer',
     },
-    '&:active': {
+    '&:hover:active': {
       color: tokens.colorBrandForeground2,
     },
     '&:disabled': {

packages/react-components/react-datepicker-compat/src/components/CalendarDay/useCalendarDayStyles.ts

@@ -74,7 +74,7 @@ const useMonthAndYearStyles = makeStyles({
       color: tokens.colorNeutralForeground1Hover,
       cursor: 'pointer',
     },
-    '&:active': {
+    '&:hover:active': {
       backgroundColor: tokens.colorBrandBackground2,
     },
   },
@@ -105,13 +105,14 @@ const useHeaderIconButtonStyles = makeStyles({
     width: '28px',
 
     '&:hover': {
-      backgroundColor: tokens.colorBrandBackground2,
-      color: tokens.colorNeutralForeground1Hover,
+      backgroundColor: tokens.colorBrandBackgroundInvertedHover,
+      color: tokens.colorBrandForegroundOnLightHover,
       cursor: 'pointer',
       ...shorthands.outline('1px', 'solid', tokens.colorTransparentStroke),
     },
-    '&:active': {
-      backgroundColor: tokens.colorBrandBackground2,
+    '&:hover:active': {
+      backgroundColor: tokens.colorBrandBackgroundInvertedPressed,
+      color: tokens.colorBrandForegroundOnLightPressed,
     },
   },
 });
@@ -122,10 +123,6 @@ const useDisabledStyleStyles = makeStyles({
       color: tokens.colorNeutralForegroundDisabled,
       pointerEvents: 'none',
     },
-    '@media (forced-colors: active)': {
-      color: 'GrayText',
-      forcedColorAdjust: 'none',
-    },
   },
 });
 

packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/CalendarGridDayCell.tsx

@@ -216,7 +216,6 @@ export const CalendarGridDayCell: React.FunctionComponent<CalendarGridDayCellPro
         classNames.dayCell,
         weekCorners && cornerStyle,
         day.isSelected && classNames.daySelected,
-        day.isSelected && 'ms-CalendarDay-daySelected',
         !day.isInBounds && classNames.dayOutsideBounds,
         !day.isInMonth && classNames.dayOutsideNavigatedMonth,
       )}
@@ -241,11 +240,7 @@ export const CalendarGridDayCell: React.FunctionComponent<CalendarGridDayCellPro
       <button
         key={day.key + 'button'}
         aria-hidden={ariaHidden}
-        className={mergeClasses(
-          classNames.dayButton,
-          day.isToday && classNames.dayIsToday,
-          day.isToday && 'ms-CalendarDay-dayIsToday',
-        )}
+        className={mergeClasses(classNames.dayButton, day.isToday && classNames.dayIsToday)}
         aria-label={ariaLabel}
         id={isNavigatedDate ? activeDescendantId : undefined}
         disabled={!ariaHidden && !day.isInBounds}

packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.ts

@@ -1,7 +1,6 @@
 import { tokens } from '@fluentui/react-theme';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import {
-  DateRangeType,
   DURATION_2,
   DURATION_3,
   EASING_FUNCTION_1,
@@ -84,19 +83,17 @@ const useDayCellStyles = makeStyles({
     ...shorthands.padding(0),
     position: 'relative',
     width: '28px',
-
     '@media (forced-colors: active)': {
       backgroundColor: 'Window',
       color: 'WindowText',
-      forcedColorAdjust: 'none',
-      zIndex: 0,
     },
 
     [`&.${extraCalendarDayGridClassNames.hoverStyle}`]: {
       color: tokens.colorNeutralForeground1Static,
       backgroundColor: tokens.colorBrandBackgroundInvertedHover,
       '@media (forced-colors: active)': {
         backgroundColor: 'Window',
+        color: 'WindowText',
         ...shorthands.outline('1px', 'solid', 'Highlight'),
         zIndex: 3,
       },
@@ -111,35 +108,34 @@ const useDayCellStyles = makeStyles({
         color: 'Highlight',
       },
     },
-
-    [`&.${extraCalendarDayGridClassNames.pressedStyle}.${extraCalendarDayGridClassNames.hoverStyle}`]: {
-      '@media (forced-colors: active)': {
-        backgroundColor: 'Window',
-        ...shorthands.outline('1px', 'solid', 'Highlight'),
-      },
-    },
   },
 });
 
 const useDaySelectedStyles = makeStyles({
-  dateRangeTypeNotMonth: {
+  base: {
     backgroundColor: tokens.colorBrandBackgroundInvertedSelected,
     color: tokens.colorNeutralForeground1Static,
 
+    '@media (forced-colors: active)': {
+      backgroundColor: 'Highlight',
+      ...shorthands.borderColor('Highlight'),
+      color: 'HighlightText',
+      forcedColorAdjust: 'none',
+    },
+
     [`&:hover, &.${extraCalendarDayGridClassNames.hoverStyle}, &.${extraCalendarDayGridClassNames.pressedStyle}`]: {
       color: tokens.colorNeutralForeground1Static,
-      backgroundColor: tokens.colorBrandBackgroundInvertedSelected + ' !important',
+      backgroundColor: tokens.colorBrandBackgroundInvertedSelected,
       '@media (forced-colors: active)': {
-        backgroundColor: 'Highlight!important',
-        color: 'HighlightText!important',
+        backgroundColor: 'Highlight',
+        color: 'HighlightText',
       },
     },
 
-    '@media (forced-colors: active)': {
-      backgroundColor: 'Highlight!important',
-      ...shorthands.borderColor('Highlight!important'),
-      color: 'HighlightText!important',
-      forcedColorAdjust: 'none',
+    [`& > .${calendarDayGridClassNames.dayMarker}`]: {
+      '@media (forced-colors: active)': {
+        backgroundColor: 'Window',
+      },
     },
   },
 });
@@ -175,7 +171,7 @@ const useWeekDayLabelCellStyles = makeStyles({
 
 const useWeekNumberCellStyles = makeStyles({
   base: {
-    backgroundColor: tokens.colorBrandBackgroundInvertedSelected,
+    backgroundColor: tokens.colorTransparentBackground,
     ...shorthands.borderColor(tokens.colorNeutralStroke2),
     ...shorthands.borderRight('1px', 'solid'),
     boxSizing: 'border-box',
@@ -191,17 +187,26 @@ const useWeekNumberCellStyles = makeStyles({
 
 const useDayOutsideBoundsStyles = makeStyles({
   base: {
-    '&, &:disabled, & button': {
+    [`&, &:disabled, & button, &.${extraCalendarDayGridClassNames.hoverStyle}` +
+    `, &.${extraCalendarDayGridClassNames.pressedStyle}`]: {
+      backgroundColor: tokens.colorTransparentBackground,
       color: tokens.colorNeutralForegroundDisabled,
       pointerEvents: 'none',
     },
+    '@media (forced-colors: active)': {
+      color: 'GrayText',
+    },
   },
 });
 
 const useDayOutsideNavigatedMonthStyles = makeStyles({
   lightenDaysOutsideNavigatedMonth: {
     color: tokens.colorNeutralForeground4,
     fontWeight: tokens.fontWeightRegular,
+
+    '@media (forced-colors: active)': {
+      color: 'GrayText',
+    },
   },
 });
 
@@ -229,17 +234,24 @@ const useDayButtonStyles = makeStyles({
 
 const useDayIsTodayStyles = makeStyles({
   base: {
-    backgroundColor: tokens.colorBrandBackground + '!important',
+    backgroundColor: tokens.colorBrandBackground,
     ...shorthands.borderRadius('100%'),
-    color: tokens.colorNeutralForegroundOnBrand + '!important',
-    fontWeight: tokens.fontWeightSemibold + '!important',
+    color: tokens.colorNeutralForegroundOnBrand,
+    fontWeight: tokens.fontWeightSemibold,
 
     '@media (forced-colors: active)': {
-      backgroundColor: 'WindowText!important',
-      ...shorthands.borderColor('WindowText!important'),
-      color: 'WindowText!important',
+      backgroundColor: 'WindowText',
+      ...shorthands.borderColor('WindowText'),
+      color: 'Window',
       forcedColorAdjust: 'none',
     },
+
+    [`& > .${calendarDayGridClassNames.dayMarker}`]: {
+      backgroundColor: tokens.colorNeutralForegroundOnBrand,
+      '@media (forced-colors: active)': {
+        backgroundColor: 'Window',
+      },
+    },
   },
 });
 
@@ -278,7 +290,7 @@ const useLastTransitionWeekStyles = makeStyles({
 
 const useDayMarkerStyles = makeStyles({
   base: {
-    backgroundColor: tokens.colorNeutralForeground2,
+    backgroundColor: tokens.colorBrandForeground2,
     ...shorthands.borderRadius('100%'),
     bottom: '1px',
     height: '4px',
@@ -292,19 +304,6 @@ const useDayMarkerStyles = makeStyles({
       backgroundColor: 'WindowText',
       forcedColorAdjust: 'none',
     },
-
-    [`&.${calendarDayGridClassNames.dayIsToday}`]: {
-      backgroundColor: tokens.colorNeutralBackground1,
-      '@media (forced-colors: active)': {
-        backgroundColor: 'Window',
-      },
-    },
-
-    [`&.${calendarDayGridClassNames.daySelected}`]: {
-      '@media (forced-colors: active)': {
-        backgroundColor: 'HighlightText',
-      },
-    },
   },
 });
 
@@ -347,8 +346,7 @@ export const useCalendarDayGridStyles_unstable = (props: CalendarDayGridStylePro
   const dayMarkerStyles = useDayMarkerStyles();
   const cornerBorderAndRadiusStyles = useCornerBorderAndRadiusStyles();
 
-  const { animateBackwards, animationDirection, dateRangeType, lightenDaysOutsideNavigatedMonth, showWeekNumbers } =
-    props;
+  const { animateBackwards, animationDirection, lightenDaysOutsideNavigatedMonth, showWeekNumbers } = props;
 
   return {
     wrapper: mergeClasses(calendarDayGridClassNames.wrapper, wrapperStyles.base),
@@ -358,10 +356,7 @@ export const useCalendarDayGridStyles_unstable = (props: CalendarDayGridStylePro
       showWeekNumbers && tableStyles.showWeekNumbers,
     ),
     dayCell: mergeClasses(calendarDayGridClassNames.dayCell, dayCellStyles.base, cornerBorderAndRadiusStyles.corners),
-    daySelected: mergeClasses(
-      calendarDayGridClassNames.daySelected,
-      dateRangeType !== DateRangeType.Month && daySelectedStyles.dateRangeTypeNotMonth,
-    ),
+    daySelected: mergeClasses(calendarDayGridClassNames.daySelected, daySelectedStyles.base),
     weekRow: mergeClasses(
       calendarDayGridClassNames.weekRow,
       animateBackwards !== undefined && weekRowStyles.base,

packages/react-components/react-datepicker-compat/src/components/CalendarPicker/useCalendarPickerStyles.ts

@@ -74,14 +74,14 @@ const useCurrentItemButtonStyles = makeStyles({
   },
   hasHeaderClickCallback: {
     '&:hover': {
-      backgroundColor: tokens.colorBrandBackground2,
-      color: tokens.colorNeutralForeground1Hover,
+      backgroundColor: tokens.colorBrandBackgroundInvertedHover,
+      color: tokens.colorBrandForegroundOnLightHover,
       cursor: 'pointer',
       ...shorthands.outline('1px', 'solid', tokens.colorTransparentStroke),
     },
-    '&:active': {
-      backgroundColor: tokens.colorBrandBackground2,
-      color: tokens.colorNeutralForeground1Pressed,
+    '&:hover:active': {
+      backgroundColor: tokens.colorBrandBackgroundInvertedPressed,
+      color: tokens.colorBrandForegroundOnLightPressed,
       cursor: 'pointer',
       ...shorthands.outline('1px', 'solid', tokens.colorTransparentStroke),
     },
@@ -115,11 +115,16 @@ const useNavigationButtonStyles = makeStyles({
     width: '28px',
 
     '&:hover': {
-      backgroundColor: tokens.colorBrandBackground2,
-      color: tokens.colorNeutralForeground1Hover,
+      backgroundColor: tokens.colorBrandBackgroundInvertedHover,
+      color: tokens.colorBrandForegroundOnLightHover,
       cursor: 'pointer',
       ...shorthands.outline('1px', 'solid', tokens.colorTransparentStroke),
     },
+
+    '&:hover:active': {
+      backgroundColor: tokens.colorBrandBackgroundInvertedPressed,
+      color: tokens.colorBrandForegroundOnLightPressed,
+    },
   },
 });
 
@@ -194,7 +199,7 @@ const useItemButtonStyles = makeStyles({
         ...shorthands.outline('1px', 'solid', 'Highlight'),
       },
     },
-    '&:active': {
+    '&:hover:active': {
       backgroundColor: tokens.colorBrandBackgroundInvertedPressed,
 
       '@media (forced-colors: active)': {
@@ -209,23 +214,24 @@ const useItemButtonStyles = makeStyles({
 const useCurrentStyles = makeStyles({
   highlightCurrent: {
     backgroundColor: tokens.colorBrandBackground,
-    color: tokens.colorNeutralForegroundOnBrand + '!important',
+    color: tokens.colorNeutralForegroundOnBrand,
     fontWeight: tokens.fontWeightSemibold,
 
-    '&:hover': {
+    '@media (forced-colors: active)': {
+      backgroundColor: 'WindowText',
+      color: 'Window',
+      forcedColorAdjust: 'none',
+    },
+    '&:hover, &:hover:active': {
       backgroundColor: tokens.colorBrandBackground,
+      color: tokens.colorNeutralForegroundOnBrand,
 
       '@media (forced-colors: active)': {
         backgroundColor: 'WindowText',
         color: 'Window',
         forcedColorAdjust: 'none',
       },
     },
-    '@media (forced-colors: active)': {
-      backgroundColor: 'WindowText',
-      color: 'Window',
-      forcedColorAdjust: 'none',
-    },
   },
 });
 
@@ -235,6 +241,11 @@ const useSelectedStyles = makeStyles({
     color: tokens.colorNeutralForeground1Static,
     fontWeight: tokens.fontWeightSemibold,
 
+    '@media (forced-colors: active)': {
+      backgroundColor: 'Highlight',
+      color: 'Window',
+      forcedColorAdjust: 'none',
+    },
     '& div': {
       fontWeight: tokens.fontWeightSemibold,
     },
@@ -248,19 +259,8 @@ const useSelectedStyles = makeStyles({
         forcedColorAdjust: 'none',
       },
     },
-    '&:active': {
+    '&:hover:active': {
       backgroundColor: tokens.colorBrandBackgroundInvertedPressed,
-
-      '@media (forced-colors: active)': {
-        backgroundColor: 'Highlight',
-        color: 'Window',
-        forcedColorAdjust: 'none',
-      },
-    },
-    '@media (forced-colors: active)': {
-      backgroundColor: 'Highlight',
-      color: 'Window',
-      forcedColorAdjust: 'none',
     },
   },
 });