From 285780804554bef1541e643bc072d279a61335a9 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Thu, 7 Aug 2025 19:32:32 +0000
Subject: [PATCH 1/3] chore: migrate Abbr to tailwind

---
 site/src/components/Abbr/Abbr.stories.tsx | 15 ++++-----------
 site/src/components/Abbr/Abbr.tsx         |  6 ++----
 2 files changed, 6 insertions(+), 15 deletions(-)

diff --git a/site/src/components/Abbr/Abbr.stories.tsx b/site/src/components/Abbr/Abbr.stories.tsx
index 6720b90fffda5..c3185e3ff6ff7 100644
--- a/site/src/components/Abbr/Abbr.stories.tsx
+++ b/site/src/components/Abbr/Abbr.stories.tsx
@@ -25,10 +25,10 @@ export const InlinedShorthand: Story = {
 	},
 	decorators: [
 		(Story) => (
-			<p css={{ maxWidth: "40em" }}>
+			<p className="max-w-[40em]">
 				The physical pain of getting bonked on the head with a cartoon mallet
 				lasts precisely 593{" "}
-				<span css={styles.underlined}>
+				<span className="underline decoration-dotted">
 					<Story />
 				</span>
 				. The emotional turmoil and complete embarrassment lasts forever.
@@ -45,7 +45,7 @@ export const Acronym: Story = {
 	},
 	decorators: [
 		(Story) => (
-			<span css={styles.underlined}>
+			<span className="underline decoration-dotted">
 				<Story />
 			</span>
 		),
@@ -60,16 +60,9 @@ export const Initialism: Story = {
 	},
 	decorators: [
 		(Story) => (
-			<span css={styles.underlined}>
+			<span className="underline decoration-dotted">
 				<Story />
 			</span>
 		),
 	],
 };
-
-const styles = {
-	// Just here to make the abbreviated part more obvious in the component library
-	underlined: {
-		textDecoration: "underline dotted",
-	},
-};
diff --git a/site/src/components/Abbr/Abbr.tsx b/site/src/components/Abbr/Abbr.tsx
index c41f68e08117f..e7fe24599bccf 100644
--- a/site/src/components/Abbr/Abbr.tsx
+++ b/site/src/components/Abbr/Abbr.tsx
@@ -1,4 +1,5 @@
 import type { FC, HTMLAttributes } from "react";
+import { cn } from "utils/cn";
 
 export type Pronunciation = "shorthand" | "acronym" | "initialism";
 
@@ -29,10 +30,7 @@ export const Abbr: FC<AbbrProps> = ({
 			// always have to supplement with aria-label
 			title={title}
 			aria-label={getAccessibleLabel(children, title, pronunciation)}
-			css={{
-				textDecoration: "inherit",
-				letterSpacing: children === children.toUpperCase() ? "0.02em" : "0",
-			}}
+			className={cn("decoration-inherit", children === children.toUpperCase() ? "tracking-wide" : "tracking-normal")}
 			{...delegatedProps}
 		>
 			<span aria-hidden>{children}</span>

From 6d583ecf9be27ec52fa8f11a0954c7314195bd75 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Thu, 7 Aug 2025 19:33:31 +0000
Subject: [PATCH 2/3] simplify

---
 site/src/components/Abbr/Abbr.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/Abbr/Abbr.stories.tsx b/site/src/components/Abbr/Abbr.stories.tsx
index c3185e3ff6ff7..2b64d5885c205 100644
--- a/site/src/components/Abbr/Abbr.stories.tsx
+++ b/site/src/components/Abbr/Abbr.stories.tsx
@@ -25,7 +25,7 @@ export const InlinedShorthand: Story = {
 	},
 	decorators: [
 		(Story) => (
-			<p className="max-w-[40em]">
+			<p className="max-w-2xl">
 				The physical pain of getting bonked on the head with a cartoon mallet
 				lasts precisely 593{" "}
 				<span className="underline decoration-dotted">

From 2fefd91e1b5529d8a9edcf02bb88dbbe0f473d3a Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Thu, 7 Aug 2025 19:46:59 +0000
Subject: [PATCH 3/3] fmt

---
 site/src/components/Abbr/Abbr.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/site/src/components/Abbr/Abbr.tsx b/site/src/components/Abbr/Abbr.tsx
index e7fe24599bccf..b27141818efb3 100644
--- a/site/src/components/Abbr/Abbr.tsx
+++ b/site/src/components/Abbr/Abbr.tsx
@@ -30,7 +30,12 @@ export const Abbr: FC<AbbrProps> = ({
 			// always have to supplement with aria-label
 			title={title}
 			aria-label={getAccessibleLabel(children, title, pronunciation)}
-			className={cn("decoration-inherit", children === children.toUpperCase() ? "tracking-wide" : "tracking-normal")}
+			className={cn(
+				"decoration-inherit",
+				children === children.toUpperCase()
+					? "tracking-wide"
+					: "tracking-normal",
+			)}
 			{...delegatedProps}
 		>
 			<span aria-hidden>{children}</span>