# Design Tokens — Tokens Completos y Configuración de Referencia

Definiciones completas de tokens primitivos, semánticos, temas, Style Dictionary e integraciones.

---

## Tokens Primitivos Completos

```json
{
  "color": {
    "azul": {
      "50":  { "value": "#eff6ff" },
      "100": { "value": "#dbeafe" },
      "200": { "value": "#bfdbfe" },
      "300": { "value": "#93c5fd" },
      "400": { "value": "#60a5fa" },
      "500": { "value": "#3b82f6" },
      "600": { "value": "#2563eb" },
      "700": { "value": "#1d4ed8" },
      "800": { "value": "#1e40af" },
      "900": { "value": "#1e3a8a" }
    },
    "gris": {
      "50":  { "value": "#f8fafc" },
      "100": { "value": "#f1f5f9" },
      "900": { "value": "#0f172a" }
    }
  },
  "espacio": {
    "1": { "value": "4px" },
    "2": { "value": "8px" },
    "3": { "value": "12px" },
    "4": { "value": "16px" },
    "6": { "value": "24px" },
    "8": { "value": "32px" },
    "12": { "value": "48px" },
    "16": { "value": "64px" }
  },
  "fuente": {
    "sans": { "value": "'Inter', system-ui, -apple-system, sans-serif" },
    "mono": { "value": "'JetBrains Mono', 'Fira Code', monospace" }
  },
  "tamano": {
    "xs":   { "value": "12px" },
    "sm":   { "value": "14px" },
    "base": { "value": "16px" },
    "lg":   { "value": "18px" },
    "xl":   { "value": "20px" },
    "2xl":  { "value": "24px" },
    "3xl":  { "value": "30px" },
    "4xl":  { "value": "36px" }
  }
}
```

---

## Tokens Semánticos Completos

```json
{
  "color": {
    "fondo": {
      "pagina":      { "value": "{color.gris.50}" },
      "superficie":  { "value": "{color.blanco}" },
      "elevado":     { "value": "{color.blanco}" }
    },
    "texto": {
      "primario":    { "value": "{color.gris.900}" },
      "secundario":  { "value": "{color.gris.600}" },
      "deshabilitado": { "value": "{color.gris.400}" },
      "inverso":     { "value": "{color.blanco}" }
    },
    "borde": {
      "sutil":       { "value": "{color.gris.200}" },
      "normal":      { "value": "{color.gris.300}" },
      "fuerte":      { "value": "{color.gris.500}" }
    },
    "marca": {
      "primario":    { "value": "{color.azul.600}" },
      "primario-hover": { "value": "{color.azul.700}" },
      "primario-texto": { "value": "{color.blanco}" }
    },
    "estado": {
      "exito":       { "value": "{color.verde.600}" },
      "error":       { "value": "{color.rojo.600}" },
      "advertencia": { "value": "{color.ambar.500}" },
      "info":        { "value": "{color.azul.600}" }
    }
  },
  "espacio": {
    "componente": {
      "padding-sm": { "value": "{espacio.2}" },
      "padding-md": { "value": "{espacio.4}" },
      "padding-lg": { "value": "{espacio.6}" },
      "gap-sm":     { "value": "{espacio.2}" },
      "gap-md":     { "value": "{espacio.4}" }
    },
    "layout": {
      "contenedor-max": { "value": "1280px" },
      "sidebar-ancho":  { "value": "256px" },
      "header-alto":    { "value": "64px" }
    }
  },
  "tipografia": {
    "cuerpo": {
      "familia": { "value": "{fuente.sans}" },
      "tamano":  { "value": "{tamano.base}" },
      "altura-linea": { "value": "1.5" }
    },
    "encabezado": {
      "familia": { "value": "{fuente.sans}" },
      "peso":    { "value": "700" }
    }
  },
  "borde": {
    "radio": {
      "sm":   { "value": "4px" },
      "md":   { "value": "8px" },
      "lg":   { "value": "12px" },
      "xl":   { "value": "16px" },
      "full": { "value": "9999px" }
    }
  },
  "sombra": {
    "sm": { "value": "0 1px 2px 0 rgb(0 0 0 / 0.05)" },
    "md": { "value": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)" },
    "lg": { "value": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)" }
  }
}
```

---

## Formato W3C Design Tokens

```json
{
  "$schema": "https://design-tokens.org/schema/draft-8",
  "color": {
    "$type": "color",
    "marca": {
      "primario": {
        "$value": "#3b82f6",
        "$description": "Color primario de marca, usar para CTAs principales",
        "$extensions": {
          "figma": { "collectionId": "VariableCollectionId:1:1" }
        }
      }
    }
  }
}
```

---

## Temas: Light / Dark / Brand

