@maggioli-design-system/design-tokens 8.0.0 → 10.0.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.
Files changed (25) hide show
  1. package/README.md +11 -6
  2. package/dist/android/colors.xml +1 -1
  3. package/dist/css/{colors-brand-synbee.css → colors-hex-brand-synbee.css} +3 -3
  4. package/dist/css/{colors-brand.css → colors-hex-brand.css} +3 -3
  5. package/dist/css/{colors-label.css → colors-hex-label.css} +3 -3
  6. package/dist/css/{colors-status.css → colors-hex-status.css} +3 -3
  7. package/dist/css/{colors-tones.css → colors-hex-tones.css} +3 -3
  8. package/dist/css/{colors.css → colors-hex.css} +3 -3
  9. package/dist/css/colors-rgb-brand-synbee.css +3 -3
  10. package/dist/css/colors-rgb-brand.css +3 -3
  11. package/dist/css/colors-rgb-label.css +3 -3
  12. package/dist/css/colors-rgb-status.css +3 -3
  13. package/dist/css/colors-rgb-tones.css +3 -3
  14. package/dist/css/colors-rgb.css +3 -3
  15. package/dist/css-tokens/font-family.json +1 -1
  16. package/dist/ios/StyleDictionaryColor.h +1 -1
  17. package/dist/ios/StyleDictionaryColor.m +1 -1
  18. package/dist/ios-swift/StyleDictionary.swift +1 -1
  19. package/dist/ios-swift/StyleDictionaryColor.swift +1 -1
  20. package/dist/js/colors-css-vars.js +1 -1
  21. package/dist/js/font-family.js +1 -1
  22. package/dist/js/tailwind-colors-css-vars.js +1 -1
  23. package/dist/scss/font-family.scss +1 -1
  24. package/dist/scss/variables.scss +1 -1
  25. package/package.json +1 -1
package/README.md CHANGED
@@ -1,16 +1,21 @@
1
- # Maggioli Design System
2
-
3
- #### design-tokens
4
-
1
+ # @maggioli-design-system/design-tokens
5
2
 
6
3
  Design Tokens generates properties for colors and other type of agnostic tokens targeted on specific plaforms, like web, Android or iOS formats.
7
4
 
8
5
  This library is based on [Adobe Leonardo][adobe-leonardo] and [Amazon Style Dictionary][style-dictionary].
9
6
 
10
- ##### Installation
7
+ # Installation
8
+
9
+ Install the component via `npm` by running the following command:
11
10
 
11
+ ```bash
12
+ npm i @maggioli-design-system/design-tokens
12
13
  ```
13
- npm install @maggioli-design-system/design-tokens@latest
14
+
15
+ This package works also with yarn:
16
+
17
+ ```bash
18
+ yarn add @maggioli-design-system/design-tokens
14
19
  ```
15
20
 
16
21
 
package/dist/android/colors.xml CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  <!--
4
4
  Do not edit directly
5
- Generated on Mon, 27 Jun 2022 07:51:49 GMT
5
+ Generated on Tue, 06 Dec 2022 12:07:07 GMT
6
6
  -->
7
7
  <resources>
8
8
  <color name="color_tone_slate_light_1">#ff1c222a</color>
package/dist/css/{colors-brand-synbee.css → colors-hex-brand-synbee.css} RENAMED
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  Generated by Style Dictionary
3
3
  Do not edit directly
4
- Generated at Mon, 27 Jun 2022 07:51:49 GMT
4
+ Generated at Tue, 06 Dec 2022 12:07:07 GMT
5
5
  */
6
6
 
7
7
  :root {
@@ -71,7 +71,7 @@ Generated at Mon, 27 Jun 2022 07:51:49 GMT
71
71
  --adjust-tone: #ffffff;
72
72
  }
73
73
 
