Logical Properties instead of Directions

[bennypowers]

TL;DR: We should use logical properties instead of directions everywhere, both in our internal CSS, and in our element APIs

• left -> inline-start
• top -> block-start
• right -> inline-end
• bottom -> block-end

What are logical properties?

Logical properties allow us to support RTL and top-to-bottom languages without much fuss.

Read about CSS logical Properties on MDN

Who needs to be aware of this

@RedHat-UX/developers and @RedHat-UX/designers alike need to be aware of these properties, and use them in

1. Designs - XD files and component specs should use logical properties instead of directions. Designers may add directions in parentheses:

a highlight appears at the inline-start (left) of the element

2. Element APIs

@property() highlight?: 'inline-start'|'inline-end';

3. CSS - most importantly, we should actually use the css logical properties in our component styles

border-start-start-radius: 2px;
margin-block-start: 0;

[coreyvickery]

@bennypowers Can these be tokens or no?

[bennypowers]

short answer: no

longer answer: i believe the tokens spec might allow us to package up rules or properties (as opposed to values) as tokens, but we don't have a compelling means of applying those right now. Instead, we have to rely on developer discipline and code review

/* DON'T */
margin-left: auto;
/* DO */
margin-inline-start: auto;

[wesruv]

Here here! I just learned about these and I 100% agree.

[coreyvickery]

@bennypowers Is this something that I or we need to add to the list of design tokens?

[bennypowers]

designers should avoid using directions when defining tokens or writing guidelines