src/css/blocks/pill.css

@@ -1,13 +1,32 @@
 .pill {
-  background-color: var(--color-surface);
-  border-radius: var(--spacing-1);
-  display: flex;
+  display: inline-flex;
+  align-items: center;
   padding-inline: var(--spacing-1);
   padding-block: var(--spacing-0\.5);
   gap: var(--spacing-0\.5);
-  transition:
-    transform var(--transition-duration),
-    background-color 75ms;
+  position: relative;
+
+  transition: transform 0.1s ease;
+
+  &::before,
+  &::after {
+    position: absolute;
+    inset: 0;
+    content: "";
+    z-index: -1;
+    border-radius: var(--spacing-1);
+
+    transition: opacity 0.3s ease;
+  }
+
+  &::before {
+    background-color: var(--color-surface);
+  }
+
+  &::after {
+    background-color: var(--color-text);
+    opacity: 0;
+  }
 }
 
 .pill[data-state="small"] {
@@ -28,13 +47,22 @@
   border-radius: var(--spacing-0\.5);
 }
 
-.pill:not([data-state]):hover {
-  background-color: var(--color-text);
+button.pill:hover,
+a[href].pill:hover {
   color: var(--color-primary);
   transform: translateY(-2px);
+
+  &::before {
+    opacity: 0;
   }
 
-.pill:not([data-state]):active {
+  &::after {
+    opacity: 1;
+  }
+}
+
+button.pill:active,
+a[href].pill:active {
   transform: translateY(2px);
 }
 
@@ -46,6 +74,9 @@ a.pill {
   color: var(--color-fadeText);
 }
 
-.pill:not([data-state]):hover .pill-count {
+button.pill:hover,
+a[href].pill:hover {
+  .pill-count {
     color: var(--color-border);
   }
+}

src/css/global/global-styles.css

@@ -140,6 +140,9 @@ pre {
 }
 
 figure {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   margin-inline: 0;
 }
 
@@ -151,12 +154,6 @@ figure figcaption {
   margin-block-start: var(--flow-space, 1em);
 }
 
-picture {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 picture source,
 picture img {
   border-radius: var(--spacing-0\.5);

src/pages/styleguide.html

@@ -34,6 +34,21 @@ description: A demo of the site's theme.
     <div class="[ size-2 ]" style="background-color: var(--color-shadow)"></div>
 </div>
 <hr />
+<div class="[ flex ]">
+    <a href="#" class="[ button ]">A button</a>
+</div>
+<div class="[ flex flex-wrap gap-1 ]">
+    <a href="#" class="[ pill ]">A pill</a>
+    <a href="#" class="[ pill ]">
+        A pill link with a count <span class="[ pill-count ]">3</span>
+    </a>
+    <p class="[ pill ]">
+        A pill with a count <span class="[ pill-count ]">3</span>
+    </p>
+    <p class="[ pill ]" data-state="small">A small pill</p>
+    <p class="[ pill ]" data-state="extrasmall">99+</p>
+</div>
+<hr />
 <a href="#">A link</a>
 <a href="/">A visited link</a>
 <hr />