tailwind-preset-mantine 2.0.4 → 2.0.6

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 (5) hide show
  1. package/README.md +4 -2
  2. package/package.json +13 -13
  3. package/src/generate.js +121 -13
  4. package/src/index.css +114 -10
  5. package/src/theme.css +114 -9
package/README.md CHANGED
@@ -11,7 +11,7 @@ A [Tailwind CSS (v4)](https://tailwindcss.com/) preset for seamless integration
11
11
  | v4 | v7 | v2 (current) |
12
12
  | v3 | v7 | ([v1](https://github.com/songkeys/tailwind-preset-mantine/tree/v1))* |
13
13
 
14
- *Note: you can still use v1 for Tailwind CSS via [`@config`](https://tailwindcss.com/docs/upgrade-guide#using-a-javascript-config-file) directive.
14
+ *Note: you can still use v1 for Tailwind CSS V4 via [`@config`](https://tailwindcss.com/docs/upgrade-guide#using-a-javascript-config-file) directive.
15
15
 
16
16
  ## Installation
17
17
 
@@ -19,13 +19,15 @@ A [Tailwind CSS (v4)](https://tailwindcss.com/) preset for seamless integration
19
19
  npm install tailwind-preset-mantine
20
20
  ```
21
21
 
22
+ Refer to [Tailwind Installation](https://tailwindcss.com/docs/installation/) for the rest of requirements to install tailwind depends on your project setup or framework.
23
+
22
24
  ## Usage
23
25
 
24
26
  ### Default mantine theme
25
27
 
26
28
  1. All-in-one import (recommended)
27
29
 
28
- To use the preset in your Tailwind CSS configuration, add it to the css file:
30
+ When importing the styles, instead of importing the tailwind css file, importing this preset in the css file:
29
31
 
30
32
  ```css
31
33
  @import "tailwind-preset-mantine";
package/package.json CHANGED
@@ -1,15 +1,12 @@
1
1
  {
2
2
  "name": "tailwind-preset-mantine",
3
- "version": "2.0.4",
3
+ "version": "2.0.6",
4
4
  "description": "Integrate Mantine with Tailwind CSS",
5
5
  "keywords": [
6
6
  "mantine",
7
7
  "tailwind",
8
8
  "preset"
9
9
  ],
10
- "files": [
11
- "src"
12
- ],
13
10
  "homepage": "https://github.com/songkeys/tailwind-preset-mantine#readme",
14
11
  "bugs": {
15
12
  "url": "https://github.com/songkeys/tailwind-preset-mantine/issues"
@@ -20,31 +17,34 @@
20
17
  },
21
18
  "license": "MIT",
22
19
  "author": "Songkeys",
23
- "main": "src/index.css",
20
+ "type": "module",
24
21
  "exports": {
25
22
  ".": "./src/index.css",
26
23
  "./theme.css": "./src/theme.css"
27
24
  },
25
+ "main": "src/index.css",
28
26
  "bin": {
29
27
  "tailwind-preset-mantine": "./src/cli.js"
30
28
  },
29
+ "files": [
30
+ "src"
31
+ ],
32
+ "dependencies": {
33
+ "tsx": "^4.19.3"
34
+ },
31
35
  "devDependencies": {
32
36
  "@biomejs/biome": "^1.9.4",
33
- "@mantine/core": "^7.16.2",
34
- "bumpp": "^10.0.1"
37
+ "@mantine/core": "^7.17.4",
38
+ "bumpp": "^10.1.0"
35
39
  },
36
40
  "peerDependencies": {
37
41
  "@mantine/core": "^7",
38
42
  "tailwindcss": "^4"
39
43
  },
40
- "type": "module",
41
- "dependencies": {
42
- "tsx": "^4.19.2"
43
- },
44
44
  "scripts": {
45
+ "generate": "node scripts/generate.js",
45
46
  "lint": "biome check .",
46
47
  "lint:fix": "biome check . --write",
47
- "release": "bumpp",
48
- "generate": "node scripts/generate.js"
48
+ "release": "bumpp"
49
49
  }
50
50
  }
package/src/generate.js CHANGED
@@ -5,8 +5,7 @@
5
5
  import { DEFAULT_THEME } from "@mantine/core";
6
6
 
7
7
  export function generateDefaultImports() {
8
- return `
9
- /** This file is autogenerated by the script. Do not edit it manually. */
8
+ return `/** This file is autogenerated by the script. Do not edit it manually. */
10
9
  @layer theme, base, mantine, components, utilities;
11
10
  @import "tailwindcss/theme.css" layer(theme);
12
11
  @import "tailwindcss/preflight.css" layer(base);
@@ -23,8 +22,7 @@ export function generateTheme(theme = DEFAULT_THEME) {
23
22
  // check if the object is deeply equal to DEFAULT_THEME
24
23
  const isDefault = JSON.stringify(theme) === JSON.stringify(DEFAULT_THEME);
25
24
 
26
- return `
27
- /** This file is autogenerated by the script. Do not edit it manually. */
25
+ return `/** This file is autogenerated by the script. Do not edit it manually. */
28
26
  ${isDefault ? '@custom-variant dark (&:where([data-mantine-color-scheme="dark"], [data-mantine-color-scheme="dark"] *));' : ""}
29
27
 
30
28
  @theme {
@@ -74,9 +72,6 @@ ${isDefault ? '@custom-variant dark (&:where([data-mantine-color-scheme="dark"],
74
72
  --spacing-lg: var(--mantine-spacing-lg);
75
73
  --spacing-xl: var(--mantine-spacing-xl);
76
74
 
77
- /* container */
78
- /* TODO: */
79
-
80
75
  /* font size */
81
76
  --text-xs: var(--mantine-font-size-xs);
82
77
  --text-sm: var(--mantine-font-size-sm);
@@ -176,13 +171,126 @@ ${isDefault ? '@custom-variant dark (&:where([data-mantine-color-scheme="dark"],
176
171
  .join("\n")}
177
172
 
178
173
  /* breakpoints */
179
- ${Object.entries(theme.breakpoints ?? {})
180
- .map(([key, value]) =>
181
- `
182
- --breakpoint-${key}: ${value};
174
+ ${theme.breakpoints ? "--breakpoint-*: initial;" : ""}
175
+ ${Object.entries(theme.breakpoints ?? {})
176
+ .map(([key, value]) =>
177
+ ` --breakpoint-${key}: ${value};
183
178
  `.trimEnd(),
184
- )
185
- .join("\n")}
179
+ )
180
+ .join("\n")}
181
+
182
+ /* readd back tailwind's default containers vars to fix #24 */
183
+ --size-3xs: 16rem;
184
+ --size-2xs: 18rem;
185
+ --size-xs: 20rem;
186
+ --size-sm: 24rem;
187
+ --size-md: 28rem;
188
+ --size-lg: 32rem;
189
+ --size-xl: 36rem;
190
+ --size-2xl: 42rem;
191
+ --size-3xl: 48rem;
192
+ --size-4xl: 56rem;
193
+ --size-5xl: 64rem;
194
+ --size-6xl: 72rem;
195
+ --size-7xl: 80rem;
196
+
197
+ --container-3xs: var(--size-3xs);
198
+ --container-2xs: var(--size-2xs);
199
+ --container-xs: var(--size-xs);
200
+ --container-sm: var(--size-sm);
201
+ --container-md: var(--size-md);
202
+ --container-lg: var(--size-lg);
203
+ --container-xl: var(--size-xl);
204
+ --container-2xl: var(--size-2xl);
205
+ --container-3xl: var(--size-3xl);
206
+ --container-4xl: var(--size-4xl);
207
+ --container-5xl: var(--size-5xl);
208
+ --container-6xl: var(--size-6xl);
209
+ --container-7xl: var(--size-7xl);
210
+
211
+ --width-3xs: var(--size-3xs);
212
+ --width-2xs: var(--size-2xs);
213
+ --width-xs: var(--size-xs);
214
+ --width-sm: var(--size-sm);
215
+ --width-md: var(--size-md);
216
+ --width-lg: var(--size-lg);
217
+ --width-xl: var(--size-xl);
218
+ --width-2xl: var(--size-2xl);
219
+ --width-3xl: var(--size-3xl);
220
+ --width-4xl: var(--size-4xl);
221
+ --width-5xl: var(--size-5xl);
222
+ --width-6xl: var(--size-6xl);
223
+ --width-7xl: var(--size-7xl);
224
+
225
+ --min-width-3xs: var(--size-3xs);
226
+ --min-width-2xs: var(--size-2xs);
227
+ --min-width-xs: var(--size-xs);
228
+ --min-width-sm: var(--size-sm);
229
+ --min-width-md: var(--size-md);
230
+ --min-width-lg: var(--size-lg);
231
+ --min-width-xl: var(--size-xl);
232
+ --min-width-2xl: var(--size-2xl);
233
+ --min-width-3xl: var(--size-3xl);
234
+ --min-width-4xl: var(--size-4xl);
235
+ --min-width-5xl: var(--size-5xl);
236
+ --min-width-6xl: var(--size-6xl);
237
+ --min-width-7xl: var(--size-7xl);
238
+
239
+ --max-width-3xs: var(--size-3xs);
240
+ --max-width-2xs: var(--size-2xs);
241
+ --max-width-xs: var(--size-xs);
242
+ --max-width-sm: var(--size-sm);
243
+ --max-width-md: var(--size-md);
244
+ --max-width-lg: var(--size-lg);
245
+ --max-width-xl: var(--size-xl);
246
+ --max-width-2xl: var(--size-2xl);
247
+ --max-width-3xl: var(--size-3xl);
248
+ --max-width-4xl: var(--size-4xl);
249
+ --max-width-5xl: var(--size-5xl);
250
+ --max-width-6xl: var(--size-6xl);
251
+ --max-width-7xl: var(--size-7xl);
252
+
253
+ --height-3xs: var(--size-3xs);
254
+ --height-2xs: var(--size-2xs);
255
+ --height-xs: var(--size-xs);
256
+ --height-sm: var(--size-sm);
257
+ --height-md: var(--size-md);
258
+ --height-lg: var(--size-lg);
259
+ --height-xl: var(--size-xl);
260
+ --height-2xl: var(--size-2xl);
261
+ --height-3xl: var(--size-3xl);
262
+ --height-4xl: var(--size-4xl);
263
+ --height-5xl: var(--size-5xl);
264
+ --height-6xl: var(--size-6xl);
265
+ --height-7xl: var(--size-7xl);
266
+
267
+ --min-height-3xs: var(--size-3xs);
268
+ --min-height-2xs: var(--size-2xs);
269
+ --min-height-xs: var(--size-xs);
270
+ --min-height-sm: var(--size-sm);
271
+ --min-height-md: var(--size-md);
272
+ --min-height-lg: var(--size-lg);
273
+ --min-height-xl: var(--size-xl);
274
+ --min-height-2xl: var(--size-2xl);
275
+ --min-height-3xl: var(--size-3xl);
276
+ --min-height-4xl: var(--size-4xl);
277
+ --min-height-5xl: var(--size-5xl);
278
+ --min-height-6xl: var(--size-6xl);
279
+ --min-height-7xl: var(--size-7xl);
280
+
281
+ --max-height-3xs: var(--size-3xs);
282
+ --max-height-2xs: var(--size-2xs);
283
+ --max-height-xs: var(--size-xs);
284
+ --max-height-sm: var(--size-sm);
285
+ --max-height-md: var(--size-md);
286
+ --max-height-lg: var(--size-lg);
287
+ --max-height-xl: var(--size-xl);
288
+ --max-height-2xl: var(--size-2xl);
289
+ --max-height-3xl: var(--size-3xl);
290
+ --max-height-4xl: var(--size-4xl);
291
+ --max-height-5xl: var(--size-5xl);
292
+ --max-height-6xl: var(--size-6xl);
293
+ --max-height-7xl: var(--size-7xl);
186
294
  }
187
295
  `;
188
296
  }
package/src/index.css CHANGED
@@ -1,4 +1,3 @@
1
-
2
1
  /** This file is autogenerated by the script. Do not edit it manually. */
3
2
  @layer theme, base, mantine, components, utilities;
4
3
  @import "tailwindcss/theme.css" layer(theme);
@@ -6,7 +5,6 @@
6
5
  @import "tailwindcss/utilities.css" layer(utilities);
7
6
 
8
7
  @import "@mantine/core/styles.layer.css";
9
-
10
8
  /** This file is autogenerated by the script. Do not edit it manually. */
11
9
  @custom-variant dark (&:where([data-mantine-color-scheme="dark"], [data-mantine-color-scheme="dark"] *));
12
10
 
@@ -55,9 +53,6 @@
55
53
  --spacing-lg: var(--mantine-spacing-lg);
56
54
  --spacing-xl: var(--mantine-spacing-xl);
57
55
 
58
- /* container */
59
- /* TODO: */
60
-
61
56
  /* font size */
62
57
  --text-xs: var(--mantine-font-size-xs);
63
58
  --text-sm: var(--mantine-font-size-sm);
@@ -404,14 +399,123 @@
404
399
  --color-orange-outline-hover: var(--mantine-color-orange-outline-hover);
405
400
 
406
401
  /* breakpoints */
407
-
402
+ --breakpoint-*: initial;
408
403
  --breakpoint-xs: 36em;
409
-
410
404
  --breakpoint-sm: 48em;
411
-
412
405
  --breakpoint-md: 62em;
413
-
414
406
  --breakpoint-lg: 75em;
415
-
416
407
  --breakpoint-xl: 88em;
408
+
409
+ /* readd back tailwind's default containers vars to fix #24 */
410
+ --size-3xs: 16rem;
411
+ --size-2xs: 18rem;
412
+ --size-xs: 20rem;
413
+ --size-sm: 24rem;
414
+ --size-md: 28rem;
415
+ --size-lg: 32rem;
416
+ --size-xl: 36rem;
417
+ --size-2xl: 42rem;
418
+ --size-3xl: 48rem;
419
+ --size-4xl: 56rem;
420
+ --size-5xl: 64rem;
421
+ --size-6xl: 72rem;
422
+ --size-7xl: 80rem;
423
+
424
+ --container-3xs: var(--size-3xs);
425
+ --container-2xs: var(--size-2xs);
426
+ --container-xs: var(--size-xs);
427
+ --container-sm: var(--size-sm);
428
+ --container-md: var(--size-md);
429
+ --container-lg: var(--size-lg);
430
+ --container-xl: var(--size-xl);
431
+ --container-2xl: var(--size-2xl);
432
+ --container-3xl: var(--size-3xl);
433
+ --container-4xl: var(--size-4xl);
434
+ --container-5xl: var(--size-5xl);
435
+ --container-6xl: var(--size-6xl);
436
+ --container-7xl: var(--size-7xl);
437
+
438
+ --width-3xs: var(--size-3xs);
439
+ --width-2xs: var(--size-2xs);
440
+ --width-xs: var(--size-xs);
441
+ --width-sm: var(--size-sm);
442
+ --width-md: var(--size-md);
443
+ --width-lg: var(--size-lg);
444
+ --width-xl: var(--size-xl);
445
+ --width-2xl: var(--size-2xl);
446
+ --width-3xl: var(--size-3xl);
447
+ --width-4xl: var(--size-4xl);
448
+ --width-5xl: var(--size-5xl);
449
+ --width-6xl: var(--size-6xl);
450
+ --width-7xl: var(--size-7xl);
451
+
452
+ --min-width-3xs: var(--size-3xs);
453
+ --min-width-2xs: var(--size-2xs);
454
+ --min-width-xs: var(--size-xs);
455
+ --min-width-sm: var(--size-sm);
456
+ --min-width-md: var(--size-md);
457
+ --min-width-lg: var(--size-lg);
458
+ --min-width-xl: var(--size-xl);
459
+ --min-width-2xl: var(--size-2xl);
460
+ --min-width-3xl: var(--size-3xl);
461
+ --min-width-4xl: var(--size-4xl);
462
+ --min-width-5xl: var(--size-5xl);
463
+ --min-width-6xl: var(--size-6xl);
464
+ --min-width-7xl: var(--size-7xl);
465
+
466
+ --max-width-3xs: var(--size-3xs);
467
+ --max-width-2xs: var(--size-2xs);
468
+ --max-width-xs: var(--size-xs);
469
+ --max-width-sm: var(--size-sm);
470
+ --max-width-md: var(--size-md);
471
+ --max-width-lg: var(--size-lg);
472
+ --max-width-xl: var(--size-xl);
473
+ --max-width-2xl: var(--size-2xl);
474
+ --max-width-3xl: var(--size-3xl);
475
+ --max-width-4xl: var(--size-4xl);
476
+ --max-width-5xl: var(--size-5xl);
477
+ --max-width-6xl: var(--size-6xl);
478
+ --max-width-7xl: var(--size-7xl);
479
+
480
+ --height-3xs: var(--size-3xs);
481
+ --height-2xs: var(--size-2xs);
482
+ --height-xs: var(--size-xs);
483
+ --height-sm: var(--size-sm);
484
+ --height-md: var(--size-md);
485
+ --height-lg: var(--size-lg);
486
+ --height-xl: var(--size-xl);
487
+ --height-2xl: var(--size-2xl);
488
+ --height-3xl: var(--size-3xl);
489
+ --height-4xl: var(--size-4xl);
490
+ --height-5xl: var(--size-5xl);
491
+ --height-6xl: var(--size-6xl);
492
+ --height-7xl: var(--size-7xl);
493
+
494
+ --min-height-3xs: var(--size-3xs);
495
+ --min-height-2xs: var(--size-2xs);
496
+ --min-height-xs: var(--size-xs);
497
+ --min-height-sm: var(--size-sm);
498
+ --min-height-md: var(--size-md);
499
+ --min-height-lg: var(--size-lg);
500
+ --min-height-xl: var(--size-xl);
501
+ --min-height-2xl: var(--size-2xl);
502
+ --min-height-3xl: var(--size-3xl);
503
+ --min-height-4xl: var(--size-4xl);
504
+ --min-height-5xl: var(--size-5xl);
505
+ --min-height-6xl: var(--size-6xl);
506
+ --min-height-7xl: var(--size-7xl);
507
+
508
+ --max-height-3xs: var(--size-3xs);
509
+ --max-height-2xs: var(--size-2xs);
510
+ --max-height-xs: var(--size-xs);
511
+ --max-height-sm: var(--size-sm);
512
+ --max-height-md: var(--size-md);
513
+ --max-height-lg: var(--size-lg);
514
+ --max-height-xl: var(--size-xl);
515
+ --max-height-2xl: var(--size-2xl);
516
+ --max-height-3xl: var(--size-3xl);
517
+ --max-height-4xl: var(--size-4xl);
518
+ --max-height-5xl: var(--size-5xl);
519
+ --max-height-6xl: var(--size-6xl);
520
+ --max-height-7xl: var(--size-7xl);
417
521
  }
package/src/theme.css CHANGED
@@ -1,4 +1,3 @@
1
-
2
1
  /** This file is autogenerated by the script. Do not edit it manually. */
3
2
  @custom-variant dark (&:where([data-mantine-color-scheme="dark"], [data-mantine-color-scheme="dark"] *));
4
3
 
@@ -47,9 +46,6 @@
47
46
  --spacing-lg: var(--mantine-spacing-lg);
48
47
  --spacing-xl: var(--mantine-spacing-xl);
49
48
 
50
- /* container */
51
- /* TODO: */
52
-
53
49
  /* font size */
54
50
  --text-xs: var(--mantine-font-size-xs);
55
51
  --text-sm: var(--mantine-font-size-sm);
@@ -396,14 +392,123 @@
396
392
  --color-orange-outline-hover: var(--mantine-color-orange-outline-hover);
397
393
 
398
394
  /* breakpoints */
399
-
395
+ --breakpoint-*: initial;
400
396
  --breakpoint-xs: 36em;
401
-
402
397
  --breakpoint-sm: 48em;
403
-
404
398
  --breakpoint-md: 62em;
405
-
406
399
  --breakpoint-lg: 75em;
407
-
408
400
  --breakpoint-xl: 88em;
401
+
402
+ /* readd back tailwind's default containers vars to fix #24 */
403
+ --size-3xs: 16rem;
404
+ --size-2xs: 18rem;
405
+ --size-xs: 20rem;
406
+ --size-sm: 24rem;
407
+ --size-md: 28rem;
408
+ --size-lg: 32rem;
409
+ --size-xl: 36rem;
410
+ --size-2xl: 42rem;
411
+ --size-3xl: 48rem;
412
+ --size-4xl: 56rem;
413
+ --size-5xl: 64rem;
414
+ --size-6xl: 72rem;
415
+ --size-7xl: 80rem;
416
+
417
+ --container-3xs: var(--size-3xs);
418
+ --container-2xs: var(--size-2xs);
419
+ --container-xs: var(--size-xs);
420
+ --container-sm: var(--size-sm);
421
+ --container-md: var(--size-md);
422
+ --container-lg: var(--size-lg);
423
+ --container-xl: var(--size-xl);
424
+ --container-2xl: var(--size-2xl);
425
+ --container-3xl: var(--size-3xl);
426
+ --container-4xl: var(--size-4xl);
427
+ --container-5xl: var(--size-5xl);
428
+ --container-6xl: var(--size-6xl);
429
+ --container-7xl: var(--size-7xl);
430
+
431
+ --width-3xs: var(--size-3xs);
432
+ --width-2xs: var(--size-2xs);
433
+ --width-xs: var(--size-xs);
434
+ --width-sm: var(--size-sm);
435
+ --width-md: var(--size-md);
436
+ --width-lg: var(--size-lg);
437
+ --width-xl: var(--size-xl);
438
+ --width-2xl: var(--size-2xl);
439
+ --width-3xl: var(--size-3xl);
440
+ --width-4xl: var(--size-4xl);
441
+ --width-5xl: var(--size-5xl);
442
+ --width-6xl: var(--size-6xl);
443
+ --width-7xl: var(--size-7xl);
444
+
445
+ --min-width-3xs: var(--size-3xs);
446
+ --min-width-2xs: var(--size-2xs);
447
+ --min-width-xs: var(--size-xs);
448
+ --min-width-sm: var(--size-sm);
449
+ --min-width-md: var(--size-md);
450
+ --min-width-lg: var(--size-lg);
451
+ --min-width-xl: var(--size-xl);
452
+ --min-width-2xl: var(--size-2xl);
453
+ --min-width-3xl: var(--size-3xl);
454
+ --min-width-4xl: var(--size-4xl);
455
+ --min-width-5xl: var(--size-5xl);
456
+ --min-width-6xl: var(--size-6xl);
457
+ --min-width-7xl: var(--size-7xl);
458
+
459
+ --max-width-3xs: var(--size-3xs);
460
+ --max-width-2xs: var(--size-2xs);
461
+ --max-width-xs: var(--size-xs);
462
+ --max-width-sm: var(--size-sm);
463
+ --max-width-md: var(--size-md);
464
+ --max-width-lg: var(--size-lg);
465
+ --max-width-xl: var(--size-xl);
466
+ --max-width-2xl: var(--size-2xl);
467
+ --max-width-3xl: var(--size-3xl);
468
+ --max-width-4xl: var(--size-4xl);
469
+ --max-width-5xl: var(--size-5xl);
470
+ --max-width-6xl: var(--size-6xl);
471
+ --max-width-7xl: var(--size-7xl);
472
+
473
+ --height-3xs: var(--size-3xs);
474
+ --height-2xs: var(--size-2xs);
475
+ --height-xs: var(--size-xs);
476
+ --height-sm: var(--size-sm);
477
+ --height-md: var(--size-md);
478
+ --height-lg: var(--size-lg);
479
+ --height-xl: var(--size-xl);
480
+ --height-2xl: var(--size-2xl);
481
+ --height-3xl: var(--size-3xl);
482
+ --height-4xl: var(--size-4xl);
483
+ --height-5xl: var(--size-5xl);
484
+ --height-6xl: var(--size-6xl);
485
+ --height-7xl: var(--size-7xl);
486
+
487
+ --min-height-3xs: var(--size-3xs);
488
+ --min-height-2xs: var(--size-2xs);
489
+ --min-height-xs: var(--size-xs);
490
+ --min-height-sm: var(--size-sm);
491
+ --min-height-md: var(--size-md);
492
+ --min-height-lg: var(--size-lg);
493
+ --min-height-xl: var(--size-xl);
494
+ --min-height-2xl: var(--size-2xl);
495
+ --min-height-3xl: var(--size-3xl);
496
+ --min-height-4xl: var(--size-4xl);
497
+ --min-height-5xl: var(--size-5xl);
498
+ --min-height-6xl: var(--size-6xl);
499
+ --min-height-7xl: var(--size-7xl);
500
+
501
+ --max-height-3xs: var(--size-3xs);
502
+ --max-height-2xs: var(--size-2xs);
503
+ --max-height-xs: var(--size-xs);
504
+ --max-height-sm: var(--size-sm);
505
+ --max-height-md: var(--size-md);
506
+ --max-height-lg: var(--size-lg);
507
+ --max-height-xl: var(--size-xl);
508
+ --max-height-2xl: var(--size-2xl);
509
+ --max-height-3xl: var(--size-3xl);
510
+ --max-height-4xl: var(--size-4xl);
511
+ --max-height-5xl: var(--size-5xl);
512
+ --max-height-6xl: var(--size-6xl);
513
+ --max-height-7xl: var(--size-7xl);
409
514
  }