refactor: make code block shadows consistent with new admonitions (#5215)

Author: slorber

packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx

@@ -210,9 +210,7 @@ export default function CodeBlock({
             <pre
               /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
               tabIndex={0}
-              className={clsx(className, styles.codeBlock, 'thin-scrollbar', {
-                [styles.codeBlockWithTitle]: codeBlockTitle,
-              })}
+              className={clsx(className, styles.codeBlock, 'thin-scrollbar')}
               style={style}>
               <code className={styles.codeBlockLines}>
                 {tokens.map((line, i) => {

packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css

@@ -7,6 +7,9 @@
 
 .codeBlockContainer {
   margin-bottom: var(--ifm-leading);
+  border-radius: var(--ifm-global-radius);
+  box-shadow: var(--ifm-global-shadow-lw);
+  overflow: hidden;
 }
 
 .codeBlockContent {
@@ -16,21 +19,16 @@
 }
 
 .codeBlockTitle {
-  border-top-left-radius: var(--ifm-global-radius);
-  border-top-right-radius: var(--ifm-global-radius);
   border-bottom: 1px solid var(--ifm-color-emphasis-300);
   font-size: var(--ifm-code-font-size);
   font-weight: 500;
   padding: 0.75rem var(--ifm-pre-padding);
 }
 
 .codeBlock {
+  margin: 0;
   padding: 0;
-}
-
-.codeBlockWithTitle {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-radius: 0;
 }
 
 .copyButton {

packages/docusaurus-theme-live-codeblock/src/theme/Playground/styles.module.css

@@ -7,6 +7,9 @@
 
 .playgroundContainer {
   margin-bottom: var(--ifm-leading);
+  border-radius: var(--ifm-global-radius);
+  box-shadow: var(--ifm-global-shadow-lw);
+  overflow: hidden;
 }
 
 .playgroundHeader {
@@ -22,8 +25,6 @@
 .playgroundHeader:first-of-type {
   background: var(--ifm-color-emphasis-600);
   color: var(--ifm-color-content-inverse);
-  border-top-left-radius: var(--ifm-global-radius);
-  border-top-right-radius: var(--ifm-global-radius);
 }
 
 .playgroundEditor {
@@ -34,11 +35,6 @@
 }
 
 .playgroundPreview {
-  border: 1px solid var(--ifm-color-emphasis-200);
   padding: 1rem;
-}
-
-.playgroundPreview:last-of-type, .playgroundEditor:last-of-type {
-  border-bottom-left-radius: var(--ifm-global-radius);
-  border-bottom-right-radius: var(--ifm-global-radius);
+  background-color: var(--ifm-pre-background);
 }