tailwind-preset-mantine 2.1.0 → 3.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.
- package/README.md +4 -3
- package/package.json +7 -6
- package/src/generate.js +18 -5
- package/src/index.css +521 -510
- package/src/theme.css +521 -510
package/README.md
CHANGED
|
@@ -2,14 +2,15 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/tailwind-preset-mantine)
|
|
4
4
|
|
|
5
|
-
A [Tailwind CSS (v4)](https://tailwindcss.com/) preset for seamless integration with [Mantine UI (v7
|
|
5
|
+
A [Tailwind CSS (v4)](https://tailwindcss.com/) preset for seamless integration with [Mantine UI (v7 or v8)](https://mantine.dev/).
|
|
6
6
|
|
|
7
7
|
## Compatibility
|
|
8
8
|
|
|
9
9
|
| Tailwind CSS Version | Mantine Version | Preset Version |
|
|
10
10
|
|---------------------|-----------------|----------------|
|
|
11
|
-
| v4 | v7
|
|
12
|
-
|
|
|
11
|
+
| v4 | v7 or v8 | v3 (current) |
|
|
12
|
+
| v4 | v7 or v8 | v2 |
|
|
13
|
+
| v3 | v7 or v8 | ([v1](https://github.com/songkeys/tailwind-preset-mantine/tree/v1))* |
|
|
13
14
|
|
|
14
15
|
*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
16
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tailwind-preset-mantine",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.1",
|
|
4
4
|
"description": "Integrate Mantine with Tailwind CSS",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"mantine",
|
|
@@ -30,12 +30,12 @@
|
|
|
30
30
|
"src"
|
|
31
31
|
],
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"tsx": "^4.
|
|
33
|
+
"tsx": "^4.20.6"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"@biomejs/biome": "^
|
|
37
|
-
"@mantine/core": "^8.
|
|
38
|
-
"bumpp": "^10.1
|
|
36
|
+
"@biomejs/biome": "^2.3.0",
|
|
37
|
+
"@mantine/core": "^8.3.5",
|
|
38
|
+
"bumpp": "^10.3.1"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
41
|
"@mantine/core": "^7 || ^8",
|
|
@@ -45,6 +45,7 @@
|
|
|
45
45
|
"generate": "node scripts/generate.js",
|
|
46
46
|
"lint": "biome check .",
|
|
47
47
|
"lint:fix": "biome check . --write",
|
|
48
|
-
"release": "bumpp"
|
|
48
|
+
"release": "bumpp",
|
|
49
|
+
"test": "node --test"
|
|
49
50
|
}
|
|
50
51
|
}
|
package/src/generate.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// for reference:
|
|
2
|
-
// https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/core/MantineProvider/
|
|
2
|
+
// https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/core/MantineProvider/MantineCssVariables/default-css-variables-resolver.ts
|
|
3
3
|
// https://tailwindcss.com/docs/theme#default-theme-variable-reference
|
|
4
4
|
|
|
5
5
|
import { DEFAULT_THEME } from "@mantine/core";
|
|
@@ -23,7 +23,11 @@ export function generateTheme(theme = DEFAULT_THEME) {
|
|
|
23
23
|
const isDefault = JSON.stringify(theme) === JSON.stringify(DEFAULT_THEME);
|
|
24
24
|
|
|
25
25
|
return `/** This file is autogenerated by the script. Do not edit it manually. */
|
|
26
|
-
${
|
|
26
|
+
${
|
|
27
|
+
isDefault
|
|
28
|
+
? '@custom-variant dark (&:where([data-mantine-color-scheme="dark"], [data-mantine-color-scheme="dark"] *));'
|
|
29
|
+
: ""
|
|
30
|
+
}
|
|
27
31
|
|
|
28
32
|
@theme {
|
|
29
33
|
${
|
|
@@ -55,15 +59,24 @@ ${isDefault ? '@custom-variant dark (&:where([data-mantine-color-scheme="dark"],
|
|
|
55
59
|
--color-primary-light-color: var(--mantine-primary-color-light-color);
|
|
56
60
|
--color-primary-outline: var(--mantine-primary-color-outline);
|
|
57
61
|
--color-primary-outline-hover: var(--mantine-primary-color-outline-hover);
|
|
62
|
+
--color-primary-contrast: var(--mantine-primary-color-contrast);
|
|
58
63
|
|
|
59
64
|
/* colors - others */
|
|
60
65
|
--color-white: var(--mantine-color-white);
|
|
61
66
|
--color-black: var(--mantine-color-black);
|
|
62
|
-
--color-
|
|
67
|
+
--color-bright: var(--mantine-color-bright);
|
|
68
|
+
--color-body: var(--mantine-color-body);
|
|
63
69
|
--color-error: var(--mantine-color-error);
|
|
64
70
|
--color-placeholder: var(--mantine-color-placeholder);
|
|
65
71
|
--color-anchor: var(--mantine-color-anchor);
|
|
66
|
-
--color-default: var(--mantine-color-default
|
|
72
|
+
--color-default: var(--mantine-color-default);
|
|
73
|
+
--color-default-hover: var(--mantine-color-default-hover);
|
|
74
|
+
--color-default-color: var(--mantine-color-default-color);
|
|
75
|
+
--color-default-border: var(--mantine-color-default-border);
|
|
76
|
+
--color-dimmed: var(--mantine-color-dimmed);
|
|
77
|
+
--color-disabled: var(--mantine-color-disabled);
|
|
78
|
+
--color-disabled-color: var(--mantine-color-disabled-color);
|
|
79
|
+
--color-disabled-border: var(--mantine-color-disabled-border);
|
|
67
80
|
|
|
68
81
|
/* spacing */
|
|
69
82
|
--spacing-xs: var(--mantine-spacing-xs);
|
|
@@ -179,7 +192,7 @@ ${Object.entries(theme.breakpoints ?? {})
|
|
|
179
192
|
)
|
|
180
193
|
.join("\n")}
|
|
181
194
|
|
|
182
|
-
/*
|
|
195
|
+
/* read back tailwind's default containers vars to fix #24 */
|
|
183
196
|
--size-3xs: 16rem;
|
|
184
197
|
--size-2xs: 18rem;
|
|
185
198
|
--size-xs: 20rem;
|