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:
- The legacy diff renderer. It paints its match and no-newline rows from the
match-linemixin, which does not read any of these custom properties, so it is unaffected by this change and is left as it is. - Other syntax highlighting themes.
none,dark,monokai,dracula, and bothsolarizedthemes are untouched. - Within the Light theme,
--code-border-color,--diff-expansion-background-color, and--code-meta-diff-coloralso 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) |
|---|---|
![]() |
![]() |
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:
- Set the syntax highlighting theme to Light in user preferences.
- 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.
- On
masterthe 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.

