@digdir/designsystemet 1.1.9 → 1.2.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.
- package/dist/bin/config.js +14 -14
- package/dist/bin/designsystemet.js +61 -63
- package/dist/src/config.d.ts +1 -1
- package/dist/src/config.d.ts.map +1 -1
- package/dist/src/config.js +8 -8
- package/dist/src/index.js +22 -22
- package/dist/src/migrations/beta-to-v1.js +5 -5
- package/dist/src/migrations/codemods/css/plugins.js +3 -3
- package/dist/src/migrations/codemods/css/run.js +2 -2
- package/dist/src/migrations/color-rename-next49.js +5 -5
- package/dist/src/migrations/index.js +5 -5
- package/dist/src/scripts/createJsonSchema.js +4 -4
- package/dist/src/scripts/update-design-tokens.js +2 -2
- package/dist/src/scripts/update-preview-tokens.js +22 -22
- package/dist/src/scripts/update-template.js +11 -11
- package/dist/src/tokens/build.js +33 -33
- package/dist/src/tokens/create/generators/$designsystemet.js +9 -9
- package/dist/src/tokens/create/write.d.ts.map +1 -1
- package/dist/src/tokens/create/write.js +18 -20
- package/dist/src/tokens/format.js +22 -22
- package/dist/src/tokens/index.js +22 -22
- package/dist/src/tokens/process/configs/color.js +2 -2
- package/dist/src/tokens/process/configs/semantic.js +2 -2
- package/dist/src/tokens/process/configs/typography.js +2 -2
- package/dist/src/tokens/process/configs.js +4 -4
- package/dist/src/tokens/process/formats/css/color.js +2 -2
- package/dist/src/tokens/process/formats/css/semantic.js +2 -2
- package/dist/src/tokens/process/formats/css/typography.js +2 -2
- package/dist/src/tokens/process/formats/css.js +2 -2
- package/dist/src/tokens/process/output/declarations.js +13 -13
- package/dist/src/tokens/process/output/theme.js +12 -12
- package/dist/src/tokens/process/platform.js +10 -10
- package/dist/src/tokens/process/utils/getMultidimensionalThemes.js +4 -4
- package/dist/src/utils.js +10 -10
- package/package.json +9 -9
package/dist/bin/config.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
// bin/config.ts
|
|
2
2
|
import path2 from "path";
|
|
3
|
-
import
|
|
3
|
+
import pc3 from "picocolors";
|
|
4
4
|
import * as R8 from "ramda";
|
|
5
5
|
|
|
6
6
|
// src/config.ts
|
|
7
|
-
import
|
|
7
|
+
import pc from "picocolors";
|
|
8
8
|
import * as R7 from "ramda";
|
|
9
|
-
import { z } from "zod
|
|
10
|
-
import { fromError } from "zod-validation-error
|
|
9
|
+
import { z } from "zod";
|
|
10
|
+
import { fromError } from "zod-validation-error";
|
|
11
11
|
|
|
12
12
|
// src/colors/colorMetadata.ts
|
|
13
13
|
import * as R from "ramda";
|
|
@@ -334,12 +334,12 @@ function makeFriendlyError(err) {
|
|
|
334
334
|
const optionName = mapPathToOptionName(issue.path);
|
|
335
335
|
const errorCode = `(error code: ${issue.code})`;
|
|
336
336
|
const optionMessage = optionName ? ` or CLI option --${optionName}` : "";
|
|
337
|
-
return ` - Error in JSON value ${
|
|
338
|
-
${issue.message} ${
|
|
337
|
+
return ` - Error in JSON value ${pc.red(issuePath)}${optionMessage}:
|
|
338
|
+
${issue.message} ${pc.dim(errorCode)}`;
|
|
339
339
|
}).join("\n")
|
|
340
340
|
});
|
|
341
341
|
} catch (_err2) {
|
|
342
|
-
console.error(
|
|
342
|
+
console.error(pc.red(err instanceof Error ? err.message : "Unknown error occurred while parsing config file"));
|
|
343
343
|
console.error(err instanceof Error ? err.stack : "No stack trace available");
|
|
344
344
|
}
|
|
345
345
|
}
|
|
@@ -347,7 +347,7 @@ function validateConfig(schema, unvalidatedConfig, configPath) {
|
|
|
347
347
|
try {
|
|
348
348
|
return schema.parse(unvalidatedConfig);
|
|
349
349
|
} catch (err) {
|
|
350
|
-
console.error(
|
|
350
|
+
console.error(pc.redBright(`Invalid config file at ${pc.red(configPath)}`));
|
|
351
351
|
const validationError = makeFriendlyError(err);
|
|
352
352
|
console.error(validationError?.toString());
|
|
353
353
|
process.exit(1);
|
|
@@ -360,7 +360,7 @@ function parseConfig(configFile, configPath) {
|
|
|
360
360
|
try {
|
|
361
361
|
return JSON.parse(configFile);
|
|
362
362
|
} catch (err) {
|
|
363
|
-
console.error(
|
|
363
|
+
console.error(pc.redBright(`Failed parsing config file at ${pc.red(configPath)}`));
|
|
364
364
|
const validationError = makeFriendlyError(err);
|
|
365
365
|
console.error(validationError?.toString());
|
|
366
366
|
process.exit(1);
|
|
@@ -413,10 +413,10 @@ var configFileCreateSchema = _configFileCreateSchema.extend(commonConfig.shape);
|
|
|
413
413
|
|
|
414
414
|
// src/utils.ts
|
|
415
415
|
import fs from "fs/promises";
|
|
416
|
-
import
|
|
416
|
+
import pc2 from "picocolors";
|
|
417
417
|
var readFile = async (path3, dry, allowFileNotFound) => {
|
|
418
418
|
if (dry) {
|
|
419
|
-
console.log(`${
|
|
419
|
+
console.log(`${pc2.blue("readFile")} ${path3}`);
|
|
420
420
|
return Promise.resolve("");
|
|
421
421
|
}
|
|
422
422
|
try {
|
|
@@ -450,11 +450,11 @@ async function readConfigFile(configPath, allowFileNotFound = true) {
|
|
|
450
450
|
if (allowFileNotFound) {
|
|
451
451
|
return "";
|
|
452
452
|
}
|
|
453
|
-
console.error(
|
|
453
|
+
console.error(pc3.redBright(`Could not read config file at ${pc3.blue(resolvedPath)}`));
|
|
454
454
|
throw err;
|
|
455
455
|
}
|
|
456
456
|
if (configFile) {
|
|
457
|
-
console.log(`Found config file: ${
|
|
457
|
+
console.log(`Found config file: ${pc3.green(resolvedPath)}`);
|
|
458
458
|
}
|
|
459
459
|
return configFile;
|
|
460
460
|
}
|
|
@@ -465,7 +465,7 @@ async function parseCreateConfig(configFile, options) {
|
|
|
465
465
|
(x) => /* @__PURE__ */ new Set([...R8.keys(x.colors.main), ...R8.keys(x.colors.support)])
|
|
466
466
|
);
|
|
467
467
|
if (!R8.all(R8.equals(R8.__, themeColors[0]), themeColors)) {
|
|
468
|
-
console.error(
|
|
468
|
+
console.error(pc3.redBright(`In config, all themes must have the same custom color names, but we found:`));
|
|
469
469
|
const themeNames = R8.keys(configParsed.themes ?? {});
|
|
470
470
|
themeColors.forEach((colors, index) => {
|
|
471
471
|
const colorNames = Array.from(colors);
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
// bin/designsystemet.ts
|
|
4
4
|
import { Argument, createCommand, program } from "@commander-js/extra-typings";
|
|
5
|
-
import
|
|
5
|
+
import pc11 from "picocolors";
|
|
6
6
|
import * as R24 from "ramda";
|
|
7
7
|
|
|
8
8
|
// src/colors/colorMetadata.ts
|
|
@@ -358,11 +358,11 @@ var generateColorContrast = (color, type) => {
|
|
|
358
358
|
};
|
|
359
359
|
|
|
360
360
|
// src/migrations/codemods/css/plugins.ts
|
|
361
|
-
import chalk from "chalk";
|
|
362
361
|
import hash from "object-hash";
|
|
362
|
+
import pc from "picocolors";
|
|
363
363
|
import * as R3 from "ramda";
|
|
364
|
-
var printDelete = (text) => console.log(`${
|
|
365
|
-
var deleteMsg = (decl, from) => `${
|
|
364
|
+
var printDelete = (text) => console.log(`${pc.red("Deleted:")} ${text}`.replace(/"|'/g, ""));
|
|
365
|
+
var deleteMsg = (decl, from) => `${pc.yellow(from)} @ ${pc.gray(`${JSON.stringify(decl.source?.input.file)}:${decl.source?.start?.line}:${decl.source?.start?.column}`)}`;
|
|
366
366
|
var cssClassRename = (dictionary) => ({
|
|
367
367
|
postcssPlugin: `Renames CSS classes ${hash(dictionary)}`,
|
|
368
368
|
Rule(rule) {
|
|
@@ -407,10 +407,10 @@ import postcss from "postcss";
|
|
|
407
407
|
|
|
408
408
|
// src/utils.ts
|
|
409
409
|
import fs from "fs/promises";
|
|
410
|
-
import
|
|
410
|
+
import pc2 from "picocolors";
|
|
411
411
|
var mkdir = async (dir, dry) => {
|
|
412
412
|
if (dry) {
|
|
413
|
-
console.log(`${
|
|
413
|
+
console.log(`${pc2.blue("mkdir")} ${dir}`);
|
|
414
414
|
return Promise.resolve();
|
|
415
415
|
}
|
|
416
416
|
const exists = await fs.access(dir, fs.constants.F_OK).then(() => true).catch(() => false);
|
|
@@ -421,27 +421,27 @@ var mkdir = async (dir, dry) => {
|
|
|
421
421
|
};
|
|
422
422
|
var writeFile = async (path5, data, dry) => {
|
|
423
423
|
if (dry) {
|
|
424
|
-
console.log(`${
|
|
424
|
+
console.log(`${pc2.blue("writeFile")} ${path5}`);
|
|
425
425
|
return Promise.resolve();
|
|
426
426
|
}
|
|
427
427
|
return fs.writeFile(path5, data, { encoding: "utf-8" }).catch((error) => {
|
|
428
|
-
console.error(
|
|
429
|
-
console.error(
|
|
428
|
+
console.error(pc2.red(`Error writing file: ${path5}`));
|
|
429
|
+
console.error(pc2.red(error));
|
|
430
430
|
throw error;
|
|
431
431
|
});
|
|
432
432
|
};
|
|
433
433
|
var cleanDir = async (dir, dry) => {
|
|
434
434
|
if (dry) {
|
|
435
|
-
console.log(`${
|
|
435
|
+
console.log(`${pc2.blue("cleanDir")} ${dir}`);
|
|
436
436
|
return Promise.resolve();
|
|
437
437
|
}
|
|
438
438
|
console.log(`
|
|
439
|
-
\u{1F525} Cleaning dir ${
|
|
439
|
+
\u{1F525} Cleaning dir ${pc2.red(`${dir.trim()}`)} `);
|
|
440
440
|
return fs.rm(dir, { recursive: true, force: true });
|
|
441
441
|
};
|
|
442
442
|
var readFile = async (path5, dry, allowFileNotFound) => {
|
|
443
443
|
if (dry) {
|
|
444
|
-
console.log(`${
|
|
444
|
+
console.log(`${pc2.blue("readFile")} ${path5}`);
|
|
445
445
|
return Promise.resolve("");
|
|
446
446
|
}
|
|
447
447
|
try {
|
|
@@ -861,20 +861,20 @@ var migrations_default = {
|
|
|
861
861
|
|
|
862
862
|
// src/tokens/build.ts
|
|
863
863
|
import path from "path";
|
|
864
|
-
import
|
|
864
|
+
import pc7 from "picocolors";
|
|
865
865
|
import * as R16 from "ramda";
|
|
866
866
|
|
|
867
867
|
// src/tokens/process/output/declarations.ts
|
|
868
|
-
import
|
|
868
|
+
import pc5 from "picocolors";
|
|
869
869
|
|
|
870
870
|
// package.json
|
|
871
871
|
var package_default = {
|
|
872
872
|
name: "@digdir/designsystemet",
|
|
873
|
-
version: "1.
|
|
873
|
+
version: "1.2.0",
|
|
874
874
|
description: "CLI for Designsystemet",
|
|
875
875
|
author: "Designsystemet team",
|
|
876
876
|
engines: {
|
|
877
|
-
node: ">=22.
|
|
877
|
+
node: ">=22.18.0"
|
|
878
878
|
},
|
|
879
879
|
repository: {
|
|
880
880
|
type: "git",
|
|
@@ -934,7 +934,6 @@ var package_default = {
|
|
|
934
934
|
"@commander-js/extra-typings": "^14.0.0",
|
|
935
935
|
"@tokens-studio/sd-transforms": "1.3.0",
|
|
936
936
|
"apca-w3": "^0.1.9",
|
|
937
|
-
chalk: "^5.4.1",
|
|
938
937
|
"change-case": "^5.4.4",
|
|
939
938
|
"chroma-js": "^3.1.2",
|
|
940
939
|
"colorjs.io": "^0.6.0-alpha.1",
|
|
@@ -942,30 +941,31 @@ var package_default = {
|
|
|
942
941
|
"fast-glob": "^3.3.3",
|
|
943
942
|
hsluv: "^1.0.1",
|
|
944
943
|
"object-hash": "^3.0.0",
|
|
944
|
+
picocolors: "^1.1.1",
|
|
945
945
|
postcss: "^8.5.6",
|
|
946
946
|
ramda: "^0.31.3",
|
|
947
947
|
"style-dictionary": "^5.0.1",
|
|
948
|
-
zod: "^
|
|
949
|
-
"zod-validation-error": "^
|
|
948
|
+
zod: "^4.0.17",
|
|
949
|
+
"zod-validation-error": "^4.0.1"
|
|
950
950
|
},
|
|
951
951
|
devDependencies: {
|
|
952
952
|
"@tokens-studio/types": "0.5.2",
|
|
953
953
|
"@types/apca-w3": "^0.1.3",
|
|
954
954
|
"@types/chroma-js": "^3.1.1",
|
|
955
955
|
"@types/fs-extra": "^11.0.4",
|
|
956
|
-
"@types/node": "^22.
|
|
956
|
+
"@types/node": "^22.17.1",
|
|
957
957
|
"@types/object-hash": "^3.0.6",
|
|
958
|
-
"@types/ramda": "^0.
|
|
959
|
-
"fs-extra": "^11.3.
|
|
958
|
+
"@types/ramda": "^0.31.0",
|
|
959
|
+
"fs-extra": "^11.3.1",
|
|
960
960
|
tslib: "^2.8.1",
|
|
961
961
|
tsup: "^8.5.0",
|
|
962
962
|
tsx: "^4.20.3",
|
|
963
|
-
typescript: "^5.
|
|
963
|
+
typescript: "^5.9.2"
|
|
964
964
|
}
|
|
965
965
|
};
|
|
966
966
|
|
|
967
967
|
// src/tokens/process/platform.ts
|
|
968
|
-
import
|
|
968
|
+
import pc4 from "picocolors";
|
|
969
969
|
import * as R14 from "ramda";
|
|
970
970
|
import StyleDictionary2 from "style-dictionary";
|
|
971
971
|
|
|
@@ -1669,8 +1669,8 @@ var TypographyValues;
|
|
|
1669
1669
|
})(TypographyValues || (TypographyValues = {}));
|
|
1670
1670
|
|
|
1671
1671
|
// src/tokens/process/utils/getMultidimensionalThemes.ts
|
|
1672
|
-
import chalk3 from "chalk";
|
|
1673
1672
|
import { kebabCase } from "change-case";
|
|
1673
|
+
import pc3 from "picocolors";
|
|
1674
1674
|
import * as R12 from "ramda";
|
|
1675
1675
|
var getMultidimensionalThemes = (processed$themes, dimensions) => {
|
|
1676
1676
|
const verboseLogging = buildOptions?.verbose;
|
|
@@ -1680,8 +1680,8 @@ var getMultidimensionalThemes = (processed$themes, dimensions) => {
|
|
|
1680
1680
|
const keys3 = R12.keys(grouped$themes);
|
|
1681
1681
|
const nonDependentKeys = keys3.filter((x) => ![...ALL_DEPENDENT_ON, ...dimensions].includes(x));
|
|
1682
1682
|
if (verboseLogging) {
|
|
1683
|
-
console.log(
|
|
1684
|
-
console.log(
|
|
1683
|
+
console.log(pc3.cyan(`\u{1F50E} Finding theme permutations for ${dimensions}`));
|
|
1684
|
+
console.log(pc3.cyan(` (ignoring permutations for ${nonDependentKeys})`));
|
|
1685
1685
|
}
|
|
1686
1686
|
return permutations.filter((val) => {
|
|
1687
1687
|
const filters = nonDependentKeys.map((x) => val.permutation[x] === grouped$themes[x][0].name);
|
|
@@ -1908,18 +1908,18 @@ async function processPlatform(options) {
|
|
|
1908
1908
|
const UNSAFE_DEFAULT_COLOR = process.env.UNSAFE_DEFAULT_COLOR ?? "";
|
|
1909
1909
|
if (UNSAFE_DEFAULT_COLOR) {
|
|
1910
1910
|
console.warn(
|
|
1911
|
-
|
|
1911
|
+
pc4.yellow(
|
|
1912
1912
|
`
|
|
1913
|
-
\u26A0\uFE0F UNSAFE_DEFAULT_COLOR is set to ${
|
|
1913
|
+
\u26A0\uFE0F UNSAFE_DEFAULT_COLOR is set to ${pc4.blue(UNSAFE_DEFAULT_COLOR)}. This will override the default color.`
|
|
1914
1914
|
)
|
|
1915
1915
|
);
|
|
1916
1916
|
}
|
|
1917
1917
|
const UNSAFE_COLOR_GROUPS = Array.from(process.env.UNSAFE_COLOR_GROUPS?.split(",") ?? []);
|
|
1918
1918
|
if (UNSAFE_COLOR_GROUPS.length > 0) {
|
|
1919
1919
|
console.warn(
|
|
1920
|
-
|
|
1920
|
+
pc4.yellow(
|
|
1921
1921
|
`
|
|
1922
|
-
\u26A0\uFE0F UNSAFE_COLOR_GROUPS is set to ${
|
|
1922
|
+
\u26A0\uFE0F UNSAFE_COLOR_GROUPS is set to ${pc4.blue(`[${UNSAFE_COLOR_GROUPS.join(", ")}]`)}. This will override the default color groups.`
|
|
1923
1923
|
)
|
|
1924
1924
|
);
|
|
1925
1925
|
}
|
|
@@ -1934,7 +1934,7 @@ async function processPlatform(options) {
|
|
|
1934
1934
|
}
|
|
1935
1935
|
if (buildOptions.defaultColor) {
|
|
1936
1936
|
console.log(`
|
|
1937
|
-
\u{1F3A8} Using ${
|
|
1937
|
+
\u{1F3A8} Using ${pc4.blue(buildOptions.defaultColor)} as default color`);
|
|
1938
1938
|
}
|
|
1939
1939
|
const buildAndSdConfigs = R14.map((buildConfig) => {
|
|
1940
1940
|
const sdConfigs = getConfigsForThemeDimensions(
|
|
@@ -1978,7 +1978,7 @@ async function processPlatform(options) {
|
|
|
1978
1978
|
}
|
|
1979
1979
|
if (sdConfigs.length > 0) {
|
|
1980
1980
|
console.log(`
|
|
1981
|
-
\u{1F371} Building ${
|
|
1981
|
+
\u{1F371} Building ${pc4.green(buildConfig.name ?? buildName)}`);
|
|
1982
1982
|
const results = await Promise.all(
|
|
1983
1983
|
sdConfigs.map(async (sdConfig) => {
|
|
1984
1984
|
const { config, permutation } = sdConfig;
|
|
@@ -2030,7 +2030,7 @@ ${typeDeclaration}`,
|
|
|
2030
2030
|
};
|
|
2031
2031
|
function createColorTypeDeclaration(colors2) {
|
|
2032
2032
|
console.log(`
|
|
2033
|
-
\u{1F371} Building ${
|
|
2033
|
+
\u{1F371} Building ${pc5.green("type declarations")}`);
|
|
2034
2034
|
const typeDeclaration = `
|
|
2035
2035
|
/* ${defaultFileHeader} */
|
|
2036
2036
|
import type {} from '@digdir/designsystemet/types';
|
|
@@ -2109,7 +2109,7 @@ ${dynamicColors}`;
|
|
|
2109
2109
|
};
|
|
2110
2110
|
|
|
2111
2111
|
// src/tokens/process/output/theme.ts
|
|
2112
|
-
import
|
|
2112
|
+
import pc6 from "picocolors";
|
|
2113
2113
|
import * as R15 from "ramda";
|
|
2114
2114
|
var defaultFileHeader2 = `build: v${package_default.version}`;
|
|
2115
2115
|
var createThemeCSSFiles = ({
|
|
@@ -2146,10 +2146,10 @@ var createThemeCSSFiles = ({
|
|
|
2146
2146
|
});
|
|
2147
2147
|
if (sortIndex === -1) {
|
|
2148
2148
|
console.error(
|
|
2149
|
-
|
|
2149
|
+
pc6.yellow(`WARNING: CSS section does not have a defined sort order: ${filePath.replace(".css", "")}`)
|
|
2150
2150
|
);
|
|
2151
2151
|
console.log(
|
|
2152
|
-
|
|
2152
|
+
pc6.dim(
|
|
2153
2153
|
`
|
|
2154
2154
|
The section will currently be added to the end of the entry file, but the exact
|
|
2155
2155
|
order may change due to nondeterminism.`.trim()
|
|
@@ -2205,7 +2205,7 @@ var buildTokens = async (options) => {
|
|
|
2205
2205
|
} catch (_error) {
|
|
2206
2206
|
}
|
|
2207
2207
|
console.log(`
|
|
2208
|
-
\u{1F3D7}\uFE0F Start building tokens in ${
|
|
2208
|
+
\u{1F3D7}\uFE0F Start building tokens in ${pc7.green(tokensDir)}`);
|
|
2209
2209
|
const processedBuilds = await processPlatform({
|
|
2210
2210
|
...options,
|
|
2211
2211
|
outDir,
|
|
@@ -2228,7 +2228,7 @@ design-tokens: v${$designsystemet.version}` : ""
|
|
|
2228
2228
|
files = files.concat(tailwindFiles.filter(Boolean));
|
|
2229
2229
|
}
|
|
2230
2230
|
console.log(`
|
|
2231
|
-
\u{1F4BE} Writing build to ${
|
|
2231
|
+
\u{1F4BE} Writing build to ${pc7.green(outDir)}`);
|
|
2232
2232
|
await write(files, outDir, options.dry);
|
|
2233
2233
|
console.log(`
|
|
2234
2234
|
\u2705 Finished building tokens!`);
|
|
@@ -2237,7 +2237,7 @@ design-tokens: v${$designsystemet.version}` : ""
|
|
|
2237
2237
|
|
|
2238
2238
|
// src/tokens/create/write.ts
|
|
2239
2239
|
import path2 from "path";
|
|
2240
|
-
import
|
|
2240
|
+
import pc8 from "picocolors";
|
|
2241
2241
|
import * as R17 from "ramda";
|
|
2242
2242
|
|
|
2243
2243
|
// src/tokens/create/generators/$designsystemet.ts
|
|
@@ -2474,7 +2474,7 @@ var writeTokens = async (options) => {
|
|
|
2474
2474
|
);
|
|
2475
2475
|
const themes = concatThemeNames(themeObjects);
|
|
2476
2476
|
console.log(`
|
|
2477
|
-
Themes: ${
|
|
2477
|
+
Themes: ${pc8.blue(themes.join(", "))}`);
|
|
2478
2478
|
const $themes = await generate$Themes(["dark", "light"], themes, colors2);
|
|
2479
2479
|
const $metadata = generate$Metadata(["dark", "light"], themes, colors2);
|
|
2480
2480
|
const $designsystemet = generate$Designsystemet();
|
|
@@ -2487,9 +2487,7 @@ Themes: ${chalk8.blue(themes.join(", "))}`);
|
|
|
2487
2487
|
const filePath = path2.join(targetDir, `${set4}.json`);
|
|
2488
2488
|
await writeFile(filePath, stringify(tokens), dry);
|
|
2489
2489
|
}
|
|
2490
|
-
console.log(
|
|
2491
|
-
`Finished creating Designsystem design tokens in ${chalk8.green(outDir)} for theme ${chalk8.blue(themeName)}`
|
|
2492
|
-
);
|
|
2490
|
+
console.log(`Finished creating Designsystem design tokens in ${pc8.green(outDir)} for theme ${pc8.blue(themeName)}`);
|
|
2493
2491
|
};
|
|
2494
2492
|
|
|
2495
2493
|
// src/tokens/create/defaults.ts
|
|
@@ -4251,14 +4249,14 @@ var createTokens = async (opts) => {
|
|
|
4251
4249
|
|
|
4252
4250
|
// bin/config.ts
|
|
4253
4251
|
import path4 from "path";
|
|
4254
|
-
import
|
|
4252
|
+
import pc10 from "picocolors";
|
|
4255
4253
|
import * as R23 from "ramda";
|
|
4256
4254
|
|
|
4257
4255
|
// src/config.ts
|
|
4258
|
-
import
|
|
4256
|
+
import pc9 from "picocolors";
|
|
4259
4257
|
import * as R22 from "ramda";
|
|
4260
|
-
import { z } from "zod
|
|
4261
|
-
import { fromError } from "zod-validation-error
|
|
4258
|
+
import { z } from "zod";
|
|
4259
|
+
import { fromError } from "zod-validation-error";
|
|
4262
4260
|
function mapPathToOptionName(path5) {
|
|
4263
4261
|
const normalisedPath = path5[0] === "themes" ? ["theme", ...R22.drop(2, path5)] : path5;
|
|
4264
4262
|
const option = R22.path(normalisedPath, cliOptions);
|
|
@@ -4275,12 +4273,12 @@ function makeFriendlyError(err) {
|
|
|
4275
4273
|
const optionName = mapPathToOptionName(issue.path);
|
|
4276
4274
|
const errorCode = `(error code: ${issue.code})`;
|
|
4277
4275
|
const optionMessage = optionName ? ` or CLI option --${optionName}` : "";
|
|
4278
|
-
return ` - Error in JSON value ${
|
|
4279
|
-
${issue.message} ${
|
|
4276
|
+
return ` - Error in JSON value ${pc9.red(issuePath)}${optionMessage}:
|
|
4277
|
+
${issue.message} ${pc9.dim(errorCode)}`;
|
|
4280
4278
|
}).join("\n")
|
|
4281
4279
|
});
|
|
4282
4280
|
} catch (_err2) {
|
|
4283
|
-
console.error(
|
|
4281
|
+
console.error(pc9.red(err instanceof Error ? err.message : "Unknown error occurred while parsing config file"));
|
|
4284
4282
|
console.error(err instanceof Error ? err.stack : "No stack trace available");
|
|
4285
4283
|
}
|
|
4286
4284
|
}
|
|
@@ -4288,7 +4286,7 @@ function validateConfig(schema, unvalidatedConfig, configPath) {
|
|
|
4288
4286
|
try {
|
|
4289
4287
|
return schema.parse(unvalidatedConfig);
|
|
4290
4288
|
} catch (err) {
|
|
4291
|
-
console.error(
|
|
4289
|
+
console.error(pc9.redBright(`Invalid config file at ${pc9.red(configPath)}`));
|
|
4292
4290
|
const validationError = makeFriendlyError(err);
|
|
4293
4291
|
console.error(validationError?.toString());
|
|
4294
4292
|
process.exit(1);
|
|
@@ -4301,7 +4299,7 @@ function parseConfig(configFile, configPath) {
|
|
|
4301
4299
|
try {
|
|
4302
4300
|
return JSON.parse(configFile);
|
|
4303
4301
|
} catch (err) {
|
|
4304
|
-
console.error(
|
|
4302
|
+
console.error(pc9.redBright(`Failed parsing config file at ${pc9.red(configPath)}`));
|
|
4305
4303
|
const validationError = makeFriendlyError(err);
|
|
4306
4304
|
console.error(validationError?.toString());
|
|
4307
4305
|
process.exit(1);
|
|
@@ -4373,11 +4371,11 @@ async function readConfigFile(configPath, allowFileNotFound = true) {
|
|
|
4373
4371
|
if (allowFileNotFound) {
|
|
4374
4372
|
return "";
|
|
4375
4373
|
}
|
|
4376
|
-
console.error(
|
|
4374
|
+
console.error(pc10.redBright(`Could not read config file at ${pc10.blue(resolvedPath)}`));
|
|
4377
4375
|
throw err;
|
|
4378
4376
|
}
|
|
4379
4377
|
if (configFile) {
|
|
4380
|
-
console.log(`Found config file: ${
|
|
4378
|
+
console.log(`Found config file: ${pc10.green(resolvedPath)}`);
|
|
4381
4379
|
}
|
|
4382
4380
|
return configFile;
|
|
4383
4381
|
}
|
|
@@ -4388,7 +4386,7 @@ async function parseCreateConfig(configFile, options) {
|
|
|
4388
4386
|
(x) => /* @__PURE__ */ new Set([...R23.keys(x.colors.main), ...R23.keys(x.colors.support)])
|
|
4389
4387
|
);
|
|
4390
4388
|
if (!R23.all(R23.equals(R23.__, themeColors[0]), themeColors)) {
|
|
4391
|
-
console.error(
|
|
4389
|
+
console.error(pc10.redBright(`In config, all themes must have the same custom color names, but we found:`));
|
|
4392
4390
|
const themeNames = R23.keys(configParsed.themes ?? {});
|
|
4393
4391
|
themeColors.forEach((colors2, index) => {
|
|
4394
4392
|
const colorNames = Array.from(colors2);
|
|
@@ -4442,11 +4440,11 @@ var DEFAULT_THEME_NAME = "theme";
|
|
|
4442
4440
|
var DEFAULT_CONFIG_FILE = "designsystemet.config.json";
|
|
4443
4441
|
function makeTokenCommands() {
|
|
4444
4442
|
const tokenCmd = createCommand("tokens");
|
|
4445
|
-
tokenCmd.command("build").description("Build Designsystemet tokens").option("-t, --tokens <string>", `Path to ${
|
|
4443
|
+
tokenCmd.command("build").description("Build Designsystemet tokens").option("-t, --tokens <string>", `Path to ${pc11.blue("design-tokens")}`, DEFAULT_TOKENS_CREATE_DIR).option(
|
|
4446
4444
|
"-o, --out-dir <string>",
|
|
4447
|
-
`Output directory for built ${
|
|
4445
|
+
`Output directory for built ${pc11.blue("design-tokens")}`,
|
|
4448
4446
|
DEFAULT_TOKENS_BUILD_DIR
|
|
4449
|
-
).option(`--${cliOptions.clean} [boolean]`, "Clean output directory before building tokens", parseBoolean, false).option("--dry [boolean]", `Dry run for built ${
|
|
4447
|
+
).option(`--${cliOptions.clean} [boolean]`, "Clean output directory before building tokens", parseBoolean, false).option("--dry [boolean]", `Dry run for built ${pc11.blue("design-tokens")}`, parseBoolean, false).option("--verbose", "Enable verbose output", false).option("--config <string>", `Path to config file (default: "${DEFAULT_CONFIG_FILE}")`).option("--experimental-tailwind", "Generate Tailwind CSS classes for tokens", false).action(async (opts) => {
|
|
4450
4448
|
const { verbose, clean, dry, experimentalTailwind } = opts;
|
|
4451
4449
|
const tokensDir = typeof opts.tokens === "string" ? opts.tokens : DEFAULT_TOKENS_CREATE_DIR;
|
|
4452
4450
|
const outDir = typeof opts.outDir === "string" ? opts.outDir : "./dist/tokens";
|
|
@@ -4463,9 +4461,9 @@ function makeTokenCommands() {
|
|
|
4463
4461
|
});
|
|
4464
4462
|
tokenCmd.command("create").description("Create Designsystemet tokens").option(`-m, --${cliOptions.theme.colors.main} <name:hex...>`, `Main colors`, parseColorValues).option(`-s, --${cliOptions.theme.colors.support} <name:hex...>`, `Support colors`, parseColorValues).option(`-n, --${cliOptions.theme.colors.neutral} <hex>`, `Neutral hex color`, convertToHex).option(
|
|
4465
4463
|
`-o, --${cliOptions.outDir} <string>`,
|
|
4466
|
-
`Output directory for created ${
|
|
4464
|
+
`Output directory for created ${pc11.blue("design-tokens")}`,
|
|
4467
4465
|
DEFAULT_TOKENS_CREATE_DIR
|
|
4468
|
-
).option(`--${cliOptions.clean} [boolean]`, "Clean output directory before creating tokens", parseBoolean, false).option("--dry [boolean]", `Dry run for created ${
|
|
4466
|
+
).option(`--${cliOptions.clean} [boolean]`, "Clean output directory before creating tokens", parseBoolean, false).option("--dry [boolean]", `Dry run for created ${pc11.blue("design-tokens")}`, parseBoolean, false).option(`-f, --${cliOptions.theme.typography.fontFamily} <string>`, `Font family (experimental)`, DEFAULT_FONT).option(
|
|
4469
4467
|
`-b, --${cliOptions.theme.borderRadius} <number>`,
|
|
4470
4468
|
`Unitless base border-radius in px`,
|
|
4471
4469
|
(radiusAsString) => Number(radiusAsString),
|
|
@@ -4506,8 +4504,8 @@ program.command("migrate").description("run a Designsystemet migration").addArgu
|
|
|
4506
4504
|
console.error("Migration not found!");
|
|
4507
4505
|
throw "Aborting";
|
|
4508
4506
|
}
|
|
4509
|
-
console.log(`Applying migration ${
|
|
4510
|
-
migration?.(glob2).then(() => console.log(`Migration ${
|
|
4507
|
+
console.log(`Applying migration ${pc11.blue(migrationKey)} with glob: ${pc11.green(glob2)}`);
|
|
4508
|
+
migration?.(glob2).then(() => console.log(`Migration ${pc11.blue(migrationKey)} finished`)).catch((error) => console.log(error));
|
|
4511
4509
|
} else {
|
|
4512
4510
|
console.log("Migrate: please specify a migration name or --list");
|
|
4513
4511
|
}
|
package/dist/src/config.d.ts
CHANGED
package/dist/src/config.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/config.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,CAAC,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/config.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAsCxB;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAC9B,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EACpB,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC1C,UAAU,EAAE,MAAM,GACjB,CAAC,CAUH;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,CAAC,CAexE;AAWD,eAAO,MAAM,UAAU,QAA2C,CAAC;AAyBnE,QAAA,MAAM,WAAW;;;;;;;;;;iBAiBmG,CAAC;AAErH,eAAO,MAAM,YAAY;;iBAEvB,CAAC;AAYH;;GAEG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;iBAAqD,CAAC;AACzF,MAAM,MAAM,kBAAkB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,YAAY,CAAC,CAAC;AAC9D,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,YAAY,CAAC,CAAC;AAC7D,MAAM,MAAM,kBAAkB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,WAAW,CAAC,CAAC"}
|
package/dist/src/config.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
// src/config.ts
|
|
2
|
-
import
|
|
2
|
+
import pc from "picocolors";
|
|
3
3
|
import * as R7 from "ramda";
|
|
4
|
-
import { z } from "zod
|
|
5
|
-
import { fromError } from "zod-validation-error
|
|
4
|
+
import { z } from "zod";
|
|
5
|
+
import { fromError } from "zod-validation-error";
|
|
6
6
|
|
|
7
7
|
// src/colors/colorMetadata.ts
|
|
8
8
|
import * as R from "ramda";
|
|
@@ -329,12 +329,12 @@ function makeFriendlyError(err) {
|
|
|
329
329
|
const optionName = mapPathToOptionName(issue.path);
|
|
330
330
|
const errorCode = `(error code: ${issue.code})`;
|
|
331
331
|
const optionMessage = optionName ? ` or CLI option --${optionName}` : "";
|
|
332
|
-
return ` - Error in JSON value ${
|
|
333
|
-
${issue.message} ${
|
|
332
|
+
return ` - Error in JSON value ${pc.red(issuePath)}${optionMessage}:
|
|
333
|
+
${issue.message} ${pc.dim(errorCode)}`;
|
|
334
334
|
}).join("\n")
|
|
335
335
|
});
|
|
336
336
|
} catch (_err2) {
|
|
337
|
-
console.error(
|
|
337
|
+
console.error(pc.red(err instanceof Error ? err.message : "Unknown error occurred while parsing config file"));
|
|
338
338
|
console.error(err instanceof Error ? err.stack : "No stack trace available");
|
|
339
339
|
}
|
|
340
340
|
}
|
|
@@ -342,7 +342,7 @@ function validateConfig(schema, unvalidatedConfig, configPath) {
|
|
|
342
342
|
try {
|
|
343
343
|
return schema.parse(unvalidatedConfig);
|
|
344
344
|
} catch (err) {
|
|
345
|
-
console.error(
|
|
345
|
+
console.error(pc.redBright(`Invalid config file at ${pc.red(configPath)}`));
|
|
346
346
|
const validationError = makeFriendlyError(err);
|
|
347
347
|
console.error(validationError?.toString());
|
|
348
348
|
process.exit(1);
|
|
@@ -355,7 +355,7 @@ function parseConfig(configFile, configPath) {
|
|
|
355
355
|
try {
|
|
356
356
|
return JSON.parse(configFile);
|
|
357
357
|
} catch (err) {
|
|
358
|
-
console.error(
|
|
358
|
+
console.error(pc.redBright(`Failed parsing config file at ${pc.red(configPath)}`));
|
|
359
359
|
const validationError = makeFriendlyError(err);
|
|
360
360
|
console.error(validationError?.toString());
|
|
361
361
|
process.exit(1);
|