@maggioli-design-system/styles 8.2.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 (21) hide show
  1. package/README.md +134 -24
  2. package/package.json +12 -14
  3. package/tailwind.config.js +1 -0
  4. package/dist/css/base.css +0 -96
  5. package/dist/css/colors-brand-synbee.css +0 -208
  6. package/dist/css/colors-brand.css +0 -49
  7. package/dist/css/colors-label.css +0 -346
  8. package/dist/css/colors-rgb-brand-synbee.css +0 -208
  9. package/dist/css/colors-rgb-brand.css +0 -49
  10. package/dist/css/colors-rgb-label.css +0 -346
  11. package/dist/css/colors-rgb-status.css +0 -148
  12. package/dist/css/colors-rgb-tones.css +0 -181
  13. package/dist/css/colors-rgb.css +0 -868
  14. package/dist/css/colors-status.css +0 -148
  15. package/dist/css/colors-tones.css +0 -181
  16. package/dist/css/colors.css +0 -868
  17. package/dist/css/globals.css +0 -14
  18. package/dist/css/reset.css +0 -463
  19. package/dist/css/typography.css +0 -148
  20. package/dist/tailwind/base.css +0 -96
  21. package/dist/tailwind/typography.css +0 -151
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@maggioli-design-system/styles",
3
- "version": "8.2.0",
3
+ "version": "10.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": {
@@ -41,20 +41,18 @@
41
41
  ],
42
42
  "license": "ISC",
43
43
  "dependencies": {
44
- "@fontsource/karla": "^4.5.8",
45
- "@fontsource/merriweather": "^4.5.12",
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"
44
+ "@fontsource/karla": "^4.5.10",
45
+ "@fontsource/merriweather": "^4.5.14",
46
+ "@fontsource/roboto": "^4.5.8",
47
+ "@fontsource/roboto-mono": "^4.5.8",
48
+ "@maggioli-design-system/design-tokens": "^10.0.0",
49
+ "normalize.css": "^8.0.1"
52
50
  },
53
51
  "devDependencies": {
54
- "autoprefixer": "^10.4.7",
55
- "postcss-cli": "^9.1.0",
56
- "postcss": "^8.4.13",
57
- "postcss-import": "^14.0.7",
58
- "tailwindcss": "^3.1.4"
52
+ "autoprefixer": "^10.4.13",
53
+ "postcss-cli": "^10.1.0",
54
+ "postcss": "^8.4.19",
55
+ "postcss-import": "^15.0.1",
56
+ "tailwindcss": "^3.2.4"
59
57
  }
