Support variables with \s in their names?

[robotriot]

Problem Statement

Currently there's an unspoken support for token objects that follow traditional JS variable naming. However, for our design system we've opted for a human-readable taxonomy which means our tokens are non-traditional. Eg Background Subtle or Background Subtle - Elevated .

Proposed Solution

I poked around and it seems like the regex being used is the limiting factor here. I'm wondering if you've considered making the regex more generic and to really only care about the initial $ in the variable name? I've poked around with changing it to include spaces for example and everything appears to work fine.

This is what i've changed the variable regex to (-)?\B\$([\w\s\-.]+), which so far so good 🤷🏼 . There are probably things I haven't considered but it allows me to do this :)

      <Box
        as="div"
        backgroundColor="$Background Subtle"
        padding={{xsmall: '$Macro Small', large: '21px'}}
      />

Alternatives Considered

Another thing I could do is remap our tokens to something RS expects and hide that from consumers. It's a bit ham-handed but would probably work.

Additional Context

Existing components already use these strings so it'd be a massive change to completely overhaul how we use tokens.