Add documentation for the `type` prop in token files

[Jason Cheung]

The readme shows the usage of the type prop in the token files but doesn't describe what the prop is used for or what values are available for it.

It would be great to add that to the readme.

[Josh Harwood]

I believe that the basic values are below, these are then used with value transforms:

• Size
• Number
• Color
• String

You can extend it with custom types/transforms, example of size transform below:

module.exports = theo => {
  theo.registerValueTransform(
    'addpx',
    prop => prop.get('type') === 'size',
    prop => prop.get('value') + 'px'
  );
  theo.registerTransform("web", ['addpx']);
}

[Jason Cheung]

Thanks @NoWorries !
Would be useful to have that information in the official documentation as well 🙂

[Rhy Moore]

The mental list I've been keeping is size, number, color, string, and property.

There's a big difference between string and property in some output formats--presence or absence of outer quotes.

I don't think this covers all of the formats that support them, but the ones I remember off the top of my head that were important were in CSS Modules.

I can have a token that's usable in composes like below if it's a property, while a string won't work:

@values * as componentTokens from 'component-tokens.cssmodules.css';

.my-selector {
  composes: componentTokens.typography-style;
}

Similarly, for breakpoints, string results in a malformed media query, while property doesn't...

@values phone, tablet, desktop from 'breakpoint-tokens.cssmodules.css';

@media phone, tablet {
  /* styles */
}

[Fredrik Broman]

Stumbling on this a year later. Are there any docs on what values are available for the type prop? Unsure where to look.