Skip to content

Load CSS custom properties in GitLab light themes

What does this MR do and why?

Load CSS custom properties in GitLab light themes

Currently we do not utilize the CSS custom properties for light mode. So if we use custom properties, we actually fall back on hard-coded hex values in light mode.

Let's change that and consume the custom properties in light mode as well.

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
Screenshot_2024-05-14_at_18.58.05 Screenshot_2024-05-14_at_18.56.27

How to set up and validate locally

Make sure that vite or webpack are not running!

  1. git checkout leipert-add-css-custom-props-to-light-mode~1
  2. yarn run build:css
  3. cp app/assets/builds/application.css application-before.css
  4. npx prettier --write --ignore-path .gitignore --no-config application-before.css
  5. git checkout leipert-add-css-custom-props-to-light-mode
  6. yarn run build:css
  7. cp app/assets/builds/application.css application-after.css
  8. npx prettier --write --ignore-path .gitignore --no-config application-after.css
  9. diff -u application-before.css application-after.css

The diff should only show the contents of: https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/src/tokens/build/css/tokens.css

Edited by Lukas 'ai-pi' Eipert

Merge request reports