feat(baseline): add reason to discouraged banner and removal variant

components/baseline-indicator/server.css

@@ -46,6 +46,17 @@
 
     @mixin light-dark --baseline-img, url("./icons/status/obsolete.svg"),
       url("./icons/status/obsolete-dark.svg");
+
+    &.to-be-removed {
+      --baseline-bg: #fceeee;
+      --baseline-engine-bg: #f3dddd;
+      --baseline-pill-bg: #b3261e;
+      --baseline-pill-color: #f1f3f4;
+
+      @mixin light-dark --baseline-img,
+        url("./icons/status/pending-removal.svg"),
+        url("./icons/status/pending-removal-dark.svg");
+    }
   }
 
   &[open] {

components/baseline-indicator/server.js

@@ -74,6 +74,7 @@
     const level = status.feature.discouraged
       ? "discouraged"
       : status.baseline || "not";
+    const removalDate = status.feature.discouraged?.removal_date;
 
     const feedbackLink = `${SURVEY_URL}?page=${encodeURIComponent(context.url)}&level=${level}`;
 
@@ -126,7 +127,7 @@
       };
 
     return html`<details
-      class="baseline-indicator ${level}"
+      class="baseline-indicator ${level} ${removalDate ? "to-be-removed" : ""}"
       data-glean-toggle-open="baseline_toggle_open"
       ?open=${level === "discouraged"}
     >
@@ -159,7 +160,9 @@
         </div>
         ${level === "low"
           ? html`<div class="pill">${context.l10n`Newly available`}</div>`
-          : nothing}
+          : level === "discouraged" && removalDate
+            ? html`<div class="pill">${context.l10n`To be removed`}</div>`
+            : nothing}
         <div class="browsers">
           ${ENGINES.map(
             ({ name, browsers }) =>
@@ -211,9 +214,15 @@
                 ? html`<p>* ${context.l10n("baseline-asterisk")}</p>`
                 : nothing}`
           : level === "discouraged"
-            ? html`<p>
-                ${context.l10n`Avoid using this feature in new projects. This feature may be a candidate for removal from web standards or browsers.`}
-              </p>`
+            ? removalDate
+              ? html`<p>
+                  ${context.l10n`This feature is pending removal from browsers. Using it now may lead to broken functionality in future updates.`}
+                </p>`
+              : html`<p>
+                  ${context.l10n`Avoid using this feature in new projects.`}
+                  ${status.feature.discouraged?.reason || nothing}
+                  ${context.l10n`This feature may be a candidate for removal from web standards or browsers.`}
+                </p>`
             : html`<p>${context.l10n("baseline-not-extra")}</p>`}
         <ul>
           <li>