From bc74d5a73e6d164daf348ccf4d4249b2ec1cc0cc Mon Sep 17 00:00:00 2001 From: Lee Date: Wed, 9 Sep 2026 15:28:13 +0800 Subject: [PATCH 1/2] fix(grid): improve selected row --- apps/desktop/src/components/grid/DataGrid.vue | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/desktop/src/components/grid/DataGrid.vue b/apps/desktop/src/components/grid/DataGrid.vue index 036e9c350b..ae9267dcde 100644 --- a/apps/desktop/src/components/grid/DataGrid.vue +++ b/apps/desktop/src/components/grid/DataGrid.vue @@ -6473,7 +6473,7 @@ function dataGridRowStyle(item: RowItem): CSSProperties { return { "--data-grid-cell-bg": rowBg, "--data-grid-row-number-bg": rowNumberBg, - "--data-grid-cell-selected-bg": dark ? "rgb(20, 40, 60)" : "rgb(239, 246, 255)", + "--data-grid-cell-selected-bg": dark ? "rgb(30, 64, 100)" : "rgb(179, 208, 254)", "--data-grid-cell-selected-single-bg": dark ? "rgb(30, 64, 96)" : "rgb(191, 219, 254)", "--data-grid-cell-selected-dirty-bg": dark ? "rgb(76, 66, 38)" : "rgb(235, 224, 184)", "--data-grid-cell-selected-border": dark ? "rgb(96, 165, 250)" : "rgb(59, 130, 246)", @@ -13941,7 +13941,7 @@ useUpdateBlocker(() => (hasPendingChanges.value || hasPendingDataEditorDraft.val --data-grid-cell-crosshair-row-bg: rgb(174, 195, 224); --data-grid-cell-crosshair-col-bg: rgb(142, 170, 210); --data-grid-cell-dirty-bg: rgb(255, 248, 230); - --data-grid-cell-selected-bg: rgb(239, 246, 255); + --data-grid-cell-selected-bg: rgb(179, 208, 254); --data-grid-cell-selected-single-bg: rgb(191, 219, 254); --data-grid-cell-selected-dirty-bg: rgb(235, 224, 184); --data-grid-cell-selected-border: rgb(59, 130, 246); @@ -13975,7 +13975,7 @@ useUpdateBlocker(() => (hasPendingChanges.value || hasPendingDataEditorDraft.val --data-grid-cell-crosshair-row-bg: rgb(75, 84, 98); --data-grid-cell-crosshair-col-bg: rgb(98, 111, 130); --data-grid-cell-dirty-bg: rgb(94, 75, 26); - --data-grid-cell-selected-bg: rgb(20, 40, 60); + --data-grid-cell-selected-bg: rgb(30, 64, 100); --data-grid-cell-selected-single-bg: rgb(30, 64, 96); --data-grid-cell-selected-dirty-bg: rgb(76, 66, 38); --data-grid-cell-selected-border: rgb(96, 165, 250); @@ -14009,7 +14009,7 @@ useUpdateBlocker(() => (hasPendingChanges.value || hasPendingDataEditorDraft.val --data-grid-cell-dirty-bg: color-mix(in oklab, rgb(240 177 0) 10%, transparent); --data-grid-cell-crosshair-row-bg: color-mix(in srgb, var(--primary) 34%, var(--background)); --data-grid-cell-crosshair-col-bg: color-mix(in srgb, var(--primary) 50%, var(--background)); - --data-grid-cell-selected-bg: color-mix(in oklab, rgb(59 130 246) 12%, var(--background)); + --data-grid-cell-selected-bg: color-mix(in oklab, rgb(59 130 246) 28%, var(--background)); --data-grid-cell-selected-single-bg: color-mix(in oklab, rgb(59 130 246) 30%, var(--background)); --data-grid-cell-selected-dirty-bg: color-mix(in oklab, rgb(234 181 50) 30%, color-mix(in oklab, rgb(59 130 246) 18%, var(--background))); --data-grid-cell-selected-border: color-mix(in oklab, rgb(59 130 246) 75%, transparent); @@ -14065,7 +14065,7 @@ useUpdateBlocker(() => (hasPendingChanges.value || hasPendingDataEditorDraft.val } :global(.dark) [data-grid-root] { - --data-grid-cell-selected-bg: rgb(20, 40, 60); + --data-grid-cell-selected-bg: rgb(30, 64, 100); --data-grid-cell-selected-single-bg: rgb(30, 64, 96); --data-grid-cell-selected-dirty-bg: rgb(76, 66, 38); --data-grid-cell-selected-border: rgb(96, 165, 250); From dd4d099e3042b1e99cb3b9528f8d2529b2c8e270 Mon Sep 17 00:00:00 2001 From: zipg <4047349+zipg@users.noreply.github.com> Date: Sun, 20 Sep 2026 17:28:33 +0800 Subject: [PATCH 2/2] fix(grid): darken selected-cell border and align paint theme fallbacks Two CI failures blocked the previous revision: - The branch was 592 commits behind main, so it still carried the dataGridSelectionContrast snapshot test that upstream has since removed. Rebased on the current main, which drops it. - dataGridPaintTheme.spec.ts asserts a contrast ratio of at least 3 between the selected-cell border and fill. Against the deeper rgb(179, 208, 254) fill the old rgb(59, 130, 246) border only reached 2.34, so the light border is darkened to rgb(37, 99, 235) (3.29). The paint theme fallback constants and the spec expectations are updated to match, so the rendered color and the resolved tokens stay in sync. --- apps/desktop/src/components/grid/DataGrid.vue | 6 +++--- .../src/lib/__tests__/dataGrid/dataGridPaintTheme.spec.ts | 6 +++--- apps/desktop/src/lib/dataGrid/dataGridPaintTheme.ts | 4 ++-- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/apps/desktop/src/components/grid/DataGrid.vue b/apps/desktop/src/components/grid/DataGrid.vue index ae9267dcde..1f7da7de3d 100644 --- a/apps/desktop/src/components/grid/DataGrid.vue +++ b/apps/desktop/src/components/grid/DataGrid.vue @@ -6476,7 +6476,7 @@ function dataGridRowStyle(item: RowItem): CSSProperties { "--data-grid-cell-selected-bg": dark ? "rgb(30, 64, 100)" : "rgb(179, 208, 254)", "--data-grid-cell-selected-single-bg": dark ? "rgb(30, 64, 96)" : "rgb(191, 219, 254)", "--data-grid-cell-selected-dirty-bg": dark ? "rgb(76, 66, 38)" : "rgb(235, 224, 184)", - "--data-grid-cell-selected-border": dark ? "rgb(96, 165, 250)" : "rgb(59, 130, 246)", + "--data-grid-cell-selected-border": dark ? "rgb(96, 165, 250)" : "rgb(37, 99, 235)", "--data-grid-row-number-active-bg": activeRowBg, "--data-grid-row-number-selected-bg": dark ? "rgb(30, 64, 96)" : "rgb(191, 219, 254)", } as CSSProperties; @@ -13944,7 +13944,7 @@ useUpdateBlocker(() => (hasPendingChanges.value || hasPendingDataEditorDraft.val --data-grid-cell-selected-bg: rgb(179, 208, 254); --data-grid-cell-selected-single-bg: rgb(191, 219, 254); --data-grid-cell-selected-dirty-bg: rgb(235, 224, 184); - --data-grid-cell-selected-border: rgb(59, 130, 246); + --data-grid-cell-selected-border: rgb(37, 99, 235); --data-grid-cell-hover-bg: rgb(245, 245, 245); --data-grid-cell-search-bg: rgb(253, 245, 184); --data-grid-cell-current-search-bg: rgba(253, 224, 71, 0.52); @@ -14012,7 +14012,7 @@ useUpdateBlocker(() => (hasPendingChanges.value || hasPendingDataEditorDraft.val --data-grid-cell-selected-bg: color-mix(in oklab, rgb(59 130 246) 28%, var(--background)); --data-grid-cell-selected-single-bg: color-mix(in oklab, rgb(59 130 246) 30%, var(--background)); --data-grid-cell-selected-dirty-bg: color-mix(in oklab, rgb(234 181 50) 30%, color-mix(in oklab, rgb(59 130 246) 18%, var(--background))); - --data-grid-cell-selected-border: color-mix(in oklab, rgb(59 130 246) 75%, transparent); + --data-grid-cell-selected-border: color-mix(in oklab, rgb(37 99 235) 75%, transparent); --data-grid-cell-hover-bg: color-mix(in oklab, var(--accent) 50%, transparent); --data-grid-row-number-new-bg: color-mix(in oklab, rgb(16 185 129) 15%, var(--background)); --data-grid-row-number-edited-bg: color-mix(in oklab, rgb(245 158 11) 15%, var(--background)); diff --git a/apps/desktop/src/lib/__tests__/dataGrid/dataGridPaintTheme.spec.ts b/apps/desktop/src/lib/__tests__/dataGrid/dataGridPaintTheme.spec.ts index 0729fbb0e1..b9730f98ef 100644 --- a/apps/desktop/src/lib/__tests__/dataGrid/dataGridPaintTheme.spec.ts +++ b/apps/desktop/src/lib/__tests__/dataGrid/dataGridPaintTheme.spec.ts @@ -162,8 +162,8 @@ describe("data grid paint theme", () => { isDark: true, }); - expect(light.cellSelected).toBe("rgb(239, 246, 255)"); - expect(light.cellSelectedBorder).toBe("rgb(59, 130, 246)"); + expect(light.cellSelected).toBe("rgb(179, 208, 254)"); + expect(light.cellSelectedBorder).toBe("rgb(37, 99, 235)"); expect(light.cellSelectedSingle).toBe("rgb(191, 219, 254)"); expect(light.cellSelectedDirty).toBe("rgb(235, 224, 184)"); expect(light.cellDirty).toBe("rgb(255, 248, 230)"); @@ -171,7 +171,7 @@ describe("data grid paint theme", () => { expect(light.rowNumberTextEdited).toBe("rgb(187, 77, 0)"); expect(contrastRatio(light.cellSelectedBorder, light.cellSelected)).toBeGreaterThanOrEqual(3); - expect(dark.cellSelected).toBe("rgb(20, 40, 60)"); + expect(dark.cellSelected).toBe("rgb(30, 64, 100)"); expect(dark.cellSelectedBorder).toBe("rgb(96, 165, 250)"); expect(dark.cellSelectedSingle).toBe("rgb(30, 64, 96)"); expect(dark.cellSelectedDirty).toBe("rgb(76, 66, 38)"); diff --git a/apps/desktop/src/lib/dataGrid/dataGridPaintTheme.ts b/apps/desktop/src/lib/dataGrid/dataGridPaintTheme.ts index 463af61800..46af044c76 100644 --- a/apps/desktop/src/lib/dataGrid/dataGridPaintTheme.ts +++ b/apps/desktop/src/lib/dataGrid/dataGridPaintTheme.ts @@ -276,9 +276,9 @@ export function resolveDataGridPaintTheme(options: { getVar: (name: string) => s const cellCrosshairRow = paintToken(getVar, "--data-grid-cell-crosshair-row-bg", isDark ? DATA_GRID_DARK_CROSSHAIR_ROW_BG : DATA_GRID_LIGHT_CROSSHAIR_ROW_BG); const cellCrosshairCol = paintToken(getVar, "--data-grid-cell-crosshair-col-bg", isDark ? DATA_GRID_DARK_CROSSHAIR_COL_BG : DATA_GRID_LIGHT_CROSSHAIR_COL_BG); const cellDirty = isDark ? "rgb(94, 75, 26)" : "rgb(255, 248, 230)"; - const cellSelected = isDark ? "rgb(20, 40, 60)" : "rgb(239, 246, 255)"; + const cellSelected = isDark ? "rgb(30, 64, 100)" : "rgb(179, 208, 254)"; const cellSelectedDirty = isDark ? "rgb(76, 66, 38)" : "rgb(235, 224, 184)"; - const cellSelectedBorder = isDark ? "rgb(96, 165, 250)" : "rgb(59, 130, 246)"; + const cellSelectedBorder = isDark ? "rgb(96, 165, 250)" : "rgb(37, 99, 235)"; const cellSelectedSingle = isDark ? "rgb(30, 64, 96)" : "rgb(191, 219, 254)"; const cellHover = accent; const cellSearch = isDark ? DATA_GRID_DARK_SEARCH_COLORS.match : "rgb(253, 245, 184)";