Skip to content

fix(GlLabel): Fix dark theme scoped labels

Florie Guibert requested to merge 472-dark-theme-fix-scoped-labels into master

What does this MR do?

Fixes how text color is applied to labels to prevent scoped labels text to be unreadable in dark mode. This was tested using yarn link in gitlab to validate is fixes issue gitlab#228698 (closed) The text color class gets applied on the label container so the css rules .gl-label-text-light.gl-label-text-light, .gl-label-text-dark + .gl-label-text-dark, causes different text colors to be activated depending on which label precedes the scoped label.

Before After
Screenshot_from_2020-08-11_10-43-26 Screenshot_from_2020-08-11_12-01-30

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/ui package can be upgraded quickly after the changes are released:
  • Added the ~"component:*" label(s) if applicable.

Issue #472 (closed)

Edited by Florie Guibert

Merge request reports