-
Notifications
You must be signed in to change notification settings - Fork 678
Closed
Labels
help wantedExtra attention is neededExtra attention is needed
Description
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, lachlanjc and dburles
Metadata
Metadata
Assignees
Labels
help wantedExtra attention is neededExtra attention is needed