tailwind-preset-mantine 2.0.6 → 3.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 (5) hide show
  1. package/README.md +4 -3
  2. package/package.json +8 -7
  3. package/src/generate.js +17 -4
  4. package/src/index.css +11 -2
  5. package/src/theme.css +11 -2
package/README.md CHANGED
@@ -2,14 +2,15 @@
2
2
 
3
3
  [![npm version](https://img.shields.io/npm/v/tailwind-preset-mantine.svg)](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)](https://mantine.dev/).
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 | v2 (current) |
12
- | v3 | v7 | ([v1](https://github.com/songkeys/tailwind-preset-mantine/tree/v1))* |
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": "2.0.6",
3
+ "version": "3.0.0",
4
4
  "description": "Integrate Mantine with Tailwind CSS",
5
5
  "keywords": [
6
6
  "mantine",
@@ -30,21 +30,22 @@
30
30
  "src"
31
31
  ],
32
32
  "dependencies": {
33
- "tsx": "^4.19.3"
33
+ "tsx": "^4.20.5"
34
34
  },
35
35
  "devDependencies": {
36
- "@biomejs/biome": "^1.9.4",
37
- "@mantine/core": "^7.17.4",
38
- "bumpp": "^10.1.0"
36
+ "@biomejs/biome": "^2.2.4",
37
+ "@mantine/core": "^8.3.1",
38
+ "bumpp": "^10.2.3"
39
39
  },
40
40
  "peerDependencies": {
41
- "@mantine/core": "^7",
41
+ "@mantine/core": "^7 || ^8",
42
42
  "tailwindcss": "^4"
43
43
  },
44
44
  "scripts": {
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/global.css
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
- ${isDefault ? '@custom-variant dark (&:where([data-mantine-color-scheme="dark"], [data-mantine-color-scheme="dark"] *));' : ""}
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);
67
+ --color-bright: var(--mantine-color-bright);
62
68
  --color-body: var(--mantine-color-text);
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-color);
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
- /* readd back tailwind's default containers vars to fix #24 */
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;
package/src/index.css CHANGED
@@ -36,15 +36,24 @@
36
36
  --color-primary-light-color: var(--mantine-primary-color-light-color);
37
37
  --color-primary-outline: var(--mantine-primary-color-outline);
38
38
  --color-primary-outline-hover: var(--mantine-primary-color-outline-hover);
39
+ --color-primary-contrast: var(--mantine-primary-color-contrast);
39
40
 
40
41
  /* colors - others */
41
42
  --color-white: var(--mantine-color-white);
42
43
  --color-black: var(--mantine-color-black);
44
+ --color-bright: var(--mantine-color-bright);
43
45
  --color-body: var(--mantine-color-text);
44
46
  --color-error: var(--mantine-color-error);
45
47
  --color-placeholder: var(--mantine-color-placeholder);
46
48
  --color-anchor: var(--mantine-color-anchor);
47
- --color-default: var(--mantine-color-default-color);
49
+ --color-default: var(--mantine-color-default);
50
+ --color-default-hover: var(--mantine-color-default-hover);
51
+ --color-default-color: var(--mantine-color-default-color);
52
+ --color-default-border: var(--mantine-color-default-border);
53
+ --color-dimmed: var(--mantine-color-dimmed);
54
+ --color-disabled: var(--mantine-color-disabled);
55
+ --color-disabled-color: var(--mantine-color-disabled-color);
56
+ --color-disabled-border: var(--mantine-color-disabled-border);
48
57
 
49
58
  /* spacing */
50
59
  --spacing-xs: var(--mantine-spacing-xs);
@@ -406,7 +415,7 @@
406
415
  --breakpoint-lg: 75em;
407
416
  --breakpoint-xl: 88em;
408
417
 
409
- /* readd back tailwind's default containers vars to fix #24 */
418
+ /* read back tailwind's default containers vars to fix #24 */
410
419
  --size-3xs: 16rem;
411
420
  --size-2xs: 18rem;
412
421
  --size-xs: 20rem;
package/src/theme.css CHANGED
@@ -29,15 +29,24 @@
29
29
  --color-primary-light-color: var(--mantine-primary-color-light-color);
30
30
  --color-primary-outline: var(--mantine-primary-color-outline);
31
31
  --color-primary-outline-hover: var(--mantine-primary-color-outline-hover);
32
+ --color-primary-contrast: var(--mantine-primary-color-contrast);
32
33
 
33
34
  /* colors - others */
34
35
  --color-white: var(--mantine-color-white);
35
36
  --color-black: var(--mantine-color-black);
37
+ --color-bright: var(--mantine-color-bright);
36
38
  --color-body: var(--mantine-color-text);
37
39
  --color-error: var(--mantine-color-error);
38
40
  --color-placeholder: var(--mantine-color-placeholder);
39
41
  --color-anchor: var(--mantine-color-anchor);
40
- --color-default: var(--mantine-color-default-color);
42
+ --color-default: var(--mantine-color-default);
43
+ --color-default-hover: var(--mantine-color-default-hover);
44
+ --color-default-color: var(--mantine-color-default-color);
45
+ --color-default-border: var(--mantine-color-default-border);
46
+ --color-dimmed: var(--mantine-color-dimmed);
47
+ --color-disabled: var(--mantine-color-disabled);
48
+ --color-disabled-color: var(--mantine-color-disabled-color);
49
+ --color-disabled-border: var(--mantine-color-disabled-border);
41
50
 
42
51
  /* spacing */
43
52
  --spacing-xs: var(--mantine-spacing-xs);
@@ -399,7 +408,7 @@
399
408
  --breakpoint-lg: 75em;
400
409
  --breakpoint-xl: 88em;
401
410
 
402
- /* readd back tailwind's default containers vars to fix #24 */
411
+ /* read back tailwind's default containers vars to fix #24 */
403
412
  --size-3xs: 16rem;
404
413
  --size-2xs: 18rem;
405
414
  --size-xs: 20rem;