@digdir/designsystemet 0.1.0-next.31 → 1.0.0-next.33

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.
Files changed (41) hide show
  1. package/dist/bin/designsystemet.js +18 -12
  2. package/dist/src/colors/theme.js +1 -1
  3. package/dist/src/init/template/default-files/design-tokens/semantic/color.json +2 -2
  4. package/dist/src/tokens/{build/index.js → build.js} +2 -2
  5. package/dist/src/tokens/create.js +100 -0
  6. package/dist/src/tokens/design-tokens/default/Figma/components.json +22 -0
  7. package/dist/src/tokens/design-tokens/default/primitives/globals.json +161 -0
  8. package/dist/src/tokens/design-tokens/default/primitives/size/default.json +175 -0
  9. package/dist/src/tokens/design-tokens/default/semantic/color.json +572 -0
  10. package/dist/src/tokens/design-tokens/default/semantic/style.json +564 -0
  11. package/dist/src/tokens/design-tokens/template/$metadata.json +17 -0
  12. package/dist/src/tokens/design-tokens/template/$themes.json +1231 -0
  13. package/dist/src/tokens/design-tokens/template/themes/theme.json +334 -0
  14. package/dist/src/tokens/template.js +66 -0
  15. package/dist/src/tokens/types.js +0 -0
  16. package/dist/src/tokens/write/generate$metadata.js +21 -0
  17. package/dist/src/tokens/write/generate$themes.js +115 -0
  18. package/dist/src/tokens/write.js +79 -0
  19. package/dist/types/src/tokens/{build/index.d.ts → build.d.ts} +1 -1
  20. package/dist/types/src/tokens/build.d.ts.map +1 -0
  21. package/dist/types/src/tokens/create.d.ts +8 -0
  22. package/dist/types/src/tokens/create.d.ts.map +1 -0
  23. package/dist/types/src/tokens/template.d.ts +2 -0
  24. package/dist/types/src/tokens/template.d.ts.map +1 -0
  25. package/dist/types/src/tokens/types.d.ts +37 -0
  26. package/dist/types/src/tokens/types.d.ts.map +1 -0
  27. package/dist/types/src/tokens/write/generate$metadata.d.ts +8 -0
  28. package/dist/types/src/tokens/write/generate$metadata.d.ts.map +1 -0
  29. package/dist/types/src/tokens/write/generate$themes.d.ts +10 -0
  30. package/dist/types/src/tokens/write/generate$themes.d.ts.map +1 -0
  31. package/dist/types/src/tokens/write.d.ts +10 -0
  32. package/dist/types/src/tokens/write.d.ts.map +1 -0
  33. package/package.json +6 -5
  34. package/dist/src/tokens/create/README.md +0 -3
  35. package/dist/src/tokens/create/index.js +0 -150
  36. package/dist/src/tokens/index.js +0 -4
  37. package/dist/types/src/tokens/build/index.d.ts.map +0 -1
  38. package/dist/types/src/tokens/create/index.d.ts +0 -64
  39. package/dist/types/src/tokens/create/index.d.ts.map +0 -1
  40. package/dist/types/src/tokens/index.d.ts +0 -2
  41. package/dist/types/src/tokens/index.d.ts.map +0 -1
