tailwind-preset-mantine 2.0.0-beta.6 → 2.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 +16 -4
- package/package.json +4 -1
- package/src/generate.js +35 -35
- package/src/index.css +230 -230
- package/src/theme.css +230 -230
- package/.github/workflows/release.yml +0 -33
- package/.vscode/settings.json +0 -21
- package/biome.json +0 -9
- package/scripts/generate.js +0 -16
- package/test/cli.test.js +0 -132
- package/test/fixtures/cjs-theme.cjs +0 -18
- package/test/fixtures/custom-theme-ts.ts +0 -39
- package/test/fixtures/custom-theme.js +0 -39
- package/test/fixtures/default-theme.js +0 -1
- package/test/fixtures/invalid-theme.js +0 -1
- package/theme.css +0 -63
package/README.md
CHANGED
|
@@ -31,6 +31,20 @@ To use the preset in your Tailwind CSS configuration, add it to the css file:
|
|
|
31
31
|
@import "tailwind-preset-mantine";
|
|
32
32
|
```
|
|
33
33
|
|
|
34
|
+
That's it!
|
|
35
|
+
|
|
36
|
+
Now you can use tailwind with mantine's style applied:
|
|
37
|
+
|
|
38
|
+
```tsx
|
|
39
|
+
import { Button } from '@mantine/core';
|
|
40
|
+
|
|
41
|
+
export default function Page() {
|
|
42
|
+
// `bg-red-500` will be `background-color: var(--mantine-color-red-5)`
|
|
43
|
+
// `text-white` will be `color: var(--mantine-color-white)`
|
|
44
|
+
return <Button className="bg-red-500 text-white">Hello</Button>
|
|
45
|
+
}
|
|
46
|
+
```
|
|
47
|
+
|
|
34
48
|
2. Manual import (advanced)
|
|
35
49
|
|
|
36
50
|
Note that you don't have to import tailwind or mantine styles, this preset will handle that for you. If you want to import it yourself, you can use the `./theme.css` file:
|
|
@@ -107,11 +121,9 @@ Options:
|
|
|
107
121
|
|
|
108
122
|
## Minimal template
|
|
109
123
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
<https://github.com/songkeys/next-app-mantine-tailwind-template> -->
|
|
124
|
+
Here's a minimal template that you can use to get started:
|
|
113
125
|
|
|
114
|
-
|
|
126
|
+
<https://github.com/songkeys/next-app-mantine-tailwind-template/tree/tw4>
|
|
115
127
|
|
|
116
128
|
## License
|
|
117
129
|
|
package/package.json
CHANGED
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tailwind-preset-mantine",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.1",
|
|
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
|
+
],
|
|
10
13
|
"homepage": "https://github.com/songkeys/tailwind-preset-mantine#readme",
|
|
11
14
|
"bugs": {
|
|
12
15
|
"url": "https://github.com/songkeys/tailwind-preset-mantine/issues"
|
package/src/generate.js
CHANGED
|
@@ -37,35 +37,35 @@ ${isDefault ? '@custom-variant dark (&:where([data-mantine-color-scheme="dark"],
|
|
|
37
37
|
--font-headings: var(--mantine-font-family-headings);
|
|
38
38
|
|
|
39
39
|
/* colors - primary */
|
|
40
|
-
--color-primary-50:
|
|
41
|
-
--color-primary-100:
|
|
42
|
-
--color-primary-200:
|
|
43
|
-
--color-primary-300:
|
|
44
|
-
--color-primary-400:
|
|
45
|
-
--color-primary-500:
|
|
46
|
-
--color-primary-600:
|
|
47
|
-
--color-primary-700:
|
|
48
|
-
--color-primary-800:
|
|
49
|
-
--color-primary-900:
|
|
50
|
-
--color-primary:
|
|
40
|
+
--color-primary-50: var(--mantine-primary-color-0);
|
|
41
|
+
--color-primary-100: var(--mantine-primary-color-1);
|
|
42
|
+
--color-primary-200: var(--mantine-primary-color-2);
|
|
43
|
+
--color-primary-300: var(--mantine-primary-color-3);
|
|
44
|
+
--color-primary-400: var(--mantine-primary-color-4);
|
|
45
|
+
--color-primary-500: var(--mantine-primary-color-5);
|
|
46
|
+
--color-primary-600: var(--mantine-primary-color-6);
|
|
47
|
+
--color-primary-700: var(--mantine-primary-color-7);
|
|
48
|
+
--color-primary-800: var(--mantine-primary-color-8);
|
|
49
|
+
--color-primary-900: var(--mantine-primary-color-9);
|
|
50
|
+
--color-primary: var(--mantine-primary-color-filled);
|
|
51
51
|
|
|
52
52
|
/* colors - variant specific primary */
|
|
53
|
-
--color-primary-filled:
|
|
53
|
+
--color-primary-filled: var(--mantine-primary-color-filled);
|
|
54
54
|
--color-primary-filled-hover: var(--mantine-primary-color-filled-hover);
|
|
55
55
|
--color-primary-light: var(--mantine-primary-color-light);
|
|
56
56
|
--color-primary-light-hover: var(--mantine-primary-color-light-hover);
|
|
57
|
-
--color-primary-light-color:
|
|
58
|
-
--color-primary-outline:
|
|
57
|
+
--color-primary-light-color: var(--mantine-primary-color-light-color);
|
|
58
|
+
--color-primary-outline: var(--mantine-primary-color-outline);
|
|
59
59
|
--color-primary-outline-hover: var(--mantine-primary-color-outline-hover);
|
|
60
60
|
|
|
61
61
|
/* colors - others */
|
|
62
|
-
--color-white:
|
|
63
|
-
--color-black:
|
|
64
|
-
--color-body:
|
|
65
|
-
--color-error:
|
|
66
|
-
--color-placeholder:
|
|
67
|
-
--color-anchor:
|
|
68
|
-
--color-default:
|
|
62
|
+
--color-white: var(--mantine-color-white);
|
|
63
|
+
--color-black: var(--mantine-color-black);
|
|
64
|
+
--color-body: var(--mantine-color-text);
|
|
65
|
+
--color-error: var(--mantine-color-error);
|
|
66
|
+
--color-placeholder: var(--mantine-color-placeholder);
|
|
67
|
+
--color-anchor: var(--mantine-color-anchor);
|
|
68
|
+
--color-default: var(--mantine-color-default-color);
|
|
69
69
|
|
|
70
70
|
/* spacing */
|
|
71
71
|
--spacing-xs: var(--mantine-spacing-xs);
|
|
@@ -146,17 +146,17 @@ ${isDefault ? '@custom-variant dark (&:where([data-mantine-color-scheme="dark"],
|
|
|
146
146
|
${Object.keys(theme.colors ?? {})
|
|
147
147
|
.map((key) =>
|
|
148
148
|
`
|
|
149
|
-
--color-${key}-50:
|
|
150
|
-
--color-${key}-100:
|
|
151
|
-
--color-${key}-200:
|
|
152
|
-
--color-${key}-300:
|
|
153
|
-
--color-${key}-400:
|
|
154
|
-
--color-${key}-500:
|
|
155
|
-
--color-${key}-600:
|
|
156
|
-
--color-${key}-700:
|
|
157
|
-
--color-${key}-800:
|
|
158
|
-
--color-${key}-900:
|
|
159
|
-
--color-${key}:
|
|
149
|
+
--color-${key}-50: var(--mantine-color-${key}-0);
|
|
150
|
+
--color-${key}-100: var(--mantine-color-${key}-1);
|
|
151
|
+
--color-${key}-200: var(--mantine-color-${key}-2);
|
|
152
|
+
--color-${key}-300: var(--mantine-color-${key}-3);
|
|
153
|
+
--color-${key}-400: var(--mantine-color-${key}-4);
|
|
154
|
+
--color-${key}-500: var(--mantine-color-${key}-5);
|
|
155
|
+
--color-${key}-600: var(--mantine-color-${key}-6);
|
|
156
|
+
--color-${key}-700: var(--mantine-color-${key}-7);
|
|
157
|
+
--color-${key}-800: var(--mantine-color-${key}-8);
|
|
158
|
+
--color-${key}-900: var(--mantine-color-${key}-9);
|
|
159
|
+
--color-${key}: var(--mantine-color-${key}-filled);
|
|
160
160
|
`.trimEnd(),
|
|
161
161
|
)
|
|
162
162
|
.join("\n")}
|
|
@@ -165,12 +165,12 @@ ${isDefault ? '@custom-variant dark (&:where([data-mantine-color-scheme="dark"],
|
|
|
165
165
|
${Object.keys(theme.colors ?? {})
|
|
166
166
|
.map((key) =>
|
|
167
167
|
`
|
|
168
|
-
--color-${key}-filled:
|
|
168
|
+
--color-${key}-filled: var(--mantine-color-${key}-filled);
|
|
169
169
|
--color-${key}-filled-hover: var(--mantine-color-${key}-filled-hover);
|
|
170
170
|
--color-${key}-light: var(--mantine-color-${key}-light);
|
|
171
171
|
--color-${key}-light-hover: var(--mantine-color-${key}-light-hover);
|
|
172
|
-
--color-${key}-light-color:
|
|
173
|
-
--color-${key}-outline:
|
|
172
|
+
--color-${key}-light-color: var(--mantine-color-${key}-light-color);
|
|
173
|
+
--color-${key}-outline: var(--mantine-color-${key}-outline);
|
|
174
174
|
--color-${key}-outline-hover: var(--mantine-color-${key}-outline-hover);
|
|
175
175
|
`.trimEnd(),
|
|
176
176
|
)
|