@envive-ai/react-toolkit-v3 0.3.32 → 0.3.33

package/src/components/CSSVariablesEditor/hooks/useGetDefaultCssVariables.ts

@@ -290,112 +290,217 @@ export const useGetDefaultCssVariables = ({
 
       // Font Weights
       {
-        key: 'font-weight-rg',
-        name: 'Font Weight Regular',
-        variable: FontWeightCSSVar.RG,
-        defaultValue: fontWeight.rg,
+        key: 'font-weight-title',
+        name: 'Font Weight Title',
+        variable: FontWeightCSSVar.Title,
+        defaultValue: fontWeight.title,
         category: 'Typography',
       },
       {
-        key: 'font-weight-md',
-        name: 'Font Weight Medium',
-        variable: FontWeightCSSVar.MD,
-        defaultValue: fontWeight.md,
+        key: 'font-weight-header',
+        name: 'Font Weight Header',
+        variable: FontWeightCSSVar.Header,
+        defaultValue: fontWeight.header,
         category: 'Typography',
       },
       {
-        key: 'font-weight-sb',
-        name: 'Font Weight Semi Bold',
-        variable: FontWeightCSSVar.SB,
-        defaultValue: fontWeight.sb,
+        key: 'font-weight-body-emphasis',
+        name: 'Font Weight Body Emphasis',
+        variable: FontWeightCSSVar.BodyEmphasis,
+        defaultValue: fontWeight.body_emphasis,
+        category: 'Typography',
+      },
+      {
+        key: 'font-weight-body-standard',
+        name: 'Font Weight Body Standard',
+        variable: FontWeightCSSVar.BodyStandard,
+        defaultValue: fontWeight.body_standard,
         category: 'Typography',
       },
 
       // Line Heights
       {
-        key: 'line-height-124',
-        name: 'Line Height 124%',
-        variable: LineHeightCSSVar.LineHeight124,
-        defaultValue: convertLineHeightToPercentage(lineHeight[124]),
+        key: 'line-height-t1',
+        name: 'Line Height T1',
+        variable: LineHeightCSSVar.T1,
+        defaultValue: convertLineHeightToPercentage(lineHeight.t1),
+        category: 'Typography',
+      },
+      {
+        key: 'line-height-t2',
+        name: 'Line Height T2',
+        variable: LineHeightCSSVar.T2,
+        defaultValue: convertLineHeightToPercentage(lineHeight.t2),
+        category: 'Typography',
+      },
+      {
+        key: 'line-height-t3',
+        name: 'Line Height T3',
+        variable: LineHeightCSSVar.T3,
+        defaultValue: convertLineHeightToPercentage(lineHeight.t3),
+        category: 'Typography',
+      },
+      {
+        key: 'line-height-h1',
+        name: 'Line Height H1',
+        variable: LineHeightCSSVar.H1,
+        defaultValue: convertLineHeightToPercentage(lineHeight.h1),
         category: 'Typography',
       },
       {
-        key: 'line-height-120',
-        name: 'Line Height 120%',
-        variable: LineHeightCSSVar.LineHeight120,
-        defaultValue: convertLineHeightToPercentage(lineHeight[120]),
+        key: 'line-height-h2',
+        name: 'Line Height H2',
+        variable: LineHeightCSSVar.H2,
+        defaultValue: convertLineHeightToPercentage(lineHeight.h2),
         category: 'Typography',
       },
       {
-        key: 'line-height-118',
-        name: 'Line Height 118%',
-        variable: LineHeightCSSVar.LineHeight118,
-        defaultValue: convertLineHeightToPercentage(lineHeight[118]),
+        key: 'line-height-h3',
+        name: 'Line Height H3',
+        variable: LineHeightCSSVar.H3,
+        defaultValue: convertLineHeightToPercentage(lineHeight.h3),
         category: 'Typography',
       },
       {
-        key: 'line-height-116',
-        name: 'Line Height 116%',
-        variable: LineHeightCSSVar.LineHeight116,
-        defaultValue: convertLineHeightToPercentage(lineHeight[116]),
+        key: 'line-height-b1',
+        name: 'Line Height B1',
+        variable: LineHeightCSSVar.B1,
+        defaultValue: convertLineHeightToPercentage(lineHeight.b1),
         category: 'Typography',
       },
       {
-        key: 'line-height-114',
-        name: 'Line Height 114%',
-        variable: LineHeightCSSVar.LineHeight114,
-        defaultValue: convertLineHeightToPercentage(lineHeight[114]),
+        key: 'line-height-b2',
+        name: 'Line Height B2',
+        variable: LineHeightCSSVar.B2,
+        defaultValue: convertLineHeightToPercentage(lineHeight.b2),
         category: 'Typography',
       },
       {
-        key: 'line-height-148',
-        name: 'Line Height 148%',
-        variable: LineHeightCSSVar.LineHeight148,
-        defaultValue: convertLineHeightToPercentage(lineHeight[148]),
+        key: 'line-height-b3',
+        name: 'Line Height B3',
+        variable: LineHeightCSSVar.B3,
+        defaultValue: convertLineHeightToPercentage(lineHeight.b3),
         category: 'Typography',
       },
       {
-        key: 'line-height-140',
-        name: 'Line Height 140%',
-        variable: LineHeightCSSVar.LineHeight140,
-        defaultValue: convertLineHeightToPercentage(lineHeight[140]),
+        key: 'line-height-b4',
+        name: 'Line Height B4',
+        variable: LineHeightCSSVar.B4,
+        defaultValue: convertLineHeightToPercentage(lineHeight.b4),
         category: 'Typography',
       },
       {
-        key: 'line-height-128',
-        name: 'Line Height 128%',
-        variable: LineHeightCSSVar.LineHeight128,
-        defaultValue: convertLineHeightToPercentage(lineHeight[128]),
+        key: 'line-height-b5',
+        name: 'Line Height B5',
+        variable: LineHeightCSSVar.B5,
+        defaultValue: convertLineHeightToPercentage(lineHeight.b5),
         category: 'Typography',
       },
       {
-        key: 'line-height-130',
-        name: 'Line Height 130%',
-        variable: LineHeightCSSVar.LineHeight130,
-        defaultValue: convertLineHeightToPercentage(lineHeight[130]),
+        key: 'line-height-l1',
+        name: 'Line Height L1',
+        variable: LineHeightCSSVar.L1,
+        defaultValue: convertLineHeightToPercentage(lineHeight.l1),
         category: 'Typography',
       },
       {
-        key: 'line-height-133',
-        name: 'Line Height 133%',
-        variable: LineHeightCSSVar.LineHeight133,
-        defaultValue: convertLineHeightToPercentage(lineHeight[133]),
+        key: 'line-height-l2',
+        name: 'Line Height L2',
+        variable: LineHeightCSSVar.L2,
+        defaultValue: convertLineHeightToPercentage(lineHeight.l2),
         category: 'Typography',
       },
 
       // Letter Spacing
       {
-        key: 'letter-spacing-tight-0',
-        name: 'Letter Spacing Tight 0',
-        variable: LetterSpacingCSSVar.Tight0,
-        defaultValue: letterSpacing['tight-0'],
+        key: 'letter-spacing-t1',
+        name: 'Letter Spacing T1',
+        variable: LetterSpacingCSSVar.T1,
+        defaultValue: letterSpacing.t1,
+        category: 'Typography',
+      },
+      {
+        key: 'letter-spacing-t2',
+        name: 'Letter Spacing T2',
+        variable: LetterSpacingCSSVar.T2,
+        defaultValue: letterSpacing.t2,
+        category: 'Typography',
+      },
+      {
+        key: 'letter-spacing-t3',
+        name: 'Letter Spacing T3',
+        variable: LetterSpacingCSSVar.T3,
+        defaultValue: letterSpacing.t3,
+        category: 'Typography',
+      },
+      {
+        key: 'letter-spacing-h1',
+        name: 'Letter Spacing H1',
+        variable: LetterSpacingCSSVar.H1,
+        defaultValue: letterSpacing.h1,
+        category: 'Typography',
+      },
+      {
+        key: 'letter-spacing-h2',
+        name: 'Letter Spacing H2',
+        variable: LetterSpacingCSSVar.H2,
+        defaultValue: letterSpacing.h2,
+        category: 'Typography',
+      },
+      {
+        key: 'letter-spacing-h3',
+        name: 'Letter Spacing H3',
+        variable: LetterSpacingCSSVar.H3,
+        defaultValue: letterSpacing.h3,
+        category: 'Typography',
+      },
+      {
+        key: 'letter-spacing-b1',
+        name: 'Letter Spacing B1',
+        variable: LetterSpacingCSSVar.B1,
+        defaultValue: letterSpacing.b1,
+        category: 'Typography',
+      },
+      {
+        key: 'letter-spacing-b2',
+        name: 'Letter Spacing B2',
+        variable: LetterSpacingCSSVar.B2,
+        defaultValue: letterSpacing.b2,
+        category: 'Typography',
+      },
+      {
+        key: 'letter-spacing-b3',
+        name: 'Letter Spacing B3',
+        variable: LetterSpacingCSSVar.B3,
+        defaultValue: letterSpacing.b3,
+        category: 'Typography',
+      },
+      {
+        key: 'letter-spacing-b4',
+        name: 'Letter Spacing B4',
+        variable: LetterSpacingCSSVar.B4,
+        defaultValue: letterSpacing.b4,
+        category: 'Typography',
+      },
+      {
+        key: 'letter-spacing-b5',
+        name: 'Letter Spacing B5',
+        variable: LetterSpacingCSSVar.B5,
+        defaultValue: letterSpacing.b5,
+        category: 'Typography',
+      },
+      {
+        key: 'letter-spacing-l1',
+        name: 'Letter Spacing L1',
+        variable: LetterSpacingCSSVar.L1,
+        defaultValue: letterSpacing.l1,
         category: 'Typography',
       },
       {
-        key: 'letter-spacing-wide-1',
-        name: 'Letter Spacing Wide 1',
-        variable: LetterSpacingCSSVar.Wide1,
-        defaultValue: letterSpacing['wide-1'],
+        key: 'letter-spacing-l2',
+        name: 'Letter Spacing L2',
+        variable: LetterSpacingCSSVar.L2,
+        defaultValue: letterSpacing.l2,
         category: 'Typography',
       },
 

package/src/components/CSSVariablesEditor/hooks/useHandleUpdateCssVars.ts

@@ -32,23 +32,38 @@ export const useHandleUpdateCssVars = () => {
         --${FontSizeCSSVar.L1}: ${variables['font-size-l1']} !important;
         --${FontSizeCSSVar.L2}: ${variables['font-size-l2']} !important;
 
-        --${FontWeightCSSVar.RG}: ${variables['font-weight-rg']} !important;
-        --${FontWeightCSSVar.MD}: ${variables['font-weight-md']} !important;
-        --${FontWeightCSSVar.SB}: ${variables['font-weight-sb']} !important;
+        --${FontWeightCSSVar.Title}: ${variables['font-weight-title']} !important;
+        --${FontWeightCSSVar.Header}: ${variables['font-weight-header']} !important;
+        --${FontWeightCSSVar.BodyEmphasis}: ${variables['font-weight-body-emphasis']} !important;
+        --${FontWeightCSSVar.BodyStandard}: ${variables['font-weight-body-standard']} !important;
 
-        --${LineHeightCSSVar.LineHeight124}: ${convertPercentageTolineHeight(variables['line-height-124'])} !important;
-        --${LineHeightCSSVar.LineHeight120}: ${convertPercentageTolineHeight(variables['line-height-120'])} !important;
-        --${LineHeightCSSVar.LineHeight118}: ${convertPercentageTolineHeight(variables['line-height-118'])} !important;
-        --${LineHeightCSSVar.LineHeight116}: ${convertPercentageTolineHeight(variables['line-height-116'])} !important;
-        --${LineHeightCSSVar.LineHeight114}: ${convertPercentageTolineHeight(variables['line-height-114'])} !important;
-        --${LineHeightCSSVar.LineHeight148}: ${convertPercentageTolineHeight(variables['line-height-148'])} !important;
-        --${LineHeightCSSVar.LineHeight140}: ${convertPercentageTolineHeight(variables['line-height-140'])} !important;
-        --${LineHeightCSSVar.LineHeight128}: ${convertPercentageTolineHeight(variables['line-height-128'])} !important;
-        --${LineHeightCSSVar.LineHeight130}: ${convertPercentageTolineHeight(variables['line-height-130'])} !important;
-        --${LineHeightCSSVar.LineHeight133}: ${convertPercentageTolineHeight(variables['line-height-133'])} !important;
+        --${LineHeightCSSVar.T1}: ${convertPercentageTolineHeight(variables['line-height-t1'])} !important;
+        --${LineHeightCSSVar.T2}: ${convertPercentageTolineHeight(variables['line-height-t2'])} !important;
+        --${LineHeightCSSVar.T3}: ${convertPercentageTolineHeight(variables['line-height-t3'])} !important;
+        --${LineHeightCSSVar.H1}: ${convertPercentageTolineHeight(variables['line-height-h1'])} !important;
+        --${LineHeightCSSVar.H2}: ${convertPercentageTolineHeight(variables['line-height-h2'])} !important;
+        --${LineHeightCSSVar.H3}: ${convertPercentageTolineHeight(variables['line-height-h3'])} !important;
+        --${LineHeightCSSVar.B1}: ${convertPercentageTolineHeight(variables['line-height-b1'])} !important;
+        --${LineHeightCSSVar.B2}: ${convertPercentageTolineHeight(variables['line-height-b2'])} !important;
+        --${LineHeightCSSVar.B3}: ${convertPercentageTolineHeight(variables['line-height-b3'])} !important;
+        --${LineHeightCSSVar.B4}: ${convertPercentageTolineHeight(variables['line-height-b4'])} !important;
+        --${LineHeightCSSVar.B5}: ${convertPercentageTolineHeight(variables['line-height-b5'])} !important;
+        --${LineHeightCSSVar.L1}: ${convertPercentageTolineHeight(variables['line-height-l1'])} !important;
+        --${LineHeightCSSVar.L2}: ${convertPercentageTolineHeight(variables['line-height-l2'])} !important;
 
-        --${LetterSpacingCSSVar.Tight0}: ${variables['letter-spacing-tight-0']} !important;
-        --${LetterSpacingCSSVar.Wide1}: ${variables['letter-spacing-wide-1']} !important;
+        --${LetterSpacingCSSVar.T1}: ${variables['letter-spacing-t1']} !important;
+        --${LetterSpacingCSSVar.T2}: ${variables['letter-spacing-t2']} !important;
+        --${LetterSpacingCSSVar.T3}: ${variables['letter-spacing-t3']} !important;
+        --${LetterSpacingCSSVar.H1}: ${variables['letter-spacing-h1']} !important;
+        --${LetterSpacingCSSVar.H2}: ${variables['letter-spacing-h2']} !important;
+        --${LetterSpacingCSSVar.H3}: ${variables['letter-spacing-h3']} !important;
+        --${LetterSpacingCSSVar.B1}: ${variables['letter-spacing-b1']} !important;
+        --${LetterSpacingCSSVar.B2}: ${variables['letter-spacing-b2']} !important;
+        --${LetterSpacingCSSVar.B3}: ${variables['letter-spacing-b3']} !important;
+        --${LetterSpacingCSSVar.B4}: ${variables['letter-spacing-b4']} !important;
+        --${LetterSpacingCSSVar.B5}: ${variables['letter-spacing-b5']} !important;
+        --${LetterSpacingCSSVar.L1}: ${variables['letter-spacing-l1']} !important;
+        --${LetterSpacingCSSVar.L2}: ${variables['letter-spacing-l2']} !important;
 
         --${FontFamilyCSSVar.Title}: ${variables['font-family-title']} !important;
         --${FontFamilyCSSVar.Header}: ${variables['font-family-header']} !important;

package/src/components/DesignTokens/components/FontWeight.tsx

@@ -7,9 +7,10 @@ type FontWeightProps = {
 
 export const FontWeight = ({ fontWeightTokens }: FontWeightProps) => {
   const fontWeightTwMap = {
-    rg: 'envive-tw-font-rg',
-    md: 'envive-tw-font-md',
-    sb: 'envive-tw-font-sb',
+    title: 'envive-tw-font-title',
+    header: 'envive-tw-font-header',
+    body_emphasis: 'envive-tw-font-body_emphasis',
+    body_standard: 'envive-tw-font-body_standard',
   };
 
   return (

package/src/components/DesignTokens/components/LetterSpacing.tsx

@@ -7,7 +7,19 @@ type LetterSpacingProps = {
 
 export const LetterSpacing = ({ letterSpacingTokens }: LetterSpacingProps) => {
   const letterSpacingTwMap = {
-    tight0: 'envive-tw-tracking-tight0',
+    t1: 'envive-tw-tracking-t1',
+    t2: 'envive-tw-tracking-t2',
+    t3: 'envive-tw-tracking-t3',
+    h1: 'envive-tw-tracking-h1',
+    h2: 'envive-tw-tracking-h2',
+    h3: 'envive-tw-tracking-h3',
+    b1: 'envive-tw-tracking-b1',
+    b2: 'envive-tw-tracking-b2',
+    b3: 'envive-tw-tracking-b3',
+    b4: 'envive-tw-tracking-b4',
+    b5: 'envive-tw-tracking-b5',
+    l1: 'envive-tw-tracking-l1',
+    l2: 'envive-tw-tracking-l2',
   };
 
   return (

package/src/components/DesignTokens/components/LineHeight.tsx

@@ -7,14 +7,19 @@ type LineHeightProps = {
 
 export const LineHeight = ({ lineHeightTokens }: LineHeightProps) => {
   const lineHeightTwMap = {
-    '124': 'envive-tw-leading-124',
-    '120': 'envive-tw-leading-120',
-    '118': 'envive-tw-leading-118',
-    '116': 'envive-tw-leading-116',
-    '114': 'envive-tw-leading-114',
-    '148': 'envive-tw-leading-148',
-    '140': 'envive-tw-leading-140',
-    '130': 'envive-tw-leading-130',
+    t1: 'envive-tw-leading-t1',
+    t2: 'envive-tw-leading-t2',
+    t3: 'envive-tw-leading-t3',
+    h1: 'envive-tw-leading-h1',
+    h2: 'envive-tw-leading-h2',
+    h3: 'envive-tw-leading-h3',
+    b1: 'envive-tw-leading-b1',
+    b2: 'envive-tw-leading-b2',
+    b3: 'envive-tw-leading-b3',
+    b4: 'envive-tw-leading-b4',
+    b5: 'envive-tw-leading-b5',
+    l1: 'envive-tw-leading-l1',
+    l2: 'envive-tw-leading-l2',
   };
   return (
     <section>

package/src/components/FloatingChat/components/SalesAgentBadgeContent.tsx

@@ -59,6 +59,7 @@ export interface GetBadgeContentAndLabelParams {
   onExploreAllResults?: () => void;
   displayLimit?: number;
   hideBadgeCount?: boolean;
+  isMobile?: boolean;
 }
 
 export interface BadgeContentAndLabel {
@@ -72,6 +73,7 @@ export const getBadgeContentAndLabel = ({
   onExploreAllResults,
   hideBadgeCount,
   displayLimit = MOST_RELEVANT_DISPLAY_LIMIT,
+  isMobile = false,
 }: GetBadgeContentAndLabelParams): BadgeContentAndLabel => {
   if (hideBadgeCount) {
     return {
@@ -83,12 +85,16 @@ export const getBadgeContentAndLabel = ({
     <SalesAgentBadgeContent
       totalProducts={totalProducts}
       displayLimit={displayLimit}
-      onExploreAllResults={onExploreAllResults}
+      onExploreAllResults={onExploreAllResults ?? (() => {})}
     />
   ) : null;
 
+  // Desktop: show count badge when totalProducts >= 4; Mobile: show when totalProducts >= 3
+  const badgeMinThreshold = isMobile ? 3 : 4;
   const badgeLabel =
-    !areProductsMoreThanDisplayLimit && totalProducts > 1 ? `${totalProducts} Products` : null;
+    !areProductsMoreThanDisplayLimit && totalProducts >= badgeMinThreshold
+      ? `${totalProducts} Products`
+      : null;
 
   return { badgeContent, badgeLabel };
 };

package/src/components/FloatingChat/components/SalesAgentProductCardsCarousel.tsx

@@ -6,6 +6,7 @@ import {
   SalesAgentProductCardVariant,
 } from '../../SalesAgentProductCard/types/types';
 import { resolveTheme } from '../../utils/resolveTheme';
+import { useCheckIsMobile } from '../../utils/useCheckIsMobile';
 import { getProductCarouselDisplayInfo } from '../utils/functions';
 import { getBadgeContentAndLabel } from './SalesAgentBadgeContent';
 
@@ -32,6 +33,7 @@ export const SalesAgentProductCardsCarousel = ({
   onExploreAllResults,
 }: SalesAgentProductCardsCarouselProps) => {
   const finalTheme = resolveTheme(theme);
+  const { isMobile } = useCheckIsMobile('md');
   const { totalProducts, areProductsMoreThanDisplayLimit, displayedProducts } =
     getProductCarouselDisplayInfo(products, numberOfProducts);
 
@@ -44,13 +46,14 @@ export const SalesAgentProductCardsCarousel = ({
     totalProducts,
     areProductsMoreThanDisplayLimit,
     onExploreAllResults,
+    isMobile,
   });
 
   return (
     <Carousel
       hideNavigation={hideNavigation}
       badgeContent={badgeContent}
-      badgeLabel={badgeLabel}
+      badgeLabel={badgeLabel ?? undefined}
       elements={displayedProducts.map((product, index) => (
         <SalesAgentProductCard
           key={product.id ?? `product-${index}`}
@@ -66,7 +69,7 @@ export const SalesAgentProductCardsCarousel = ({
           url={product.url}
           target="_blank"
           theme={finalTheme}
-          onClick={() => onProductCardClick(product)}
+          onClick={() => onProductCardClick?.(product)}
         />
       ))}
       theme={finalTheme}

package/src/components/FloatingChat/utils/functions.ts

@@ -169,8 +169,7 @@ export const getProductCarouselDisplayInfo = <T>(
 } => {
   const totalProducts = numberOfProducts ?? products.length;
   const areProductsMoreThanDisplayLimit = totalProducts > displayLimit;
-  const displayedProducts = areProductsMoreThanDisplayLimit
-    ? products.slice(0, displayLimit)
-    : products;
+  const maxDisplayed = areProductsMoreThanDisplayLimit ? displayLimit : totalProducts;
+  const displayedProducts = products.slice(0, maxDisplayed);
   return { totalProducts, areProductsMoreThanDisplayLimit, displayedProducts };
 };

package/src/components/ProductCard/ProductCard.tsx

@@ -4,10 +4,11 @@ import { TypographyColor } from '../Typography/types';
 import { resolveTheme } from '../utils/resolveTheme';
 import { WidgetTextField } from '../WidgetTextField';
 import { ProductCardWidgetComponents } from './components';
-import { ProductCardProps } from './types';
+import { ProductCardProps, ProductCardVariant } from './types';
 
 export const ProductCard = ({
   theme = Theme.GLOBAL_CUSTOM,
+  variant = ProductCardVariant.DARK,
   imageSrc,
   headline,
   italicizeHeadline,
@@ -33,11 +34,14 @@ export const ProductCard = ({
   onTranscriptionCompleted,
 }: ProductCardProps) => {
   const resolvedTheme = resolveTheme(theme);
+  const isLight = variant === ProductCardVariant.LIGHT;
+  const minimalTextColor = isLight ? TypographyColor.TEXT_PRIMARY : TypographyColor.TEXT_LIGHT;
 
   return (
     <ProductCardWidgetComponents.Poster
       imageSrc={imageSrc}
       fallbackColor={fallbackColor}
+      variant={variant}
     >
       <ProductCardWidgetComponents.Header
         headline={headline}
@@ -46,6 +50,7 @@ export const ProductCard = ({
         textTypingDuration={textTypingDuration}
         textTransition={textTransition}
         loop={loop}
+        variant={variant}
       />
       <ProductCardWidgetComponents.Carousel
         theme={resolvedTheme}
@@ -63,15 +68,14 @@ export const ProductCard = ({
       <WidgetTextField
         theme={resolvedTheme}
         minimalFrame={resolvedTheme === Theme.MINIMAL ? 'bottom-only' : 'full'}
+        minimalBorderVariant={isLight ? 'primary' : 'light'}
         placeholder={placeholder}
         onClick={onInputClick}
         enableVoiceInput={voiceInputEnabled}
         onTranscriptionStarted={onTranscriptionStarted}
         onTranscriptionCompleted={onTranscriptionCompleted}
         textColor={
-          resolvedTheme === Theme.MINIMAL
-            ? TypographyColor.TEXT_LIGHT
-            : TypographyColor.TEXT_SECONDARY
+          resolvedTheme === Theme.MINIMAL ? minimalTextColor : TypographyColor.TEXT_SECONDARY
         }
         className={classNames(
           resolvedTheme === Theme.MINIMAL

package/src/components/ProductCard/components/Header.tsx

@@ -4,7 +4,7 @@ import { Stack } from '../../Stack';
 import { Typography, TypographyColor, TypographyVariant } from '../../Typography';
 import { useAnimatedTextMinHeight } from '../../utils/useAnimatedTextMinHeight';
 import { useGetHeaderProperties } from '../hooks/useGetHeaderProperties';
-import { HeaderProps } from '../types';
+import { HeaderProps, ProductCardVariant } from '../types';
 
 export const Header = ({
   headline,
@@ -13,10 +13,16 @@ export const Header = ({
   textTypingDuration,
   textTransition,
   loop,
+  variant = ProductCardVariant.DARK,
 }: HeaderProps) => {
   const { stackClasses, headlineClasses } = useGetHeaderProperties(italicizeHeadline);
   const { measuringRef, minHeight } = useAnimatedTextMinHeight(animatedText);
 
+  const textColor =
+    variant === ProductCardVariant.LIGHT
+      ? TypographyColor.TEXT_PRIMARY
+      : TypographyColor.TEXT_LIGHT;
+
   const biggestText = useMemo(() => {
     return animatedText.reduce((maxText, currText) => {
       return currText.length > maxText.length ? currText : maxText;
@@ -27,12 +33,12 @@ export const Header = ({
     (text: string) => (
       <Typography
         variant={TypographyVariant.B3_MD}
-        color={TypographyColor.TEXT_LIGHT}
+        color={textColor}
       >
         {text}
       </Typography>
     ),
-    [],
+    [textColor],
   );
 
   return (
@@ -42,7 +48,7 @@ export const Header = ({
     >
       <Typography
         variant={TypographyVariant.H1_MD}
-        color={TypographyColor.TEXT_LIGHT}
+        color={textColor}
         className={headlineClasses}
         numberOfLines={2}
       >
@@ -63,7 +69,7 @@ export const Header = ({
             <div>
               <Typography
                 variant={TypographyVariant.B3_MD}
-                color={TypographyColor.TEXT_LIGHT}
+                color={textColor}
               >
                 {biggestText}
               </Typography>

package/src/components/ProductCard/components/Poster.tsx

@@ -1,9 +1,18 @@
 import { Container } from '../../Container';
 import { useGetPosterProperties } from '../hooks/useGetPosterProperties';
-import { PosterProps } from '../types';
+import { PosterProps, ProductCardVariant } from '../types';
 
-export const Poster = ({ children, imageSrc, fallbackColor }: PosterProps) => {
-  const { containerStyles, containerClasses } = useGetPosterProperties(imageSrc, fallbackColor);
+export const Poster = ({
+  children,
+  imageSrc,
+  fallbackColor,
+  variant = ProductCardVariant.DARK,
+}: PosterProps) => {
+  const { containerStyles, containerClasses } = useGetPosterProperties(
+    imageSrc,
+    fallbackColor,
+    variant,
+  );
   return (
     <Container
       className={containerClasses}

package/src/components/ProductCard/hooks/useGetPosterProperties.ts

@@ -1,7 +1,19 @@
-const OVERLAY_OPACITY = '60'; // 60%
+import { ProductCardVariant } from '../types';
 
-export const useGetPosterProperties = (imageSrc: string, fallbackColor: string) => {
-  const overlayColor = `#000000${OVERLAY_OPACITY}`;
+const DARK_OVERLAY_OPACITY = '60'; // ~38% opacity
+const LIGHT_OVERLAY_OPACITY = 'CC'; // 80% opacity
+
+export const useGetPosterProperties = (
+  imageSrc: string,
+  fallbackColor: string,
+  variant: ProductCardVariant = ProductCardVariant.DARK,
+) => {
+  const defaultOverlayColor =
+    variant === ProductCardVariant.LIGHT
+      ? `#FFFFFF${LIGHT_OVERLAY_OPACITY}`
+      : `#000000${DARK_OVERLAY_OPACITY}`;
+  // CSS variable allows external overrides (e.g. admin preview panel)
+  const overlayColor = `var(--envive-product-card-overlay, ${defaultOverlayColor})`;
   const bgColor = fallbackColor || 'black';
   const containerStyles: React.CSSProperties = {
     background: imageSrc

package/src/components/ProductCard/index.ts

@@ -1,2 +1,3 @@
 export { ProductCard } from './ProductCard';
+export { ProductCardVariant } from './types';
 export type { ProductCardProps, InputProps } from './types';