figma-tokens-flattener 1.0.18 → 1.2.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +45 -0
- package/index.js +663 -562
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -58,3 +58,48 @@ After running the command, the following files will be created in the target dir
|
|
|
58
58
|
light.json - tokens for light theme
|
|
59
59
|
|
|
60
60
|
dark.json - tokens for dark theme
|
|
61
|
+
|
|
62
|
+
## Custom theme parsing
|
|
63
|
+
|
|
64
|
+
### The designer creates a new theme based on a light theme.
|
|
65
|
+
|
|
66
|
+
1. Make a duplicate of the light theme in figma
|
|
67
|
+
2. In the token studio plugin, place the actual colors at the positions alias, map, seed, colors
|
|
68
|
+
3. Upload as a single file
|
|
69
|
+
4. Upload custom variable colors via any tokens pro type token and remove unnecessary fields with a simple script
|
|
70
|
+
|
|
71
|
+
### frontend developer receives 2 files.
|
|
72
|
+
|
|
73
|
+
1. tokens.json (the usual cast of the theme from figma)
|
|
74
|
+
2. **\***\_variable.json file that contains the structure to be referenced from tokens.json
|
|
75
|
+
the name must be strictly "**\***\_variable.json" ("example_variable.json", "sky_variable.json" etc.)
|
|
76
|
+
3. In tokens.json we will have json links (where needed):
|
|
77
|
+
|
|
78
|
+
```
|
|
79
|
+
"blue": {
|
|
80
|
+
"1": {
|
|
81
|
+
"value": "{Sky.core.blue.F5FAFE}",
|
|
82
|
+
"type": "color"
|
|
83
|
+
},
|
|
84
|
+
}
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
4. In example_variable.json, we will have values along the link paths
|
|
88
|
+
|
|
89
|
+
```
|
|
90
|
+
{
|
|
91
|
+
"Sky": {
|
|
92
|
+
"core": {
|
|
93
|
+
"blue": {
|
|
94
|
+
"F5FAFE": {
|
|
95
|
+
"value": "#f5fafe",
|
|
96
|
+
"type": "color"
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
```
|
|
103
|
+
5. The variables file is located in the same directory as the token.json file. The values will be substituted and we will be able to get any custom theme.
|
|
104
|
+
|
|
105
|
+
This approach allows you to create any custom themes based on the bright standard antd theme.
|