@maggioli-design-system/design-tokens 13.6.1 → 13.7.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/android/colors.xml +1 -1
- package/dist/css/colors-hex-brand-apk.css +2 -2
- package/dist/css/colors-hex-brand-mindy.css +2 -2
- package/dist/css/colors-hex-brand-rnd.css +2 -2
- package/dist/css/colors-hex-brand-synbee.css +2 -2
- package/dist/css/colors-hex-brand.css +2 -2
- package/dist/css/colors-hex-default.css +2 -2
- package/dist/css/colors-hex-label.css +2 -2
- package/dist/css/colors-hex-status.css +2 -2
- package/dist/css/colors-hex-synbee-v1.css +2 -2
- package/dist/css/colors-hex-tones.css +2 -2
- package/dist/css/colors-hex.css +2 -2
- package/dist/css/colors-rgb-brand-apk.css +2 -2
- package/dist/css/colors-rgb-brand-mindy.css +2 -2
- package/dist/css/colors-rgb-brand-rnd.css +2 -2
- package/dist/css/colors-rgb-brand-synbee.css +2 -2
- package/dist/css/colors-rgb-brand.css +2 -2
- package/dist/css/colors-rgb-default.css +2 -2
- package/dist/css/colors-rgb-label.css +2 -2
- package/dist/css/colors-rgb-status.css +2 -2
- package/dist/css/colors-rgb-synbee-v1.css +2 -2
- package/dist/css/colors-rgb-tones.css +2 -2
- package/dist/css/colors-rgb.css +2 -2
- package/dist/flutter/colors-brand-apk.dart +2 -2
- package/dist/flutter/colors-brand-mindy.dart +2 -2
- package/dist/flutter/colors-brand-rnd.dart +2 -2
- package/dist/flutter/colors-brand-synbee.dart +2 -2
- package/dist/flutter/colors-brand.dart +2 -2
- package/dist/flutter/colors-default.dart +2 -2
- package/dist/flutter/colors-label.dart +2 -2
- package/dist/flutter/colors-status.dart +2 -2
- package/dist/flutter/colors-synbee-v1.dart +2 -2
- package/dist/flutter/colors-tones.dart +2 -2
- package/dist/flutter/colors.dart +2 -2
- package/dist/flutter/fonts.dart +2 -2
- package/dist/ios/StyleDictionaryColor.h +1 -1
- package/dist/ios/StyleDictionaryColor.m +1 -1
- package/dist/ios-swift/StyleDictionary.swift +1 -1
- package/dist/ios-swift/StyleDictionaryColor.swift +1 -1
- package/dist/js/colors-css-vars.js +2 -2
- package/dist/js/tailwind-colors-css-vars.js +2 -2
- package/dist/js/tailwind-font-family.js +2 -2
- package/dist/js/tailwind-font-size.js +2 -2
- package/dist/js/tailwind-leading.js +2 -36
- package/dist/js/tailwind-props.js +6 -4
- package/dist/js/tailwind-screens.js +2 -2
- package/dist/json/coolors.json +1 -1
- package/dist/package.json +5 -3
- package/dist/scss/variables.scss +1 -1
- package/dist/src/cli.mjs +4 -2
- package/dist/src/config/sd-brand-color.config.js +10 -0
- package/dist/src/formats/js-tailwind-leading/template.hbs +3 -3
- package/dist/src/lib/parse-args.mjs +27 -36
- package/dist/src/lib/utils.mjs +17 -4
- package/dist/style-dictionary/tokens/sizing/aspect-ratio.json +8 -2
- package/package.json +5 -3
package/dist/android/colors.xml
CHANGED
package/dist/css/colors-hex.css
CHANGED
package/dist/css/colors-rgb.css
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v13.
|
|
2
|
+
@magma-design-system/design-tokens v13.7.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at Wed,
|
|
5
|
+
Generated at Wed, 05 Mar 2025 16:15:14 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
// ignore_for_file: unused_import
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v13.
|
|
2
|
+
@magma-design-system/design-tokens v13.7.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at Wed,
|
|
5
|
+
Generated at Wed, 05 Mar 2025 16:15:14 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
// ignore_for_file: unused_import
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v13.
|
|
2
|
+
@magma-design-system/design-tokens v13.7.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at Wed,
|
|
5
|
+
Generated at Wed, 05 Mar 2025 16:15:14 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
// ignore_for_file: unused_import
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v13.
|
|
2
|
+
@magma-design-system/design-tokens v13.7.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at Wed,
|
|
5
|
+
Generated at Wed, 05 Mar 2025 16:15:14 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
// ignore_for_file: unused_import
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v13.
|
|
2
|
+
@magma-design-system/design-tokens v13.7.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at Wed,
|
|
5
|
+
Generated at Wed, 05 Mar 2025 16:15:14 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
// ignore_for_file: unused_import
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v13.
|
|
2
|
+
@magma-design-system/design-tokens v13.7.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at Wed,
|
|
5
|
+
Generated at Wed, 05 Mar 2025 16:15:14 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
// ignore_for_file: unused_import
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v13.
|
|
2
|
+
@magma-design-system/design-tokens v13.7.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at Wed,
|
|
5
|
+
Generated at Wed, 05 Mar 2025 16:15:14 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
// ignore_for_file: unused_import
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v13.
|
|
2
|
+
@magma-design-system/design-tokens v13.7.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at Wed,
|
|
5
|
+
Generated at Wed, 05 Mar 2025 16:15:14 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
// ignore_for_file: unused_import
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v13.
|
|
2
|
+
@magma-design-system/design-tokens v13.7.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at Wed,
|
|
5
|
+
Generated at Wed, 05 Mar 2025 16:15:14 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
// ignore_for_file: unused_import
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v13.
|
|
2
|
+
@magma-design-system/design-tokens v13.7.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at Wed,
|
|
5
|
+
Generated at Wed, 05 Mar 2025 16:15:14 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
// ignore_for_file: unused_import
|
package/dist/flutter/colors.dart
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v13.
|
|
2
|
+
@magma-design-system/design-tokens v13.7.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at Wed,
|
|
5
|
+
Generated at Wed, 05 Mar 2025 16:15:14 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
// ignore_for_file: unused_import
|
package/dist/flutter/fonts.dart
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v13.
|
|
2
|
+
@magma-design-system/design-tokens v13.7.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at Wed,
|
|
5
|
+
Generated at Wed, 05 Mar 2025 16:15:14 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
// ignore_for_file: unused_import
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v13.
|
|
2
|
+
@magma-design-system/design-tokens v13.7.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at Wed,
|
|
5
|
+
Generated at Wed, 05 Mar 2025 16:15:14 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
const palette = {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v13.
|
|
2
|
+
@magma-design-system/design-tokens v13.7.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at Wed,
|
|
5
|
+
Generated at Wed, 05 Mar 2025 16:15:14 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
const getColor = (cssVar, { opacityVariable, opacityValue }) => {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v13.
|
|
2
|
+
@magma-design-system/design-tokens v13.7.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at Wed,
|
|
5
|
+
Generated at Wed, 05 Mar 2025 16:15:14 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
const fontFamily = {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v13.
|
|
2
|
+
@magma-design-system/design-tokens v13.7.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at Wed,
|
|
5
|
+
Generated at Wed, 05 Mar 2025 16:15:14 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
const fontSize = {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v13.
|
|
2
|
+
@magma-design-system/design-tokens v13.7.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at Wed,
|
|
5
|
+
Generated at Wed, 05 Mar 2025 16:15:14 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
const leading = {
|
|
@@ -24,40 +24,6 @@ const leading = {
|
|
|
24
24
|
'3xl': '2.5rem',
|
|
25
25
|
'4xl-px': '48px',
|
|
26
26
|
'4xl': '3rem',
|
|
27
|
-
'4xl-px': '48px',
|
|
28
|
-
'4xl': '3rem',
|
|
29
|
-
'3xl-px': '36px',
|
|
30
|
-
'3xl': '2.25rem',
|
|
31
|
-
'2xl-px': '30px',
|
|
32
|
-
'2xl': '1.875rem',
|
|
33
|
-
'xl-px': '24px',
|
|
34
|
-
'xl': '1.5rem',
|
|
35
|
-
'lg-px': '20px',
|
|
36
|
-
'lg': '1.25rem',
|
|
37
|
-
'md-px': '16px',
|
|
38
|
-
'md': '1rem',
|
|
39
|
-
'sm-px': '14px',
|
|
40
|
-
'sm': '0.875rem',
|
|
41
|
-
'xs-px': '12px',
|
|
42
|
-
'xs': '0.75rem',
|
|
43
|
-
'2xs-px': '10px',
|
|
44
|
-
'2xs': '0.625rem',
|
|
45
|
-
'fontFamily-px': 'Roboto,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif',
|
|
46
|
-
'fontFamily': 'NaNrem',
|
|
47
|
-
'variants-px': '',
|
|
48
|
-
'variants': '0rem',
|
|
49
|
-
'fontFamily-px': 'Karla,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif',
|
|
50
|
-
'fontFamily': 'NaNrem',
|
|
51
|
-
'variants-px': '',
|
|
52
|
-
'variants': '0rem',
|
|
53
|
-
'fontFamily-px': ''Merriweather',Times,'Times New Roman',serif',
|
|
54
|
-
'fontFamily': 'NaNrem',
|
|
55
|
-
'variants-px': '',
|
|
56
|
-
'variants': '0rem',
|
|
57
|
-
'fontFamily-px': ''Roboto Mono','Courier New',monospace',
|
|
58
|
-
'fontFamily': 'NaNrem',
|
|
59
|
-
'variants-px': '',
|
|
60
|
-
'variants': '0rem',
|
|
61
27
|
}
|
|
62
28
|
|
|
63
29
|
module.exports = {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v13.
|
|
2
|
+
@magma-design-system/design-tokens v13.7.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at Wed,
|
|
5
|
+
Generated at Wed, 05 Mar 2025 16:15:14 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
const properties = {
|
|
@@ -46,8 +46,10 @@ const properties = {
|
|
|
46
46
|
'9600': '24rem',
|
|
47
47
|
},
|
|
48
48
|
aspectRatio: {
|
|
49
|
-
'cover': '
|
|
50
|
-
'picture': '
|
|
49
|
+
'cover': '5/3',
|
|
50
|
+
'picture': '4/3',
|
|
51
|
+
'landscape': '4/2',
|
|
52
|
+
'panorama': '4/1',
|
|
51
53
|
'square': '1/1',
|
|
52
54
|
'a4': '1/1.4',
|
|
53
55
|
'book': '1/1.4',
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v13.
|
|
2
|
+
@magma-design-system/design-tokens v13.7.0
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at Wed,
|
|
5
|
+
Generated at Wed, 05 Mar 2025 16:15:14 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
const screens = {
|
package/dist/json/coolors.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"comment": "@magma-design-system/design-tokens v13.
|
|
2
|
+
"comment": "@magma-design-system/design-tokens v13.7.0 Generated by Style Dictionary at Wed, 05 Mar 2025 16:15:14 GMT, do not edit directly.",
|
|
3
3
|
"light": [
|
|
4
4
|
{
|
|
5
5
|
"Tone Slate 01": "#1c222a",
|
package/dist/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@maggioli-design-system/design-tokens",
|
|
3
|
-
"version": "13.
|
|
3
|
+
"version": "13.7.0",
|
|
4
4
|
"description": "This is the Design Token library of Maggioli Design System, here you'll find all the visual data used around the libraries.",
|
|
5
5
|
"author": "Vittorio Vittori",
|
|
6
6
|
"contributors": [
|
|
@@ -30,14 +30,16 @@
|
|
|
30
30
|
"build-style-dictionary": "npx tsx scripts/build.ts",
|
|
31
31
|
"clean": "npx tsx scripts/clean.ts",
|
|
32
32
|
"postbuild": "npx tsx scripts/postbuild.ts",
|
|
33
|
-
"cli": "
|
|
33
|
+
"cli": "npm run clean && npm run build-cli && npm run postbuild && node ./dist/src/cli.mjs",
|
|
34
34
|
"test": "NODE_OPTIONS=--experimental-vm-modules jest"
|
|
35
35
|
},
|
|
36
36
|
"main": "dist/js/tailwind-colors-css-vars.js",
|
|
37
37
|
"files": [
|
|
38
38
|
"/dist/"
|
|
39
39
|
],
|
|
40
|
-
"bin":
|
|
40
|
+
"bin": {
|
|
41
|
+
"magma-design-tokens": "dist/src/cli.mjs"
|
|
42
|
+
},
|
|
41
43
|
"dependencies": {
|
|
42
44
|
"@adobe/leonardo-contrast-colors": "1.0.0",
|
|
43
45
|
"arg": "5.0.2",
|
package/dist/scss/variables.scss
CHANGED
package/dist/src/cli.mjs
CHANGED
|
@@ -24,14 +24,16 @@ export async function main() {
|
|
|
24
24
|
writeJsonTokens(tokens, 'base', opts.outTokensDir);
|
|
25
25
|
}
|
|
26
26
|
}
|
|
27
|
+
// export all colors in one file
|
|
27
28
|
console.log('export colors');
|
|
28
|
-
exportColors(tokens, 'custom', opts.outDir);
|
|
29
|
+
exportColors(tokens, 'custom', opts.outDir, opts.generate);
|
|
30
|
+
// export colors separated by export config
|
|
29
31
|
Object.keys(exportGroups).forEach(group => {
|
|
30
32
|
if (opts.exportTokens) {
|
|
31
33
|
console.info(`Exporting ${chalk.yellow('color palette')} ${group}`);
|
|
32
34
|
writeJsonTokens(exportGroups[group], group, opts.outTokensDir);
|
|
33
35
|
}
|
|
34
|
-
exportColors(exportGroups[group], group, opts.outDir);
|
|
36
|
+
exportColors(exportGroups[group], group, opts.outDir, opts.generate);
|
|
35
37
|
});
|
|
36
38
|
}
|
|
37
39
|
main();
|
|
@@ -38,6 +38,16 @@ function getBrandColorConfig(fileName, inputTokens, outputDir) {
|
|
|
38
38
|
},
|
|
39
39
|
],
|
|
40
40
|
},
|
|
41
|
+
tailwind: {
|
|
42
|
+
transformGroup: 'js',
|
|
43
|
+
buildPath: `${buildPath}/tailwind/`,
|
|
44
|
+
files: [
|
|
45
|
+
{
|
|
46
|
+
destination: `colors-${fileName}.js`,
|
|
47
|
+
format: 'js/tailwind-colors',
|
|
48
|
+
},
|
|
49
|
+
],
|
|
50
|
+
},
|
|
41
51
|
},
|
|
42
52
|
};
|
|
43
53
|
}
|
|
@@ -7,15 +7,15 @@ Generated at {{ date }}
|
|
|
7
7
|
|
|
8
8
|
const leading = {
|
|
9
9
|
{{#each properties as | property |}}
|
|
10
|
-
{{#each property as |
|
|
11
|
-
{{#each typography as | leading |}}
|
|
10
|
+
{{#each property.leading as | leading |}}
|
|
11
|
+
{{!-- {{#each typography as | leading |}} --}}
|
|
12
12
|
{{#ifEquals @key 'DEFAULT'}}
|
|
13
13
|
'px': '{{leading.value}}',
|
|
14
14
|
{{else}}
|
|
15
15
|
'{{@key}}-px': '{{leading.value}}',
|
|
16
16
|
{{/ifEquals}}
|
|
17
17
|
'{{@key}}': '{{#pixelToRem}}{{leading.value}}{{/pixelToRem}}',
|
|
18
|
-
{{/each}}
|
|
18
|
+
{{!-- {{/each}} --}}
|
|
19
19
|
{{/each}}
|
|
20
20
|
{{/each}}
|
|
21
21
|
}
|
|
@@ -1,50 +1,41 @@
|
|
|
1
1
|
import arg from 'arg';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
// return true
|
|
22
|
-
// }).length === newValue.length
|
|
23
|
-
// if (!isValid) return null
|
|
24
|
-
// if (previousValue) {
|
|
25
|
-
// return [...newValue, ...previousValue]
|
|
26
|
-
// }
|
|
27
|
-
// return newValue
|
|
28
|
-
// }
|
|
2
|
+
export const OUTPUT_PLATFORM = ['css', 'dart', 'tailwind'];
|
|
3
|
+
function outputTypeHandler(value, argName, previousValue) {
|
|
4
|
+
if (previousValue === null)
|
|
5
|
+
return null;
|
|
6
|
+
const newValue = value.replace(/\s/g, '').split(',');
|
|
7
|
+
const isValid = newValue.filter(v => {
|
|
8
|
+
if (!OUTPUT_PLATFORM.includes(v)) {
|
|
9
|
+
console.log(v, 'is not a valid generate output');
|
|
10
|
+
return false;
|
|
11
|
+
}
|
|
12
|
+
return true;
|
|
13
|
+
}).length === newValue.length;
|
|
14
|
+
if (!isValid)
|
|
15
|
+
return null;
|
|
16
|
+
if (previousValue) {
|
|
17
|
+
return [...newValue, ...previousValue];
|
|
18
|
+
}
|
|
19
|
+
return newValue;
|
|
20
|
+
}
|
|
29
21
|
const args = arg({
|
|
30
22
|
'--config': String,
|
|
31
23
|
'--outDir': String,
|
|
32
24
|
'--outTokensDir': String,
|
|
33
25
|
'--dry-run': Boolean,
|
|
34
26
|
'--export-tokens': Boolean,
|
|
35
|
-
|
|
27
|
+
'--generate': outputTypeHandler,
|
|
36
28
|
// alias
|
|
37
29
|
'-c': '--config',
|
|
38
|
-
'-
|
|
39
|
-
|
|
30
|
+
'-d': '--outDir',
|
|
31
|
+
'-g': '--generate',
|
|
40
32
|
'-t': '--export-tokens',
|
|
41
|
-
'-td': '--outTokensDir',
|
|
42
33
|
});
|
|
43
34
|
export function parseArgs() {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
35
|
+
if (args['--generate'] === null) {
|
|
36
|
+
console.log('invalid output type inserted, valid types are: ', OUTPUT_PLATFORM);
|
|
37
|
+
process.exit();
|
|
38
|
+
}
|
|
48
39
|
if (args['--export-tokens'] && !args['--outTokensDir']) {
|
|
49
40
|
console.log('Args --outTokensDir is required if flag --export-tokens is provided');
|
|
50
41
|
process.exit();
|
|
@@ -55,6 +46,6 @@ export function parseArgs() {
|
|
|
55
46
|
dryRun: args['--dry-run'],
|
|
56
47
|
exportTokens: args['--export-tokens'],
|
|
57
48
|
outTokensDir: args['--outTokensDir'],
|
|
58
|
-
|
|
49
|
+
generate: args['--generate'],
|
|
59
50
|
};
|
|
60
51
|
}
|
package/dist/src/lib/utils.mjs
CHANGED
|
@@ -23,12 +23,25 @@ export function writeJsonTokens(tokens, name, dirPath) {
|
|
|
23
23
|
}
|
|
24
24
|
});
|
|
25
25
|
}
|
|
26
|
-
|
|
27
|
-
|
|
26
|
+
/**
|
|
27
|
+
* Export colors with base style dictionary configuration (see config/sd-brand-color.config.ts)
|
|
28
|
+
* @param tokens
|
|
29
|
+
* @param fileName the suffix of generated files
|
|
30
|
+
* @param outputDir output directory
|
|
31
|
+
* @param platform array of platform that needs to build, if undefined build all platform for colors (css, dart, js)
|
|
32
|
+
*/
|
|
33
|
+
export function exportColors(tokens, fileName, outputDir, platform) {
|
|
34
|
+
const s = StyleDictionary.registerFormat(cssHexFormat)
|
|
28
35
|
.registerFormat(cssRgbFormat)
|
|
36
|
+
.registerFormat(jsTailwindColorsFormat)
|
|
29
37
|
.registerFormat(flutterColorFormat)
|
|
30
|
-
.extend(getBrandColorConfig(fileName, tokens, outputDir))
|
|
31
|
-
|
|
38
|
+
.extend(getBrandColorConfig(fileName, tokens, outputDir));
|
|
39
|
+
if (platform) {
|
|
40
|
+
platform.forEach(p => s.buildPlatform(p));
|
|
41
|
+
}
|
|
42
|
+
else {
|
|
43
|
+
s.buildAllPlatforms();
|
|
44
|
+
}
|
|
32
45
|
}
|
|
33
46
|
export function getStyleDictionaryWithAllCustomTransform() {
|
|
34
47
|
return (StyleDictionary
|
|
@@ -2,10 +2,16 @@
|
|
|
2
2
|
"sizing": {
|
|
3
3
|
"aspectRatio": {
|
|
4
4
|
"cover": {
|
|
5
|
-
"value": "
|
|
5
|
+
"value": "5:3"
|
|
6
6
|
},
|
|
7
7
|
"picture": {
|
|
8
|
-
"value": "
|
|
8
|
+
"value": "4:3"
|
|
9
|
+
},
|
|
10
|
+
"landscape": {
|
|
11
|
+
"value": "4:2"
|
|
12
|
+
},
|
|
13
|
+
"panorama": {
|
|
14
|
+
"value": "4:1"
|
|
9
15
|
},
|
|
10
16
|
"square": {
|
|
11
17
|
"value": "1:1"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@maggioli-design-system/design-tokens",
|
|
3
|
-
"version": "13.
|
|
3
|
+
"version": "13.7.0",
|
|
4
4
|
"description": "This is the Design Token library of Maggioli Design System, here you'll find all the visual data used around the libraries.",
|
|
5
5
|
"author": "Vittorio Vittori",
|
|
6
6
|
"contributors": [
|
|
@@ -30,14 +30,16 @@
|
|
|
30
30
|
"build-style-dictionary": "npx tsx scripts/build.ts",
|
|
31
31
|
"clean": "npx tsx scripts/clean.ts",
|
|
32
32
|
"postbuild": "npx tsx scripts/postbuild.ts",
|
|
33
|
-
"cli": "
|
|
33
|
+
"cli": "npm run clean && npm run build-cli && npm run postbuild && node ./dist/src/cli.mjs",
|
|
34
34
|
"test": "NODE_OPTIONS=--experimental-vm-modules jest"
|
|
35
35
|
},
|
|
36
36
|
"main": "dist/js/tailwind-colors-css-vars.js",
|
|
37
37
|
"files": [
|
|
38
38
|
"/dist/"
|
|
39
39
|
],
|
|
40
|
-
"bin":
|
|
40
|
+
"bin": {
|
|
41
|
+
"magma-design-tokens": "dist/src/cli.mjs"
|
|
42
|
+
},
|
|
41
43
|
"dependencies": {
|
|
42
44
|
"@adobe/leonardo-contrast-colors": "1.0.0",
|
|
43
45
|
"arg": "5.0.2",
|