From 329d4364a7e95c87642f4764281745a6fb4f5bd4 Mon Sep 17 00:00:00 2001 From: simurai Date: Fri, 21 Feb 2020 14:29:30 +0900 Subject: [PATCH] Update .Label --- docs/content/components/labels.md | 62 +++++++++++++++----------- src/labels/labels.scss | 74 ++++++++++++++++++------------- 2 files changed, 78 insertions(+), 58 deletions(-) diff --git a/docs/content/components/labels.md b/docs/content/components/labels.md index fd4fe1a7..c282c558 100644 --- a/docs/content/components/labels.md +++ b/docs/content/components/labels.md @@ -11,55 +11,63 @@ Labels add metatdata or indicate status of items and navigational elements. Thre ## Labels -The base label component styles the text, adds padding and rounded corners, and an inset box shadow. Labels come in various themes which apply colors and different border styles. +The base label component styles the text, adds padding and rounded corners, and a border. Labels come in various themes which apply different colors. GitHub also programmatically generates and applies a background color for labels on items such as issues and pull requests. Users are able to select any background color and the text color will adjust to work with light and dark background colors. -The base `Label` style does not apply a background color, here's an example using the `bg-blue` utility to apply a blue background: +The base `Label` style does not apply a background color and only uses the default border: -```html live title="Label" -default label +```html live +design ``` **Note:** Be sure to include a title attribute on labels, it's helpful for people using screen-readers to differentiate a label from other text. I.e. without the title attribute, the following example would read as _"New select component design"_, rather than identifying `design` as a label. -```html live title="Label without title" +```html live -New select componentdesign +New select component design ``` -### Label themes +### Label contrast -Labels come in a few different themes. Use a theme that helps communicate the content of the label, and ensure it's used consistently. +Use `Label--gray` to create a label with a lighter text color. This label is neutral in color and can be used in contexts where all you need to communicate is metadata, or where you want a label to feel less prominent compared with labels with stronger colors. -Use `Label--gray` to create a label with a light gray background and gray text. This label is neutral in color and can be used in contexts where all you need to communicate is metadata, or whe you want a label to feel less prominent compared with labels with stronger colors. +Use `Label--gray-darker` to create a label with a dark-gray color and border. This label is also neutral in color, however, since its color is darker it can stand out more compared to `Label--gray`. -```html live title="Label theme gray" -gray label +```html live +Default +Gray +Dark gray ``` -Use `Label--gray-darker` to create a label with a dark-gray background color. This label is also neutral in color, however, since it's background is darker it can stand out more compared to `Label--gray`. +### Colored labels -```html live title="Label theme dark gray" -dark gray label +Labels come in a few different themes. Use a theme that helps communicate the content of the label, and ensure it's used consistently. A typical use of the themes are: + +- `Label--yellow` -> Pending/highlight +- `Label--orange` -> Warning +- `Label--red` -> Error +- `Label--green` -> Success +- `Label--blue` -> Info + + +```html live +Pending +Warning +Error +Success +Info ``` -Use `Label--orange` to communicate "warning". The orange background color is very close to red, so avoid using next to labels with a red background color since most people will find it hard to tell the difference. +Note: Avoid using `Label--orange` next to `Label--red` since most people will find it hard to tell the difference. -```html live title="Label theme orange" -orange label -``` +### Custon labels -Use `Label--outline` to create a label with gray text, a gray border, and a transparent background. The outline reduces the contrast of this label in combination with filled labels. Use this in contexts where you need it to stand out less than other labels and communicate a neutral message. +Use `Label--outline` in combination with any of the `text-` color utilities to create a label with matching text and border color. -```html live title="Label outline" -outlined label -``` - -Use `Label--outline-green` in combination with `Label--outline` to communicate a positive message. - -```html live title="Label outline green" -green outlined label +```html live +Orange light +Purple ``` ## Issue Labels diff --git a/src/labels/labels.scss b/src/labels/labels.scss index 06c799fe..68889e33 100644 --- a/src/labels/labels.scss +++ b/src/labels/labels.scss @@ -11,20 +11,19 @@ } // Each label gets common styles -// .label will be deprecated for .Label -.label, + +.label, // TODO: Deprecte .Label { display: inline-block; // stylelint-disable-next-line primer/spacing - padding: 3px $spacer-1; + padding: 3px 12px; font-size: $font-size-small; - font-weight: $font-weight-bold; - line-height: $lh-condensed-ultra; // prevent inheritance from changing proportions - color: $text-white; + font-weight: 500; + line-height: 16px; // stylelint-disable-next-line primer/borders - border-radius: 2px; - // stylelint-disable-next-line primer/box-shadow - box-shadow: inset 0 -1px 0 rgba($black, 0.12); + border-radius: 2em; + background-color: transparent !important; // TODO: Remove again + border: $border-width $border-style $border-color; &:hover { text-decoration: none; @@ -35,34 +34,47 @@ // // Commonly used across the site to indicate a particular role. For example, // "repo owner" within code comments or role in organizations. + .Label--gray { color: $text-gray; - // stylelint-disable-next-line primer/colors - background-color: lighten($gray-200, 3%); -} - -.Label--outline { - // stylelint-disable-next-line primer/spacing - margin-top: -1px; // offsets the 1px border - // stylelint-disable-next-line primer/spacing - margin-bottom: -1px; // offsets the 1px border - font-weight: $font-weight-normal; - color: $text-gray; - background-color: transparent; - border: $border-width $border-style $border-black-fade; - box-shadow: none; -} - -.Label--outline-green { - color: $text-green; - border: $border-width $border-style $border-green; + border-color: $border-gray; } .Label--gray-darker { - // stylelint-disable-next-line primer/colors - background-color: $gray; + color: $text-gray-dark; + border-color: $border-gray-darker; +} + +// Colors + +.Label--yellow { + color: $text-yellow; + border-color: $border-yellow; } .Label--orange { - background-color: $bg-orange; + color: $text-orange; + border-color: $border-red-light; +} + +.Label--red { + color: $text-red; + border-color: $border-red; +} + +.Label--outline-green, // TODO: Deprecate +.Label--green { + color: $text-green; + border-color: $border-green; +} + +.Label--blue { + color: $text-blue; + border-color: $border-blue; +} + +// Outline modifier can by used with any `.text-` color utility + +.Label--outline { + border-color: currentColor; }