design-system-package-dsp icon indicating copy to clipboard operation
design-system-package-dsp copied to clipboard

Output Categories and Tags to styledictionary property files

Open kpaxton opened this issue 2 years ago • 0 comments

I've noticed that the /data json files contain the categories and tags for the tokens.

{
      "id": "5c7523ac-23bc-43ec-96ef-650280a34596",
      "class": "token",
      "type": "color",
      "name": "light-primary-050",
      "description": "",
      "value": "#e0eee8ff",
      "tags": [
        "Palette",
        "Primary",
        "Light",
        "050"
      ],
      "category_id": "9386a70e-b67b-4404-8f48-cdbb0cb2bc19",
      "last_updated": "2021-08-20T16:10:22.798Z",
      "last_updated_by": "Kevin Paxton"
    },

I also notice in the config.js that there is a custom transform being registered that has access to the tokens properties that would be able to read this information.

const getTokenNameFromProperty = function (prop) {
  if (prop.attributes.category === 'size' && prop.attributes.type === 'font') {
    return prop.path.slice(2, prop.path.length).join(' ').concat(' size');
  } else {
    return prop.path.slice(1, prop.path.length).join(' ');
  }
};

// Custom name transforms to remove category
StyleDictionary.registerTransform({
  name: 'name/dsp/kebab',
  type: 'name',
  matcher: function (prop) {
    return true;
  },
  transformer: function (prop) {
    return kebabCase(getTokenNameFromProperty(prop));
  }
});

I'd like to modify that and make a custom transform to change the naming schema to include the category that I create in the DSP editor in VSCode in the output variable name. But it seems that data is not present when the extension generates the /dist/styledictionary/properties token files.

    "light-primary-050": {
      "value": "#e0eee8ff"
    }

the styledictionary schema for the token .json files seems to allow for custom attributes to be added to that definition. If I add the category and tags manually:

"light-primary-050": {
      "value": "#e0eee8ff",
      "category": "frontdoor",
      "tags": ["Primary", "Light", "Palette"]
    }

I am then able to access them in the custom transform.

Is there any way to modify the transformation from the dsp /data json files to the /styledictionary/properties json files to include this information? OR have additional files output based on the categories that can then be used to create custom transforms.

This would really help when setting up different themes for different apps to allow styledictionary to output specific variables for those themes

kpaxton avatar Aug 20 '21 19:08 kpaxton