@mantine/core/cjs/core/MantineProvider/MantineCssVariables/default-css-variables-resolver.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"default-css-variables-resolver.cjs","names":["getPrimaryShade","rem","getPrimaryContrastColor","isVirtualColor","getCSSColorVariables"],"sources":["../../../../src/core/MantineProvider/MantineCssVariables/default-css-variables-resolver.ts"],"sourcesContent":["import { keys, rem } from '../../utils';\nimport { getPrimaryContrastColor, getPrimaryShade } from '../color-functions';\nimport { ConvertCSSVariablesInput } from '../convert-css-variables';\nimport { MantineTheme } from '../theme.types';\nimport { getCSSColorVariables } from './get-css-color-variables';\nimport { isVirtualColor } from './virtual-color/virtual-color';\n\nexport type CSSVariablesResolver = (theme: MantineTheme) => ConvertCSSVariablesInput;\n\nfunction assignSizeVariables(\n  variables: Record<string, string>,\n  sizes: Record<string, string>,\n  name: string\n) {\n  keys(sizes).forEach((size) =>\n    Object.assign(variables, { [`--mantine-${name}-${size}`]: sizes[size] })\n  );\n}\n\nexport const defaultCssVariablesResolver: CSSVariablesResolver = (theme) => {\n  const lightPrimaryShade = getPrimaryShade(theme, 'light');\n  const defaultRadius =\n    theme.defaultRadius in theme.radius\n      ? theme.radius[theme.defaultRadius as 'xs']\n      : rem(theme.defaultRadius);\n\n  const result: ConvertCSSVariablesInput = {\n    variables: {\n      '--mantine-z-index-app': '100',\n      '--mantine-z-index-modal': '200',\n      '--mantine-z-index-popover': '300',\n      '--mantine-z-index-overlay': '400',\n      '--mantine-z-index-max': '9999',\n      '--mantine-scale': theme.scale.toString(),\n      '--mantine-cursor-type': theme.cursorType,\n      '--mantine-webkit-font-smoothing': theme.fontSmoothing ? 'antialiased' : 'unset',\n      '--mantine-moz-font-smoothing': theme.fontSmoothing ? 'grayscale' : 'unset',\n      '--mantine-color-white': theme.white,\n      '--mantine-color-black': theme.black,\n      '--mantine-line-height': theme.lineHeights.md,\n      '--mantine-font-family': theme.fontFamily,\n      '--mantine-font-family-monospace': theme.fontFamilyMonospace,\n      '--mantine-font-family-headings': theme.headings.fontFamily,\n      '--mantine-heading-font-weight': theme.headings.fontWeight,\n      '--mantine-heading-text-wrap': theme.headings.textWrap,\n      '--mantine-radius-default': defaultRadius,\n\n      // Primary colors\n      '--mantine-primary-color-filled': `var(--mantine-color-${theme.primaryColor}-filled)`,\n      '--mantine-primary-color-filled-hover': `var(--mantine-color-${theme.primaryColor}-filled-hover)`,\n      '--mantine-primary-color-light': `var(--mantine-color-${theme.primaryColor}-light)`,\n      '--mantine-primary-color-light-hover': `var(--mantine-color-${theme.primaryColor}-light-hover)`,\n      '--mantine-primary-color-light-color': `var(--mantine-color-${theme.primaryColor}-light-color)`,\n    },\n    light: {\n      '--mantine-color-scheme': 'light',\n      '--mantine-primary-color-contrast': getPrimaryContrastColor(theme, 'light'),\n      '--mantine-color-bright': 'var(--mantine-color-black)',\n      '--mantine-color-text': theme.black,\n      '--mantine-color-body': theme.white,\n      '--mantine-color-error': 'var(--mantine-color-red-6)',\n      '--mantine-color-placeholder': 'var(--mantine-color-gray-5)',\n      '--mantine-color-anchor': `var(--mantine-color-${theme.primaryColor}-${lightPrimaryShade})`,\n      '--mantine-color-default': 'var(--mantine-color-white)',\n      '--mantine-color-default-hover': 'var(--mantine-color-gray-0)',\n      '--mantine-color-default-color': 'var(--mantine-color-black)',\n      '--mantine-color-default-border': 'var(--mantine-color-gray-4)',\n      '--mantine-color-dimmed': 'var(--mantine-color-gray-6)',\n      '--mantine-color-disabled': 'var(--mantine-color-gray-2)',\n      '--mantine-color-disabled-color': 'var(--mantine-color-gray-5)',\n      '--mantine-color-disabled-border': 'var(--mantine-color-gray-3)',\n    },\n    dark: {\n      '--mantine-color-scheme': 'dark',\n      '--mantine-primary-color-contrast': getPrimaryContrastColor(theme, 'dark'),\n      '--mantine-color-bright': 'var(--mantine-color-white)',\n      '--mantine-color-text': 'var(--mantine-color-dark-0)',\n      '--mantine-color-body': 'var(--mantine-color-dark-7)',\n      '--mantine-color-error': 'var(--mantine-color-red-8)',\n      '--mantine-color-placeholder': 'var(--mantine-color-dark-3)',\n      '--mantine-color-anchor': `var(--mantine-color-${theme.primaryColor}-4)`,\n      '--mantine-color-default': 'var(--mantine-color-dark-6)',\n      '--mantine-color-default-hover': 'var(--mantine-color-dark-5)',\n      '--mantine-color-default-color': 'var(--mantine-color-white)',\n      '--mantine-color-default-border': 'var(--mantine-color-dark-4)',\n      '--mantine-color-dimmed': 'var(--mantine-color-dark-2)',\n      '--mantine-color-disabled': 'var(--mantine-color-dark-6)',\n      '--mantine-color-disabled-color': 'var(--mantine-color-dark-3)',\n      '--mantine-color-disabled-border': 'var(--mantine-color-dark-4)',\n    },\n  };\n\n  assignSizeVariables(result.variables, theme.breakpoints, 'breakpoint');\n  assignSizeVariables(result.variables, theme.spacing, 'spacing');\n  assignSizeVariables(result.variables, theme.fontSizes, 'font-size');\n  assignSizeVariables(result.variables, theme.lineHeights, 'line-height');\n  assignSizeVariables(result.variables, theme.shadows, 'shadow');\n  assignSizeVariables(result.variables, theme.radius, 'radius');\n  assignSizeVariables(result.variables, theme.fontWeights, 'font-weight');\n\n  theme.colors[theme.primaryColor].forEach((_, index) => {\n    result.variables[`--mantine-primary-color-${index}`] =\n      `var(--mantine-color-${theme.primaryColor}-${index})`;\n  });\n\n  keys(theme.colors).forEach((color) => {\n    const value = theme.colors[color];\n\n    if (isVirtualColor(value)) {\n      Object.assign(\n        result.light,\n        getCSSColorVariables({\n          theme,\n          name: value.name,\n          color: value.light,\n          colorScheme: 'light',\n          withColorValues: true,\n        })\n      );\n\n      Object.assign(\n        result.dark,\n        getCSSColorVariables({\n          theme,\n          name: value.name,\n          color: value.dark,\n          colorScheme: 'dark',\n          withColorValues: true,\n        })\n      );\n\n      return;\n    }\n\n    value.forEach((shade, index) => {\n      result.variables[`--mantine-color-${color}-${index}`] = shade;\n    });\n\n    Object.assign(\n      result.light,\n      getCSSColorVariables({\n        theme,\n        color,\n        colorScheme: 'light',\n        withColorValues: false,\n      })\n    );\n\n    Object.assign(\n      result.dark,\n      getCSSColorVariables({\n        theme,\n        color,\n        colorScheme: 'dark',\n        withColorValues: false,\n      })\n    );\n  });\n\n  const headings = theme.headings.sizes;\n\n  keys(headings).forEach((heading) => {\n    result.variables[`--mantine-${heading}-font-size`] = headings[heading].fontSize;\n    result.variables[`--mantine-${heading}-line-height`] = headings[heading].lineHeight;\n    result.variables[`--mantine-${heading}-font-weight`] =\n      headings[heading].fontWeight || theme.headings.fontWeight;\n  });\n\n  return result;\n};\n"],"mappings":"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"}