primer / react

An implementation of GitHub's Primer Design System using React
https://primer.style/guides/react
MIT License
3.1k stars 533 forks source link

Update Tooltip v2 to use CSS Modules 💖 #3767

Open broccolinisoup opened 11 months ago

broccolinisoup commented 11 months ago

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 https://github.com/primer/react/pull/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);
  1. 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);
  1. https://github.com/primer/react/blob/main/src/drafts/Tooltip/Tooltip.tsx#L46
-  color: ${get('colors.fg.onEmphasis')};
+  color: var(--fgColor-onEmphasis);
  1. https://github.com/primer/react/blob/main/src/drafts/Tooltip/Tooltip.tsx#L50
-  background: ${get('colors.neutral.emphasisPlus')};
+  background: var(--bgColor-emphasis);
  1. 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[bot] commented 5 months ago

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.