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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"v8-css-variables-resolver.cjs","names":["getPrimaryShade","alpha","rem","getPrimaryContrastColor","isVirtualColor"],"sources":["../../../../src/core/MantineProvider/MantineCssVariables/v8-css-variables-resolver.ts"],"sourcesContent":["import { keys, rem } from '../../utils';\nimport { alpha, getPrimaryContrastColor, getPrimaryShade } from '../color-functions';\nimport { ConvertCSSVariablesInput } from '../convert-css-variables';\nimport { MantineTheme } from '../theme.types';\nimport { CSSVariablesResolver } from './default-css-variables-resolver';\nimport { isVirtualColor } from './virtual-color/virtual-color';\n\ninterface GetV8ColorVariablesInput {\n  theme: MantineTheme;\n  color: string;\n  colorScheme: 'light' | 'dark';\n  name?: string;\n  withColorValues?: boolean;\n}\n\nfunction getV8CSSColorVariables({\n  theme,\n  color,\n  colorScheme,\n  name = color,\n  withColorValues = true,\n}: GetV8ColorVariablesInput) {\n  if (!theme.colors[color]) {\n    return {};\n  }\n\n  if (colorScheme === 'light') {\n    const primaryShade = getPrimaryShade(theme, 'light');\n\n    const dynamicVariables = {\n      [`--mantine-color-${name}-text`]: `var(--mantine-color-${name}-filled)`,\n      [`--mantine-color-${name}-filled`]: `var(--mantine-color-${name}-${primaryShade})`,\n      [`--mantine-color-${name}-filled-hover`]: `var(--mantine-color-${name}-${\n        primaryShade === 9 ? 8 : primaryShade + 1\n      })`,\n      [`--mantine-color-${name}-light`]: alpha(theme.colors[color][primaryShade], 0.1),\n      [`--mantine-color-${name}-light-hover`]: alpha(theme.colors[color][primaryShade], 0.12),\n      [`--mantine-color-${name}-light-color`]: `var(--mantine-color-${name}-${primaryShade})`,\n      [`--mantine-color-${name}-outline`]: `var(--mantine-color-${name}-${primaryShade})`,\n      [`--mantine-color-${name}-outline-hover`]: alpha(theme.colors[color][primaryShade], 0.05),\n    };\n\n    if (!withColorValues) {\n      return dynamicVariables;\n    }\n\n    return {\n      [`--mantine-color-${name}-0`]: theme.colors[color][0],\n      [`--mantine-color-${name}-1`]: theme.colors[color][1],\n      [`--mantine-color-${name}-2`]: theme.colors[color][2],\n      [`--mantine-color-${name}-3`]: theme.colors[color][3],\n      [`--mantine-color-${name}-4`]: theme.colors[color][4],\n      [`--mantine-color-${name}-5`]: theme.colors[color][5],\n      [`--mantine-color-${name}-6`]: theme.colors[color][6],\n      [`--mantine-color-${name}-7`]: theme.colors[color][7],\n      [`--mantine-color-${name}-8`]: theme.colors[color][8],\n      [`--mantine-color-${name}-9`]: theme.colors[color][9],\n      ...dynamicVariables,\n    };\n  }\n\n  const primaryShade = getPrimaryShade(theme, 'dark');\n  const dynamicVariables = {\n    [`--mantine-color-${name}-text`]: `var(--mantine-color-${name}-4)`,\n    [`--mantine-color-${name}-filled`]: `var(--mantine-color-${name}-${primaryShade})`,\n    [`--mantine-color-${name}-filled-hover`]: `var(--mantine-color-${name}-${\n      primaryShade === 9 ? 8 : primaryShade + 1\n    })`,\n    [`--mantine-color-${name}-light`]: alpha(\n      theme.colors[color][Math.max(0, primaryShade - 2)],\n      0.15\n    ),\n    [`--mantine-color-${name}-light-hover`]: alpha(\n      theme.colors[color][Math.max(0, primaryShade - 2)],\n      0.2\n    ),\n    [`--mantine-color-${name}-light-color`]: `var(--mantine-color-${name}-${Math.max(primaryShade - 5, 0)})`,\n    [`--mantine-color-${name}-outline`]: `var(--mantine-color-${name}-${Math.max(primaryShade - 4, 0)})`,\n    [`--mantine-color-${name}-outline-hover`]: alpha(\n      theme.colors[color][Math.max(primaryShade - 4, 0)],\n      0.05\n    ),\n  };\n\n  if (!withColorValues) {\n    return dynamicVariables;\n  }\n\n  return {\n    [`--mantine-color-${name}-0`]: theme.colors[color][0],\n    [`--mantine-color-${name}-1`]: theme.colors[color][1],\n    [`--mantine-color-${name}-2`]: theme.colors[color][2],\n    [`--mantine-color-${name}-3`]: theme.colors[color][3],\n    [`--mantine-color-${name}-4`]: theme.colors[color][4],\n    [`--mantine-color-${name}-5`]: theme.colors[color][5],\n    [`--mantine-color-${name}-6`]: theme.colors[color][6],\n    [`--mantine-color-${name}-7`]: theme.colors[color][7],\n    [`--mantine-color-${name}-8`]: theme.colors[color][8],\n    [`--mantine-color-${name}-9`]: theme.colors[color][9],\n    ...dynamicVariables,\n  };\n}\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 v8CssVariablesResolver: 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      '--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        getV8CSSColorVariables({\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        getV8CSSColorVariables({\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      getV8CSSColorVariables({\n        theme,\n        color,\n        colorScheme: 'light',\n        withColorValues: false,\n      })\n    );\n\n    Object.assign(\n      result.dark,\n      getV8CSSColorVariables({\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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"}