diff --git a/site/src/components/Abbr/Abbr.stories.tsx b/site/src/components/Abbr/Abbr.stories.tsx
index 6720b90fffda5..2b64d5885c205 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) => (
-
+
The physical pain of getting bonked on the head with a cartoon mallet
lasts precisely 593{" "}
-
+
. The emotional turmoil and complete embarrassment lasts forever.
@@ -45,7 +45,7 @@ export const Acronym: Story = {
},
decorators: [
(Story) => (
-
+
),
@@ -60,16 +60,9 @@ export const Initialism: Story = {
},
decorators: [
(Story) => (
-
+
),
],
};
-
-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..b27141818efb3 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,12 @@ export const Abbr: FC = ({
// 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}
>
{children}
pFad - Phonifier reborn
Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.
Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies:
Alternative Proxy
pFad Proxy
pFad v3 Proxy
pFad v4 Proxy