@digdir/designsystemet 1.1.3 → 1.1.5
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/designsystemet.js +130 -186
- package/dist/src/index.js +88 -145
- package/dist/src/scripts/update-preview-tokens.d.ts +3 -0
- package/dist/src/scripts/update-preview-tokens.d.ts.map +1 -0
- package/dist/src/scripts/update-preview-tokens.js +3446 -0
- package/dist/src/tokens/build.d.ts +1 -1
- package/dist/src/tokens/build.d.ts.map +1 -1
- package/dist/src/tokens/build.js +98 -154
- package/dist/src/tokens/create/generators/$designsystemet.js +6 -6
- package/dist/src/tokens/create/write.js +6 -6
- package/dist/src/tokens/format.d.ts +1 -1
- package/dist/src/tokens/format.d.ts.map +1 -1
- package/dist/src/tokens/format.js +88 -145
- package/dist/src/tokens/index.js +88 -145
- package/dist/src/tokens/process/configs/color.js +234 -293
- package/dist/src/tokens/process/configs/semantic.js +509 -113
- package/dist/src/tokens/process/configs/typography.d.ts.map +1 -1
- package/dist/src/tokens/process/configs/typography.js +504 -110
- package/dist/src/tokens/process/configs.d.ts +0 -1
- package/dist/src/tokens/process/configs.d.ts.map +1 -1
- package/dist/src/tokens/process/configs.js +231 -290
- package/dist/src/tokens/process/formats/css/color.d.ts.map +1 -1
- package/dist/src/tokens/process/formats/css/color.js +644 -12
- package/dist/src/tokens/process/formats/css/semantic.d.ts.map +1 -1
- package/dist/src/tokens/process/formats/css/semantic.js +679 -23
- package/dist/src/tokens/process/formats/css/typography.d.ts.map +1 -1
- package/dist/src/tokens/process/formats/css/typography.js +741 -8
- package/dist/src/tokens/process/formats/css.js +549 -38
- package/dist/src/tokens/process/output/declarations.js +60 -121
- package/dist/src/tokens/process/output/theme.js +6 -6
- package/dist/src/tokens/process/platform.d.ts +9 -4
- package/dist/src/tokens/process/platform.d.ts.map +1 -1
- package/dist/src/tokens/process/platform.js +76 -133
- package/dist/src/tokens/process/utils/getMultidimensionalThemes.js +62 -123
- package/package.json +6 -6
- package/dist/src/tokens/process/configs/storefront.d.ts +0 -3
- package/dist/src/tokens/process/configs/storefront.d.ts.map +0 -1
- package/dist/src/tokens/process/configs/storefront.js +0 -234
- package/dist/src/tokens/process/formats/js-tokens.d.ts +0 -6
- package/dist/src/tokens/process/formats/js-tokens.d.ts.map +0 -1
- package/dist/src/tokens/process/formats/js-tokens.js +0 -123
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
// bin/designsystemet.ts
|
|
4
4
|
import { Argument, createCommand, program } from "@commander-js/extra-typings";
|
|
5
5
|
import chalk11 from "chalk";
|
|
6
|
-
import * as
|
|
6
|
+
import * as R24 from "ramda";
|
|
7
7
|
|
|
8
8
|
// src/colors/colorMetadata.ts
|
|
9
9
|
import * as R from "ramda";
|
|
@@ -862,14 +862,14 @@ var migrations_default = {
|
|
|
862
862
|
// src/tokens/build.ts
|
|
863
863
|
import path from "path";
|
|
864
864
|
import chalk7 from "chalk";
|
|
865
|
-
import * as
|
|
865
|
+
import * as R16 from "ramda";
|
|
866
866
|
|
|
867
867
|
// src/tokens/process/output/declarations.ts
|
|
868
868
|
import chalk5 from "chalk";
|
|
869
869
|
|
|
870
870
|
// src/tokens/process/platform.ts
|
|
871
871
|
import chalk4 from "chalk";
|
|
872
|
-
import * as
|
|
872
|
+
import * as R14 from "ramda";
|
|
873
873
|
import StyleDictionary2 from "style-dictionary";
|
|
874
874
|
|
|
875
875
|
// src/tokens/types.ts
|
|
@@ -880,7 +880,7 @@ var colorCategories = {
|
|
|
880
880
|
|
|
881
881
|
// src/tokens/process/configs.ts
|
|
882
882
|
import { register } from "@tokens-studio/sd-transforms";
|
|
883
|
-
import * as
|
|
883
|
+
import * as R13 from "ramda";
|
|
884
884
|
import StyleDictionary from "style-dictionary";
|
|
885
885
|
|
|
886
886
|
// src/tokens/utils.ts
|
|
@@ -991,7 +991,11 @@ var colorScheme = {
|
|
|
991
991
|
(t) => !isColorCategoryToken(t)
|
|
992
992
|
])
|
|
993
993
|
);
|
|
994
|
-
const
|
|
994
|
+
const formattedMap = filteredAllTokens.map((token) => ({
|
|
995
|
+
token,
|
|
996
|
+
formatted: format(token)
|
|
997
|
+
}));
|
|
998
|
+
const formattedTokens = formattedMap.map(R6.view(R6.lensProp("formatted"))).join("\n");
|
|
995
999
|
const content = `{
|
|
996
1000
|
${formattedTokens}
|
|
997
1001
|
${colorSchemeProperty}}
|
|
@@ -1009,7 +1013,8 @@ var colorCategory = {
|
|
|
1009
1013
|
name: "ds/css-colorcategory",
|
|
1010
1014
|
format: async ({ dictionary, options, platform }) => {
|
|
1011
1015
|
const { outputReferences, usesDtcg } = options;
|
|
1012
|
-
const { selector, layer } = platform;
|
|
1016
|
+
const { selector, layer, files } = platform;
|
|
1017
|
+
const destination = files?.[0]?.destination;
|
|
1013
1018
|
const format = R6.compose(
|
|
1014
1019
|
createPropertyFormatter({
|
|
1015
1020
|
outputReferences,
|
|
@@ -1026,7 +1031,12 @@ var colorCategory = {
|
|
|
1026
1031
|
}
|
|
1027
1032
|
})
|
|
1028
1033
|
);
|
|
1029
|
-
const
|
|
1034
|
+
const formattedMap = dictionary.allTokens.map((token) => ({
|
|
1035
|
+
token,
|
|
1036
|
+
formatted: format(token)
|
|
1037
|
+
}));
|
|
1038
|
+
buildOptions.buildTokenFormats[destination] = formattedMap;
|
|
1039
|
+
const formattedTokens = formattedMap.map(R6.view(R6.lensProp("formatted"))).join("\n");
|
|
1030
1040
|
const content = `{
|
|
1031
1041
|
${formattedTokens}
|
|
1032
1042
|
}
|
|
@@ -1057,30 +1067,30 @@ var overrideSizingFormula = (format, token) => {
|
|
|
1057
1067
|
calc
|
|
1058
1068
|
};
|
|
1059
1069
|
};
|
|
1060
|
-
var formatSizingTokens = (format, tokens) =>
|
|
1061
|
-
|
|
1062
|
-
(
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1070
|
+
var formatSizingTokens = (format, tokens) => R7.reduce(
|
|
1071
|
+
(acc, token) => {
|
|
1072
|
+
const { round, calc, name } = overrideSizingFormula(format, token);
|
|
1073
|
+
return {
|
|
1074
|
+
tokens: [...acc.tokens, token],
|
|
1075
|
+
round: [...acc.round, `${name}: ${round};`],
|
|
1076
|
+
calc: [...acc.calc, `${name}: ${calc};`]
|
|
1077
|
+
};
|
|
1078
|
+
},
|
|
1079
|
+
{ tokens: [], round: [], calc: [] },
|
|
1080
|
+
tokens
|
|
1081
|
+
);
|
|
1082
|
+
var sizingTemplate = ({ round, calc }) => `
|
|
1073
1083
|
${calc.join("\n")}
|
|
1074
1084
|
|
|
1075
1085
|
@supports (width: round(down, .1em, 1px)) {
|
|
1076
1086
|
${round.join("\n")}
|
|
1077
1087
|
}`;
|
|
1078
|
-
};
|
|
1079
1088
|
var semantic = {
|
|
1080
1089
|
name: "ds/css-semantic",
|
|
1081
1090
|
format: async ({ dictionary, options, platform }) => {
|
|
1082
1091
|
const { outputReferences, usesDtcg } = options;
|
|
1083
|
-
const { selector, layer } = platform;
|
|
1092
|
+
const { selector, layer, files } = platform;
|
|
1093
|
+
const destination = files?.[0]?.destination;
|
|
1084
1094
|
const format = createPropertyFormatter2({
|
|
1085
1095
|
outputReferences,
|
|
1086
1096
|
dictionary,
|
|
@@ -1093,7 +1103,18 @@ var semantic = {
|
|
|
1093
1103
|
(t) => pathStartsWithOneOf(["_size"], t) && isDigit(t.path[1]),
|
|
1094
1104
|
filteredTokens
|
|
1095
1105
|
);
|
|
1096
|
-
const
|
|
1106
|
+
const formattedSizingTokens = formatSizingTokens(format, sizingTokens);
|
|
1107
|
+
const formattedMap = restTokens.map((token) => ({
|
|
1108
|
+
token,
|
|
1109
|
+
formatted: format(token)
|
|
1110
|
+
}));
|
|
1111
|
+
const formattedSizingMap = formattedSizingTokens.round.map((t, i) => ({
|
|
1112
|
+
token: formattedSizingTokens.tokens[i],
|
|
1113
|
+
formatted: t
|
|
1114
|
+
}));
|
|
1115
|
+
buildOptions.buildTokenFormats[destination] = [...formattedMap, ...formattedSizingMap];
|
|
1116
|
+
const sizingSnippet = sizingTemplate(formattedSizingTokens);
|
|
1117
|
+
const formattedTokens = formattedMap.map(R7.view(R7.lensProp("formatted"))).concat(sizingSnippet);
|
|
1097
1118
|
const content = `{
|
|
1098
1119
|
${formattedTokens.join("\n")}
|
|
1099
1120
|
}
|
|
@@ -1118,7 +1139,8 @@ var typography = {
|
|
|
1118
1139
|
name: "ds/css-typography",
|
|
1119
1140
|
format: async ({ dictionary, options, platform }) => {
|
|
1120
1141
|
const { outputReferences, usesDtcg } = options;
|
|
1121
|
-
const { selector, layer } = platform;
|
|
1142
|
+
const { selector, layer, files } = platform;
|
|
1143
|
+
const destination = files?.[0]?.destination;
|
|
1122
1144
|
const format = createPropertyFormatter3({
|
|
1123
1145
|
outputReferences,
|
|
1124
1146
|
dictionary,
|
|
@@ -1126,7 +1148,12 @@ var typography = {
|
|
|
1126
1148
|
usesDtcg
|
|
1127
1149
|
});
|
|
1128
1150
|
const filteredTokens = R8.reject(typographyFontFamilyPredicate, dictionary.allTokens);
|
|
1129
|
-
const
|
|
1151
|
+
const formattedMap = filteredTokens.map((token) => ({
|
|
1152
|
+
token,
|
|
1153
|
+
formatted: format(token)
|
|
1154
|
+
}));
|
|
1155
|
+
buildOptions.buildTokenFormats[destination] = formattedMap;
|
|
1156
|
+
const formattedTokens = formattedMap.map(R8.view(R8.lensProp("formatted"))).join("\n");
|
|
1130
1157
|
const content = selector ? `${selector} {
|
|
1131
1158
|
${formattedTokens}
|
|
1132
1159
|
}` : formattedTokens;
|
|
@@ -1333,90 +1360,6 @@ var semanticVariables = ({ theme }) => {
|
|
|
1333
1360
|
};
|
|
1334
1361
|
};
|
|
1335
1362
|
|
|
1336
|
-
// src/tokens/process/configs/storefront.ts
|
|
1337
|
-
import * as R13 from "ramda";
|
|
1338
|
-
import { outputReferencesFilter as outputReferencesFilter2 } from "style-dictionary/utils";
|
|
1339
|
-
|
|
1340
|
-
// src/tokens/process/formats/js-tokens.ts
|
|
1341
|
-
import * as R12 from "ramda";
|
|
1342
|
-
import { createPropertyFormatter as createPropertyFormatter4, fileHeader } from "style-dictionary/utils";
|
|
1343
|
-
var groupByType = R12.groupBy((token) => getType(token));
|
|
1344
|
-
var removeUnwatedTokens = R12.pipe(
|
|
1345
|
-
R12.reject((token) => isColorCategoryToken(token)),
|
|
1346
|
-
R12.reject((token) => R12.any((path5) => path5.startsWith("_"))(token.path))
|
|
1347
|
-
);
|
|
1348
|
-
var dissocExtensions = R12.pipe(R12.dissoc("$extensions"), R12.dissocPath(["original", "$extensions"]));
|
|
1349
|
-
var removeUnwatedProps = R12.map((token) => dissocExtensions(token));
|
|
1350
|
-
var toCssVarName = R12.pipe(R12.split(":"), R12.head, R12.trim);
|
|
1351
|
-
var jsTokens = {
|
|
1352
|
-
name: "ds/js-tokens",
|
|
1353
|
-
format: async ({ dictionary, file, options }) => {
|
|
1354
|
-
const { usesDtcg, outputReferences } = options;
|
|
1355
|
-
const format = createPropertyFormatter4({
|
|
1356
|
-
outputReferences,
|
|
1357
|
-
dictionary,
|
|
1358
|
-
format: "css",
|
|
1359
|
-
usesDtcg
|
|
1360
|
-
});
|
|
1361
|
-
const formatTokens = R12.map((token) => {
|
|
1362
|
-
if (pathStartsWithOneOf(["size", "_size"], token)) {
|
|
1363
|
-
const { calc, name } = overrideSizingFormula(format, token);
|
|
1364
|
-
return {
|
|
1365
|
-
...token,
|
|
1366
|
-
name: name.trim(),
|
|
1367
|
-
$value: calc.trim()
|
|
1368
|
-
};
|
|
1369
|
-
}
|
|
1370
|
-
return {
|
|
1371
|
-
...token,
|
|
1372
|
-
name: toCssVarName(format(token))
|
|
1373
|
-
};
|
|
1374
|
-
});
|
|
1375
|
-
const processTokens = R12.pipe(removeUnwatedTokens, removeUnwatedProps, formatTokens, groupByType);
|
|
1376
|
-
const tokens = processTokens(inlineTokens(isInlineTokens, dictionary.allTokens));
|
|
1377
|
-
const content = Object.entries(tokens).map(
|
|
1378
|
-
([name, token]) => `export const ${name} = ${JSON.stringify(token, null, 2).replace(/"([^"]+)":/g, "$1:")}
|
|
1379
|
-
`
|
|
1380
|
-
).join("\n");
|
|
1381
|
-
return fileHeader({ file }).then((fileHeaderText) => fileHeaderText + content);
|
|
1382
|
-
}
|
|
1383
|
-
};
|
|
1384
|
-
|
|
1385
|
-
// src/tokens/process/configs/storefront.ts
|
|
1386
|
-
var typescriptTokens = ({ "color-scheme": colorScheme2, theme }) => {
|
|
1387
|
-
return {
|
|
1388
|
-
preprocessors: ["tokens-studio"],
|
|
1389
|
-
platforms: {
|
|
1390
|
-
ts: {
|
|
1391
|
-
prefix,
|
|
1392
|
-
basePxFontSize,
|
|
1393
|
-
transforms: dsTransformers,
|
|
1394
|
-
buildPath: `${theme}/`,
|
|
1395
|
-
files: [
|
|
1396
|
-
{
|
|
1397
|
-
destination: `${colorScheme2}.ts`,
|
|
1398
|
-
format: jsTokens.name,
|
|
1399
|
-
filter: (token) => {
|
|
1400
|
-
if (pathStartsWithOneOf(["border-width", "letter-spacing", "border-radius"], token) && !R13.includes("semantic", token.filePath))
|
|
1401
|
-
return false;
|
|
1402
|
-
const isSemanticColor = R13.includes("semantic", token.filePath) && typeEquals(["color"], token);
|
|
1403
|
-
const wantedTypes = typeEquals(["shadow", "dimension", "typography", "opacity"], token);
|
|
1404
|
-
return isSemanticColor || wantedTypes;
|
|
1405
|
-
}
|
|
1406
|
-
}
|
|
1407
|
-
],
|
|
1408
|
-
options: {
|
|
1409
|
-
outputReferences: (token, options) => {
|
|
1410
|
-
const include = pathStartsWithOneOf(["border-radius"], token);
|
|
1411
|
-
const isWantedSize = pathStartsWithOneOf(["size", "_size"], token) && isDigit(token.path[1]);
|
|
1412
|
-
return (include || isWantedSize) && outputReferencesFilter2(token, options);
|
|
1413
|
-
}
|
|
1414
|
-
}
|
|
1415
|
-
}
|
|
1416
|
-
}
|
|
1417
|
-
};
|
|
1418
|
-
};
|
|
1419
|
-
|
|
1420
1363
|
// src/tokens/process/configs/typography.ts
|
|
1421
1364
|
import { expandTypesMap } from "@tokens-studio/sd-transforms";
|
|
1422
1365
|
var typographyVariables = ({ theme, typography: typography2 }) => {
|
|
@@ -1443,6 +1386,7 @@ var typographyVariables = ({ theme, typography: typography2 }) => {
|
|
|
1443
1386
|
sizeRem.name,
|
|
1444
1387
|
"ts/size/lineheight",
|
|
1445
1388
|
"ts/typography/fontWeight",
|
|
1389
|
+
"ts/size/css/letterspacing",
|
|
1446
1390
|
typographyName.name
|
|
1447
1391
|
],
|
|
1448
1392
|
files: [
|
|
@@ -1630,13 +1574,13 @@ var TypographyValues;
|
|
|
1630
1574
|
// src/tokens/process/utils/getMultidimensionalThemes.ts
|
|
1631
1575
|
import chalk3 from "chalk";
|
|
1632
1576
|
import { kebabCase } from "change-case";
|
|
1633
|
-
import * as
|
|
1577
|
+
import * as R12 from "ramda";
|
|
1634
1578
|
var getMultidimensionalThemes = (processed$themes, dimensions) => {
|
|
1635
1579
|
const verboseLogging = buildOptions?.verbose;
|
|
1636
1580
|
const grouped$themes = groupThemes(processed$themes);
|
|
1637
1581
|
const permutations = permutateThemes(grouped$themes);
|
|
1638
1582
|
const ALL_DEPENDENT_ON = ["theme"];
|
|
1639
|
-
const keys3 =
|
|
1583
|
+
const keys3 = R12.keys(grouped$themes);
|
|
1640
1584
|
const nonDependentKeys = keys3.filter((x) => ![...ALL_DEPENDENT_ON, ...dimensions].includes(x));
|
|
1641
1585
|
if (verboseLogging) {
|
|
1642
1586
|
console.log(chalk3.cyan(`\u{1F50E} Finding theme permutations for ${dimensions}`));
|
|
@@ -1676,7 +1620,7 @@ function groupThemes(themes) {
|
|
|
1676
1620
|
}
|
|
1677
1621
|
return groups;
|
|
1678
1622
|
}
|
|
1679
|
-
var hasUnknownProps =
|
|
1623
|
+
var hasUnknownProps = R12.pipe(R12.values, R12.none(R12.equals("unknown")), R12.not);
|
|
1680
1624
|
function permutateThemes(groups) {
|
|
1681
1625
|
const separator = "_";
|
|
1682
1626
|
const permutations = cartesian(Object.values(groups));
|
|
@@ -1686,8 +1630,8 @@ function permutateThemes(groups) {
|
|
|
1686
1630
|
const { group, name, selectedTokenSets } = theme;
|
|
1687
1631
|
let updatedPermutation = acc.permutation;
|
|
1688
1632
|
if (group) {
|
|
1689
|
-
const groupProp =
|
|
1690
|
-
updatedPermutation =
|
|
1633
|
+
const groupProp = R12.lensProp(group);
|
|
1634
|
+
updatedPermutation = R12.set(groupProp, name, updatedPermutation);
|
|
1691
1635
|
}
|
|
1692
1636
|
const updatedName = `${String(acc.name)}${acc ? separator : ""}${name}`;
|
|
1693
1637
|
const sets = [...acc.selectedTokenSets, ...filterTokenSets(selectedTokenSets)];
|
|
@@ -1746,7 +1690,6 @@ StyleDictionary.registerTransform(sizeRem);
|
|
|
1746
1690
|
StyleDictionary.registerTransform(typographyName);
|
|
1747
1691
|
StyleDictionary.registerTransform(resolveMath);
|
|
1748
1692
|
StyleDictionary.registerTransform(unitless);
|
|
1749
|
-
StyleDictionary.registerFormat(jsTokens);
|
|
1750
1693
|
for (const format of Object.values(formats)) {
|
|
1751
1694
|
StyleDictionary.registerFormat(format);
|
|
1752
1695
|
}
|
|
@@ -1760,8 +1703,7 @@ var configs = {
|
|
|
1760
1703
|
warningColorVariables: colorCategoryVariables({ category: "builtin", color: "warning" }),
|
|
1761
1704
|
infoColorVariables: colorCategoryVariables({ category: "builtin", color: "info" }),
|
|
1762
1705
|
typographyVariables,
|
|
1763
|
-
semanticVariables
|
|
1764
|
-
typescriptTokens
|
|
1706
|
+
semanticVariables
|
|
1765
1707
|
};
|
|
1766
1708
|
var getConfigsForThemeDimensions = (getConfig, processed$themes, dimensions, options) => {
|
|
1767
1709
|
const { tokensDir, tokenSets } = options;
|
|
@@ -1777,7 +1719,7 @@ var getConfigsForThemeDimensions = (getConfig, processed$themes, dimensions, opt
|
|
|
1777
1719
|
obj.filePath = tokenSet;
|
|
1778
1720
|
}
|
|
1779
1721
|
});
|
|
1780
|
-
tokenSource.tokens =
|
|
1722
|
+
tokenSource.tokens = R13.mergeDeepRight(tokenSource.tokens, tokensWithFilePath);
|
|
1781
1723
|
}
|
|
1782
1724
|
}
|
|
1783
1725
|
} else {
|
|
@@ -1809,6 +1751,7 @@ var getConfigsForThemeDimensions = (getConfig, processed$themes, dimensions, opt
|
|
|
1809
1751
|
// src/tokens/process/platform.ts
|
|
1810
1752
|
var initResult = {
|
|
1811
1753
|
formatted: [],
|
|
1754
|
+
tokens: [],
|
|
1812
1755
|
permutation: {
|
|
1813
1756
|
"color-scheme": "",
|
|
1814
1757
|
"main-color": "",
|
|
@@ -1819,7 +1762,11 @@ var initResult = {
|
|
|
1819
1762
|
typography: ""
|
|
1820
1763
|
}
|
|
1821
1764
|
};
|
|
1822
|
-
var buildOptions
|
|
1765
|
+
var buildOptions = {
|
|
1766
|
+
verbose: false,
|
|
1767
|
+
processed$themes: [],
|
|
1768
|
+
buildTokenFormats: {}
|
|
1769
|
+
};
|
|
1823
1770
|
var sd = new StyleDictionary2();
|
|
1824
1771
|
var buildConfigs = {
|
|
1825
1772
|
typography: { getConfig: configs.typographyVariables, dimensions: ["typography"] },
|
|
@@ -1852,19 +1799,15 @@ var buildConfigs = {
|
|
|
1852
1799
|
log: ({ permutation: { theme } }) => `${theme} - info`
|
|
1853
1800
|
},
|
|
1854
1801
|
semantic: { getConfig: configs.semanticVariables, dimensions: ["semantic"] }
|
|
1855
|
-
// storefront: {
|
|
1856
|
-
// name: 'Storefront preview tokens',
|
|
1857
|
-
// getConfig: configs.typescriptTokens,
|
|
1858
|
-
// dimensions: ['color-scheme'],
|
|
1859
|
-
// options: { outPath: path.resolve('../../apps/storefront/tokens') },
|
|
1860
|
-
// enabled: () => buildOptions?.preview ?? false,
|
|
1861
|
-
// },
|
|
1862
1802
|
};
|
|
1863
1803
|
async function processPlatform(options) {
|
|
1864
1804
|
const { type, processed$themes } = options;
|
|
1865
1805
|
const platform = "css";
|
|
1866
1806
|
const tokenSets = type === "format" ? options.tokenSets : void 0;
|
|
1867
1807
|
const tokensDir = type === "build" ? options.tokensDir : void 0;
|
|
1808
|
+
const filteredProcessed$themes = processed$themes.filter(
|
|
1809
|
+
(theme) => R14.not(theme.group === "size" && theme.name !== "medium")
|
|
1810
|
+
);
|
|
1868
1811
|
const UNSAFE_DEFAULT_COLOR = process.env.UNSAFE_DEFAULT_COLOR ?? "";
|
|
1869
1812
|
if (UNSAFE_DEFAULT_COLOR) {
|
|
1870
1813
|
console.warn(
|
|
@@ -1887,19 +1830,16 @@ async function processPlatform(options) {
|
|
|
1887
1830
|
buildOptions = options;
|
|
1888
1831
|
buildOptions.defaultColor = UNSAFE_DEFAULT_COLOR;
|
|
1889
1832
|
buildOptions.colorGroups = colorGroups;
|
|
1890
|
-
const filteredProcessed$themes = processed$themes.filter(
|
|
1891
|
-
(theme) => R16.not(theme.group === "size" && theme.name !== "medium")
|
|
1892
|
-
);
|
|
1893
|
-
const customColors = getCustomColors(filteredProcessed$themes, colorGroups);
|
|
1894
1833
|
if (!buildOptions.defaultColor) {
|
|
1895
|
-
const
|
|
1834
|
+
const customColors = getCustomColors(filteredProcessed$themes, colorGroups);
|
|
1835
|
+
const firstMainColor = R14.head(customColors);
|
|
1896
1836
|
buildOptions.defaultColor = firstMainColor;
|
|
1897
1837
|
}
|
|
1898
1838
|
if (buildOptions.defaultColor) {
|
|
1899
1839
|
console.log(`
|
|
1900
1840
|
\u{1F3A8} Using ${chalk4.blue(buildOptions.defaultColor)} as default color`);
|
|
1901
1841
|
}
|
|
1902
|
-
const buildAndSdConfigs =
|
|
1842
|
+
const buildAndSdConfigs = R14.map((buildConfig) => {
|
|
1903
1843
|
const sdConfigs = getConfigsForThemeDimensions(
|
|
1904
1844
|
buildConfig.getConfig,
|
|
1905
1845
|
filteredProcessed$themes,
|
|
@@ -1935,7 +1875,7 @@ async function processPlatform(options) {
|
|
|
1935
1875
|
typography: [initResult]
|
|
1936
1876
|
};
|
|
1937
1877
|
try {
|
|
1938
|
-
for (const [buildName, { buildConfig, sdConfigs }] of
|
|
1878
|
+
for (const [buildName, { buildConfig, sdConfigs }] of R14.toPairs(buildAndSdConfigs)) {
|
|
1939
1879
|
if (!(buildConfig.enabled?.() ?? true)) {
|
|
1940
1880
|
continue;
|
|
1941
1881
|
}
|
|
@@ -1947,13 +1887,16 @@ async function processPlatform(options) {
|
|
|
1947
1887
|
const { config, permutation } = sdConfig;
|
|
1948
1888
|
const modes = ["theme", ...buildConfig.dimensions];
|
|
1949
1889
|
const modeMessage = modes.map((x) => permutation[x]).join(" - ");
|
|
1950
|
-
const logMessage =
|
|
1890
|
+
const logMessage = R14.isNil(buildConfig.log) ? modeMessage : buildConfig?.log(sdConfig);
|
|
1951
1891
|
console.log(logMessage);
|
|
1952
1892
|
const sdOptions = { cache: true };
|
|
1953
1893
|
const sdExtended = await sd.extend(config);
|
|
1894
|
+
const formatted = await sdExtended.formatPlatform(platform, sdOptions);
|
|
1895
|
+
const tokens = (await sdExtended.getPlatformTokens(platform, sdOptions)).allTokens;
|
|
1954
1896
|
const result = {
|
|
1955
1897
|
permutation,
|
|
1956
|
-
formatted
|
|
1898
|
+
formatted,
|
|
1899
|
+
tokens
|
|
1957
1900
|
};
|
|
1958
1901
|
return Promise.resolve(result);
|
|
1959
1902
|
})
|
|
@@ -1990,7 +1933,7 @@ import type {} from '@digdir/designsystemet-react/colors';
|
|
|
1990
1933
|
|
|
1991
1934
|
declare module '@digdir/designsystemet-react/colors' {
|
|
1992
1935
|
export interface MainAndSupportColors {
|
|
1993
|
-
${colors2.map((color) => ` ${color}: never;`).join("\n")}
|
|
1936
|
+
${colors2.map((color) => ` ${color.includes("-") ? `'${color}'` : color}: never;`).join("\n")}
|
|
1994
1937
|
}
|
|
1995
1938
|
}
|
|
1996
1939
|
`.trimStart();
|
|
@@ -2056,16 +1999,16 @@ ${dynamicColors}`;
|
|
|
2056
1999
|
|
|
2057
2000
|
// src/tokens/process/output/theme.ts
|
|
2058
2001
|
import chalk6 from "chalk";
|
|
2059
|
-
import * as
|
|
2002
|
+
import * as R15 from "ramda";
|
|
2060
2003
|
|
|
2061
2004
|
// package.json
|
|
2062
2005
|
var package_default = {
|
|
2063
2006
|
name: "@digdir/designsystemet",
|
|
2064
|
-
version: "1.1.
|
|
2007
|
+
version: "1.1.5",
|
|
2065
2008
|
description: "CLI for Designsystemet",
|
|
2066
2009
|
author: "Designsystemet team",
|
|
2067
2010
|
engines: {
|
|
2068
|
-
node: ">=22.
|
|
2011
|
+
node: ">=22.17.0"
|
|
2069
2012
|
},
|
|
2070
2013
|
repository: {
|
|
2071
2014
|
type: "git",
|
|
@@ -2114,6 +2057,7 @@ var package_default = {
|
|
|
2114
2057
|
"digdir:tokens-build": "pnpm run designsystemet tokens build -t ../../internal/design-tokens -o ../../packages/theme/brand --clean --experimental-tailwind",
|
|
2115
2058
|
"digdir:tokens-create": "pnpm run designsystemet tokens create --config ./configs/digdir.config.json",
|
|
2116
2059
|
"update:template": "tsx ./src/scripts/update-template.ts",
|
|
2060
|
+
"update:preview-tokens": "tsx ./src/scripts/update-preview-tokens.ts",
|
|
2117
2061
|
"update:theme-digdir": "pnpm digdir:tokens-create && tsx ./src/scripts/update-design-tokens.ts && pnpm digdir:tokens-build",
|
|
2118
2062
|
verify: "pnpm test && pnpm update:template && pnpm update:theme-digdir && pnpm build:tokens"
|
|
2119
2063
|
},
|
|
@@ -2131,8 +2075,8 @@ var package_default = {
|
|
|
2131
2075
|
"object-hash": "^3.0.0",
|
|
2132
2076
|
postcss: "^8.5.6",
|
|
2133
2077
|
ramda: "^0.31.3",
|
|
2134
|
-
"style-dictionary": "^5.0.
|
|
2135
|
-
zod: "^3.25.
|
|
2078
|
+
"style-dictionary": "^5.0.1",
|
|
2079
|
+
zod: "^3.25.74",
|
|
2136
2080
|
"zod-validation-error": "^3.5.2"
|
|
2137
2081
|
},
|
|
2138
2082
|
devDependencies: {
|
|
@@ -2140,8 +2084,7 @@ var package_default = {
|
|
|
2140
2084
|
"@types/apca-w3": "^0.1.3",
|
|
2141
2085
|
"@types/chroma-js": "^3.1.1",
|
|
2142
2086
|
"@types/fs-extra": "^11.0.4",
|
|
2143
|
-
"@types/
|
|
2144
|
-
"@types/node": "^22.15.32",
|
|
2087
|
+
"@types/node": "^22.16.0",
|
|
2145
2088
|
"@types/object-hash": "^3.0.6",
|
|
2146
2089
|
"@types/ramda": "^0.30.2",
|
|
2147
2090
|
"fs-extra": "^11.3.0",
|
|
@@ -2156,16 +2099,16 @@ var package_default = {
|
|
|
2156
2099
|
var defaultFileHeader = `build: v${package_default.version}`;
|
|
2157
2100
|
var createThemeCSSFiles = ({
|
|
2158
2101
|
processedBuilds,
|
|
2159
|
-
fileHeader
|
|
2102
|
+
fileHeader = defaultFileHeader
|
|
2160
2103
|
}) => {
|
|
2161
2104
|
const groupedByTheme = {};
|
|
2162
2105
|
for (const [_, buildResults] of Object.entries(processedBuilds)) {
|
|
2163
2106
|
for (const buildResult of buildResults) {
|
|
2164
2107
|
const themeName = buildResult.permutation.theme;
|
|
2165
2108
|
const newOutputs = buildResult.formatted;
|
|
2166
|
-
if (
|
|
2109
|
+
if (R15.isNotEmpty(newOutputs)) {
|
|
2167
2110
|
const currentOutputs = groupedByTheme[themeName] ?? [];
|
|
2168
|
-
groupedByTheme[themeName] =
|
|
2111
|
+
groupedByTheme[themeName] = R15.concat(currentOutputs, newOutputs);
|
|
2169
2112
|
}
|
|
2170
2113
|
}
|
|
2171
2114
|
}
|
|
@@ -2178,7 +2121,7 @@ var createThemeCSSFiles = ({
|
|
|
2178
2121
|
"typography/primary",
|
|
2179
2122
|
"color/"
|
|
2180
2123
|
];
|
|
2181
|
-
const sortByDefinedOrder =
|
|
2124
|
+
const sortByDefinedOrder = R15.sortBy((file) => {
|
|
2182
2125
|
const filePath = file.destination || "";
|
|
2183
2126
|
const sortIndex = sortOrder.findIndex((sortElement) => {
|
|
2184
2127
|
if (sortElement.endsWith("/")) {
|
|
@@ -2203,17 +2146,17 @@ order may change due to nondeterminism.`.trim()
|
|
|
2203
2146
|
});
|
|
2204
2147
|
const header = `@charset "UTF-8";
|
|
2205
2148
|
/*
|
|
2206
|
-
${
|
|
2149
|
+
${fileHeader}
|
|
2207
2150
|
*/
|
|
2208
2151
|
|
|
2209
2152
|
`;
|
|
2210
|
-
const sortAlphabetically =
|
|
2211
|
-
const pickOutputs =
|
|
2212
|
-
const themeCSSFile =
|
|
2153
|
+
const sortAlphabetically = R15.sort(R15.ascend((x) => x.destination || ""));
|
|
2154
|
+
const pickOutputs = R15.map(R15.view(R15.lensProp("output")));
|
|
2155
|
+
const themeCSSFile = R15.pipe(
|
|
2213
2156
|
sortAlphabetically,
|
|
2214
2157
|
sortByDefinedOrder,
|
|
2215
2158
|
pickOutputs,
|
|
2216
|
-
|
|
2159
|
+
R15.join("\n"),
|
|
2217
2160
|
(content) => header + content
|
|
2218
2161
|
);
|
|
2219
2162
|
const themeCSSFiles = Object.entries(groupedByTheme).map(([theme, files]) => ({
|
|
@@ -2253,16 +2196,17 @@ var buildTokens = async (options) => {
|
|
|
2253
2196
|
outDir,
|
|
2254
2197
|
tokensDir,
|
|
2255
2198
|
type: "build",
|
|
2256
|
-
processed$themes
|
|
2199
|
+
processed$themes,
|
|
2200
|
+
buildTokenFormats: {}
|
|
2257
2201
|
});
|
|
2258
|
-
const
|
|
2202
|
+
const fileHeader = R16.join("")([
|
|
2259
2203
|
defaultFileHeader,
|
|
2260
2204
|
$designsystemet ? `
|
|
2261
2205
|
design-tokens: v${$designsystemet.version}` : ""
|
|
2262
2206
|
]);
|
|
2263
2207
|
let files = [];
|
|
2264
2208
|
const declarationFiles = createTypeDeclarationFiles(processed$themes);
|
|
2265
|
-
const cssFiles = createThemeCSSFiles({ processedBuilds, fileHeader
|
|
2209
|
+
const cssFiles = createThemeCSSFiles({ processedBuilds, fileHeader });
|
|
2266
2210
|
files = [...declarationFiles, ...cssFiles];
|
|
2267
2211
|
if (options.tailwind) {
|
|
2268
2212
|
const tailwindFiles = createTailwindCSSFiles(cssFiles);
|
|
@@ -2279,7 +2223,7 @@ design-tokens: v${$designsystemet.version}` : ""
|
|
|
2279
2223
|
// src/tokens/create/write.ts
|
|
2280
2224
|
import path2 from "path";
|
|
2281
2225
|
import chalk8 from "chalk";
|
|
2282
|
-
import * as
|
|
2226
|
+
import * as R17 from "ramda";
|
|
2283
2227
|
|
|
2284
2228
|
// src/tokens/create/generators/$designsystemet.ts
|
|
2285
2229
|
function generate$Designsystemet() {
|
|
@@ -2506,12 +2450,12 @@ var writeTokens = async (options) => {
|
|
|
2506
2450
|
}
|
|
2507
2451
|
} catch (_error) {
|
|
2508
2452
|
}
|
|
2509
|
-
const concatThemeNames =
|
|
2510
|
-
|
|
2511
|
-
|
|
2453
|
+
const concatThemeNames = R17.pipe(
|
|
2454
|
+
R17.filter((obj) => R17.toLower(obj.group || "") === "theme"),
|
|
2455
|
+
R17.map(R17.prop("name")),
|
|
2512
2456
|
// New theme is added to the end of the list so we keep the same order from config and Token Studio
|
|
2513
|
-
|
|
2514
|
-
|
|
2457
|
+
R17.append(themeName),
|
|
2458
|
+
R17.uniq
|
|
2515
2459
|
);
|
|
2516
2460
|
const themes = concatThemeNames(themeObjects);
|
|
2517
2461
|
console.log(`
|
|
@@ -2534,7 +2478,7 @@ Themes: ${chalk8.blue(themes.join(", "))}`);
|
|
|
2534
2478
|
};
|
|
2535
2479
|
|
|
2536
2480
|
// src/tokens/create/defaults.ts
|
|
2537
|
-
import * as
|
|
2481
|
+
import * as R18 from "ramda";
|
|
2538
2482
|
|
|
2539
2483
|
// src/tokens/template/design-tokens/primitives/globals.json with { type: 'json' }
|
|
2540
2484
|
var globals_default = {
|
|
@@ -3519,13 +3463,13 @@ var defaultTokens = {
|
|
|
3519
3463
|
"primitives/modes/typography/size/large": large_default2,
|
|
3520
3464
|
"semantic/style": style_default
|
|
3521
3465
|
};
|
|
3522
|
-
var getDefaultTokens = (tokenSets) => Object.entries(
|
|
3466
|
+
var getDefaultTokens = (tokenSets) => Object.entries(R18.pick(tokenSets, defaultTokens));
|
|
3523
3467
|
var getDefaultToken = (tokenPath) => {
|
|
3524
3468
|
return [tokenPath, defaultTokens[tokenPath]];
|
|
3525
3469
|
};
|
|
3526
3470
|
|
|
3527
3471
|
// src/tokens/create/generators/color.ts
|
|
3528
|
-
import * as
|
|
3472
|
+
import * as R19 from "ramda";
|
|
3529
3473
|
var generateColor = (colorArray) => {
|
|
3530
3474
|
const obj = {};
|
|
3531
3475
|
const $type = "color";
|
|
@@ -3535,8 +3479,8 @@ var generateColor = (colorArray) => {
|
|
|
3535
3479
|
return obj;
|
|
3536
3480
|
};
|
|
3537
3481
|
var generateColorScheme = (themeName, colorScheme2, colors2) => {
|
|
3538
|
-
const main =
|
|
3539
|
-
const support =
|
|
3482
|
+
const main = R19.map((color) => generateColor(generateColorScale(color, colorScheme2)), colors2.main);
|
|
3483
|
+
const support = R19.map((color) => generateColor(generateColorScale(color, colorScheme2)), colors2.support);
|
|
3540
3484
|
const neutral = generateColor(generateColorScale(colors2.neutral, colorScheme2));
|
|
3541
3485
|
return {
|
|
3542
3486
|
[themeName]: {
|
|
@@ -3564,7 +3508,7 @@ var generateColorGlobal = (colorScheme2) => {
|
|
|
3564
3508
|
};
|
|
3565
3509
|
|
|
3566
3510
|
// src/tokens/create/generators/semantic.ts
|
|
3567
|
-
import * as
|
|
3511
|
+
import * as R20 from "ramda";
|
|
3568
3512
|
|
|
3569
3513
|
// src/tokens/template/design-tokens/semantic/color.base.template.json with { type: 'json' }
|
|
3570
3514
|
var color_base_template_default = {
|
|
@@ -4028,7 +3972,7 @@ var generateSemantic = (colors2) => {
|
|
|
4028
3972
|
const semanticColorTokens = customColors.map(
|
|
4029
3973
|
(colorName) => [
|
|
4030
3974
|
colorName,
|
|
4031
|
-
|
|
3975
|
+
R20.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), color_template_default)
|
|
4032
3976
|
]
|
|
4033
3977
|
);
|
|
4034
3978
|
const color = {
|
|
@@ -4045,7 +3989,7 @@ var generateSemantic = (colors2) => {
|
|
|
4045
3989
|
};
|
|
4046
3990
|
|
|
4047
3991
|
// src/tokens/create/generators/theme.ts
|
|
4048
|
-
import * as
|
|
3992
|
+
import * as R21 from "ramda";
|
|
4049
3993
|
|
|
4050
3994
|
// src/tokens/template/design-tokens/themes/theme.base.template.json with { type: 'json' }
|
|
4051
3995
|
var theme_base_template_default = {
|
|
@@ -4181,7 +4125,7 @@ var generateTheme = (colors2, themeName, borderRadius) => {
|
|
|
4181
4125
|
customColors.map(
|
|
4182
4126
|
(colorName) => [
|
|
4183
4127
|
colorName,
|
|
4184
|
-
|
|
4128
|
+
R21.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), theme_template_default)
|
|
4185
4129
|
]
|
|
4186
4130
|
)
|
|
4187
4131
|
);
|
|
@@ -4193,8 +4137,8 @@ var generateTheme = (colors2, themeName, borderRadius) => {
|
|
|
4193
4137
|
},
|
|
4194
4138
|
...remainingThemeFile
|
|
4195
4139
|
};
|
|
4196
|
-
const baseBorderRadius =
|
|
4197
|
-
const updatedThemeFile =
|
|
4140
|
+
const baseBorderRadius = R21.lensPath(["border-radius", "base", "$value"]);
|
|
4141
|
+
const updatedThemeFile = R21.set(baseBorderRadius, String(borderRadius), themeFile);
|
|
4198
4142
|
const token = JSON.parse(
|
|
4199
4143
|
JSON.stringify(
|
|
4200
4144
|
updatedThemeFile,
|
|
@@ -4293,16 +4237,16 @@ var createTokens = async (opts) => {
|
|
|
4293
4237
|
// bin/config.ts
|
|
4294
4238
|
import path4 from "path";
|
|
4295
4239
|
import chalk10 from "chalk";
|
|
4296
|
-
import * as
|
|
4240
|
+
import * as R23 from "ramda";
|
|
4297
4241
|
|
|
4298
4242
|
// src/config.ts
|
|
4299
4243
|
import chalk9 from "chalk";
|
|
4300
|
-
import * as
|
|
4244
|
+
import * as R22 from "ramda";
|
|
4301
4245
|
import { z } from "zod/v4";
|
|
4302
4246
|
import { fromError } from "zod-validation-error/v4";
|
|
4303
4247
|
function mapPathToOptionName(path5) {
|
|
4304
|
-
const normalisedPath = path5[0] === "themes" ? ["theme", ...
|
|
4305
|
-
const option =
|
|
4248
|
+
const normalisedPath = path5[0] === "themes" ? ["theme", ...R22.drop(2, path5)] : path5;
|
|
4249
|
+
const option = R22.path(normalisedPath, cliOptions);
|
|
4306
4250
|
if (typeof option !== "string") {
|
|
4307
4251
|
return;
|
|
4308
4252
|
}
|
|
@@ -4426,11 +4370,11 @@ async function parseCreateConfig(configFile, options) {
|
|
|
4426
4370
|
const { cmd, theme = "theme", configPath } = options;
|
|
4427
4371
|
const configParsed = parseConfig(configFile, configPath);
|
|
4428
4372
|
const themeColors = Object.values(configParsed?.themes ?? {}).map(
|
|
4429
|
-
(x) => /* @__PURE__ */ new Set([...
|
|
4373
|
+
(x) => /* @__PURE__ */ new Set([...R23.keys(x.colors.main), ...R23.keys(x.colors.support)])
|
|
4430
4374
|
);
|
|
4431
|
-
if (!
|
|
4375
|
+
if (!R23.all(R23.equals(R23.__, themeColors[0]), themeColors)) {
|
|
4432
4376
|
console.error(chalk10.redBright(`In config, all themes must have the same custom color names, but we found:`));
|
|
4433
|
-
const themeNames =
|
|
4377
|
+
const themeNames = R23.keys(configParsed.themes ?? {});
|
|
4434
4378
|
themeColors.forEach((colors2, index) => {
|
|
4435
4379
|
const colorNames = Array.from(colors2);
|
|
4436
4380
|
console.log(` - ${themeNames[index]}: ${colorNames.join(", ")}`);
|
|
@@ -4438,7 +4382,7 @@ async function parseCreateConfig(configFile, options) {
|
|
|
4438
4382
|
console.log();
|
|
4439
4383
|
process.exit(1);
|
|
4440
4384
|
}
|
|
4441
|
-
const noUndefined =
|
|
4385
|
+
const noUndefined = R23.reject(R23.isNil);
|
|
4442
4386
|
const getThemeOptions = (optionGetter) => noUndefined({
|
|
4443
4387
|
colors: noUndefined({
|
|
4444
4388
|
main: optionGetter(cmd, "mainColors"),
|
|
@@ -4454,10 +4398,10 @@ async function parseCreateConfig(configFile, options) {
|
|
|
4454
4398
|
const unvalidatedConfig = noUndefined({
|
|
4455
4399
|
outDir: configParsed?.outDir ?? getCliOption(cmd, "outDir"),
|
|
4456
4400
|
clean: configParsed?.clean ?? getCliOption(cmd, "clean"),
|
|
4457
|
-
themes: configParsed?.themes ?
|
|
4401
|
+
themes: configParsed?.themes ? R23.map((jsonThemeValues) => {
|
|
4458
4402
|
const defaultThemeValues = getThemeOptions(getDefaultCliOption);
|
|
4459
4403
|
const cliThemeValues = getThemeOptions(getSuppliedCliOption);
|
|
4460
|
-
const mergedConfigs =
|
|
4404
|
+
const mergedConfigs = R23.mergeDeepRight(defaultThemeValues, R23.mergeDeepRight(jsonThemeValues, cliThemeValues));
|
|
4461
4405
|
return mergedConfigs;
|
|
4462
4406
|
}, configParsed.themes) : (
|
|
4463
4407
|
// If there are no themes specified in the JSON config, we use both explicit
|
|
@@ -4487,8 +4431,8 @@ function makeTokenCommands() {
|
|
|
4487
4431
|
"-o, --out-dir <string>",
|
|
4488
4432
|
`Output directory for built ${chalk11.blue("design-tokens")}`,
|
|
4489
4433
|
DEFAULT_TOKENS_BUILD_DIR
|
|
4490
|
-
).option(`--${cliOptions.clean} [boolean]`, "Clean output directory before building tokens", parseBoolean, false).option("--dry [boolean]", `Dry run for built ${chalk11.blue("design-tokens")}`, parseBoolean, false).option("
|
|
4491
|
-
const {
|
|
4434
|
+
).option(`--${cliOptions.clean} [boolean]`, "Clean output directory before building tokens", parseBoolean, false).option("--dry [boolean]", `Dry run for built ${chalk11.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) => {
|
|
4435
|
+
const { verbose, clean, dry, experimentalTailwind } = opts;
|
|
4492
4436
|
const tokensDir = typeof opts.tokens === "string" ? opts.tokens : DEFAULT_TOKENS_CREATE_DIR;
|
|
4493
4437
|
const outDir = typeof opts.outDir === "string" ? opts.outDir : "./dist/tokens";
|
|
4494
4438
|
const { configFile, configPath } = await getConfigFile(opts.config);
|
|
@@ -4499,7 +4443,7 @@ function makeTokenCommands() {
|
|
|
4499
4443
|
if (clean) {
|
|
4500
4444
|
await cleanDir(outDir, dry);
|
|
4501
4445
|
}
|
|
4502
|
-
await buildTokens({ tokensDir, outDir,
|
|
4446
|
+
await buildTokens({ tokensDir, outDir, verbose, dry, tailwind: experimentalTailwind, ...config });
|
|
4503
4447
|
return Promise.resolve();
|
|
4504
4448
|
});
|
|
4505
4449
|
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(
|
|
@@ -4563,7 +4507,7 @@ function parseBoolean(value) {
|
|
|
4563
4507
|
return value === "true" || value === true;
|
|
4564
4508
|
}
|
|
4565
4509
|
async function getConfigFile(config) {
|
|
4566
|
-
const allowFileNotFound =
|
|
4510
|
+
const allowFileNotFound = R24.isNil(config) || config === DEFAULT_CONFIG_FILE;
|
|
4567
4511
|
const configPath = config ?? DEFAULT_CONFIG_FILE;
|
|
4568
4512
|
const configFile = await readConfigFile(configPath, allowFileNotFound);
|
|
4569
4513
|
return { configFile, configPath };
|