@digdir/designsystemet 1.1.10 → 1.3.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 +12 -12
- package/dist/bin/designsystemet.js +60 -62
- package/dist/src/config.js +6 -6
- package/dist/src/index.js +21 -21
- 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 +1 -1
- package/dist/src/scripts/update-design-tokens.js +3 -3
- package/dist/src/scripts/update-preview-tokens.js +24 -24
- 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 +6 -6
- package/dist/src/tokens/create/write.d.ts.map +1 -1
- package/dist/src/tokens/create/write.js +16 -18
- package/dist/src/tokens/format.js +21 -21
- package/dist/src/tokens/index.js +21 -21
- package/dist/src/tokens/process/configs/color.js +4 -4
- package/dist/src/tokens/process/configs/semantic.js +4 -4
- package/dist/src/tokens/process/configs/shared.js +2 -2
- package/dist/src/tokens/process/configs/typography.js +4 -4
- package/dist/src/tokens/process/configs.js +6 -6
- package/dist/src/tokens/process/formats/css/color.js +4 -4
- package/dist/src/tokens/process/formats/css/semantic.js +4 -4
- package/dist/src/tokens/process/formats/css/typography.js +4 -4
- package/dist/src/tokens/process/formats/css.js +4 -4
- package/dist/src/tokens/process/output/declarations.js +12 -12
- package/dist/src/tokens/process/output/theme.js +9 -9
- package/dist/src/tokens/process/platform.js +12 -12
- package/dist/src/tokens/process/transformers.js +2 -2
- package/dist/src/tokens/process/utils/getMultidimensionalThemes.js +6 -6
- package/dist/src/utils.js +10 -10
- package/package.json +6 -6
package/dist/src/tokens/build.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
// src/tokens/build.ts
|
|
2
2
|
import path from "path";
|
|
3
|
-
import
|
|
3
|
+
import pc6 from "picocolors";
|
|
4
4
|
import * as R12 from "ramda";
|
|
5
5
|
|
|
6
6
|
// src/utils.ts
|
|
7
7
|
import fs from "fs/promises";
|
|
8
|
-
import
|
|
8
|
+
import pc from "picocolors";
|
|
9
9
|
var mkdir = async (dir, dry) => {
|
|
10
10
|
if (dry) {
|
|
11
|
-
console.log(`${
|
|
11
|
+
console.log(`${pc.blue("mkdir")} ${dir}`);
|
|
12
12
|
return Promise.resolve();
|
|
13
13
|
}
|
|
14
14
|
const exists = await fs.access(dir, fs.constants.F_OK).then(() => true).catch(() => false);
|
|
@@ -19,18 +19,18 @@ var mkdir = async (dir, dry) => {
|
|
|
19
19
|
};
|
|
20
20
|
var writeFile = async (path2, data, dry) => {
|
|
21
21
|
if (dry) {
|
|
22
|
-
console.log(`${
|
|
22
|
+
console.log(`${pc.blue("writeFile")} ${path2}`);
|
|
23
23
|
return Promise.resolve();
|
|
24
24
|
}
|
|
25
25
|
return fs.writeFile(path2, data, { encoding: "utf-8" }).catch((error) => {
|
|
26
|
-
console.error(
|
|
27
|
-
console.error(
|
|
26
|
+
console.error(pc.red(`Error writing file: ${path2}`));
|
|
27
|
+
console.error(pc.red(error));
|
|
28
28
|
throw error;
|
|
29
29
|
});
|
|
30
30
|
};
|
|
31
31
|
var readFile = async (path2, dry, allowFileNotFound) => {
|
|
32
32
|
if (dry) {
|
|
33
|
-
console.log(`${
|
|
33
|
+
console.log(`${pc.blue("readFile")} ${path2}`);
|
|
34
34
|
return Promise.resolve("");
|
|
35
35
|
}
|
|
36
36
|
try {
|
|
@@ -44,12 +44,12 @@ var readFile = async (path2, dry, allowFileNotFound) => {
|
|
|
44
44
|
};
|
|
45
45
|
|
|
46
46
|
// src/tokens/process/output/declarations.ts
|
|
47
|
-
import
|
|
47
|
+
import pc4 from "picocolors";
|
|
48
48
|
|
|
49
49
|
// package.json
|
|
50
50
|
var package_default = {
|
|
51
51
|
name: "@digdir/designsystemet",
|
|
52
|
-
version: "1.
|
|
52
|
+
version: "1.3.0",
|
|
53
53
|
description: "CLI for Designsystemet",
|
|
54
54
|
author: "Designsystemet team",
|
|
55
55
|
engines: {
|
|
@@ -113,7 +113,6 @@ var package_default = {
|
|
|
113
113
|
"@commander-js/extra-typings": "^14.0.0",
|
|
114
114
|
"@tokens-studio/sd-transforms": "1.3.0",
|
|
115
115
|
"apca-w3": "^0.1.9",
|
|
116
|
-
chalk: "^5.4.1",
|
|
117
116
|
"change-case": "^5.4.4",
|
|
118
117
|
"chroma-js": "^3.1.2",
|
|
119
118
|
"colorjs.io": "^0.6.0-alpha.1",
|
|
@@ -121,10 +120,11 @@ var package_default = {
|
|
|
121
120
|
"fast-glob": "^3.3.3",
|
|
122
121
|
hsluv: "^1.0.1",
|
|
123
122
|
"object-hash": "^3.0.0",
|
|
123
|
+
picocolors: "^1.1.1",
|
|
124
124
|
postcss: "^8.5.6",
|
|
125
125
|
ramda: "^0.31.3",
|
|
126
126
|
"style-dictionary": "^5.0.1",
|
|
127
|
-
zod: "^4.0.
|
|
127
|
+
zod: "^4.0.17",
|
|
128
128
|
"zod-validation-error": "^4.0.1"
|
|
129
129
|
},
|
|
130
130
|
devDependencies: {
|
|
@@ -132,19 +132,19 @@ var package_default = {
|
|
|
132
132
|
"@types/apca-w3": "^0.1.3",
|
|
133
133
|
"@types/chroma-js": "^3.1.1",
|
|
134
134
|
"@types/fs-extra": "^11.0.4",
|
|
135
|
-
"@types/node": "^22.17.
|
|
135
|
+
"@types/node": "^22.17.2",
|
|
136
136
|
"@types/object-hash": "^3.0.6",
|
|
137
137
|
"@types/ramda": "^0.31.0",
|
|
138
|
-
"fs-extra": "^11.3.
|
|
138
|
+
"fs-extra": "^11.3.1",
|
|
139
139
|
tslib: "^2.8.1",
|
|
140
140
|
tsup: "^8.5.0",
|
|
141
|
-
tsx: "^4.20.
|
|
141
|
+
tsx: "^4.20.4",
|
|
142
142
|
typescript: "^5.9.2"
|
|
143
143
|
}
|
|
144
144
|
};
|
|
145
145
|
|
|
146
146
|
// src/tokens/process/platform.ts
|
|
147
|
-
import
|
|
147
|
+
import pc3 from "picocolors";
|
|
148
148
|
import * as R10 from "ramda";
|
|
149
149
|
import StyleDictionary2 from "style-dictionary";
|
|
150
150
|
|
|
@@ -465,7 +465,7 @@ var sizeRem = {
|
|
|
465
465
|
const value = getValue(token);
|
|
466
466
|
if (isPx(value)) {
|
|
467
467
|
const baseFont = config.basePxFontSize || 16;
|
|
468
|
-
const size = parseInt(value);
|
|
468
|
+
const size = parseInt(value, 10);
|
|
469
469
|
if (size === 0) {
|
|
470
470
|
return "0";
|
|
471
471
|
}
|
|
@@ -500,7 +500,7 @@ var unitless = {
|
|
|
500
500
|
type: "value",
|
|
501
501
|
transitive: true,
|
|
502
502
|
filter: (token) => pathStartsWithOneOf(["size", "_size"], token),
|
|
503
|
-
transform: (token) => parseInt(getValue(token))
|
|
503
|
+
transform: (token) => parseInt(getValue(token), 10)
|
|
504
504
|
};
|
|
505
505
|
|
|
506
506
|
// src/tokens/process/configs/shared.ts
|
|
@@ -848,8 +848,8 @@ var TypographyValues;
|
|
|
848
848
|
})(TypographyValues || (TypographyValues = {}));
|
|
849
849
|
|
|
850
850
|
// src/tokens/process/utils/getMultidimensionalThemes.ts
|
|
851
|
-
import chalk2 from "chalk";
|
|
852
851
|
import { kebabCase } from "change-case";
|
|
852
|
+
import pc2 from "picocolors";
|
|
853
853
|
import * as R8 from "ramda";
|
|
854
854
|
var getMultidimensionalThemes = (processed$themes, dimensions) => {
|
|
855
855
|
const verboseLogging = buildOptions?.verbose;
|
|
@@ -859,8 +859,8 @@ var getMultidimensionalThemes = (processed$themes, dimensions) => {
|
|
|
859
859
|
const keys2 = R8.keys(grouped$themes);
|
|
860
860
|
const nonDependentKeys = keys2.filter((x) => ![...ALL_DEPENDENT_ON, ...dimensions].includes(x));
|
|
861
861
|
if (verboseLogging) {
|
|
862
|
-
console.log(
|
|
863
|
-
console.log(
|
|
862
|
+
console.log(pc2.cyan(`\u{1F50E} Finding theme permutations for ${dimensions}`));
|
|
863
|
+
console.log(pc2.cyan(` (ignoring permutations for ${nonDependentKeys})`));
|
|
864
864
|
}
|
|
865
865
|
return permutations.filter((val) => {
|
|
866
866
|
const filters = nonDependentKeys.map((x) => val.permutation[x] === grouped$themes[x][0].name);
|
|
@@ -1087,18 +1087,18 @@ async function processPlatform(options) {
|
|
|
1087
1087
|
const UNSAFE_DEFAULT_COLOR = process.env.UNSAFE_DEFAULT_COLOR ?? "";
|
|
1088
1088
|
if (UNSAFE_DEFAULT_COLOR) {
|
|
1089
1089
|
console.warn(
|
|
1090
|
-
|
|
1090
|
+
pc3.yellow(
|
|
1091
1091
|
`
|
|
1092
|
-
\u26A0\uFE0F UNSAFE_DEFAULT_COLOR is set to ${
|
|
1092
|
+
\u26A0\uFE0F UNSAFE_DEFAULT_COLOR is set to ${pc3.blue(UNSAFE_DEFAULT_COLOR)}. This will override the default color.`
|
|
1093
1093
|
)
|
|
1094
1094
|
);
|
|
1095
1095
|
}
|
|
1096
1096
|
const UNSAFE_COLOR_GROUPS = Array.from(process.env.UNSAFE_COLOR_GROUPS?.split(",") ?? []);
|
|
1097
1097
|
if (UNSAFE_COLOR_GROUPS.length > 0) {
|
|
1098
1098
|
console.warn(
|
|
1099
|
-
|
|
1099
|
+
pc3.yellow(
|
|
1100
1100
|
`
|
|
1101
|
-
\u26A0\uFE0F UNSAFE_COLOR_GROUPS is set to ${
|
|
1101
|
+
\u26A0\uFE0F UNSAFE_COLOR_GROUPS is set to ${pc3.blue(`[${UNSAFE_COLOR_GROUPS.join(", ")}]`)}. This will override the default color groups.`
|
|
1102
1102
|
)
|
|
1103
1103
|
);
|
|
1104
1104
|
}
|
|
@@ -1113,7 +1113,7 @@ async function processPlatform(options) {
|
|
|
1113
1113
|
}
|
|
1114
1114
|
if (buildOptions.defaultColor) {
|
|
1115
1115
|
console.log(`
|
|
1116
|
-
\u{1F3A8} Using ${
|
|
1116
|
+
\u{1F3A8} Using ${pc3.blue(buildOptions.defaultColor)} as default color`);
|
|
1117
1117
|
}
|
|
1118
1118
|
const buildAndSdConfigs = R10.map((buildConfig) => {
|
|
1119
1119
|
const sdConfigs = getConfigsForThemeDimensions(
|
|
@@ -1157,7 +1157,7 @@ async function processPlatform(options) {
|
|
|
1157
1157
|
}
|
|
1158
1158
|
if (sdConfigs.length > 0) {
|
|
1159
1159
|
console.log(`
|
|
1160
|
-
\u{1F371} Building ${
|
|
1160
|
+
\u{1F371} Building ${pc3.green(buildConfig.name ?? buildName)}`);
|
|
1161
1161
|
const results = await Promise.all(
|
|
1162
1162
|
sdConfigs.map(async (sdConfig) => {
|
|
1163
1163
|
const { config, permutation } = sdConfig;
|
|
@@ -1209,7 +1209,7 @@ ${typeDeclaration}`,
|
|
|
1209
1209
|
};
|
|
1210
1210
|
function createColorTypeDeclaration(colors) {
|
|
1211
1211
|
console.log(`
|
|
1212
|
-
\u{1F371} Building ${
|
|
1212
|
+
\u{1F371} Building ${pc4.green("type declarations")}`);
|
|
1213
1213
|
const typeDeclaration = `
|
|
1214
1214
|
/* ${defaultFileHeader} */
|
|
1215
1215
|
import type {} from '@digdir/designsystemet/types';
|
|
@@ -1288,7 +1288,7 @@ ${dynamicColors}`;
|
|
|
1288
1288
|
};
|
|
1289
1289
|
|
|
1290
1290
|
// src/tokens/process/output/theme.ts
|
|
1291
|
-
import
|
|
1291
|
+
import pc5 from "picocolors";
|
|
1292
1292
|
import * as R11 from "ramda";
|
|
1293
1293
|
var defaultFileHeader2 = `build: v${package_default.version}`;
|
|
1294
1294
|
var createThemeCSSFiles = ({
|
|
@@ -1325,10 +1325,10 @@ var createThemeCSSFiles = ({
|
|
|
1325
1325
|
});
|
|
1326
1326
|
if (sortIndex === -1) {
|
|
1327
1327
|
console.error(
|
|
1328
|
-
|
|
1328
|
+
pc5.yellow(`WARNING: CSS section does not have a defined sort order: ${filePath.replace(".css", "")}`)
|
|
1329
1329
|
);
|
|
1330
1330
|
console.log(
|
|
1331
|
-
|
|
1331
|
+
pc5.dim(
|
|
1332
1332
|
`
|
|
1333
1333
|
The section will currently be added to the end of the entry file, but the exact
|
|
1334
1334
|
order may change due to nondeterminism.`.trim()
|
|
@@ -1379,12 +1379,12 @@ var buildTokens = async (options) => {
|
|
|
1379
1379
|
const processed$themes = $themes.map(processThemeObject);
|
|
1380
1380
|
let $designsystemet;
|
|
1381
1381
|
try {
|
|
1382
|
-
const $designsystemetContent = await readFile(`${tokensDir}/$designsystemet.
|
|
1382
|
+
const $designsystemetContent = await readFile(`${tokensDir}/$designsystemet.jsonc`);
|
|
1383
1383
|
$designsystemet = JSON.parse($designsystemetContent);
|
|
1384
1384
|
} catch (_error) {
|
|
1385
1385
|
}
|
|
1386
1386
|
console.log(`
|
|
1387
|
-
\u{1F3D7}\uFE0F Start building tokens in ${
|
|
1387
|
+
\u{1F3D7}\uFE0F Start building tokens in ${pc6.green(tokensDir)}`);
|
|
1388
1388
|
const processedBuilds = await processPlatform({
|
|
1389
1389
|
...options,
|
|
1390
1390
|
outDir,
|
|
@@ -1407,7 +1407,7 @@ design-tokens: v${$designsystemet.version}` : ""
|
|
|
1407
1407
|
files = files.concat(tailwindFiles.filter(Boolean));
|
|
1408
1408
|
}
|
|
1409
1409
|
console.log(`
|
|
1410
|
-
\u{1F4BE} Writing build to ${
|
|
1410
|
+
\u{1F4BE} Writing build to ${pc6.green(outDir)}`);
|
|
1411
1411
|
await write(files, outDir, options.dry);
|
|
1412
1412
|
console.log(`
|
|
1413
1413
|
\u2705 Finished building tokens!`);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// package.json
|
|
2
2
|
var package_default = {
|
|
3
3
|
name: "@digdir/designsystemet",
|
|
4
|
-
version: "1.
|
|
4
|
+
version: "1.3.0",
|
|
5
5
|
description: "CLI for Designsystemet",
|
|
6
6
|
author: "Designsystemet team",
|
|
7
7
|
engines: {
|
|
@@ -65,7 +65,6 @@ var package_default = {
|
|
|
65
65
|
"@commander-js/extra-typings": "^14.0.0",
|
|
66
66
|
"@tokens-studio/sd-transforms": "1.3.0",
|
|
67
67
|
"apca-w3": "^0.1.9",
|
|
68
|
-
chalk: "^5.4.1",
|
|
69
68
|
"change-case": "^5.4.4",
|
|
70
69
|
"chroma-js": "^3.1.2",
|
|
71
70
|
"colorjs.io": "^0.6.0-alpha.1",
|
|
@@ -73,10 +72,11 @@ var package_default = {
|
|
|
73
72
|
"fast-glob": "^3.3.3",
|
|
74
73
|
hsluv: "^1.0.1",
|
|
75
74
|
"object-hash": "^3.0.0",
|
|
75
|
+
picocolors: "^1.1.1",
|
|
76
76
|
postcss: "^8.5.6",
|
|
77
77
|
ramda: "^0.31.3",
|
|
78
78
|
"style-dictionary": "^5.0.1",
|
|
79
|
-
zod: "^4.0.
|
|
79
|
+
zod: "^4.0.17",
|
|
80
80
|
"zod-validation-error": "^4.0.1"
|
|
81
81
|
},
|
|
82
82
|
devDependencies: {
|
|
@@ -84,13 +84,13 @@ var package_default = {
|
|
|
84
84
|
"@types/apca-w3": "^0.1.3",
|
|
85
85
|
"@types/chroma-js": "^3.1.1",
|
|
86
86
|
"@types/fs-extra": "^11.0.4",
|
|
87
|
-
"@types/node": "^22.17.
|
|
87
|
+
"@types/node": "^22.17.2",
|
|
88
88
|
"@types/object-hash": "^3.0.6",
|
|
89
89
|
"@types/ramda": "^0.31.0",
|
|
90
|
-
"fs-extra": "^11.3.
|
|
90
|
+
"fs-extra": "^11.3.1",
|
|
91
91
|
tslib: "^2.8.1",
|
|
92
92
|
tsup: "^8.5.0",
|
|
93
|
-
tsx: "^4.20.
|
|
93
|
+
tsx: "^4.20.4",
|
|
94
94
|
typescript: "^5.9.2"
|
|
95
95
|
}
|
|
96
96
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"write.d.ts","sourceRoot":"","sources":["../../../../src/tokens/create/write.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAKpD,eAAO,MAAM,SAAS,GAAI,MAAM,OAAO,WAAkC,CAAC;AAE1E,KAAK,kBAAkB,GAAG;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;IACb,wCAAwC;IACxC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAU,SAAS,kBAAkB,
|
|
1
|
+
{"version":3,"file":"write.d.ts","sourceRoot":"","sources":["../../../../src/tokens/create/write.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAKpD,eAAO,MAAM,SAAS,GAAI,MAAM,OAAO,WAAkC,CAAC;AAE1E,KAAK,kBAAkB,GAAG;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;IACb,wCAAwC;IACxC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAU,SAAS,kBAAkB,kBAsD5D,CAAC"}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
// src/tokens/create/write.ts
|
|
2
2
|
import path from "path";
|
|
3
|
-
import
|
|
3
|
+
import pc2 from "picocolors";
|
|
4
4
|
import * as R from "ramda";
|
|
5
5
|
|
|
6
6
|
// src/utils.ts
|
|
7
7
|
import fs from "fs/promises";
|
|
8
|
-
import
|
|
8
|
+
import pc from "picocolors";
|
|
9
9
|
var mkdir = async (dir, dry) => {
|
|
10
10
|
if (dry) {
|
|
11
|
-
console.log(`${
|
|
11
|
+
console.log(`${pc.blue("mkdir")} ${dir}`);
|
|
12
12
|
return Promise.resolve();
|
|
13
13
|
}
|
|
14
14
|
const exists = await fs.access(dir, fs.constants.F_OK).then(() => true).catch(() => false);
|
|
@@ -19,18 +19,18 @@ var mkdir = async (dir, dry) => {
|
|
|
19
19
|
};
|
|
20
20
|
var writeFile = async (path2, data, dry) => {
|
|
21
21
|
if (dry) {
|
|
22
|
-
console.log(`${
|
|
22
|
+
console.log(`${pc.blue("writeFile")} ${path2}`);
|
|
23
23
|
return Promise.resolve();
|
|
24
24
|
}
|
|
25
25
|
return fs.writeFile(path2, data, { encoding: "utf-8" }).catch((error) => {
|
|
26
|
-
console.error(
|
|
27
|
-
console.error(
|
|
26
|
+
console.error(pc.red(`Error writing file: ${path2}`));
|
|
27
|
+
console.error(pc.red(error));
|
|
28
28
|
throw error;
|
|
29
29
|
});
|
|
30
30
|
};
|
|
31
31
|
var readFile = async (path2, dry, allowFileNotFound) => {
|
|
32
32
|
if (dry) {
|
|
33
|
-
console.log(`${
|
|
33
|
+
console.log(`${pc.blue("readFile")} ${path2}`);
|
|
34
34
|
return Promise.resolve("");
|
|
35
35
|
}
|
|
36
36
|
try {
|
|
@@ -46,7 +46,7 @@ var readFile = async (path2, dry, allowFileNotFound) => {
|
|
|
46
46
|
// package.json
|
|
47
47
|
var package_default = {
|
|
48
48
|
name: "@digdir/designsystemet",
|
|
49
|
-
version: "1.
|
|
49
|
+
version: "1.3.0",
|
|
50
50
|
description: "CLI for Designsystemet",
|
|
51
51
|
author: "Designsystemet team",
|
|
52
52
|
engines: {
|
|
@@ -110,7 +110,6 @@ var package_default = {
|
|
|
110
110
|
"@commander-js/extra-typings": "^14.0.0",
|
|
111
111
|
"@tokens-studio/sd-transforms": "1.3.0",
|
|
112
112
|
"apca-w3": "^0.1.9",
|
|
113
|
-
chalk: "^5.4.1",
|
|
114
113
|
"change-case": "^5.4.4",
|
|
115
114
|
"chroma-js": "^3.1.2",
|
|
116
115
|
"colorjs.io": "^0.6.0-alpha.1",
|
|
@@ -118,10 +117,11 @@ var package_default = {
|
|
|
118
117
|
"fast-glob": "^3.3.3",
|
|
119
118
|
hsluv: "^1.0.1",
|
|
120
119
|
"object-hash": "^3.0.0",
|
|
120
|
+
picocolors: "^1.1.1",
|
|
121
121
|
postcss: "^8.5.6",
|
|
122
122
|
ramda: "^0.31.3",
|
|
123
123
|
"style-dictionary": "^5.0.1",
|
|
124
|
-
zod: "^4.0.
|
|
124
|
+
zod: "^4.0.17",
|
|
125
125
|
"zod-validation-error": "^4.0.1"
|
|
126
126
|
},
|
|
127
127
|
devDependencies: {
|
|
@@ -129,13 +129,13 @@ var package_default = {
|
|
|
129
129
|
"@types/apca-w3": "^0.1.3",
|
|
130
130
|
"@types/chroma-js": "^3.1.1",
|
|
131
131
|
"@types/fs-extra": "^11.0.4",
|
|
132
|
-
"@types/node": "^22.17.
|
|
132
|
+
"@types/node": "^22.17.2",
|
|
133
133
|
"@types/object-hash": "^3.0.6",
|
|
134
134
|
"@types/ramda": "^0.31.0",
|
|
135
|
-
"fs-extra": "^11.3.
|
|
135
|
+
"fs-extra": "^11.3.1",
|
|
136
136
|
tslib: "^2.8.1",
|
|
137
137
|
tsup: "^8.5.0",
|
|
138
|
-
tsx: "^4.20.
|
|
138
|
+
tsx: "^4.20.4",
|
|
139
139
|
typescript: "^5.9.2"
|
|
140
140
|
}
|
|
141
141
|
};
|
|
@@ -518,7 +518,7 @@ var writeTokens = async (options) => {
|
|
|
518
518
|
const targetDir = path.resolve(process.cwd(), String(outDir));
|
|
519
519
|
const $themesPath = path.join(targetDir, "$themes.json");
|
|
520
520
|
const $metadataPath = path.join(targetDir, "$metadata.json");
|
|
521
|
-
const $designsystemetPath = path.join(targetDir, "$designsystemet.
|
|
521
|
+
const $designsystemetPath = path.join(targetDir, "$designsystemet.jsonc");
|
|
522
522
|
let themeObjects = [];
|
|
523
523
|
await mkdir(targetDir, dry);
|
|
524
524
|
try {
|
|
@@ -537,7 +537,7 @@ var writeTokens = async (options) => {
|
|
|
537
537
|
);
|
|
538
538
|
const themes = concatThemeNames(themeObjects);
|
|
539
539
|
console.log(`
|
|
540
|
-
Themes: ${
|
|
540
|
+
Themes: ${pc2.blue(themes.join(", "))}`);
|
|
541
541
|
const $themes = await generate$Themes(["dark", "light"], themes, colors);
|
|
542
542
|
const $metadata = generate$Metadata(["dark", "light"], themes, colors);
|
|
543
543
|
const $designsystemet = generate$Designsystemet();
|
|
@@ -550,9 +550,7 @@ Themes: ${chalk2.blue(themes.join(", "))}`);
|
|
|
550
550
|
const filePath = path.join(targetDir, `${set}.json`);
|
|
551
551
|
await writeFile(filePath, stringify(tokens), dry);
|
|
552
552
|
}
|
|
553
|
-
console.log(
|
|
554
|
-
`Finished creating Designsystem design tokens in ${chalk2.green(outDir)} for theme ${chalk2.blue(themeName)}`
|
|
555
|
-
);
|
|
553
|
+
console.log(`Finished creating Designsystem design tokens in ${pc2.green(outDir)} for theme ${pc2.blue(themeName)}`);
|
|
556
554
|
};
|
|
557
555
|
export {
|
|
558
556
|
stringify,
|
|
@@ -2407,13 +2407,13 @@ var createTokens = async (opts) => {
|
|
|
2407
2407
|
};
|
|
2408
2408
|
|
|
2409
2409
|
// src/tokens/process/output/theme.ts
|
|
2410
|
-
import
|
|
2410
|
+
import pc from "picocolors";
|
|
2411
2411
|
import * as R7 from "ramda";
|
|
2412
2412
|
|
|
2413
2413
|
// package.json
|
|
2414
2414
|
var package_default = {
|
|
2415
2415
|
name: "@digdir/designsystemet",
|
|
2416
|
-
version: "1.
|
|
2416
|
+
version: "1.3.0",
|
|
2417
2417
|
description: "CLI for Designsystemet",
|
|
2418
2418
|
author: "Designsystemet team",
|
|
2419
2419
|
engines: {
|
|
@@ -2477,7 +2477,6 @@ var package_default = {
|
|
|
2477
2477
|
"@commander-js/extra-typings": "^14.0.0",
|
|
2478
2478
|
"@tokens-studio/sd-transforms": "1.3.0",
|
|
2479
2479
|
"apca-w3": "^0.1.9",
|
|
2480
|
-
chalk: "^5.4.1",
|
|
2481
2480
|
"change-case": "^5.4.4",
|
|
2482
2481
|
"chroma-js": "^3.1.2",
|
|
2483
2482
|
"colorjs.io": "^0.6.0-alpha.1",
|
|
@@ -2485,10 +2484,11 @@ var package_default = {
|
|
|
2485
2484
|
"fast-glob": "^3.3.3",
|
|
2486
2485
|
hsluv: "^1.0.1",
|
|
2487
2486
|
"object-hash": "^3.0.0",
|
|
2487
|
+
picocolors: "^1.1.1",
|
|
2488
2488
|
postcss: "^8.5.6",
|
|
2489
2489
|
ramda: "^0.31.3",
|
|
2490
2490
|
"style-dictionary": "^5.0.1",
|
|
2491
|
-
zod: "^4.0.
|
|
2491
|
+
zod: "^4.0.17",
|
|
2492
2492
|
"zod-validation-error": "^4.0.1"
|
|
2493
2493
|
},
|
|
2494
2494
|
devDependencies: {
|
|
@@ -2496,13 +2496,13 @@ var package_default = {
|
|
|
2496
2496
|
"@types/apca-w3": "^0.1.3",
|
|
2497
2497
|
"@types/chroma-js": "^3.1.1",
|
|
2498
2498
|
"@types/fs-extra": "^11.0.4",
|
|
2499
|
-
"@types/node": "^22.17.
|
|
2499
|
+
"@types/node": "^22.17.2",
|
|
2500
2500
|
"@types/object-hash": "^3.0.6",
|
|
2501
2501
|
"@types/ramda": "^0.31.0",
|
|
2502
|
-
"fs-extra": "^11.3.
|
|
2502
|
+
"fs-extra": "^11.3.1",
|
|
2503
2503
|
tslib: "^2.8.1",
|
|
2504
2504
|
tsup: "^8.5.0",
|
|
2505
|
-
tsx: "^4.20.
|
|
2505
|
+
tsx: "^4.20.4",
|
|
2506
2506
|
typescript: "^5.9.2"
|
|
2507
2507
|
}
|
|
2508
2508
|
};
|
|
@@ -2543,10 +2543,10 @@ var createThemeCSSFiles = ({
|
|
|
2543
2543
|
});
|
|
2544
2544
|
if (sortIndex === -1) {
|
|
2545
2545
|
console.error(
|
|
2546
|
-
|
|
2546
|
+
pc.yellow(`WARNING: CSS section does not have a defined sort order: ${filePath.replace(".css", "")}`)
|
|
2547
2547
|
);
|
|
2548
2548
|
console.log(
|
|
2549
|
-
|
|
2549
|
+
pc.dim(
|
|
2550
2550
|
`
|
|
2551
2551
|
The section will currently be added to the end of the entry file, but the exact
|
|
2552
2552
|
order may change due to nondeterminism.`.trim()
|
|
@@ -2579,7 +2579,7 @@ ${fileHeader}
|
|
|
2579
2579
|
};
|
|
2580
2580
|
|
|
2581
2581
|
// src/tokens/process/platform.ts
|
|
2582
|
-
import
|
|
2582
|
+
import pc3 from "picocolors";
|
|
2583
2583
|
import * as R17 from "ramda";
|
|
2584
2584
|
import StyleDictionary2 from "style-dictionary";
|
|
2585
2585
|
|
|
@@ -2900,7 +2900,7 @@ var sizeRem = {
|
|
|
2900
2900
|
const value = getValue(token);
|
|
2901
2901
|
if (isPx(value)) {
|
|
2902
2902
|
const baseFont = config.basePxFontSize || 16;
|
|
2903
|
-
const size = parseInt(value);
|
|
2903
|
+
const size = parseInt(value, 10);
|
|
2904
2904
|
if (size === 0) {
|
|
2905
2905
|
return "0";
|
|
2906
2906
|
}
|
|
@@ -2935,7 +2935,7 @@ var unitless = {
|
|
|
2935
2935
|
type: "value",
|
|
2936
2936
|
transitive: true,
|
|
2937
2937
|
filter: (token) => pathStartsWithOneOf(["size", "_size"], token),
|
|
2938
|
-
transform: (token) => parseInt(getValue(token))
|
|
2938
|
+
transform: (token) => parseInt(getValue(token), 10)
|
|
2939
2939
|
};
|
|
2940
2940
|
|
|
2941
2941
|
// src/tokens/process/configs/shared.ts
|
|
@@ -3120,8 +3120,8 @@ var typographyVariables = ({ theme, typography: typography2 }) => {
|
|
|
3120
3120
|
};
|
|
3121
3121
|
|
|
3122
3122
|
// src/tokens/process/utils/getMultidimensionalThemes.ts
|
|
3123
|
-
import chalk2 from "chalk";
|
|
3124
3123
|
import { kebabCase } from "change-case";
|
|
3124
|
+
import pc2 from "picocolors";
|
|
3125
3125
|
import * as R15 from "ramda";
|
|
3126
3126
|
var getMultidimensionalThemes = (processed$themes, dimensions) => {
|
|
3127
3127
|
const verboseLogging = buildOptions?.verbose;
|
|
@@ -3131,8 +3131,8 @@ var getMultidimensionalThemes = (processed$themes, dimensions) => {
|
|
|
3131
3131
|
const keys2 = R15.keys(grouped$themes);
|
|
3132
3132
|
const nonDependentKeys = keys2.filter((x) => ![...ALL_DEPENDENT_ON, ...dimensions].includes(x));
|
|
3133
3133
|
if (verboseLogging) {
|
|
3134
|
-
console.log(
|
|
3135
|
-
console.log(
|
|
3134
|
+
console.log(pc2.cyan(`\u{1F50E} Finding theme permutations for ${dimensions}`));
|
|
3135
|
+
console.log(pc2.cyan(` (ignoring permutations for ${nonDependentKeys})`));
|
|
3136
3136
|
}
|
|
3137
3137
|
return permutations.filter((val) => {
|
|
3138
3138
|
const filters = nonDependentKeys.map((x) => val.permutation[x] === grouped$themes[x][0].name);
|
|
@@ -3359,18 +3359,18 @@ async function processPlatform(options) {
|
|
|
3359
3359
|
const UNSAFE_DEFAULT_COLOR = process.env.UNSAFE_DEFAULT_COLOR ?? "";
|
|
3360
3360
|
if (UNSAFE_DEFAULT_COLOR) {
|
|
3361
3361
|
console.warn(
|
|
3362
|
-
|
|
3362
|
+
pc3.yellow(
|
|
3363
3363
|
`
|
|
3364
|
-
\u26A0\uFE0F UNSAFE_DEFAULT_COLOR is set to ${
|
|
3364
|
+
\u26A0\uFE0F UNSAFE_DEFAULT_COLOR is set to ${pc3.blue(UNSAFE_DEFAULT_COLOR)}. This will override the default color.`
|
|
3365
3365
|
)
|
|
3366
3366
|
);
|
|
3367
3367
|
}
|
|
3368
3368
|
const UNSAFE_COLOR_GROUPS = Array.from(process.env.UNSAFE_COLOR_GROUPS?.split(",") ?? []);
|
|
3369
3369
|
if (UNSAFE_COLOR_GROUPS.length > 0) {
|
|
3370
3370
|
console.warn(
|
|
3371
|
-
|
|
3371
|
+
pc3.yellow(
|
|
3372
3372
|
`
|
|
3373
|
-
\u26A0\uFE0F UNSAFE_COLOR_GROUPS is set to ${
|
|
3373
|
+
\u26A0\uFE0F UNSAFE_COLOR_GROUPS is set to ${pc3.blue(`[${UNSAFE_COLOR_GROUPS.join(", ")}]`)}. This will override the default color groups.`
|
|
3374
3374
|
)
|
|
3375
3375
|
);
|
|
3376
3376
|
}
|
|
@@ -3385,7 +3385,7 @@ async function processPlatform(options) {
|
|
|
3385
3385
|
}
|
|
3386
3386
|
if (buildOptions.defaultColor) {
|
|
3387
3387
|
console.log(`
|
|
3388
|
-
\u{1F3A8} Using ${
|
|
3388
|
+
\u{1F3A8} Using ${pc3.blue(buildOptions.defaultColor)} as default color`);
|
|
3389
3389
|
}
|
|
3390
3390
|
const buildAndSdConfigs = R17.map((buildConfig) => {
|
|
3391
3391
|
const sdConfigs = getConfigsForThemeDimensions(
|
|
@@ -3429,7 +3429,7 @@ async function processPlatform(options) {
|
|
|
3429
3429
|
}
|
|
3430
3430
|
if (sdConfigs.length > 0) {
|
|
3431
3431
|
console.log(`
|
|
3432
|
-
\u{1F371} Building ${
|
|
3432
|
+
\u{1F371} Building ${pc3.green(buildConfig.name ?? buildName)}`);
|
|
3433
3433
|
const results = await Promise.all(
|
|
3434
3434
|
sdConfigs.map(async (sdConfig) => {
|
|
3435
3435
|
const { config, permutation } = sdConfig;
|