react-image: Replacing use of functions in makeStyles with direct use…

… of tokens (#21044)

#### Pull request checklist

- [x] Addresses an existing issue: Implements part of #20651
- [x] Include a change request file using `$ yarn change`

#### Description of changes

_This PR is part of a series of PRs that split #20918 into smaller PRs._
_This PR follows #21026._

This PR replaces the use of functions in `makeStyles` calls in the `@fluentui/react-image` package with direct use of the `tokens` exported from `@fluentui/react-theme`.

change/@fluentui-react-image-1eccf8fc-d0e8-4674-b625-a66db140efc2.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "react-image: Replacing use of functions in makeStyles with direct use of tokens.",
+  "packageName": "@fluentui/react-image",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-image/src/components/Image/useImageStyles.ts

@@ -1,29 +1,30 @@
 import { shorthands, mergeClasses, makeStyles } from '@fluentui/react-make-styles';
+import { tokens } from '@fluentui/react-theme';
 import type { ImageState } from './Image.types';
 
 export const imageClassName = 'fui-Image';
 
 const useStyles = makeStyles({
-  root: theme => ({
-    ...shorthands.borderColor(theme.colorNeutralStroke1),
-    ...shorthands.borderRadius(theme.borderRadiusNone),
+  root: {
+    ...shorthands.borderColor(tokens.colorNeutralStroke1),
+    ...shorthands.borderRadius(tokens.borderRadiusNone),
 
     boxSizing: 'border-box',
     display: 'inline-block',
-  }),
-  rootBordered: theme => ({
+  },
+  rootBordered: {
     ...shorthands.borderStyle('solid'),
-    ...shorthands.borderWidth(theme.strokeWidthThin),
-  }),
-  rootCircular: theme => ({
-    ...shorthands.borderRadius(theme.borderRadiusCircular),
-  }),
-  rootRounded: theme => ({
-    ...shorthands.borderRadius(theme.borderRadiusMedium),
-  }),
-  rootShadow: theme => ({
-    boxShadow: theme.shadow4,
-  }),
+    ...shorthands.borderWidth(tokens.strokeWidthThin),
+  },
+  rootCircular: {
+    ...shorthands.borderRadius(tokens.borderRadiusCircular),
+  },
+  rootRounded: {
+    ...shorthands.borderRadius(tokens.borderRadiusMedium),
+  },
+  rootShadow: {
+    boxShadow: tokens.shadow4,
+  },
   rootFitNone: {
     objectFit: 'none',
     objectPosition: 'left top',