Move GitHub labels to the global scope and increase style range

Author: dhruvkb

content/contributing-code/repo-labels/contents.lr

@@ -63,19 +63,19 @@ The priority of an issue is based on its impact, derived from a combination of
 urgency and importance. This determines the importance of the issue when sprint 
 planning or deciding which issues to tackle next.
 
-- <span class="gh-label has-text-white" style="background-color: #b60205;">
+- <span class="gh-label priority-unfavourable">
     🟥 priority: critical
   </span>
   - **Description:** Must be fixed ASAP
-- <span class="gh-label has-text-black" style="background-color: #ff9f1c;">
+- <span class="gh-label priority-negative">
     🟧 priority: high
   </span>
   - **Description:** Stalls work on the project or its dependents
-- <span class="gh-label has-text-black" style="background-color: #ffcc00;">
+- <span class="gh-label priority-neutral">
     🟨 priority: medium
   </span>
   - **Description:** Not blocking but should be fixed soon
-- <span class="gh-label has-text-black" style="background-color: #cfda2c;">
+- <span class="gh-label priority-positive">
     🟩 priority: low
   </span>
   - **Description:** Low priority and doesn't need to be rushed
@@ -113,32 +113,32 @@ may not be ready to be worked on for a number of reasons and the maintainers
 must keep updating the labels as the situation evolves.
 
 An issue, at the time of closing can have either the 
-<span class="gh-label has-text-black" style="background-color: #cccccc;">
+<span class="gh-label status-light">
   🏁 status: ready for dev
 </span>
 or the 
-<span class="gh-label has-text-black" style="background-color: #eeeeee;">
+<span class="gh-label status-lighter">
   ⛔️ status: discarded
 </span>
 label based on whether it was closed with or without resolution, respectively.
 
-- <span class="gh-label has-text-black" style="background-color: #cccccc;">
+- <span class="gh-label status-light">
     🏁 status: ready for dev
   </span>
   - **Description:** Ready for work
-- <span class="gh-label has-text-black" style="background-color: #999999;">
+- <span class="gh-label status-neutral">
     🚧 status: blocked
   </span>
   - **Description:** Blocked & therefore, not ready for work
-- <span class="gh-label has-text-white" style="background-color: #666666;">
+- <span class="gh-label status-dark">
     🧹 status: ticket work required
   </span>
   - **Description:** Needs more details before it can be worked on
-- <span class="gh-label has-text-black" style="background-color: #eeeeee;">
+- <span class="gh-label status-lighter">
     ⛔️ status: discarded
   </span>
   - **Description:** Will not be worked on
-- <span class="gh-label has-text-white" style="background-color: #333333;">
+- <span class="gh-label status-darker">
     🚦 status: awaiting triage
   </span>
   - **Description:** Has not been triaged & therefore, not ready for work

webpack/sass/main.scss

@@ -31,6 +31,41 @@ pre {
   }
 }
 
+// GitHub labels
+.gh-label {
+  display: inline-block;
+  font-size: smaller;
+  padding: 0 1em;
+  border: 1px solid #eeeeee;
+  border-radius: 999em;
+  margin-right: 0.25em;
+
+  $label-colors: (
+    ('goal'                  #ffffff #000000),
+    ('aspect'                #04338c #ffffff),
+    ('skill'                 #5ff1f5 #000000),
+    ('talk'                  #f9bbe5 #000000),
+    ('friendliness'          #7f0799 #ffffff),
+    ('status-lighter'        #eeeeee #000000),
+    ('status-light'          #cccccc #000000),
+    ('status-neutral'        #999999 #000000),
+    ('status-dark'           #666666 #ffffff),
+    ('status-darker'         #333333 #ffffff),
+    ('priority-unfavourable' #b60205 #ffffff),
+    ('priority-negative'     #ff9f1c #000000),
+    ('priority-neutral'      #ffcc00 #000000),
+    ('priority-positive'     #cfda2c #000000),
+    ('priority-favourable'   #008672 #ffffff),
+    ('miscellaneous'         #000000 #ffffff),
+  );
+  @each $category, $background-color, $foreground-color in $label-colors {
+    &.#{$category} {
+      background-color: $background-color;
+      color: $foreground-color;
+    }
+  }
+}
+
 .content {
   @extend .body-big;
 
@@ -523,28 +558,6 @@ pre {
       @extend .padding-bottom-xxl;
       @extend .padding-top-xl;
     }
-
-    .gh-label {
-      display: inline-block;
-      font-size: $font-size-body-normal;
-      padding: 0 1em;
-      border: 1px solid #eeeeee;
-      border-radius: 999em;
-
-      $label-colors: (
-        ('goal'         #ffffff #000000),
-        ('aspect'       #04338c #ffffff),
-        ('skill'        #5ff1f5 #000000),
-        ('talk'         #f9bbe5 #000000),
-        ('friendliness' #7f0799 #ffffff)
-      );
-      @each $category, $background-color, $foreground-color in $label-colors {
-        &.#{$category} {
-          background-color: $background-color;
-          color: $foreground-color;
-        }
-      }
-    }
   }
 }