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,32 +63,57 @@ export const FilmstripLayout = (props: { children: any; clientWidth: number; ari
   };
 
   return (
-    <div>
+    <>
-      <div className={css(styles.filmstripLayout, styles.filmStrip)} aria-label={props.ariaLabel} ref={ref}>
+      {/*
-        <Slider ref={_slider} {...settings}>
+      KLUDGE:
-          {props.children}
+      This is a cheaty way to inject styles from the theme variant when the component does not support theme variant customizations.
-        </Slider>
+      We can do this without too much nastiness because this component is added only once per web part
-        <div
+      ... but I still wish there was a better way
-          className={css(styles.indexButtonContainer, styles.sliderButtons)}
+      */}
-          style={{ left: "10px" }}
+      {props.themeVariant && <style>{`
-          onClick={() => _slider.current.slickPrev()}
+            .${styles.carouselDot} {
-        >
+              background-color: ${props.themeVariant.palette.black}!important;
-          <IconButton
+              border-color: ${props.themeVariant.palette.black}!important;
-            className={css(styles.indexButton, styles.leftPositioned)}
+            }
-            iconProps={{ iconName: "ChevronLeft", styles: { root: { fontSize: '28px', fontWeight: '400' } } }}
+
-          />
+            .slick-active .${styles.carouselDot} {
-        </div>
+              background-color: ${props.themeVariant.palette.themeDark}!important;
-        <div
+              border-color: ${props.themeVariant.palette.themeDark}!important;
-          className={css(styles.indexButtonContainer, styles.sliderButtons)}
+            }
-          style={{ right: "10px" }}
+
-          onClick={() => _slider.current.slickNext()}
+            .${styles.filmstripLayout} .ms-DocumentCard--actionable:hover {
-        >
+              border-color: ${props.themeVariant.semanticColors.variantBorderHovered}!important;
-          <IconButton
+            }
-            className={css(styles.indexButton, styles.rightPositioned)}
+            `}
-            iconProps={{ iconName: "ChevronRight", styles: { root: { fontSize: '28px', fontWeight: '400' } } }}
+      </style>
-          />
+      }
+      <div>
+        <div className={css(styles.filmstripLayout, styles.filmStrip)} aria-label={props.ariaLabel} ref={ref}>
+          <Slider ref={_slider} {...settings}>
+            {props.children}
+          </Slider>
+          <div
+            className={css(styles.indexButtonContainer, styles.sliderButtons)}
+            style={{ left: "10px" }}
+            onClick={() => _slider.current.slickPrev()}
+          >
+            <IconButton
+              className={css(styles.indexButton, styles.leftPositioned)}
+              iconProps={{ iconName: "ChevronLeft", styles: { root: { fontSize: '28px', fontWeight: '400' } } }}
+            />
+          </div>
+          <div
+            className={css(styles.indexButtonContainer, styles.sliderButtons)}
+            style={{ right: "10px" }}
+            onClick={() => _slider.current.slickNext()}
+          >
+            <IconButton
+              className={css(styles.indexButton, styles.rightPositioned)}
+              iconProps={{ iconName: "ChevronRight", styles: { root: { fontSize: '28px', fontWeight: '400' } } }}
+            />
+          </div>
         </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