Sticky header color alignment between color modes

Scott de Jongerequested to merge
sdejonge-sticky-header-dark-mode into master

What does this MR do and why?

Use semantic design token utility classes and CSS custom properties to align colors between light and dark mode for issue sticky header, file title, and review bar

Changelog: changed

MR acceptance checklist

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

Screenshots or screen recordings

Before After
gdk.test_3443_flightjs_Flight_-merge_requests_4_diffs__1 gdk.test_3443_flightjs_Flight_-_merge_requests_4_diffs
gdk.test_3443_flightjs_Flight_-merge_requests_4_diffs__2 No change

How to set up and validate locally

  1. View MR diff page e.g. https://gdk.test:3443/flightjs/Flight/-/merge_requests/4/diffs
  2. Start a review to display review bar
  3. Scroll down to display sticky header
  4. Toggle between color modes in https://gdk.test:3443/-/profile/preferences
  5. Sticky headers, diff titles, and review bar should have the same visual depth between light and dark mode

Merge request reports