@digdir/designsystemet 1.13.2 → 1.14.0

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 (89) hide show
  1. package/dist/bin/config.js +50 -658
  2. package/dist/bin/designsystemet.d.ts.map +1 -1
  3. package/dist/bin/designsystemet.js +136 -4623
  4. package/dist/bin/options.js +22 -14
  5. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BorderValues.js +9 -0
  6. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowTypes.js +8 -0
  7. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowValues.js +13 -0
  8. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorModifierTypes.js +10 -0
  9. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorSpaceTypes.js +10 -0
  10. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/Properties.js +53 -0
  11. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/StrokeStyleValues.js +14 -0
  12. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js +9 -0
  13. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenTypes.js +32 -0
  14. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TypographyValues.js +15 -0
  15. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/types/index.js +11 -0
  16. package/dist/package.js +5 -0
  17. package/dist/src/colors/colorMetadata.js +255 -261
  18. package/dist/src/colors/index.js +5 -522
  19. package/dist/src/colors/theme.js +104 -343
  20. package/dist/src/colors/types.js +22 -25
  21. package/dist/src/colors/utils.js +241 -154
  22. package/dist/src/config.js +103 -444
  23. package/dist/src/index.js +10 -3588
  24. package/dist/src/migrations/beta-to-v1.js +339 -537
  25. package/dist/src/migrations/codemods/css/plugins.js +31 -42
  26. package/dist/src/migrations/codemods/css/run.js +20 -151
  27. package/dist/src/migrations/color-rename-next49.js +44 -220
  28. package/dist/src/migrations/index.js +7 -577
  29. package/dist/src/scripts/update-preview-tokens.d.ts.map +1 -1
  30. package/dist/src/tokens/build.js +39 -1816
  31. package/dist/src/tokens/create/files.d.ts +10 -5
  32. package/dist/src/tokens/create/files.d.ts.map +1 -1
  33. package/dist/src/tokens/create/files.js +44 -601
  34. package/dist/src/tokens/create/generators/$designsystemet.js +8 -97
  35. package/dist/src/tokens/create/generators/$metadata.d.ts +7 -3
  36. package/dist/src/tokens/create/generators/$metadata.d.ts.map +1 -1
  37. package/dist/src/tokens/create/generators/$metadata.js +24 -21
  38. package/dist/src/tokens/create/generators/$themes.d.ts +2 -4
  39. package/dist/src/tokens/create/generators/$themes.d.ts.map +1 -1
  40. package/dist/src/tokens/create/generators/$themes.js +139 -312
  41. package/dist/src/tokens/create/generators/primitives/color-scheme.js +68 -443
  42. package/dist/src/tokens/create/generators/primitives/globals.js +141 -147
  43. package/dist/src/tokens/create/generators/primitives/size.js +146 -156
  44. package/dist/src/tokens/create/generators/primitives/typography.js +213 -217
  45. package/dist/src/tokens/create/generators/semantic/color-modes.js +24 -59
  46. package/dist/src/tokens/create/generators/semantic/color.js +42 -326
  47. package/dist/src/tokens/create/generators/semantic/style.js +379 -382
  48. package/dist/src/tokens/create/generators/themes/theme.js +108 -392
  49. package/dist/src/tokens/create.d.ts +2 -1
  50. package/dist/src/tokens/create.d.ts.map +1 -1
  51. package/dist/src/tokens/create.js +50 -1591
  52. package/dist/src/tokens/format.d.ts.map +1 -1
  53. package/dist/src/tokens/format.js +35 -3324
  54. package/dist/src/tokens/generate-config.js +155 -298
  55. package/dist/src/tokens/index.js +3 -3344
  56. package/dist/src/tokens/process/configs/color.js +50 -1085
  57. package/dist/src/tokens/process/configs/semantic.js +45 -1083
  58. package/dist/src/tokens/process/configs/shared.js +18 -109
  59. package/dist/src/tokens/process/configs/size-mode.js +27 -1082
  60. package/dist/src/tokens/process/configs/size.js +32 -1083
  61. package/dist/src/tokens/process/configs/type-scale.js +49 -1083
  62. package/dist/src/tokens/process/configs/typography.js +63 -1084
  63. package/dist/src/tokens/process/configs.js +91 -1224
  64. package/dist/src/tokens/process/formats/css/color.js +58 -1079
  65. package/dist/src/tokens/process/formats/css/semantic.js +27 -1081
  66. package/dist/src/tokens/process/formats/css/size-mode.js +43 -1077
  67. package/dist/src/tokens/process/formats/css/size.js +86 -1079
  68. package/dist/src/tokens/process/formats/css/type-scale.js +53 -1083
  69. package/dist/src/tokens/process/formats/css/typography.js +27 -1081
  70. package/dist/src/tokens/process/formats/css.js +18 -1081
  71. package/dist/src/tokens/process/output/declarations.js +18 -1201
  72. package/dist/src/tokens/process/output/tailwind.js +26 -40
  73. package/dist/src/tokens/process/output/theme.js +73 -206
  74. package/dist/src/tokens/process/platform.js +165 -1355
  75. package/dist/src/tokens/process/transformers.js +49 -89
  76. package/dist/src/tokens/process/utils/getMultidimensionalThemes.js +100 -1183
  77. package/dist/src/tokens/process/utils/kebab-case.js +7 -5
  78. package/dist/src/tokens/types.d.ts +6 -0
  79. package/dist/src/tokens/types.d.ts.map +1 -1
  80. package/dist/src/tokens/types.js +6 -7
  81. package/dist/src/tokens/utils.d.ts +2 -1
  82. package/dist/src/tokens/utils.d.ts.map +1 -1
  83. package/dist/src/tokens/utils.js +107 -93
  84. package/dist/src/types.js +1 -5
  85. package/dist/src/utils/filesystem.js +112 -124
  86. package/package.json +12 -15
  87. package/configs/test-tokens.config.json +0 -82
  88. package/dist/src/scripts/createJsonSchema.js +0 -409
  89. package/dist/src/scripts/update-preview-tokens.js +0 -3353
