From 570045594fde9ca2f19c7f03abc871252029d169 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 13 Jun 2024 18:02:21 +0800
Subject: [PATCH] Color for the search box

---
 .../web/components/templates/library/LibraryHeader.tsx     | 2 +-
 packages/web/components/tokens/stitches.config.ts          | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/web/components/templates/library/LibraryHeader.tsx b/packages/web/components/templates/library/LibraryHeader.tsx
index 416c50107..849f6edee 100644
--- a/packages/web/components/templates/library/LibraryHeader.tsx
+++ b/packages/web/components/templates/library/LibraryHeader.tsx
@@ -274,7 +274,7 @@ export function SearchBox(props: SearchBoxProps): JSX.Element {
         height: '38px',
         width: '100%',
         maxWidth: '521px',
-        bg: '$thLibrarySearchbox',
+        bg: '$backgroundMedium',
         borderRadius: '6px',
         boxShadow: props.searchBoxFocused
           ? 'none'
diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index 9a513cd0b..7638b9de4 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -238,6 +238,8 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         homeActionHoverBg: '#DFDFDF',
         homeDivider: '#D9D9D9',
 
+        backgroundMedium: '#FFFFFF',
+
         thLibraryAISummaryBorder: '#6A6968',
         thLibraryAISummaryBackground: '#343434',
 
@@ -392,6 +394,8 @@ const darkThemeSpec = {
     homeActionHoverBg: '#515151',
     homeDivider: '#3D3D3D',
 
+    backgroundMedium: '#323232',
+
     thLibraryAISummaryBorder: '#6A6968',
     thLibraryAISummaryBackground: '#343434',
 
@@ -431,6 +435,8 @@ const apolloThemeSpec = {
 
     thBackground: '#474747',
     thBackground2: '#515151',
+    backgroundMedium: '#525252',
+
     thLibraryMultiselectHover: '#EEE8D5',
   },
 }
@@ -456,6 +462,7 @@ const sepiaThemeSpec = {
     thBackground: '#FDF6E3',
 
     homeCardHover: '#EEE8D5',
+    backgroundMedium: '#EEE8D5',
     homeDivider: '#DDD6C1',
     homeActionHoverBg: '#DDD6C1',