Add support for aliases / tokens (all components)

[aaarichter]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

When implementing the theme from a design system, components, spacing etc are often described with tokes like M, XL ... etc.

It would be great, if there would be an easy way to add a token / alias to a component, for example the typography h3 with M, or use spacing tokens instead of numeric values.

My current workaround for headlines would be to add additional variants for the according headlines. For spacing, I tried to solve this with a custom spacing function that is able to resolve the tokens, but unfortunately the custom spacing function is only called, when a numeric value is set to a css property like padding or margin

Examples 🌈

it would be great to do something like this

<Grid sx={{
  marginTop: 'xl'
  padding: 's'
  gap: { xs: 's', md: 'm' }
}}>

Motivation 🔦

I'm currently implementing a design system in MUI. Being able to define and use tokens would be great.

[mnajdova]

Interesting, so far we only see the need of applying integers there. Have you thought of maybe adding additional tokens in the theme that can basically contain these values, like:

<Grid sx={ theme => ({
  marginTop: theme.sizing.xl,  // can really be anything as long as it is mapped to some int value in the theme
  padding: 's'
  gap: { xs: 's', md: 'm' }
})}>

Or simply using const for this, maybe something like:

<Grid sx={ theme => ({
  marginTop: Sizes.xl,  
  padding: 's'
  gap: { xs: Sizes.s, md: Sizes.m }
})}>

This is a good example of how people may want to extend the style function used for the sx prop. I will look into this in more details.

[aaarichter]

Or simply using const for this, maybe something like:

<Grid sx={ theme => ({
  marginTop: Sizes.xl,  
  padding: 's'
  gap: { xs: Sizes.s, md: Sizes.m }
})}>

@mnajdova thank you for your response. Of course I didn't think of the simple solution 😵‍💫

[mikehuebner]

I don't feel like this is efficient. Having to add more imports for constants sounds like bad practice. Having a place to define tokens and then use them as xs, sm, etc.. would be great. NativeBase supports this behavior and I'm trying to create something similar for a design system.

[mnajdova]

I don't feel like this is efficient. Having to add more imports for constants sounds like bad practice. Having a place to define tokens and then use them as xs, sm, etc.. would be great. NativeBase supports this behavior and I'm trying to create something similar for a design system.

You can add additional tokens in the theme, that’s the first example in the comment above. Is it not sufficient?

[mikehuebner]

It solves the problem but feels odd having to call up theme every time I want a custom value when I can already do padding: 'sm' elsewhere yea? Not the worst thing but it makes some items feel inconsistent.

Would be great if we could do this:

<Grid sx={ theme => ({
  marginTop: 'xl',  
  padding: 'sm'
  gap: { xs: 'sm', md: 'sm' }
})}>