[thupsi]

Rows in element index tables only change color once they're selected (.cp-table-row.sel > td, --c-color-accent-fill-quiet). Hovering a row shows nothing, so on a wide table it's easy to lose track of which row you're on between the title and a column far to the right.

This gives a hovered, unselected clickable row (.cp-table-row--clickable) a light fill through a new --c-table-row-hover token, next to --c-table-border-color in tokens.css. It's a fainter tint of the accent fill a row gets once it's selected (--c-color-accent-fill-quiet), so hover and selection read as the same color at two strengths:

• Light theme: the accent fill at 50%.
• Dark theme: the accent fill at 25%. The dark accent fill is more saturated, and at 50% a hovered row looked almost like a second selection.

Like the selected state, the fill goes on the cells, so it spans the content padding in the first and last cells. It only applies with a real hover (@media (hover: hover)), so a tap on a touch screen doesn't leave a row highlighted. Selected rows keep their own fill.

Light

Before	After

Dark

Before	After

🤖 Generated with Claude Code

https://claude.ai/code/session_01Nc1PhEEDdkm4yces1vwQzV

[brianjhanson]

I'm thinking the hover color should take on the tint of the accent color rather than be neutral since the accent color is what you see once a row is selected. Can you adjust that? Probably maybe just via a color-mix of accent and transparent but I've also toyed with the idea of an even more subtle variant (quieter or hushed or something).

[thupsi]

Done, it's now a tint of --c-color-accent-fill-quiet: 50% in light, 25% in dark, where the accent fill is more saturated and 50% looked almost like a selection. Screenshots in the description are updated.

[Copilot]

🟡 Changes recommended

The hover selector overrides child-drop target feedback and omits supported row-header cells, obscuring drag intent and leaving gaps in row highlighting.

2 open issues

• Include row-header cells in hover highlighting · New
• Preserve child-drop styling over hover fill · New

What changed in this PR

Adds a subtle hover fill to selectable rows in the shared control-panel DataTable, making wide element index tables easier to follow.

Changes:

• Applies cell-level hover backgrounds to unselected clickable rows on hover-capable devices.
• Adds a theme-aware token using 50% of the accent fill in light mode and 25% in dark mode.

File	Description
resources/​js/​common/​components/​DataTable.vue	Adds the hover rule while excluding selected rows.
packages/​craftcms-ui/​src/​styles/​shared/​tokens.css	Defines light- and dark-theme row-hover colors.

_{Review effort: Balanced}