---
name: color_bg
kind: function
lang: ts
domain: ui
version: "1.0.0"
purity: pure
signature: "colorBg(color: string): string"
description: "Genera el valor CSS color-mix para el fondo de un elemento con color Mantine. Sin color retorna dark-6. Hex: mezcla 18% con dark-6. Token Mantine (blue, red, ...): mezcla tono -9 al 18% con dark-6."
tags: [color, mantine, css, background, ui, theme]
uses_functions: []
uses_types: []
returns: []
returns_optional: false
error_type: ""
imports: []
params:
  - name: color
    desc: "Color de entrada. Puede ser: string vacio (sin color), hex valido (#RGB o #RRGGBB), o token de color Mantine (\"blue\", \"red\", \"teal\", etc.). Valores no reconocidos retornan el fondo base."
output: "String CSS listo para usar en style.background o style.backgroundColor. Produce un valor color-mix() o una CSS variable Mantine."
tested: true
tests:
  - "string vacio retorna dark-6"
  - "hex valido produce color-mix con 18 porciento"
  - "token mantine produce color-mix con tono -9"
  - "valor desconocido retorna dark-6"
  - "hex de 3 digitos es valido"
test_file_path: "frontend/functions/ui/color_bg.test.ts"
file_path: "frontend/functions/ui/color_bg.ts"
---

## Ejemplo

```typescript
colorBg("")           // "var(--mantine-color-dark-6)"
colorBg("#0ea5e9")    // "color-mix(in srgb, #0ea5e9 18%, var(--mantine-color-dark-6))"
colorBg("blue")       // "color-mix(in srgb, var(--mantine-color-blue-9) 18%, var(--mantine-color-dark-6))"
colorBg("unknown")    // "var(--mantine-color-dark-6)"
```

## Notas

Extraida de `apps/kanban/frontend/src/components/colors.ts` lineas 46-51.
Junto con `color_border` y `color_swatch` forma el trio de helpers de color para tarjetas Mantine.

**Decision de helpers compartidos:** `MANTINE_TOKENS` e `isHex` se comparten via `_mantine_color_helpers.ts` en el mismo directorio `ui/`. Alternativa descartada: duplicar en cada archivo — genera drift si el set de tokens cambia (ya ocurrio en kanban al agregar "dark"). El prefijo underscore indica que el archivo es privado del directorio y no debe reexportarse desde `index.ts`.
