@saas-ui/palette/dist/index.mjs.map

Color palette generator for Chakra UI

{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import chroma, { Color } from 'chroma-js'\n\nimport { theme, Colors } from '@chakra-ui/react'\n\nconst names: Record<number, string> = {\n  0: 'red',\n  30: 'orange',\n  50: 'yellow',\n  150: 'green',\n  180: 'teal',\n  190: 'cyan',\n  210: 'blue',\n  260: 'purple',\n  330: 'pink',\n}\n\nconst hueName = (h: number) => {\n  const i = Math.round((h - 2) / 10) * 10\n  const name = names[i]\n  return name\n}\n\nexport interface PaletteColors {\n  [index: string]: string\n}\n\nconst getLumsFromThemeColors = (name: string) => {\n  const themeColors: Record<string, any> = theme.colors\n  const lums = []\n  let color = themeColors[name]\n\n  if (!color) {\n    color = themeColors.red // fallback lums from red, @todo select lums based on hue range.\n  }\n\n  for (const lum in color) {\n    lums.push(chroma.hex(color[lum]).luminance())\n  }\n\n  return lums\n}\n\nconst createArray = (length: number) => {\n  const arr = []\n  for (let i = 0; i < length; i++) {\n    arr.push(i)\n  }\n  return arr\n}\n\nconst createHues = (length: number) => {\n  const hueStep = 360 / length\n  return (base: number) => {\n    const hues = createArray(length).map((n) =>\n      Math.floor((base + n * hueStep) % 360)\n    )\n\n    return hues\n  }\n}\n\nconst desat = (n: number) => (hex: string) => {\n  const [h, s, l] = chroma(hex).hsl()\n  return chroma.hsl(h, n, l).hex()\n}\n\nconst createBlack = (hex: string, lum = 0) => {\n  return chroma(hex).luminance(lum).hex()\n}\n\nconst createShades = (hex: string, lums: Array<number>) => {\n  return lums.map((lum) => {\n    return chroma(hex).luminance(lum).hex()\n  })\n}\n\nconst getColorName = (hex: Color) => {\n  const [hue, sat] = chroma(hex).hsl()\n  const name = hueName(hue)\n  return name\n}\n\nconst mapValues = (values: Array<string>) => {\n  const keys = [\n    '50',\n    '100',\n    '200',\n    '300',\n    '400',\n    '500',\n    '600',\n    '700',\n    '800',\n    '900',\n  ]\n  const obj: Record<string, string> = {}\n\n  for (const key in values) {\n    obj[keys[key]] = values[key]\n  }\n\n  return obj\n}\n\nexport interface PaletteOptions {\n  blackLuminance?: number\n  colors?: PaletteColors\n}\n\nexport const createPalette = (hex: string, options: PaletteOptions = {}) => {\n  const colors = options.colors || {}\n  const color = chroma(hex)\n  const palette: Colors = {}\n  const [hue, sat, lte] = color.hsl()\n\n  const hues = createHues(36)(hue) // 36 so we have steps of 10\n\n  const gray = colors.gray || color.hex()\n\n  palette.black = createBlack(gray, options.blackLuminance)\n  palette.gray = mapValues(createShades(gray, getLumsFromThemeColors('gray')))\n\n  hues.forEach((h) => {\n    let c = chroma.hsl(h, sat, lte)\n    const name = getColorName(c)\n\n    if (!name) {\n      return\n    }\n\n    // override the hex value if this color has a custom value.\n    if (colors[name]) {\n      c = chroma.hex(colors[name])\n    }\n\n    palette[name] = mapValues(\n      createShades(c.hex(), getLumsFromThemeColors(name))\n    )\n  })\n\n  // Create shades for custom colors.\n  Object.entries(colors).forEach(([name, value]) => {\n    if (!palette[name]) {\n      const c = chroma(value)\n      palette[name] = mapValues(\n        createShades(c.hex(), getLumsFromThemeColors(name))\n      )\n    }\n  })\n\n  return Object.assign(palette)\n}\n"],"mappings":"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","names":[]}