@maggioli-design-system/styles 6.2.0 → 6.3.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 (13) hide show
  1. package/dist/css/colors-brand-synbee.css +82 -0
  2. package/dist/css/colors-brand.css +49 -0
  3. package/dist/css/colors-label.css +346 -0
  4. package/dist/css/colors-rgb-brand-synbee.css +82 -0
  5. package/dist/css/colors-rgb-brand.css +49 -0
  6. package/dist/css/colors-rgb-label.css +346 -0
  7. package/dist/css/colors-rgb-status.css +148 -0
  8. package/dist/css/colors-rgb-tones.css +214 -0
  9. package/dist/css/colors-rgb.css +3 -3
  10. package/dist/css/colors-status.css +148 -0
  11. package/dist/css/colors-tones.css +214 -0
  12. package/dist/css/colors.css +3 -3
  13. package/package.json +4 -5
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 Sat, 29 Jan 2022 15:39:42 GMT
4
+ Generated at Thu, 10 Feb 2022 15:13:13 GMT
5
5
  */
6
6
 
7
7
  :root {
@@ -271,7 +271,7 @@ Generated at Sat, 29 Jan 2022 15:39:42 GMT
271
271
  --adjust-tone-08: 29, 29, 29;
272
272
  --adjust-tone-09: 16, 16, 16;
273
273
  --adjust-tone-10: 8, 8, 8;
274
- --adjust-tone: 255, 255, 255;
274
+ --adjust-tone: 0, 0, 0;
275
275
  --tone-slate-01: 221, 225, 232;
276
276
  --tone-slate-02: 210, 217, 225;
277
277
  --tone-slate-03: 171, 182, 199;
@@ -528,7 +528,7 @@ Generated at Sat, 29 Jan 2022 15:39:42 GMT
528
528
  --adjust-tone-08: 29, 29, 29;
529
529
  --adjust-tone-09: 16, 16, 16;
530
530
  --adjust-tone-10: 8, 8, 8;
531
- --adjust-tone: 255, 255, 255;
531
+ --adjust-tone: 0, 0, 0;
532
532
  --tone-slate-01: 221, 225, 232;
533
533
  --tone-slate-02: 210, 217, 225;
534
534
  --tone-slate-03: 171, 182, 199;
package/dist/css/colors-status.css ADDED
@@ -0,0 +1,148 @@
1
+ /*
2
+ Generated by Style Dictionary
3
+ Do not edit directly
4
+ Generated at Thu, 10 Feb 2022 15:13:14 GMT
5
+ */
6
+
7
+ :root {
8
+ --status-info-01: #eaf8fc;
9
+ --status-info-02: #cfeef8;
10
+ --status-info-03: #aae1f3;
11
+ --status-info-04: #6ccceb;
12
+ --status-info-05: #1eaede;
13
+ --status-info-06: #198fb6;
14
+ --status-info-07: #157697;
15
+ --status-info-08: #11637f;
16
+ --status-info-09: #0e5168;
17
+ --status-info-10: #0c465a;
18
+ --status-info: #23b2e1;
19
+ --status-success-01: #e1faee;
20
+ --status-success-02: #bff4db;
21
+ --status-success-03: #8cebbd;
22
+ --status-success-04: #2ada86;
23
+ --status-success-05: #20b86f;
24
+ --status-success-06: #1a975b;
25
+ --status-success-07: #167d4c;
26
+ --status-success-08: #126940;
27
+ --status-success-09: #0f5634;
28
+ --status-success-10: #0d4a2d;
29
+ --status-success: #21bf73;
30
+ --status-error-01: #fef3f3;
31
+ --status-error-02: #fce2e2;
32
+ --status-error-03: #f9cecd;
33
+ --status-error-04: #f5aeac;
34
+ --status-error-05: #f0817e;
35
+ --status-error-06: #ea4d49;
36
+ --status-error-07: #d71d19;
37
+ --status-error-08: #b61815;
38
+ --status-error-09: #951411;
39
+ --status-error-10: #82120f;
40
+ --status-error: #ed6663;
41
+ --status-warning-01: #fff5d5;
42
+ --status-warning-02: #ffe7a1;
43
+ --status-warning-03: #ffd452;
44
+ --status-warning-04: #f2b600;
45
+ --status-warning-05: #cd9900;
46
+ --status-warning-06: #a87e00;
47
+ --status-warning-07: #8b6800;
48
+ --status-warning-08: #755700;
49
+ --status-warning-09: #5f4800;
50
+ --status-warning-10: #523d00;
51
+ --status-warning: #ffc107;
52
+ }
53
+
54
+ :root .dark-mode {
55
+ --status-info-01: #031115;
56
+ --status-info-02: #051f28;
57
+ --status-info-03: #082c37;
58
+ --status-info-04: #0b3e4f;
59
+ --status-info-05: #0f566d;
60
+ --status-info-06: #13708e;
61
+ --status-info-07: #1787ac;
62
+ --status-info-08: #1b9dc8;
63
+ --status-info-09: #2ab4e2;
64
+ --status-info-10: #52c2e7;
65
+ --status-info: #23b2e1;
66
+ --status-success-01: #03110a;
67
+ --status-success-02: #052013;
68
+ --status-success-03: #082e1b;
69
+ --status-success-04: #0b4228;
70
+ --status-success-05: #105b37;
71
+ --status-success-06: #147647;
72
+ --status-success-07: #198f56;
73
+ --status-success-08: #1da664;
74
+ --status-success-09: #21bf73;
75
+ --status-success-10: #24cf7d;
76
+ --status-success: #21bf73;
77
+ --status-error-01: #230504;
78
+ --status-error-02: #3b0807;
79
+ --status-error-03: #540b0a;
80
+ --status-error-04: #74100d;
81
+ --status-error-05: #9e1512;
82
+ --status-error-06: #cb1b17;
83
+ --status-error-07: #e83c39;
84
+ --status-error-08: #ed6663;
85
+ --status-error-09: #f18a88;
86
+ --status-error-10: #f49f9d;
87
+ --status-error: #ed6663;
88
+ --status-warning-01: #140f00;
89
+ --status-warning-02: #231a00;
90
+ --status-warning-03: #332700;
91
+ --status-warning-04: #493700;
92
+ --status-warning-05: #654b00;
93
+ --status-warning-06: #836200;
94
+ --status-warning-07: #9f7700;
95
+ --status-warning-08: #b98a00;
96
+ --status-warning-09: #d49f00;
97
+ --status-warning-10: #e6ac00;
98
+ --status-warning: #ffc107;
99
+ }
100
+
101
+ @media (prefers-color-scheme: dark) {
102
+ :root .dark-mode-os {
103
+ --status-info-01: #031115;
104
+ --status-info-02: #051f28;
105
+ --status-info-03: #082c37;
106
+ --status-info-04: #0b3e4f;
107
+ --status-info-05: #0f566d;
108
+ --status-info-06: #13708e;
109
+ --status-info-07: #1787ac;
110
+ --status-info-08: #1b9dc8;
111
+ --status-info-09: #2ab4e2;
112
+ --status-info-10: #52c2e7;
113
+ --status-info: #23b2e1;
114
+ --status-success-01: #03110a;
115
+ --status-success-02: #052013;
116
+ --status-success-03: #082e1b;
117
+ --status-success-04: #0b4228;
118
+ --status-success-05: #105b37;
119
+ --status-success-06: #147647;
120
+ --status-success-07: #198f56;
121
+ --status-success-08: #1da664;
122
+ --status-success-09: #21bf73;
123
+ --status-success-10: #24cf7d;
124
+ --status-success: #21bf73;
125
+ --status-error-01: #230504;
126
+ --status-error-02: #3b0807;
127
+ --status-error-03: #540b0a;
128
+ --status-error-04: #74100d;
129
+ --status-error-05: #9e1512;
130
+ --status-error-06: #cb1b17;
131
+ --status-error-07: #e83c39;
132
+ --status-error-08: #ed6663;
133
+ --status-error-09: #f18a88;
134
+ --status-error-10: #f49f9d;
135
+ --status-error: #ed6663;
136
+ --status-warning-01: #140f00;
137
+ --status-warning-02: #231a00;
138
+ --status-warning-03: #332700;
139
+ --status-warning-04: #493700;
140
+ --status-warning-05: #654b00;
141
+ --status-warning-06: #836200;
142
+ --status-warning-07: #9f7700;
143
+ --status-warning-08: #b98a00;
144
+ --status-warning-09: #d49f00;
145
+ --status-warning-10: #e6ac00;
146
+ --status-warning: #ffc107;
147
+ }
148
+ }
package/dist/css/colors-tones.css ADDED
@@ -0,0 +1,214 @@
1
+ /*
2
+ Generated by Style Dictionary
3
+ Do not edit directly
4
+ Generated at Thu, 10 Feb 2022 15:13:14 GMT
5
+ */
6
+
7
+ :root {
8
+ --adjust-tone-01: #f9f9f9;
9
+ --adjust-tone-02: #f3f3f3;
10
+ --adjust-tone-03: #e7e7e7;
11
+ --adjust-tone-04: #d5d5d5;
12
+ --adjust-tone-05: #a2a2a2;
13
+ --adjust-tone-06: #717171;
14
+ --adjust-tone-07: #545454;
15
+ --adjust-tone-08: #404040;
16
+ --adjust-tone-09: #282828;
17
+ --adjust-tone-10: #212121;
18
+ --adjust-tone: #ffffff;
19
+ --tone-slate-01: #f8f9fa;
20
+ --tone-slate-02: #f3f4f7;
21
+ --tone-slate-03: #e4e7ed;
22
+ --tone-slate-04: #ced5df;
23
+ --tone-slate-05: #95a4b8;
24
+ --tone-slate-06: #5f738f;
25
+ --tone-slate-07: #47556a;
26
+ --tone-slate-08: #364151;
27
+ --tone-slate-09: #212932;
28
+ --tone-slate-10: #1c222a;
29
+ --tone-slate: #ffffff;
30
+ --tone-grey-01: #f8f9f9;
31
+ --tone-grey-02: #f3f4f6;
32
+ --tone-grey-03: #e5e7ea;
33
+ --tone-grey-04: #d2d5da;
34
+ --tone-grey-05: #9ca3af;
35
+ --tone-grey-06: #697282;
36
+ --tone-grey-07: #4e5460;
37
+ --tone-grey-08: #3b4049;
38
+ --tone-grey-09: #25282e;
39
+ --tone-grey-10: #1f2226;
40
+ --tone-grey: #ffffff;
41
+ --tone-zinc-01: #f8f8f9;
42
+ --tone-zinc-02: #f4f4f5;
43
+ --tone-zinc-03: #e6e6e8;
44
+ --tone-zinc-04: #d4d4d8;
45
+ --tone-zinc-05: #a1a1aa;
46
+ --tone-zinc-06: #70707c;
47
+ --tone-zinc-07: #53535c;
48
+ --tone-zinc-08: #404046;
49
+ --tone-zinc-09: #28282c;
50
+ --tone-zinc-10: #212125;
51
+ --tone-zinc: #ffffff;
52
+ --tone-neutral-01: #f8f8f8;
53
+ --tone-neutral-02: #f4f4f4;
54
+ --tone-neutral-03: #e7e7e7;
55
+ --tone-neutral-04: #d5d5d5;
56
+ --tone-neutral-05: #a2a2a2;
57
+ --tone-neutral-06: #717171;
58
+ --tone-neutral-07: #545454;
59
+ --tone-neutral-08: #414141;
60
+ --tone-neutral-09: #282828;
61
+ --tone-neutral-10: #212121;
62
+ --tone-neutral: #ffffff;
63
+ --tone-stone-01: #f9f8f8;
64
+ --tone-stone-02: #f5f4f4;
65
+ --tone-stone-03: #e7e6e5;
66
+ --tone-stone-04: #d7d4d2;
67
+ --tone-stone-05: #a7a19c;
68
+ --tone-stone-06: #78706c;
69
+ --tone-stone-07: #595350;
70
+ --tone-stone-08: #443f3d;
71
+ --tone-stone-09: #2a2826;
72
+ --tone-stone-10: #232120;
73
+ --tone-stone: #ffffff;
74
+ }
75
+
76
+ :root .dark-mode {
77
+ --adjust-tone-01: #080808;
78
+ --adjust-tone-02: #101010;
79
+ --adjust-tone-03: #1d1d1d;
80
+ --adjust-tone-04: #2b2b2b;
81
+ --adjust-tone-05: #4f4f4f;
82
+ --adjust-tone-06: #797979;
83
+ --adjust-tone-07: #9b9b9b;
84
+ --adjust-tone-08: #b5b5b5;
85
+ --adjust-tone-09: #d7d7d7;
86
+ --adjust-tone-10: #e0e0e0;
87
+ --adjust-tone: #000000;
88
+ --tone-slate-01: #060809;
89
+ --tone-slate-02: #0e1115;
90
+ --tone-slate-03: #181d24;
91
+ --tone-slate-04: #242b36;
92
+ --tone-slate-05: #424f63;
93
+ --tone-slate-06: #657b98;
94
+ --tone-slate-07: #8c9cb3;
95
+ --tone-slate-08: #abb6c7;
96
+ --tone-slate-09: #d2d9e1;
97
+ --tone-slate-10: #dde1e8;
98
+ --tone-slate: #000000;
99
+ --tone-grey-01: #070809;
100
+ --tone-grey-02: #0e0f11;
101
+ --tone-grey-03: #1b1d21;
102
+ --tone-grey-04: #282b31;
103
+ --tone-grey-05: #494f5a;
104
+ --tone-grey-06: #707a8a;
105
+ --tone-grey-07: #949ba8;
106
+ --tone-grey-08: #b1b6c0;
107
+ --tone-grey-09: #d5d8dd;
108
+ --tone-grey-10: #dee1e5;
109
+ --tone-grey: #000000;
110
+ --tone-zinc-01: #09090a;
111
+ --tone-zinc-02: #0f0f10;
112
+ --tone-zinc-03: #1c1c1f;
113
+ --tone-zinc-04: #2a2a2f;
114
+ --tone-zinc-05: #4e4e56;
115
+ --tone-zinc-06: #787885;
116
+ --tone-zinc-07: #9a9aa4;
117
+ --tone-zinc-08: #b5b5bd;
118
+ --tone-zinc-09: #d8d8db;
119
+ --tone-zinc-10: #e0e0e3;
120
+ --tone-zinc: #000000;
121
+ --tone-neutral-01: #080808;
122
+ --tone-neutral-02: #0f0f0f;
123
+ --tone-neutral-03: #1d1d1d;
124
+ --tone-neutral-04: #2b2b2b;
125
+ --tone-neutral-05: #4e4e4e;
126
+ --tone-neutral-06: #7a7a7a;
127
+ --tone-neutral-07: #9b9b9b;
128
+ --tone-neutral-08: #b5b5b5;
129
+ --tone-neutral-09: #d7d7d7;
130
+ --tone-neutral-10: #e0e0e0;
131
+ --tone-neutral: #000000;
132
+ --tone-stone-01: #080807;
133
+ --tone-stone-02: #100f0e;
134
+ --tone-stone-03: #1e1c1b;
135
+ --tone-stone-04: #2d2a28;
136
+ --tone-stone-05: #534d4a;
137
+ --tone-stone-06: #7f7872;
138
+ --tone-stone-07: #a09a96;
139
+ --tone-stone-08: #b9b5b1;
140
+ --tone-stone-09: #dad7d6;
141
+ --tone-stone-10: #e2e0df;
142
+ --tone-stone: #000000;
143
+ }
144
+
145
+ @media (prefers-color-scheme: dark) {
146
+ :root .dark-mode-os {
147
+ --adjust-tone-01: #080808;
148
+ --adjust-tone-02: #101010;
149
+ --adjust-tone-03: #1d1d1d;
150
+ --adjust-tone-04: #2b2b2b;
151
+ --adjust-tone-05: #4f4f4f;
152
+ --adjust-tone-06: #797979;
153
+ --adjust-tone-07: #9b9b9b;
154
+ --adjust-tone-08: #b5b5b5;
155
+ --adjust-tone-09: #d7d7d7;
156
+ --adjust-tone-10: #e0e0e0;
157
+ --adjust-tone: #000000;
158
+ --tone-slate-01: #060809;
159
+ --tone-slate-02: #0e1115;
160
+ --tone-slate-03: #181d24;
161
+ --tone-slate-04: #242b36;
162
+ --tone-slate-05: #424f63;
163
+ --tone-slate-06: #657b98;
164
+ --tone-slate-07: #8c9cb3;
165
+ --tone-slate-08: #abb6c7;
166
+ --tone-slate-09: #d2d9e1;
167
+ --tone-slate-10: #dde1e8;
168
+ --tone-slate: #000000;
169
+ --tone-grey-01: #070809;
170
+ --tone-grey-02: #0e0f11;
171
+ --tone-grey-03: #1b1d21;
172
+ --tone-grey-04: #282b31;
173
+ --tone-grey-05: #494f5a;
174
+ --tone-grey-06: #707a8a;
175
+ --tone-grey-07: #949ba8;
176
+ --tone-grey-08: #b1b6c0;
177
+ --tone-grey-09: #d5d8dd;
178
+ --tone-grey-10: #dee1e5;
179
+ --tone-grey: #000000;
180
+ --tone-zinc-01: #09090a;
181
+ --tone-zinc-02: #0f0f10;
182
+ --tone-zinc-03: #1c1c1f;
183
+ --tone-zinc-04: #2a2a2f;
184
+ --tone-zinc-05: #4e4e56;
185
+ --tone-zinc-06: #787885;
186
+ --tone-zinc-07: #9a9aa4;
187
+ --tone-zinc-08: #b5b5bd;
188
+ --tone-zinc-09: #d8d8db;
189
+ --tone-zinc-10: #e0e0e3;
190
+ --tone-zinc: #000000;
191
+ --tone-neutral-01: #080808;
192
+ --tone-neutral-02: #0f0f0f;
193
+ --tone-neutral-03: #1d1d1d;
194
+ --tone-neutral-04: #2b2b2b;
195
+ --tone-neutral-05: #4e4e4e;
196
+ --tone-neutral-06: #7a7a7a;
197
+ --tone-neutral-07: #9b9b9b;
198
+ --tone-neutral-08: #b5b5b5;
199
+ --tone-neutral-09: #d7d7d7;
200
+ --tone-neutral-10: #e0e0e0;
201
+ --tone-neutral: #000000;
202
+ --tone-stone-01: #080807;
203
+ --tone-stone-02: #100f0e;
204
+ --tone-stone-03: #1e1c1b;
205
+ --tone-stone-04: #2d2a28;
206
+ --tone-stone-05: #534d4a;
207
+ --tone-stone-06: #7f7872;
208
+ --tone-stone-07: #a09a96;
209
+ --tone-stone-08: #b9b5b1;
210
+ --tone-stone-09: #dad7d6;
211
+ --tone-stone-10: #e2e0df;
212
+ --tone-stone: #000000;
213
+ }
214
+ }
package/dist/css/colors.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  Generated by Style Dictionary
3
3
  Do not edit directly
4
- Generated at Sat, 29 Jan 2022 15:39:42 GMT
4
+ Generated at Thu, 10 Feb 2022 15:13:13 GMT
5
5
  */
6
6
 
7
7
  :root {
@@ -271,7 +271,7 @@ Generated at Sat, 29 Jan 2022 15:39:42 GMT
271
271
  --adjust-tone-08: #1d1d1d;
272
272
  --adjust-tone-09: #101010;
273
273
  --adjust-tone-10: #080808;
274
- --adjust-tone: #ffffff;
274
+ --adjust-tone: #000000;
275
275
  --tone-slate-01: #dde1e8;
276
276
  --tone-slate-02: #d2d9e1;
277
277
  --tone-slate-03: #abb6c7;
@@ -528,7 +528,7 @@ Generated at Sat, 29 Jan 2022 15:39:42 GMT
528
528
  --adjust-tone-08: #1d1d1d;
529
529
  --adjust-tone-09: #101010;
530
530
  --adjust-tone-10: #080808;
531
- --adjust-tone: #ffffff;
531
+ --adjust-tone: #000000;
532
532
  --tone-slate-01: #dde1e8;
533
533
  --tone-slate-02: #d2d9e1;
534
534
  --tone-slate-03: #abb6c7;
package/package.json CHANGED
@@ -1,15 +1,14 @@
1
1
  {
2
2
  "name": "@maggioli-design-system/styles",
3
- "version": "6.2.0",
3
+ "version": "6.3.0",
4
4
  "description": "This module contains SCSS and CSS styles used by Maggioli Design System, it also makes available a Tailwind config based on Maggioli design tokens.",
5
5
  "main": "./tailwind.config.js",
6
6
  "scripts": {
7
7
  "build": "npm run clean && npm run copy && npm run tailwind.build",
8
8
  "clean": "rm -rf dist || true && mkdir -p dist/css dist/tailwind",
9
- "copy": "npm run copy.tailwind && npm run copy.css.hex && npm run copy.css.rgb",
9
+ "copy": "npm run copy.tailwind && npm run copy.css",
10
10
  "copy.tailwind": "cp -rf tailwind dist",
11
- "copy.css.hex": "cp -rf ../design-tokens/dist/css/colors.css ./dist/css/colors.css",
12
- "copy.css.rgb": "cp -rf ../design-tokens/dist/css/colors-rgb.css ./dist/css/colors-rgb.css",
11
+ "copy.css": "cp -rf ../design-tokens/dist/css/*.css ./dist/css/.",
13
12
  "tailwind.base": "tailwindcss -i ./css/base.css -o ./dist/css/base.css",
14
13
  "tailwind.build": "npm run tailwind.base && npm run tailwind.typography",
15
14
  "tailwind.typography": "tailwindcss -i ./css/typography.css -o ./dist/css/typography.css"
@@ -38,7 +37,7 @@
38
37
  ],
39
38
  "license": "ISC",
40
39
  "dependencies": {
41
- "@maggioli-design-system/design-tokens": "^6.1.1",
40
+ "@maggioli-design-system/design-tokens": "^6.4.0",
42
41
  "normalize.css": "^8.0.1",
43
42
  "typeface-karla": "^1.1.13",
44
43
  "typeface-roboto": "^1.1.13"