@digdir/designsystemet 0.0.8 → 0.0.10
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/build/src/codemods/css/plugins.js +45 -0
- package/dist/build/src/codemods/css/run.js +17 -0
- package/dist/build/src/codemods/jsx/classname-prefix.js +80 -0
- package/dist/build/src/migrations/beta-to-v1.js +281 -0
- package/dist/build/src/migrations/index.js +2 -8
- package/dist/build/src/test/jsx-test.js +10 -0
- package/dist/build/src/tokens/build.js +6 -2
- package/dist/build/src/tokens/formatters.js +3 -2
- package/dist/build/tsconfig.tsbuildinfo +1 -1
- package/dist/types/src/codemods/css/plugins.d.ts +6 -0
- package/dist/types/src/codemods/css/plugins.d.ts.map +1 -0
- package/dist/types/src/codemods/css/run.d.ts +8 -0
- package/dist/types/src/codemods/css/run.d.ts.map +1 -0
- package/dist/types/src/codemods/jsx/classname-prefix.d.ts +10 -0
- package/dist/types/src/codemods/jsx/classname-prefix.d.ts.map +1 -0
- package/dist/types/src/migrations/{light-dark.d.ts → beta-to-v1.d.ts} +1 -1
- package/dist/types/src/migrations/beta-to-v1.d.ts.map +1 -0
- package/dist/types/src/migrations/index.d.ts +1 -4
- package/dist/types/src/migrations/index.d.ts.map +1 -1
- package/dist/types/src/test/jsx-test.d.ts +4 -0
- package/dist/types/src/test/jsx-test.d.ts.map +1 -0
- package/dist/types/src/tokens/build.d.ts.map +1 -1
- package/dist/types/src/tokens/formatters.d.ts.map +1 -1
- package/package.json +10 -5
- package/dist/build/src/codemods/css-var-codemod.js +0 -36
- package/dist/build/src/migrations/light-dark.js +0 -22
- package/dist/build/src/migrations/prefix-ds.js +0 -7
- package/dist/build/src/migrations/release-v1.js +0 -5
- package/dist/build/src/migrations/tokens-v2.js +0 -210
- package/dist/types/src/codemods/css-var-codemod.d.ts +0 -7
- package/dist/types/src/codemods/css-var-codemod.d.ts.map +0 -1
- package/dist/types/src/migrations/light-dark.d.ts.map +0 -1
- package/dist/types/src/migrations/prefix-ds.d.ts +0 -3
- package/dist/types/src/migrations/prefix-ds.d.ts.map +0 -1
- package/dist/types/src/migrations/release-v1.d.ts +0 -3
- package/dist/types/src/migrations/release-v1.d.ts.map +0 -1
- package/dist/types/src/migrations/tokens-v2.d.ts +0 -3
- package/dist/types/src/migrations/tokens-v2.d.ts.map +0 -1
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import * as R from 'ramda';
|
|
2
|
+
import chalk from 'chalk';
|
|
3
|
+
import hash from 'object-hash';
|
|
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)
|
|
11
|
+
return;
|
|
12
|
+
Object.entries(dictionary).forEach(([from, to]) => {
|
|
13
|
+
if (!selector.includes(from))
|
|
14
|
+
return;
|
|
15
|
+
const newSelector = selector.replace(new RegExp(from, 'g'), to);
|
|
16
|
+
rule.selector = newSelector;
|
|
17
|
+
});
|
|
18
|
+
},
|
|
19
|
+
});
|
|
20
|
+
export const cssVarRename = (dictionary) => ({
|
|
21
|
+
postcssPlugin: `Replaces CSS variables ${hash(dictionary)}`,
|
|
22
|
+
Declaration(decl) {
|
|
23
|
+
const { value, prop } = decl;
|
|
24
|
+
const deleted = new Set();
|
|
25
|
+
Object.entries(dictionary).forEach(([from, to]) => {
|
|
26
|
+
if (!R.isEmpty(to)) {
|
|
27
|
+
switch (true) {
|
|
28
|
+
case R.includes(from, value):
|
|
29
|
+
to === '[delete]' && deleted.add(deleteMsg(decl, from));
|
|
30
|
+
decl.value = value.replace(from, to);
|
|
31
|
+
break;
|
|
32
|
+
case R.includes(from, prop):
|
|
33
|
+
if (decl.variable) {
|
|
34
|
+
to === '[delete]' && deleted.add(deleteMsg(decl, from));
|
|
35
|
+
decl.prop = prop.replace(from, to);
|
|
36
|
+
break;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
if (deleted.size > 0) {
|
|
42
|
+
Array.from(deleted).forEach(printDelete);
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
});
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import fs from 'fs';
|
|
2
|
+
import postcss from 'postcss';
|
|
3
|
+
import glob from 'fast-glob';
|
|
4
|
+
export const runCssCodemod = async ({ plugins = [], globPattern = './**/*.css' }) => {
|
|
5
|
+
const processor = postcss(plugins);
|
|
6
|
+
const transform = async () => {
|
|
7
|
+
const files = await glob(globPattern, { ignore: ['node_modules/**', 'dist/**'] });
|
|
8
|
+
const filePromises = files.map(async (file) => {
|
|
9
|
+
const contents = fs.readFileSync(file).toString();
|
|
10
|
+
const result = await processor.process(contents, { from: file });
|
|
11
|
+
fs.writeFileSync(file, result.css);
|
|
12
|
+
});
|
|
13
|
+
await Promise.all(filePromises);
|
|
14
|
+
};
|
|
15
|
+
// Run the transform.
|
|
16
|
+
return transform();
|
|
17
|
+
};
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
const replaceInLiteral = (node) => {
|
|
2
|
+
if (node.startsWith('fds-')) {
|
|
3
|
+
return node.replace('fds-', 'ds-');
|
|
4
|
+
}
|
|
5
|
+
return node;
|
|
6
|
+
};
|
|
7
|
+
const replaceInTemplateLiteral = (node) => {
|
|
8
|
+
node.forEach((element) => {
|
|
9
|
+
const value = element.value.raw;
|
|
10
|
+
if (typeof value !== 'string')
|
|
11
|
+
return;
|
|
12
|
+
element.value.raw = replaceInLiteral(value);
|
|
13
|
+
});
|
|
14
|
+
};
|
|
15
|
+
const processNode = (node) => {
|
|
16
|
+
if (!node)
|
|
17
|
+
return;
|
|
18
|
+
if (node.type === 'Literal') {
|
|
19
|
+
const value = node.value;
|
|
20
|
+
if (typeof value !== 'string')
|
|
21
|
+
return;
|
|
22
|
+
node.value = replaceInLiteral(value);
|
|
23
|
+
}
|
|
24
|
+
else if (node.type === 'StringLiteral') {
|
|
25
|
+
const value = node.value;
|
|
26
|
+
if (typeof value !== 'string')
|
|
27
|
+
return;
|
|
28
|
+
node.value = replaceInLiteral(value);
|
|
29
|
+
}
|
|
30
|
+
else if (node.type === 'TemplateLiteral') {
|
|
31
|
+
node.quasis && replaceInTemplateLiteral(node.quasis);
|
|
32
|
+
}
|
|
33
|
+
else if (node.type === 'JSXExpressionContainer') {
|
|
34
|
+
const expression = node.expression;
|
|
35
|
+
if (!expression)
|
|
36
|
+
return;
|
|
37
|
+
if (expression.type === 'CallExpression') {
|
|
38
|
+
expression.arguments?.forEach(processNode);
|
|
39
|
+
}
|
|
40
|
+
else {
|
|
41
|
+
processNode(expression);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
else if (node.type === 'ConditionalExpression') {
|
|
45
|
+
node.test && processNode(node.test);
|
|
46
|
+
node.consequent && processNode(node.consequent);
|
|
47
|
+
node.alternate && processNode(node.alternate);
|
|
48
|
+
}
|
|
49
|
+
else if (node.type === 'BinaryExpression') {
|
|
50
|
+
node.right && processNode(node.right);
|
|
51
|
+
node.left && processNode(node.left);
|
|
52
|
+
}
|
|
53
|
+
else if (node.type === 'LogicalExpression') {
|
|
54
|
+
node.right && processNode(node.right);
|
|
55
|
+
node.left && processNode(node.left);
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
/**
|
|
59
|
+
* Replace all class prefixes from 'fds-' to 'ds-'
|
|
60
|
+
* @param file
|
|
61
|
+
* @param api
|
|
62
|
+
* @returns
|
|
63
|
+
*/
|
|
64
|
+
function replaceClassNamePrefix(file, api) {
|
|
65
|
+
const j = api.jscodeshift;
|
|
66
|
+
const root = j(file.source);
|
|
67
|
+
root.find(j.JSXElement).forEach((path) => {
|
|
68
|
+
j(path)
|
|
69
|
+
.find(j.JSXAttribute, { name: { name: 'className' } })
|
|
70
|
+
.forEach((nodePath) => {
|
|
71
|
+
processNode(nodePath.value.value);
|
|
72
|
+
});
|
|
73
|
+
});
|
|
74
|
+
return root.toSource({
|
|
75
|
+
quote: 'single',
|
|
76
|
+
reuseWhitespace: true,
|
|
77
|
+
wrapColumn: 100,
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
export default replaceClassNamePrefix;
|
|
@@ -0,0 +1,281 @@
|
|
|
1
|
+
import { cssClassRename, cssVarRename } from '../codemods/css/plugins.js';
|
|
2
|
+
import { runCssCodemod } from '../codemods/css/run.js';
|
|
3
|
+
export default (glob) => runCssCodemod({
|
|
4
|
+
globPattern: glob,
|
|
5
|
+
plugins: [
|
|
6
|
+
cssClassRename({}),
|
|
7
|
+
// New component token prefixes
|
|
8
|
+
cssVarRename({
|
|
9
|
+
'--fds-accordion': '--dsc-accordion',
|
|
10
|
+
'--fds-alert': '--dsc-alert',
|
|
11
|
+
'--fds-btn': '--dsc-btn',
|
|
12
|
+
'--fds-checkbox': '--dsc-checkbox',
|
|
13
|
+
'--fdsc-chip': '--dsc-chip',
|
|
14
|
+
'--fdsc-gap': '--dsc-chip-group-gap',
|
|
15
|
+
'--fdsc-removable': '--dsc-removable',
|
|
16
|
+
'--fdsc-bottom': '--dsc-bottom',
|
|
17
|
+
'--fds-pagination': '--dsc-pagination',
|
|
18
|
+
'--fds-popover': '--dsc-popover',
|
|
19
|
+
'--fds-radio': '--dsc-radio',
|
|
20
|
+
'--f-search': '--dsc-search',
|
|
21
|
+
'--fds-skeleton': '--dsc-skeleton',
|
|
22
|
+
'--fds-switch--transition': '--dsc-switch-transition',
|
|
23
|
+
'--fds-switch': '--dsc-switch',
|
|
24
|
+
'--table-padding': '--dsc-table-padding',
|
|
25
|
+
'--border-radius': '--dsc-table-border-radius',
|
|
26
|
+
'--fds-tabs': '--dsc-tabs',
|
|
27
|
+
'--fds-tag': '--dsc-tag',
|
|
28
|
+
'--fds-focus-border-width': '--dsc-focus-border-width',
|
|
29
|
+
}),
|
|
30
|
+
// New tokens
|
|
31
|
+
cssVarRename({
|
|
32
|
+
'--fds-semantic-surface-first-light': '--ds-color-brand1-surface-default',
|
|
33
|
+
'--fds-semantic-surface-first-light-hover': '--ds-color-brand1-surface-hover',
|
|
34
|
+
'--fds-semantic-surface-first-light-active': '--ds-color-brand1-surface-active',
|
|
35
|
+
'--fds-semantic-surface-first-dark': '[delete]',
|
|
36
|
+
'--fds-semantic-surface-second-light': '--ds-color-brand2-surface-default',
|
|
37
|
+
'--fds-semantic-surface-second-light-hover': '--ds-color-brand2-surface-hover',
|
|
38
|
+
'--fds-semantic-surface-second-light-active': '--ds-color-brand2-surface-active',
|
|
39
|
+
'--fds-semantic-surface-second-dark': '[delete]',
|
|
40
|
+
'--fds-semantic-surface-third-light': '--ds-color-brand3-surface-default',
|
|
41
|
+
'--fds-semantic-surface-third-light-hover': '--ds-color-brand3-surface-hover',
|
|
42
|
+
'--fds-semantic-surface-third-light-active': '--ds-color-brand3-surface-active',
|
|
43
|
+
'--fds-semantic-surface-third-dark': '[delete]',
|
|
44
|
+
'--fds-semantic-surface-action-first-subtle': '--ds-color-accent-surface-default',
|
|
45
|
+
'--fds-semantic-surface-action-first-subtle-hover': '--ds-color-accent-surface-hover',
|
|
46
|
+
'--fds-semantic-surface-action-first-default': '--ds-color-accent-base-default',
|
|
47
|
+
'--fds-semantic-surface-action-first-hover': '--ds-color-accent-base-hover',
|
|
48
|
+
'--fds-semantic-surface-action-first-active': '--ds-color-accent-base-active',
|
|
49
|
+
'--fds-semantic-surface-action-first-no_fill': '--ds-color-accent-background-default',
|
|
50
|
+
'--fds-semantic-surface-action-first-no_fill-hover': '--ds-color-accent-surface-default',
|
|
51
|
+
'--fds-semantic-surface-action-first-no_fill-active': '--ds-color-accent-surface-hover',
|
|
52
|
+
'--fds-semantic-surface-action-second-subtle': '--ds-color-neutral-surface-default',
|
|
53
|
+
'--fds-semantic-surface-action-second-subtle-hover': '--ds-color-neutral-surface-hover',
|
|
54
|
+
'--fds-semantic-surface-action-second-default': '--ds-color-neutral-base-default',
|
|
55
|
+
'--fds-semantic-surface-action-second-hover': '--ds-color-neutral-base-hover',
|
|
56
|
+
'--fds-semantic-surface-action-second-active': '--ds-color-neutral-base-active',
|
|
57
|
+
'--fds-semantic-surface-action-second-no_fill': '--ds-color-neutral-background-default',
|
|
58
|
+
'--fds-semantic-surface-action-second-no_fill-hover': '--ds-color-neutral-surface-default',
|
|
59
|
+
'--fds-semantic-surface-action-second-no_fill-active': '--ds-color-neutral-surface-hover',
|
|
60
|
+
'--fds-semantic-surface-action-subtle': '--ds-color-accent-surface-default',
|
|
61
|
+
'--fds-semantic-surface-action-subtle-hover': '--ds-color-accent-surface-hover',
|
|
62
|
+
'--fds-semantic-surface-action-default': '--ds-color-accent-base-default',
|
|
63
|
+
'--fds-semantic-surface-action-hover': '--ds-color-accent-base-hover',
|
|
64
|
+
'--fds-semantic-surface-action-active': '--ds-color-accent-base-active',
|
|
65
|
+
'--fds-semantic-surface-action-no_fill': '--ds-color-accent-background-default',
|
|
66
|
+
'--fds-semantic-surface-action-no_fill-hover': '--ds-color-accent-surface-default',
|
|
67
|
+
'--fds-semantic-surface-action-no_fill-active': '--ds-color-accent-surface-hover',
|
|
68
|
+
'--fds-semantic-surface-action-checked': '--ds-color-accent-base-default',
|
|
69
|
+
'--fds-semantic-surface-neutral-default': '--ds-color-neutral-background-default',
|
|
70
|
+
'--fds-semantic-surface-neutral-selected': '[delete]',
|
|
71
|
+
'--fds-semantic-surface-neutral-subtle': '--ds-color-neutral-background-subtle',
|
|
72
|
+
'--fds-semantic-surface-neutral-subtle-hover': '--ds-color-neutral-surface-default',
|
|
73
|
+
'--fds-semantic-surface-neutral-dark': '[delete]',
|
|
74
|
+
'--fds-semantic-surface-neutral-dark-hover': '[delete]',
|
|
75
|
+
'--fds-semantic-surface-neutral-inverted': '[delete]',
|
|
76
|
+
'--fds-semantic-surface-success-subtle': '--ds-color-success-surface-default',
|
|
77
|
+
'--fds-semantic-surface-success-subtle-hover': '--ds-color-success-surface-hover',
|
|
78
|
+
'--fds-semantic-surface-success-default': '--ds-color-success-base-default',
|
|
79
|
+
'--fds-semantic-surface-success-hover': '--ds-color-success-base-hover',
|
|
80
|
+
'--fds-semantic-surface-success-active': '--ds-color-success-base-active',
|
|
81
|
+
'--fds-semantic-surface-success-no_fill': '--ds-color-success-background-default',
|
|
82
|
+
'--fds-semantic-surface-success-no_fill-hover': '--ds-color-success-surface-default',
|
|
83
|
+
'--fds-semantic-surface-success-no_fill-active': '--ds-color-success-surface-hover',
|
|
84
|
+
'--fds-semantic-surface-warning-subtle': '--ds-color-warning-surface-default',
|
|
85
|
+
'--fds-semantic-surface-warning-subtle-hover': '--ds-color-warning-surface-default',
|
|
86
|
+
'--fds-semantic-surface-warning-default': '--ds-color-warning-surface-default',
|
|
87
|
+
'--fds-semantic-surface-warning-default-hover': '--ds-color-warning-surface-hover',
|
|
88
|
+
'--fds-semantic-surface-danger-subtle': '--ds-color-danger-surface-default',
|
|
89
|
+
'--fds-semantic-surface-danger-subtle-hover': '--ds-color-danger-surface-hover',
|
|
90
|
+
'--fds-semantic-surface-danger-default': '--ds-color-danger-base-default',
|
|
91
|
+
'--fds-semantic-surface-danger-hover': '--ds-color-danger-base-hover',
|
|
92
|
+
'--fds-semantic-surface-danger-active': '--ds-color-danger-base-active',
|
|
93
|
+
'--fds-semantic-surface-danger-no_fill': '--ds-color-danger-background-default',
|
|
94
|
+
'--fds-semantic-surface-danger-no_fill-hover': '--ds-color-danger-surface-default',
|
|
95
|
+
'--fds-semantic-surface-danger-no_fill-active': '--ds-color-danger-surface-hover',
|
|
96
|
+
'--fds-semantic-surface-info-subtle': '--ds-color-info-surface-default',
|
|
97
|
+
'--fds-semantic-surface-info-subtle-hover': '[delete]',
|
|
98
|
+
'--fds-semantic-surface-on_inverted-default': '[delete]',
|
|
99
|
+
'--fds-semantic-surface-on_inverted-hover': '[delete]',
|
|
100
|
+
'--fds-semantic-surface-on_inverted-active': '[delete]',
|
|
101
|
+
'--fds-semantic-surface-on_inverted-no_fill': '[delete]',
|
|
102
|
+
'--fds-semantic-surface-on_inverted-no_fill-hover': '[delete]',
|
|
103
|
+
'--fds-semantic-surface-on_inverted-no_fill-active': '[delete]',
|
|
104
|
+
'--fds-semantic-surface-focus-default': '[delete]',
|
|
105
|
+
'--fds-semantic-border-first-default': '--ds-color-brand1-base-default',
|
|
106
|
+
'--fds-semantic-border-first-hover': '--ds-color-brand1-base-hover',
|
|
107
|
+
'--fds-semantic-border-first-active': '--ds-color-brand1-base-active',
|
|
108
|
+
'--fds-semantic-border-second-default': '--ds-color-brand2-base-default',
|
|
109
|
+
'--fds-semantic-border-second-hover': '--ds-color-brand2-base-hover',
|
|
110
|
+
'--fds-semantic-border-second-active': '--ds-color-brand2-base-active',
|
|
111
|
+
'--fds-semantic-border-third-default': '--ds-color-brand3-base-default',
|
|
112
|
+
'--fds-semantic-border-third-hover': '--ds-color-brand3-base-hover',
|
|
113
|
+
'--fds-semantic-border-third-active': '--ds-color-brand3-base-active',
|
|
114
|
+
'--fds-semantic-border-action-first-subtle': '--ds-color-accent-border-subtle',
|
|
115
|
+
'--fds-semantic-border-action-first-subtle-hover': '--ds-color-accent-border-default',
|
|
116
|
+
'--fds-semantic-border-action-first-default': '--ds-color-accent-base-default',
|
|
117
|
+
'--fds-semantic-border-action-first-hover': '--ds-color-accent-base-hover',
|
|
118
|
+
'--fds-semantic-border-action-first-active': '--ds-color-accent-base-active',
|
|
119
|
+
'--fds-semantic-border-action-second-subtle': '--ds-color-neutral-border-subtle',
|
|
120
|
+
'--fds-semantic-border-action-second-subtle-hover': '--ds-color-neutral-border-default',
|
|
121
|
+
'--fds-semantic-border-action-second-default': '--ds-color-neutral-base-default',
|
|
122
|
+
'--fds-semantic-border-action-second-hover': '--ds-color-neutral-base-hover',
|
|
123
|
+
'--fds-semantic-border-action-second-active': '--ds-color-neutral-base-active',
|
|
124
|
+
'--fds-semantic-border-action-subtle': '--ds-color-accent-border-subtle',
|
|
125
|
+
'--fds-semantic-border-action-subtle-hover': '--ds-color-accent-border-default',
|
|
126
|
+
'--fds-semantic-border-action-default': '--ds-color-accent-base-default',
|
|
127
|
+
'--fds-semantic-border-action-hover': '--ds-color-accent-base-hover',
|
|
128
|
+
'--fds-semantic-border-action-active': '--ds-color-accent-base-active',
|
|
129
|
+
'--fds-semantic-border-action-dark': '[delete]',
|
|
130
|
+
'--fds-semantic-border-action-dark-hover': '[delete]',
|
|
131
|
+
'--fds-semantic-border-info-default': '--ds-color-info-border-strong',
|
|
132
|
+
'--fds-semantic-border-neutral-default': '--ds-color-neutral-border-strong',
|
|
133
|
+
'--fds-semantic-border-neutral-subtle': '--ds-color-neutral-border-subtle',
|
|
134
|
+
'--fds-semantic-border-neutral-strong': '--ds-color-neutral-base-default',
|
|
135
|
+
'--fds-semantic-border-success-default': '--ds-color-success-border-default',
|
|
136
|
+
'--fds-semantic-border-success-hover': '[delete]',
|
|
137
|
+
'--fds-semantic-border-success-active': '[delete]',
|
|
138
|
+
'--fds-semantic-border-warning-default': '--ds-color-warning-border-default',
|
|
139
|
+
'--fds-semantic-border-warning-hover': '[delete]',
|
|
140
|
+
'--fds-semantic-border-warning-active': '[delete]',
|
|
141
|
+
'--fds-semantic-border-danger-default': '--ds-color-danger-border-default',
|
|
142
|
+
'--fds-semantic-border-danger-hover': '--ds-color-danger-border-strong',
|
|
143
|
+
'--fds-semantic-border-danger-active': '--ds-color-danger-border-strong',
|
|
144
|
+
'--fds-semantic-border-focus-outline': '--ds-color-neutral-text-default',
|
|
145
|
+
'--fds-semantic-border-focus-boxshadow': '--ds-color-neutral-background-default',
|
|
146
|
+
'--fds-semantic-border-on_inverted-default': '[delete]',
|
|
147
|
+
'--fds-semantic-border-input-default': '--ds-color-neutral-border-default',
|
|
148
|
+
'--fds-semantic-border-input-hover': '--ds-color-accent-border-strong',
|
|
149
|
+
'--fds-semantic-border-divider-default': '--ds-color-neutral-border-subtle',
|
|
150
|
+
'--fds-semantic-border-divider-subtle': '--ds-color-neutral-border-subtle',
|
|
151
|
+
'--fds-semantic-border-divider-strong': '--ds-color-neutral-border-default',
|
|
152
|
+
'--fds-semantic-text-action-first-default': '--ds-color-accent-base-default',
|
|
153
|
+
'--fds-semantic-text-action-first-hover': '--ds-color-accent-base-hover',
|
|
154
|
+
'--fds-semantic-text-action-first-active': '--ds-color-accent-base-active',
|
|
155
|
+
'--fds-semantic-text-action-first-on_action': '--ds-color-accent-contrast-default',
|
|
156
|
+
'--fds-semantic-text-action-second-default': '--ds-color-neutral-base-default',
|
|
157
|
+
'--fds-semantic-text-action-second-hover': '--ds-color-neutral-base-hover',
|
|
158
|
+
'--fds-semantic-text-action-second-active': '--ds-color-neutral-base-active',
|
|
159
|
+
'--fds-semantic-text-action-second-on_action': '--ds-color-neutral-contrast-default',
|
|
160
|
+
'--fds-semantic-text-action-default': '--ds-color-accent-base-default',
|
|
161
|
+
'--fds-semantic-text-action-hover': '--ds-color-accent-base-hover',
|
|
162
|
+
'--fds-semantic-text-action-active': '--ds-color-accent-base-active',
|
|
163
|
+
'--fds-semantic-text-action-on_action': '--ds-color-accent-contrast-default',
|
|
164
|
+
'--fds-semantic-text-success-default': '--ds-color-success-base-default',
|
|
165
|
+
'--fds-semantic-text-success-hover': '--ds-color-success-base-default',
|
|
166
|
+
'--fds-semantic-text-success-active': '--ds-color-success-base-default',
|
|
167
|
+
'--fds-semantic-text-success-on_success': '--ds-color-success-contrast-default',
|
|
168
|
+
'--fds-semantic-text-success-on_success_subtle': '--ds-color-success-text-default',
|
|
169
|
+
'--fds-semantic-text-neutral-default': '--ds-color-neutral-text-default',
|
|
170
|
+
'--fds-semantic-text-neutral-subtle': '--ds-color-neutral-text-subtle',
|
|
171
|
+
'--fds-semantic-text-neutral-on_inverted': '--ds-color-neutral-contrast-default',
|
|
172
|
+
'--fds-semantic-text-warning-default': '[delete]',
|
|
173
|
+
'--fds-semantic-text-warning-icon_warning': '--ds-color-warning-base-default',
|
|
174
|
+
'--fds-semantic-text-warning-on_warning': '--ds-color-neutral-text-default',
|
|
175
|
+
'--fds-semantic-text-danger-default': '--ds-color-danger-text-default',
|
|
176
|
+
'--fds-semantic-text-danger-hover': '--ds-color-danger-text-default',
|
|
177
|
+
'--fds-semantic-text-danger-active': '--ds-color-danger-text-default',
|
|
178
|
+
'--fds-semantic-text-danger-on_danger': '--ds-color-danger-contrast-default',
|
|
179
|
+
'--fds-semantic-text-danger-on_danger_subtle': '--ds-color-danger-text-default',
|
|
180
|
+
'--fds-semantic-text-visited-default': '--ds-global-purple-13',
|
|
181
|
+
'--fds-semantic-background-default': '--ds-color-neutral-background-default',
|
|
182
|
+
'--fds-semantic-background-subtle': '--ds-color-neutral-background-subtle',
|
|
183
|
+
'--fds-typography-heading-3xlarge': '[delete]',
|
|
184
|
+
'--fds-typography-heading-2xlarge': '--ds-typography-heading-2xl',
|
|
185
|
+
'--fds-typography-heading-xlarge': '--ds-typography-heading-xl',
|
|
186
|
+
'--fds-typography-heading-large': '--ds-typography-heading-lg',
|
|
187
|
+
'--fds-typography-heading-medium': '--ds-typography-heading-md',
|
|
188
|
+
'--fds-typography-heading-small': '--ds-typography-heading-sm',
|
|
189
|
+
'--fds-typography-heading-xsmall': '--ds-typography-heading-xs',
|
|
190
|
+
'--fds-typography-heading-xxsmall': '--ds-typography-heading-2xs',
|
|
191
|
+
'--fds-typography-ingress-large': '--ds-typography-ingress-lg',
|
|
192
|
+
'--fds-typography-ingress-medium': '--ds-typography-ingress-md',
|
|
193
|
+
'--fds-typography-ingress-small': '--ds-typography-ingress-sm',
|
|
194
|
+
'--fds-typography-ingress-xsmall': '--ds-typography-ingress-xs',
|
|
195
|
+
'--fds-typography-paragraph-large': '--ds-typography-paragraph-lg',
|
|
196
|
+
'--fds-typography-paragraph-medium': '--ds-typography-paragraph-md',
|
|
197
|
+
'--fds-typography-paragraph-small': '--ds-typography-paragraph-sm',
|
|
198
|
+
'--fds-typography-paragraph-xsmall': '--ds-typography-paragraph-xs',
|
|
199
|
+
'--fds-typography-paragraph-short-large': '--ds-typography-paragraph-short-lg',
|
|
200
|
+
'--fds-typography-paragraph-short-medium': '--ds-typography-paragraph-short-md',
|
|
201
|
+
'--fds-typography-paragraph-short-small': '--ds-typography-paragraph-short-sm',
|
|
202
|
+
'--fds-typography-paragraph-short-xsmall': '--ds-typography-paragraph-short-xs',
|
|
203
|
+
'--fds-typography-paragraph-long-large': '--ds-typography-paragraph-long-lg',
|
|
204
|
+
'--fds-typography-paragraph-long-medium': '--ds-typography-paragraph-long-md',
|
|
205
|
+
'--fds-typography-paragraph-long-small': '--ds-typography-paragraph-long-sm',
|
|
206
|
+
'--fds-typography-paragraph-long-xsmall': '--ds-typography-paragraph-long-xs',
|
|
207
|
+
'--fds-typography-label-large': '--ds-typography-label-lg',
|
|
208
|
+
'--fds-typography-label-medium': '--ds-typography-label-md',
|
|
209
|
+
'--fds-typography-label-small': '--ds-typography-label-sm',
|
|
210
|
+
'--fds-typography-label-xsmall': '--ds-typography-label-xs',
|
|
211
|
+
'--fds-typography-error_message-large': '--ds-typography-error_message-lg',
|
|
212
|
+
'--fds-typography-error_message-medium': '--ds-typography-error_message-md',
|
|
213
|
+
'--fds-typography-error_message-small': '--ds-typography-error_message-sm',
|
|
214
|
+
'--fds-typography-error_message-xsmall': '--ds-typography-error_message-xs',
|
|
215
|
+
'--fds-typography-interactive-large': '--ds-typography-paragraph-short-lg',
|
|
216
|
+
'--fds-typography-interactive-medium': '--ds-typography-paragraph-short-md',
|
|
217
|
+
'--fds-typography-interactive-small': '--ds-typography-paragraph-short-sm',
|
|
218
|
+
'--fds-border_radius-interactive': '--ds-border-radius-md',
|
|
219
|
+
'--fds-border_radius-small': '--ds-border-radius-sm',
|
|
220
|
+
'--fds-border_radius-medium': '--ds-border-radius-md',
|
|
221
|
+
'--fds-border_radius-large': '--ds-border-radius-lg',
|
|
222
|
+
'--fds-border_radius-xlarge': '--ds-border-radius-xl',
|
|
223
|
+
'--fds-border_radius-xxlarge': '--ds-border-radius-2xl',
|
|
224
|
+
'--fds-border_radius-xxxlarge': '--ds-border-radius-3xl',
|
|
225
|
+
'--fds-border_radius-xxxxlarge': '--ds-border-radius-4xl',
|
|
226
|
+
'--fds-border_radius-full': '--ds-border-radius-full',
|
|
227
|
+
'--fds-base_spacing': '[delete]',
|
|
228
|
+
'--fds-base_sizing': '[delete]',
|
|
229
|
+
'--fds-border_width-default': '--ds-border-width-default',
|
|
230
|
+
'--fds-border_width-active': '--ds-border-width-active',
|
|
231
|
+
'--fds-focus-border-width': '--ds-focus-border-width', // suggestion
|
|
232
|
+
'--fds-border_width-tab_focus': '--ds-border-width-tab_focus', // Skulle denne fjernes?
|
|
233
|
+
'--fds-shadow-xsmall': '--ds-shadow-xs',
|
|
234
|
+
'--fds-shadow-small': '--ds-shadow-sm',
|
|
235
|
+
'--fds-shadow-medium': '--ds-shadow-md',
|
|
236
|
+
'--fds-shadow-large': '--ds-shadow-lg',
|
|
237
|
+
'--fds-shadow-xlarge': '--ds-shadow-xl',
|
|
238
|
+
'--fds-spacing-0': '--ds-spacing-0',
|
|
239
|
+
'--fds-spacing-1': '--ds-spacing-1',
|
|
240
|
+
'--fds-spacing-2': '--ds-spacing-2',
|
|
241
|
+
'--fds-spacing-3': '--ds-spacing-3',
|
|
242
|
+
'--fds-spacing-4': '--ds-spacing-4',
|
|
243
|
+
'--fds-spacing-5': '--ds-spacing-5',
|
|
244
|
+
'--fds-spacing-6': '--ds-spacing-6',
|
|
245
|
+
'--fds-spacing-7': '--ds-spacing-7',
|
|
246
|
+
'--fds-spacing-8': '--ds-spacing-8',
|
|
247
|
+
'--fds-spacing-9': '--ds-spacing-9',
|
|
248
|
+
'--fds-spacing-10': '--ds-spacing-10',
|
|
249
|
+
'--fds-spacing-11': '--ds-spacing-11',
|
|
250
|
+
'--fds-spacing-12': '--ds-spacing-12',
|
|
251
|
+
'--fds-spacing-13': '--ds-spacing-13',
|
|
252
|
+
'--fds-spacing-14': '--ds-spacing-14',
|
|
253
|
+
'--fds-spacing-15': '--ds-spacing-15',
|
|
254
|
+
'--fds-spacing-18': '--ds-spacing-18',
|
|
255
|
+
'--fds-spacing-22': '--ds-spacing-22',
|
|
256
|
+
'--fds-spacing-26': '--ds-spacing-26',
|
|
257
|
+
'--fds-spacing-30': '--ds-spacing-30',
|
|
258
|
+
'--fds-sizing-0': '--ds-sizing-0',
|
|
259
|
+
'--fds-sizing-1': '--ds-sizing-1',
|
|
260
|
+
'--fds-sizing-2': '--ds-sizing-2',
|
|
261
|
+
'--fds-sizing-3': '--ds-sizing-3',
|
|
262
|
+
'--fds-sizing-4': '--ds-sizing-4',
|
|
263
|
+
'--fds-sizing-5': '--ds-sizing-5',
|
|
264
|
+
'--fds-sizing-6': '--ds-sizing-6',
|
|
265
|
+
'--fds-sizing-7': '--ds-sizing-7',
|
|
266
|
+
'--fds-sizing-8': '--ds-sizing-8',
|
|
267
|
+
'--fds-sizing-9': '--ds-sizing-9',
|
|
268
|
+
'--fds-sizing-10': '--ds-sizing-10',
|
|
269
|
+
'--fds-sizing-11': '--ds-sizing-11',
|
|
270
|
+
'--fds-sizing-12': '--ds-sizing-12',
|
|
271
|
+
'--fds-sizing-13': '--ds-sizing-13',
|
|
272
|
+
'--fds-sizing-14': '--ds-sizing-14',
|
|
273
|
+
'--fds-sizing-15': '--ds-sizing-15',
|
|
274
|
+
'--fds-sizing-18': '--ds-sizing-18',
|
|
275
|
+
'--fds-sizing-22': '--ds-sizing-22',
|
|
276
|
+
'--fds-sizing-26': '--ds-sizing-26',
|
|
277
|
+
'--fds-sizing-30': '--ds-sizing-30',
|
|
278
|
+
'--fds-opacity-disabled': '--ds-opacity-disabled',
|
|
279
|
+
}),
|
|
280
|
+
],
|
|
281
|
+
});
|
|
@@ -1,10 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
import tokensV2 from './tokens-v2.js';
|
|
3
|
-
import prefixDs from './prefix-ds.js';
|
|
4
|
-
import releaseV1 from './release-v1.js';
|
|
1
|
+
import betaToV1 from './beta-to-v1.js';
|
|
5
2
|
export default {
|
|
6
|
-
'
|
|
7
|
-
'tokens-v2': tokensV2,
|
|
8
|
-
'css-prefix-ds': prefixDs,
|
|
9
|
-
'release-v1': releaseV1,
|
|
3
|
+
'beta-to-v1': betaToV1,
|
|
10
4
|
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import cl from 'classnames';
|
|
3
|
+
const DEFAULT = 'fds-default';
|
|
4
|
+
export default function JsxTest({ className }) {
|
|
5
|
+
return (_jsxs("div", { children: [_jsx("div", { className: 'fds-hey', onMouseEnter: () => 'fds-func', children: _jsx("button", { className: cl('fds-skrr', 'another', `fds-${DEFAULT}`, true && 'fds-hey', true && `fds-${DEFAULT}`, DEFAULT.includes('fds-') ? 'fds-yes' : 'fds-no', typeof DEFAULT === 'string'
|
|
6
|
+
? 'fds-yes'
|
|
7
|
+
: typeof DEFAULT === 'function'
|
|
8
|
+
? 'fds-no'
|
|
9
|
+
: 'fds-yes', className) }) }), _jsx("div", { className: `fds-${DEFAULT}` })] }));
|
|
10
|
+
}
|
|
@@ -6,7 +6,7 @@ import * as R from 'ramda';
|
|
|
6
6
|
import { nameKebab, typographyShorthand, sizeRem } from './transformers.js';
|
|
7
7
|
import { groupedTokens, scopedReferenceVariables } from './formatters.js';
|
|
8
8
|
void registerTransforms(StyleDictionary);
|
|
9
|
-
const prefix = '
|
|
9
|
+
const prefix = 'ds';
|
|
10
10
|
const basePxFontSize = 16;
|
|
11
11
|
const separator = '_';
|
|
12
12
|
const fileHeader = () => [`These files are generated from design tokens defind using Token Studio`];
|
|
@@ -75,7 +75,11 @@ const getStorefrontConfig = ({ fileName = 'unknown', buildPath = 'unknown' }) =>
|
|
|
75
75
|
destination: `${fileName}.ts`,
|
|
76
76
|
format: groupedTokens.name,
|
|
77
77
|
filter: (token) => {
|
|
78
|
-
|
|
78
|
+
if (R.test(/accent|neutral|brand1|brand2|brand3|success|danger|warning/, token.name) ||
|
|
79
|
+
R.includes('semantic', token.filePath)) {
|
|
80
|
+
return true;
|
|
81
|
+
}
|
|
82
|
+
return false;
|
|
79
83
|
},
|
|
80
84
|
},
|
|
81
85
|
],
|
|
@@ -8,6 +8,8 @@ export const scopedReferenceVariables = {
|
|
|
8
8
|
format: async function ({ dictionary, file, options }) {
|
|
9
9
|
const { allTokens, unfilteredTokens } = dictionary;
|
|
10
10
|
const { usesDtcg, outputReferences } = options;
|
|
11
|
+
const mode = file.destination.endsWith('dark.css') ? 'dark' : 'light';
|
|
12
|
+
const selector = mode === 'dark' ? '[data-ds-theme="dark"]' : ':root, [data-ds-theme="light"]';
|
|
11
13
|
const includeReferences = options.includeReferences;
|
|
12
14
|
let referencedTokens = [];
|
|
13
15
|
const format = createPropertyFormatter({
|
|
@@ -43,8 +45,7 @@ export const scopedReferenceVariables = {
|
|
|
43
45
|
.filter((formattedValue) => formattedValue);
|
|
44
46
|
return fileHeader({ file }).then((fileHeaderText) => `
|
|
45
47
|
${fileHeaderText}
|
|
46
|
-
:
|
|
47
|
-
${referenceTokens.length > 0 ? referenceTokens.join('\n') : ''}
|
|
48
|
+
${selector} {${referenceTokens.length > 0 ? referenceTokens.join('\n') : ''}
|
|
48
49
|
${tokens.join('\n')}
|
|
49
50
|
}
|
|
50
51
|
`);
|