to-style-dictionary
This parser helps you generate Style Dictionary raw token files for all your design tokens coming from Specify.
interface parser {
name: 'to-style-dictionary';
output: {
type: 'directory';
directoryPath: string;
};
}
- A collection will generate a folder at the top level
- 1.The default level refers to the SDTF Token Type associated SD Category →
{collectionName?}/{SDCategory} - 2.The next folder level is the name of the potential first group containing the token →
{collectionName?}/{SDCategory}/{1stLevelGroupName?} - 3.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: ... }}}}
Input
Config
Output
1
{
2
"colors": {
3
"$collection": { "$modes": ["light", "dark"] },
4
"core": {
5
"blue-100": {
6
"$type": "color",
7
"$description": "token 1 aliased with n modes within collection within n groups",
8
"$value": {
9
"light": {
10
"red": 255,
11
"blue": 255,
12
"alpha": 1,
13
"green": 255,
14
"model": "rgb"
15
},
16
"dark": {
17
"red": 229,
18
"blue": 29,
19
"alpha": 1,
20
"green": 29,
21
"model": "rgb"
22
}
23
}
24
},
25
"blue-700": {
26
"$type": "color",
27
"$description": "token 2 aliased with n modes within collection within n groups",
28
"$value": {
29
"light": {
30
"red": 255,
31
"blue": 255,
32
"alpha": 1,
33
"green": 200,
34
"model": "rgb"
35
},
36
"dark": {
37
"red": 229,
38
"blue": 0,
39
"alpha": 1,
40
"green": 0,
41
"model": "rgb"
42
}
43
}
44
}
45
},
46
"semantic": {
47
"background": {
48
"button": {
49
"primary": {
50
"hover": {
51
"$type": "color",
52
"$description": "alias token with n modes within collection within n groups",
53
"$value": {
54
"dark": {
55
"$mode": "dark",
56
"$alias": "colors.core.blue-100"
57
},
58
"light": {
59
"$mode": "light",
60
"$alias": "colors.core.blue-700"
61
}
62
}
63
}
64
}
65
}
66
}
67
}
68
}
69
}
70
.specifyrc.json
1
{
2
"name": "Style Dictionary",
3
"parsers": [
4
{
5
"name": "to-style-dictionary",
6
"output": {
7
"type": "directory",
8
"directoryPath": "output"
9
}
10
}
11
]
12
}
color/light/core.json
1
{
2
"colors": {
3
"color": {
4
"light": {
5
"core": {
6
"blue-100": {
7
"value": "rgb(255, 255, 255)",
8
"type": "color",
9
"description": "token 1 aliased with n modes within collection within n groups"
10
},
11
"blue-700": {
12
"value": "rgb(255, 200, 255)",
13
"type": "color",
14
"description": "token 2 aliased with n modes within collection within n groups"
15
}
16
}
17
}
18
}
19
}
20
}
color/dark/core.json
1
{
2
"colors": {
3
"color": {
4
"dark": {
5
"core": {
6
"blue-100": {
7
"value": "rgb(229, 29, 29)",
8
"type": "color",
9
"description": "token 1 aliased with n modes within collection within n groups"
10
},
11
"blue-700": {
12
"value": "rgb(229, 0, 0)",
13
"type": "color",
14
"description": "token 2 aliased with n modes within collection within n groups"
15
}
16
}
17
}
18
}
19
}
20
}
color/light/semantic.json
1
{
2
"colors": {
3
"color": {
4
"light": {
5
"semantic": {
6
"background": {
7
"button": {
8
"primary": {
9
"hover": {
10
"value": "{colors.color.light.core.blue-700}",
11
"type": "color",
12
"description": "alias token with n modes within collection within n groups"
13
}
14
}
15
}
16
}
17
}
18
}
19
}
20
}
21
}
Last modified 1mo ago