@maggioli-design-system/styles 13.0.1 → 14.1.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 (23) hide show
  1. package/dist/css/base.css +25 -65
  2. package/dist/css/colors-hex-brand-synbee.css +2 -1
  3. package/dist/css/colors-hex-brand.css +2 -1
  4. package/dist/css/colors-hex-default.css +2 -1
  5. package/dist/css/colors-hex-label.css +2 -1
  6. package/dist/css/colors-hex-status.css +2 -1
  7. package/dist/css/colors-hex-synbee-v1.css +2 -1
  8. package/dist/css/colors-hex-tones.css +2 -1
  9. package/dist/css/colors-hex.css +2 -1
  10. package/dist/css/colors-rgb-brand-synbee.css +2 -1
  11. package/dist/css/colors-rgb-brand.css +2 -1
  12. package/dist/css/colors-rgb-default.css +2 -1
  13. package/dist/css/colors-rgb-label.css +2 -1
  14. package/dist/css/colors-rgb-status.css +2 -1
  15. package/dist/css/colors-rgb-synbee-v1.css +2 -1
  16. package/dist/css/colors-rgb-tones.css +2 -1
  17. package/dist/css/colors-rgb.css +2 -1
  18. package/dist/css/reset.css +100 -96
  19. package/dist/css/typography.css +33 -33
  20. package/dist/tailwind/base.css +6 -60
  21. package/dist/tailwind/reset.css +98 -0
  22. package/package.json +8 -8
  23. package/tailwind.config.js +54 -94
package/dist/css/base.css CHANGED
@@ -1,28 +1,17 @@
1
1
  @tailwind components;
2
- html {
3
- scroll-behavior: smooth;
4
- }
5
- * {
6
- box-sizing: border-box;
7
- }
8
- body,
9
- html{
10
- margin: 0px;
11
- }
12
2
  body{
13
- font-size: 16px;
3
+
4
+ font-size: 1rem;
5
+
14
6
  line-height: 1.5rem;
15
- font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
16
- --tw-text-opacity: 1;
17
- color: rgb(var(--theme-default-03-secondary-text) / var(--tw-text-opacity));
18
7
 
19
- -moz-osx-font-smoothing: grayscale;
20
8
  -webkit-font-smoothing: antialiased;
21
- -webkit-tap-highlight-color: transparent;
22
- text-rendering: optimizelegibility;
23
- -webkit-text-size-adjust: 100%;
24
- -moz-text-size-adjust: 100%;
25
- text-size-adjust: 100%;
9
+
10
+ -moz-osx-font-smoothing: grayscale;
11
+
12
+ font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
13
+
14
+ color: rgb(var(--theme-default-03-secondary-text, rgb(var(--theme-default-03-secondary-text))));
26
15
  }