74
- :root .dark-mode {
74
+ :root.dark-mode {
75
75
  --brand-synbee-eolo-01: #a3b6d8;
76
76
  --brand-synbee-eolo-02: #91a8d1;
77
77
  --brand-synbee-eolo-03: #7692c5;
@@ -139,7 +139,7 @@ Generated at Mon, 27 Jun 2022 07:51:49 GMT
139
139
  }
140
140
 
141
141
  @media (prefers-color-scheme: dark) {
142
- :root .dark-mode-os {
142
+ :root.system-mode {
143
143
  --brand-synbee-eolo-01: #a3b6d8;
144
144
  --brand-synbee-eolo-02: #91a8d1;
145
145
  --brand-synbee-eolo-03: #7692c5;
package/dist/css/{colors-brand.css → colors-hex-brand.css} RENAMED
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  Generated by Style Dictionary
3
3
  Do not edit directly
4
- Generated at Mon, 27 Jun 2022 07:51:49 GMT
4
+ Generated at Tue, 06 Dec 2022 12:07:07 GMT
5
5
  */
6
6
 
7
7
  :root {
@@ -18,7 +18,7 @@ Generated at Mon, 27 Jun 2022 07:51:49 GMT
18
18
  --brand-maggioli: #00379e;
19
19
  }
20
20
 
21
- :root .dark-mode {
21
+ :root.dark-mode {
22
22
  --brand-maggioli-01: #a3b6db;
23
23
  --brand-maggioli-02: #8da8da;
24
24
  --brand-maggioli-03: #6a91dc;
@@ -33,7 +33,7 @@ Generated at Mon, 27 Jun 2022 07:51:49 GMT
33
33
  }
34
34
 
35
35
  @media (prefers-color-scheme: dark) {
36
- :root .dark-mode-os {
36
+ :root.system-mode {
37
37
  --brand-maggioli-01: #a3b6db;
38
38
  --brand-maggioli-02: #8da8da;
39
39
  --brand-maggioli-03: #6a91dc;
package/dist/css/{colors-label.css → colors-hex-label.css} RENAMED
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  Generated by Style Dictionary
3
3
  Do not edit directly
4
- Generated at Mon, 27 Jun 2022 07:51:49 GMT
4
+ Generated at Tue, 06 Dec 2022 12:07:07 GMT
5
5
  */
6
6
 
7
7
  :root {
@@ -117,7 +117,7 @@ Generated at Mon, 27 Jun 2022 07:51:49 GMT
117
117
  --label-orange: #f17032;
118
118
  }
119
119
 
120
- :root .dark-mode {
120
+ :root.dark-mode {
121
121
  --label-amaranth-01: #f59cb4;
122
122
  --label-amaranth-02: #f386a3;
123
123
  --label-amaranth-03: #ef6186;
@@ -231,7 +231,7 @@ Generated at Mon, 27 Jun 2022 07:51:49 GMT
231
231
  }
232
232
 
233
233
  @media (prefers-color-scheme: dark) {
234
- :root .dark-mode-os {
234
+ :root.system-mode {
235
235
  --label-amaranth-01: #f59cb4;
236
236
  --label-amaranth-02: #f386a3;
237
237
  --label-amaranth-03: #ef6186;
package/dist/css/{colors-status.css → colors-hex-status.css} RENAMED
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  Generated by Style Dictionary
3
3
  Do not edit directly
4
- Generated at Mon, 27 Jun 2022 07:51:49 GMT
4
+ Generated at Tue, 06 Dec 2022 12:07:07 GMT
5
5
  */
6
6
 
7
7
  :root {
@@ -51,7 +51,7 @@ Generated at Mon, 27 Jun 2022 07:51:49 GMT
51
51
  --status-warning: #ffc107;
52
52
  }
53
53
 
54
- :root .dark-mode {
54
+ :root.dark-mode {
55
55
  --status-info-01: #52c2e7;
56
56
  --status-info-02: #2ab4e2;
57
57
  --status-info-03: #1b9dc8;
@@ -99,7 +99,7 @@ Generated at Mon, 27 Jun 2022 07:51:49 GMT
99
99
  }
100
100
 
101
101
  @media (prefers-color-scheme: dark) {
102
- :root .dark-mode-os {
102
+ :root.system-mode {
103
103
  --status-info-01: #52c2e7;
104
104
  --status-info-02: #2ab4e2;
105
105
  --status-info-03: #1b9dc8;
package/dist/css/{colors-tones.css → colors-hex-tones.css} RENAMED
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  Generated by Style Dictionary
3
3
  Do not edit directly
4
- Generated at Mon, 27 Jun 2022 07:51:49 GMT
4
+ Generated at Tue, 06 Dec 2022 12:07:07 GMT
5
5
  */
6
6
 
7
7
  :root {
@@ -62,7 +62,7 @@ Generated at Mon, 27 Jun 2022 07:51:49 GMT
62
62
  --tone-stone: #ffffff;
63
63
  }
64
64
 
65
- :root .dark-mode {
65
+ :root.dark-mode {
66
66
  --tone-slate-01: #dde1e8;
67
67
  --tone-slate-02: #d2d8e1;
68
68
  --tone-slate-03: #abb6c7;
@@ -121,7 +121,7 @@ Generated at Mon, 27 Jun 2022 07:51:49 GMT
121
121
  }
122
122
 
123
123
  @media (prefers-color-scheme: dark) {
124
- :root .dark-mode-os {
124
+ :root.system-mode {
125
125
  --tone-slate-01: #dde1e8;
126
126
  --tone-slate-02: #d2d8e1;
127
127
  --tone-slate-03: #abb6c7;
package/dist/css/{colors.css → colors-hex.css} RENAMED
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  Generated by Style Dictionary
3
3
  Do not edit directly
4
- Generated at Mon, 27 Jun 2022 07:51:48 GMT
4
+ Generated at Tue, 06 Dec 2022 12:07:07 GMT
5
5
  */
6
6
 
7
7
  :root {
@@ -291,7 +291,7 @@ Generated at Mon, 27 Jun 2022 07:51:48 GMT
291
291
  --label-orange: #f17032;
292
292
  }
293
293
 
294
- :root .dark-mode {
294
+ :root.dark-mode {
295
295
  --tone-slate-01: #dde1e8;
296
296
  --tone-slate-02: #d2d8e1;
297
297
  --tone-slate-03: #abb6c7;
@@ -579,7 +579,7 @@ Generated at Mon, 27 Jun 2022 07:51:48 GMT
579
579
  }
580
580
 
581
581
  @media (prefers-color-scheme: dark) {
582
- :root .dark-mode-os {
582
+ :root.system-mode {
583
583
  --tone-slate-01: #dde1e8;
584
584
  --tone-slate-02: #d2d8e1;
585
585
  --tone-slate-03: #abb6c7;
package/dist/css/colors-rgb-brand-synbee.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  Generated by Style Dictionary
3
3
  Do not edit directly
4
- Generated at Mon, 27 Jun 2022 07:51:49 GMT
4
+ Generated at Tue, 06 Dec 2022 12:07:07 GMT
5
5
  */
6
6
 
7
7
  :root {
@@ -71,7 +71,7 @@ Generated at Mon, 27 Jun 2022 07:51:49 GMT
71
71
  --adjust-tone: 255, 255, 255;
72
72
  }
73
73
 
74
- :root .dark-mode {
74
+ :root.dark-mode {
75
75
  --brand-synbee-eolo-01: 163, 182, 216;
76
76
  --brand-synbee-eolo-02: 145, 168, 209;
77
77
  --brand-synbee-eolo-03: 118, 146, 197;
@@ -139,7 +139,7 @@ Generated at Mon, 27 Jun 2022 07:51:49 GMT
139
139
  }
140
140
 
141
141
  @media (prefers-color-scheme: dark) {
142
- :root .dark-mode-os {
142
+ :root.system-mode {
143
143
  --brand-synbee-eolo-01: 163, 182, 216;
144
144
  --brand-synbee-eolo-02: 145, 168, 209;
145
145
  --brand-synbee-eolo-03: 118, 146, 197;
package/dist/css/colors-rgb-brand.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  Generated by Style Dictionary
3
3
  Do not edit directly
4
- Generated at Mon, 27 Jun 2022 07:51:49 GMT
4
+ Generated at Tue, 06 Dec 2022 12:07:07 GMT
5
5
  */
6
6
 
7
7
  :root {
@@ -18,7 +18,7 @@ Generated at Mon, 27 Jun 2022 07:51:49 GMT
18
18
  --brand-maggioli: 0, 55, 158;
19
19
  }
20
20
 
21
- :root .dark-mode {
21
+ :root.dark-mode {
22
22
  --brand-maggioli-01: 163, 182, 219;
23
23
  --brand-maggioli-02: 141, 168, 218;
24
24
  --brand-maggioli-03: 106, 145, 220;
@@ -33,7 +33,7 @@ Generated at Mon, 27 Jun 2022 07:51:49 GMT
33
33
  }
34
34
 
35
35
  @media (prefers-color-scheme: dark) {
36
- :root .dark-mode-os {
36
+ :root.system-mode {
37
37
  --brand-maggioli-01: 163, 182, 219;
38
38
  --brand-maggioli-02: 141, 168, 218;
39
39
  --brand-maggioli-03: 106, 145, 220;
package/dist/css/colors-rgb-label.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  Generated by Style Dictionary
3
3
  Do not edit directly
4
- Generated at Mon, 27 Jun 2022 07:51:49 GMT
4
+ Generated at Tue, 06 Dec 2022 12:07:07 GMT
5
5
  */
6
6
 
7
7
  :root {
@@ -117,7 +117,7 @@ Generated at Mon, 27 Jun 2022 07:51:49 GMT
117
117
  --label-orange: 241, 112, 50;
118
118
  }
119
119
 
120
- :root .dark-mode {
120
+ :root.dark-mode {
121
121
  --label-amaranth-01: 245, 156, 180;
122
122
  --label-amaranth-02: 243, 134, 163;
123
123
  --label-amaranth-03: 239, 97, 134;
@@ -231,7 +231,7 @@ Generated at Mon, 27 Jun 2022 07:51:49 GMT
231
231
  }
232
232
 
233
233
  @media (prefers-color-scheme: dark) {
234
- :root .dark-mode-os {
234
+ :root.system-mode {
235
235
  --label-amaranth-01: 245, 156, 180;
236
236
  --label-amaranth-02: 243, 134, 163;
237
237
  --label-amaranth-03: 239, 97, 134;
package/dist/css/colors-rgb-status.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  Generated by Style Dictionary
3
3
  Do not edit directly
4
- Generated at Mon, 27 Jun 2022 07:51:49 GMT
4
+ Generated at Tue, 06 Dec 2022 12:07:07 GMT
5
5
  */
6
6
 
7
7
  :root {
@@ -51,7 +51,7 @@ Generated at Mon, 27 Jun 2022 07:51:49 GMT
51
51
  --status-warning: 255, 193, 7;
52
52
  }
53
53
 
54
- :root .dark-mode {
54
+ :root.dark-mode {
55
55
  --status-info-01: 82, 194, 231;
56
56
  --status-info-02: 42, 180, 226;
57
57
  --status-info-03: 27, 157, 200;
@@ -99,7 +99,7 @@ Generated at Mon, 27 Jun 2022 07:51:49 GMT
99
99
  }
100
100
 
101
101
  @media (prefers-color-scheme: dark) {
102
- :root .dark-mode-os {
102
+ :root.system-mode {
103
103
  --status-info-01: 82, 194, 231;
104
104
  --status-info-02: 42, 180, 226;
105
105
  --status-info-03: 27, 157, 200;
package/dist/css/colors-rgb-tones.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  Generated by Style Dictionary
3
3
  Do not edit directly
4
- Generated at Mon, 27 Jun 2022 07:51:49 GMT
4
+ Generated at Tue, 06 Dec 2022 12:07:07 GMT
5
5
  */
6
6
 
7
7
  :root {
@@ -62,7 +62,7 @@ Generated at Mon, 27 Jun 2022 07:51:49 GMT
62
62
  --tone-stone: 255, 255, 255;
63
63
  }
64
64
 
65
- :root .dark-mode {
65
+ :root.dark-mode {
66
66
  --tone-slate-01: 221, 225, 232;
67
67
  --tone-slate-02: 210, 216, 225;
68
68
  --tone-slate-03: 171, 182, 199;
@@ -121,7 +121,7 @@ Generated at Mon, 27 Jun 2022 07:51:49 GMT
121
121
  }
122
122
 
123
123
  @media (prefers-color-scheme: dark) {
124
- :root .dark-mode-os {
124
+ :root.system-mode {
125
125
  --tone-slate-01: 221, 225, 232;
126
126
  --tone-slate-02: 210, 216, 225;
127
127
  --tone-slate-03: 171, 182, 199;
package/dist/css/colors-rgb.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  Generated by Style Dictionary
3
3
  Do not edit directly
4
- Generated at Mon, 27 Jun 2022 07:51:49 GMT
4
+ Generated at Tue, 06 Dec 2022 12:07:07 GMT
5
5
  */
6
6
 
7
7
  :root {
@@ -291,7 +291,7 @@ Generated at Mon, 27 Jun 2022 07:51:49 GMT
291
291
  --label-orange: 241, 112, 50;
292
292
  }
293
293
 
294
- :root .dark-mode {
294
+ :root.dark-mode {
295
295
  --tone-slate-01: 221, 225, 232;
296
296
  --tone-slate-02: 210, 216, 225;
297
297
  --tone-slate-03: 171, 182, 199;
@@ -579,7 +579,7 @@ Generated at Mon, 27 Jun 2022 07:51:49 GMT
579
579
  }
580
580
 
581
581
  @media (prefers-color-scheme: dark) {
582
- :root .dark-mode-os {
582
+ :root.system-mode {
583
583
  --tone-slate-01: 221, 225, 232;
584
584
  --tone-slate-02: 210, 216, 225;
585
585
  --tone-slate-03: 171, 182, 199;
package/dist/css-tokens/font-family.json CHANGED
@@ -23,7 +23,7 @@
23
23
  "'Times New Roman'",
24
24
  "serif"
25
25
  ],
26
- "mono": [
26
+ "code": [
27
27
  "'Roboto Mono'",
28
28
  "monospace"
29
29
  ]
package/dist/ios/StyleDictionaryColor.h CHANGED
@@ -4,7 +4,7 @@
4
4
  //
5
5
 
6
6
  // Do not edit directly
7
- // Generated on Mon, 27 Jun 2022 07:51:49 GMT
7
+ // Generated on Tue, 06 Dec 2022 12:07:07 GMT
8
8
 
9
9
 
10
10
  #import <UIKit/UIKit.h>
package/dist/ios/StyleDictionaryColor.m CHANGED
@@ -4,7 +4,7 @@
4
4
  //
5
5
 
6
6
  // Do not edit directly
7
- // Generated on Mon, 27 Jun 2022 07:51:49 GMT
7
+ // Generated on Tue, 06 Dec 2022 12:07:07 GMT
8
8
 
9
9
 
10
10
  #import "StyleDictionaryColor.h"
package/dist/ios-swift/StyleDictionary.swift CHANGED
@@ -4,7 +4,7 @@
4
4
  //
5
5
 
6
6
  // Do not edit directly
7
- // Generated on Mon, 27 Jun 2022 07:51:49 GMT
7
+ // Generated on Tue, 06 Dec 2022 12:07:07 GMT
8
8
 
9
9
 
10
10
  import UIKit
package/dist/ios-swift/StyleDictionaryColor.swift CHANGED
@@ -4,7 +4,7 @@
4
4
  //
5
5
 
6
6
  // Do not edit directly
7
- // Generated on Mon, 27 Jun 2022 07:51:49 GMT
7
+ // Generated on Tue, 06 Dec 2022 12:07:07 GMT
8
8
 
9
9
 
10
10
  import UIKit
package/dist/js/colors-css-vars.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  Generated by Style Dictionary
3
3
  Do not edit directly
4
- Generated at Mon, 27 Jun 2022 07:51:48 GMT
4
+ Generated at Tue, 06 Dec 2022 12:07:07 GMT
5
5
  */
6
6
 
7
7
  const palette = {
package/dist/js/font-family.js CHANGED
@@ -23,7 +23,7 @@ const fontFamily = {
23
23
  "'Times New Roman'",
24
24
  "serif"
25
25
  ],
26
- "mono": [
26
+ "code": [
27
27
  "'Roboto Mono'",
28
28
  "monospace"
29
29
  ]
package/dist/js/tailwind-colors-css-vars.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  Generated by Style Dictionary
3
3
  Do not edit directly
4
- Generated at Mon, 27 Jun 2022 07:51:48 GMT
4
+ Generated at Tue, 06 Dec 2022 12:07:07 GMT
5
5
  */
6
6
 
7
7
  const getColor = (cssVar, { opacityVariable, opacityValue }) => {
package/dist/scss/font-family.scss CHANGED
@@ -2,5 +2,5 @@ $font-family: (
2
2
  title: (Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif),
3
3
  info: (Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif),
4
4
  read: ('Merriweather', Times, 'Times New Roman', serif),
5
- mono: ('Roboto Mono', monospace)
5
+ code: ('Roboto Mono', monospace)
6
6
  );
package/dist/scss/variables.scss CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
2
  /**
3
3
  * Do not edit directly
4
- * Generated on Mon, 27 Jun 2022 07:51:48 GMT
4
+ * Generated on Tue, 06 Dec 2022 12:07:07 GMT
5
5
  */
6
6
 
7
7
  $color-tone-slate-light-1: #1c222a !default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@maggioli-design-system/design-tokens",
3
- "version": "8.0.0",
3
+ "version": "10.0.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": [