-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.ts
executable file
·125 lines (97 loc) · 3.25 KB
/
index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import { checkForVariables } from "../utils/controller/checkForVariables";
import { getStorageConfig } from "../utils/controller/getStorageConfig";
import { stylesToTokens } from "../utils/styles/stylesToTokens";
import { variablesToTokens } from "../utils/variablesToTokens";
import { mergeStylesIntoTokens } from "../utils/mergeStylesIntoTokens";
// import { removeDollarSign } from "../utils/removeDollarSign";
import { config } from "../utils/config";
// clear console on reload
console.clear();
////////////////////////
// EXPORT TOKENS ///////
////////////////////////
const pluginConfigKey = "tokenbrücke-config";
getStorageConfig(pluginConfigKey);
//
let isCodePreviewOpen = false;
const frameWidthWithCodePreview = 800;
const frameWidth = isCodePreviewOpen
? frameWidthWithCodePreview
: config.frameWidth;
figma.showUI(__html__, {
width: frameWidth,
height: 600,
themeColors: true,
});
let JSONSettingsConfig: JSONSettingsConfigI;
const getTokens = async () => {
const variableCollection =
figma.variables.getLocalVariableCollections() as VariableCollection[];
const variables = figma.variables.getLocalVariables() as Variable[];
// convert variables to tokens
const variableTokens = await variablesToTokens(
variables,
variableCollection,
JSONSettingsConfig
);
// convert styles to tokens
const styleTokens = await stylesToTokens({
includedStyles: JSONSettingsConfig.includedStyles,
colorMode: JSONSettingsConfig.colorMode,
isDTCGForamt: JSONSettingsConfig.useDTCGKeys,
});
// merge variables and styles
const mergedVariables = mergeStylesIntoTokens(
variableTokens,
styleTokens,
JSONSettingsConfig.selectedCollection
);
// add meta to mergedVariables
const metaData = {
useDTCGKeys: JSONSettingsConfig.useDTCGKeys,
colorMode: JSONSettingsConfig.colorMode,
variableCollections: JSONSettingsConfig.variableCollections,
createdAt: new Date().toISOString(),
} as MetaPropsI;
// add meta to mergedVariables
mergedVariables["$extensions"] = {
"tokens-bruecke-meta": metaData,
};
// console.log("mergedVariables", mergedVariables);
return mergedVariables;
};
// listen for messages from the UI
figma.ui.onmessage = async (msg) => {
await checkForVariables(msg.type);
// get JSON settings config from UI and store it in a variable
if (msg.type === "JSONSettingsConfig") {
// update JSONSettingsConfig
JSONSettingsConfig = msg.config;
// console.log("updated JSONSettingsConfig received", JSONSettingsConfig);
// handle client storage
await figma.clientStorage.setAsync(
pluginConfigKey,
JSON.stringify(JSONSettingsConfig)
);
}
// generate tokens and send them to the UI
if (msg.type === "getTokens") {
await getTokens().then((tokens) => {
figma.ui.postMessage({
type: "setTokens",
tokens: tokens,
role: msg.role,
server: msg.server,
} as TokensMessageI);
});
}
// change size of UI
if (msg.type === "resizeUIHeight") {
figma.ui.resize(frameWidth, msg.height);
}
if (msg.type === "openCodePreview") {
console.log("openCodePreview", msg.isCodePreviewOpen);
isCodePreviewOpen = msg.isCodePreviewOpen;
figma.ui.resize(frameWidthWithCodePreview, msg.height);
}
};