@maggioli-design-system/styles 14.0.0 → 14.2.1

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 (25) hide show
  1. package/dist/css/animations.css +2 -2
  2. package/dist/css/base.css +29 -65
  3. package/dist/css/colors-hex-brand-synbee.css +2 -2
  4. package/dist/css/colors-hex-brand.css +2 -2
  5. package/dist/css/colors-hex-default.css +2 -2
  6. package/dist/css/colors-hex-label.css +2 -2
  7. package/dist/css/colors-hex-status.css +2 -2
  8. package/dist/css/colors-hex-synbee-v1.css +2 -2
  9. package/dist/css/colors-hex-tones.css +2 -2
  10. package/dist/css/colors-hex.css +2 -2
  11. package/dist/css/colors-rgb-brand-synbee.css +2 -2
  12. package/dist/css/colors-rgb-brand.css +2 -2
  13. package/dist/css/colors-rgb-default.css +2 -2
  14. package/dist/css/colors-rgb-label.css +2 -2
  15. package/dist/css/colors-rgb-status.css +2 -2
  16. package/dist/css/colors-rgb-synbee-v1.css +2 -2
  17. package/dist/css/colors-rgb-tones.css +2 -2
  18. package/dist/css/colors-rgb.css +2 -2
  19. package/dist/css/globals.css +1 -1
  20. package/dist/css/reset.css +102 -96
  21. package/dist/css/typography.css +51 -33
  22. package/dist/tailwind/base.css +6 -60
  23. package/dist/tailwind/reset.css +100 -0
  24. package/dist/tailwind/typography.css +18 -0
  25. package/package.json +8 -8
package/dist/css/animations.css CHANGED
@@ -1,9 +1,9 @@
1
1
  @keyframes focus-bounce {
2
2
  0%, 75%, 100% {
3
- outline-offset: var(--magma-outline-focus-offset);
3
+ outline-offset: var(--magma-outline-focus-offset, 6px);
4
4
  }
5
5
 
6
6
  50% {
7
- outline-offset: var(--magma-outline-blur-offset);
7
+ outline-offset: var(--magma-outline-blur-offset, 2px);
8
8
  }
9
9
  }
package/dist/css/base.css CHANGED
@@ -1,28 +1,19 @@
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
+ min-height: 1.5rem;
5
+
6
+ font-size: 1rem;
7
+
14
8
  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
9
 
19
- -moz-osx-font-smoothing: grayscale;
20
10
  -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%;
11
+
12
+ -moz-osx-font-smoothing: grayscale;
13
+
14
+ font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
15
+
16
+ color: rgb(var(--theme-default-03-secondary-text, rgb(var(--theme-default-03-secondary-text))));
26
17
  }
