Extract muted-link component pattern

src/sidebar/components/Annotation/AnnotationShareInfo.js

@@ -26,10 +26,7 @@ function AnnotationShareInfo({ group, isPrivate }) {
     <>
       {group && linkToGroup && (
         <Link
-          classes={classnames(
-            'flex items-baseline gap-x-1',
-            'text-color-text-light hover:text-color-text-light hover:underline'
-          )}
+          classes={classnames('flex items-baseline gap-x-1', 'p-muted-link')}
           href={group.links.html}
           target="_blank"
         >

src/sidebar/components/Annotation/AnnotationTimestamps.js

@@ -90,7 +90,7 @@ export default function AnnotationTimestamps({
       )}
       {annotationUrl ? (
         <Link
-          classes="text-color-text-light hover:text-color-text-light hover:underline"
+          classes="p-muted-link"
           target="_blank"
           title={created.absolute}
           href={annotationUrl}

src/styles/sidebar/components/_index.scss

@@ -35,8 +35,17 @@
 @use './TopBar';
 @use './VersionInfo';
 
-@layer components {
-  .p-redacted-text {
-    @apply line-through grayscale contrast-50 text-color-text-light;
-  }
+// TODO: Put these in @layer components after shared component styles have
+// been converted to Tailwind (and are contained in the components layer
+// themselves). They need to come after shared-component styles in the
+// output stylesheet.
+
+// Applies to <Link>
+.p-muted-link {
+  @apply text-color-text-light hover:text-color-text-light hover:underline;
+}
+
+// Applies to any text: strikeout effect
+.p-redacted-text {
+  @apply line-through grayscale contrast-50 text-color-text-light;
 }