---
name: ThemeConfig
lang: ts
domain: ui
version: "1.0.0"
algebraic: product
definition: |
  interface ThemeConfig { name: string; label: string; palette: ColorPalette; colors: SemanticColors; typography: Typography; spacing: Spacing; borders: Borders; shadows: Shadows; motion: Motion; breakpoints: Breakpoints; zIndex: ZIndex; icons: Icons }
description: "Sistema completo de tokens de diseño: colores semánticos, tipografía, spacing, sombras, motion, breakpoints. Base del theming de Frontend Library."
tags: [theme, design-tokens, colors, typography, ui]
uses_types: []
file_path: "frontend/types/ui/theme_config.ts"
source_repo: "https://gitea-dgg044oo04woo4ggcsws4gk0.organic-machine.com/Bl4cksmith/Frontend_Library"
source_license: "MIT"
source_file: "frontend/src/themes/types.ts"
---

## Interfaces exportadas

- `ColorPalette` — colores primitivos (grays, brand, status, white/black)
- `SemanticColors` — tokens semánticos (background, foreground, border, brand, status, surface, sidebar, chart)
- `Typography` — fontFamily, fontSize, fontWeight, lineHeight, letterSpacing
- `Spacing` — escala 0-96 basada en 4px
- `Borders` — width y radius
- `Shadows` — elevación xs-2xl, inner, glow
- `Motion` — duration e easing
- `Breakpoints` — xs-2xl
- `ZIndex` — jerarquía de capas hide-max
- `Icons` — size y strokeWidth para Phosphor Icons
- `ThemeConfig` — composición completa de todos los tokens
- `ThemeColors` — formato legacy para compatibilidad con shadcn/ui
- `Theme` — nombre + label + ThemeColors
- `ThemeName` — union type de los temas disponibles

## Helper

`themeConfigToColors(config: ThemeConfig): ThemeColors` — convierte un ThemeConfig al formato legacy ThemeColors que consume shadcn/ui.

## Notas

Copia directa de `frontend/src/themes/types.ts` de Frontend_Library. El archivo es autocontenido sin dependencias externas. Los colores usan formato OKLCH via variables CSS.
