@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
36 lines (35 loc) • 1.75 kB
JavaScript
"use client";
import { useMantineCssVariablesResolver, useMantineStyleNonce } from "../Mantine.context.mjs";
import { useMantineTheme } from "../MantineThemeProvider/MantineThemeProvider.mjs";
import { convertCssVariables } from "../convert-css-variables/convert-css-variables.mjs";
import { getMergedVariables } from "./get-merged-variables.mjs";
import { removeDefaultVariables } from "./remove-default-variables.mjs";
import { jsx } from "react/jsx-runtime";
//#region packages/@mantine/core/src/core/MantineProvider/MantineCssVariables/MantineCssVariables.tsx
function getColorSchemeCssVariables(selectorOverride) {
return convertCssVariables({
variables: {},
dark: { "--mantine-color-scheme": "dark" },
light: { "--mantine-color-scheme": "light" }
}, selectorOverride);
}
function MantineCssVariables({ cssVariablesSelector, deduplicateCssVariables }) {
const theme = useMantineTheme();
const nonce = useMantineStyleNonce();
const mergedVariables = getMergedVariables({
theme,
generator: useMantineCssVariablesResolver()
});
const shouldCleanVariables = (cssVariablesSelector === void 0 || cssVariablesSelector === ":root" || cssVariablesSelector === ":host") && deduplicateCssVariables;
const css = convertCssVariables(shouldCleanVariables ? removeDefaultVariables(mergedVariables) : mergedVariables, cssVariablesSelector);
if (css) return /* @__PURE__ */ jsx("style", {
"data-mantine-styles": true,
nonce: nonce?.(),
dangerouslySetInnerHTML: { __html: `${css}${shouldCleanVariables ? "" : getColorSchemeCssVariables(cssVariablesSelector)}` }
});
return null;
}
MantineCssVariables.displayName = "@mantine/CssVariables";
//#endregion
export { MantineCssVariables };
//# sourceMappingURL=MantineCssVariables.mjs.map