chore(theme/CodeBlock): add box-shadow to codeblock (#2863)

Author: SoonIter

packages/core/src/theme/components/CodeBlock/index.scss

@@ -2,6 +2,8 @@
   position: relative;
   margin: 16px 0;
   border: var(--rp-code-block-border);
+  box-shadow: var(--rp-code-block-shadow);
+
   overflow-x: auto;
   transition: none;
   border-radius: var(--rp-radius);

packages/core/src/theme/components/DocContent/doc.scss

@@ -184,7 +184,7 @@
       border-collapse: separate;
       border-spacing: 0;
 
-      border: 1px solid var(--rp-c-divider-light);
+      border: var(--rp-code-block-border);
       border-radius: var(--rp-radius);
       overflow: hidden;
 

packages/core/src/theme/components/HoverGroup/index.scss

@@ -14,7 +14,7 @@
   border-radius: 8px;
   border: var(--rp-code-block-border);
   background: var(--rp-c-bg);
-  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.04);
+  box-shadow: var(--rp-shadow-2);
   transition: opacity 0.3s ease-in-out;
 
   position: absolute;

packages/core/src/theme/components/Tabs/index.scss

@@ -3,6 +3,7 @@
   border-radius: var(--rp-radius);
   margin: 1rem 0;
   border: var(--rp-code-block-border);
+  box-shadow: var(--rp-code-block-shadow);
 
   .rp-codeblock {
     margin: 0 !important;

packages/core/src/theme/styles/vars/base-vars.css

@@ -52,8 +52,8 @@
   --rp-c-gray-light-4: #e5e5e5;
   --rp-c-gray-light-5: #f2f2f2;
 
-  --rp-shadow-1: 0 1px 4px rgba(0, 0, 0, 0.02), 0 1px 0 rgba(0, 0, 0, 0.06);
-  --rp-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
+  --rp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.02), 0 1px 0 rgba(0, 0, 0, 0.06);
+  --rp-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.07);
   --rp-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
   --rp-shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
   --rp-shadow-5:

packages/core/src/theme/styles/vars/code-vars.css

@@ -7,6 +7,7 @@
   --rp-code-block-bg: var(--rp-c-bg);
 
   --rp-code-block-border: 1px solid var(--rp-c-divider-light);
+  --rp-code-block-shadow: var(--rp-shadow-1);
 }
 
 /* Dark Mode */
@@ -18,4 +19,5 @@
   --rp-code-block-bg: var(--rp-c-bg);
 
   --rp-code-block-border: 1px solid var(--rp-c-divider-light);
+  --rp-code-block-shadow: var(--rp-shadow-1);
 }