@mantine/vanilla-extract 8.2.7 → 8.3.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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme-to-vars.cjs","sources":["../src/theme-to-vars.ts"],"sourcesContent":["import {\n DEFAULT_THEME,\n em,\n MantineTheme,\n MantineThemeOverride,\n mergeMantineTheme,\n} from '@mantine/core';\nimport {\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 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.sizes).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 primary: 'var(--mantine-primary-color-filled)',\n primaryColors: {\n 0: 'var(--mantine-primary-color-0)',\n 1: 'var(--mantine-primary-color-1)',\n 2: 'var(--mantine-primary-color-2)',\n 3: 'var(--mantine-primary-color-3)',\n 4: 'var(--mantine-primary-color-4)',\n 5: 'var(--mantine-primary-color-5)',\n 6: 'var(--mantine-primary-color-6)',\n 7: 'var(--mantine-primary-color-7)',\n 8: 'var(--mantine-primary-color-8)',\n 9: 'var(--mantine-primary-color-9)',\n filled: 'var(--mantine-primary-color-filled)',\n filledHover: 'var(--mantine-primary-color-filled-hover)',\n light: 'var(--mantine-primary-color-light)',\n lightHover: 'var(--mantine-primary-color-light-hover)',\n lightColor: 'var(--mantine-primary-color-light-color)',\n outline: 'var(--mantine-primary-color-outline)',\n outlineHover: 'var(--mantine-primary-color-outline-hover)',\n },\n white: 'var(--mantine-color-white)',\n black: 'var(--mantine-color-black)',\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 disabledBody: 'var(--mantine-color-disabled)',\n disabledText: 'var(--mantine-color-disabled-color)',\n disabledBorder: 'var(--mantine-color-disabled-border)',\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: mergedTheme.breakpoints,\n fontSizes,\n lineHeights,\n shadows,\n radius,\n headings,\n spacing,\n colors,\n\n rtlSelector: '[dir=\"rtl\"] &',\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":";;;;AAmBA,SAAS,iBAAA,CAA0B,
|
|
1
|
+
{"version":3,"file":"theme-to-vars.cjs","sources":["../src/theme-to-vars.ts"],"sourcesContent":["import {\n DEFAULT_THEME,\n em,\n MantineTheme,\n MantineThemeOverride,\n mergeMantineTheme,\n} from '@mantine/core';\nimport {\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 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.sizes).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 primary: 'var(--mantine-primary-color-filled)',\n primaryColors: {\n 0: 'var(--mantine-primary-color-0)',\n 1: 'var(--mantine-primary-color-1)',\n 2: 'var(--mantine-primary-color-2)',\n 3: 'var(--mantine-primary-color-3)',\n 4: 'var(--mantine-primary-color-4)',\n 5: 'var(--mantine-primary-color-5)',\n 6: 'var(--mantine-primary-color-6)',\n 7: 'var(--mantine-primary-color-7)',\n 8: 'var(--mantine-primary-color-8)',\n 9: 'var(--mantine-primary-color-9)',\n filled: 'var(--mantine-primary-color-filled)',\n filledHover: 'var(--mantine-primary-color-filled-hover)',\n light: 'var(--mantine-primary-color-light)',\n lightHover: 'var(--mantine-primary-color-light-hover)',\n lightColor: 'var(--mantine-primary-color-light-color)',\n outline: 'var(--mantine-primary-color-outline)',\n outlineHover: 'var(--mantine-primary-color-outline-hover)',\n },\n white: 'var(--mantine-color-white)',\n black: 'var(--mantine-color-black)',\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 disabledBody: 'var(--mantine-color-disabled)',\n disabledText: 'var(--mantine-color-disabled-color)',\n disabledBorder: 'var(--mantine-color-disabled-border)',\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: mergedTheme.breakpoints,\n fontSizes,\n lineHeights,\n shadows,\n radius,\n headings,\n spacing,\n colors,\n\n rtlSelector: '[dir=\"rtl\"] &',\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":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme-to-vars.mjs","sources":["../src/theme-to-vars.ts"],"sourcesContent":["import {\n DEFAULT_THEME,\n em,\n MantineTheme,\n MantineThemeOverride,\n mergeMantineTheme,\n} from '@mantine/core';\nimport {\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 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.sizes).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 primary: 'var(--mantine-primary-color-filled)',\n primaryColors: {\n 0: 'var(--mantine-primary-color-0)',\n 1: 'var(--mantine-primary-color-1)',\n 2: 'var(--mantine-primary-color-2)',\n 3: 'var(--mantine-primary-color-3)',\n 4: 'var(--mantine-primary-color-4)',\n 5: 'var(--mantine-primary-color-5)',\n 6: 'var(--mantine-primary-color-6)',\n 7: 'var(--mantine-primary-color-7)',\n 8: 'var(--mantine-primary-color-8)',\n 9: 'var(--mantine-primary-color-9)',\n filled: 'var(--mantine-primary-color-filled)',\n filledHover: 'var(--mantine-primary-color-filled-hover)',\n light: 'var(--mantine-primary-color-light)',\n lightHover: 'var(--mantine-primary-color-light-hover)',\n lightColor: 'var(--mantine-primary-color-light-color)',\n outline: 'var(--mantine-primary-color-outline)',\n outlineHover: 'var(--mantine-primary-color-outline-hover)',\n },\n white: 'var(--mantine-color-white)',\n black: 'var(--mantine-color-black)',\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 disabledBody: 'var(--mantine-color-disabled)',\n disabledText: 'var(--mantine-color-disabled-color)',\n disabledBorder: 'var(--mantine-color-disabled-border)',\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: mergedTheme.breakpoints,\n fontSizes,\n lineHeights,\n shadows,\n radius,\n headings,\n spacing,\n colors,\n\n rtlSelector: '[dir=\"rtl\"] &',\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":";;AAmBA,SAAS,iBAAA,CAA0B,
|
|
1
|
+
{"version":3,"file":"theme-to-vars.mjs","sources":["../src/theme-to-vars.ts"],"sourcesContent":["import {\n DEFAULT_THEME,\n em,\n MantineTheme,\n MantineThemeOverride,\n mergeMantineTheme,\n} from '@mantine/core';\nimport {\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 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.sizes).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 primary: 'var(--mantine-primary-color-filled)',\n primaryColors: {\n 0: 'var(--mantine-primary-color-0)',\n 1: 'var(--mantine-primary-color-1)',\n 2: 'var(--mantine-primary-color-2)',\n 3: 'var(--mantine-primary-color-3)',\n 4: 'var(--mantine-primary-color-4)',\n 5: 'var(--mantine-primary-color-5)',\n 6: 'var(--mantine-primary-color-6)',\n 7: 'var(--mantine-primary-color-7)',\n 8: 'var(--mantine-primary-color-8)',\n 9: 'var(--mantine-primary-color-9)',\n filled: 'var(--mantine-primary-color-filled)',\n filledHover: 'var(--mantine-primary-color-filled-hover)',\n light: 'var(--mantine-primary-color-light)',\n lightHover: 'var(--mantine-primary-color-light-hover)',\n lightColor: 'var(--mantine-primary-color-light-color)',\n outline: 'var(--mantine-primary-color-outline)',\n outlineHover: 'var(--mantine-primary-color-outline-hover)',\n },\n white: 'var(--mantine-color-white)',\n black: 'var(--mantine-color-black)',\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 disabledBody: 'var(--mantine-color-disabled)',\n disabledText: 'var(--mantine-color-disabled-color)',\n disabledBorder: 'var(--mantine-color-disabled-border)',\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: mergedTheme.breakpoints,\n fontSizes,\n lineHeights,\n shadows,\n radius,\n headings,\n spacing,\n colors,\n\n rtlSelector: '[dir=\"rtl\"] &',\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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mantine/vanilla-extract",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.3.0",
|
|
4
4
|
"description": "Vanilla Extract integration for Mantine theme",
|
|
5
5
|
"homepage": "https://mantine.dev",
|
|
6
6
|
"license": "MIT",
|
|
@@ -35,10 +35,10 @@
|
|
|
35
35
|
"directory": "packages/@mantine/vanilla-extract"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
|
-
"@mantine/core": "8.
|
|
38
|
+
"@mantine/core": "8.3.0"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"react": "19.
|
|
42
|
-
"react-dom": "19.
|
|
41
|
+
"react": "19.1.1",
|
|
42
|
+
"react-dom": "19.1.1"
|
|
43
43
|
}
|
|
44
44
|
}
|