add number type to Tokens to support richer custom Tokens

[RyderJKL]

I'm building a custom tokens system, but I get a TS error when I try to pass in a tokens object as follows.

// vars.css.ts
const designToken = {
   color: { background: 'red' }
   zIndex: {
         dialog: 1000,
         modal: 999
   }
}

export const vars = createGlobalTheme(":root", designToken);
//  current version will get: Type 'number' is not assignable to type 'string | Tokens'.

This is because the definition number is missing in the type of Tokens,

export type Tokens = {
  [key: string]: string | Tokens;
};

can we add it？

export type Tokens = {
  [key: string]: string |  numer |  Tokens;
};

[markdalgleish]

Restricting vars to strings was a deliberate choice to avoid confusion around handling of numbers and automatic px conversion (or lack thereof).

For example, let's say you have the following style:

export const className = style({
  padding: 12
});

In this case, the 12 is converted to 12px. This is pretty standard for CSS-in-JS.

However, if we supported numbers as variables and you refactored the code like this, it would break:

const vars = createGlobalTheme(':root', {
  padding: 12
});

export const className = style({
  padding: vars.padding
});

At runtime, the style would literally resolve to padding: 12 which is invalid since it requires units.

To try and avoid this trap, we made numbers a type error to make you realise you're defining a CSS value directly and that you might need to add units:

const vars = createGlobalTheme(':root', {
  padding: '12px'
});

export const className = style({
  padding: vars.padding
});

That said, we may still change this if there's enough demand, but just wanted to explain the current behaviour.

[JackHowa]

thanks so much @markdalgleish ! This definitely makes sense for units that can or can't handle units like padding. However, I'm curious about handling font-weight values like 400? I guess I can cast the variables to make typescript happy but curious about side-effects