added custom style hooks for Card components

packages/react-components/react-card/library/src/components/Card/Card.tsx

@@ -5,6 +5,7 @@ import { useCardStyles_unstable } from './useCardStyles.styles';
 import type { CardProps } from './Card.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCardContextValue } from './useCardContextValue';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 
 /**
  * A card provides scaffolding for hosting actions and content for a single topic.
@@ -14,6 +15,9 @@ export const Card: ForwardRefComponent<CardProps> = React.forwardRef<HTMLDivElem
   const cardContextValue = useCardContextValue(state);
 
   useCardStyles_unstable(state);
+
+  useCustomStyleHook_unstable('useCardStyles_unstable')(state);
+
   return renderCard_unstable(state, cardContextValue);
 });
 

packages/react-components/react-card/library/src/components/CardFooter/CardFooter.tsx

@@ -4,6 +4,7 @@ import { renderCardFooter_unstable } from './renderCardFooter';
 import { useCardFooterStyles_unstable } from './useCardFooterStyles.styles';
 import type { CardFooterProps } from './CardFooter.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useCustomStyleHook_unstable } from '../../../../../react-shared-contexts/library/src/index';
 
 /**
  * Component to render Button actions in a Card component.
@@ -12,6 +13,9 @@ export const CardFooter: ForwardRefComponent<CardFooterProps> = React.forwardRef
   const state = useCardFooter_unstable(props, ref);
 
   useCardFooterStyles_unstable(state);
+
+  useCustomStyleHook_unstable('useCardFooterStyles_unstable')(state);
+
   return renderCardFooter_unstable(state);
 });
 

packages/react-components/react-card/library/src/components/CardHeader/CardHeader.tsx

@@ -4,6 +4,7 @@ import { renderCardHeader_unstable } from './renderCardHeader';
 import { useCardHeaderStyles_unstable } from './useCardHeaderStyles.styles';
 import type { CardHeaderProps } from './CardHeader.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 
 /**
  * Component to render an image, text and an action in a Card component.
@@ -12,6 +13,9 @@ export const CardHeader: ForwardRefComponent<CardHeaderProps> = React.forwardRef
   const state = useCardHeader_unstable(props, ref);
 
   useCardHeaderStyles_unstable(state);
+
+  useCustomStyleHook_unstable('useCardHeaderStyles_unstable')(state);
+
   return renderCardHeader_unstable(state);
 });
 

packages/react-components/react-card/library/src/components/CardPreview/CardPreview.tsx

@@ -4,6 +4,7 @@ import { renderCardPreview_unstable } from './renderCardPreview';
 import { useCardPreviewStyles_unstable } from './useCardPreviewStyles.styles';
 import type { CardPreviewProps } from './CardPreview.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 
 /**
  * Component to render image previews of documents or articles in a Card component.
@@ -12,6 +13,9 @@ export const CardPreview: ForwardRefComponent<CardPreviewProps> = React.forwardR
   const state = useCardPreview_unstable(props, ref);
 
   useCardPreviewStyles_unstable(state);
+
+  useCustomStyleHook_unstable('useCardPreviewStyles_unstable')(state);
+
   return renderCardPreview_unstable(state);
 });