to-scss-mixin-text-style
This parser helps you generate text styles as SCSS mixins.
Interface
interface parser {
name: 'to-scss-mixin-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 SCSS mixins
include
false
Array<string>
List of properties to include in the SCSS mixins
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
}
}
}
}
Last updated
Was this helpful?