@@ -0,0 +1,334 @@
1
+ {
2
+ "color": {
3
+ "accent": {
4
+ "1": {
5
+ "$type": "color",
6
+ "$value": "{<theme>.accent.1}"
7
+ },
8
+ "2": {
9
+ "$type": "color",
10
+ "$value": "{<theme>.accent.2}"
11
+ },
12
+ "3": {
13
+ "$type": "color",
14
+ "$value": "{<theme>.accent.3}"
15
+ },
16
+ "4": {
17
+ "$type": "color",
18
+ "$value": "{<theme>.accent.4}"
19
+ },
20
+ "5": {
21
+ "$type": "color",
22
+ "$value": "{<theme>.accent.5}"
23
+ },
24
+ "6": {
25
+ "$type": "color",
26
+ "$value": "{<theme>.accent.6}"
27
+ },
28
+ "7": {
29
+ "$type": "color",
30
+ "$value": "{<theme>.accent.7}"
31
+ },
32
+ "8": {
33
+ "$type": "color",
34
+ "$value": "{<theme>.accent.8}"
35
+ },
36
+ "9": {
37
+ "$type": "color",
38
+ "$value": "{<theme>.accent.9}"
39
+ },
40
+ "10": {
41
+ "$type": "color",
42
+ "$value": "{<theme>.accent.10}"
43
+ },
44
+ "11": {
45
+ "$type": "color",
46
+ "$value": "{<theme>.accent.11}"
47
+ },
48
+ "12": {
49
+ "$type": "color",
50
+ "$value": "{<theme>.accent.12}"
51
+ },
52
+ "13": {
53
+ "$type": "color",
54
+ "$value": "{<theme>.accent.13}"
55
+ },
56
+ "contrast-1": {
57
+ "$type": "color",
58
+ "$value": "{<theme>.accent.contrast-1}"
59
+ },
60
+ "contrast-2": {
61
+ "$type": "color",
62
+ "$value": "{<theme>.accent.contrast-2}"
63
+ }
64
+ },
65
+ "neutral": {
66
+ "1": {
67
+ "$type": "color",
68
+ "$value": "{<theme>.neutral.1}"
69
+ },
70
+ "2": {
71
+ "$type": "color",
72
+ "$value": "{<theme>.neutral.2}"
73
+ },
74
+ "3": {
75
+ "$type": "color",
76
+ "$value": "{<theme>.neutral.3}"
77
+ },
78
+ "4": {
79
+ "$type": "color",
80
+ "$value": "{<theme>.neutral.4}"
81
+ },
82
+ "5": {
83
+ "$type": "color",
84
+ "$value": "{<theme>.neutral.5}"
85
+ },
86
+ "6": {
87
+ "$type": "color",
88
+ "$value": "{<theme>.neutral.6}"
89
+ },
90
+ "7": {
91
+ "$type": "color",
92
+ "$value": "{<theme>.neutral.7}"
93
+ },
94
+ "8": {
95
+ "$type": "color",
96
+ "$value": "{<theme>.neutral.8}"
97
+ },
98
+ "9": {
99
+ "$type": "color",
100
+ "$value": "{<theme>.neutral.9}"
101
+ },
102
+ "10": {
103
+ "$type": "color",
104
+ "$value": "{<theme>.neutral.10}"
105
+ },
106
+ "11": {
107
+ "$type": "color",
108
+ "$value": "{<theme>.neutral.11}"
109
+ },
110
+ "12": {
111
+ "$type": "color",
112
+ "$value": "{<theme>.neutral.12}"
113
+ },
114
+ "13": {
115
+ "$type": "color",
116
+ "$value": "{<theme>.neutral.13}"
117
+ },
118
+ "contrast-1": {
119
+ "$type": "color",
120
+ "$value": "{<theme>.neutral.contrast-1}"
121
+ },
122
+ "contrast-2": {
123
+ "$type": "color",
124
+ "$value": "{<theme>.neutral.contrast-2}"
125
+ }
126
+ },
127
+ "brand1": {
128
+ "1": {
129
+ "$type": "color",
130
+ "$value": "{<theme>.brand1.1}"
131
+ },
132
+ "2": {
133
+ "$type": "color",
134
+ "$value": "{<theme>.brand1.2}"
135
+ },
136
+ "3": {
137
+ "$type": "color",
138
+ "$value": "{<theme>.brand1.3}"
139
+ },
140
+ "4": {
141
+ "$type": "color",
142
+ "$value": "{<theme>.brand1.4}"
143
+ },
144
+ "5": {
145
+ "$type": "color",
146
+ "$value": "{<theme>.brand1.5}"
147
+ },
148
+ "6": {
149
+ "$type": "color",
150
+ "$value": "{<theme>.brand1.6}"
151
+ },
152
+ "7": {
153
+ "$type": "color",
154
+ "$value": "{<theme>.brand1.7}"
155
+ },
156
+ "8": {
157
+ "$type": "color",
158
+ "$value": "{<theme>.brand1.8}"
159
+ },
160
+ "9": {
161
+ "$type": "color",
162
+ "$value": "{<theme>.brand1.9}"
163
+ },
164
+ "10": {
165
+ "$type": "color",
166
+ "$value": "{<theme>.brand1.10}"
167
+ },
168
+ "11": {
169
+ "$type": "color",
170
+ "$value": "{<theme>.brand1.11}"
171
+ },
172
+ "12": {
173
+ "$type": "color",
174
+ "$value": "{<theme>.brand1.12}"
175
+ },
176
+ "13": {
177
+ "$type": "color",
178
+ "$value": "{<theme>.brand1.13}"
179
+ },
180
+ "contrast-1": {
181
+ "$type": "color",
182
+ "$value": "{<theme>.brand1.contrast-1}"
183
+ },
184
+ "contrast-2": {
185
+ "$type": "color",
186
+ "$value": "{<theme>.brand1.contrast-2}"
187
+ }
188
+ },
189
+ "brand2": {
190
+ "1": {
191
+ "$type": "color",
192
+ "$value": "{<theme>.brand2.1}"
193
+ },
194
+ "2": {
195
+ "$type": "color",
196
+ "$value": "{<theme>.brand2.2}"
197
+ },
198
+ "3": {
199
+ "$type": "color",
200
+ "$value": "{<theme>.brand2.3}"
201
+ },
202
+ "4": {
203
+ "$type": "color",
204
+ "$value": "{<theme>.brand2.4}"
205
+ },
206
+ "5": {
207
+ "$type": "color",
208
+ "$value": "{<theme>.brand2.5}"
209
+ },
210
+ "6": {
211
+ "$type": "color",
212
+ "$value": "{<theme>.brand2.6}"
213
+ },
214
+ "7": {
215
+ "$type": "color",
216
+ "$value": "{<theme>.brand2.7}"
217
+ },
218
+ "8": {
219
+ "$type": "color",
220
+ "$value": "{<theme>.brand2.8}"
221
+ },
222
+ "9": {
223
+ "$type": "color",
224
+ "$value": "{<theme>.brand2.9}"
225
+ },
226
+ "10": {
227
+ "$type": "color",
228
+ "$value": "{<theme>.brand2.10}"
229
+ },
230
+ "11": {
231
+ "$type": "color",
232
+ "$value": "{<theme>.brand2.11}"
233
+ },
234
+ "12": {
235
+ "$type": "color",
236
+ "$value": "{<theme>.brand2.12}"
237
+ },
238
+ "13": {
239
+ "$type": "color",
240
+ "$value": "{<theme>.brand2.13}"
241
+ },
242
+ "contrast-1": {
243
+ "$type": "color",
244
+ "$value": "{<theme>.brand2.contrast-1}"
245
+ },
246
+ "contrast-2": {
247
+ "$type": "color",
248
+ "$value": "{<theme>.brand2.contrast-2}"
249
+ }
250
+ },
251
+ "brand3": {
252
+ "1": {
253
+ "$type": "color",
254
+ "$value": "{<theme>.brand3.1}"
255
+ },
256
+ "2": {
257
+ "$type": "color",
258
+ "$value": "{<theme>.brand3.2}"
259
+ },
260
+ "3": {
261
+ "$type": "color",
262
+ "$value": "{<theme>.brand3.3}"
263
+ },
264
+ "4": {
265
+ "$type": "color",
266
+ "$value": "{<theme>.brand3.4}"
267
+ },
268
+ "5": {
269
+ "$type": "color",
270
+ "$value": "{<theme>.brand3.5}"
271
+ },
272
+ "6": {
273
+ "$type": "color",
274
+ "$value": "{<theme>.brand3.6}"
275
+ },
276
+ "7": {
277
+ "$type": "color",
278
+ "$value": "{<theme>.brand3.7}"
279
+ },
280
+ "8": {
281
+ "$type": "color",
282
+ "$value": "{<theme>.brand3.8}"
283
+ },
284
+ "9": {
285
+ "$type": "color",
286
+ "$value": "{<theme>.brand3.9}"
287
+ },
288
+ "10": {
289
+ "$type": "color",
290
+ "$value": "{<theme>.brand3.10}"
291
+ },
292
+ "11": {
293
+ "$type": "color",
294
+ "$value": "{<theme>.brand3.11}"
295
+ },
296
+ "12": {
297
+ "$type": "color",
298
+ "$value": "{<theme>.brand3.12}"
299
+ },
300
+ "13": {
301
+ "$type": "color",
302
+ "$value": "{<theme>.brand3.13}"
303
+ },
304
+ "contrast-1": {
305
+ "$type": "color",
306
+ "$value": "{<theme>.brand3.contrast-1}"
307
+ },
308
+ "contrast-2": {
309
+ "$type": "color",
310
+ "$value": "{<theme>.brand3.contrast-2}"
311
+ }
312
+ }
313
+ },
314
+ "font": {
315
+ "family": {
316
+ "$type": "fontFamilies",
317
+ "$value": "{<theme>.main}"
318
+ }
319
+ },
320
+ "font-weight": {
321
+ "medium": {
322
+ "$type": "fontWeights",
323
+ "$value": "{<theme>.bold}"
324
+ },
325
+ "semibold": {
326
+ "$type": "fontWeights",
327
+ "$value": "{<theme>.extra-bold}"
328
+ },
329
+ "regular": {
330
+ "$type": "fontWeights",
331
+ "$value": "{<theme>.regular}"
332
+ }
333
+ }
334
+ }
@@ -0,0 +1,66 @@
1
+ import fs from "node:fs/promises";
2
+ import path from "node:path";
3
+ import * as R from "ramda";
4
+ import { stringify } from "./write";
5
+ const DIRNAME = import.meta.dirname || __dirname;
6
+ const SOURCE_FILES_PATH = path.join(DIRNAME, "../../../../design-tokens");
7
+ const DEFAULT_FILES_PATH = path.join(DIRNAME, "./design-tokens/default");
8
+ const TEMPLATE_FILES_PATH = path.join(DIRNAME, "./design-tokens/template");
9
+ const argsFromToPaths = (path_) => [
10
+ path.join(SOURCE_FILES_PATH, path_),
11
+ path.join(DEFAULT_FILES_PATH, path_)
12
+ ];
13
+ const options = { recursive: true };
14
+ const endsWithOneOf = (suffixes, str) => R.any((suffix) => R.endsWith(suffix, str), suffixes);
15
+ const updateTemplates = async () => {
16
+ await fs.cp(...argsFromToPaths("Figma"), options);
17
+ await fs.cp(...argsFromToPaths("primitives/globals.json"), options);
18
+ await fs.cp(...argsFromToPaths("primitives/size/default.json"), options);
19
+ await fs.cp(...argsFromToPaths("semantic"), options);
20
+ const themeFile = await fs.readFile(path.join(SOURCE_FILES_PATH, "themes/theme.json"), "utf-8");
21
+ const themeTemplate = themeFile.replaceAll("theme", "<theme>");
22
+ await fs.mkdir(path.join(TEMPLATE_FILES_PATH, "themes"), options);
23
+ await fs.writeFile(path.join(TEMPLATE_FILES_PATH, `themes/theme.json`), themeTemplate);
24
+ const themesFile = await fs.readFile(path.join(SOURCE_FILES_PATH, "$themes.json"), "utf-8");
25
+ const themesTemplate = JSON.parse(themesFile).filter((themeobj) => {
26
+ if (R.toLower(themeobj.name) === "compact" && R.toLower(themeobj.group || "") === "size") {
27
+ return false;
28
+ }
29
+ if (R.toLower(themeobj.name) !== "digdir" && R.toLower(themeobj.group || "") === "theme") {
30
+ return false;
31
+ }
32
+ return true;
33
+ }).map((themeobj) => {
34
+ if (R.toLower(themeobj.name) === "digdir") {
35
+ return {
36
+ ...themeobj,
37
+ name: "<theme>",
38
+ selectedTokenSets: {
39
+ "themes/<theme>": "enabled"
40
+ }
41
+ };
42
+ }
43
+ return themeobj;
44
+ });
45
+ await fs.writeFile(path.join(TEMPLATE_FILES_PATH, `$themes.json`), stringify(themesTemplate));
46
+ const metadataFile = await fs.readFile(path.join(SOURCE_FILES_PATH, "$metadata.json"), "utf-8");
47
+ const tokenSetOrderTemplate = JSON.parse(metadataFile).tokenSetOrder.filter((tokenSet) => {
48
+ if (endsWithOneOf(["theme2", "theme3", "theme4"], tokenSet)) {
49
+ return false;
50
+ }
51
+ return true;
52
+ }).map((tokenSet) => {
53
+ if (endsWithOneOf(["theme"], tokenSet)) {
54
+ return tokenSet.replace("/theme", "/<theme>");
55
+ }
56
+ return tokenSet;
57
+ });
58
+ await fs.writeFile(
59
+ path.join(TEMPLATE_FILES_PATH, `$metadata.json`),
60
+ stringify({ tokenSetOrder: tokenSetOrderTemplate })
61
+ );
62
+ };
63
+ updateTemplates();
64
+ export {
65
+ updateTemplates
66
+ };
File without changes
@@ -0,0 +1,21 @@
1
+ function generateMetadataJson(modes, themes) {
2
+ return {
3
+ tokenSetOrder: [
4
+ "primitives/globals",
5
+ "primitives/size/default",
6
+ ...themes.map((theme) => `primitives/modes/typography/primary/${theme}`),
7
+ ...themes.map((theme) => `primitives/modes/typography/secondary/${theme}`),
8
+ ...modes.flatMap((mode) => [
9
+ `primitives/modes/colors/${mode}/global`,
10
+ ...themes.map((theme) => `primitives/modes/colors/${mode}/${theme}`)
11
+ ]),
12
+ ...themes.map((theme) => `themes/${theme}`),
13
+ "semantic/color",
14
+ "semantic/style",
15
+ "Figma/components"
16
+ ]
17
+ };
18
+ }
19
+ export {
20
+ generateMetadataJson
21
+ };
@@ -0,0 +1,115 @@
1
+ import crypto from "node:crypto";
2
+ import { TokenSetStatus } from "@tokens-studio/types";
3
+ const capitalize = (word) => word.charAt(0).toUpperCase() + word.slice(1);
4
+ const createHash = (text) => crypto.hash("sha1", text);
5
+ function generateThemesJson(modes, themes) {
6
+ return [
7
+ ...generateSizeGroup(),
8
+ ...generateThemesGroup(themes),
9
+ ...generateTypographyGroup(themes),
10
+ ...generateModesGroup(modes, themes),
11
+ generateSemanticGroup()
12
+ ];
13
+ }
14
+ function generateSizeGroup() {
15
+ return [
16
+ {
17
+ id: "8b2c8cc86611a34b135cb22948666779361fd729",
18
+ name: "Default",
19
+ $figmaCollectionId: "VariableCollectionId:36248:20757",
20
+ selectedTokenSets: {
21
+ "primitives/size/default": TokenSetStatus.ENABLED
22
+ },
23
+ group: "Size"
24
+ }
25
+ ];
26
+ }
27
+ const modeDefaults = {
28
+ light: {
29
+ name: "Light",
30
+ selectedTokenSets: {},
31
+ id: "0daa3ca0b427b9349da7e7dc00101b5668972926",
32
+ $figmaCollectionId: "VariableCollectionId:34811:5472",
33
+ $figmaModeId: "34811:0"
34
+ },
35
+ dark: {
36
+ name: "Dark",
37
+ selectedTokenSets: {},
38
+ id: "9ebd8aed52afbffc17e2666e8b4653a53498b257",
39
+ $figmaCollectionId: "VariableCollectionId:34811:5472",
40
+ $figmaModeId: "34811:1"
41
+ },
42
+ contrast: {
43
+ name: "Contrast",
44
+ selectedTokenSets: {},
45
+ id: "9ebd8aed52afbffc17e2666e8b4653a53498b123",
46
+ $figmaCollectionId: "VariableCollectionId:34811:5472",
47
+ $figmaModeId: "34811:2"
48
+ }
49
+ };
50
+ function generateModesGroup(modes, themes) {
51
+ return modes.map(
52
+ (mode) => ({
53
+ ...modeDefaults[mode],
54
+ selectedTokenSets: Object.fromEntries([
55
+ [`primitives/modes/colors/${mode}/global`, TokenSetStatus.ENABLED],
56
+ ...themes.map((theme) => [`primitives/modes/colors/${mode}/${theme}`, TokenSetStatus.ENABLED])
57
+ ]),
58
+ group: "Mode"
59
+ })
60
+ );
61
+ }
62
+ function generateThemesGroup(themes) {
63
+ return themes.map(
64
+ (theme, index) => ({
65
+ id: createHash(theme),
66
+ $figmaCollectionId: "VariableCollectionId:36329:62335",
67
+ $figmaModeId: `36329:${index + 4}`,
68
+ // Start on 4 in Token Studio and Community file for some reason
69
+ name: theme,
70
+ selectedTokenSets: {
71
+ [`themes/${theme}`]: TokenSetStatus.ENABLED
72
+ },
73
+ group: "Theme"
74
+ })
75
+ );
76
+ }
77
+ function generateSemanticGroup() {
78
+ return {
79
+ id: "541629445ef90ad5363f9e88f52a1ccb617e6f84",
80
+ name: "Semantic",
81
+ selectedTokenSets: {
82
+ "semantic/style": TokenSetStatus.ENABLED,
83
+ "semantic/color": TokenSetStatus.ENABLED,
84
+ "primitives/globals": TokenSetStatus.SOURCE
85
+ },
86
+ group: "Semantic"
87
+ };
88
+ }
89
+ function generateTypographyGroup(themes) {
90
+ return [
91
+ {
92
+ id: "368d753fcac4455f289500eaa42e70dc0a03522f",
93
+ $figmaCollectionId: "VariableCollectionId:36248:20769",
94
+ $figmaModeId: "36248:2",
95
+ name: "Primary",
96
+ selectedTokenSets: Object.fromEntries(
97
+ themes.map((theme) => [`primitives/modes/typography/primary/${theme}`, TokenSetStatus.ENABLED])
98
+ ),
99
+ group: "Typography"
100
+ },
101
+ {
102
+ id: "264b8bd1d40b364e1ea3acf09e49795ddd4c513c",
103
+ $figmaCollectionId: "VariableCollectionId:36248:20769",
104
+ $figmaModeId: "36248:3",
105
+ name: "Secondary",
106
+ selectedTokenSets: Object.fromEntries(
107
+ themes.map((theme) => [`primitives/modes/typography/secondary/${theme}`, TokenSetStatus.ENABLED])
108
+ ),
109
+ group: "Typography"
110
+ }
111
+ ];
112
+ }
113
+ export {
114
+ generateThemesJson
115
+ };
@@ -0,0 +1,79 @@
1
+ import fs from "node:fs/promises";
2
+ import path from "node:path";
3
+ import chalk from "chalk";
4
+ import * as R from "ramda";
5
+ import { generateMetadataJson } from "./write/generate$metadata.js";
6
+ import { generateThemesJson } from "./write/generate$themes.js";
7
+ const DIRNAME = import.meta.dirname || __dirname;
8
+ const DEFAULT_FILES_PATH = path.join(DIRNAME, "./design-tokens/default");
9
+ const TEMPLATE_FILES_PATH = path.join(DIRNAME, "./design-tokens/template/");
10
+ const stringify = (data) => JSON.stringify(data, null, 2);
11
+ const generateColorModeFile = (folder, name, tokens, outPath) => {
12
+ const path2 = `${outPath}/primitives/modes/colors/${folder}`;
13
+ return {
14
+ data: stringify(tokens),
15
+ path: path2,
16
+ filePath: `${path2}/${name}.json`
17
+ };
18
+ };
19
+ const generateTypographyFile = (folder, name, tokens, outPath) => {
20
+ const path2 = `${outPath}/primitives/modes/typography/${folder}`;
21
+ return {
22
+ data: stringify(tokens),
23
+ path: path2,
24
+ filePath: `${path2}/${name}.json`
25
+ };
26
+ };
27
+ const writeTokens = async (options) => {
28
+ const { writeDir, tokens, themeName } = options;
29
+ const targetDir = path.resolve(process.cwd(), String(writeDir));
30
+ const $themesPath = path.join(targetDir, "$themes.json");
31
+ const $metadataPath = path.join(targetDir, "$metadata.json");
32
+ let themes = [themeName];
33
+ await fs.mkdir(targetDir, { recursive: true });
34
+ try {
35
+ const $themes = await fs.readFile($themesPath, "utf-8");
36
+ const themeObjects = JSON.parse($themes) || [];
37
+ themes = R.pipe(
38
+ R.filter((obj) => R.toLower(obj.group || "") === "theme"),
39
+ R.map(R.prop("name")),
40
+ R.append(themeName),
41
+ R.uniq
42
+ )(themeObjects);
43
+ } catch (error) {
44
+ }
45
+ console.log(`Themes: ${chalk.blue(themes.join(", "))}`);
46
+ const $theme = generateThemesJson(["light", "dark", "contrast"], themes);
47
+ const $metadata = generateMetadataJson(["light", "dark", "contrast"], themes);
48
+ await fs.writeFile($themesPath, stringify($theme));
49
+ await fs.writeFile($metadataPath, stringify($metadata));
50
+ await fs.cp(DEFAULT_FILES_PATH, targetDir, {
51
+ recursive: true
52
+ });
53
+ await fs.mkdir(path.join(targetDir, "themes"), { recursive: true });
54
+ const themeTemplate = await fs.readFile(path.join(TEMPLATE_FILES_PATH, `themes/theme.json`), "utf-8");
55
+ await fs.writeFile(path.join(targetDir, `themes/${themeName}.json`), themeTemplate.replaceAll("<theme>", themeName));
56
+ const files = [
57
+ generateColorModeFile("light", themeName, tokens.colors.light[themeName], targetDir),
58
+ generateColorModeFile("light", "global", tokens.colors.light.global, targetDir),
59
+ generateColorModeFile("dark", themeName, tokens.colors.dark[themeName], targetDir),
60
+ generateColorModeFile("dark", "global", tokens.colors.dark.global, targetDir),
61
+ generateColorModeFile("contrast", themeName, tokens.colors.contrast[themeName], targetDir),
62
+ generateColorModeFile("contrast", "global", tokens.colors.contrast.global, targetDir),
63
+ generateTypographyFile("primary", themeName, tokens.typography.primary, targetDir),
64
+ generateTypographyFile("secondary", themeName, tokens.typography.primary, targetDir)
65
+ ];
66
+ for (const file of files) {
67
+ const dirPath = path.resolve(file.path);
68
+ const filePath = path.resolve(file.filePath);
69
+ await fs.mkdir(dirPath, { recursive: true });
70
+ await fs.writeFile(filePath, file.data, { encoding: "utf-8" });
71
+ }
72
+ console.log(
73
+ `Finished creating Designsystem design tokens in ${chalk.green(writeDir)} for theme ${chalk.blue(themeName)}`
74
+ );
75
+ };
76
+ export {
77
+ stringify,
78
+ writeTokens
79
+ };
@@ -8,4 +8,4 @@ type Options = {
8
8
  };
