Apéndice E: Paleta de colores de sintaxis
Esta es la paleta oficial de colores para el resaltado de sintaxis de Nyx. Todas las herramientas, editores, documentación y sitios web de Nyx deben usar estos colores para mantener consistencia.
Tabla de colores
| Elemento | Clase CSS | Tema claro | Tema oscuro | Qué resalta |
|---|---|---|---|---|
| Keywords | .kw |
#7c3aed |
#a78bfa |
fn, let, var, if, else, while, return, import, struct, enum, match, for, in, break, continue, pub, true, false, trait, impl |
| Funciones | .fn |
#2563eb |
#60a5fa |
main, print, push, length, http_serve_mt, tcp_write, channel_new |
| Strings | .str |
#059669 |
#34d399 |
"hola", "std/http", 'c' |
| Números | .num |
#d97706 |
#fbbf24 |
42, 0, 3.14, 0xFF, 128 |
| Tipos | .ty |
#db2777 |
#f472b6 |
String, int, float, bool, Array, Map, Fn, structs definidos por el usuario |
| Comentarios | .cm |
#9ca3af |
#5a5a78 |
// esto es un comentario |
| Operadores | .op |
#6b7280 |
#9494b0 |
->, =, +, -, *, /, ==, !=, <, >, :, >=, <= |
Razonamiento del diseño
- Violeta para keywords: El color identidad de Nyx. Los keywords son la columna vertebral estructural del código — deben resaltar inmediatamente.
- Azul para funciones: El segundo elemento más importante. Las llamadas a funciones son acción — el azul transmite actividad.
- Verde para strings: Los strings son datos/contenido. El verde es calmado y distinto del violeta estructural.
- Ámbar para números: Color cálido para literales numéricos. Instantáneamente distinguible de strings y keywords.
- Rosa para tipos: Los tipos definen la forma de los datos. El rosa es semánticamente "metadatos sobre datos".
- Gris para comentarios y operadores: Baja prioridad visual. Los comentarios son notas, no código ejecutable. Los operadores son puntuación estructural.
Implementación CSS
Tema claro
.kw { color: #7c3aed; } /* violeta */
.fn { color: #2563eb; } /* azul */
.str { color: #059669; } /* verde */
.num { color: #d97706; } /* ámbar */
.ty { color: #db2777; } /* rosa */
.cm { color: #9ca3af; } /* gris */
.op { color: #6b7280; } /* gris medio */
Tema oscuro
.kw { color: #a78bfa; } /* violeta claro */
.fn { color: #60a5fa; } /* azul claro */
.str { color: #34d399; } /* verde claro */
.num { color: #fbbf24; } /* ámbar claro */
.ty { color: #f472b6; } /* rosa claro */
.cm { color: #5a5a78; } /* gris tenue */
.op { color: #9494b0; } /* gris claro */
Fuente
La fuente monoespaciada estándar para código Nyx es JetBrains Mono. Alternativa: monospace.
--font-mono: 'JetBrains Mono', monospace;