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/
Edited by Annabel Dunstone Gray