From 6aa5f66475eccb10cbfd57037527964cfd65214d Mon Sep 17 00:00:00 2001
From: Esteban Munoz <esteban.230@hotmail.com>
Date: Tue, 28 Mar 2023 18:06:15 -0700
Subject: [PATCH 1/6] fixing WHCM

---
 .../CalendarDay/useCalendarDayStyles.ts       |  4 --
 .../CalendarDayGrid/CalendarGridDayCell.tsx   |  7 +-
 .../useCalendarDayGridStyles.ts               | 69 +++++++++----------
 .../CalendarPicker/useCalendarPickerStyles.ts | 26 +++----
 4 files changed, 42 insertions(+), 64 deletions(-)

diff --git a/packages/react-components/react-datepicker-compat/src/components/CalendarDay/useCalendarDayStyles.ts b/packages/react-components/react-datepicker-compat/src/components/CalendarDay/useCalendarDayStyles.ts
index c2addc2ed1c05e..de4ee2bf01b97d 100644
--- a/packages/react-components/react-datepicker-compat/src/components/CalendarDay/useCalendarDayStyles.ts
+++ b/packages/react-components/react-datepicker-compat/src/components/CalendarDay/useCalendarDayStyles.ts
@@ -122,10 +122,6 @@ const useDisabledStyleStyles = makeStyles({
       color: tokens.colorNeutralForegroundDisabled,
       pointerEvents: 'none',
     },
-    '@media (forced-colors: active)': {
-      color: 'GrayText',
-      forcedColorAdjust: 'none',
-    },
   },
 });
 
diff --git a/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/CalendarGridDayCell.tsx b/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/CalendarGridDayCell.tsx
index 79a1217bcce1f2..7af91fdd078730 100644
--- a/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/CalendarGridDayCell.tsx
+++ b/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}
diff --git a/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.ts b/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.ts
index d8e40fb7015485..1d460bcb056ada 100644
--- a/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.ts
+++ b/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,12 +83,9 @@ const useDayCellStyles = makeStyles({
     ...shorthands.padding(0),
     position: 'relative',
     width: '28px',
-
     '@media (forced-colors: active)': {
       backgroundColor: 'Window',
       color: 'WindowText',
-      forcedColorAdjust: 'none',
-      zIndex: 0,
     },
 
     [`&.${extraCalendarDayGridClassNames.hoverStyle}`]: {
@@ -97,6 +93,7 @@ const useDayCellStyles = makeStyles({
       backgroundColor: tokens.colorBrandBackgroundInvertedHover,
       '@media (forced-colors: active)': {
         backgroundColor: 'Window',
+        color: 'WindowText!important',
         ...shorthands.outline('1px', 'solid', 'Highlight'),
         zIndex: 3,
       },
@@ -111,21 +108,21 @@ 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!important',
+      ...shorthands.borderColor('Highlight!important'),
+      color: 'HighlightText!important',
+      forcedColorAdjust: 'none',
+    },
+
     [`&:hover, &.${extraCalendarDayGridClassNames.hoverStyle}, &.${extraCalendarDayGridClassNames.pressedStyle}`]: {
       color: tokens.colorNeutralForeground1Static,
       backgroundColor: tokens.colorBrandBackgroundInvertedSelected + ' !important',
@@ -135,11 +132,10 @@ const useDaySelectedStyles = makeStyles({
       },
     },
 
-    '@media (forced-colors: active)': {
-      backgroundColor: 'Highlight!important',
-      ...shorthands.borderColor('Highlight!important'),
-      color: 'HighlightText!important',
-      forcedColorAdjust: 'none',
+    [`& > .${calendarDayGridClassNames.dayMarker}`]: {
+      '@media (forced-colors: active)': {
+        backgroundColor: 'Window',
+      },
     },
   },
 });
@@ -195,6 +191,9 @@ const useDayOutsideBoundsStyles = makeStyles({
       color: tokens.colorNeutralForegroundDisabled,
       pointerEvents: 'none',
     },
+    '@media (forced-colors: active)': {
+      color: 'DisabledText',
+    },
   },
 });
 
@@ -202,6 +201,10 @@ const useDayOutsideNavigatedMonthStyles = makeStyles({
   lightenDaysOutsideNavigatedMonth: {
     color: tokens.colorNeutralForeground4,
     fontWeight: tokens.fontWeightRegular,
+
+    '@media (forced-colors: active)': {
+      color: 'GrayText',
+    },
   },
 });
 
@@ -237,9 +240,16 @@ const useDayIsTodayStyles = makeStyles({
     '@media (forced-colors: active)': {
       backgroundColor: 'WindowText!important',
       ...shorthands.borderColor('WindowText!important'),
-      color: 'WindowText!important',
+      color: 'Window!important',
       forcedColorAdjust: 'none',
     },
+
+    [`& > .${calendarDayGridClassNames.dayMarker}`]: {
+      backgroundColor: tokens.colorNeutralForegroundOnBrand,
+      '@media (forced-colors: active)': {
+        backgroundColor: 'Window',
+      },
+    },
   },
 });
 
