From ee9e3a06a702f9f510b8478531a499f57ee94641 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan.jait@bytedance.com>
Date: Fri, 22 Mar 2024 11:48:51 +0800
Subject: [PATCH] feat: improve bg opacity of container blocks (#842)

---
 .changeset/serious-boxes-tickle.md             |  5 +++++
 packages/plugin-container-syntax/container.css | 14 +++++++-------
 2 files changed, 12 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/serious-boxes-tickle.md

diff --git a/.changeset/serious-boxes-tickle.md b/.changeset/serious-boxes-tickle.md
new file mode 100644
index 000000000..951cd8a7e
--- /dev/null
+++ b/.changeset/serious-boxes-tickle.md
@@ -0,0 +1,5 @@
+---
+"@rspress/plugin-container-syntax": patch
+---
+
+feat: improve bg opacity of container blocks
diff --git a/packages/plugin-container-syntax/container.css b/packages/plugin-container-syntax/container.css
index b1785ccab..baeb18de1 100644
--- a/packages/plugin-container-syntax/container.css
+++ b/packages/plugin-container-syntax/container.css
@@ -4,7 +4,7 @@
 :root {
   --rp-container-info-border: rgba(7, 156, 112, 0.3);
   --rp-container-info-text: #399c70;
-  --rp-container-info-bg: rgba(7, 156, 112, 0.1);
+  --rp-container-info-bg: rgba(7, 156, 112, 0.06);
   --rp-container-info-code-bg: rgba(7, 156, 112, 0.1);
 
   --rp-container-warning-border: rgba(255, 197, 23, 0.5);
@@ -12,9 +12,9 @@
   --rp-container-warning-bg: rgba(255, 197, 23, 0.1);
   --rp-container-warning-code-bg: rgba(255, 197, 23, 0.1);
 
-  --rp-container-danger-border: rgba(237, 60, 80, 0.5);
+  --rp-container-danger-border: rgba(237, 60, 80, 0.3);
   --rp-container-danger-text: #ab2131;
-  --rp-container-danger-bg: rgba(237, 60, 80, 0.2);
+  --rp-container-danger-bg: rgba(237, 60, 80, 0.08);
   --rp-container-danger-code-bg: rgba(237, 60, 80, 0.1);
 
   --rp-container-details-border: rgba(128, 128, 128, 0.3);
@@ -25,17 +25,17 @@
 
 .dark {
   --rp-container-info-text: var(--rp-text-1);
-  --rp-container-info-bg: rgba(7, 156, 112, 0.2);
+  --rp-container-info-bg: rgba(7, 156, 112, 0.1);
 
   --rp-container-details-text: var(--rp-text-1);
-  --rp-container-details-bg: rgba(128, 128, 128, 0.2);
+  --rp-container-details-bg: rgba(128, 128, 128, 0.16);
 
   --rp-container-warning-border: rgba(255, 197, 23, 0.25);
-  --rp-container-warning-bg: rgba(255, 197, 23, 0.2);
+  --rp-container-warning-bg: rgba(255, 197, 23, 0.12);
   --rp-container-warning-text: var(--rp-text-1);
 
   --rp-container-danger-border: rgba(237, 60, 80, 0.3);
-  --rp-container-danger-bg: rgba(237, 60, 80, 0.3);
+  --rp-container-danger-bg: rgba(237, 60, 80, 0.12);
   --rp-container-danger-text: var(--rp-text-1);
 }