spacings vs space

[mannehedlund]

Hi team,

I have a question regarding the usage of "spacings" vs "space" and "sizings" vs "size" in Paste.

In Flex UI (we're on Paste v15), we consume the "spacings" and "sizings" objects you export as part of your theme.
(e.g. spacings.space30)

However, it was noticed that if you use https://remix.twilio.design/spacing and click export, the "space30" property lives under a "space" object, not "spacings". I'm wondering what the reason for this inconsistency is? And if there's a mapping documented somewhere?

Any insight would be appreciated. Thanks 😃

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Clarity on spaceX measurement design decision (updated: 09/20/2022, similarity score: 86%)
• Clarity on spaceX measurement design decision - Answer (updated: 09/20/2022, similarity score: 85%)
• General questions related screen sizes and spacing (updated: 11/22/2022, similarity score: 85%)

[SiTaggart]

Hi @mannehedlund

I can see where the is confusion coming from. Flex consumes Design Tokens, which has a slightly different shape to the Theme which we pass to the Theme Provider.

In Design Tokens we have fewer keys, and space is spacings.

For the Emotion Theme we add some extra stuff, slightly different buckets, and rename spacing to space

It's done for some constraints we have in the system and third parties we use. Theo our design token processor only acknowledges spacings, and Styled System our theming solution only acknowledges space.

We actually have two transform methods in twilio-paste/theme for this reason. generateThemeFromTokens and generateTokensFromTheme.

We don't really document it because it's kind of rare to just consume Design Tokens when, what you really need comes from twilio-paste/theme directly. I think you could just grab import {DefaultTheme} from '@twilio-paste/theme' which would match the output of remix and be directly passable to Theme Provider.

[mannehedlund]

Thanks for the explanation.

[SiTaggart]

Reopening just in case a future someone has a question about this.