@maggioli-design-system/styles 8.1.1 → 9.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 (17) hide show
  1. package/README.md +134 -24
  2. package/dist/css/{colors-brand-synbee.css → colors-hex-brand-synbee.css} +3 -3
  3. package/dist/css/{colors-brand.css → colors-hex-brand.css} +3 -3
  4. package/dist/css/{colors-label.css → colors-hex-label.css} +3 -3
  5. package/dist/css/{colors-status.css → colors-hex-status.css} +3 -3
  6. package/dist/css/{colors-tones.css → colors-hex-tones.css} +3 -3
  7. package/dist/css/{colors.css → colors-hex.css} +3 -3
  8. package/dist/css/colors-rgb-brand-synbee.css +3 -3
  9. package/dist/css/colors-rgb-brand.css +3 -3
  10. package/dist/css/colors-rgb-label.css +3 -3
  11. package/dist/css/colors-rgb-status.css +3 -3
  12. package/dist/css/colors-rgb-tones.css +3 -3
  13. package/dist/css/colors-rgb.css +3 -3
  14. package/dist/css/globals.css +1 -0
  15. package/dist/css/reset.css +1 -48
  16. package/package.json +4 -7
  17. package/tailwind.config.js +1 -0
package/README.md CHANGED
@@ -1,22 +1,123 @@
1
- # Maggioli Design System
1
+ # @maggioli-design-system/styles
2
2
 
3
- #### styles
3
+ These are the CSS and Tailwind styles used by components libraries of [Magma Design System][mds] to use the palette generated by `@maggioli-design-system/design-tokens`.
4
4
 
5
- These are the styles used by components libraries like `@maggioli-design-system/react` to use the palette generated by `@maggioli-design-system/design-tokens`.
5
+ # Installation
6
6
 
7
- ##### Installation
7
+ Install the component via `npm` by running the following command:
8
8
 
9
+ ```bash
10
+ npm i @maggioli-design-system/styles
9
11
  ```
10
- npm install @maggioli-design-system/styles@latest
12
+
13
+ This package works also with yarn:
14
+
15
+ ```bash
16
+ yarn add @maggioli-design-system/styles
17
+ ```
18
+
19
+ # Integration
20
+
21
+ ### CSS
22
+
23
+ The first part to be included are the design tokens, like color palette and typography, that are used by the components.
24
+
25
+ #### Colors with tailwind or web components
26
+
27
+ If you use tailwind or web components, you need to import **rgb format** of colors:
28
+
29
+ ```ts
30
+ import '@maggioli-design-system/styles/dist/css/colors-rgb-tones.css';
31
+ import '@maggioli-design-system/styles/dist/css/colors-rgb-status.css';
32
+ import '@maggioli-design-system/styles/dist/css/colors-rgb-label.css';
33
+ import '@maggioli-design-system/styles/dist/css/colors-rgb-brand.css';
34
+ ```
35
+
36
+ You need to import colors because web components and our tailwind config works with our palette, which are custom properties in rgb format (rr, gg, bb).
37
+
38
+ If for some reason you need to use colors outside tailwind:
39
+
40
+ ```css
41
+ .selector {
42
+ color: rgb(var(--tone-neutral-01));
43
+ }
44
+ ```
45
+
46
+ #### Hex colors
47
+
48
+ If you need just the **hex format** of colors, you can import them like this:
49
+
50
+ ```ts
51
+ import '@maggioli-design-system/styles/dist/css/colors-hex-tones.css';
52
+ import '@maggioli-design-system/styles/dist/css/colors-hex-status.css';
53
+ import '@maggioli-design-system/styles/dist/css/colors-hex-label.css';
54
+ import '@maggioli-design-system/styles/dist/css/colors-hex-brand.css';
55
+ ```
56
+
57
+ Then you can use them like this:
58
+
59
+ ```css
60
+ .selector {
61
+ color: var(--tone-neutral-01);
62
+ }
63
+ ```
64
+
65
+ ---
66
+
67
+ ### Dark mode format
68
+
69
+ our color palette already supports dark mode, either according to your computer settings, or with manual support:
70
+
71
+ #### Manual mode
72
+
73
+ Just add the `dark-mode` class to the `html` tag:
74
+
75
+ ```html
76
+ <html class="dark-mode">
77
+ ```
78
+
79
+ #### OS settings mode
80
+
81
+ Just add the `system-mode` class to the `html` tag:
82
+
83
+ ```html
84
+ <html class="system-mode">
85
+ ```
86
+
87
+ There are other practices to handle dark mode, check [how tailwind handle dark mode][tailwindcss-dark], or [how is handled by next-themes][next-themes].
88
+
89
+ ---
90
+
91
+ ### Tailwindcss config
92
+
93
+ You can use styles with [tailwindcss config][tailwindcss-config], palette colors and the rest of it's Design Tokens.
94
+ There are various ways to use it, check out [tailwindcss documentation][tailwindcss-doc].
95
+
96
+ To extend the default tailwind config:
97
+
98
+ ```js
99
+ module.exports = {
100
+ content: [
101
+ './src/**/*.{ts,tsx}',
102
+ ],
103
+ important: false,
104
+ presets: [
105
+ require('@maggioli-design-system/styles'),
106
+ ],
107
+ }
11
108
  ```
