themeColorsToCssVariables() — ui Function Reference

Architecture documentation for the themeColorsToCssVariables() function in charts.ts from the ui codebase.

Function typescript ComponentRegistry Styles calls 1

Entity Profile

ComponentRegistry→ Styles→ themeColorsToCssVariables() — ui Function Reference

Dependency Diagram

graph TD
  ab773696_1f89_265e_8d08_15c4c404e7be["themeColorsToCssVariables()"]
  f36c1b1b_55ff_a09c_0316_7e92721eddeb["charts.ts"]
  ab773696_1f89_265e_8d08_15c4c404e7be -->|defined in| f36c1b1b_55ff_a09c_0316_7e92721eddeb
  bf9bf16c_3cae_ef9c_4697_abe1d3054fa6["themeColorNameToCssVariable()"]
  ab773696_1f89_265e_8d08_15c4c404e7be -->|calls| bf9bf16c_3cae_ef9c_4697_abe1d3054fa6
  style ab773696_1f89_265e_8d08_15c4c404e7be fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/lib/charts.ts lines 1–21

export function themeColorsToCssVariables(
  colors: Record<string, string>
): Record<string, string> {
  const cssVars = colors
    ? Object.fromEntries(
        Object.entries(colors).map(([name, value]) => {
          if (value === undefined) return []
          const cssName = themeColorNameToCssVariable(name)
          return [cssName, value]
        })
      )
    : {}

  // for (const key of Array.from({ length: 5 }, (_, index) => index)) {
  //   cssVars[`--chart-${key + 1}`] =
  //     cssVars[`--chart-${key + 1}`] ||
  //     `${cssVars["--primary"]} / ${100 - key * 20}%`
  // }

  return cssVars
}