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).
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.#0f172a,#1e293b,#334155,#2d3748) — bluer than the Radix Slate neutrals (#111113,#18191b,#212225,#272a2d).#38bdf8/#0284c7(sky blue) and binary-cell labels#818cf8/#4f46e5(indigo) — off-brand.#10b981,#f59e0b) instead of the--success-9/--warning-9tokens.Light theme had the equivalent mismatch.
Why hardcoded at all
Glide renders to a
<canvas>, so the theme can't use CSSvar()— it needs literal color strings. The fix mirrors the token hex values fromglobals.css, keyed onisDark, 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-11for accent + date/binary text,--success-11/--danger-11for numeric +/- coloring,--success-9/--warning-9tints for new/modified rows.Related to the design-system migration (#152).