Add "First release" pill

Author: adriendupuis

docs/css/pills.css

@@ -208,7 +208,7 @@ def slugify(text: str) -> str:
         return text.lower().replace(' ', '-')
 
     def validate_categories(categories: List[str]) -> None:
-        available_categories = ['Headless', 'Experience', 'Commerce', 'LTS Update', 'New feature']
+        available_categories = ['Headless', 'Experience', 'Commerce', 'LTS Update', 'New feature', 'First release']
 
         for category in categories:
             if category not in available_categories:

main.py

@@ -1,6 +1,13 @@
 @use 'variables';
 @use 'sass:list';
 
+$color-headless: #C4234A;
+$color-experience: #D3822B;
+$color-commerce: #A32768;
+$color-lts-update: #5DA7C0;
+$color-new-feature: #2C9445;
+$color-first-release: #2C9445;
+
 .pill {
     font-size: 12px;
     font-weight: initial;
@@ -11,11 +18,12 @@
     color: variables.$color-primary-main;
 
     $types: (
-        "headless": (variables.$color-error-main, "Headless"),
-        "experience": (variables.$color-warning-dark-01, "Experience"),
-        "commerce": (variables.$color-primary-main, "Commerce"),
-        "lts-update": (variables.$color-info-main, "LTS Update"),
-        "new-feature": (variables.$color-success-main, "New feature")
+        "headless": (variables.$color-headless, "Headless"),
+        "experience": (variables.$color-experience, "Experience"),
+        "commerce": (variables.$color-commerce, "Commerce"),
+        "lts-update": (variables.$color-lts-update, "LTS Update"),
+        "new-feature": (variables.$color-new-feature, "New feature"),
+        "first-release": (variables.$color-first-release, "First release")
       );
 
       @each $name, $values in $types {
@@ -41,7 +49,6 @@
     &--new {
       margin-right: 15px;
       align-self: center;
-      color: #d9e8ff;
       color: #3562a0;
       text-transform: lowercase;
     }