@digdir/designsystemet 0.1.0-alpha.13 → 0.1.0-alpha.15
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 +32 -3439
- package/dist/src/colors/colorUtils.js +301 -343
- package/dist/src/colors/index.js +3 -607
- package/dist/src/colors/themeUtils.js +319 -348
- package/dist/src/colors/types.js +1 -1
- package/dist/src/init/createTokensPackage.js +230 -0
- package/dist/src/init/generateMetadataJson.js +16 -0
- package/dist/src/init/generateThemesJson.js +50 -0
- package/dist/src/init/index.js +7 -0
- package/dist/src/init/nextStepsMarkdown.js +90 -0
- package/dist/src/init/template/default-files/README.md +10 -0
- package/dist/src/init/template/default-files/design-tokens/README.md +3 -0
- package/dist/src/init/template/default-files/design-tokens/primitives/globals.json +197 -0
- package/dist/src/init/template/default-files/design-tokens/primitives/typography/default.json +86 -0
- package/dist/src/init/template/default-files/design-tokens/semantic/color.json +562 -0
- package/dist/src/init/template/default-files/design-tokens/semantic/style.json +543 -0
- package/dist/src/init/template/prettier.config.js +7 -0
- package/dist/src/init/template/template-files/design-tokens/primitives/colors/contrast/global.json +376 -0
- package/dist/src/init/template/template-files/design-tokens/primitives/colors/contrast/theme-template.json +314 -0
- package/dist/src/init/template/template-files/design-tokens/primitives/colors/dark/global.json +376 -0
- package/dist/src/init/template/template-files/design-tokens/primitives/colors/dark/theme-template.json +314 -0
- package/dist/src/init/template/template-files/design-tokens/primitives/colors/light/global.json +376 -0
- package/dist/src/init/template/template-files/design-tokens/primitives/colors/light/theme-template.json +314 -0
- package/dist/src/init/template/template-files/design-tokens/themes/theme-template.json +314 -0
- package/dist/src/init/template/template-files/package.json +23 -0
- package/dist/src/init/utils.js +11 -0
- package/dist/src/migrations/beta-to-v1.js +341 -407
- package/dist/src/migrations/codemods/css/plugins.js +36 -42
- package/dist/src/migrations/codemods/css/run.js +20 -17
- package/dist/src/migrations/codemods/jsx/classname-prefix.js +63 -59
- package/dist/src/migrations/codemods/jsx/run.js +20 -20
- package/dist/src/migrations/index.js +5 -436
- package/dist/src/migrations/react-beta-to-v1.js +4 -27
- package/dist/src/test/a.css +39 -0
- package/dist/src/test/jsx-test.js +12 -0
- package/dist/src/tokens/actions.js +23 -2176
- package/dist/src/tokens/build.js +54 -2974
- package/dist/src/tokens/configs.js +234 -2874
- package/dist/src/tokens/formats/css.js +153 -2632
- package/dist/src/tokens/formats/js-tokens.js +28 -42
- package/dist/src/tokens/transformers.js +44 -82
- package/dist/src/tokens/utils/noCase.js +26 -28
- package/dist/src/tokens/utils/permutateThemes.js +65 -217
- package/dist/src/tokens/utils/utils.js +25 -14
- package/package.json +16 -23
- package/LICENSE +0 -7
- package/dist/bin/designsystemet.js.map +0 -1
- package/dist/src/colors/colorUtils.js.map +0 -1
- package/dist/src/colors/index.js.map +0 -1
- package/dist/src/colors/themeUtils.js.map +0 -1
- package/dist/src/colors/types.js.map +0 -1
- package/dist/src/migrations/beta-to-v1.js.map +0 -1
- package/dist/src/migrations/codemods/css/plugins.js.map +0 -1
- package/dist/src/migrations/codemods/css/run.js.map +0 -1
- package/dist/src/migrations/codemods/jsx/classname-prefix.js.map +0 -1
- package/dist/src/migrations/codemods/jsx/run.js.map +0 -1
- package/dist/src/migrations/index.js.map +0 -1
- package/dist/src/migrations/react-beta-to-v1.js.map +0 -1
- package/dist/src/tokens/actions.js.map +0 -1
- package/dist/src/tokens/build.js.map +0 -1
- package/dist/src/tokens/configs.js.map +0 -1
- package/dist/src/tokens/formats/css.js.map +0 -1
- package/dist/src/tokens/formats/js-tokens.js.map +0 -1
- package/dist/src/tokens/transformers.js.map +0 -1
- package/dist/src/tokens/utils/noCase.js.map +0 -1
- package/dist/src/tokens/utils/permutateThemes.js.map +0 -1
- package/dist/src/tokens/utils/utils.js.map +0 -1
|
@@ -1,49 +1,43 @@
|
|
|
1
|
-
// src/migrations/codemods/css/plugins.ts
|
|
2
1
|
import * as R from "ramda";
|
|
3
2
|
import chalk from "chalk";
|
|
4
3
|
import hash from "object-hash";
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
4
|
+
const printDelete = (text)=>console.log(`${chalk.red('Deleted:')} ${text}`.replace(/"|'/g, ''));
|
|
5
|
+
const deleteMsg = (decl, from)=>`${chalk.yellow(from)} @ ${chalk.gray(`${JSON.stringify(decl.source?.input.file)}:${decl.source?.start?.line}:${decl.source?.start?.column}`)}`;
|
|
6
|
+
export const cssClassRename = (dictionary)=>({
|
|
7
|
+
postcssPlugin: `Renames CSS classes ${hash(dictionary)}`,
|
|
8
|
+
Rule (rule) {
|
|
9
|
+
const selector = rule.selector;
|
|
10
|
+
if (!selector) return;
|
|
11
|
+
Object.entries(dictionary).forEach(([from, to])=>{
|
|
12
|
+
if (!selector.includes(from)) return;
|
|
13
|
+
const newSelector = selector.replace(new RegExp(from, 'g'), to);
|
|
14
|
+
rule.selector = newSelector;
|
|
15
|
+
});
|
|
16
|
+
}
|
|
16
17
|
});
|
|
17
|
-
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
18
|
+
export const cssVarRename = (dictionary)=>({
|
|
19
|
+
postcssPlugin: `Replaces CSS variables ${hash(dictionary)}`,
|
|
20
|
+
Declaration (decl) {
|
|
21
|
+
const { value, prop } = decl;
|
|
22
|
+
const deleted = new Set();
|
|
23
|
+
Object.entries(dictionary).forEach(([from, to])=>{
|
|
24
|
+
if (!R.isEmpty(to)) {
|
|
25
|
+
switch(true){
|
|
26
|
+
case R.includes(from, value):
|
|
27
|
+
to === '[delete]' && deleted.add(deleteMsg(decl, from));
|
|
28
|
+
decl.value = value.replace(from, to);
|
|
29
|
+
break;
|
|
30
|
+
case R.includes(from, prop):
|
|
31
|
+
if (decl.variable) {
|
|
32
|
+
to === '[delete]' && deleted.add(deleteMsg(decl, from));
|
|
33
|
+
decl.prop = prop.replace(from, to);
|
|
34
|
+
break;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
if (deleted.size > 0) {
|
|
40
|
+
Array.from(deleted).forEach(printDelete);
|
|
36
41
|
}
|
|
37
42
|
}
|
|
38
|
-
}
|
|
39
43
|
});
|
|
40
|
-
if (deleted.size > 0) {
|
|
41
|
-
Array.from(deleted).forEach(printDelete);
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
});
|
|
45
|
-
export {
|
|
46
|
-
cssClassRename,
|
|
47
|
-
cssVarRename
|
|
48
|
-
};
|
|
49
|
-
//# sourceMappingURL=plugins.js.map
|
|
@@ -1,21 +1,24 @@
|
|
|
1
|
-
// src/migrations/codemods/css/run.ts
|
|
2
1
|
import fs from "fs";
|
|
3
2
|
import postcss from "postcss";
|
|
4
3
|
import glob from "fast-glob";
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
4
|
+
export const runCssCodemod = async ({ plugins = [], globPattern = './**/*.css' })=>{
|
|
5
|
+
const processor = postcss(plugins);
|
|
6
|
+
const transform = async ()=>{
|
|
7
|
+
const files = await glob(globPattern, {
|
|
8
|
+
ignore: [
|
|
9
|
+
'node_modules/**',
|
|
10
|
+
'dist/**'
|
|
11
|
+
]
|
|
12
|
+
});
|
|
13
|
+
const filePromises = files.map(async (file)=>{
|
|
14
|
+
const contents = fs.readFileSync(file).toString();
|
|
15
|
+
const result = await processor.process(contents, {
|
|
16
|
+
from: file
|
|
17
|
+
});
|
|
18
|
+
fs.writeFileSync(file, result.css);
|
|
19
|
+
});
|
|
20
|
+
await Promise.all(filePromises);
|
|
21
|
+
};
|
|
22
|
+
// Run the transform.
|
|
23
|
+
return transform();
|
|
17
24
|
};
|
|
18
|
-
export {
|
|
19
|
-
runCssCodemod
|
|
20
|
-
};
|
|
21
|
-
//# sourceMappingURL=run.js.map
|
|
@@ -1,65 +1,69 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
return node;
|
|
1
|
+
const replaceInLiteral = (node)=>{
|
|
2
|
+
if (node.startsWith('fds-')) {
|
|
3
|
+
return node.replace('fds-', 'ds-');
|
|
4
|
+
}
|
|
5
|
+
return node;
|
|
7
6
|
};
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
7
|
+
const replaceInTemplateLiteral = (node)=>{
|
|
8
|
+
node.forEach((element)=>{
|
|
9
|
+
const value = element.value.raw;
|
|
10
|
+
if (typeof value !== 'string') return;
|
|
11
|
+
element.value.raw = replaceInLiteral(value);
|
|
12
|
+
});
|
|
14
13
|
};
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
14
|
+
const processNode = (node)=>{
|
|
15
|
+
if (!node) return;
|
|
16
|
+
if (node.type === 'Literal') {
|
|
17
|
+
const value = node.value;
|
|
18
|
+
if (typeof value !== 'string') return;
|
|
19
|
+
node.value = replaceInLiteral(value);
|
|
20
|
+
} else if (node.type === 'StringLiteral') {
|
|
21
|
+
const value = node.value;
|
|
22
|
+
if (typeof value !== 'string') return;
|
|
23
|
+
node.value = replaceInLiteral(value);
|
|
24
|
+
} else if (node.type === 'TemplateLiteral') {
|
|
25
|
+
node.quasis && replaceInTemplateLiteral(node.quasis);
|
|
26
|
+
} else if (node.type === 'JSXExpressionContainer') {
|
|
27
|
+
const expression = node.expression;
|
|
28
|
+
if (!expression) return;
|
|
29
|
+
if (expression.type === 'CallExpression') {
|
|
30
|
+
expression.arguments?.forEach(processNode);
|
|
31
|
+
} else {
|
|
32
|
+
processNode(expression);
|
|
33
|
+
}
|
|
34
|
+
} else if (node.type === 'ConditionalExpression') {
|
|
35
|
+
node.test && processNode(node.test);
|
|
36
|
+
node.consequent && processNode(node.consequent);
|
|
37
|
+
node.alternate && processNode(node.alternate);
|
|
38
|
+
} else if (node.type === 'BinaryExpression') {
|
|
39
|
+
node.right && processNode(node.right);
|
|
40
|
+
node.left && processNode(node.left);
|
|
41
|
+
} else if (node.type === 'LogicalExpression') {
|
|
42
|
+
node.right && processNode(node.right);
|
|
43
|
+
node.left && processNode(node.left);
|
|
34
44
|
}
|
|
35
|
-
} else if (node.type === "ConditionalExpression") {
|
|
36
|
-
node.test && processNode(node.test);
|
|
37
|
-
node.consequent && processNode(node.consequent);
|
|
38
|
-
node.alternate && processNode(node.alternate);
|
|
39
|
-
} else if (node.type === "BinaryExpression") {
|
|
40
|
-
node.right && processNode(node.right);
|
|
41
|
-
node.left && processNode(node.left);
|
|
42
|
-
} else if (node.type === "LogicalExpression") {
|
|
43
|
-
node.right && processNode(node.right);
|
|
44
|
-
node.left && processNode(node.left);
|
|
45
|
-
}
|
|
46
45
|
};
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
46
|
+
/**
|
|
47
|
+
* Replace all class prefixes from 'fds-' to 'ds-'
|
|
48
|
+
* @param file
|
|
49
|
+
* @param api
|
|
50
|
+
* @returns
|
|
51
|
+
*/ function replaceClassNamePrefix(file, api) {
|
|
52
|
+
const j = api.jscodeshift;
|
|
53
|
+
const root = j(file.source);
|
|
54
|
+
root.find(j.JSXElement).forEach((path)=>{
|
|
55
|
+
j(path).find(j.JSXAttribute, {
|
|
56
|
+
name: {
|
|
57
|
+
name: 'className'
|
|
58
|
+
}
|
|
59
|
+
}).forEach((nodePath)=>{
|
|
60
|
+
processNode(nodePath.value.value);
|
|
61
|
+
});
|
|
62
|
+
});
|
|
63
|
+
return root.toSource({
|
|
64
|
+
quote: 'single',
|
|
65
|
+
reuseWhitespace: true,
|
|
66
|
+
wrapColumn: 100
|
|
53
67
|
});
|
|
54
|
-
});
|
|
55
|
-
return root.toSource({
|
|
56
|
-
quote: "single",
|
|
57
|
-
reuseWhitespace: true,
|
|
58
|
-
wrapColumn: 100
|
|
59
|
-
});
|
|
60
68
|
}
|
|
61
|
-
|
|
62
|
-
export {
|
|
63
|
-
classname_prefix_default as default
|
|
64
|
-
};
|
|
65
|
-
//# sourceMappingURL=classname-prefix.js.map
|
|
69
|
+
export default replaceClassNamePrefix;
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
// src/migrations/codemods/jsx/run.ts
|
|
2
1
|
import glob from "fast-glob";
|
|
3
2
|
import { run as jscodeshift } from "jscodeshift/src/Runner.js";
|
|
4
3
|
import chalk from "chalk";
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
4
|
+
const transformer = `${import.meta.dirname}/classname-prefix.ts`;
|
|
5
|
+
export const runJSXCodemod = async ({ globPattern = './**/*.tsx', dry })=>{
|
|
6
|
+
const options = {
|
|
7
|
+
dry,
|
|
8
|
+
extensions: 'tsx',
|
|
9
|
+
parser: 'tsx'
|
|
10
|
+
};
|
|
11
|
+
const transform = async ()=>{
|
|
12
|
+
const files = await glob(globPattern, {
|
|
13
|
+
ignore: [
|
|
14
|
+
'node_modules/**',
|
|
15
|
+
'dist/**'
|
|
16
|
+
]
|
|
17
|
+
});
|
|
18
|
+
const result = await jscodeshift(transformer, files, options);
|
|
19
|
+
if (result.ok) {
|
|
20
|
+
console.log(chalk.green('Finished parsing'));
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
return transform();
|
|
20
24
|
};
|
|
21
|
-
export {
|
|
22
|
-
runJSXCodemod
|
|
23
|
-
};
|
|
24
|
-
//# sourceMappingURL=run.js.map
|