Transforms for multi-platform (android, ios)

[fengchuanBIG]

如果可以支持ios 和安卓是非常棒的一件事

[jorenbroekema]

Hi, Android and iOS are supported in the sense that you can use Style-Dictionary formats to export your tokens to Android / iOS.

I'm guessing you might be referring to the fact that some of our transforms, transform the tokens to a format that is specific to Web / CSS? E.g. transformShadow takes a shadow object and transforms it to $[x] $[y] [blur] [spread] [color] format, which is kind of specific to Web / CSS. I think this should be cleaned up for the next breaking change, to namespace transforms by platform if they generate platform-specific output, like the shadow transform.

Perhaps it would be good also to create a simple API for this, e.g.

registerTransforms(StyleDictionary, {
  platform: 'web', // 'web' | 'ios' | 'android'
  groupName: 'tokens-studio-web', // to override the name of the transformGroup, since you might do multiple platforms
});

Where we use CSS as a reference for web, android/compose for android, and iOS Swift for ios?

Since I am not a mobile app developer, I need some input from mobile app developers on this though, on which of our transforms are too Web / CSS specific, and what the Android / iOS equivalents would be like.

[jaylumba]

Hi @jorenbroekema ,

Just like to add some of the challenges we encounter for android in terms of the Token Studio and Styledictionary integration.

• We need to customize attribute/cti transform to properly create token attributes if your token structure is not CTI.

  • It would be great if we can have a transform that maps the Token Studio token type to style dictionary CTI attributes so that we can use the existing predefined transforms from style dictionary.

• Color tokens that has a value using rgba format can’t be translated to android hex with alpha correctly.

  • The current workaround we have right now is we created a custom format that uses the android resources template with some modification and also created a custom transform to properly translate it to ARGB hex format. Please see code snippet below:

  Changes in the android resources template.
  Before:
  
  After:
  
  Custom Transform:
  

• Style dictionary predefined transform for android dimensions (size/sp, size/dp) have a fixed number of decimal which is not recommended for defining dimensions in android.

  • Would be great if we have custom transform that doesn't have a trailing zero on the decimal number.

• Multi-value tokens is not supported in mobile, they should be expanded to a single value to be usable.

  • Would be great if we have an expand option as well for multi-value tokens.

[NeoPhi]

Similar to @jaylumba we are trying to use as much of Style Dictionary out of the box. Right now we make extensive use of typography and composite tokens and are using token-transformer for its expand capabilities since Style Dictionary doesn't have good support at the moment. To convert to Style Dictionary's CTI convention we are using the following attribute/cti override. NB: I'm sure there are other types but our use case doesn't require them, yet. This lets us use transforms like color/UIColorSwift without modification since by default it // Matches: token.attributes.category === 'color'.

const TYPE_TO_CATEGORY = {
  borderRadius: "size",
  borderWidth: "size",
  color: "color",
  dimension: "size",
  fill: "color",
  fontFamilies: "content",
  fontSizes: "size",
  fontWeights: "content",
  letterSpacing: "size",
  lineHeight: "size",
  other: "content",
  sizing: "size",
  strokeStyle: "content",
};

const TYPE_TO_TYPE = {
  fontFamilies: "font",
  fontSizes: "font",
  fontWeights: "font",
};

StyleDictionary.registerTransform({
  name: "attribute/cti",
  type: "attribute",
  transformer(token) {
    const originalAttrs = token.attributes || {};
    const category = TYPE_TO_CATEGORY[token.type];
    if (!category) {
      throw new Error(`token.type of ${token.type} not mapped`);
    }
    const generatedAttrs = { category, type: TYPE_TO_TYPE[token.type] };
    return { ...generatedAttrs, ...originalAttrs };
  },
});

[jorenbroekema]

FYI, this package now supports expanding shadow, border, typography and composition tokens, similar to how token-transformer does it. Check out the README.md -> options section to see how to use it :)

This should help a bunch already!