fix(react-tabs): fix circular tab sizes according to Figma spec (#34859)

Author: mainframev

change/@fluentui-react-tabs-a4a4d97e-57aa-45af-a514-efc3c99c6417.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: adjust circular sizes to Figma spec",
+  "packageName": "@fluentui/react-tabs",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-tabs/library/src/components/Tab/useTabStyles.styles.ts

@@ -186,8 +186,14 @@ const useCircularAppearanceStyles = makeStyles({
       color: 'inherit',
     },
   },
+  small: {
+    paddingBlock: `calc(${tokens.spacingVerticalXXS} - ${tokens.strokeWidthThin})`,
+  },
   medium: {
-    paddingBlock: `${tokens.spacingVerticalSNudge}`,
+    paddingBlock: `calc(${tokens.spacingVerticalSNudge} - ${tokens.strokeWidthThin})`,
+  },
+  large: {
+    paddingBlock: `calc(${tokens.spacingVerticalS} - ${tokens.strokeWidthThin})`,
   },
   subtle: {
     backgroundColor: tokens.colorSubtleBackground,
@@ -680,7 +686,9 @@ export const useTabButtonStyles_unstable = (state: TabState, slot: TabState['roo
     circularStyles.base,
     focusStyles.circular,
     // sizes
+    size === 'small' && circularStyles.small,
     size === 'medium' && circularStyles.medium,
+    size === 'large' && circularStyles.large,
     // subtle-circular appearance
     isSubtleCircular && circularStyles.subtle,
     selected && isSubtleCircular && circularStyles.subtleSelected,