27
18
  ::-moz-selection {
28
19
  background-color: var(--magma-selection-background, rgb(var(--label-sky-09)));
@@ -35,66 +26,39 @@ body{
35
26
  button,
36
27
  optgroup,
37
28
  select{
38
- font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
39
- font-size: 14px;
29
+
30
+ min-height: 1.5rem;
31
+
32
+ font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
33
+
34
+ font-size: 0.875rem;
35
+
40
36
  line-height: 1.5rem;
37
+
41
38
  font-weight: 500;
39
+
42
40
  -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
41
 
51
- font-family: inherit;
42
+ -moz-osx-font-smoothing: grayscale;
52
43
  }
53
44
  b,
54
45
  strong{
46
+
55
47
  font-weight: 600;
48
+
56
49
  letter-spacing: -0.025em;
57
50
  }
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;
51
+ a {
52
+ color: rgb(var(--theme-default-02-primary-text, rgb(var(--theme-default-02-primary-text))));
65
53
  }
66
- a,
67
- aside,
68
- body,
69
- code,
70
- div,
71
- datalist,
72
- footer,
73
- form,
74
54
  h1,
75
55
  h2,
76
56
  h3,
77
57
  h4,
78
58
  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;
59
+ h6 {
60
+ max-width: 30ch;
91
61
  }
92
- h1,
93
- h2,
94
- h3,
95
- h4,
96
- h5,
97
- h6,
98
- p{
99
- margin: 0rem;
62
+ p {
63
+ max-width: 75ch;
100
64
  }
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 Fri, 09 Feb 2024 10:56:43 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 Fri, 09 Feb 2024 10:56:43 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 Fri, 09 Feb 2024 10:56:43 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 Fri, 09 Feb 2024 10:56:43 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 Fri, 09 Feb 2024 10:56:43 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 Fri, 09 Feb 2024 10:56:43 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 Fri, 09 Feb 2024 10:56:43 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 Fri, 09 Feb 2024 10:56:43 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 Fri, 09 Feb 2024 10:56:43 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 Fri, 09 Feb 2024 10:56:43 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 Fri, 09 Feb 2024 10:56:43 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 Fri, 09 Feb 2024 10:56:43 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 Fri, 09 Feb 2024 10:56:43 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 Fri, 09 Feb 2024 10:56:43 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 Fri, 09 Feb 2024 10:56:43 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 Fri, 09 Feb 2024 10:56:43 GMT
6
6
  */
7
7
 
8
8
  :root {
package/dist/css/globals.css CHANGED
@@ -14,7 +14,7 @@
14
14
  --magma-outline-blur-color: transparent;
15
15
  --magma-outline-blur: 2px solid var(--magma-outline-blur-color);
16
16
  --magma-outline-focus-offset: 2px;
17
- --magma-outline-focus-color: rgb(var(--tone-neutral-05));
17
+ --magma-outline-focus-color: rgb(var(--tone-neutral-04, 0 0 0));
18
18
  --magma-outline-focus: 2px solid var(--magma-outline-focus-color);
19
19
  --magma-overlay-blur: var(--magma-backdrop-blur);
20
20
  --magma-overlay-color: var(--magma-backdrop-color);
package/dist/css/reset.css CHANGED
@@ -1,98 +1,104 @@
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
+ min-width: 0;
11
+ overflow-wrap: anywhere;
12
+ }
13
+
14
+ body,
15
+ html {
16
+ margin: 0;
17
+ }
18
+
19
+ body {
20
+ -moz-osx-font-smoothing: grayscale;
21
+ -webkit-font-smoothing: antialiased;
22
+ min-height: 100svh;
23
+ -webkit-tap-highlight-color: transparent;
24
+ text-rendering: optimizelegibility;
25
+ -webkit-text-size-adjust: 100%;
26
+ -moz-text-size-adjust: 100%;
27
+ text-size-adjust: 100%;
28
+ }
29
+
30
+ input,
31
+ textarea {
32
+ -webkit-appearance: none;
33
+ -moz-appearance: none;
34
+ appearance: none;
35
+ font-family: inherit;
36
+ }
37
+
38
+ a {
39
+ font-family: inherit;
40
+ font-size: inherit;
41
+ font-weight: inherit;
42
+ }
43
+
44
+ a,
45
+ aside,
46
+ body,
47
+ code,
48
+ div,
49
+ datalist,
50
+ footer,
51
+ form,
52
+ h1,
53
+ h2,
54
+ h3,
55
+ h4,
56
+ h5,
57
+ h6,
58
+ header,
59
+ hr,
60
+ html,
61
+ input,
62
+ li,
63
+ main,
64
+ section,
65
+ span,
66
+ ul,
67
+ textarea {
68
+ box-sizing: border-box;
69
+ }
70
+
71
+ h1,
72
+ h2,
73
+ h3,
74
+ h4,
75
+ h5,
76
+ h6 {
77
+ margin: 0;
78
+ max-width: 30ch;
79
+ text-wrap: balance;
80
+ }
81
+
82
+ p {
83
+ margin: 0;
84
+ max-width: 75ch;
85
+ text-wrap: pretty;
86
+ }
87
+
88
+ img,
89
+ picture,
90
+ svg,
91
+ video {
92
+ display: block;
93
+ max-width: 100%;
94
+ }
95
+
96
+ @media (prefers-reduced-motion: no-preference) {
97
+ html {
98
+ scroll-behavior: smooth;
99
+ }
100
+
101
+ :has(:target) {
102
+ scroll-behavior: smooth;
103
+ }
98
104
  }
package/dist/css/typography.css CHANGED
@@ -1,7 +1,8 @@
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
+ min-height: 3rem;
4
+ font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
5
+ font-size: 3rem;
5
6
  line-height: 3rem;
6
7
  letter-spacing: -0.025em;
7
8
  font-weight: 900;
@@ -9,8 +10,9 @@
9
10
  -moz-osx-font-smoothing: grayscale
10
11
  }
11
12
  .typography-title-h2 {
12
- font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
13
- font-size: 36px;
13
+ min-height: 2.5rem;
14
+ font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
15
+ font-size: 2.25rem;
14
16
  line-height: 2.5rem;
15
17
  letter-spacing: -0.025em;
16
18
  font-weight: 900;
@@ -18,8 +20,9 @@
18
20
  -moz-osx-font-smoothing: grayscale
19
21
  }
20
22
  .typography-title-h3 {
21
- font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
22
- font-size: 30px;
23
+ min-height: 2.25rem;
24
+ font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
25
+ font-size: 1.875rem;
23
26
  line-height: 2.25rem;
24
27
  letter-spacing: -0.025em;
25
28
  font-weight: 900;
@@ -27,8 +30,9 @@
27
30
  -moz-osx-font-smoothing: grayscale
28
31
  }
29
32
  .typography-title-h4 {
30
- font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
31
- font-size: 24px;
33
+ min-height: 2rem;
34
+ font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
35
+ font-size: 1.5rem;
32
36
  line-height: 2rem;
33
37
  letter-spacing: -0.025em;
34
38
  font-weight: 700;
@@ -36,8 +40,9 @@
36
40
  -moz-osx-font-smoothing: grayscale
37
41
  }
38
42
  .typography-title-h5 {
39
- font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
40
- font-size: 20px;
43
+ min-height: 1.75rem;
44
+ font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
45
+ font-size: 1.25rem;
41
46
  line-height: 1.75rem;
42
47
  letter-spacing: -0.025em;
43
48
  font-weight: 700;
@@ -45,8 +50,9 @@
45
50
  -moz-osx-font-smoothing: grayscale
46
51
  }
47
52
  .typography-title-h6 {
48
- font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
49
- font-size: 16px;
53
+ min-height: 1.5rem;
54
+ font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
55
+ font-size: 1rem;
50
56
  line-height: 1.5rem;
51
57
  letter-spacing: -0.025em;
52
58
  font-weight: 700;
@@ -54,37 +60,42 @@
54
60
  -moz-osx-font-smoothing: grayscale
55
61
  }
56
62
  .typography-title-action {
57
- font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
58
- font-size: 14px;
63
+ min-height: 1.5rem;
64
+ font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
65
+ font-size: 0.875rem;
59
66
  line-height: 1.5rem;
60
67
  font-weight: 500;
61
68
  -webkit-font-smoothing: antialiased;
62
69
  -moz-osx-font-smoothing: grayscale
63
70
  }
64
71
  .typography-info-paragraph {
65
- font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
66
- font-size: 20px;
72
+ min-height: 2rem;
73
+ font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
74
+ font-size: 1.25rem;
67
75
  line-height: 2rem;
68
76
  -webkit-font-smoothing: antialiased;
69
77
  -moz-osx-font-smoothing: grayscale
70
78
  }
71
79
  .typography-info-detail {
72
- font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
73
- font-size: 16px;
80
+ min-height: 1.5rem;
81
+ font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
82
+ font-size: 1rem;
74
83
  line-height: 1.5rem;
75
84
  -webkit-font-smoothing: antialiased;
76
85
  -moz-osx-font-smoothing: grayscale
77
86
  }
78
87
  .typography-info-caption {
79
- font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
80
- font-size: 14px;
88
+ min-height: 1.25rem;
89
+ font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
90
+ font-size: 0.875rem;
81
91
  line-height: 1.25rem;
82
92
  -webkit-font-smoothing: antialiased;
83
93
  -moz-osx-font-smoothing: grayscale
84
94
  }
85
95
  .typography-info-label {
86
- font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
87
- font-size: 12px;
96
+ min-height: 1rem;
97
+ font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
98
+ font-size: 0.75rem;
88
99
  line-height: 1rem;
89
100
  font-weight: 700;
90
101
  text-transform: uppercase;
@@ -92,8 +103,9 @@
92
103
  -moz-osx-font-smoothing: grayscale
93
104
  }
94
105
  .typography-info-option {
95
- font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
96
- font-size: 10px;
106
+ min-height: 0.625rem;
107
+ font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
108
+ font-size: 0.625rem;
97
109
  line-height: 0.625rem;
98
110
  letter-spacing: -0.025em;
99
111
  font-weight: 700;
@@ -102,45 +114,51 @@
102
114
  -moz-osx-font-smoothing: grayscale
103
115
  }
104
116
  .typography-info-tip {
105
- font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
106
- font-size: 12px;
117
+ min-height: 1rem;
118
+ font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
119
+ font-size: 0.75rem;
107
120
  line-height: 1rem;
108
121
  -webkit-font-smoothing: antialiased;
109
122
  -moz-osx-font-smoothing: grayscale
110
123
  }
111
124
  .typography-read-paragraph {
125
+ min-height: 2rem;
112
126
  font-family: 'Merriweather', Times, 'Times New Roman', serif;
113
- font-size: 20px;
127
+ font-size: 1.25rem;
114
128
  line-height: 2rem;
115
129
  font-weight: 300;
116
130
  -webkit-font-smoothing: antialiased;
117
131
  -moz-osx-font-smoothing: grayscale
118
132
  }
119
133
  .typography-read-detail {
134
+ min-height: 1.5rem;
120
135
  font-family: 'Merriweather', Times, 'Times New Roman', serif;
121
- font-size: 16px;
136
+ font-size: 1rem;
122
137
  line-height: 1.5rem;
123
138
  font-weight: 300;
124
139
  -webkit-font-smoothing: antialiased;
125
140
  -moz-osx-font-smoothing: grayscale
126
141
  }
127
142
  .typography-read-caption {
143
+ min-height: 1.25rem;
128
144
  font-family: 'Merriweather', Times, 'Times New Roman', serif;
129
- font-size: 14px;
145
+ font-size: 0.875rem;
130
146
  line-height: 1.25rem;
131
147
  -webkit-font-smoothing: antialiased;
132
148
  -moz-osx-font-smoothing: grayscale
133
149
  }
134
150
  .typography-code-snippet {
135
- font-family: 'Roboto Mono', monospace;
136
- font-size: 16px;
151
+ min-height: 1.5rem;
152
+ font-family: 'Roboto Mono', 'Courier New', monospace;
153
+ font-size: 1rem;
137
154
  line-height: 1.5rem;
138
155
  -webkit-font-smoothing: antialiased;
139
156
  -moz-osx-font-smoothing: grayscale
140
157
  }
141
158
  .typography-code-hack {
142
- font-family: 'Roboto Mono', monospace;
143
- font-size: 14px;
159
+ min-height: 1.25rem;
160
+ font-family: 'Roboto Mono', 'Courier New', monospace;
161
+ font-size: 0.875rem;
144
162
  line-height: 1.25rem;
145
163
  -webkit-font-smoothing: antialiased;
146
164
  -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,100 @@
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
+ min-width: 0;
11
+ overflow-wrap: anywhere;
12
+ }
13
+
14
+ body,
15
+ html {
16
+ margin: 0;
17
+ }
18
+
19
+ body {
20
+ -moz-osx-font-smoothing: grayscale;
21
+ -webkit-font-smoothing: antialiased;
22
+ min-height: 100svh;
23
+ -webkit-tap-highlight-color: transparent;
24
+ text-rendering: optimizelegibility;
25
+ text-size-adjust: 100%;
26
+ }
27
+
28
+ input,
29
+ textarea {
30
+ appearance: none;
31
+ font-family: inherit;
32
+ }
33
+
34
+ a {
35
+ font-family: inherit;
36
+ font-size: inherit;
37
+ font-weight: inherit;
38
+ }
39
+
40
+ a,
41
+ aside,
42
+ body,
43
+ code,
44
+ div,
45
+ datalist,
46
+ footer,
47
+ form,
48
+ h1,
49
+ h2,
50
+ h3,
51
+ h4,
52
+ h5,
53
+ h6,
54
+ header,
55
+ hr,
56
+ html,
57
+ input,
58
+ li,
59
+ main,
60
+ section,
61
+ span,
62
+ ul,
63
+ textarea {
64
+ box-sizing: border-box;
65
+ }
66
+
67
+ h1,
68
+ h2,
69
+ h3,
70
+ h4,
71
+ h5,
72
+ h6 {
73
+ margin: 0;
74
+ max-width: theme('spacing.title');
75
+ text-wrap: balance;
76
+ }
77
+
78
+ p {
79
+ margin: 0;
80
+ max-width: theme('spacing.text');
81
+ text-wrap: pretty;
82
+ }
83
+
84
+ img,
85
+ picture,
86
+ svg,
87
+ video {
88
+ display: block;
89
+ max-width: 100%;
90
+ }
91
+
92
+ @media (prefers-reduced-motion: no-preference) {
93
+ html {
94
+ scroll-behavior: smooth;
95
+ }
96
+
97
+ :has(:target) {
98
+ scroll-behavior: smooth;
99
+ }
100
+ }
package/dist/tailwind/typography.css CHANGED
@@ -4,6 +4,7 @@
4
4
  antialiased
5
5
  font-black
6
6
  font-title
7
+ min-h-1200
7
8
  text-size-title-h1;
8
9
  }
9
10
 
@@ -12,6 +13,7 @@
12
13
  antialiased
13
14
  font-black
14
15
  font-title
16
+ min-h-1000
15
17
  text-size-title-h2;
16
18
  }
