Skip to content

Remove SCSS color functions on $white SCSS variable usage

Scott de Jonge requested to merge 430055-remove-white-scss-color-functions into master

What does this MR do and why?

Simplify color usage to reduce SCSS color functions (lighten(), darken(), mix() etc.) and duplicate SCSS variables for Pajamas color values. This should enable future color usage to inherit design token generated CSS custom properties from GitLab UI, in an effort to simplify dark mode color definitions and usage. Current SCSS color function usage can be viewed on the GitLab Code Scanner

Remove SCSS color functions on $white SCSS variable usage

  • Replace $white-transparent with linear-gradient using transparent
  • Remove transparentize( usage, replace with transparent

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before After
CleanShot_2023-11-17_at_16.03.39 CleanShot_2023-11-17_at_16.14.11

How to set up and validate locally

  1. View emoji dropdown on any issuable view e.g. http://gdk.test:3000/flightjs/Flight/-/merge_requests/4
  2. Scroll down, header should have gradient background

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #430055

Merge request reports