### Tema claro

```json
{
  "color": {
    "fondo": {
      "pagina":     { "value": "#f8fafc" },
      "superficie": { "value": "#ffffff" }
    },
    "texto": {
      "primario":   { "value": "#0f172a" },
      "secundario": { "value": "#475569" }
    }
  }
}
```

### Tema oscuro

```json
{
  "color": {
    "fondo": {
      "pagina":     { "value": "#0f172a" },
      "superficie": { "value": "#1e293b" }
    },
    "texto": {
      "primario":   { "value": "#f1f5f9" },
      "secundario": { "value": "#94a3b8" }
    }
  }
}
```

### CSS de temas

```css
:root, [data-tema="claro"] {
  --color-fondo-pagina:     #f8fafc;
  --color-texto-primario:   #0f172a;
}
[data-tema="oscuro"] {
  --color-fondo-pagina:     #0f172a;
  --color-texto-primario:   #f1f5f9;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) {
    --color-fondo-pagina:   #0f172a;
    --color-texto-primario: #f1f5f9;
  }
}
```

### Multi-tenant

```json
// tokens/marcas/empresa-a.json
{ "color": { "marca": { "primario": { "value": "#6366f1" } } } }

// tokens/marcas/empresa-b.json
{ "color": { "marca": { "primario": { "value": "#10b981" } } } }
```

---

## Style Dictionary — Configuración Completa

```javascript
// style-dictionary.config.js
import StyleDictionary from 'style-dictionary';

export default {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      prefix: '',
      buildPath: 'dist/css/',
      files: [{
        destination: 'tokens.css',
        format: 'css/variables',
        options: { selector: ':root' },
      }],
    },
    js: {
      transformGroup: 'js',
      buildPath: 'dist/js/',
      files: [
        { destination: 'tokens.js', format: 'javascript/es6' },
        { destination: 'tokens.d.ts', format: 'typescript/es6-declarations' },
      ],
    },
    android: {
      transformGroup: 'android',
      buildPath: 'dist/android/',
      files: [{
        destination: 'colors.xml',
        format: 'android/colors',
        filter: { type: 'color' },
      }],
    },
    ios_swift: {
      transformGroup: 'ios-swift',
      buildPath: 'dist/ios/',
      files: [{
        destination: 'DesignTokens.swift',
        format: 'ios-swift/class.swift',
      }],
    },
  },
};
```

---

## Integraciones con Frameworks

### Tailwind CSS v4

```css
@import "tailwindcss";
@import "./dist/css/tokens.css";

@theme {
  --color-primario: var(--color-marca-primario);
  --color-superficie: var(--color-fondo-superficie);
  --font-sans: var(--fuente-sans);
  --radius-md: var(--borde-radio-md);
}
```

### Angular Material

```scss
@use '@angular/material' as mat;

$paleta-primaria: mat.define-palette((
  50: #eff6ff, 100: #dbeafe, 500: #3b82f6, 600: #2563eb, 700: #1d4ed8,
  contrast: (500: white, 600: white, 700: white)
));

$tema: mat.define-light-theme((
  color: (primary: $paleta-primaria, accent: $paleta-acento),
  typography: mat.define-typography-config($font-family: var(--fuente-sans)),
));

@include mat.all-component-themes($tema);
```

### CSS-in-JS (Emotion/Styled Components)

```typescript
export const tema = {
  colores: {
    marca: {
      primario: 'var(--color-marca-primario)',
      primarioHover: 'var(--color-marca-primario-hover)',
    },
    texto: {
      primario: 'var(--color-texto-primario)',
      secundario: 'var(--color-texto-secundario)',
    },
  },
  espacio: { sm: 'var(--espacio-2)', md: 'var(--espacio-4)', lg: 'var(--espacio-6)' },
  radio: { md: 'var(--borde-radio-md)', lg: 'var(--borde-radio-lg)' },
} as const;
```

---

## Versionado — CHANGELOG de Tokens

```markdown
## [2.1.0] — 2024-03-20

### Agregado
- `color.estado.advertencia-suave` para alertas inline
- `espacio.layout.contenedor-ancho-xl` para layouts anchos

### Cambiado
- `color.marca.primario` de `#3b82f6` a `#2563eb` (mayor contraste WCAG AA)

## [2.0.0] — 2024-02-01

### BREAKING
- Renombrado `color.principal.*` -> `color.marca.*`
- Eliminado `espacio.legacy.*`
```

### Deprecated tokens

```json
{
  "color": {
    "principal": {
      "primario": {
        "value": "{color.marca.primario}",
        "$deprecated": true,
        "$description": "Deprecated en v2.0. Usar color.marca.primario"
      }
    }
  }
}
```
