CSS Logical Properties should be theme-aware

[folz]

Describe the bug

We use CSS Logical Properties to help support RTL and vertical languages. They are not theme-aware, so it's cumbersome to use theme values with them. This indirectly encourages developers to use physical direction instead, which makes it harder to support different writing modes.

For example, our styles may use marginInlineStart instead of marginLeft, which would be the same in a LTR language like English, but would instead mean marginRight when the language reads right-to-left like Hebrew.

To Reproduce
Use sx like so:

<Box sx={{
  marginInlineStart: 'medium'
}} />

Expected behavior

margin-inline-start: '8px'; /* or whatever `theme.space.medium maps` to */

Actual behavior

margin-inline-start: 'medium'; /* the literal string 'medium' */

Additional context

There are a lot of logical properties. I'm happy to do the work of adding them to theme-ui if you feel this is appropriate to include.

[jxnblk]

Thanks! We'd accept a PR to support this.

The dictionary for mapping theme scales to properties is here: https://github.com/system-ui/theme-ui/blob/master/packages/css/src/index.ts#L55

[folz]

Sweet, I'll look to have that PR over in a day or so.

[folz]

Update: the linked PR #797 looks to do the trick too