Update Tooltip v2 to use CSS Modules 💖

[broccolinisoup]

• Subset of https://github.com/github/primer/issues/3154

I'm creating this issue for tracking purposes. We plan to update the Tooltip v2 (draft) to use CSS modules and here are CSS variable suggestions @langermank left on the #3394

1. https://github.com/primer/react/blob/main/src/drafts/Tooltip/Tooltip.tsx#L16

- padding: 0.5em 0.75em;
+ padding: var(--base-size-8) var(--base-size-4);

2. https://github.com/primer/react/blob/main/src/drafts/Tooltip/Tooltip.tsx#L44

- font: normal normal 11px/1.5 ${get('fonts.normal')};
+ font: var(--text-body-shorthand-small);

3. https://github.com/primer/react/blob/main/src/drafts/Tooltip/Tooltip.tsx#L46

-  color: ${get('colors.fg.onEmphasis')};
+  color: var(--fgColor-onEmphasis);

4. https://github.com/primer/react/blob/main/src/drafts/Tooltip/Tooltip.tsx#L50

-  background: ${get('colors.neutral.emphasisPlus')};
+  background: var(--bgColor-emphasis);

5. https://github.com/primer/react/blob/main/src/drafts/Tooltip/Tooltip.tsx#L51

-   border-radius: ${get('radii.2')};
+  border-radius: var(--borderRadius-medium);

[github-actions]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

[github-actions]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

[jonrohan]

Closing this to track in https://github.com/orgs/github/projects/19578/views/1 and part of https://github.com/github/primer/issues/4028