@maggioli-design-system/styles 15.11.0 → 16.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/README.md +58 -7
  2. package/dist/css/animations.css +3 -1
  3. package/dist/css/base.css +109 -67
  4. package/dist/css/colors-hex-brand-rnd.css +39 -37
  5. package/dist/css/colors-hex-brand.css +72 -70
  6. package/dist/css/colors-hex-default.css +732 -664
  7. package/dist/css/colors-hex-label.css +402 -334
  8. package/dist/css/colors-hex-status.css +138 -136
  9. package/dist/css/colors-hex-tones.css +171 -169
  10. package/dist/css/colors-hex.css +897 -2230
  11. package/dist/css/colors-rgb-brand-rnd.css +34 -32
  12. package/dist/css/colors-rgb-brand.css +65 -63
  13. package/dist/css/colors-rgb-default.css +692 -624
  14. package/dist/css/colors-rgb-label.css +399 -331
  15. package/dist/css/colors-rgb-status.css +124 -122
  16. package/dist/css/colors-rgb-tones.css +166 -164
  17. package/dist/css/colors-rgb.css +852 -2185
  18. package/dist/css/globals.css +222 -7
  19. package/dist/css/hydrated.css +7 -0
  20. package/dist/css/layer.css +1 -0
  21. package/dist/css/reset.css +123 -115
  22. package/dist/css/tailwind-theme-color.css +306 -0
  23. package/dist/css/tailwind-theme-typography.css +251 -0
  24. package/dist/css/transitions.css +45 -0
  25. package/dist/css/typography.css +218 -129
  26. package/dist/tailwind/base.css +88 -41
  27. package/dist/tailwind/reset.css +116 -99
  28. package/dist/tailwind/theme.css +5 -0
  29. package/dist/tailwind/typography.css +137 -157
  30. package/dist/tailwind/utilities.css +97 -0
  31. package/dist/tailwind3/base.css +51 -0
  32. package/dist/{tailwind → tailwind3}/components.css +5 -4
  33. package/dist/tailwind3/reset.css +114 -0
  34. package/dist/tailwind3/typography.css +140 -0
  35. package/package.json +22 -13
  36. package/postcss.config.js +2 -7
  37. package/tailwind.config.js +11 -10
  38. package/dist/css/colors-hex-brand-apk.css +0 -281
  39. package/dist/css/colors-hex-brand-mindy.css +0 -50
  40. package/dist/css/colors-hex-brand-synbee.css +0 -83
  41. package/dist/css/colors-hex-synbee-v1.css +0 -1025
  42. package/dist/css/colors-rgb-brand-apk.css +0 -281
  43. package/dist/css/colors-rgb-brand-mindy.css +0 -50
  44. package/dist/css/colors-rgb-brand-synbee.css +0 -83
  45. package/dist/css/colors-rgb-synbee-v1.css +0 -1025
package/dist/css/typography.css CHANGED
@@ -1,165 +1,254 @@
1
-
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
+ }
2
23
  .typography-title-h1 {
3
- min-height: 3rem;
4
- font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
5
- font-size: 3rem;
6
- line-height: 3rem;
7
- letter-spacing: -0.025em;
8
- font-weight: 900;
9
- -webkit-font-smoothing: antialiased;
10
- -moz-osx-font-smoothing: grayscale
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;
11
35
  }
12
36
  .typography-title-h2 {
13
- min-height: 2.5rem;
14
- font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
15
- font-size: 2.25rem;
16
- line-height: 2.5rem;
17
- letter-spacing: -0.025em;
18
- font-weight: 900;
19
- -webkit-font-smoothing: antialiased;
20
- -moz-osx-font-smoothing: grayscale
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;
21
48
  }
22
49
  .typography-title-h3 {
23
- min-height: 2.25rem;
24
- font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
25
- font-size: 1.875rem;
26
- line-height: 2.25rem;
27
- letter-spacing: -0.025em;
28
- font-weight: 900;
29
- -webkit-font-smoothing: antialiased;
30
- -moz-osx-font-smoothing: grayscale
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;
31
61
  }
32
62
  .typography-title-h4 {
33
- min-height: 2rem;
34
- font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
35
- font-size: 1.5rem;
36
- line-height: 2rem;
37
- letter-spacing: -0.025em;
38
- font-weight: 700;
39
- -webkit-font-smoothing: antialiased;
40
- -moz-osx-font-smoothing: grayscale
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;
41
74
  }
