Skip to content

Built-in Transform Groups

web

Transforms:

attribute/cti name/kebab size/px color/css


js

Transforms:

attribute/cti name/pascal size/rem color/hex


scss

Transforms:

attribute/cti name/kebab time/seconds html/icon size/rem color/css asset/url fontFamily/css cubicBezier/css strokeStyle/css/shorthand border/css/shorthand typography/css/shorthand transition/css/shorthand shadow/css/shorthand


css

Transforms:

attribute/cti name/kebab time/seconds html/icon size/rem color/css asset/url fontFamily/css cubicBezier/css strokeStyle/css/shorthand border/css/shorthand typography/css/shorthand transition/css/shorthand shadow/css/shorthand


less

Transforms:

attribute/cti name/kebab time/seconds html/icon size/rem color/hex asset/url fontFamily/css cubicBezier/css strokeStyle/css/shorthand border/css/shorthand typography/css/shorthand transition/css/shorthand shadow/css/shorthand


html

Transforms:

attribute/cti attribute/color name/human


android

Transforms:

attribute/cti name/snake color/hex8android size/remToSp size/remToDp


compose

Transforms:

attribute/cti name/camel color/composeColor size/compose/em size/compose/remToSp size/compose/remToDp


ios

Transforms:

attribute/cti name/pascal color/UIColor content/objC/literal asset/objC/literal size/remToPt


ios-swift

Transforms:

attribute/cti name/camel color/UIColorSwift content/swift/literal asset/swift/literal size/swift/remToCGFloat


ios-swift-separate

Transforms:

attribute/cti name/camel color/UIColorSwift content/swift/literal asset/swift/literal size/swift/remToCGFloat

This is to be used if you want to have separate files per category and you don’t want the category (e.g., color) as the lead value in the name of the token (e.g., StyleDictionaryColor.baseText instead of StyleDictionary.colorBaseText).


assets

Transforms:

attribute/cti


flutter

Transforms:

attribute/cti name/camel color/hex8flutter size/flutter/remToDouble content/flutter/literal asset/flutter/literal


flutter-separate

Transforms:

attribute/cti name/camel color/hex8flutter size/flutter/remToDouble content/flutter/literal asset/flutter/literal

This is to be used if you want to have separate files per category and you don’t want the category (e.g., color) as the lead value in the name of the token (e.g., StyleDictionaryColor.baseText instead of StyleDictionary.colorBaseText).


react-native

Transforms:

name/camel size/object color/css