Add link to Figma Design Kit doc (#1544)

* add Figma to sidebar

* add common styles for step icons

* move sidebar link

* fix missing help button icons

* add signpost `figure` styles

* step icons: it's all relative

packages/webawesome/docs/_includes/sidebar.njk

@@ -18,6 +18,12 @@
 <ul>
   <li><a href="https://github.com/shoelace-style/webawesome/discussions" target="_blank">Help &amp; Support</a></li>
   <li><a href="https://github.com/shoelace-style/webawesome/">Source Code</a></li>
+  <li>
+    <span class="wa-split">
+      <a href="/docs/resources/figma">Figma Design Kit</a></li>
+      {{ proBadge() }}
+    </span>
+  </li>
   <li><a href="/docs/resources/community">Community</a></li>
   <li><a href="/docs/resources/accessibility">Accessibility</a></li>
   <li><a href="/docs/resources/browser-support">Browser Support</a></li>

packages/webawesome/docs/_layouts/component.njk

@@ -297,11 +297,11 @@
   <div class="component-help">
     <strong>Need a hand?</strong>
     <wa-button size="small" appearance="filled" variant="neutral" href="https://github.com/shoelace-style/webawesome/issues" target="_blank">
-      <wa-icon slot="prefix" name="bug"></wa-icon>
+      <wa-icon slot="start" variant="regular" name="bug"></wa-icon>
       Report a bug
     </wa-button>
     <wa-button size="small" appearance="filled" variant="neutral" href="https://github.com/shoelace-style/webawesome/discussions" target="_blank">
-      <wa-icon slot="prefix" name="message-question"></wa-icon>
+      <wa-icon slot="start" variant="regular" name="message-question"></wa-icon>
       Ask for help
     </wa-button>
   </div>

packages/webawesome/docs/assets/styles/docs.css

@@ -386,6 +386,27 @@ h1.title {
   }
 }
 
+/* Images & Figures */
+
+figure.signpost {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--wa-space-s);
+
+  img {
+    border: var(--wa-border-style) var(--wa-border-width-m) var(--wa-color-surface-border);
+  }
+
+  figcaption {
+    color: var(--wa-color-text-quiet);
+    font-size: var(--wa-font-size-xs);
+    line-height: var(--wa-line-height-condensed);
+    text-align: center;
+  }
+}
+
 /* Search list pages */
 wa-page > main:has(> .search-list) {
   max-width: var(--content-width-l);

packages/webawesome/docs/assets/styles/utils.css

@@ -109,6 +109,15 @@
     line-height: var(--wa-form-control-value-line-height);
     padding-inline: 0.33em;
   }
+
+  /* step icons for ordered instructions */
+  .step-icon {
+    --primary-color: var(--wa-color-neutral-on-normal);
+    --secondary-color: var(--wa-color-neutral-fill-normal);
+    --secondary-opacity: 1;
+    font-size: 2em;
+  }
+
   /* #endregion */
 
   /* #region funsies + cosmetics */