Implement neutral themes (brand-aligned color ramp and ui-* theme classes)

Dan MH (former GitLab team member)requested to merge
implement-neutral-themes into main

What does this MR do?

Updates the neutral color ramp to use brand-aligned colors and renames the neutral tint theme CSS classes from tint-neutral-* to ui-* so they can be applied via existing product theme infrastructure without additional integration work.

  • Update neutral color ramp to use brand-aligned colors (warmer lights/darks pulling towards blue-violet)
  • Rename theme classes from tint-neutral-<value> to ui-<value>

Previous reviews

This work was previously reviewed in:

Two way door decision

Having the application chrome be darker than the panel in dark mode has had mixed feedback from team members. (1, 2)

Panels sit on top of the chrome and should come forward. The current colours have it receding which is not the right metaphor.

This decision leans in to the design principles, if the principles need to change then they should.

If there is negative user impact, we can revert without a full release by overriding the variables in the monolith. We should only do this if there is negative impact, not just negative opinions.

Grey theme

There is not much that separates the grey theme from the default theme. In the future we might introduce an accent colour to bring more brand into the default theme. This redundancy is not expected to cause harm. A migration strategy needs to be built if we will remove the grey theme in the future.

References

https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/work_items/3429

Integrations

Edited by Dan MH (former GitLab team member)

Merge request reports