$secondary color in SCSS is inconsistent and confusing
In gitlab-ui we define $secondary
as $gray-50
which comes out as #f0f0f0
.
In gitlab we [set secondary](https://gitlab.com/gitlab-org/gitlab/-/blob/3fb56f242f07deb7be70acd4ce2b34e9985fc0e2/app/assets/stylesheets/framework/variables_overrides.scss#L6) to `gray-light, which is
#fafafa`.
We then have an explicit override just for .text-secondary
, which sets it back to $gray-700
(#707070
) thus resetting it to basically the same value as if we had done none of the things above!
We also have some additional overrides for a bunch of things that use $secondary
in bootstrap (ie. table and card header background colors). They are usually darker, since we overrode $secondary
we have additional overrides for those as well..
Reasons this is bad
- Bunch of unnecessary overrides and resets to basically end up with no visible change
-
text-secondary
andbg-secondary
give different colors (#707070
and#f0f0f0
) - This was confusing just to write down.
Bonus problem
On MR page, .text-secondary
is overridden by SourceGraph CSS (if sourcegraph is enabled), and so text-secondary is different again! (related: #224408 (closed))
What we should do
I think we can probably change the value of $secondary
back to default ($gray-600
or $gray-700
) then remove a bunch of the overrides and things should mostly work. Need to determine usages and consequences of changing it though