@maggioli-design-system/design-tokens 13.6.1 → 13.7.1
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/README.md +110 -0
- 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 +7 -5
- package/dist/js/tailwind-screens.js +2 -2
- package/dist/json/coolors.json +1 -1
- package/dist/json/css/layout/grid.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/css/layout/grid.json +1 -1
- package/dist/style-dictionary/tokens/sizing/aspect-ratio.json +8 -2
- package/package.json +5 -3
package/README.md
CHANGED
|
@@ -18,6 +18,116 @@ This package works also with yarn:
|
|
|
18
18
|
yarn add @maggioli-design-system/design-tokens
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
+
# Generate Custom Palette
|
|
22
|
+
|
|
23
|
+
you can generate custom palettes via cli command, it takes a configuration file to create palettes
|
|
24
|
+
|
|
25
|
+
## Usage
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npx magma-design-tokens
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## Options
|
|
32
|
+
|
|
33
|
+
| Option | Alias | Description |
|
|
34
|
+
| :--------------------------- | :---- | :------------------------------------------------------------------------------ |
|
|
35
|
+
| `--config [configFile]` | `-c` | Path to configuration file if not respect default naming |
|
|
36
|
+
| `--outDir [dirPath]` | `-d` | Path destination for generated palettes |
|
|
37
|
+
| `--generate [platform]` | `-g` | Output format for palette, choose one or more between `css`, `tailwind`, `dart` |
|
|
38
|
+
| `--export-tokens` | `-t` | export palette as JSON design tokens format |
|
|
39
|
+
| `--outTokensDir [tokensDir]` | | Directory path for JSON tokens, required if `--export-tokens` is presents |
|
|
40
|
+
|
|
41
|
+
## Configuration file
|
|
42
|
+
|
|
43
|
+
You can include configuration in a configuration file or a field in `package.json` named `magma-design-tokens`
|
|
44
|
+
|
|
45
|
+
### Naming convention
|
|
46
|
+
|
|
47
|
+
Naming standard for configuration file:
|
|
48
|
+
|
|
49
|
+
- `.magma-design-tokensrc.json`
|
|
50
|
+
- `.magma-design-tokensrc.js`
|
|
51
|
+
- `.magma-design-tokensrc.cjs`
|
|
52
|
+
- `.magma-design-tokensrc.mjs`
|
|
53
|
+
- `.config/magma-design-tokensrc`
|
|
54
|
+
- `.config/magma-design-tokensrc.json`
|
|
55
|
+
- `.config/magma-design-tokensrc.js`
|
|
56
|
+
- `.config/magma-design-tokensrc.cjs`
|
|
57
|
+
- `.config/magma-design-tokensrc.mjs`
|
|
58
|
+
- `magma-design-tokens.config.js`
|
|
59
|
+
- `magma-design-tokens.config.cjs`
|
|
60
|
+
- .`magma-design-tokens.config.mjs`
|
|
61
|
+
|
|
62
|
+
If you change configuration file name you need to set with `--config` option
|
|
63
|
+
|
|
64
|
+
### Configuration
|
|
65
|
+
|
|
66
|
+
Basic config
|
|
67
|
+
|
|
68
|
+
```json
|
|
69
|
+
{
|
|
70
|
+
"colors": [
|
|
71
|
+
{ "color": "#94a3b8", "name": "tone.slate" },
|
|
72
|
+
{ "color": "#EA3464", "name": "label.amaranth" }
|
|
73
|
+
]
|
|
74
|
+
}
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
You can export different color in different output file defining export field
|
|
78
|
+
|
|
79
|
+
```json
|
|
80
|
+
{
|
|
81
|
+
"colors": [
|
|
82
|
+
{ "color": "#94a3b8", "name": "tone.slate", "export": ["tones"] },
|
|
83
|
+
{ "color": "#EA3464", "name": "label.amaranth", "export": ["label"] }
|
|
84
|
+
]
|
|
85
|
+
}
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
You can choose the ratio with which to generate the color scale with `ratios` field
|
|
89
|
+
|
|
90
|
+
```json
|
|
91
|
+
{
|
|
92
|
+
"colors": [
|
|
93
|
+
{ "color": "#94a3b8", "name": "tone.slate", "ratios": "tone" },
|
|
94
|
+
{ "color": "#EA3464", "name": "label.amaranth", "ratios": "v1" }
|
|
95
|
+
]
|
|
96
|
+
}
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
NOTE: there are four different ratios as follow value contrast
|
|
100
|
+
|
|
101
|
+
```json
|
|
102
|
+
{
|
|
103
|
+
"v1": [
|
|
104
|
+
1.05, 1.1, 1.17, 1.24, 1.32, 1.41, 1.51, 1.65, 1.9, 2.25, 2.7, 3.3,
|
|
105
|
+
4, 4.8, 5.75, 7, 8.5, 10.3, 12.45, 15
|
|
106
|
+
],
|
|
107
|
+
"v2": [1.09, 1.22, 1.42, 1.82, 2.57, 3.71, 5.13, 6.71, 8.75, 10.29],
|
|
108
|
+
"default": [1.09, 1.22, 1.42, 1.82, 3.29, 5.13, 6.71, 8.45, 10.29, 17.22],
|
|
109
|
+
"tone": [1.05, 1.1, 1.24, 1.47, 2.54, 4.83, 7.56, 10.31, 14.68, 16]
|
|
110
|
+
}
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
### Cli example
|
|
114
|
+
|
|
115
|
+
- takes `./color.js` as configuration file
|
|
116
|
+
```bash
|
|
117
|
+
npx design-tokens --config ./color.js
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
- export palette only on css format
|
|
121
|
+
```bash
|
|
122
|
+
npx design-tokens --generate css
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
- export palette on css and tailwind format
|
|
126
|
+
```bash
|
|
127
|
+
npx design-tokens --generate 'css, tailwind'
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
|
|
21
131
|
|
|
22
132
|
[adobe-leonardo]: https://leonardocolor.io/
|
|
23
133
|
[style-dictionary]: https://amzn.github.io/style-dictionary/
|
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.1
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at
|
|
5
|
+
Generated at Tue, 03 Jun 2025 08:08:46 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.1
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at
|
|
5
|
+
Generated at Tue, 03 Jun 2025 08:08:46 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.1
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at
|
|
5
|
+
Generated at Tue, 03 Jun 2025 08:08:46 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.1
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at
|
|
5
|
+
Generated at Tue, 03 Jun 2025 08:08:46 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.1
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at
|
|
5
|
+
Generated at Tue, 03 Jun 2025 08:08:46 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.1
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at
|
|
5
|
+
Generated at Tue, 03 Jun 2025 08:08:46 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.1
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at
|
|
5
|
+
Generated at Tue, 03 Jun 2025 08:08:46 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.1
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at
|
|
5
|
+
Generated at Tue, 03 Jun 2025 08:08:46 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.1
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at
|
|
5
|
+
Generated at Tue, 03 Jun 2025 08:08:46 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.1
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at
|
|
5
|
+
Generated at Tue, 03 Jun 2025 08:08:46 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.1
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at
|
|
5
|
+
Generated at Tue, 03 Jun 2025 08:08:46 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.1
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at
|
|
5
|
+
Generated at Tue, 03 Jun 2025 08:08:46 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.1
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at
|
|
5
|
+
Generated at Tue, 03 Jun 2025 08:08:46 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.1
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at
|
|
5
|
+
Generated at Tue, 03 Jun 2025 08:08:46 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.1
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at
|
|
5
|
+
Generated at Tue, 03 Jun 2025 08:08:46 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.1
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at
|
|
5
|
+
Generated at Tue, 03 Jun 2025 08:08:46 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.1
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at
|
|
5
|
+
Generated at Tue, 03 Jun 2025 08:08:46 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.1
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at
|
|
5
|
+
Generated at Tue, 03 Jun 2025 08:08:46 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',
|
|
@@ -155,7 +157,7 @@ const properties = {
|
|
|
155
157
|
'fit-sm': 'repeat(auto-fit, minmax(10rem, 1fr))',
|
|
156
158
|
'fit-xl': 'repeat(auto-fit, minmax(20rem, 1fr))',
|
|
157
159
|
'fit': 'repeat(auto-fit, minmax(12.5rem, 1fr))',
|
|
158
|
-
'full': 'repeat(
|
|
160
|
+
'full': 'repeat(1, minmax(1px, 100%))',
|
|
159
161
|
},
|
|
160
162
|
size: {
|
|
161
163
|
'0': '0rem',
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v13.
|
|
2
|
+
@magma-design-system/design-tokens v13.7.1
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at
|
|
5
|
+
Generated at Tue, 03 Jun 2025 08:08:46 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.1 Generated by Style Dictionary at Tue, 03 Jun 2025 08:08:46 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.1",
|
|
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.1",
|
|
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",
|