@maggioli-design-system/styles 16.0.0 → 16.0.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 (21) hide show
  1. package/README.md +1 -1
  2. package/dist/css/colors-hex-brand-rnd.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-tones.css +2 -2
  8. package/dist/css/colors-hex.css +2 -2
  9. package/dist/css/colors-rgb-brand-rnd.css +2 -2
  10. package/dist/css/colors-rgb-brand.css +2 -2
  11. package/dist/css/colors-rgb-default.css +2 -2
  12. package/dist/css/colors-rgb-label.css +2 -2
  13. package/dist/css/colors-rgb-status.css +2 -2
  14. package/dist/css/colors-rgb-tones.css +2 -2
  15. package/dist/css/colors-rgb.css +2 -2
  16. package/dist/css/tailwind-theme-color.css +2 -2
  17. package/dist/css/tailwind-theme-typography.css +2 -2
  18. package/dist/css/transitions.css +2 -2
  19. package/dist/css/typography.css +220 -253
  20. package/dist/css/utility-typography.css +254 -0
  21. package/package.json +3 -3
package/README.md CHANGED
@@ -210,11 +210,11 @@ The `dist` folder contains the following files:
210
210
  | `css` | both | `reset.css` |
211
211
  | `css` | plain css | `base.css` |
212
212
  | `css` | plain css | `colors-hex-*.css` |
213
+ | `css` | plain css | `utility-typography.css` |
213
214
  | `css` | plain css | `typography.css` |
214
215
  | `css` | tailwind or web components | `colors-rgb-*.css` |
215
216
  | `tailwind` | tailwind | `base.css` |
216
217
  | `tailwind` | tailwind components | `components.css` |
217
- | `tailwind` | tailwind typography components | `typography.css` |
218
218
 
219
219
  [mds]: https://magma.maggiolicloud.it/
220
220
  [fontsource-var-fonts]: https://fontsource.org/docs/variable-fonts
package/dist/css/colors-hex-brand-rnd.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /*
2
- @magma-design-system/design-tokens v14.0.0
2
+ @magma-design-system/design-tokens v14.1.0
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Mon, 08 Jun 2026 08:22:20 GMT
5
+ Generated at Mon, 08 Jun 2026 14:52:21 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 v14.0.0
2
+ @magma-design-system/design-tokens v14.1.0
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Mon, 08 Jun 2026 08:22:20 GMT
5
+ Generated at Mon, 08 Jun 2026 14:52:21 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 v14.0.0
2
+ @magma-design-system/design-tokens v14.1.0
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Mon, 08 Jun 2026 08:22:20 GMT
5
+ Generated at Mon, 08 Jun 2026 14:52:21 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 v14.0.0
2
+ @magma-design-system/design-tokens v14.1.0
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Mon, 08 Jun 2026 08:22:20 GMT
5
+ Generated at Mon, 08 Jun 2026 14:52:21 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 v14.0.0
2
+ @magma-design-system/design-tokens v14.1.0
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Mon, 08 Jun 2026 08:22:20 GMT
5
+ Generated at Mon, 08 Jun 2026 14:52:21 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 v14.0.0
2
+ @magma-design-system/design-tokens v14.1.0
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Mon, 08 Jun 2026 08:22:20 GMT
5
+ Generated at Mon, 08 Jun 2026 14:52:21 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 v14.0.0
2
+ @magma-design-system/design-tokens v14.1.0
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Mon, 08 Jun 2026 08:22:20 GMT
5
+ Generated at Mon, 08 Jun 2026 14:52:21 GMT
6
6
  */
7
7
 
