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 |
---|---|
How to set up and validate locally
Make sure that vite
or webpack
are not running!
git checkout leipert-add-css-custom-props-to-light-mode~1
yarn run build:css
cp app/assets/builds/application.css application-before.css
npx prettier --write --ignore-path .gitignore --no-config application-before.css
git checkout leipert-add-css-custom-props-to-light-mode
yarn run build:css
cp app/assets/builds/application.css application-after.css
npx prettier --write --ignore-path .gitignore --no-config application-after.css
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