amzn / style-dictionary

A build system for creating cross-platform styles.
https://styledictionary.com
Apache License 2.0
3.94k stars 560 forks source link

Composite tokens support for compose. #1272

Open chinmaym14 opened 4 months ago

chinmaym14 commented 4 months ago

Hello, Below is the style json.

{
  "label": {
    "xsmall": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.family.brand}",
        "fontSize": "{font.size.xs}",
        "fontWeight": "{font.weight.regular}",
        "letterSpacing": "4%",
        "lineHeight": "{font.lineHeight.xs}",
        "textTransform": "uppercase",
        "textDecoration": "none"
      }
    }
}

How can i convert this to constants in kotlin? Currently i am using below config file

{
  "source": [
    "tokens/*.json"
  ],
  "preprocessors": ["tokens-studio"],
  "platforms": {
    "js": {
      "buildPath": "build/js/",
      "transformGroup": "scss",
      "files": [
        {
          "destination": "colorpalette.js",
          "format": "javascript/es6"
        }
      ]
    },
    "iOS": {
      "buildPath": "build/ios/",
      "prefix": "",
      "transformGroup": "ios-swift",
      "files": [
        {
          "destination": "colorpalette.swift",
          "format": "ios-swift/any.swift",
          "options": {
            "outputReferences": true
          },
          "className": "colorPalette"
        },
        {
          "destination": "enum.swift",
          "format": "ios-swift/enum.swift"
        }
      ]
    },
    "compose": {
     "transforms": [
        "attribute/cti", "ts/typography/compose/shorthand"
      ],
      "transformGroup": "compose",
      "basePxFontSize": 1,
      "buildPath": "build/compose/",
      "files": [
        {
          "destination": "StyleDictionaryNumber.kt",
          "format": "compose/object",
          "options": {
            "className": "StyleDictionaryNumber",
            "packageName": "StyleDictionaryNumber",
            "outputReferences": true
          },
          "filter": {
            "$type": "number"
          }
        },
        {
          "destination": "StyleDictionaryString.kt",
          "format": "compose/object",
          "options": {
            "className": "StyleDictionaryString",
            "packageName": "StyleDictionaryString",
            "outputReferences": true
          },
          "filter": {
            "$type": "string"
          }
        },
        {
          "destination": "StyleDictionaryColorColor.kt",
          "format": "compose/object",
          "options": {
            "className": "StyleDictionaryColorColor",
            "packageName": "StyleDictionaryColorColor",
            "outputReferences": true
          },
          "filter": {
            "$type": "color"
          }
        },
        {
          "destination": "StyleDictionaryDimension.kt",
          "format": "compose/object",
          "options": {
            "className": "StyleDictionaryDimensio",
            "packageName": "StyleDictionaryDimension",
            "outputReferences": true
          },
          "filter": {
            "$type": "dimension"
          }
        },
        {
          "destination": "StyleDictionaryTypography.kt",
          "format": "compose/object",
          "options": {
            "className": "StyleDictionaryTypography",
            "packageName": "StyleDictionaryTypography",
            "outputReferences": true
          },
          "filter": {
            "$type": "typography"
          }
        }
      ]
    }
  }
}

But i am getting [object Object] as value in output. How can i resolve this?

jorenbroekema commented 4 months ago

https://v4.styledictionary.com/reference/config/#expand you should probably use Style Dictionary's expand utility to expand composite tokens into separate tokens for each property. This can be done both on a global level or on a per platform basis