Skip to main content

🧮 Math in token value enhancements

Plugin FeedbackToken Values💚 Quality of Life

Today we can use math to create some very sophisticated token setups, but there are some limitations the community would like to have addressed:

Referencing Tokens in our math equations that have values that contain units can lead to unexpected results.

  • This is because the math package we use can resolve equations with units, as long as the units aren't mixed.

  • For example, if we have:

    • a Token named size-2 with a value of 1.5rem

    • a Token named density-default with a value of 2px

    • When we include both Tokens in a math equation written as: {size-2} + {density-default}

    • The equation can't be resolved because the Tokens we are referencing contain a mix of rem and pixel units.

  • If both Tokens have the same units, or are unitless, the equation would resolve as expected.


If a token has multiple values (spacing token with 4, 8), and it's used in a math equation, it breaks the function and it can't be resolved.

  • This means, any token with more than one value can't be referenced in tokens using math.

This forces token structure changes to workaround the limitation.

  • This issue isn't obvious to the person writing the token as there is a lack of specific error messages to help them self solve.

💬 Feedback that is valuable

  • How does this issue impact your day-to-day workflow?

  • What workarounds do you have?

Posted by Sam - Tokens Studio ·
Status: 💡 Requests5 comments

Log in to comment and vote

Comments5

  • Onur Orhon

    •

    Jul 2, 2024

    I think the second bullet in the description is misstated. It's not that the token doesn't resolve when referenced, it's that a calculated value doesn't work in a multi-value token.

    I would rewrite it as follows:

    • If a multi-value token is using a calculated reference for one or more of its values, it doesn't resolve to a proper multi-value result. Note that calc works for a single value.

      • e.g. for spacing, this works:{reference} + 4
        but this doesn't: {reference} + 4) {reference}

    @Robbert Bosker @Keegan Edwin

  • Keegan (Tokens Studio)

    •

    May 16, 2024

    Github Issue:

    • Support For Math Operations With Multi-values #2257

  • Onur Orhon

    •

    May 10, 2024

    I think the unit aspect of certain token types is very confusing. For example a unit is required for dimension tokens, and it's supposed to not work within calculations. However, I believe both of those are untrue. The plugin CAN calculate tokens with rem units. And if you use references instead of strict values in a dimension token, the unit is NOT required.

    • Sam - Tokens Studio

      •

      Jul 30, 2024

      After a lot of testing and writing a lot of docs, I think I’ve clarified the units issue! Its mixed units which don’t resolve, not units in general. (:

      If you are interested, I’d love another set of eyes on the new math doc I wrote for the website. DM on the community slack and I’ll send you the markdown docs.

  • Sam - Tokens Studio

    •

    May 7, 2024

    Github Issues