refactor(Button): padding units from pixel to rem

[jsehull]

Closes #10318

Change remaining px units in Button padding to rem

Changelog

New

• n/a

Changed

• update padding pixel units to rem equivalent

Removed

• n/a

Testing / Reviewing

1. Confirm pixel values are now in rem
2. Confirm the new rem calculations still have the same desired size outcome as before. Below are some Dev Tool images of the original button sizes before this update for comparison.

• sm
  

• md
  

• lg
  

• xl
  

• 2xl
  

3. Here are some values you can paste into Secondary buttons in Button.stories.js to manually inspect the values per size.

<>
    <Button size="sm" kind="secondary" {...args}> Button </Button>
    <Button size="md" kind="secondary" {...args}> Button </Button>
    <Button size="lg" kind="secondary" {...args}> Button </Button>
    <Button size="xl" kind="secondary" {...args}> Button </Button>
    <Button size="2xl" kind="secondary" {...args}> Button </Button>
</>

[netlify]

✅ Deploy Preview for carbon-components-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	2f3e092
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-components-react/deploys/6426cdab10a4480008cec554
😎 Deploy Preview	https://deploy-preview-13407--carbon-components-react.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	2f3e092
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/6426cdabc7e6d700088e4b2f
😎 Deploy Preview	https://deploy-preview-13407--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[francinelucca]

LGTM!
Before

After