@digdir/designsystemet 1.1.3 → 1.1.4
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
|
@@ -1,123 +0,0 @@
|
|
|
1
|
-
// src/tokens/process/formats/js-tokens.ts
|
|
2
|
-
import * as R3 from "ramda";
|
|
3
|
-
import { createPropertyFormatter as createPropertyFormatter2, fileHeader } from "style-dictionary/utils";
|
|
4
|
-
|
|
5
|
-
// src/tokens/utils.ts
|
|
6
|
-
import * as R from "ramda";
|
|
7
|
-
|
|
8
|
-
// src/tokens/types.ts
|
|
9
|
-
var colorCategories = {
|
|
10
|
-
main: "main",
|
|
11
|
-
support: "support"
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
// src/tokens/utils.ts
|
|
15
|
-
var mapToLowerCase = R.map(R.toLower);
|
|
16
|
-
var hasAnyTruth = R.any(R.equals(true));
|
|
17
|
-
var getType = (token) => (token.$type ?? token.type) || "";
|
|
18
|
-
var getValue = (token) => token.$value ?? token.value;
|
|
19
|
-
var typeEquals = R.curry(
|
|
20
|
-
(types, token) => {
|
|
21
|
-
if (R.isNil(token)) {
|
|
22
|
-
return false;
|
|
23
|
-
}
|
|
24
|
-
return R.includes(R.toLower(getType(token)), R.map(R.toLower, Array.isArray(types) ? types : [types]));
|
|
25
|
-
}
|
|
26
|
-
);
|
|
27
|
-
var pathStartsWithOneOf = R.curry(
|
|
28
|
-
(paths, token) => {
|
|
29
|
-
if (R.isNil(token)) {
|
|
30
|
-
return false;
|
|
31
|
-
}
|
|
32
|
-
const tokenPath = mapToLowerCase(token.path);
|
|
33
|
-
const matchPathsStartingWith = R.map((path) => R.startsWith([path], tokenPath), mapToLowerCase(paths));
|
|
34
|
-
return hasAnyTruth(matchPathsStartingWith);
|
|
35
|
-
}
|
|
36
|
-
);
|
|
37
|
-
function isColorCategoryToken(token, category) {
|
|
38
|
-
if (!category) {
|
|
39
|
-
return Object.keys(colorCategories).some(
|
|
40
|
-
(colorCategory) => isColorCategoryToken(token, colorCategory)
|
|
41
|
-
);
|
|
42
|
-
}
|
|
43
|
-
return R.startsWith(["color", category], token.path);
|
|
44
|
-
}
|
|
45
|
-
var isDigit = (s) => /^\d+$/.test(s);
|
|
46
|
-
function inlineTokens(shouldInline, tokens) {
|
|
47
|
-
const [inlineableTokens, otherTokens] = R.partition(shouldInline, tokens);
|
|
48
|
-
return otherTokens.map((token) => {
|
|
49
|
-
let transformed = getValue(token.original);
|
|
50
|
-
for (const ref of inlineableTokens) {
|
|
51
|
-
const refName = ref.path.join(".");
|
|
52
|
-
if (typeof transformed === "string") {
|
|
53
|
-
transformed = transformed.replaceAll(`{${refName}}`, getValue(ref.original));
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
const tokenWithInlinedRefs = R.set(R.lensPath(["original", "$value"]), transformed, token);
|
|
57
|
-
return tokenWithInlinedRefs;
|
|
58
|
-
});
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
// src/tokens/process/formats/css/semantic.ts
|
|
62
|
-
import * as R2 from "ramda";
|
|
63
|
-
import { createPropertyFormatter } from "style-dictionary/utils";
|
|
64
|
-
var isNumericBorderRadiusToken = (t) => t.path[0] === "border-radius" && isDigit(t.path[1]);
|
|
65
|
-
var isNumericSizeToken = (t) => pathStartsWithOneOf(["size"], t) && isDigit(t.path[1]);
|
|
66
|
-
var isSizeToken = (t) => pathStartsWithOneOf(["size"], t);
|
|
67
|
-
var isInlineTokens = R2.anyPass([isNumericBorderRadiusToken, isNumericSizeToken, isSizeToken]);
|
|
68
|
-
var overrideSizingFormula = (format, token) => {
|
|
69
|
-
const [name, value] = format(token).split(":");
|
|
70
|
-
const calc = value.replace(`var(--ds-size-mode-font-size)`, "1em").replace(/floor\((.*)\);/, "calc($1)");
|
|
71
|
-
const round = `round(down, ${calc}, 1px)`;
|
|
72
|
-
return {
|
|
73
|
-
name,
|
|
74
|
-
round,
|
|
75
|
-
calc
|
|
76
|
-
};
|
|
77
|
-
};
|
|
78
|
-
|
|
79
|
-
// src/tokens/process/formats/js-tokens.ts
|
|
80
|
-
var groupByType = R3.groupBy((token) => getType(token));
|
|
81
|
-
var removeUnwatedTokens = R3.pipe(
|
|
82
|
-
R3.reject((token) => isColorCategoryToken(token)),
|
|
83
|
-
R3.reject((token) => R3.any((path) => path.startsWith("_"))(token.path))
|
|
84
|
-
);
|
|
85
|
-
var dissocExtensions = R3.pipe(R3.dissoc("$extensions"), R3.dissocPath(["original", "$extensions"]));
|
|
86
|
-
var removeUnwatedProps = R3.map((token) => dissocExtensions(token));
|
|
87
|
-
var toCssVarName = R3.pipe(R3.split(":"), R3.head, R3.trim);
|
|
88
|
-
var jsTokens = {
|
|
89
|
-
name: "ds/js-tokens",
|
|
90
|
-
format: async ({ dictionary, file, options }) => {
|
|
91
|
-
const { usesDtcg, outputReferences } = options;
|
|
92
|
-
const format = createPropertyFormatter2({
|
|
93
|
-
outputReferences,
|
|
94
|
-
dictionary,
|
|
95
|
-
format: "css",
|
|
96
|
-
usesDtcg
|
|
97
|
-
});
|
|
98
|
-
const formatTokens = R3.map((token) => {
|
|
99
|
-
if (pathStartsWithOneOf(["size", "_size"], token)) {
|
|
100
|
-
const { calc, name } = overrideSizingFormula(format, token);
|
|
101
|
-
return {
|
|
102
|
-
...token,
|
|
103
|
-
name: name.trim(),
|
|
104
|
-
$value: calc.trim()
|
|
105
|
-
};
|
|
106
|
-
}
|
|
107
|
-
return {
|
|
108
|
-
...token,
|
|
109
|
-
name: toCssVarName(format(token))
|
|
110
|
-
};
|
|
111
|
-
});
|
|
112
|
-
const processTokens = R3.pipe(removeUnwatedTokens, removeUnwatedProps, formatTokens, groupByType);
|
|
113
|
-
const tokens = processTokens(inlineTokens(isInlineTokens, dictionary.allTokens));
|
|
114
|
-
const content = Object.entries(tokens).map(
|
|
115
|
-
([name, token]) => `export const ${name} = ${JSON.stringify(token, null, 2).replace(/"([^"]+)":/g, "$1:")}
|
|
116
|
-
`
|
|
117
|
-
).join("\n");
|
|
118
|
-
return fileHeader({ file }).then((fileHeaderText) => fileHeaderText + content);
|
|
119
|
-
}
|
|
120
|
-
};
|
|
121
|
-
export {
|
|
122
|
-
jsTokens
|
|
123
|
-
};
|