Built-in formats
These are the formats included in Style Dictionary by default, pulled from lib/common/formats.js
Want a format? You can request it here.
You created a format and think it should be included? Send us a PR.
css/variables
Creates a CSS file with variable definitions based on the style dictionary
Param | Type | Description |
---|---|---|
options | Object | |
options.showFileHeader | boolean | Whether or not to include a comment that has the build date. Defaults to true |
options.outputReferences | boolean | OutputReferencesFunction | Whether or not to keep references (a -> b -> c) in the output. Defaults to false . Also allows passing a function to conditionally output references on a per token basis. |
options.outputReferenceFallbacks | boolean | Whether or not to output css variable fallback values when using output references. You will want to pass this from the options object sent to the format function. |
options.selector | string | Override the root css selector |
options.formatting | FormattingOverrides | Custom formatting properties that define parts of a declaration line in code. The configurable strings are: indentation , commentStyle and commentPosition . The fileHeaderTimestamp , header , and footer formatting options are used for the fileHeader helper. |
Example:
scss/map-flat
Creates a SCSS file with a flat map based on the style dictionary
Name the map by adding a mapName
property on the options
object property on the file
object property in your config.
Example:
scss/map-deep
Creates a SCSS file with a deep map based on the style dictionary.
Name the map by adding a mapName
property on the options
object property on the file
object property in your config.
Param | Type | Description |
---|---|---|
options | Object | |
options.outputReferences | boolean | OutputReferencesFunction | Whether or not to keep references (a -> b -> c) in the output. Defaults to false . Also allows passing a function to conditionally output references on a per token basis. |
options.outputReferenceFallbacks | boolean | Whether or not to output css variable fallback values when using output references. You will want to pass this from the options object sent to the format function. |
options.themeable | boolean | Whether or not tokens should default to being themeable, if not otherwise specified per token. Defaults to false . |
options.mapName | string | Name of your SCSS map. |
options.formatting | FormattingOverrides | Custom formatting properties that define parts of a declaration line in code. The configurable strings are: indentation , commentStyle and commentPosition . The fileHeaderTimestamp , header , and footer formatting options are used for the fileHeader helper. |
Example:
scss/variables
Creates a SCSS file with variable definitions based on the style dictionary.
Add !default
to any variable by setting a themeable: true
attribute in the token’s definition.
Param | Type | Description |
---|---|---|
options | Object | |
options.showFileHeader | boolean | Whether or not to include a comment that has the build date. Defaults to true |
options.outputReferences | boolean | OutputReferencesFunction | Whether or not to keep references (a -> b -> c) in the output. Defaults to false . Also allows passing a function to conditionally output references on a per token basis. |
options.outputReferenceFallbacks | boolean | Whether or not to output css variable fallback values when using output references. You will want to pass this from the options object sent to the format function. |
options.themeable | boolean | Whether or not tokens should default to being themeable, if not otherwise specified per token. Defaults to false . |
options.formatting | FormattingOverrides | Custom formatting properties that define parts of a declaration line in code. The configurable strings are: indentation , commentStyle and commentPosition . The fileHeaderTimestamp , header , and footer formatting options are used for the fileHeader helper. |
Example:
scss/icons
Creates a SCSS file with variable definitions and helper classes for icons
Example:
less/variables
Creates a LESS file with variable definitions based on the style dictionary
Param | Type | Description |
---|---|---|
options | Object | |
options.showFileHeader | boolean | Whether or not to include a comment that has the build date. Defaults to true |
options.outputReferences | boolean | OutputReferencesFunction | Whether or not to keep references (a -> b -> c) in the output. Defaults to false . Also allows passing a function to conditionally output references on a per token basis. |
options.outputReferenceFallbacks | boolean | Whether or not to output css variable fallback values when using output references. You will want to pass this from the options object sent to the format function. |
options.formatting | FormattingOverrides | Custom formatting properties that define parts of a declaration line in code. The configurable strings are: indentation , commentStyle and commentPosition . The fileHeaderTimestamp , header , and footer formatting options are used for the fileHeader helper. |
Example:
less/icons
Creates a LESS file with variable definitions and helper classes for icons
Example:
stylus/variables
Creates a Stylus file with variable definitions based on the style dictionary
Example:
javascript/module
Creates a CommonJS module with the whole style dictionary
Example:
javascript/module-flat
Creates a CommonJS module with the whole style dictionary flattened to a single level.
Example:
javascript/object
Creates a JS file a global var that is a plain javascript object of the style dictionary.
Name the variable by adding a name
property on the options
object property of the file
object property in your config.
Example:
javascript/umd
Creates a UMD module of the style
dictionary. Name the module by adding a name
property on the options
object property of the file
object property in your config.
Example
javascript/es6
Creates a ES6 module of the style dictionary.
Example:
typescript/es6-declarations
Creates TypeScript declarations for ES6 modules
Param | Type | Description |
---|---|---|
options | Object | |
options.outputStringLiterals | boolean | Whether or not to output literal types for string values. Defaults to false . |
Example:
typescript/module-declarations
Creates TypeScript declarations for module
Example:
As you can see above example output this does not generate 100% accurate d.ts. This is a compromise between of what style-dictionary can do to help and not bloating the library with rarely used dependencies.
Thankfully you can extend style-dictionary very easily:
android/resources
Creates a resource xml file. It is recommended to use a filter with this format as it is generally best practice in Android development to have resource files organized by type (color, dimension, string, etc.). However, a resource file with mixed resources will still work.
This format will try to use the proper resource type for each token based on
the category (color => color, size => dimen, etc.). However if you want to
force a particular resource type you can provide a resourceType
property on the options
object property on the file
object property configuration.
You can also provide a resourceMap
if you
don’t use Style Dictionary’s built-in CTI structure.
Param | Type | Description |
---|---|---|
options | Object | |
options.showFileHeader | boolean | Whether or not to include a comment that has the build date. Defaults to true |
options.outputReferences | boolean | OutputReferencesFunction | Whether or not to keep references (a -> b -> c) in the output. Defaults to false . Also allows passing a function to conditionally output references on a per token basis. |
Example:
android/colors
Creates a color resource xml file with all the colors in your style dictionary.
It is recommended to use the ‘android/resources’ format with a custom filter instead of this format:
Example:
android/dimens
Creates a dimen resource xml file with all the sizes in your style dictionary.
It is recommended to use the ‘android/resources’ format with a custom filter instead of this format:
Example:
android/fontDimens
Creates a dimen resource xml file with all the font sizes in your style dictionary.
It is recommended to use the ‘android/resources’ format with a custom filter instead of this format:
Example:
android/integers
Creates a resource xml file with all the integers in your style dictionary. It filters your
design tokens by token.type === 'time'
It is recommended to use the ‘android/resources’ format with a custom filter instead of this format:
Example:
android/strings
Creates a resource xml file with all the strings in your style dictionary. Filters your
design tokens by token.type === 'content'
It is recommended to use the ‘android/resources’ format with a custom filter instead of this format:
Example:
compose/object
Creates a Kotlin file for Compose containing an object with a val
for each property.
Param | Type | Description |
---|---|---|
options | Object | |
options.import | string[] | string | Modules to import. Can be a string or array of strings. Defaults to ['androidx.compose.ui.graphics.Color', 'androidx.compose.ui.unit.*'] . |
options.showFileHeader | boolean | Whether or not to include a comment that has the build date. Defaults to true |
options.outputReferences | boolean | OutputReferencesFunction | Whether or not to keep references (a -> b -> c) in the output. Defaults to false . Also allows passing a function to conditionally output references on a per token basis. |
options.className | string | The name of the generated Kotlin object |
options.packageName | string | The package for the generated Kotlin object |
Example:
ios/macros
Creates an Objective-C header file with macros for design tokens
Example:
ios/plist
Creates an Objective-C plist file
Todo
- Fix this template and add example and usage
ios/singleton.m
Creates an Objective-C implementation file of a style dictionary singleton class
Todo
- Add example and usage
ios/singleton.h
Creates an Objective-C header file of a style dictionary singleton class
Todo
- Add example and usage
ios/static.h
Creates an Objective-C header file of a static style dictionary class
Todo
- Add example and usage
ios/static.m
Creates an Objective-C implementation file of a static style dictionary class
Todo
- Add example and usage
ios/colors.h
Creates an Objective-C header file of a color class
Todo
- Add example and usage
ios/colors.m
Creates an Objective-C implementation file of a color class
Todo
- Add example and usage
ios/strings.h
Creates an Objective-C header file of strings
Todo
- Add example and usage
ios/strings.m
Creates an Objective-C implementation file of strings
Todo
- Add example and usage
ios-swift/class.swift
Creates a Swift implementation file of a class with values. It adds default class
object type, public
access control and UIKit
import.
Param | Type | Description |
---|---|---|
options | Object | |
options.accessControl | string | Level of access of the generated swift object. Defaults to public . |
options.import | string[] | string | Modules to import. Can be a string or array of strings. Defaults to 'UIKit' . |
options.className | string | The name of the generated Swift object |
options.showFileHeader | boolean | Whether or not to include a comment that has the build date. Defaults to true |
options.outputReferences | boolean | OutputReferencesFunction | Whether or not to keep references (a -> b -> c) in the output. Defaults to false . Also allows passing a function to conditionally output references on a per token basis. |
Example:
ios-swift/enum.swift
Creates a Swift implementation file of an enum with values. It adds default enum
object type, public
access control and UIKit
import.
Param | Type | Description |
---|---|---|
options | Object | |
options.accessControl | string | Level of access of the generated swift object. Defaults to public . |
options.import | string[] | string | Modules to import. Can be a string or array of strings. Defaults to 'UIKit' . |
options.className | string | The name of the generated Swift object |
options.showFileHeader | boolean | Whether or not to include a comment that has the build date. Defaults to true |
options.outputReferences | boolean | OutputReferencesFunction | Whether or not to keep references (a -> b -> c) in the output. Defaults to false . Also allows passing a function to conditionally output references on a per token basis. |
Example:
ios-swift/any.swift
Creates a Swift implementation file of any given type with values. It has by default class
object type, public
access control and UIKit
import.
Param | Type | Description |
---|---|---|
options | Object | |
options.accessControl | string | Level of access of the generated swift object. Defaults to public . |
options.import | string[] | string | Modules to import. Can be a string or array of strings. Defaults to 'UIKit' . |
options.className | string | The name of the generated Swift object |
options.objectType | string | The type of the generated Swift object. Defaults to 'class' . |
options.showFileHeader | boolean | Whether or not to include a comment that has the build date. Defaults to true |
options.outputReferences | boolean | OutputReferencesFunction | Whether or not to keep references (a -> b -> c) in the output. Defaults to false . Also allows passing a function to conditionally output references on a per token basis. |
Example:
css/fonts.css
Creates CSS file with @font-face declarations
Todo
- Add example and usage
json
Creates a JSON file of the style dictionary.
Example:
json/asset
Creates a JSON file of the assets defined in the style dictionary.
Example:
json/nested
Creates a JSON nested file of the style dictionary.
Example:
json/flat
Creates a JSON flat file of the style dictionary.
Example:
sketch/palette
Creates a sketchpalette file of all the base colors
Example:
sketch/palette/v2
Creates a sketchpalette file compatible with version 2 of the sketchpalette plugin. To use this you should use the ‘color/sketch’ transform to get the correct value for the colors.
Example:
flutter/class.dart
Creates a Dart implementation file of a class with values
Param | Type | Description |
---|---|---|
options.showFileHeader | boolean | Whether or not to include a comment that has the build date. Defaults to true |
options.outputReferences | boolean | OutputReferencesFunction | Whether or not to keep references (a -> b -> c) in the output. Defaults to false . Also allows passing a function to conditionally output references on a per token basis. |
Example: