Skip to content

Output Categories and Tags to styledictionary property files #23

Description

@kpaxton

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions