How to set a property based on the value of another property?

[iam-yan]

For example, let's say we have tokens for:

• height: xs, sm, md, lg, xl
• boder-radius: 01, 02, 03

How to implement the following logic?

• if height = sm | xs, -> boder-radius = 01
• if height = md , -> boder-radius = 02
• else, -> boder-radius = 03

[lucasbozzo]

Hi @iam-yan,

I believe you could use variants along with defaultVariants and compoundVariants. Use variants to create the height and borderRadius options. With compoundVariants you create the "if" cases, and with defaultVariants you could define the "else" statement. Check out this sandbox. I hope that helps.

[iam-yan]

Hey @lbozzo ,

Thanks for your reply. Yeah that works. However there are some repeating already. I am wondering if there are any better solutions to mimic the logic of if (height === x || height === y)?

[peduarte]

Repeating is good 😄 The Stitches API was designed with repetition in mind. Duplication > abstraction. You're welcome to create wrapper components and abstract further, but you'll be in charge of types too.