/* Tokens del UI Kit Habilidy v3, dirección B. ───────────────────────────────────────────────────────────────────── CAMBIAR UN COLOR NO REQUIERE RECOMPILAR NADA. Edita el valor aquí, guarda y recarga el navegador. Este archivo se sirve tal cual; no pasa por el build. Lo que Tailwind compila es qué clases existen, no a qué color resuelven: `.bg-brand` queda escrito como `rgb(var(--brand-rgb) / 1)` y la variable se lee en el navegador en cada pintado. Solo hay que correr `npm run build:css` cuando aparece una CLASE que antes no se usaba en ninguna plantilla —la primera vez que alguien escribe `bg-brand-tint`, `text-info`, `rounded-xl`— o cuando se cambia tailwind.config.js. Nunca por cambiar un color. Si se olvida, no salta ningún error: la clase existe en el HTML, no existe en el CSS, y solo se ve un elemento sin fondo. Por eso lo comprueba tests/test_colores_desde_tokens.py. ───────────────────────────────────────────────────────────────────── Fuente: docs/prompts-diseno/ui-kit-habilidy-v3/Habilidy UI Kit.html, líneas 70-145. Ojo: HANDOFF.md y README.md del kit dicen que el primario es #0D9488 y están desactualizados — los seis HTML declaran data-direction="B", src/app.jsx:19 fija esa dirección, y TWEAK_DEFAULTS.accent no se lee en ningún punto. Manda lo que renderiza. Los valores se guardan como canales RGB sueltos, no como hexadecimal, porque Tailwind necesita poder inyectar la opacidad: `bg-brand/20` se compila a `rgb(var(--brand-rgb) / 0.2)`. Con un hexadecimal en la variable eso no funciona y las 128 clases con modificador de opacidad se romperían en silencio. Los nombres --hex-* existen para el CSS escrito a mano que no pasa por Tailwind y que sí puede usar el color directamente. */ :root { /* ---- Marca ---- */ --brand-rgb: 45 217 221; /* #2DD9DD */ --brand-hover-rgb: 0 199 203; /* #00C7CB */ --brand-strong-rgb: 0 191 201; /* #00BFC9 botones, acciones */ --brand-strong-hover-rgb: 0 166 176; /* #00A6B0 */ --brand-text-rgb: 0 139 150; /* #008B96 legible sobre claro */ --brand-on-rgb: 0 61 68; /* #003D44 texto sobre la marca */ --brand-tint-rgb: 224 251 251; /* #E0FBFB fondo suave */ /* ---- Semánticos ---- */ --success-rgb: 45 157 99; /* #2D9D63 */ --warning-rgb: 232 169 60; /* #E8A93C */ --danger-rgb: 217 79 61; /* #D94F3D */ --info-rgb: 107 91 214; /* #6B5BD6 */ --success-tint-rgb: 232 246 238; --warning-tint-rgb: 253 243 225; --danger-tint-rgb: 251 235 232; --info-tint-rgb: 238 236 251; --success-text-rgb: 30 116 71; --warning-text-rgb: 150 102 16; --danger-text-rgb: 170 55 40; --info-text-rgb: 78 63 173; /* ---- Neutros y superficies (tema claro) ---- */ --canvas-rgb: 250 250 249; /* #FAFAF9 */ --surface-rgb: 255 255 255; /* #FFFFFF */ --surface-2-rgb: 244 244 242; /* #F4F4F2 */ --ink-rgb: 15 20 25; /* #0F1419 */ --ink-muted-rgb: 71 85 105; /* #475569 */ --ink-subtle-rgb: 148 163 184; /* #94A3B8 */ --line-rgb: 229 229 226; /* #E5E5E2 */ --line-strong-rgb: 203 208 212; /* #CBD0D4 */ /* Velo de los diálogos. Nunca fue "negro al 80 %": es el fondo de la aplicación oscurecido, para que el diálogo no flote sobre un agujero. */ --overlay-rgb: 15 20 25; /* ---- Forma ---- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; /* Equivalentes en hexadecimal, para el CSS que no pasa por Tailwind. */ --hex-brand: #2DD9DD; --hex-brand-strong: #00BFC9; --hex-brand-text: #008B96; --hex-success: #2D9D63; --hex-warning: #E8A93C; --hex-danger: #D94F3D; --hex-info: #6B5BD6; } /* Tema oscuro. Los semánticos suben de luminosidad para seguir siendo legibles sobre fondo oscuro, y la marca se usa directa: el cian brilla lo suficiente y no necesita la variante fuerte. */ :root[data-theme="dark"] { --brand-strong-rgb: 45 217 221; --brand-text-rgb: 45 217 221; --brand-tint-rgb: 10 46 51; /* #0A2E33 */ --success-rgb: 92 191 138; --warning-rgb: 239 192 107; --danger-rgb: 232 119 106; --info-rgb: 145 134 228; --success-tint-rgb: 16 38 27; --warning-tint-rgb: 42 34 20; --danger-tint-rgb: 43 23 20; --info-tint-rgb: 32 28 56; --success-text-rgb: 92 191 138; --warning-text-rgb: 239 192 107; --danger-text-rgb: 232 119 106; --info-text-rgb: 145 134 228; --canvas-rgb: 12 17 21; /* #0C1115 */ --surface-rgb: 21 27 32; /* #151B20 */ --surface-2-rgb: 31 38 44; /* #1F262C */ --ink-rgb: 240 235 224; /* #F0EBE0 */ --ink-muted-rgb: 184 174 156; /* #B8AE9C */ --ink-subtle-rgb: 138 130 118; /* #8A8276 */ --line-rgb: 42 49 56; /* #2A3138 */ --line-strong-rgb: 58 67 75; /* #3A434B */ --overlay-rgb: 0 0 0; --hex-brand-text: #2DD9DD; --hex-success: #5CBF8A; --hex-warning: #EFC06B; --hex-danger: #E8776A; --hex-info: #9186E4; } /* ---- Tipografía y forma que no son color ---- Las familias son las de la dirección B del kit. Se sirven desde app/static/fonts, no desde fonts.googleapis.com. */ :root { --font-display: 'Zilla Slab', Georgia, 'Times New Roman', serif; --font-body: 'Geist', 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; --border-width: 1px; --density: 1.1; /* Escala de sombras de la dirección B. Son deliberadamente suaves: el diseño separa las superficies con el borde, no con la sombra. */ --shadow-sm: 0 1px 2px 0 rgb(var(--ink-rgb) / 0.04); --shadow-md: 0 2px 8px -2px rgb(var(--ink-rgb) / 0.06), 0 4px 16px -4px rgb(var(--ink-rgb) / 0.04); --shadow-lg: 0 8px 24px -4px rgb(var(--ink-rgb) / 0.08), 0 16px 48px -12px rgb(var(--ink-rgb) / 0.06); --shadow-soft: var(--shadow-lg); } :root[data-theme="dark"] { /* Sobre fondo oscuro una sombra suave no se ve: hay que subirla o los elevados quedan planos. */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3); --shadow-md: 0 2px 8px -2px rgb(0 0 0 / 0.4), 0 4px 16px -4px rgb(0 0 0 / 0.3); --shadow-lg: 0 8px 24px -4px rgb(0 0 0 / 0.45), 0 16px 48px -12px rgb(0 0 0 / 0.35); }