Style deprecations for qiskit and qiskit-ecosystem themes (#558)

Closes #528. They
use the same style as a warning admonition so that we're consistent with
Carbon.

src/qiskit_sphinx_theme/assets/styles/_admonitions.scss

@@ -133,3 +133,61 @@ p.topic-title {
     background-color: $info-border;
   }
 }
+
+// Style deprecations like a warning.
+div.deprecated {
+  border-color: $warning-background;
+  border-left: 0;
+  border-right-style: solid;
+  border-right-width: 1px;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  position: relative;
+  background: var(--color-admonition-background);
+  font-size: var(--admonition-font-size);
+  margin: 1rem auto;
+  overflow: hidden;
+  padding: 0 0.5rem 0.5rem;
+  padding-left: 12px;
+  page-break-inside: avoid;
+}
+
+div.deprecated::before {
+  background: $warning-border;
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 3px;
+}
+
+span.deprecated {
+  background-color: $warning-background;
+  font-size: var(--admonition-title-font-size);
+  line-height: 1.3;
+  margin: 0 -0.5rem 0.25rem -0.55rem;
+  padding: 0.4rem;
+  position: relative;
+  display: block;
+
+  // Turn off italics from Furo.
+  font-style: normal;
+}
+
+span.deprecated::before {
+  content: "";
+  display: inline-block;
+  background-image: var(--icon-warning);
+  width: 16px;
+  height: 16px;
+  margin-right: 5px;
+  // This aligns the icon with the text properly.
+  vertical-align: bottom;
+}
+
+div.deprecated p,
+div.versionchanged p {
+  margin-bottom: 0;
+  margin-top: 0;
+}

tests/js/qiskit.test.js

@@ -215,6 +215,12 @@ test("admonitions use Carbon style", async ({ page }) => {
   await expect(admonitions).toHaveScreenshot();
 });
 
+test("deprecations look like warning", async ({ page }) => {
+  await page.goto("sphinx_guide/paragraph.html#deprecation-note");
+  const deprecations = page.locator("section#deprecation-note");
+  await expect(deprecations).toHaveScreenshot();
+});
+
 test("Sphinx Design elements have no shadows", async ({ page }) => {
   await page.goto("sphinx_guide/panels.html");
   await hideTopNavBar(page);