Converted px to rems in the base code.

[fraincs]

Issue:

Summary

rem units not resizeable by user agent unless postcss-pxtorem is used - #1072

What I did

Converted px to rems in the base code.

How to test

This requires changing your browser basic font size for now.

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 3ea5616e7216782a3c8d74213b4cafcc02a11c5a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[netlify[bot]]

✅ Deploy Preview for sg-orbit ready!

Name	Link
🔨 Latest commit	3ea5616e7216782a3c8d74213b4cafcc02a11c5a
🔍 Latest deploy log	https://app.netlify.com/sites/sg-orbit/deploys/640fcdca44179a0008e5831b
😎 Deploy Preview	https://deploy-preview-1195--sg-orbit.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[bot]]

✅ Deploy Preview for sg-storybook ready!

Name	Link
🔨 Latest commit	3ea5616e7216782a3c8d74213b4cafcc02a11c5a
🔍 Latest deploy log	https://app.netlify.com/sites/sg-storybook/deploys/640fcdcaed98220008a44422
😎 Deploy Preview	https://deploy-preview-1195--sg-storybook.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.

[patricklafrance]

While it does make sense to use "rem" in Orbit components CSS codebase, I am not sure about using rem for documentation stories and event Chromatic stories as most people tend to think in term of pixels.

[fraincs]

While it does make sense to use "rem" in Orbit components CSS codebase, I am not sure about using rem for documentation stories and event Chromatic stories as most people tend to think in term of pixels.

Great point. For the chromatic stories I was planning for the eventuality of testing rems in Chromatic too. It could be px too. As for documentation the idea is to support the users who change their font size even in documentation.