12
109
 
13
110
  ---
14
111
 
15
112
  ### Fonts
16
113
 
17
- Now you can use `@fontsource` fonts, which are up to date with Google fonts, styles used in Magma are:
114
+ Use `@fontsource` fonts, which are up to date with Google fonts, styles used in [Magma Design System][mds] are:
18
115
 
19
- ##### TypeScript
116
+ #### TypeScript
117
+
118
+ Importing fonts in TypeScript:
119
+
120
+ ```ts
20
121
 
21
122
  ```ts
22
123
  import '@fontsource/karla/400.css'
@@ -24,10 +125,12 @@ import '@fontsource/karla/700.css'
24
125
  import '@fontsource/merriweather/400.css'
25
126
  import '@fontsource/merriweather/700.css'
26
127
  import '@fontsource/roboto/700.css'
27
- import '@fontsource/roboto/800.css'
128
+ import '@fontsource/roboto/900.css'
28
129
  ```
29
130
 
30
- ##### CSS
131
+ #### CSS
132
+
133
+ Importing fonts in CSS:
31
134
 
32
135
  ```css
33
136
  @import '@fontsource/karla/400.css';
@@ -38,21 +141,28 @@ import '@fontsource/roboto/800.css'
38
141
  @import '@fontsource/roboto/900.css';
