From f5f97e966b019190e3596e6acc1c7c6916c1bdb4 Mon Sep 17 00:00:00 2001
From: Makoto Morimoto <humbertomakotomorimoto@gmail.com>
Date: Thu, 6 Jan 2022 09:43:05 -0800
Subject: [PATCH] react-link: Replacing use of functions in makeStyles with
 direct use of tokens (#21047)

#### 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-link` package with direct use of the `tokens` exported from `@fluentui/react-theme`.
---
 ...-d691853c-74c7-49d7-bfec-589a28e0c5a6.json |  7 +++
 .../src/components/Link/useLinkStyles.ts      | 60 ++++++++++---------
 2 files changed, 38 insertions(+), 29 deletions(-)
 create mode 100644 change/@fluentui-react-link-d691853c-74c7-49d7-bfec-589a28e0c5a6.json

diff --git a/change/@fluentui-react-link-d691853c-74c7-49d7-bfec-589a28e0c5a6.json b/change/@fluentui-react-link-d691853c-74c7-49d7-bfec-589a28e0c5a6.json
new file mode 100644
index 00000000000000..9298974d86ae09
--- /dev/null
+++ b/change/@fluentui-react-link-d691853c-74c7-49d7-bfec-589a28e0c5a6.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "react-link: Replacing use of functions in makeStyles with direct use of tokens.",
+  "packageName": "@fluentui/react-link",
+  "email": "Humberto.Morimoto@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-link/src/components/Link/useLinkStyles.ts b/packages/react-link/src/components/Link/useLinkStyles.ts
index 1d56fb8696cd1d..26462859a2b5c3 100644
--- a/packages/react-link/src/components/Link/useLinkStyles.ts
+++ b/packages/react-link/src/components/Link/useLinkStyles.ts
@@ -1,5 +1,7 @@
+import * as React from 'react';
 import { shorthands, makeStyles, mergeClasses } from '@fluentui/react-make-styles';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
 import type { LinkState } from './Link.types';
 
 export const linkClassName = 'fui-Link';
@@ -10,21 +12,21 @@ const useStyles = makeStyles({
     textDecorationStyle: 'double',
   }),
   // Common styles.
-  root: theme => ({
+  root: {
     backgroundColor: 'transparent',
     borderTopStyle: 'none',
     borderLeftStyle: 'none',
     borderRightStyle: 'none',
     borderBottomColor: 'transparent',
     borderBottomStyle: 'solid',
-    borderBottomWidth: theme.strokeWidthThin,
+    borderBottomWidth: tokens.strokeWidthThin,
     boxSizing: 'border-box',
-    color: theme.colorBrandForegroundLink,
+    color: tokens.colorBrandForegroundLink,
     cursor: 'pointer',
     display: 'inline',
-    fontFamily: theme.fontFamilyBase,
-    fontSize: theme.fontSizeBase300,
-    fontWeight: theme.fontWeightRegular,
+    fontFamily: tokens.fontFamilyBase,
+    fontSize: tokens.fontSizeBase300,
+    fontWeight: tokens.fontWeightRegular as React.CSSProperties['fontWeight'],
     ...shorthands.margin(0),
     ...shorthands.padding(0),
     ...shorthands.overflow('inherit'),
@@ -34,57 +36,57 @@ const useStyles = makeStyles({
     userSelect: 'text',
 
     ':hover': {
-      borderBottomColor: theme.colorBrandForegroundLinkHover,
-      color: theme.colorBrandForegroundLinkHover,
+      borderBottomColor: tokens.colorBrandForegroundLinkHover,
+      color: tokens.colorBrandForegroundLinkHover,
     },
 
     ':active': {
-      borderBottomColor: theme.colorBrandForegroundLinkPressed,
-      color: theme.colorBrandForegroundLinkPressed,
+      borderBottomColor: tokens.colorBrandForegroundLinkPressed,
+      color: tokens.colorBrandForegroundLinkPressed,
     },
-  }),
+  },
   // Overrides when an href is present so the Link renders as an anchor.
   href: {
     fontSize: 'inherit',
   },
   // Overrides when the Link appears subtle.
-  subtle: theme => ({
-    color: theme.colorNeutralForeground2,
+  subtle: {
+    color: tokens.colorNeutralForeground2,
 
     ':hover': {
-      borderBottomColor: theme.colorNeutralForeground2Hover,
-      color: theme.colorNeutralForeground2Hover,
+      borderBottomColor: tokens.colorNeutralForeground2Hover,
+      color: tokens.colorNeutralForeground2Hover,
     },
 
     ':active': {
-      borderBottomColor: theme.colorNeutralForeground2Pressed,
-      color: theme.colorNeutralForeground2Pressed,
+      borderBottomColor: tokens.colorNeutralForeground2Pressed,
+      color: tokens.colorNeutralForeground2Pressed,
     },
-  }),
+  },
   // Overrides when the Link is rendered inline within text.
-  inline: theme => ({
-    borderBottomColor: theme.colorBrandForegroundLink,
-  }),
+  inline: {
+    borderBottomColor: tokens.colorBrandForegroundLink,
+  },
   // Overrides when the Link is rendered inline within text and appears subtle.
-  inlineSubtle: theme => ({
-    borderBottomColor: theme.colorNeutralForeground2,
-  }),
+  inlineSubtle: {
+    borderBottomColor: tokens.colorNeutralForeground2,
+  },
   // Overrides when the Link is disabled.
-  disabled: theme => ({
+  disabled: {
     borderBottomColor: 'transparent',
-    color: theme.colorNeutralForegroundDisabled,
+    color: tokens.colorNeutralForegroundDisabled,
     cursor: 'not-allowed',
 
     ':hover': {
       borderBottomColor: 'transparent',
-      color: theme.colorNeutralForegroundDisabled,
+      color: tokens.colorNeutralForegroundDisabled,
     },
 
     ':active': {
       borderBottomColor: 'transparent',
-      color: theme.colorNeutralForegroundDisabled,
+      color: tokens.colorNeutralForegroundDisabled,
     },
-  }),
+  },
 });
 
 export const useLinkStyles = (state: LinkState): LinkState => {