@maggioli-design-system/styles 11.4.0 → 11.5.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.
Files changed (26) hide show
  1. package/README.md +6 -1
  2. package/dist/css/base.css +4 -3
  3. package/dist/css/colors-hex-brand-synbee.css +37 -37
  4. package/dist/css/colors-hex-brand.css +70 -37
  5. package/dist/css/colors-hex-default.css +574 -0
  6. package/dist/css/colors-hex-label.css +181 -181
  7. package/dist/css/colors-hex-status.css +109 -109
  8. package/dist/css/colors-hex-synbee-v1.css +1 -1
  9. package/dist/css/colors-hex-tones.css +1 -1
  10. package/dist/css/colors-hex.css +424 -361
  11. package/dist/css/colors-rgb-brand-synbee.css +37 -37
  12. package/dist/css/colors-rgb-brand.css +70 -37
  13. package/dist/css/colors-rgb-default.css +574 -0
  14. package/dist/css/colors-rgb-label.css +181 -181
  15. package/dist/css/colors-rgb-status.css +109 -109
  16. package/dist/css/colors-rgb-synbee-v1.css +1 -1
  17. package/dist/css/colors-rgb-tones.css +1 -1
  18. package/dist/css/colors-rgb.css +424 -361
  19. package/dist/css/globals.css +2 -2
  20. package/dist/css/reset.css +7 -1
  21. package/dist/css/typography.css +11 -14
  22. package/dist/tailwind/base.css +4 -8
  23. package/dist/tailwind/components.css +3 -1
  24. package/dist/tailwind/typography.css +18 -31
  25. package/package.json +2 -2
  26. package/tailwind.config.js +3 -1
package/README.md CHANGED
@@ -124,6 +124,8 @@ import '@fontsource/karla/400.css'
124
124
  import '@fontsource/karla/700.css'
125
125
  import '@fontsource/merriweather/400.css'
126
126
  import '@fontsource/merriweather/700.css'
127
+ import '@fontsource/roboto-mono/400.css'
128
+ import '@fontsource/roboto/500.css'
127
129
  import '@fontsource/roboto/700.css'
128
130
  import '@fontsource/roboto/900.css'
129
131
  ```
@@ -137,6 +139,8 @@ Importing fonts in CSS:
137
139
  @import '@fontsource/karla/700.css';
138
140
  @import '@fontsource/merriweather/400.css';
139
141
  @import '@fontsource/merriweather/700.css';
142
+ @import '@fontsource/roboto-mono/400.css';
143
+ @import '@fontsource/roboto/500.css';
140
144
  @import '@fontsource/roboto/700.css';
141
145
  @import '@fontsource/roboto/900.css';
142
146
  ```
@@ -158,7 +162,8 @@ The `dist` folder contains the following files:
158
162
  | `css` | plain css | `typography.css` |
159
163
  | `css` | tailwind or web components | `colors-rgb-*.css` |
160
164
  | `tailwind` | tailwind | `base.css` |
161
- | `tailwind` | tailwind | `typography.css` |
165
+ | `tailwind` | tailwind components | `components.css` |
166
+ | `tailwind` | tailwind typography components | `typography.css` |
162
167
 
163
168
  [mds]: https://magma.maggiolicloud.it/
164
169
  [fontsource-var-fonts]: https://fontsource.org/docs/variable-fonts
