desynth-style-tokens

Design tokens de Desynth generados con Style Dictionary. Fuente de verdad del theming (light / dark / high-contrast / neutral) que consumen @desynth/web-components y las apps (admin dashboard, web).

Build

npm run generate   # tsc + genera dist/ (CSS vars + tokens.json + assets)

Salida en dist/:

| Archivo | Contenido | |---|---| | assets/css/variables.css | Tokens modo light (:root) | | assets/css/variables-dark.css | Overrides [data-mode="dark"] | | assets/css/variables-hc.css / variables-hc-dark.css | Alto contraste | | assets/css/variables-all.css | Todo combinado (lo que consumen las apps) | | tokens.json | Tokens planos para consumo JS |

Estructura de tokens

tokens/
  core/color/       rampas (green, blue, amber, navy, neutral...) + semanticos
  core/font/        familia, sizes, weights, spacing
  core/size/        radius de borde, padding
  core/asset/       assets svg
  components/       typography styles, neutral theme bridge (--app-*)

Convenciones

• Un solo accent por tema. Light: amber (brand primary) + navy (secondary). Dark: teal. --color-brand-primary-base es EL accent.
• Sin negros/blancos puros en superficies/texto: neutral.1000 es off-black #0a0a0d; el pop en dark es off-white (#f4f4f6), nunca #fff.
• darkValue / hcValue / hcDarkValue por token: el formatter cssDark/cssHc* en src/app.ts genera los archivos por modo.
• Tema neutral (data-theme="neutral"): bridge --app-* para el app multi-tenant black/white. Opt-in por componente vía var(--app-*, fallback).

Verificación de la cadena

1. npm run generate en este repo.
2. bash sync-desynth.sh en desynth-admin-dashboard (copia variables-all.css → public/styles/tokens.css).
3. En el app: el bundle debe contener [data-mode="dark"] y la rampa --color-background-primary de ambos modos.