@@ -1,11 +1,16 @@
1
- import type { OutputFile, Theme, TokenSets } from '../types.js';
1
+ import type { ColorNamesByCategory, OutputFile, TokenSetDimensions, TokenSets } from '../types.js';
2
2
  export declare const stringify: (data: unknown) => string;
3
3
  type CreateTokenFilesOptions = {
4
- outDir: string;
5
- theme: Theme;
6
- tokenSets: TokenSets;
4
+ tokenSetDimensions: TokenSetDimensions;
5
+ colors: ColorNamesByCategory;
7
6
  themeNames: string[];
8
7
  };
9
- export declare const createTokenFiles: (options: CreateTokenFilesOptions) => Promise<OutputFile[]>;
8
+ /**
9
+ * Creates system token files (`$themes.json`, `$metadata.json`, `$designsystemet.jsonc`) based on the provided token set dimensions and theme names.
10
+ *
11
+ * `$themes.json` and `$metadata.json` are essential for Token Studio and Style Dictionary to correctly interpret and manage the design tokens.
12
+ */
13
+ export declare const createSystemTokenFiles: (options: CreateTokenFilesOptions) => Promise<OutputFile[]>;
14
+ export declare const tokenSetsToFiles: (tokenSets: TokenSets) => OutputFile[];
10
15
  export {};
11
16
  //# sourceMappingURL=files.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"files.d.ts","sourceRoot":"","sources":["../../../../src/tokens/create/files.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAa,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAK3E,eAAO,MAAM,SAAS,GAAI,MAAM,OAAO,WAAkC,CAAC;AAE1E,KAAK,uBAAuB,GAAG;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;IACb,SAAS,EAAE,SAAS,CAAC;IACrB,UAAU,EAAE,MAAM,EAAE,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAU,SAAS,uBAAuB,0BAiCtE,CAAC"}
