@maggioli-design-system/styles 6.5.3 → 8.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 (22) hide show
  1. package/README.md +18 -0
  2. package/dist/css/base.css +70 -23
  3. package/dist/css/colors-brand-synbee.css +151 -25
  4. package/dist/css/colors-brand.css +13 -13
  5. package/dist/css/colors-label.css +105 -105
  6. package/dist/css/colors-rgb-brand-synbee.css +151 -25
  7. package/dist/css/colors-rgb-brand.css +13 -13
  8. package/dist/css/colors-rgb-label.css +105 -105
  9. package/dist/css/colors-rgb-status.css +50 -50
  10. package/dist/css/colors-rgb-tones.css +60 -93
  11. package/dist/css/colors-rgb.css +375 -282
  12. package/dist/css/colors-status.css +50 -50
  13. package/dist/css/colors-tones.css +60 -93
  14. package/dist/css/colors.css +375 -282
  15. package/dist/css/globals.css +13 -0
  16. package/dist/css/reset.css +510 -0
  17. package/dist/css/typography.css +133 -125
  18. package/dist/tailwind/base.css +10 -9
  19. package/dist/tailwind/typography.css +48 -26
  20. package/package.json +20 -14
  21. package/postcss.config.js +1 -0
  22. package/tailwind.config.js +3 -3
package/README.md CHANGED
@@ -2,6 +2,7 @@
2
2
 
3
3
  #### styles
4
4
 
5
+
5
6
  These are the styles used by components libraries like `@maggioli-design-system/react` to use the palette generated by `@maggioli-design-system/design-tokens`.
6
7
 
7
8
  ##### Installation
@@ -9,3 +10,20 @@ These are the styles used by components libraries like `@maggioli-design-system/
9
10
  ```
10
11
  npm install @maggioli-design-system/styles@latest
