{"version":3,"file":"tone.mjs","names":[],"sources":["../../../../package/common/styles/tone.ts"],"sourcesContent":["import { useEffect, type CSSProperties } from 'react';\nimport cx from 'classnames';\n\nimport { ThemeColor, type ColorValue } from '../themeProvider/color.types';\nimport { isDev } from '../utils/isDev';\nimport styles from './tone.module.pcss';\n\n// A Map, so a CSS colour can never hit an Object.prototype key.\nconst CLASS_BY_COLOR = new Map<string, string>(\n  Object.entries({\n    primary: styles.primary,\n    neutral: styles.neutral,\n    success: styles.success,\n    info: styles.info,\n    warn: styles.warn,\n    error: styles.error,\n  } satisfies Record<ThemeColor, string>),\n);\n\n/** The class, and for a colour of the caller's own the inline style, that set the --tone properties. */\nexport function toneProps(color: ColorValue): { className: string; style?: CSSProperties } {\n  const named = CLASS_BY_COLOR.get(color);\n  if (named) return { className: cx(styles.tone, named) };\n  return { className: styles.tone, style: { '--tone': color } as CSSProperties };\n}\n\n// A Map, so a CSS colour can never hit an Object.prototype key.\nconst VAR_BY_COLOR = new Map<string, string>(\n  Object.entries({\n    primary: 'var(--primary-color)',\n    neutral: 'currentcolor',\n    success: 'var(--success-color)',\n    info: 'var(--info-color)',\n    warn: 'var(--warn-color)',\n    error: 'var(--error-color)',\n  } satisfies Record<ThemeColor, string>),\n);\n\n/** A colour as a CSS value, for a component that paints it itself rather than through --tone. */\nexport function cssColor(color: ColorValue): string {\n  return VAR_BY_COLOR.get(color) ?? color;\n}\n\n/** Warns in development about a value that can never be a colour. A var() passes: it only resolves on screen. */\nexport function useToneCheck(component: string, colors: (ColorValue | undefined)[]): void {\n  const key = colors.join('\\n');\n  useEffect(() => {\n    // jsdom before 30 has no CSS.supports, and a development check must not break a consumer's tests.\n    if (!isDev() || typeof globalThis.CSS?.supports !== 'function') return;\n    for (const color of key.split('\\n')) {\n      if (color && !CLASS_BY_COLOR.has(color) && !CSS.supports('color', color)) {\n        console.warn(`${component}: \\`color\\` takes a ThemeColor or a CSS colour, and got '${color}'.`);\n      }\n    }\n  }, [component, key]);\n}\n"],"mappings":"qJAQA,IAAM,EAAiB,IAAI,IACzB,OAAO,QAAQ,CACb,QAAS,EAAO,QAChB,QAAS,EAAO,QAChB,QAAS,EAAO,QAChB,KAAM,EAAO,KACb,KAAM,EAAO,KACb,MAAO,EAAO,KAChB,CAAsC,CACxC,EAGA,SAAgB,EAAU,EAAiE,CACzF,IAAM,EAAQ,EAAe,IAAI,CAAK,EAEtC,OADI,EAAc,CAAE,UAAW,EAAG,EAAO,KAAM,CAAK,CAAE,EAC/C,CAAE,UAAW,EAAO,KAAM,MAAO,CAAE,SAAU,CAAM,CAAmB,CAC/E,CAGA,IAAM,EAAe,IAAI,IACvB,OAAO,QAAQ,CACb,QAAS,uBACT,QAAS,eACT,QAAS,uBACT,KAAM,oBACN,KAAM,oBACN,MAAO,oBACT,CAAsC,CACxC,EAGA,SAAgB,EAAS,EAA2B,CAClD,OAAO,EAAa,IAAI,CAAK,GAAK,CACpC,CAGA,SAAgB,EAAa,EAAmB,EAA0C,CACxF,IAAM,EAAM,EAAO,KAAK;CAAI,EAC5B,MAAgB,CAEV,GAAC,EAAM,GAAK,OAAO,WAAW,KAAK,UAAa,WACpD,IAAK,IAAM,KAAS,EAAI,MAAM;CAAI,EAC5B,GAAS,CAAC,EAAe,IAAI,CAAK,GAAK,CAAC,IAAI,SAAS,QAAS,CAAK,GACrE,QAAQ,KAAK,GAAG,EAAU,2DAA2D,EAAM,GAAG,CAGpG,EAAG,CAAC,EAAW,CAAG,CAAC,CACrB"}