8
8
  :root {
package/dist/css/colors-rgb-brand-rnd.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /*
2
- @magma-design-system/design-tokens v14.0.0
2
+ @magma-design-system/design-tokens v14.1.0
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Mon, 08 Jun 2026 08:22:20 GMT
5
+ Generated at Mon, 08 Jun 2026 14:52:21 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 v14.0.0
2
+ @magma-design-system/design-tokens v14.1.0
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Mon, 08 Jun 2026 08:22:20 GMT
5
+ Generated at Mon, 08 Jun 2026 14:52:21 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 v14.0.0
2
+ @magma-design-system/design-tokens v14.1.0
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Mon, 08 Jun 2026 08:22:20 GMT
5
+ Generated at Mon, 08 Jun 2026 14:52:21 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 v14.0.0
2
+ @magma-design-system/design-tokens v14.1.0
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Mon, 08 Jun 2026 08:22:20 GMT
5
+ Generated at Mon, 08 Jun 2026 14:52:21 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 v14.0.0
2
+ @magma-design-system/design-tokens v14.1.0
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Mon, 08 Jun 2026 08:22:20 GMT
5
+ Generated at Mon, 08 Jun 2026 14:52:21 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 v14.0.0
2
+ @magma-design-system/design-tokens v14.1.0
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Mon, 08 Jun 2026 08:22:20 GMT
5
+ Generated at Mon, 08 Jun 2026 14:52:21 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 v14.0.0
2
+ @magma-design-system/design-tokens v14.1.0
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Mon, 08 Jun 2026 08:22:20 GMT
5
+ Generated at Mon, 08 Jun 2026 14:52:21 GMT
6
6
  */
7
7
 
8
8
  :root {
package/dist/css/tailwind-theme-color.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /*
2
- @magma-design-system/design-tokens v14.0.0
2
+ @magma-design-system/design-tokens v14.1.0
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Mon, 08 Jun 2026 08:22:20 GMT
5
+ Generated at Mon, 08 Jun 2026 14:52:21 GMT
6
6
  */
7
7
 
8
8
  @theme {
package/dist/css/tailwind-theme-typography.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /*
2
- @magma-design-system/design-tokens v14.0.0
2
+ @magma-design-system/design-tokens v14.1.0
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Mon, 08 Jun 2026 08:22:21 GMT
5
+ Generated at Mon, 08 Jun 2026 14:52:21 GMT
6
6
  */
7
7
 
8
8
  @theme {
package/dist/css/transitions.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /*
2
- @magma-design-system/design-tokens v14.0.0
2
+ @magma-design-system/design-tokens v14.1.0
3
3
  Generated by Style Dictionary
4
4
  Do not edit directly
5
- Generated at Mon, 08 Jun 2026 08:22:21 GMT
5
+ Generated at Mon, 08 Jun 2026 14:52:21 GMT
6
6
  */
7
7
 
8
8
  :root {
package/dist/css/typography.css CHANGED
@@ -1,254 +1,221 @@
1
- /*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
2
- @layer properties;
3
- @layer utilities {
4
- .focus-zoom {
5
- --tw-duration: 200ms;
6
- transition-duration: 200ms;
7
- --tw-ease: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
8
- transition-timing-function: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
9
- outline: var(--magma-outline-blur);
10
- outline-offset: var(--magma-outline-blur-offset);
11
- transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;
12
- }
13
- .focus-zoom--focused,
14
- .focus-zoom:focus-visible {
15
- --magma-outline-blur-offset: var(--magma-outline-focus-offset);
16
- --magma-outline-blur: var(--magma-outline-focus);
17
- }
18
- .focus-zoom--light.focus-zoom--focused,
19
- .focus-zoom--light:focus-visible {
20
- --magma-outline-blur: 2px solid rgb(var(--tone-neutral));
21
- }
22
- }
23
- .typography-title-h1 {
24
- min-height: auto;
25
- text-box: trim-both text;
26
- font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
27
- font-size: var(--text-size-title-h1, 3rem);
28
- line-height: var(--tw-leading, var(--text-size-title-h1--line-height, 3rem));
29
- letter-spacing: var(--tw-tracking, var(--text-size-title-h1--letter-spacing, -0.025em));
30
- font-weight: var(--tw-font-weight, var(--text-size-title-h1--font-weight, 900));
31
- --tw-font-weight: var(--font-weight-black, 900);
32
- font-weight: var(--font-weight-black, 900);
33
- -webkit-font-smoothing: antialiased;
34
- -moz-osx-font-smoothing: grayscale;
35
- }
36
- .typography-title-h2 {
37
- min-height: auto;
38
- text-box: trim-both text;
39
- font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
40
- font-size: var(--text-size-title-h2, 2.25rem);
41
- line-height: var(--tw-leading, var(--text-size-title-h2--line-height, 2.5rem));
42
- letter-spacing: var(--tw-tracking, var(--text-size-title-h2--letter-spacing, -0.025em));
43
- font-weight: var(--tw-font-weight, var(--text-size-title-h2--font-weight, 900));
44
- --tw-font-weight: var(--font-weight-black, 900);
45
- font-weight: var(--font-weight-black, 900);
46
- -webkit-font-smoothing: antialiased;
47
- -moz-osx-font-smoothing: grayscale;
48
- }
49
- .typography-title-h3 {
50
- min-height: auto;
51
- text-box: trim-both text;
52
- font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
53
- font-size: var(--text-size-title-h3, 1.875rem);
54
- line-height: var(--tw-leading, var(--text-size-title-h3--line-height, 2.25rem));
55
- letter-spacing: var(--tw-tracking, var(--text-size-title-h3--letter-spacing, -0.025em));
56
- font-weight: var(--tw-font-weight, var(--text-size-title-h3--font-weight, 900));
57
- --tw-font-weight: var(--font-weight-black, 900);
58
- font-weight: var(--font-weight-black, 900);
59
- -webkit-font-smoothing: antialiased;
60
- -moz-osx-font-smoothing: grayscale;
61
- }
62
- .typography-title-h4 {
63
- min-height: auto;
64
- text-box: trim-both text;
65
- font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
66
- font-size: var(--text-size-title-h4, 1.5rem);
67
- line-height: var(--tw-leading, var(--text-size-title-h4--line-height, 2rem));
68
- letter-spacing: var(--tw-tracking, var(--text-size-title-h4--letter-spacing, -0.025em));
69
- font-weight: var(--tw-font-weight, var(--text-size-title-h4--font-weight, 900));
70
- --tw-font-weight: var(--font-weight-black, 900);
71
- font-weight: var(--font-weight-black, 900);
72
- -webkit-font-smoothing: antialiased;
73
- -moz-osx-font-smoothing: grayscale;
74
- }
75
- .typography-title-h5 {
76
- min-height: auto;
77
- text-box: trim-both text;
78
- font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
79
- font-size: var(--text-size-title-h5, 1.25rem);
80
- line-height: var(--tw-leading, var(--text-size-title-h5--line-height, 1.75rem));
81
- letter-spacing: var(--tw-tracking, var(--text-size-title-h5--letter-spacing, -0.025em));
82
- font-weight: var(--tw-font-weight, var(--text-size-title-h5--font-weight, 900));
83
- --tw-font-weight: var(--font-weight-black, 900);
84
- font-weight: var(--font-weight-black, 900);
85
- -webkit-font-smoothing: antialiased;
86
- -moz-osx-font-smoothing: grayscale;
87
- }
88
- .typography-title-h6 {
89
- min-height: auto;
90
- text-box: trim-both text;
91
- font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
92
- font-size: var(--text-size-title-h6, 1rem);
93
- line-height: var(--tw-leading, var(--text-size-title-h6--line-height, 1.5rem));
94
- letter-spacing: var(--tw-tracking, var(--text-size-title-h6--letter-spacing, -0.025em));
95
- font-weight: var(--tw-font-weight, var(--text-size-title-h6--font-weight, 700));
96
- --tw-font-weight: var(--font-weight-bold, 700);
97
- font-weight: var(--font-weight-bold, 700);
98
- -webkit-font-smoothing: antialiased;
99
- -moz-osx-font-smoothing: grayscale;
100
- }
101
- .typography-title-action {
102
- min-height: auto;
103
- text-box: trim-both text;
104
- font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
105
- font-size: var(--text-size-title-action, 0.875rem);
106
- line-height: var(--tw-leading, var(--text-size-title-action--line-height, 1.5rem));
107
- font-weight: var(--tw-font-weight, var(--text-size-title-action--font-weight, 500));
108
- --tw-font-weight: var(--font-weight-medium, 500);
109
- font-weight: var(--font-weight-medium, 500);
110
- -webkit-font-smoothing: antialiased;
111
- -moz-osx-font-smoothing: grayscale;
112
- }
113
- .typography-info-paragraph {
114
- min-height: auto;
115
- text-box: trim-both text;
116
- font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
117
- font-size: var(--text-size-info-paragraph, 1.25rem);
118
- line-height: var(--tw-leading, var(--text-size-info-paragraph--line-height, 2rem));
119
- font-weight: var(--tw-font-weight, var(--text-size-info-paragraph--font-weight, 400));
120
- -webkit-font-smoothing: antialiased;
121
- -moz-osx-font-smoothing: grayscale;
122
- }
123
- .typography-info-detail {
124
- min-height: auto;
125
- text-box: trim-both text;
126
- font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
127
- font-size: var(--text-size-info-detail, 1rem);
128
- line-height: var(--tw-leading, var(--text-size-info-detail--line-height, 1.5rem));
129
- font-weight: var(--tw-font-weight, var(--text-size-info-detail--font-weight, 400));
130
- -webkit-font-smoothing: antialiased;
131
- -moz-osx-font-smoothing: grayscale;
132
- }
133
- .typography-info-caption {
134
- min-height: auto;
135
- text-box: trim-both text;
136
- font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
137
- font-size: var(--text-size-info-caption, 0.875rem);
138
- line-height: var(--tw-leading, var(--text-size-info-caption--line-height, 1.25rem));
139
- font-weight: var(--tw-font-weight, var(--text-size-info-caption--font-weight, 400));
140
- -webkit-font-smoothing: antialiased;
141
- -moz-osx-font-smoothing: grayscale;
142
- }
143
- .typography-info-label {
144
- min-height: auto;
145
- text-box: trim-both cap alphabetic;
146
- font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
147
- font-size: var(--text-size-info-label, 0.75rem);
148
- line-height: var(--tw-leading, var(--text-size-info-label--line-height, 1rem));
149
- font-weight: var(--tw-font-weight, var(--text-size-info-label--font-weight, 700));
150
- --tw-font-weight: var(--font-weight-bold, 700);
151
- font-weight: var(--font-weight-bold, 700);
152
- text-transform: uppercase;
153
- -webkit-font-smoothing: antialiased;
154
- -moz-osx-font-smoothing: grayscale;
155
- }
156
- .typography-info-option {
157
- min-height: auto;
158
- text-box: trim-both cap alphabetic;
159
- font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
160
- font-size: var(--text-size-info-option, 0.625rem);
161
- line-height: var(--tw-leading, var(--text-size-info-option--line-height, 0.625rem));
162
- letter-spacing: var(--tw-tracking, var(--text-size-info-option--letter-spacing, -0.025em));
163
- font-weight: var(--tw-font-weight, var(--text-size-info-option--font-weight, 700));
164
- --tw-font-weight: var(--font-weight-bold, 700);
165
- font-weight: var(--font-weight-bold, 700);
166
- text-transform: uppercase;
167
- -webkit-font-smoothing: antialiased;
168
- -moz-osx-font-smoothing: grayscale;
169
- }
170
- .typography-info-tip {
171
- min-height: auto;
172
- text-box: trim-both text;
173
- font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
174
- font-size: var(--text-size-info-tip, 0.75rem);
175
- line-height: var(--tw-leading, var(--text-size-info-tip--line-height, 1rem));
176
- font-weight: var(--tw-font-weight, var(--text-size-info-tip--font-weight, 400));
177
- -webkit-font-smoothing: antialiased;
178
- -moz-osx-font-smoothing: grayscale;
179
- }
180
- .typography-read-paragraph {
181
- min-height: auto;
182
- text-box: trim-both text;
183
- font-family: var(--font-read, 'Merriweather', Times, 'Times New Roman', serif);
184
- font-size: var(--text-size-read-paragraph, 1.25rem);
185
- line-height: var(--tw-leading, var(--text-size-read-paragraph--line-height, 2rem));
186
- font-weight: var(--tw-font-weight, var(--text-size-read-paragraph--font-weight, 300));
187
- --tw-font-weight: var(--font-weight-light, 300);
188
- font-weight: var(--font-weight-light, 300);
189
- -webkit-font-smoothing: antialiased;
190
- -moz-osx-font-smoothing: grayscale;
191
- }
192
- .typography-read-detail {
193
- min-height: auto;
194
- text-box: trim-both text;
195
- font-family: var(--font-read, 'Merriweather', Times, 'Times New Roman', serif);
196
- font-size: var(--text-size-read-detail, 1rem);
197
- line-height: var(--tw-leading, var(--text-size-read-detail--line-height, 1.5rem));
198
- font-weight: var(--tw-font-weight, var(--text-size-read-detail--font-weight, 300));
199
- --tw-font-weight: var(--font-weight-light, 300);
200
- font-weight: var(--font-weight-light, 300);
201
- -webkit-font-smoothing: antialiased;
202
- -moz-osx-font-smoothing: grayscale;
203
- }
204
- .typography-read-caption {
205
- min-height: auto;
206
- text-box: trim-both text;
207
- font-family: var(--font-read, 'Merriweather', Times, 'Times New Roman', serif);
208
- font-size: var(--text-size-read-caption, 0.875rem);
209
- line-height: var(--tw-leading, var(--text-size-read-caption--line-height, 1.25rem));
210
- font-weight: var(--tw-font-weight, var(--text-size-read-caption--font-weight, 400));
211
- -webkit-font-smoothing: antialiased;
212
- -moz-osx-font-smoothing: grayscale;
213
- }
214
- .typography-code-snippet {
215
- min-height: auto;
216
- text-box: trim-both text;
217
- font-family: var(--font-code, 'Roboto Mono', 'Courier New', monospace);
218
- font-size: var(--text-size-code-snippet, 1rem);
219
- line-height: var(--tw-leading, var(--text-size-code-snippet--line-height, 1.5rem));
220
- font-weight: var(--tw-font-weight, var(--text-size-code-snippet--font-weight, 400));
221
- -webkit-font-smoothing: antialiased;
222
- -moz-osx-font-smoothing: grayscale;
223
- }
224
- .typography-code-hack {
225
- min-height: auto;
226
- text-box: trim-both text;
227
- font-family: var(--font-code, 'Roboto Mono', 'Courier New', monospace);
228
- font-size: var(--text-size-code-hack, 0.875rem);
229
- line-height: var(--tw-leading, var(--text-size-code-hack--line-height, 1.25rem));
230
- font-weight: var(--tw-font-weight, var(--text-size-code-hack--font-weight, 400));
231
- -webkit-font-smoothing: antialiased;
232
- -moz-osx-font-smoothing: grayscale;
233
- }
234
- @property --tw-duration {
235
- syntax: "*";
236
- inherits: false;
237
- }
238
- @property --tw-ease {
239
- syntax: "*";
240
- inherits: false;
241
- }
242
- @property --tw-font-weight {
243
- syntax: "*";
244
- inherits: false;
245
- }
246
- @layer properties {
247
- @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
248
- *, ::before, ::after, ::backdrop {
249
- --tw-duration: initial;
250
- --tw-ease: initial;
251
- --tw-font-weight: initial;
252
- }
253
- }
1
+ /*
2
+ @magma-design-system/design-tokens v14.1.0
3
+ Generated by Style Dictionary
4
+ Do not edit directly
5
+ Generated at Mon, 08 Jun 2026 14:52:21 GMT
6
+ */
7
+
8
+ :root {
9
+ --font-title: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
10
+ --font-info: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
11
+ --font-read: 'Merriweather', Times, 'Times New Roman', serif;
12
+ --font-code: 'Roboto Mono', 'Courier New', monospace;
13
+
14
+ --text-size-title-h1: 3rem;
15
+ --text-size-title-h1--font-weight: 900;
16
+ --text-size-title-h1--letter-spacing: -0.025em;
17
+ --text-size-title-h1--line-height: 3rem;
18
+ --text-size-title-h2: 2.25rem;
19
+ --text-size-title-h2--font-weight: 900;
20
+ --text-size-title-h2--letter-spacing: -0.025em;
21
+ --text-size-title-h2--line-height: 2.5rem;
22
+ --text-size-title-h3: 1.875rem;
23
+ --text-size-title-h3--font-weight: 900;
24
+ --text-size-title-h3--letter-spacing: -0.025em;
25
+ --text-size-title-h3--line-height: 2.25rem;
26
+ --text-size-title-h4: 1.5rem;
27
+ --text-size-title-h4--font-weight: 900;
28
+ --text-size-title-h4--letter-spacing: -0.025em;
29
+ --text-size-title-h4--line-height: 2rem;
30
+ --text-size-title-h5: 1.25rem;
31
+ --text-size-title-h5--font-weight: 900;
32
+ --text-size-title-h5--letter-spacing: -0.025em;
33
+ --text-size-title-h5--line-height: 1.75rem;
34
+ --text-size-title-h6: 1rem;
35
+ --text-size-title-h6--font-weight: 700;
36
+ --text-size-title-h6--letter-spacing: -0.025em;
37
+ --text-size-title-h6--line-height: 1.5rem;
38
+ --text-size-title-action: 0.875rem;
39
+ --text-size-title-action--font-weight: 500;
40
+ --text-size-title-action--line-height: 1.5rem;
41
+ --text-size-info-paragraph: 1.25rem;
42
+ --text-size-info-paragraph--font-weight: 400;
43
+ --text-size-info-paragraph--line-height: 2rem;
44
+ --text-size-info-detail: 1rem;
45
+ --text-size-info-detail--font-weight: 400;
46
+ --text-size-info-detail--line-height: 1.5rem;
47
+ --text-size-info-caption: 0.875rem;
48
+ --text-size-info-caption--font-weight: 400;
49
+ --text-size-info-caption--line-height: 1.25rem;
50
+ --text-size-info-label: 0.75rem;
51
+ --text-size-info-label--font-weight: 700;
52
+ --text-size-info-label--line-height: 1rem;
53
+ --text-size-info-option: 0.625rem;
54
+ --text-size-info-option--font-weight: 700;
55
+ --text-size-info-option--letter-spacing: -0.025em;
56
+ --text-size-info-option--line-height: 0.625rem;
57
+ --text-size-info-tip: 0.75rem;
58
+ --text-size-info-tip--font-weight: 400;
59
+ --text-size-info-tip--line-height: 1rem;
60
+ --text-size-read-paragraph: 1.25rem;
61
+ --text-size-read-paragraph--font-weight: 300;
62
+ --text-size-read-paragraph--line-height: 2rem;
63
+ --text-size-read-detail: 1rem;
64
+ --text-size-read-detail--font-weight: 300;
65
+ --text-size-read-detail--line-height: 1.5rem;
66
+ --text-size-read-caption: 0.875rem;
67
+ --text-size-read-caption--font-weight: 400;
68
+ --text-size-read-caption--line-height: 1.25rem;
69
+ --text-size-code-snippet: 1rem;
70
+ --text-size-code-snippet--font-weight: 400;
71
+ --text-size-code-snippet--line-height: 1.5rem;
72
+ --text-size-code-hack: 0.875rem;
73
+ --text-size-code-hack--font-weight: 400;
74
+ --text-size-code-hack--line-height: 1.25rem;
75
+
76
+ --leading-2xs: 0.625rem;
77
+ --leading-xs: 1rem;
78
+ --leading-sm: 1.25rem;
79
+ --leading-md: 1.5rem;
80
+ --leading-lg: 1.75rem;
81
+ --leading-xl: 2rem;
82
+ --leading-2xl: 2.25rem;
83
+ --leading-3xl: 2.5rem;
84
+ --leading-4xl: 3rem;
85
+
86
+ --spacing: 0.0025rem;
87
+ --spacing-none: 0px;
88
+ --spacing-xs: 4px;
89
+ --spacing-sm: 8px;
90
+ --spacing-md: 16px;
91
+ --spacing-lg: 24px;
92
+ --spacing-xl: 32px;
93
+ --spacing-2xl: 48px;
94
+ --spacing-3xl: 64px;
95
+ --spacing-4xl: 96px;
96
+ --spacing-phrase: 50ch;
97
+ --spacing-prose: 65ch;
98
+ --spacing-text: 75ch;
99
+ --spacing-title: 30ch;
100
+
101
+ --container-4xs: 128px;
102
+ --container-3xs: 192px;
103
+ --container-2xs: 240px;
104
+ --container-xs: 320px;
105
+ --container-sm: 384px;
106
+ --container-md: 448px;
107
+ --container-lg: 512px;
108
+ --container-xl: 568px;
109
+ --container-2xl: 640px;
110
+ --container-3xl: 768px;
111
+ --container-4xl: 960px;
112
+ --container-5xl: 1024px;
113
+ --container-6xl: 1152px;
114
+ --container-7xl: 1280px;
115
+
116
+ --breakpoint-mobile: 480px;
117
+ --breakpoint-tablet: 768px;
118
+ --breakpoint-desktop: 1024px;
119
+ --breakpoint-wide: 1280px;
120
+ --breakpoint-large: 1440px;
121
+ --breakpoint-xlarge: 1600px;
122
+ --breakpoint-tv: 1920px;
123
+
124
+ --aspect-cover: 5/3;
125
+ --aspect-picture: 4/3;
126
+ --aspect-landscape: 4/2;
127
+ --aspect-panorama: 4/1;
128
+ --aspect-square: 1/1;
129
+ --aspect-a4: 1/1.4;
130
+ --aspect-book: 1/1.4;
131
+ --aspect-video: 16/9;
132
+
133
+ --ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
134
+ --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
135
+ --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
136
+ --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
137
+ --ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
138
+ --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
139
+ --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
140
+ --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
141
+ --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
142
+ --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
143
+ --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
144
+ --ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
145
+ --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
146
+ --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
147
+ --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
148
+ --ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
149
+ --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
150
+ --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
151
+ --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
152
+ --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
153
+ --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
154
+ --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
155
+ --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
156
+ --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
157
+
158
+ --duration-75: 75ms;
159
+ --duration-100: 100ms;
160
+ --duration-150: 150ms;
161
+ --duration-200: 200ms;
162
+ --duration-300: 300ms;
163
+ --duration-500: 500ms;
164
+ --duration-700: 700ms;
165
+ --duration-1000: 1000ms;
166
+
167
+ --border-none: 0;
168
+ --border-xs: 1px;
169
+ --border-sm: 2px;
170
+ --border-md: 3px;
171
+ --border-lg: 4px;
172
+ --border-xl: 5px;
173
+
174
+ --radius-none: 0px;
175
+ --radius-3xs: 4px;
176
+ --radius-2xs: 6px;
177
+ --radius-xs: 8px;
178
+ --radius-sm: 10px;
179
+ --radius-md: 12px;
180
+ --radius-lg: 16px;
181
+ --radius-xl: 20px;
182
+ --radius-2xl: 24px;
183
+ --radius-3xl: 32px;
184
+ --radius-4xl: 48px;
185
+ --radius-5xl: 64px;
186
+ --radius-full: 1000px;
187
+
188
+ --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
189
+ --shadow-xs-sharp: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);
190
+ --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
191
+ --shadow-sm-sharp: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1);
192
+ --shadow-sharp: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1);
193
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
194
+ --shadow-md-sharp: 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);
195
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
196
+ --shadow-lg-sharp: 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);
197
+ --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
198
+ --shadow-xl-sharp: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
199
+ --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
200
+ --shadow-2xl-sharp: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 25px 50px -12px rgb(0 0 0 / 0.25);
201
+ --shadow-inset-sm: inset 0 2px 4px 0 rgb(0 0 0 / 0.05), inset 0 0 0 1px rgb(0 0 0 / 0.01);
202
+ --shadow-inset-md: inset 0 4px 6px -1px rgb(0 0 0 / 0.1), inset 0 0 0 1px rgb(0 0 0 / 0.02);
203
+ --shadow-inset-lg: inset 0 10px 15px -3px rgb(0 0 0 / 0.1), inset 0 0 0 1px rgb(0 0 0 / 0.04);
204
+ --shadow-inset-xl: inset 0 20px 25px -5px rgb(0 0 0 / 0.1), inset 0 0 0 1px rgb(0 0 0 / 0.04);
205
+ --shadow-glow-near-strong: rgb(0 0 0 / 0.2) 0px 12px 28px 0px, rgb(0 0 0 / 0.1) 0px 2px 4px 0px;
206
+ --shadow-glow-distant-weak: rgb(0 0 0 / 0.2) 0px 60px 40px -7px;
207
+ --shadow-glow-distant-strong: rgb(0 0 0 / 0.25) 0px 50px 100px -20px, rgb(0 0 0 / 0.3) 0px 30px 60px -30px;
208
+ --shadow-box-md: rgb(0 0 0 / 0.06) 0px 0px 0px 1px, rgb(0 0 0 / 0.03) 0px 1px 1px -0.5px, rgb(0 0 0 / 0.04) 0px 2px 2px -1px, rgb(0 0 0 / 0.04) 0px 3px 3px -1.5px, rgb(0 0 0 / 0.03) 0px 5px 5px -2.5px, rgb(0 0 0 / 0.03) 0px 10px 10px -5px, rgb(0 0 0 / 0.03) 0px 24px 24px -8px;
209
+ --shadow-box-lg: rgb(0 0 0 / 0.25) 0px 4px 8px -2px, rgb(0 0 0 / 0.08) 0px 0px 0px 1px;
210
+ --shadow-box-xl: rgb(0 0 0 / 0.05) 0px 0px 0px 1px, rgb(0 0 0 / 0.1) 0px 1px 1px -0.5px, rgb(0 0 0 / 0.1) 0px 3px 3px -1.5px, rgb(0 0 0 / 0.1) 0px 6px 6px -3px, rgb(0 0 0 / 0.1) 0px 12px 12px -6px, rgb(0 0 0 / 0.1) 0px 24px 24px -12px;
211
+ --shadow-box-solid-weak: rgb(0 0 0 / 0.3) 0px 2px 4px, rgb(0 0 0 / 0.03) 0px 0px 0px 1px, rgb(0 0 0 / 0.1) 0px 7px 13px -3px, rgb(0 0 0 / 0.2) 0px -3px 0px inset, rgb(255 255 255 / 0.1) 0px -8px 10px inset, rgb(255 255 255 / 0.15) 0px -4px 0px inset;
212
+ --shadow-box-solid-strong: rgb(0 0 0 / 0.4) 0px 2px 4px, rgb(0 0 0 / 0.3) 0px 7px 13px -3px, rgb(0 0 0 / 0.35) 0px -3px 0px inset, rgb(255 255 255 / 0.1) 0px -8px 10px inset, rgb(255 255 255 / 0.15) 0px -4px 0px inset;
213
+ --shadow-outline-weak: 0 0 0 1px rgb(0 0 0 / 0.05), 0 1px 2px 0 rgb(0 0 0 / 0.05);
214
+ --shadow-outline-md: 0 0 0 1px rgb(0 0 0 / 0.1);
215
+ --shadow-outline-glow-weak: rgb(0 0 0 / 0.05) 0px 6px 24px 0px, rgb(0 0 0 / 0.08) 0px 0px 0px 1px;
216
+ --shadow-outline-glow-strong: rgb(0 0 0 / 0.16) 0px 10px 36px 0px, rgb(0 0 0 / 0.06) 0px 0px 0px 1px;
217
+ --shadow-outline-strong: rgb(0 0 0 / 0.25) 0px 1px 1px, rgb(0 0 0 / 0.13) 0px 0px 1px 1px;
218
+ --shadow-highlight-weak: rgb(0 0 0 / 0.3) 0px 0px 0px 1px;
219
+ --shadow-highlight-md: rgb(0 0 0 / 0.5) 0px 0px 0px 1px, rgb(0 0 0 / 0.3) 0px 4px 6px -1px;
220
+ --shadow-highlight-strong: rgb(0 0 0 / 0.4) 0px 0px 0px 2px, rgb(0 0 0 / 0.65) 0px 4px 6px -1px;
254
221
  }
