Icon only buttons should have `$gl-text-secondary-color`
Problem
Two of my deliverables I worked on, needed me to add secondary buttons with icons only. The deliverables specified, that the icons should have the color, $gl-text-secondary-color as a main color. I suspect, that all secondary action buttons should have that color. (Please gitlab-ce~2024184 disagree with me on that one, but I have not found too much info in the UX guide regarding icons within secondary buttons).
In the two different implementations this was implemented with two different methods:
| Deliverable | Image | Solution | Link |
|---|---|---|---|
| commit-sha | By overwriting the the styles of the fa-clipboard and icon svg | pages/commits.scss#L235-239 | |
| deploy-keys | Use of .text-secondary class |
deploy_keys/components/key.vue#L202 |
While searching through the code-base, I found a lot of places where we overwrote the color of icons (be it font-awesome or our own icons) with $gl-text-secondary-color within buttons.
Proposed solution
We should ensure that icons (font-awesome/gitlab) have the correct colors within a buttons. This should be done at a framework level, and not with overwrites all over the place.