---
name: color_border
kind: function
lang: ts
domain: ui
version: "1.0.0"
purity: pure
signature: "colorBorder(color: string): string"
description: "Genera el valor CSS color-mix para el borde de un elemento con color Mantine. Sin color retorna dark-4. Hex: mezcla 30% con dark-4. Token Mantine: mezcla tono -7 al 30% con dark-4."
tags: [color, mantine, css, border, 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 borde base."
output: "String CSS listo para usar en style.borderColor o style.border. Produce un valor color-mix() o una CSS variable Mantine."
tested: true
tests:
  - "string vacio retorna dark-4"
  - "hex valido produce color-mix con 30 porciento"
  - "token mantine produce color-mix con tono -7"
  - "valor desconocido retorna dark-4"
test_file_path: "frontend/functions/ui/color_border.test.ts"
file_path: "frontend/functions/ui/color_border.ts"
---

## Ejemplo

```typescript
colorBorder("")           // "var(--mantine-color-dark-4)"
colorBorder("#0ea5e9")    // "color-mix(in srgb, #0ea5e9 30%, var(--mantine-color-dark-4))"
colorBorder("blue")       // "color-mix(in srgb, var(--mantine-color-blue-7) 30%, var(--mantine-color-dark-4))"
colorBorder("unknown")    // "var(--mantine-color-dark-4)"
```

## Notas

Extraida de `apps/kanban/frontend/src/components/colors.ts` lineas 53-58.
Diferencia clave respecto a `color_bg`: usa tono `-7` (no `-9`) y mezcla al 30% (no 18%) para conseguir un borde mas visible que el fondo.

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