Skip to content

CSS Logical Properties should be theme-aware #794

@folz

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    help wantedExtra attention is needed

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions