feat(tokens): allow TypeScript typing

[pinguet62]

I want to propose an evolution/improvement on

Design Tokens

Description

If I have to use a Mozaic token value, for example a color, in my application I have multiple solutions:

• copy/past the RGB from Mozaic documentation 👎
• but better is to reuse value constants from @mozaic-ds/tokens/build/js/token.js

In TypeScript, a solution is

import * as mozaicTokens from '@mozaic-ds/tokens/build/js/tokens'
console.log(mozaicTokens.ColorWarning600)

But:

• this require module declaration like

  declare module '@mozaic-ds/tokens/build/js/tokens' {
    const x: { [P: string]: string }
    export = x
  }

• it's not type-safe : mozaicTokens.ColorWarning600 is string | undefined
• all constants are not string : for example BorderS is number, then complex declare module to maintain...

Describe the solution you would like

Have a type-safe solution when reuse constants like:

import * as mozaicTokens from '@mozaic-ds/tokens/build/js/tokens'
mozaicTokens.ColorWarning600 // `string`

import { ColorWarning600 } from '@mozaic-ds/tokens/build/js/tokens'
console.log(ColorWarning600)

import { ColorWarning666 } from '@mozaic-ds/tokens/build/js/tokens' // compilation error

import * as mozaicTokens from '@mozaic-ds/tokens/build/js/tokens'
mozaicTokens.ColorWarning666 // compilation error

Describe the alternatives you considered

Better solution

Use typescript/es6-declarations export type of style-dictionary lib.

This can be done simply by adding this line in configuration in @mozaic-ds/tokens/config.js in section config/platforms/js/files:

{
  format: 'typescript/es6-declarations',
  destination: 'tokens.d.ts',
},

Other alternative

Like the token.js is a simple list of constants, the file can be simply duplicated/renamed.

I tried this script in my project, but it's not beautifull:

  "postinstall": "cp node_modules/@mozaic-ds/tokens/build/js/token.js node_modules/@mozaic-ds/tokens/build/js/token.ts"

Additional comments

I test solution locally and this seem work perfectly 👌 I can do a Pull Request if you want 😉

[tiloyi]

Hi @pinguet62 , Thank you for your message and your suggestion.

We're currently planning to remove the JS tokens from the @next version because we didn't think many people were using them.

So I'm interested to know what your use case is, to see if we need to revise our plan to remove them.

We'd be happy to talk about it :)

[pinguet62]

My use case is to reuse Mozaic's color in <MIcon color="..." and in border/line chart. Because I cannot reuse SCSS variables in <script>/<template>.

It's a limited usage (20 occurrences) but I prefered this workaround instead of copy/past RGB value. I wouldn't be disappointed if it disappeared 😉

But probably you have any other solution?

(we are waiting for @next since 1 year 😉)

[tiloyi]

Treated with in Tokens v2

[pinguet62]

Hello @tiloyi You told me v2 for May 2023. Any news? 😜

[tiloyi]

Hi @pinguet62 , The scope and provisional timetable for V2 was announced a few months ago on Workplace.

The core redevelopment phase is due to be completed at the end of Q1.

We'll soon start organising demos and information sessions to explain & show all details.