9
9
  export declare function buildTokens(options: Options): Promise<void>;
10
10
  export {};
11
- //# sourceMappingURL=index.d.ts.map
11
+ //# sourceMappingURL=build.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../../../../src/tokens/build.ts"],"names":[],"mappings":"AAaA,KAAK,OAAO,GAAG;IACb,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,GAAG,EAAE,MAAM,CAAC;IACZ,8BAA8B;IAC9B,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAMF,wBAAsB,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CA4FjE"}
@@ -0,0 +1,8 @@
1
+ import type { Colors, Tokens, Typography } from './types.js';
2
+ export type CreateTokensOptions = {
3
+ colors: Colors;
4
+ typography: Typography;
5
+ themeName: string;
6
+ };
7
+ export declare const createTokens: (opts: CreateTokensOptions) => Tokens;
8
+ //# sourceMappingURL=create.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"create.d.ts","sourceRoot":"","sources":["../../../../src/tokens/create.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,EAAyB,UAAU,EAAE,MAAM,YAAY,CAAC;AAEpF,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,UAAU,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAoFF,eAAO,MAAM,YAAY,SAAU,mBAAmB,WAqBrD,CAAC"}
@@ -0,0 +1,2 @@
1
+ export declare const updateTemplates: () => Promise<void>;
2
+ //# sourceMappingURL=template.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"template.d.ts","sourceRoot":"","sources":["../../../../src/tokens/template.ts"],"names":[],"mappings":"AAsBA,eAAO,MAAM,eAAe,qBA8D3B,CAAC"}
@@ -0,0 +1,37 @@
1
+ import type { CssColor } from '@adobe/leonardo-contrast-colors';
2
+ import type { ThemeColors } from '../colors/types.js';
3
+ export type Token = {
4
+ $value: string;
5
+ $type: string;
6
+ };
7
+ export type Tokens1ary = Record<string, Token>;
8
+ export type Tokens2ary = Record<string, Tokens1ary>;
9
+ export type Tokens3ary = Record<string, Record<string, Tokens1ary>>;
10
+ export type TokensSet = Tokens1ary | Tokens2ary | Tokens3ary;
11
+ export type ColorModeTokens = {
12
+ global: TokensSet;
13
+ [key: string]: TokensSet;
14
+ };
15
+ export type TypographyTokens = TokensSet;
16
+ export type Tokens = {
17
+ colors: {
18
+ light: ColorModeTokens;
19
+ dark: ColorModeTokens;
20
+ contrast: ColorModeTokens;
21
+ };
22
+ typography: {
23
+ primary: TokensSet;
24
+ };
25
+ };
26
+ export type Colors = Record<ThemeColors, CssColor>;
27
+ export type Typography = {
28
+ fontFamily?: string;
29
+ };
30
+ export type TypographyModes = 'primary' | 'secondary';
31
+ export type File = {
32
+ data: string;
33
+ path: string;
34
+ filePath: string;
35
+ };
36
+ export type Collection = string | 'global';
37
+ //# sourceMappingURL=types.d.ts.map