package/dist/css/base.css CHANGED
@@ -11,7 +11,7 @@ body{
11
11
  line-height: 1.5rem;
12
12
  font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
13
13
  --tw-text-opacity: 1;
14
- color: rgba(var(--tone-neutral-02), var(--tw-text-opacity));
14
+ color: rgba(var(--theme-default-03-secondary-text), var(--tw-text-opacity));
15
15
 
16
16
  -moz-osx-font-smoothing: grayscale;
17
17
  -webkit-font-smoothing: antialiased;
@@ -33,8 +33,9 @@ button,
33
33
  optgroup,
34
34
  select{
35
35
  font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
36
+ font-size: 0.875rem;
37
+ line-height: 1.5rem;
36
38
  font-weight: 500;
37
- line-height: 1.625;
38
39
  -webkit-font-smoothing: antialiased;
39
40
  -moz-osx-font-smoothing: grayscale;
40
41
  }
@@ -53,7 +54,7 @@ strong{
53
54
  }
54
55
  a{
55
56
  --tw-text-opacity: 1;
56
- color: rgba(var(--brand-maggioli-03), var(--tw-text-opacity));
57
+ color: rgba(var(--theme-default-02-primary-text), var(--tw-text-opacity));
57
58
 
58
59
  font-family: inherit;
59
60
  font-size: inherit;
package/dist/css/colors-hex-brand-synbee.css CHANGED
@@ -1,27 +1,27 @@
1
1
  /*
2
2
  Generated by Style Dictionary
3
3
  Do not edit directly
4
- Generated at Fri, 14 Apr 2023 09:56:44 GMT
4
+ Generated at Tue, 30 May 2023 10:49:14 GMT
5
5
  */
6
6
 
7
7
  :root {
8
- --brand-synbee-eolo-01: #2b4066;
9
- --brand-synbee-eolo-02: #324a76;
10
- --brand-synbee-eolo-03: #3d5b91;
11
- --brand-synbee-eolo-04: #496dad;
12
- --brand-synbee-eolo-05: #6585be;
13
- --brand-synbee-eolo-06: #8aa2ce;
8
+ --brand-synbee-eolo-01: #121b2b;
9
+ --brand-synbee-eolo-02: #2b4066;
10
+ --brand-synbee-eolo-03: #334d7a;
11
+ --brand-synbee-eolo-04: #3d5b91;
12
+ --brand-synbee-eolo-05: #496dad;
13
+ --brand-synbee-eolo-06: #708ec3;
14
14
  --brand-synbee-eolo-07: #b0c1de;
15
15
  --brand-synbee-eolo-08: #cfd9eb;
16
16
  --brand-synbee-eolo-09: #e3e9f3;
17
17
  --brand-synbee-eolo-10: #f2f5f9;
18
18
  --brand-synbee-eolo: #597cb9;
19
- --brand-synbee-01: #513e00;
20
- --brand-synbee-02: #5d4700;
21
- --brand-synbee-03: #735800;
22
- --brand-synbee-04: #896900;
23
- --brand-synbee-05: #a67f00;
24
- --brand-synbee-06: #ca9a00;
19
+ --brand-synbee-01: #231a00;
20
+ --brand-synbee-02: #513e00;
21
+ --brand-synbee-03: #604a00;
22
+ --brand-synbee-04: #735800;
23
+ --brand-synbee-05: #896900;
24
+ --brand-synbee-06: #b18800;
25
25
  --brand-synbee-07: #f0b800;
26
26
  --brand-synbee-08: #ffd448;
27
27
  --brand-synbee-09: #ffe696;
@@ -30,23 +30,23 @@ Generated at Fri, 14 Apr 2023 09:56:44 GMT
30
30
  }
31
31
 
32
32
  :root.dark-mode {
33
- --brand-synbee-eolo-01: #a3b6d8;
34
- --brand-synbee-eolo-02: #91a8d1;
35
- --brand-synbee-eolo-03: #7692c5;
36
- --brand-synbee-eolo-04: #5b7eba;
37
- --brand-synbee-eolo-05: #4567a3;
38
- --brand-synbee-eolo-06: #354f7d;
33
+ --brand-synbee-eolo-01: #e3e9f3;
34
+ --brand-synbee-eolo-02: #a3b6d8;
35
+ --brand-synbee-eolo-03: #8ea6cf;
36
+ --brand-synbee-eolo-04: #7692c5;
37
+ --brand-synbee-eolo-05: #5b7eba;
38
+ --brand-synbee-eolo-06: #3f5f96;
39
39
  --brand-synbee-eolo-07: #26395b;
40
40
  --brand-synbee-eolo-08: #1b283f;
41
41
  --brand-synbee-eolo-09: #131c2c;
42
42
  --brand-synbee-eolo-10: #090e16;
43
43
  --brand-synbee-eolo: #597cb9;
44
- --brand-synbee-01: #e3ad00;
45
- --brand-synbee-02: #d2a000;
46
- --brand-synbee-03: #b68b00;
47
- --brand-synbee-04: #9e7800;
48
- --brand-synbee-05: #816300;
49
- --brand-synbee-06: #644c00;
44
+ --brand-synbee-01: #ffe79b;
45
+ --brand-synbee-02: #e3ad00;
46
+ --brand-synbee-03: #ce9d00;
47
+ --brand-synbee-04: #b68b00;
48
+ --brand-synbee-05: #9e7800;
49
+ --brand-synbee-06: #785b00;
50
50
  --brand-synbee-07: #483700;
51
51
  --brand-synbee-08: #322700;
52
52
  --brand-synbee-09: #221a00;
@@ -56,23 +56,23 @@ Generated at Fri, 14 Apr 2023 09:56:44 GMT
56
56
 
57
57
  @media (prefers-color-scheme: dark) {
58
58
  :root.system-mode {
59
- --brand-synbee-eolo-01: #a3b6d8;
60
- --brand-synbee-eolo-02: #91a8d1;
61
- --brand-synbee-eolo-03: #7692c5;
62
- --brand-synbee-eolo-04: #5b7eba;
63
- --brand-synbee-eolo-05: #4567a3;
64
- --brand-synbee-eolo-06: #354f7d;
59
+ --brand-synbee-eolo-01: #e3e9f3;
60
+ --brand-synbee-eolo-02: #a3b6d8;
61
+ --brand-synbee-eolo-03: #8ea6cf;
62
+ --brand-synbee-eolo-04: #7692c5;
63
+ --brand-synbee-eolo-05: #5b7eba;
64
+ --brand-synbee-eolo-06: #3f5f96;
65
65
  --brand-synbee-eolo-07: #26395b;
66
66
  --brand-synbee-eolo-08: #1b283f;
67
67
  --brand-synbee-eolo-09: #131c2c;
68
68
  --brand-synbee-eolo-10: #090e16;
69
69
  --brand-synbee-eolo: #597cb9;
70
- --brand-synbee-01: #e3ad00;
71
- --brand-synbee-02: #d2a000;
72
- --brand-synbee-03: #b68b00;
73
- --brand-synbee-04: #9e7800;
74
- --brand-synbee-05: #816300;
75
- --brand-synbee-06: #644c00;
70
+ --brand-synbee-01: #ffe79b;
71
+ --brand-synbee-02: #e3ad00;
72
+ --brand-synbee-03: #ce9d00;
73
+ --brand-synbee-04: #b68b00;
74
+ --brand-synbee-05: #9e7800;
75
+ --brand-synbee-06: #785b00;
76
76
  --brand-synbee-07: #483700;
77
77
  --brand-synbee-08: #322700;
78
78
  --brand-synbee-09: #221a00;
package/dist/css/colors-hex-brand.css CHANGED
@@ -1,82 +1,115 @@
1
1
  /*
2
2
  Generated by Style Dictionary
3
3
  Do not edit directly
4
- Generated at Fri, 14 Apr 2023 09:56:44 GMT
4
+ Generated at Tue, 30 May 2023 10:49:14 GMT
5
5
  */
6
6
 
7
7
  :root {
8
- --brand-maggioli-01: #00379e;
9
- --brand-maggioli-02: #0240b4;
10
- --brand-maggioli-03: #0a50d4;
11
- --brand-maggioli-04: #1f65e8;
12
- --brand-maggioli-05: #5183df;
13
- --brand-maggioli-06: #85a2da;
8
+ --brand-maggioli-01: #0c1a36;
9
+ --brand-maggioli-02: #00379e;
10
+ --brand-maggioli-03: #0242b9;
11
+ --brand-maggioli-04: #0a50d4;
12
+ --brand-maggioli-05: #1f65e8;
13
+ --brand-maggioli-06: #638ddd;
14
14
  --brand-maggioli-07: #b2c1dc;
15
15
  --brand-maggioli-08: #d2d8e4;
16
16
  --brand-maggioli-09: #e6e9ed;
17
17
  --brand-maggioli-10: #f4f5f6;
18
18
  --brand-maggioli: #00379e;
19
- --brand-maggioli-editore-01: #133993;
20
- --brand-maggioli-editore-02: #1040b2;
21
- --brand-maggioli-editore-03: #104ddd;
22
- --brand-maggioli-editore-04: #2b63e9;
23
- --brand-maggioli-editore-05: #5781e3;
24
- --brand-maggioli-editore-06: #86a1df;
19
+ --brand-maggioli-editore-01: #151b28;
20
+ --brand-maggioli-editore-02: #133993;
21
+ --brand-maggioli-editore-03: #1042b7;
22
+ --brand-maggioli-editore-04: #104ddd;
23
+ --brand-maggioli-editore-05: #2b63e9;
24
+ --brand-maggioli-editore-06: #668be2;
25
25
  --brand-maggioli-editore-07: #b2c0e0;
26
26
  --brand-maggioli-editore-08: #d2d8e5;
27
27
  --brand-maggioli-editore-09: #e6e8ed;
28
28
  --brand-maggioli-editore-10: #f4f5f6;
29
29
  --brand-maggioli-editore: #0f4ad5;
30
+ --brand-mindy-01: #091d22;
31
+ --brand-mindy-02: #044756;
32
+ --brand-mindy-03: #035467;
33
+ --brand-mindy-04: #03647b;
34
+ --brand-mindy-05: #057792;
35
+ --brand-mindy-06: #109abb;
36
+ --brand-mindy-07: #93c8d4;
37
+ --brand-mindy-08: #cbdbdf;
38
+ --brand-mindy-09: #e4e9ea;
39
+ --brand-mindy-10: #f4f5f5;
40
+ --brand-mindy: #036278;
30
41
  }
31
42
 
32
43
  :root.dark-mode {
33
- --brand-maggioli-01: #a3b6db;
34
- --brand-maggioli-02: #8da8da;
35
- --brand-maggioli-03: #6a91dc;
36
- --brand-maggioli-04: #447ae1;
37
- --brand-maggioli-05: #135ce6;
38
- --brand-maggioli-06: #0344be;
44
+ --brand-maggioli-01: #e6e8ec;
45
+ --brand-maggioli-02: #a3b6db;
46
+ --brand-maggioli-03: #89a5da;
47
+ --brand-maggioli-04: #6a91dc;
48
+ --brand-maggioli-05: #447ae1;
49
+ --brand-maggioli-06: #0c54da;
39
50
  --brand-maggioli-07: #01318c;
40
51
  --brand-maggioli-08: #07255c;
41
52
  --brand-maggioli-09: #0c1b37;
42
53
  --brand-maggioli-10: #0b0e14;
43
54
  --brand-maggioli: #00379e;
44
- --brand-maggioli-editore-01: #a4b5df;
45
- --brand-maggioli-editore-02: #8fa7df;
46
- --brand-maggioli-editore-03: #6d8fe1;
47
- --brand-maggioli-editore-04: #4a78e5;
48
- --brand-maggioli-editore-05: #1c5aeb;
49
- --brand-maggioli-editore-06: #0f43be;
55
+ --brand-maggioli-editore-01: #e6e8ed;
56
+ --brand-maggioli-editore-02: #a4b5df;
57
+ --brand-maggioli-editore-03: #8aa4df;
58
+ --brand-maggioli-editore-04: #6d8fe1;
59
+ --brand-maggioli-editore-05: #4a78e5;
60
+ --brand-maggioli-editore-06: #1150e4;
50
61
  --brand-maggioli-editore-07: #16347c;
51
62
  --brand-maggioli-editore-08: #192748;
52
63
  --brand-maggioli-editore-09: #151b28;
53
64
  --brand-maggioli-editore-10: #0e1014;
54
65
  --brand-maggioli-editore: #0f4ad5;
66
+ --brand-mindy-01: #e4e9eb;
67
+ --brand-mindy-02: #72c1d4;
68
+ --brand-mindy-03: #1fb2d5;
69
+ --brand-mindy-04: #129ebf;
70
+ --brand-mindy-05: #0989a6;
71
+ --brand-mindy-06: #03687f;
72
+ --brand-mindy-07: #053f4c;
73
+ --brand-mindy-08: #072c34;
74
+ --brand-mindy-09: #081f24;
75
+ --brand-mindy-10: #081011;
76
+ --brand-mindy: #036278;
55
77
  }
56
78
 
57
79
  @media (prefers-color-scheme: dark) {
58
80
  :root.system-mode {
59
- --brand-maggioli-01: #a3b6db;
60
- --brand-maggioli-02: #8da8da;
61
- --brand-maggioli-03: #6a91dc;
62
- --brand-maggioli-04: #447ae1;
63
- --brand-maggioli-05: #135ce6;
64
- --brand-maggioli-06: #0344be;
81
+ --brand-maggioli-01: #e6e8ec;
82
+ --brand-maggioli-02: #a3b6db;
83
+ --brand-maggioli-03: #89a5da;
84
+ --brand-maggioli-04: #6a91dc;
85
+ --brand-maggioli-05: #447ae1;
86
+ --brand-maggioli-06: #0c54da;
65
87
  --brand-maggioli-07: #01318c;
66
88
  --brand-maggioli-08: #07255c;
67
89
  --brand-maggioli-09: #0c1b37;
68
90
  --brand-maggioli-10: #0b0e14;
69
91
  --brand-maggioli: #00379e;
70
- --brand-maggioli-editore-01: #a4b5df;
71
- --brand-maggioli-editore-02: #8fa7df;
72
- --brand-maggioli-editore-03: #6d8fe1;
73
- --brand-maggioli-editore-04: #4a78e5;
74
- --brand-maggioli-editore-05: #1c5aeb;
75
- --brand-maggioli-editore-06: #0f43be;
92
+ --brand-maggioli-editore-01: #e6e8ed;
93
+ --brand-maggioli-editore-02: #a4b5df;
94
+ --brand-maggioli-editore-03: #8aa4df;
95
+ --brand-maggioli-editore-04: #6d8fe1;
96
+ --brand-maggioli-editore-05: #4a78e5;
97
+ --brand-maggioli-editore-06: #1150e4;
76
98
  --brand-maggioli-editore-07: #16347c;
77
99
  --brand-maggioli-editore-08: #192748;
78
100
  --brand-maggioli-editore-09: #151b28;
79
101
  --brand-maggioli-editore-10: #0e1014;
80
102
  --brand-maggioli-editore: #0f4ad5;
103
+ --brand-mindy-01: #e4e9eb;
104
+ --brand-mindy-02: #72c1d4;
105
+ --brand-mindy-03: #1fb2d5;
106
+ --brand-mindy-04: #129ebf;
107
+ --brand-mindy-05: #0989a6;
108
+ --brand-mindy-06: #03687f;
109
+ --brand-mindy-07: #053f4c;
110
+ --brand-mindy-08: #072c34;
111
+ --brand-mindy-09: #081f24;
112
+ --brand-mindy-10: #081011;
113
+ --brand-mindy: #036278;
81
114
  }
82
115
  }