27
16
  ::-moz-selection {
28
17
  background-color: var(--magma-selection-background, rgb(var(--label-sky-09)));
@@ -35,66 +24,37 @@ body{
35
24
  button,
36
25
  optgroup,
37
26
  select{
38
- font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
39
- font-size: 14px;
27
+
28
+ font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
29
+
30
+ font-size: 0.875rem;
31
+
40
32
  line-height: 1.5rem;
33
+
41
34
  font-weight: 500;
35
+
42
36
  -webkit-font-smoothing: antialiased;
43
- -moz-osx-font-smoothing: grayscale;
44
- }
45
- input,
46
- textarea{
47
- -webkit-appearance: none;
48
- -moz-appearance: none;
49
- appearance: none;
50
37
 
51
- font-family: inherit;
38
+ -moz-osx-font-smoothing: grayscale;
52
39
  }
53
40
  b,
54
41
  strong{
42
+
55
43
  font-weight: 600;
44
+
56
45
  letter-spacing: -0.025em;
57
46
  }
58
- a{
59
- --tw-text-opacity: 1;
60
- color: rgb(var(--theme-default-02-primary-text) / var(--tw-text-opacity));
61
-
62
- font-family: inherit;
63
- font-size: inherit;
64
- font-weight: inherit;
47
+ a {
48
+ color: rgb(var(--theme-default-02-primary-text, rgb(var(--theme-default-02-primary-text))));
65
49
  }
66
- a,
67
- aside,
68
- body,
69
- code,
70
- div,
71
- datalist,
72
- footer,
73
- form,
74
50
  h1,
75
51
  h2,
76
52
  h3,
77
53
  h4,
78
54
  h5,
79
- h6,
80
- header,
81
- hr,
82
- html,
83
- input,
84
- li,
85
- main,
86
- section,
87
- span,
88
- ul,
89
- textarea{
90
- box-sizing: border-box;
55
+ h6 {
56
+ max-width: 30ch;
91
57
  }
92
- h1,
93
- h2,
94
- h3,
95
- h4,
96
- h5,
97
- h6,
98
- p{
99
- margin: 0px;
58
+ p {
59
+ max-width: 75ch;
100
60
  }
package/dist/css/colors-hex-brand-synbee.css CHANGED
@@ -1,7 +1,8 @@
1
1
  /*
2
+ @magma-design-system/design-tokens v12.0.1
2
3
  Generated by Style Dictionary
3
4
  Do not edit directly
4
- Generated at Mon, 13 Nov 2023 16:09:49 GMT
5
+ Generated at Wed, 10 Jan 2024 07:59:02 GMT
5
6
  */
6
7
 
7
8
  :root {
package/dist/css/colors-hex-brand.css CHANGED
@@ -1,7 +1,8 @@
1
1
  /*
2
+ @magma-design-system/design-tokens v12.0.1
2
3
  Generated by Style Dictionary
3
4
  Do not edit directly
4
- Generated at Mon, 13 Nov 2023 16:09:49 GMT
5
+ Generated at Wed, 10 Jan 2024 07:59:02 GMT
5
6
  */
6
7
 
7
8
  :root {
package/dist/css/colors-hex-default.css CHANGED
@@ -1,7 +1,8 @@
1
1
  /*
2
+ @magma-design-system/design-tokens v12.0.1
2
3
  Generated by Style Dictionary
3
4
  Do not edit directly
4
- Generated at Mon, 13 Nov 2023 16:09:49 GMT
5
+ Generated at Wed, 10 Jan 2024 07:59:02 GMT
5
6
  */
6
7
 
7
8
  :root {
package/dist/css/colors-hex-label.css CHANGED
@@ -1,7 +1,8 @@
1
1
  /*
2
+ @magma-design-system/design-tokens v12.0.1
2
3
  Generated by Style Dictionary
3
4
  Do not edit directly
4
- Generated at Mon, 13 Nov 2023 16:09:49 GMT
5
+ Generated at Wed, 10 Jan 2024 07:59:02 GMT
5
6
  */
6
7
 
7
8
  :root {
package/dist/css/colors-hex-status.css CHANGED
@@ -1,7 +1,8 @@
1
1
  /*
2
+ @magma-design-system/design-tokens v12.0.1
2
3
  Generated by Style Dictionary
3
4
  Do not edit directly
4
- Generated at Mon, 13 Nov 2023 16:09:49 GMT
5
+ Generated at Wed, 10 Jan 2024 07:59:02 GMT
5
6
  */
6
7
 
7
8
  :root {
package/dist/css/colors-hex-synbee-v1.css CHANGED
@@ -1,7 +1,8 @@
1
1
  /*
2
+ @magma-design-system/design-tokens v12.0.1
2
3
  Generated by Style Dictionary
3
4
  Do not edit directly
4
- Generated at Mon, 13 Nov 2023 16:09:49 GMT
5
+ Generated at Wed, 10 Jan 2024 07:59:02 GMT
5
6
  */
6
7
 
7
8
  :root {
package/dist/css/colors-hex-tones.css CHANGED
@@ -1,7 +1,8 @@
1
1
  /*
2
+ @magma-design-system/design-tokens v12.0.1
2
3
  Generated by Style Dictionary
3
4
  Do not edit directly
4
- Generated at Mon, 13 Nov 2023 16:09:49 GMT
5
+ Generated at Wed, 10 Jan 2024 07:59:02 GMT
5
6
  */
6
7
 
7
8
  :root {
package/dist/css/colors-hex.css CHANGED
@@ -1,7 +1,8 @@
1
1
  /*
2
+ @magma-design-system/design-tokens v12.0.1
2
3
  Generated by Style Dictionary
3
4
  Do not edit directly
4
- Generated at Mon, 13 Nov 2023 16:09:49 GMT
5
+ Generated at Wed, 10 Jan 2024 07:59:02 GMT
5
6
  */
6
7
 
7
8
  :root {
package/dist/css/colors-rgb-brand-synbee.css CHANGED
@@ -1,7 +1,8 @@
1
1
  /*
2
+ @magma-design-system/design-tokens v12.0.1
2
3
  Generated by Style Dictionary
3
4
  Do not edit directly
4
- Generated at Mon, 13 Nov 2023 16:09:49 GMT
5
+ Generated at Wed, 10 Jan 2024 07:59:02 GMT
5
6
  */
6
7
 
7
8
  :root {
package/dist/css/colors-rgb-brand.css CHANGED
@@ -1,7 +1,8 @@
1
1
  /*
2
+ @magma-design-system/design-tokens v12.0.1
2
3
  Generated by Style Dictionary
3
4
  Do not edit directly
4
- Generated at Mon, 13 Nov 2023 16:09:49 GMT
5
+ Generated at Wed, 10 Jan 2024 07:59:02 GMT
5
6
  */
6
7
 
7
8
  :root {
package/dist/css/colors-rgb-default.css CHANGED
@@ -1,7 +1,8 @@
1
1
  /*
2
+ @magma-design-system/design-tokens v12.0.1
2
3
  Generated by Style Dictionary
3
4
  Do not edit directly
4
- Generated at Mon, 13 Nov 2023 16:09:49 GMT
5
+ Generated at Wed, 10 Jan 2024 07:59:02 GMT
5
6
  */
6
7
 
7
8
  :root {
package/dist/css/colors-rgb-label.css CHANGED
@@ -1,7 +1,8 @@
1
1
  /*
2
+ @magma-design-system/design-tokens v12.0.1
2
3
  Generated by Style Dictionary
3
4
  Do not edit directly
4
- Generated at Mon, 13 Nov 2023 16:09:49 GMT
5
+ Generated at Wed, 10 Jan 2024 07:59:02 GMT
5
6
  */
6
7
 
7
8
  :root {
package/dist/css/colors-rgb-status.css CHANGED
@@ -1,7 +1,8 @@
1
1
  /*
2
+ @magma-design-system/design-tokens v12.0.1
2
3
  Generated by Style Dictionary
3
4
  Do not edit directly
4
- Generated at Mon, 13 Nov 2023 16:09:49 GMT
5
+ Generated at Wed, 10 Jan 2024 07:59:02 GMT
5
6
  */
6
7
 
7
8
  :root {
package/dist/css/colors-rgb-synbee-v1.css CHANGED
@@ -1,7 +1,8 @@
1
1
  /*
2
+ @magma-design-system/design-tokens v12.0.1
2
3
  Generated by Style Dictionary
3
4
  Do not edit directly
4
- Generated at Mon, 13 Nov 2023 16:09:49 GMT
5
+ Generated at Wed, 10 Jan 2024 07:59:02 GMT
5
6
  */
6
7
 
7
8
  :root {
package/dist/css/colors-rgb-tones.css CHANGED
@@ -1,7 +1,8 @@
1
1
  /*
2
+ @magma-design-system/design-tokens v12.0.1
2
3
  Generated by Style Dictionary
3
4
  Do not edit directly
4
- Generated at Mon, 13 Nov 2023 16:09:49 GMT
5
+ Generated at Wed, 10 Jan 2024 07:59:02 GMT
5
6
  */
6
7
 
7
8
  :root {
package/dist/css/colors-rgb.css CHANGED
@@ -1,7 +1,8 @@
1
1
  /*
2
+ @magma-design-system/design-tokens v12.0.1
2
3
  Generated by Style Dictionary
3
4
  Do not edit directly
4
- Generated at Mon, 13 Nov 2023 16:09:49 GMT
5
+ Generated at Wed, 10 Jan 2024 07:59:02 GMT
5
6
  */
6
7
 
7
8
  :root {
package/dist/css/reset.css CHANGED
@@ -1,98 +1,102 @@
1
- *, ::before, ::after {
2
- --tw-border-spacing-x: 0;
3
- --tw-border-spacing-y: 0;
4
- --tw-translate-x: 0;
5
- --tw-translate-y: 0;
6
- --tw-rotate: 0;
7
- --tw-skew-x: 0;
8
- --tw-skew-y: 0;
9
- --tw-scale-x: 1;
10
- --tw-scale-y: 1;
11
- --tw-pan-x: ;
12
- --tw-pan-y: ;
13
- --tw-pinch-zoom: ;
14
- --tw-scroll-snap-strictness: proximity;
15
- --tw-gradient-from-position: ;
16
- --tw-gradient-via-position: ;
17
- --tw-gradient-to-position: ;
18
- --tw-ordinal: ;
19
- --tw-slashed-zero: ;
20
- --tw-numeric-figure: ;
21
- --tw-numeric-spacing: ;
22
- --tw-numeric-fraction: ;
23
- --tw-ring-inset: ;
24
- --tw-ring-offset-width: 0px;
25
- --tw-ring-offset-color: #fff;
26
- --tw-ring-color: rgb(59 130 246 / 0.5);
27
- --tw-ring-offset-shadow: 0 0 #0000;
28
- --tw-ring-shadow: 0 0 #0000;
29
- --tw-shadow: 0 0 #0000;
30
- --tw-shadow-colored: 0 0 #0000;
31
- --tw-blur: ;
32
- --tw-brightness: ;
33
- --tw-contrast: ;
34
- --tw-grayscale: ;
35
- --tw-hue-rotate: ;
36
- --tw-invert: ;
37
- --tw-saturate: ;
38
- --tw-sepia: ;
39
- --tw-drop-shadow: ;
40
- --tw-backdrop-blur: ;
41
- --tw-backdrop-brightness: ;
42
- --tw-backdrop-contrast: ;
43
- --tw-backdrop-grayscale: ;
44
- --tw-backdrop-hue-rotate: ;
45
- --tw-backdrop-invert: ;
46
- --tw-backdrop-opacity: ;
47
- --tw-backdrop-saturate: ;
48
- --tw-backdrop-sepia:
1
+ html {
2
+ color-scheme: dark light;
3
+ hanging-punctuation: first last;
49
4
  }
50
- ::backdrop {
51
- --tw-border-spacing-x: 0;
52
- --tw-border-spacing-y: 0;
53
- --tw-translate-x: 0;
54
- --tw-translate-y: 0;
55
- --tw-rotate: 0;
56
- --tw-skew-x: 0;
57
- --tw-skew-y: 0;
58
- --tw-scale-x: 1;
59
- --tw-scale-y: 1;
60
- --tw-pan-x: ;
61
- --tw-pan-y: ;
62
- --tw-pinch-zoom: ;
63
- --tw-scroll-snap-strictness: proximity;
64
- --tw-gradient-from-position: ;
65
- --tw-gradient-via-position: ;
66
- --tw-gradient-to-position: ;
67
- --tw-ordinal: ;
68
- --tw-slashed-zero: ;
69
- --tw-numeric-figure: ;
70
- --tw-numeric-spacing: ;
71
- --tw-numeric-fraction: ;
72
- --tw-ring-inset: ;
73
- --tw-ring-offset-width: 0px;
74
- --tw-ring-offset-color: #fff;
75
- --tw-ring-color: rgb(59 130 246 / 0.5);
76
- --tw-ring-offset-shadow: 0 0 #0000;
77
- --tw-ring-shadow: 0 0 #0000;
78
- --tw-shadow: 0 0 #0000;
79
- --tw-shadow-colored: 0 0 #0000;
80
- --tw-blur: ;
81
- --tw-brightness: ;
82
- --tw-contrast: ;
83
- --tw-grayscale: ;
84
- --tw-hue-rotate: ;
85
- --tw-invert: ;
86
- --tw-saturate: ;
87
- --tw-sepia: ;
88
- --tw-drop-shadow: ;
89
- --tw-backdrop-blur: ;
90
- --tw-backdrop-brightness: ;
91
- --tw-backdrop-contrast: ;
92
- --tw-backdrop-grayscale: ;
93
- --tw-backdrop-hue-rotate: ;
94
- --tw-backdrop-invert: ;
95
- --tw-backdrop-opacity: ;
96
- --tw-backdrop-saturate: ;
97
- --tw-backdrop-sepia:
5
+
6
+ *,
7
+ *::before,
8
+ *::after {
9
+ box-sizing: border-box;
10
+ }
11
+
12
+ body,
13
+ html {
14
+ margin: 0;
15
+ }
16
+
17
+ body {
18
+ -moz-osx-font-smoothing: grayscale;
19
+ -webkit-font-smoothing: antialiased;
20
+ min-height: 100svh;
21
+ -webkit-tap-highlight-color: transparent;
22
+ text-rendering: optimizelegibility;
23
+ -webkit-text-size-adjust: 100%;
24
+ -moz-text-size-adjust: 100%;
25
+ text-size-adjust: 100%;
26
+ }
27
+
28
+ input,
29
+ textarea {
30
+ -webkit-appearance: none;
31
+ -moz-appearance: none;
32
+ appearance: none;
33
+ font-family: inherit;
34
+ }
35
+
36
+ a {
37
+ font-family: inherit;
38
+ font-size: inherit;
39
+ font-weight: inherit;
40
+ }
41
+
42
+ a,
43
+ aside,
44
+ body,
45
+ code,
46
+ div,
47
+ datalist,
48
+ footer,
49
+ form,
50
+ h1,
51
+ h2,
52
+ h3,
53
+ h4,
54
+ h5,
55
+ h6,
56
+ header,
57
+ hr,
58
+ html,
59
+ input,
60
+ li,
61
+ main,
62
+ section,
63
+ span,
64
+ ul,
65
+ textarea {
66
+ box-sizing: border-box;
67
+ }
68
+
69
+ h1,
70
+ h2,
71
+ h3,
72
+ h4,
73
+ h5,
74
+ h6 {
75
+ margin: 0;
76
+ max-width: 30ch;
77
+ text-wrap: balance;
78
+ }
79
+
80
+ p {
81
+ margin: 0;
82
+ max-width: 75ch;
83
+ text-wrap: pretty;
84
+ }
85
+
86
+ img,
87
+ picture,
88
+ svg,
89
+ video {
90
+ display: block;
91
+ max-width: 100%;
92
+ }
93
+
94
+ @media (prefers-reduced-motion: no-preference) {
95
+ html {
96
+ scroll-behavior: smooth;
97
+ }
98
+
99
+ :has(:target) {
100
+ scroll-behavior: smooth;
101
+ }
98
102
  }
package/dist/css/typography.css CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
2
  .typography-title-h1 {
3
- font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
4
- font-size: 48px;
3
+ font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
4
+ font-size: 3rem;
5
5
  line-height: 3rem;
6
6
  letter-spacing: -0.025em;
7
7
  font-weight: 900;
@@ -9,8 +9,8 @@
9
9
  -moz-osx-font-smoothing: grayscale
10
10
  }
11
11
  .typography-title-h2 {
12
- font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
13
- font-size: 36px;
12
+ font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
13
+ font-size: 2.25rem;
14
14
  line-height: 2.5rem;
15
15
  letter-spacing: -0.025em;
16
16
  font-weight: 900;
@@ -18,8 +18,8 @@
18
18
  -moz-osx-font-smoothing: grayscale
19
19
  }
20
20
  .typography-title-h3 {
21
- font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
22
- font-size: 30px;
21
+ font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
22
+ font-size: 1.875rem;
23
23
  line-height: 2.25rem;
24
24
  letter-spacing: -0.025em;
25
25
  font-weight: 900;
@@ -27,8 +27,8 @@
27
27
  -moz-osx-font-smoothing: grayscale
28
28
  }
29
29
  .typography-title-h4 {
30
- font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
31
- font-size: 24px;
30
+ font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
31
+ font-size: 1.5rem;
32
32
  line-height: 2rem;
33
33
  letter-spacing: -0.025em;
34
34
  font-weight: 700;
@@ -36,8 +36,8 @@
36
36
  -moz-osx-font-smoothing: grayscale
37
37
  }
38
38
  .typography-title-h5 {
39
- font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
40
- font-size: 20px;
39
+ font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
40
+ font-size: 1.25rem;
41
41
  line-height: 1.75rem;
42
42
  letter-spacing: -0.025em;
43
43
  font-weight: 700;
@@ -45,8 +45,8 @@
45
45
  -moz-osx-font-smoothing: grayscale
46
46
  }
47
47
  .typography-title-h6 {
48
- font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
49
- font-size: 16px;
48
+ font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
49
+ font-size: 1rem;
50
50
  line-height: 1.5rem;
51
51
  letter-spacing: -0.025em;
52
52
  font-weight: 700;
@@ -54,37 +54,37 @@
54
54
  -moz-osx-font-smoothing: grayscale
55
55
  }
56
56
  .typography-title-action {
57
- font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
58
- font-size: 14px;
57
+ font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
58
+ font-size: 0.875rem;
59
59
  line-height: 1.5rem;
60
60
  font-weight: 500;
61
61
  -webkit-font-smoothing: antialiased;
62
62
  -moz-osx-font-smoothing: grayscale
63
63
  }
64
64
  .typography-info-paragraph {
65
- font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
66
- font-size: 20px;
65
+ font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
66
+ font-size: 1.25rem;
67
67
  line-height: 2rem;
68
68
  -webkit-font-smoothing: antialiased;
69
69
  -moz-osx-font-smoothing: grayscale
70
70
  }
71
71
  .typography-info-detail {
72
- font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
73
- font-size: 16px;
72
+ font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
73
+ font-size: 1rem;
74
74
  line-height: 1.5rem;
75
75
  -webkit-font-smoothing: antialiased;
76
76
  -moz-osx-font-smoothing: grayscale
77
77
  }
78
78
  .typography-info-caption {
79
- font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
80
- font-size: 14px;
79
+ font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
80
+ font-size: 0.875rem;
81
81
  line-height: 1.25rem;
82
82
  -webkit-font-smoothing: antialiased;
83
83
  -moz-osx-font-smoothing: grayscale
84
84
  }
85
85
  .typography-info-label {
86
- font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
87
- font-size: 12px;
86
+ font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
87
+ font-size: 0.75rem;
88
88
  line-height: 1rem;
89
89
  font-weight: 700;
90
90
  text-transform: uppercase;
@@ -92,8 +92,8 @@
92
92
  -moz-osx-font-smoothing: grayscale
93
93
  }
94
94
  .typography-info-option {
95
- font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
96
- font-size: 10px;
95
+ font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
96
+ font-size: 0.625rem;
97
97
  line-height: 0.625rem;
98
98
  letter-spacing: -0.025em;
99
99
  font-weight: 700;
@@ -102,15 +102,15 @@
102
102
  -moz-osx-font-smoothing: grayscale
103
103
  }
104
104
  .typography-info-tip {
105
- font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
106
- font-size: 12px;
105
+ font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
106
+ font-size: 0.75rem;
107
107
  line-height: 1rem;
108
108
  -webkit-font-smoothing: antialiased;
109
109
  -moz-osx-font-smoothing: grayscale
110
110
  }
111
111
  .typography-read-paragraph {
112
112
  font-family: 'Merriweather', Times, 'Times New Roman', serif;
113
- font-size: 20px;
113
+ font-size: 1.25rem;
114
114
  line-height: 2rem;
115
115
  font-weight: 300;
116
116
  -webkit-font-smoothing: antialiased;
@@ -118,7 +118,7 @@
118
118
  }
119
119
  .typography-read-detail {
120
120
  font-family: 'Merriweather', Times, 'Times New Roman', serif;
121
- font-size: 16px;
121
+ font-size: 1rem;
122
122
  line-height: 1.5rem;
123
123
  font-weight: 300;
124
124
  -webkit-font-smoothing: antialiased;
@@ -126,21 +126,21 @@
126
126
  }
127
127
  .typography-read-caption {
128
128
  font-family: 'Merriweather', Times, 'Times New Roman', serif;
129
- font-size: 14px;
129
+ font-size: 0.875rem;
130
130
  line-height: 1.25rem;
131
131
  -webkit-font-smoothing: antialiased;
132
132
  -moz-osx-font-smoothing: grayscale
133
133
  }
134
134
  .typography-code-snippet {
135
- font-family: 'Roboto Mono', monospace;
136
- font-size: 16px;
135
+ font-family: 'Roboto Mono', 'Courier New', monospace;
136
+ font-size: 1rem;
137
137
  line-height: 1.5rem;
138
138
  -webkit-font-smoothing: antialiased;
139
139
  -moz-osx-font-smoothing: grayscale
140
140
  }
141
141
  .typography-code-hack {
142
- font-family: 'Roboto Mono', monospace;
143
- font-size: 14px;
142
+ font-family: 'Roboto Mono', 'Courier New', monospace;
143
+ font-size: 0.875rem;
144
144
  line-height: 1.25rem;
145
145
  -webkit-font-smoothing: antialiased;
146
146
  -moz-osx-font-smoothing: grayscale
package/dist/tailwind/base.css CHANGED
@@ -1,28 +1,9 @@
1
- html {
2
- scroll-behavior: smooth;
3
- }
4
-
5
- * {
6
- box-sizing: border-box;
7
- }
8
-
9
- body,
10
- html {
11
- @apply m-0;
12
- }
13
-
14
1
  body {
15
2
  @apply
16
- antialiased
17
3
  font-info
18
- text-info-detail
19
- text-theme-default-03-secondary-text;
4
+ text-info-detail;
20
5
 
21
- -moz-osx-font-smoothing: grayscale;
22
- -webkit-font-smoothing: antialiased;
23
- -webkit-tap-highlight-color: transparent;
24
- text-rendering: optimizelegibility;
25
- text-size-adjust: 100%;
6
+ color: rgb(var(--theme-default-03-secondary-text, theme('colors.theme-default-03-secondary-text')));
26
7
  }
27
8
 
28
9
  ::selection {
@@ -36,13 +17,6 @@ select {
36
17
  @apply text-title-action;
37
18
  }
38
19
 
39
- input,
40
- textarea {
41
- @apply appearance-none;
42
-
43
- font-family: inherit;
44
- }
45
-
46
20
  b,
47
21
  strong {
48
22
  @apply
@@ -51,46 +25,18 @@ strong {
51
25
  }
52
26
 
53
27
  a {
54
- @apply text-theme-default-02-primary-text;
55
-
56
- font-family: inherit;
57
- font-size: inherit;
58
- font-weight: inherit;
28
+ color: rgb(var(--theme-default-02-primary-text, theme('colors.theme-default-02-primary-text')));
59
29
  }
60
30
 
61
- a,
62
- aside,
63
- body,
64
- code,
65
- div,
66
- datalist,
67
- footer,
68
- form,
69
31
  h1,
70
32
  h2,
71
33
  h3,
72
34
  h4,
73
35
  h5,
74
- h6,
75
- header,
76
- hr,
77
- html,
78
- input,
79
- li,
80
- main,
81
- section,
82
- span,
83
- ul,
84
- textarea {
85
- @apply box-border;
36
+ h6 {
37
+ max-width: theme('spacing.title');
86
38
  }
87
39
 
88
- h1,
89
- h2,
90
- h3,
91
- h4,
92
- h5,
93
- h6,
94
40
  p {
95
- @apply m-0;
41
+ max-width: theme('spacing.text');
96
42
  }
package/dist/tailwind/reset.css ADDED
@@ -0,0 +1,98 @@
1
+ html {
2
+ color-scheme: dark light;
3
+ hanging-punctuation: first last;
4
+ }
5
+
6
+ *,
7
+ *::before,
8
+ *::after {
9
+ box-sizing: border-box;
10
+ }
11
+
12
+ body,
13
+ html {
14
+ margin: 0;
15
+ }
16
+
17
+ body {
18
+ -moz-osx-font-smoothing: grayscale;
19
+ -webkit-font-smoothing: antialiased;
20
+ min-height: 100svh;
21
+ -webkit-tap-highlight-color: transparent;
22
+ text-rendering: optimizelegibility;
23
+ text-size-adjust: 100%;
24
+ }
25
+
26
+ input,
27
+ textarea {
28
+ appearance: none;
29
+ font-family: inherit;
30
+ }
31
+
32
+ a {
33
+ font-family: inherit;
34
+ font-size: inherit;
35
+ font-weight: inherit;
36
+ }
37
+
38
+ a,
39
+ aside,
40
+ body,
41
+ code,
42
+ div,
43
+ datalist,
44
+ footer,
45
+ form,
46
+ h1,
47
+ h2,
48
+ h3,
49
+ h4,
50
+ h5,
51
+ h6,
52
+ header,
53
+ hr,
54
+ html,
55
+ input,
56
+ li,
57
+ main,
58
+ section,
59
+ span,
60
+ ul,
61
+ textarea {
62
+ box-sizing: border-box;
63
+ }
64
+
65
+ h1,
66
+ h2,
67
+ h3,
68
+ h4,
69
+ h5,
70
+ h6 {
71
+ margin: 0;
72
+ max-width: theme('spacing.title');
73
+ text-wrap: balance;
74
+ }
75
+
76
+ p {
77
+ margin: 0;
78
+ max-width: theme('spacing.text');
79
+ text-wrap: pretty;
80
+ }
81
+
82
+ img,
83
+ picture,
84
+ svg,
85
+ video {
86
+ display: block;
87
+ max-width: 100%;
88
+ }
89
+
90
+ @media (prefers-reduced-motion: no-preference) {
91
+ html {
92
+ scroll-behavior: smooth;
93
+ }
94
+
95
+ :has(:target) {
96
+ scroll-behavior: smooth;
97
+ }
98
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@maggioli-design-system/styles",
3
- "version": "13.0.1",
3
+ "version": "14.1.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,18 +41,18 @@
41
41
  ],
42
42
  "license": "ISC",
43
43
  "dependencies": {
44
- "@fontsource/karla": "5.0.16",
44
+ "@fontsource/karla": "5.0.18",
45
45
  "@fontsource/merriweather": "5.0.8",
46
46
  "@fontsource/roboto": "5.0.8",
47
- "@fontsource/roboto-mono": "5.0.14",
48
- "@maggioli-design-system/design-tokens": "11.0.1",
47
+ "@fontsource/roboto-mono": "5.0.16",
48
+ "@maggioli-design-system/design-tokens": "12.0.1",
49
49
  "normalize.css": "8.0.1"
50
50
  },
51
51
  "devDependencies": {
52
52
  "autoprefixer": "10.4.16",
53
- "postcss-cli": "10.1.0",
54
- "postcss": "8.4.31",
55
- "postcss-import": "15.1.0",
56
- "tailwindcss": "3.3.3"
53
+ "postcss-cli": "11.0.0",
54
+ "postcss": "8.4.33",
55
+ "postcss-import": "16.0.0",
56
+ "tailwindcss": "3.4.1"
57
57
  }
58
58
  }
package/tailwind.config.js CHANGED
@@ -1,49 +1,24 @@
1
1
  /* eslint-disable @typescript-eslint/no-var-requires */
2
2
  const { palette } = require('@maggioli-design-system/design-tokens')
3
- const mediaQueries = require('@maggioli-design-system/design-tokens/dist/js/media').media
4
- const { fontFamily } = require('@maggioli-design-system/design-tokens/dist/js/tailwind-font-family')
5
- const { fontSize } = require('@maggioli-design-system/design-tokens/dist/js/tailwind-font-size')
6
- const { ease } = require('@maggioli-design-system/design-tokens/dist/js/ease')
7
- const { gap } = require('@maggioli-design-system/design-tokens/dist/js/gap')
3
+ const { fontFamily } = require('@maggioli-design-system/design-tokens/dist/js/tailwind-font-family.js')
4
+ const fontSizeMagma = require('@maggioli-design-system/design-tokens/dist/js/tailwind-font-size.js').fontSize
5
+ const {
6
+ aspectRatio,
7
+ border,
8
+ borderRadius,
9
+ boxShadow,
10
+ fontSize,
11
+ gap,
12
+ gridTemplateColumns,
13
+ margin,
14
+ padding,
15
+ size,
16
+ timingFunction,
17
+ transitionProperty,
18
+ } = require('@maggioli-design-system/design-tokens/dist/js/tailwind-props.js').properties
8
19
 
9
- const minSize = {
10
- 4: '1rem',
11
- 5: '1.25rem',
12
- 6: '1.5rem',
13
- 7: '1.75rem',
14
- 8: '2rem',
15
- 9: '2.25rem',
16
- 10: '2.5rem',
17
- 11: '2.75rem',
18
- 12: '3rem',
19
- 14: '3.5rem',
20
- 16: '4rem',
21
- 18: '4.5rem',
22
- 20: '5rem',
23
- 24: '6rem',
24
- 28: '7rem',
25
- 32: '8rem',
26
- 36: '9rem',
27
- 40: '10rem',
28
- 44: '11rem',
29
- 48: '12rem',
30
- 52: '13rem',
31
- 56: '14rem',
32
- 60: '15rem',
33
- 64: '16rem',
34
- 72: '18rem',
35
- 80: '20rem',
36
- 96: '24rem',
37
- 400: '400px',
38
- 500: '500px',
39
- 600: '600px',
40
- 700: '700px',
41
- 800: '800px',
42
- }
43
-
44
- const paddingAndMargin = {
45
- 13: '3.25rem',
46
- }
20
+ const { screens } = require('@maggioli-design-system/design-tokens/dist/js/tailwind-screens.js')
21
+ const { leading } = require('@maggioli-design-system/design-tokens/dist/js/tailwind-leading.js')
47
22
 
48
23
  module.exports = {
49
24
  important: true,
@@ -64,19 +39,31 @@ module.exports = {
64
39
  fontFamily: {
65
40
  ...fontFamily,
66
41
  },
42
+ lineHeight: {
43
+ ...leading,
44
+ },
67
45
  screens: {
68
- ...mediaQueries,
46
+ ...screens,
47
+ },
48
+ spacing: {
49
+ ...size,
69
50
  },
70
51
  extend: {
52
+ aspectRatio: {
53
+ ...aspectRatio,
54
+ },
55
+ borderRadius: {
56
+ ...borderRadius,
57
+ },
58
+ borderWidth: {
59
+ ...border,
60
+ },
71
61
  boxShadow: {
72
- 'sharp-lg': '0 0 1px 1px rgb(0 0 0 / 0.06), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05)',
73
- 'sharp-md': '0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06)',
74
- sharp: '0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1)',
75
- 'sharp-sm': '0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05)',
62
+ ...boxShadow,
76
63
  },
77
64
  fontSize: {
65
+ ...fontSizeMagma,
78
66
  ...fontSize,
79
- xxs: '0.625rem',
80
67
  },
81
68
  gap: {
82
69
  ...gap,
@@ -85,52 +72,28 @@ module.exports = {
85
72
  1: '1fr',
86
73
  },
87
74
  gridTemplateColumns: {
88
- 'fit-lg': 'repeat(auto-fit, minmax(17.5rem, 1fr))',
89
- 'fit-md': 'repeat(auto-fit, minmax(15rem, 1fr))',
90
- 'fit-sm': 'repeat(auto-fit, minmax(10rem, 1fr))',
91
- 'fit-xl': 'repeat(auto-fit, minmax(20rem, 1fr))',
92
- fit: 'repeat(auto-fit, minmax(12.5rem, 1fr))',
93
- full: 'repeat(auto-fit, minmax(1px, 100%))',
94
- },
95
- maxWidth: {
96
- '1/4': '25%',
97
- '1/2': '50%',
98
- '3/4': '75%',
99
- 1: '1rem',
100
- 2: '2rem',
101
- 3: '3rem',
102
- 4: '4rem',
103
- 5: '5rem',
104
- 6: '6rem',
105
- 7: '7rem',
106
- 8: '8rem',
107
- 9: '9rem',
108
- 10: '10rem',
109
- 11: '11rem',
110
- 12: '12rem',
111
- phrase: '50ch',
112
- text: '75ch',
113
- title: '30ch',
75
+ ...gridTemplateColumns,
114
76
  },
115
77
  height: {
116
- 13: '3.25rem',
78
+ ...size,
79
+ },
80
+ maxHeight: {
81
+ ...size,
82
+ },
83
+ maxWidth: {
84
+ ...size,
117
85
  },
118
86
  minHeight: {
119
- ...minSize,
87
+ ...size,
120
88
  },
121
89
  minWidth: {
122
- ...minSize,
123
- },
124
- padding: {
125
- '1/1': '100%',
126
- '16/9': '56.25%',
127
- '3/2': '66.67%',
128
- '4/3': '75%',
129
- '5/4': '80%',
130
- ...paddingAndMargin,
90
+ ...size,
131
91
  },
132
92
  margin: {
133
- ...paddingAndMargin,
93
+ ...margin,
94
+ },
95
+ padding: {
96
+ ...padding,
134
97
  },
135
98
  overflow: {
136
99
  inherit: 'inherit',
@@ -138,17 +101,14 @@ module.exports = {
138
101
  textOverflow: {
139
102
  inherit: 'inherit',
140
103
  },
141
- transitionProperty : {
142
- cosmetic: 'background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width',
143
- size: 'height, margin, padding, width',
104
+ transitionProperty: {
105
+ ...transitionProperty,
144
106
  },
145
107
  transitionTimingFunction: {
146
- ...ease,
108
+ ...timingFunction,
147
109
  },
148
110
  width: {
149
- phrase: '50ch',
150
- text: '75ch',
151
- title: '30ch',
111
+ ...size,
152
112
  },
153
113
  },
154
114
  },