Hmm… further testing seems to indicate that it only doesn’t like “$”.

Hi @Ji_Huiwen variable names can not include the symbols {}.$

Thanks @Ryan_52, but that’s kind of my point sharing the feedback here that in order to handoff our designs more seamlessly, the token names actually need to support characters like these, because that’s what people use in many design systems.

it’s interesting to hear about this; I’m building a design system for my company and I was told to avoid special characters because they might clash with the code ($ is used as an identifier in javascript for example)

I’m running into the same issues. My team uses chakra as a base theme for a lot of projects which has built-in spacing units like below and I can’t correctly input the names because they contain"."

https://chakra-ui.com/docs/styled-system/theme#spacing

const spacing = {

  space: {

    px: '1px',

    0.5: '0.125rem',

    1: '0.25rem',

    1.5: '0.375rem',

    2: '0.5rem',

    2.5: '0.625rem',

    3: '0.75rem',

    3.5: '0.875rem',

    4: '1rem',

    5: '1.25rem',

    6: '1.5rem',

    7: '1.75rem',

    8: '2rem',

    9: '2.25rem',

    10: '2.5rem',

    12: '3rem',

    14: '3.5rem',

    16: '4rem',

    20: '5rem',

    24: '6rem',

    28: '7rem',

    32: '8rem',

    36: '9rem',

    40: '10rem',

    44: '11rem',

    48: '12rem',

    52: '13rem',

    56: '14rem',

    60: '15rem',

    64: '16rem',

    72: '18rem',

    80: '20rem',

    96: '24rem',

  },

}

Same here—I could substitute . for , commas, but if the point of variables was to reduce developer confusion during handoff, this is a huge disappointment 😔

It would seem that any string should be a valid key/name. I agree that using a substitute character would be less intuitive for designers or developers and require some additional documentation. For what it’s worth, you can use emojis in the name and replace

$ --> dollar sign

. --> one dot leader

& --> ampersand

{ --> left curly brace

} --> right curly brace

In my case, this allowed me to use a dot/period to define stops in my sizing scale primitives, eg.

1rem: 16

1.25rem: 20

1.5rem: 24

2rem: 32

...

and kept me from having to use less explicit key names like

125

1_25rem

125%

Also experiencing issues with using number variables for spacing when we have 0.25 or 0.5 rem, a decimal place is essential

I’m trying to align to Tailwind’s spacing tokens and this would be helpful.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.