Convert padding/margin props to CSS logical properties

[chanceaclark]

Is your feature request related to a problem? Please describe. We want to be able to support many kinds of user experiences across the world. Currently, our padding/margin properties are geared towards ltr screens. In order for our experiences to work globally, we should use CSS logical properties instead of normal CSS properties. Since we don't support IE11 anymore we can now utilities this CSS functionality.

Describe the solution, feature, or improvement you'd like I propose to rename our current properties to a new logical property format. For example,

// Old:
<Box paddingLeft="..." />
<Box marginVertical="..." />

// New:
<Box paddingInlineStart="..." />
<Box marginBlock="..." />

This would definitely be a breaking change, but we should tackle this before we get out of "beta".

Additional context Alongside this, I plan to ship along an eslint rule in bigcommerce/eslint-config to enforce using CSS logical properties both within JSX components and extended styled components.