Skip to content

GitLab UI integration branch for 1452-tint-neutral-palette

Nick Brandt requested to merge gitlab-ui-integration-1452-tint-neutral-palette into master

What does this MR do and why?

This MR is for updating our neutral colors to have a tint based on our branding. More information can be found in gitlab-org/gitlab-services/design.gitlab.com#1452 (closed).

Ideally, we wouldn't need to specify the gray variables here in the GitLab product (as we do today) and instead rely on what is imported from gitlab-ui, but because of the ordering of how we pull in gitlab-ui this will still be required for now. I will create a follow-up issue to address how we could eliminate this need in the future.

Additionally, there were a few areas in our variables file where we had hard-coded gray hex values rather than utilizing the gray variables. This MR updates those instances. In a follow-up we can handle removing some of these non-standard gray variables (such as $gray-light, $gray-lighter, etc) and utilizing our gray palette instead.

MR for updating colors in gitlab-ui: gitlab-ui!3125 (merged)

Screenshots or screen recordings

page before after
Project project-before project-after
Board board-before board-after
Epic epic-before epic-after
Commit commit-before commit-after
Project (dark mode) dark-mode-before dark-mode-after
Additional Exploration
page before option 1 option 2
Project Screen_Shot_2022-10-31_at_2.01.54_PM Screen_Shot_2022-11-01_at_10.12.10_AM Screen_Shot_2022-10-31_at_8.40.37_PM
Project (dark mode) Screen_Shot_2022-10-31_at_5.21.46_PM Screen_Shot_2022-11-01_at_10.12.40_AM Screen_Shot_2022-10-31_at_8.40.15_PM

How to set up and validate locally

MR acceptance checklist

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

Edited by Nick Brandt

Merge request reports