feat(theme): enhance readability of custom containers (#1824) (#1989)

close #1824

src/client/theme-default/styles/components/custom-block.css

@@ -58,7 +58,7 @@
 }
 
 .custom-block-title {
-  font-weight: 700;
+  font-weight: 600;
 }
 
 .custom-block p + p {

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

@@ -29,11 +29,11 @@
   --vp-c-green-dimm-2: rgba(16, 185, 129, 0.2);
   --vp-c-green-dimm-3: rgba(16, 185, 129, 0.5);
 
-  --vp-c-yellow: #eab308;
-  --vp-c-yellow-light: #facc15;
-  --vp-c-yellow-lighter: #fde047;
-  --vp-c-yellow-dark: #ca8a04;
-  --vp-c-yellow-darker: #a16207;
+  --vp-c-yellow: #d97706;
+  --vp-c-yellow-light: #f59e0b;
+  --vp-c-yellow-lighter: #fbbf24;
+  --vp-c-yellow-dark: #b45309;
+  --vp-c-yellow-darker: #92400e;
   --vp-c-yellow-dimm-1: rgba(234, 179, 8, 0.05);
   --vp-c-yellow-dimm-2: rgba(234, 179, 8, 0.2);
   --vp-c-yellow-dimm-3: rgba(234, 179, 8, 0.5);
@@ -284,22 +284,22 @@
   --vp-custom-block-info-border: var(--vp-c-border);
   --vp-custom-block-info-text: var(--vp-c-text-2);
   --vp-custom-block-info-bg: var(--vp-c-bg-soft);
-  --vp-custom-block-info-code-bg: var(--vp-c-mute);
+  --vp-custom-block-info-code-bg: var(--vp-c-bg-soft-down);
 
-  --vp-custom-block-tip-border: var(--vp-c-green-dimm-3);
+  --vp-custom-block-tip-border: var(--vp-c-green);
   --vp-custom-block-tip-text: var(--vp-c-green);
-  --vp-custom-block-tip-bg: var(--vp-c-green-dimm-1);
+  --vp-custom-block-tip-bg: var(--vp-c-bg-soft);
   --vp-custom-block-tip-code-bg: var(--vp-custom-block-tip-bg);
 
-  --vp-custom-block-warning-border: var(--vp-c-yellow-dimm-3);
+  --vp-custom-block-warning-border: var(--vp-c-yellow);
   --vp-custom-block-warning-text: var(--vp-c-yellow);
-  --vp-custom-block-warning-bg: var(--vp-c-yellow-dimm-1);
-  --vp-custom-block-warning-code-bg: var(--vp-custom-block-warning-bg);
+  --vp-custom-block-warning-bg: var(--vp-c-bg-soft);
+  --vp-custom-block-warning-code-bg: var(--vp-c-bg-soft-down);
 
-  --vp-custom-block-danger-border: var(--vp-c-red-dimm-3);
+  --vp-custom-block-danger-border: var(--vp-c-red);
   --vp-custom-block-danger-text: var(--vp-c-red);
-  --vp-custom-block-danger-bg: var(--vp-c-red-dimm-1);
-  --vp-custom-block-danger-code-bg: var(--vp-custom-block-danger-bg);
+  --vp-custom-block-danger-bg: var(--vp-c-bg-soft);
+  --vp-custom-block-danger-code-bg: var(--vp-c-bg-soft-down);
 
   --vp-custom-block-details-border: var(--vp-custom-block-info-border);
   --vp-custom-block-details-text: var(--vp-custom-block-info-text);