add overMedia context and update timer

src/__private_stories__/timer-over-media-story.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import {Box, PosterCard, Stack, Timer} from '..';
+import tennisImg from '../__stories__/images/tennis.jpg';
+
+export default {
+    title: 'Private/Timer over media',
+};
+
+const BACKGROUND_IMAGE_SRC = tennisImg;
+
+const SECOND = 1000;
+const MINUTE = SECOND * 60;
+const HOUR = MINUTE * 60;
+const DAY = HOUR * 24;
+
+export const Default: StoryComponent = () => {
+    return (
+        <PosterCard
+            dataAttributes={{testid: 'card'}}
+            backgroundImage={BACKGROUND_IMAGE_SRC}
+            isInverse={false}
+            width="auto"
+            height="auto"
+            aspectRatio="auto"
+            title="Title"
+            extra={
+                <Box paddingTop={16}>
+                    <Stack space={16}>
+                        <Timer
+                            endTimestamp={Date.now() + DAY}
+                            minTimeUnit="seconds"
+                            maxTimeUnit="days"
+                            boxed
+                        />
+                        <Timer endTimestamp={Date.now() + DAY} minTimeUnit="seconds" maxTimeUnit="days" />
+                    </Stack>
+                </Box>
+            }
+        />
+    );
+};
+
+Default.storyName = 'Timer over media';

src/__screenshot_tests__/private-timer-over-media-screenshot-test.tsx

@@ -0,0 +1,11 @@
+import {openStoryPage, screen} from '../test-utils';
+
+test('Private example', async () => {
+    await openStoryPage({
+        id: 'private-timer-over-media--default',
+        device: 'MOBILE_IOS',
+    });
+
+    const card = await screen.findByTestId('card');
+    expect(await card.screenshot()).toMatchImageSnapshot();
+});

src/card.tsx

@@ -26,6 +26,7 @@ import Inline from './inline';
 import {getPrefixedDataAttributes} from './utils/dom';
 import {isRunningAcceptanceTest} from './utils/platform';
 import {applyCssVars} from './utils/css';
+import OverMediaContextProvider from './over-media-context';
 
 import type {Variant} from './theme-variant-context';
 import type {PressHandler} from './touchable';
@@ -214,31 +215,43 @@ type CardContainerProps = {
     dataAttributes?: DataAttributes;
     className?: string;
     'aria-label'?: string;
+    hasMediaBackground?: boolean;
 };
 
 const CardContainer = React.forwardRef<HTMLDivElement, CardContainerProps>(
     (
-        {children, width, height, aspectRatio, dataAttributes, className, 'aria-label': ariaLabel},
+        {
+            children,
+            width,
+            height,
+            aspectRatio,
+            dataAttributes,
+            className,
+            'aria-label': ariaLabel,
+            hasMediaBackground = false,
+        },
         ref
     ): JSX.Element => {
         const cssAspectRatio = width && height ? undefined : aspectRatioToNumber(aspectRatio);
 
         return (
-            <section
-                {...getPrefixedDataAttributes(dataAttributes)}
-                ref={ref}
-                aria-label={ariaLabel}
-                className={classNames(className, styles.cardContainer)}
-                style={{
-                    width: width || '100%',
-                    height: height || '100%',
-                    ...(cssAspectRatio
-                        ? applyCssVars({[styles.vars.aspectRatio]: String(cssAspectRatio)})
-                        : {}),
-                }}
-            >
-                {children}
-            </section>
+            <OverMediaContextProvider isOverMedia={hasMediaBackground}>
+                <section
+                    {...getPrefixedDataAttributes(dataAttributes)}
+                    ref={ref}
+                    aria-label={ariaLabel}
+                    className={classNames(className, styles.cardContainer)}
+                    style={{
+                        width: width || '100%',
+                        height: height || '100%',
+                        ...(cssAspectRatio
+                            ? applyCssVars({[styles.vars.aspectRatio]: String(cssAspectRatio)})
+                            : {}),
+                    }}
+                >
+                    {children}
+                </section>
+            </OverMediaContextProvider>
         );
     }
 );
