🇪🇸 Español
El modo oscuro funciona pero necesita un pulido visual general en toda la web. Varios estados interactivos no se sienten cuidados en dark mode: hovers con poco contraste o que reutilizan colores del tema claro, bordes/superficies que se pierden contra el fondo, y estados focus/active inconsistentes entre componentes (botones, enlaces, tabs, chips, sidebar de docs, nodos del diagrama, etc.).
Objetivo: revisar y unificar los estados hover, focus y active en dark mode para que tengan contraste suficiente y un comportamiento consistente, idealmente apoyándose en design tokens (CSS custom properties) en vez de colores sueltos.
Áreas a revisar:
- Header / navegación y selector de idioma/tema
- Botones, enlaces y chips de la home
- Sidebar y navegación de docs
- Tabs Snippet/Project y controles del panel de análisis
- Diagrama: nodos, aristas, leyenda y estados hover/selección
Solución sugerida: Auditar los estados interactivos en dark mode, definir tokens de color para hover/focus/active y aplicarlos de forma consistente, verificando contraste (WCAG AA).
🇬🇧 English
Dark mode works but needs an overall visual polish across the site. Several interactive states feel unpolished in dark mode: low-contrast hovers or hovers reusing light-theme colors, borders/surfaces that disappear against the background, and inconsistent focus/active states between components (buttons, links, tabs, chips, docs sidebar, diagram nodes, etc.).
Goal: review and unify hover, focus, and active states in dark mode so they have enough contrast and behave consistently, ideally driven by design tokens (CSS custom properties) instead of one-off colors.
Areas to review:
- Header / navigation and language/theme switcher
- Buttons, links, and home chips
- Docs sidebar and navigation
- Snippet/Project tabs and analyze-panel controls
- Diagram: nodes, edges, legend, and hover/selection states
Suggested fix: Audit interactive states in dark mode, define color tokens for hover/focus/active, and apply them consistently, verifying contrast (WCAG AA).
🇪🇸 Español
El modo oscuro funciona pero necesita un pulido visual general en toda la web. Varios estados interactivos no se sienten cuidados en dark mode: hovers con poco contraste o que reutilizan colores del tema claro, bordes/superficies que se pierden contra el fondo, y estados focus/active inconsistentes entre componentes (botones, enlaces, tabs, chips, sidebar de docs, nodos del diagrama, etc.).
Objetivo: revisar y unificar los estados
hover,focusyactiveen dark mode para que tengan contraste suficiente y un comportamiento consistente, idealmente apoyándose en design tokens (CSS custom properties) en vez de colores sueltos.Áreas a revisar:
Solución sugerida: Auditar los estados interactivos en dark mode, definir tokens de color para hover/focus/active y aplicarlos de forma consistente, verificando contraste (WCAG AA).
🇬🇧 English
Dark mode works but needs an overall visual polish across the site. Several interactive states feel unpolished in dark mode: low-contrast hovers or hovers reusing light-theme colors, borders/surfaces that disappear against the background, and inconsistent focus/active states between components (buttons, links, tabs, chips, docs sidebar, diagram nodes, etc.).
Goal: review and unify
hover,focus, andactivestates in dark mode so they have enough contrast and behave consistently, ideally driven by design tokens (CSS custom properties) instead of one-off colors.Areas to review:
Suggested fix: Audit interactive states in dark mode, define color tokens for hover/focus/active, and apply them consistently, verifying contrast (WCAG AA).