buildRegistryTheme() — ui Function Reference

Architecture documentation for the buildRegistryTheme() function in config.ts from the ui codebase.

Function typescript ComponentRegistry ChartRegistry calls 2 called by 1

Entity Profile

ComponentRegistry→ ChartRegistry→ buildRegistryTheme() — ui Function Reference

Dependency Diagram

graph TD
  f01c7cbd_535b_d368_94f9_81a40fde13ec["buildRegistryTheme()"]
  ad762621_6a27_5b76_c744_8ca39930b352["config.ts"]
  f01c7cbd_535b_d368_94f9_81a40fde13ec -->|defined in| ad762621_6a27_5b76_c744_8ca39930b352
  1ccb73c0_1ef3_71ae_c124_e225d34e4f04["buildRegistryBase()"]
  1ccb73c0_1ef3_71ae_c124_e225d34e4f04 -->|calls| f01c7cbd_535b_d368_94f9_81a40fde13ec
  306b8517_45f5_2636_ac4a_5e91422b2bd6["getBaseColor()"]
  f01c7cbd_535b_d368_94f9_81a40fde13ec -->|calls| 306b8517_45f5_2636_ac4a_5e91422b2bd6
  c5acd5d4_2a6c_4ebe_3ef0_c056be9f3c7a["getTheme()"]
  f01c7cbd_535b_d368_94f9_81a40fde13ec -->|calls| c5acd5d4_2a6c_4ebe_3ef0_c056be9f3c7a
  style f01c7cbd_535b_d368_94f9_81a40fde13ec fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/config.ts lines 330–380

export function buildRegistryTheme(config: DesignSystemConfig) {
  const baseColor = getBaseColor(config.baseColor)
  const theme = getTheme(config.theme)

  if (!baseColor || !theme) {
    throw new Error(
      `Base color "${config.baseColor}" or theme "${config.theme}" not found`
    )
  }

  // Merge base color and theme CSS vars.
  const lightVars: Record<string, string> = {
    ...(baseColor.cssVars?.light as Record<string, string>),
    ...(theme.cssVars?.light as Record<string, string>),
  }
  const darkVars: Record<string, string> = {
    ...(baseColor.cssVars?.dark as Record<string, string>),
    ...(theme.cssVars?.dark as Record<string, string>),
  }
  const themeVars: Record<string, string> = {}

  // Apply menu accent transformation.
  if (config.menuAccent === "bold") {
    lightVars.accent = lightVars.primary
    lightVars["accent-foreground"] = lightVars["primary-foreground"]
    darkVars.accent = darkVars.primary
    darkVars["accent-foreground"] = darkVars["primary-foreground"]
    lightVars["sidebar-accent"] = lightVars.primary
    lightVars["sidebar-accent-foreground"] = lightVars["primary-foreground"]
    darkVars["sidebar-accent"] = darkVars.primary
    darkVars["sidebar-accent-foreground"] = darkVars["primary-foreground"]
  }

  // Apply radius transformation.
  if (config.radius && config.radius !== "default") {
    const radius = RADII.find((r) => r.name === config.radius)
    if (radius && radius.value) {
      lightVars.radius = radius.value
    }
  }

  return {
    name: `${config.baseColor}-${config.theme}`,
    type: "registry:theme" as const,
    cssVars: {
      theme: Object.keys(themeVars).length > 0 ? themeVars : undefined,
      light: lightVars,
      dark: darkVars,
    },
  }
}