feat: add textColor and iconColor options to CategoryCard

.changeset/tame-needles-fetch.md

@@ -0,0 +1,5 @@
+---
+'commerce-toolkit': patch
+---
+
+Added textColor and iconColor options for CategoryCard

src/components/category-card/category-card.tsx

@@ -28,6 +28,8 @@ export interface CategoryCardProps extends CategoryCardContent {
   textSize?: 'small' | 'medium' | 'large' | 'x-large';
   textPosition?: 'inside' | 'outside';
   showOverlay?: boolean;
+  textColor?: 'light' | 'dark';
+  iconColor?: 'light' | 'dark';
 }
 
 /**
@@ -59,13 +61,17 @@ export function CategoryCard({
   aspectRatio = '5/6',
   textPosition = 'outside',
   textSize = 'small',
+  textColor = 'dark',
+  iconColor = 'dark',
   showOverlay = true,
 }: CategoryCardProps) {
   return (
     <CategoryCardPrimitive.Root
       aspectRatio={aspectRatio}
       className={className}
+      iconColor={iconColor}
       showOverlay={showOverlay}
+      textColor={textColor}
       textSize={textSize}
     >
       <CategoryCardPrimitive.Icon asChild={icon?.asChild}>

src/components/category-card/primitives/category-card-icon.tsx

@@ -17,6 +17,10 @@ export function CategoryCardIcon({ asChild = false, className, children }: Categ
     'absolute right-5 top-5 z-10 size-6 text-[var(--category-card-light-icon,var(--foreground))] transition-transform duration-700 ease-out',
     // Group hover state
     'group-hover/category-card:-translate-y-1.5 group-hover/category-card:translate-x-1.5',
+    // Icon color: light
+    'group-data-[icon-color=light]/category-card:text-[var(--category-card-light-icon,var(--background))]',
+    // Icon color: dark
+    'group-data-[icon-color=dark]/category-card:text-[var(--category-card-dark-icon,var(--foreground))]',
     className,
   );
 

src/components/category-card/primitives/category-card-root.tsx

@@ -11,6 +11,8 @@ export type CategoryCardRootProps<E extends ElementType = 'article'> = Omit<
   as?: E;
   aspectRatio?: '5/6' | '3/4' | '1/1';
   textSize?: 'small' | 'medium' | 'large' | 'x-large';
+  textColor?: 'light' | 'dark';
+  iconColor?: 'light' | 'dark';
   showOverlay?: boolean;
 };
 
@@ -20,6 +22,8 @@ export function CategoryCardRoot<T extends ElementType = 'article'>({
   as,
   aspectRatio = '5/6',
   textSize = 'small',
+  textColor = 'dark',
+  iconColor = 'dark',
   showOverlay = true,
   ...props
 }: CategoryCardRootProps<T>) {
@@ -37,8 +41,10 @@ export function CategoryCardRoot<T extends ElementType = 'article'>({
         className,
       )}
       data-aspect-ratio={aspectRatio}
+      data-icon-color={iconColor}
       data-show-overlay={showOverlay}
       data-slot="category-card-root"
+      data-text-color={textColor}
       data-text-size={textSize}
       {...props}
     >

src/components/category-card/primitives/category-card-title.tsx

@@ -8,7 +8,7 @@ export function CategoryCardTitle({ children, className, ...props }: CategoryCar
   return (
     <h3
       className={cn(
-        'font-semibold leading-tight text-[var(--category-card-light-text,var(--foreground))]',
+        'font-semibold leading-tight',
         // Text size: small
         'group-data-[text-size=small]/category-card:text-lg group-data-[text-size=small]/category-card:tracking-normal',
         'group-data-[text-size=small]/category-card:@xs:text-xl',
@@ -21,6 +21,10 @@ export function CategoryCardTitle({ children, className, ...props }: CategoryCar
         // Text size: x-large
         'group-data-[text-size=x-large]/category-card:text-3xl group-data-[text-size=x-large]/category-card:tracking-tight',
         'group-data-[text-size=x-large]/category-card:@xs:text-4xl',
+        // Text color: light
+        'group-data-[text-color=light]/category-card:text-[var(--category-card-light-text,var(--background))]',
+        // Text color: dark
+        'group-data-[text-color=dark]/category-card:text-[var(--category-card-dark-text,var(--foreground))]',
         className,
       )}
       data-slot="category-card-title"

src/components/category-card/storybook/category-card.stories.tsx

@@ -113,6 +113,16 @@ import { ArrowUpRight } from 'lucide-react';
       control: 'boolean',
       description: 'Whether to show the gradient overlay when text is inside',
     },
+    textColor: {
+      control: 'select',
+      options: ['light', 'dark'],
+      description: 'The color scheme for the title text',
+    },
+    iconColor: {
+      control: 'select',
+      options: ['light', 'dark'],
+      description: 'The color scheme for the icon',
+    },
     image: {
       control: false,
       description: 'Image object with src and alt properties',
@@ -168,6 +178,8 @@ export const TextInside: Story = {
     textSize: 'medium',
     textPosition: 'inside',
     showOverlay: true,
+    textColor: 'light',
+    iconColor: 'dark',
   },
 };
 
@@ -185,6 +197,27 @@ export const WithoutImage: Story = {
   },
 };
 
+// Light text and icon colors (for dark images)
+export const LightTextAndIcon: Story = {
+  args: {
+    title: 'Bathroom Storage',
+    image: {
+      src: 'https://images.unsplash.com/photo-1664815122586-05fe094fb536?w=900',
+      alt: 'Minimal bathroom storage jar',
+    },
+    link: {
+      href: '/categories/storage',
+      ariaLabel: 'Shop Bathroom Storage',
+    },
+    aspectRatio: '3/4',
+    textSize: 'large',
+    textPosition: 'inside',
+    showOverlay: true,
+    textColor: 'light',
+    iconColor: 'light',
+  },
+};
+
 // Composable anatomy example
 export const ComposableAnatomy: Story = {
   render: () => (