@undp/design-system-react/dist/ConfigProvider.cjs.map

React based design system for UNDP

{"version":3,"file":"ConfigProvider.cjs","names":[],"sources":["../src/ConfigProvider.tsx"],"sourcesContent":["import { type ReactNode, useEffect } from 'react';\n\ntype SemanticGroup = {\n  base?: string;\n  hover?: string;\n  light?: string;\n};\n\ntype SurfaceScale = {\n  base?: string;\n  hover?: string;\n  hard?: string;\n  hardHover?: string;\n  '2xs'?: string;\n  xs?: string;\n  sm?: string;\n  md?: string;\n  lg?: string;\n  xl?: string;\n  '2xl'?: string;\n  '3xl'?: string;\n  '4xl'?: string;\n};\n\ntype StrokeScale = {\n  base?: string;\n  hover?: string;\n  '2xs'?: string;\n  xs?: string;\n  sm?: string;\n  md?: string;\n  lg?: string;\n  xl?: string;\n  '2xl'?: string;\n  '3xl'?: string;\n  '4xl'?: string;\n};\n\ntype ContentScale = {\n  primary?: string;\n  secondary?: string;\n  tertiary?: string;\n  quaternary?: string;\n  placeholder?: string;\n  disabled?: string;\n  reverse?: string;\n};\n\ntype HeadingSizeScale = {\n  base?: string;\n  sm?: string;\n  xs?: string;\n};\n\ntype BlueScale = {\n  100?: string;\n  200?: string;\n  300?: string;\n  400?: string;\n  500?: string;\n  600?: string;\n  700?: string;\n};\n\ntype GrayScale = {\n  100?: string;\n  200?: string;\n  300?: string;\n  400?: string;\n  500?: string;\n  530?: string;\n  560?: string;\n  600?: string;\n  700?: string;\n};\n\ntype AccentScale = {\n  200?: string;\n  400?: string;\n  600?: string;\n};\n\ntype TypographyScale = {\n  h1?: HeadingSizeScale;\n  h2?: HeadingSizeScale;\n  h3?: HeadingSizeScale;\n  h4?: HeadingSizeScale;\n  h5?: HeadingSizeScale;\n  h6?: HeadingSizeScale;\n  p?: HeadingSizeScale;\n  '2xl'?: string;\n  xl?: string;\n  lg?: string;\n  base?: string;\n  sm?: string;\n  xs?: string;\n  '2xs'?: string;\n};\n\ntype LeadingScale = {\n  h1?: string;\n  h2?: string;\n  h3?: string;\n  h4?: string;\n  h5?: string;\n  h6?: string;\n  p?: string;\n  '2xl'?: string;\n  xl?: string;\n  lg?: string;\n  base?: string;\n  sm?: string;\n  xs?: string;\n};\n\ntype RoundedScale = {\n  base?: string;\n  sm?: string;\n  md?: string;\n  lg?: string;\n  xl?: string;\n  '2xl'?: string;\n};\n\ninterface ConfigDataType {\n  blue?: BlueScale;\n  gray?: GrayScale;\n  yellow?: AccentScale;\n  red?: AccentScale;\n  green?: AccentScale;\n  azure?: AccentScale;\n\n  foreground?: string;\n  foregroundSoft?: string;\n  background?: string;\n  backgroundSoft?: string;\n  ring?: string;\n  cardHoverColor?: string;\n  footerBackground?: string;\n\n  error?: SemanticGroup;\n  warning?: SemanticGroup;\n  success?: SemanticGroup;\n  info?: SemanticGroup;\n  primary?: SemanticGroup;\n  secondary?: SemanticGroup;\n  tertiary?: SemanticGroup;\n  quaternary?: SemanticGroup;\n\n  content?: ContentScale;\n  surface?: SurfaceScale;\n  stroke?: StrokeScale;\n\n  opacityDisabled?: string;\n\n  fonts?: {\n    body?: string;\n    heading?: string;\n    sans?: string;\n    mono?: string;\n    serif?: string;\n  };\n\n  typography?: TypographyScale;\n  leading?: LeadingScale;\n\n  rounded?: RoundedScale;\n\n  blurFrosted?: string;\n}\n\ninterface ConfigProviderProps {\n  children: ReactNode;\n  config?: ConfigDataType;\n  theme?: 'dark' | 'light';\n  rtl?: boolean;\n}\n\nconst setVar = (root: HTMLElement, name: string, value?: string) => {\n  if (value !== undefined) root.style.setProperty(name, value);\n};\n\nconst setSemanticGroup = (root: HTMLElement, name: string, group?: SemanticGroup) => {\n  if (!group) return;\n  setVar(root, `--${name}`, group.base);\n  setVar(root, `--${name}-hover`, group.hover);\n  setVar(root, `--${name}-light`, group.light);\n};\n\nconst setAccentGroup = (root: HTMLElement, name: string, group?: AccentScale) => {\n  if (!group) return;\n  setVar(root, `--${name}-200`, group['200']);\n  setVar(root, `--${name}-400`, group['400']);\n  setVar(root, `--${name}-600`, group['600']);\n};\n\nexport const ConfigProvider = ({ children, config, rtl }: ConfigProviderProps) => {\n  useEffect(() => {\n    if (config) {\n      const root = document.documentElement;\n\n      setVar(root, '--blue-100', config.blue?.['100']);\n      setVar(root, '--blue-200', config.blue?.['200']);\n      setVar(root, '--blue-300', config.blue?.['300']);\n      setVar(root, '--blue-400', config.blue?.['400']);\n      setVar(root, '--blue-500', config.blue?.['500']);\n      setVar(root, '--blue-600', config.blue?.['600']);\n      setVar(root, '--blue-700', config.blue?.['700']);\n\n      setVar(root, '--gray-100', config.gray?.['100']);\n      setVar(root, '--gray-200', config.gray?.['200']);\n      setVar(root, '--gray-300', config.gray?.['300']);\n      setVar(root, '--gray-400', config.gray?.['400']);\n      setVar(root, '--gray-500', config.gray?.['500']);\n      setVar(root, '--gray-530', config.gray?.['530']);\n      setVar(root, '--gray-560', config.gray?.['560']);\n      setVar(root, '--gray-600', config.gray?.['600']);\n      setVar(root, '--gray-700', config.gray?.['700']);\n\n      setAccentGroup(root, 'blue', config.blue);\n      setAccentGroup(root, 'gray', config.gray);\n      setAccentGroup(root, 'yellow', config.yellow);\n      setAccentGroup(root, 'red', config.red);\n      setAccentGroup(root, 'green', config.green);\n      setAccentGroup(root, 'azure', config.azure);\n\n      setSemanticGroup(root, 'error', config.error);\n      setSemanticGroup(root, 'warning', config.warning);\n      setSemanticGroup(root, 'success', config.success);\n      setSemanticGroup(root, 'info', config.info);\n      setSemanticGroup(root, 'primary', config.primary);\n      setSemanticGroup(root, 'secondary', config.secondary);\n      setSemanticGroup(root, 'tertiary', config.tertiary);\n      setSemanticGroup(root, 'quaternary', config.quaternary);\n\n      setVar(root, '--content-primary', config.content?.primary);\n      setVar(root, '--content-secondary', config.content?.secondary);\n      setVar(root, '--content-tertiary', config.content?.tertiary);\n      setVar(root, '--content-quaternary', config.content?.quaternary);\n      setVar(root, '--content-placeholder', config.content?.placeholder);\n      setVar(root, '--content-disabled', config.content?.disabled);\n      setVar(root, '--content-reverse', config.content?.reverse);\n\n      setVar(root, '--surface', config.surface?.base);\n      setVar(root, '--surface-hover', config.surface?.hover);\n      setVar(root, '--surface-hard', config.surface?.hard);\n      setVar(root, '--surface-hard-hover', config.surface?.hardHover);\n      setVar(root, '--surface-2xs', config.surface?.['2xs']);\n      setVar(root, '--surface-xs', config.surface?.xs);\n      setVar(root, '--surface-sm', config.surface?.sm);\n      setVar(root, '--surface-md', config.surface?.md);\n      setVar(root, '--surface-lg', config.surface?.lg);\n      setVar(root, '--surface-xl', config.surface?.xl);\n      setVar(root, '--surface-2xl', config.surface?.['2xl']);\n      setVar(root, '--surface-3xl', config.surface?.['3xl']);\n      setVar(root, '--surface-4xl', config.surface?.['4xl']);\n\n      setVar(root, '--stroke', config.stroke?.base);\n      setVar(root, '--stroke-hover', config.stroke?.hover);\n      setVar(root, '--stroke-2xs', config.stroke?.['2xs']);\n      setVar(root, '--stroke-xs', config.stroke?.xs);\n      setVar(root, '--stroke-sm', config.stroke?.sm);\n      setVar(root, '--stroke-md', config.stroke?.md);\n      setVar(root, '--stroke-lg', config.stroke?.lg);\n      setVar(root, '--stroke-xl', config.stroke?.xl);\n      setVar(root, '--stroke-2xl', config.stroke?.['2xl']);\n      setVar(root, '--stroke-3xl', config.stroke?.['3xl']);\n      setVar(root, '--stroke-4xl', config.stroke?.['4xl']);\n\n      setVar(root, '--font-body', config.fonts?.body);\n      setVar(root, '--font-sans', config.fonts?.sans);\n      setVar(root, '--font-heading', config.fonts?.heading);\n      setVar(root, '--font-mono', config.fonts?.mono);\n      setVar(root, '--font-serif', config.fonts?.serif);\n\n      setVar(root, '--foreground', config.foreground);\n      setVar(root, '--foreground-soft', config.foregroundSoft);\n      setVar(root, '--background', config.background);\n      setVar(root, '--background-soft', config.backgroundSoft);\n      setVar(root, '--ring', config.ring);\n      setVar(root, '--card-hover-color', config.cardHoverColor);\n      setVar(root, '--footer-background', config.footerBackground);\n\n      setVar(root, '--opacity-disabled', config.opacityDisabled);\n\n      (['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'] as const).forEach((heading) => {\n        const sizes = config.typography?.[heading];\n        setVar(root, `--text-${heading}`, sizes?.base);\n        setVar(root, `--text-${heading}-sm`, sizes?.sm);\n        setVar(root, `--text-${heading}-xs`, sizes?.xs);\n      });\n      setVar(root, '--text-2xl', config.typography?.['2xl']);\n      setVar(root, '--text-xl', config.typography?.xl);\n      setVar(root, '--text-lg', config.typography?.lg);\n      setVar(root, '--text-base', config.typography?.base);\n      setVar(root, '--text-sm', config.typography?.sm);\n      setVar(root, '--text-xs', config.typography?.xs);\n      setVar(root, '--text-2xs', config.typography?.['2xs']);\n\n      setVar(root, '--leading-h1', config.leading?.h1);\n      setVar(root, '--leading-h2', config.leading?.h2);\n      setVar(root, '--leading-h3', config.leading?.h3);\n      setVar(root, '--leading-h4', config.leading?.h4);\n      setVar(root, '--leading-h5', config.leading?.h5);\n      setVar(root, '--leading-h6', config.leading?.h6);\n      setVar(root, '--leading-p', config.leading?.p);\n      setVar(root, '--leading-2xl', config.leading?.['2xl']);\n      setVar(root, '--leading-xl', config.leading?.xl);\n      setVar(root, '--leading-lg', config.leading?.lg);\n      setVar(root, '--leading-base', config.leading?.base);\n      setVar(root, '--leading-sm', config.leading?.sm);\n      setVar(root, '--leading-xs', config.leading?.xs);\n\n      setVar(root, '--rounded-base', config.rounded?.base);\n      setVar(root, '--rounded-sm', config.rounded?.sm);\n      setVar(root, '--rounded-md', config.rounded?.md);\n      setVar(root, '--rounded-lg', config.rounded?.lg);\n      setVar(root, '--rounded-xl', config.rounded?.xl);\n      setVar(root, '--rounded-2xl', config.rounded?.['2xl']);\n\n      setVar(root, '--blur-frosted', config.blurFrosted);\n    }\n  }, [config]);\n\n  return <div dir={rtl ? 'rtl' : undefined}>{children}</div>;\n};\n"],"mappings":"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"}