@mantine/vanilla-extract 7.0.0-alpha.13

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 ADDED
@@ -0,0 +1,21 @@
1
+ # Mantine Store
2
+
3
+ [![npm](https://img.shields.io/npm/dm/@mantine/vanilla-extract)](https://www.npmjs.com/package/@mantine/vanilla-extract)
4
+
5
+ Mantine theme integration with vanilla-extract
6
+
7
+ [View documentation](https://mantine.dev/)
8
+
9
+ ## Installation
10
+
11
+ ```bash
12
+ # With yarn
13
+ yarn add @mantine/vanilla-extract
14
+
15
+ # With npm
16
+ npm install @mantine/vanilla-extract
17
+ ```
18
+
19
+ ## License
20
+
21
+ MIT
package/cjs/index.js ADDED
@@ -0,0 +1,11 @@
1
+ 'use client';
2
+ 'use strict';
3
+
4
+ Object.defineProperty(exports, '__esModule', { value: true });
5
+
6
+ var themeToVars = require('./theme-to-vars.js');
7
+
8
+
9
+
10
+ exports.themeToVars = themeToVars.themeToVars;
11
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
@@ -0,0 +1,101 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var core = require('@mantine/core');
6
+
7
+ function getSizesVariables(theme, themeKey, name) {
8
+ return Object.keys(theme[themeKey]).reduce((acc, size) => {
9
+ acc[size] = `var(--mantine-${name}-${size})`;
10
+ return acc;
11
+ }, {});
12
+ }
13
+ function getBreakpointValue(value, theme) {
14
+ return value in theme.breakpoints ? theme.breakpoints[value] : core.em(value);
15
+ }
16
+ function themeToVars(theme) {
17
+ const mergedTheme = core.mergeMantineTheme(core.DEFAULT_THEME, theme);
18
+ const breakpoints = getSizesVariables(mergedTheme, "breakpoints", "breakpoint");
19
+ const fontSizes = getSizesVariables(mergedTheme, "fontSizes", "font-size");
20
+ const lineHeights = getSizesVariables(mergedTheme, "lineHeights", "line-height");
21
+ const shadows = getSizesVariables(mergedTheme, "shadows", "shadow");
22
+ const radius = getSizesVariables(mergedTheme, "radius", "radius");
23
+ const spacing = getSizesVariables(mergedTheme, "spacing", "spacing");
24
+ const headings = Object.keys(mergedTheme.headings).reduce(
25
+ (acc, heading) => {
26
+ acc[heading] = {
27
+ fontSize: `var(--mantine-${heading}-font-size)`,
28
+ lineHeight: `var(--mantine-${heading}-line-height)`,
29
+ fontWeight: `var(--mantine-${heading}-font-weight)`
30
+ };
31
+ return acc;
32
+ },
33
+ {}
34
+ );
35
+ const colors = Object.keys(mergedTheme.colors).reduce(
36
+ (acc, color) => {
37
+ acc[color] = {
38
+ 0: `var(--mantine-color-${color}-0)`,
39
+ 1: `var(--mantine-color-${color}-1)`,
40
+ 2: `var(--mantine-color-${color}-2)`,
41
+ 3: `var(--mantine-color-${color}-3)`,
42
+ 4: `var(--mantine-color-${color}-4)`,
43
+ 5: `var(--mantine-color-${color}-5)`,
44
+ 6: `var(--mantine-color-${color}-6)`,
45
+ 7: `var(--mantine-color-${color}-7)`,
46
+ 8: `var(--mantine-color-${color}-8)`,
47
+ 9: `var(--mantine-color-${color}-9)`,
48
+ filled: `var(--mantine-color-${color}-filled)`,
49
+ filledHover: `var(--mantine-color-${color}-filled-hover)`,
50
+ light: `var(--mantine-color-${color}-light)`,
51
+ lightHover: `var(--mantine-color-${color}-light-hover)`,
52
+ lightColor: `var(--mantine-color-${color}-light-color)`,
53
+ outline: `var(--mantine-color-${color}-outline)`,
54
+ outlineHover: `var(--mantine-color-${color}-outline-hover)`
55
+ };
56
+ return acc;
57
+ },
58
+ {
59
+ white: "var(--mantine-color-white)",
60
+ black: "var(--mantine-color-black)",
61
+ primary: "var(--mantine-color-primary)",
62
+ text: "var(--mantine-color-text)",
63
+ body: "var(--mantine-color-body)",
64
+ error: "var(--mantine-color-error)",
65
+ placeholder: "var(--mantine-color-placeholder)",
66
+ anchor: "var(--mantine-color-anchor)",
67
+ default: "var(--mantine-color-default)",
68
+ defaultHover: "var(--mantine-color-default-hover)",
69
+ defaultColor: "var(--mantine-color-default-color)",
70
+ defaultBorder: "var(--mantine-color-default-border)",
71
+ dimmed: "var(--mantine-color-dimmed)"
72
+ }
73
+ );
74
+ return {
75
+ scale: "var(--mantine-scale)",
76
+ cursorType: "var(--mantine-cursor-type)",
77
+ webkitFontSmoothing: "var(--mantine-webkit-font-smoothing)",
78
+ mozFontSmoothing: "var(--mantine-moz-font-smoothing)",
79
+ lineHeight: "var(--mantine-line-height)",
80
+ fontFamily: "var(--mantine-font-family)",
81
+ fontFamilyMonospace: "var(--mantine-font-family-monospace)",
82
+ fontFamilyHeadings: "var(--mantine-font-family-headings)",
83
+ headingFontWeight: "var(--mantine-heading-font-weight)",
84
+ radiusDefault: "var(--mantine-radius-default)",
85
+ breakpoints,
86
+ fontSizes,
87
+ lineHeights,
88
+ shadows,
89
+ radius,
90
+ headings,
91
+ spacing,
92
+ colors,
93
+ darkSelector: '[data-mantine-color-scheme="dark"] &',
94
+ lightSelector: '[data-mantine-color-scheme="light"] &',
95
+ smallerThan: (breakpoint) => `(max-width: ${getBreakpointValue(breakpoint, mergedTheme)})`,
96
+ largerThan: (breakpoint) => `(min-width: ${getBreakpointValue(breakpoint, mergedTheme)})`
97
+ };
98
+ }
99
+
100
+ exports.themeToVars = themeToVars;
101
+ //# sourceMappingURL=theme-to-vars.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"theme-to-vars.js","sources":["../src/theme-to-vars.ts"],"sourcesContent":["import {\n DEFAULT_THEME,\n MantineTheme,\n MantineThemeOverride,\n em,\n mergeMantineTheme,\n} from '@mantine/core';\nimport {\n Breakpoints,\n Colors,\n FontSizes,\n Heading,\n Headings,\n LineHeights,\n MantineVars,\n Radius,\n Shadows,\n Spacing,\n} from './types';\n\nfunction getSizesVariables<Result>(theme: any, themeKey: string, name: string): Result {\n return Object.keys(theme[themeKey]).reduce((acc: any, size) => {\n acc[size] = `var(--mantine-${name}-${size})`;\n return acc;\n }, {});\n}\n\nfunction getBreakpointValue(value: string | number, theme: MantineTheme) {\n return value in theme.breakpoints ? (theme.breakpoints as any)[value] : em(value);\n}\n\nexport function themeToVars(theme: MantineThemeOverride): MantineVars {\n const mergedTheme = mergeMantineTheme(DEFAULT_THEME, theme);\n\n const breakpoints = getSizesVariables<Breakpoints>(mergedTheme, 'breakpoints', 'breakpoint');\n\n const fontSizes = getSizesVariables<FontSizes>(mergedTheme, 'fontSizes', 'font-size');\n\n const lineHeights = getSizesVariables<LineHeights>(mergedTheme, 'lineHeights', 'line-height');\n\n const shadows = getSizesVariables<Shadows>(mergedTheme, 'shadows', 'shadow');\n const radius = getSizesVariables<Radius>(mergedTheme, 'radius', 'radius');\n const spacing = getSizesVariables<Spacing>(mergedTheme, 'spacing', 'spacing');\n\n const headings = Object.keys(mergedTheme.headings).reduce(\n (acc: Record<string, Heading>, heading) => {\n acc[heading] = {\n fontSize: `var(--mantine-${heading}-font-size)`,\n lineHeight: `var(--mantine-${heading}-line-height)`,\n fontWeight: `var(--mantine-${heading}-font-weight)`,\n };\n return acc;\n },\n {}\n ) as Headings;\n\n const colors = Object.keys(mergedTheme.colors).reduce(\n (acc: any, color) => {\n acc[color] = {\n 0: `var(--mantine-color-${color}-0)`,\n 1: `var(--mantine-color-${color}-1)`,\n 2: `var(--mantine-color-${color}-2)`,\n 3: `var(--mantine-color-${color}-3)`,\n 4: `var(--mantine-color-${color}-4)`,\n 5: `var(--mantine-color-${color}-5)`,\n 6: `var(--mantine-color-${color}-6)`,\n 7: `var(--mantine-color-${color}-7)`,\n 8: `var(--mantine-color-${color}-8)`,\n 9: `var(--mantine-color-${color}-9)`,\n filled: `var(--mantine-color-${color}-filled)`,\n filledHover: `var(--mantine-color-${color}-filled-hover)`,\n light: `var(--mantine-color-${color}-light)`,\n lightHover: `var(--mantine-color-${color}-light-hover)`,\n lightColor: `var(--mantine-color-${color}-light-color)`,\n outline: `var(--mantine-color-${color}-outline)`,\n outlineHover: `var(--mantine-color-${color}-outline-hover)`,\n };\n\n return acc;\n },\n {\n white: 'var(--mantine-color-white)',\n black: 'var(--mantine-color-black)',\n primary: 'var(--mantine-color-primary)',\n text: 'var(--mantine-color-text)',\n body: 'var(--mantine-color-body)',\n error: 'var(--mantine-color-error)',\n placeholder: 'var(--mantine-color-placeholder)',\n anchor: 'var(--mantine-color-anchor)',\n default: 'var(--mantine-color-default)',\n defaultHover: 'var(--mantine-color-default-hover)',\n defaultColor: 'var(--mantine-color-default-color)',\n defaultBorder: 'var(--mantine-color-default-border)',\n dimmed: 'var(--mantine-color-dimmed)',\n }\n ) as Colors;\n\n return {\n scale: 'var(--mantine-scale)',\n cursorType: 'var(--mantine-cursor-type)',\n webkitFontSmoothing: 'var(--mantine-webkit-font-smoothing)',\n mozFontSmoothing: 'var(--mantine-moz-font-smoothing)',\n lineHeight: 'var(--mantine-line-height)',\n fontFamily: 'var(--mantine-font-family)',\n fontFamilyMonospace: 'var(--mantine-font-family-monospace)',\n fontFamilyHeadings: 'var(--mantine-font-family-headings)',\n headingFontWeight: 'var(--mantine-heading-font-weight)',\n radiusDefault: 'var(--mantine-radius-default)',\n breakpoints,\n fontSizes,\n lineHeights,\n shadows,\n radius,\n headings,\n spacing,\n colors,\n\n darkSelector: '[data-mantine-color-scheme=\"dark\"] &',\n lightSelector: '[data-mantine-color-scheme=\"light\"] &',\n\n smallerThan: (breakpoint) => `(max-width: ${getBreakpointValue(breakpoint, mergedTheme)})`,\n largerThan: (breakpoint) => `(min-width: ${getBreakpointValue(breakpoint, mergedTheme)})`,\n };\n}\n"],"names":["em","mergeMantineTheme","DEFAULT_THEME"],"mappings":";;;;;;AAKA,SAAS,iBAAiB,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE;AAClD,EAAE,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK;AAC5D,IAAI,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;AACjD,IAAI,OAAO,GAAG,CAAC;AACf,GAAG,EAAE,EAAE,CAAC,CAAC;AACT,CAAC;AACD,SAAS,kBAAkB,CAAC,KAAK,EAAE,KAAK,EAAE;AAC1C,EAAE,OAAO,KAAK,IAAI,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,GAAGA,OAAE,CAAC,KAAK,CAAC,CAAC;AAC3E,CAAC;AACM,SAAS,WAAW,CAAC,KAAK,EAAE;AACnC,EAAE,MAAM,WAAW,GAAGC,sBAAiB,CAACC,kBAAa,EAAE,KAAK,CAAC,CAAC;AAC9D,EAAE,MAAM,WAAW,GAAG,iBAAiB,CAAC,WAAW,EAAE,aAAa,EAAE,YAAY,CAAC,CAAC;AAClF,EAAE,MAAM,SAAS,GAAG,iBAAiB,CAAC,WAAW,EAAE,WAAW,EAAE,WAAW,CAAC,CAAC;AAC7E,EAAE,MAAM,WAAW,GAAG,iBAAiB,CAAC,WAAW,EAAE,aAAa,EAAE,aAAa,CAAC,CAAC;AACnF,EAAE,MAAM,OAAO,GAAG,iBAAiB,CAAC,WAAW,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC;AACtE,EAAE,MAAM,MAAM,GAAG,iBAAiB,CAAC,WAAW,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;AACpE,EAAE,MAAM,OAAO,GAAG,iBAAiB,CAAC,WAAW,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;AACvE,EAAE,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,MAAM;AAC3D,IAAI,CAAC,GAAG,EAAE,OAAO,KAAK;AACtB,MAAM,GAAG,CAAC,OAAO,CAAC,GAAG;AACrB,QAAQ,QAAQ,EAAE,CAAC,cAAc,EAAE,OAAO,CAAC,WAAW,CAAC;AACvD,QAAQ,UAAU,EAAE,CAAC,cAAc,EAAE,OAAO,CAAC,aAAa,CAAC;AAC3D,QAAQ,UAAU,EAAE,CAAC,cAAc,EAAE,OAAO,CAAC,aAAa,CAAC;AAC3D,OAAO,CAAC;AACR,MAAM,OAAO,GAAG,CAAC;AACjB,KAAK;AACL,IAAI,EAAE;AACN,GAAG,CAAC;AACJ,EAAE,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM;AACvD,IAAI,CAAC,GAAG,EAAE,KAAK,KAAK;AACpB,MAAM,GAAG,CAAC,KAAK,CAAC,GAAG;AACnB,QAAQ,CAAC,EAAE,CAAC,oBAAoB,EAAE,KAAK,CAAC,GAAG,CAAC;AAC5C,QAAQ,CAAC,EAAE,CAAC,oBAAoB,EAAE,KAAK,CAAC,GAAG,CAAC;AAC5C,QAAQ,CAAC,EAAE,CAAC,oBAAoB,EAAE,KAAK,CAAC,GAAG,CAAC;AAC5C,QAAQ,CAAC,EAAE,CAAC,oBAAoB,EAAE,KAAK,CAAC,GAAG,CAAC;AAC5C,QAAQ,CAAC,EAAE,CAAC,oBAAoB,EAAE,KAAK,CAAC,GAAG,CAAC;AAC5C,QAAQ,CAAC,EAAE,CAAC,oBAAoB,EAAE,KAAK,CAAC,GAAG,CAAC;AAC5C,QAAQ,CAAC,EAAE,CAAC,oBAAoB,EAAE,KAAK,CAAC,GAAG,CAAC;AAC5C,QAAQ,CAAC,EAAE,CAAC,oBAAoB,EAAE,KAAK,CAAC,GAAG,CAAC;AAC5C,QAAQ,CAAC,EAAE,CAAC,oBAAoB,EAAE,KAAK,CAAC,GAAG,CAAC;AAC5C,QAAQ,CAAC,EAAE,CAAC,oBAAoB,EAAE,KAAK,CAAC,GAAG,CAAC;AAC5C,QAAQ,MAAM,EAAE,CAAC,oBAAoB,EAAE,KAAK,CAAC,QAAQ,CAAC;AACtD,QAAQ,WAAW,EAAE,CAAC,oBAAoB,EAAE,KAAK,CAAC,cAAc,CAAC;AACjE,QAAQ,KAAK,EAAE,CAAC,oBAAoB,EAAE,KAAK,CAAC,OAAO,CAAC;AACpD,QAAQ,UAAU,EAAE,CAAC,oBAAoB,EAAE,KAAK,CAAC,aAAa,CAAC;AAC/D,QAAQ,UAAU,EAAE,CAAC,oBAAoB,EAAE,KAAK,CAAC,aAAa,CAAC;AAC/D,QAAQ,OAAO,EAAE,CAAC,oBAAoB,EAAE,KAAK,CAAC,SAAS,CAAC;AACxD,QAAQ,YAAY,EAAE,CAAC,oBAAoB,EAAE,KAAK,CAAC,eAAe,CAAC;AACnE,OAAO,CAAC;AACR,MAAM,OAAO,GAAG,CAAC;AACjB,KAAK;AACL,IAAI;AACJ,MAAM,KAAK,EAAE,4BAA4B;AACzC,MAAM,KAAK,EAAE,4BAA4B;AACzC,MAAM,OAAO,EAAE,8BAA8B;AAC7C,MAAM,IAAI,EAAE,2BAA2B;AACvC,MAAM,IAAI,EAAE,2BAA2B;AACvC,MAAM,KAAK,EAAE,4BAA4B;AACzC,MAAM,WAAW,EAAE,kCAAkC;AACrD,MAAM,MAAM,EAAE,6BAA6B;AAC3C,MAAM,OAAO,EAAE,8BAA8B;AAC7C,MAAM,YAAY,EAAE,oCAAoC;AACxD,MAAM,YAAY,EAAE,oCAAoC;AACxD,MAAM,aAAa,EAAE,qCAAqC;AAC1D,MAAM,MAAM,EAAE,6BAA6B;AAC3C,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,OAAO;AACT,IAAI,KAAK,EAAE,sBAAsB;AACjC,IAAI,UAAU,EAAE,4BAA4B;AAC5C,IAAI,mBAAmB,EAAE,sCAAsC;AAC/D,IAAI,gBAAgB,EAAE,mCAAmC;AACzD,IAAI,UAAU,EAAE,4BAA4B;AAC5C,IAAI,UAAU,EAAE,4BAA4B;AAC5C,IAAI,mBAAmB,EAAE,sCAAsC;AAC/D,IAAI,kBAAkB,EAAE,qCAAqC;AAC7D,IAAI,iBAAiB,EAAE,oCAAoC;AAC3D,IAAI,aAAa,EAAE,+BAA+B;AAClD,IAAI,WAAW;AACf,IAAI,SAAS;AACb,IAAI,WAAW;AACf,IAAI,OAAO;AACX,IAAI,MAAM;AACV,IAAI,QAAQ;AACZ,IAAI,OAAO;AACX,IAAI,MAAM;AACV,IAAI,YAAY,EAAE,sCAAsC;AACxD,IAAI,aAAa,EAAE,uCAAuC;AAC1D,IAAI,WAAW,EAAE,CAAC,UAAU,KAAK,CAAC,YAAY,EAAE,kBAAkB,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;AAC9F,IAAI,UAAU,EAAE,CAAC,UAAU,KAAK,CAAC,YAAY,EAAE,kBAAkB,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;AAC7F,GAAG,CAAC;AACJ;;;;"}
package/esm/index.js ADDED
@@ -0,0 +1,3 @@
1
+ 'use client';
2
+ export { themeToVars } from './theme-to-vars.js';
3
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
@@ -0,0 +1,97 @@
1
+ import { mergeMantineTheme, DEFAULT_THEME, em } from '@mantine/core';
2
+
3
+ function getSizesVariables(theme, themeKey, name) {
4
+ return Object.keys(theme[themeKey]).reduce((acc, size) => {
5
+ acc[size] = `var(--mantine-${name}-${size})`;
6
+ return acc;
7
+ }, {});
8
+ }
9
+ function getBreakpointValue(value, theme) {
10
+ return value in theme.breakpoints ? theme.breakpoints[value] : em(value);
11
+ }
12
+ function themeToVars(theme) {
13
+ const mergedTheme = mergeMantineTheme(DEFAULT_THEME, theme);
14
+ const breakpoints = getSizesVariables(mergedTheme, "breakpoints", "breakpoint");
15
+ const fontSizes = getSizesVariables(mergedTheme, "fontSizes", "font-size");
16
+ const lineHeights = getSizesVariables(mergedTheme, "lineHeights", "line-height");
17
+ const shadows = getSizesVariables(mergedTheme, "shadows", "shadow");
18
+ const radius = getSizesVariables(mergedTheme, "radius", "radius");
19
+ const spacing = getSizesVariables(mergedTheme, "spacing", "spacing");
20
+ const headings = Object.keys(mergedTheme.headings).reduce(
21
+ (acc, heading) => {
22
+ acc[heading] = {
23
+ fontSize: `var(--mantine-${heading}-font-size)`,
24
+ lineHeight: `var(--mantine-${heading}-line-height)`,
25
+ fontWeight: `var(--mantine-${heading}-font-weight)`
26
+ };
27
+ return acc;
28
+ },
29
+ {}
30
+ );
31
+ const colors = Object.keys(mergedTheme.colors).reduce(
32
+ (acc, color) => {
33
+ acc[color] = {
34
+ 0: `var(--mantine-color-${color}-0)`,
35
+ 1: `var(--mantine-color-${color}-1)`,
36
+ 2: `var(--mantine-color-${color}-2)`,
37
+ 3: `var(--mantine-color-${color}-3)`,
38
+ 4: `var(--mantine-color-${color}-4)`,
39
+ 5: `var(--mantine-color-${color}-5)`,
40
+ 6: `var(--mantine-color-${color}-6)`,
41
+ 7: `var(--mantine-color-${color}-7)`,
42
+ 8: `var(--mantine-color-${color}-8)`,
43
+ 9: `var(--mantine-color-${color}-9)`,
44
+ filled: `var(--mantine-color-${color}-filled)`,
45
+ filledHover: `var(--mantine-color-${color}-filled-hover)`,
46
+ light: `var(--mantine-color-${color}-light)`,
47
+ lightHover: `var(--mantine-color-${color}-light-hover)`,
48
+ lightColor: `var(--mantine-color-${color}-light-color)`,
49
+ outline: `var(--mantine-color-${color}-outline)`,
50
+ outlineHover: `var(--mantine-color-${color}-outline-hover)`
51
+ };
52
+ return acc;
53
+ },
54
+ {
55
+ white: "var(--mantine-color-white)",
56
+ black: "var(--mantine-color-black)",
57
+ primary: "var(--mantine-color-primary)",
58
+ text: "var(--mantine-color-text)",
59
+ body: "var(--mantine-color-body)",
60
+ error: "var(--mantine-color-error)",
61
+ placeholder: "var(--mantine-color-placeholder)",
62
+ anchor: "var(--mantine-color-anchor)",
63
+ default: "var(--mantine-color-default)",
64
+ defaultHover: "var(--mantine-color-default-hover)",
65
+ defaultColor: "var(--mantine-color-default-color)",
66
+ defaultBorder: "var(--mantine-color-default-border)",
67
+ dimmed: "var(--mantine-color-dimmed)"
68
+ }
69
+ );
70
+ return {
71
+ scale: "var(--mantine-scale)",
72
+ cursorType: "var(--mantine-cursor-type)",
73
+ webkitFontSmoothing: "var(--mantine-webkit-font-smoothing)",
74
+ mozFontSmoothing: "var(--mantine-moz-font-smoothing)",
75
+ lineHeight: "var(--mantine-line-height)",
76
+ fontFamily: "var(--mantine-font-family)",
77
+ fontFamilyMonospace: "var(--mantine-font-family-monospace)",
78
+ fontFamilyHeadings: "var(--mantine-font-family-headings)",
79
+ headingFontWeight: "var(--mantine-heading-font-weight)",
80
+ radiusDefault: "var(--mantine-radius-default)",
81
+ breakpoints,
82
+ fontSizes,
83
+ lineHeights,
84
+ shadows,
85
+ radius,
86
+ headings,
87
+ spacing,
88
+ colors,
89
+ darkSelector: '[data-mantine-color-scheme="dark"] &',
90
+ lightSelector: '[data-mantine-color-scheme="light"] &',
91
+ smallerThan: (breakpoint) => `(max-width: ${getBreakpointValue(breakpoint, mergedTheme)})`,
92
+ largerThan: (breakpoint) => `(min-width: ${getBreakpointValue(breakpoint, mergedTheme)})`
93
+ };
94
+ }
95
+
96
+ export { themeToVars };
97
+ //# sourceMappingURL=theme-to-vars.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"theme-to-vars.js","sources":["../src/theme-to-vars.ts"],"sourcesContent":["import {\n DEFAULT_THEME,\n MantineTheme,\n MantineThemeOverride,\n em,\n mergeMantineTheme,\n} from '@mantine/core';\nimport {\n Breakpoints,\n Colors,\n FontSizes,\n Heading,\n Headings,\n LineHeights,\n MantineVars,\n Radius,\n Shadows,\n Spacing,\n} from './types';\n\nfunction getSizesVariables<Result>(theme: any, themeKey: string, name: string): Result {\n return Object.keys(theme[themeKey]).reduce((acc: any, size) => {\n acc[size] = `var(--mantine-${name}-${size})`;\n return acc;\n }, {});\n}\n\nfunction getBreakpointValue(value: string | number, theme: MantineTheme) {\n return value in theme.breakpoints ? (theme.breakpoints as any)[value] : em(value);\n}\n\nexport function themeToVars(theme: MantineThemeOverride): MantineVars {\n const mergedTheme = mergeMantineTheme(DEFAULT_THEME, theme);\n\n const breakpoints = getSizesVariables<Breakpoints>(mergedTheme, 'breakpoints', 'breakpoint');\n\n const fontSizes = getSizesVariables<FontSizes>(mergedTheme, 'fontSizes', 'font-size');\n\n const lineHeights = getSizesVariables<LineHeights>(mergedTheme, 'lineHeights', 'line-height');\n\n const shadows = getSizesVariables<Shadows>(mergedTheme, 'shadows', 'shadow');\n const radius = getSizesVariables<Radius>(mergedTheme, 'radius', 'radius');\n const spacing = getSizesVariables<Spacing>(mergedTheme, 'spacing', 'spacing');\n\n const headings = Object.keys(mergedTheme.headings).reduce(\n (acc: Record<string, Heading>, heading) => {\n acc[heading] = {\n fontSize: `var(--mantine-${heading}-font-size)`,\n lineHeight: `var(--mantine-${heading}-line-height)`,\n fontWeight: `var(--mantine-${heading}-font-weight)`,\n };\n return acc;\n },\n {}\n ) as Headings;\n\n const colors = Object.keys(mergedTheme.colors).reduce(\n (acc: any, color) => {\n acc[color] = {\n 0: `var(--mantine-color-${color}-0)`,\n 1: `var(--mantine-color-${color}-1)`,\n 2: `var(--mantine-color-${color}-2)`,\n 3: `var(--mantine-color-${color}-3)`,\n 4: `var(--mantine-color-${color}-4)`,\n 5: `var(--mantine-color-${color}-5)`,\n 6: `var(--mantine-color-${color}-6)`,\n 7: `var(--mantine-color-${color}-7)`,\n 8: `var(--mantine-color-${color}-8)`,\n 9: `var(--mantine-color-${color}-9)`,\n filled: `var(--mantine-color-${color}-filled)`,\n filledHover: `var(--mantine-color-${color}-filled-hover)`,\n light: `var(--mantine-color-${color}-light)`,\n lightHover: `var(--mantine-color-${color}-light-hover)`,\n lightColor: `var(--mantine-color-${color}-light-color)`,\n outline: `var(--mantine-color-${color}-outline)`,\n outlineHover: `var(--mantine-color-${color}-outline-hover)`,\n };\n\n return acc;\n },\n {\n white: 'var(--mantine-color-white)',\n black: 'var(--mantine-color-black)',\n primary: 'var(--mantine-color-primary)',\n text: 'var(--mantine-color-text)',\n body: 'var(--mantine-color-body)',\n error: 'var(--mantine-color-error)',\n placeholder: 'var(--mantine-color-placeholder)',\n anchor: 'var(--mantine-color-anchor)',\n default: 'var(--mantine-color-default)',\n defaultHover: 'var(--mantine-color-default-hover)',\n defaultColor: 'var(--mantine-color-default-color)',\n defaultBorder: 'var(--mantine-color-default-border)',\n dimmed: 'var(--mantine-color-dimmed)',\n }\n ) as Colors;\n\n return {\n scale: 'var(--mantine-scale)',\n cursorType: 'var(--mantine-cursor-type)',\n webkitFontSmoothing: 'var(--mantine-webkit-font-smoothing)',\n mozFontSmoothing: 'var(--mantine-moz-font-smoothing)',\n lineHeight: 'var(--mantine-line-height)',\n fontFamily: 'var(--mantine-font-family)',\n fontFamilyMonospace: 'var(--mantine-font-family-monospace)',\n fontFamilyHeadings: 'var(--mantine-font-family-headings)',\n headingFontWeight: 'var(--mantine-heading-font-weight)',\n radiusDefault: 'var(--mantine-radius-default)',\n breakpoints,\n fontSizes,\n lineHeights,\n shadows,\n radius,\n headings,\n spacing,\n colors,\n\n darkSelector: '[data-mantine-color-scheme=\"dark\"] &',\n lightSelector: '[data-mantine-color-scheme=\"light\"] &',\n\n smallerThan: (breakpoint) => `(max-width: ${getBreakpointValue(breakpoint, mergedTheme)})`,\n largerThan: (breakpoint) => `(min-width: ${getBreakpointValue(breakpoint, mergedTheme)})`,\n };\n}\n"],"names":[],"mappings":"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"}
package/lib/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export type { MantineVars } from './types';
2
+ export { themeToVars } from './theme-to-vars';
@@ -0,0 +1,3 @@
1
+ import { MantineThemeOverride } from '@mantine/core';
2
+ import { MantineVars } from './types';
3
+ export declare function themeToVars(theme: MantineThemeOverride): MantineVars;
package/lib/types.d.ts ADDED
@@ -0,0 +1,86 @@
1
+ import { MantineColor, MantineBreakpoint, MantineSpacing, MantineFontSize, MantineLineHeight, MantineShadow, MantineRadius } from '@mantine/core';
2
+ export type Colors = {
3
+ [key in MantineColor]: {
4
+ 0: string;
5
+ 1: string;
6
+ 2: string;
7
+ 3: string;
8
+ 4: string;
9
+ 5: string;
10
+ 6: string;
11
+ 7: string;
12
+ 8: string;
13
+ 9: string;
14
+ filled: string;
15
+ filledHover: string;
16
+ light: string;
17
+ lightHover: string;
18
+ lightColor: string;
19
+ outline: string;
20
+ outlineHover: string;
21
+ };
22
+ } & {
23
+ white: string;
24
+ black: string;
25
+ primary: string;
26
+ text: string;
27
+ body: string;
28
+ error: string;
29
+ placeholder: string;
30
+ anchor: string;
31
+ default: string;
32
+ defaultHover: string;
33
+ defaultColor: string;
34
+ defaultBorder: string;
35
+ dimmed: string;
36
+ };
37
+ export type Breakpoints = {
38
+ [key in MantineBreakpoint | (string & {})]: string;
39
+ };
40
+ export type Spacing = {
41
+ [key in MantineSpacing | (string & {})]: string;
42
+ };
43
+ export type FontSizes = {
44
+ [key in MantineFontSize | (string & {})]: string;
45
+ };
46
+ export type LineHeights = {
47
+ [key in MantineLineHeight | (string & {})]: string;
48
+ };
49
+ export type Shadows = {
50
+ [key in MantineShadow | (string & {})]: string;
51
+ };
52
+ export type Radius = {
53
+ [key in MantineRadius | (string & {})]: string;
54
+ };
55
+ export type Heading = {
56
+ fontSize: string;
57
+ lineHeight: string;
58
+ fontWeight: string;
59
+ };
60
+ export type Headings = {
61
+ [key in 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6']: Heading;
62
+ };
63
+ export interface MantineVars {
64
+ scale: string;
65
+ cursorType: string;
66
+ webkitFontSmoothing: string;
67
+ mozFontSmoothing: string;
68
+ colors: Colors;
69
+ lineHeight: string;
70
+ fontFamily: string;
71
+ fontFamilyMonospace: string;
72
+ fontFamilyHeadings: string;
73
+ headingFontWeight: string;
74
+ radiusDefault: string;
75
+ breakpoints: Breakpoints;
76
+ spacing: Spacing;
77
+ fontSizes: FontSizes;
78
+ lineHeights: LineHeights;
79
+ shadows: Shadows;
80
+ radius: Radius;
81
+ headings: Headings;
82
+ darkSelector: string;
83
+ lightSelector: string;
84
+ smallerThan(breakpoint: MantineBreakpoint | (string & {}) | number): string;
85
+ largerThan(breakpoint: MantineBreakpoint | (string & {}) | number): string;
86
+ }
package/package.json ADDED
@@ -0,0 +1,34 @@
1
+ {
2
+ "name": "@mantine/vanilla-extract",
3
+ "version": "7.0.0-alpha.13",
4
+ "types": "./lib/index.d.ts",
5
+ "exports": {
6
+ ".": {
7
+ "import": "./esm/index.js",
8
+ "require": "./cjs/index.js",
9
+ "types": "./lib/index.d.ts"
10
+ }
11
+ },
12
+ "license": "MIT",
13
+ "author": "Vitaly Rtishchev <rtivital@gmail.com>",
14
+ "sideEffects": false,
15
+ "homepage": "https://mantine.dev",
16
+ "repository": {
17
+ "url": "https://github.com/mantinedev/mantine.git",
18
+ "type": "git",
19
+ "directory": "src/mantine-vanilla-extract"
20
+ },
21
+ "keywords": [
22
+ "react",
23
+ "next",
24
+ "nextjs",
25
+ "library",
26
+ "frontend",
27
+ "vanilla-extract"
28
+ ],
29
+ "peerDependencies": {
30
+ "@mantine/core": "7.0.0-alpha.13"
31
+ },
32
+ "dependencies": {},
33
+ "devDependencies": {}
34
+ }