Merge pull request #236 from beNative/codex/add-left-border-with-padding-on-snippet-containers-et7e5k

Use theme background for snippet highlights

Author: beNative

components/FolderOverview.tsx

@@ -367,7 +367,7 @@ const FolderOverview: React.FC<FolderOverviewProps> = ({
                                                                             borderLeftWidth: '3px',
                                                                             borderLeftStyle: 'solid',
                                                                             borderLeftColor: 'rgb(var(--color-accent) / 0.45)',
-                                                                            backgroundColor: 'rgb(var(--color-border) / 0.26)',
+                                                                            background: 'color-mix(in srgb, rgb(var(--color-background)) 82%, rgb(var(--color-text-main)) 18%)',
                                                                             borderRadius: '4px',
                                                                         }}
                                                                     >

components/PromptTreeItem.tsx

@@ -356,7 +356,8 @@ const DocumentTreeItem: React.FC<DocumentTreeItemProps> = (props) => {
   const snippetAccentWidth = 3;
   const snippetMarginLeft = Math.max(snippetPaddingLeft - snippetAccentPadding, 0);
   const snippetAccentColor = 'rgb(var(--color-accent) / 0.45)';
-  const snippetBackgroundColor = 'rgb(var(--color-border) / 0.26)';
+  const snippetBackgroundColor =
+    'color-mix(in srgb, rgb(var(--color-background)) 82%, rgb(var(--color-text-main)) 18%)';
 
   return (
     <li