🧼 Anchor Link Clean Up (#1732)

* using wa-icon in generated anchors

* moving anchor-heading styling from docs.css to utils.css

* improving anchor-heading styling

* adding subtle transition
* using --wa-space-3xs custom property for padding

packages/webawesome/docs/_transformers/anchor-headings.js

@@ -79,7 +79,7 @@ export function anchorHeadingsTransformer(options = {}) {
       const anchor = parse(`
         <a href="#${encodeURIComponent(id)}">
           <span class="wa-visually-hidden"></span>
-          <span aria-hidden="true">#</span>
+          <wa-icon variant="regular" name="hashtag" class="icon-shrink"></wa-icon>
         </a>
       `);
       anchor.querySelector('.wa-visually-hidden').textContent = options.anchorLabel;

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

@@ -351,26 +351,6 @@ h1.title {
   }
 }
 
-/* Anchor headings */
-.anchor-heading a {
-  visibility: hidden;
-  text-decoration: none;
-}
-
-@media (hover: hover) {
-  .anchor-heading:hover a {
-    visibility: visible;
-    padding: 0 0.125em;
-  }
-}
-
-@media print {
-  /* Show URLs for printed links */
-  a:not(.anchor-heading)[href]::after {
-    content: ' (' attr(href) ')';
-  }
-}
-
 /* Callouts */
 .callout {
   display: flex;

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

@@ -122,6 +122,29 @@
       --secondary-color: var(--wa-color-neutral-30);
     }
   }
+
+  /* anchor headings  */
+  .anchor-heading a {
+    opacity: 0;
+    visibility: hidden;
+    text-decoration: none;
+    transition: opacity var(--wa-transition-normal) var(--wa-transition-easing);
+  }
+
+  @media (hover: hover) {
+    .anchor-heading:hover a {
+      opacity: 1;
+      visibility: visible;
+      padding: var(--wa-space-3xs);
+    }
+  }
+
+  @media print {
+    /* show URLs for printed links */
+    a:not(.anchor-heading)[href]::after {
+      content: ' (' attr(href) ')';
+    }
+  }
   /* #endregion */
 
   /* #region funsies + cosmetics */