Creation of a Labs label for a different page-role (#277)

The page-role "Labs" is already used for the Labs template, so in order
to use a Labs label in H2 in an upcoming page in docs, I thought this
could be the way to fix it.

---------

Co-authored-by: Neil Dewhurst <[email protected]>

Author: lidiazuin

preview-src/labels.adoc

@@ -182,6 +182,10 @@
   <span class="label label--cluster-member-single">SINGLE</span>
 </div>
 
+<div class="box">
+  <span class="label label--labs-label">Labs</span>
+</div>
+
 ++++
 
 == Tables with labels!

src/css/labels.css

@@ -234,6 +234,11 @@ span.label--labs {
   background: var(--color-labs);
 }
 
+span.label--labs-label {
+  background: var(--color-labs);
+  color: rgba(var(--colors-neutral-10));
+}
+
 span.label--graph-academy {
   background: var(--success-color);
 }

src/js/data/rolesData.json

@@ -10,6 +10,12 @@
         "product": "Labs",
         "displayText": "Labs"
     },
+    "labs-label":{
+        "description": "Neo4j Labs project label",
+        "labelCategory": "content",
+        "product": "Labs",
+        "displayText": "Labs"
+    },
     "graph-academy":{
         "description": "Neo4j Graph Academy",
         "labelCategory": "content",