Is it possible to export only the tokens without value?

[thayna-oliveira]

Hello,

I have the following color.tokens.json:

{
  "color": {
    "vivid": {
      "700": {  "value": "#006963" },
      "600": {  "value": "#00a8a0" },
      ......
    },
    "accent": {
      "700": { "value": "#7f2d1c" },
      "600": { "value": "#cc492d" },
      ......
      }
    }
}

And I want a list of the names of the tokens, something like this:

{
  "colors": [
        "color-vivid-700",
        "color-vivid-600",
        ......
   ]
}

I want a list to create a type in the typescript, like this:

export type Colors =
  | 'color-vivid-700'
  | 'color-vivid-600'
  .....
 ';

Do you guys know if it is possible? Or even if it is possible to generate a type?

I need this type to ensure my component only accepts the available tokens in the design system.

[dbanksdesign]

There is not a built-in format to do this, but I created a quick example that I believe does what you are looking for: https://stackblitz.com/edit/node-sq2wvj?file=sd.config.js

This is a really good idea though to provide union types for each type of design token!

[thayna-oliveira]

This is exactly what I was looking for! I'll try it! thanks a lot, @dbanksdesign! 👏👏👏

[adamdehaven]

@dbanksdesign it seems like your example here has since been updated. Can you provide a code snippet?