feat: adjust custom box brightness

src/client/theme-default/styles/vars.css

@@ -55,21 +55,27 @@
   --vp-c-green-lighter: #35eb9a;
   --vp-c-green-dark: #33a06f;
   --vp-c-green-darker: #155f3e;
-  --vp-c-green-dimm: rgba(66, 184, 131, 0.08);
+  --vp-c-green-dimm-1: rgba(66, 184, 131, 0.5);
+  --vp-c-green-dimm-2: rgba(66, 184, 131, 0.25);
+  --vp-c-green-dimm-3: rgba(66, 184, 131, 0.05);
 
   --vp-c-yellow: #ffc517;
-  --vp-c-yellow-light: #ffe417;
+  --vp-c-yellow-light: #fcd253;
-  --vp-c-yellow-lighter: #ffff17;
+  --vp-c-yellow-lighter: #fcfc7c;
   --vp-c-yellow-dark: #e0ad15;
   --vp-c-yellow-darker: #ad850e;
-  --vp-c-yellow-dimm: rgba(255, 197, 23, 0.08);
+  --vp-c-yellow-dimm-1: rgba(255, 197, 23, 0.5);
+  --vp-c-yellow-dimm-2: rgba(255, 197, 23, 0.25);
+  --vp-c-yellow-dimm-3: rgba(255, 197, 23, 0.05);
 
   --vp-c-red: #ed3c50;
-  --vp-c-red-light: #f43771;
+  --vp-c-red-light: #f54e82;
   --vp-c-red-lighter: #fd1d7c;
   --vp-c-red-dark: #cd2d3f;
   --vp-c-red-darker: #ab2131;
-  --vp-c-red-dimm: rgba(237, 60, 80, 0.08);
+  --vp-c-red-dimm-1: rgba(237, 60, 80, 0.5);
+  --vp-c-red-dimm-2: rgba(237, 60, 80, 0.25);
+  --vp-c-red-dimm-3: rgba(237, 60, 80, 0.05);
 }
 
 /**
@@ -266,19 +272,19 @@
   --vp-custom-block-info-bg: var(--vp-c-white-soft);
   --vp-custom-block-info-code-bg: var(--vp-c-gray-light-4);
 
-  --vp-custom-block-tip-border: var(--vp-c-green);
+  --vp-custom-block-tip-border: var(--vp-c-green-dimm-1);
   --vp-custom-block-tip-text: var(--vp-c-green-darker);
-  --vp-custom-block-tip-bg: var(--vp-c-green-dimm);
+  --vp-custom-block-tip-bg: var(--vp-c-green-dimm-3);
   --vp-custom-block-tip-code-bg: var(--vp-custom-block-tip-bg);
 
-  --vp-custom-block-warning-border: var(--vp-c-yellow);
+  --vp-custom-block-warning-border: var(--vp-c-yellow-dimm-1);
   --vp-custom-block-warning-text: var(--vp-c-yellow-darker);
-  --vp-custom-block-warning-bg: var(--vp-c-yellow-dimm);
+  --vp-custom-block-warning-bg: var(--vp-c-yellow-dimm-3);
   --vp-custom-block-warning-code-bg: var(--vp-custom-block-warning-bg);
 
-  --vp-custom-block-danger-border: var(--vp-c-red);
+  --vp-custom-block-danger-border: var(--vp-c-red-dimm-1);
   --vp-custom-block-danger-text: var(--vp-c-red-darker);
-  --vp-custom-block-danger-bg: var(--vp-c-red-dimm);
+  --vp-custom-block-danger-bg: var(--vp-c-red-dimm-3);
   --vp-custom-block-danger-code-bg: var(--vp-custom-block-danger-bg);
 
   --vp-custom-block-details-border: var(--vp-custom-block-info-border);
@@ -292,11 +298,14 @@
   --vp-custom-block-info-bg: var(--vp-c-black-mute);
   --vp-custom-block-info-code-bg: var(--vp-c-gray-dark-4);
 
-  --vp-custom-block-tip-text: var(--vp-c-green);
+  --vp-custom-block-tip-border: var(--vp-c-green-dimm-2);
+  --vp-custom-block-tip-text: var(--vp-c-green-light);
 
-  --vp-custom-block-warning-text: var(--vp-c-yellow);
+  --vp-custom-block-warning-border: var(--vp-c-yellow-dimm-2);
+  --vp-custom-block-warning-text: var(--vp-c-yellow-light);
 
-  --vp-custom-block-danger-text: var(--vp-c-red);
+  --vp-custom-block-danger-border: var(--vp-c-red-dimm-2);
+  --vp-custom-block-danger-text: var(--vp-c-red-light);
 }
 
 /**