From 791c9a9113621d19abb9a73bfe940a6de43cd286 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 7 Oct 2022 14:13:49 +0800
Subject: [PATCH] Always treat highlightBackground as an array not a color now.
 This lets us apply alpha differently to backgrounds and underlines

---
 packages/web/components/patterns/HighlightView.tsx           | 2 +-
 .../components/patterns/LibraryCards/HighlightItemCard.tsx   | 2 +-
 packages/web/components/tokens/stitches.config.ts            | 2 +-
 packages/web/styles/articleInnerStyling.css                  | 5 +++--
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/web/components/patterns/HighlightView.tsx b/packages/web/components/patterns/HighlightView.tsx
index 5ada52dd4..6e69f9842 100644
--- a/packages/web/components/patterns/HighlightView.tsx
+++ b/packages/web/components/patterns/HighlightView.tsx
@@ -33,7 +33,7 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
         }
       }}>
         {props.highlight.prefix}
-        <SpanBox css={{ bg: '$highlightBackground', p: '1px', borderRadius: '2px', }}>
+        <SpanBox css={{ bg: 'rgb($highlightBackground)', p: '1px', borderRadius: '2px', }}>
           {lines.map((line: string, index: number) => (
             <Fragment key={index}>
               {line}
diff --git a/packages/web/components/patterns/LibraryCards/HighlightItemCard.tsx b/packages/web/components/patterns/LibraryCards/HighlightItemCard.tsx
index d493d8fd6..b290a68dd 100644
--- a/packages/web/components/patterns/LibraryCards/HighlightItemCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/HighlightItemCard.tsx
@@ -48,7 +48,7 @@ export function HighlightItemCard(props: HighlightItemCardProps): JSX.Element {
       >
         <StyledMark
           css={{
-            background: '$highlightBackground',
+            background: 'rgb($highlightBackground)',
             color: '$highlightText',
             fontSize: '14px',
           }}
diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index 7e5fb70ce..9bc77b0a2 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -263,7 +263,7 @@ export const globalStyles = globalCss({
   // browser prefers this loaded here vs in the article styling css
   '.article-inner-css': {
     '::selection': {
-      background: '$highlightBackground',
+      background: 'rgb($highlightBackground)',
     },
   },
 })
diff --git a/packages/web/styles/articleInnerStyling.css b/packages/web/styles/articleInnerStyling.css
index 7b9681644..9e2c463db 100644
--- a/packages/web/styles/articleInnerStyling.css
+++ b/packages/web/styles/articleInnerStyling.css
@@ -13,13 +13,14 @@
 
 .highlight {
   color: var(--colors-highlightText);
-  background-color: var(--colors-highlightBackground);
+  background-color: rgb(var(--colors-highlightBackground));
   cursor: pointer;
 }
 
 .highlight_with_note {
   color: var(--colors-highlightText);
-  border-bottom: 2px var(--colors-highlightBackground) solid;
+  background-color: rgba(var(--colors-highlightBackground), 0.35);
+  border-bottom: 2px rgb(var(--colors-highlightBackground)) solid;
   border-radius: 2px;
   cursor: pointer;
 }