feat: refine how we mix background color

Author: brandonmcconnell

typescript-sdk/apps/dojo/src/app/globals.css

@@ -286,3 +286,8 @@
     @apply bg-background! text-foreground! font-sans;
   }
 }
+
+/* hide scroll decoration on code blocks */
+.monaco-editor .overflow-guard .scroll-decoration {
+  @apply hidden!;
+}

typescript-sdk/apps/dojo/src/components/code-viewer/code-viewer.tsx

@@ -19,9 +19,9 @@ export default function CodeViewer({ codeFiles }: { codeFiles: FeatureFile[] })
         <Tabs
           value={selectedFile?.name}
           onValueChange={setCodeFile}
-          className="flex-1 flex flex-col dark:bg-cpk-docs-dark-bg/95"
+          className="flex-1 flex flex-col bg-cpk-docs-dark-bg/10 dark:bg-cpk-docs-dark-bg/95"
         >
-          <TabsList className="w-full justify-start h-auto flex-wrap p-1 gap-1 rounded-none">
+          <TabsList className="w-full justify-start h-auto flex-wrap p-1 gap-1 rounded-none bg-transparent">
             {codeFiles.map((file) => (
               <TabsTrigger
                 key={file.name}
@@ -50,8 +50,8 @@ export default function CodeViewer({ codeFiles }: { codeFiles: FeatureFile[] })
 
   return (
     <div className="flex h-full bg-white">
-      {/* wrapper div to mix the bg-cpk-docs-dark-bg bg-white with bg-cpk-docs-dark-bg on dark mode */}
-      <div className="dark:bg-cpk-docs-dark-bg/95">
+      {/* wrapper div to mix the parent bg-white with bg-cpk-docs-dark-bg */}
+      <div className="bg-cpk-docs-dark-bg/10 dark:bg-cpk-docs-dark-bg/95">
         <div className="w-72 border-r border-gray-200 dark:border-neutral-700 flex flex-col">
           <div className="flex-1 overflow-auto">
             <FileTree files={codeFiles} selectedFile={selectedFile} onFileSelect={setCodeFile} />