Restore subtle empty row background in white diff theme

What does this MR do and why?

Restores how empty rows and meta rows look in the Rapid Diffs viewer on the Light syntax highlighting theme, back to how they looked before the @gitlab/ui 137.2.0 bump. Scope is the Light theme in Rapid Diffs only.

Cause: 137.2.0 re-hued the whole neutral ramp from cool to warm. $gl-color-neutral-10 moved from #fbfafd to #f7f7f5. Against the white code background that is about 1.8x the contrast it had, so those rows read as a warm grey band instead of a faint tint.

Fix: --code-empty-background and --code-meta-diff-background-color now use $gl-color-alpha-dark-2, which composites to rgb(250, 250, 250) over --code-background. Because it is an alpha value it layers over the code background rather than assuming white.

Empty/meta row vs --code-background Contrast
Before 137.2.0 1.0399
After 137.2.0 1.0727
This MR 1.0438

Second commit: declares six custom properties that the Rapid Diffs viewer reads but the white theme never set: --code-diff-hunk-header-background-color, --code-diff-hunk-header-color, --code-diff-expand-button-background-color, --code-diff-expand-button-hover-background-color, --code-diff-expand-button-hover-color, and --code-line-number-background-color. Undeclared, they fell back to the deprecated $gray-50, $gray-400, $gray-100, $gray-200, $gray-800, and $white tokens hardcoded in app/assets/stylesheets/components/rapid_diffs/text_file_viewers.scss. Every dark theme already declares them. Those deprecated tokens are aliases of the same neutral constants, so this commit is a visual no-op, verified in a browser: the hunk header band still paints #ecebea and the expand buttons still paint #dcdbd9. Its purpose is to bring these surfaces under theme control instead of leaving them on fallbacks the theme cannot influence, which is the gap that let the re-hue reach them unnoticed.

Explicitly out of scope:

  1. The legacy diff renderer. It paints its match and no-newline rows from the match-line mixin, which does not read any of these custom properties, so it is unaffected by this change and is left as it is.
  2. Other syntax highlighting themes. none, dark, monokai, dracula, and both solarized themes are untouched.
  3. Within the Light theme, --code-border-color, --diff-expansion-background-color, and --code-meta-diff-color also shifted in the re-hue, but each moved contrast by 1% or less and is a hue-only change, so they stay on the new tokens.

References

Bump that introduced the regression: !254584 (merged)

Screenshots or screen recordings

Light theme, side-by-side view, same scroll position in both. The frame covers every line type this change touches: the block of empty rows down the left of events_spec.js, and the \ No newline at end of file meta row at the foot of test.txt, with added, context and hunk header rows alongside for reference.

Before (master) After (this MR)
white-theme-before-master white-theme-after-fix

The difference is deliberately slight, so here it is measured from the rendered pixels of those two images rather than left to the eye: the empty and meta rows are rgb(247, 247, 245) before and rgb(250, 250, 250) after.

How to set up and validate locally

Reproduction steps:

  1. Set the syntax highlighting theme to Light in user preferences.
  2. Open a merge request Changes tab or a commit diff containing a file with lines on only one side, so empty rows render. Use side-by-side view.
  3. On master the empty rows and the meta row line numbers show as a warm grey band. With this change they are a faint neutral tint.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist.

Edited by Stanislav Lashmanov

Merge request reports

Loading
Loading