README.md

Templates

stylesync uses templates to generate code, so that it can export code in the language and format you require for your project.

The text styles template and the color styles template should be stored as files in your project, and referenced in stylesyncConfig.json.

Example

The following text style template with a file name of TextStyle+DesignSystem.swift-template.txt:

//
<generatedFileHeader>
//  <#=headerLine#>
</generatedFileHeader>
//

import UIKit

extension TextStyle {
<textStyleDeclaration>

	<#?deprecated=true#>@available(*, deprecated)
	static let <#=textStyleName#> = TextStyle(
		fontName: "<#=fontName#>",
		pointSize: <#=pointSize#>,
		color: .<#=color#>,
		kerning: <#=kerning#>,
		lineHeight: <#=lineHeight#>
	)
</textStyleDeclaration>
}

could generate a file named TextStyle+DesignSystem.swift that looks like:

//
//  Style Guide v1.0
//
//  Generated by stylesync
//  https://github.com/dylanslewis/stylesync
//

import UIKit

extension TextStyle {

	static let sampleHeading = TextStyle(
		fontName: "FuturaPTHeavy-Reg",
		pointSize: 60,
		color: .sampleBlack,
		kerning: 0.0,
		lineHeight: 72
	)
	
	static let sampleBody = TextStyle(
		fontName: "FuturaPTBook-Reg",
		pointSize: 14,
		color: .sampleBlack,
		kerning: 0.6,
		lineHeight: 20
	)
}

Declarations

Declarations are the sections of your template that will be replaced by code defining your styles. For each style found in the Sketch file, stylesync will copy the code within the declaration, and replace the placeholders with the style's properties. Declarations are also used to mark the header section of a template.

A declaration starts with <{declaration}> and ends with </{declaration}>, both of which must appear on their own line.

Declaration	Definition
<generatedFileHeader>	Information about the file (optional)
<colorDeclaration>	Color style (only available in the color template)
<textStyleDeclaration>	Text style (only available in the text style template)

Placeholders

All template placeholders are prefixed with <# and suffixed with #>.

There are two types of placeholder: value (=) and conditional (?).

Value placeholders

These represent a property value, such as a color style's hex value. These are all optional, so you can use the value that best suits your project.

If a value is not available, please create an issue.

Color Style

Placeholder	Definition
<#=name#>	Raw name, e.g. Sample Red
<#=colorName#>	Variable name, e.g. sampleRed
<#=red#>	Red component (0-255)
<#=green#>	Green component (0-255)
<#=blue#>	Blue component (0-255)
<#=alpha#>	Alpha value (0-1)
<#=hex#>	Six-digit hex value

Text Style

Placeholder	Definition
<#=name#>	Raw name, e.g. Sample Text
<#=textStyleName#>	Variable name, e.g. sampleText
<#=fontName#>	Font name
<#=pointSize#>	Point size
<#=kerning#>	Kerning
<#=lineHeight#>	Line height
<#=color#>	The color style's name
<#=letterSpacingEm#>	Letter spacing in em
<#=lineSpacingExtra#>	Difference between the line height and point size
<#=lineSpacingMultiplier#>	Line height as a multiplier of point size

Optional placeholders

These represent a placeholder that is dependant on a condition, such as a style being deprecated. The placeholder must be on the same line as the code to generate if the condition is satisfied.

Placeholder	Definition
<#?deprecated=true#>	Whether the style is deprecated

Generated file names and extensions

stylesync determines the generated file’s name and extension from the template’s file name. The expected file name format is {fileName}.{fileExtension}-template.txt.

For example, a template file named TextStyles.swift-template.txt would generate a file named TextStyles.swift.

Example templates

Example templates are available for the following platforms and languages:

Platform	Language	Templates
iOS, tvOS, watchOS	Swift	Color Styles • Text Styles (requires TextStyle.swift to compile)
Android	XML	Color Styles • Text Styles