Added hover styles that leverage theme variants

samples/react-calendar-feed/src/shared/components/DateBox/DateBox.tsx

@@ -40,6 +40,7 @@ export class DateBox extends React.Component<IDateBoxProps, {}> {
         style={
           themeVariant &&
           {
+            // KLUDGE: It seems like the themeVariant palette doesn't expose primaryBackground
             backgroundColor: themeVariant.palette["primaryBackground"],
             borderColor: themeVariant.semanticColors.bodyDivider
           }}>

samples/react-calendar-feed/src/shared/components/filmstripLayout/FilmstripLayout.tsx

@@ -5,6 +5,7 @@ import Slider from 'react-slick';
 import { SPComponentLoader } from '@microsoft/sp-loader';
 import styles from "./FilmstripLayout.module.scss";
 import { useRef } from 'react';
+import { IReadonlyTheme } from '@microsoft/sp-component-base';
 
 function useBreakpoints(currentWidth: number, breakpoints: number[]) {
   return breakpoints.map(breakpoint => currentWidth < breakpoint);
@@ -14,7 +15,7 @@ function useBreakpoints(currentWidth: number, breakpoints: number[]) {
  * Filmstrip layout
  * Presents the child compoments as a slick slide
  */
-export const FilmstripLayout = (props: { children: any; clientWidth: number; ariaLabel?: string; }) => {
+export const FilmstripLayout = (props: { children: any; clientWidth: number; themeVariant?: IReadonlyTheme, ariaLabel?: string; }) => {
 
   let ref: React.MutableRefObject<HTMLDivElement> = useRef<HTMLDivElement>(null);
   // // the slick slider used in normal views
@@ -62,6 +63,30 @@ export const FilmstripLayout = (props: { children: any; clientWidth: number; ari
   };
 
   return (
+    <>
+      {/*
+      KLUDGE:
+      This is a cheaty way to inject styles from the theme variant when the component does not support theme variant customizations.
+      We can do this without too much nastiness because this component is added only once per web part
+      ... but I still wish there was a better way
+      */}
+      {props.themeVariant && <style>{`
+            .${styles.carouselDot} {
+              background-color: ${props.themeVariant.palette.black}!important;
+              border-color: ${props.themeVariant.palette.black}!important;
+            }
+
+            .slick-active .${styles.carouselDot} {
+              background-color: ${props.themeVariant.palette.themeDark}!important;
+              border-color: ${props.themeVariant.palette.themeDark}!important;
+            }
+
+            .${styles.filmstripLayout} .ms-DocumentCard--actionable:hover {
+              border-color: ${props.themeVariant.semanticColors.variantBorderHovered}!important;
+            }
+            `}
+      </style>
+      }
       <div>
         <div className={css(styles.filmstripLayout, styles.filmStrip)} aria-label={props.ariaLabel} ref={ref}>
           <Slider ref={_slider} {...settings}>
@@ -89,5 +114,6 @@ export const FilmstripLayout = (props: { children: any; clientWidth: number; ari
           </div>
         </div>
       </div>
+    </>
   );
 };

samples/react-calendar-feed/src/webparts/calendarFeedSummary/components/CalendarFeedSummary.tsx

@@ -298,6 +298,7 @@ export default class CalendarFeedSummary extends React.Component<ICalendarFeedSu
           <FilmstripLayout
             ariaLabel={strings.FilmStripAriaLabel}
             clientWidth={this.props.clientWidth}
+            themeVariant={this.props.themeVariant}
           >
             {events.map((event: ICalendarEvent, index: number) => {
               return (<EventCard