Links

CSS Custom Properties

This template is dedicated for Web developers using CSS. It helps you generate all types of design tokens as CSS Custom Properties in their respective CSS file and it helps you to optimize your SVG's.
This example uses 5 different parsers:
  • filter to target on a specific collection named "Colors" that contains our colors
  • convert-color to convert our colors in HSL
  • change-case to change the name of our tokens and modes to kebabCase
  • to-css-custom-properties to generate a CSS file containing our tokens
  • svgo to optimize, transform vectors, and generate SVG files
This template is an example among others. Head toward the to-css-custom-properties page to get all available options.
CLI configuration
GitHub configuration
When using the CLI, you need to fill three properties:
  • repository is @organization/repository
  • personalAccessToken which you can generate in your account settings
  • rules lets you transform tokens by chaining parsers
.specifyrc.json
1
{
2
"version": "2",
3
"repository": "@organization/repository",
4
"personalAccessToken": "<your-personal-access-token>",
5
"rules": [
6
{
7
"name": "css",
8
"parsers": [
9
{
10
"name": "filter",
11
"options": {
12
"query": {
13
"where": {
14
"token": ".*",
15
"withTypes": {
16
"include": [
17
"color"
18
]
19
},
20
"select": {
21
"parents": true
22
}
23
}
24
}
25
}
26
},
27
{
28
"name": "convert-color",
29
"options": {
30
"toFormat": "hsl",
31
"applyTo": {
32
"collection": true
33
}
34
}
35
},
36
{
37
"name": "change-case",
38
"options": {
39
"change": "names",
40
"toCase": "kebabCase",
41
"applyTo": {
42
"collection": true
43
}
44
}
45
},
46
{
47
"name": "change-case",
48
"options": {
49
"change": "modes",
50
"toCase": "kebabCase",
51
"applyTo": {
52
"collection": true
53
}
54
}
55
},
56
{
57
"name": "to-css-custom-properties",
58
"output": {
59
"type": "file",
60
"filePath": "tokens.css"
61
}
62
}
63
]
64
},
65
{
66
"name": "Optimize and transform vectors with svgo + Generate SVG files",
67
"parsers": [
68
{
69
"name": "svgo",
70
"output": {
71
"type": "directory",
72
"directoryPath": "output/assets"
73
},
74
"options": {
75
"svgo": {
76
"plugins": [
77
{
78
"name": "removeDimensions"
79
},
80
{
81
"name": "convertColors",
82
"params": {
83
"currentColor": true
84
}
85
}
86
]
87
}
88
}
89
}
90
]
91
}
92
]
93
}
If you use the GitHub, you need to fill 4 properties:
  • repository is @organization/repository
  • head lets you set the branch your PR will be created on
  • base lets you set the branch your PR will be merged on
  • rules lets you transform tokens by chaining parsers
Make sure you have connected your GitHub account with your Specify account. Head toward this article to learn more.
.specifyrc.json
1
{
2
"version": "2",
3
"head": "specifyrc-json",
4
"base": "main",
5
"repository": "@organization/repository",
6
"rules": [
7
{
8
"name": "css",
9
"parsers": [
10
{
11
"name": "filter",
12
"options": {
13
"query": {
14
"where": {
15
"token": ".*",
16
"withTypes": {
17
"include": [
18
"color"
19
]
20
},
21
"select": {
22
"parents": true
23
}
24
}
25
}
26
}
27
},
28
{
29
"name": "convert-color",
30
"options": {
31
"toFormat": "hsl",
32
"applyTo": {
33
"collection": true
34
}
35
}
36
},
37
{
38
"name": "change-case",
39
"options": {
40
"change": "names",
41
"toCase": "kebabCase",
42
"applyTo": {
43
"collection": true
44
}
45
}
46
},
47
{
48
"name": "change-case",
49
"options": {
50
"change": "modes",
51
"toCase": "kebabCase",
52
"applyTo": {
53
"collection": true
54
}
55
}
56
},
57
{
58
"name": "to-css-custom-properties",
59
"output": {
60
"type": "file",
61
"filePath": "tokens.css"
62
}
63
}
64
]
65
},
66
{
67
"name": "Optimize and transform vectors with svgo + Generate SVG files",
68
"parsers": [
69
{
70
"name": "svgo",
71
"output": {
72
"type": "directory",
73
"directoryPath": "output/assets"
74
},
75
"options": {
76
"svgo": {
77
"plugins": [
78
{
79
"name": "removeDimensions"
80
},
81
{
82
"name": "convertColors",
83
"params": {
84
"currentColor": true
85
}
86
}
87
]
88
}
89
}
90
}
91
]
92
}
93
]
94
}