Question about defining token type after upgrading to version 4

[Hai-San]

After upgrading my project to version 4, I have a question regarding the definition of token types.

In version 3, I didn’t need to specify the token type individually for each token. However, in version 4, I noticed that the transforms are now looking for the token types in a different path, and I now need to define the type for each token separately.

I would like to know if, in version 4, there is a way to define a token type globally for all tokens in the file, rather than having to define the type for each token individually. I am using .js files to structure my tokens.

For example, the transform color/hsl-4 doesn’t work as expected, and the colors are still being processed in hexadecimal format instead of HSL.

Example:

export default {
  color: {
    base: {
      orange: {
        50: {
          value: '#FEEEE9',
        },
        100: {
          value: '#FCD5C8',
        },
        200: {
          value: '#F9AC92',
        },
        300: {
          value: '#F5835B',
        },
        400: {
          value: '#F25924',
        },
        500: {
          value: '#B2421B',
        },
        600: {
          value: '#732B11',
        },
      },
    }, 
  },   
};    

Token structure output:

{
  value: '#FEEEE9',
  filePath: 'tokens/_base/colors.js',
  isSource: true,
  original: { value: '#FEEEE9' },
  name: 'colorBaseOrange50',
  attributes: { category: 'color', type: 'base', item: 'orange', subitem: '50' },
  path: [ 'color', 'base', 'orange', '50' ],
  key: '{color.base.orange.50}'
}

[jorenbroekema]

export default {
  color: {
    $type: 'color',
    base: {
      orange: {
        50: {
          $value: '#FEEEE9',
        },
        100: {
          $value: '#FCD5C8',
        },
        200: {
          $value: '#F9AC92',
        },
        300: {
          $value: '#F5835B',
        },
        400: {
          $value: '#F25924',
        },
        500: {
          $value: '#B2421B',
        },
        600: {
          $value: '#732B11',
        },
      },
    }, 
  },   
}; 

Convert it to DTCG format first (which basically means adding $ to value property key), then defining the $type property on the token group level.
https://styledictionary.com/reference/utils/dtcg/#converttodtcg util might come in handy if you want to automate the first part, but automatically applying types to token group is a manual process for you since you relied on CTI structure to determine the type in v3. In theory you can also automate this with some kind of script of course

[Hai-San]

Thank you @jorenbroekema
I was on vacation and just got back.
I won't be able to test it now, but I believe that's it.

[Hai-San]

It Worked:

export default {
  $type: 'color',
  orange: {
    50: {
      $value: '#FEEEE9',
    },
    100: {
      $value: '#FCD5C8',
    },
    200: {
      $value: '#F9AC92',
    },
    300: {
      $value: '#F5835B',
    },
    400: {
      $value: '#F25924',
    },
    500: {
      $value: '#B2421B',
    },
    600: {
      $value: '#732B11',
    },
  },
};

I had to remove the "color" layer from the object, as this layer is now being retrieved by the folder name.

Thank you @jorenbroekema