style-dictionary icon indicating copy to clipboard operation
style-dictionary copied to clipboard

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

Open dcoelhoWit opened this issue 3 years ago • 2 comments

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?

dcoelhoWit avatar Nov 16 '22 16:11 dcoelhoWit

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

oobleck avatar Apr 25 '23 22:04 oobleck