42
75
  .typography-title-h5 {
43
- min-height: 1.75rem;
44
- font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
45
- font-size: 1.25rem;
46
- line-height: 1.75rem;
47
- letter-spacing: -0.025em;
48
- font-weight: 700;
49
- -webkit-font-smoothing: antialiased;
50
- -moz-osx-font-smoothing: grayscale
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;
51
87
  }
52
88
  .typography-title-h6 {
53
- min-height: 1.5rem;
54
- font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
55
- font-size: 1rem;
56
- line-height: 1.5rem;
57
- letter-spacing: -0.025em;
58
- font-weight: 700;
59
- -webkit-font-smoothing: antialiased;
60
- -moz-osx-font-smoothing: grayscale
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;
61
100
  }
62
101
  .typography-title-action {
63
- min-height: 1.5rem;
64
- font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
65
- font-size: 0.875rem;
66
- line-height: 1.5rem;
67
- font-weight: 500;
68
- -webkit-font-smoothing: antialiased;
69
- -moz-osx-font-smoothing: grayscale
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;
70
112
  }
71
113
  .typography-info-paragraph {
72
- min-height: 2rem;
73
- font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
74
- font-size: 1.25rem;
75
- line-height: 2rem;
76
- -webkit-font-smoothing: antialiased;
77
- -moz-osx-font-smoothing: grayscale
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;
78
122
  }
79
123
  .typography-info-detail {
80
- min-height: 1.5rem;
81
- font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
82
- font-size: 1rem;
83
- line-height: 1.5rem;
84
- -webkit-font-smoothing: antialiased;
85
- -moz-osx-font-smoothing: grayscale
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;
86
132
  }
87
133
  .typography-info-caption {
88
- min-height: 1.25rem;
89
- font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
90
- font-size: 0.875rem;
91
- line-height: 1.25rem;
92
- -webkit-font-smoothing: antialiased;
93
- -moz-osx-font-smoothing: grayscale
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;
94
142
  }
95
143
  .typography-info-label {
96
- min-height: 1rem;
97
- font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
98
- font-size: 0.75rem;
99
- line-height: 1rem;
100
- font-weight: 700;
101
- text-transform: uppercase;
102
- -webkit-font-smoothing: antialiased;
103
- -moz-osx-font-smoothing: grayscale
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;
104
155
  }
105
156
  .typography-info-option {
106
- min-height: 0.625rem;
107
- font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
108
- font-size: 0.625rem;
109
- line-height: 0.625rem;
110
- letter-spacing: -0.025em;
111
- font-weight: 700;
112
- text-transform: uppercase;
113
- -webkit-font-smoothing: antialiased;
114
- -moz-osx-font-smoothing: grayscale
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;
115
169
  }
116
170
  .typography-info-tip {
117
- min-height: 1rem;
118
- font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
119
- font-size: 0.75rem;
120
- line-height: 1rem;
121
- -webkit-font-smoothing: antialiased;
122
- -moz-osx-font-smoothing: grayscale
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;
123
179
  }
124
180
  .typography-read-paragraph {
125
- min-height: 2rem;
126
- font-family: 'Merriweather', Times, 'Times New Roman', serif;
127
- font-size: 1.25rem;
128
- line-height: 2rem;
129
- font-weight: 300;
130
- -webkit-font-smoothing: antialiased;
131
- -moz-osx-font-smoothing: grayscale
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;
132
191
  }
133
192
  .typography-read-detail {
134
- min-height: 1.5rem;
135
- font-family: 'Merriweather', Times, 'Times New Roman', serif;
136
- font-size: 1rem;
137
- line-height: 1.5rem;
138
- font-weight: 300;
139
- -webkit-font-smoothing: antialiased;
140
- -moz-osx-font-smoothing: grayscale
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;
141
203
  }
142
204
  .typography-read-caption {
143
- min-height: 1.25rem;
144
- font-family: 'Merriweather', Times, 'Times New Roman', serif;
145
- font-size: 0.875rem;
146
- line-height: 1.25rem;
147
- -webkit-font-smoothing: antialiased;
148
- -moz-osx-font-smoothing: grayscale
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;
149
213
  }
150
214
  .typography-code-snippet {
151
- min-height: 1.5rem;
152
- font-family: 'Roboto Mono', 'Courier New', monospace;
153
- font-size: 1rem;
154
- line-height: 1.5rem;
155
- -webkit-font-smoothing: antialiased;
156
- -moz-osx-font-smoothing: grayscale
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;
157
223
  }
