fix(GlButton): Update background for tertiary button hover focus and active states
What does this MR do?
Fixes #1095 (closed).
Substitutes the tertiary button background color for focus, active, and hover to account for different backgrounds. Right now, we are currently using a "hard" gray and this doesn't account for different background colors we have behind tertiary buttons on gitlab.com.
Screenshots
| Before | After |
|---|---|
 |
 |
Solution
The solution, proposed by @jeldergl here, uses mix-blend-mode: multiply which allows us to keep our current background colors, but blends them with the background to keep with the same palette. This will also make it easier to update to our dark mode theme by adjusting the value instead of redefining multiple colors. Docs for mix blend mode: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode.
Does this MR meet the acceptance criteria?
Conformity
-
Code review guidelines. -
GitLab UI's contributing guidlines. -
If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer. -
If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer. -
If the MR changes a component's API, integration MR(s) have been opened in the following projects to ensure that the @gitlab/uipackage can be upgraded quickly after the changes are released:-
GitLab: mr_url -
CustomersDot: mr_url -
Status Page: mr_url
-
-
Added the ~"component:*"label(s) if applicable.
Security
If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:
-
Label as security and @ mention @gitlab-com/gl-security/appsec -
Security reports checked/validated by a reviewer from the AppSec team
Closes #1095 (closed)