From 1d172811ef5f001fe3c90e6b601bff861cab0d7e Mon Sep 17 00:00:00 2001
From: Devin Haska <2636402+wonderfulfrog@users.noreply.github.com>
Date: Tue, 15 Oct 2024 20:26:00 -0700
Subject: [PATCH] fix: pill style; global style

Fixes an issue with <img> inside <figure> not being centered
---
 src/css/blocks/pill.css          | 53 +++++++++++++++++++++++++-------
 src/css/global/global-styles.css |  9 ++----
 src/pages/styleguide.html        | 15 +++++++++
 3 files changed, 60 insertions(+), 17 deletions(-)

diff --git a/src/css/blocks/pill.css b/src/css/blocks/pill.css
index 2de8ada..3ae09ed 100644
--- a/src/css/blocks/pill.css
+++ b/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;
+  }
+
+  &::after {
+    opacity: 1;
+  }
 }
 
-.pill:not([data-state]):active {
+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 {
-  color: var(--color-border);
+button.pill:hover,
+a[href].pill:hover {
+  .pill-count {
+    color: var(--color-border);
+  }
 }
diff --git a/src/css/global/global-styles.css b/src/css/global/global-styles.css
index 61df5ef..de422ba 100644
--- a/src/css/global/global-styles.css
+++ b/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);
diff --git a/src/pages/styleguide.html b/src/pages/styleguide.html
index 4c12932..ada30de 100644
--- a/src/pages/styleguide.html
+++ b/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 />