Scoped labels restyled

From https://gitlab.com/gitlab-org/gitlab-ee/issues/9175#note_154807790

Different sizes/colors In sidebar
Screen_Shot_2019-04-11_at_1.08.25_PM 130CFA63-2847-460C-851C-FC1DCBEBA930

Note that for this iteration, the question mark icon will still be in the label, so they'll look like this:

Design notes/specs

  • Border on large labels is 2px; on small labels it's 1px
  • We currently choose the text color based on which color the user selected as background. If the label background is dark, it has white text, if it is light, it has dark text
    • For labels with white text, the label value should have a white background, and the text color should match the background of the scope portion (revert the 2 colors)
    • For labels with dark text, the label value should still have a white background, but the text color should still be the standard dark text color
    • The question mark icon is $gray-500: #a7a7a7
  • Specs- https://gitlab-org.gitlab.io/gitlab-design/hosted/annabel/%23282-scoped-labels-spec-previews/

This page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.

Edited May 19, 2022 by 🤖 GitLab Bot 🤖
Assignee Loading
Time tracking Loading