17
19
 
@@ -20,6 +22,7 @@
20
22
  antialiased
21
23
  font-black
22
24
  font-title
25
+ min-h-900
23
26
  text-size-title-h3;
24
27
  }
25
28
 
@@ -28,6 +31,7 @@
28
31
  antialiased
29
32
  font-bold
30
33
  font-title
34
+ min-h-800
31
35
  text-size-title-h4;
32
36
  }
33
37
 
@@ -36,6 +40,7 @@
36
40
  antialiased
37
41
  font-bold
38
42
  font-title
43
+ min-h-700
39
44
  text-size-title-h5;
40
45
  }
41
46
 
@@ -44,6 +49,7 @@
44
49
  antialiased
45
50
  font-bold
46
51
  font-title
52
+ min-h-600
47
53
  text-size-title-h6;
48
54
  }
49
55
 
@@ -52,6 +58,7 @@
52
58
  antialiased
53
59
  font-medium
54
60
  font-title
61
+ min-h-600
55
62
  text-size-title-action;
56
63
  }
57
64
 
@@ -59,6 +66,7 @@
59
66
  @apply
60
67
  antialiased
61
68
  font-info
69
+ min-h-800
62
70
  text-size-info-paragraph;
63
71
  }
64
72
 
@@ -66,6 +74,7 @@
66
74
  @apply
