From c5cb6097b372dd048985ece102739c8c4d4d0f13 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 27 Jun 2023 13:24:11 +0800
Subject: [PATCH] Different alphas for light and dark highlights

---
 packages/web/components/patterns/HighlightView.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/web/components/patterns/HighlightView.tsx b/packages/web/components/patterns/HighlightView.tsx
index fef8a662d..d12f3023e 100644
--- a/packages/web/components/patterns/HighlightView.tsx
+++ b/packages/web/components/patterns/HighlightView.tsx
@@ -74,6 +74,8 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
 
   const { getReferenceProps, getFloatingProps } = useInteractions([hover])
 
+  const highlightAlpha = isDark ? 1.0 : 0.35
+
   return (
     <VStack
       ref={refs.setReference}
@@ -115,9 +117,8 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
                 m: '0px',
                 display: 'inline',
                 padding: '2px',
-                backgroundColor: 'rgba(var(--colors-highlightBackground), 1)',
-                boxShadow:
-                  '1px 0 0 rgba(var(--colors-highlightBackground), 1), -1px 0 0 rgba(var(--colors-highlightBackground),1)',
+                backgroundColor: `rgba(var(--colors-highlightBackground), ${highlightAlpha})`,
+                boxShadow: `1px 0 0 rgba(var(--colors-highlightBackground), ${highlightAlpha}), -1px 0 0 rgba(var(--colors-highlightBackground), ${highlightAlpha})`,
                 boxDecorationBreak: 'clone',
                 borderRadius: '2px',
               },