60
58
  }
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',
package/dist/css/base.css DELETED
@@ -1,96 +0,0 @@
1
-
2
- html {
3
- scroll-behavior: smooth;
4
- }
5
- body,
6
- html {
7
- margin: 0px;
8
- }
9
- body {
10
- font-size: 1rem;
11
- line-height: 1.5rem;
12
- font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
13
- --tw-text-opacity: 1;
14
- color: rgba(var(--tone-neutral-02), var(--tw-text-opacity));
15
-
16
- -moz-osx-font-smoothing: grayscale;
17
- -webkit-font-smoothing: antialiased;
18
- -webkit-tap-highlight-color: transparent;
19
- text-rendering: optimizelegibility;
20
- -webkit-text-size-adjust: 100%;
21
- -moz-text-size-adjust: 100%;
22
- text-size-adjust: 100%;
23
- }
24
- ::-moz-selection {
25
- background-color: var(--selection-background, rgb(var(--label-sky-09)));
26
- color: var(--selection-color, rgb(var(--label-sky-01)));
27
- }
28
- ::selection {
29
- background-color: var(--selection-background, rgb(var(--label-sky-09)));
30
- color: var(--selection-color, rgb(var(--label-sky-01)));
31
- }
32
- button,
33
- optgroup,
34
- select {
35
- font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
36
- font-weight: 500;
37
- line-height: 1.625;
38
- -webkit-font-smoothing: antialiased;
39
- -moz-osx-font-smoothing: grayscale;
40
- }
41
- input,
42
- textarea {
43
- -webkit-appearance: none;
44
- -moz-appearance: none;
45
- appearance: none;
46
-
47
- font-family: inherit;
48
- }
49
- b,
50
- strong {
51
- font-weight: 600;
52
- letter-spacing: -0.025em;
53
- }
54
- a {
55
- --tw-text-opacity: 1;
56
- color: rgba(var(--brand-maggioli-03), var(--tw-text-opacity));
57
-
58
- font-family: inherit;
59
- font-size: inherit;
60
- font-weight: inherit;
61
- }
62
- a,
63
- aside,
64
- body,
65
- code,
66
- div,
67
- datalist,
68
- footer,
69
- form,
70
- h1,
71
- h2,
72
- h3,
73
- h4,
74
- h5,
75
- h6,
76
- header,
77
- hr,
78
- html,
79
- input,
80
- li,
81
- main,
82
- section,
83
- span,
84
- ul,
85
- textarea {
86
- box-sizing: border-box;
87
- }
88
- h1,
89
- h2,
90
- h3,
91
- h4,
92
- h5,
93
- h6,
94
- p {
95
- margin: 0px;
96
- }
package/dist/css/colors-brand-synbee.css DELETED
@@ -1,208 +0,0 @@
1
- /*
2
- Generated by Style Dictionary
3
- Do not edit directly
4
- Generated at Tue, 27 Sep 2022 10:47:46 GMT
5
- */
6
-
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;
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
- --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;
40
- --brand-synbee-01: #513e00;
41
- --brand-synbee-02: #5e4800;
42
- --brand-synbee-03: #735800;
43
- --brand-synbee-04: #896900;
44
- --brand-synbee-05: #a67f00;
45
- --brand-synbee-06: #c99b00;
46
- --brand-synbee-07: #efb800;
47
- --brand-synbee-08: #ffd446;
48
- --brand-synbee-09: #ffe89a;
49
- --brand-synbee-10: #fff5d5;
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;
72
- }
73
-
74
- :root .dark-mode {
75
- --brand-synbee-eolo-01: #a3b6d8;
76
- --brand-synbee-eolo-02: #91a8d1;
77
- --brand-synbee-eolo-03: #7692c5;
78
- --brand-synbee-eolo-04: #5b7eba;
79
- --brand-synbee-eolo-05: #4567a3;
80
- --brand-synbee-eolo-06: #354f7d;
81
- --brand-synbee-eolo-07: #26395b;
82
- --brand-synbee-eolo-08: #1b283f;
83
- --brand-synbee-eolo-09: #131c2c;
84
- --brand-synbee-eolo-10: #090e16;
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;
107
- --brand-synbee-01: #e2ae00;
108
- --brand-synbee-02: #d1a000;
109
- --brand-synbee-03: #b68c00;
110
- --brand-synbee-04: #9d7800;
111
- --brand-synbee-05: #816300;
112
- --brand-synbee-06: #644c00;
113
- --brand-synbee-07: #483700;
114
- --brand-synbee-08: #332700;
115
- --brand-synbee-09: #231b00;
116
- --brand-synbee-10: #120e00;
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;
139
- }
140
-
141
- @media (prefers-color-scheme: dark) {
142
- :root .dark-mode-os {
143
- --brand-synbee-eolo-01: #a3b6d8;
144
- --brand-synbee-eolo-02: #91a8d1;
145
- --brand-synbee-eolo-03: #7692c5;
146
- --brand-synbee-eolo-04: #5b7eba;
147
- --brand-synbee-eolo-05: #4567a3;
148
- --brand-synbee-eolo-06: #354f7d;
149
- --brand-synbee-eolo-07: #26395b;
150
- --brand-synbee-eolo-08: #1b283f;
151
- --brand-synbee-eolo-09: #131c2c;
152
- --brand-synbee-eolo-10: #090e16;
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;
175
- --brand-synbee-01: #e2ae00;
176
- --brand-synbee-02: #d1a000;
177
- --brand-synbee-03: #b68c00;
178
- --brand-synbee-04: #9d7800;
179
- --brand-synbee-05: #816300;
180
- --brand-synbee-06: #644c00;
181
- --brand-synbee-07: #483700;
182
- --brand-synbee-08: #332700;
183
- --brand-synbee-09: #231b00;
184
- --brand-synbee-10: #120e00;
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;
207
- }
208
- }
package/dist/css/colors-brand.css DELETED
@@ -1,49 +0,0 @@
1
- /*
2
- Generated by Style Dictionary
3
- Do not edit directly
4
- Generated at Tue, 27 Sep 2022 10:47:46 GMT
5
- */
6
-
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;
14
- --brand-maggioli-07: #b2c1dc;
15
- --brand-maggioli-08: #d2d8e4;
16
- --brand-maggioli-09: #e6e9ed;
17
- --brand-maggioli-10: #f4f5f6;
18
- --brand-maggioli: #00379e;
19
- }
20
-
21
- :root .dark-mode {
22
- --brand-maggioli-01: #a3b6db;
23
- --brand-maggioli-02: #8da8da;
24
- --brand-maggioli-03: #6a91dc;
25
- --brand-maggioli-04: #447ae1;
26
- --brand-maggioli-05: #135ce6;
27
- --brand-maggioli-06: #0344be;
28
- --brand-maggioli-07: #01318c;
29
- --brand-maggioli-08: #07255c;
30
- --brand-maggioli-09: #0c1b37;
31
- --brand-maggioli-10: #0b0e14;
32
- --brand-maggioli: #00379e;
33
- }
34
-
35
- @media (prefers-color-scheme: dark) {
36
- :root .dark-mode-os {
37
- --brand-maggioli-01: #a3b6db;
38
- --brand-maggioli-02: #8da8da;
39
- --brand-maggioli-03: #6a91dc;
40
- --brand-maggioli-04: #447ae1;
41
- --brand-maggioli-05: #135ce6;
42
- --brand-maggioli-06: #0344be;
43
- --brand-maggioli-07: #01318c;
44
- --brand-maggioli-08: #07255c;
45
- --brand-maggioli-09: #0c1b37;
46
- --brand-maggioli-10: #0b0e14;
47
- --brand-maggioli: #00379e;
48
- }
49
- }