@@ -278,7 +288,7 @@ const useLastTransitionWeekStyles = makeStyles({
 
 const useDayMarkerStyles = makeStyles({
   base: {
-    backgroundColor: tokens.colorNeutralForeground2,
+    backgroundColor: tokens.colorBrandForeground2,
     ...shorthands.borderRadius('100%'),
     bottom: '1px',
     height: '4px',
@@ -292,19 +302,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 +344,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 +354,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,
diff --git a/packages/react-components/react-datepicker-compat/src/components/CalendarPicker/useCalendarPickerStyles.ts b/packages/react-components/react-datepicker-compat/src/components/CalendarPicker/useCalendarPickerStyles.ts
index 2015ebaecda38c..2c698eb9f88b56 100644
--- a/packages/react-components/react-datepicker-compat/src/components/CalendarPicker/useCalendarPickerStyles.ts
+++ b/packages/react-components/react-datepicker-compat/src/components/CalendarPicker/useCalendarPickerStyles.ts
@@ -212,6 +212,11 @@ const useCurrentStyles = makeStyles({
     color: tokens.colorNeutralForegroundOnBrand + '!important',
     fontWeight: tokens.fontWeightSemibold,
 
+    '@media (forced-colors: active)': {
+      backgroundColor: 'WindowText',
+      color: 'Window!important',
+      forcedColorAdjust: 'none',
+    },
     '&:hover': {
       backgroundColor: tokens.colorBrandBackground,
 
@@ -221,11 +226,6 @@ const useCurrentStyles = makeStyles({
         forcedColorAdjust: 'none',
       },
     },
-    '@media (forced-colors: active)': {
-      backgroundColor: 'WindowText',
-      color: 'Window',
-      forcedColorAdjust: 'none',
-    },
   },
 });
 
@@ -235,6 +235,11 @@ const useSelectedStyles = makeStyles({
     color: tokens.colorNeutralForeground1Static,
     fontWeight: tokens.fontWeightSemibold,
 
+    '@media (forced-colors: active)': {
+      backgroundColor: 'Highlight',
+      color: 'Window',
+      forcedColorAdjust: 'none',
+    },
     '& div': {
       fontWeight: tokens.fontWeightSemibold,
     },
@@ -250,17 +255,6 @@ const useSelectedStyles = makeStyles({
     },
     '&:active': {
       backgroundColor: tokens.colorBrandBackgroundInvertedPressed,
-
-      '@media (forced-colors: active)': {
-        backgroundColor: 'Highlight',
-        color: 'Window',
-        forcedColorAdjust: 'none',
-      },
-    },
-    '@media (forced-colors: active)': {
-      backgroundColor: 'Highlight',
-      color: 'Window',
-      forcedColorAdjust: 'none',
     },
   },
 });

From 5669fd090944ee9d26af32b19aef212dbaef2393 Mon Sep 17 00:00:00 2001
From: Esteban Munoz <esteban.230@hotmail.com>
Date: Tue, 28 Mar 2023 18:38:10 -0700
Subject: [PATCH 2/6] fixing general themes

---
 .../CalendarDay/useCalendarDayStyles.ts       | 11 +++++----
 .../useCalendarDayGridStyles.ts               |  8 ++++---
 .../CalendarPicker/useCalendarPickerStyles.ts | 23 +++++++++++--------
 3 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/packages/react-components/react-datepicker-compat/src/components/CalendarDay/useCalendarDayStyles.ts b/packages/react-components/react-datepicker-compat/src/components/CalendarDay/useCalendarDayStyles.ts
index de4ee2bf01b97d..69f89afbb0e8f8 100644
--- a/packages/react-components/react-datepicker-compat/src/components/CalendarDay/useCalendarDayStyles.ts
+++ b/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,
     },
   },
 });
diff --git a/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.ts b/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.ts
index 1d460bcb056ada..c56e807d83cf44 100644
--- a/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.ts
+++ b/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.ts
@@ -125,7 +125,7 @@ const useDaySelectedStyles = makeStyles({
 
     [`&: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',
@@ -171,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',
@@ -187,7 +187,9 @@ const useWeekNumberCellStyles = makeStyles({
 
 const useDayOutsideBoundsStyles = makeStyles({
   base: {
-    '&, &:disabled, & button': {
+    [`&, &:disabled, & button, &.${extraCalendarDayGridClassNames.hoverStyle}` +
+    `, &.${extraCalendarDayGridClassNames.pressedStyle}`]: {
+      backgroundColor: tokens.colorTransparentBackground,
       color: tokens.colorNeutralForegroundDisabled,
       pointerEvents: 'none',
     },
diff --git a/packages/react-components/react-datepicker-compat/src/components/CalendarPicker/useCalendarPickerStyles.ts b/packages/react-components/react-datepicker-compat/src/components/CalendarPicker/useCalendarPickerStyles.ts
index 2c698eb9f88b56..5c973b03f51031 100644
--- a/packages/react-components/react-datepicker-compat/src/components/CalendarPicker/useCalendarPickerStyles.ts
+++ b/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)': {
@@ -253,7 +258,7 @@ const useSelectedStyles = makeStyles({
         forcedColorAdjust: 'none',
       },
     },
-    '&:active': {
+    '&:hover:active': {
       backgroundColor: tokens.colorBrandBackgroundInvertedPressed,
     },
   },

From 11f03656caf55b94a3b872b3bcb8734616781733 Mon Sep 17 00:00:00 2001
From: Esteban Munoz <esteban.230@hotmail.com>
Date: Wed, 29 Mar 2023 11:13:37 -0700
Subject: [PATCH 3/6] removing important and reverting to gray text

---
 .../components/CalendarDayGrid/useCalendarDayGridStyles.ts    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.ts b/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.ts
index c56e807d83cf44..d9d7cc5b69f2a1 100644
--- a/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.ts
+++ b/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.ts
@@ -93,7 +93,7 @@ const useDayCellStyles = makeStyles({
       backgroundColor: tokens.colorBrandBackgroundInvertedHover,
       '@media (forced-colors: active)': {
         backgroundColor: 'Window',
-        color: 'WindowText!important',
+        color: 'WindowText',
         ...shorthands.outline('1px', 'solid', 'Highlight'),
         zIndex: 3,
       },
@@ -194,7 +194,7 @@ const useDayOutsideBoundsStyles = makeStyles({
       pointerEvents: 'none',
     },
     '@media (forced-colors: active)': {
-      color: 'DisabledText',
+      color: 'GrayText',
     },
   },
 });

From 043c6ee96978667779239ff27e350a3ed0a28619 Mon Sep 17 00:00:00 2001
From: Esteban Munoz <esteban.230@hotmail.com>
Date: Wed, 29 Mar 2023 11:32:20 -0700
Subject: [PATCH 4/6] removing important and fixing minor issue

---
 .../useCalendarDayGridStyles.ts               | 22 +++++++++----------
 .../CalendarPicker/useCalendarPickerStyles.ts |  7 +++---
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.ts b/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.ts
index d9d7cc5b69f2a1..1404ba5aa76779 100644
--- a/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.ts
+++ b/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.ts
@@ -117,9 +117,9 @@ const useDaySelectedStyles = makeStyles({
     color: tokens.colorNeutralForeground1Static,
 
     '@media (forced-colors: active)': {
-      backgroundColor: 'Highlight!important',
-      ...shorthands.borderColor('Highlight!important'),
-      color: 'HighlightText!important',
+      backgroundColor: 'Highlight',
+      ...shorthands.borderColor('Highlight'),
+      color: 'HighlightText',
       forcedColorAdjust: 'none',
     },
 
@@ -127,8 +127,8 @@ const useDaySelectedStyles = makeStyles({
       color: tokens.colorNeutralForeground1Static,
       backgroundColor: tokens.colorBrandBackgroundInvertedSelected,
       '@media (forced-colors: active)': {
-        backgroundColor: 'Highlight!important',
-        color: 'HighlightText!important',
+        backgroundColor: 'Highlight',
+        color: 'HighlightText',
       },
     },
 
@@ -234,15 +234,15 @@ 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: 'Window!important',
+      backgroundColor: 'WindowText',
+      ...shorthands.borderColor('WindowText'),
+      color: 'Window',
       forcedColorAdjust: 'none',
     },
 
diff --git a/packages/react-components/react-datepicker-compat/src/components/CalendarPicker/useCalendarPickerStyles.ts b/packages/react-components/react-datepicker-compat/src/components/CalendarPicker/useCalendarPickerStyles.ts
index 5c973b03f51031..24b67cfe32ebd4 100644
--- a/packages/react-components/react-datepicker-compat/src/components/CalendarPicker/useCalendarPickerStyles.ts
+++ b/packages/react-components/react-datepicker-compat/src/components/CalendarPicker/useCalendarPickerStyles.ts
@@ -214,16 +214,17 @@ const useItemButtonStyles = makeStyles({
 const useCurrentStyles = makeStyles({
   highlightCurrent: {
     backgroundColor: tokens.colorBrandBackground,
-    color: tokens.colorNeutralForegroundOnBrand + '!important',
+    color: tokens.colorNeutralForegroundOnBrand,
     fontWeight: tokens.fontWeightSemibold,
 
     '@media (forced-colors: active)': {
       backgroundColor: 'WindowText',
-      color: 'Window!important',
+      color: 'Window',
       forcedColorAdjust: 'none',
     },
-    '&:hover': {
+    '&:hover, &:hover:active': {
       backgroundColor: tokens.colorBrandBackground,
+      color: tokens.colorNeutralForegroundOnBrand,
 
       '@media (forced-colors: active)': {
         backgroundColor: 'WindowText',

From 35f4d2d8bcb2e0d86349490baa3bfbb0e6171b0d Mon Sep 17 00:00:00 2001
From: Esteban Munoz <esteban.230@hotmail.com>
Date: Wed, 29 Mar 2023 11:45:13 -0700
Subject: [PATCH 5/6] fixing go to today unwanted styles when clicking and
 moving

---
 .../src/components/Calendar/Calendar.tsx                        | 2 +-
 .../src/components/Calendar/useCalendarStyles.ts                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/react-datepicker-compat/src/components/Calendar/Calendar.tsx b/packages/react-components/react-datepicker-compat/src/components/Calendar/Calendar.tsx
index 19e23aa1e180e5..140ae7050e98f0 100644
--- a/packages/react-components/react-datepicker-compat/src/components/Calendar/Calendar.tsx
+++ b/packages/react-components/react-datepicker-compat/src/components/Calendar/Calendar.tsx
@@ -196,7 +196,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"
diff --git a/packages/react-components/react-datepicker-compat/src/components/Calendar/useCalendarStyles.ts b/packages/react-components/react-datepicker-compat/src/components/Calendar/useCalendarStyles.ts
index 1bc92c5c8069b3..f97dc7d4b9dc02 100644
--- a/packages/react-components/react-datepicker-compat/src/components/Calendar/useCalendarStyles.ts
+++ b/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': {

From 1403b5f499d07f1b1a0a18d51036d51f0b8126a0 Mon Sep 17 00:00:00 2001
From: Esteban Munoz <esteban.230@hotmail.com>
Date: Wed, 29 Mar 2023 12:05:31 -0700
Subject: [PATCH 6/6] removign import

---
 .../react-datepicker-compat/src/components/Calendar/Calendar.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react-components/react-datepicker-compat/src/components/Calendar/Calendar.tsx b/packages/react-components/react-datepicker-compat/src/components/Calendar/Calendar.tsx
index 140ae7050e98f0..b96bda0a2ca009 100644
--- a/packages/react-components/react-datepicker-compat/src/components/Calendar/Calendar.tsx
+++ b/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,