From 44ffec74461924fa4994b549c6472fc7d861f972 Mon Sep 17 00:00:00 2001 From: zipg Date: Wed, 22 Jul 2026 21:43:51 +0800 Subject: [PATCH] fix(data-grid): improve striped row contrast --- apps/desktop/src/components/grid/DataGrid.vue | 11 +++++------ .../src/lib/dataGrid/dataGridPaintTheme.ts | 4 +++- .../app-tests/canvasDataGridRenderer.test.ts | 16 ++++++++++++++++ 3 files changed, 24 insertions(+), 7 deletions(-) diff --git a/apps/desktop/src/components/grid/DataGrid.vue b/apps/desktop/src/components/grid/DataGrid.vue index 1e2e9a7c60..d3cf124544 100644 --- a/apps/desktop/src/components/grid/DataGrid.vue +++ b/apps/desktop/src/components/grid/DataGrid.vue @@ -133,6 +133,7 @@ import { canGoNextDataGridPage, hasCompleteLocalDataGridResult } from "@/lib/dat import { dataGridCountQueryOptions } from "@/lib/dataGrid/dataGridQueryOptions"; import { dataGridBottomScrollTop, dataGridScrollPosition, isDataGridAtScrollBottom, isDataGridNearScrollBottom, shouldCheckInfiniteScrollAfterScroll, type DataGridScrollPosition } from "@/lib/dataGrid/dataGridInfiniteScroll"; import { CANVAS_DATA_GRID_ROW_HEIGHT, dataGridSearchMatchKey, drawCanvasDataGrid } from "@/lib/dataGrid/canvasDataGridRenderer"; +import { DATA_GRID_DARK_STRIPED_ROW_BG, DATA_GRID_LIGHT_STRIPED_ROW_BG } from "@/lib/dataGrid/dataGridPaintTheme"; import { createRowLowerTextCache } from "@/lib/dataGrid/dataGridRowLowerText"; import { dataGridPreviewLabelKey, dataGridSaveActionMode, dataGridSaveToolbarState } from "@/lib/dataGrid/dataGridSaveUi"; import type { QueryEditabilityReason } from "@/lib/sql/sqlAnalysis"; @@ -4328,9 +4329,7 @@ function dataGridRowStyle(item: RowItem): CSSProperties { ? "rgb(51, 51, 55)" : "rgb(243, 243, 243)" : item.displayIndex % 2 === 1 - ? dark - ? "rgb(32, 32, 34)" - : "rgb(248, 248, 248)" + ? `var(--data-grid-row-muted-bg, ${dark ? DATA_GRID_DARK_STRIPED_ROW_BG : DATA_GRID_LIGHT_STRIPED_ROW_BG})` : dark ? "rgb(19, 20, 22)" : "rgb(255, 255, 255)"; @@ -9060,7 +9059,7 @@ const gridContextMenuItems = computed(() => { @reference "../../styles/globals.css"; [data-grid-root] { - --data-grid-row-muted-bg: rgb(248, 248, 248); + --data-grid-row-muted-bg: rgb(240, 240, 240); --data-grid-row-new-bg: rgb(243, 243, 243); --data-grid-row-deleted-bg: rgb(255, 244, 244); --data-grid-cell-active-bg: rgb(232, 232, 232); @@ -9086,7 +9085,7 @@ const gridContextMenuItems = computed(() => { [data-grid-root].data-grid--dark, :global(.dark) [data-grid-root] { - --data-grid-row-muted-bg: rgb(32, 32, 34); + --data-grid-row-muted-bg: rgb(40, 40, 43); --data-grid-row-new-bg: rgb(51, 51, 55); --data-grid-row-deleted-bg: rgb(55, 31, 32); --data-grid-cell-active-bg: rgb(64, 64, 64); @@ -9112,7 +9111,7 @@ const gridContextMenuItems = computed(() => { @supports (background: color-mix(in oklab, white 50%, transparent)) { [data-grid-root] { - --data-grid-row-muted-bg: color-mix(in oklab, var(--muted) 30%, transparent); + --data-grid-row-muted-bg: color-mix(in oklab, var(--muted) 99%, var(--foreground)); --data-grid-row-new-bg: color-mix(in oklab, var(--primary) 5%, transparent); --data-grid-row-deleted-bg: color-mix(in oklab, var(--destructive) 5%, transparent); --data-grid-cell-active-bg: color-mix(in oklab, var(--primary) 15%, transparent); diff --git a/apps/desktop/src/lib/dataGrid/dataGridPaintTheme.ts b/apps/desktop/src/lib/dataGrid/dataGridPaintTheme.ts index 264b3ae1f6..ef60d2086b 100644 --- a/apps/desktop/src/lib/dataGrid/dataGridPaintTheme.ts +++ b/apps/desktop/src/lib/dataGrid/dataGridPaintTheme.ts @@ -35,6 +35,8 @@ export const DATA_GRID_DARK_SEARCH_COLORS = { current: "rgb(116, 87, 0)", currentBorder: "rgb(239, 177, 0)", } as const; +export const DATA_GRID_LIGHT_STRIPED_ROW_BG = "rgb(240, 240, 240)"; +export const DATA_GRID_DARK_STRIPED_ROW_BG = "rgb(40, 40, 43)"; export const DATA_GRID_DARK_ROW_NUMBER_BG = "rgb(35, 37, 42)"; const DATA_GRID_DARK_ROW_NUMBER_NEW_BG = "rgb(33, 45, 40)"; const DATA_GRID_DARK_ROW_NUMBER_EDITED_BG = "rgb(48, 41, 28)"; @@ -239,7 +241,7 @@ export function resolveDataGridPaintTheme(options: { getVar: (name: string) => s const destructive = cssVarColor(getVar, "--destructive", isDark ? "rgb(243, 98, 95)" : "rgb(231, 0, 11)"); const accent = cssVarColor(getVar, "--accent", isDark ? "rgb(46, 47, 51)" : "rgb(245, 245, 245)"); const activeSurface = isDark ? "rgb(64, 64, 64)" : "rgb(232, 232, 232)"; - const rowMuted = isDark ? "rgb(32, 32, 34)" : "rgb(248, 248, 248)"; + const rowMuted = isDark ? DATA_GRID_DARK_STRIPED_ROW_BG : DATA_GRID_LIGHT_STRIPED_ROW_BG; const rowNew = isDark ? "rgb(51, 51, 55)" : "rgb(243, 243, 243)"; const rowDeleted = isDark ? "rgb(55, 31, 32)" : "rgb(255, 244, 244)"; const cellActive = activeSurface; diff --git a/packages/app-tests/canvasDataGridRenderer.test.ts b/packages/app-tests/canvasDataGridRenderer.test.ts index b193e35724..499929b5c2 100644 --- a/packages/app-tests/canvasDataGridRenderer.test.ts +++ b/packages/app-tests/canvasDataGridRenderer.test.ts @@ -1,6 +1,7 @@ import { strict as assert } from "node:assert"; import { test } from "vitest"; import { fitCanvasText } from "../../apps/desktop/src/lib/dataGrid/canvasDataGridRenderer.ts"; +import { DATA_GRID_DARK_STRIPED_ROW_BG, DATA_GRID_LIGHT_STRIPED_ROW_BG, resolveDataGridPaintTheme } from "../../apps/desktop/src/lib/dataGrid/dataGridPaintTheme.ts"; function measureContext(charWidth = 1): CanvasRenderingContext2D { return { @@ -21,3 +22,18 @@ test("fitCanvasText truncates only when text exceeds the available cell width", assert.equal(fitCanvasText(ctx, "1234567890", 8), "12345..."); }); + +test("data grid paint themes use the increased striped row contrast", () => { + const getVar = () => ""; + + const lightTheme = resolveDataGridPaintTheme({ getVar, isDark: false }); + assert.equal(lightTheme.rowMuted, DATA_GRID_LIGHT_STRIPED_ROW_BG); + assert.notEqual(lightTheme.rowMuted, lightTheme.rowNew); + assert.equal(resolveDataGridPaintTheme({ getVar, isDark: true }).rowMuted, DATA_GRID_DARK_STRIPED_ROW_BG); +}); + +test("data grid paint theme uses the resolved striped row token", () => { + const getVar = (name: string) => (name === "--data-grid-row-muted-bg" ? "rgb(235, 239, 244)" : ""); + + assert.equal(resolveDataGridPaintTheme({ getVar, isDark: false }).rowMuted, "rgb(235, 239, 244)"); +});