---
name: get_computed_color
kind: function
lang: ts
domain: core
version: "1.0.0"
purity: impure
signature: "getComputedColor(cssVar: string): string"
description: "Resuelve una CSS variable de color a su valor RGB computado por el browser. Acepta '--primary', 'primary' o 'var(--primary)'. Util para canvas, sigma.js y APIs que no soportan CSS variables."
tags: [theme, css, color, runtime, dom, canvas]
uses_functions: []
uses_types: []
returns: []
returns_optional: false
error_type: "error_go_core"
imports: []
params:
  - name: cssVar
    desc: "Variable CSS a resolver (acepta '--primary', 'primary' o 'var(--primary)')"
output: "String con valor RGB computado por el browser (ej: 'rgb(120, 80, 220)')"
tested: false
tests: []
test_file_path: ""
file_path: "frontend/functions/core/get_computed_color.ts"
---

## Ejemplo

```typescript
import { getComputedColor } from './get_computed_color'

// Todos estos formatos son equivalentes:
const color1 = getComputedColor('--primary')      // "rgb(120, 80, 220)"
const color2 = getComputedColor('primary')        // "rgb(120, 80, 220)"
const color3 = getComputedColor('var(--primary)') // "rgb(120, 80, 220)"

// Usar en canvas 2D
const ctx = canvas.getContext('2d')
ctx.fillStyle = getComputedColor('--background')
ctx.strokeStyle = getComputedColor('--border')

// Usar en sigma.js v2
renderer.setSetting('defaultNodeColor', getComputedColor('--primary'))
renderer.setSetting('defaultEdgeColor', getComputedColor('--muted'))
```

## Notas

Impura — muta el DOM temporalmente (append + remove) para forzar la resolucion del color. Solo disponible en browser.

El browser retorna el valor en formato `rgb(r, g, b)` o `rgba(r, g, b, a)`, no en el formato original de la CSS variable (oklch, hsl, etc.). Si necesitas el valor original sin resolver, usar `getThemeTokens` en su lugar.

Para multiples colores en un mismo render, llamar una vez y cachear los resultados — cada llamada hace un ciclo DOM.
