applyColorMapping() — ui Function Reference

Architecture documentation for the applyColorMapping() function in transform-css-vars.ts from the ui codebase.

Function typescript FrameworkTooling CLICore calls 1 called by 1

Entity Profile

FrameworkTooling→ CLICore→ applyColorMapping() — ui Function Reference

Dependency Diagram

graph TD
  15235ae6_6a22_6fdf_a8f4_354a12d93b40["applyColorMapping()"]
  68902008_e67e_dfe4_353e_be9dad09e8d9["transform-css-vars.ts"]
  15235ae6_6a22_6fdf_a8f4_354a12d93b40 -->|defined in| 68902008_e67e_dfe4_353e_be9dad09e8d9
  996de029_c32d_60aa_ca35_5c74fad9cbe8["transformCssVars()"]
  996de029_c32d_60aa_ca35_5c74fad9cbe8 -->|calls| 15235ae6_6a22_6fdf_a8f4_354a12d93b40
  35f5833f_e233_d06c_e1a4_06b1e4fca37c["splitClassName()"]
  15235ae6_6a22_6fdf_a8f4_354a12d93b40 -->|calls| 35f5833f_e233_d06c_e1a4_06b1e4fca37c
  style 15235ae6_6a22_6fdf_a8f4_354a12d93b40 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/shadcn/src/utils/transformers/transform-css-vars.ts lines 150–195

export function applyColorMapping(
  input: string,
  mapping: z.infer<typeof registryBaseColorSchema>["inlineColors"]
) {
  // Handle border classes.
  if (input.includes(" border ")) {
    input = input.replace(" border ", " border border-border ")
  }

  // Build color mappings.
  const classNames = input.split(" ")
  const lightMode = new Set<string>()
  const darkMode = new Set<string>()
  for (let className of classNames) {
    const [variant, value, modifier] = splitClassName(className)
    const prefix = PREFIXES.find((prefix) => value?.startsWith(prefix))
    if (!prefix) {
      if (!lightMode.has(className)) {
        lightMode.add(className)
      }
      continue
    }

    const needle = value?.replace(prefix, "")
    if (needle && needle in mapping.light) {
      lightMode.add(
        [variant, `${prefix}${mapping.light[needle]}`]
          .filter(Boolean)
          .join(":") + (modifier ? `/${modifier}` : "")
      )

      darkMode.add(
        ["dark", variant, `${prefix}${mapping.dark[needle]}`]
          .filter(Boolean)
          .join(":") + (modifier ? `/${modifier}` : "")
      )
      continue
    }

    if (!lightMode.has(className)) {
      lightMode.add(className)
    }
  }

  return [...Array.from(lightMode), ...Array.from(darkMode)].join(" ").trim()
}