Update repository file tree row hover colors

What does this MR do and why?

Update repository file tree row hover colors

The repository file tree (tbody tr.tree-item) hover state currently uses the action-selected token family for its border, plus hard-coded gl-bg-blue-50 / dark:gl-bg-neutral-800 for the background. Per the @gitlab/ui token definitions, action-selected is reserved for persistently selected actions, while highlight-target is intended for "borders of temporarily targeted elements... distinct from persistent states". A hovered table row matches the latter.

This change:

  • Replaces --gl-action-selected-border-color-default with --gl-highlight-target-border-color for the hover border and inset box-shadows.
  • Replaces the hard-coded background utilities with --gl-highlight-target-background-color, which resolves to blue-50 in light mode (visually identical) and blue-950 in dark mode (intentional alignment with the hover semantic).

The hover border becomes a softer blue, and the dark-mode hover background shifts from a neutral grey to a dark blue tint.

Changelog: changed

References

Related: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/work_items/3438

Screenshots or screen recordings

Before After
Screenshot 2026-05-06 at 16.23.28.png Screenshot 2026-05-06 at 16.27.17.png
Screenshot 2026-05-06 at 16.23.52.png Screenshot 2026-05-06 at 16.27.36.png

How to set up and validate locally

  1. Navigate to a repo file tree
    1. Example: http://127.0.0.1:3000/flightjs/Flight
  2. Hover one of the rows

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Merge request reports

Loading
Loading