From e650afdb1485f4365b54fa24ad4bbeeafe604352 Mon Sep 17 00:00:00 2001
From: Huakun Shen <huakun.shen@huakunshen.com>
Date: Wed, 19 Feb 2025 08:30:58 -0500
Subject: [PATCH] feat: improve background transparency for UI components

---
 .../ui/src/components/extension/GitHubProvenanceCard.svelte     | 2 +-
 packages/ui/src/components/extension/StoreExtDetail.svelte      | 2 +-
 packages/ui/src/components/extension/templates/Markdown.svelte  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/extension/GitHubProvenanceCard.svelte b/packages/ui/src/components/extension/GitHubProvenanceCard.svelte
index 8fd00c7..3b122c0 100644
--- a/packages/ui/src/components/extension/GitHubProvenanceCard.svelte
+++ b/packages/ui/src/components/extension/GitHubProvenanceCard.svelte
@@ -21,7 +21,7 @@
 	const workflowRunUrl = `https://github.com/${repoOwner}/${repoName}/actions/runs/${workflowRunId}/workflow`
 </script>
 
-<Card.Root>
+<Card.Root class="bg-background/30">
 	<Card.Content class="flex flex-col items-center justify-between space-x-4 md:flex-row">
 		<div class="flex w-60 items-center space-x-4">
 			<BadgeCheckIcon class="h-8 w-8 text-green-500" />
diff --git a/packages/ui/src/components/extension/StoreExtDetail.svelte b/packages/ui/src/components/extension/StoreExtDetail.svelte
index b9b9f45..f253e11 100644
--- a/packages/ui/src/components/extension/StoreExtDetail.svelte
+++ b/packages/ui/src/components/extension/StoreExtDetail.svelte
@@ -308,7 +308,7 @@
 	<Separator class="my-3" />
 	<h2 class="text-lg font-bold">README</h2>
 	{#if extPublish?.readme}
-		<Markdown markdown={extPublish.readme} class="bg-secondary max-w-full rounded-md p-4" />
+		<Markdown markdown={extPublish.readme} class="bg-background/50 max-w-full rounded-md p-4" />
 	{/if}
 </ScrollArea>
 
diff --git a/packages/ui/src/components/extension/templates/Markdown.svelte b/packages/ui/src/components/extension/templates/Markdown.svelte
index 29c09a7..bdc4eed 100644
--- a/packages/ui/src/components/extension/templates/Markdown.svelte
+++ b/packages/ui/src/components/extension/templates/Markdown.svelte
@@ -5,6 +5,6 @@
 	const { markdown, class: className }: { markdown: string; class?: string } = $props()
 </script>
 
-<div class={cn("prose dark:prose-invert", className)}>
+<div class={cn("prose dark:prose-invert bg-transparent", className)}>
 	<SvelteMarkdown source={markdown} />
 </div>