@@ -1301,6 +1314,7 @@ const DisplayCard = React.forwardRef<HTMLDivElement, GenericDisplayCardProps>(
                 aspectRatio={aspectRatio}
                 aria-label={isTouchable ? undefined : ariaLabelProp}
                 className={styles.touchableContainer}
+                hasMediaBackground={hasImage || hasVideo}
             >
                 <InternalBoxed
                     borderRadius={vars.borderRadii.legacyDisplay}
@@ -1599,6 +1613,7 @@ export const PosterCard = React.forwardRef<HTMLDivElement, PosterCardProps>(
                 aspectRatio={aspectRatio}
                 className={styles.touchableContainer}
                 aria-label={isTouchable ? undefined : ariaLabelProp}
+                hasMediaBackground
             >
                 <InternalBoxed
                     borderRadius={vars.borderRadii.legacyDisplay}

src/index.tsx

@@ -26,6 +26,7 @@ export {
     useSetOverscrollColor,
     OverscrollColorProvider,
 } from './overscroll-color-context';
+export {default as OverMediaContextProvider, useOverMediaContext} from './over-media-context';
 export {
     FeedbackScreen,
     ErrorFeedbackScreen,

src/over-media-context.tsx

@@ -0,0 +1,24 @@
+'use client';
+import * as React from 'react';
+
+type OverMediaContextType = {
+    isOverMedia: boolean;
+};
+
+const OverMediaContext = React.createContext<OverMediaContextType>({
+    isOverMedia: false,
+});
+
+const OverMediaContextProvider = ({
+    children,
+    isOverMedia,
+}: {
+    children: React.ReactNode;
+    isOverMedia: boolean;
+}): JSX.Element => {
+    return <OverMediaContext.Provider value={{isOverMedia}}>{children}</OverMediaContext.Provider>;
+};
+
+export const useOverMediaContext = (): OverMediaContextType => React.useContext(OverMediaContext);
+
+export default OverMediaContextProvider;

src/timer.css.ts

@@ -3,6 +3,7 @@ import {sprinkles} from './sprinkles.css';
 import * as mq from './media-queries.css';
 import {pxToRem} from './utils/css';
 import {vars} from './skins/skin-contract.css';
+import {applyAlpha} from './utils/color';
 
 export const timerWrapper = sprinkles({display: 'inline-block'});
 
@@ -44,6 +45,10 @@ export const boxedTimerDisplayValue = style([
     },
 ]);
 
+export const nonBoxedOverMediaDisplayValue = style({
+    textShadow: '0px 0px 15px rgba(0,0,0,0.4)',
+});
+
 const baseBoxedTimerValueContainer = style([
     sprinkles({
         paddingX: 4,
@@ -73,3 +78,10 @@ export const boxedTimerValueContainerInverse = style([
         background: vars.colors.backgroundContainer,
     }),
 ]);
+
+export const boxedTimerValueContainerOverMedia = style([
+    baseBoxedTimerValueContainer,
+    {
+        background: applyAlpha(vars.rawColors.backgroundContainer, 0.7),
+    },
+]);

src/timer.tsx

@@ -11,6 +11,7 @@ import * as styles from './timer.css';
 import {getPrefixedDataAttributes} from './utils/dom';
 import {isEqual} from './utils/helpers';
 import {isRunningAcceptanceTest} from './utils/platform';
+import {useOverMediaContext} from './over-media-context';
 
 import type {DataAttributes} from './utils/types';
 
@@ -318,6 +319,7 @@ export const Timer: React.FC<TimerProps> = ({
     const {texts} = useTheme();
     const labelId = useAriaId();
     const themeVariant = useThemeVariant();
+    const {isOverMedia} = useOverMediaContext();
 
     const timerValue = useTimerState({endTimestamp, minTimeUnit, maxTimeUnit, onProgress});
 
@@ -379,15 +381,18 @@ export const Timer: React.FC<TimerProps> = ({
         return timerValue.map((item, index) => (
             <Box
                 className={classNames({
-                    [styles.boxedTimerValueContainer]: themeVariant === 'default' && boxed,
-                    [styles.boxedTimerValueContainerInverse]: themeVariant !== 'default' && boxed,
+                    [styles.boxedTimerValueContainer]: themeVariant === 'default' && boxed && !isOverMedia,
+                    [styles.boxedTimerValueContainerInverse]:
+                        themeVariant !== 'default' && boxed && !isOverMedia,
+                    [styles.boxedTimerValueContainerOverMedia]: isOverMedia && boxed,
                 })}
                 key={index}
             >
-                <ThemeVariant variant={boxed ? 'default' : themeVariant}>
+                <ThemeVariant variant={boxed ? 'default' : isOverMedia ? 'inverse' : themeVariant}>
                     <div
                         className={classNames(styles.timerDisplayValue, {
                             [styles.boxedTimerDisplayValue]: boxed,
+                            [styles.nonBoxedOverMediaDisplayValue]: !boxed && isOverMedia,
                         })}
                     >
                         {renderFormattedNumber(item.value)}