From 1132f7309ded7f592fe627752232d8a1b3cf5e09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Federico=20Knu=CC=88ssel?= <fknussel@gmail.com>
Date: Sat, 3 Jun 2023 14:19:00 +1000
Subject: [PATCH] Simplify link styles

---
 src/styles/common.css.ts | 26 ++------------------------
 src/ui/markdown.css.ts   | 11 +----------
 2 files changed, 3 insertions(+), 34 deletions(-)

diff --git a/src/styles/common.css.ts b/src/styles/common.css.ts
index 417ff0b..549952d 100644
--- a/src/styles/common.css.ts
+++ b/src/styles/common.css.ts
@@ -28,42 +28,20 @@ export const baseFocusStyleImpl = {
     outline: `${borderRadius.default} solid ${colors.pink}`,
     outlineOffset: '2px',
     borderRadius: '1px',
-    borderBottomStyle: 'none' as const,
-};
-
-export const baseFocusHoverStyleImpl = {
-    borderBottomStyle: 'none' as const,
+    textDecoration: 'none',
 };
 
 export const baseFocusStyle = style({
     selectors: {
         '&:focus': baseFocusStyleImpl,
-        '&:focus:hover': baseFocusHoverStyleImpl,
     },
 });
 
 export const baseLinkStyleImpl = {
-    borderBottom: `1px solid ${colors.grayLight}`,
     color: colors.blue,
-    paddingBottom: '1px',
-    textDecoration: 'none',
-    transition: 'border-bottom 0.5s ease',
-    wordBreak: 'break-word' as const,
 };
 
-export const baseLinkHoverStyleImpl = {
-    borderBottom: `1px solid ${colors.blue}`,
-};
-
-export const baseLinkStyle = style([
-    baseFocusStyle,
-    baseLinkStyleImpl,
-    {
-        selectors: {
-            '&:hover': baseLinkHoverStyleImpl,
-        },
-    },
-]);
+export const baseLinkStyle = style([baseFocusStyle, baseLinkStyleImpl]);
 
 export const srOnlyStyle = style({
     borderWidth: 0,
diff --git a/src/ui/markdown.css.ts b/src/ui/markdown.css.ts
index 641b7cb..bf986af 100644
--- a/src/ui/markdown.css.ts
+++ b/src/ui/markdown.css.ts
@@ -1,13 +1,6 @@
 import { style, globalStyle } from '@vanilla-extract/css';
 
-import {
-    baseParagraphStyleImpl,
-    baseHeadingStyleImpl,
-    baseLinkStyleImpl,
-    baseLinkHoverStyleImpl,
-    baseFocusStyleImpl,
-    baseFocusHoverStyleImpl,
-} from '../styles/common.css';
+import { baseParagraphStyleImpl, baseHeadingStyleImpl, baseLinkStyleImpl, baseFocusStyleImpl } from '../styles/common.css';
 import { fontFamilies, fontSizes, lineHeights, fontWeights, gridSize, borderRadius } from '../styles/constants';
 
 export const markdownStyle = style({});
@@ -17,9 +10,7 @@ globalStyle(`${markdownStyle} p, ${markdownStyle} ul, ${markdownStyle} ol`, base
 
 // Links
 globalStyle(`${markdownStyle} a`, baseLinkStyleImpl);
-globalStyle(`${markdownStyle} a:hover`, baseLinkHoverStyleImpl);
 globalStyle(`${markdownStyle} a:focus`, baseFocusStyleImpl);
-globalStyle(`${markdownStyle} a:focus:hover`, baseFocusHoverStyleImpl);
 
 // Headings
 globalStyle(