feat: improve bg opacity of container blocks (#842)

web-infra-dev · Mar 22, 2024 · ee9e3a0 · ee9e3a0
1 parent 55474e3
commit ee9e3a0
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/.changeset/serious-boxes-tickle.md 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
@@ -4,17 +4,17 @@
 :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);
   --rp-container-warning-text: #ad850e;
   --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);
 }