getColors() — ui Function Reference

Architecture documentation for the getColors() function in colors.ts from the ui codebase.

Function typescript DocumentationAtlas Changelog calls 1

Entity Profile

DocumentationAtlas→ Changelog→ getColors() — ui Function Reference

Dependency Diagram

graph TD
  31dffeeb_cef5_7e8d_2ffb_14b1670c4ccd["getColors()"]
  56f11136_44de_59ff_9172_8077200c483f["colors.ts"]
  31dffeeb_cef5_7e8d_2ffb_14b1670c4ccd -->|defined in| 56f11136_44de_59ff_9172_8077200c483f
  988d5a25_23a6_0bf0_8e03_f19874f623d5["getForegroundFromBackground()"]
  31dffeeb_cef5_7e8d_2ffb_14b1670c4ccd -->|calls| 988d5a25_23a6_0bf0_8e03_f19874f623d5
  style 31dffeeb_cef5_7e8d_2ffb_14b1670c4ccd fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/lib/colors.ts lines 38–78

export function getColors() {
  const tailwindColors = colorPaletteSchema.array().parse(
    Object.entries(colors)
      .map(([name, color]) => {
        if (!Array.isArray(color)) {
          return null
        }

        return {
          name,
          colors: color.map((color) => {
            const rgb = color.rgb.replace(
              /^rgb\((\d+),(\d+),(\d+)\)$/,
              "$1 $2 $3"
            )

            return {
              ...color,
              name,
              id: `${name}-${color.scale}`,
              className: `${name}-${color.scale}`,
              var: `--color-${name}-${color.scale}`,
              rgb,
              hsl: color.hsl.replace(
                /^hsl\(([\d.]+),([\d.]+%),([\d.]+%)\)$/,
                "$1 $2 $3"
              ),
              oklch: `oklch(${color.oklch.replace(
                /^oklch\(([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\)$/,
                "$1 $2 $3"
              )})`,
              foreground: getForegroundFromBackground(rgb),
            }
          }),
        }
      })
      .filter(Boolean)
  )

  return tailwindColors
}