---
name: color_swatch
kind: function
lang: ts
domain: ui
version: "1.0.0"
purity: pure
signature: "colorSwatch(color: string): string"
description: "Genera el valor CSS para mostrar un swatch (muestra de color) Mantine. Sin color retorna dark-3. Hex: retorna el hex directamente. Token Mantine: retorna CSS var del tono -7."
tags: [color, mantine, css, swatch, 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 color neutro."
output: "String CSS listo para usar en style.backgroundColor de un circulo/swatch. Para hex retorna el valor literal. Para tokens retorna una CSS variable Mantine. Sin color retorna dark-3."
tested: true
tests:
  - "string vacio retorna dark-3"
  - "hex valido retorna el hex sin modificar"
  - "token mantine retorna css var tono -7"
  - "valor desconocido retorna dark-3"
  - "hex de 3 digitos retorna hex de 3 digitos"
test_file_path: "frontend/functions/ui/color_swatch.test.ts"
file_path: "frontend/functions/ui/color_swatch.ts"
---

## Ejemplo

```typescript
colorSwatch("")           // "var(--mantine-color-dark-3)"
colorSwatch("#0ea5e9")    // "#0ea5e9"
colorSwatch("#0ea")       // "#0ea"
colorSwatch("blue")       // "var(--mantine-color-blue-7)"
colorSwatch("unknown")    // "var(--mantine-color-dark-3)"
```

## Notas

Extraida de `apps/kanban/frontend/src/components/colors.ts` lineas 60-65.
A diferencia de `color_bg` y `color_border`, para hex no aplica `color-mix` — retorna el valor crudo porque el swatch muestra el color puro, sin mezclarlo con el fondo.

**Decision de helpers compartidos:** ver `color_bg.md`. Misma logica: `_mantine_color_helpers.ts` compartido.
