Add new color Labels (#1711)

* Add new role colors to .Label * Create kind-cycles-hope.md
primer · Oct 28, 2021 · bc3b94d · bc3b94d
1 parent f7c44c3
commit bc3b94d
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 7 deletions.
diff --git a/.changeset/kind-cycles-hope.md b/.changeset/kind-cycles-hope.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": minor
+---
+
+Add new color `Label`s
diff --git a/docs/content/components/labels.md b/docs/content/components/labels.md
@@ -37,16 +37,22 @@ Use `Label--secondary` to create a label with a subtler text color. This label i
 
 Labels come in a few different functional classes. Use to communicate the content of the label, and ensure it's used consistently.
 
-- `Label--info`
+- `Label--accent`
 - `Label--success`
-- `Label--warning`
+- `Label--attention`
+- `Label--severe`
 - `Label--danger`
+- `Label--done`
+- `Label--sponsors`
 
 ```html live
-<span class="Label mr-1 Label--info">Info</span>
+<span class="Label mr-1 Label--accent">Accent</span>
 <span class="Label mr-1 Label--success">Success</span>
-<span class="Label mr-1 Label--warning">Warning</span>
+<span class="Label mr-1 Label--attention">Attention</span>
+<span class="Label mr-1 Label--severe">Severe</span>
 <span class="Label mr-1 Label--danger">Danger</span>
+<span class="Label mr-1 Label--done">Done</span>
+<span class="Label mr-1 Label--sponsors">Sponsors</span>
 ```
 
 ### Label sizes

diff --git a/src/labels/labels.scss b/src/labels/labels.scss
@@ -30,7 +30,7 @@
   @include labels--inline;
 }
 
-// Colors
+// Contrast
 
 .Label--primary {
   color: var(--color-fg-default);
@@ -42,7 +42,10 @@
   border-color: var(--color-border-default);
 }
 
-.Label--info {
+// Colors
+
+.Label--info, // TODO: deprecate
+.Label--accent {
   color: var(--color-accent-fg);
   border-color: var(--color-accent-emphasis);
 }
@@ -52,12 +55,28 @@
   border-color: var(--color-success-emphasis);
 }
 
-.Label--warning {
+.Label--warning, // TODO: deprecate
+.Label--attention {
   color: var(--color-attention-fg);
   border-color: var(--color-attention-emphasis);
 }
 
+.Label--severe {
+  color: var(--color-severe-fg);
+  border-color: var(--color-severe-emphasis);
+}
+
 .Label--danger {
   color: var(--color-danger-fg);
   border-color: var(--color-danger-emphasis);
 }
+
+.Label--done {
+  color: var(--color-done-fg);
+  border-color: var(--color-done-emphasis);
+}
+
+.Label--sponsors {
+  color: var(--color-sponsors-fg);
+  border-color: var(--color-sponsors-emphasis);
+}