11
12
  ```
13
+
14
+ ---
15
+
16
+ ### Structure
17
+
18
+ #### Folder `postcss`
19
+
20
+ Here you add CSS that should be buit with postcss, which is stored inside `dist/css`.
21
+
22
+ #### Folder `css`
23
+
24
+ Here you add static CSS that should be stored inside `dist/css`.
25
+
26
+ #### Folder `tailwind`
27
+
28
+ Here you add Tailwind CSS that should be stored inside `dist/tailwind`, this folder is used when you use tailwind also in your product.
29
+
package/dist/css/base.css CHANGED
@@ -1,27 +1,55 @@
1
+ /*!
2
+ This file requires postcss and eventually postcss-cli to build this tailwind css file.
3
+ You should use these postcss plugins in the postcss.config.js file:
4
+
5
+ module.exports = {
6
+ plugins: [
7
+ require('postcss-import'),
8
+ require('tailwindcss/nesting'),
9
+ require('tailwindcss'),
10
+ require('autoprefixer'),
11
+ ],
12
+ }
13
+ */
14
+
1
15
  html {
2
16
  scroll-behavior: smooth;
3
17
  }
4
18
 
5
- body, html {
19
+ body,
20
+ html {
6
21
  margin: 0px;
7
22
  }
8
23
 
9
24
  body {
10
- font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
11
25
  font-size: 1rem;
12
26
  line-height: 1.5rem;
27
+ font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
13
28
  --tw-text-opacity: 1;
14
- color: rgba(var(--adjust-tone-04), var(--tw-text-opacity));
29
+ color: rgba(var(--adjust-tone-02), var(--tw-text-opacity));
30
+
15
31
  -moz-osx-font-smoothing: grayscale;
16
32
  -webkit-font-smoothing: antialiased;
17
33
  -webkit-tap-highlight-color: transparent;
18
- text-rendering: optimizeLegibility;
34
+ text-rendering: optimizelegibility;
19
35
  -webkit-text-size-adjust: 100%;
20
36
  -moz-text-size-adjust: 100%;
21
37
  text-size-adjust: 100%;
22
38
  }
23
39
 
24
- button, optgroup, select {
40
+ ::-moz-selection {
41
+ background-color: var(--selection-background, rgb(var(--label-sky-09)));
42
+ color: var(--selection-color, rgb(var(--label-sky-01)));
43
+ }
44
+
45
+ ::selection {
46
+ background-color: var(--selection-background, rgb(var(--label-sky-09)));
47
+ color: var(--selection-color, rgb(var(--label-sky-01)));
48
+ }
49
+
50
+ button,
51
+ optgroup,
52
+ select {
25
53
  font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
26
54
  font-weight: 500;
27
55
  line-height: 1.625;
@@ -29,14 +57,17 @@ button, optgroup, select {
29
57
  -moz-osx-font-smoothing: grayscale;
30
58
  }
31
59
 
32
- input, textarea {
60
+ input,
61
+ textarea {
33
62
  -webkit-appearance: none;
34
63
  -moz-appearance: none;
35
64
  appearance: none;
65
+
36
66
  font-family: inherit;
37
67
  }
38
68
 
39
- b, strong {
69
+ b,
70
+ strong {
40
71
  font-weight: 600;
41
72
  letter-spacing: -0.025em;
42
73
  }
@@ -44,29 +75,45 @@ b, strong {
44
75
  a {
45
76
  --tw-text-opacity: 1;
46
77
  color: rgba(var(--brand-maggioli-03), var(--tw-text-opacity));
78
+
47
79
  font-family: inherit;
48
80
  font-size: inherit;
49
81
  font-weight: inherit;
50
82
  }
51
83
 
52
- a, aside, body, code, div, datalist, footer, form, h1, h2, h3, h4, h5, h6, header, hr, html, input, li, main, section, span, ul, textarea {
84
+ a,
85
+ aside,
86
+ body,
87
+ code,
88
+ div,
89
+ datalist,
90
+ footer,
91
+ form,
92
+ h1,
93
+ h2,
94
+ h3,
95
+ h4,
96
+ h5,
97
+ h6,
98
+ header,
99
+ hr,
100
+ html,
101
+ input,
102
+ li,
103
+ main,
104
+ section,
105
+ span,
106
+ ul,
107
+ textarea {
53
108
  box-sizing: border-box;
54
109
  }
55
110
 
56
- h1, h2, h3, h4, h5, h6, p {
111
+ h1,
112
+ h2,
113
+ h3,
114
+ h4,
115
+ h5,
116
+ h6,
117
+ p {
57
118
  margin: 0px;
58
119
  }
59
-
60
- ::-moz-selection {
61
- --tw-bg-opacity: 1;
62
- background-color: rgba(var(--brand-maggioli-09), var(--tw-bg-opacity));
63
- --tw-text-opacity: 1;
64
- color: rgba(var(--brand-maggioli-02), var(--tw-text-opacity));
65
- }
66
-
67
- ::selection {
68
- --tw-bg-opacity: 1;
69
- background-color: rgba(var(--brand-maggioli-09), var(--tw-bg-opacity));
70
- --tw-text-opacity: 1;
71
- color: rgba(var(--brand-maggioli-02), var(--tw-text-opacity));
72
- }
package/dist/css/colors-brand-synbee.css CHANGED
@@ -1,82 +1,208 @@
1
1
  /*
2
2
  Generated by Style Dictionary
3
3
  Do not edit directly
4
- Generated at Tue, 15 Feb 2022 10:42:02 GMT
4
+ Generated at Mon, 27 Jun 2022 07:54:51 GMT
5
5
  */
6
6
 
7
7
  :root {
8
8
  --brand-synbee-eolo-01: #2b4066;
9
- --brand-synbee-eolo-02: #324b76;
9
+ --brand-synbee-eolo-02: #324a76;
10
10
  --brand-synbee-eolo-03: #3d5b91;
11
11
  --brand-synbee-eolo-04: #496dad;
12
- --brand-synbee-eolo-05: #6485be;
12
+ --brand-synbee-eolo-05: #6585be;
13
13
  --brand-synbee-eolo-06: #8aa2ce;
14
- --brand-synbee-eolo-07: #b1c1de;
15
- --brand-synbee-eolo-08: #ced9eb;
16
- --brand-synbee-eolo-09: #e1e8f2;
17
- --brand-synbee-eolo-10: #f2f4f9;
14
+ --brand-synbee-eolo-07: #b0c1de;
15
+ --brand-synbee-eolo-08: #cfd9eb;
16
+ --brand-synbee-eolo-09: #e3e9f3;
17
+ --brand-synbee-eolo-10: #f2f5f9;
18
18
  --brand-synbee-eolo: #597cb9;
19
+ --brand-synbee-eolo-v1-01: #1a263d;
20
+ --brand-synbee-eolo-v1-02: #233452;
21
+ --brand-synbee-eolo-v1-03: #2b4066;
22
+ --brand-synbee-eolo-v1-04: #334c79;
23
+ --brand-synbee-eolo-v1-05: #3b598d;
24
+ --brand-synbee-eolo-v1-06: #4465a0;
25
+ --brand-synbee-eolo-v1-07: #4c72b4;
26
+ --brand-synbee-eolo-v1-08: #5d80bb;
27
+ --brand-synbee-eolo-v1-09: #708ec3;
28
+ --brand-synbee-eolo-v1-10: #859ecb;
29
+ --brand-synbee-eolo-v1-11: #98aed4;
30
+ --brand-synbee-eolo-v1-12: #acbddc;
31
+ --brand-synbee-eolo-v1-13: #bccae3;
32
+ --brand-synbee-eolo-v1-14: #c6d2e7;
33
+ --brand-synbee-eolo-v1-15: #cfd9eb;
34
+ --brand-synbee-eolo-v1-16: #d8e0ee;
35
+ --brand-synbee-eolo-v1-17: #e0e7f2;
36
+ --brand-synbee-eolo-v1-18: #e9eef6;
37
+ --brand-synbee-eolo-v1-19: #f0f3f9;
38
+ --brand-synbee-eolo-v1-20: #f6f8fb;
39
+ --brand-synbee-eolo-v1: #597cb9;
19
40
  --brand-synbee-01: #513e00;
20
- --brand-synbee-02: #5d4800;
41
+ --brand-synbee-02: #5e4800;
21
42
  --brand-synbee-03: #735800;
22
43
  --brand-synbee-04: #896900;
23
44
  --brand-synbee-05: #a67f00;
24
45
  --brand-synbee-06: #c99b00;
25
46
  --brand-synbee-07: #efb800;
26
- --brand-synbee-08: #ffd447;
27
- --brand-synbee-09: #ffe798;
28
- --brand-synbee-10: #fff5d4;
47
+ --brand-synbee-08: #ffd446;
48
+ --brand-synbee-09: #ffe89a;
49
+ --brand-synbee-10: #fff5d5;
29
50
  --brand-synbee: #ffcf30;
51
+ --adjust-tone-01: #262626;
52
+ --adjust-tone-02: #343434;
53
+ --adjust-tone-03: #404040;
54
+ --adjust-tone-04: #4c4c4c;
55
+ --adjust-tone-05: #595959;
56
+ --adjust-tone-06: #656565;
57
+ --adjust-tone-07: #727272;
58
+ --adjust-tone-08: #7f7f7f;
59
+ --adjust-tone-09: #8d8d8d;
60
+ --adjust-tone-10: #9d9d9d;
61
+ --adjust-tone-11: #acacac;
62
+ --adjust-tone-12: #bcbcbc;
63
+ --adjust-tone-13: #c9c9c9;
64
+ --adjust-tone-14: #d2d2d2;
65
+ --adjust-tone-15: #d9d9d9;
66
+ --adjust-tone-16: #dfdfdf;
67
+ --adjust-tone-17: #e7e7e7;
68
+ --adjust-tone-18: #ededed;
69
+ --adjust-tone-19: #f3f3f3;
70
+ --adjust-tone-20: #f9f9f9;
71
+ --adjust-tone: #ffffff;
30
72
  }
31
73
 
32
74
  :root .dark-mode {
33
75
  --brand-synbee-eolo-01: #a3b6d8;
34
76
  --brand-synbee-eolo-02: #91a8d1;
35
- --brand-synbee-eolo-03: #7592c5;
77
+ --brand-synbee-eolo-03: #7692c5;
36
78
  --brand-synbee-eolo-04: #5b7eba;
37
79
  --brand-synbee-eolo-05: #4567a3;
38
80
  --brand-synbee-eolo-06: #354f7d;
39
- --brand-synbee-eolo-07: #26395a;
40
- --brand-synbee-eolo-08: #1b2840;
41
- --brand-synbee-eolo-09: #121c2c;
42
- --brand-synbee-eolo-10: #0a0f17;
81
+ --brand-synbee-eolo-07: #26395b;
82
+ --brand-synbee-eolo-08: #1b283f;
83
+ --brand-synbee-eolo-09: #131c2c;
84
+ --brand-synbee-eolo-10: #090e16;
43
85
  --brand-synbee-eolo: #597cb9;
86
+ --brand-synbee-eolo-v1-01: #d1daeb;
87
+ --brand-synbee-eolo-v1-02: #bac8e2;
88
+ --brand-synbee-eolo-v1-03: #a3b6d8;
89
+ --brand-synbee-eolo-v1-04: #8ea6cf;
90
+ --brand-synbee-eolo-v1-05: #7a96c7;
91
+ --brand-synbee-eolo-v1-06: #6686bf;
92
+ --brand-synbee-eolo-v1-07: #5579b7;
93
+ --brand-synbee-eolo-v1-08: #486caa;
94
+ --brand-synbee-eolo-v1-09: #405f97;
95
+ --brand-synbee-eolo-v1-10: #375282;
96
+ --brand-synbee-eolo-v1-11: #2f4770;
97
+ --brand-synbee-eolo-v1-12: #283c5e;
98
+ --brand-synbee-eolo-v1-13: #223351;
99
+ --brand-synbee-eolo-v1-14: #1e2d47;
100
+ --brand-synbee-eolo-v1-15: #1b283f;
101
+ --brand-synbee-eolo-v1-16: #172337;
102
+ --brand-synbee-eolo-v1-17: #131d2e;
103
+ --brand-synbee-eolo-v1-18: #101725;
104
+ --brand-synbee-eolo-v1-19: #0b101a;
105
+ --brand-synbee-eolo-v1-20: #06090f;
106
+ --brand-synbee-eolo-v1: #597cb9;
44
107
  --brand-synbee-01: #e2ae00;
45
108
  --brand-synbee-02: #d1a000;
46
- --brand-synbee-03: #b68b00;
109
+ --brand-synbee-03: #b68c00;
47
110
  --brand-synbee-04: #9d7800;
48
111
  --brand-synbee-05: #816300;
49
112
  --brand-synbee-06: #644c00;
50
113
  --brand-synbee-07: #483700;
51
114
  --brand-synbee-08: #332700;
52
115
  --brand-synbee-09: #231b00;
53
- --brand-synbee-10: #130f00;
116
+ --brand-synbee-10: #120e00;
54
117
  --brand-synbee: #ffcf30;
118
+ --adjust-tone-01: #d9d9d9;
119
+ --adjust-tone-02: #c7c7c7;
120
+ --adjust-tone-03: #b5b5b5;
121
+ --adjust-tone-04: #a4a4a4;
122
+ --adjust-tone-05: #959595;
123
+ --adjust-tone-06: #858585;
124
+ --adjust-tone-07: #787878;
125
+ --adjust-tone-08: #6c6c6c;
126
+ --adjust-tone-09: #606060;
127
+ --adjust-tone-10: #525252;
128
+ --adjust-tone-11: #474747;
129
+ --adjust-tone-12: #3c3c3c;
130
+ --adjust-tone-13: #333333;
131
+ --adjust-tone-14: #2d2d2d;
132
+ --adjust-tone-15: #282828;
133
+ --adjust-tone-16: #222222;
134
+ --adjust-tone-17: #1d1d1d;
135
+ --adjust-tone-18: #181818;
136
+ --adjust-tone-19: #101010;
137
+ --adjust-tone-20: #080808;
138
+ --adjust-tone: #000000;
55
139
  }
56
140
 
57
141
  @media (prefers-color-scheme: dark) {
58
142
  :root .dark-mode-os {
59
143
  --brand-synbee-eolo-01: #a3b6d8;
60
144
  --brand-synbee-eolo-02: #91a8d1;
61
- --brand-synbee-eolo-03: #7592c5;
145
+ --brand-synbee-eolo-03: #7692c5;
62
146
  --brand-synbee-eolo-04: #5b7eba;
63
147
  --brand-synbee-eolo-05: #4567a3;
64
148
  --brand-synbee-eolo-06: #354f7d;
65
- --brand-synbee-eolo-07: #26395a;
66
- --brand-synbee-eolo-08: #1b2840;
67
- --brand-synbee-eolo-09: #121c2c;
68
- --brand-synbee-eolo-10: #0a0f17;
149
+ --brand-synbee-eolo-07: #26395b;
150
+ --brand-synbee-eolo-08: #1b283f;
151
+ --brand-synbee-eolo-09: #131c2c;
152
+ --brand-synbee-eolo-10: #090e16;
69
153
  --brand-synbee-eolo: #597cb9;
154
+ --brand-synbee-eolo-v1-01: #d1daeb;
155
+ --brand-synbee-eolo-v1-02: #bac8e2;
156
+ --brand-synbee-eolo-v1-03: #a3b6d8;
157
+ --brand-synbee-eolo-v1-04: #8ea6cf;
158
+ --brand-synbee-eolo-v1-05: #7a96c7;
159
+ --brand-synbee-eolo-v1-06: #6686bf;
160
+ --brand-synbee-eolo-v1-07: #5579b7;
161
+ --brand-synbee-eolo-v1-08: #486caa;
162
+ --brand-synbee-eolo-v1-09: #405f97;
163
+ --brand-synbee-eolo-v1-10: #375282;
164
+ --brand-synbee-eolo-v1-11: #2f4770;
165
+ --brand-synbee-eolo-v1-12: #283c5e;
166
+ --brand-synbee-eolo-v1-13: #223351;
167
+ --brand-synbee-eolo-v1-14: #1e2d47;
168
+ --brand-synbee-eolo-v1-15: #1b283f;
169
+ --brand-synbee-eolo-v1-16: #172337;
170
+ --brand-synbee-eolo-v1-17: #131d2e;
171
+ --brand-synbee-eolo-v1-18: #101725;
172
+ --brand-synbee-eolo-v1-19: #0b101a;
173
+ --brand-synbee-eolo-v1-20: #06090f;
174
+ --brand-synbee-eolo-v1: #597cb9;
70
175
  --brand-synbee-01: #e2ae00;
71
176
  --brand-synbee-02: #d1a000;
72
- --brand-synbee-03: #b68b00;
177
+ --brand-synbee-03: #b68c00;
73
178
  --brand-synbee-04: #9d7800;
74
179
  --brand-synbee-05: #816300;
75
180
  --brand-synbee-06: #644c00;
76
181
  --brand-synbee-07: #483700;
77
182
  --brand-synbee-08: #332700;
78
183
  --brand-synbee-09: #231b00;
79
- --brand-synbee-10: #130f00;
184
+ --brand-synbee-10: #120e00;
80
185
  --brand-synbee: #ffcf30;
186
+ --adjust-tone-01: #d9d9d9;
187
+ --adjust-tone-02: #c7c7c7;
188
+ --adjust-tone-03: #b5b5b5;
189
+ --adjust-tone-04: #a4a4a4;
190
+ --adjust-tone-05: #959595;
191
+ --adjust-tone-06: #858585;
192
+ --adjust-tone-07: #787878;
193
+ --adjust-tone-08: #6c6c6c;
194
+ --adjust-tone-09: #606060;
195
+ --adjust-tone-10: #525252;
196
+ --adjust-tone-11: #474747;
197
+ --adjust-tone-12: #3c3c3c;
198
+ --adjust-tone-13: #333333;
199
+ --adjust-tone-14: #2d2d2d;
200
+ --adjust-tone-15: #282828;
201
+ --adjust-tone-16: #222222;
202
+ --adjust-tone-17: #1d1d1d;
203
+ --adjust-tone-18: #181818;
204
+ --adjust-tone-19: #101010;
205
+ --adjust-tone-20: #080808;
206
+ --adjust-tone: #000000;
81
207
  }
82
208
  }
package/dist/css/colors-brand.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  Generated by Style Dictionary
3
3
  Do not edit directly
4
- Generated at Tue, 15 Feb 2022 10:42:02 GMT
4
+ Generated at Mon, 27 Jun 2022 07:54:51 GMT
5
5
  */
6
6
 
7
7
  :root {
@@ -10,40 +10,40 @@ Generated at Tue, 15 Feb 2022 10:42:02 GMT
10
10
  --brand-maggioli-03: #0a50d4;
11
11
  --brand-maggioli-04: #1f65e8;
12
12
  --brand-maggioli-05: #5183df;
13
- --brand-maggioli-06: #84a2da;
13
+ --brand-maggioli-06: #85a2da;
14
14
  --brand-maggioli-07: #b2c1dc;
15
- --brand-maggioli-08: #d3d9e4;
16
- --brand-maggioli-09: #e5e8ec;
17
- --brand-maggioli-10: #f5f5f6;
15
+ --brand-maggioli-08: #d2d8e4;
16
+ --brand-maggioli-09: #e6e9ed;
17
+ --brand-maggioli-10: #f4f5f6;
18
18
  --brand-maggioli: #00379e;
19
19
  }
20
20
 
21
21
  :root .dark-mode {
22
22
  --brand-maggioli-01: #a3b6db;
23
- --brand-maggioli-02: #8ea8da;
23
+ --brand-maggioli-02: #8da8da;
24
24
  --brand-maggioli-03: #6a91dc;
25
25
  --brand-maggioli-04: #447ae1;
26
26
  --brand-maggioli-05: #135ce6;
27
27
  --brand-maggioli-06: #0344be;
28
28
  --brand-maggioli-07: #01318c;
29
- --brand-maggioli-08: #07255d;
30
- --brand-maggioli-09: #0c1b38;
31
- --brand-maggioli-10: #0b0f17;
29
+ --brand-maggioli-08: #07255c;
30
+ --brand-maggioli-09: #0c1b37;
31
+ --brand-maggioli-10: #0b0e14;
32
32
  --brand-maggioli: #00379e;
33
33
  }
34
34
 
35
35
  @media (prefers-color-scheme: dark) {
36
36
  :root .dark-mode-os {
37
37
  --brand-maggioli-01: #a3b6db;
38
- --brand-maggioli-02: #8ea8da;
38
+ --brand-maggioli-02: #8da8da;
39
39
  --brand-maggioli-03: #6a91dc;
40
40
  --brand-maggioli-04: #447ae1;
41
41
  --brand-maggioli-05: #135ce6;
42
42
  --brand-maggioli-06: #0344be;
43
43
  --brand-maggioli-07: #01318c;
44
- --brand-maggioli-08: #07255d;
45
- --brand-maggioli-09: #0c1b38;
46
- --brand-maggioli-10: #0b0f17;
44
+ --brand-maggioli-08: #07255c;
45
+ --brand-maggioli-09: #0c1b37;
46
+ --brand-maggioli-10: #0b0e14;
47
47
  --brand-maggioli: #00379e;
48
48
  }
49
49
  }