Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Output Categories and Tags to styledictionary property files #23

Open
kpaxton opened this issue Aug 20, 2021 · 0 comments
Open

Output Categories and Tags to styledictionary property files #23

kpaxton opened this issue Aug 20, 2021 · 0 comments

Comments

@kpaxton
Copy link

kpaxton commented Aug 20, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant