to-css-text-style
This parser helps you generate text styles as CSS classes.
Interface
interface parser {
name: 'to-css-text-style';
output: {
type: 'file';
filePath: string;
};
options?: {
tokenNameTemplate?: string;
exclude?: Array<
| 'fontFamily'
| 'fontWeight'
| 'fontSize'
| 'color'
| 'fontFeatures'
| 'lineHeight'
| 'letterSpacing'
| 'paragraphSpacing'
| 'textAlignHorizontal'
| 'textAlignVertical'
| 'textDecoration'
| 'textIndent'
| 'textTransform'
>;
include?: Array<
| 'fontFamily'
| 'fontWeight'
| 'fontSize'
| 'color'
| 'fontFeatures'
| 'lineHeight'
| 'letterSpacing'
| 'paragraphSpacing'
| 'textAlignHorizontal'
| 'textAlignVertical'
| 'textDecoration'
| 'textIndent'
| 'textTransform'
>;
genericFamily?: string;
};
}Options
Parameter
Required
Type
Default
Description
tokenNameTemplate
false
string
{{path}}-{{token}}-{{mode}}
The template the parser follows to name your tokens.
You can use the path of your tokens, their token name, and their respective mode.
exclude
false
Array<string>
List of properties to exclude in the CSS class
include
false
Array<string>
List of properties to include in the CSS class
genericFamily
false
string
The generic font family will be applied after the main font family
Basic usage
{
"Text styles": {
"Body": {
"$type": "textStyle",
"$value": {
"default": {
"font": {
"family": "Neue Haas Grotesk Text Pro",
"postScriptName": "Neue Haas Grotesk Text Pro",
"weight": "roman",
"style": "normal",
"files": []
},
"fontSize": {
"value": 14,
"unit": "px"
},
"color": null,
"fontFeatures": null,
"lineHeight": {
"value": 21,
"unit": "px"
},
"letterSpacing": {
"value": 0.2,
"unit": "px"
},
"paragraphSpacing": {
"value": 0,
"unit": "px"
},
"textAlignHorizontal": null,
"textAlignVertical": null,
"textDecoration": "none",
"textIndent": {
"value": 0,
"unit": "px"
},
"textTransform": "none"
}
},
"$extensions": {
"com.specifyapp.figmaStyles.hangingList": false,
"com.specifyapp.figmaStyles.leadingTrim": "NONE",
"com.specifyapp.figmaStyles.listSpacing": 0,
"com.specifyapp.figmaStyles.hangingPunctuation": false
}
},
"Body-lg": {
"$type": "textStyle",
"$value": {
"default": {
"font": {
"family": "Neue Haas Grotesk Text Pro",
"postScriptName": "Neue Haas Grotesk Text Pro",
"weight": "roman",
"style": "normal",
"files": []
},
"fontSize": {
"value": 16,
"unit": "px"
},
"color": null,
"fontFeatures": null,
"lineHeight": {
"value": 150,
"unit": "%"
},
"letterSpacing": {
"value": 0.4,
"unit": "px"
},
"paragraphSpacing": {
"value": 0,
"unit": "px"
},
"textAlignHorizontal": null,
"textAlignVertical": null,
"textDecoration": "none",
"textIndent": {
"value": 0,
"unit": "px"
},
"textTransform": "none"
}
},
"$extensions": {
"com.specifyapp.figmaStyles.hangingList": false,
"com.specifyapp.figmaStyles.leadingTrim": "NONE",
"com.specifyapp.figmaStyles.listSpacing": 0,
"com.specifyapp.figmaStyles.hangingPunctuation": false
}
},
"Body-sm": {
"$type": "textStyle",
"$value": {
"default": {
"font": {
"family": "Neue Haas Grotesk Text Pro",
"postScriptName": "Neue Haas Grotesk Text Pro",
"weight": "roman",
"style": "normal",
"files": []
},
"fontSize": {
"value": 12,
"unit": "px"
},
"color": null,
"fontFeatures": null,
"lineHeight": {
"value": 150,
"unit": "%"
},
"letterSpacing": {
"value": 0.2,
"unit": "px"
},
"paragraphSpacing": {
"value": 0,
"unit": "px"
},
"textAlignHorizontal": null,
"textAlignVertical": null,
"textDecoration": "none",
"textIndent": {
"value": 0,
"unit": "px"
},
"textTransform": "none"
}
},
"$extensions": {
"com.specifyapp.figmaStyles.hangingList": false,
"com.specifyapp.figmaStyles.leadingTrim": "NONE",
"com.specifyapp.figmaStyles.listSpacing": 0,
"com.specifyapp.figmaStyles.hangingPunctuation": false
}
}
}
}.specifyrc.json
{
"version": "2",
"repository": "@organization/repository",
// Only use the personalAccessToken when working with the CLI
"personalAccessToken": "<your-personal-access-token>",
"rules": [
{
"name": "Generate text styles",
"parsers": [
{
"name": "to-css-text-style",
"output": {
"type": "file",
"filePath": "public/text-styles.scss"
},
"options": {
"genericFamily": "sans-serif"
}
}
]
}
]
}public/text-styles.css
.Text-styles-Body {
font-family: Neue Haas Grotesk Text Pro, sans-serif;
font-size: 14px;
line-height: 21px;
letter-spacing: 0.2px;
font-weight: roman;
}
.Text-styles-Body-lg {
font-family: Neue Haas Grotesk Text Pro, sans-serif;
font-size: 16px;
line-height: 150%;
letter-spacing: 0.4px;
font-weight: roman;
}
.Text-styles-Body-sm {
font-family: Neue Haas Grotesk Text Pro, sans-serif;
font-size: 12px;
line-height: 150%;
letter-spacing: 0.2px;
font-weight: roman;
}Last updated