package/dist/css/utility-typography.css ADDED
@@ -0,0 +1,254 @@
1
+ /*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
2
+ @layer properties;
3
+ @layer utilities {
4
+ .focus-zoom {
5
+ --tw-duration: 200ms;
6
+ transition-duration: 200ms;
7
+ --tw-ease: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
8
+ transition-timing-function: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
9
+ outline: var(--magma-outline-blur);
10
+ outline-offset: var(--magma-outline-blur-offset);
11
+ transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;
12
+ }
13
+ .focus-zoom--focused,
14
+ .focus-zoom:focus-visible {
15
+ --magma-outline-blur-offset: var(--magma-outline-focus-offset);
16
+ --magma-outline-blur: var(--magma-outline-focus);
17
+ }
18
+ .focus-zoom--light.focus-zoom--focused,
19
+ .focus-zoom--light:focus-visible {
20
+ --magma-outline-blur: 2px solid rgb(var(--tone-neutral));
21
+ }
22
+ }
23
+ .typography-title-h1 {
24
+ min-height: auto;
25
+ text-box: trim-both text;
26
+ font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
27
+ font-size: var(--text-size-title-h1, 3rem);
28
+ line-height: var(--tw-leading, var(--text-size-title-h1--line-height, 3rem));
29
+ letter-spacing: var(--tw-tracking, var(--text-size-title-h1--letter-spacing, -0.025em));
30
+ font-weight: var(--tw-font-weight, var(--text-size-title-h1--font-weight, 900));
31
+ --tw-font-weight: var(--font-weight-black, 900);
32
+ font-weight: var(--font-weight-black, 900);
33
+ -webkit-font-smoothing: antialiased;
34
+ -moz-osx-font-smoothing: grayscale;
35
+ }
36
+ .typography-title-h2 {
37
+ min-height: auto;
38
+ text-box: trim-both text;
39
+ font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
40
+ font-size: var(--text-size-title-h2, 2.25rem);
41
+ line-height: var(--tw-leading, var(--text-size-title-h2--line-height, 2.5rem));
42
+ letter-spacing: var(--tw-tracking, var(--text-size-title-h2--letter-spacing, -0.025em));
43
+ font-weight: var(--tw-font-weight, var(--text-size-title-h2--font-weight, 900));
44
+ --tw-font-weight: var(--font-weight-black, 900);
45
+ font-weight: var(--font-weight-black, 900);
46
+ -webkit-font-smoothing: antialiased;
47
+ -moz-osx-font-smoothing: grayscale;
48
+ }
49
+ .typography-title-h3 {
50
+ min-height: auto;
51
+ text-box: trim-both text;
52
+ font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
53
+ font-size: var(--text-size-title-h3, 1.875rem);
54
+ line-height: var(--tw-leading, var(--text-size-title-h3--line-height, 2.25rem));
55
+ letter-spacing: var(--tw-tracking, var(--text-size-title-h3--letter-spacing, -0.025em));
56
+ font-weight: var(--tw-font-weight, var(--text-size-title-h3--font-weight, 900));
57
+ --tw-font-weight: var(--font-weight-black, 900);
58
+ font-weight: var(--font-weight-black, 900);
59
+ -webkit-font-smoothing: antialiased;
60
+ -moz-osx-font-smoothing: grayscale;
61
+ }
62
+ .typography-title-h4 {
63
+ min-height: auto;
64
+ text-box: trim-both text;
65
+ font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
66
+ font-size: var(--text-size-title-h4, 1.5rem);
67
+ line-height: var(--tw-leading, var(--text-size-title-h4--line-height, 2rem));
68
+ letter-spacing: var(--tw-tracking, var(--text-size-title-h4--letter-spacing, -0.025em));
69
+ font-weight: var(--tw-font-weight, var(--text-size-title-h4--font-weight, 900));
70
+ --tw-font-weight: var(--font-weight-black, 900);
71
+ font-weight: var(--font-weight-black, 900);
72
+ -webkit-font-smoothing: antialiased;
73
+ -moz-osx-font-smoothing: grayscale;
74
+ }
75
+ .typography-title-h5 {
76
+ min-height: auto;
77
+ text-box: trim-both text;
78
+ font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
79
+ font-size: var(--text-size-title-h5, 1.25rem);
80
+ line-height: var(--tw-leading, var(--text-size-title-h5--line-height, 1.75rem));
81
+ letter-spacing: var(--tw-tracking, var(--text-size-title-h5--letter-spacing, -0.025em));
82
+ font-weight: var(--tw-font-weight, var(--text-size-title-h5--font-weight, 900));
83
+ --tw-font-weight: var(--font-weight-black, 900);
84
+ font-weight: var(--font-weight-black, 900);
85
+ -webkit-font-smoothing: antialiased;
86
+ -moz-osx-font-smoothing: grayscale;
87
+ }
88
+ .typography-title-h6 {
89
+ min-height: auto;
90
+ text-box: trim-both text;
91
+ font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
92
+ font-size: var(--text-size-title-h6, 1rem);
93
+ line-height: var(--tw-leading, var(--text-size-title-h6--line-height, 1.5rem));
94
+ letter-spacing: var(--tw-tracking, var(--text-size-title-h6--letter-spacing, -0.025em));
95
+ font-weight: var(--tw-font-weight, var(--text-size-title-h6--font-weight, 700));
96
+ --tw-font-weight: var(--font-weight-bold, 700);
97
+ font-weight: var(--font-weight-bold, 700);
98
+ -webkit-font-smoothing: antialiased;
99
+ -moz-osx-font-smoothing: grayscale;
100
+ }
101
+ .typography-title-action {
102
+ min-height: auto;
103
+ text-box: trim-both text;
104
+ font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
105
+ font-size: var(--text-size-title-action, 0.875rem);
106
+ line-height: var(--tw-leading, var(--text-size-title-action--line-height, 1.5rem));
107
+ font-weight: var(--tw-font-weight, var(--text-size-title-action--font-weight, 500));
108
+ --tw-font-weight: var(--font-weight-medium, 500);
109
+ font-weight: var(--font-weight-medium, 500);
110
+ -webkit-font-smoothing: antialiased;
111
+ -moz-osx-font-smoothing: grayscale;
112
+ }
113
+ .typography-info-paragraph {
114
+ min-height: auto;
115
+ text-box: trim-both text;
116
+ font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
117
+ font-size: var(--text-size-info-paragraph, 1.25rem);
118
+ line-height: var(--tw-leading, var(--text-size-info-paragraph--line-height, 2rem));
119
+ font-weight: var(--tw-font-weight, var(--text-size-info-paragraph--font-weight, 400));
120
+ -webkit-font-smoothing: antialiased;
121
+ -moz-osx-font-smoothing: grayscale;
122
+ }
123
+ .typography-info-detail {
124
+ min-height: auto;
125
+ text-box: trim-both text;
126
+ font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
127
+ font-size: var(--text-size-info-detail, 1rem);
128
+ line-height: var(--tw-leading, var(--text-size-info-detail--line-height, 1.5rem));
129
+ font-weight: var(--tw-font-weight, var(--text-size-info-detail--font-weight, 400));
130
+ -webkit-font-smoothing: antialiased;
131
+ -moz-osx-font-smoothing: grayscale;
132
+ }
133
+ .typography-info-caption {
134
+ min-height: auto;
135
+ text-box: trim-both text;
136
+ font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
137
+ font-size: var(--text-size-info-caption, 0.875rem);
138
+ line-height: var(--tw-leading, var(--text-size-info-caption--line-height, 1.25rem));
139
+ font-weight: var(--tw-font-weight, var(--text-size-info-caption--font-weight, 400));
140
+ -webkit-font-smoothing: antialiased;
141
+ -moz-osx-font-smoothing: grayscale;
142
+ }
143
+ .typography-info-label {
144
+ min-height: auto;
145
+ text-box: trim-both cap alphabetic;
146
+ font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
147
+ font-size: var(--text-size-info-label, 0.75rem);
148
+ line-height: var(--tw-leading, var(--text-size-info-label--line-height, 1rem));
149
+ font-weight: var(--tw-font-weight, var(--text-size-info-label--font-weight, 700));
150
+ --tw-font-weight: var(--font-weight-bold, 700);
151
+ font-weight: var(--font-weight-bold, 700);
152
+ text-transform: uppercase;
153
+ -webkit-font-smoothing: antialiased;
154
+ -moz-osx-font-smoothing: grayscale;
155
+ }
156
+ .typography-info-option {
157
+ min-height: auto;
158
+ text-box: trim-both cap alphabetic;
159
+ font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
160
+ font-size: var(--text-size-info-option, 0.625rem);
161
+ line-height: var(--tw-leading, var(--text-size-info-option--line-height, 0.625rem));
162
+ letter-spacing: var(--tw-tracking, var(--text-size-info-option--letter-spacing, -0.025em));
163
+ font-weight: var(--tw-font-weight, var(--text-size-info-option--font-weight, 700));
164
+ --tw-font-weight: var(--font-weight-bold, 700);
165
+ font-weight: var(--font-weight-bold, 700);
166
+ text-transform: uppercase;
167
+ -webkit-font-smoothing: antialiased;
168
+ -moz-osx-font-smoothing: grayscale;
169
+ }
170
+ .typography-info-tip {
171
+ min-height: auto;
172
+ text-box: trim-both text;
173
+ font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
174
+ font-size: var(--text-size-info-tip, 0.75rem);
175
+ line-height: var(--tw-leading, var(--text-size-info-tip--line-height, 1rem));
176
+ font-weight: var(--tw-font-weight, var(--text-size-info-tip--font-weight, 400));
177
+ -webkit-font-smoothing: antialiased;
178
+ -moz-osx-font-smoothing: grayscale;
179
+ }
180
+ .typography-read-paragraph {
181
+ min-height: auto;
182
+ text-box: trim-both text;
183
+ font-family: var(--font-read, 'Merriweather', Times, 'Times New Roman', serif);
184
+ font-size: var(--text-size-read-paragraph, 1.25rem);
185
+ line-height: var(--tw-leading, var(--text-size-read-paragraph--line-height, 2rem));
186
+ font-weight: var(--tw-font-weight, var(--text-size-read-paragraph--font-weight, 300));
187
+ --tw-font-weight: var(--font-weight-light, 300);
188
+ font-weight: var(--font-weight-light, 300);
189
+ -webkit-font-smoothing: antialiased;
190
+ -moz-osx-font-smoothing: grayscale;
191
+ }
192
+ .typography-read-detail {
193
+ min-height: auto;
194
+ text-box: trim-both text;
195
+ font-family: var(--font-read, 'Merriweather', Times, 'Times New Roman', serif);
196
+ font-size: var(--text-size-read-detail, 1rem);
197
+ line-height: var(--tw-leading, var(--text-size-read-detail--line-height, 1.5rem));
198
+ font-weight: var(--tw-font-weight, var(--text-size-read-detail--font-weight, 300));
199
+ --tw-font-weight: var(--font-weight-light, 300);
200
+ font-weight: var(--font-weight-light, 300);
201
+ -webkit-font-smoothing: antialiased;
202
+ -moz-osx-font-smoothing: grayscale;
203
+ }
204
+ .typography-read-caption {
205
+ min-height: auto;
206
+ text-box: trim-both text;
207
+ font-family: var(--font-read, 'Merriweather', Times, 'Times New Roman', serif);
208
+ font-size: var(--text-size-read-caption, 0.875rem);
209
+ line-height: var(--tw-leading, var(--text-size-read-caption--line-height, 1.25rem));
210
+ font-weight: var(--tw-font-weight, var(--text-size-read-caption--font-weight, 400));
211
+ -webkit-font-smoothing: antialiased;
212
+ -moz-osx-font-smoothing: grayscale;
213
+ }
214
+ .typography-code-snippet {
215
+ min-height: auto;
216
+ text-box: trim-both text;
217
+ font-family: var(--font-code, 'Roboto Mono', 'Courier New', monospace);
218
+ font-size: var(--text-size-code-snippet, 1rem);
219
+ line-height: var(--tw-leading, var(--text-size-code-snippet--line-height, 1.5rem));
220
+ font-weight: var(--tw-font-weight, var(--text-size-code-snippet--font-weight, 400));
221
+ -webkit-font-smoothing: antialiased;
222
+ -moz-osx-font-smoothing: grayscale;
223
+ }
224
+ .typography-code-hack {
225
+ min-height: auto;
226
+ text-box: trim-both text;
227
+ font-family: var(--font-code, 'Roboto Mono', 'Courier New', monospace);
228
+ font-size: var(--text-size-code-hack, 0.875rem);
229
+ line-height: var(--tw-leading, var(--text-size-code-hack--line-height, 1.25rem));
230
+ font-weight: var(--tw-font-weight, var(--text-size-code-hack--font-weight, 400));
231
+ -webkit-font-smoothing: antialiased;
232
+ -moz-osx-font-smoothing: grayscale;
233
+ }
234
+ @property --tw-duration {
235
+ syntax: "*";
236
+ inherits: false;
237
+ }
238
+ @property --tw-ease {
239
+ syntax: "*";
240
+ inherits: false;
241
+ }
242
+ @property --tw-font-weight {
243
+ syntax: "*";
244
+ inherits: false;
245
+ }
246
+ @layer properties {
247
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
248
+ *, ::before, ::after, ::backdrop {
249
+ --tw-duration: initial;
250
+ --tw-ease: initial;
251
+ --tw-font-weight: initial;
252
+ }
253
+ }
254
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@maggioli-design-system/styles",
3
- "version": "16.0.0",
3
+ "version": "16.0.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": {
@@ -12,7 +12,7 @@
12
12
  "tailwind.reset": "postcss ./postcss/reset.css -o ./dist/css/reset.css",
13
13
  "tailwind.layer": "postcss ./postcss/layer.css -o ./dist/css/layer.css",
14
14
  "tailwind.build": "npm run tailwind.base && npm run tailwind.reset && npm run tailwind.layer && npm run tailwind.typography",
15
- "tailwind.typography": "postcss ./postcss/typography.css -o ./dist/css/typography.css",
15
+ "tailwind.typography": "postcss ./postcss/typography.css -o ./dist/css/utility-typography.css",
16
16
  "lint": "eslint .",
17
17
  "lint:fix": "eslint . --fix"
18
18
  },
@@ -55,7 +55,7 @@
55
55
  "@fontsource/merriweather": "5.1.0",
56
56
  "@fontsource/roboto": "5.1.0",
57
57
  "@fontsource/roboto-mono": "5.1.0",
58
- "@maggioli-design-system/design-tokens": "14.0.0",
58
+ "@maggioli-design-system/design-tokens": "14.1.0",
59
59
  "normalize.css": "8.0.1"
60
60
  },
61
61
  "devDependencies": {