DateCalendar, DateRangeCalendar: use px instead of rem, use theme-ready variables

[ciampo]

What?

Note: This PR applies the same changes as in WordPress/gutenberg#71248

Switch from rem to px units for some internal sizes (day button size, nav height, months gap).

Why?

Until now, the DateCalendar and DateRangeCalendar components would render in unexpected ways depending on the HTML base font size.

The changes in this PR enforce the same metrics across environments with different base HTML font sizes.

How?

Switch from rem to px, assuming a 16px base font size.

Testing Instructions

Compare Storybook examples on trunk and this PR:

• there shouldn't be any visual differences when the base HTML font size is set to 16px
• when (manually) changing the HTML base font size, the metrics of the version on trunk are expected to change, while the version from this PR should stay unchanged

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-152911

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-152911&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-152911&env=a8c-for-agencies

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• notifications

To test WordPress.com changes, run install-plugin.sh $pluginSlug fix/calendar-rem-px on your sandbox.