simplified styles only changed background to red

packages/react-components/react-card/stories/src/Card/CardDefault.stories.tsx

@@ -6,7 +6,6 @@ import {
   Caption1,
   Button,
   mergeClasses,
-  tokens,
   FluentProvider,
   Card,
   CardFooter,
@@ -18,10 +17,7 @@ import type { CardState, FluentProviderCustomStyleHooks } from '@fluentui/react-
 
 const useCardStyle = makeStyles({
   root: {
-    backgroundColor: tokens.colorNeutralBackground3,
-    width: '620px',
-    maxWidth: '100%',
-    margin: 'auto',
+    backgroundColor: 'red',
   },
 });
 

packages/react-components/react-card/stories/src/CardFooter/CardFooterDefault.stories.tsx

@@ -1,14 +1,12 @@
 import * as React from 'react';
-import { makeStyles, Button, tokens, FluentProvider, mergeClasses } from '@fluentui/react-components';
+import { makeStyles, Button, FluentProvider, mergeClasses } from '@fluentui/react-components';
 import { ArrowReply16Regular, MoreHorizontal20Regular, Share16Regular } from '@fluentui/react-icons';
 import { CardFooter } from '@fluentui/react-components';
 import type { CardState, FluentProviderCustomStyleHooks } from '@fluentui/react-components';
 
 const useCardFooterStyle = makeStyles({
   root: {
-    backgroundColor: tokens.colorNeutralBackground3,
-    width: '300px',
-    margin: 'auto',
+    backgroundColor: 'red',
   },
 });
 

packages/react-components/react-card/stories/src/CardHeader/CardHeaderDefault.stories.tsx

@@ -1,14 +1,12 @@
 import * as React from 'react';
 import { CardHeader } from '@fluentui/react-components';
-import { makeStyles, Button, Body1, Caption1, tokens, FluentProvider, mergeClasses } from '@fluentui/react-components';
+import { makeStyles, Button, Body1, Caption1, FluentProvider, mergeClasses } from '@fluentui/react-components';
 import { MoreHorizontal20Regular } from '@fluentui/react-icons';
 import type { CardState, FluentProviderCustomStyleHooks } from '@fluentui/react-components';
 
 const useCardHeaderStyle = makeStyles({
   root: {
-    backgroundColor: tokens.colorNeutralBackground3,
-    width: '300px',
-    margin: 'auto',
+    backgroundColor: 'red',
   },
 });
 

packages/react-components/react-card/stories/src/CardPreview/CardPreviewDefault.stories.tsx

@@ -1,12 +1,11 @@
 import * as React from 'react';
-import { CardPreview, tokens, makeStyles, mergeClasses, FluentProvider } from '@fluentui/react-components';
+import { CardPreview, makeStyles, mergeClasses, FluentProvider } from '@fluentui/react-components';
 import type { CardState, FluentProviderCustomStyleHooks } from '@fluentui/react-components';
 
 const useCardPreviewStyle = makeStyles({
   root: {
-    backgroundColor: tokens.colorNeutralBackground3,
+    backgroundColor: 'red',
     padding: '30px',
-    margin: 'auto',
   },
 });