Add functional labels

MIGRATING.md

@@ -9,7 +9,21 @@ Below a migration guide when updating Primer CSS to `16.0.0`:
 
 ## Components
 
-No changes should be needed. Components get updated automatically without making changes.
+Most components don't need to be updated and should work without making changes. But some of the componets that use presentational class names now use functional class names.
+
+### Labels
+
+[`v15`](https://primer.style/css/components/labels) | `v16`
+--- | ---
+`.Label--gray-darker`  | `.Label--primary`
+`.Label--gray`         | `.Label--secondary`
+`.Label--blue`         | `.Label--info`
+`.Label--green`        | `.Label--success`
+`.Label--yellow`       | `.Label--warning`
+`.Label--red`          | `.Label--danger`
+`.Label--orange`       | n/a
+`.Label--purple`       | n/a
+`.Label--pink`         | n/a
 
 ## Utility classes
 

docs/content/components/labels.md

@@ -30,38 +30,32 @@ The base `Label` style does not apply a background color and only uses the defau
 
 ### Label contrast
 
-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--primary` to create a label with a stronger border. This label is also neutral in color, however, since its border is stronger it can stand out more compared to the default `Label`.
 
-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`.
+Use `Label--secondary` to create a label with a subtler 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.
 
 ```html live
 <span class="Label" title="Label: Default">Default</span>
-<span class="Label Label--gray  ml-1" title="Label: Gray">Gray</span>
-<span class="Label Label--gray-darker ml-1" title="Label: Dark gray">Dark gray</span>
+<span class="Label Label--primary ml-1" title="Label: Primary">Primary</span>
+<span class="Label Label--secondary ml-1" title="Label: Secondary">Secondary</span>
 ```
 
 ### Colored labels
 
-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:
+Labels come in a few different functional classes. Use to communicate the content of the label, and ensure it's used consistently.
 
-- `Label--yellow` -> Pending/highlight
-- `Label--orange` -> Warning
-- `Label--red` -> Error
-- `Label--green` -> Success
-- `Label--blue` -> Info
+- `Label--info`
+- `Label--success`
+- `Label--warning`
+- `Label--danger`
 
 ```html live
-<span class="Label mr-1 Label--yellow" title="Label: Pending">Pending</span>
-<span class="Label mr-1 Label--orange" title="Label: Warning">Warning</span>
-<span class="Label mr-1 Label--red" title="Label: Error">Error</span>
-<span class="Label mr-1 Label--green" title="Label: Success">Success</span>
-<span class="Label mr-1 Label--blue" title="Label: Info">Info</span>
-<span class="Label mr-1 Label--purple" title="Label: PRO">PRO</span>
-<span class="Label mr-1 Label--pink" title="Label: Sponsor">Sponsor</span>
+<span class="Label mr-1 Label--info" title="Label: Info">Info</span>
+<span class="Label mr-1 Label--success" title="Label: Success">Success</span>
+<span class="Label mr-1 Label--warning" title="Label: Warning">Warning</span>
+<span class="Label mr-1 Label--danger" title="Label: Danger">Danger</span>
 ```
 
-Note: Avoid using `Label--orange` next to `Label--red` since most people will find it hard to tell the difference.
-
 ### Label sizes
 
 If space allows, add the `Label--large` modidfier to add a bit more padding to lables.

src/labels/labels.scss

@@ -11,7 +11,7 @@
 .Label {
   @include labels-base;
   background-color: transparent !important; // TODO: Remove again
-  border-color: var(--color-border-primary);
+  border-color: var(--color-label-border);
 
   &:hover {
     text-decoration: none;
@@ -30,6 +30,43 @@
   @include labels--inline;
 }
 
+// Colors
+
+.Label--primary {
+  color: var(--color-label-primary-text);
+  border-color: var(--color-label-primary-border);
+}
+
+.Label--secondary {
+  color: var(--color-label-secondary-text);
+  border-color: var(--color-label-secondary-border);
+}
+
+.Label--info {
+  color: var(--color-label-info-text);
+  border-color: var(--color-label-info-border);
+}
+
+.Label--success {
+  color: var(--color-label-success-text);
+  border-color: var(--color-label-success-border);
+}
+
+.Label--warning {
+  color: var(--color-label-warning-text);
+  border-color: var(--color-label-warning-border);
+}
+
+.Label--danger {
+  color: var(--color-label-danger-text);
+  border-color: var(--color-label-danger-border);
+}
+
+//
+// ------------------------ Deprecated ------------------------
+// Some might get replaced at some point. If possible, use functional classes.
+//
+
 // Contrast
 
 .Label--outline, // TODO: Deprecate? It's now the default