mirrors/dbx
0
0 Fork 0
mirror of https://github.com/t8y2/dbx.git synced 2026-10-28 09:45:37 +08:00
Code Activity

fix(grid): darken selected-cell border and align paint theme fallbacks

Browse Source 
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.
This commit is contained in:
zipg committed 2026-09-20 17:28:33 +08:00
1 parent bc74d5a73e
commit dd4d099e30
3 files changed
+8 -8
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/desktop/src/components/grid/DataGrid.vue
+3 -3
View File
@@ -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));
apps/desktop/src/lib/__tests__/dataGrid/dataGridPaintTheme.spec.ts
Vendored
+3 -3
View File
@@ -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)");
apps/desktop/src/lib/dataGrid/dataGridPaintTheme.ts
+2 -2
View File
@@ -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)";