67
75
  antialiased
68
76
  font-info
77
+ min-h-600
69
78
  text-size-info-detail;
70
79
  }
71
80
 
@@ -73,6 +82,7 @@
73
82
  @apply
74
83
  antialiased
75
84
  font-info
85
+ min-h-500
76
86
  text-size-info-caption;
77
87
  }
78
88
 
@@ -81,6 +91,7 @@
81
91
  antialiased
82
92
  font-bold
83
93
  font-info
94
+ min-h-400
84
95
  text-size-info-label
85
96
  uppercase;
86
97
  }
@@ -90,6 +101,7 @@
90
101
  antialiased
91
102
  font-bold
92
103
  font-info
104
+ min-h-250
93
105
  text-size-info-option
94
106
  uppercase;
95
107
  }
@@ -98,6 +110,7 @@
98
110
  @apply
99
111
  antialiased
100
112
  font-info
113
+ min-h-400
101
114
  text-size-info-tip;
102
115
  }
103
116
 
@@ -106,6 +119,7 @@
106
119
  antialiased
107
120
  font-light
108
121
  font-read
122
+ min-h-800
109
123
  text-size-read-paragraph;
110
124
  }
111
125
 
@@ -114,6 +128,7 @@
114
128
  antialiased
115
129
  font-light
116
130
  font-read
131
+ min-h-600
117
132
  text-size-read-detail;
118
133
  }
119
134
 
@@ -121,6 +136,7 @@
121
136
  @apply
122
137
  antialiased
123
138
  font-read
139
+ min-h-500
124
140
  text-size-read-caption;
125
141
  }
126
142
 
@@ -128,6 +144,7 @@
128
144
  @apply
129
145
  antialiased
130
146
  font-code
147
+ min-h-600
131
148
  text-size-code-snippet;
132
149
  }
133
150
 
@@ -135,6 +152,7 @@
135
152
  @apply
136
153
  antialiased
137
154
  font-code
155
+ min-h-500
138
156
  text-size-code-hack;
139
157
  }
140
158
  }
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.2.1",
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
  }