amzn / style-dictionary

A build system for creating cross-platform styles.
https://amzn.github.io/style-dictionary/#/
Apache License 2.0
3.77k stars 527 forks source link

[QUESTION] How do I use style-dictionary to generate a linear gradient for SwiftUI / Android Compose #895

Open dcoelhoWit opened 1 year ago

dcoelhoWit commented 1 year ago

I'm currently using the "Figma tokens" plugin to export to a .json file and then use it as input for style-dictionary in order to be able to generate design tokens for both SwiftUI and Android Compose.

Is there any way to do it without having to rely on custom transformations?

E.g.

linear-gradient(270deg, #0000ffff 20%, #00ff00ff 40%, #ff0000ff 80%)

Would translate into:


(SwiftUI - Swift)

LinearGradient(gradient: Gradient(stops: [.init(color: UIColor(red:0.0, green:0.0 ,blue:1.0 , alpha:1.00), location: 0.2), .init(color: UIColor(red:0.0, green:1.0 ,blue:0.0 , alpha:1.00), location: 0.4), .init(color: UIColor(red:1.0, green:0.0 ,blue:0.0 , alpha:1.00), location: 0.8)], startPoint: .trailing, endPoint: .leading)


(Android Compose - Kotlin)

Brush.horizontalGradient(0.2f to Color(0x0000ffff), 0.4f to Color(0x00ff00ff), 0.8f to Color(0xff0000ff), startX = Float.POSITIVE_INFINITY, endX = 0f)

If not, since this is a common design feature is it thought to be implemented soon?

oobleck commented 1 year ago

Does SD support the draft spec? Design Tokens Format Module: Gradients