Multi-platform Tracker

[jorenbroekema]

Currently, sd-transforms is catered mostly to transforming Tokens Studio design tokens to a format that is compatible with the Web, more specifically CSS, as that is the Web's way of styling.

We want to support other platforms, think of native iOS, Android, Flutter, and similar, through an API like so:

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

This will then include specific transforms to the platform that is passed, rather than what it now does by default which is web.

What we need from you

I am primarily a web developer, so I would really like some input from developers from other platforms, what is missing for you? What kinds of transforms are you maintaining yourself now to get the right output? Which transforms from style-dictionary that are built-in are you using? I have added 3 platforms below, but maybe I'm missing your platform of choice, feel free to respond and I can add it.

Tracker

Web

• [x] Shorthand transforms
  • [x] typography
  • [x] border
  • [x] shadow
• [x] Color
• [x] Dimensions
• [x] Expanding composite tokens https://github.com/tokens-studio/sd-transforms#options

iOS Swift

• [ ] Shorthand transforms
  • [ ] typography
  • [ ] border
  • [ ] shadow
• [ ] Color
• [ ] Dimensions
• [x] Expanding composite tokens https://github.com/tokens-studio/sd-transforms#options

Related issues:

• https://github.com/tokens-studio/sd-transforms/issues/132
• https://github.com/tokens-studio/sd-transforms/issues/59 -> has some input by @NeoPhi

Android

• [ ] Shorthand transforms
  • [x] typography -> ts/typography/compose/shorthand see tests: https://github.com/tokens-studio/sd-transforms/blob/main/test/spec/compose/transformTypographyForCompose.spec.ts
  • [ ] border
  • [ ] shadow
• [ ] Color
• [ ] Dimensions
• [x] Expanding composite tokens https://github.com/tokens-studio/sd-transforms#options

Related issues:

• https://github.com/tokens-studio/sd-transforms/issues/59 -> has some input by @jaylumba

Flutter

• [ ] Shorthand transforms
  • [ ] typography
  • [ ] border
  • [ ] shadow
• [ ] Color
• [ ] Dimensions
• [x] Expanding composite tokens https://github.com/tokens-studio/sd-transforms#options

Related issues:

React Native

• [x] Shorthand transforms
  • [x] typography
  • [x] border
  • [x] shadow
• [x] Color
• [x] Dimensions
• [x] Expanding composite tokens https://github.com/tokens-studio/sd-transforms#options

Related issues: https://github.com/tokens-studio/sd-transforms/issues/238

[jorenbroekema]

Just adding https://github.com/vector-im/compound-design-tokens here in case I forget, @gsouquet was nice enough to DM me about what they've done with spacing, color and typography for iOS Swift and Android Compose

[jorenbroekema]

I was just given some insight about Android/React-Native (does React-Native need to be its own platform with its own transforms? that part is a bit unclear to me still) with regards to font-family prop, apparently this might need to always include the weight in the font-family, e.g.:

{
  "value": {
    "fontFamily": "Inter",
    "fontWeight": "Regular"
  }
  "type": "typography"
}

might need to be transformed to:

{
  "value": {
    "fontFamily": "Inter-400",
    "fontWeight": 400
  }
  "type": "typography"
}

before expanding into its separate output tokens. Otherwise the font family token can't be used properly?

If someone could confirm this or give more context, that would be appreciated :)

[amrgetment]

@jorenbroekema I want for Flutter the colors only, it is enough for me I want base colors then override colors for light and dark mode as the following implementation

base_colors.dart

import 'package:flutter/material.dart';

abstract class BaseColors {
  abstract Color baseColorFgBrand;
}

dark_colors.dart

import 'package:flutter/material.dart';
import './base_colors.dart';

class DarkColors implements BaseColors {
  @override
  Color baseColorFgBrand = const Color(0xff3678f4);
  }

light_colors.dart

import 'package:flutter/material.dart';
import './base_colors.dart';

class LightColors implements BaseColors {
  @override
  Color baseColorFgBrand = const Color(0xff001744);
}

[jorenbroekema]

https://github.com/tokens-studio/sd-transforms/issues/238 for reference for react-native platform , since it's similar to CSS but in JSON format, it seems react-native is essentially supported and an alias to web platform from the perspective for value transforms