@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
189 lines (188 loc) • 9.98 kB
JavaScript
"use client";
const require_keys = require("../../utils/keys/keys.cjs");
const require_rem = require("../../utils/units-converters/rem.cjs");
const require_get_primary_shade = require("../color-functions/get-primary-shade/get-primary-shade.cjs");
const require_rgba = require("../color-functions/rgba/rgba.cjs");
const require_get_contrast_color = require("../color-functions/get-contrast-color/get-contrast-color.cjs");
const require_virtual_color = require("./virtual-color/virtual-color.cjs");
//#region packages/@mantine/core/src/core/MantineProvider/MantineCssVariables/v8-css-variables-resolver.ts
function getV8CSSColorVariables({ theme, color, colorScheme, name = color, withColorValues = true }) {
if (!theme.colors[color]) return {};
if (colorScheme === "light") {
const primaryShade = require_get_primary_shade.getPrimaryShade(theme, "light");
const dynamicVariables = {
[`--mantine-color-${name}-text`]: `var(--mantine-color-${name}-filled)`,
[`--mantine-color-${name}-filled`]: `var(--mantine-color-${name}-${primaryShade})`,
[`--mantine-color-${name}-filled-hover`]: `var(--mantine-color-${name}-${primaryShade === 9 ? 8 : primaryShade + 1})`,
[`--mantine-color-${name}-light`]: require_rgba.alpha(theme.colors[color][primaryShade], .1),
[`--mantine-color-${name}-light-hover`]: require_rgba.alpha(theme.colors[color][primaryShade], .12),
[`--mantine-color-${name}-light-color`]: `var(--mantine-color-${name}-${primaryShade})`,
[`--mantine-color-${name}-outline`]: `var(--mantine-color-${name}-${primaryShade})`,
[`--mantine-color-${name}-outline-hover`]: require_rgba.alpha(theme.colors[color][primaryShade], .05)
};
if (!withColorValues) return dynamicVariables;
return {
[`--mantine-color-${name}-0`]: theme.colors[color][0],
[`--mantine-color-${name}-1`]: theme.colors[color][1],
[`--mantine-color-${name}-2`]: theme.colors[color][2],
[`--mantine-color-${name}-3`]: theme.colors[color][3],
[`--mantine-color-${name}-4`]: theme.colors[color][4],
[`--mantine-color-${name}-5`]: theme.colors[color][5],
[`--mantine-color-${name}-6`]: theme.colors[color][6],
[`--mantine-color-${name}-7`]: theme.colors[color][7],
[`--mantine-color-${name}-8`]: theme.colors[color][8],
[`--mantine-color-${name}-9`]: theme.colors[color][9],
...dynamicVariables
};
}
const primaryShade = require_get_primary_shade.getPrimaryShade(theme, "dark");
const dynamicVariables = {
[`--mantine-color-${name}-text`]: `var(--mantine-color-${name}-4)`,
[`--mantine-color-${name}-filled`]: `var(--mantine-color-${name}-${primaryShade})`,
[`--mantine-color-${name}-filled-hover`]: `var(--mantine-color-${name}-${primaryShade === 9 ? 8 : primaryShade + 1})`,
[`--mantine-color-${name}-light`]: require_rgba.alpha(theme.colors[color][Math.max(0, primaryShade - 2)], .15),
[`--mantine-color-${name}-light-hover`]: require_rgba.alpha(theme.colors[color][Math.max(0, primaryShade - 2)], .2),
[`--mantine-color-${name}-light-color`]: `var(--mantine-color-${name}-${Math.max(primaryShade - 5, 0)})`,
[`--mantine-color-${name}-outline`]: `var(--mantine-color-${name}-${Math.max(primaryShade - 4, 0)})`,
[`--mantine-color-${name}-outline-hover`]: require_rgba.alpha(theme.colors[color][Math.max(primaryShade - 4, 0)], .05)
};
if (!withColorValues) return dynamicVariables;
return {
[`--mantine-color-${name}-0`]: theme.colors[color][0],
[`--mantine-color-${name}-1`]: theme.colors[color][1],
[`--mantine-color-${name}-2`]: theme.colors[color][2],
[`--mantine-color-${name}-3`]: theme.colors[color][3],
[`--mantine-color-${name}-4`]: theme.colors[color][4],
[`--mantine-color-${name}-5`]: theme.colors[color][5],
[`--mantine-color-${name}-6`]: theme.colors[color][6],
[`--mantine-color-${name}-7`]: theme.colors[color][7],
[`--mantine-color-${name}-8`]: theme.colors[color][8],
[`--mantine-color-${name}-9`]: theme.colors[color][9],
...dynamicVariables
};
}
function assignSizeVariables(variables, sizes, name) {
require_keys.keys(sizes).forEach((size) => Object.assign(variables, { [`--mantine-${name}-${size}`]: sizes[size] }));
}
const v8CssVariablesResolver = (theme) => {
const lightPrimaryShade = require_get_primary_shade.getPrimaryShade(theme, "light");
const defaultRadius = theme.defaultRadius in theme.radius ? theme.radius[theme.defaultRadius] : require_rem.rem(theme.defaultRadius);
const result = {
variables: {
"--mantine-z-index-app": "100",
"--mantine-z-index-modal": "200",
"--mantine-z-index-popover": "300",
"--mantine-z-index-overlay": "400",
"--mantine-z-index-max": "9999",
"--mantine-scale": theme.scale.toString(),
"--mantine-cursor-type": theme.cursorType,
"--mantine-webkit-font-smoothing": theme.fontSmoothing ? "antialiased" : "unset",
"--mantine-moz-font-smoothing": theme.fontSmoothing ? "grayscale" : "unset",
"--mantine-color-white": theme.white,
"--mantine-color-black": theme.black,
"--mantine-line-height": theme.lineHeights.md,
"--mantine-font-family": theme.fontFamily,
"--mantine-font-family-monospace": theme.fontFamilyMonospace,
"--mantine-font-family-headings": theme.headings.fontFamily,
"--mantine-heading-font-weight": theme.headings.fontWeight,
"--mantine-heading-text-wrap": theme.headings.textWrap,
"--mantine-radius-default": defaultRadius,
"--mantine-primary-color-filled": `var(--mantine-color-${theme.primaryColor}-filled)`,
"--mantine-primary-color-filled-hover": `var(--mantine-color-${theme.primaryColor}-filled-hover)`,
"--mantine-primary-color-light": `var(--mantine-color-${theme.primaryColor}-light)`,
"--mantine-primary-color-light-hover": `var(--mantine-color-${theme.primaryColor}-light-hover)`,
"--mantine-primary-color-light-color": `var(--mantine-color-${theme.primaryColor}-light-color)`
},
light: {
"--mantine-color-scheme": "light",
"--mantine-primary-color-contrast": require_get_contrast_color.getPrimaryContrastColor(theme, "light"),
"--mantine-color-bright": "var(--mantine-color-black)",
"--mantine-color-text": theme.black,
"--mantine-color-body": theme.white,
"--mantine-color-error": "var(--mantine-color-red-6)",
"--mantine-color-placeholder": "var(--mantine-color-gray-5)",
"--mantine-color-anchor": `var(--mantine-color-${theme.primaryColor}-${lightPrimaryShade})`,
"--mantine-color-default": "var(--mantine-color-white)",
"--mantine-color-default-hover": "var(--mantine-color-gray-0)",
"--mantine-color-default-color": "var(--mantine-color-black)",
"--mantine-color-default-border": "var(--mantine-color-gray-4)",
"--mantine-color-dimmed": "var(--mantine-color-gray-6)",
"--mantine-color-disabled": "var(--mantine-color-gray-2)",
"--mantine-color-disabled-color": "var(--mantine-color-gray-5)",
"--mantine-color-disabled-border": "var(--mantine-color-gray-3)"
},
dark: {
"--mantine-color-scheme": "dark",
"--mantine-primary-color-contrast": require_get_contrast_color.getPrimaryContrastColor(theme, "dark"),
"--mantine-color-bright": "var(--mantine-color-white)",
"--mantine-color-text": "var(--mantine-color-dark-0)",
"--mantine-color-body": "var(--mantine-color-dark-7)",
"--mantine-color-error": "var(--mantine-color-red-8)",
"--mantine-color-placeholder": "var(--mantine-color-dark-3)",
"--mantine-color-anchor": `var(--mantine-color-${theme.primaryColor}-4)`,
"--mantine-color-default": "var(--mantine-color-dark-6)",
"--mantine-color-default-hover": "var(--mantine-color-dark-5)",
"--mantine-color-default-color": "var(--mantine-color-white)",
"--mantine-color-default-border": "var(--mantine-color-dark-4)",
"--mantine-color-dimmed": "var(--mantine-color-dark-2)",
"--mantine-color-disabled": "var(--mantine-color-dark-6)",
"--mantine-color-disabled-color": "var(--mantine-color-dark-3)",
"--mantine-color-disabled-border": "var(--mantine-color-dark-4)"
}
};
assignSizeVariables(result.variables, theme.breakpoints, "breakpoint");
assignSizeVariables(result.variables, theme.spacing, "spacing");
assignSizeVariables(result.variables, theme.fontSizes, "font-size");
assignSizeVariables(result.variables, theme.lineHeights, "line-height");
assignSizeVariables(result.variables, theme.shadows, "shadow");
assignSizeVariables(result.variables, theme.radius, "radius");
assignSizeVariables(result.variables, theme.fontWeights, "font-weight");
theme.colors[theme.primaryColor].forEach((_, index) => {
result.variables[`--mantine-primary-color-${index}`] = `var(--mantine-color-${theme.primaryColor}-${index})`;
});
require_keys.keys(theme.colors).forEach((color) => {
const value = theme.colors[color];
if (require_virtual_color.isVirtualColor(value)) {
Object.assign(result.light, getV8CSSColorVariables({
theme,
name: value.name,
color: value.light,
colorScheme: "light",
withColorValues: true
}));
Object.assign(result.dark, getV8CSSColorVariables({
theme,
name: value.name,
color: value.dark,
colorScheme: "dark",
withColorValues: true
}));
return;
}
value.forEach((shade, index) => {
result.variables[`--mantine-color-${color}-${index}`] = shade;
});
Object.assign(result.light, getV8CSSColorVariables({
theme,
color,
colorScheme: "light",
withColorValues: false
}));
Object.assign(result.dark, getV8CSSColorVariables({
theme,
color,
colorScheme: "dark",
withColorValues: false
}));
});
const headings = theme.headings.sizes;
require_keys.keys(headings).forEach((heading) => {
result.variables[`--mantine-${heading}-font-size`] = headings[heading].fontSize;
result.variables[`--mantine-${heading}-line-height`] = headings[heading].lineHeight;
result.variables[`--mantine-${heading}-font-weight`] = headings[heading].fontWeight || theme.headings.fontWeight;
});
return result;
};
//#endregion
exports.v8CssVariablesResolver = v8CssVariablesResolver;
//# sourceMappingURL=v8-css-variables-resolver.cjs.map