Utilize GitLab UI variables for color themes
Problem to solve
We currently have color theme variables defined in Pajamas/GitLab UI, but these are not being utilized in the product.
Proposal
- Update color theme usage to utilize gitlab-ui variables
- Deprecate theme variables listed in GitLab
- Update theme hex values to match Pajamas
app/assets/stylesheets/framework/variables.scss
Theme | Current | Proposed |
---|---|---|
Indigo | #292961 |
$t-indigo-900 #222261
|
Light Indigo | #4b4ba3 |
$t-indigo-700 #41419f
|
Blue | #1a3652 |
$t-blue-900 #0b2640
|
Light Blue | #2261a1 |
$t-light-blue-700 #145aa1
|
Green | #0d4524 |
$t-green-900 #0e4328
|
Light Green | #156b39 |
$t-green-700 #1b653f
|
Red | #691a16 |
$red-900 #660e00
|
Light Red | #a62e21 |
$t-light-red-700 #a02e1c
|
Dark | #303030 |
$gray-900 #303030
|
Light | #f0f0f0 |
$gray-50 #f0f0f0
|
Dark Mode | #303030 |
$gray-900 #303030
|
Dark Mode is the only theme using a variable color
body.gl-dark .navbar-gitlab {
background-color: var(--gray-50);
box-shadow: 0 1px 0 0 var(--gray-100);
}
Edited by Austin Regnery