158
224
  .typography-code-hack {
159
- min-height: 1.25rem;
160
- font-family: 'Roboto Mono', 'Courier New', monospace;
161
- font-size: 0.875rem;
162
- line-height: 1.25rem;
163
- -webkit-font-smoothing: antialiased;
164
- -moz-osx-font-smoothing: grayscale
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
+ }
165
254
  }
package/dist/tailwind/base.css CHANGED
@@ -1,52 +1,99 @@
1
- body {
2
- @apply
3
- font-info
4
- text-info-detail;
1
+ @reference "./typography.css";
2
+ @reference "@maggioli-design-system/design-tokens/dist/css/tailwind-theme-typography.css";
5
3
 
6
- color: rgb(var(--tone-neutral-03, theme('colors.tone-neutral-03')));
7
- }
4
+ @layer base {
5
+ @view-transition {
6
+ navigation: var(--magma-view-transition-navigation, auto);
7
+ }
8
8
 
9
- :root.pref-contrast-high body {
10
- color: rgb(var(--tone-neutral-01, theme('colors.tone-neutral-01')));
11
- }
9
+ html {
10
+ transition-duration: 200ms;
11
+ transition-timing-function: var(--ease-out);
12
+ }
13
+
14
+ body {
15
+ @apply font-info
16
+ text-info-detail;
12
17
 
13
- @media (prefers-contrast: more) {
14
- :root.pref-contrast-system body {
15
- color: rgb(var(--tone-neutral-01, theme('colors.tone-neutral-01')));
18
+ background-color: rgb(var(--tone-neutral));
19
+ color: rgb(var(--tone-neutral-03));
16
20
  }
17
- }
18
21
 
19
- ::selection {
20
- background-color: var(--magma-selection-background, theme('colors.label-sky-09'));
21
- color: var(--magma-selection-color, theme('colors.label-sky-01'));
22
- }
22
+ :root.pref-contrast-high body {
23
+ color: rgb(var(--tone-neutral-01));
24
+ }
23
25
 
24
- button,
25
- optgroup,
26
- select {
27
- @apply text-title-action;
28
- }
26
+ @media (prefers-contrast: more) {
27
+ :root.pref-contrast-system body {
28
+ color: rgb(var(--tone-neutral-01));
29
+ }
30
+ }
29
31
 
30
- b,
31
- strong {
32
- @apply
33
- font-semibold
34
- tracking-tight;
35
- }
32
+ :root.pref-theme-scheme-dark {
33
+ color-scheme: only dark;
34
+ }
36
35
 
37
- a {
38
- color: rgb(var(--theme-default-02-primary-text, theme('colors.theme-default-02-primary-text')));
39
- }
36
+ :root.pref-theme-scheme-light {
37
+ color-scheme: only light;
38
+ }
40
39
 
41
- h1,
42
- h2,
43
- h3,
44
- h4,
45
- h5,
46
- h6 {
47
- max-width: theme('spacing.title');
48
- }
40
+ :root.pref-theme-scheme-all {
41
+ color-scheme: light dark;
42
+ }
49
43
 
50
- p {
51
- max-width: theme('spacing.text');
44
+ @media (prefers-color-scheme: dark) {
45
+ :root.pref-theme-system {
46
+ color-scheme: dark;
47
+ }
48
+ }
49
+
50
+ :root.pref-theme-scheme-all.pref-theme-dark {
51
+ color-scheme: dark;
52
+ }
53
+
54
+ ::selection {
55
+ background-color: var(--magma-selection-background);
56
+ color: var(--magma-selection-color);
57
+ }
58
+
59
+ button,
60
+ optgroup,
61
+ select {
62
+ @apply text-title-action;
63
+ }
64
+
65
+ b,
66
+ strong {
67
+ @apply font-semibold
68
+ tracking-tight;
69
+ }
70
+
71
+ a {
72
+ color: rgb(var(--theme-default-02-primary-text));
73
+ }
74
+
75
+ h1,
76
+ h2,
77
+ h3,
78
+ h4,
79
+ h5,
80
+ h6 {
81
+ @apply max-w-title;
82
+ }
83
+
84
+ p {
85
+ @apply max-w-title;
86
+ }
87
+
88
+ .hydrated {
89
+ /*
90
+ Revert all styles for hydrated web components
91
+ to avoid tailwind base unwanted overrides
92
+ all: revert-layer;
93
+ */
94
+ border: revert-layer;
95
+ display: revert-layer;
96
+ margin: revert-layer;
97
+ padding: revert-layer;
98
+ }
52
99
  }