Align Tooltip font with PVC

.changeset/hot-cooks-collect.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Align `font` with PVC for Tooltip

e2e/components/IconButton.test.ts

@@ -50,6 +50,7 @@ const stories = [
   {
     title: 'Keybinding Hint on Description',
     id: 'components-iconbutton-features--keybinding-hint-on-description',
+    disableAnimations: true,
     async setup(page: Page) {
       await page.keyboard.press('Tab') // focus on icon button
       await page.getByText('You have unread notifications').waitFor({

packages/react/src/TooltipV2/Tooltip.module.css

@@ -18,14 +18,13 @@
     width: max-content;
     max-width: 250px;
     /* stylelint-disable-next-line primer/spacing */
-    padding: 0.5em 0.75em;
+    padding: var(--overlay-paddingBlock-condensed) var(--overlay-padding-condensed);
     margin: auto;
 
     /* for scrollbar */
     overflow: visible;
     clip: auto;
-    /* stylelint-disable-next-line primer/typography */
-    font: normal normal 11px/1.5 var(--fontStack-system);
+    font: var(--text-body-shorthand-small);
     color: var(--tooltip-fgColor);
     text-align: center;
     word-wrap: break-word;
@@ -35,6 +34,7 @@
     border-radius: var(--borderRadius-medium);
     -webkit-font-smoothing: subpixel-antialiased;
     inset: auto;
+    text-wrap: balance;
   }
 
   /* class name in chrome is :popover-open */
@@ -123,8 +123,5 @@
 }
 
 .KeybindingHintContainer.HasTextBefore {
-  /* Offset negative on the right right to make right spacing look like top and bottom spacing, only for keybinding hints and only when there is text */
-  /* stylelint-disable-next-line primer/spacing */
-  margin-right: -0.125em;
   margin-left: var(--base-size-6);
 }