39
142
  ```
40
143
 
41
- Fontsource supports [variable fonts](https://fontsource.org/docs/variable-fonts).
144
+ Fontsource supports [variable fonts][fontsource-var-fonts].
42
145
 
43
146
  ---
44
147
 
45
- ### Structure
46
-
47
- #### Folder `postcss`
48
-
49
- Here you add CSS that should be buit with postcss, which is stored inside `dist/css`.
50
-
51
- #### Folder `css`
52
-
53
- Here you add static CSS that should be stored inside `dist/css`.
54
-
55
- #### Folder `tailwind`
56
-
57
- Here you add Tailwind CSS that should be stored inside `dist/tailwind`, this folder is used when you use tailwind also in your product.
58
-
148
+ ### Dist folder
149
+
150
+ The `dist` folder contains the following files:
151
+
152
+ | Folder | For | File name |
153
+ | --------- | ----------- | ----------- |
154
+ | `css` | both | `globals.css` |
155
+ | `css` | both | `reset.css` |
156
+ | `css` | plain css | `base.css` |
157
+ | `css` | plain css | `colors-hex-*.css` |
158
+ | `css` | plain css | `typography.css` |
159
+ | `css` | tailwind or web components | `colors-rgb-*.css` |
160
+ | `tailwind` | tailwind | `base.css` |
161
+ | `tailwind` | tailwind | `typography.css` |
162
+
163
+ [mds]: https://magma.maggiolicloud.it/
164
+ [fontsource-var-fonts]: https://fontsource.org/docs/variable-fonts
165
+ [tailwindcss-config]: https://gitlab.com/maggiolispa/ricerca-sviluppo-new-media/magma/design-system/-/blob/dev/projects/styles/tailwind.config.js
166
+ [tailwindcss-doc]: https://tailwindcss.com/docs/installation
167
+ [tailwindcss-dark]: https://tailwindcss.com/docs/dark-mode#supporting-system-preference-and-manual-selection
168
+ [next-themes]: https://github.com/pacocoursey/next-themes#use
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 Wed, 29 Jun 2022 09:21:10 GMT
4
+ Generated at Tue, 04 Oct 2022 09:16:57 GMT
5
5
  */
6
6
 
7
7
  :root {
@@ -71,7 +71,7 @@ Generated at Wed, 29 Jun 2022 09:21:10 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 Wed, 29 Jun 2022 09:21:10 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 Wed, 29 Jun 2022 09:21:10 GMT
4
+ Generated at Tue, 04 Oct 2022 09:16:57 GMT
5
5
  */
6
6
 
7
7
  :root {
@@ -18,7 +18,7 @@ Generated at Wed, 29 Jun 2022 09:21:10 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 Wed, 29 Jun 2022 09:21:10 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 Wed, 29 Jun 2022 09:21:10 GMT
4
+ Generated at Tue, 04 Oct 2022 09:16:57 GMT
5
5
  */
6
6
 
7
7
  :root {
@@ -117,7 +117,7 @@ Generated at Wed, 29 Jun 2022 09:21:10 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 Wed, 29 Jun 2022 09:21:10 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 Wed, 29 Jun 2022 09:21:10 GMT
4
+ Generated at Tue, 04 Oct 2022 09:16:57 GMT
5
5
  */
6
6
 
7
7
  :root {
@@ -51,7 +51,7 @@ Generated at Wed, 29 Jun 2022 09:21:10 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 Wed, 29 Jun 2022 09:21:10 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 Wed, 29 Jun 2022 09:21:10 GMT
4
+ Generated at Tue, 04 Oct 2022 09:16:57 GMT
5
5
  */
6
6
 
7
7
  :root {
@@ -62,7 +62,7 @@ Generated at Wed, 29 Jun 2022 09:21:10 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 Wed, 29 Jun 2022 09:21:10 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 Wed, 29 Jun 2022 09:21:10 GMT
4
+ Generated at Tue, 04 Oct 2022 09:16:56 GMT
5
5
  */
6
6
 
7
7
  :root {
@@ -291,7 +291,7 @@ Generated at Wed, 29 Jun 2022 09:21:10 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 Wed, 29 Jun 2022 09:21:10 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 Wed, 29 Jun 2022 09:21:10 GMT
4
+ Generated at Tue, 04 Oct 2022 09:16:57 GMT
5
5
  */
6
6
 
7
7
  :root {
@@ -71,7 +71,7 @@ Generated at Wed, 29 Jun 2022 09:21:10 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 Wed, 29 Jun 2022 09:21:10 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 Wed, 29 Jun 2022 09:21:10 GMT
4
+ Generated at Tue, 04 Oct 2022 09:16:57 GMT
5
5
  */
6
6
 
7
7
  :root {
@@ -18,7 +18,7 @@ Generated at Wed, 29 Jun 2022 09:21:10 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 Wed, 29 Jun 2022 09:21:10 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 Wed, 29 Jun 2022 09:21:10 GMT
4
+ Generated at Tue, 04 Oct 2022 09:16:57 GMT
5
5
  */
6
6
 
7
7
  :root {
@@ -117,7 +117,7 @@ Generated at Wed, 29 Jun 2022 09:21:10 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 Wed, 29 Jun 2022 09:21:10 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 Wed, 29 Jun 2022 09:21:10 GMT
4
+ Generated at Tue, 04 Oct 2022 09:16:57 GMT
5
5
  */
6
6
 
7
7
  :root {
@@ -51,7 +51,7 @@ Generated at Wed, 29 Jun 2022 09:21:10 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 Wed, 29 Jun 2022 09:21:10 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 Wed, 29 Jun 2022 09:21:10 GMT
4
+ Generated at Tue, 04 Oct 2022 09:16:57 GMT
5
5
  */
6
6
 
7
7
  :root {
@@ -62,7 +62,7 @@ Generated at Wed, 29 Jun 2022 09:21:10 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 Wed, 29 Jun 2022 09:21:10 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 Wed, 29 Jun 2022 09:21:10 GMT
4
+ Generated at Tue, 04 Oct 2022 09:16:56 GMT
5
5
  */
6
6
 
7
7
  :root {
@@ -291,7 +291,7 @@ Generated at Wed, 29 Jun 2022 09:21:10 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 Wed, 29 Jun 2022 09:21:10 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/globals.css CHANGED
@@ -4,6 +4,7 @@
4
4
  --backdrop-color: 0 0 0;
5
5
  --backdrop-opacity: 0.1;
6
6
  --backdrop: rgba(var(--backdrop-color) / var(--backdrop-opacity));
7
+ --modal-z-index: 1000;
7
8
  --overlay-blur: var(--backdrop-blur);
8
9
  --overlay-color: var(--backdrop-color);
9
10
  --overlay-opacity: 0.5;
package/dist/css/reset.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- ! tailwindcss v3.1.4 | MIT License | https://tailwindcss.com
2
+ ! tailwindcss v3.1.8 | MIT License | https://tailwindcss.com
3
3
  *//*
4
4
  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
5
5
  2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -415,53 +415,6 @@ video {
415
415
  --tw-backdrop-sepia: ;
416
416
  }
417
417
 
418
- ::-webkit-backdrop {
419
- --tw-border-spacing-x: 0;
420
- --tw-border-spacing-y: 0;
421
- --tw-translate-x: 0;
422
- --tw-translate-y: 0;
423
- --tw-rotate: 0;
424
- --tw-skew-x: 0;
425
- --tw-skew-y: 0;
426
- --tw-scale-x: 1;
427
- --tw-scale-y: 1;
428
- --tw-pan-x: ;
429
- --tw-pan-y: ;
430
- --tw-pinch-zoom: ;
431
- --tw-scroll-snap-strictness: proximity;
432
- --tw-ordinal: ;
433
- --tw-slashed-zero: ;
434
- --tw-numeric-figure: ;
435
- --tw-numeric-spacing: ;
436
- --tw-numeric-fraction: ;
437
- --tw-ring-inset: ;
438
- --tw-ring-offset-width: 0px;
439
- --tw-ring-offset-color: #fff;
440
- --tw-ring-color: rgb(59 130 246 / 0.5);
441
- --tw-ring-offset-shadow: 0 0 #0000;
442
- --tw-ring-shadow: 0 0 #0000;
443
- --tw-shadow: 0 0 #0000;
444
- --tw-shadow-colored: 0 0 #0000;
445
- --tw-blur: ;
446
- --tw-brightness: ;
447
- --tw-contrast: ;
448
- --tw-grayscale: ;
449
- --tw-hue-rotate: ;
450
- --tw-invert: ;
451
- --tw-saturate: ;
452
- --tw-sepia: ;
453
- --tw-drop-shadow: ;
454
- --tw-backdrop-blur: ;
455
- --tw-backdrop-brightness: ;
456
- --tw-backdrop-contrast: ;
457
- --tw-backdrop-grayscale: ;
458
- --tw-backdrop-hue-rotate: ;
459
- --tw-backdrop-invert: ;
460
- --tw-backdrop-opacity: ;
461
- --tw-backdrop-saturate: ;
462
- --tw-backdrop-sepia: ;
463
- }
464
-
465
418
  ::backdrop {
466
419
  --tw-border-spacing-x: 0;
467
420
  --tw-border-spacing-y: 0;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@maggioli-design-system/styles",
3
- "version": "8.1.1",
3
+ "version": "9.0.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": {
@@ -44,17 +44,14 @@
44
44
  "@fontsource/karla": "^4.5.8",
45
45
  "@fontsource/merriweather": "^4.5.12",
46
46
  "@fontsource/roboto": "^4.5.7",
47
- "@maggioli-design-system/design-tokens": "^8.0.0",
48
- "normalize.css": "^8.0.1",
49
- "typeface-karla": "^1.1.13",
50
- "typeface-merriweather": "^1.1.13",
51
- "typeface-roboto": "^1.1.13"
47
+ "@maggioli-design-system/design-tokens": "^9.0.0",
48
+ "normalize.css": "^8.0.1"
52
49
  },
53
50
  "devDependencies": {
54
51
  "autoprefixer": "^10.4.7",
55
52
  "postcss-cli": "^9.1.0",
56
53
  "postcss": "^8.4.13",
57
54
  "postcss-import": "^14.0.7",
58
- "tailwindcss": "^3.1.4"
55
+ "tailwindcss": "^3.1.8"
59
56
  }
60
57
  }
package/tailwind.config.js CHANGED
@@ -47,6 +47,7 @@ module.exports = {
47
47
  content: [
48
48
  './src/**/*.{js,jsx}',
49
49
  ],
50
+ darkMode: ['class', '.dark-mode'],
50
51
  theme: {
51
52
  colors: {
52
53
  transparent: 'transparent',