feat: add configuration for android jetpack compose output

[felix-ico]

this generates a .kt file to be used in jetpack compose. There are still a couple of issues, namely:

• it seems like colors with an alpha value get not converted, for example:
  val TelekomColorUiBorderDisabled = [object Object]

• some values do not get converted correctly, for example:
  val TelekomColorTextAndIconOnSubtleCyan = #00738A
  should be
  val TelekomColorTextAndIconOnSubtleCyan = Color(0x00738A00)

some open questions:

• should the light and dark files be bundled, like we do with design-tokens-all.css?
• any other values that should be ported?

[acstll]

A couple of comments.

Also remember you can run npm run format 🤓

[acstll]

This register call could live in compose.config.js since it's actually not shared with other configs.

[acstll]

This looks like this filter function is being misused (it works nevertheless). The filter function should only do the checks and return a boolean.

For formatting the name you could register a custom tranform of type "name". I think it works the same was as value transform, you return the new name instead of setting it in the token object.

[felix-ico]

thanks i was still a bit unsure about when/where to use transformers vs filters (even though the name should give it away)

[acstll]

• it seems like colors with an alpha value get not converted, for example:
  val TelekomColorUiBorderDisabled = [object Object]

they get converted but not fully, [object Object] is rendered because the value is actually { color: 'Color(0xff000000)', alpha: 0.21 }. I tried using the custom color/alpha transform we already have but I couldn't get it to work, and it gets tricky with modes.

We could either add an extra transform (imagine outputting some Kotlin code where the alpha gets applied, don't know how that might look). Or (I prefer this), overwrite the built-in color/composeColor transform (like you actually tried here) to handle the alpha modifier directly. (You probably saw already the original transform is really simple, we use the same tinycolor2 dep…)

• some values do not get converted correctly, for example:
  val TelekomColorTextAndIconOnSubtleCyan = #00738A
  should be
  val TelekomColorTextAndIconOnSubtleCyan = Color(0x00738A00)

there are 4 colors in the semantic layer that are hard-coded, ideally the color scale should be updated (change the colors in core), but until then we might need to handle this exceptionally (in a custom transform?) (see SCL-296)

• should the light and dark files be bundled, like we do with design-tokens-all.css?
• any other values that should be ported?

this I don't know haha, it depends on how these things are handled in such an environment like Compose, we need to figure it out

[felix-ico]

they get converted but not fully, [object Object] is rendered because the value is actually { color: 'Color(0xff000000)', alpha: 0.21 }. I tried using the custom color/alpha transform we already have but I couldn't get it to work, and it gets tricky with modes.

We could either add an extra transform (imagine outputting some Kotlin code where the alpha gets applied, don't know how that might look). Or (I prefer this), overwrite the built-in color/composeColor transform (like you actually tried here) to handle the alpha modifier directly. (You probably saw already the original transform is really simple, we use the same tinycolor2 dep…)

Yup was already trying out something like your second, preferred, suggestion.

there are 4 colors in the semantic layer that are hard-coded, ideally the color scale should be updated (change the colors in core), but until then we might need to handle this exceptionally (in a custom transform?) (see SCL-296)

this is good to know 🙏

should the light and dark files be bundled, like we do with design-tokens-all.css?

In the jetpack compose starter project there is some light/dark mode configuration apparently, i did not look into it in detail but I think I can get some information on implementation there.

any other values that should be ported?

looking here https://github.com/amzn/style-dictionary/blob/main/lib/common/transforms.js i guess font sizes and possibly spacings could also be ported (although not sure if what we have currently would be ok for mobile apps 🤔)