Results data grid uses pre-design-system palette (blue/slate) — doesn't match app chrome

Abierto Apto para principiantes
  • ¿Algo no está bien?
#187 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
76/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Tranquilo
Stack tecnológico
react, typescript
Área
design, frontend

Línea de trabajo

Lee src/components/ui/GridView.tsx y compara su paleta con los tokens correspondientes en src/styles/globals.css. Comprueba ambos temas isDark. Sustituye los colores del grid codificados directamente por valores literales que reflejen los tokens nombrados y añade comentarios que vinculen cada valor con su token. El trabajo estará terminado cuando la paleta del grid coincida con el sistema de diseño en ambos temas.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

bug enhancement

Summary

The query results table (Glide Data Grid in src/components/ui/GridView.tsx) renders with the old pre-design-system palette while the surrounding results toolbar/buttons use the new Radix Cyan tokens. The grid therefore looks visibly "bluer" and off-theme next to the rest of the app.

Hardcoded values that didn't match src/styles/globals.css:

  • accentColor: "#06b6d4" (old cyan) — selection ring/highlight; brand accent is --accent-9 #00a2c7.
  • Cell/header backgrounds used Tailwind slate (#0f172a, #1e293b, #334155, #2d3748) — bluer than the Radix Slate neutrals (#111113, #18191b, #212225, #272a2d).
  • Date cells #38bdf8 / #0284c7 (sky blue) and binary-cell labels #818cf8 / #4f46e5 (indigo) — off-brand.
  • New/modified row tints used emerald/amber (#10b981, #f59e0b) instead of the --success-9 / --warning-9 tokens.

Light theme had the equivalent mismatch.

Why hardcoded at all

Glide renders to a <canvas>, so the theme can't use CSS var() — it needs literal color strings. The fix mirrors the token hex values from globals.css, keyed on isDark, with comments mapping each back to its token so the two stay in sync.

Fix

Replace the grid palette with token-mirrored values: neutral scale for cell/header/border/text, --accent-9/--accent-11 for accent + date/binary text, --success-11/--danger-11 for numeric +/- coloring, --success-9/--warning-9 tints for new/modified rows.

Related to the design-system migration (#152).

Lenguaje dominante
TypeScript
Estrellas
6
Forks
1
Merge medio
17 min
PR fusionados (30 d)
2

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de openidle-dev/queryden

Todos los issues de openidle-dev/queryden

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.