Open jorenbroekema opened 1 year ago
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
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 :)
@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);
}
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
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:
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
iOS Swift
Related issues:
Android
ts/typography/compose/shorthand
see tests: https://github.com/tokens-studio/sd-transforms/blob/main/test/spec/compose/transformTypographyForCompose.spec.tsRelated issues:
Flutter
Related issues:
React Native
Related issues: https://github.com/tokens-studio/sd-transforms/issues/238