@maggioli-design-system/styles 14.0.0 → 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 (22) hide show
  1. package/dist/css/base.css +25 -65
  2. package/dist/css/colors-hex-brand-synbee.css +2 -2
  3. package/dist/css/colors-hex-brand.css +2 -2
  4. package/dist/css/colors-hex-default.css +2 -2
  5. package/dist/css/colors-hex-label.css +2 -2
  6. package/dist/css/colors-hex-status.css +2 -2
  7. package/dist/css/colors-hex-synbee-v1.css +2 -2
  8. package/dist/css/colors-hex-tones.css +2 -2
  9. package/dist/css/colors-hex.css +2 -2
  10. package/dist/css/colors-rgb-brand-synbee.css +2 -2
  11. package/dist/css/colors-rgb-brand.css +2 -2
  12. package/dist/css/colors-rgb-default.css +2 -2
  13. package/dist/css/colors-rgb-label.css +2 -2
  14. package/dist/css/colors-rgb-status.css +2 -2
  15. package/dist/css/colors-rgb-synbee-v1.css +2 -2
  16. package/dist/css/colors-rgb-tones.css +2 -2
  17. package/dist/css/colors-rgb.css +2 -2
  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
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: 0rem;
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: 0rem;
58
+ p {
59
+ max-width: 75ch;
100
60
  }
package/dist/css/colors-hex-brand-synbee.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /*
2
- @magma-design-system/design-tokens v12.0.0
2
+ @magma-design-system/design-tokens v12.0.1
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Wed, 20 Dec 2023 08:18:48 GMT
5
+ Generated at Wed, 10 Jan 2024 07:59:02 GMT
6
6
  */
7
7
 
8
8
  :root {
package/dist/css/colors-hex-brand.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /*
2
- @magma-design-system/design-tokens v12.0.0
2
+ @magma-design-system/design-tokens v12.0.1
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Wed, 20 Dec 2023 08:18:48 GMT
5
+ Generated at Wed, 10 Jan 2024 07:59:02 GMT
6
6
  */
7
7
 
8
8
  :root {
package/dist/css/colors-hex-default.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /*
2
- @magma-design-system/design-tokens v12.0.0
2
+ @magma-design-system/design-tokens v12.0.1
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Wed, 20 Dec 2023 08:18:48 GMT
5
+ Generated at Wed, 10 Jan 2024 07:59:02 GMT
6
6
  */
7
7
 
8
8
  :root {
package/dist/css/colors-hex-label.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /*
2
- @magma-design-system/design-tokens v12.0.0
2
+ @magma-design-system/design-tokens v12.0.1
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Wed, 20 Dec 2023 08:18:48 GMT
5
+ Generated at Wed, 10 Jan 2024 07:59:02 GMT
6
6
  */
7
7
 
8
8
  :root {
package/dist/css/colors-hex-status.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /*
2
- @magma-design-system/design-tokens v12.0.0
2
+ @magma-design-system/design-tokens v12.0.1
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Wed, 20 Dec 2023 08:18:49 GMT
5
+ Generated at Wed, 10 Jan 2024 07:59:02 GMT
6
6
  */
7
7
 
8
8
  :root {
package/dist/css/colors-hex-synbee-v1.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /*
2
- @magma-design-system/design-tokens v12.0.0
2
+ @magma-design-system/design-tokens v12.0.1
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Wed, 20 Dec 2023 08:18:49 GMT
5
+ Generated at Wed, 10 Jan 2024 07:59:02 GMT
6
6
  */
7
7
 
8
8
  :root {
package/dist/css/colors-hex-tones.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /*
2
- @magma-design-system/design-tokens v12.0.0
2
+ @magma-design-system/design-tokens v12.0.1
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Wed, 20 Dec 2023 08:18:48 GMT
5
+ Generated at Wed, 10 Jan 2024 07:59:02 GMT
6
6
  */
7
7
 
8
8
  :root {
package/dist/css/colors-hex.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /*
2
- @magma-design-system/design-tokens v12.0.0
2
+ @magma-design-system/design-tokens v12.0.1
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Wed, 20 Dec 2023 08:18:48 GMT
5
+ Generated at Wed, 10 Jan 2024 07:59:02 GMT
6
6
  */
7
7
 
8
8
  :root {
package/dist/css/colors-rgb-brand-synbee.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /*
2
- @magma-design-system/design-tokens v12.0.0
2
+ @magma-design-system/design-tokens v12.0.1
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Wed, 20 Dec 2023 08:18:48 GMT
5
+ Generated at Wed, 10 Jan 2024 07:59:02 GMT
6
6
  */
7
7
 
8
8
  :root {
package/dist/css/colors-rgb-brand.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /*
2
- @magma-design-system/design-tokens v12.0.0
2
+ @magma-design-system/design-tokens v12.0.1
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Wed, 20 Dec 2023 08:18:48 GMT
5
+ Generated at Wed, 10 Jan 2024 07:59:02 GMT
6
6
  */
7
7
 
8
8
  :root {
package/dist/css/colors-rgb-default.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /*
2
- @magma-design-system/design-tokens v12.0.0
2
+ @magma-design-system/design-tokens v12.0.1
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Wed, 20 Dec 2023 08:18:48 GMT
5
+ Generated at Wed, 10 Jan 2024 07:59:02 GMT
6
6
  */
7
7
 
8
8
  :root {
package/dist/css/colors-rgb-label.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /*
2
- @magma-design-system/design-tokens v12.0.0
2
+ @magma-design-system/design-tokens v12.0.1
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Wed, 20 Dec 2023 08:18:48 GMT
5
+ Generated at Wed, 10 Jan 2024 07:59:02 GMT
6
6
  */
7
7
 
8
8
  :root {
package/dist/css/colors-rgb-status.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /*
2
- @magma-design-system/design-tokens v12.0.0
2
+ @magma-design-system/design-tokens v12.0.1
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Wed, 20 Dec 2023 08:18:49 GMT
5
+ Generated at Wed, 10 Jan 2024 07:59:02 GMT
6
6
  */
7
7
 
8
8
  :root {
package/dist/css/colors-rgb-synbee-v1.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /*
2
- @magma-design-system/design-tokens v12.0.0
2
+ @magma-design-system/design-tokens v12.0.1
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Wed, 20 Dec 2023 08:18:49 GMT
5
+ Generated at Wed, 10 Jan 2024 07:59:02 GMT
6
6
  */
7
7
 
8
8
  :root {
package/dist/css/colors-rgb-tones.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /*
2
- @magma-design-system/design-tokens v12.0.0
2
+ @magma-design-system/design-tokens v12.0.1
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Wed, 20 Dec 2023 08:18:48 GMT
5
+ Generated at Wed, 10 Jan 2024 07:59:02 GMT
6
6
  */
7
7
 
8
8
  :root {
package/dist/css/colors-rgb.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /*
2
- @magma-design-system/design-tokens v12.0.0
2
+ @magma-design-system/design-tokens v12.0.1
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Wed, 20 Dec 2023 08:18:48 GMT
5
+ Generated at Wed, 10 Jan 2024 07:59:02 GMT
6
6
  */
7
7
 
8
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": "14.0.0",
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": "12.0.0",
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
  }