1
+ {"version":3,"file":"files.d.ts","sourceRoot":"","sources":["../../../../src/tokens/create/files.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,UAAU,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAKnG,eAAO,MAAM,SAAS,GAAI,MAAM,OAAO,WAAkC,CAAC;AAE1E,KAAK,uBAAuB,GAAG;IAC7B,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,MAAM,EAAE,oBAAoB,CAAC;IAC7B,UAAU,EAAE,MAAM,EAAE,CAAC;CACtB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,GAAU,SAAS,uBAAuB,0BAiB5E,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,WAAW,SAAS,KAAG,UAAU,EAQjE,CAAC"}
@@ -1,603 +1,46 @@
1
- // src/utils/filesystem.ts
2
- import fs from "fs/promises";
3
- import path from "path";
4
- import pc from "picocolors";
5
- var FileSystem = class {
6
- isInitialized = false;
7
- dry = false;
8
- verbose = false;
9
- /** Default working directory is where the process was started */
10
- workingDir = process.cwd();
11
- outDir = this.workingDir;
12
- /** Initialize the file system */
13
- init({ dry, outdir, verbose }) {
14
- if (this.isInitialized) {
15
- console.warn(pc.yellow("FileSystem is already initialized. Ignoring subsequent init call."));
16
- return;
17
- }
18
- if (dry) {
19
- console.log(pc.blue("Initializing FileSystem in dry-run mode. No files will be written."));
20
- }
21
- this.dry = dry ?? false;
22
- this.verbose = verbose ?? false;
23
- this.outDir = outdir ? path.isAbsolute(outdir) ? outdir : path.join(this.workingDir, outdir) : this.workingDir;
24
- if (this.verbose) {
25
- console.log(
26
- `FileSystem initialized with workingDir: ${pc.green(this.workingDir)}, outDir: ${pc.green(this.outDir)}`
27
- );
28
- }
29
- this.isInitialized = true;
30
- }
31
- /**
32
- * Creates a directory if it does not already exist.
33
- *
34
- * @param dir - The path of the directory to create.
35
- *
36
- * @returns A promise that resolves when the operation is complete.
37
- * If the directory already exists or `dry` is `true`, the promise resolves immediately.
38
- */
39
- mkdir = async (dir) => {
40
- if (this.dry) {
41
- console.log(`${pc.blue("mkdir")} ${dir}`);
42
- return Promise.resolve();
43
- }
44
- const exists = await fs.access(dir, fs.constants.F_OK).then(() => true).catch(() => false);
45
- if (exists) {
46
- return Promise.resolve();
47
- }
48
- return fs.mkdir(dir, { recursive: true });
49
- };
50
- writeFile = async (path2, data) => {
51
- if (this.dry) {
52
- console.log(`${pc.blue("writeFile")} ${path2}`);
53
- return Promise.resolve();
54
- }
55
- return fs.writeFile(path2, data, { encoding: "utf-8" }).catch((error) => {
56
- console.error(pc.red(`Error writing file: ${path2}`));
57
- console.error(pc.red(error));
58
- throw error;
59
- });
60
- };
61
- cp = async (src, dest, filter) => {
62
- if (this.dry) {
63
- console.log(`${pc.blue("cp")} ${src} ${dest}`);
64
- return Promise.resolve();
65
- }
66
- return fs.cp(src, dest, { recursive: true, filter });
67
- };
68
- copyFile = async (src, dest) => {
69
- if (this.dry) {
70
- console.log(`${pc.blue("copyFile")} ${src} to ${dest}`);
71
- return Promise.resolve();
72
- }
73
- return fs.copyFile(src, dest);
74
- };
75
- cleanDir = async (dir) => {
76
- if (this.dry) {
77
- console.log(`${pc.blue("cleanDir")} ${dir}`);
78
- return Promise.resolve();
79
- }
80
- console.log(`
81
- \u{1F525} Cleaning dir ${pc.red(`${dir.trim()}`)} `);
82
- return fs.rm(dir, { recursive: true, force: true });
83
- };
84
- readFile = async (path2, allowFileNotFound) => {
85
- if (this.dry) {
86
- console.log(`${pc.blue("readFile")} ${path2}`);
87
- }
88
- try {
89
- return await fs.readFile(path2, "utf-8");
90
- } catch (error) {
91
- if (allowFileNotFound && error.code === "ENOENT") {
92
- return "";
93
- }
94
- throw error;
95
- }
96
- };
97
- readdir = async (path2) => {
98
- if (this.dry) {
99
- console.log(`${pc.blue("readdir")} ${path2}`);
100
- }
101
- try {
102
- return await fs.readdir(path2);
103
- } catch (error) {
104
- if (error.code === "ENOENT") {
105
- return [];
106
- }
107
- throw error;
108
- }
109
- };
110
- writeFiles = async (files, outDir, log) => {
111
- for (const { destination: filename, output } of files) {
112
- if (filename) {
113
- const filePath = path.join(outDir, filename);
114
- const fileDir = path.dirname(filePath);
115
- if (log) {
116
- console.log(filename);
117
- }
118
- await this.mkdir(fileDir);
119
- await this.writeFile(filePath, output);
120
- }
121
- }
122
- };
1
+ import { generate$Designsystemet } from "./generators/$designsystemet.js";
2
+ import { generate$Metadata } from "./generators/$metadata.js";
3
+ import { generate$Themes } from "./generators/$themes.js";
4
+ //#region src/tokens/create/files.ts
5
+ const stringify = (data) => JSON.stringify(data, null, 2);
6
+ /**
7
+ * Creates system token files (`$themes.json`, `$metadata.json`, `$designsystemet.jsonc`) based on the provided token set dimensions and theme names.
8
+ *
9
+ * `$themes.json` and `$metadata.json` are essential for Token Studio and Style Dictionary to correctly interpret and manage the design tokens.
10
+ */
11
+ const createSystemTokenFiles = async (options) => {
12
+ const { colors, themeNames, tokenSetDimensions } = options;
13
+ const files = [];
14
+ const $themesPath = "$themes.json";
15
+ const $metadataPath = "$metadata.json";
16
+ const $designsystemetPath = "$designsystemet.jsonc";
17
+ const $themes = await generate$Themes(tokenSetDimensions, themeNames, colors);
18
+ const $metadata = generate$Metadata(tokenSetDimensions, themeNames, colors);
19
+ const $designsystemet = generate$Designsystemet();
20
+ files.push({
21
+ destination: $themesPath,
22
+ output: stringify($themes)
23
+ });
24
+ files.push({
25
+ destination: $metadataPath,
26
+ output: stringify($metadata)
27
+ });
28
+ files.push({
29
+ destination: $designsystemetPath,
30
+ output: stringify($designsystemet)
31
+ });
32
+ return files;
123
33
  };
124
- var dsfs = new FileSystem();
125
-
126
- // package.json
127
- var package_default = {
128
- name: "@digdir/designsystemet",
129
- version: "1.13.2",
130
- description: "CLI for Designsystemet",
131
- author: "Designsystemet team",
132
- engines: {
133
- node: ">=20.20.2"
134
- },
135
- repository: {
136
- type: "git",
137
- url: "git+https://github.com/digdir/designsystemet.git"
138
- },
139
- homepage: "https://github.com/digdir/designsystemet/tree/main/packages/cli",
140
- license: "MIT",
141
- type: "module",
142
- main: "./dist/src/index.js",
143
- files: [
144
- "./dist/**",
145
- "./configs/**"
146
- ],
147
- bin: "dist/bin/designsystemet.js",
148
- exports: {
149
- ".": {
150
- import: "./dist/src/index.js"
151
- },
152
- "./color": {
153
- import: "./dist/src/colors/index.js"
154
- },
155
- "./tokens": {
156
- import: "./dist/src/tokens/index.js"
157
- },
158
- "./types": {
159
- import: "./dist/src/types.js"
160
- }
161
- },
162
- publishConfig: {
163
- access: "public"
164
- },
165
- scripts: {
166
- designsystemet: "tsx ./bin/designsystemet.ts",
167
- "designsystemet:inspect": "tsx --inspect-brk ./bin/designsystemet.ts",
168
- build: "tsup && pnpm build:types && pnpm build:json-schema",
169
- "build:types": "tsc --emitDeclarationOnly --declaration",
170
- "build:json-schema": "tsx ./src/scripts/createJsonSchema.ts",
171
- types: "tsc --noEmit",
172
- "test:tokens-create-options": 'pnpm run designsystemet tokens create -m dominant:"#007682" -n "#003333" -b 99 -o ./temp/options/design-tokens --theme options --clean',
173
- "test:tokens-create-config": "pnpm run designsystemet tokens create --config ./configs/test-tokens.config.json",
174
- "test:tokens-build": "pnpm run designsystemet tokens build -t ./temp/options/design-tokens -o ./temp/options/build --clean",
175
- "test:tokens-build-tailwind": "pnpm run designsystemet tokens build -t ./temp/options/design-tokens -o ./temp/options/build --clean --experimental-tailwind",
176
- "test:tokens-build-config": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean",
177
- "test:tokens-build-config:inspect": "pnpm run designsystemet:inspect tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean",
178
- "test:tokens-build-config-tailwind": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean --experimental-tailwind",
179
- "test:tokens-create-and-build-options": "pnpm test:tokens-create-options && pnpm test:tokens-build",
180
- "test:tokens-create-and-build-config": "pnpm test:tokens-create-config && pnpm test:tokens-build-config",
181
- "test:generate-config-from-tokens": "pnpm run designsystemet generate-config-from-tokens -d ../../design-tokens --dry",
182
- test: "node -v && pnpm test:tokens-create-and-build-options && pnpm test:generate-config-from-tokens && pnpm test:tokens-create-and-build-config",
183
- "update:preview-tokens": "tsx ./src/scripts/update-preview-tokens.ts",
184
- verify: "pnpm test && pnpm update:template && pnpm --filter @internal/digdir update:theme-digdir"
185
- },
186
- dependencies: {
187
- "@commander-js/extra-typings": "^14.0.0",
188
- "@digdir/designsystemet-types": "workspace:",
189
- "@tokens-studio/sd-transforms": "2.0.3",
190
- "chroma-js": "^3.2.0",
191
- "colorjs.io": "^0.6.1",
192
- commander: "^14.0.3",
193
- "fast-glob": "^3.3.3",
194
- hsluv: "^1.0.1",
195
- "object-hash": "^3.0.0",
196
- picocolors: "^1.1.1",
197
- postcss: "^8.5.8",
198
- ramda: "^0.32.0",
199
- "style-dictionary": "^5.4.0",
200
- zod: "^4.3.6",
201
- "zod-validation-error": "^5.0.0"
202
- },
203
- devDependencies: {
204
- "@tokens-studio/types": "0.5.2",
205
- "@types/chroma-js": "3.1.2",
206
- "@types/node": "24.12.2",
207
- "@types/object-hash": "3.0.6",
208
- "@types/ramda": "0.31.1",
209
- tsup: "8.5.1",
210
- tsx: "4.21.0",
211
- typescript: "5.9.3"
212
- }
213
- };
214
-
215
- // src/tokens/create/generators/$designsystemet.ts
216
- function generate$Designsystemet() {
217
- return {
218
- name: package_default.name,
219
- version: package_default.version
220
- };
221
- }
222
-
223
- // src/tokens/create/generators/$metadata.ts
224
- function generate$Metadata(schemes, themes, colors, sizeModes) {
225
- return {
226
- tokenSetOrder: [
227
- "primitives/globals",
228
- ...sizeModes.map((size) => `primitives/modes/size/${size}`),
229
- "primitives/modes/size/global",
230
- ...sizeModes.map((size) => `primitives/modes/typography/size/${size}`),
231
- ...themes.map((theme) => `primitives/modes/typography/primary/${theme}`),
232
- ...themes.map((theme) => `primitives/modes/typography/secondary/${theme}`),
233
- ...schemes.flatMap((scheme) => [...themes.map((theme) => `primitives/modes/color-scheme/${scheme}/${theme}`)]),
234
- ...themes.map((theme) => `themes/${theme}`),
235
- "semantic/color",
236
- ...Object.entries(colors.main).map(([color]) => `semantic/modes/main-color/${color}`),
237
- ...Object.entries(colors.support).map(([color]) => `semantic/modes/support-color/${color}`),
238
- "semantic/style"
239
- ]
240
- };
241
- }
242
-
243
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowTypes.js
244
- var BoxShadowTypes;
245
- (function(BoxShadowTypes2) {
246
- BoxShadowTypes2["DROP_SHADOW"] = "dropShadow";
247
- BoxShadowTypes2["INNER_SHADOW"] = "innerShadow";
248
- })(BoxShadowTypes || (BoxShadowTypes = {}));
249
-
250
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorModifierTypes.js
251
- var ColorModifierTypes;
252
- (function(ColorModifierTypes2) {
253
- ColorModifierTypes2["LIGHTEN"] = "lighten";
254
- ColorModifierTypes2["DARKEN"] = "darken";
255
- ColorModifierTypes2["MIX"] = "mix";
256
- ColorModifierTypes2["ALPHA"] = "alpha";
257
- })(ColorModifierTypes || (ColorModifierTypes = {}));
258
-
259
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorSpaceTypes.js
260
- var ColorSpaceTypes;
261
- (function(ColorSpaceTypes2) {
262
- ColorSpaceTypes2["LCH"] = "lch";
263
- ColorSpaceTypes2["SRGB"] = "srgb";
264
- ColorSpaceTypes2["P3"] = "p3";
265
- ColorSpaceTypes2["HSL"] = "hsl";
266
- })(ColorSpaceTypes || (ColorSpaceTypes = {}));
267
-
268
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/Properties.js
269
- var Properties;
270
- (function(Properties2) {
271
- Properties2["sizing"] = "sizing";
272
- Properties2["height"] = "height";
273
- Properties2["width"] = "width";
274
- Properties2["spacing"] = "spacing";
275
- Properties2["verticalPadding"] = "verticalPadding";
276
- Properties2["horizontalPadding"] = "horizontalPadding";
277
- Properties2["paddingTop"] = "paddingTop";
278
- Properties2["paddingRight"] = "paddingRight";
279
- Properties2["paddingBottom"] = "paddingBottom";
280
- Properties2["paddingLeft"] = "paddingLeft";
281
- Properties2["itemSpacing"] = "itemSpacing";
282
- Properties2["fill"] = "fill";
283
- Properties2["backgroundBlur"] = "backgroundBlur";
284
- Properties2["border"] = "border";
285
- Properties2["borderTop"] = "borderTop";
286
- Properties2["borderRight"] = "borderRight";
287
- Properties2["borderBottom"] = "borderBottom";
288
- Properties2["borderLeft"] = "borderLeft";
289
- Properties2["borderColor"] = "borderColor";
290
- Properties2["borderRadius"] = "borderRadius";
291
- Properties2["borderRadiusTopLeft"] = "borderRadiusTopLeft";
292
- Properties2["borderRadiusTopRight"] = "borderRadiusTopRight";
293
- Properties2["borderRadiusBottomRight"] = "borderRadiusBottomRight";
294
- Properties2["borderRadiusBottomLeft"] = "borderRadiusBottomLeft";
295
- Properties2["borderWidth"] = "borderWidth";
296
- Properties2["borderWidthTop"] = "borderWidthTop";
297
- Properties2["borderWidthRight"] = "borderWidthRight";
298
- Properties2["borderWidthBottom"] = "borderWidthBottom";
299
- Properties2["borderWidthLeft"] = "borderWidthLeft";
300
- Properties2["boxShadow"] = "boxShadow";
301
- Properties2["opacity"] = "opacity";
302
- Properties2["fontFamilies"] = "fontFamilies";
303
- Properties2["fontWeights"] = "fontWeights";
304
- Properties2["fontSizes"] = "fontSizes";
305
- Properties2["lineHeights"] = "lineHeights";
306
- Properties2["typography"] = "typography";
307
- Properties2["composition"] = "composition";
308
- Properties2["letterSpacing"] = "letterSpacing";
309
- Properties2["paragraphSpacing"] = "paragraphSpacing";
310
- Properties2["textCase"] = "textCase";
311
- Properties2["dimension"] = "dimension";
312
- Properties2["textDecoration"] = "textDecoration";
313
- Properties2["asset"] = "asset";
314
- Properties2["tokenValue"] = "tokenValue";
315
- Properties2["value"] = "value";
316
- Properties2["tokenName"] = "tokenName";
317
- Properties2["description"] = "description";
318
- })(Properties || (Properties = {}));
319
-
320
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js
321
- var TokenSetStatus;
322
- (function(TokenSetStatus2) {
323
- TokenSetStatus2["DISABLED"] = "disabled";
324
- TokenSetStatus2["SOURCE"] = "source";
325
- TokenSetStatus2["ENABLED"] = "enabled";
326
- })(TokenSetStatus || (TokenSetStatus = {}));
327
-
328
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenTypes.js
329
- var TokenTypes;
330
- (function(TokenTypes2) {
331
- TokenTypes2["OTHER"] = "other";
332
- TokenTypes2["COLOR"] = "color";
333
- TokenTypes2["BORDER_RADIUS"] = "borderRadius";
334
- TokenTypes2["SIZING"] = "sizing";
335
- TokenTypes2["SPACING"] = "spacing";
336
- TokenTypes2["TEXT"] = "text";
337
- TokenTypes2["TYPOGRAPHY"] = "typography";
338
- TokenTypes2["OPACITY"] = "opacity";
339
- TokenTypes2["BORDER_WIDTH"] = "borderWidth";
340
- TokenTypes2["STROKE_STYLE"] = "strokeStyle";
341
- TokenTypes2["BOX_SHADOW"] = "boxShadow";
342
- TokenTypes2["FONT_FAMILIES"] = "fontFamilies";
343
- TokenTypes2["FONT_WEIGHTS"] = "fontWeights";
344
- TokenTypes2["LINE_HEIGHTS"] = "lineHeights";
345
- TokenTypes2["FONT_SIZES"] = "fontSizes";
346
- TokenTypes2["LETTER_SPACING"] = "letterSpacing";
347
- TokenTypes2["PARAGRAPH_SPACING"] = "paragraphSpacing";
348
- TokenTypes2["PARAGRAPH_INDENT"] = "paragraphIndent";
349
- TokenTypes2["TEXT_DECORATION"] = "textDecoration";
350
- TokenTypes2["TEXT_CASE"] = "textCase";
351
- TokenTypes2["COMPOSITION"] = "composition";
352
- TokenTypes2["DIMENSION"] = "dimension";
353
- TokenTypes2["BORDER"] = "border";
354
- TokenTypes2["ASSET"] = "asset";
355
- TokenTypes2["BOOLEAN"] = "boolean";
356
- TokenTypes2["NUMBER"] = "number";
357
- })(TokenTypes || (TokenTypes = {}));
358
-
359
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BorderValues.js
360
- var BorderValues;
361
- (function(BorderValues2) {
362
- BorderValues2["BORDER_COLOR"] = "color";
363
- BorderValues2["BORDER_WIDTH"] = "width";
364
- BorderValues2["BORDER_STYLE"] = "style";
365
- })(BorderValues || (BorderValues = {}));
366
-
367
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/StrokeStyleValues.js
368
- var StrokeStyleValues;
369
- (function(StrokeStyleValues2) {
370
- StrokeStyleValues2["SOLID"] = "solid";
371
- StrokeStyleValues2["DASHED"] = "dashed";
372
- StrokeStyleValues2["DOTTED"] = "dotted";
373
- StrokeStyleValues2["DOUBLE"] = "double";
374
- StrokeStyleValues2["GROOVE"] = "groove";
375
- StrokeStyleValues2["RIDGE"] = "ridge";
376
- StrokeStyleValues2["OUTSET"] = "outset";
377
- StrokeStyleValues2["INSET"] = "inset";
378
- })(StrokeStyleValues || (StrokeStyleValues = {}));
379
-
380
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowValues.js
381
- var BoxShadowValues;
382
- (function(BoxShadowValues2) {
383
- BoxShadowValues2["TYPE"] = "type";
384
- BoxShadowValues2["COLOR"] = "color";
385
- BoxShadowValues2["X"] = "x";
386
- BoxShadowValues2["Y"] = "y";
387
- BoxShadowValues2["BLUR"] = "blur";
388
- BoxShadowValues2["SPREAD"] = "spread";
389
- BoxShadowValues2["BLEND_MODE"] = "blendMode";
390
- })(BoxShadowValues || (BoxShadowValues = {}));
391
-
392
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TypographyValues.js
393
- var TypographyValues;
394
- (function(TypographyValues2) {
395
- TypographyValues2["FONT_FAMILY"] = "fontFamily";
396
- TypographyValues2["FONT_WEIGHT"] = "fontWeight";
397
- TypographyValues2["LINE_HEIGHT"] = "lineHeight";
398
- TypographyValues2["FONT_SIZE"] = "fontSize";
399
- TypographyValues2["LETTER_SPACING"] = "letterSpacing";
400
- TypographyValues2["PARAGRAPH_SPACING"] = "paragraphSpacing";
401
- TypographyValues2["PARAGRAPH_INDENT"] = "paragraphIndent";
402
- TypographyValues2["TEXT_DECORATION"] = "textDecoration";
403
- TypographyValues2["TEXT_CASE"] = "textCase";
404
- })(TypographyValues || (TypographyValues = {}));
405
-
406
- // src/tokens/create/generators/$themes.ts
407
- var capitalize = (word) => word.charAt(0).toUpperCase() + word.slice(1);
408
- async function createHash(text, algo = "SHA-1") {
409
- const crypto = globalThis.crypto;
410
- return Array.from(
411
- new Uint8Array(await crypto.subtle.digest(algo, new TextEncoder().encode(text))),
412
- (byte) => byte.toString(16).padStart(2, "0")
413
- ).join("");
414
- }
415
- async function generate$Themes(colorSchemes, themes, colors, sizeModes) {
416
- return [
417
- ...generateSizeGroup(sizeModes),
418
- ...await generateThemesGroup(themes),
419
- ...generateTypographyGroup(themes),
420
- ...generateColorSchemesGroup(colorSchemes, themes),
421
- generateSemanticGroup(),
422
- ...await generateColorGroup("main", colors),
423
- ...await generateColorGroup("support", colors)
424
- ];
425
- }
426
- function generateSizeGroup(_sizes) {
427
- return [
428
- {
429
- id: "8b2c8cc86611a34b135cb22948666779361fd729",
430
- name: "medium",
431
- $figmaStyleReferences: {},
432
- selectedTokenSets: {
433
- "primitives/modes/size/medium": TokenSetStatus.SOURCE,
434
- "primitives/modes/size/global": TokenSetStatus.ENABLED,
435
- "primitives/modes/typography/size/medium": TokenSetStatus.ENABLED
436
- },
437
- $figmaCollectionId: "VariableCollectionId:36248:20757",
438
- $figmaModeId: "41630:1",
439
- group: "Size"
440
- },
441
- {
442
- id: "d49b9eebeb48a4f165a74b7261733d0a73370f0e",
443
- name: "large",
444
- $figmaStyleReferences: {},
445
- selectedTokenSets: {
446
- "primitives/modes/size/large": TokenSetStatus.SOURCE,
447
- "primitives/modes/size/global": TokenSetStatus.ENABLED,
448
- "primitives/modes/typography/size/large": TokenSetStatus.ENABLED
449
- },
450
- $figmaCollectionId: "VariableCollectionId:36248:20757",
451
- $figmaModeId: "41630:2",
452
- group: "Size"
453
- },
454
- {
455
- id: "fb11567729c298ca37c9da4e3a27716a23480824",
456
- name: "small",
457
- $figmaStyleReferences: {},
458
- selectedTokenSets: {
459
- "primitives/modes/size/small": TokenSetStatus.SOURCE,
460
- "primitives/modes/size/global": TokenSetStatus.ENABLED,
461
- "primitives/modes/typography/size/small": TokenSetStatus.ENABLED
462
- },
463
- $figmaCollectionId: "VariableCollectionId:36248:20757",
464
- $figmaModeId: "41630:3",
465
- group: "Size"
466
- }
467
- ];
468
- }
469
- var colorSchemeDefaults = {
470
- light: {
471
- name: "Light",
472
- selectedTokenSets: {},
473
- id: "0daa3ca0b427b9349da7e7dc00101b5668972926",
474
- $figmaCollectionId: "VariableCollectionId:34811:5472",
475
- $figmaModeId: "34811:0"
476
- },
477
- dark: {
478
- name: "Dark",
479
- selectedTokenSets: {},
480
- id: "9ebd8aed52afbffc17e2666e8b4653a53498b257",
481
- $figmaCollectionId: "VariableCollectionId:34811:5472",
482
- $figmaModeId: "34811:1"
483
- },
484
- contrast: {
485
- name: "Contrast",
486
- selectedTokenSets: {},
487
- id: "9ebd8aed52afbffc17e2666e8b4653a53498b123",
488
- $figmaCollectionId: "VariableCollectionId:34811:5472",
489
- $figmaModeId: "34811:2"
490
- }
491
- };
492
- function generateColorSchemesGroup(colorSchemes, themes) {
493
- return colorSchemes.map(
494
- (scheme) => ({
495
- ...colorSchemeDefaults[scheme],
496
- selectedTokenSets: Object.fromEntries([
497
- ...themes.map((theme) => [`primitives/modes/color-scheme/${scheme}/${theme}`, TokenSetStatus.ENABLED])
498
- ]),
499
- group: "Color scheme"
500
- })
501
- );
502
- }
503
- async function generateThemesGroup(themes) {
504
- return Promise.all(
505
- themes.map(
506
- async (theme, index) => ({
507
- id: await createHash(theme),
508
- $figmaCollectionId: "VariableCollectionId:36528:61712",
509
- $figmaModeId: `40960:${index + 6}`,
510
- // Start on 6 in Token Studio and Community file for some reason
511
- name: theme,
512
- selectedTokenSets: {
513
- [`themes/${theme}`]: TokenSetStatus.ENABLED
514
- },
515
- group: "Theme"
516
- })
517
- )
518
- );
519
- }
520
- function generateSemanticGroup() {
521
- return {
522
- id: "541629445ef90ad5363f9e88f52a1ccb617e6f84",
523
- name: "Semantic",
524
- selectedTokenSets: {
525
- "semantic/style": TokenSetStatus.ENABLED,
526
- "semantic/color": TokenSetStatus.ENABLED,
527
- "primitives/globals": TokenSetStatus.SOURCE
528
- },
529
- $figmaCollectionId: "VariableCollectionId:34811:5976",
530
- $figmaModeId: "34811:5",
531
- group: "Semantic"
532
- };
533
- }
534
- async function generateColorGroup(group, colors) {
535
- return Promise.all(
536
- Object.entries(colors[group]).map(
537
- async ([color]) => ({
538
- id: await createHash(`${group}-${color}`),
539
- name: color,
540
- selectedTokenSets: {
541
- [`semantic/modes/${group}-color/${color}`]: TokenSetStatus.ENABLED
542
- },
543
- group: `${capitalize(group)} color`
544
- })
545
- )
546
- );
547
- }
548
- function generateTypographyGroup(themes) {
549
- return [
550
- {
551
- id: "368d753fcac4455f289500eaa42e70dc0a03522f",
552
- $figmaCollectionId: "VariableCollectionId:36248:20769",
553
- $figmaModeId: "36248:2",
554
- name: "Primary",
555
- selectedTokenSets: Object.fromEntries(
556
- themes.map((theme) => [`primitives/modes/typography/primary/${theme}`, TokenSetStatus.ENABLED])
557
- ),
558
- group: "Typography"
559
- },
560
- {
561
- id: "264b8bd1d40b364e1ea3acf09e49795ddd4c513c",
562
- $figmaCollectionId: "VariableCollectionId:36248:20769",
563
- $figmaModeId: "36248:3",
564
- name: "Secondary",
565
- selectedTokenSets: Object.fromEntries(
566
- themes.map((theme) => [`primitives/modes/typography/secondary/${theme}`, TokenSetStatus.ENABLED])
567
- ),
568
- group: "Typography"
569
- }
570
- ];
571
- }
572
-
573
- // src/tokens/create/files.ts
574
- var stringify = (data) => JSON.stringify(data, null, 2);
575
- var createTokenFiles = async (options) => {
576
- const {
577
- outDir,
578
- tokenSets,
579
- theme: { colors },
580
- themeNames
581
- } = options;
582
- const $themesPath = "$themes.json";
583
- const $metadataPath = "$metadata.json";
584
- const $designsystemetPath = "$designsystemet.jsonc";
585
- const sizeModes = ["small", "medium", "large"];
586
- await dsfs.mkdir(outDir);
587
- const $themes = await generate$Themes(["dark", "light"], themeNames, colors, sizeModes);
588
- const $metadata = generate$Metadata(["dark", "light"], themeNames, colors, sizeModes);
589
- const $designsystemet = generate$Designsystemet();
590
- const files = [];
591
- files.push({ destination: $themesPath, output: stringify($themes) });
592
- files.push({ destination: $metadataPath, output: stringify($metadata) });
593
- files.push({ destination: $designsystemetPath, output: stringify($designsystemet) });
594
- for (const [set, tokens] of tokenSets) {
595
- const filePath = `${set}.json`;
596
- files.push({ destination: filePath, output: stringify(tokens) });
597
- }
598
- return files;
599
- };
600
- export {
601
- createTokenFiles,
602
- stringify
34
+ const tokenSetsToFiles = (tokenSets) => {
35
+ const files = [];
36
+ for (const [set, tokens] of tokenSets) {
37
+ const filePath = `${set}.json`;
38
+ files.push({
39
+ destination: filePath,
40
+ output: stringify(tokens)
41
+ });
42
+ }
43
+ return files;
603
44
  };
45
+ //#endregion
46
+ export { createSystemTokenFiles, stringify, tokenSetsToFiles };