@maggioli-design-system/design-tokens 13.7.0 → 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 -2
- package/dist/js/tailwind-props.js +3 -3
- 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 +1 -1
- package/dist/scss/variables.scss +1 -1
- package/dist/style-dictionary/tokens/css/layout/grid.json +1 -1
- package/package.json +1 -1
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.7.
|
|
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.7.
|
|
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.7.
|
|
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.7.
|
|
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.7.
|
|
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.7.
|
|
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.7.
|
|
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.7.
|
|
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.7.
|
|
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.7.
|
|
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.7.
|
|
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.7.
|
|
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.7.
|
|
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.7.
|
|
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.7.
|
|
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.7.
|
|
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.7.
|
|
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 = {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v13.7.
|
|
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 = {
|
|
@@ -157,7 +157,7 @@ const properties = {
|
|
|
157
157
|
'fit-sm': 'repeat(auto-fit, minmax(10rem, 1fr))',
|
|
158
158
|
'fit-xl': 'repeat(auto-fit, minmax(20rem, 1fr))',
|
|
159
159
|
'fit': 'repeat(auto-fit, minmax(12.5rem, 1fr))',
|
|
160
|
-
'full': 'repeat(
|
|
160
|
+
'full': 'repeat(1, minmax(1px, 100%))',
|
|
161
161
|
},
|
|
162
162
|
size: {
|
|
163
163
|
'0': '0rem',
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v13.7.
|
|
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.7.
|
|
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.7.
|
|
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": [
|
package/dist/scss/variables.scss
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@maggioli-design-system/design-tokens",
|
|
3
|
-
"version": "13.7.
|
|
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": [
|