to-style-dictionary
This parser helps you generate Style Dictionary raw token files for all your design tokens coming from Specify.
Unlike the existing to-style-dictionary parser, this one doesn't have any options yet.
Interface
interface parser {
name: 'to-style-dictionary';
output: {
type: 'directory';
directoryPath: string;
};
}
General output rules
A collection will generate a folder at the top level
The default level refers to the SDTF Token Type associated SD Category →
{collectionName?}
/{SDCategory}
The next folder level is the name of the potential first group containing the token →
{collectionName?}
/{SDCategory}
/{1stLevelGroupName?}
The default filename is the name of the first group, or the name of the each mode the token might have, or
base.json
→{collectionName?}
/{SDCategory}
/{ mode? | 1stLevelGroupName? | base}.json
(priority order for filename:groupName
>mode
>base
)
The token path inside the file must match the token file path with the following priority order:
collection
>SDCategoryType
>Mode
>Groups
{collectionName?}
/{SDCategory}
/{1stLevelGroupName? | mode? | base}.json
→{ collection: {type: {mode: { groupName: { tokenName: ... }}}}
Basic usage
{
"colors": {
"$collection": { "$modes": ["light", "dark"] },
"core": {
"blue-100": {
"$type": "color",
"$description": "token 1 aliased with n modes within collection within n groups",
"$value": {
"light": {
"red": 255,
"blue": 255,
"alpha": 1,
"green": 255,
"model": "rgb"
},
"dark": {
"red": 229,
"blue": 29,
"alpha": 1,
"green": 29,
"model": "rgb"
}
}
},
"blue-700": {
"$type": "color",
"$description": "token 2 aliased with n modes within collection within n groups",
"$value": {
"light": {
"red": 255,
"blue": 255,
"alpha": 1,
"green": 200,
"model": "rgb"
},
"dark": {
"red": 229,
"blue": 0,
"alpha": 1,
"green": 0,
"model": "rgb"
}
}
}
},
"semantic": {
"background": {
"button": {
"primary": {
"hover": {
"$type": "color",
"$description": "alias token with n modes within collection within n groups",
"$value": {
"dark": {
"$mode": "dark",
"$alias": "colors.core.blue-100"
},
"light": {
"$mode": "light",
"$alias": "colors.core.blue-700"
}
}
}
}
}
}
}
}
}
Last updated
Was this helpful?