tailwind-preset-mantine 1.3.0 → 1.3.2
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/package.json +3 -3
- package/src/index.js +21 -20
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tailwind-preset-mantine",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.2",
|
|
4
4
|
"description": "Integrate Mantine with Tailwind CSS",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"mantine",
|
|
@@ -21,9 +21,9 @@
|
|
|
21
21
|
"types": "src/index.d.ts",
|
|
22
22
|
"devDependencies": {
|
|
23
23
|
"@biomejs/biome": "^1.9.4",
|
|
24
|
-
"@mantine/core": "^7.
|
|
24
|
+
"@mantine/core": "^7.14.3",
|
|
25
25
|
"bumpp": "^9.8.1",
|
|
26
|
-
"tailwindcss": "^3.4.
|
|
26
|
+
"tailwindcss": "^3.4.16"
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|
|
29
29
|
"@mantine/core": "^7",
|
package/src/index.js
CHANGED
|
@@ -50,6 +50,18 @@ module.exports = function tailwindPresetMantine({
|
|
|
50
50
|
breakpoints: mantineBreakpoints,
|
|
51
51
|
});
|
|
52
52
|
|
|
53
|
+
/**
|
|
54
|
+
* @type {NonNullable<TailwindConfig['theme']>['screens']}
|
|
55
|
+
*/
|
|
56
|
+
const screens = Object.entries(mergedMantineBreakpoints).reduce(
|
|
57
|
+
(acc, [key, value]) => {
|
|
58
|
+
acc[key] = value;
|
|
59
|
+
acc[`max-${key}`] = { raw: `not all and (min-width: ${value})` };
|
|
60
|
+
return acc;
|
|
61
|
+
},
|
|
62
|
+
{},
|
|
63
|
+
);
|
|
64
|
+
|
|
53
65
|
/**
|
|
54
66
|
* @type {TailwindConfig}
|
|
55
67
|
*/
|
|
@@ -58,13 +70,7 @@ module.exports = function tailwindPresetMantine({
|
|
|
58
70
|
darkMode: ["selector", '[data-mantine-color-scheme="dark"]'],
|
|
59
71
|
theme: {
|
|
60
72
|
extend: {
|
|
61
|
-
screens
|
|
62
|
-
xs: mergedMantineBreakpoints.xs,
|
|
63
|
-
sm: mergedMantineBreakpoints.sm,
|
|
64
|
-
md: mergedMantineBreakpoints.md,
|
|
65
|
-
lg: mergedMantineBreakpoints.lg,
|
|
66
|
-
xl: mergedMantineBreakpoints.xl,
|
|
67
|
-
},
|
|
73
|
+
screens,
|
|
68
74
|
fontFamily: {
|
|
69
75
|
DEFAULT: ["var(--mantine-font-family)"],
|
|
70
76
|
sans: ["var(--mantine-font-family)"],
|
|
@@ -249,17 +255,16 @@ function generateVariantSpecificColors(mantineColors) {
|
|
|
249
255
|
colors[`${color}-filled`] =
|
|
250
256
|
`rgb(from var(--mantine-color-${color}-filled) r g b / <alpha-value>)`;
|
|
251
257
|
colors[`${color}-filled-hover`] =
|
|
252
|
-
`
|
|
253
|
-
colors[`${color}-light`] =
|
|
254
|
-
`rgb(from var(--mantine-color-${color}-light) r g b / <alpha-value>)`;
|
|
258
|
+
`var(--mantine-color-${color}-filled-hover)`;
|
|
259
|
+
colors[`${color}-light`] = `var(--mantine-color-${color}-light)`;
|
|
255
260
|
colors[`${color}-light-hover`] =
|
|
256
|
-
`
|
|
261
|
+
`var(--mantine-color-${color}-light-hover)`;
|
|
257
262
|
colors[`${color}-light-color`] =
|
|
258
263
|
`rgb(from var(--mantine-color-${color}-light-color) r g b / <alpha-value>)`;
|
|
259
264
|
colors[`${color}-outline`] =
|
|
260
265
|
`rgb(from var(--mantine-color-${color}-outline) r g b / <alpha-value>)`;
|
|
261
266
|
colors[`${color}-outline-hover`] =
|
|
262
|
-
`
|
|
267
|
+
`var(--mantine-color-${color}-outline-hover)`;
|
|
263
268
|
}
|
|
264
269
|
|
|
265
270
|
return colors;
|
|
@@ -272,18 +277,14 @@ function generateVariantSpecificPrimaryColors() {
|
|
|
272
277
|
const colors = {
|
|
273
278
|
"primary-filled":
|
|
274
279
|
"rgb(from var(--mantine-primary-color-filled) r g b / <alpha-value>)",
|
|
275
|
-
"primary-filled-hover":
|
|
276
|
-
|
|
277
|
-
"primary-light":
|
|
278
|
-
"rgb(from var(--mantine-primary-color-light) r g b / <alpha-value>)",
|
|
279
|
-
"primary-light-hover":
|
|
280
|
-
"rgb(from var(--mantine-primary-color-light-hover) r g b / <alpha-value>)",
|
|
280
|
+
"primary-filled-hover": "var(--mantine-primary-color-filled-hover)",
|
|
281
|
+
"primary-light": "var(--mantine-primary-color-light)",
|
|
282
|
+
"primary-light-hover": "var(--mantine-primary-color-light-hover)",
|
|
281
283
|
"primary-light-color":
|
|
282
284
|
"rgb(from var(--mantine-primary-color-light-color) r g b / <alpha-value>)",
|
|
283
285
|
"primary-outline":
|
|
284
286
|
"rgb(from var(--mantine-primary-color-outline) r g b / <alpha-value>)",
|
|
285
|
-
"primary-outline-hover":
|
|
286
|
-
"rgb(from var(--mantine-primary-color-outline-hover) r g b / <alpha-value>)",
|
|
287
|
+
"primary-outline-hover": "var(--mantine-primary-color-outline-hover)",
|
|
287
288
|
};
|
|
288
289
|
|
|
289
290
|
return colors;
|