Style Dictionary CTI with component example

button.json

{
  "component": {
    "button": {
      "font-size": { "value": "{size.font.base.value}" },
      "color": { "value": "{color.font.link.value}" },
      "padding": { "value": "{size.padding.base.value}" },
      "border-width": { "value": "0"},
      "text-align": { "value": "center" }
      // ..
    }
  }
}

colors.json

{
  "color" : {
    "base" : {
      "white": {"value":"#ffffff"},
      "red": {
        "140" : { "value" : "#D32F2F" },
        "120" : { "value" : "#E53935" },
        "100" : { "value" : "#F44336" },
        "80"  : { "value" : "#EF5350" },
        "60"  : { "value" : "#E57373" },
        "40"  : { "value" : "#EF9A9A" },
        "20"  : { "value" : "#FFCDD2" },
        "10"  : { "value" : "#FFEBEE" }
      },
      // ..
    }
  }
}

config.js

const StyleDictionary = require('style-dictionary');

var cssToCTIMap = {
  'width': {category: 'size', type: 'dimension'},
  'min-width': {category: 'size', type: 'dimension'},
  'max-width': {category: 'size', type: 'dimension'},
  'height': {category: 'size', type: 'dimension'},
  'min-height': {category: 'size', type: 'dimension'},
  'max-height': {category: 'size', type: 'dimension'},
  'border-width': {category: 'size', type: 'border', item: 'width'},
  'border-color': {category: 'color', type: 'border'},
  'background-color': {category: 'color', type: 'background'},
  'color': {category: 'color', type: 'font'},
  'padding': {category: 'size', type: 'padding'},
  'padding-vertical': {category: 'size', type: 'padding'},
  'padding-horziontal': {category: 'size', type: 'padding'},
  'icon': {category: 'content', type: 'icon'},
  'font-size': {category: 'size', type: 'font'},
  'size': {category: 'size', type: 'icon'} // TODO: Need to fix this logic
}

StyleDictionary.registerTransform({
  type: 'attribute',
  name: 'attribute/cti',
  transformer: function(prop) {
    if (prop.path[0] === 'component') {
      var attrs = cssToCTIMap[prop.name];
      if (_.isNumber(prop.value) && attrs.category === 'size') {
        return {category: 'number', type: 'percentage'};
      } else {
        return attrs;
      }
    } else {
      return StyleDictionary.transform['attribute/cti'].transformer(prop);
    }
  }
});

// ...