@digdir/designsystemet 1.13.2 ā 1.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bin/config.js +50 -658
- package/dist/bin/designsystemet.d.ts.map +1 -1
- package/dist/bin/designsystemet.js +136 -4623
- package/dist/bin/options.js +22 -14
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BorderValues.js +9 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowTypes.js +8 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowValues.js +13 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorModifierTypes.js +10 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorSpaceTypes.js +10 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/Properties.js +53 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/StrokeStyleValues.js +14 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js +9 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenTypes.js +32 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TypographyValues.js +15 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/types/index.js +11 -0
- package/dist/package.js +5 -0
- package/dist/src/colors/colorMetadata.js +255 -261
- package/dist/src/colors/index.js +5 -522
- package/dist/src/colors/theme.js +104 -343
- package/dist/src/colors/types.js +22 -25
- package/dist/src/colors/utils.js +241 -154
- package/dist/src/config.js +103 -444
- package/dist/src/index.js +10 -3588
- package/dist/src/migrations/beta-to-v1.js +339 -537
- package/dist/src/migrations/codemods/css/plugins.js +31 -42
- package/dist/src/migrations/codemods/css/run.js +20 -151
- package/dist/src/migrations/color-rename-next49.js +44 -220
- package/dist/src/migrations/index.js +7 -577
- package/dist/src/scripts/update-preview-tokens.d.ts.map +1 -1
- package/dist/src/tokens/build.js +39 -1816
- package/dist/src/tokens/create/files.d.ts +10 -5
- package/dist/src/tokens/create/files.d.ts.map +1 -1
- package/dist/src/tokens/create/files.js +44 -601
- package/dist/src/tokens/create/generators/$designsystemet.js +8 -97
- package/dist/src/tokens/create/generators/$metadata.d.ts +7 -3
- package/dist/src/tokens/create/generators/$metadata.d.ts.map +1 -1
- package/dist/src/tokens/create/generators/$metadata.js +24 -21
- package/dist/src/tokens/create/generators/$themes.d.ts +2 -4
- package/dist/src/tokens/create/generators/$themes.d.ts.map +1 -1
- package/dist/src/tokens/create/generators/$themes.js +139 -312
- package/dist/src/tokens/create/generators/primitives/color-scheme.js +68 -443
- package/dist/src/tokens/create/generators/primitives/globals.js +141 -147
- package/dist/src/tokens/create/generators/primitives/size.js +146 -156
- package/dist/src/tokens/create/generators/primitives/typography.js +213 -217
- package/dist/src/tokens/create/generators/semantic/color-modes.js +24 -59
- package/dist/src/tokens/create/generators/semantic/color.js +42 -326
- package/dist/src/tokens/create/generators/semantic/style.js +379 -382
- package/dist/src/tokens/create/generators/themes/theme.js +108 -392
- package/dist/src/tokens/create.d.ts +2 -1
- package/dist/src/tokens/create.d.ts.map +1 -1
- package/dist/src/tokens/create.js +50 -1591
- package/dist/src/tokens/format.d.ts.map +1 -1
- package/dist/src/tokens/format.js +35 -3324
- package/dist/src/tokens/generate-config.js +155 -298
- package/dist/src/tokens/index.js +3 -3344
- package/dist/src/tokens/process/configs/color.js +50 -1085
- package/dist/src/tokens/process/configs/semantic.js +45 -1083
- package/dist/src/tokens/process/configs/shared.js +18 -109
- package/dist/src/tokens/process/configs/size-mode.js +27 -1082
- package/dist/src/tokens/process/configs/size.js +32 -1083
- package/dist/src/tokens/process/configs/type-scale.js +49 -1083
- package/dist/src/tokens/process/configs/typography.js +63 -1084
- package/dist/src/tokens/process/configs.js +91 -1224
- package/dist/src/tokens/process/formats/css/color.js +58 -1079
- package/dist/src/tokens/process/formats/css/semantic.js +27 -1081
- package/dist/src/tokens/process/formats/css/size-mode.js +43 -1077
- package/dist/src/tokens/process/formats/css/size.js +86 -1079
- package/dist/src/tokens/process/formats/css/type-scale.js +53 -1083
- package/dist/src/tokens/process/formats/css/typography.js +27 -1081
- package/dist/src/tokens/process/formats/css.js +18 -1081
- package/dist/src/tokens/process/output/declarations.js +18 -1201
- package/dist/src/tokens/process/output/tailwind.js +26 -40
- package/dist/src/tokens/process/output/theme.js +73 -206
- package/dist/src/tokens/process/platform.js +165 -1355
- package/dist/src/tokens/process/transformers.js +49 -89
- package/dist/src/tokens/process/utils/getMultidimensionalThemes.js +100 -1183
- package/dist/src/tokens/process/utils/kebab-case.js +7 -5
- package/dist/src/tokens/types.d.ts +6 -0
- package/dist/src/tokens/types.d.ts.map +1 -1
- package/dist/src/tokens/types.js +6 -7
- package/dist/src/tokens/utils.d.ts +2 -1
- package/dist/src/tokens/utils.d.ts.map +1 -1
- package/dist/src/tokens/utils.js +107 -93
- package/dist/src/types.js +1 -5
- package/dist/src/utils/filesystem.js +112 -124
- package/package.json +12 -15
- package/configs/test-tokens.config.json +0 -82
- package/dist/src/scripts/createJsonSchema.js +0 -409
- package/dist/src/scripts/update-preview-tokens.js +0 -3353
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
//#region src/tokens/process/utils/kebab-case.ts
|
|
2
|
+
/**
|
|
3
|
+
* Function to convert a string to kebab-case.
|
|
4
|
+
*/
|
|
2
5
|
function kebabCase(str) {
|
|
3
|
-
|
|
6
|
+
return str.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
|
|
4
7
|
}
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
};
|
|
8
|
+
//#endregion
|
|
9
|
+
export { kebabCase };
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { Config as SDConfig } from 'style-dictionary/types';
|
|
2
2
|
import type { ConfigSchemaTheme } from '../config.js';
|
|
3
|
+
import type { ColorScheme } from '../index.js';
|
|
3
4
|
import type { GetStyleDictionaryConfig } from './process/configs/shared.js';
|
|
4
5
|
export type Token = {
|
|
5
6
|
$value: string | Record<string, string>[];
|
|
@@ -25,6 +26,7 @@ export declare const colorCategories: {
|
|
|
25
26
|
readonly support: "support";
|
|
26
27
|
};
|
|
27
28
|
export type ColorCategories = keyof typeof colorCategories;
|
|
29
|
+
export type ColorNamesByCategory = Record<ColorCategories, string[]>;
|
|
28
30
|
export type BuiltInColors = 'neutral' | 'success' | 'warning' | 'danger' | 'info';
|
|
29
31
|
export type SizeModes = 'small' | 'medium' | 'large';
|
|
30
32
|
/**
|
|
@@ -40,6 +42,10 @@ export type ThemePermutation = {
|
|
|
40
42
|
typography: string;
|
|
41
43
|
};
|
|
42
44
|
export type ThemeDimension = keyof ThemePermutation;
|
|
45
|
+
export type TokenSetDimensions = {
|
|
46
|
+
colorSchemes: ColorScheme[];
|
|
47
|
+
sizeModes: SizeModes[];
|
|
48
|
+
};
|
|
43
49
|
export type GetSDConfigOptions = {
|
|
44
50
|
tokensDir?: string;
|
|
45
51
|
dry?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/tokens/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AAE5E,MAAM,MAAM,KAAK,GACb;IAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAC5D;IAAE,KAAK,EAAE,WAAW,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC,GAAG,GAAG,GAAG,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,EAAE,MAAM,CAAC,EAAE,CAAA;CAAE,GACzF;IACE,KAAK,EAAE,YAAY,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC,YAAY,GAAG,YAAY,GAAG,YAAY,GAAG,UAAU,GAAG,eAAe,EAAE,MAAM,CAAC,CAAC;CACnG,CAAC;AAEN,MAAM,MAAM,QAAQ,GAAG;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;CACjC,CAAC;AACF,MAAM,MAAM,SAAS,GAAG,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;AAE9C,MAAM,MAAM,MAAM,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC;AACrC,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC;AAE7C,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;CACd,GAAG,QAAQ,CAAC,IAAI,CAAC,iBAAiB,EAAE,WAAW,CAAC,CAAC,GAChD,IAAI,CAAC,iBAAiB,EAAE,WAAW,CAAC,CAAC;AAEvC,eAAO,MAAM,eAAe;;;CAGlB,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/tokens/types.ts"],"names":[],"mappings":"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"}
|
package/dist/src/tokens/types.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
};
|
|
6
|
-
export {
|
|
7
|
-
colorCategories
|
|
1
|
+
//#region src/tokens/types.ts
|
|
2
|
+
const colorCategories = {
|
|
3
|
+
main: "main",
|
|
4
|
+
support: "support"
|
|
8
5
|
};
|
|
6
|
+
//#endregion
|
|
7
|
+
export { colorCategories };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { Tokens } from 'style-dictionary';
|
|
2
2
|
import type { DesignToken, TransformedToken } from 'style-dictionary/types';
|
|
3
|
-
import { type ColorCategories, type TokenSet } from './types.js';
|
|
3
|
+
import { type ColorCategories, type ColorNamesByCategory, type Colors, type TokenSet } from './types.js';
|
|
4
4
|
/**
|
|
5
5
|
* Returns type based on design token format used. Read more:https://v4.styledictionary.com/info/dtcg/
|
|
6
6
|
* @param token Transformed token
|
|
@@ -60,4 +60,5 @@ export declare function inlineTokens(shouldInline: (t: TransformedToken) => bool
|
|
|
60
60
|
export declare function shortSizeName(size: string): string;
|
|
61
61
|
export declare const sizeComparator: (size: string) => number;
|
|
62
62
|
export declare function orderBySize(sizes: string[]): string[];
|
|
63
|
+
export declare function colorNamesByCategory(colors: Colors): ColorNamesByCategory;
|
|
63
64
|
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/tokens/utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC5E,OAAO,
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/tokens/utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC5E,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,oBAAoB,EACzB,KAAK,MAAM,EAEX,KAAK,QAAQ,EACd,MAAM,YAAY,CAAC;AAMpB;;;;GAIG;AACH,eAAO,MAAM,OAAO,GAAI,OAAO,gBAAgB,WAAkD,CAAC;AAElG;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,GAAI,CAAC,EAAE,OAAO,gBAAgB,GAAG,WAAW,KAAG,CAAuC,CAAC;AAE5G;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,KAAK,EAAE,gBAAgB,KAAK,OAQ/E,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,gBAAgB,KAAK,OAAO,CAAC,GACpG,CAAC,CAAC,KAAK,EAAE,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,KAAK,EAAE,gBAAgB,KAAK,OAAO,CAcxE,CAAC;AAEF,wBAAgB,eAAe,CAAC,KAAK,EAAE,gBAAgB,GAAG,OAAO,CAEhE;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAEpF;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,gBAAgB,GAAG,OAAO,CAEnE;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,gBAAgB,EAAE,QAAQ,CAAC,EAAE,eAAe,GAAG,OAAO,CAOjG;AAED,eAAO,MAAM,OAAO,GAAI,GAAG,MAAM,YAAoB,CAAC;AAEtD;2HAC2H;AAC3H,wBAAgB,WAAW,CACzB,GAAG,EAAE,MAAM,GAAG,QAAQ,EACtB,EAAE,EAAE,CAAC,GAAG,EAAE,QAAQ,GAAG,MAAM,GAAG,WAAW,EAAE,GAAG,EAAE,MAAM,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,MAAM,KAAK,IAAI,4DAYrH;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,YAAY,CAAC,YAAY,EAAE,CAAC,CAAC,EAAE,gBAAgB,KAAK,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,sBAetG;AAUD,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAElD;AAED,eAAO,MAAM,cAAc,GAAI,MAAM,MAAM,KAAG,MAG7C,CAAC;AAEF,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CAErD;AAED,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,MAAM,GAAG,oBAAoB,CAMzE"}
|
package/dist/src/tokens/utils.js
CHANGED
|
@@ -1,112 +1,126 @@
|
|
|
1
|
-
|
|
1
|
+
import { colorCategories } from "./types.js";
|
|
2
2
|
import * as R from "ramda";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
3
|
+
//#region src/tokens/utils.ts
|
|
4
|
+
const mapToLowerCase = R.map(R.toLower);
|
|
5
|
+
const hasAnyTruth = R.any(R.equals(true));
|
|
6
|
+
/**
|
|
7
|
+
* Returns type based on design token format used. Read more:https://v4.styledictionary.com/info/dtcg/
|
|
8
|
+
* @param token Transformed token
|
|
9
|
+
* @returns type
|
|
10
|
+
*/
|
|
11
|
+
const getType = (token) => (token.$type ?? token.type) || "";
|
|
12
|
+
/**
|
|
13
|
+
* Returns value based on design token format used. Read more:https://v4.styledictionary.com/info/dtcg/
|
|
14
|
+
*
|
|
15
|
+
* Use generic (`<T>`) to define return value type
|
|
16
|
+
* @param token Transformed or Design token
|
|
17
|
+
* @returns value
|
|
18
|
+
*/
|
|
19
|
+
const getValue = (token) => token.$value ?? token.value;
|
|
20
|
+
/**
|
|
21
|
+
* Check if token type matches provided type
|
|
22
|
+
* This function is curried
|
|
23
|
+
* @param types Type or array of types to check against
|
|
24
|
+
* @param token Transformed token
|
|
25
|
+
* @returns boolean
|
|
26
|
+
*/
|
|
27
|
+
const typeEquals = R.curry((types, token) => {
|
|
28
|
+
if (R.isNil(token)) return false;
|
|
29
|
+
return R.includes(R.toLower(getType(token)), R.map(R.toLower, Array.isArray(types) ? types : [types]));
|
|
30
|
+
});
|
|
31
|
+
const pathStartsWithOneOf = R.curry((paths, token) => {
|
|
32
|
+
if (R.isNil(token)) return false;
|
|
33
|
+
const tokenPath = mapToLowerCase(token.path);
|
|
34
|
+
return hasAnyTruth(R.map((pathOrString) => {
|
|
35
|
+
const path = typeof pathOrString === "string" ? [pathOrString] : pathOrString;
|
|
36
|
+
return R.startsWith(mapToLowerCase(path), tokenPath);
|
|
37
|
+
}, paths));
|
|
38
|
+
});
|
|
36
39
|
function isSemanticToken(token) {
|
|
37
|
-
|
|
40
|
+
return token.filePath.includes("semantic/");
|
|
38
41
|
}
|
|
39
42
|
function isSemanticColorToken(token, color) {
|
|
40
|
-
|
|
43
|
+
return token.filePath.includes("semantic/") && R.startsWith(["color", color], token.path);
|
|
41
44
|
}
|
|
42
45
|
function isGlobalColorToken(token) {
|
|
43
|
-
|
|
46
|
+
return typeEquals("color", token) && pathStartsWithOneOf(["global"], token);
|
|
44
47
|
}
|
|
45
48
|
function isColorCategoryToken(token, category) {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
(colorCategory) => isColorCategoryToken(token, colorCategory)
|
|
49
|
-
);
|
|
50
|
-
}
|
|
51
|
-
return R.startsWith(["color", category], token.path);
|
|
49
|
+
if (!category) return Object.keys(colorCategories).some((colorCategory) => isColorCategoryToken(token, colorCategory));
|
|
50
|
+
return R.startsWith(["color", category], token.path);
|
|
52
51
|
}
|
|
53
|
-
|
|
52
|
+
const isDigit = (s) => /^\d+$/.test(s);
|
|
53
|
+
/** Copied from Style Dictionary and added types
|
|
54
|
+
@see https://github.com/amzn/style-dictionary/blob/31c29df0382a61b085f6392dc3225c5009fbffc5/lib/utils/combineJSON.js#L33 */
|
|
54
55
|
function traverseObj(obj, fn) {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
56
|
+
for (const key in obj) {
|
|
57
|
+
const prop = obj[key];
|
|
58
|
+
if (prop != null) {
|
|
59
|
+
fn.apply(null, [
|
|
60
|
+
obj,
|
|
61
|
+
key,
|
|
62
|
+
prop
|
|
63
|
+
]);
|
|
64
|
+
if (typeof prop === "object") traverseObj(prop, fn);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
return obj;
|
|
65
68
|
}
|
|
69
|
+
/**
|
|
70
|
+
* In the given tokens array, inline and remove tokens that match the predicate
|
|
71
|
+
*
|
|
72
|
+
* Example: In pseudo-code, given the predicate `(token) => token.path === ['size', '1']` and the following tokens
|
|
73
|
+
* ```js
|
|
74
|
+
* [
|
|
75
|
+
* { path: ['size', 'base'], original: { $value: '8px' } },
|
|
76
|
+
* { path: ['size', '1'], original: { $value: '{size.base} * 2' } },
|
|
77
|
+
* { path: ['size', 'sm']: original: { $value: 'min({size.1}, 12px)' } }
|
|
78
|
+
* ]
|
|
79
|
+
* ```
|
|
80
|
+
* would return
|
|
81
|
+
* ```js
|
|
82
|
+
* [
|
|
83
|
+
* { path: ['size', 'base'], original: { $value: '8px' } },
|
|
84
|
+
* { path: ['size', 'sm']: original: { $value: 'min({size.base} * 2, 12px)' } }
|
|
85
|
+
* ]
|
|
86
|
+
* ```
|
|
87
|
+
*
|
|
88
|
+
* @param shouldInline - predicate to determine if token should be inlined
|
|
89
|
+
* @param tokens - array of tokens to transform
|
|
90
|
+
* @returns copy of `tokens` without those that matched the predicate,
|
|
91
|
+
* where references to the matching tokens have been inlined
|
|
92
|
+
*/
|
|
66
93
|
function inlineTokens(shouldInline, tokens) {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
const tokenWithInlinedRefs = R.set(R.lensPath(["original", "$value"]), transformed, token);
|
|
77
|
-
return tokenWithInlinedRefs;
|
|
78
|
-
});
|
|
94
|
+
const [inlineableTokens, otherTokens] = R.partition(shouldInline, tokens);
|
|
95
|
+
return otherTokens.map((token) => {
|
|
96
|
+
let transformed = getValue(token.original);
|
|
97
|
+
for (const ref of inlineableTokens) {
|
|
98
|
+
const refName = ref.path.join(".");
|
|
99
|
+
if (typeof transformed === "string") transformed = transformed.replaceAll(`{${refName}}`, getValue(ref.original));
|
|
100
|
+
}
|
|
101
|
+
return R.set(R.lensPath(["original", "$value"]), transformed, token);
|
|
102
|
+
});
|
|
79
103
|
}
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
104
|
+
const sizeMap = {
|
|
105
|
+
xsmall: "xs",
|
|
106
|
+
small: "sm",
|
|
107
|
+
medium: "md",
|
|
108
|
+
large: "lg",
|
|
109
|
+
xlarge: "xl"
|
|
86
110
|
};
|
|
87
111
|
function shortSizeName(size) {
|
|
88
|
-
|
|
112
|
+
return sizeMap[size] ?? size;
|
|
89
113
|
}
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
return sortIndex ?? 0;
|
|
114
|
+
const sizeComparator = (size) => {
|
|
115
|
+
return Object.entries(sizeMap).findIndex(([key, val]) => key === size || val === size) ?? 0;
|
|
93
116
|
};
|
|
94
117
|
function orderBySize(sizes) {
|
|
95
|
-
|
|
118
|
+
return R.sortBy(sizeComparator, sizes);
|
|
96
119
|
}
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
isSemanticColorToken,
|
|
105
|
-
isSemanticToken,
|
|
106
|
-
orderBySize,
|
|
107
|
-
pathStartsWithOneOf,
|
|
108
|
-
shortSizeName,
|
|
109
|
-
sizeComparator,
|
|
110
|
-
traverseObj,
|
|
111
|
-
typeEquals
|
|
112
|
-
};
|
|
120
|
+
function colorNamesByCategory(colors) {
|
|
121
|
+
const result = {};
|
|
122
|
+
for (const category of Object.values(colorCategories)) result[category] = Object.keys(colors[category] ?? {});
|
|
123
|
+
return result;
|
|
124
|
+
}
|
|
125
|
+
//#endregion
|
|
126
|
+
export { colorNamesByCategory, getType, getValue, inlineTokens, isColorCategoryToken, isDigit, isGlobalColorToken, isSemanticColorToken, isSemanticToken, orderBySize, pathStartsWithOneOf, shortSizeName, sizeComparator, traverseObj, typeEquals };
|
package/dist/src/types.js
CHANGED
|
@@ -1,127 +1,115 @@
|
|
|
1
|
-
// src/utils/filesystem.ts
|
|
2
|
-
import fs from "fs/promises";
|
|
3
|
-
import path from "path";
|
|
4
1
|
import pc from "picocolors";
|
|
2
|
+
import fs from "node:fs/promises";
|
|
3
|
+
import path from "node:path";
|
|
4
|
+
//#region src/utils/filesystem.ts
|
|
5
5
|
var FileSystem = class {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
throw error;
|
|
108
|
-
}
|
|
109
|
-
};
|
|
110
|
-
writeFiles = async (files, outDir, log) => {
|
|
111
|
-
for (const { destination: filename, output } of files) {
|
|
112
|
-
if (filename) {
|
|
113
|
-
const filePath = path.join(outDir, filename);
|
|
114
|
-
const fileDir = path.dirname(filePath);
|
|
115
|
-
if (log) {
|
|
116
|
-
console.log(filename);
|
|
117
|
-
}
|
|
118
|
-
await this.mkdir(fileDir);
|
|
119
|
-
await this.writeFile(filePath, output);
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
};
|
|
123
|
-
};
|
|
124
|
-
var dsfs = new FileSystem();
|
|
125
|
-
export {
|
|
126
|
-
dsfs
|
|
6
|
+
isInitialized = false;
|
|
7
|
+
dry = false;
|
|
8
|
+
verbose = false;
|
|
9
|
+
/** Default working directory is where the process was started */
|
|
10
|
+
workingDir = process.cwd();
|
|
11
|
+
outDir = this.workingDir;
|
|
12
|
+
/** Initialize the file system */
|
|
13
|
+
init({ dry, outdir, verbose }) {
|
|
14
|
+
if (this.isInitialized) {
|
|
15
|
+
console.warn(pc.yellow("FileSystem is already initialized. Ignoring subsequent init call."));
|
|
16
|
+
return;
|
|
17
|
+
}
|
|
18
|
+
if (dry) console.log(pc.blue("Initializing FileSystem in dry-run mode. No files will be written."));
|
|
19
|
+
this.dry = dry ?? false;
|
|
20
|
+
this.verbose = verbose ?? false;
|
|
21
|
+
this.outDir = outdir ? path.isAbsolute(outdir) ? outdir : path.join(this.workingDir, outdir) : this.workingDir;
|
|
22
|
+
if (this.verbose) console.log(`FileSystem initialized with workingDir: ${pc.green(this.workingDir)}, outDir: ${pc.green(this.outDir)}`);
|
|
23
|
+
this.isInitialized = true;
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* Creates a directory if it does not already exist.
|
|
27
|
+
*
|
|
28
|
+
* @param dir - The path of the directory to create.
|
|
29
|
+
*
|
|
30
|
+
* @returns A promise that resolves when the operation is complete.
|
|
31
|
+
* If the directory already exists or `dry` is `true`, the promise resolves immediately.
|
|
32
|
+
*/
|
|
33
|
+
mkdir = async (dir) => {
|
|
34
|
+
if (this.dry) {
|
|
35
|
+
console.log(`${pc.blue("mkdir")} ${dir}`);
|
|
36
|
+
return Promise.resolve();
|
|
37
|
+
}
|
|
38
|
+
if (await fs.access(dir, fs.constants.F_OK).then(() => true).catch(() => false)) return Promise.resolve();
|
|
39
|
+
return fs.mkdir(dir, { recursive: true });
|
|
40
|
+
};
|
|
41
|
+
writeFile = async (path, data) => {
|
|
42
|
+
if (this.dry) {
|
|
43
|
+
console.log(`${pc.blue("writeFile")} ${path}`);
|
|
44
|
+
return Promise.resolve();
|
|
45
|
+
}
|
|
46
|
+
return fs.writeFile(path, data, { encoding: "utf-8" }).catch((error) => {
|
|
47
|
+
console.error(pc.red(`Error writing file: ${path}`));
|
|
48
|
+
console.error(pc.red(error));
|
|
49
|
+
throw error;
|
|
50
|
+
});
|
|
51
|
+
};
|
|
52
|
+
cp = async (src, dest, filter) => {
|
|
53
|
+
if (this.dry) {
|
|
54
|
+
console.log(`${pc.blue("cp")} ${src} ${dest}`);
|
|
55
|
+
return Promise.resolve();
|
|
56
|
+
}
|
|
57
|
+
return fs.cp(src, dest, {
|
|
58
|
+
recursive: true,
|
|
59
|
+
filter
|
|
60
|
+
});
|
|
61
|
+
};
|
|
62
|
+
copyFile = async (src, dest) => {
|
|
63
|
+
if (this.dry) {
|
|
64
|
+
console.log(`${pc.blue("copyFile")} ${src} to ${dest}`);
|
|
65
|
+
return Promise.resolve();
|
|
66
|
+
}
|
|
67
|
+
return fs.copyFile(src, dest);
|
|
68
|
+
};
|
|
69
|
+
cleanDir = async (dir) => {
|
|
70
|
+
if (this.dry) {
|
|
71
|
+
console.log(`${pc.blue("cleanDir")} ${dir}`);
|
|
72
|
+
return Promise.resolve();
|
|
73
|
+
}
|
|
74
|
+
console.log(`\nš„ Cleaning dir ${pc.red(`${dir.trim()}`)} `);
|
|
75
|
+
return fs.rm(dir, {
|
|
76
|
+
recursive: true,
|
|
77
|
+
force: true
|
|
78
|
+
});
|
|
79
|
+
};
|
|
80
|
+
readFile = async (path, allowFileNotFound) => {
|
|
81
|
+
if (this.dry) console.log(`${pc.blue("readFile")} ${path}`);
|
|
82
|
+
try {
|
|
83
|
+
return await fs.readFile(path, "utf-8");
|
|
84
|
+
} catch (error) {
|
|
85
|
+
if (allowFileNotFound && error.code === "ENOENT") return "";
|
|
86
|
+
throw error;
|
|
87
|
+
}
|
|
88
|
+
};
|
|
89
|
+
readdir = async (path) => {
|
|
90
|
+
if (this.dry) console.log(`${pc.blue("readdir")} ${path}`);
|
|
91
|
+
try {
|
|
92
|
+
return await fs.readdir(path);
|
|
93
|
+
} catch (error) {
|
|
94
|
+
if (error.code === "ENOENT") return [];
|
|
95
|
+
throw error;
|
|
96
|
+
}
|
|
97
|
+
};
|
|
98
|
+
writeFiles = async (files, outDir, log) => {
|
|
99
|
+
for (const { destination: filename, output } of files) if (filename) {
|
|
100
|
+
const filePath = path.join(outDir, filename);
|
|
101
|
+
const fileDir = path.dirname(filePath);
|
|
102
|
+
if (log) console.log(filename);
|
|
103
|
+
await this.mkdir(fileDir);
|
|
104
|
+
await this.writeFile(filePath, output);
|
|
105
|
+
}
|
|
106
|
+
};
|
|
127
107
|
};
|
|
108
|
+
/**
|
|
109
|
+
* An abstraction of Node's file system API and helper functions for Designsystemet CLI interaction with the file system.
|
|
110
|
+
*
|
|
111
|
+
* Allows dry-running destructive operations, logging and store relevant file system state.
|
|
112
|
+
*/
|
|
113
|
+
const dsfs = new FileSystem();
|
|
114
|
+
//#endregion
|
|
115
|
+
export { dsfs };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@digdir/designsystemet",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.14.0",
|
|
4
4
|
"description": "CLI for Designsystemet",
|
|
5
5
|
"author": "Designsystemet team",
|
|
6
6
|
"engines": {
|
|
@@ -15,8 +15,7 @@
|
|
|
15
15
|
"type": "module",
|
|
16
16
|
"main": "./dist/src/index.js",
|
|
17
17
|
"files": [
|
|
18
|
-
"./dist/**"
|
|
19
|
-
"./configs/**"
|
|
18
|
+
"./dist/**"
|
|
20
19
|
],
|
|
21
20
|
"bin": "dist/bin/designsystemet.js",
|
|
22
21
|
"exports": {
|
|
@@ -46,12 +45,12 @@
|
|
|
46
45
|
"hsluv": "^1.0.1",
|
|
47
46
|
"object-hash": "^3.0.0",
|
|
48
47
|
"picocolors": "^1.1.1",
|
|
49
|
-
"postcss": "^8.5.
|
|
48
|
+
"postcss": "^8.5.13",
|
|
50
49
|
"ramda": "^0.32.0",
|
|
51
50
|
"style-dictionary": "^5.4.0",
|
|
52
|
-
"zod": "^4.
|
|
51
|
+
"zod": "^4.4.2",
|
|
53
52
|
"zod-validation-error": "^5.0.0",
|
|
54
|
-
"@digdir/designsystemet-types": "1.
|
|
53
|
+
"@digdir/designsystemet-types": "1.14.0"
|
|
55
54
|
},
|
|
56
55
|
"devDependencies": {
|
|
57
56
|
"@tokens-studio/types": "0.5.2",
|
|
@@ -59,25 +58,23 @@
|
|
|
59
58
|
"@types/node": "24.12.2",
|
|
60
59
|
"@types/object-hash": "3.0.6",
|
|
61
60
|
"@types/ramda": "0.31.1",
|
|
62
|
-
"
|
|
61
|
+
"tsdown": "0.21.10",
|
|
63
62
|
"tsx": "4.21.0",
|
|
64
63
|
"typescript": "5.9.3"
|
|
65
64
|
},
|
|
66
65
|
"scripts": {
|
|
67
66
|
"designsystemet": "tsx ./bin/designsystemet.ts",
|
|
68
67
|
"designsystemet:inspect": "tsx --inspect-brk ./bin/designsystemet.ts",
|
|
69
|
-
"build": "
|
|
68
|
+
"build": "tsdown && pnpm build:types && pnpm build:json-schema",
|
|
70
69
|
"build:types": "tsc --emitDeclarationOnly --declaration",
|
|
71
70
|
"build:json-schema": "tsx ./src/scripts/createJsonSchema.ts",
|
|
72
71
|
"types": "tsc --noEmit",
|
|
73
72
|
"test:tokens-create-options": "pnpm run designsystemet tokens create -m dominant:\"#007682\" -n \"#003333\" -b 99 -o ./temp/options/design-tokens --theme options --clean",
|
|
74
|
-
"test:tokens-create-config": "pnpm run designsystemet tokens create --config ./
|
|
75
|
-
"test:tokens-build": "pnpm run designsystemet tokens build -t ./temp/options/design-tokens -o ./temp/options/build --clean",
|
|
76
|
-
"test:tokens-build-
|
|
77
|
-
"test:tokens-build-config": "pnpm run designsystemet tokens build -t ./
|
|
78
|
-
"test:tokens-build-
|
|
79
|
-
"test:tokens-build-config-tailwind": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean --experimental-tailwind",
|
|
80
|
-
"test:tokens-create-and-build-options": "pnpm test:tokens-create-options && pnpm test:tokens-build",
|
|
73
|
+
"test:tokens-create-config": "pnpm run designsystemet tokens create --config ./tests/test-tokens.config.json",
|
|
74
|
+
"test:tokens-build-options": "pnpm run designsystemet tokens build -t ./temp/options/design-tokens -o ./temp/options/build --clean --experimental-tailwind",
|
|
75
|
+
"test:tokens-build-config": "pnpm run designsystemet tokens build -t ./tests/config/design-tokens -o ./tests/config/build --clean --experimental-tailwind",
|
|
76
|
+
"test:tokens-build-config:inspect": "pnpm run designsystemet:inspect tokens build -t ./tests/config/design-tokens -o ./tests/config/build --clean",
|
|
77
|
+
"test:tokens-create-and-build-options": "pnpm test:tokens-create-options && pnpm test:tokens-build-options",
|
|
81
78
|
"test:tokens-create-and-build-config": "pnpm test:tokens-create-config && pnpm test:tokens-build-config",
|
|
82
79
|
"test:generate-config-from-tokens": "pnpm run designsystemet generate-config-from-tokens -d ../../design-tokens --dry",
|
|
83
80
|
"test": "node -v && pnpm test:tokens-create-and-build-options && pnpm test:generate-config-from-tokens && pnpm test:tokens-create-and-build-config",
|